worked on the miniplayer, volume slider is fucked

src/lib/components/utility/iconButton.svelte

@@ -1,5 +1,6 @@
 <script>
     export let disabled = false
+    export let halo = true
 
     import { createEventDispatcher } from 'svelte'
 
@@ -8,6 +9,7 @@
 
 <button
     class:disabled
+    class:halo
     class="relative grid aspect-square h-full place-items-center transition-transform duration-75 active:scale-90 {disabled ? 'text-neutral-600' : ''}"
     on:click|preventDefault={() => dispatch('click')}
     {disabled}
@@ -16,7 +18,7 @@
 </button>
 
 <style>
-    button:not(.disabled)::before {
+    button:not(.disabled).halo::before {
         content: '';
         width: 0;
         height: 0;
@@ -26,7 +28,7 @@
         transition-duration: 200ms;
         position: absolute;
     }
-    button:not(.disabled):hover::before {
+    button:not(.disabled).halo:hover::before {
         width: 130%;
         height: 130%;
     }

src/lib/components/utility/navbar.svelte

@@ -27,7 +27,7 @@
 
 <style>
     nav {
-        padding: 20px 2rem;
+        padding: 18px 2rem;
         font-size: 20px;
         line-height: 28px;
     }

src/lib/components/utility/slider.svelte

@@ -1,15 +1,6 @@
 <script>
-    import { onMount } from 'svelte'
-    import { createEventDispatcher } from 'svelte'
+    export let value = 0
 
-    export let initialValue = 0
-    onMount(() => (sliderValue = Number(initialValue)))
-
-    export const setValue = (value) => (sliderValue = value)
-
-    const dispatch = createEventDispatcher()
-
-    let sliderValue
     let sliderTrail, sliderThumb
 
     const trackThumb = (sliderPos) => {
@@ -17,17 +8,11 @@
         if (sliderTrail) sliderTrail.style.right = `${100 - sliderPos}%`
     }
 
-    $: trackThumb(sliderValue)
+    $: trackThumb(value)
 
     const handleKeyPress = (key) => {
-        if ((key === 'ArrowRight' || key === 'ArrowUp') && sliderValue < 100) {
-            sliderValue += 1
-            return dispatch('valuechange', { value: sliderValue })
-        }
-        if ((key === 'ArrowLeft' || key === 'ArrowDown') && sliderValue > 0) {
-            sliderValue -= 1
-            return dispatch('valuechange', { value: sliderValue })
-        }
+        if ((key === 'ArrowRight' || key === 'ArrowUp') && value < 100) return (value += 1)
+        if ((key === 'ArrowLeft' || key === 'ArrowDown') && value > 0) return (value -= 1)
     }
 </script>
 
@@ -36,25 +21,14 @@
     class="relative isolate h-1 w-full rounded-full bg-neutral-600"
     role="slider"
     tabindex="0"
-    aria-valuenow={sliderValue}
+    aria-valuenow={value}
     aria-valuemin="0"
     aria-valuemax="100"
     on:keydown={(event) => handleKeyPress(event.key)}
 >
-    <input
-        type="range"
-        class="absolute z-10 h-1 w-full"
-        step="any"
-        min="0"
-        max="100"
-        bind:value={sliderValue}
-        tabindex="-1"
-        aria-hidden="true"
-        aria-disabled="true"
-        on:mouseup={() => dispatch('valuechange', { value: sliderValue })}
-    />
+    <input type="range" class="absolute z-10 h-1 w-full" step="any" min="0" max="100" bind:value tabindex="-1" aria-hidden="true" aria-disabled="true" />
     <span bind:this={sliderTrail} id="slider-trail" class="absolute left-0 h-1 rounded-full bg-white transition-colors" />
-    <span bind:this={sliderThumb} id="slider-thumb" class="absolute top-1/2 aspect-square h-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 transition-opacity duration-300" />
+    <span bind:this={sliderThumb} id="slider-thumb" class="absolute top-1/2 aspect-square h-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 transition-opacity duration-300" />
 </div>
 
 <style>

src/lib/components/utility/volumeSlider.svelte

@@ -0,0 +1,37 @@
+<script>
+    import Slider from '$lib/components/utility/slider.svelte'
+    import { getVolume, setVolume } from '$lib/utils/utils.js'
+    import { onMount } from 'svelte'
+
+    export let volume = 0
+
+    let muted = false
+    let storedVolume
+
+    onMount(() => (storedVolume = getVolume()))
+
+    $: changeVolume(storedVolume)
+    const changeVolume = (newVolume) => {
+        if (typeof newVolume === 'number' && !isNaN(newVolume)) setVolume(newVolume)
+    }
+
+    $: volume = muted ? 0 : storedVolume
+</script>
+
+<div id="volume-slider" class="flex h-full flex-row-reverse items-center gap-2">
+    <button id="volume-toggle" class="grid aspect-square h-full place-items-center transition-colors hover:text-lazuli-primary" on:click={() => (muted = !muted)}>
+        <i class="fa-solid {volume > 50 ? 'fa-volume-high' : volume > 0 ? 'fa-volume-low' : 'fa-volume-xmark'} w-full text-left text-base" />
+    </button>
+    <div id="slider-wrapper" class="w-0 transition-all duration-300">
+        <Slider bind:value={storedVolume} />
+    </div>
+</div>
+
+<style>
+    #volume-slider:hover > #slider-wrapper {
+        width: 8rem;
+    }
+    #slider-wrapper:focus-within {
+        width: 8rem;
+    }
+</style>