fix: clean up top-level components

- connection-status: remove unused import, fix timeout type, use $derived.by, fix dynamic icon
- ThemeSelector: add key to each block
- Header: remove unused variables, fix Tailwind class syntax
- Sidebar: remove unused imports

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/lib/components/Header.svelte

@@ -7,26 +7,14 @@
 	import { toggleMode } from "mode-watcher";
 	import ThemeSelector from './ThemeSelector.svelte';
 
-	
 	// Icons
 	import Sun from '@lucide/svelte/icons/sun';
 	import Moon from '@lucide/svelte/icons/moon';
 	import User from '@lucide/svelte/icons/user';
 	import Settings from '@lucide/svelte/icons/settings';
 	import LogOut from '@lucide/svelte/icons/log-out';
-	import Monitor from '@lucide/svelte/icons/monitor';
 
 	let { user, class: className = '' }: { user?: any; class?: string } = $props();
-	
-	// Dark mode state - you might want to use a proper theme store
-	let darkMode = $state(false);
-	
-	// Theme options
-	const themes = [
-		{ label: 'Light', value: 'light', icon: Sun },
-		{ label: 'Dark', value: 'dark', icon: Moon },
-		{ label: 'System', value: 'system', icon: Monitor }
-	];
 </script>
 
 <header class={cn(
@@ -45,10 +33,10 @@
 		<!-- Dark Mode Toggle -->
 		<Button onclick={toggleMode} variant="ghost" size="icon">
 			<Sun
-				class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"
+				class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all! dark:scale-0 dark:-rotate-90"
 			/>
 			<Moon
-				class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"
+				class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all! dark:scale-100 dark:rotate-0"
 			/>
 			<span class="sr-only">Toggle theme</span>
 			</Button>

src/lib/components/Sidebar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-
+    import { House, Settings, Activity, Goal, NotebookPen } from "@lucide/svelte";
-    import { House, Settings, Activity, CheckSquare, Bell, LayoutDashboard, Goal, NotebookPen } from "@lucide/svelte";
     import * as Sidebar from "$lib/components/ui/sidebar/index";
 
     import { page } from '$app/state'
@@ -44,7 +43,7 @@
         <Sidebar.Menu>
           <Sidebar.MenuItem>
             <div class="flex gap-3 pt-2 px-1 items-center">
-              <Goal class="h-6 w-6" />
+              <Goal class="h-6 w-6" />
               <h1 class="text-lg font-semibold">bullseye</h1>
             </div>
           </Sidebar.MenuItem>

src/lib/components/ThemeSelector.svelte

@@ -31,7 +31,7 @@
 			<p class="text-sm font-medium text-muted-foreground">Primary Color</p>
 
 			<div class="grid grid-cols-3 gap-2">
-				{#each primaryColors as color}
+				{#each primaryColors as color (color.value)}
 					<button
 						onclick={() => selectColor(color.value)}
 						class="relative h-8 w-full rounded-md border border-border transition-transform hover:scale-105"

src/lib/components/connection-status.svelte

@@ -2,7 +2,6 @@
   import { useConnectionStatus } from '@triplit/svelte';
   import { triplit } from '$lib/triplit/client';
   import { cn } from '$lib/utils';
-  import { onMount } from 'svelte';
 
   // Icons
   import Wifi from '@lucide/svelte/icons/wifi';
@@ -14,7 +13,7 @@
   // Track overall connection attempt duration (including retries)
   let initialConnectionAttemptTime = $state<number | null>(null);
   let hasTimedOut = $state(false);
-  let timeoutId = $state<number | null>(null);
+  let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
   const CONNECTION_TIMEOUT = 15000; // 15 seconds for entire connection attempt
   
   // Monitor connection status changes
@@ -42,7 +41,7 @@
   });
   
   // Map connection status to display info
-  const statusInfo = $derived(() => {
+  const statusInfo = $derived.by(() => {
     // If we've timed out after trying to connect, show connection failed
     if (hasTimedOut) {
       return {
@@ -89,7 +88,7 @@
     <div class="relative flex items-center">
       <div class={cn(
         "h-2 w-2 rounded-full",
-        statusInfo().indicatorClass
+        statusInfo.indicatorClass
       )}>
       </div>
       <!-- Pulse animation for connecting state -->
@@ -103,17 +102,14 @@
     </div>
     
     <!-- Status Icon -->
-    {#snippet iconSnippet()}
+    {#if statusInfo.icon}
-      {@const IconComponent = statusInfo().icon}
+      {@const Icon = statusInfo.icon}
-      <IconComponent 
+      <Icon class={cn("h-3 w-3", statusInfo.iconClass)} />
-        class={cn("h-3 w-3", statusInfo().iconClass)} 
+    {/if}
-      />
-    {/snippet}
-    {@render iconSnippet()}
 
     <!-- Status Text -->
     <span class="font-medium">
-      {statusInfo().text}
+      {statusInfo.text}
     </span>
   </div>
 </div>