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

Twixes · Twixes · commit ae4d475c1d23 · 2026-04-07T22:25:17.000+02:00
Made-with: Cursor
diff --git a/apps/code/src/renderer/components/Checkbox.tsx b/apps/code/src/renderer/components/Checkbox.tsx
@@ -0,0 +1,33 @@
+import { Checkbox as RadixCheckbox } from "@radix-ui/themes";
+import type { ComponentPropsWithoutRef } from "react";
+
+/**
+ * Checkbox with corrected Radix hover/active states.
+ *
+ * Radix draws the unchecked frame with one inset `box-shadow` on `::before` (no CSS border).
+ * Hover strengthens that same stroke; active keeps one stroke and grays the inner fill.
+ * Checked uses accent fills only.
+ */
+const CHECKBOX_CLASSNAME = [
+  "relative",
+  "enabled:active:data-[state=checked]:[&::before]:!bg-[var(--accent-11)]",
+  "enabled:active:data-[state=indeterminate]:[&::before]:!bg-[var(--accent-11)]",
+  "enabled:active:data-[state=unchecked]:[&::before]:!bg-gray-3",
+  "enabled:active:data-[state=unchecked]:[&::before]:!shadow-[inset_0_0_0_1px_var(--gray-9)]",
+  "enabled:data-[state=checked]:[&:hover:not(:active)]:[&::before]:!bg-[var(--accent-10)]",
+  "enabled:data-[state=indeterminate]:[&:hover:not(:active)]:[&::before]:!bg-[var(--accent-10)]",
+  "enabled:data-[state=unchecked]:[&:hover:not(:active)]:[&::before]:!shadow-[inset_0_0_0_1px_var(--gray-10)]",
+].join(" ");
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof RadixCheckbox>;
+
+export function Checkbox({ className, ...props }: CheckboxProps) {
+  return (
+    <RadixCheckbox
+      className={
+        className ? `${CHECKBOX_CLASSNAME} ${className}` : CHECKBOX_CLASSNAME
+      }
+      {...props}
+    />
+  );
+}
diff --git a/apps/code/src/renderer/components/action-selector/OptionRow.tsx b/apps/code/src/renderer/components/action-selector/OptionRow.tsx
@@ -1,4 +1,5 @@
-import { Box, Checkbox, Flex, Text } from "@radix-ui/themes";
+import { Checkbox } from "@components/Checkbox";
+import { Box, Flex, Text } from "@radix-ui/themes";
 import { compactHomePath } from "@utils/path";
 import { isCancelOption, isOtherOption, isSubmitOption } from "./constants";
 import { InlineEditableText } from "./InlineEditableText";
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/editor/components/MarkdownRenderer.tsx b/apps/code/src/renderer/features/editor/components/MarkdownRenderer.tsx
@@ -1,8 +1,9 @@
+import { Checkbox } from "@components/Checkbox";
 import { CodeBlock } from "@components/CodeBlock";
 import { Divider } from "@components/Divider";
 import { HighlightedCode } from "@components/HighlightedCode";
 import { List, ListItem } from "@components/List";
-import { Blockquote, Checkbox, Code, Em, Kbd, Text } from "@radix-ui/themes";
+import { Blockquote, Code, Em, Kbd, Text } from "@radix-ui/themes";
 import { memo, useMemo } from "react";
 import type { Components } from "react-markdown";
 import ReactMarkdown from "react-markdown";
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
@@ -166,8 +166,8 @@ export function ReportListPane({
       {reports.map((report, index) => (
         <ReportListRow
           key={report.id}
-          index={index}
           report={report}
+          index={index}
           isSelected={selectedReportId === report.id}
           isChecked={selectedReportIds.includes(report.id)}
           onClick={() => onSelectReport(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
@@ -1,9 +1,10 @@
+import { Checkbox } from "@components/Checkbox";
 import { SignalReportPriorityBadge } from "@features/inbox/components/utils/SignalReportPriorityBadge";
 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 { EyeIcon } from "@phosphor-icons/react";
-import { Checkbox, Flex, Text, Tooltip } from "@radix-ui/themes";
+import { Flex, Text, Tooltip } from "@radix-ui/themes";
 import type { SignalReport } from "@shared/types";
 import { motion } from "framer-motion";
 import type { KeyboardEvent, MouseEvent } from "react";
@@ -33,19 +34,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,6 +55,14 @@ export function ReportListRow({
     onToggleChecked();
   };
 
+  const rowBgClass = isSelected
+    ? "bg-gray-3"
+    : isChecked
+      ? "bg-gray-2"
+      : report.is_suggested_reviewer
+        ? "bg-blue-2"
+        : "";
+
   return (
     <motion.div
       role="button"
@@ -96,23 +92,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="mt-0.5"
               tabIndex={-1}
               onMouseDown={(e) => {
                 e.preventDefault();
@@ -129,16 +123,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 +141,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"
diff --git a/apps/code/src/renderer/features/inbox/components/list/SignalsToolbar.tsx b/apps/code/src/renderer/features/inbox/components/list/SignalsToolbar.tsx
@@ -1,3 +1,4 @@
+import { Checkbox } from "@components/Checkbox";
 import { useInboxBulkActions } from "@features/inbox/hooks/useInboxBulkActions";
 import { useInboxReportSelectionStore } from "@features/inbox/stores/inboxReportSelectionStore";
 import {
@@ -31,7 +32,6 @@ import {
   AlertDialog,
   Box,
   Button,
-  Checkbox,
   Flex,
   Popover,
   Spinner,
@@ -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
