tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

add collapsable chat nav (#6649)

Browse Source
This commit is contained in:
Zane
2026-01-22 12:59:17 -08:00
committed by GitHub
parent 615c51f793
commit 345c32edb8
1 changed files with 62 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/GooseSidebar/AppSidebar.tsx
+62 -35
View File
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
import { import {
AppWindow, AppWindow,
ChefHat, ChefHat,
ChevronRight,
Clock, Clock,
FileText, FileText,
History, History,
@@ -20,6 +21,7 @@ import {
SidebarMenuItem, SidebarMenuItem,
SidebarSeparator, SidebarSeparator,
} from '../ui/sidebar'; } from '../ui/sidebar';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible';
import { Gear } from '../icons'; import { Gear } from '../icons';
import { View, ViewOptions } from '../../utils/navigationUtils'; import { View, ViewOptions } from '../../utils/navigationUtils';
import { DEFAULT_CHAT_TITLE, useChatContext } from '../../contexts/ChatContext'; import { DEFAULT_CHAT_TITLE, useChatContext } from '../../contexts/ChatContext';
@@ -203,6 +205,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
?.enabled; ?.enabled;
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [recentSessions, setRecentSessions] = useState<Session[]>([]); const [recentSessions, setRecentSessions] = useState<Session[]>([]);
const [isChatExpanded, setIsChatExpanded] = useState(true);
const activeSessionId = searchParams.get('resumeSessionId') ?? undefined; const activeSessionId = searchParams.get('resumeSessionId') ?? undefined;
const { getSessionStatus, clearUnread } = useSidebarSessionStatus(activeSessionId); const { getSessionStatus, clearUnread } = useSidebarSessionStatus(activeSessionId);
@@ -477,7 +480,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
<> <>
<SidebarContent className="pt-12"> <SidebarContent className="pt-12">
<SidebarMenu> <SidebarMenu>
{/* Home and New Chat */} {/* Home */}
<SidebarGroup className="px-2"> <SidebarGroup className="px-2">
<SidebarGroupContent className="space-y-1"> <SidebarGroupContent className="space-y-1">
<div className="sidebar-item"> <div className="sidebar-item">
@@ -494,43 +497,67 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
</div> </div>
<div className="sidebar-item">
<SidebarMenuItem>
<SidebarMenuButton
data-testid="sidebar-new-chat-button"
onClick={handleNewChat}
tooltip="Start a new chat"
className="w-full justify-start px-3 rounded-lg h-fit hover:bg-background-medium/50 transition-all duration-200"
>
<MessageSquarePlus className="w-4 h-4" />
<span>Chat</span>
</SidebarMenuButton>
</SidebarMenuItem>
</div>
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>
{/* Recent Sessions */} {/* Chat with Collapsible Sessions */}
{recentSessions.length > 0 && ( <SidebarGroup className="px-2">
<SidebarGroup className="px-2"> <SidebarGroupContent className="space-y-1">
<SidebarGroupContent className="space-y-1"> <Collapsible open={isChatExpanded} onOpenChange={setIsChatExpanded}>
<SessionList <div className="sidebar-item">
sessions={recentSessions} <SidebarMenuItem>
activeSessionId={activeSessionId} <div className="flex items-center w-full">
getSessionStatus={getSessionStatus} <SidebarMenuButton
onSessionClick={handleSessionClick} data-testid="sidebar-new-chat-button"
/> onClick={handleNewChat}
{/* View All Link */} tooltip="Start a new chat"
<button className="flex-1 justify-start px-3 rounded-lg h-fit hover:bg-background-medium/50 transition-all duration-200"
onClick={handleViewAllClick} >
className="w-full text-left px-3 py-1.5 rounded-md text-sm text-text-muted hover:bg-background-medium/50 hover:text-text-default transition-colors flex items-center gap-2" <MessageSquarePlus className="w-4 h-4" />
> <span>Chat</span>
<History className="w-4 h-4" /> </SidebarMenuButton>
<span>View All</span> {recentSessions.length > 0 && (
</button> <CollapsibleTrigger asChild>
</SidebarGroupContent> <button
</SidebarGroup> className="flex items-center justify-center w-6 h-8 hover:bg-background-medium/50 rounded-md transition-colors"
)} aria-label={
isChatExpanded ? 'Collapse chat sessions' : 'Expand chat sessions'
}
>
<ChevronRight
className={`w-4 h-4 text-text-muted transition-transform duration-200 ${
isChatExpanded ? 'rotate-90' : ''
}`}
/>
</button>
</CollapsibleTrigger>
)}
</div>
</SidebarMenuItem>
</div>
{recentSessions.length > 0 && (
<CollapsibleContent className="overflow-hidden transition-all data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0">
<div className="mt-1 space-y-1">
<SessionList
sessions={recentSessions}
activeSessionId={activeSessionId}
getSessionStatus={getSessionStatus}
onSessionClick={handleSessionClick}
/>
{/* View All Link */}
<button
onClick={handleViewAllClick}
className="w-full text-left px-3 py-1.5 rounded-md text-sm text-text-muted hover:bg-background-medium/50 hover:text-text-default transition-colors flex items-center gap-2"
>
<History className="w-4 h-4" />
<span>View All</span>
</button>
</div>
</CollapsibleContent>
)}
</Collapsible>
</SidebarGroupContent>
</SidebarGroup>
<SidebarSeparator /> <SidebarSeparator />