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/context/BreadcrumbContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+
+export interface Breadcrumb {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbContextValue {
+  breadcrumbs: Breadcrumb[];
+  setBreadcrumbs: (crumbs: Breadcrumb[]) => void;
+}
+
+const BreadcrumbContext = createContext<BreadcrumbContextValue | null>(null);
+
+export function BreadcrumbProvider({ children }: { children: ReactNode }) {
+  const [breadcrumbs, setBreadcrumbsState] = useState<Breadcrumb[]>([]);
+
+  const setBreadcrumbs = useCallback((crumbs: Breadcrumb[]) => {
+    setBreadcrumbsState(crumbs);
+  }, []);
+
+  return (
+    <BreadcrumbContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
+      {children}
+    </BreadcrumbContext.Provider>
+  );
+}
+
+export function useBreadcrumbs() {
+  const ctx = useContext(BreadcrumbContext);
+  if (!ctx) {
+    throw new Error("useBreadcrumbs must be used within BreadcrumbProvider");
+  }
+  return ctx;
+}

ui/src/context/DialogContext.tsx

@@ -0,0 +1,45 @@
+import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+
+interface NewIssueDefaults {
+  status?: string;
+  priority?: string;
+  projectId?: string;
+}
+
+interface DialogContextValue {
+  newIssueOpen: boolean;
+  newIssueDefaults: NewIssueDefaults;
+  openNewIssue: (defaults?: NewIssueDefaults) => void;
+  closeNewIssue: () => void;
+}
+
+const DialogContext = createContext<DialogContextValue | null>(null);
+
+export function DialogProvider({ children }: { children: ReactNode }) {
+  const [newIssueOpen, setNewIssueOpen] = useState(false);
+  const [newIssueDefaults, setNewIssueDefaults] = useState<NewIssueDefaults>({});
+
+  const openNewIssue = useCallback((defaults: NewIssueDefaults = {}) => {
+    setNewIssueDefaults(defaults);
+    setNewIssueOpen(true);
+  }, []);
+
+  const closeNewIssue = useCallback(() => {
+    setNewIssueOpen(false);
+    setNewIssueDefaults({});
+  }, []);
+
+  return (
+    <DialogContext.Provider value={{ newIssueOpen, newIssueDefaults, openNewIssue, closeNewIssue }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+export function useDialog() {
+  const ctx = useContext(DialogContext);
+  if (!ctx) {
+    throw new Error("useDialog must be used within DialogProvider");
+  }
+  return ctx;
+}

ui/src/context/PanelContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+
+interface PanelContextValue {
+  panelContent: ReactNode | null;
+  openPanel: (content: ReactNode) => void;
+  closePanel: () => void;
+}
+
+const PanelContext = createContext<PanelContextValue | null>(null);
+
+export function PanelProvider({ children }: { children: ReactNode }) {
+  const [panelContent, setPanelContent] = useState<ReactNode | null>(null);
+
+  const openPanel = useCallback((content: ReactNode) => {
+    setPanelContent(content);
+  }, []);
+
+  const closePanel = useCallback(() => {
+    setPanelContent(null);
+  }, []);
+
+  return (
+    <PanelContext.Provider value={{ panelContent, openPanel, closePanel }}>
+      {children}
+    </PanelContext.Provider>
+  );
+}
+
+export function usePanel() {
+  const ctx = useContext(PanelContext);
+  if (!ctx) {
+    throw new Error("usePanel must be used within PanelProvider");
+  }
+  return ctx;
+}