@handled-ai/design-system 0.16.0 → 0.16.2

package/src/components/data-table-filter.tsx

@@ -1,10 +1,17 @@
 "use client"
 
 import * as React from "react"
-import { ListFilter, Search } from "lucide-react"
+import { Check, ListFilter, Plus, Search } from "lucide-react"
+
+import { Popover as PopoverPrimitive } from "radix-ui"
 
 import { cn } from "../lib/utils"
 import { Button } from "./button"
+import {
+  DataTableConditionFilter,
+  type ConditionFieldDef,
+  type ConditionFilterValue,
+} from "./data-table-condition-filter"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,6 +32,8 @@ export interface DataTableFilterCategory {
   label: string
   icon: React.ComponentType<{ className?: string }>
   options: (string | FilterOption)[]
+  /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
+  type?: "multi" | "single" | "boolean"
 }
 
 function getOptionValue(option: string | FilterOption): string {
@@ -47,6 +56,14 @@ export interface DataTableFilterProps {
   onTogglePreset?: (categoryId: string, option: string) => void
   /** Label shown on preset chips to distinguish from user-applied filters. Default: "Default". */
   presetLabel?: string
+  /** Fields exposed in the unified condition-builder panel. */
+  conditionFields?: ConditionFieldDef[]
+  /** Active builder-managed field/operator/value conditions. */
+  conditionFilters?: ConditionFilterValue[]
+  /** Callback when builder-managed conditions are applied, removed, or cleared. */
+  onConditionFiltersChange?: (conditions: ConditionFilterValue[]) => void
+  /** Dropdown entry label for the condition-builder panel. Default: "Add filter". */
+  conditionBuilderLabel?: string
 }
 
 export function DataTableFilter({
@@ -58,9 +75,15 @@ export function DataTableFilter({
   presetFilters,
   onTogglePreset,
   presetLabel = "Default",
+  conditionFields = [],
+  conditionFilters = [],
+  onConditionFiltersChange,
+  conditionBuilderLabel = "Add filter",
 }: DataTableFilterProps) {
   const [query, setQuery] = React.useState("")
   const [subQueries, setSubQueries] = React.useState<Record<string, string>>({})
+  const [conditionBuilderOpen, setConditionBuilderOpen] = React.useState(false)
+  const hasConditionBuilder = conditionFields.length > 0
 
   const visibleCategories = React.useMemo(() => {
     const normalized = query.trim().toLowerCase()
@@ -88,29 +111,13 @@ export function DataTableFilter({
   )
 
   const activeCount = React.useMemo(() => {
-    // Count user-selected filters
     const userCount = Object.values(selectedFilters).reduce(
       (count, selected) => count + selected.length,
       0
     )
 
-    // Count active preset filters (those that are in presetFilters AND currently active in selectedFilters)
-    let presetCount = 0
-    if (presetFilters) {
-      for (const [categoryId, presetValues] of Object.entries(presetFilters)) {
-        for (const value of presetValues) {
-          // Only count if the preset is active (in selectedFilters) but NOT already counted as a user filter
-          if (selectedFilters[categoryId]?.includes(value)) {
-            // Already counted in userCount, skip
-          } else {
-            // Not in selectedFilters — it's an inactive preset, don't count
-          }
-        }
-      }
-    }
-
-    return userCount + presetCount
-  }, [selectedFilters, presetFilters])
+    return userCount + conditionFilters.length
+  }, [selectedFilters, conditionFilters.length])
 
   /** Collect all preset chips to render */
   const presetChips = React.useMemo(() => {
@@ -170,6 +177,31 @@ export function DataTableFilter({
 
         <div className="max-h-[320px] overflow-y-auto p-1">
           {visibleCategories.map((category) => {
+            const filterType = category.type ?? "multi"
+
+            /* ── Boolean toggle ─────────────────────────────────── */
+            if (filterType === "boolean") {
+              const active = selectedFilters[category.id]?.includes("true") ?? false
+              return (
+                <DropdownMenuItem
+                  key={category.id}
+                  className={cn(
+                    "cursor-pointer py-1.5 text-xs",
+                    active && "text-brand-purple"
+                  )}
+                  onSelect={(event) => {
+                    event.preventDefault()
+                    onToggleFilter(category.id, "true")
+                  }}
+                >
+                  <category.icon className="mr-2 h-3.5 w-3.5" />
+                  {category.label}
+                  {active ? <Check className="ml-auto h-4 w-4" /> : null}
+                </DropdownMenuItem>
+              )
+            }
+
+            /* ── Sub-menu (single / multi) ──────────────────────── */
             const subQuery = (subQueries[category.id] ?? "").trim().toLowerCase()
             const filteredOptions = subQuery
               ? category.options.filter((opt) =>
@@ -241,6 +273,8 @@ export function DataTableFilter({
                             <span className="text-brand-purple text-[10px] font-semibold">
                               {presetLabel}
                             </span>
+                          ) : filterType === "single" ? (
+                            <span className="h-1.5 w-1.5 rounded-full bg-current" />
                           ) : (
                             <span className="text-[10px] font-semibold text-brand-purple">
                               Applied
@@ -266,6 +300,54 @@ export function DataTableFilter({
             </div>
           ) : null}
         </div>
+
+        {hasConditionBuilder ? (
+          <div className="border-t border-border p-1">
+            <PopoverPrimitive.Root
+              open={conditionBuilderOpen}
+              onOpenChange={setConditionBuilderOpen}
+            >
+              <PopoverPrimitive.Trigger asChild>
+                <DropdownMenuItem
+                  className="cursor-pointer py-1.5 text-xs"
+                  onSelect={(event) => {
+                    event.preventDefault()
+                    setConditionBuilderOpen(true)
+                  }}
+                >
+                  <Plus className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
+                  {conditionBuilderLabel}
+                  {conditionFilters.length > 0 ? (
+                    <span className="ml-auto rounded bg-muted px-1.5 py-0 text-[10px] font-semibold">
+                      {conditionFilters.length}
+                    </span>
+                  ) : null}
+                </DropdownMenuItem>
+              </PopoverPrimitive.Trigger>
+              <PopoverPrimitive.Portal>
+                <PopoverPrimitive.Content
+                  align="start"
+                  side="right"
+                  sideOffset={8}
+                  className="z-50 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+                  onEscapeKeyDown={() => setConditionBuilderOpen(false)}
+                  onInteractOutside={(event) => {
+                    const target = event.target as HTMLElement | null
+                    if (target?.closest('[data-slot="dropdown-menu-content"]')) {
+                      event.preventDefault()
+                    }
+                  }}
+                >
+                  <DataTableConditionFilter
+                    fields={conditionFields}
+                    conditions={conditionFilters}
+                    onConditionsChange={onConditionFiltersChange ?? (() => {})}
+                  />
+                </PopoverPrimitive.Content>
+              </PopoverPrimitive.Portal>
+            </PopoverPrimitive.Root>
+          </div>
+        ) : null}
       </DropdownMenuContent>
     </DropdownMenu>
   )

package/src/index.ts

@@ -25,6 +25,7 @@ export * from "./components/contact-chip"
 export * from "./components/contact-list"
 export * from "./components/dashboard-cards"
 export * from "./components/data-table"
+export * from "./components/data-table-condition-filter"
 export * from "./components/data-table-display"
 export * from "./components/data-table-filter"
 export * from "./components/data-table-quick-views"

package/src/prototype/__tests__/detail-view-attention.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { DetailView, type DetailViewProps } from "../prototype-inbox-view";
+import type { QueueItem, SignalScoreData } from "../prototype-config";
+import type { TimelineEvent } from "../../components/timeline-activity";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const baseItem: QueueItem = {
+  id: "1",
+  title: "Test Signal",
+  details: "Some details",
+  statusColor: "green",
+  time: "2h ago",
+  company: "Acme Inc",
+  tag1: "renewal",
+};
+
+function makeSignalScore(): SignalScoreData {
+  return {
+    score: 75,
+    factors: [
+      { key: "trigger", label: "Trigger strength", score: 70, why: "Strong signal" },
+    ],
+    whyNow: "Strong signals detected.",
+    evidence: ["Evidence line 1"],
+    confidence: 80,
+  };
+}
+
+const sampleTimelineEvents: TimelineEvent[] = [
+  { id: "t1", icon: React.createElement("span", null, "📧"), title: "Email sent", time: "1h ago" },
+  { id: "t2", icon: React.createElement("span", null, "📞"), title: "Call logged", time: "3h ago" },
+];
+
+function baseProps(overrides: Partial<DetailViewProps> = {}): DetailViewProps {
+  return {
+    item: baseItem,
+    sections: { signalBrief: true, suggestedActions: false, timeline: true },
+    getSignalScore: () => makeSignalScore(),
+    buildSuggestedActions: () => [],
+    buildSourceItems: () => [],
+    getTimelineEvents: () => sampleTimelineEvents,
+    accountContacts: [],
+    emailSignature: "",
+    iconMap: {},
+    ...overrides,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("DetailView attentionCount", () => {
+  it("renders attention pill with count when attentionCount > 0 and timeline collapsed", () => {
+    const props = baseProps({ attentionCount: 3 });
+    const { container } = render(<DetailView {...props} />);
+    const pill = container.querySelector("span.inline-flex");
+    expect(pill).not.toBeNull();
+    expect(pill!.textContent).toContain("3");
+    expect(pill!.textContent).toContain("new");
+    expect(pill!.className).toContain("bg-destructive/10");
+  });
+
+  it("does NOT render pill when attentionCount is 0", () => {
+    const props = baseProps({ attentionCount: 0 });
+    const { container } = render(<DetailView {...props} />);
+    const pill = container.querySelector("span.inline-flex");
+    expect(pill).toBeNull();
+  });
+
+  it("does NOT render pill when attentionCount is undefined", () => {
+    const props = baseProps({ attentionCount: undefined });
+    const { container } = render(<DetailView {...props} />);
+    const pill = container.querySelector("span.inline-flex");
+    expect(pill).toBeNull();
+  });
+
+  it("does NOT render pill when timeline is expanded", () => {
+    const props = baseProps({ attentionCount: 5 });
+    const { container } = render(<DetailView {...props} />);
+
+    // Pill should be visible while collapsed
+    let pill = container.querySelector("span.inline-flex");
+    expect(pill).not.toBeNull();
+    expect(pill!.textContent).toContain("5");
+
+    // Click the timeline header button to expand
+    const timelineButton = container.querySelector("button.group\\/timeline") as HTMLElement;
+    expect(timelineButton).not.toBeNull();
+    fireEvent.click(timelineButton);
+
+    // After expanding, pill should be gone
+    pill = container.querySelector("span.inline-flex");
+    expect(pill).toBeNull();
+  });
+});

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

@@ -142,6 +142,8 @@ export interface DetailViewProps {
   approveButtonIconUrl?: string
   opportunityPreview?: OpportunityPreview
   onRequestApproval?: () => Promise<void>
+  /** Number of important/attention-worthy events to highlight on the collapsed timeline header. */
+  attentionCount?: number
 }
 
 export function DetailView({
@@ -172,6 +174,7 @@ export function DetailView({
   approveButtonIconUrl,
   opportunityPreview,
   onRequestApproval,
+  attentionCount,
 }: DetailViewProps) {
   const [evidenceExpanded, setEvidenceExpanded] = React.useState(false)
   const [showTimeline, setShowTimeline] = React.useState(false)
@@ -422,6 +425,11 @@ export function DetailView({
               >
                 <div className="flex items-center gap-2">
                   <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
+                  {!showTimeline && attentionCount != null && attentionCount > 0 && (
+                    <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20">
+                      {attentionCount} new
+                    </span>
+                  )}
                   {!showTimeline && (lastActivityTime || (timelineEvents.length > 0 && timelineEvents[0].time)) && (
                     <span className="text-[11px] text-muted-foreground/60">
                       &middot; Last activity {lastActivityTime ?? timelineEvents[0]?.time ?? ''}