From 52bbe4d7e4c29a525af872902e8c4f9ec84030fe Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Wed, 4 Sep 2024 16:27:08 +1000
Subject: [PATCH] feat(slider): update slider for Svelte 5 compatibility

---
 src/svelte-interface/components/Slider.svelte          | 9 +++++----
 src/svelte-interface/components/TabbedContainer.svelte | 7 -------
 src/svelte-interface/pages/settings.svelte             | 7 +++----
 src/svelte-interface/pages/settings/shortcuts.svelte   | 4 ++++
 src/svelte-interface/pages/settings/theme.svelte       | 4 ++++
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/svelte-interface/components/Slider.svelte b/src/svelte-interface/components/Slider.svelte
index 0c60c8d0..00459c70 100644
--- a/src/svelte-interface/components/Slider.svelte
+++ b/src/svelte-interface/components/Slider.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-  export let state: number;
-  export let onChange: (value: number) => void;
+  let { state, onChange } = $props<{ state: number, onChange: (value: number) => void }>();
+  let percentage = $derived((state / 100) * 100);
 </script>
 
-<div class="relative w-full max-w-lg py-8 mx-auto">
+<div class="relative w-full max-w-lg mx-auto">
   <input
     type="range"
     min="0"
     max="100"
     bind:value={state}
-    on:change={(e) => onChange(Number(e.currentTarget.value))}
+    style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
+    onchange={(e) => onChange(Number(e.currentTarget.value))}
     class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
   />
 </div>
diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte
index cd0f3c67..7b7f1a8d 100644
--- a/src/svelte-interface/components/TabbedContainer.svelte
+++ b/src/svelte-interface/components/TabbedContainer.svelte
@@ -44,16 +44,9 @@
       window.removeEventListener("message", handleMessage);
     };
   });
-
-  /* $effect(() => {
-    if (tabs.length > 0) {
-      updateTabWidth();
-    }
-  }); */
 </script>
 
 <div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
-  <div class="hidden"></div>
   <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"
diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte
index e2ffd556..0af5ab2a 100644
--- a/src/svelte-interface/pages/settings.svelte
+++ b/src/svelte-interface/pages/settings.svelte
@@ -3,23 +3,22 @@
   import Settings from './settings/general.svelte';
   import Shortcuts from './settings/shortcuts.svelte';
   import Theme from './settings/theme.svelte';
-  /* import Picker from './components/Picker.svelte'; */
   import browser from 'webextension-polyfill';
 
   const openChangelog = () => {
     browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' });
   };
     
-  let standalone = false;
+  let standalone = $state(false);
 </script>
 
 <div class="relative flex flex-col w-[384px] shadow-2xl gap-2 bg-white {standalone ? '' : 'rounded-xl'} h-[100vh] 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 on:click={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>
+    <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>
-  <!-- <Picker /> -->
+
   <TabbedContainer tabs={[
     { title: 'Settings', Content: Settings },
     { title: 'Shortcuts', Content: Shortcuts },
diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte
index 81e784b3..181f6a8d 100644
--- a/src/svelte-interface/pages/settings/shortcuts.svelte
+++ b/src/svelte-interface/pages/settings/shortcuts.svelte
@@ -1 +1,5 @@
+<script lang="ts">
+  
+</script>
+
 <div class="text-xl">shortcuts tab</div>
\ No newline at end of file
diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte
index bcd2b978..ae68c359 100644
--- a/src/svelte-interface/pages/settings/theme.svelte
+++ b/src/svelte-interface/pages/settings/theme.svelte
@@ -1 +1,5 @@
+<script lang="ts">
+
+</script>
+
 <div class="text-xl">theme tab</div>
\ No newline at end of file