@handled-ai/design-system 0.9.24 → 0.9.26

package/src/prototype/prototype-inbox-view.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import {
   ArrowLeft,
+  ArrowUpDown,
   ChevronDown,
   ChevronRight,
   Filter,
@@ -19,6 +20,13 @@ import {
   Tag,
 } from "lucide-react"
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../components/dropdown-menu"
 import { Button } from "../components/button"
 import { Badge } from "../components/badge"
 import { Input } from "../components/input"
@@ -424,6 +432,9 @@ export function PrototypeInboxView({
   hideApproveButton,
   signalBriefCopy,
   renderDetailExtra,
+  sortOptions,
+  activeSortId,
+  onSortChange,
 }: PrototypeInboxViewProps) {
   const [inboxViewMode, setInboxViewMode] = React.useState<"inbox" | "list" | "detail">(
     defaultViewMode === "list" ? "list" : defaultViewMode === "split" ? "inbox" : "inbox"
@@ -583,7 +594,12 @@ export function PrototypeInboxView({
   const renderInboxRow = React.useCallback(
     (item: QueueItem) => (
       <>
-        <span className={`h-2 w-2 shrink-0 rounded-full ${item.statusColor === "red" ? "bg-[#f43f5e]" : "bg-[#3b82f6]"}`} />
+        <span className={`h-2 w-2 shrink-0 rounded-full ${
+          item.statusColor === "red" ? "bg-[#f43f5e]"
+          : item.statusColor === "yellow" || item.statusColor === "amber" || item.statusColor === "orange" ? "bg-[#eab308]"
+          : item.statusColor === "green" ? "bg-[#22c55e]"
+          : "bg-[#9ca3af]"
+        }`} />
         <span className="w-[80px] shrink-0 font-mono text-xs text-muted-foreground/80">{item.id}</span>
         <span className="shrink-0 rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap">{item.tag1}</span>
         <span className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">{item.title}</span>
@@ -744,6 +760,26 @@ export function PrototypeInboxView({
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSplitViewSearch(e.target.value)}
                   />
                 </div>
+                {sortOptions && sortOptions.length > 0 && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="outline" size="sm" className="h-8 text-xs font-medium rounded-md shadow-none gap-1.5">
+                        <ArrowUpDown className="w-3.5 h-3.5" />
+                        {sortOptions.find(o => o.id === activeSortId)?.label ?? 'Sort'}
+                        <ChevronDown className="w-3 h-3" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuRadioGroup value={activeSortId ?? ''} onValueChange={(val) => onSortChange?.(val)}>
+                        {sortOptions.map(option => (
+                          <DropdownMenuRadioItem key={option.id} value={option.id}>
+                            {option.label}
+                          </DropdownMenuRadioItem>
+                        ))}
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
                 {!hideAccountsButton && (
                   <Button variant="outline" size="sm" className="h-8 text-xs font-medium rounded-md shadow-none">
                     <Building className="w-3.5 h-3.5 mr-1.5" /> {accountDetailsLabel ?? "Accounts"}
@@ -805,7 +841,12 @@ export function PrototypeInboxView({
                     <span className="ml-auto shrink-0 text-[10px] font-medium text-muted-foreground/80">{item.time}</span>
                   </div>
                   <div className="flex items-start gap-2 mt-2">
-                    <span className={`w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 ${item.statusColor === "red" ? "bg-[#f43f5e]" : "bg-[#3b82f6]"}`} />
+                    <span className={`w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 ${
+                      item.statusColor === "red" ? "bg-[#f43f5e]"
+                      : item.statusColor === "yellow" || item.statusColor === "amber" || item.statusColor === "orange" ? "bg-[#eab308]"
+                      : item.statusColor === "green" ? "bg-[#22c55e]"
+                      : "bg-[#9ca3af]"
+                    }`} />
                     <span className="text-xs text-muted-foreground leading-tight">{item.details}</span>
                   </div>
                   {buildEntityChips && (() => {