From 9363de5fb40cf4f962f3085a8e81714da104bdb0 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 6 Sep 2024 17:29:07 +1000
Subject: [PATCH] feat(settings): add working shortcuts and custom shortcuts

---
 package.json                                  |   5 +-
 postcss.config.js                             |   6 +
 src/SEQTA.ts                                  |  12 +-
 .../components/TabbedContainer.svelte         |  65 ++++-----
 src/svelte-interface/index.css                |   6 +
 src/svelte-interface/pages/settings.svelte    |  25 ++--
 .../pages/settings/general.svelte             |   2 +-
 .../pages/settings/shortcuts.svelte           | 127 ++++++++++++++++--
 tailwind.config.js                            |   7 +-
 9 files changed, 194 insertions(+), 61 deletions(-)
 create mode 100644 postcss.config.js

diff --git a/package.json b/package.json
index 94f2995c..0de7833e 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "@uiw/codemirror-extensions-color": "^4.21.25",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "dompurify": "^3.0.8",
@@ -80,6 +80,7 @@
     "lodash": "^4.17.21",
     "million": "latest",
     "motion": "^10.18.0",
+    "postcss": "^8.4.45",
     "publish-browser-extension": "^2.2.1",
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "3.0.5",
@@ -93,7 +94,7 @@
     "svelte-hash-router": "^1.0.1",
     "svelte-motion": "^0.12.2",
     "swiper": "latest",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.10",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.4",
     "uuid": "^9.0.1",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..2e7af2b7
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/SEQTA.ts b/src/SEQTA.ts
index d147a86c..b8f54cff 100644
--- a/src/SEQTA.ts
+++ b/src/SEQTA.ts
@@ -48,7 +48,6 @@ var IsSEQTAPage = false
 const hasSEQTAText = document.childNodes[1].textContent?.includes('Copyright (c) SEQTA Software')
 init()
 
-
 async function init() {
   CheckForMenuList()
   const hasSEQTATitle = document.title.includes('SEQTA Learn')
@@ -66,6 +65,8 @@ async function init() {
     try {
       // wait until settingsState has been loaded from storage
       await initializeSettingsState();
+
+      console.log(settingsState.onoff)
       
       if (settingsState.onoff) {
         enableCurrentTheme()
@@ -979,9 +980,12 @@ export function addExtensionSettings() {
   extensionPopup.appendChild(extensionIframe) */
 
   // create shadow dom and render svelte app
-  const shadow = extensionPopup.attachShadow({ mode: 'open' });
-  const svelteApp = initSvelteInterface(shadow);
-  console.log(svelteApp)
+  try {
+    const shadow = extensionPopup.attachShadow({ mode: 'open' });
+    initSvelteInterface(shadow);
+  } catch (err) {
+    console.error(err)
+  }
 
   const container = document.getElementById('container')
 
diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte
index 7b7f1a8d..ca25dc5c 100644
--- a/src/svelte-interface/components/TabbedContainer.svelte
+++ b/src/svelte-interface/components/TabbedContainer.svelte
@@ -46,37 +46,40 @@
   });
 </script>
 
-<div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
-  <div class="relative flex">
-    <MotionDiv
-      class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
-      animate={{ x: calcXPos(hoveredTab) }}
-      transition={springTransition}
-    />
-    {#each tabs as { title }, index}
-      <button
-        class="relative z-10 flex-1 px-4 py-2"
-        onclick={() => activeTab = index}
-        onmouseenter={() => hoveredTab = index}
-        onmouseleave={() => hoveredTab = null}
-      >
-        {title}
-      </button>
-    {/each}
-  </div>
-</div>
-<div class="h-full px-4 overflow-y-scroll overflow-x-clip">
-  <MotionDiv
-    animate={{ x: `${-activeTab * 100}%` }}
-    transition={springTransition}
-  >
-    <div class="flex">
-      {#each tabs as { Content }, index}
-        <div class="absolute w-full transition-opacity duration-300 pb-4 {activeTab === index ? 'opacity-100' : 'opacity-0'}"
-          style="left: {index * 100}%;">
-          <Content />
-        </div>
+<div class="flex flex-col h-full">
+  <div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
+    <div class="relative flex">
+      <MotionDiv
+        class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
+        animate={{ x: calcXPos(hoveredTab) }}
+        transition={springTransition}
+      />
+      {#each tabs as { title }, index}
+        <button
+          class="relative z-10 flex-1 px-4 py-2"
+          onclick={() => activeTab = index}
+          onmouseenter={() => hoveredTab = index}
+          onmouseleave={() => hoveredTab = null}
+        >
+          {title}
+        </button>
       {/each}
     </div>
-  </MotionDiv>
+  </div>
+  <div class="h-full px-4 overflow-y-scroll overflow-x-clip">
+    <MotionDiv
+      class="h-full"
+      animate={{ x: `${-activeTab * 100}%` }}
+      transition={springTransition}
+    >
+      <div class="flex">
+        {#each tabs as { Content }, index}
+          <div class="absolute w-full transition-opacity duration-300 overflow-y-scroll {activeTab === index ? 'opacity-100' : 'opacity-0'}"
+            style="left: {index * 100}%;">
+            <Content />
+          </div>
+        {/each}
+      </div>
+    </MotionDiv>
+  </div>
 </div>
\ No newline at end of file
diff --git a/src/svelte-interface/index.css b/src/svelte-interface/index.css
index 51263b33..2dc861ee 100644
--- a/src/svelte-interface/index.css
+++ b/src/svelte-interface/index.css
@@ -18,4 +18,10 @@
 
 .tab-width {
   width: var(--tab-width);
+}
+
+input {
+  &:focus {
+    box-shadow: unset !important;
+  }
 }
\ No newline at end of file
diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte
index 71da4a30..ac0ffbf7 100644
--- a/src/svelte-interface/pages/settings.svelte
+++ b/src/svelte-interface/pages/settings.svelte
@@ -7,6 +7,7 @@
 
   import { createStandalone } from '../utils/standalone.svelte';
   import { onMount } from 'svelte'
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
 
   const openChangelog = () => {
     browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' });
@@ -21,16 +22,18 @@
   });
 </script>
 
-<div class="relative flex flex-col w-[384px] shadow-2xl gap-2 bg-white { standalone ? 'h-[600px]' : 'h-[100vh] rounded-xl' } overflow-clip dark:bg-zinc-800 dark:text-white">
-  <div class="grid border-b border-b-zinc-200/40 place-items-center">
-    <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" />
-    <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
-    <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
-  </div>
+<div class="w-[384px] shadow-2xl {$settingsState.DarkMode ? 'dark' : ''} { standalone ? 'h-[600px]' : 'h-full rounded-xl' } overflow-clip">
+  <div class="relative flex flex-col h-full gap-2 bg-white overflow-clip dark:bg-zinc-800 dark:text-white">
+    <div class="grid border-b border-b-zinc-200/40 place-items-center">
+      <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" />
+      <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
+      <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
+    </div>
 
-  <TabbedContainer tabs={[
-    { title: 'Settings', Content: Settings },
-    { title: 'Shortcuts', Content: Shortcuts },
-    { title: 'Themes', Content: Theme },
-  ]} />
+    <TabbedContainer tabs={[
+      { title: 'Settings', Content: Settings },
+      { title: 'Shortcuts', Content: Shortcuts },
+      { title: 'Themes', Content: Theme },
+    ]} />
+  </div>
 </div>
\ No newline at end of file
diff --git a/src/svelte-interface/pages/settings/general.svelte b/src/svelte-interface/pages/settings/general.svelte
index 60043869..c4afd9ad 100644
--- a/src/svelte-interface/pages/settings/general.svelte
+++ b/src/svelte-interface/pages/settings/general.svelte
@@ -22,7 +22,7 @@
 </div>
 {/snippet}
 
-<div class="flex flex-col -mt-4 overflow-y-scroll divide-y divide-zinc-100 dark:divide-zinc-700">
+<div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
   {#each [
     {
       title: "Transparency Effects",
diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte
index 14de4cdb..8bcb9934 100644
--- a/src/svelte-interface/pages/settings/shortcuts.svelte
+++ b/src/svelte-interface/pages/settings/shortcuts.svelte
@@ -1,25 +1,130 @@
-
 <script lang="ts">
-    import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+  // @ts-expect-error umm idk
+  import { MotionDiv } from 'svelte-motion';
+  import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+  import Switch from "@/svelte-interface/components/Switch.svelte"
 
+  const switchChange = (index: number) => {    
+    const updatedShortcuts = [...settingsState.shortcuts];
+    updatedShortcuts[index].enabled = !updatedShortcuts[index].enabled;
+    settingsState.shortcuts = updatedShortcuts;
+  }
 
+  let isFormVisible = $state(false);
+  let newTitle = $state("");
+  let newURL = $state("");
+
+  const toggleForm = () => {
+    isFormVisible = !isFormVisible;
+  };
+
+  const formatUrl = (inputUrl: string) => {
+    const protocolRegex = /^(http:\/\/|https:\/\/|ftp:\/\/)/;
+    return protocolRegex.test(inputUrl) ? inputUrl : `https://${inputUrl}`;
+  };
+
+  const isValidTitle = (title: string) => title.trim() !== "";
+  
+  const isValidURL = (url: string) => {
+    const pattern = new RegExp("^(https?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\-]+)*(?::\\d+)?(/[\\w\\-./]*)*$", "i");
+    return pattern.test(url);
+  };
+
+  const addNewCustomShortcut = () => {
+    if (isValidTitle(newTitle) && isValidURL(newURL)) {
+      const newShortcut = { name: newTitle.trim(), url: formatUrl(newURL).trim(), icon: newTitle[0] };
+      settingsState.customshortcuts = [...settingsState.customshortcuts, newShortcut];
+
+      newTitle = "";
+      newURL = "";
+      isFormVisible = false;
+    } else {
+      alert("Please enter a valid title and URL.");
+    }
+  };
+
+  const deleteCustomShortcut = (index: number) => {
+    settingsState.customshortcuts = settingsState.customshortcuts.filter((_, i) => i !== index);
+  };
+
+  const springTransition = { type: 'spring', damping: 20 };
 </script>
 
-{#snippet Shortcuts([string, Shortcut]) }
+{#snippet Shortcuts([index, Shortcut]: [string, { name: string, enabled: boolean }]) }
 <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>
+    <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">
+  <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>
 
-<div class="text-xl">shortcuts tab</div>
+    <MotionDiv
+      animate={isFormVisible ? { y: 0 } : { y: 0 }}
+      transition={springTransition}
+    >
+      <button
+        class="w-full px-4 py-2 mb-4 text-white transition rounded-xl bg-zinc-700/50"
+        onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
+      >
+        {isFormVisible ? 'Add' : 'Add Custom Shortcut'}
+      </button>
+    </MotionDiv>
+  </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}
-    <!-- do processing stuff here -->
-        {@render Shortcuts(shortcut)}
-    {/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}
 </div>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 562f78d1..bcd2bb97 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,12 @@ const {
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,html}",
+    "./src/**/*.{js,ts,jsx,tsx,html,svelte}",
+  ],
+  safelist: [
+    {
+      pattern: / */,
+    }
   ],
   darkMode: "class",
   theme: {