Codex/global chat room sidebar (#274)

* Fix chat sidebar collapse overlap

* Restore chat shell nav and session link behavior

Author: 0xroylee

packages/web/src/components/chat-room/chat-room-session-row.tsx

@@ -3,7 +3,7 @@
 import { Archive, Loader2, Pin, PinOff } from "lucide-react";
 import type { ReactElement } from "react";
 
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogClose,
@@ -48,11 +48,13 @@ export function ChatRoomSessionRow({
 					: "text-zinc-400",
 			)}
 		>
-			<Button
-				className="h-auto min-w-0 justify-start gap-2 pl-2 pr-0 py-2 text-left text-sm"
+			<a
+				className={cn(
+					buttonVariants({ variant: "ghost" }),
+					"h-auto min-w-0 justify-start gap-2 pl-2 pr-0 py-2 text-left text-sm",
+				)}
+				href={`/session/${encodeURIComponent(session.id)}`}
 				onClick={() => onSelectSession(session.id)}
-				type="button"
-				variant="ghost"
 			>
 				{isRunning ? (
 					<span
@@ -68,7 +70,7 @@ export function ChatRoomSessionRow({
 						{session.title}
 					</Typography>
 				</span>
-			</Button>
+			</a>
 			<Button
 				aria-label={pinLabel}
 				aria-pressed={isPinned}

packages/web/src/components/chat-room/chat-room-settings-sidebar.tsx

@@ -18,6 +18,7 @@ import {
 	X,
 } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import type { ComponentType, ReactElement } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -48,6 +49,8 @@ export function ChatRoomSettingsSidebar({
 	onClose,
 	onNavigate,
 }: ChatRoomSettingsSidebarProps): ReactElement {
+	const pathname = usePathname();
+
 	return (
 		<div
 			aria-hidden={!isActive}
@@ -90,7 +93,10 @@ export function ChatRoomSettingsSidebar({
 				<div className="grid gap-1">
 					{navItems.map((item) => {
 						const Icon = iconByKey[item.key];
-						const isActiveItem = item.key === "chat";
+						const isActiveItem =
+							pathname === item.href ||
+							pathname.startsWith(`${item.href}/`) ||
+							(item.key === "chat" && pathname.startsWith("/session/"));
 						return (
 							<Link
 								aria-current={isActiveItem ? "page" : undefined}