feat(ui): adds repo links, scrollbar, dep filter, flash fix

- adds external-link icon on repo group headers linking to GitHub per tab
- moves scrollbar to viewport edge via page scroll with sticky tabs
- adds depDashboard filter with toggle pill, hidden by default
- fixes detectReorderedRepos false flash on repo add/remove
- extracts ExternalLinkIcon shared component
- preserves depDashboard toggle across resetAllTabFilters
- uses schema defaults in resetTabFilter instead of hardcoded all

Author: wgordon17

src/app/components/dashboard/ActionsTab.tsx

@@ -11,6 +11,7 @@ import type { FilterChipGroupDef } from "../shared/FilterChips";
 import ChevronIcon from "../shared/ChevronIcon";
 import ExpandCollapseButtons from "../shared/ExpandCollapseButtons";
 import RepoLockControls from "../shared/RepoLockControls";
+import ExternalLinkIcon from "../shared/ExternalLinkIcon";
 import { orderRepoGroups } from "../../lib/grouping";
 import { createReorderHighlight } from "../../lib/reorderHighlight";
 import { createFlashDetection } from "../../lib/flashDetection";
@@ -319,6 +320,16 @@ export default function ActionsTab(props: ActionsTabProps) {
                       </span>
                     </Show>
                   </button>
+                  <a
+                    href={`https://github.com/${repoGroup.repoFullName}/actions`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="opacity-0 group-hover/repo-header:opacity-100 focus:opacity-100 transition-opacity text-base-content/40 hover:text-primary px-1"
+                    title={`Open ${repoGroup.repoFullName} actions on GitHub`}
+                    aria-label={`Open ${repoGroup.repoFullName} actions on GitHub`}
+                  >
+                    <ExternalLinkIcon />
+                  </a>
                   <RepoLockControls tab="actions" repoFullName={repoGroup.repoFullName} />
                 </div>
                 <Show when={!isExpanded() && peekUpdates().get(repoGroup.repoFullName)}>

src/app/components/dashboard/DashboardPage.tsx

@@ -342,22 +342,23 @@ export default function DashboardPage() {
       <Header />
 
       {/* Offset for fixed header */}
-      <div class="pt-14 flex flex-col h-screen">
-        {/* Single constrained panel: tabs + filters + content */}
-        <div class="max-w-6xl mx-auto w-full flex flex-col flex-1 min-h-0 bg-base-100 shadow-lg border-x border-base-300">
-          <TabBar
-            activeTab={activeTab()}
-            onTabChange={handleTabChange}
-            counts={tabCounts()}
-          />
-
-          <FilterBar
-            isRefreshing={_coordinator()?.isRefreshing() ?? dashboardData.loading}
-            lastRefreshedAt={_coordinator()?.lastRefreshAt() ?? dashboardData.lastRefreshedAt}
-            onRefresh={() => _coordinator()?.manualRefresh()}
-          />
-
-          <main class="flex-1 overflow-auto">
+      <div class="pt-14 min-h-[calc(100vh-3.5rem)] flex flex-col">
+        <div class="max-w-6xl mx-auto w-full bg-base-100 shadow-lg border-x border-base-300 flex-1">
+          <div class="sticky top-14 z-40 bg-base-100">
+            <TabBar
+              activeTab={activeTab()}
+              onTabChange={handleTabChange}
+              counts={tabCounts()}
+            />
+
+            <FilterBar
+              isRefreshing={_coordinator()?.isRefreshing() ?? dashboardData.loading}
+              lastRefreshedAt={_coordinator()?.lastRefreshAt() ?? dashboardData.lastRefreshedAt}
+              onRefresh={() => _coordinator()?.manualRefresh()}
+            />
+          </div>
+
+          <main class="pb-12">
             <Switch>
               <Match when={activeTab() === "issues"}>
                 <IssuesTab
@@ -393,7 +394,7 @@ export default function DashboardPage() {
           </main>
         </div>
 
-        <footer class="border-t border-base-300 bg-base-100 py-3 text-xs text-base-content/50 shrink-0">
+        <footer class="fixed bottom-0 left-0 right-0 z-30 border-t border-base-300 bg-base-100 py-3 text-xs text-base-content/50">
           <div class="max-w-6xl mx-auto w-full px-4 grid grid-cols-3 items-center">
             <div />
             <div class="flex items-center justify-center gap-3">

src/app/components/dashboard/IssuesTab.tsx

@@ -18,6 +18,7 @@ import { deriveInvolvementRoles } from "../../lib/format";
 import { groupByRepo, computePageLayout, slicePageGroups, orderRepoGroups } from "../../lib/grouping";
 import { createReorderHighlight } from "../../lib/reorderHighlight";
 import RepoLockControls from "../shared/RepoLockControls";
+import ExternalLinkIcon from "../shared/ExternalLinkIcon";
 
 export interface IssuesTabProps {
   issues: Issue[];
@@ -114,6 +115,8 @@ export default function IssuesTab(props: IssuesTabProps) {
         if (tabFilter.comments === "none" && issue.comments > 0) return false;
       }
 
+      if (tabFilter.depDashboard === "hide" && issue.title === "Dependency Dashboard") return false;
+
       if (tabFilter.user !== "all") {
         const validUser = !props.allUsers || props.allUsers.some(u => u.login === tabFilter.user);
         if (validUser) {
@@ -212,7 +215,7 @@ export default function IssuesTab(props: IssuesTabProps) {
   return (
     <div class="flex flex-col h-full">
       {/* Sort dropdown + filter chips + ignore badge toolbar */}
-      <div class="flex items-center gap-3 px-4 py-2 border-b border-base-300 bg-base-100">
+      <div class="flex flex-wrap items-center gap-3 px-4 py-2 border-b border-base-300 bg-base-100">
         <SortDropdown
           options={sortOptions}
           value={sortPref().field}
@@ -235,6 +238,18 @@ export default function IssuesTab(props: IssuesTabProps) {
             setPage(0);
           }}
         />
+        <button
+          onClick={() => {
+            const next = viewState.tabFilters.issues.depDashboard === "show" ? "hide" : "show";
+            setTabFilter("issues", "depDashboard", next);
+            setPage(0);
+          }}
+          class={`btn btn-xs rounded-full ${viewState.tabFilters.issues.depDashboard === "show" ? "btn-primary" : "btn-ghost text-base-content/50"}`}
+          aria-pressed={viewState.tabFilters.issues.depDashboard === "show"}
+          title="Toggle visibility of Dependency Dashboard issues"
+        >
+          Show Dep Dashboard
+        </button>
         <div class="flex-1" />
         <ExpandCollapseButtons
           onExpandAll={() => setAllExpanded("issues", repoGroups().map((g) => g.repoFullName), true)}
@@ -323,6 +338,16 @@ export default function IssuesTab(props: IssuesTabProps) {
                           </span>
                         </Show>
                       </button>
+                      <a
+                        href={`https://github.com/${repoGroup.repoFullName}/issues`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="opacity-0 group-hover/repo-header:opacity-100 focus:opacity-100 transition-opacity text-base-content/40 hover:text-primary px-1"
+                        title={`Open ${repoGroup.repoFullName} issues on GitHub`}
+                        aria-label={`Open ${repoGroup.repoFullName} issues on GitHub`}
+                      >
+                        <ExternalLinkIcon />
+                      </a>
                       <RepoLockControls tab="issues" repoFullName={repoGroup.repoFullName} />
                     </div>
                     <Show when={isExpanded()}>

src/app/components/dashboard/PullRequestsTab.tsx

@@ -22,6 +22,7 @@ import { groupByRepo, computePageLayout, slicePageGroups, orderRepoGroups } from
 import { createReorderHighlight } from "../../lib/reorderHighlight";
 import { createFlashDetection } from "../../lib/flashDetection";
 import RepoLockControls from "../shared/RepoLockControls";
+import ExternalLinkIcon from "../shared/ExternalLinkIcon";
 
 export interface PullRequestsTabProps {
   pullRequests: PullRequest[];
@@ -478,6 +479,16 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
                           </span>
                         </Show>
                       </button>
+                      <a
+                        href={`https://github.com/${repoGroup.repoFullName}/pulls`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="opacity-0 group-hover/repo-header:opacity-100 focus:opacity-100 transition-opacity text-base-content/40 hover:text-primary px-1"
+                        title={`Open ${repoGroup.repoFullName} pull requests on GitHub`}
+                        aria-label={`Open ${repoGroup.repoFullName} pull requests on GitHub`}
+                      >
+                        <ExternalLinkIcon />
+                      </a>
                       <RepoLockControls tab="pullRequests" repoFullName={repoGroup.repoFullName} />
                     </div>
                     <Show when={!isExpanded() && peekUpdates().get(repoGroup.repoFullName)}>

src/app/components/shared/ExternalLinkIcon.tsx

@@ -0,0 +1,22 @@
+export default function ExternalLinkIcon(props: { class?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      class={props.class ?? "h-3.5 w-3.5"}
+      aria-hidden="true"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z"
+        clip-rule="evenodd"
+      />
+      <path
+        fill-rule="evenodd"
+        d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+}

src/app/lib/grouping.ts

@@ -76,12 +76,19 @@ export function detectReorderedRepos(
   previousOrder: string[],
   currentOrder: string[]
 ): Set<string> {
+  // Filter both lists to only repos present in both — ignoring additions/removals
+  // so that inserting or removing a repo doesn't flag everything below it as "moved".
+  const currentSet = new Set(currentOrder);
+  const prevCommon = previousOrder.filter((r) => currentSet.has(r));
+  const prevSet = new Set(previousOrder);
+  const curCommon = currentOrder.filter((r) => prevSet.has(r));
+
   const moved = new Set<string>();
-  const prevIndex = new Map(previousOrder.map((name, i) => [name, i]));
-  for (let i = 0; i < currentOrder.length; i++) {
-    const prev = prevIndex.get(currentOrder[i]);
+  const prevIndex = new Map(prevCommon.map((name, i) => [name, i]));
+  for (let i = 0; i < curCommon.length; i++) {
+    const prev = prevIndex.get(curCommon[i]);
     if (prev !== undefined && prev !== i) {
-      moved.add(currentOrder[i]);
+      moved.add(curCommon[i]);
     }
   }
   return moved;

src/app/stores/view.ts

@@ -8,6 +8,7 @@ const IssueFiltersSchema = z.object({
   role: z.enum(["all", "author", "assignee"]).default("all"),
   comments: z.enum(["all", "has", "none"]).default("all"),
   user: z.enum(["all"]).or(z.string()).default("all"),
+  depDashboard: z.enum(["hide", "show"]).default("hide"),
 });
 
 const PullRequestFiltersSchema = z.object({
@@ -62,11 +63,11 @@ export const ViewStateSchema = z.object({
     })
     .default({ org: null, repo: null }),
   tabFilters: z.object({
-    issues: IssueFiltersSchema.default({ role: "all", comments: "all", user: "all" }),
+    issues: IssueFiltersSchema.default({ role: "all", comments: "all", user: "all", depDashboard: "hide" }),
     pullRequests: PullRequestFiltersSchema.default({ role: "all", reviewDecision: "all", draft: "all", checkStatus: "all", sizeCategory: "all", user: "all" }),
     actions: ActionsFiltersSchema.default({ conclusion: "all", event: "all" }),
   }).default({
-    issues: { role: "all", comments: "all", user: "all" },
+    issues: { role: "all", comments: "all", user: "all", depDashboard: "hide" },
     pullRequests: { role: "all", reviewDecision: "all", draft: "all", checkStatus: "all", sizeCategory: "all", user: "all" },
     actions: { conclusion: "all", event: "all" },
   }),
@@ -120,7 +121,7 @@ export function resetViewState(): void {
     ignoredItems: [],
     globalFilter: { org: null, repo: null },
     tabFilters: {
-      issues: { role: "all", comments: "all", user: "all" },
+      issues: { role: "all", comments: "all", user: "all", depDashboard: "hide" },
       pullRequests: { role: "all", reviewDecision: "all", draft: "all", checkStatus: "all", sizeCategory: "all", user: "all" },
       actions: { conclusion: "all", event: "all" },
     },
@@ -198,13 +199,20 @@ export function setTabFilter<T extends keyof TabFilterField>(
   );
 }
 
+const tabFilterDefaults: Record<string, Record<string, string>> = {
+  issues: IssueFiltersSchema.parse({}) as Record<string, string>,
+  pullRequests: PullRequestFiltersSchema.parse({}) as Record<string, string>,
+  actions: ActionsFiltersSchema.parse({}) as Record<string, string>,
+};
+
 export function resetTabFilter<T extends keyof TabFilterField>(
   tab: T,
   field: TabFilterField[T]
 ): void {
+  const defaultValue = tabFilterDefaults[tab]?.[field as string] ?? "all";
   setViewState(
     produce((draft) => {
-      (draft.tabFilters[tab] as Record<string, string>)[field as string] = "all";
+      (draft.tabFilters[tab] as Record<string, string>)[field as string] = defaultValue;
     })
   );
 }
@@ -215,7 +223,9 @@ export function resetAllTabFilters(
   setViewState(
     produce((draft) => {
       if (tab === "issues") {
+        const depDashboard = draft.tabFilters.issues.depDashboard;
         draft.tabFilters.issues = IssueFiltersSchema.parse({});
+        draft.tabFilters.issues.depDashboard = depDashboard;
       } else if (tab === "pullRequests") {
         draft.tabFilters.pullRequests = PullRequestFiltersSchema.parse({});
       } else {

tests/components/IssuesTab.test.tsx

@@ -590,4 +590,48 @@ describe("IssuesTab", () => {
     screen.getByText("org/repo-b");
     screen.getByText("Repo B issue 0");
   });
+
+  it("hides Dependency Dashboard issues by default", () => {
+    const issues = [
+      makeIssue({ id: 1, title: "Dependency Dashboard" }),
+      makeIssue({ id: 2, title: "Normal issue" }),
+    ];
+    setAllExpanded("issues", ["owner/repo"], true);
+    render(() => <IssuesTab issues={issues} userLogin="" />);
+    expect(screen.queryByText("Dependency Dashboard")).toBeNull();
+    screen.getByText("Normal issue");
+  });
+
+  it("shows Dependency Dashboard issues when toggle is active", () => {
+    const issues = [
+      makeIssue({ id: 1, title: "Dependency Dashboard" }),
+      makeIssue({ id: 2, title: "Normal issue" }),
+    ];
+    viewStore.setTabFilter("issues", "depDashboard", "show");
+    setAllExpanded("issues", ["owner/repo"], true);
+    render(() => <IssuesTab issues={issues} userLogin="" />);
+    screen.getByText("Dependency Dashboard");
+    screen.getByText("Normal issue");
+  });
+
+  it("toggles Dependency Dashboard visibility via pill button", async () => {
+    const user = userEvent.setup();
+    const issues = [
+      makeIssue({ id: 1, title: "Dependency Dashboard" }),
+      makeIssue({ id: 2, title: "Normal issue" }),
+    ];
+    setAllExpanded("issues", ["owner/repo"], true);
+    render(() => <IssuesTab issues={issues} userLogin="" />);
+
+    // Hidden by default
+    expect(screen.queryByText("Dependency Dashboard")).toBeNull();
+
+    // Click toggle pill to show
+    await user.click(screen.getByText("Show Dep Dashboard"));
+    screen.getByText("Dependency Dashboard");
+
+    // Click again to hide
+    await user.click(screen.getByText("Show Dep Dashboard"));
+    expect(screen.queryByText("Dependency Dashboard")).toBeNull();
+  });
 });

tests/lib/grouping-lock.test.ts

@@ -60,10 +60,17 @@ describe("detectReorderedRepos", () => {
     expect(detectReorderedRepos(prev, curr)).toEqual(new Set());
   });
 
-  it("ignores removed repos", () => {
-    const prev = ["org/a", "org/b"];
-    const curr = ["org/b"];
-    // org/b was at index 1, now at index 0 -> moved
-    expect(detectReorderedRepos(prev, curr)).toEqual(new Set(["org/b"]));
+  it("does not flash remaining repos when a repo is removed", () => {
+    const prev = ["org/a", "org/b", "org/c"];
+    const curr = ["org/b", "org/c"];
+    // org/a removed — org/b and org/c kept same relative order
+    expect(detectReorderedRepos(prev, curr)).toEqual(new Set());
+  });
+
+  it("detects reorder even when a repo is simultaneously removed", () => {
+    const prev = ["org/a", "org/b", "org/c"];
+    const curr = ["org/c", "org/b"];
+    // org/a removed, and org/b + org/c swapped relative order
+    expect(detectReorderedRepos(prev, curr)).toEqual(new Set(["org/b", "org/c"]));
   });
 });

tests/stores/view.test.ts

@@ -8,6 +8,9 @@ import {
   unignoreItem,
   setSortPreference,
   setGlobalFilter,
+  setTabFilter,
+  resetTabFilter,
+  resetAllTabFilters,
   initViewPersistence,
   ViewStateSchema,
   toggleExpandedRepo,
@@ -306,3 +309,22 @@ describe("resetViewState", () => {
     expect("org/repo-d" in viewState.expandedRepos.actions).toBe(false);
   });
 });
+
+describe("depDashboard filter reset", () => {
+  beforeEach(() => resetViewState());
+
+  it("resetTabFilter resets depDashboard to 'hide' (not 'all')", () => {
+    setTabFilter("issues", "depDashboard", "show");
+    expect(viewState.tabFilters.issues.depDashboard).toBe("show");
+    resetTabFilter("issues", "depDashboard");
+    expect(viewState.tabFilters.issues.depDashboard).toBe("hide");
+  });
+
+  it("resetAllTabFilters preserves depDashboard value", () => {
+    setTabFilter("issues", "depDashboard", "show");
+    setTabFilter("issues", "role", "author");
+    resetAllTabFilters("issues");
+    expect(viewState.tabFilters.issues.role).toBe("all");
+    expect(viewState.tabFilters.issues.depDashboard).toBe("show");
+  });
+});