Files
paperclip/ui/src/components/Sidebar.tsx
Forgotten fad1bd27ce Add shared UI primitives, contexts, and reusable components
Add shadcn components: avatar, breadcrumb, checkbox, collapsible,
command, dialog, dropdown-menu, label, popover, scroll-area, sheet,
skeleton, tabs, textarea, tooltip. Add shared components: BreadcrumbBar,
CommandPalette, CompanySwitcher, CommentThread, EmptyState, EntityRow,
FilterBar, InlineEditor, MetricCard, PageSkeleton, PriorityIcon,
PropertiesPanel, StatusIcon, SidebarNavItem/Section. Add contexts for
breadcrumbs, dialogs, and side panels. Add keyboard shortcut hook and
utility helpers. Update layout, sidebar, and main app shell.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-17 09:57:00 -06:00

84 lines
2.6 KiB
TypeScript

import {
Inbox,
CircleDot,
Hexagon,
Target,
LayoutDashboard,
GitBranch,
Bot,
DollarSign,
History,
Search,
SquarePen,
Building2,
ListTodo,
} from "lucide-react";
import { CompanySwitcher } from "./CompanySwitcher";
import { SidebarSection } from "./SidebarSection";
import { SidebarNavItem } from "./SidebarNavItem";
import { useDialog } from "../context/DialogContext";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { ScrollArea } from "@/components/ui/scroll-area";
export function Sidebar() {
const { openNewIssue } = useDialog();
function openSearch() {
document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
}
return (
<aside className="w-60 border-r border-border bg-card flex flex-col shrink-0">
<div className="p-3">
<CompanySwitcher />
</div>
<div className="flex items-center gap-1 px-3 pb-2">
<Button
variant="ghost"
size="icon-sm"
className="text-muted-foreground"
onClick={openSearch}
>
<Search className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon-sm"
className="text-muted-foreground"
onClick={() => openNewIssue()}
>
<SquarePen className="h-4 w-4" />
</Button>
</div>
<Separator />
<ScrollArea className="flex-1">
<nav className="flex flex-col gap-3 p-3">
<div className="flex flex-col gap-0.5">
<SidebarNavItem to="/inbox" label="Inbox" icon={Inbox} />
<SidebarNavItem to="/my-issues" label="My Issues" icon={ListTodo} />
</div>
<SidebarSection label="Work">
<SidebarNavItem to="/tasks" label="Issues" icon={CircleDot} />
<SidebarNavItem to="/projects" label="Projects" icon={Hexagon} />
<SidebarNavItem to="/goals" label="Goals" icon={Target} />
</SidebarSection>
<SidebarSection label="Company">
<SidebarNavItem to="/" label="Dashboard" icon={LayoutDashboard} end />
<SidebarNavItem to="/org" label="Org Chart" icon={GitBranch} />
<SidebarNavItem to="/agents" label="Agents" icon={Bot} />
<SidebarNavItem to="/costs" label="Costs" icon={DollarSign} />
<SidebarNavItem to="/activity" label="Activity" icon={History} />
<SidebarNavItem to="/companies" label="Companies" icon={Building2} />
</SidebarSection>
</nav>
</ScrollArea>
</aside>
);
}