import { useState, useEffect } from "react"; import { useNavigate } from "react-router"; import SidebarNav from "./SidebarNav"; import SidebarHistory from "./SidebarHistory"; import WorkspaceFooter from "./WorkspaceFooter"; import { useArtifacts } from "./ArtifactsContext"; import { useMode } from "./ModeContext"; import { MODES, type ModeId } from "#/types/mode"; import { ConversationApi } from "#/api/conversation-service/conversation-service.api"; import type { AppConversation } from "#/types/app-conversation"; function formatRelativeTime(dateStr: string): string { const now = Date.now(); const then = new Date(dateStr).getTime(); const diffMs = now - then; const diffMin = Math.floor(diffMs / 60000); if (diffMin < 1) return "now"; if (diffMin < 60) return `${diffMin}m`; const diffHr = Math.floor(diffMin / 60); if (diffHr < 24) return `${diffHr}h`; const diffDay = Math.floor(diffHr / 24); if (diffDay === 1) return "Yesterday"; if (diffDay < 7) return `${diffDay}d`; return new Date(dateStr).toLocaleDateString(); } function toHistoryItems(convs: AppConversation[]) { return convs.map((c) => ({ id: c.id, title: c.title || "Untitled conversation", time: formatRelativeTime(c.updated_at || c.created_at), mode: (c as { mode?: string }).mode, })); } // Icons for the three visible modes const MODE_ICONS: Record = { "vibe-code": ( ), autonomous: ( ), game: ( ), }; // Only three visible modes — clean & simple const VIBE_MODES = ["vibe-code", "autonomous", "game"]; export default function Sidebar() { const { open: artifactsOpen, toggle: toggleArtifacts } = useArtifacts(); const { mode, setMode } = useMode(); const navigate = useNavigate(); const [activeItem, setActiveItem] = useState(null); const [historyItems, setHistoryItems] = useState< { id: string; title: string; time: string; mode?: string }[] >([]); useEffect(() => { let cancelled = false; ConversationApi.listConversations({ sort_order: "updated_at" }) .then((page) => { if (!cancelled) setHistoryItems(toHistoryItems(page.items)); }) .catch(() => {}); return () => { cancelled = true; }; }, []); return ( ); }