feat(ui): FLIP animation, poll scroll fix, and accordion UX improvements

- extracts withScrollLock to shared src/app/lib/scroll.ts with try/finally
- adds withFlipAnimation (200ms ease-in-out, reduced-motion fallback)
- replaces instant repo pin/move with FLIP animation via data-repo-group attrs
- preserves scroll position on timed poll refresh in DashboardPage
- refactors accordion: single bordered unit, inline Select/Deselect in header bar,
  loading spinner on collapsed headers, orgId sanitization for DOM IDs
- refactors orgContent closure (removes isAccordion check), Show+fallback pattern
- adds 12 new tests (1573 total, 71 files, typecheck clean)

Author: wgordon17

src/app/components/dashboard/ActionsTab.tsx

@@ -291,7 +291,7 @@ export default function ActionsTab(props: ActionsTabProps) {
             });
 
             return (
-              <div class="bg-base-100">
+              <div class="bg-base-100" data-repo-group={repoGroup.repoFullName}>
                 {/* Repo header */}
                 <div class={`group/repo-header flex items-center bg-base-200/60 border-y border-base-300 hover:bg-base-200 transition-colors duration-300 ${highlightedReposActions().has(repoGroup.repoFullName) ? "animate-reorder-highlight" : ""}`}>
                   <button

src/app/components/dashboard/DashboardPage.tsx

@@ -25,6 +25,7 @@ import { pushNotification } from "../../lib/errors";
 import { getClient, getGraphqlRateLimit } from "../../services/github";
 import { formatCount } from "../../lib/format";
 import { setsEqual } from "../../lib/collections";
+import { withScrollLock } from "../../lib/scroll";
 import { Tooltip } from "../shared/Tooltip";
 
 // ── Shared dashboard store (module-level to survive navigation) ─────────────
@@ -173,13 +174,17 @@ async function pollFetch(): Promise<DashboardData> {
       } else {
         // Phase 1 did NOT fire (cached data existed or subsequent poll).
         // Full atomic replacement — all fields (light + heavy) may have
-        // changed since the last cycle.
-        setDashboardData({
-          issues: data.issues,
-          pullRequests: data.pullRequests,
-          workflowRuns: data.workflowRuns,
-          loading: false,
-          lastRefreshedAt: now,
+        // changed since the last cycle. Preserve scroll position: SolidJS
+        // DOM updates are synchronous within the setter, so save/restore
+        // around it to prevent scroll reset from <For> DOM rebuild.
+        withScrollLock(() => {
+          setDashboardData({
+            issues: data.issues,
+            pullRequests: data.pullRequests,
+            workflowRuns: data.workflowRuns,
+            loading: false,
+            lastRefreshedAt: now,
+          });
         });
       }
       rebuildHotSets(data);

src/app/components/dashboard/IssuesTab.tsx

@@ -352,7 +352,7 @@ export default function IssuesTab(props: IssuesTabProps) {
                 });
 
                 return (
-                  <div class="bg-base-100">
+                  <div class="bg-base-100" data-repo-group={repoGroup.repoFullName}>
                     <div class={`group/repo-header flex items-center bg-base-200/60 border-y border-base-300 hover:bg-base-200 transition-colors duration-300 ${highlightedReposIssues().has(repoGroup.repoFullName) ? "animate-reorder-highlight" : ""}`}>
                       <button
                         onClick={() => toggleExpandedRepo("issues", repoGroup.repoFullName)}

src/app/components/dashboard/PullRequestsTab.tsx

@@ -461,7 +461,7 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
                 });
 
                 return (
-                  <div class="bg-base-100">
+                  <div class="bg-base-100" data-repo-group={repoGroup.repoFullName}>
                     <div class={`group/repo-header flex items-center bg-base-200/60 border-y border-base-300 hover:bg-base-200 transition-colors duration-300 ${highlightedReposPRs().has(repoGroup.repoFullName) ? "animate-reorder-highlight" : ""}`}>
                       <button
                         onClick={() => toggleExpandedRepo("pullRequests", repoGroup.repoFullName)}

src/app/components/onboarding/RepoSelector.tsx

@@ -463,44 +463,17 @@ export default function RepoSelector(props: RepoSelectorProps) {
 
       {/* Per-org repo lists — Index (not For) avoids tearing down every org's
            DOM subtree when a single org's state updates via setOrgStates(prev.map(...)) */}
+      <div class={isAccordion() ? "overflow-hidden rounded-lg border border-base-300 divide-y divide-base-300" : "contents"}>
       <Index each={sortedOrgStates()}>
         {(state) => {
           const visible = createMemo(() => filteredReposForOrg(state()));
           const selectedCount = createMemo(() =>
             visible().filter((r) => isSelected(r.fullName)).length
           );
+          const orgId = createMemo(() => state().org.replace(/[^a-zA-Z0-9-]/g, "-"));
 
           const orgContent = () => (
             <>
-              {/* Per-org bulk selection bar (accordion mode only — in non-accordion, these are in the header) */}
-              <Show when={isAccordion() && !state().loading && !state().error}>
-                <div class="flex justify-end gap-2 border-b border-base-300 px-4 py-1">
-                  <button
-                    type="button"
-                    onClick={() => selectAllInOrg(state())}
-                    disabled={
-                      visible().length === 0 ||
-                      visible().every((r) => isSelected(r.fullName))
-                    }
-                    class="btn btn-ghost btn-xs"
-                  >
-                    Select All
-                  </button>
-                  <span class="text-base-content/30">&middot;</span>
-                  <button
-                    type="button"
-                    onClick={() => deselectAllInOrg(state())}
-                    disabled={
-                      visible().length === 0 ||
-                      visible().every((r) => !isSelected(r.fullName))
-                    }
-                    class="btn btn-ghost btn-xs"
-                  >
-                    Deselect All
-                  </button>
-                </div>
-              </Show>
-
               {/* Loading state for this org */}
               <Show when={state().loading}>
                 <div class="flex justify-center py-6">
@@ -602,7 +575,7 @@ export default function RepoSelector(props: RepoSelectorProps) {
           );
 
           return (
-            <div class="overflow-hidden rounded-lg border border-base-300">
+            <div class={isAccordion() ? "" : "overflow-hidden rounded-lg border border-base-300"}>
               {/* Org header — accordion button when >= 6 orgs, plain header otherwise */}
               <Show
                 when={isAccordion()}
@@ -641,38 +614,74 @@ export default function RepoSelector(props: RepoSelectorProps) {
                   </div>
                 }
               >
-                <button
-                  type="button"
-                  id={`accordion-header-${state().org}`}
-                  class="flex w-full items-center gap-2 border-b border-base-300 bg-base-200 px-4 py-2 text-left"
-                  aria-expanded={expandedOrg() === state().org}
-                  aria-controls={`accordion-panel-${state().org}`}
-                  onClick={() => setUserExpandedOrg(state().org)}
-                >
-                  <ChevronIcon size="md" rotated={expandedOrg() !== state().org} />
-                  <span class="text-sm font-semibold text-base-content flex-1">
-                    {state().org}
-                  </span>
-                  <span class="badge badge-sm badge-ghost">{visible().length} {visible().length === 1 ? "repo" : "repos"}</span>
-                  <Show when={selectedCount() > 0}>
-                    <span class="badge badge-sm badge-ghost">{selectedCount()} selected</span>
+                <div class="flex items-center border-b border-base-300 bg-base-200">
+                  <button
+                    type="button"
+                    id={`accordion-header-${orgId()}`}
+                    class="flex flex-1 items-center gap-2 px-4 py-2 text-left"
+                    aria-expanded={expandedOrg() === state().org}
+                    aria-controls={`accordion-panel-${orgId()}`}
+                    // Always-one-open: clicking the already-expanded header is intentionally a no-op
+                    onClick={() => setUserExpandedOrg(state().org)}
+                  >
+                    <ChevronIcon size="md" rotated={expandedOrg() !== state().org} />
+                    <span class="text-sm font-semibold text-base-content flex-1">
+                      {state().org}
+                    </span>
+                    <Show
+                      when={!state().loading}
+                      fallback={<span class="loading loading-spinner loading-xs" />}
+                    >
+                      <span class="badge badge-sm badge-ghost">{visible().length} {visible().length === 1 ? "repo" : "repos"}</span>
+                      <Show when={selectedCount() > 0}>
+                        <span class="badge badge-sm badge-ghost">{selectedCount()} selected</span>
+                      </Show>
+                    </Show>
+                  </button>
+                  {/* Per-org bulk actions — inline in the header bar when expanded */}
+                  <Show when={expandedOrg() === state().org && !state().loading && !state().error}>
+                    <div class="flex items-center gap-2 pr-3">
+                      <button
+                        type="button"
+                        onClick={() => selectAllInOrg(state())}
+                        disabled={
+                          visible().length === 0 ||
+                          visible().every((r) => isSelected(r.fullName))
+                        }
+                        class="btn btn-ghost btn-xs"
+                      >
+                        Select All
+                      </button>
+                      <span class="text-base-content/30">·</span>
+                      <button
+                        type="button"
+                        onClick={() => deselectAllInOrg(state())}
+                        disabled={
+                          visible().length === 0 ||
+                          visible().every((r) => !isSelected(r.fullName))
+                        }
+                        class="btn btn-ghost btn-xs"
+                      >
+                        Deselect All
+                      </button>
+                    </div>
                   </Show>
-                </button>
+                </div>
               </Show>
 
               {/* Content: wrapped in grid animation for accordion, direct otherwise */}
-              <Show when={!isAccordion()}>
-                {orgContent()}
-              </Show>
-              <Show when={isAccordion()}>
+              <Show
+                when={isAccordion()}
+                fallback={orgContent()}
+              >
                 <div
                   class="accordion-panel grid transition-[grid-template-rows] duration-200"
                   style={{ "grid-template-rows": expandedOrg() === state().org ? "1fr" : "0fr" }}
                 >
                   <div
-                    id={`accordion-panel-${state().org}`}
+                    id={`accordion-panel-${orgId()}`}
                     role="region"
-                    aria-labelledby={`accordion-header-${state().org}`}
+                    aria-labelledby={`accordion-header-${orgId()}`}
                     class="overflow-hidden"
                     inert={expandedOrg() !== state().org}
                   >
@@ -684,6 +693,7 @@ export default function RepoSelector(props: RepoSelectorProps) {
           );
         }}
       </Index>
+      </div>
 
       {/* Upstream Repositories section */}
       <Show when={props.showUpstreamDiscovery}>

src/app/components/shared/RepoLockControls.tsx

@@ -1,18 +1,13 @@
 import { Show, createMemo } from "solid-js";
 import { viewState, lockRepo, unlockRepo, moveLockedRepo, type LockedReposTab } from "../../stores/view";
 import { Tooltip } from "./Tooltip";
+import { withFlipAnimation } from "../../lib/scroll";
 
 interface RepoLockControlsProps {
   tab: LockedReposTab;
   repoFullName: string;
 }
 
-const withScrollLock = (fn: () => void) => {
-  const y = window.scrollY;
-  fn();
-  window.scrollTo(0, y);
-};
-
 export default function RepoLockControls(props: RepoLockControlsProps) {
   const lockInfo = createMemo(() => {
     const list = viewState.lockedRepos[props.tab];
@@ -32,7 +27,7 @@ export default function RepoLockControls(props: RepoLockControlsProps) {
           <Tooltip content="Pin to top">
             <button
               class="btn btn-ghost btn-xs opacity-0 group-hover/repo-header:opacity-100 focus:opacity-100 max-sm:opacity-60 sm:max-lg:opacity-60 transition-opacity"
-              onClick={() => withScrollLock(() => lockRepo(props.tab, props.repoFullName))}
+              onClick={() => withFlipAnimation(() => lockRepo(props.tab, props.repoFullName))}
               aria-label={`Pin ${props.repoFullName} to top of list`}
             >
               {/* Heroicons 20px solid: lock-open */}
@@ -46,7 +41,7 @@ export default function RepoLockControls(props: RepoLockControlsProps) {
         <Tooltip content="Unpin">
           <button
             class="btn btn-ghost btn-xs"
-            onClick={() => withScrollLock(() => unlockRepo(props.tab, props.repoFullName))}
+            onClick={() => withFlipAnimation(() => unlockRepo(props.tab, props.repoFullName))}
             aria-label={`Unpin ${props.repoFullName}`}
           >
             {/* Heroicons 20px solid: lock-closed */}
@@ -58,7 +53,7 @@ export default function RepoLockControls(props: RepoLockControlsProps) {
         <Tooltip content={lockInfo().isFirst ? "Already at top of pinned list" : "Move up"}>
           <button
             class="btn btn-ghost btn-xs"
-            onClick={() => withScrollLock(() => moveLockedRepo(props.tab, props.repoFullName, "up"))}
+            onClick={() => withFlipAnimation(() => moveLockedRepo(props.tab, props.repoFullName, "up"))}
             disabled={lockInfo().isFirst}
             aria-label={`Move ${props.repoFullName} up`}
           >
@@ -71,7 +66,7 @@ export default function RepoLockControls(props: RepoLockControlsProps) {
         <Tooltip content={lockInfo().isLast ? "Already at bottom of pinned list" : "Move down"}>
           <button
             class="btn btn-ghost btn-xs"
-            onClick={() => withScrollLock(() => moveLockedRepo(props.tab, props.repoFullName, "down"))}
+            onClick={() => withFlipAnimation(() => moveLockedRepo(props.tab, props.repoFullName, "down"))}
             disabled={lockInfo().isLast}
             aria-label={`Move ${props.repoFullName} down`}
           >

src/app/lib/scroll.ts

@@ -0,0 +1,55 @@
+/**
+ * Wraps a synchronous function call with scroll position preservation.
+ * SolidJS fine-grained DOM updates complete synchronously within fn(),
+ * so a single synchronous scrollTo is sufficient — no rAF needed.
+ */
+export function withScrollLock(fn: () => void): void {
+  const y = window.scrollY;
+  try { fn(); } finally { window.scrollTo(0, y); }
+}
+
+/**
+ * FLIP animation for reorderable lists. Records positions of elements
+ * matching `[data-repo-group]` before fn(), then animates them to their
+ * new positions after the DOM update.
+ *
+ * Consistent with TrackedTab's FLIP: 200ms ease-in-out, respects
+ * prefers-reduced-motion (falls back to withScrollLock).
+ */
+export function withFlipAnimation(fn: () => void): void {
+  if (typeof window === "undefined") { fn(); return; }
+
+  // Reduced motion: fall back to instant scroll lock
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    withScrollLock(fn);
+    return;
+  }
+
+  // First: record positions of all repo group wrappers
+  const items = document.querySelectorAll<HTMLElement>("[data-repo-group]");
+  const before = new Map<string, DOMRect>();
+  for (const el of items) {
+    const key = el.dataset.repoGroup!;
+    before.set(key, el.getBoundingClientRect());
+  }
+
+  // Execute state change (SolidJS updates DOM synchronously)
+  fn();
+
+  // Last, Invert, Play
+  requestAnimationFrame(() => {
+    const afterItems = document.querySelectorAll<HTMLElement>("[data-repo-group]");
+    for (const el of afterItems) {
+      const key = el.dataset.repoGroup!;
+      const old = before.get(key);
+      if (!old) continue;
+      const now = el.getBoundingClientRect();
+      const dy = old.top - now.top;
+      if (Math.abs(dy) < 1) continue;
+      el.animate(
+        [{ transform: `translateY(${dy}px)` }, { transform: "translateY(0)" }],
+        { duration: 200, easing: "ease-in-out" },
+      );
+    }
+  });
+}

tests/components/DashboardPage.test.tsx

@@ -681,6 +681,36 @@ describe("DashboardPage — onAuthCleared integration", () => {
   });
 });
 
+describe("DashboardPage — scroll preservation on poll refresh", () => {
+  it("preserves scroll position when setDashboardData replaces arrays", async () => {
+    const issues = [makeIssue({ id: 1, title: "Scroll test issue" })];
+    vi.mocked(pollService.fetchAllData).mockResolvedValue({
+      issues,
+      pullRequests: [],
+      workflowRuns: [],
+      errors: [],
+    });
+
+    render(() => <DashboardPage />);
+    await waitFor(() => {
+      screen.getByText("owner/repo");
+    });
+
+    // Simulate user scrolled down
+    document.documentElement.scrollTop = 500;
+    vi.spyOn(window, "scrollTo");
+
+    // Trigger a second poll (subsequent refresh — the path that uses withScrollLock)
+    if (capturedFetchAll) {
+      await capturedFetchAll();
+    }
+
+    expect(window.scrollTo).toHaveBeenCalledWith(0, 500);
+    vi.restoreAllMocks();
+    document.documentElement.scrollTop = 0;
+  });
+});
+
 describe("DashboardPage — onHotData integration", () => {
   it("applies hot poll PR status updates to the store", async () => {
     const testPR = makePullRequest({