From a837e52263135ac8811ec87e3ebef8dc945d0f39 Mon Sep 17 00:00:00 2001
From: Khalid Abdi <xamza2009@gmail.com>
Date: Wed, 3 Jun 2026 18:59:31 +0300
Subject: [PATCH] Lighten chat input via COSS tokens; enable sidebar theme
 toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- chat-input: replace the two hardcoded oklch backgrounds (leftover Linear
  palette) with COSS surface tokens — outer form bg-muted, inner card bg-input.
  Lighter in dark mode and theme-aware (no longer near-black in light mode),
  preserving the two-tone layered look.
- nav-user: wire the previously-static Theme menu item to next-themes
  (useTheme/setTheme) — toggles light/dark, with the icon (Sun/Moon) and
  shortcut label reflecting the current theme.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/components/chat/chat-input.tsx     |  4 ++--
 frontend/components/sidebar-02/nav-user.tsx | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/components/chat/chat-input.tsx b/frontend/components/chat/chat-input.tsx
index f5b4d5d..af75266 100644
--- a/frontend/components/chat/chat-input.tsx
+++ b/frontend/components/chat/chat-input.tsx
@@ -198,10 +198,10 @@ export function ChatInput({ onSubmit, status, onStop }: ChatInputProps) {
         event.preventDefault();
         submit();
       }}
-      className="w-full overflow-hidden rounded-[28px] border border-border/60 bg-[oklch(0.195_0.006_277)] shadow-sm"
+      className="w-full overflow-hidden rounded-[28px] border border-border/60 bg-muted shadow-sm"
     >
       {/* Top (lighter) card: textarea + toolbar, with a slightly smaller bottom radius */}
-      <div className="rounded-b-[22px] bg-[oklch(0.218_0.006_277)]">
+      <div className="rounded-b-[22px] bg-input">
         <textarea
           aria-label="Message"
           className="field-sizing-content block max-h-48 min-h-16 w-full resize-none bg-transparent px-5 pt-5 pb-2 text-base text-foreground outline-none placeholder:text-muted-foreground"
diff --git a/frontend/components/sidebar-02/nav-user.tsx b/frontend/components/sidebar-02/nav-user.tsx
index 143cf6f..34ba6a0 100644
--- a/frontend/components/sidebar-02/nav-user.tsx
+++ b/frontend/components/sidebar-02/nav-user.tsx
@@ -1,8 +1,15 @@
 "use client";
 
-import { ChevronsUpDown, LogOut, Settings as SettingsIcon, Sun } from "lucide-react";
+import {
+  ChevronsUpDown,
+  LogOut,
+  Moon,
+  Settings as SettingsIcon,
+  Sun,
+} from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
@@ -53,6 +60,8 @@ export function NavUser() {
   const { isMobile, state } = useSidebar();
   const isCollapsed = state === "collapsed";
   const router = useRouter();
+  const { resolvedTheme, setTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
   const { data } = authClient.useSession();
 
   const name = data?.user?.name ?? "Clinician";
@@ -122,10 +131,13 @@ export function NavUser() {
               <GitHubIcon className="size-4" />
               Docs &amp; GitHub
             </MenuItem>
-            <MenuItem>
-              <Sun />
+            <MenuItem
+              closeOnClick={false}
+              onClick={() => setTheme(isDark ? "light" : "dark")}
+            >
+              {isDark ? <Moon /> : <Sun />}
               Theme
-              <MenuShortcut>Dark</MenuShortcut>
+              <MenuShortcut>{isDark ? "Dark" : "Light"}</MenuShortcut>
             </MenuItem>
             <MenuSeparator />
             <MenuItem onClick={signOut} variant="destructive">