fix: change shortcuts to rely on links list

src/background.ts

@@ -100,10 +100,6 @@ const DefaultValues: SettingsState = {
   assessmentsAverage: true,
   defaultPage: "home",
   shortcuts: [
-    {
-      name: "YouTube",
-      enabled: false,
-    },
     {
       name: "Outlook",
       enabled: true,
@@ -112,42 +108,10 @@ const DefaultValues: SettingsState = {
       name: "Office",
       enabled: true,
     },
-    {
-      name: "Spotify",
-      enabled: false,
-    },
     {
       name: "Google",
       enabled: true,
     },
-    {
-      name: "DuckDuckGo",
-      enabled: false,
-    },
-    {
-      name: "Cool Math Games",
-      enabled: false,
-    },
-    {
-      name: "SACE",
-      enabled: false,
-    },
-    {
-      name: "Google Scholar",
-      enabled: false,
-    },
-    {
-      name: "Gmail",
-      enabled: false,
-    },
-    {
-      name: "Netflix",
-      enabled: false,
-    },
-    {
-      name: "Education Perfect",
-      enabled: false,
-    },
   ],
   customshortcuts: [],
   lettergrade: false,

src/interface/pages/settings/shortcuts.svelte

@@ -3,6 +3,7 @@
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
   import Switch from "@/interface/components/Switch.svelte"
   import { onMount } from 'svelte';
+  import Shortcuts from "@/seqta/content/links.json"
 
   let isLoaded = $state(false);
 
@@ -21,10 +22,14 @@
     });
   });
 
-  const switchChange = (index: number) => {    
-    const updatedShortcuts = [...settingsState.shortcuts];
-    updatedShortcuts[index].enabled = !updatedShortcuts[index].enabled;
-    settingsState.shortcuts = updatedShortcuts;
+  const switchChange = (shortcut: any) => {    
+    const value = $settingsState.shortcuts.find(s => s.name === shortcut);
+    if (value) {
+      value.enabled = !value.enabled;
+      settingsState.shortcuts = settingsState.shortcuts;
+    } else {
+      settingsState.shortcuts = [...settingsState.shortcuts, { name: shortcut, enabled: true }];
+    }
   }
 
   let isFormVisible = $state(false);
@@ -65,15 +70,6 @@
   };
 </script>
 
-{#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
-<div class="flex justify-between items-center px-4 py-3">
-  <div class="pr-4">
-    <h2 class="text-sm">{Shortcut.name}</h2>
-  </div>
-  <Switch state={Shortcut.enabled} onChange={() => switchChange(parseInt(index))} />
-</div>
-{/snippet}
-
 <div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700">
   {#if isLoaded}
     <div>
@@ -136,8 +132,13 @@
       </MotionDiv>
     </div>
 
-    {#each Object.entries($settingsState.shortcuts) as shortcut}
-      {@render Shortcuts(shortcut)}
+    {#each Object.entries(Shortcuts) as shortcut}
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm">{shortcut[0]}</h2>
+        </div>
+        <Switch state={$settingsState.shortcuts.find(s => s.name === shortcut[0])?.enabled ?? false} onChange={() => switchChange(shortcut[0])} />
+      </div>
     {/each}
 
     <!-- Custom Shortcuts Section -->

src/seqta/utils/listeners/StorageChanges.ts

@@ -70,14 +70,13 @@ export class StorageChangeHandler {
     oldValue: { enabled: boolean; name: string }[],
   ) {
     const addedShortcuts = newValue.filter((newItem: any) => {
-      const isAdded = oldValue.some((oldItem: any) => {
-        const match = oldItem.name === newItem.name;
-        const wasDisabled = !oldItem.enabled;
-        const isEnabled = newItem.enabled;
-        return match && wasDisabled && isEnabled;
+      const wasDisabledAndNowEnabled = oldValue.some((oldItem: any) => {
+        return oldItem.name === newItem.name && !oldItem.enabled && newItem.enabled;
       });
 
-      return isAdded;
+      const isNewShortcut = !oldValue.some((oldItem: any) => oldItem.name === newItem.name);
+
+      return (wasDisabledAndNowEnabled || isNewShortcut) && newItem.enabled;
     });
 
     const removedShortcuts = newValue.filter((newItem: any) => {