fix(ui): addresses PR review findings for tracked items feature

Author: wgordon17

e2e/smoke.spec.ts

@@ -192,7 +192,9 @@ test("unknown path redirects to dashboard when authenticated", async ({ page })
 // ── Tracked items ─────────────────────────────────────────────────────────────
 
 test("tracked items tab appears when enabled", async ({ page }) => {
-  // Override the GraphQL mock to return an issue
+  // setupAuth FIRST — registers catch-all and default GraphQL handler
+  await setupAuth(page, { enableTracking: true });
+  // Override GraphQL AFTER setupAuth — Playwright matches routes LIFO, so this wins
   await page.route("https://api.github.com/graphql", (route) =>
     route.fulfill({
       status: 200,
@@ -224,11 +226,27 @@ test("tracked items tab appears when enabled", async ({ page }) => {
       },
     })
   );
-  await setupAuth(page, { enableTracking: true });
   await page.goto("/dashboard");
 
   // Verify Tracked tab is visible
   await expect(page.getByRole("tab", { name: /tracked/i })).toBeVisible();
+
+  // Wait for issue data to render, then expand the repo group
+  await page.getByText("testorg/testrepo").click();
+  await expect(page.getByText("Test tracked issue")).toBeVisible();
+
+  // Hover the row's group container to reveal the pin button (opacity-0 → group-hover:opacity-100)
+  const row = page.locator(".group").filter({ hasText: "Test tracked issue" });
+  await row.hover();
+  const pinBtn = page.getByRole("button", { name: /^Pin #42/i });
+  await expect(pinBtn).toBeVisible();
+  await pinBtn.click();
+
+  // Switch to Tracked tab
+  await page.getByRole("tab", { name: /tracked/i }).click();
+
+  // Verify the pinned item appears in the Tracked tab
+  await expect(page.getByText("Test tracked issue")).toBeVisible();
 });
 
 test("tracked items tab hidden when disabled", async ({ page }) => {

src/app/components/dashboard/DashboardPage.tsx

@@ -259,8 +259,8 @@ export default function DashboardPage() {
 
   // Auto-prune tracked items that are closed/merged (absent from is:open results)
   createEffect(() => {
-    // IMPORTANT: Access reactive store fields BEFORE non-reactive guards
-    // so SolidJS registers them as dependencies
+    // IMPORTANT: Access reactive store fields BEFORE early-return guards
+    // so SolidJS registers them as dependencies even when the guard short-circuits
     const issues = dashboardData.issues;
     const prs = dashboardData.pullRequests;
     if (!config.enableTracking || viewState.trackedItems.length === 0 || !hasFetchedFresh()) return;

src/app/components/dashboard/IssuesTab.tsx

@@ -251,6 +251,14 @@ export default function IssuesTab(props: IssuesTabProps) {
     if (config.enableTracking) untrackItem(issue.id, "issue");
   }
 
+  function handleTrack(issue: Issue) {
+    if (trackedIssueIds().has(issue.id)) {
+      untrackItem(issue.id, "issue");
+    } else {
+      trackItem({ id: issue.id, number: issue.number, type: "issue", repoFullName: issue.repoFullName, title: issue.title, addedAt: Date.now() });
+    }
+  }
+
   return (
     <div class="flex flex-col h-full">
       {/* Sort dropdown + filter chips + ignore badge toolbar */}
@@ -415,13 +423,7 @@ export default function IssuesTab(props: IssuesTabProps) {
                                 url={issue.htmlUrl}
                                 labels={issue.labels}
                                 onIgnore={() => handleIgnore(issue)}
-                                onTrack={config.enableTracking ? () => {
-                                  if (trackedIssueIds().has(issue.id)) {
-                                    untrackItem(issue.id, "issue");
-                                  } else {
-                                    trackItem({ id: issue.id, type: "issue", repoFullName: issue.repoFullName, title: issue.title, addedAt: Date.now() });
-                                  }
-                                } : undefined}
+                                onTrack={config.enableTracking ? () => handleTrack(issue) : undefined}
                                 isTracked={config.enableTracking ? trackedIssueIds().has(issue.id) : undefined}
                                 density={config.viewDensity}
                                 commentCount={issue.comments}

src/app/components/dashboard/ItemRow.tsx

@@ -3,6 +3,7 @@ import { isSafeGitHubUrl } from "../../lib/url";
 import { relativeTime, shortRelativeTime, formatCount } from "../../lib/format";
 import { expandEmoji } from "../../lib/emoji";
 import { labelColorClass } from "../../lib/label-colors";
+import { Tooltip } from "../shared/Tooltip";
 
 export interface ItemRowProps {
   repo: string;
@@ -172,43 +173,44 @@ export default function ItemRow(props: ItemRowProps) {
 
       {/* Pin button — visible on hover, always visible when tracked */}
       <Show when={props.onTrack !== undefined}>
-        <button
-          onClick={() => props.onTrack!()}
-          class={`relative z-10 shrink-0 self-center rounded p-1
-            transition-opacity focus:outline-none focus:ring-2 focus:ring-primary
-            ${props.isTracked
-              ? "text-primary opacity-100"
-              : "text-base-content/30 hover:text-primary opacity-0 group-hover:opacity-100 focus:opacity-100"
-            }`}
-          title={props.isTracked ? "Untrack this item" : "Track this item"}
-          aria-label={props.isTracked ? `Unpin #${props.number} ${props.title}` : `Pin #${props.number} ${props.title}`}
-        >
-          <Show
-            when={props.isTracked}
-            fallback={
-              /* Outline bookmark (not tracked) */
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" /></svg>
-            }
+        <Tooltip content={props.isTracked ? "Untrack" : "Track"} class="relative z-10 shrink-0 self-center">
+          <button
+            onClick={() => props.onTrack!()}
+            class={`rounded p-1
+              transition-opacity focus:outline-none focus:ring-2 focus:ring-primary
+              ${props.isTracked
+                ? "text-primary opacity-100"
+                : "text-base-content/30 hover:text-primary opacity-0 group-hover:opacity-100 focus:opacity-100"
+              }`}
+            aria-label={props.isTracked ? `Unpin #${props.number} ${props.title}` : `Pin #${props.number} ${props.title}`}
           >
-            {/* Solid bookmark (tracked) */}
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z" clip-rule="evenodd" /></svg>
-          </Show>
-        </button>
+            <Show
+              when={props.isTracked}
+              fallback={
+                /* Outline bookmark (not tracked) */
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" /></svg>
+              }
+            >
+              {/* Solid bookmark (tracked) */}
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z" clip-rule="evenodd" /></svg>
+            </Show>
+          </button>
+        </Tooltip>
       </Show>
 
       {/* Ignore button — visible on hover */}
       <Show when={props.onIgnore !== undefined}>
-        <button
-          data-ignore-btn
-          onClick={() => props.onIgnore!()}
-          class={`relative z-10 shrink-0 self-center rounded p-1
-            text-base-content/30
-            hover:text-error
-            opacity-0 group-hover:opacity-100 focus:opacity-100
-            transition-opacity focus:outline-none focus:ring-2 focus:ring-error`}
-          title="Ignore this item"
-          aria-label={`Ignore #${props.number} ${props.title}`}
-        >
+        <Tooltip content="Ignore" class="relative z-10 shrink-0 self-center">
+          <button
+            data-ignore-btn
+            onClick={() => props.onIgnore!()}
+            class={`rounded p-1
+              text-base-content/30
+              hover:text-error
+              opacity-0 group-hover:opacity-100 focus:opacity-100
+              transition-opacity focus:outline-none focus:ring-2 focus:ring-error`}
+            aria-label={`Ignore #${props.number} ${props.title}`}
+          >
           {/* Eye-slash icon */}
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -224,7 +226,8 @@ export default function ItemRow(props: ItemRowProps) {
             />
             <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
           </svg>
-        </button>
+          </button>
+        </Tooltip>
       </Show>
     </div>
   );

src/app/components/dashboard/PullRequestsTab.tsx

@@ -359,6 +359,14 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
     if (config.enableTracking) untrackItem(pr.id, "pullRequest");
   }
 
+  function handleTrack(pr: PullRequest) {
+    if (trackedPrIds().has(pr.id)) {
+      untrackItem(pr.id, "pullRequest");
+    } else {
+      trackItem({ id: pr.id, number: pr.number, type: "pullRequest", repoFullName: pr.repoFullName, title: pr.title, addedAt: Date.now() });
+    }
+  }
+
   return (
     <div class="flex flex-col h-full">
       {/* Filter toolbar with SortDropdown */}
@@ -577,13 +585,7 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
                                 labels={pr.labels}
                                 commentCount={pr.enriched !== false ? pr.comments + pr.reviewThreads : undefined}
                                 onIgnore={() => handleIgnore(pr)}
-                                onTrack={config.enableTracking ? () => {
-                                  if (trackedPrIds().has(pr.id)) {
-                                    untrackItem(pr.id, "pullRequest");
-                                  } else {
-                                    trackItem({ id: pr.id, type: "pullRequest", repoFullName: pr.repoFullName, title: pr.title, addedAt: Date.now() });
-                                  }
-                                } : undefined}
+                                onTrack={config.enableTracking ? () => handleTrack(pr) : undefined}
                                 isTracked={config.enableTracking ? trackedPrIds().has(pr.id) : undefined}
                                 density={config.viewDensity}
                                 surfacedByBadge={

src/app/components/dashboard/TrackedTab.tsx

@@ -1,8 +1,9 @@
-import { For, Show, createMemo } from "solid-js";
+import { For, Show, Switch, Match, createMemo } from "solid-js";
 import { config } from "../../stores/config";
 import { viewState, ignoreItem, untrackItem, moveTrackedItem } from "../../stores/view";
 import type { Issue, PullRequest } from "../../services/api";
 import ItemRow from "./ItemRow";
+import { Tooltip } from "../shared/Tooltip";
 
 export interface TrackedTabProps {
   issues: Issue[];
@@ -23,28 +24,26 @@ export default function TrackedTab(props: TrackedTabProps) {
     return { issueMap, prMap };
   });
 
-  const trackedItems = () => viewState.trackedItems;
-
   return (
     <div class="flex flex-col h-full">
       <Show
-        when={trackedItems().length > 0}
+        when={viewState.trackedItems.length > 0}
         fallback={
           <div class="flex items-center justify-center py-16 text-center text-base-content/50 text-sm px-4">
             No tracked items. Pin issues or PRs from the Issues and Pull Requests tabs.
           </div>
         }
       >
         <div class="divide-y divide-base-300">
-          <For each={trackedItems()}>
+          <For each={viewState.trackedItems}>
             {(item, index) => {
               const liveData = () =>
                 item.type === "issue"
                   ? maps().issueMap.get(item.id)
                   : maps().prMap.get(item.id);
 
               const isFirst = () => index() === 0;
-              const isLast = () => index() === trackedItems().length - 1;
+              const isLast = () => index() === viewState.trackedItems.length - 1;
 
               return (
                 <div class="flex items-center gap-1">
@@ -80,27 +79,30 @@ export default function TrackedTab(props: TrackedTabProps) {
                               <span class="font-medium text-sm text-base-content truncate">
                                 {item.title}
                               </span>
-                              <Show when={item.type === "issue"}>
-                                <span class="badge badge-outline badge-sm badge-info">Issue</span>
-                              </Show>
-                              <Show when={item.type === "pullRequest"}>
-                                <span class="badge badge-outline badge-sm badge-success">PR</span>
-                              </Show>
+                              <Switch>
+                                <Match when={item.type === "issue"}>
+                                  <span class="badge badge-outline badge-sm badge-info">Issue</span>
+                                </Match>
+                                <Match when={item.type === "pullRequest"}>
+                                  <span class="badge badge-outline badge-sm badge-success">PR</span>
+                                </Match>
+                              </Switch>
                             </div>
                             <div class="text-xs text-base-content/60 mt-0.5">
                               {item.repoFullName}{" "}
                               <span class="text-base-content/40">(not in current data)</span>
                             </div>
                           </div>
-                          <button
-                            class="relative z-10 shrink-0 self-center rounded p-1 text-primary transition-opacity focus:outline-none focus:ring-2 focus:ring-primary"
-                            aria-label={`Unpin ${item.title}`}
-                            title="Untrack this item"
-                            onClick={() => untrackItem(item.id, item.type)}
-                          >
+                          <Tooltip content="Untrack this item">
+                            <button
+                              class="relative z-10 shrink-0 self-center rounded p-1 text-primary transition-opacity focus:outline-none focus:ring-2 focus:ring-primary"
+                              aria-label={`Unpin #${item.number} ${item.title}`}
+                              onClick={() => untrackItem(item.id, item.type)}
+                            >
                             {/* Solid bookmark */}
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z" clip-rule="evenodd" /></svg>
-                          </button>
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z" clip-rule="evenodd" /></svg>
+                            </button>
+                          </Tooltip>
                         </div>
                       }
                     >
@@ -130,12 +132,14 @@ export default function TrackedTab(props: TrackedTabProps) {
                           }}
                           density={config.viewDensity}
                         >
-                          <Show when={item.type === "issue"}>
-                            <span class="badge badge-outline badge-sm badge-info">Issue</span>
-                          </Show>
-                          <Show when={item.type === "pullRequest"}>
-                            <span class="badge badge-outline badge-sm badge-success">PR</span>
-                          </Show>
+                          <Switch>
+                            <Match when={item.type === "issue"}>
+                              <span class="badge badge-outline badge-sm badge-info">Issue</span>
+                            </Match>
+                            <Match when={item.type === "pullRequest"}>
+                              <span class="badge badge-outline badge-sm badge-success">PR</span>
+                            </Match>
+                          </Switch>
                         </ItemRow>
                       )}
                     </Show>

src/app/components/shared/Tooltip.tsx

@@ -0,0 +1,70 @@
+import { createMemo, createSignal, onCleanup } from "solid-js";
+import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip";
+import type { JSX } from "solid-js";
+
+// SECURITY: tooltip content must be JSX children, never raw HTML
+
+const TOOLTIP_CONTENT_CLASS = "z-50 max-w-xs rounded bg-neutral px-2 py-1 text-xs text-neutral-content shadow-lg";
+
+interface TooltipProps {
+  content: string;
+  placement?: "top" | "bottom" | "left" | "right";
+  focusable?: boolean;
+  class?: string;
+  children: JSX.Element;
+}
+
+export function Tooltip(props: TooltipProps) {
+  const [isHovered, setIsHovered] = createSignal(false);
+  const [isFocused, setIsFocused] = createSignal(false);
+  const open = createMemo(() => isHovered() || isFocused());
+
+  // openDelay is ignored in controlled mode; implement the delay manually
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined;
+  let closeTimer: ReturnType<typeof setTimeout> | undefined;
+  onCleanup(() => {
+    clearTimeout(hoverTimer);
+    clearTimeout(closeTimer);
+  });
+
+  return (
+    <KobalteTooltip
+      open={open()}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          clearTimeout(hoverTimer);
+          clearTimeout(closeTimer);
+          setIsHovered(false);
+          setIsFocused(false);
+        }
+      }}
+      placement={props.placement ?? "top"}
+      gutter={4}
+    >
+      <KobalteTooltip.Trigger
+        as="span"
+        class={`inline-flex items-center${props.class ? ` ${props.class}` : ""}`}
+        tabindex={props.focusable ? "0" : undefined}
+        onPointerEnter={() => {
+          clearTimeout(hoverTimer);
+          clearTimeout(closeTimer);
+          hoverTimer = setTimeout(() => setIsHovered(true), 300);
+        }}
+        onPointerLeave={() => {
+          clearTimeout(hoverTimer);
+          closeTimer = setTimeout(() => setIsHovered(false), 100);
+        }}
+        onFocusIn={() => setIsFocused(true)}
+        onFocusOut={() => setIsFocused(false)}
+      >
+        {props.children}
+      </KobalteTooltip.Trigger>
+      <KobalteTooltip.Portal>
+        <KobalteTooltip.Content class={TOOLTIP_CONTENT_CLASS}>
+          <KobalteTooltip.Arrow />
+          {props.content}
+        </KobalteTooltip.Content>
+      </KobalteTooltip.Portal>
+    </KobalteTooltip>
+  );
+}

src/app/stores/view.ts

@@ -9,6 +9,7 @@ const TRACKED_ITEMS_CAP = 200;
 
 export const TrackedItemSchema = z.object({
   id: z.number(),
+  number: z.number(),
   type: z.enum(["issue", "pullRequest"]),
   repoFullName: z.string(),
   title: z.string(),