From 10032dff1510ada5e8aa9f5be65485c9d991e427 Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Tue, 16 Dec 2025 08:10:49 -0500
Subject: [PATCH 1/5] Allow triggers to be scoped to development or user #89

---
 docs/structure.md                  |  3 +++
 src/assets/example-structure.yaml  |  1 +
 src/components/ActionBar.vue       | 14 ++++++++++++++
 src/components/JSONms.vue          | 13 +++++++++++--
 src/components/SitePreview.vue     | 24 +++++++++++++++++++-----
 src/components/StructureEditor.vue | 21 ++++++++++++++++++---
 src/components/Toolbar.vue         | 11 ++++++++++-
 src/components/TriggerMenu.vue     | 14 +++++++++-----
 src/interfaces.ts                  |  1 +
 src/stores/global.ts               |  2 +-
 10 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/docs/structure.md b/docs/structure.md
index 26bc200..de928f9 100644
--- a/docs/structure.md
+++ b/docs/structure.md
@@ -447,6 +447,9 @@ triggers:
 
     # URL called when the trigger is executed
     url: https://json.ms/?action=build
+    
+    # Location of the trigger button (structure, toolbar, data)
+    location: editor
 
     # HTTP method used for the request
     method: POST
diff --git a/src/assets/example-structure.yaml b/src/assets/example-structure.yaml
index 69232af..3a28b6d 100644
--- a/src/assets/example-structure.yaml
+++ b/src/assets/example-structure.yaml
@@ -22,6 +22,7 @@ triggers:
     label: Build
     icon: mdi-play
     url: [BUILD_URL]/build
+    location: structure
     method: POST
     headers:
       Content-Type: application/json
diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index aa41544..f287ab8 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -6,6 +6,14 @@ import {useGlobalStore} from '@/stores/global';
 import {computed} from "vue";
 import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
+import TriggerMenu from "@/components/TriggerMenu.vue";
+import type {IStructure, IStructureData} from "@/interfaces";
+
+const structure = defineModel<IStructure>({ required: true });
+const { structureData, userData } = defineProps<{
+  structureData: IStructureData,
+  userData: any,
+}>();
 
 const globalStore = useGlobalStore();
 const modelStore = useModelStore();
@@ -56,6 +64,12 @@ const reset = () => {
 </script>
 
 <template>
+  <TriggerMenu
+    :model-value="structureData"
+    :structure="structure"
+    :user-data="userData"
+    location="data"
+  />
   <div
     v-if="globalStore.session.loggedIn"
     class="w-100 pr-3"
diff --git a/src/components/JSONms.vue b/src/components/JSONms.vue
index e92d568..f78117a 100644
--- a/src/components/JSONms.vue
+++ b/src/components/JSONms.vue
@@ -323,6 +323,7 @@ if (globalStore.session.loggedIn) {
     :structures="structures"
     :structure-data="structureParsedData"
     :default-locale="getAvailableLocale()"
+    :user-data="modelStore.userData"
     @refresh="onRefreshPreview"
     @create="onCreateStructure"
     @save="onSaveStructure"
@@ -442,7 +443,11 @@ if (globalStore.session.loggedIn) {
     <template #append>
       <v-divider />
       <div class="d-flex align-center justify-space-between pl-3" style="height: 4rem">
-        <ActionBar />
+        <ActionBar
+          :model-value="structure"
+          :structure-data="structureParsedData"
+          :user-data="modelStore.userData"
+        />
       </div>
     </template>
 
@@ -466,7 +471,11 @@ if (globalStore.session.loggedIn) {
       class="pl-3"
     >
       <div class="w-100 d-flex align-center justify-space-between">
-        <ActionBar />
+        <ActionBar
+          :model-value="structure"
+          :structure-data="structureParsedData"
+          :user-data="modelStore.userData"
+        />
       </div>
     </v-app-bar>
   </v-expand-transition>
diff --git a/src/components/SitePreview.vue b/src/components/SitePreview.vue
index 0ff4fee..3b1a145 100644
--- a/src/components/SitePreview.vue
+++ b/src/components/SitePreview.vue
@@ -24,7 +24,7 @@ const loaded = ref(false);
 const loading = ref(false);
 const killIframe = ref(false);
 const siteNotCompatibleSnack = ref(false);
-const hoveringEditor = ref(false);
+const expanded = ref(false);
 const { layoutSize, windowHeight, layoutPx } = useLayout();
 const { reloading, siteCompatible, sendMessageToIframe, getPathsFromSectionKey, listenIframeMessage, sendUserDataToIframe } = useIframe();
 const { userDataLoading } = useUserData();
@@ -33,7 +33,7 @@ const iframeErrorMsg = ref('This site is not JSONms compatible');
 const editorHeight = computed((): number => {
   const padding = (globalStore.userSettings.data.layoutSitePreviewPadding ? 96 : 63);
   const result = windowHeight.value - padding;
-  if (hoveringEditor.value) {
+  if (expanded.value) {
     return result + 32;
   }
   return result - layoutSize.value.preview.height;
@@ -153,6 +153,7 @@ defineExpose({
     :width="layoutSize.preview.width"
     :location="globalStore.userSettings.data.layoutSitePreviewLocation"
     scrim
+    class="site-preview-drawer"
     color="transparent"
     border="0"
     permanent
@@ -228,8 +229,6 @@ defineExpose({
             flat
             class="editor-card"
             theme="dark"
-            @mouseover="hoveringEditor = true"
-            @mouseleave="hoveringEditor = false"
           >
             <StructureEditor
               ref="structureEditor"
@@ -241,7 +240,19 @@ defineExpose({
               @save="onSaveStructureContent"
               @create="onCreateStructure"
               @change="onStructureContentChange"
-            />
+            >
+              <template #header.end>
+                <v-btn
+                  size="small"
+                  @click="expanded = !expanded"
+                >
+                  <span v-if="expanded">Collapse</span>
+                  <span v-else>Expand</span>
+                  <v-icon v-if="expanded" icon="mdi-unfold-less-horizontal" end />
+                  <v-icon v-else icon="mdi-unfold-more-horizontal" end />
+                </v-btn>
+              </template>
+            </StructureEditor>
           </v-card>
         </div>
       </v-expand-transition>
@@ -259,4 +270,7 @@ defineExpose({
 .editor-card {
   transition: height 300ms ease;
 }
+.site-preview-drawer ::v-deep .v-navigation-drawer__content {
+  overflow: hidden !important;
+}
 </style>
diff --git a/src/components/StructureEditor.vue b/src/components/StructureEditor.vue
index 5064715..8668a01 100644
--- a/src/components/StructureEditor.vue
+++ b/src/components/StructureEditor.vue
@@ -13,7 +13,7 @@ import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
 // import yaml from 'js-yaml';
 
-const emit = defineEmits(['save', 'create', 'change'])
+const emit = defineEmits(['save', 'create', 'change', 'focus', 'blur']);
 const structure = defineModel<IStructure>({ required: true });
 const { columns = false, userData } = defineProps<{
   columns?: boolean,
@@ -155,6 +155,16 @@ const findNeedleInString = (haystack: string, needle: string) => {
   return -1
 }
 
+
+const onFocus = () => {
+  setTimeout(() => {
+    emit('focus');
+  }, 100);
+}
+const onBlur = () => {
+  emit('blur');
+}
+
 const scrollToSection = (section: string) => {
   const instance = structureEditor.value?.getAceInstance();
   if (instance) {
@@ -443,8 +453,8 @@ watch(() => globalStore.userSettings.data, () => {
     text="Access to this template has not been granted by the owner."
   />
   <div v-else class="d-flex flex-column">
-    <div class="d-flex align-center pa-1">
-      <v-menu v-model="sectionMenu" :close-on-content-click="false">
+    <div class="d-flex align-center pa-1" style="gap: 1rem">
+      <v-menu v-model="sectionMenu" contained :close-on-content-click="false">
         <template #activator="{ props }">
           <v-btn v-bind="props">
             <v-icon :icon="selectedSection?.icon" start />
@@ -466,6 +476,7 @@ watch(() => globalStore.userSettings.data, () => {
         </v-list>
       </v-menu>
       <v-spacer />
+      <slot name="header.end"></slot>
       <div class="d-flex align-center pr-1" style="gap: 0.5rem">
         <div
           v-if="!globalStore.userSettings.data.editorLiveUpdate"
@@ -514,6 +525,8 @@ watch(() => globalStore.userSettings.data, () => {
               theme="github_dark"
               class="fill-height"
               @change="onChange"
+              @focus="onFocus"
+              @blur="onBlur"
             />
           </div>
           <div class="pa-2 d-flex w-100" style="flex: 0; gap: 0.5rem">
@@ -553,6 +566,8 @@ watch(() => globalStore.userSettings.data, () => {
                 :model-value="structureData"
                 :structure="structure"
                 :user-data="userData"
+                location="structure"
+                size="small"
               />
               <v-tooltip
                 v-if="isFolderSynced(modelStore.structure, 'typescript')"
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 02e0d83..986671b 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -16,10 +16,12 @@ import {useLayout} from '@/composables/layout';
 import {useIframe} from '@/composables/iframe';
 import {useModelStore} from "@/stores/model";
 import {useMigration} from "@/composables/migration";
+import TriggerMenu from "@/components/TriggerMenu.vue";
 
 const structure = defineModel<IStructure>({ required: true });
-const { structureData, structures = [], defaultLocale = 'en-US' } = defineProps<{
+const { structureData, structures = [], defaultLocale = 'en-US', userData } = defineProps<{
   structureData: IStructureData,
+  userData: any,
   structures: IStructure[],
   defaultLocale?: string,
 }>();
@@ -224,6 +226,13 @@ watch(() => currentRoute.params.locale, () => {
         </v-tooltip>
       </v-btn-toggle>
 
+      <TriggerMenu
+        :model-value="structureData"
+        :structure="structure"
+        :user-data="userData"
+        location="toolbar"
+      />
+
       <v-alert
         v-if="!globalStore.session.loggedIn && windowWidth > 1700"
         density="comfortable"
diff --git a/src/components/TriggerMenu.vue b/src/components/TriggerMenu.vue
index cc6d33c..dc09f4d 100644
--- a/src/components/TriggerMenu.vue
+++ b/src/components/TriggerMenu.vue
@@ -5,9 +5,11 @@ import {Services} from "@/services";
 import {useGlobalStore} from "@/stores/global";
 
 const structureData = defineModel<IStructureData>({ required: true });
-const { structure, userData } = defineProps<{
+const { structure, userData, location = 'structure', size } = defineProps<{
   structure: IStructure,
   userData: IStructure,
+  location?: 'structure' | 'toolbar' | 'data'
+  size?: string
 }>();
 
 const globalStore = useGlobalStore();
@@ -24,7 +26,7 @@ const triggers = computed((): ITrigger[] => {
       ...structureData.value.triggers[key],
     })
   }
-  return triggers;
+  return triggers.filter(item => item.location === location || (!item.location && location === 'editor'));
 })
 const hasManyItems = computed((): boolean => {
   return triggers.value.length > 1;
@@ -33,10 +35,12 @@ const otherTriggers = computed((): ITrigger[] => {
   return triggers.value.filter((item: ITrigger) => item !== firstTrigger.value && item.key !== lastTrigger.value?.key);
 })
 const firstTrigger = computed((): ITrigger => {
-  return lastTrigger.value || triggers.value[0] || {
+  return Object.assign({
+    icon: 'mdi-wrench'
+  }, lastTrigger.value || triggers.value[0] || {
     label: '',
     url: '',
-  }
+  });
 })
 
 const run = (trigger: ITrigger): Promise<any> => {
@@ -60,7 +64,7 @@ const run = (trigger: ITrigger): Promise<any> => {
       <div class="position-relative" style="flex: 1">
         <v-btn
           variant="outlined"
-          size="small"
+          :size="size"
           :disabled="running"
           :text="firstTrigger.label"
           :class="hasManyItems ? ['w-100 pr-12'] : []"
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 94c05a6..4bcfc1b 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -190,6 +190,7 @@ export interface ITrigger {
   headers?: {[key: string]: string}
   method?: string
   url: string
+  location: 'editor' | 'toolbar'
 }
 
 export interface IStructureData {
diff --git a/src/stores/global.ts b/src/stores/global.ts
index 4561b8d..5567c0b 100644
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -88,7 +88,7 @@ export const useGlobalStore = defineStore('global', {
         layoutAutoSplit: true,
         blueprintsIncludeTypings: true,
         blueprintsReadFromData: true,
-        blueprintsReadFromStructure: false,
+        blueprintsReadFromStructure: true,
         blueprintsWriteToData: true,
         blueprintsWriteToDefault: true,
         blueprintsWriteToIndex: true,

From e3cd34c0cb6ad56e97f7b3b63ef2cbe8031ede63 Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Tue, 16 Dec 2025 08:15:29 -0500
Subject: [PATCH 2/5] bump version #89

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 605cc76..4dac3c5 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.2.16",
+  "version": "1.2.17",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",

From 07124ead8e6b1c18742eaba6835a8a5bdcfa8227 Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Tue, 16 Dec 2025 08:44:00 -0500
Subject: [PATCH 3/5] Modial dialog close icon #90

---
 components.d.ts                         |   1 +
 src/components/EndpointManagerModal.vue | 124 +++--
 src/components/Error.vue                |  30 +-
 src/components/FileManager.vue          | 476 ++++++++++---------
 src/components/IntroductionDialog.vue   |  53 ++-
 src/components/JsonEditModal.vue        |  60 ++-
 src/components/MigrationDialog.vue      | 598 ++++++++++++------------
 src/components/ModalDialog.vue          |  35 ++
 src/components/NewStructureModal.vue    |  67 ++-
 src/components/Prompt.vue               |  60 ++-
 src/components/UserSettingsDialog.vue   | 412 ++++++++--------
 11 files changed, 968 insertions(+), 948 deletions(-)
 create mode 100644 src/components/ModalDialog.vue

diff --git a/components.d.ts b/components.d.ts
index 768edee..b12db8e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -34,6 +34,7 @@ declare module 'vue' {
     LocaleSwitcher: typeof import('./src/components/LocaleSwitcher.vue')['default']
     Logo: typeof import('./src/components/Logo.vue')['default']
     MigrationDialog: typeof import('./src/components/MigrationDialog.vue')['default']
+    ModalDialog: typeof import('./src/components/ModalDialog.vue')['default']
     NewStructureModal: typeof import('./src/components/NewStructureModal.vue')['default']
     Prompt: typeof import('./src/components/Prompt.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/EndpointManagerModal.vue b/src/components/EndpointManagerModal.vue
index 54d5e79..6582138 100644
--- a/src/components/EndpointManagerModal.vue
+++ b/src/components/EndpointManagerModal.vue
@@ -7,6 +7,7 @@ import {deepToRaw} from '@/utils';
 import {useStructure} from '@/composables/structure';
 import Rules from '@/rules';
 import {useEndpoints} from "@/composables/endpoints";
+import ModalDialog from '@/components/ModalDialog.vue';
 
 const globalStore = useGlobalStore();
 const visible = defineModel<boolean>({ default: false });
@@ -68,75 +69,72 @@ watch(visible, () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="visible"
     :persistent="!isPristine"
+    title="Endpoint Manager"
+    prepend-icon="mdi-webhook"
     width="600"
     scrollable
   >
-    <v-card
-      title="Endpoint Manager"
-      prepend-icon="mdi-webhook"
-    >
-      <v-card-text>
+    <v-card-text>
 
-        <p class="mb-4">
-          Every endpoint you create instantiate a new <i>cypher</i> and <i>secret API key</i> that you can reuse with other projects. That way, you can centralize your data on a specific server if required.
-        </p>
+      <p class="mb-4">
+        Every endpoint you create instantiate a new <i>cypher</i> and <i>secret API key</i> that you can reuse with other projects. That way, you can centralize your data on a specific server if required.
+      </p>
 
-        <v-alert type="info" variant="tonal" class="mb-4">
-          To get assistance with running your own endpoint instance, be sure to consult the Integration panel.
-        </v-alert>
+      <v-alert type="info" variant="tonal" class="mb-4">
+        To get assistance with running your own endpoint instance, be sure to consult the Integration panel.
+      </v-alert>
 
-        <ListBuilder
-          v-model="endpointList"
-          :disabled="saving"
-          :remove-item-callback="onRemoveItemCallback"
-          :default-item="{
-            url: '',
-            secret: '',
-            cypher: '',
-          }"
-        >
-          <template #default="{ item }">
-            <v-text-field
-              v-model="item.url"
-              :rules="getStructureRules('server_url')"
-              clearable
-              required
-              persistent-hint
-              hint="This field is required"
-            >
-              <template #label>
-                <span class="mr-2 text-error">*</span> Endpoint
-              </template>
-              <template v-if="item.url && Rules.isUrl(item.url) && !item.url.startsWith('https://')" #message>
-                <span class="text-error">It is not safe to use an unsecured protocol (HTTP) to communicate your data. Please be aware that your information may be vulnerable to interception by unauthorized parties. For your safety, we recommend using a secure connection (HTTPS) to protect your sensitive data during transmission.</span>
-              </template>
-              <template v-if="!item.uuid" #prepend-inner>
-                <v-icon icon="mdi-new-box" />
-              </template>
-            </v-text-field>
-          </template>
-        </ListBuilder>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn
-          :loading="saving"
-          :disabled="isPristine || saving"
-          :color="isPristine ? undefined : 'primary'"
-          variant="flat"
-          @click="save"
-        >
-          Save and close
-        </v-btn>
-        <v-btn
-          :disabled="saving"
-          @click="close"
-        >
-          Cancel
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+      <ListBuilder
+        v-model="endpointList"
+        :disabled="saving"
+        :remove-item-callback="onRemoveItemCallback"
+        :default-item="{
+          url: '',
+          secret: '',
+          cypher: '',
+        }"
+      >
+        <template #default="{ item }">
+          <v-text-field
+            v-model="item.url"
+            :rules="getStructureRules('server_url')"
+            clearable
+            required
+            persistent-hint
+            hint="This field is required"
+          >
+            <template #label>
+              <span class="mr-2 text-error">*</span> Endpoint
+            </template>
+            <template v-if="item.url && Rules.isUrl(item.url) && !item.url.startsWith('https://')" #message>
+              <span class="text-error">It is not safe to use an unsecured protocol (HTTP) to communicate your data. Please be aware that your information may be vulnerable to interception by unauthorized parties. For your safety, we recommend using a secure connection (HTTPS) to protect your sensitive data during transmission.</span>
+            </template>
+            <template v-if="!item.uuid" #prepend-inner>
+              <v-icon icon="mdi-new-box" />
+            </template>
+          </v-text-field>
+        </template>
+      </ListBuilder>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        :loading="saving"
+        :disabled="isPristine || saving"
+        :color="isPristine ? undefined : 'primary'"
+        variant="flat"
+        @click="save"
+      >
+        Save and close
+      </v-btn>
+      <v-btn
+        :disabled="saving"
+        @click="close"
+      >
+        Cancel
+      </v-btn>
+    </v-card-actions>
+  </ModalDialog>
 </template>
diff --git a/src/components/Error.vue b/src/components/Error.vue
index 69bf61b..2dee7b4 100644
--- a/src/components/Error.vue
+++ b/src/components/Error.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useGlobalStore } from '@/stores/global';
+import ModalDialog from '@/components/ModalDialog.vue';
 
 const globalStore = useGlobalStore();
 const close = () => {
@@ -17,25 +18,22 @@ const close = () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="globalStore.error.visible"
+    :text="globalStore.error.body"
+    :title="globalStore.error.title || 'Error'"
+    color="error"
+    prepend-icon="mdi-alert"
+    max-width="400"
     width="auto"
     persistent
     scrollable
   >
-    <v-card
-      :text="globalStore.error.body"
-      :title="globalStore.error.title || 'Error'"
-      color="error"
-      prepend-icon="mdi-alert"
-      max-width="400"
-    >
-      <template #actions>
-        <v-btn
-          text="Close"
-          @click="close"
-        />
-      </template>
-    </v-card>
-  </v-dialog>
+    <v-card-actions>
+      <v-btn
+        text="Close"
+        @click="close"
+      />
+    </v-card-actions>
+  </ModalDialog>
 </template>
diff --git a/src/components/FileManager.vue b/src/components/FileManager.vue
index 77db874..e3ab295 100644
--- a/src/components/FileManager.vue
+++ b/src/components/FileManager.vue
@@ -6,6 +6,7 @@ import {Services} from '@/services';
 import ImgTag from '@/components/ImgTag.vue';
 import VideoPlayer from '@/components/VideoPlayer.vue';
 import {downloadFilesAsZip, getFileIcon, phpStringSizeToBytes} from '@/utils';
+import ModalDialog from '@/components/ModalDialog.vue';
 
 const globalStore = useGlobalStore();
 const structure = defineModel<IStructure>({ required: true });
@@ -258,255 +259,252 @@ watch(() => globalStore.fileManager.visible, () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="globalStore.fileManager.visible"
     :max-width="1000"
+    title="File Manager"
+    prepend-icon="mdi-file-multiple"
     persistent
     scrollable
   >
-    <v-card
-      title="File Manager"
-      prepend-icon="mdi-file-multiple"
+    <template v-if="globalStore.session.loggedIn" #append>
+      <v-tabs v-model="filter" class="my-n4" density="compact">
+        <v-tab value="all">
+          All ({{ getFilesByType('all').length }})
+        </v-tab>
+        <v-tab v-if="getFilesByType('image').length > 0" value="image">
+          Images ({{ getFilesByType('image').length }})
+        </v-tab>
+        <v-tab v-if="getFilesByType('video').length > 0" value="video">
+          Videos ({{ getFilesByType('video').length }})
+        </v-tab>
+        <v-tab v-if="getFilesByType('document').length > 0" value="document">
+          Document ({{ getFilesByType('document').length }})
+        </v-tab>
+      </v-tabs>
+    </template>
+    <v-card-actions>
+      <v-text-field
+        v-model="search"
+        label="Search"
+        prepend-inner-icon="mdi-magnify"
+        hide-details
+      >
+        <template #append-inner>
+          <div class="d-flex align-center" style="gap: 0.5rem">
+            <v-select
+              v-model="sortBy"
+              :items="[
+                { title: 'Timestamp', value: 'timestamp' },
+                { title: 'Name', value: 'originalFileName' },
+                { title: 'Size', value: 'size' },
+                { title: 'Width', value: 'width' },
+                { title: 'Height', value: 'height' },
+              ]"
+              label="Sort by"
+              width="max-content"
+              hide-details
+              @mousedown.stop
+              @click.stop
+            />
+            <v-btn-toggle
+              v-model="sortOrder"
+              mandatory
+              @mousedown.stop
+              @click.stop
+            >
+              <v-btn value="asc">
+                ASC
+              </v-btn>
+              <v-btn value="desc">
+                DESC
+              </v-btn>
+            </v-btn-toggle>
+          </div>
+        </template>
+      </v-text-field>
+    </v-card-actions>
+    <v-card-text
+      :class="['pa-0', {
+        'bg-background': !dragOver,
+        'bg-primary': dragOver,
+      }]"
+      style="transition: background-color 300ms ease-in-out"
+      @drop.prevent.stop="onDrop"
+      @dragover.prevent.stop="onDragEnter"
+      @dragleave.prevent.stop="onDragLeave"
     >
-      <template v-if="globalStore.session.loggedIn" #append>
-        <v-tabs v-model="filter" class="my-n4">
-          <v-tab value="all">
-            All ({{ getFilesByType('all').length }})
-          </v-tab>
-          <v-tab v-if="getFilesByType('image').length > 0" value="image">
-            Images ({{ getFilesByType('image').length }})
-          </v-tab>
-          <v-tab v-if="getFilesByType('video').length > 0" value="video">
-            Videos ({{ getFilesByType('video').length }})
-          </v-tab>
-          <v-tab v-if="getFilesByType('document').length > 0" value="document">
-            Document ({{ getFilesByType('document').length }})
-          </v-tab>
-        </v-tabs>
-      </template>
-      <v-card-actions>
-        <v-text-field
-          v-model="search"
-          label="Search"
-          prepend-inner-icon="mdi-magnify"
-          hide-details
+      <div v-if="loading || filteredFiles.length === 0 || !structure.endpoint" class="d-flex align-center justify-center text-center" style="height: 33dvh">
+        <v-progress-circular
+          v-if="loading"
+          size="96"
+          color="primary"
+          indeterminate
+        />
+        <v-card
+          v-else-if="(filteredFiles.length === 0 && !canUpload) || !structure.endpoint"
+          color="transparent"
+          class="w-100 fill-height"
+          tile
+          flat
         >
-          <template #append-inner>
-            <div class="d-flex align-center" style="gap: 0.5rem">
-              <v-select
-                v-model="sortBy"
-                :items="[
-                  { title: 'Timestamp', value: 'timestamp' },
-                  { title: 'Name', value: 'originalFileName' },
-                  { title: 'Size', value: 'size' },
-                  { title: 'Width', value: 'width' },
-                  { title: 'Height', value: 'height' },
-                ]"
-                label="Sort by"
-                width="max-content"
-                hide-details
-                @mousedown.stop
-                @click.stop
-              />
-              <v-btn-toggle
-                v-model="sortOrder"
-                mandatory
-                @mousedown.stop
-                @click.stop
-              >
-                <v-btn value="asc">
-                  ASC
-                </v-btn>
-                <v-btn value="desc">
-                  DESC
-                </v-btn>
-              </v-btn-toggle>
-            </div>
-          </template>
-        </v-text-field>
-      </v-card-actions>
-      <v-card-text
-        :class="['pa-0', {
-          'bg-background': !dragOver,
-          'bg-primary': dragOver,
-        }]"
-        style="transition: background-color 300ms ease-in-out"
-        @drop.prevent.stop="onDrop"
-        @dragover.prevent.stop="onDragEnter"
-        @dragleave.prevent.stop="onDragLeave"
-      >
-        <div v-if="loading || filteredFiles.length === 0 || !structure.endpoint" class="d-flex align-center justify-center text-center" style="height: 33dvh">
-          <v-progress-circular
-            v-if="loading"
-            size="96"
-            color="primary"
-            indeterminate
+          <v-empty-state
+            v-if="structure.endpoint"
+            icon="mdi-file-hidden"
+            title="Empty"
+            text="No files available yet."
           />
-          <v-card
-            v-else-if="(filteredFiles.length === 0 && !canUpload) || !structure.endpoint"
-            color="transparent"
-            class="w-100 fill-height"
-            tile
-            flat
-          >
-            <v-empty-state
-              v-if="structure.endpoint"
-              icon="mdi-file-hidden"
-              title="Empty"
-              text="No files available yet."
-            />
-            <v-empty-state
-              v-else
-              icon="mdi-help-network-outline"
-              title="No endpoint detected"
-              text="Files cannot be loaded without a properly configured endpoint. Please check your project's settings in advanced mode."
-            />
-          </v-card>
-          <v-card
-            v-else-if="filteredFiles.length === 0 && canUpload"
-            color="transparent"
-            class="w-100 fill-height"
-            tile
-            flat
-            @click="promptUpload"
-          >
-            <v-empty-state
-              icon="mdi-gesture-tap-button"
-              title="Touch to upload"
-              text="Or drag and drop files here"
-            />
-          </v-card>
-        </div>
-        <div v-else class="pa-4" style="min-height: 33dvh">
-          <masonry-wall :items="filteredFiles" :ssr-columns="1" :column-width="200" :gap="16">
-            <template #default="{ item }">
-              <v-card
-                :color="fileIsSelected(item) ? 'primary' : undefined"
-                @click="onFileClick(item)"
+          <v-empty-state
+            v-else
+            icon="mdi-help-network-outline"
+            title="No endpoint detected"
+            text="Files cannot be loaded without a properly configured endpoint. Please check your project's settings in advanced mode."
+          />
+        </v-card>
+        <v-card
+          v-else-if="filteredFiles.length === 0 && canUpload"
+          color="transparent"
+          class="w-100 fill-height"
+          tile
+          flat
+          @click="promptUpload"
+        >
+          <v-empty-state
+            icon="mdi-gesture-tap-button"
+            title="Touch to upload"
+            text="Or drag and drop files here"
+          />
+        </v-card>
+      </div>
+      <div v-else class="pa-4" style="min-height: 33dvh">
+        <masonry-wall :items="filteredFiles" :ssr-columns="1" :column-width="200" :gap="16">
+          <template #default="{ item }">
+            <v-card
+              :color="fileIsSelected(item) ? 'primary' : undefined"
+              @click="onFileClick(item)"
+            >
+              <div v-if="!canSelect || globalStore.fileManager.multiple" class="position-absolute" style="top: 0; left: 0; z-index: 10">
+                <v-checkbox :model-value="fileIsSelected(item)" color="primary" base-color="surface" hide-details @click.stop.prevent="onFileClick(item)" />
+              </div>
+              <div class="bg-blue-grey-lighten-4">
+                <ImgTag
+                  v-if="item.meta.type?.startsWith('image')"
+                  :src="serverSettings.publicUrl + item.path"
+                  :aspect-ratio="(item.meta.width || 1) / (item.meta.height || 1)"
+                />
+                <VideoPlayer
+                  v-else-if="item.meta.type?.startsWith('video')"
+                  :src="serverSettings.publicUrl + item.path"
+                  :aspect-ratio="(item.meta.width || 1) / (item.meta.height || 1)"
+                />
+                <v-sheet v-else>
+                  <v-responsive :aspect-ratio="16 / 9" class="d-flex align-center justify-center text-center">
+                    <v-icon :icon="getFileIcon(item)" size="96" />
+                  </v-responsive>
+                </v-sheet>
+              </div>
+              <v-card-title
+                :class="{
+                  'pb-0': showInfo,
+                }"
               >
-                <div v-if="!canSelect || globalStore.fileManager.multiple" class="position-absolute" style="top: 0; left: 0; z-index: 10">
-                  <v-checkbox :model-value="fileIsSelected(item)" color="primary" base-color="surface" hide-details @click.stop.prevent="onFileClick(item)" />
-                </div>
-                <div class="bg-blue-grey-lighten-4">
-                  <ImgTag
-                    v-if="item.meta.type?.startsWith('image')"
-                    :src="serverSettings.publicUrl + item.path"
-                    :aspect-ratio="(item.meta.width || 1) / (item.meta.height || 1)"
-                  />
-                  <VideoPlayer
-                    v-else-if="item.meta.type?.startsWith('video')"
-                    :src="serverSettings.publicUrl + item.path"
-                    :aspect-ratio="(item.meta.width || 1) / (item.meta.height || 1)"
-                  />
-                  <v-sheet v-else>
-                    <v-responsive :aspect-ratio="16 / 9" class="d-flex align-center justify-center text-center">
-                      <v-icon :icon="getFileIcon(item)" size="96" />
-                    </v-responsive>
-                  </v-sheet>
-                </div>
-                <v-card-title
-                  :class="{
-                    'pb-0': showInfo,
-                  }"
-                >
-                  {{ item.meta.originalFileName }}
-                </v-card-title>
-                <template v-if="showInfo">
-                  <v-card-subtitle class="pb-3">
-                    <div v-if="item.meta.size">
-                      Size: {{ $formatBytes(item.meta.size) }}
-                    </div>
-                    <div v-if="item.meta.width && item.meta.height">
-                      Dimension: {{ item.meta.width }} x {{ item.meta.height }}
-                    </div>
-                    <template v-if="item.meta.type?.startsWith('video/')">
-                      <div v-if="item.meta.duration">
-                        Duration: {{ $formatSeconds(item.meta.duration) }}
-                      </div>
-                      <div v-if="item.meta.frameRate">
-                        Frame rate: {{ item.meta.frameRate }}
-                      </div>
-                    </template>
-                    <div v-if="item.meta.type" class="text-capitalize">
-                      Type: {{ item.meta.type.split('/')[0] }}/{{ item.meta.type.split('/')[1].toUpperCase() }}
+                {{ item.meta.originalFileName }}
+              </v-card-title>
+              <template v-if="showInfo">
+                <v-card-subtitle class="pb-3">
+                  <div v-if="item.meta.size">
+                    Size: {{ $formatBytes(item.meta.size) }}
+                  </div>
+                  <div v-if="item.meta.width && item.meta.height">
+                    Dimension: {{ item.meta.width }} x {{ item.meta.height }}
+                  </div>
+                  <template v-if="item.meta.type?.startsWith('video/')">
+                    <div v-if="item.meta.duration">
+                      Duration: {{ $formatSeconds(item.meta.duration) }}
                     </div>
-                    <div v-if="item.meta.timestamp">
-                      Date: {{ $formatTimestamp(item.meta.timestamp, 'YYYY-MM-DD HH:mm:ss') }}
+                    <div v-if="item.meta.frameRate">
+                      Frame rate: {{ item.meta.frameRate }}
                     </div>
-                  </v-card-subtitle>
-                </template>
-              </v-card>
-            </template>
-          </masonry-wall>
-        </div>
-      </v-card-text>
-      <template #actions>
-        <v-btn
-          v-if="canUpload"
-          :loading="uploading"
-          :disabled="uploading"
-          :color="uploading ? undefined : 'secondary'"
-          prepend-icon="mdi-upload"
-          text="Upload"
-          variant="outlined"
-          class="px-3"
-          @click="promptUpload"
-        />
-        <v-menu location="top">
-          <template #activator="{ props }">
-            <v-btn
-              v-if="!canSelect || globalStore.fileManager.multiple"
-              v-bind="props"
-              :disabled="loading || selectedFiles.length === 0"
-              variant="text"
-            >
-              Bulk Actions
-              <v-icon icon="mdi-chevron-up" end />
-            </v-btn>
+                  </template>
+                  <div v-if="item.meta.type" class="text-capitalize">
+                    Type: {{ item.meta.type.split('/')[0] }}/{{ item.meta.type.split('/')[1].toUpperCase() }}
+                  </div>
+                  <div v-if="item.meta.timestamp">
+                    Date: {{ $formatTimestamp(item.meta.timestamp, 'YYYY-MM-DD HH:mm:ss') }}
+                  </div>
+                </v-card-subtitle>
+              </template>
+            </v-card>
           </template>
-          <v-list>
-            <v-list-item
-              :loading="downloading"
-              :disabled="!canDownload || loading || downloading || selectedFiles.length === 0"
-              prepend-icon="mdi-download"
-              @click="download"
-            >
-              <v-list-item-title>Download</v-list-item-title>
-            </v-list-item>
-            <v-list-item
-              v-if="canDelete"
-              :loading="downloading"
-              :disabled="loading || deleting || selectedFiles.length === 0"
-              prepend-icon="mdi-delete"
-              base-color="error"
-              @click="remove"
-            >
-              <v-list-item-title>Delete</v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
-        <v-checkbox
-          v-model="showInfo"
-          label="Show additional info"
-          hide-details
-        />
-        <v-spacer />
-        <v-btn
-          v-if="canSelect"
-          :disabled="loading || selectedFiles.length === 0"
-          :loading="loading"
-          :color="selectedFiles.length === 0 ? undefined : 'primary'"
-          :text="'Select (' + selectedFiles.length + ')'"
-          variant="flat"
-          class="px-3"
-          @click="select"
-        />
-        <v-btn
-          :text="globalStore.fileManager.canSelect ? 'Cancel' : 'Close'"
-          class="px-3"
-          @click="close"
-        />
-      </template>
-    </v-card>
-  </v-dialog>
+        </masonry-wall>
+      </div>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        v-if="canUpload"
+        :loading="uploading"
+        :disabled="uploading"
+        :color="uploading ? undefined : 'secondary'"
+        prepend-icon="mdi-upload"
+        text="Upload"
+        variant="outlined"
+        class="px-3"
+        @click="promptUpload"
+      />
+      <v-menu location="top">
+        <template #activator="{ props }">
+          <v-btn
+            v-if="!canSelect || globalStore.fileManager.multiple"
+            v-bind="props"
+            :disabled="loading || selectedFiles.length === 0"
+            variant="text"
+          >
+            Bulk Actions
+            <v-icon icon="mdi-chevron-up" end />
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item
+            :loading="downloading"
+            :disabled="!canDownload || loading || downloading || selectedFiles.length === 0"
+            prepend-icon="mdi-download"
+            @click="download"
+          >
+            <v-list-item-title>Download</v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            v-if="canDelete"
+            :loading="downloading"
+            :disabled="loading || deleting || selectedFiles.length === 0"
+            prepend-icon="mdi-delete"
+            base-color="error"
+            @click="remove"
+          >
+            <v-list-item-title>Delete</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-checkbox
+        v-model="showInfo"
+        label="Show additional info"
+        hide-details
+      />
+      <v-spacer />
+      <v-btn
+        v-if="canSelect"
+        :disabled="loading || selectedFiles.length === 0"
+        :loading="loading"
+        :color="selectedFiles.length === 0 ? undefined : 'primary'"
+        :text="'Select (' + selectedFiles.length + ')'"
+        variant="flat"
+        class="px-3"
+        @click="select"
+      />
+      <v-btn
+        :text="globalStore.fileManager.canSelect ? 'Cancel' : 'Close'"
+        class="px-3"
+        @click="close"
+      />
+    </v-card-actions>
+  </ModalDialog>
 </template>
diff --git a/src/components/IntroductionDialog.vue b/src/components/IntroductionDialog.vue
index 25113a3..29abfa3 100644
--- a/src/components/IntroductionDialog.vue
+++ b/src/components/IntroductionDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import ModalDialog from '@/components/ModalDialog.vue';
 import { useGlobalStore } from '@/stores/global';
 
 const storageKey = 'jsonms/introduction-dialog';
@@ -12,38 +13,36 @@ const close = () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="visible"
     width="auto"
+    title="Welcome to JSON.ms!"
+    prepend-icon="mdi-human-greeting"
+    max-width="800"
     scrollable
+    persistent
   >
-    <v-card
-      title="Welcome to JSON.ms!"
-      prepend-icon="mdi-human-greeting"
-      max-width="800"
-    >
-      <iframe
-        :height="800 / (16/9)"
-        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"
-        referrerpolicy="strict-origin-when-cross-origin"
-        allowfullscreen
+    <iframe
+      :height="800 / (16/9)"
+      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"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    />
+    <v-card-text>
+      <p>Unlock the power of seamless admin panel generation with our intuitive YAML interface. JSON.ms enables you to create dynamic admin panels that save user inputs directly in JSON format to YOUR server through RESTful API calls.</p>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        variant="flat"
+        color="primary"
+        text="Get Started"
+        @click="close"
       />
-      <v-card-text>
-        <p>Unlock the power of seamless admin panel generation with our intuitive YAML interface. JSON.ms enables you to create dynamic admin panels that save user inputs directly in JSON format to YOUR server through RESTful API calls.</p>
-      </v-card-text>
-      <template #actions>
-        <v-btn
-          variant="flat"
-          color="primary"
-          text="Get Started"
-          @click="close"
-        />
-      </template>
-    </v-card>
-  </v-dialog>
+    </v-card-actions>
+  </ModalDialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/JsonEditModal.vue b/src/components/JsonEditModal.vue
index 791eb57..a9ec01f 100644
--- a/src/components/JsonEditModal.vue
+++ b/src/components/JsonEditModal.vue
@@ -3,11 +3,12 @@ import {VAceEditor} from 'vue3-ace-editor';
 import {useGlobalStore} from '@/stores/global';
 import {type Ref, ref, watch} from "vue";
 import type {VAceEditorInstance} from "vue3-ace-editor/types";
+import ModalDialog from '@/components/ModalDialog.vue';
 
 const emit = defineEmits(['apply']);
 const editor: Ref<VAceEditorInstance | null> = ref(null);
 const content = defineModel<string>({ required: true });
-const visible = defineModel<boolean>('visible');
+const visible = defineModel<boolean>('visible', { required: true });
 const options = ref({
   fontSize: 14,
   showPrintMargin: false,
@@ -47,40 +48,37 @@ watch(() => globalStore.userSettings.data, () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="visible"
+    title="Edit JSON"
+    prepend-icon="mdi-code-json"
     max-width="800"
     persistent
     scrollable
   >
-    <v-card
-      title="Edit JSON"
-      prepend-icon="mdi-code-json"
-    >
-      <v-card theme="dark" class="pa-1 pl-0" tile elevation="0">
-        <v-ace-editor
-          ref="editor"
-          v-model:value="content"
-          :options="options"
-          style="height: 66dvh"
-          lang="json"
-          theme="github_dark"
-        />
-      </v-card>
-      <template #actions>
-        <v-btn
-          variant="flat"
-          color="primary"
-          text="Apply"
-          class="px-3"
-          @click="apply"
-        />
-        <v-btn
-          text="Cancel"
-          class="px-3"
-          @click="close"
-        />
-      </template>
+    <v-card theme="dark" class="pa-1 pl-0" tile elevation="0">
+      <v-ace-editor
+        ref="editor"
+        v-model:value="content"
+        :options="options"
+        style="height: 66dvh"
+        lang="json"
+        theme="github_dark"
+      />
     </v-card>
-  </v-dialog>
+    <v-card-actions>
+      <v-btn
+        variant="flat"
+        color="primary"
+        text="Apply"
+        class="px-3"
+        @click="apply"
+      />
+      <v-btn
+        text="Cancel"
+        class="px-3"
+        @click="close"
+      />
+    </v-card-actions>
+  </ModalDialog>
 </template>
diff --git a/src/components/MigrationDialog.vue b/src/components/MigrationDialog.vue
index 2234090..84ef2fd 100644
--- a/src/components/MigrationDialog.vue
+++ b/src/components/MigrationDialog.vue
@@ -6,8 +6,9 @@ import {useGlobalStore} from "@/stores/global";
 import {computed, ref, watch} from "vue";
 import {useModelStore} from "@/stores/model";
 import {useMigration} from "@/composables/migration";
+import ModalDialog from '@/components/ModalDialog.vue';
 
-const visible = defineModel<boolean>('visible');
+const visible = defineModel<boolean>('visible', { required: true });
 const {
   structures = [],
 } = defineProps<{
@@ -74,322 +75,319 @@ watch(() => visible.value, () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="visible"
     :persistent="migrating"
     :width="panel === 2 ? 400 : 800"
+    title="Data Migration"
+    prepend-icon="mdi-folder-arrow-left-right-outline"
     scrollable
   >
-    <v-card
-      title="Data Migration"
-      prepend-icon="mdi-folder-arrow-left-right-outline"
-    >
-      <template #append>
-        <v-expand-transition>
-          <v-alert
-            v-if="hasError"
-            type="error"
-            class="text-no-wrap my-n4 mr-n2"
-            density="compact"
-            variant="tonal"
-          >
-            An error occurred while migrating the data.
-          </v-alert>
-        </v-expand-transition>
-      </template>
-
-      <v-card-text :class="panel === 1 ? 'bg-background pa-4' : undefined">
-        <v-window v-model="panel">
-          <v-window-item>
-            <div class="d-flex flex-column" style="gap: 1rem">
-              <p>Choose the structure you wish to migrate.</p>
-              <StructureSelector
-                v-model="structure"
-                :structures="structures"
-                :loading="userDataLoading"
-                label="Structure"
-                type="admin"
-                large-text
-                clearable
-                @update:model-value="onStructureChange"
-              />
-
-              <v-divider />
+    <template #append>
+      <v-expand-transition>
+        <v-alert
+          v-if="hasError"
+          type="error"
+          class="text-no-wrap my-n4 mr-n2"
+          density="compact"
+          variant="tonal"
+        >
+          An error occurred while migrating the data.
+        </v-alert>
+      </v-expand-transition>
+    </template>
 
-              <v-row>
-                <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
-                  <p>Choose the original server that contains the information you wish to transfer.</p>
-                  <v-select
-                    v-model="fromEndpoint"
-                    :items="globalStore.session.endpoints.filter(item => item.uuid !== toEndpoint)"
-                    :disabled="!structure"
-                    item-title="url"
-                    item-value="uuid"
-                    label="Copy from"
-                    prepend-inner-icon="mdi-webhook"
-                    hide-details="auto"
-                    required
-                    clearable
-                    autocomplete="endpoint"
-                  />
-                </v-col>
-                <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
-                  <p>Choose the new server that will receive the transferred information.</p>
-                  <v-select
-                    v-model="toEndpoint"
-                    :items="globalStore.session.endpoints.filter(item => item.uuid !== fromEndpoint)"
-                    :disabled="!structure || !fromEndpoint"
-                    item-title="url"
-                    item-value="uuid"
-                    label="Copy to"
-                    prepend-inner-icon="mdi-webhook"
-                    hide-details="auto"
-                    required
-                    clearable
-                    autocomplete="endpoint"
-                  />
-                </v-col>
-              </v-row>
+    <v-card-text :class="panel === 1 ? 'bg-background pa-4' : undefined">
+      <v-window v-model="panel">
+        <v-window-item>
+          <div class="d-flex flex-column" style="gap: 1rem">
+            <p>Choose the structure you wish to migrate.</p>
+            <StructureSelector
+              v-model="structure"
+              :structures="structures"
+              :loading="userDataLoading"
+              label="Structure"
+              type="admin"
+              large-text
+              clearable
+              @update:model-value="onStructureChange"
+            />
 
-              <v-divider />
+            <v-divider />
 
-              <div class="d-flex align-center" style="gap: 1rem">
-                <v-checkbox
-                  v-model="includeUserData"
+            <v-row>
+              <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
+                <p>Choose the original server that contains the information you wish to transfer.</p>
+                <v-select
+                  v-model="fromEndpoint"
+                  :items="globalStore.session.endpoints.filter(item => item.uuid !== toEndpoint)"
                   :disabled="!structure"
-                  label="User data"
-                  hide-details
+                  item-title="url"
+                  item-value="uuid"
+                  label="Copy from"
+                  prepend-inner-icon="mdi-webhook"
+                  hide-details="auto"
+                  required
+                  clearable
+                  autocomplete="endpoint"
                 />
-                <v-checkbox
-                  v-model="includeFiles"
-                  :disabled="!structure"
-                  label="Files"
-                  hide-details
+              </v-col>
+              <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
+                <p>Choose the new server that will receive the transferred information.</p>
+                <v-select
+                  v-model="toEndpoint"
+                  :items="globalStore.session.endpoints.filter(item => item.uuid !== fromEndpoint)"
+                  :disabled="!structure || !fromEndpoint"
+                  item-title="url"
+                  item-value="uuid"
+                  label="Copy to"
+                  prepend-inner-icon="mdi-webhook"
+                  hide-details="auto"
+                  required
+                  clearable
+                  autocomplete="endpoint"
                 />
-              </div>
+              </v-col>
+            </v-row>
 
-              <v-expand-transition>
-                <div v-if="structure">
-                  <v-alert
-                    type="warning"
-                    variant="tonal"
-                  >
-                    All data transfers are performed directly from your browser. You will download {{ $formatBytes(totalSize) }} of data from your original server. After that, this same data will be uploaded to the new server. In total, this results in a data transfer of {{ $formatBytes(totalSize * 2) }}.
-                  </v-alert>
-                </div>
-              </v-expand-transition>
+            <v-divider />
+
+            <div class="d-flex align-center" style="gap: 1rem">
+              <v-checkbox
+                v-model="includeUserData"
+                :disabled="!structure"
+                label="User data"
+                hide-details
+              />
+              <v-checkbox
+                v-model="includeFiles"
+                :disabled="!structure"
+                label="Files"
+                hide-details
+              />
             </div>
-          </v-window-item>
 
-          <v-window-item>
-            <v-row>
-              <v-col cols="12" md="6">
-                <v-card>
-                  <v-card-title class="d-flex align-center" style="gap: 1rem">
-                    <v-icon icon="mdi-server-outline" />
-                    <div>
-                      <div class="text-caption">
-                        Downloading from:
-                      </div>
-                      <div>{{ fromServer?.url }}</div>
-                    </div>
-                  </v-card-title>
-                  <v-divider />
-                  <v-card-text>
-                    <div class="d-flex flex-column" style="gap: 1rem">
-                      <div class="d-flex align-center" style="gap: 1rem">
-                        <v-icon v-if="downloadTestState === -1" icon="mdi-close" color="error" size="16" />
-                        <v-icon v-else-if="downloadTestState === 2" icon="mdi-check" color="secondary" size="16" />
-                        <v-progress-circular
-                          v-else
-                          indeterminate
-                          :color="downloadTestState === 1 ? 'secondary' : 'background'"
-                          size="16"
-                          width="1"
-                        />
-                        <span>Testing server communication</span>
-                      </div>
-                      <div v-if="includeStructure" class="d-flex align-center" style="gap: 1rem">
-                        <v-icon v-if="uploadTestState === -1 || downloadTestState === -1" icon="mdi-help-circle-outline" size="16" />
-                        <v-icon v-else-if="downloadStructureState === -1" icon="mdi-close" color="error" size="16" />
-                        <v-icon v-else-if="downloadStructureState === 2" icon="mdi-check" color="secondary" size="16" />
-                        <v-progress-circular
-                          v-else
-                          indeterminate
-                          :color="downloadStructureState === 1 ? 'secondary' : 'background'"
-                          size="16"
-                          width="1"
-                        />
-                        <span>Fetching structure content</span>
-                      </div>
-                      <div v-if="includeUserData" class="d-flex align-center" style="gap: 1rem">
-                        <v-icon v-if="uploadTestState === -1 || downloadTestState === -1" icon="mdi-help-circle-outline" size="16" />
-                        <v-icon v-else-if="downloadUserDataState === -1" icon="mdi-close" color="error" size="16" />
-                        <v-icon v-else-if="downloadUserDataState === 2" icon="mdi-check" color="secondary" size="16" />
-                        <v-progress-circular
-                          v-else
-                          indeterminate
-                          :color="downloadUserDataState === 1 ? 'secondary' : 'background'"
-                          size="16"
-                          width="1"
-                        />
-                        <span>Fetching user data</span>
-                      </div>
-                      <div v-if="includeFiles" class="d-flex align-center" style="gap: 1rem">
-                        <v-icon v-if="uploadTestState === -1 || downloadTestState === -1" icon="mdi-help-circle-outline" size="16" />
-                        <v-icon v-else-if="downloadFilesState === -1" icon="mdi-close" color="error" size="16" />
-                        <v-icon v-else-if="downloadFilesState === 2" icon="mdi-check" color="secondary" size="16" />
-                        <v-progress-circular
-                          v-else
-                          indeterminate
-                          :color="downloadFilesState === 1 ? 'secondary' : 'background'"
-                          size="16"
-                          width="1"
-                        />
-                        <span>Fetching files</span>
-                      </div>
+            <v-expand-transition>
+              <div v-if="structure">
+                <v-alert
+                  type="warning"
+                  variant="tonal"
+                >
+                  All data transfers are performed directly from your browser. You will download {{ $formatBytes(totalSize) }} of data from your original server. After that, this same data will be uploaded to the new server. In total, this results in a data transfer of {{ $formatBytes(totalSize * 2) }}.
+                </v-alert>
+              </div>
+            </v-expand-transition>
+          </div>
+        </v-window-item>
 
-                      <v-progress-linear
-                        :model-value="downloadPercentageProgress"
-                        :buffer-value="nextDownloadPercentage"
-                        color="secondary"
-                        height="25"
-                      >
-                        <template #default>
-                          {{ $formatBytes(downloadBytesProgress) }} of {{ $formatBytes(totalSize) }}
-                        </template>
-                      </v-progress-linear>
+        <v-window-item>
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-card>
+                <v-card-title class="d-flex align-center" style="gap: 1rem">
+                  <v-icon icon="mdi-server-outline" />
+                  <div>
+                    <div class="text-caption">
+                      Downloading from:
                     </div>
-                  </v-card-text>
-                </v-card>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-card>
-                  <v-card-title class="d-flex align-center" style="gap: 1rem">
-                    <v-icon icon="mdi-server-outline" />
-                    <div>
-                      <div class="text-caption">
-                        Uploading to:
-                      </div>
-                      <div>{{ toServer?.url }}</div>
+                    <div>{{ fromServer?.url }}</div>
+                  </div>
+                </v-card-title>
+                <v-divider />
+                <v-card-text>
+                  <div class="d-flex flex-column" style="gap: 1rem">
+                    <div class="d-flex align-center" style="gap: 1rem">
+                      <v-icon v-if="downloadTestState === -1" icon="mdi-close" color="error" size="16" />
+                      <v-icon v-else-if="downloadTestState === 2" icon="mdi-check" color="secondary" size="16" />
+                      <v-progress-circular
+                        v-else
+                        indeterminate
+                        :color="downloadTestState === 1 ? 'secondary' : 'background'"
+                        size="16"
+                        width="1"
+                      />
+                      <span>Testing server communication</span>
+                    </div>
+                    <div v-if="includeStructure" class="d-flex align-center" style="gap: 1rem">
+                      <v-icon v-if="uploadTestState === -1 || downloadTestState === -1" icon="mdi-help-circle-outline" size="16" />
+                      <v-icon v-else-if="downloadStructureState === -1" icon="mdi-close" color="error" size="16" />
+                      <v-icon v-else-if="downloadStructureState === 2" icon="mdi-check" color="secondary" size="16" />
+                      <v-progress-circular
+                        v-else
+                        indeterminate
+                        :color="downloadStructureState === 1 ? 'secondary' : 'background'"
+                        size="16"
+                        width="1"
+                      />
+                      <span>Fetching structure content</span>
+                    </div>
+                    <div v-if="includeUserData" class="d-flex align-center" style="gap: 1rem">
+                      <v-icon v-if="uploadTestState === -1 || downloadTestState === -1" icon="mdi-help-circle-outline" size="16" />
+                      <v-icon v-else-if="downloadUserDataState === -1" icon="mdi-close" color="error" size="16" />
+                      <v-icon v-else-if="downloadUserDataState === 2" icon="mdi-check" color="secondary" size="16" />
+                      <v-progress-circular
+                        v-else
+                        indeterminate
+                        :color="downloadUserDataState === 1 ? 'secondary' : 'background'"
+                        size="16"
+                        width="1"
+                      />
+                      <span>Fetching user data</span>
+                    </div>
+                    <div v-if="includeFiles" class="d-flex align-center" style="gap: 1rem">
+                      <v-icon v-if="uploadTestState === -1 || downloadTestState === -1" icon="mdi-help-circle-outline" size="16" />
+                      <v-icon v-else-if="downloadFilesState === -1" icon="mdi-close" color="error" size="16" />
+                      <v-icon v-else-if="downloadFilesState === 2" icon="mdi-check" color="secondary" size="16" />
+                      <v-progress-circular
+                        v-else
+                        indeterminate
+                        :color="downloadFilesState === 1 ? 'secondary' : 'background'"
+                        size="16"
+                        width="1"
+                      />
+                      <span>Fetching files</span>
                     </div>
-                  </v-card-title>
-                  <v-divider />
-                  <v-card-text>
-                    <div class="d-flex flex-column" style="gap: 1rem">
-                      <div class="d-flex align-center" style="gap: 1rem">
-                        <v-icon v-if="downloadTestState === -1 || uploadTestState === -1" icon="mdi-close" color="error" size="16" />
-                        <v-icon v-else-if="uploadTestState === 2" icon="mdi-check" color="secondary" size="16" />
-                        <v-progress-circular
-                          v-else
-                          indeterminate
-                          :color="uploadTestState === 1 ? 'secondary' : 'background'"
-                          size="16"
-                          width="1"
-                        />
-                        <span>Testing server communication</span>
-                      </div>
-                      <div v-if="includeStructure" class="d-flex align-center" style="gap: 1rem">
-                        <v-icon v-if="downloadTestState === -1 || uploadTestState === -1" icon="mdi-help-circle-outline" size="16" />
-                        <v-icon v-else-if="downloadStructureState === -1 || uploadStructureState === -1" icon="mdi-close" color="error" size="16" />
-                        <v-icon v-else-if="uploadStructureState === 2" icon="mdi-check" color="secondary" size="16" />
-                        <v-progress-circular
-                          v-else
-                          indeterminate
-                          :color="uploadStructureState === 1 ? 'secondary' : 'background'"
-                          size="16"
-                          width="1"
-                        />
-                        <span>Uploading structure content</span>
-                      </div>
-                      <div v-if="includeUserData" class="d-flex align-center" style="gap: 1rem">
-                        <v-icon v-if="downloadTestState === -1 || uploadTestState === -1" icon="mdi-help-circle-outline" size="16" />
-                        <v-icon v-else-if="downloadUserDataState === -1 || uploadUserDataState === -1" icon="mdi-close" color="error" size="16" />
-                        <v-icon v-else-if="uploadUserDataState === 2" icon="mdi-check" color="secondary" size="16" />
-                        <v-progress-circular
-                          v-else
-                          indeterminate
-                          :color="uploadUserDataState === 1 ? 'secondary' : 'background'"
-                          size="16"
-                          width="1"
-                        />
-                        <span>Uploading user data</span>
-                      </div>
-                      <div v-if="includeFiles" class="d-flex align-center" style="gap: 1rem">
-                        <v-icon v-if="uploadTestState === -1" icon="mdi-help-circle-outline" size="16" />
-                        <v-icon v-else-if="downloadFilesState === -1 || uploadFilesState === -1" icon="mdi-close" color="error" size="16" />
-                        <v-icon v-else-if="uploadFilesState === 2" icon="mdi-check" color="secondary" size="16" />
-                        <v-progress-circular
-                          v-else
-                          indeterminate
-                          :color="uploadFilesState === 1 ? 'secondary' : 'background'"
-                          size="16"
-                          width="1"
-                        />
-                        <span>Uploading files</span>
-                      </div>
 
-                      <v-progress-linear
-                        :model-value="uploadPercentageProgress"
-                        :buffer-value="nextUploadPercentage"
-                        color="secondary"
-                        height="25"
-                      >
-                        <template #default>
-                          {{ $formatBytes(uploadBytesProgress) }} of {{ $formatBytes(totalSize) }}
-                        </template>
-                      </v-progress-linear>
+                    <v-progress-linear
+                      :model-value="downloadPercentageProgress"
+                      :buffer-value="nextDownloadPercentage"
+                      color="secondary"
+                      height="25"
+                    >
+                      <template #default>
+                        {{ $formatBytes(downloadBytesProgress) }} of {{ $formatBytes(totalSize) }}
+                      </template>
+                    </v-progress-linear>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-card>
+                <v-card-title class="d-flex align-center" style="gap: 1rem">
+                  <v-icon icon="mdi-server-outline" />
+                  <div>
+                    <div class="text-caption">
+                      Uploading to:
                     </div>
-                  </v-card-text>
-                </v-card>
-              </v-col>
-            </v-row>
-          </v-window-item>
-          <v-window-item>
-            <v-empty-state
-              color="secondary"
-              icon="mdi-transfer"
-              title="Migration Completed!"
-              text="Your project has been migrated to your new server successfully!"
-            />
-          </v-window-item>
-        </v-window>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn
-          v-if="panel === 2"
-          variant="flat"
-          @click="close"
-        >
-          Close
-        </v-btn>
-        <v-btn
-          v-if="hasError"
-          variant="flat"
-          prepend-icon="mdi-arrow-left"
-          @click="goBack"
-        >
-          Back
-        </v-btn>
-        <v-btn
-          v-if="panel <= 1 && !hasError"
-          :loading="migrating"
-          :disabled="!canMigrate || panel !== 0"
-          :color="canMigrate && panel === 0 ? 'warning' : undefined"
-          variant="flat"
-          append-icon="mdi-arrow-right"
-          @click="migrate"
-        >
-          Migrate
-        </v-btn>
-        <v-btn
-          v-if="panel < 2"
-          :disabled="migrating && !hasError"
-          @click="close"
-        >
-          <span>Cancel</span>
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+                    <div>{{ toServer?.url }}</div>
+                  </div>
+                </v-card-title>
+                <v-divider />
+                <v-card-text>
+                  <div class="d-flex flex-column" style="gap: 1rem">
+                    <div class="d-flex align-center" style="gap: 1rem">
+                      <v-icon v-if="downloadTestState === -1 || uploadTestState === -1" icon="mdi-close" color="error" size="16" />
+                      <v-icon v-else-if="uploadTestState === 2" icon="mdi-check" color="secondary" size="16" />
+                      <v-progress-circular
+                        v-else
+                        indeterminate
+                        :color="uploadTestState === 1 ? 'secondary' : 'background'"
+                        size="16"
+                        width="1"
+                      />
+                      <span>Testing server communication</span>
+                    </div>
+                    <div v-if="includeStructure" class="d-flex align-center" style="gap: 1rem">
+                      <v-icon v-if="downloadTestState === -1 || uploadTestState === -1" icon="mdi-help-circle-outline" size="16" />
+                      <v-icon v-else-if="downloadStructureState === -1 || uploadStructureState === -1" icon="mdi-close" color="error" size="16" />
+                      <v-icon v-else-if="uploadStructureState === 2" icon="mdi-check" color="secondary" size="16" />
+                      <v-progress-circular
+                        v-else
+                        indeterminate
+                        :color="uploadStructureState === 1 ? 'secondary' : 'background'"
+                        size="16"
+                        width="1"
+                      />
+                      <span>Uploading structure content</span>
+                    </div>
+                    <div v-if="includeUserData" class="d-flex align-center" style="gap: 1rem">
+                      <v-icon v-if="downloadTestState === -1 || uploadTestState === -1" icon="mdi-help-circle-outline" size="16" />
+                      <v-icon v-else-if="downloadUserDataState === -1 || uploadUserDataState === -1" icon="mdi-close" color="error" size="16" />
+                      <v-icon v-else-if="uploadUserDataState === 2" icon="mdi-check" color="secondary" size="16" />
+                      <v-progress-circular
+                        v-else
+                        indeterminate
+                        :color="uploadUserDataState === 1 ? 'secondary' : 'background'"
+                        size="16"
+                        width="1"
+                      />
+                      <span>Uploading user data</span>
+                    </div>
+                    <div v-if="includeFiles" class="d-flex align-center" style="gap: 1rem">
+                      <v-icon v-if="uploadTestState === -1" icon="mdi-help-circle-outline" size="16" />
+                      <v-icon v-else-if="downloadFilesState === -1 || uploadFilesState === -1" icon="mdi-close" color="error" size="16" />
+                      <v-icon v-else-if="uploadFilesState === 2" icon="mdi-check" color="secondary" size="16" />
+                      <v-progress-circular
+                        v-else
+                        indeterminate
+                        :color="uploadFilesState === 1 ? 'secondary' : 'background'"
+                        size="16"
+                        width="1"
+                      />
+                      <span>Uploading files</span>
+                    </div>
+
+                    <v-progress-linear
+                      :model-value="uploadPercentageProgress"
+                      :buffer-value="nextUploadPercentage"
+                      color="secondary"
+                      height="25"
+                    >
+                      <template #default>
+                        {{ $formatBytes(uploadBytesProgress) }} of {{ $formatBytes(totalSize) }}
+                      </template>
+                    </v-progress-linear>
+                  </div>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-window-item>
+        <v-window-item>
+          <v-empty-state
+            color="secondary"
+            icon="mdi-transfer"
+            title="Migration Completed!"
+            text="Your project has been migrated to your new server successfully!"
+          />
+        </v-window-item>
+      </v-window>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        v-if="panel === 2"
+        variant="flat"
+        @click="close"
+      >
+        Close
+      </v-btn>
+      <v-btn
+        v-if="hasError"
+        variant="flat"
+        prepend-icon="mdi-arrow-left"
+        @click="goBack"
+      >
+        Back
+      </v-btn>
+      <v-btn
+        v-if="panel <= 1 && !hasError"
+        :loading="migrating"
+        :disabled="!canMigrate || panel !== 0"
+        :color="canMigrate && panel === 0 ? 'warning' : undefined"
+        variant="flat"
+        append-icon="mdi-arrow-right"
+        @click="migrate"
+      >
+        Migrate
+      </v-btn>
+      <v-btn
+        v-if="panel < 2"
+        :disabled="migrating && !hasError"
+        @click="close"
+      >
+        <span>Cancel</span>
+      </v-btn>
+    </v-card-actions>
+  </ModalDialog>
 </template>
diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
new file mode 100644
index 0000000..8e25b2d
--- /dev/null
+++ b/src/components/ModalDialog.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const visible = defineModel<boolean>({ required: true });
+const { title, prependIcon, maxWidth } = defineProps<{
+  title?: string,
+  prependIcon?: string,
+  color?: string,
+  text?: string,
+  maxWidth?: number | string,
+}>();
+</script>
+
+<template>
+  <v-dialog
+    v-model="visible"
+    v-bind="$attrs"
+  >
+    <v-card
+      :title="title"
+      :text="text"
+      :color="color"
+      :prepend-icon="prependIcon"
+      :max-width="maxWidth"
+    >
+      <template #append>
+        <div class="d-flex align-center" style="gap: 1rem">
+          <slot name="append"></slot>
+          <v-btn size="x-small" icon variant="flat">
+            <v-icon icon="mdi-close" size="large" @click="visible = false" />
+          </v-btn>
+        </div>
+      </template>
+      <slot />
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/src/components/NewStructureModal.vue b/src/components/NewStructureModal.vue
index 760813f..ed5455c 100644
--- a/src/components/NewStructureModal.vue
+++ b/src/components/NewStructureModal.vue
@@ -2,6 +2,7 @@
 import blankStructure from '@/assets/blank-structure.yaml';
 import { getDefaultStructureContent } from '@/utils';
 import { useDisplay } from 'vuetify';
+import ModalDialog from '@/components/ModalDialog.vue';
 
 const emit = defineEmits(['apply']);
 const { smAndDown } = useDisplay()
@@ -19,42 +20,40 @@ const items: any[] = [
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="visible"
+    title="Select template"
     width="450"
     scrollable
   >
-    <v-card>
-      <v-card-title>Select template</v-card-title>
-      <v-sheet color="background">
-        <v-card-text>
-          <v-list v-if="smAndDown">
-            <v-list-item
-              v-for="item in items"
-              :key="item.label"
-              :title="item.label"
-              :subtitle="item.body"
-              :prepend-icon="item.icon"
-              @click="applyTemplate(item.template)"
-            />
-          </v-list>
-          <v-row v-else>
-            <v-col
-              v-for="item in items"
-              :key="item.label"
-              cols="6"
-            >
-              <v-card class="text-center" @click="applyTemplate(item.template)">
-                <div class="text-center py-2">
-                  <v-icon size="128" :icon="item.icon" />
-                </div>
-                <v-card-title class="pb-0">{{ item.label }}</v-card-title>
-                <v-card-text class="pt-0">{{ item.body }}</v-card-text>
-              </v-card>
-            </v-col>
-          </v-row>
-        </v-card-text>
-      </v-sheet>
-    </v-card>
-  </v-dialog>
+    <v-sheet color="background">
+      <v-card-text>
+        <v-list v-if="smAndDown">
+          <v-list-item
+            v-for="item in items"
+            :key="item.label"
+            :title="item.label"
+            :subtitle="item.body"
+            :prepend-icon="item.icon"
+            @click="applyTemplate(item.template)"
+          />
+        </v-list>
+        <v-row v-else>
+          <v-col
+            v-for="item in items"
+            :key="item.label"
+            cols="6"
+          >
+            <v-card class="text-center" @click="applyTemplate(item.template)">
+              <div class="text-center py-2">
+                <v-icon size="128" :icon="item.icon" />
+              </div>
+              <v-card-title class="pb-0">{{ item.label }}</v-card-title>
+              <v-card-text class="pt-0">{{ item.body }}</v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-sheet>
+  </ModalDialog>
 </template>
diff --git a/src/components/Prompt.vue b/src/components/Prompt.vue
index c14045d..9bd0e2c 100644
--- a/src/components/Prompt.vue
+++ b/src/components/Prompt.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useGlobalStore } from '@/stores/global';
 import { ref } from 'vue';
+import ModalDialog from '@/components/ModalDialog.vue';
 
 const globalStore = useGlobalStore();
 const proceed = () => {
@@ -38,40 +39,37 @@ const close = () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="globalStore.prompt.visible"
+    :title="globalStore.prompt.title"
+    :prepend-icon="globalStore.prompt.icon"
+    :color="globalStore.prompt.color"
+    :text="globalStore.prompt.body"
+    max-width="400"
     width="auto"
     persistent
     scrollable
   >
-    <v-card
-      :color="globalStore.prompt.color"
-      :text="globalStore.prompt.body"
-      :title="globalStore.prompt.title"
-      :prepend-icon="globalStore.prompt.icon"
-      max-width="400"
-    >
-      <template #actions>
-        <v-btn
-          :loading="proceeding"
-          :disabled="proceeding || closing"
-          :text="globalStore.prompt.btnText || 'OK'"
-          :prepend-icon="globalStore.prompt.btnIcon"
-          :color="globalStore.prompt.btnColor || 'primary'"
-          :class="{
-            'px-3': !!(globalStore.prompt.btnIcon)
-          }"
-          variant="flat"
-          @click="proceed"
-        />
-        <v-btn
-          :disabled="proceeding || closing"
-          :loading="closing"
-          :text="globalStore.prompt.cancelText || 'Cancel'"
-          :prepend-icon="globalStore.prompt.cancelIcon"
-          @click="cancel"
-        />
-      </template>
-    </v-card>
-  </v-dialog>
+    <v-card-actions>
+      <v-btn
+        :loading="proceeding"
+        :disabled="proceeding || closing"
+        :text="globalStore.prompt.btnText || 'OK'"
+        :prepend-icon="globalStore.prompt.btnIcon"
+        :color="globalStore.prompt.btnColor || 'primary'"
+        :class="{
+          'px-3': !!(globalStore.prompt.btnIcon)
+        }"
+        variant="flat"
+        @click="proceed"
+      />
+      <v-btn
+        :disabled="proceeding || closing"
+        :loading="closing"
+        :text="globalStore.prompt.cancelText || 'Cancel'"
+        :prepend-icon="globalStore.prompt.cancelIcon"
+        @click="cancel"
+      />
+    </v-card-actions>
+  </ModalDialog>
 </template>
diff --git a/src/components/UserSettingsDialog.vue b/src/components/UserSettingsDialog.vue
index 69d352d..8440c63 100644
--- a/src/components/UserSettingsDialog.vue
+++ b/src/components/UserSettingsDialog.vue
@@ -5,8 +5,9 @@ import type {IUserSettings} from "@/interfaces";
 import {deepToRaw, objectsAreDifferent} from "@/utils";
 import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
+import ModalDialog from '@/components/ModalDialog.vue';
 
-const visible = defineModel<boolean>('visible');
+const visible = defineModel<boolean>('visible', { required: true });
 const globalStore = useGlobalStore();
 const modelStore = useModelStore();
 const userSettings = ref<IUserSettings>(structuredClone(deepToRaw(globalStore.userSettings.data)));
@@ -79,222 +80,219 @@ watch(() => visible.value, () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="visible"
     :persistent="hasChanges"
+    title="User Settings"
+    prepend-icon="mdi-tune"
     width="1000"
     scrollable
   >
-    <v-card
-      title="User Settings"
-      prepend-icon="mdi-tune"
-    >
-      <v-card-text class="bg-background pa-4">
-        <v-row>
-          <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
-            <v-card title="Code Editor">
-              <v-card-text class="d-flex flex-column" style="gap: 1rem">
-                <v-number-input
-                  v-model="userSettings.editorFontSize"
-                  :min="6"
-                  label="Font size"
-                  hint="This shows the size of the text in the code editor, measured in pixels."
-                  persistent-hint
-                />
-                <v-number-input
-                  v-model="userSettings.editorTabSize"
-                  :min="2"
-                  :step="2"
-                  label="Tab size"
-                  hint="This sets how many spaces will be added when you press the tab key. Does not apply to the structure editor in YAML."
-                  persistent-hint
-                />
-                <v-checkbox
-                  v-model="userSettings.editorShowPrintMargin"
-                  label="Show print margin"
-                  hint="A vertical line will appear at 80 characters to help you write clearer code."
-                  persistent-hint
-                />
-              </v-card-text>
-            </v-card>
+    <v-card-text class="bg-background pa-4">
+      <v-row>
+        <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
+          <v-card title="Code Editor">
+            <v-card-text class="d-flex flex-column" style="gap: 1rem">
+              <v-number-input
+                v-model="userSettings.editorFontSize"
+                :min="6"
+                label="Font size"
+                hint="This shows the size of the text in the code editor, measured in pixels."
+                persistent-hint
+              />
+              <v-number-input
+                v-model="userSettings.editorTabSize"
+                :min="2"
+                :step="2"
+                label="Tab size"
+                hint="This sets how many spaces will be added when you press the tab key. Does not apply to the structure editor in YAML."
+                persistent-hint
+              />
+              <v-checkbox
+                v-model="userSettings.editorShowPrintMargin"
+                label="Show print margin"
+                hint="A vertical line will appear at 80 characters to help you write clearer code."
+                persistent-hint
+              />
+            </v-card-text>
+          </v-card>
 
-            <v-card title="Layout">
-              <v-card-text class="d-flex flex-column" style="gap: 1rem">
-                <v-select
-                  v-model="userSettings.layoutEditorLocation"
-                  :items="locationList"
-                  label="Editor Location"
-                  hint="Displays the editor in a different location according to the layout."
-                  persistent-hint
-                />
-                <v-select
-                  v-model="userSettings.layoutSitePreviewLocation"
-                  :items="locationList"
-                  label="Site Preview Location"
-                  hint="Displays the site preview in a different location according to the layout."
-                  persistent-hint
-                />
-                <v-checkbox
-                  v-model="userSettings.layoutSitePreviewKeepRatio"
-                  label="Keep Site Preview Ratio"
-                  hint="It will zoom in and out to preserve the aspect ratio and adhere to a 16:9 format when in Desktop mode."
-                  persistent-hint
-                />
-                <v-checkbox
-                  v-model="userSettings.layoutSitePreviewPadding"
-                  label="Site Preview Inner Padding"
-                  hint="Adds a little padding that separates the site preview from the layout."
-                  persistent-hint
-                />
-                <v-checkbox
-                  v-model="userSettings.layoutAutoSplit"
-                  label="Auto-Split Data Section"
-                  hint="Whenever there is sufficient space, automatically divide the data section to maximize your available real estate."
-                  persistent-hint
-                />
-              </v-card-text>
-            </v-card>
-          </v-col>
-          <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
-            <v-card title="Structure Editor">
-              <v-card-text class="d-flex flex-column" style="gap: 1rem">
-                <v-switch
-                  v-model="userSettings.editorLiveUpdate"
-                  color="primary"
-                  label="Live update"
-                  hint="Your admin panel will refresh automatically whenever you make a change, but it might slow down if your YAML file gets too big."
-                  persistent-hint
-                  inset
-                />
-                <v-number-input
-                  v-model="userSettings.editorUpdateTimeout"
-                  :disabled="userSettings.editorLiveUpdate"
-                  label="Update timeout (milliseconds)"
-                  hint="There will be a delay of X milliseconds before the admin panel updates after a change."
-                  persistent-hint
-                />
-                <v-switch
-                  v-model="userSettings.editorAutoSyncFrom"
-                  color="primary"
-                  label="Auto-sync from local files"
-                  hint="Updates the structure automatically whenever changes are detected in your locally synced files."
-                  persistent-hint
-                  inset
-                />
-                <v-number-input
-                  v-model="userSettings.editorAutoSyncInterval"
-                  :disabled="!userSettings.editorAutoSyncFrom"
-                  label="Update timeout (milliseconds)"
-                  hint="There will be a delay of X milliseconds before the structure updates after a change."
-                  persistent-hint
-                />
-                <v-switch
-                  v-model="userSettings.autoCleanData"
-                  color="primary"
-                  label="Auto-Clean Data"
-                  hint="Data is auto-cleaned on every edit. Anything not matching the updated structure will be lost."
-                  persistent-hint
-                  inset
-                />
-              </v-card-text>
-            </v-card>
+          <v-card title="Layout">
+            <v-card-text class="d-flex flex-column" style="gap: 1rem">
+              <v-select
+                v-model="userSettings.layoutEditorLocation"
+                :items="locationList"
+                label="Editor Location"
+                hint="Displays the editor in a different location according to the layout."
+                persistent-hint
+              />
+              <v-select
+                v-model="userSettings.layoutSitePreviewLocation"
+                :items="locationList"
+                label="Site Preview Location"
+                hint="Displays the site preview in a different location according to the layout."
+                persistent-hint
+              />
+              <v-checkbox
+                v-model="userSettings.layoutSitePreviewKeepRatio"
+                label="Keep Site Preview Ratio"
+                hint="It will zoom in and out to preserve the aspect ratio and adhere to a 16:9 format when in Desktop mode."
+                persistent-hint
+              />
+              <v-checkbox
+                v-model="userSettings.layoutSitePreviewPadding"
+                label="Site Preview Inner Padding"
+                hint="Adds a little padding that separates the site preview from the layout."
+                persistent-hint
+              />
+              <v-checkbox
+                v-model="userSettings.layoutAutoSplit"
+                label="Auto-Split Data Section"
+                hint="Whenever there is sufficient space, automatically divide the data section to maximize your available real estate."
+                persistent-hint
+              />
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
+          <v-card title="Structure Editor">
+            <v-card-text class="d-flex flex-column" style="gap: 1rem">
+              <v-switch
+                v-model="userSettings.editorLiveUpdate"
+                color="primary"
+                label="Live update"
+                hint="Your admin panel will refresh automatically whenever you make a change, but it might slow down if your YAML file gets too big."
+                persistent-hint
+                inset
+              />
+              <v-number-input
+                v-model="userSettings.editorUpdateTimeout"
+                :disabled="userSettings.editorLiveUpdate"
+                label="Update timeout (milliseconds)"
+                hint="There will be a delay of X milliseconds before the admin panel updates after a change."
+                persistent-hint
+              />
+              <v-switch
+                v-model="userSettings.editorAutoSyncFrom"
+                color="primary"
+                label="Auto-sync from local files"
+                hint="Updates the structure automatically whenever changes are detected in your locally synced files."
+                persistent-hint
+                inset
+              />
+              <v-number-input
+                v-model="userSettings.editorAutoSyncInterval"
+                :disabled="!userSettings.editorAutoSyncFrom"
+                label="Update timeout (milliseconds)"
+                hint="There will be a delay of X milliseconds before the structure updates after a change."
+                persistent-hint
+              />
+              <v-switch
+                v-model="userSettings.autoCleanData"
+                color="primary"
+                label="Auto-Clean Data"
+                hint="Data is auto-cleaned on every edit. Anything not matching the updated structure will be lost."
+                persistent-hint
+                inset
+              />
+            </v-card-text>
+          </v-card>
 
-            <v-card title="User Form">
-              <v-card-text class="d-flex flex-column" style="gap: 1rem">
-                <v-switch
-                  v-model="userSettings.userDataAutoFetch"
-                  color="primary"
-                  label="Auto-fetch"
-                  hint="Data will be automatically retrieved when the structure is loaded."
-                  persistent-hint
-                  inset
-                />
-              </v-card-text>
-            </v-card>
+          <v-card title="User Form">
+            <v-card-text class="d-flex flex-column" style="gap: 1rem">
+              <v-switch
+                v-model="userSettings.userDataAutoFetch"
+                color="primary"
+                label="Auto-fetch"
+                hint="Data will be automatically retrieved when the structure is loaded."
+                persistent-hint
+                inset
+              />
+            </v-card-text>
+          </v-card>
 
-            <v-card title="Synchronization">
-              <v-card-text class="d-flex flex-column" style="gap: 1rem">
+          <v-card title="Synchronization">
+            <v-card-text class="d-flex flex-column" style="gap: 1rem">
 
-                <v-checkbox
-                  v-model="userSettings.blueprintsIncludeTypings"
-                  label="Include Typings"
-                  hint="When enabled, typings will be included in your synced files."
-                  persistent-hint
-                />
+              <v-checkbox
+                v-model="userSettings.blueprintsIncludeTypings"
+                label="Include Typings"
+                hint="When enabled, typings will be included in your synced files."
+                persistent-hint
+              />
 
-                <v-alert
-                  type="warning"
-                  variant="tonal"
-                  density="compact"
-                >
-                  To prevent accidental overriding, <strong>Read From</strong> values are only synchronized once when loading the project.
-                </v-alert>
+              <v-alert
+                type="warning"
+                variant="tonal"
+                density="compact"
+              >
+                To prevent accidental overriding, <strong>Read From</strong> values are only synchronized once when loading the project.
+              </v-alert>
 
-                <v-select
-                  v-model="syncingFrom"
-                  :items="syncingFromList"
-                  :menu-props="{ maxWidth: '100%' }"
-                  :list-props="{ lines: 'two' }"
-                  label="Read From"
-                  multiple
-                  hint="Locale files that your project will read from."
-                  persistent-hint
-                  return-object
-                >
-                  <template #item="{ props: itemProps, item }">
-                    <v-list-item
-                      v-bind="itemProps"
-                      :subtitle="item.raw.hint"
-                    >
-                      <template #prepend>
-                        <v-checkbox-btn :model-value="syncingFrom.includes(item.raw)" />
-                      </template>
-                    </v-list-item>
-                  </template>
-                </v-select>
+              <v-select
+                v-model="syncingFrom"
+                :items="syncingFromList"
+                :menu-props="{ maxWidth: '100%' }"
+                :list-props="{ lines: 'two' }"
+                label="Read From"
+                multiple
+                hint="Locale files that your project will read from."
+                persistent-hint
+                return-object
+              >
+                <template #item="{ props: itemProps, item }">
+                  <v-list-item
+                    v-bind="itemProps"
+                    :subtitle="item.raw.hint"
+                  >
+                    <template #prepend>
+                      <v-checkbox-btn :model-value="syncingFrom.includes(item.raw)" />
+                    </template>
+                  </v-list-item>
+                </template>
+              </v-select>
 
-                <v-select
-                  v-model="syncingTo"
-                  :items="syncingToList"
-                  :menu-props="{ maxWidth: '100%' }"
-                  :list-props="{ lines: 'two' }"
-                  label="Write To"
-                  multiple
-                  hint="Locale files that your project will write to."
-                  persistent-hint
-                  return-object
-                >
-                  <template #item="{ props: itemProps, item }">
-                    <v-list-item
-                      v-bind="itemProps"
-                      :subtitle="item.raw.hint"
-                    >
-                      <template #prepend>
-                        <v-checkbox-btn :model-value="syncingTo.includes(item.raw)" />
-                      </template>
-                    </v-list-item>
-                  </template>
-                </v-select>
-              </v-card-text>
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn
-          :disabled="!hasChanges"
-          :color="hasChanges ? 'primary' : undefined"
-          variant="flat"
-          @click="apply"
-        >
-          Apply
-        </v-btn>
-        <v-btn
-          @click="close"
-        >
-          <span>Cancel</span>
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+              <v-select
+                v-model="syncingTo"
+                :items="syncingToList"
+                :menu-props="{ maxWidth: '100%' }"
+                :list-props="{ lines: 'two' }"
+                label="Write To"
+                multiple
+                hint="Locale files that your project will write to."
+                persistent-hint
+                return-object
+              >
+                <template #item="{ props: itemProps, item }">
+                  <v-list-item
+                    v-bind="itemProps"
+                    :subtitle="item.raw.hint"
+                  >
+                    <template #prepend>
+                      <v-checkbox-btn :model-value="syncingTo.includes(item.raw)" />
+                    </template>
+                  </v-list-item>
+                </template>
+              </v-select>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        :disabled="!hasChanges"
+        :color="hasChanges ? 'primary' : undefined"
+        variant="flat"
+        @click="apply"
+      >
+        Apply
+      </v-btn>
+      <v-btn
+        @click="close"
+      >
+        <span>Cancel</span>
+      </v-btn>
+    </v-card-actions>
+  </ModalDialog>
 </template>

From aebfb2d0bbb247629eae4e412965f9611882613f Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Tue, 16 Dec 2025 08:44:18 -0500
Subject: [PATCH 4/5] Warning if no endpoint selected for Integration menu item

---
 src/components/Integration.vue     | 28 +++++++++++++++++++---------
 src/components/StructureEditor.vue | 20 +++++++++++++++-----
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/Integration.vue b/src/components/Integration.vue
index dd76073..ac89175 100644
--- a/src/components/Integration.vue
+++ b/src/components/Integration.vue
@@ -85,16 +85,26 @@ ${prefix}JMS_ENCRYPTED_SECRET_KEY=${modelStore.structure.server_secret}`;
       <p class="mb-3">
         These are the environment variables to utilize in your <strong>server-side</strong> project. When working with our sandboxes, a file called<code>.env.example</code> is already provided and can be easily copied and renamed to <code>.env.local</code> or <code>.env.production</code>.
       </p>
-      <v-btn
-        variant="outlined"
-        color="primary"
-        :loading="structureStates.loadingSecretKey || structureStates.loadingCypherKey"
-        :disabled="structureStates.secretKeyLoaded && structureStates.cypherKeyLoaded"
-        @click="onGetCyperAndSecret"
+      <v-alert
+        v-if="!server"
+        type="warning"
+        variant="tonal"
+        class="ma-0"
       >
-        Get Cypher and Secret key
-      </v-btn>
-      <SyntaxHighlighter :model-value="serverSideEnvVar" language="properties" class="mt-4" />
+        Please select a endpoint for your project first.
+      </v-alert>
+      <template v-else>
+        <v-btn
+          variant="outlined"
+          color="primary"
+          :loading="structureStates.loadingSecretKey || structureStates.loadingCypherKey"
+          :disabled="structureStates.secretKeyLoaded && structureStates.cypherKeyLoaded"
+          @click="onGetCyperAndSecret"
+        >
+          Get Cypher and Secret key
+        </v-btn>
+        <SyntaxHighlighter :model-value="serverSideEnvVar" language="properties" class="mt-4" />
+      </template>
     </v-card-text>
   </v-card>
 </template>
diff --git a/src/components/StructureEditor.vue b/src/components/StructureEditor.vue
index 8668a01..0b6cf93 100644
--- a/src/components/StructureEditor.vue
+++ b/src/components/StructureEditor.vue
@@ -65,27 +65,37 @@ const sections = ref([{
   icon: 'mdi-invoice-text-edit-outline',
   title: "Structure",
   subtitle: "YAML schema and layout",
+  disabledSubtitle: (): string => 'Must be logged in',
   disabled: () => false
 }, {
   key: 'blueprints',
   icon: 'mdi-ruler-square',
   title: "Blueprints",
   subtitle: "TypeScript types and default data",
+  disabledSubtitle: (): string => 'Must be logged in',
   disabled: () => false
 }, {
   key: 'settings',
   icon: 'mdi-cog',
   title: "Settings",
   subtitle: "Configure project behavior",
-  disabledSubtitle: 'Must be logged in',
+  disabledSubtitle: (): string => 'Must be logged in',
   disabled: () => !globalStore.session.loggedIn
 }, {
   key: 'integration',
   icon: 'mdi-download-circle-outline',
   title: "Integration",
   subtitle: "Install and connect your custom endpoint",
-  disabledSubtitle: 'Must be logged in',
-  disabled: () => !globalStore.session.loggedIn
+  disabledSubtitle: (): string => {
+    if (!globalStore.session.loggedIn) {
+      return 'Must be logged in';
+    }
+    if (!structure.value.endpoint) {
+      return 'Must connect an endpoint to your project'
+    }
+    return 'Unknown'
+  },
+  disabled: () => !globalStore.session.loggedIn || !structure.value.endpoint
 }])
 
 let parseInterval: any;
@@ -468,7 +478,7 @@ watch(() => globalStore.userSettings.data, () => {
             :key="section.key"
             :prepend-icon="section.disabled() ? 'mdi-alert' : section.icon"
             :title="section.title"
-            :subtitle="section.disabled() ? section.disabledSubtitle : section.subtitle"
+            :subtitle="section.disabled() ? section.disabledSubtitle() : section.subtitle"
             :active="selectedSection?.key === section.key"
             :disabled="section.disabled()"
             @click="setSection(section)"
@@ -476,8 +486,8 @@ watch(() => globalStore.userSettings.data, () => {
         </v-list>
       </v-menu>
       <v-spacer />
-      <slot name="header.end"></slot>
       <div class="d-flex align-center pr-1" style="gap: 0.5rem">
+        <slot name="header.end" />
         <div
           v-if="!globalStore.userSettings.data.editorLiveUpdate"
           :style="{

From 165563e3f31b1c073ba2ecba9c7407123b5ae1a1 Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Tue, 16 Dec 2025 08:45:19 -0500
Subject: [PATCH 5/5] bump version number #90

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4dac3c5..26e499c 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",