From a4033862c9f8ce8ef3a64bb6335333a3c94e0194 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Sun, 30 Mar 2025 13:20:36 +1100
Subject: [PATCH] feat: interface clean up + organisation

---
 src/interface/components/Slider.svelte      |   4 -
 src/interface/pages/settings/general.svelte | 155 ++++++++++----------
 src/plugins/index.ts                        |   4 +-
 3 files changed, 80 insertions(+), 83 deletions(-)

diff --git a/src/interface/components/Slider.svelte b/src/interface/components/Slider.svelte
index 2dd465f6..8addd17d 100644
--- a/src/interface/components/Slider.svelte
+++ b/src/interface/components/Slider.svelte
@@ -7,10 +7,6 @@
     step?: number
   }>();
   let percentage = $derived(((state - min) / (max - min)) * 100);
-
-  $effect(() => {
-    console.log('min / max / step', min, max, step);
-  });
 </script>
 
 <div class="relative mx-auto w-full max-w-lg">
diff --git a/src/interface/pages/settings/general.svelte b/src/interface/pages/settings/general.svelte
index ef02462e..94e5b89e 100644
--- a/src/interface/pages/settings/general.svelte
+++ b/src/interface/pages/settings/general.svelte
@@ -88,73 +88,6 @@
 {/snippet}
 
 <div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
-  {#each pluginSettings as plugin}
-    <div>
-      <!-- Always show enable toggle if disableToggle is true -->
-      {#if (plugin as any).disableToggle}
-        <div class="flex justify-between items-center px-4 py-3">
-          <div class="pr-4">
-            <h2 class="text-sm font-bold">Enable {plugin.name}</h2>
-            <p class="text-xs">{plugin.description}</p>
-          </div>
-          <div>
-            <Switch
-              state={pluginSettingsValues[plugin.pluginId]?.enabled ?? true}
-              onChange={(value) => updatePluginSetting(plugin.pluginId, 'enabled', value)}
-            />
-          </div>
-        </div>
-      {/if}
-
-      <!-- Only show other settings if plugin is enabled or has no disableToggle -->
-      {#if !((plugin as any).disableToggle) || (pluginSettingsValues[plugin.pluginId]?.enabled ?? true)}
-        {#each Object.entries(plugin.settings) as [key, setting]}
-          <!-- Skip the 'enabled' setting if it's part of the settings object -->
-          {#if key !== 'enabled'}
-            <div class="flex justify-between items-center px-4 py-3">
-              <div class="pr-4">
-                <h2 class="text-sm font-bold">{setting.title || key}</h2>
-                <p class="text-xs">{setting.description || ''}</p>
-              </div>
-              <div>
-                {#if setting.type === 'boolean'}
-                  <Switch
-                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
-                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
-                  />
-                {:else if setting.type === 'number'}
-                  <Slider
-                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
-                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
-                    min={setting.min}
-                    max={setting.max}
-                    step={setting.step}
-                  />
-                {:else if setting.type === 'string'}
-                  <input
-                    type="text"
-                    class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white"
-                    value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
-                    oninput={(e) => updatePluginSetting(plugin.pluginId, key, e.currentTarget.value)}
-                  />                
-                {:else if setting.type === 'select'}
-                  <Select
-                  state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
-                  onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
-                  options={(setting.options as string[]).map(opt => ({
-                    value: opt,
-                    label: opt.charAt(0).toUpperCase() + opt.slice(1)
-                    }))}
-                  />
-                {/if}
-              </div>
-            </div>
-          {/if}
-        {/each}
-      {/if}
-    </div>
-  {/each}
-
   {#each [
     {
       title: "Transparency Effects",
@@ -245,20 +178,88 @@
           { value: "netherlands", label: "Netherlands" }
         ]
       }
-    },
-    {
-      title: "BetterSEQTA+",
-      description: "Enables BetterSEQTA+ features",
-      id: 12,
-      Component: Switch,
-      props: {
-        state: $settingsState.onoff,
-        onChange: (isOn: boolean) => settingsState.onoff = isOn
-      }
     }
   ] as option}
     {@render Setting(option)}
   {/each}
+  
+  {#each pluginSettings as plugin}
+    <div>
+      <!-- Always show enable toggle if disableToggle is true -->
+      {#if (plugin as any).disableToggle}
+        <div class="flex justify-between items-center px-4 py-3">
+          <div class="pr-4">
+            <h2 class="text-sm font-bold">Enable {plugin.name}</h2>
+            <p class="text-xs">{plugin.description}</p>
+          </div>
+          <div>
+            <Switch
+              state={pluginSettingsValues[plugin.pluginId]?.enabled ?? true}
+              onChange={(value) => updatePluginSetting(plugin.pluginId, 'enabled', value)}
+            />
+          </div>
+        </div>
+      {/if}
+
+      <!-- Only show other settings if plugin is enabled or has no disableToggle -->
+      {#if !((plugin as any).disableToggle) || (pluginSettingsValues[plugin.pluginId]?.enabled ?? true)}
+        {#each Object.entries(plugin.settings) as [key, setting]}
+          <!-- Skip the 'enabled' setting if it's part of the settings object -->
+          {#if key !== 'enabled'}
+            <div class="flex justify-between items-center px-4 py-3">
+              <div class="pr-4">
+                <h2 class="text-sm font-bold">{setting.title || key}</h2>
+                <p class="text-xs">{setting.description || ''}</p>
+              </div>
+              <div>
+                {#if setting.type === 'boolean'}
+                  <Switch
+                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                  />
+                {:else if setting.type === 'number'}
+                  <Slider
+                    state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                    onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                    min={setting.min}
+                    max={setting.max}
+                    step={setting.step}
+                  />
+                {:else if setting.type === 'string'}
+                  <input
+                    type="text"
+                    class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white"
+                    value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                    oninput={(e) => updatePluginSetting(plugin.pluginId, key, e.currentTarget.value)}
+                  />                
+                {:else if setting.type === 'select'}
+                  <Select
+                  state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                  onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
+                  options={(setting.options as string[]).map(opt => ({
+                    value: opt,
+                    label: opt.charAt(0).toUpperCase() + opt.slice(1)
+                    }))}
+                  />
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </div>
+  {/each}
+
+  {@render Setting({
+    title: "BetterSEQTA+",
+    description: "Enables BetterSEQTA+ features",
+    id: 12,
+    Component: Switch,
+    props: {
+      state: $settingsState.onoff,
+      onChange: (isOn: boolean) => settingsState.onoff = isOn
+    }
+  })}
 
   {#if $settingsState.devMode}
     <div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 7e7f99b9..5332e966 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -10,11 +10,11 @@ import assessmentsAveragePlugin from './built-in/assessmentsAverage';
 const pluginManager = PluginManager.getInstance();
 
 // Register built-in plugins
-pluginManager.registerPlugin(timetablePlugin);
-pluginManager.registerPlugin(notificationCollectorPlugin);
 pluginManager.registerPlugin(themesPlugin);
 pluginManager.registerPlugin(animatedBackgroundPlugin);
 pluginManager.registerPlugin(assessmentsAveragePlugin);
+pluginManager.registerPlugin(notificationCollectorPlugin);
+pluginManager.registerPlugin(timetablePlugin);
 //pluginManager.registerPlugin(testPlugin);
 
 export { init as Monofile } from './monofile';