@handled-ai/design-system 0.15.1 → 0.16.1

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 {
@@ -34,13 +43,27 @@ function getOptionLabel(option: string | FilterOption): string {
   return typeof option === "string" ? option : option.label
 }
 
-interface DataTableFilterProps {
+export interface DataTableFilterProps {
   categories: DataTableFilterCategory[]
   selectedFilters: Record<string, string[]>
   onToggleFilter: (categoryId: string, option: string) => void
   className?: string
   /** Minimum number of options before showing the sub-menu search input. Defaults to 8. */
   optionSearchThreshold?: number
+  /** Filters applied by default. Shown as distinct chips that can be toggled off but not dismissed. */
+  presetFilters?: Record<string, string[]>
+  /** Callback when a preset filter is toggled on/off. */
+  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({
@@ -49,9 +72,18 @@ export function DataTableFilter({
   onToggleFilter,
   className,
   optionSearchThreshold = 8,
+  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()
@@ -70,16 +102,61 @@ export function DataTableFilter({
     })
   }, [categories, query])
 
-  const activeCount = React.useMemo(
-    () =>
-      Object.values(selectedFilters).reduce(
-        (count, selected) => count + selected.length,
-        0
-      ),
-    [selectedFilters]
+  /** Check if a specific option is a preset filter */
+  const isPresetOption = React.useCallback(
+    (categoryId: string, value: string): boolean => {
+      return presetFilters?.[categoryId]?.includes(value) ?? false
+    },
+    [presetFilters]
   )
 
-  return (
+  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)
+    const 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 + conditionFilters.length
+  }, [selectedFilters, presetFilters, conditionFilters.length])
+
+  /** Collect all preset chips to render */
+  const presetChips = React.useMemo(() => {
+    if (!presetFilters) return []
+
+    const chips: { categoryId: string; value: string; label: string; active: boolean }[] = []
+
+    for (const [categoryId, values] of Object.entries(presetFilters)) {
+      const category = categories.find((c) => c.id === categoryId)
+      for (const value of values) {
+        const option = category?.options.find(
+          (opt) => getOptionValue(opt) === value
+        )
+        const label = option ? getOptionLabel(option) : value
+        const active = selectedFilters[categoryId]?.includes(value) ?? false
+        chips.push({ categoryId, value, label, active })
+      }
+    }
+
+    return chips
+  }, [presetFilters, categories, selectedFilters])
+
+  const triggerButton = (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
@@ -116,6 +193,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) =>
@@ -171,6 +273,7 @@ export function DataTableFilter({
                     const value = getOptionValue(option)
                     const label = getOptionLabel(option)
                     const selected = selectedFilters[category.id]?.includes(value) ?? false
+                    const isPreset = isPresetOption(category.id, value)
                     return (
                       <DropdownMenuItem
                         key={value}
@@ -182,9 +285,17 @@ export function DataTableFilter({
                       >
                         {label}
                         {selected ? (
-                          <span className="text-[10px] font-semibold text-brand-purple">
-                            Applied
-                          </span>
+                          isPreset ? (
+                            <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
+                            </span>
+                          )
                         ) : null}
                       </DropdownMenuItem>
                     )
@@ -205,7 +316,84 @@ 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-60 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>
   )
+
+  // If there are preset chips, wrap trigger + chips together
+  if (presetChips.length > 0) {
+    return (
+      <div className="flex flex-wrap items-center gap-1.5">
+        {triggerButton}
+        {presetChips.map((chip) => (
+          <button
+            key={`${chip.categoryId}-${chip.value}`}
+            type="button"
+            onClick={() => onTogglePreset?.(chip.categoryId, chip.value)}
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors",
+              chip.active
+                ? "border-dashed border-brand-purple/30 bg-brand-purple/5 text-brand-purple/80"
+                : "border-border/40 bg-transparent text-muted-foreground/60 line-through"
+            )}
+          >
+            <span className="text-brand-purple/50 text-[10px]">
+              {presetLabel}:{" "}
+            </span>
+            {chip.label}
+          </button>
+        ))}
+      </div>
+    )
+  }
+
+  return triggerButton
 }

package/src/components/entity-panel.tsx

@@ -242,7 +242,7 @@ export interface EntityMetadataField {
 
 export function EntityMetadataGrid({ fields }: { fields: EntityMetadataField[] }) {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-[140px_1fr] gap-y-3 gap-x-4 mb-7 text-[13px]">
+    <div className="grid grid-cols-1 md:grid-cols-[140px_1fr] gap-y-3 gap-x-4 mb-7 text-[13px] overflow-hidden">
       {fields.map((field, idx) => (
         <React.Fragment key={idx}>
           <div className="flex items-center gap-1.5 text-muted-foreground text-[13px] font-normal">

package/src/index.ts

@@ -19,11 +19,13 @@ export * from "./components/avatar"
 export * from "./components/badge"
 export * from "./components/button"
 export * from "./components/card"
+export { CollapsibleSection, type CollapsibleSectionProps } from "./components/collapsible-section"
 export * from "./components/compliance-badge"
 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 ?? ''}