Add functionality to import model assets

src/app/App.tsx

@@ -1864,11 +1864,11 @@ export function App({ store, initialStatusMessage }: AppProps) {
     }
   };
 
-  const handleImportButtonClick = () => {
+  const handleImportJsonButtonClick = () => {
     importInputRef.current?.click();
   };
 
-  const handleImportChange = async (event: ChangeEvent<HTMLInputElement>) => {
+  const handleImportJsonChange = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.currentTarget.files?.[0];
 
     if (file === undefined) {
@@ -1886,6 +1886,53 @@ export function App({ store, initialStatusMessage }: AppProps) {
     }
   };
 
+  const handleImportModelButtonClick = () => {
+    importModelInputRef.current?.click();
+  };
+
+  const handleImportModelChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.currentTarget.files?.[0];
+
+    if (file === undefined) {
+      return;
+    }
+
+    if (projectAssetStorage === null) {
+      setAssetStatusMessage("Imported model assets require project asset storage. IndexedDB is unavailable in this browser.");
+      event.currentTarget.value = "";
+      return;
+    }
+
+    try {
+      const importedModel = await importModelAssetFromFile(file, projectAssetStorage);
+
+      store.executeCommand(
+        createImportModelAssetCommand({
+          asset: importedModel.asset,
+          modelInstance: importedModel.modelInstance,
+          label: `Import ${importedModel.asset.sourceName}`
+        })
+      );
+
+      loadedModelAssetsRef.current = {
+        ...loadedModelAssetsRef.current,
+        [importedModel.asset.id]: importedModel.loadedAsset
+      };
+      setLoadedModelAssets((currentLoadedAssets) => ({
+        ...currentLoadedAssets,
+        [importedModel.asset.id]: importedModel.loadedAsset
+      }));
+      setAssetStatusMessage(null);
+      setStatusMessage(`Imported ${importedModel.asset.sourceName} and placed a model instance.`);
+    } catch (error) {
+      const message = getErrorMessage(error);
+      setStatusMessage(message);
+      setAssetStatusMessage(message);
+    } finally {
+      event.currentTarget.value = "";
+    }
+  };
+
   const applyFaceMaterial = (materialId: string) => {
     if (selectedBrush === null || selectedFaceId === null || selectedFace === null) {
       setStatusMessage("Select a single box face before applying a material.");