From b34f0cba152d393019d74f7e2d4dd8128d61661d Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Tue, 30 Dec 2025 10:53:07 -0500
Subject: [PATCH 1/2] do not show previews for fields that are hidden because
 of conditions

---
 src/components/FieldItem.vue | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/FieldItem.vue b/src/components/FieldItem.vue
index 753a91d..3a6b27b 100644
--- a/src/components/FieldItem.vue
+++ b/src/components/FieldItem.vue
@@ -158,18 +158,21 @@ const onCollapsableHeader = (item: any, index: number) => {
   let thumbnail: string | false = false;
   for (const key in fields.value) {
     const fieldItem = fields.value[key];
-    if (!title && ['string', 'i18n:string', 'i18n', 'date', 'i18n:date'].includes(fieldItem.type)) {
-      if (isFieldI18n(fieldItem)) {
-        title = item[key][locale];
-      } else {
-        title = item[key];
+    const path = fieldKey + `[${index}]`;
+    if (isFieldVisible(fieldItem, path)) {
+      if (!title && ['string', 'i18n:string', 'i18n', 'date', 'i18n:date'].includes(fieldItem.type)) {
+        if (isFieldI18n(fieldItem)) {
+          title = item[key][locale];
+        } else {
+          title = item[key];
+        }
+      }
+      if (fieldItem.type === 'file' && typeof item[key] === 'object' && item[key] !== null && item[key].path && item[key].meta && item[key].meta.type.startsWith('image/')) {
+        thumbnail = serverSettings.publicUrl + item[key].path;
+      }
+      if (thumbnail && title) {
+        break;
       }
-    }
-    if (fieldItem.type === 'file' && typeof item[key] === 'object' && item[key] !== null && item[key].path && item[key].meta && item[key].meta.type.startsWith('image/')) {
-      thumbnail = serverSettings.publicUrl + item[key].path;
-    }
-    if (thumbnail && title) {
-      break;
     }
   }
 

From b7f80ddc1c9cdcd816e8ab991262d58f26e4209c Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Tue, 30 Dec 2025 10:55:06 -0500
Subject: [PATCH 2/2] - do not show previews for fields that are hidden because
 of conditions - user avatar loading indefinitely - copy button for typescript
 section - show uploading bottom sheet when uploading - remove show additional
 infos in File Manager

---
 package.json                          |  2 +-
 src/components/FileFieldItem.vue      |  1 +
 src/components/FileManager.vue        | 20 ++++++---
 src/components/IntroductionDialog.vue |  2 +-
 src/components/JSONms.vue             | 36 +++++++++-------
 src/components/SessionPanel.vue       | 45 +++++++++++---------
 src/components/SitePreview.vue        |  1 +
 src/components/StructureEditor.vue    | 61 +++++++++++++++++++++++----
 src/components/Toolbar.vue            |  2 +-
 src/components/VideoPlayer.vue        | 12 +++++-
 src/composables/shortcut.ts           |  2 +-
 src/composables/structure.ts          |  2 +-
 src/interfaces.ts                     |  9 ++++
 src/stores/global.ts                  | 14 +++++-
 src/utils.ts                          | 24 +++++++++++
 15 files changed, 176 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index a3863e3..1f8cf64 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",
diff --git a/src/components/FileFieldItem.vue b/src/components/FileFieldItem.vue
index 1137021..24eebc4 100644
--- a/src/components/FileFieldItem.vue
+++ b/src/components/FileFieldItem.vue
@@ -110,6 +110,7 @@ const onRemoveFile = (file: IFile) => {
         <VideoPlayer
           v-else-if="isVideo(file)"
           :src="src"
+          :type="file.meta.type"
           :aspect-ratio="(file.meta.width || 1) / (file.meta.height || 1)"
           :style="{ float: 'left', width: thumbnailSize(file).width + 'px', height: thumbnailSize(file).height + 'px' }"
           controls
diff --git a/src/components/FileManager.vue b/src/components/FileManager.vue
index 5167c18..1bb59d2 100644
--- a/src/components/FileManager.vue
+++ b/src/components/FileManager.vue
@@ -221,9 +221,13 @@ const upload = async (fileList: FileList, type: 'remote' | 'local') => {
       }))
     }
   }
+  globalStore.showBottomSheet('Uploading file(s)...', null, 'mdi-upload', true);
   return Promise.all(promises)
     .catch(globalStore.catchError)
-    .finally(() => uploading.value = false);
+    .finally(() => {
+      globalStore.hideBottomSheet();
+      uploading.value = false
+    });
 }
 
 const remove = () => {
@@ -464,7 +468,9 @@ watch(() => globalStore.fileManager.visible, () => {
                 <VideoPlayer
                   v-else-if="item.meta.type?.startsWith('video')"
                   :src="blobFileList[item.path || 'unknown'] || (serverSettings.publicUrl + item.path)"
+                  :type="item.meta.type"
                   :aspect-ratio="(item.meta.width || 1) / (item.meta.height || 1)"
+                  controls
                 />
                 <v-sheet v-else>
                   <v-responsive :aspect-ratio="16 / 9" class="d-flex align-center justify-center text-center">
@@ -568,12 +574,12 @@ watch(() => globalStore.fileManager.visible, () => {
           </v-list-item>
         </v-list>
       </v-menu>
-      <v-checkbox
-        v-if="!smAndDown"
-        v-model="showInfo"
-        label="Show additional info"
-        hide-details
-      />
+<!--      <v-checkbox-->
+<!--        v-if="!smAndDown"-->
+<!--        v-model="showInfo"-->
+<!--        label="Show additional info"-->
+<!--        hide-details-->
+<!--      />-->
       <v-spacer />
       <v-btn
         v-if="canSelect"
diff --git a/src/components/IntroductionDialog.vue b/src/components/IntroductionDialog.vue
index 29abfa3..5417c56 100644
--- a/src/components/IntroductionDialog.vue
+++ b/src/components/IntroductionDialog.vue
@@ -27,7 +27,7 @@ const close = () => {
       src="https://www.youtube.com/embed/QbzHaJ3GeJM?si=HsQLg2_cXyt97vv1"
       title="JSON.ms Youtube Presentation"
       frameborder="0"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       referrerpolicy="strict-origin-when-cross-origin"
       allowfullscreen
     />
diff --git a/src/components/JSONms.vue b/src/components/JSONms.vue
index 0ebb6a0..b157116 100644
--- a/src/components/JSONms.vue
+++ b/src/components/JSONms.vue
@@ -99,19 +99,23 @@ const showActionBar = computed((): boolean => {
   return ['data'].includes((tab.value || '').toString());
 });
 
-const bottomSheetData = ref<{
-  text: string,
-  icon?: string,
-  color?: string,
-  loading?: boolean,
-}>({
-  text: '',
-});
 const showBottomSheet = computed((): boolean => {
-  return downloading.value || userDataLoading.value || structureStates.value.saved;
+  return globalStore.bottomSheet.visible || structureStates.value.saved;
+});
+watch(() => downloading.value, () => {
+  if (downloading.value) {
+    globalStore.showBottomSheet('Downloading files and generating ZIP file. Please wait...', null, null, true)
+  } else {
+    globalStore.hideBottomSheet();
+  }
+});
+watch(() => userDataLoading.value, () => {
+  if (userDataLoading.value) {
+    globalStore.showBottomSheet('Fetching user data. Please wait...', null, null, true)
+  } else {
+    globalStore.hideBottomSheet();
+  }
 });
-watch(() => downloading.value, () => bottomSheetData.value = { text: 'Downloading files and generating ZIP file. Please wait...', loading: true });
-watch(() => userDataLoading.value, () => bottomSheetData.value = { text: 'Fetching user data. Please wait...', loading: true });
 
 const showEditor = computed({
   get(): boolean {
@@ -168,7 +172,7 @@ const onSaveStructure = () => {
   if (canSaveStructure.value) {
     modelStore.structure.content = modelStore.temporaryContent || modelStore.structure.content;
     saveStructure().then(() => {
-      bottomSheetData.value = { text: 'Structure saved!', color: 'success', icon: 'mdi-check' };
+      globalStore.showBottomSheet('Structure saved!', 'success', 'mdi-check');
       syncToFolder(modelStore.structure, ['structure', 'default', 'typings', 'settings', 'index']);
       const newModel = modelStore.structure;
       globalStore.addStructure(newModel);
@@ -395,7 +399,7 @@ if (globalStore.session.loggedIn) {
     disable-resize-watcher
     disable-route-watcher
   >
-    <v-card class="w-100 fill-height d-flex flex-column" theme="dark" tile flat>
+    <v-card class="w-100 fill-height d-flex flex-column" theme="dark" :style="{ left: showEditor ? 0 : '-1px' }" tile flat>
       <StructureEditor
         ref="structureEditor"
         v-model="structure"
@@ -540,11 +544,11 @@ if (globalStore.session.loggedIn) {
   >
     <v-card theme="dark" style="margin: 0 auto">
       <template #prepend>
-        <v-progress-circular v-if="bottomSheetData.loading" color="primary" indeterminate class="mr-4" />
-        <v-icon v-else-if="bottomSheetData.icon" :color="bottomSheetData.color" :icon="bottomSheetData.icon" />
+        <v-progress-circular v-if="globalStore.bottomSheet.loading" color="primary" indeterminate class="mr-4" />
+        <v-icon v-else-if="globalStore.bottomSheet.icon" :color="globalStore.bottomSheet.color" :icon="globalStore.bottomSheet.icon" />
       </template>
       <template #item>
-        {{ bottomSheetData.text }}
+        {{ globalStore.bottomSheet.text }}
       </template>
     </v-card>
   </v-bottom-sheet>
diff --git a/src/components/SessionPanel.vue b/src/components/SessionPanel.vue
index fdf4653..3117727 100644
--- a/src/components/SessionPanel.vue
+++ b/src/components/SessionPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useGlobalStore } from '@/stores/global';
-import { ref } from 'vue';
+import {computed, ref} from 'vue';
 import { Services } from '@/services';
 import {useModelStore} from '@/stores/model';
 
@@ -42,6 +42,12 @@ const logout = () => {
     })
   })
 }
+
+const userInitials = computed((): string => {
+  return globalStore.session.user?.name.trim().split(' ')
+      .map(part => part.substring(0, 1))
+      .join('').substring(0, 2) || '?';
+})
 </script>
 
 <template>
@@ -49,24 +55,25 @@ const logout = () => {
     <template #activator="{ props }">
       <v-btn v-bind="props" :icon="dense" height="40">
         <template v-if="globalStore.session.loggedIn">
-          <v-avatar size="32" color="primary">
-            <v-img
-              v-if="globalStore.session.user?.avatar"
-              :src="globalStore.session.user?.avatar"
-              alt="Avatar"
-            >
-              <template #placeholder>
-                <div class="d-flex align-center justify-center fill-height">
-                  <v-progress-circular
-                    color="surface"
-                    indeterminate
-                    size="16"
-                    width="1"
-                  />
-                </div>
-              </template>
-            </v-img>
-            <strong v-else>{{ globalStore.session.user?.name.substring(0, 1) }}</strong>
+          <v-avatar size="32" color="secondary">
+<!--            <v-img-->
+<!--              v-if="globalStore.session.user?.avatar"-->
+<!--              :src="globalStore.session.user?.avatar"-->
+<!--              alt="Avatar"-->
+<!--            >-->
+<!--              <template #placeholder>-->
+<!--                <div class="d-flex align-center justify-center fill-height">-->
+<!--                  <v-progress-circular-->
+<!--                    color="surface"-->
+<!--                    indeterminate-->
+<!--                    size="16"-->
+<!--                    width="1"-->
+<!--                  />-->
+<!--                </div>-->
+<!--              </template>-->
+<!--            </v-img>-->
+<!--            <strong v-else>{{ globalStore.session.user?.name.substring(0, 1) }}</strong>-->
+            <strong>{{ userInitials }}</strong>
           </v-avatar>
           <strong v-if="showUsername" class="ml-3">{{ globalStore.session.user?.name }}</strong>
         </template>
diff --git a/src/components/SitePreview.vue b/src/components/SitePreview.vue
index aea5360..873afbe 100644
--- a/src/components/SitePreview.vue
+++ b/src/components/SitePreview.vue
@@ -236,6 +236,7 @@ defineExpose({
               :user-data="userData"
               class="fill-height"
               columns
+              show-tabs
               @save="onSaveStructureContent"
               @create="onCreateStructure"
               @change="onStructureContentChange"
diff --git a/src/components/StructureEditor.vue b/src/components/StructureEditor.vue
index eb3f7a3..961e290 100644
--- a/src/components/StructureEditor.vue
+++ b/src/components/StructureEditor.vue
@@ -13,12 +13,14 @@ import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
 import {useSyncing} from "@/composables/syncing";
 import {LineCounter, parseDocument} from "yaml";
+import {copyToClipboard} from "@/utils";
 // import yaml from 'js-yaml';
 
 const emit = defineEmits(['save', 'create', 'change', 'focus', 'blur']);
 const structure = defineModel<IStructure>({ required: true });
-const { columns = false, userData } = defineProps<{
+const { columns = false, showTabs = false, userData } = defineProps<{
   columns?: boolean,
+  showTabs?: boolean,
   structureData: IStructureData,
   userData: any
 }>();
@@ -42,6 +44,8 @@ const blueprintEditorTypings: Ref<VAceEditorInstance | null> = ref(null);
 const blueprintEditorDefault: Ref<VAceEditorInstance | null> = ref(null);
 const blueprintTypings = ref('')
 const blueprintDefault = ref('')
+const disableTypings = ref(false)
+const disableDefaultObjects = ref(false)
 const blueprintLanguage = ref<'typescript'>('typescript')
 
 const sectionMenu = ref(false);
@@ -79,8 +83,8 @@ const sections = ref([{
   disabled: () => false,
 }, {
   key: 'blueprints',
-  icon: 'mdi-ruler-square',
-  title: "Blueprints",
+  icon: 'mdi-language-typescript',
+  title: "Typescript",
   subtitle: "TypeScript types and default data",
   disabledSubtitle: (): string => 'Must be logged in',
   disabled: () => false
@@ -194,6 +198,22 @@ const onBlur = () => {
   emit('blur');
 }
 
+const copy = (content: string, type: 'typings' | 'defaults') => {
+  switch (type) {
+    case 'typings': disableTypings.value = true; break;
+    case 'defaults': disableDefaultObjects.value = true; break;
+  }
+  copyToClipboard(content);
+  globalStore.showBottomSheet('Copied to clipboard!', null, 'mdi-clipboard-check-outline');
+  setTimeout(() => {
+    globalStore.hideBottomSheet();
+    switch (type) {
+      case 'typings': disableTypings.value = false; break;
+      case 'defaults': disableDefaultObjects.value = false; break;
+    }
+  }, 1000);
+}
+
 const printAnnotations = (content: string) => {
   const instance = structureEditor.value?.getAceInstance();
   if (instance) {
@@ -526,7 +546,16 @@ watch(() => globalStore.userSettings.data, () => {
   />
   <div v-else class="d-flex flex-column">
     <div v-if="globalStore.uiConfig.structure_menu" class="d-flex align-center pa-1" style="gap: 1rem">
-      <v-menu v-model="sectionMenu" contained :close-on-content-click="false">
+      <v-tabs v-if="showTabs" density="compact">
+        <v-tab
+          v-for="section in filteredSections"
+          :key="section.key"
+          :prepend-icon="section.disabled() ? 'mdi-alert' : section.icon"
+          :text="section.title"
+          @click="setSection(section)"
+        />
+      </v-tabs>
+      <v-menu v-else v-model="sectionMenu" contained :close-on-content-click="false">
         <template #activator="{ props }">
           <v-btn v-bind="props">
             <v-icon :icon="selectedSection?.icon" start />
@@ -700,11 +729,19 @@ watch(() => globalStore.userSettings.data, () => {
           }]"
         >
           <div v-if="globalStore.userSettings.data.blueprintsIncludeTypings" class="d-flex flex-column" style="flex: 1">
-            <v-alert tile class="py-4 text-caption">
+            <div class="d-flex justify-space-between bg-sheet pa-2 text-caption">
               <div class="text-truncate">
                 <strong>Readonly:</strong> Typings are generated automatically.
               </div>
-            </v-alert>
+              <v-btn
+                :disabled="disableTypings"
+                size="x-small"
+                variant="tonal"
+                @click="() => copy(blueprintTypings, 'typings')"
+              >
+                Copy
+              </v-btn>
+            </div>
             <v-ace-editor
               ref="blueprintEditorTypings"
               v-model:value="blueprintTypings"
@@ -716,11 +753,19 @@ watch(() => globalStore.userSettings.data, () => {
             />
           </div>
           <div class="d-flex flex-column" style="flex: 1">
-            <v-alert tile class="py-4 text-caption">
+            <div class="d-flex justify-space-between bg-sheet pa-2 text-caption">
               <div class="text-truncate">
                 <strong>Readonly:</strong> Default objects are generated automatically.
               </div>
-            </v-alert>
+              <v-btn
+                :disabled="disableDefaultObjects"
+                size="x-small"
+                variant="tonal"
+                @click="() => copy(blueprintDefault, 'defaults')"
+              >
+                Copy
+              </v-btn>
+            </div>
             <v-ace-editor
               ref="blueprintEditorDefault"
               v-model:value="blueprintDefault"
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 2715221..b3a3d5b 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -152,7 +152,7 @@ watch(() => currentRoute.params.locale, () => {
     <template #prepend>
       <v-tooltip
         v-if="globalStore.uiConfig.toolbar_menu"
-        text="Sections (CTRL+Q)"
+        text="Sections (ALT+Q)"
         location="bottom"
       >
         <template #activator="{ props }">
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index 5ce1893..522578c 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -2,6 +2,9 @@
 import {ref} from "vue";
 
 const src = defineModel<string>('src', { required: true });
+const { type } = defineProps<{
+  type?: string,
+}>();
 
 const hasError = ref(false);
 const onError = () => {
@@ -21,11 +24,18 @@ const onError = () => {
     </div>
     <video
       v-else
+      v-bind="$attrs"
       :src="src"
       width="100%"
       disablePictureInPicture
       @error="onError"
-    />
+    >
+      <source
+        :src="src"
+        :type="type"
+      >
+      Your browser does not support the video tag.
+    </video>
   </v-responsive>
 </template>
 
diff --git a/src/composables/shortcut.ts b/src/composables/shortcut.ts
index 651e959..cc8a7e2 100644
--- a/src/composables/shortcut.ts
+++ b/src/composables/shortcut.ts
@@ -57,7 +57,7 @@ export function useShortcut(options: {
       }
     }
   }, {
-    keys: ['ctrl', 'q'],
+    keys: ['alt', 'q'],
     preventDefault: true,
     handler() {
       globalStore.setAdmin({
diff --git a/src/composables/structure.ts b/src/composables/structure.ts
index 09b981f..c086d05 100644
--- a/src/composables/structure.ts
+++ b/src/composables/structure.ts
@@ -615,7 +615,7 @@ export function useStructure() {
 
   const canSaveStructure = computed(() => {
     return !structureIsPristine.value
-      && !structureHasSettingsError.value
+      && !structureHasSettingsError.value;
   })
 
   const canDeleteStructure = computed((): boolean => {
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 5f68b18..eac065f 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -27,6 +27,14 @@ export interface IPrompt {
   cancelIcon?: string | undefined,
 }
 
+export interface IBottomSheet {
+  visible: boolean,
+  text: string,
+  icon?: string,
+  color?: string,
+  loading?: boolean,
+}
+
 export interface IAdmin {
   drawer: boolean,
   structure: boolean,
@@ -101,6 +109,7 @@ export interface IUIConfig {
   sidebar_advanced_server: boolean
   sidebar_advanced_upload: boolean
   sidebar_tutorial: boolean
+  sidebar_theme: boolean
   sidebar_github: boolean
   sidebar_footer: boolean
 
diff --git a/src/stores/global.ts b/src/stores/global.ts
index dca238e..43fe8dc 100644
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -8,7 +8,7 @@ import type {
   IStructure,
   IFileManager,
   IFile,
-  IUserSettings, IUIConfig
+  IUserSettings, IUIConfig, IBottomSheet
 } from '@/interfaces';
 
 const defaultUIConfig: IUIConfig = {
@@ -46,6 +46,7 @@ const defaultUIConfig: IUIConfig = {
   sidebar_advanced_server: true,
   sidebar_advanced_upload: true,
   sidebar_tutorial: true,
+  sidebar_theme: true,
   sidebar_github: true,
   sidebar_footer: true,
 
@@ -109,6 +110,7 @@ const defaultUserSettings: IUserSettings = Object.assign({}, {
 export const useGlobalStore = defineStore('global', {
   state: (): {
     theme: 'dark' | 'light',
+    bottomSheet: IBottomSheet,
     admin: IAdmin,
     snack: ISnack,
     error: IError,
@@ -122,6 +124,10 @@ export const useGlobalStore = defineStore('global', {
     },
   } => ({
     theme: 'light',
+    bottomSheet: {
+      visible: false,
+      text: '',
+    },
     prompt: {
       body: '',
       visible: false,
@@ -195,6 +201,12 @@ export const useGlobalStore = defineStore('global', {
       }
       throw error;
     },
+    showBottomSheet(text: string, color: string | null = null, icon: string | null = null, loading = false) {
+      Object.assign(this.bottomSheet, { visible: true, text, color, icon, loading });
+    },
+    hideBottomSheet() {
+      this.bottomSheet.visible = false;
+    },
     setAdmin(admin: Partial<IAdmin>) {
       Object.assign(this.admin, admin);
     },
diff --git a/src/utils.ts b/src/utils.ts
index 5824010..e8f6496 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -713,3 +713,27 @@ export function cleanProperties(data: any, defaultValue: any): any {
 
   return sameType(data, defaultValue) ? data : null
 }
+
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.focus()
+    textarea.select()
+
+    const success = document.execCommand('copy')
+    document.body.removeChild(textarea)
+
+    return success
+  } catch {
+    return false
+  }
+}