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
parent 22e7930d0b
commit fad1bd27ce
42 changed files with 2534 additions and 69 deletions
--- a/ui/src/components/PriorityIcon.tsx
+++ b/ui/src/components/PriorityIcon.tsx
@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { ArrowUp, ArrowDown, Minus, AlertTriangle } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+const priorityConfig: Record<string, { icon: typeof ArrowUp; color: string; label: string }> = {
+  critical: { icon: AlertTriangle, color: "text-red-400", label: "Critical" },
+  high: { icon: ArrowUp, color: "text-orange-400", label: "High" },
+  medium: { icon: Minus, color: "text-yellow-400", label: "Medium" },
+  low: { icon: ArrowDown, color: "text-blue-400", label: "Low" },
+};
+
+const allPriorities = ["critical", "high", "medium", "low"];
+
+interface PriorityIconProps {
+  priority: string;
+  onChange?: (priority: string) => void;
+  className?: string;
+}
+
+export function PriorityIcon({ priority, onChange, className }: PriorityIconProps) {
+  const [open, setOpen] = useState(false);
+  const config = priorityConfig[priority] ?? priorityConfig.medium!;
+  const Icon = config.icon;
+
+  const icon = (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center shrink-0",
+        config.color,
+        onChange && "cursor-pointer",
+        className
+      )}
+    >
+      <Icon className="h-3.5 w-3.5" />
+    </span>
+  );
+
+  if (!onChange) return icon;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{icon}</PopoverTrigger>
+      <PopoverContent className="w-36 p-1" align="start">
+        {allPriorities.map((p) => {
+          const c = priorityConfig[p]!;
+          const PIcon = c.icon;
+          return (
+            <Button
+              key={p}
+              variant="ghost"
+              size="sm"
+              className={cn("w-full justify-start gap-2 text-xs", p === priority && "bg-accent")}
+              onClick={() => {
+                onChange(p);
+                setOpen(false);
+              }}
+            >
+              <PIcon className={cn("h-3.5 w-3.5", c.color)} />
+              {c.label}
+            </Button>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+}