From 98e37f03e54f37ea728cdf0cf7aa362d66fd884c Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Thu, 6 Feb 2025 15:07:58 -0500
Subject: [PATCH] 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 | 16 +++++++---------
 src/routes/+layout.server.ts      |  5 ++---
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/channel.svelte b/src/lib/components/channel.svelte
index dd9f7f0..f292f22 100644
--- a/src/lib/components/channel.svelte
+++ b/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">
-  {#if unread}
-    <MessageUnread class="h-4 w-4" />
-  {:else}
-    <MessageSquare class="h-4 w-4" />
-  {/if}
+<a href={`/channel/${channelName}`} class={`flex items-center gap-3 rounded-lg px-3 py-2 transition-all ${color}`}>
+  <MessageSquare class="h-4 w-4" />
   {channelName}
 </a>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 8f4aede..8640f49 100644
--- a/src/routes/+layout.server.ts
+++ b/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,
   };
-};
+}