feat: make svelte interface work in popup

2026-06-06 11:44:40 +00:00 · 2024-11-01 11:35:24 +11:00
parent 3d276e3b22
commit 54e7b58794
5 changed files with 132 additions and 94 deletions
@@ -6,7 +6,8 @@
    <title>BetterSEQTA+ Settings</title>
  </head>
  <body>
-    <script type="module" src="./index.ts"></script>
+    <div id="app"></div>
    asdasds - I (Crazypersonalph) agree with this statement.
+    <script type="module" src="./index.ts"></script>
  </body>
 </html>
@@ -1,16 +1,28 @@
-import { mount } from 'svelte';
-import Settings from './pages/settings.svelte';
-import { initializeSettingsState } from '@/seqta/utils/listeners/SettingsState';
-import './index.css';
+import "./index.css"
+import { mount } from "svelte"
+import type { ComponentType } from "svelte"
+import Settings from "./pages/settings.svelte"

+export default function renderSvelte(
+  Component: ComponentType | any,
+  mountPoint: ShadowRoot | HTMLElement,
+  props: Record<string, any> = {},
+) {
+  const app = mount(Component, {
+    target: mountPoint,
+    props: {
+      standalone: true,
+      ...props,
+    },
+  })

-initializeSettingsState();
+  return app
+}

-const app = mount(Settings, {
-  target: document.body,
-  props: {
-    standalone: true
-  }
-});
+const mountPoint = document.getElementById('app')
+if (!mountPoint) {
+  console.error('Mount point #app not found')
+  throw new Error('Mount point #app not found')
+}

-console.log(app);
+renderSvelte(Settings, mountPoint)
@@ -7,7 +7,7 @@

  import { createStandalone } from '../utils/standalone.svelte';
  import { onMount } from 'svelte'
-  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'

  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
  import ColourPicker from '../components/ColourPicker.svelte'
@@ -55,6 +55,7 @@
    });
    
    if (!standalone) return;
+    initializeSettingsState();
    // @ts-ignore
    let globalStandalone = createStandalone();
    globalStandalone = standalone;
@@ -2,6 +2,24 @@
  import MotionDiv from '@/svelte-interface/components/MotionDiv.svelte';
  import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
  import Switch from "@/svelte-interface/components/Switch.svelte"
+  import { onMount } from 'svelte';
+
+  let isLoaded = $state(false);
+
+  onMount(async () => {
+    // Wait for settingsState to be initialized
+    await new Promise<void>((resolve) => {
+      const checkState = () => {
+        if ($settingsState?.shortcuts) {
+          isLoaded = true;
+          resolve();
+        } else {
+          setTimeout(checkState, 100);
+        }
+      };
+      checkState();
+    });
+  });

  const switchChange = (index: number) => {    
    const updatedShortcuts = [...settingsState.shortcuts];
@@ -59,89 +77,95 @@
 {/snippet}

 <div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700">
-  <div>
-    <MotionDiv
-      initial={{ opacity: 0, height: 0 }}
-      animate={isFormVisible ? { opacity: 1, height: "auto" } : { opacity: 0, height: 0 }}
-      exit={{ opacity: 0, height: 0 }}
-      transition={springTransition}
-    >
-      {#if isFormVisible}
-        <div class="flex flex-col items-center">
-          <MotionDiv
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.1, duration: 0.4 }}
-            class="w-full"
-          >
-            <input
-              class="w-full p-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
-              type="text"
-              placeholder="Shortcut Name"
-              bind:value={newTitle}
-            />
-          </MotionDiv>
-          <MotionDiv
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2, duration: 0.4 }}
-            class="w-full"
-          >
-            <input
-              class="w-full p-2 my-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
-              type="text"
-              placeholder="URL eg. https://google.com"
-              bind:value={newURL}
-            />
-          </MotionDiv>
-        </div>
-      {/if}
-    </MotionDiv>
-
-    <MotionDiv
-      animate={isFormVisible ? { y: 0 } : { y: 0 }}
-      transition={springTransition}
-    >
-      <button
-        class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50"
-        onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
+  {#if isLoaded}
+    <div>
+      <MotionDiv
+        initial={{ opacity: 0, height: 0 }}
+        animate={isFormVisible ? { opacity: 1, height: "auto" } : { opacity: 0, height: 0 }}
+        exit={{ opacity: 0, height: 0 }}
+        transition={springTransition}
      >
        {#if isFormVisible}
-          <MotionDiv
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.7 }}
-          >
-            Add
-          </MotionDiv>
-        {:else}
-          <MotionDiv
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            Add Custom Shortcut
-          </MotionDiv>
+          <div class="flex flex-col items-center">
+            <MotionDiv
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1, duration: 0.4 }}
+              class="w-full"
+            >
+              <input
+                class="w-full p-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                type="text"
+                placeholder="Shortcut Name"
+                bind:value={newTitle}
+              />
+            </MotionDiv>
+            <MotionDiv
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2, duration: 0.4 }}
+              class="w-full"
+            >
+              <input
+                class="w-full p-2 my-2 transition border-0 rounded-lg placeholder-zinc-300 bg-zinc-100 dark:bg-zinc-700 focus:bg-zinc-200/50 dark:focus:bg-zinc-600"
+                type="text"
+                placeholder="URL eg. https://google.com"
+                bind:value={newURL}
+              />
+            </MotionDiv>
+          </div>
        {/if}
-      </button>
-    </MotionDiv>
-  </div>
+      </MotionDiv>

-  {#each Object.entries($settingsState.shortcuts) as shortcut}
-    {@render Shortcuts(shortcut)}
-  {/each}
-
-  <!-- Custom Shortcuts Section -->
-  {#each $settingsState.customshortcuts as shortcut, index}
-    <div class="flex items-center justify-between px-4 py-3">
-      {shortcut.name}
-      <button onclick={() => deleteCustomShortcut(index)}>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
+      <MotionDiv
+        animate={isFormVisible ? { y: 0 } : { y: 0 }}
+        transition={springTransition}
+      >
+        <button
+          class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50"
+          onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
+        >
+          {#if isFormVisible}
+            <MotionDiv
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.7 }}
+            >
+              Add
+            </MotionDiv>
+          {:else}
+            <MotionDiv
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              Add Custom Shortcut
+            </MotionDiv>
+          {/if}
+        </button>
+      </MotionDiv>
    </div>
-  {/each}
+
+    {#each Object.entries($settingsState.shortcuts) as shortcut}
+      {@render Shortcuts(shortcut)}
+    {/each}
+
+    <!-- Custom Shortcuts Section -->
+    {#each $settingsState.customshortcuts as shortcut, index}
+      <div class="flex items-center justify-between px-4 py-3">
+        {shortcut.name}
+        <button onclick={() => deleteCustomShortcut(index)}>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    {/each}
+  {:else}
+    <div class="p-4 text-center">
+      Loading shortcuts...
+    </div>
+  {/if}
 </div>