+22

apps/web/src/components/chat-sidebar-header.tsx

reviewed

··· 1 1 + import { Link } from "@tanstack/react-router"; 2 2 + import { Heading } from "./heading"; 3 3 + import { Stack } from "./layout"; 4 4 + import { Logo } from "./logo"; 5 5 + import { Button } from "./ui/button"; 6 6 + import { SidebarHeader } from "./ui/sidebar"; 7 7 + 8 8 + export function ChatSidebarHeader() { 9 9 + return ( 10 10 + <SidebarHeader> 11 11 + <Stack className="px-3 pt-3"> 12 12 + <Heading level="h3"> 13 13 + <Link to="/"> 14 14 + <Logo /> 15 15 + </Link> 16 16 + </Heading> 17 17 + 18 18 + <Button render={<Link to="/chats" />}>New Chat</Button> 19 19 + </Stack> 20 20 + </SidebarHeader> 21 21 + ); 22 22 + }

+25

apps/web/src/components/chat-sidebar-item.tsx

reviewed

··· 1 1 + import { Link, useLocation } from "@tanstack/react-router"; 2 2 + import type { ChatSummary } from "#/lib/types"; 3 3 + import { SidebarMenuButton, SidebarMenuItem } from "./ui/sidebar"; 4 4 + 5 5 + interface ChatSidebarItemProps { 6 6 + chat: ChatSummary; 7 7 + } 8 8 + 9 9 + export function ChatSidebarItem({ chat }: ChatSidebarItemProps) { 10 10 + const pathname = useLocation({ 11 11 + select: (location) => location.pathname, 12 12 + }); 13 13 + const isActive = pathname === `/chats/${chat.id}`; 14 14 + 15 15 + return ( 16 16 + <SidebarMenuItem> 17 17 + <SidebarMenuButton 18 18 + render={<Link to="/chats/$chatId" params={{ chatId: chat.id }} />} 19 19 + isActive={isActive} 20 20 + > 21 21 + <span className="truncate">{chat.title}</span> 22 22 + </SidebarMenuButton> 23 23 + </SidebarMenuItem> 24 24 + ); 25 25 + }

+4 -42

apps/web/src/components/chat-sidebar.tsx

reviewed

··· 1 1 - import { Link, useLocation } from "@tanstack/react-router"; 2 1 import { useChats } from "#/hooks/use-chats"; 3 3 - import type { ChatSummary } from "#/lib/types"; 4 4 - import { Heading } from "./heading"; 5 5 - import { Stack } from "./layout"; 6 6 - import { Logo } from "./logo"; 7 7 - import { Button } from "./ui/button"; 2 2 + import { ChatSidebarHeader } from "./chat-sidebar-header"; 3 3 + import { ChatSidebarItem } from "./chat-sidebar-item"; 8 4 import { 9 5 Sidebar, 10 6 SidebarContent, 11 7 SidebarGroup, 12 8 SidebarGroupLabel, 13 13 - SidebarHeader, 14 9 SidebarMenu, 15 15 - SidebarMenuButton, 16 16 - SidebarMenuItem, 17 10 } from "./ui/sidebar"; 18 11 19 12 export function ChatSidebar() { ··· 21 14 22 15 return ( 23 16 <Sidebar variant="inset"> 24 24 - <SidebarHeader> 25 25 - <Stack className="px-3 pt-3"> 26 26 - <Heading level="h3"> 27 27 - <Link to="/"> 28 28 - <Logo /> 29 29 - </Link> 30 30 - </Heading> 31 31 - 32 32 - <Button render={<Link to="/chats" />}>New Chat</Button> 33 33 - </Stack> 34 34 - </SidebarHeader> 17 17 + <ChatSidebarHeader /> 35 18 <SidebarContent> 36 19 <SidebarGroup> 37 20 <SidebarGroupLabel>Chats</SidebarGroupLabel> 38 21 <SidebarMenu> 39 22 {chats.map((chat) => ( 40 40 - <ChatSidebarMenuItem key={chat.id} chat={chat} /> 23 23 + <ChatSidebarItem key={chat.id} chat={chat} /> 41 24 ))} 42 25 </SidebarMenu> 43 26 </SidebarGroup> ··· 45 28 </Sidebar> 46 29 ); 47 30 } 48 48 - 49 49 - interface ChatSidebarMenuItemProps { 50 50 - chat: ChatSummary; 51 51 - } 52 52 - 53 53 - function ChatSidebarMenuItem({ chat }: ChatSidebarMenuItemProps) { 54 54 - const pathname = useLocation({ 55 55 - select: (location) => location.pathname, 56 56 - }); 57 57 - 58 58 - return ( 59 59 - <SidebarMenuItem> 60 60 - <SidebarMenuButton 61 61 - render={<Link to="/chats/$chatId" params={{ chatId: chat.id }} />} 62 62 - isActive={pathname === `/chats/${chat.id}`} 63 63 - > 64 64 - <span className="truncate">{chat.title}</span> 65 65 - </SidebarMenuButton> 66 66 - </SidebarMenuItem> 67 67 - ); 68 68 - }