Refactor report row visuals and add Button component with disabled-reason tooltip

Twixes · Twixes · commit f96bd7a09ef9 · 2026-04-07T21:56:52.000+02:00
Made-with: Cursor
diff --git a/apps/code/src/renderer/components/ui/Button.tsx b/apps/code/src/renderer/components/ui/Button.tsx
@@ -0,0 +1,77 @@
+import { Tooltip } from "@components/ui/Tooltip";
+import { Flex, Button as RadixButton, Text } from "@radix-ui/themes";
+import {
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type ReactNode,
+} from "react";
+
+export type ButtonProps = ComponentPropsWithoutRef<typeof RadixButton> & {
+  /** Primary tooltip explaining what the button does. */
+  tooltipContent?: ReactNode;
+  /**
+   * When non-null and the button is disabled, shown after "Disabled because" in the tooltip.
+   * Must be null when the action is allowed.
+   */
+  disabledReason?: string | null;
+};
+
+function disabledBecauseLabel(detail: string): string {
+  const d = detail.trim().replace(/\.$/, "");
+  return `Disabled because ${d}.`;
+}
+
+function buildTooltipContent(
+  tooltipContent: ReactNode | undefined,
+  disabledReason: string | null | undefined,
+  disabled: boolean | undefined,
+): ReactNode | undefined {
+  const reason = disabled ? disabledReason : null;
+  if (tooltipContent != null && reason) {
+    return (
+      <Flex direction="column" gap="2" style={{ maxWidth: 280 }}>
+        <Text as="span" size="1" style={{ color: "var(--gray-12)" }}>
+          {tooltipContent}
+        </Text>
+        <Text as="span" color="gray" size="1" style={{ lineHeight: 1.45 }}>
+          {disabledBecauseLabel(reason)}
+        </Text>
+      </Flex>
+    );
+  }
+  if (reason) {
+    return disabledBecauseLabel(reason);
+  }
+  if (tooltipContent != null) {
+    return tooltipContent;
+  }
+  return undefined;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button({ tooltipContent, disabledReason, disabled, ...props }, ref) {
+    const tip = buildTooltipContent(
+      tooltipContent,
+      disabledReason ?? null,
+      disabled,
+    );
+
+    const button = <RadixButton ref={ref} disabled={disabled} {...props} />;
+
+    if (tip === undefined) {
+      return button;
+    }
+
+    // Disabled buttons don't receive pointer events; span keeps the tooltip hover target.
+    const trigger =
+      disabled === true ? (
+        <span className="inline-flex cursor-not-allowed">{button}</span>
+      ) : (
+        button
+      );
+
+    return <Tooltip content={tip}>{trigger}</Tooltip>;
+  },
+);
+
+Button.displayName = "Button";
diff --git a/apps/code/src/renderer/features/inbox/components/InboxSignalsTab.tsx b/apps/code/src/renderer/features/inbox/components/InboxSignalsTab.tsx
@@ -324,20 +324,35 @@ export function InboxSignalsTab() {
                 className="outline-none"
                 onMouseDownCapture={(e) => {
                   const target = e.target as HTMLElement;
+                  // Don't steal focus from text fields — we need the search box to stay focused.
                   if (
                     target.closest(
-                      "[data-report-id], button, input, select, textarea, [role='checkbox']",
+                      "input, textarea, select, [contenteditable='true']",
+                    )
+                  ) {
+                    return;
+                  }
+                  if (
+                    target.closest(
+                      "[data-report-id], button, [role='checkbox']",
                     )
                   ) {
                     focusListPane();
                   }
                 }}
                 onFocusCapture={(e) => {
                   const target = e.target as HTMLElement;
+                  if (
+                    target.closest(
+                      "input, textarea, select, [contenteditable='true']",
+                    )
+                  ) {
+                    return;
+                  }
                   if (
                     target !== leftPaneRef.current &&
                     target.closest(
-                      "[data-report-id], button, input, select, textarea, [role='checkbox']",
+                      "[data-report-id], button, [role='checkbox']",
                     )
                   ) {
                     focusListPane();
@@ -441,18 +456,21 @@ export function InboxSignalsTab() {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
+              pointerEvents: "none",
               background:
                 "linear-gradient(to bottom, transparent 0%, var(--color-background) 30%)",
             }}
           >
-            {!hasSignalSources ? (
-              <WelcomePane onEnableInbox={() => setSourcesDialogOpen(true)} />
-            ) : (
-              <WarmingUpPane
-                onConfigureSources={() => setSourcesDialogOpen(true)}
-                enabledProducts={enabledProducts}
-              />
-            )}
+            <Box style={{ pointerEvents: "auto" }}>
+              {!hasSignalSources ? (
+                <WelcomePane onEnableInbox={() => setSourcesDialogOpen(true)} />
+              ) : (
+                <WarmingUpPane
+                  onConfigureSources={() => setSourcesDialogOpen(true)}
+                  enabledProducts={enabledProducts}
+                />
+              )}
+            </Box>
           </Box>
         </Box>
       )}
diff --git a/apps/code/src/renderer/features/inbox/components/list/ReportListPane.tsx b/apps/code/src/renderer/features/inbox/components/list/ReportListPane.tsx
@@ -163,10 +163,9 @@ export function ReportListPane({
   // ── Report list ─────────────────────────────────────────────────────────
   return (
     <>
-      {reports.map((report, index) => (
+      {reports.map((report) => (
         <ReportListRow
           key={report.id}
-          index={index}
           report={report}
           isSelected={selectedReportId === report.id}
           isChecked={selectedReportIds.includes(report.id)}
diff --git a/apps/code/src/renderer/features/inbox/components/list/ReportListRow.tsx b/apps/code/src/renderer/features/inbox/components/list/ReportListRow.tsx
@@ -2,10 +2,10 @@ import { SignalReportPriorityBadge } from "@features/inbox/components/utils/Sign
 import { SignalReportStatusBadge } from "@features/inbox/components/utils/SignalReportStatusBadge";
 import { SignalReportSummaryMarkdown } from "@features/inbox/components/utils/SignalReportSummaryMarkdown";
 import { SOURCE_PRODUCT_META } from "@features/inbox/components/utils/source-product-icons";
+import { INBOX_LIST_CHECKBOX_CLASSNAME } from "@features/inbox/utils/inboxConstants";
 import { EyeIcon } from "@phosphor-icons/react";
 import { Checkbox, Flex, Text, Tooltip } from "@radix-ui/themes";
 import type { SignalReport } from "@shared/types";
-import { motion } from "framer-motion";
 import type { KeyboardEvent, MouseEvent } from "react";
 
 interface ReportListRowProps {
@@ -14,7 +14,6 @@ interface ReportListRowProps {
   isChecked: boolean;
   onClick: () => void;
   onToggleChecked: () => void;
-  index: number;
 }
 
 export function ReportListRow({
@@ -23,7 +22,6 @@ export function ReportListRow({
   isChecked,
   onClick,
   onToggleChecked,
-  index,
 }: ReportListRowProps) {
   const updatedAtLabel = new Date(report.updated_at).toLocaleDateString(
     undefined,
@@ -33,19 +31,6 @@ export function ReportListRow({
     },
   );
 
-  const isStrongSignal = report.total_weight >= 65 || report.signal_count >= 20;
-  const isMediumSignal = report.total_weight >= 30 || report.signal_count >= 6;
-  const strengthColor = isStrongSignal
-    ? "var(--green-9)"
-    : isMediumSignal
-      ? "var(--yellow-9)"
-      : "var(--gray-8)";
-  const strengthLabel = isStrongSignal
-    ? "strong"
-    : isMediumSignal
-      ? "medium"
-      : "light";
-
   const isReady = report.status === "ready";
 
   const isInteractiveTarget = (target: EventTarget | null): boolean => {
@@ -67,18 +52,20 @@ export function ReportListRow({
     onToggleChecked();
   };
 
+  const rowBgClass = isSelected
+    ? "bg-gray-3"
+    : isChecked
+      ? "bg-gray-2"
+      : report.is_suggested_reviewer
+        ? "bg-blue-2"
+        : "";
+
   return (
-    <motion.div
+    // biome-ignore lint/a11y/useSemanticElements: whole row is clickable; nested checkbox cannot live inside <button>
+    <div
       role="button"
       tabIndex={-1}
       data-report-id={report.id}
-      initial={{ opacity: 0, y: 6 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{
-        duration: 0.22,
-        delay: Math.min(index * 0.035, 0.35),
-        ease: [0.22, 1, 0.36, 1],
-      }}
       onMouseDown={(e) => {
         e.preventDefault();
       }}
@@ -96,23 +83,21 @@ export function ReportListRow({
           handleToggleChecked(e);
         }
       }}
-      className="w-full cursor-pointer overflow-hidden border-gray-5 border-b py-2 pr-3 pl-2 text-left transition-colors hover:bg-gray-2"
-      style={{
-        backgroundColor: isSelected
-          ? "var(--gray-3)"
-          : isChecked
-            ? "var(--gray-2)"
-            : report.is_suggested_reviewer
-              ? "var(--blue-2)"
-              : "transparent",
-      }}
+      className={[
+        "relative isolate w-full cursor-pointer overflow-hidden border-gray-5 border-b py-2 pr-3 pl-2 text-left",
+        "before:pointer-events-none before:absolute before:inset-0 before:z-[1] before:bg-gray-12 before:opacity-0 hover:before:opacity-[0.07]",
+        rowBgClass,
+      ]
+        .filter(Boolean)
+        .join(" ")}
     >
-      <Flex align="start" justify="between" gap="3">
+      <Flex align="start" justify="between" gap="3" className="relative z-[2]">
         <Flex align="start" gap="2" style={{ minWidth: 0, flex: 1 }}>
           <Flex align="center" justify="center" className="shrink-0 pt-0.5">
             <Checkbox
               size="1"
               checked={isChecked}
+              className={INBOX_LIST_CHECKBOX_CLASSNAME}
               tabIndex={-1}
               onMouseDown={(e) => {
                 e.preventDefault();
@@ -129,16 +114,16 @@ export function ReportListRow({
             />
           </Flex>
 
-          <Flex direction="column" gap="1" style={{ minWidth: 0, flex: 1 }}>
+          <Flex direction="column" gap="0.5" style={{ minWidth: 0, flex: 1 }}>
             <Flex align="start" gapX="2" className="min-w-0">
-              <Flex
-                direction="column"
-                align="center"
-                gap="0.5"
-                className="shrink-0 pt-1"
-              >
-                {(report.source_products ?? []).length > 0 ? (
-                  (report.source_products ?? []).map((sp) => {
+              {(report.source_products ?? []).length > 0 && (
+                <Flex
+                  direction="column"
+                  align="center"
+                  gap="0.5"
+                  className="shrink-0 pt-1"
+                >
+                  {(report.source_products ?? []).map((sp) => {
                     const meta = SOURCE_PRODUCT_META[sp];
                     if (!meta) return null;
                     const { Icon } = meta;
@@ -147,16 +132,9 @@ export function ReportListRow({
                         <Icon size={12} />
                       </span>
                     );
-                  })
-                ) : (
-                  <span
-                    title={`Signal strength: ${strengthLabel}`}
-                    aria-hidden
-                    className="mt-1 inline-block h-1.5 w-1.5 rounded-full"
-                    style={{ backgroundColor: strengthColor }}
-                  />
-                )}
-              </Flex>
+                  })}
+                </Flex>
+              )}
 
               <Flex
                 align="center"
@@ -210,6 +188,6 @@ export function ReportListRow({
           </Text>
         </Flex>
       </Flex>
-    </motion.div>
+    </div>
   );
 }
diff --git a/apps/code/src/renderer/features/inbox/components/list/SignalsToolbar.tsx b/apps/code/src/renderer/features/inbox/components/list/SignalsToolbar.tsx
@@ -128,10 +128,10 @@ export function SignalsToolbar({
 
   const {
     selectedCount,
-    canSuppress,
-    canSnooze,
-    canDelete,
-    canReingest,
+    snoozeDisabledReason,
+    suppressDisabledReason,
+    deleteDisabledReason,
+    reingestDisabledReason,
     isSuppressing,
     isSnoozing,
     isDeleting,
@@ -277,7 +277,7 @@ export function SignalsToolbar({
                   variant="soft"
                   color="gray"
                   className="text-[12px]"
-                  disabled={!canSnooze || isSnoozing}
+                  disabled={snoozeDisabledReason !== null || isSnoozing}
                   onClick={() => void handleSnooze()}
                 >
                   {isSnoozing ? <Spinner size="1" /> : <PauseIcon size={12} />}
@@ -290,7 +290,7 @@ export function SignalsToolbar({
                 variant="soft"
                 color="red"
                 className="text-[12px]"
-                disabled={!canDelete || isDeleting}
+                disabled={deleteDisabledReason !== null || isDeleting}
                 onClick={() => setShowDeleteConfirm(true)}
               >
                 {isDeleting ? <Spinner size="1" /> : <TrashIcon size={12} />}
@@ -302,7 +302,7 @@ export function SignalsToolbar({
                 variant="soft"
                 color="red"
                 className="text-[12px]"
-                disabled={!canSuppress || isSuppressing}
+                disabled={suppressDisabledReason !== null || isSuppressing}
                 onClick={() => setShowSuppressConfirm(true)}
               >
                 {isSuppressing ? (
@@ -319,7 +319,7 @@ export function SignalsToolbar({
                   variant="soft"
                   color="gray"
                   className="text-[12px]"
-                  disabled={!canReingest || isReingesting}
+                  disabled={reingestDisabledReason !== null || isReingesting}
                   onClick={() => void handleReingest()}
                 >
                   {isReingesting ? (
diff --git a/apps/code/src/renderer/features/inbox/hooks/useInboxBulkActions.ts b/apps/code/src/renderer/features/inbox/hooks/useInboxBulkActions.ts
diff --git a/apps/code/src/renderer/features/inbox/utils/inboxConstants.ts b/apps/code/src/renderer/features/inbox/utils/inboxConstants.ts
