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>

ui/src/components/Sidebar.tsx

@@ -1,42 +1,83 @@
-import { NavLink } from "react-router-dom";
-import { cn } from "../lib/utils";
-
-const links = [
-  { to: "/", label: "Dashboard" },
-  { to: "/companies", label: "Companies" },
-  { to: "/org", label: "Org" },
-  { to: "/agents", label: "Agents" },
-  { to: "/tasks", label: "Tasks" },
-  { to: "/projects", label: "Projects" },
-  { to: "/goals", label: "Goals" },
-  { to: "/approvals", label: "Approvals" },
-  { to: "/costs", label: "Costs" },
-  { to: "/activity", label: "Activity" },
-];
+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-56 border-r border-border bg-card p-4 flex flex-col gap-1">
-      <h1 className="text-lg font-bold mb-6 px-3">Paperclip</h1>
-      <nav className="flex flex-col gap-1">
-        {links.map((link) => (
-          <NavLink
-            key={link.to}
-            to={link.to}
-            end={link.to === "/"}
-            className={({ isActive }) =>
-              cn(
-                "px-3 py-2 rounded-md text-sm font-medium transition-colors",
-                isActive
-                  ? "bg-accent text-accent-foreground"
-                  : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground"
-              )
-            }
-          >
-            {link.label}
-          </NavLink>
-        ))}
-      </nav>
+    <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>
   );
 }