From fd3222076042a942e8494751cddc32eed580a81f Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Wed, 31 Dec 2025 10:04:26 -0500
Subject: [PATCH 1/3] Advanced sections refactor

---
 components.d.ts                    |   1 +
 docs/integration-server.md         |   2 +-
 src/components/Endpoint.vue        | 252 +++++++++++++++++++++++++++++
 src/components/Integration.vue     | 110 -------------
 src/components/Settings.vue        | 205 +----------------------
 src/components/StructureEditor.vue |  30 ++--
 6 files changed, 273 insertions(+), 327 deletions(-)
 create mode 100644 src/components/Endpoint.vue
 delete mode 100644 src/components/Integration.vue

diff --git a/components.d.ts b/components.d.ts
index b12db8e..805353a 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     DataEditor: typeof import('./src/components/DataEditor.vue')['default']
     Docs: typeof import('./src/components/Docs.vue')['default']
     EditorDrawer: typeof import('./src/components/EditorDrawer.vue')['default']
+    Endpoint: typeof import('./src/components/Endpoint.vue')['default']
     EndpointManager: typeof import('./src/components/EndpointManager.vue')['default']
     EndpointManagerModal: typeof import('./src/components/EndpointManagerModal.vue')['default']
     Error: typeof import('./src/components/Error.vue')['default']
diff --git a/docs/integration-server.md b/docs/integration-server.md
index e25a969..62f1728 100644
--- a/docs/integration-server.md
+++ b/docs/integration-server.md
@@ -1,5 +1,5 @@
 ## Server-Side Integration
-Currently, our server-side integration supports PHP, with plans to add Python in the near future.
+Currently, our server-side integration supports PHP. Check out the repository for installation instructions.
 
 ### Repository
 > #### PHP
diff --git a/src/components/Endpoint.vue b/src/components/Endpoint.vue
new file mode 100644
index 0000000..524cabf
--- /dev/null
+++ b/src/components/Endpoint.vue
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import SyntaxHighlighter from "@/components/SyntaxHighlighter.vue";
+import integrationClientMd from "../../docs/integration-client.md";
+import integrationServerMd from "../../docs/integration-server.md";
+import Docs from "@/components/Docs.vue";
+import {computed, ref} from "vue";
+import {useModelStore} from "@/stores/model";
+import {useGlobalStore} from "@/stores/global";
+import {useStructure} from "@/composables/structure";
+import type {IStructure} from "@/interfaces";
+import EndpointManagerModal from "@/components/EndpointManagerModal.vue";
+import {useUserData} from "@/composables/user-data";
+
+const structure = defineModel<IStructure>({ required: true });
+
+// Props
+const {
+  demo = false,
+  disabled = false,
+} = defineProps<{
+  demo?: boolean,
+  disabled?: boolean,
+}>();
+
+const globalStore = useGlobalStore();
+const modelStore = useModelStore();
+const { computedServerSecretKey, computedCypherKey, structureStates, getSecretKey, getCypherKey } = useStructure();
+const { fetchUserData, setUserData } = useUserData();
+const copied = ref(false);
+
+const onGetCyperAndSecret = () => {
+  getSecretKey();
+  getCypherKey();
+}
+
+const serverSideEnvVar = computed((): string => {
+  const endpoint = globalStore.session.endpoints.find(endpoint => modelStore.structure.endpoint === endpoint.uuid);
+  return `PRIVATE_FILE_PATH=./private
+PUBLIC_URL=${endpoint?.url}
+ACCESS_CONTROL_ALLOW_ORIGIN=${window.location.origin}
+SECRET_KEY=${structureStates.value.secretKeyLoaded ? computedServerSecretKey.value : ''}
+CYPHER_KEY=${structureStates.value.cypherKeyLoaded ? computedCypherKey.value : ''}`;
+});
+
+const usingVite = ref(true);
+const clientSideEnvVar = computed((): string => {
+  const prefix = usingVite.value ? 'VITE_' : '';
+  const endpoint = globalStore.session.endpoints.find(endpoint => modelStore.structure.endpoint === endpoint.uuid);
+  return `${prefix}JMS_ENDPOINT_URL=${endpoint?.url}
+${prefix}JMS_HASH=${modelStore.structure.hash}
+${prefix}JMS_ENCRYPTED_SECRET_KEY=${modelStore.structure.server_secret}`;
+});
+
+const server = computed({
+  get(): string | null {
+    return structure.value.endpoint ?? null;
+  },
+  set(value: string) {
+    structure.value.endpoint = value;
+    const endpoint = globalStore.session.endpoints.find(endpoint => endpoint.uuid === value);
+    if (endpoint) {
+      structure.value.server_url = endpoint.url;
+      structure.value.server_secret = endpoint.secret;
+
+      globalStore.setPrompt({
+        ...globalStore.prompt,
+        visible: true,
+        title: 'Fetch data',
+        body: 'User data might be different on this server. Do you wish to fetch the user data? This action will override any unsaved change in your forms.',
+        btnText: 'Fetch',
+        btnIcon: 'mdi-cloud-arrow-down-outline',
+        btnColor: 'warning',
+        cancelText: 'Skip',
+        cancelIcon: 'mdi-skip-next-circle-outline',
+        callback: () => new Promise((resolve, reject) => {
+          fetchUserData().then((response: any) => {
+            serverSettings.value = response.settings;
+            setUserData(response.data, true);
+            resolve();
+          }).catch(reject)
+        })
+      })
+    }
+  }
+})
+
+const showEndpointManager = ref(false);
+
+const manageEndpoints = () => {
+  showEndpointManager.value = true;
+}
+
+</script>
+
+<template>
+  <v-card tile flat class="overflow-auto">
+    <v-card-text class="d-flex flex-column" style="gap: 1rem">
+
+      <Docs v-model="integrationServerMd" />
+
+      <EndpointManagerModal
+        v-model="showEndpointManager"
+      />
+
+      <!-- SERVER URL -->
+      <v-select
+        v-model="server"
+        :items="globalStore.session.endpoints"
+        :disabled="demo || disabled"
+        item-title="url"
+        item-value="uuid"
+        prepend-inner-icon="mdi-webhook"
+        hide-details="auto"
+        hint="This feature allows you to specify a URL that will be triggered whenever data is read from or saved to the admin panel. By integrating an endpoint, you can synchronize data with a remote server and perform various transformations. Check the Server-Side Integration section of the Integration panel for further information."
+        persistent-hint
+        required
+        clearable
+        autocomplete="endpoint"
+      >
+        <template #label>
+          <span class="mr-2 text-error">*</span>Endpoint
+        </template>
+
+        <template #append-inner>
+          <div class="d-flex align-center" style="gap: 0.5rem">
+            <v-btn
+              variant="outlined"
+              size="small"
+              @mousedown.stop
+              @click="manageEndpoints"
+            >
+              Manage
+            </v-btn>
+          </div>
+        </template>
+      </v-select>
+
+      <!-- SERVER SECRET -->
+      <v-text-field
+        v-model="computedServerSecretKey"
+        :type="structureStates.secretKeyLoaded ? 'text' : 'password'"
+        :disabled="!server || demo || disabled || !structure.uuid"
+        prepend-inner-icon="mdi-key-chain"
+        hide-details="auto"
+        label="API Server Secret"
+        hint="The secret field, used for authentication, will be passed as X-Jms-Api-Key in your API call headers. This ensures secure access to the API's functionalities. Keep it confidential to protect your data."
+        readonly
+        persistent-hint
+        name="server_secret"
+        autocomplete="new-password"
+      >
+        <template v-if="!structureStates.secretKeyLoaded" #append-inner>
+          <v-btn
+            :disabled="!structure.uuid"
+            :loading="structureStates.loadingSecretKey"
+            variant="outlined"
+            size="small"
+            @click="getSecretKey"
+          >
+            Get
+          </v-btn>
+        </template>
+      </v-text-field>
+
+      <!-- CYPHER KEY -->
+      <v-text-field
+        v-model="computedCypherKey"
+        :type="structureStates.cypherKeyLoaded ? 'text' : 'password'"
+        :disabled="!server || demo || disabled || !structure.uuid"
+        prepend-inner-icon="mdi-script-text-key-outline"
+        hide-details="auto"
+        label="API Cypher Key"
+        hint="A securely generated key used to decrypt the API secret key. This key must be kept confidential and protected to ensure the integrity and security of sensitive data."
+        readonly
+        persistent-hint
+        name="cypher_key"
+        autocomplete="new-password"
+      >
+        <template v-if="!structureStates.cypherKeyLoaded" #append-inner>
+          <v-btn
+            :disabled="!structure.uuid"
+            :loading="structureStates.loadingCypherKey"
+            variant="outlined"
+            size="small"
+            @click="getCypherKey"
+          >
+            Get
+          </v-btn>
+        </template>
+      </v-text-field>
+    </v-card-text>
+
+    <v-card-text>
+      <Docs v-model="integrationClientMd" />
+
+      <h3 class="mt-4">
+        Environment Variables
+      </h3>
+      <v-alert
+        v-if="!server"
+        type="warning"
+        variant="tonal"
+        class="ma-0"
+      >
+        Please select a endpoint for your project first.
+      </v-alert>
+      <template v-else>
+        <p class="mb-3">
+          These are the environment variables to utilize in your <strong>client-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-card theme="dark" class="pa-2 mb-n1" flat>
+          <v-checkbox
+            v-model="usingVite"
+            label="Using Vite"
+            hide-details
+          />
+        </v-card>
+        <SyntaxHighlighter :model-value="clientSideEnvVar" language="properties" />
+
+      </template>
+
+      <Docs v-model="integrationServerMd" class="mt-6" />
+
+      <h3 class="mt-4">
+        Environment Variables
+      </h3>
+      <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-alert
+        v-if="!server"
+        type="warning"
+        variant="tonal"
+        class="ma-0"
+      >
+        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/Integration.vue b/src/components/Integration.vue
deleted file mode 100644
index ac89175..0000000
--- a/src/components/Integration.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import SyntaxHighlighter from "@/components/SyntaxHighlighter.vue";
-import integrationClientMd from "../../docs/integration-client.md";
-import integrationServerMd from "../../docs/integration-server.md";
-import Docs from "@/components/Docs.vue";
-import {computed, ref} from "vue";
-import {useModelStore} from "@/stores/model";
-import {useGlobalStore} from "@/stores/global";
-import {useStructure} from "@/composables/structure";
-import type {IStructure} from "@/interfaces";
-
-const structure = defineModel<IStructure>({ required: true });
-
-const globalStore = useGlobalStore();
-const modelStore = useModelStore();
-const { computedServerSecretKey, computedCypherKey, structureStates, getSecretKey, getCypherKey } = useStructure();
-
-const server = computed((): string | null => {
-  return structure.value.endpoint ?? null;
-})
-
-const onGetCyperAndSecret = () => {
-  getSecretKey();
-  getCypherKey();
-}
-
-const serverSideEnvVar = computed((): string => {
-  const endpoint = globalStore.session.endpoints.find(endpoint => modelStore.structure.endpoint === endpoint.uuid);
-  return `PRIVATE_FILE_PATH=./private
-PUBLIC_URL=${endpoint?.url}
-ACCESS_CONTROL_ALLOW_ORIGIN=${window.location.origin}
-SECRET_KEY=${structureStates.value.secretKeyLoaded ? computedServerSecretKey.value : ''}
-CYPHER_KEY=${structureStates.value.cypherKeyLoaded ? computedCypherKey.value : ''}`;
-});
-
-const usingVite = ref(true);
-const clientSideEnvVar = computed((): string => {
-  const prefix = usingVite.value ? 'VITE_' : '';
-  const endpoint = globalStore.session.endpoints.find(endpoint => modelStore.structure.endpoint === endpoint.uuid);
-  return `${prefix}JMS_ENDPOINT_URL=${endpoint?.url}
-${prefix}JMS_HASH=${modelStore.structure.hash}
-${prefix}JMS_ENCRYPTED_SECRET_KEY=${modelStore.structure.server_secret}`;
-});
-</script>
-
-<template>
-  <v-card tile flat class="overflow-auto">
-    <v-card-text>
-      <h1>Integration Guide</h1>
-      <hr>
-
-      <Docs v-model="integrationClientMd" />
-
-      <h3 class="mt-4">
-        Environment Variables
-      </h3>
-      <v-alert
-        v-if="!server"
-        type="warning"
-        variant="tonal"
-        class="ma-0"
-      >
-        Please select a endpoint for your project first.
-      </v-alert>
-      <template v-else>
-        <p class="mb-3">
-          These are the environment variables to utilize in your <strong>client-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-card theme="dark" class="pa-2 mb-n1" flat>
-          <v-checkbox
-            v-model="usingVite"
-            label="Using Vite"
-            hide-details
-          />
-        </v-card>
-        <SyntaxHighlighter :model-value="clientSideEnvVar" language="properties" />
-
-      </template>
-
-      <Docs v-model="integrationServerMd" class="mt-6" />
-
-      <h3 class="mt-4">
-        Environment Variables
-      </h3>
-      <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-alert
-        v-if="!server"
-        type="warning"
-        variant="tonal"
-        class="ma-0"
-      >
-        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/Settings.vue b/src/components/Settings.vue
index 016cd7d..020c320 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import {computed, ref, watch} from 'vue';
+import {ref, watch} from 'vue';
 import { useDisplay } from 'vuetify';
 import type {IStructure} from '@/interfaces';
 import {useStructure} from '@/composables/structure';
-import {useGlobalStore} from '@/stores/global';
-import EndpointManagerModal from '@/components/EndpointManagerModal.vue';
-import {useUserData} from "@/composables/user-data";
 
 // Definitions
-const { secretKey, cypherKey, adminUrl, canOpenAdminUrl, saveStructureSimple, serverSettings, computedServerSecretKey, computedCypherKey, structureStates, getStructureRules, getSecretKey, getCypherKey } = useStructure();
-const { fetchUserData, setUserData } = useUserData();
+const { secretKey, cypherKey, saveStructureSimple, structureStates, getStructureRules } = useStructure();
+
 const { smAndDown } = useDisplay()
-const copied = ref(false);
-const globalStore = useGlobalStore();
 const formIsValid = ref(false);
 const structure = defineModel<IStructure>({ required: true });
 
@@ -25,61 +20,6 @@ const {
   disabled?: boolean,
 }>();
 
-const copy = () => {
-  const field: HTMLInputElement = document.getElementById('adminRef') as HTMLInputElement;
-  if (field) {
-    field.select();
-    document.execCommand('copy');
-    copied.value = true;
-    setTimeout(() => copied.value = false, 2000);
-  }
-}
-
-const select = () => {
-  const field: HTMLInputElement = document.getElementById('adminRef') as HTMLInputElement;
-  if (field) {
-    field.select();
-  }
-}
-
-const server = computed({
-  get(): string | null {
-    return structure.value.endpoint ?? null;
-  },
-  set(value: string) {
-    structure.value.endpoint = value;
-    const endpoint = globalStore.session.endpoints.find(endpoint => endpoint.uuid === value);
-    if (endpoint) {
-      structure.value.server_url = endpoint.url;
-      structure.value.server_secret = endpoint.secret;
-
-      globalStore.setPrompt({
-        ...globalStore.prompt,
-        visible: true,
-        title: 'Fetch data',
-        body: 'User data might be different on this server. Do you wish to fetch the user data? This action will override any unsaved change in your forms.',
-        btnText: 'Fetch',
-        btnIcon: 'mdi-cloud-arrow-down-outline',
-        btnColor: 'warning',
-        cancelText: 'Skip',
-        cancelIcon: 'mdi-skip-next-circle-outline',
-        callback: () => new Promise((resolve, reject) => {
-          fetchUserData().then((response: any) => {
-            serverSettings.value = response.settings;
-            setUserData(response.data, true);
-            resolve();
-          }).catch(reject)
-        })
-      })
-    }
-  }
-})
-
-const showEndpointManager = ref(false);
-
-const manageEndpoints = () => {
-  showEndpointManager.value = true;
-}
 
 watch(() => structure.value.endpoint, () => {
   secretKey.value = '';
@@ -118,145 +58,6 @@ watch(() => [structure.value.permission_structure, structure.value.permission_ad
     </v-alert>
 
     <v-card tile flat>
-      <v-card-text class="pb-0">
-        <h1>Settings</h1>
-        <hr>
-      </v-card-text>
-<!--      <v-card-title>-->
-<!--        Public URL-->
-<!--      </v-card-title>-->
-<!--      <v-card-text class="d-flex flex-column" style="gap: 1rem">-->
-
-<!--        &lt;!&ndash; ADMIN URL &ndash;&gt;-->
-<!--        <v-text-field-->
-<!--          id="adminRef"-->
-<!--          v-model="adminUrl"-->
-<!--          :disabled="!canOpenAdminUrl"-->
-<!--          label="URL"-->
-<!--          hint="This read-only field displays the generated URL for accessing the admin panel. Feel free to share this link with authorized users to grant them access to manage the application."-->
-<!--          persistent-hint-->
-<!--          readonly-->
-<!--          @click="select"-->
-<!--        >-->
-<!--          <template #append-inner>-->
-<!--            <div class="d-flex align-center" style="gap: 0.5rem">-->
-<!--              <v-btn-->
-<!--                size="small"-->
-<!--                variant="text"-->
-<!--                :color="copied ? 'primary' : undefined"-->
-<!--                :readonly="copied"-->
-<!--                :disabled="!canOpenAdminUrl"-->
-<!--                :icon="smAndDown"-->
-<!--                @click="copy"-->
-<!--              >-->
-<!--                <template v-if="!copied || smAndDown">-->
-<!--                  <v-icon :start="!smAndDown" icon="mdi-content-copy" />-->
-<!--                  <span v-if="!smAndDown">Copy</span>-->
-<!--                </template>-->
-<!--                <template v-else>-->
-<!--                  <v-icon start icon="mdi-check" />-->
-<!--                  <span>Copied!</span>-->
-<!--                </template>-->
-<!--              </v-btn>-->
-<!--            </div>-->
-<!--          </template>-->
-<!--        </v-text-field>-->
-<!--      </v-card-text>-->
-      <v-card-title>Server</v-card-title>
-      <v-card-text class="d-flex flex-column" style="gap: 1rem">
-
-        <EndpointManagerModal
-          v-model="showEndpointManager"
-        />
-
-        <!-- SERVER URL -->
-        <v-select
-          v-model="server"
-          :items="globalStore.session.endpoints"
-          :disabled="demo || disabled"
-          item-title="url"
-          item-value="uuid"
-          prepend-inner-icon="mdi-webhook"
-          hide-details="auto"
-          hint="This feature allows you to specify a URL that will be triggered whenever data is read from or saved to the admin panel. By integrating an endpoint, you can synchronize data with a remote server and perform various transformations. Check the Server-Side Integration section of the Integration panel for further information."
-          persistent-hint
-          required
-          clearable
-          autocomplete="endpoint"
-        >
-          <template #label>
-            <span class="mr-2 text-error">*</span>Endpoint
-          </template>
-
-          <template #append-inner>
-            <div class="d-flex align-center" style="gap: 0.5rem">
-              <v-btn
-                variant="outlined"
-                size="small"
-                @mousedown.stop
-                @click="manageEndpoints"
-              >
-                Manage
-              </v-btn>
-            </div>
-          </template>
-        </v-select>
-
-        <!-- SERVER SECRET -->
-        <v-text-field
-          v-model="computedServerSecretKey"
-          :type="structureStates.secretKeyLoaded ? 'text' : 'password'"
-          :disabled="!server || demo || disabled || !structure.uuid"
-          prepend-inner-icon="mdi-key-chain"
-          hide-details="auto"
-          label="API Server Secret"
-          hint="The secret field, used for authentication, will be passed as X-Jms-Api-Key in your API call headers. This ensures secure access to the API's functionalities. Keep it confidential to protect your data."
-          readonly
-          persistent-hint
-          name="server_secret"
-          autocomplete="new-password"
-        >
-          <template v-if="!structureStates.secretKeyLoaded" #append-inner>
-            <v-btn
-              :disabled="!structure.uuid"
-              :loading="structureStates.loadingSecretKey"
-              variant="outlined"
-              size="small"
-              @click="getSecretKey"
-            >
-              Get
-            </v-btn>
-          </template>
-        </v-text-field>
-
-        <!-- CYPHER KEY -->
-        <v-text-field
-          v-model="computedCypherKey"
-          :type="structureStates.cypherKeyLoaded ? 'text' : 'password'"
-          :disabled="!server || demo || disabled || !structure.uuid"
-          prepend-inner-icon="mdi-script-text-key-outline"
-          hide-details="auto"
-          label="API Cypher Key"
-          hint="A securely generated key used to decrypt the API secret key. This key must be kept confidential and protected to ensure the integrity and security of sensitive data."
-          readonly
-          persistent-hint
-          name="cypher_key"
-          autocomplete="new-password"
-        >
-          <template v-if="!structureStates.cypherKeyLoaded" #append-inner>
-            <v-btn
-              :disabled="!structure.uuid"
-              :loading="structureStates.loadingCypherKey"
-              variant="outlined"
-              size="small"
-              @click="getCypherKey"
-            >
-              Get
-            </v-btn>
-          </template>
-        </v-text-field>
-      </v-card-text>
-
       <v-card-title>Permissions</v-card-title>
       <v-card-text class="d-flex flex-column" style="gap: 1rem">
         <v-alert variant="tonal" icon="mdi-information-slab-box-outline">
diff --git a/src/components/StructureEditor.vue b/src/components/StructureEditor.vue
index 961e290..1527ed8 100644
--- a/src/components/StructureEditor.vue
+++ b/src/components/StructureEditor.vue
@@ -6,7 +6,7 @@ import type {IStructure, IStructureData} from '@/interfaces';
 import TriggerMenu from '@/components/TriggerMenu.vue';
 import {useStructure} from '@/composables/structure';
 import Settings from '@/components/Settings.vue';
-import Integration from '@/components/Integration.vue';
+import Endpoint from '@/components/Endpoint.vue';
 import '@/plugins/aceeditor';
 import {useGlobalStore} from '@/stores/global';
 import {useTypings} from "@/composables/typings";
@@ -78,28 +78,21 @@ const sections = ref([{
   key: 'structure',
   icon: 'mdi-invoice-text-edit-outline',
   title: "Structure",
-  subtitle: "YAML schema and layout",
+  subtitle: "Data structure in YAML format",
   disabledSubtitle: (): string => 'Must be logged in',
   disabled: () => false,
 }, {
   key: 'blueprints',
   icon: 'mdi-language-typescript',
   title: "Typescript",
-  subtitle: "TypeScript types and default data",
+  subtitle: "Generated types and default data",
   disabledSubtitle: (): string => 'Must be logged in',
   disabled: () => false
-}, {
-  key: 'settings',
-  icon: 'mdi-cog',
-  title: "Settings",
-  subtitle: "Configure project behavior",
-  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",
+  icon: 'mdi-server-network',
+  title: "Endpoint",
+  subtitle: "Install and save your data remotely",
   disabledSubtitle: (): string => {
     if (!globalStore.session.loggedIn) {
       return 'Must be logged in';
@@ -110,6 +103,13 @@ const sections = ref([{
     return 'Unknown'
   },
   disabled: () => !globalStore.session.loggedIn || !structure.value.endpoint
+}, {
+  key: 'settings',
+  icon: 'mdi-cog',
+  title: "Settings",
+  subtitle: "Configure project behavior",
+  disabledSubtitle: (): string => 'Must be logged in',
+  disabled: () => !globalStore.session.loggedIn
 }])
 const filteredSections = computed((): any[] => sections.value.filter(section => {
   // @ts-expect-error Values are hardcoded... not an issue
@@ -789,8 +789,10 @@ watch(() => globalStore.userSettings.data, () => {
       </v-tabs-window-item>
       <v-tabs-window-item v-if="globalStore.uiConfig.structure_menu_integration" value="integration" class="fill-height">
         <div class="d-flex flex-column overflow-auto h-100" style="max-height: calc(100vh - 109px)">
-          <Integration
+          <Endpoint
             v-model="structure"
+            :demo="!globalStore.session.loggedIn"
+            :disabled="structure.type !== 'owner'"
           />
         </div>
       </v-tabs-window-item>

From 122f7bd52f469d2f5ad0da952e9514694fddef09 Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Wed, 31 Dec 2025 10:04:37 -0500
Subject: [PATCH 2/3] Modal dialog click zone fix

---
 src/components/ModalDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
index f70592f..846a12c 100644
--- a/src/components/ModalDialog.vue
+++ b/src/components/ModalDialog.vue
@@ -22,8 +22,8 @@ const { title, prependIcon } = defineProps<{
       <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 size="x-small" icon variant="flat" @click="visible = false">
+            <v-icon icon="mdi-close" size="large" />
           </v-btn>
         </div>
       </template>

From 17b2fd21b9528a1010b3b0abe5e289238681db96 Mon Sep 17 00:00:00 2001
From: Danny Coulombe <contact@dannycoulombe.com>
Date: Wed, 31 Dec 2025 10:04:49 -0500
Subject: [PATCH 3/3] Modal dialog click zone fix

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

diff --git a/package.json b/package.json
index 04121f5..3e39b87 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",