feat(slider): update slider for Svelte 5 compatibility

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>

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"

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 },

src/svelte-interface/pages/settings/shortcuts.svelte

@@ -1 +1,5 @@
+<script lang="ts">
+  
+</script>
+
 <div class="text-xl">shortcuts tab</div>

src/svelte-interface/pages/settings/theme.svelte

@@ -1 +1,5 @@
+<script lang="ts">
+
+</script>
+
 <div class="text-xl">theme tab</div>