@handled-ai/design-system 0.18.2 → 0.18.4

package/src/components/signal-priority-popover.tsx

@@ -17,13 +17,9 @@ import {
   ChevronDown,
   ChevronUp,
   Info,
-  ThumbsUp,
-  ThumbsDown,
-  Check,
-  Pencil,
 } from "lucide-react"
 import { cn } from "../lib/utils"
-import { FeedbackFooter } from "./feedback-primitives"
+import { FeedbackFooter, InlineFeedbackControl } from "./feedback-primitives"
 import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "./feedback-primitives"
 import type { SignalScoreUrgencyLabel } from "../prototype/prototype-config"
 import { getSignalScoreUrgencyLabel, scoreRangeForUrgency, SIGNAL_TONE_CLASSES } from "./score-why-chips"
@@ -179,50 +175,6 @@ function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: Priori
         ? "Lowers"
         : "Neutral"
 
-  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(
-    initialFeedback?.type ?? null,
-  )
-  const [showInput, setShowInput] = React.useState(false)
-  const [detailText, setDetailText] = React.useState(initialFeedback?.detail ?? "")
-  const [saved, setSaved] = React.useState(!!initialFeedback)
-  const [savedDetail, setSavedDetail] = React.useState(initialFeedback?.detail ?? "")
-  const ownershipLabel = initialFeedback?.ownershipLabel ?? "Your feedback"
-
-  // Sync with initialFeedback prop changes
-  React.useEffect(() => {
-    if (initialFeedback) {
-      setThumbState(initialFeedback.type)
-      setSaved(true)
-      setSavedDetail(initialFeedback.detail)
-    }
-  }, [initialFeedback])
-
-  const handleThumbClick = React.useCallback(
-    (type: "up" | "down") => {
-      if (thumbState === type) {
-        // Toggle off
-        setThumbState(null)
-        setShowInput(false)
-        setSaved(false)
-        onFactorFeedback?.(factor.key, null)
-      } else {
-        setThumbState(type)
-        setShowInput(true)
-        setSaved(false)
-      }
-    },
-    [thumbState, factor.key, onFactorFeedback],
-  )
-
-  const handleSubmitDetail = React.useCallback(() => {
-    if (!thumbState) return
-    const text = detailText.trim()
-    onFactorFeedback?.(factor.key, thumbState, text)
-    setSaved(true)
-    setSavedDetail(text)
-    setShowInput(false)
-  }, [thumbState, detailText, factor.key, onFactorFeedback])
-
   return (
     <div
       className="grid grid-cols-[20px_1fr_auto] gap-x-3 gap-y-1 px-4 py-3"
@@ -290,115 +242,12 @@ function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: Priori
         <>
           <div />
           <div className="col-span-2 mt-1">
-            {saved && !showInput ? (
-              /* Persisted / saved indicator */
-              <button
-                type="button"
-                onClick={() => {
-                  setDetailText(savedDetail)
-                  setShowInput(true)
-                  setSaved(false)
-                }}
-                className="group flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
-                data-testid={`factor-feedback-persisted-${factor.key}`}
-              >
-                <span className="font-medium">{ownershipLabel}:</span>
-                {thumbState === "up" ? (
-                  <ThumbsUp className="h-[10px] w-[10px]" />
-                ) : (
-                  <ThumbsDown className="h-[10px] w-[10px]" />
-                )}
-                {savedDetail && (
-                  <span className="max-w-[180px] truncate text-muted-foreground/70">
-                    {savedDetail}
-                  </span>
-                )}
-                <Pencil className="h-[9px] w-[9px] opacity-0 group-hover:opacity-100 transition-opacity" />
-              </button>
-            ) : (
-              <div className="flex items-center gap-1.5">
-                {/* Inline thumb buttons */}
-                <button
-                  type="button"
-                  onClick={() => handleThumbClick("up")}
-                  className={cn(
-                    "p-1 rounded transition-colors",
-                    thumbState === "up"
-                      ? "text-foreground bg-muted"
-                      : "text-muted-foreground/40 hover:text-foreground hover:bg-muted/50",
-                  )}
-                  title="This factor is accurate"
-                  data-testid={`factor-thumb-up-${factor.key}`}
-                >
-                  <ThumbsUp className="h-[10px] w-[10px]" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handleThumbClick("down")}
-                  className={cn(
-                    "p-1 rounded transition-colors",
-                    thumbState === "down"
-                      ? "text-red-600 bg-red-50"
-                      : "text-muted-foreground/40 hover:text-red-600 hover:bg-red-50/50",
-                  )}
-                  title="Report issue with this factor"
-                  data-testid={`factor-thumb-down-${factor.key}`}
-                >
-                  <ThumbsDown className="h-[10px] w-[10px]" />
-                </button>
-
-                {/* Transient "Saved" pill */}
-                {saved && (
-                  <span
-                    className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-600"
-                    role="status"
-                    data-testid={`factor-saved-${factor.key}`}
-                  >
-                    <Check className="h-[10px] w-[10px]" />
-                    Saved
-                  </span>
-                )}
-              </div>
-            )}
-
-            {/* Inline detail input */}
-            {showInput && thumbState && (
-              <div className="mt-1.5">
-                <input
-                  type="text"
-                  value={detailText}
-                  onChange={(e) => setDetailText(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") handleSubmitDetail()
-                    if (e.key === "Escape") setShowInput(false)
-                  }}
-                  placeholder={
-                    thumbState === "up"
-                      ? "What\u2019s accurate? (optional)"
-                      : "What\u2019s wrong? (optional)"
-                  }
-                  className="w-full h-6 rounded border border-border bg-background px-2 text-[11px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
-                  data-testid={`factor-detail-input-${factor.key}`}
-                />
-                <div className="mt-1 flex items-center gap-1.5">
-                  <button
-                    type="button"
-                    onClick={handleSubmitDetail}
-                    className="bg-foreground text-background rounded px-2 py-0.5 text-[10px] font-semibold"
-                    data-testid={`factor-submit-${factor.key}`}
-                  >
-                    Submit
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setShowInput(false)}
-                    className="border border-border rounded px-2 py-0.5 text-[10px] font-medium"
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </div>
-            )}
+            <InlineFeedbackControl
+              feedbackKey={factor.key}
+              initialFeedback={initialFeedback}
+              onFeedback={onFactorFeedback}
+              testIdPrefix="factor"
+            />
           </div>
         </>
       )}

package/src/index.ts

@@ -37,8 +37,8 @@ export * from "./components/dialog"
 export * from "./components/dropdown-menu"
 export * from "./components/empty-state"
 export * from "./components/entity-panel"
-export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions } from "./components/feedback-primitives"
-export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData } from "./components/feedback-primitives"
+export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from "./components/feedback-primitives"
+export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from "./components/feedback-primitives"
 export { SignalPriorityPopover } from "./components/signal-priority-popover"
 export type { SignalPriorityPopoverProps, PriorityFactor } from "./components/signal-priority-popover"
 export * from "./components/filter-chip"