From 403cf32b5cefaed66d6132504474eb0a56584c22 Mon Sep 17 00:00:00 2001 From: dtonon Date: Fri, 20 Feb 2026 21:00:02 +0100 Subject: [PATCH] Review chat UI and make it expandable --- src/lib/components/ChatSidebar.svelte | 156 +++++++++++++++++++------- src/lib/mock.ts | 8 ++ src/routes/+layout.svelte | 5 +- src/routes/thread/[id]/+page.svelte | 4 +- 4 files changed, 128 insertions(+), 45 deletions(-) diff --git a/src/lib/components/ChatSidebar.svelte b/src/lib/components/ChatSidebar.svelte index 35e8f72..65ff73f 100644 --- a/src/lib/components/ChatSidebar.svelte +++ b/src/lib/components/ChatSidebar.svelte @@ -7,68 +7,142 @@ }; let { expanded = false, onToggle }: Props = $props(); + + let asideEl: HTMLElement; + let openMenuId = $state(null); + + function formatTime(iso: string) { + return new Date(iso).toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + }); + } + + $effect(() => { + if (!expanded) return; + function handleClick(e: MouseEvent) { + if (!asideEl.contains(e.target as Node)) onToggle(); + } + document.addEventListener("click", handleClick); + return () => document.removeEventListener("click", handleClick); + }); + + $effect(() => { + if (!openMenuId) return; + function closeMenu() { + openMenuId = null; + } + document.addEventListener("click", closeMenu); + return () => document.removeEventListener("click", closeMenu); + });