From e17dcb4a6f55cd6069e22c5a0718d0e16baca147 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Wed, 12 Feb 2025 17:22:54 +0100
Subject: [PATCH] extensions ui

---
 src/routes/settings/extensions/+page.svelte   | 75 +++++++++++--------
 .../extensions/ExtensionSettings.svelte       | 12 +--
 2 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/routes/settings/extensions/+page.svelte b/src/routes/settings/extensions/+page.svelte
index b7b0b8b..4fa72ed 100644
--- a/src/routes/settings/extensions/+page.svelte
+++ b/src/routes/settings/extensions/+page.svelte
@@ -1,38 +1,51 @@
 <script lang='ts'>
-  import { Button } from '$lib/components/ui/button'
-  import { Settings, Trash } from 'lucide-svelte'
+  import { saved } from '$lib/modules/extensions'
+  import ExtensionSettings from './ExtensionSettings.svelte'
+
+  const typeMap = {
+    nzb: 'NZB',
+    torrent: 'Torrent',
+    url: 'URL'
+  }
 </script>
 
-<div class='bg-neutral-950 px-5 py-4 rounded-md flex flex-row space-x-3 justify-between w-[500px] max-w-full'>
-  <div class='flex flex-col space-y-3'>
-    <div class='flex flex-row space-x-3'>
-      <img src='https://releases.moe/favicon.png' alt='ico' class='size-12 rounded-md bg-neutral-900' />
-      <div class='flex flex-col'>
-        <div class='text-lg font-bold'>
-          Seadex
-        </div>
-        <div class='text-sm text-muted-foreground'>
-          seadex
+<div class='space-y-3 pb-10'>
+  <div class='font-weight-bold text-xl font-bold'>Extension Settings</div>
+
+  <div class='grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] place-items-center gap-x-10 gap-y-7 justify-center py-3'>
+    {#each Object.entries($saved) as [id, config] (id)}
+      <div class='bg-neutral-950 px-5 py-4 rounded-md flex flex-row space-x-3 justify-between w-full'>
+        <div class='flex flex-col space-y-3'>
+          <div class='flex flex-row space-x-3'>
+            <img src={config.icon} alt='ico' class='size-12 rounded-md bg-neutral-900' />
+            <div class='flex flex-col'>
+              <div class='text-lg font-bold'>
+                {config.name}
+              </div>
+              <div class='text-sm text-muted-foreground'>
+                {id}
+              </div>
+            </div>
+          </div>
+          <div class='flex-wrap w-full justify-start gap-2 flex text-neutral-300 text-sm'>
+            <div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
+              {config.version}
+            </div>
+            <div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
+              {typeMap[config.type]}
+            </div>
+            <div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug capitalize'>
+              {config.accuracy} Accuracy
+            </div>
+            {#if config.ratio}
+              <div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
+                {config.ratio} Ratio
+              </div>
+            {/if}
+          </div>
         </div>
+        <ExtensionSettings {config} />
       </div>
-    </div>
-    <div class='flex-wrap w-full justify-start gap-2 flex text-neutral-300 text-sm'>
-      <div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
-        v0.0.1
-      </div>
-      <div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
-        Torrent
-      </div>
-      <div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
-        High Accuracy
-      </div>
-      <div class='rounded px-3 py-0.5 font-bold bg-neutral-900 leading-snug'>
-        2.0 Ratio
-      </div>
-    </div>
-  </div>
-  <div class='flex flex-col space-y-2'>
-    <Button variant='ghost' size='icon-sm'><Settings size={18} /></Button>
-    <Button variant='ghost' size='icon-sm'><Trash size={18} /></Button>
+    {/each}
   </div>
 </div>
diff --git a/src/routes/settings/extensions/ExtensionSettings.svelte b/src/routes/settings/extensions/ExtensionSettings.svelte
index a0d6d29..80c1d26 100644
--- a/src/routes/settings/extensions/ExtensionSettings.svelte
+++ b/src/routes/settings/extensions/ExtensionSettings.svelte
@@ -13,9 +13,11 @@
   function deleteExtension () {
     storage.delete(config.id)
   }
+
+  $: opts = $exopts[config.id]!
 </script>
 
-<div class='flex justify-between flex-col items-end'>
+<div class='flex justify-between flex-col items-end pb-1.5'>
   <Dialog.Root>
     <Dialog.Trigger let:builder asChild>
       <Button builders={[builder]} variant='ghost' size='icon-sm'><Settings size={18} /></Button>
@@ -28,17 +30,17 @@
             {#if options.type === 'string'}
               <div class='space-y-2'>
                 <Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label>
-                <Input type='text' {id} placeholder={options.default} bind:value={$exopts[config.id].options[id]} />
+                <Input type='text' {id} placeholder={options.default} bind:value={opts.options[id]} />
               </div>
             {:else if options.type === 'number'}
               <div class='space-y-2'>
                 <Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label>
-                <Input type='number' {id} placeholder={options.default} bind:value={$exopts[config.id].options[id]} />
+                <Input type='number' {id} placeholder={options.default} bind:value={opts.options[id]} />
               </div>
             {:else if options.type === 'boolean'}
               <div class='flex items-center space-x-2'>
                 <Label for={id} class='leading-[unset] grow font-bold'>{options.description}</Label>
-                <Switch {id} bind:checked={$exopts[config.id].options[id]} />
+                <Switch {id} bind:checked={opts.options[id]} />
               </div>
             {/if}
           {/each}
@@ -52,5 +54,5 @@
       </Dialog.Header>
     </Dialog.Content>
   </Dialog.Root>
-  <Switch bind:checked={$exopts[config.id].enabled} hideState={true} />
+  <Switch bind:checked={opts.enabled} hideState={true} />
 </div>