preliminary shortcut loading

src/svelte-interface/pages/settings/shortcuts.svelte

@@ -1,8 +1,29 @@
+
 <script lang="ts">
+    import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+
+
     function formatUrl(inputUrl: string) {
         const protocolRegex = /^(http:\/\/|https:\/\/|ftp:\/\/)/;
         return protocolRegex.test(inputUrl) ? inputUrl : `https://${inputUrl}`;
     }
+
 </script>
 
-<div class="text-xl">shortcuts tab</div>
+{#snippet Shortcuts([string, Shortcut]) }
+<div class="flex items-center justify-between px-4 py-3">
+  <div class="pr-4">
+    <h2 class="text-sm font-bold">{Shortcut.name}</h2>
+    <p class="text-xs">{Shortcut.enabled}</p>
+  </div>
+</div>
+{/snippet}
+
+
+<div class="text-xl">shortcuts tab</div>
+
+<div class="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100 dark:divide-zinc-700">
+    {#each Object.entries(settingsState.shortcuts) as shortcut}
+        {@render Shortcuts(shortcut)}
+    {/each}
+</div>

src/svelte-interface/types/SettingsProps.ts

@@ -1,5 +1,4 @@
 import type { SettingsState } from './AppProps';
-
 export interface SettingsList {
   title: string;
   id: number;
@@ -7,6 +6,8 @@ export interface SettingsList {
   Component: any; /* TODO: Give this a type */
   props?: any;
 }
+
+
 export interface SettingsProps {
   settingsState: SettingsState;
   setSettingsState: React.Dispatch<React.SetStateAction<SettingsState>>;

src/types/storage.ts

@@ -44,7 +44,7 @@ interface ToggleItem {
   toggle: boolean;
 }
 
-interface Shortcut {
+export interface Shortcut {
   enabled: boolean;
   name: string;
 }