feat: Have sidebar show which channel you're in

Now shows which channel the user is currently in (if it exists
and is valid) by making it's icon and name darker in the sidebar

src/lib/components/channel.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
   import MessageSquare from 'lucide-svelte/icons/message-square';
-  import MessageUnread from 'lucide-svelte/icons/message-square-dot';
+  import { page } from '$app/state';
 
   interface Props {
     channelName: string;
-    unread?: boolean;
   }
 
-  const { channelName, unread = false }: Props = $props();
+  const { channelName }: Props = $props();
+  const color = $derived(page.params.channel === channelName ? 'text-primary' : 'text-muted-foreground hover:text-primary');
+
+  $inspect(page.params.channel, color);
 </script>
 
-<a href={`/channel/${channelName}`} class="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all">
+<a href={`/channel/${channelName}`} class={`flex items-center gap-3 rounded-lg px-3 py-2 transition-all ${color}`}>
-  {#if unread}
-    <MessageUnread class="h-4 w-4" />
-  {:else}
   <MessageSquare class="h-4 w-4" />
-  {/if}
   {channelName}
 </a>

src/routes/+layout.server.ts

@@ -1,7 +1,6 @@
 import { db } from '$lib/server/db';
-import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutServerLoad = async () => {
+export async function load() {
   const rows = await db.getChannels();
   const channels: string[] = rows
     ? rows.map((value) => {
@@ -12,4 +11,4 @@ export const load: LayoutServerLoad = async () => {
   return {
     channels,
   };
-};
+}