@handled-ai/design-system 0.18.6 → 0.18.7

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

@@ -53,6 +53,7 @@ import type {
   InboxDetailSections,
   SignalScoreData,
   BriefStyleVariant,
+  TimelineSystemEventsConfig,
 } from "./prototype-config"
 
 // ---------------------------------------------------------------------------
@@ -150,8 +151,151 @@ export interface DetailViewProps {
   onRequestApproval?: () => Promise<void>
   /** Number of important/attention-worthy events to highlight on the collapsed timeline header. */
   attentionCount?: number
+  /** Configuration for the system-noise events toggle (score changes, etc.). */
+  timelineSystemEventsConfig?: TimelineSystemEventsConfig
+
+  // ── Deprecated individual props (use timelineSystemEventsConfig instead) ──
+  /** @deprecated Use `timelineSystemEventsConfig.toggleLabel`. */
+  timelineSystemEventsToggleLabel?: string
+  /** @deprecated Use `timelineSystemEventsConfig.storageKey`. */
+  timelineSystemEventsStorageKey?: string
+  /** @deprecated Use `timelineSystemEventsConfig.defaultVisible`. */
+  timelineSystemEventsDefaultVisible?: boolean
+  /** @deprecated Use `timelineSystemEventsConfig.hiddenHint`. */
+  timelineSystemEventsHiddenHint?: string
+  /** @deprecated Use `timelineSystemEventsConfig.visibleHint`. */
+  timelineSystemEventsVisibleHint?: string
+}
+
+// ---------------------------------------------------------------------------
+// TimelineSection — extracted from the IIFE in DetailView for readability
+// ---------------------------------------------------------------------------
+
+function TimelineSection({
+  timelineEvents,
+  showTimeline,
+  setShowTimeline,
+  showSystemEvents,
+  setShowSystemEvents,
+  attentionCount,
+  sysEvtConfig,
+  lastActivityTime,
+}: {
+  timelineEvents: TimelineEvent[]
+  showTimeline: boolean
+  setShowTimeline: React.Dispatch<React.SetStateAction<boolean>>
+  showSystemEvents: boolean
+  setShowSystemEvents: React.Dispatch<React.SetStateAction<boolean>>
+  attentionCount?: number
+  sysEvtConfig?: TimelineSystemEventsConfig
+  lastActivityTime?: string
+}) {
+  // Single-pass partition: compute visibleEvents and hiddenCount together
+  const visibleEvents: TimelineEvent[] = []
+  let hiddenCount = 0
+  for (const e of timelineEvents) {
+    if (e.isSystemNoise) hiddenCount++
+    if (!e.isSystemNoise || showSystemEvents) visibleEvents.push(e)
+  }
+  const hasSystemNoise = hiddenCount > 0
+
+  // The toggle renders whenever there are system-noise events — even if no
+  // config was provided — so consumers that emit `isSystemNoise: true` always
+  // give users a way to reveal those events.
+  const toggleLabel = sysEvtConfig?.toggleLabel ?? "System events"
+
+  // Derive "Last activity" from the first *visible* event so the collapsed
+  // header never points at a hidden score-update. The caller-supplied
+  // `lastActivityTime` is only used when system-noise filtering is NOT active
+  // (i.e. all events are visible) since it may come from an unfiltered source
+  // such as `case.last_activity_at`.
+  const firstVisibleTime =
+    (!hasSystemNoise || showSystemEvents) && lastActivityTime
+      ? lastActivityTime
+      : visibleEvents.length > 0
+        ? visibleEvents[0].time
+        : ""
+
+  const visibleCount = visibleEvents.length
+  const eventCountLabel = `${visibleCount} ${visibleCount === 1 ? "event" : "events"}`
+
+  return (
+    <div className="mb-8">
+      {/* Header — outer non-interactive container */}
+      <div
+        className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2"
+        data-testid="timeline-header"
+      >
+        {/* Left: collapse/expand button */}
+        <button
+          type="button"
+          onClick={() => setShowTimeline((prev) => !prev)}
+          className="flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
+          data-testid="timeline-collapse-btn"
+        >
+          <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 && firstVisibleTime && (
+            <span className="text-[11px] text-muted-foreground/60" data-testid="last-activity-hint">
+              &middot; Last activity {firstVisibleTime}
+            </span>
+          )}
+          <div className="flex items-center gap-1.5">
+            <span className="text-[11px] font-medium text-muted-foreground" data-testid="event-count">{eventCountLabel}</span>
+            <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
+          </div>
+        </button>
+
+        {/* Right: system-events toggle — always rendered when noise events exist */}
+        {hasSystemNoise && (
+          <button
+            type="button"
+            onClick={() => setShowSystemEvents((prev) => !prev)}
+            className="flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground cursor-pointer"
+            aria-pressed={showSystemEvents}
+            data-testid="system-events-toggle"
+          >
+            {toggleLabel}
+            <span
+              className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold min-w-[18px] tabular-nums"
+              data-testid="hidden-count-badge"
+            >
+              {hiddenCount}
+            </span>
+          </button>
+        )}
+      </div>
+
+      {/* Timeline body */}
+      {showTimeline && visibleEvents.length > 0 && (
+        <div className="mt-3">
+          <TimelineActivity events={visibleEvents} />
+        </div>
+      )}
+
+      {/* Footer hint */}
+      {showTimeline && !showSystemEvents && sysEvtConfig?.hiddenHint && hasSystemNoise && (
+        <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
+          {sysEvtConfig.hiddenHint}
+        </p>
+      )}
+      {showTimeline && showSystemEvents && sysEvtConfig?.visibleHint && hasSystemNoise && (
+        <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
+          {sysEvtConfig.visibleHint.replace("{count}", String(hiddenCount))}
+        </p>
+      )}
+    </div>
+  )
 }
 
+// ---------------------------------------------------------------------------
+// Detail View
+// ---------------------------------------------------------------------------
+
 export function DetailView({
   item,
   sections,
@@ -184,10 +328,79 @@ export function DetailView({
   opportunityPreview,
   onRequestApproval,
   attentionCount,
+  timelineSystemEventsConfig: configProp,
+  timelineSystemEventsToggleLabel,
+  timelineSystemEventsStorageKey,
+  timelineSystemEventsDefaultVisible,
+  timelineSystemEventsHiddenHint,
+  timelineSystemEventsVisibleHint,
 }: DetailViewProps) {
+  // Resolve system-events config: prefer the config object, fall back to deprecated individual props.
+  const sysEvtConfig = React.useMemo<TimelineSystemEventsConfig | undefined>(() => {
+    if (configProp) return configProp
+    // Build from deprecated individual props if any are provided
+    if (
+      timelineSystemEventsToggleLabel ||
+      timelineSystemEventsStorageKey ||
+      timelineSystemEventsDefaultVisible !== undefined ||
+      timelineSystemEventsHiddenHint ||
+      timelineSystemEventsVisibleHint
+    ) {
+      return {
+        toggleLabel: timelineSystemEventsToggleLabel,
+        storageKey: timelineSystemEventsStorageKey,
+        defaultVisible: timelineSystemEventsDefaultVisible,
+        hiddenHint: timelineSystemEventsHiddenHint,
+        visibleHint: timelineSystemEventsVisibleHint,
+      }
+    }
+    return undefined
+  }, [
+    configProp,
+    timelineSystemEventsToggleLabel,
+    timelineSystemEventsStorageKey,
+    timelineSystemEventsDefaultVisible,
+    timelineSystemEventsHiddenHint,
+    timelineSystemEventsVisibleHint,
+  ])
+
   const [showTimeline, setShowTimeline] = React.useState(false)
   const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])
 
+  // ---- System-noise toggle state ----
+  const sysEvtDefaultVisible = sysEvtConfig?.defaultVisible ?? false
+  const sysEvtStorageKey = sysEvtConfig?.storageKey
+  const [showSystemEvents, setShowSystemEvents] = React.useState(sysEvtDefaultVisible)
+  const initialReadDoneRef = React.useRef(false)
+
+  // Read persisted value from localStorage on mount
+  React.useEffect(() => {
+    if (!sysEvtStorageKey) {
+      initialReadDoneRef.current = true
+      return
+    }
+    try {
+      const stored = localStorage.getItem(sysEvtStorageKey)
+      if (stored !== null) {
+        setShowSystemEvents(stored === "true")
+      }
+    } catch {
+      // localStorage unavailable — ignore
+    }
+    initialReadDoneRef.current = true
+  }, [sysEvtStorageKey])
+
+  // Write to localStorage when the toggle changes (skip initial if matching default)
+  React.useEffect(() => {
+    if (!sysEvtStorageKey) return
+    if (!initialReadDoneRef.current) return
+    try {
+      localStorage.setItem(sysEvtStorageKey, String(showSystemEvents))
+    } catch {
+      // localStorage unavailable — ignore
+    }
+  }, [showSystemEvents, sysEvtStorageKey])
+
   React.useEffect(() => {
     setShowTimeline(false)
     setExtraActions([])
@@ -355,36 +568,16 @@ export function DetailView({
 
           {/* Activity Timeline */}
           {sections.timeline && timelineEvents.length > 0 && (
-            <div className="mb-8">
-              <button
-                type="button"
-                onClick={() => setShowTimeline((prev) => !prev)}
-                className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2 cursor-pointer"
-              >
-                <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 ?? ''}
-                    </span>
-                  )}
-                </div>
-                <div className="flex items-center gap-1.5">
-                  <span className="text-[11px] font-medium text-muted-foreground">{timelineEvents.length} events</span>
-                  <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
-                </div>
-              </button>
-              {showTimeline && (
-                <div className="mt-3">
-                  <TimelineActivity events={timelineEvents} />
-                </div>
-              )}
-            </div>
+            <TimelineSection
+              timelineEvents={timelineEvents}
+              showTimeline={showTimeline}
+              setShowTimeline={setShowTimeline}
+              showSystemEvents={showSystemEvents}
+              setShowSystemEvents={setShowSystemEvents}
+              attentionCount={attentionCount}
+              sysEvtConfig={sysEvtConfig}
+              lastActivityTime={lastActivityTime}
+            />
           )}
         </div>
 
@@ -453,6 +646,8 @@ export function PrototypeInboxView({
   renderBeforeScore,
   renderAfterScore,
   lastActivityTime,
+  timelineSystemEventsConfig,
+  attentionCount,
   renderTitleExtra,
   renderTitleSubtext,
   sortOptions,
@@ -693,6 +888,8 @@ export function PrototypeInboxView({
     renderBeforeScore,
     renderAfterScore,
     lastActivityTime,
+    timelineSystemEventsConfig,
+    attentionCount,
     renderTitleExtra,
     renderTitleSubtext,
     onOpenSignalBucket,