misc improvements 2

src/App.vue

@@ -1,35 +1,62 @@
 <script setup lang="ts">
-import ModelViewer from './ModelViewer.vue'
-
-import {ref} from "vue";
+import {defineAsyncComponent, ref} from "vue";
+import Sidebar from "./Sidebar.vue";
 import Loading from "./Loading.vue";
+import ModelViewerOverlay from "./ModelViewerOverlay.vue";
+
+// NOTE: The ModelViewer library is big, so we split it and import it asynchronously
+const ModelViewerWrapper = defineAsyncComponent({
+  loader: () => import('./ModelViewerWrapper.vue'),
+  loadingComponent: Loading,
+  delay: 0,
+});
 
 // Open models by default on wide screens
-let modelsOpened = ref(window.innerWidth > 600);
+let openSidebars = ref(window.innerWidth > 1200);
 </script>
 
 <template>
   <v-layout full-height>
-    <v-btn icon="$menu" @click="modelsOpened = !modelsOpened" style="position: absolute; z-index: 1"/>
-    <v-navigation-drawer v-model="modelsOpened" permanent>
-      <v-toolbar>
-        <v-toolbar-title>Models</v-toolbar-title>
-        <v-toolbar-items>
-          <v-btn icon="$close" @click="modelsOpened = !modelsOpened"/>
-        </v-toolbar-items>
-      </v-toolbar>
-      <v-list density="compact" nav> <!-- TODO: Accordion -->
-        <v-list-item><Loading/></v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-main >
-      <ModelViewer/>
+    <!-- The main content of the app is the model-viewer with the SVG "2D" overlay -->
+    <v-main id="main">
+      <model-viewer-wrapper/>
+      <model-viewer-overlay/>
     </v-main>
+    <!-- The left collapsible sidebar has the list of models -->
+    <sidebar :opened-init="openSidebars" side="left">
+      <template #toolbar>
+        <v-toolbar-title>Models</v-toolbar-title>
+      </template>
+      <v-expansion-panels>
+        <v-expansion-panel key="model-id">
+          <v-expansion-panel-title>? F ? E ? V | Model Name</v-expansion-panel-title>
+          <v-expansion-panel-text>
+            Content
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </sidebar>
+    <!-- The right collapsible sidebar has the list of tools -->
+    <sidebar :opened-init="openSidebars" side="right" width="150">
+      <template #toolbar>
+        <v-toolbar-title>Tools</v-toolbar-title>
+      </template>
+      <v-btn>Camera</v-btn>
+    </sidebar>
   </v-layout>
 </template>
 
+<!--suppress CssUnusedSymbol -->
 <style>
-html, body {
+html, body, #app, #main {
   height: 100%;
 }
+</style>
+
+<!--suppress CssUnusedSymbol -->
+<style scoped>
+/* Fix bug in hidden expansion panel text next to active expansion panel */
+.v-expansion-panel-title--active + .v-expansion-panel-text {
+  display: flex !important;
+}
 </style>

src/Loading.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container style="height: 100%">
+  <v-container>
     <v-row justify="center" style="height: 100%">
       <v-col align-self="center">
         <v-progress-circular indeterminate style="display: block; margin: 0 auto;"/>

src/ModelViewer.vue

@@ -12,8 +12,6 @@ const ModelViewerWrapper = defineAsyncComponent({
 </script>
 
 <template>
-  <model-viewer-wrapper/>
-  <model-viewer-overlay/>
 </template>
 
 <style scoped>

src/Sidebar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {ref} from "vue";
+
+const props = defineProps({
+  openedInit: Boolean,
+  side: String,
+  width: Number
+});
+
+let opened = ref(props.openedInit);
+const openIcon = props.side === 'left' ? '$next' : '$prev';
+
+</script>
+
+<template>
+  <v-btn :icon="openIcon" @click="opened = !opened" class="open-button" :class="side"/>
+  <v-navigation-drawer v-model="opened" permanent :location="side" :width="props.width">
+    <v-toolbar density="compact">
+      <slot name="toolbar"></slot>
+      <v-toolbar-items>
+        <slot name="toolbar-items"></slot>
+        <v-btn icon="$close" @click="opened = !opened"/>
+      </v-toolbar-items>
+    </v-toolbar>
+    <slot/>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+.open-button {
+  position: absolute;
+  bottom: 0;
+  /*z-index: 1;*/
+  border-radius: 0;
+}
+
+.open-button.right {
+  right: 0;
+}
+</style>

src/index.ts

@@ -1,14 +1,10 @@
-// @ts-ignore
 globalThis.__VUE_OPTIONS_API__ = process.env.NODE_ENV === "development"
-// @ts-ignore
 globalThis.__VUE_PROD_DEVTOOLS__ = process.env.NODE_ENV === "development"
-// @ts-ignore
 globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = process.env.NODE_ENV === "development"
 
 // import {createApp} from 'vue/dist/vue.esm-browser.prod.js'
 // import {createApp} from 'vue/dist/vue.esm-browser.js'
 import {createApp} from 'vue'
-// @ts-ignore
 import App from './App.vue'
 
 

src/settings.ts

@@ -1,6 +1,3 @@
-// @ts-ignore
-// import logo from "url:../assets/fox.glb";
-
 // These are the default values for the settings, which are overridden below
 export const settings = {
     // @ts-ignore
@@ -26,7 +23,7 @@ function parseSetting(name: string, value: string): any {
         } else {
             toExtend = prevValue;
         }
-        toExtend.push(parseSetting(name+".0", value));
+        toExtend.push(parseSetting(name + ".0", value));
         return toExtend;
     }
     switch (typeof prevValue) {

src/shims.d.ts

@@ -0,0 +1,6 @@
+// Avoids typescript error when importing files
+declare module '*.vue'
+declare module 'import.meta' {
+    const url: string
+    export default url
+}