this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Split chat sidebar into header and item components

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