refactor: skeleton to bits ui components

todo: restyle navbar layout

web/src/components/LightDarkMode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Switch } from '@skeletonlabs/skeleton-svelte';
+  import { Label, Switch } from "bits-ui";
 
   let checked = $state(false);
 
@@ -24,6 +24,16 @@
   </script>
 </svelte:head>
 
-<div>
-  <Switch {checked} {onCheckedChange}></Switch>
+<div class="flex items-center space-x-3">
+  <Switch.Root
+    id="light-dark"
+    checked={checked}
+    onCheckedChange={(change) => { onCheckedChange({ checked: change }) }}
+    class="focus-visible:ring-foreground focus-visible:ring-offset-background data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset dark:data-[state=checked]:bg-foreground focus-visible:outline-hidden peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full px-[3px] transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+  >
+    <Switch.Thumb
+      class="bg-background data-[state=unchecked]:shadow-mini dark:border-background/30 dark:bg-foreground dark:shadow-popover pointer-events-none block size-[30px] shrink-0 rounded-full transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:border dark:data-[state=unchecked]:border"
+    />
+  </Switch.Root>
+  <Label.Root for="light-dark" class="text-sm font-medium">Light / Dark</Label.Root>
 </div>

web/src/components/Navbar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import "../app.css";
 
-	import { Navigation } from '@skeletonlabs/skeleton-svelte';
     import { ShoppingCart, User } from '@lucide/svelte';
 </script>
 
@@ -15,19 +14,22 @@
                 </a>
             </div>
 
-            <Navigation.Bar classes="bg-transparent w-auto p-0 mx-12">
-                <Navigation.Tile href="/" label="Home" />
-                <Navigation.Tile href="/about" label="About" />
+
+            <div class="bg-transparent w-auto p-0 mx-12">
+                <a href="/">Home</a>
+                <a href="/about">About</a>
 
                 <div class="flex flex-row gap-4">
-                    <Navigation.Tile href="#" labelExpanded="Cart" title="Cart">
+                    <a href="/" title="Cart">
+                        <p>Cart</p>
                         <ShoppingCart class="h-6 w-6" />
-                    </Navigation.Tile>
-                    <Navigation.Tile href="#" labelExpanded="User" title="User">
+                    </a>
+                    <a href="/" title="User">
+                        <p>User</p>
                         <User class="h-6 w-6" />
-                    </Navigation.Tile>
+                    </a>
                 </div>
-            </Navigation.Bar>
+            </div>
         </div>
     </div>
 </header>