msg

frontend(experimental)/newchat/components/sidebar.tsx

@@ -28,6 +28,7 @@ interface SidebarProps {
   onJoinRoom: () => void
   user: User | null
   onLogout: () => void
+  onOpenAccountSettings: () => void
 }
 
 const WEEKDAY_MINI = ["S", "M", "T", "W", "T", "F", "S"]
@@ -51,6 +52,7 @@ export function Sidebar({
   onJoinRoom,
   user,
   onLogout,
+  onOpenAccountSettings,
 }: SidebarProps) {
   const [miniMonth, setMiniMonth] = useState(() => {
     const d = new Date(selectedDate)
@@ -200,13 +202,18 @@ export function Sidebar({
 
       {/* User footer */}
       <div className="mt-4 flex items-center gap-3 border-t border-white/20 pt-4">
-        <div className="flex h-9 w-9 items-center justify-center rounded-full bg-blue-500 font-bold text-white">
-          {user?.username?.charAt(0).toUpperCase() ?? "U"}
-        </div>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-medium text-white">{user?.username}</p>
-          <p className="truncate text-xs text-white/60">{user?.email}</p>
-        </div>
+        <button
+          onClick={onOpenAccountSettings}
+          className="flex min-w-0 flex-1 items-center gap-3 rounded-lg p-1 text-left transition-colors hover:bg-white/10"
+        >
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-500 font-bold text-white">
+            {user?.username?.charAt(0).toUpperCase() ?? "U"}
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-white">{user?.username}</p>
+            <p className="truncate text-xs text-white/60">{user?.email}</p>
+          </div>
+        </button>
         <button
           onClick={onLogout}
           className="rounded-lg p-2 text-white/80 transition-colors hover:bg-white/20 hover:text-white"