feat: add floating scroll-to-top button to authenticated app pages (#758)

[revatikadam0607]

Summary

Closes #758

Adds a floating scroll-to-top button to the authenticated app shell (dashboard, issues,
leaderboard, maintainer console, settings, my-prs, help-inbox).

Implementation notes

The app's authenticated pages scroll inside <main> (not window — the outer layout is
h-screen overflow-hidden), so the button needs to watch that element's scroll position rather
than the window's. I added a small client component, MainScrollArea, that wraps <main>,
tracks its scrollTop, and renders a fixed-position button that fades in after 300px of scroll
and smooth-scrolls back to top on click.

• New file: src/app/(app)/main-scroll-area.tsx
• Changed: src/app/(app)/layout.tsx (use MainScrollArea instead of a plain <main>)

The button is keyboard-reachable (tabIndex toggles with visibility) and has an aria-label
since it's icon-only.

Scope

This covers all pages under the authenticated app shell. The public marketing pages (landing,
docs, terms, privacy) use normal window scrolling and aren't covered here — happy to follow up
with a second, simpler version for those if wanted.

Testing

• npm run dev, verified the button fades in/out at the 300px threshold on Leaderboard and
  Maintainer → Contributors (both have long lists).
• Verified smooth scroll back to top on click.
• Verified keyboard focus only reaches the button while it's visible.
• npx tsc --noEmit and npx eslint pass clean on both changed files.

I've resolved the issue. Kindly review it, and if everything looks good, please consider merging the corresponding PR.
Hi @codersogs-code , could you please review this merged PR for a potential bonus label based on the metrics below? Thanks!

[vercel]

@revatikadam0607 is attempting to deploy a commit to the codersogs-3057's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Soumya-codr]

@revatikadam0607 ur ci and cd are failing please fix it

[revatikadam0607]

@revatikadam0607 ur ci and cd are failing please fix it

Sorry for your inconvenience
Let me check it

[Soumya-codr]

@revatikadam0607 ur ci and cd are failing please fix it

Sorry for your inconvenience Let me check it

no need to say sorry its a part of open source its a normal problem everyone will face at once in a lifetime also please join this discord server https://discord.gg/G7eUETrhk for updates

[revatikadam0607]

@revatikadam0607 ur ci and cd are failing please fix it

Sorry for your inconvenience Let me check it

no need to say sorry its a part of open source its a normal problem everyone will face at once in a lifetime also please join this discord server https://discord.gg/G7eUETrhk for updates

Sure

[Siddhartha-singh01]

Review: feat: add floating scroll-to-top button (#767 / #758)

Thanks @revatikadam0607 the approach is correct for this app shell. Authenticated pages scroll inside <main> under h-screen overflow-hidden, so watching that element (not window) is the right design. Small, focused change (2 files).

Verdict

Request changes mainly for CI / formatting. Feature logic is largely good.

Blocker: CI Format check is failing

Latest check run fails on Prettier:

[warn] src/app/(app)/layout.tsx [warn] src/app/(app)/main-scroll-area.tsx Code style issues found in 2 files. Run Prettier with --write to fix.

(notify-failure is a side effect of that; Vercel red is fork authorize, not app code.)

The layout.tsx hunk is also visibly broken in the diff:

{/* Main Content Area */}
        <MainScrollArea>{children}</MainScrollArea>      </div>

[revatikadam0607]

@Siddhartha-singh01 Now?

[Siddhartha-singh01]

Re-review:

Thanks for the follow-up @revatikadam0607 (3 commits now, including the layout/format cleanups). Responding to your “Now?” feature code looks good, but CI is still red, so this is not merge-ready yet.

Verdict

Still request changes only because Format check is still failing on the latest head (4d4427f).

Typecheck and lint passed on the latest run; Prettier did not.

---

What improved since the last review

1. layout.tsx structure is fixed
   No more jammed MainScrollArea</div> line. Import + usage are clean:

   <MainScrollArea>{children}</MainScrollArea>

[revatikadam0607]

Re-review:

Thanks for the follow-up @revatikadam0607 (3 commits now, including the layout/format cleanups). Responding to your “Now?” feature code looks good, but CI is still red, so this is not merge-ready yet.

Verdict

Still request changes only because Format check is still failing on the latest head (4d4427f).

Typecheck and lint passed on the latest run; Prettier did not.

What improved since the last review

1. layout.tsx structure is fixed
   No more jammed MainScrollArea</div> line. Import + usage are clean:

   <MainScrollArea>{children}</MainScrollArea>

Now ?

[Siddhartha-singh01]

Re-review: floating scroll-to-top (#767 / #758)

Thanks for the updates @revatikadam0607 (4 commits, head 3a6e520).

Verdict

Still request changes feature code is good; CI Format check is still failing.

Typecheck and lint pass. Prettier does not. Not merge-ready until check is green.

What looks good

1. Correct scroll target watches the authenticated <main> (flex-1 overflow-y-auto) under h-screen overflow-hidden, not window. Right design for this shell.
2. Clean layout wiring

   <MainScrollArea>{children}</MainScrollArea>

3. MainScrollArea basics are solid
   • Passive scroll listener + cleanup
   • Fades in after 300px
   • type="button", aria-label="Scroll to top"
   • tabIndex={-1} + pointer-events-none when hidden
4. Scope is right for #758 (app shell only; marketing pages out of scope).

Blocker: Prettier / Format check

Latest CI (30020140512):

[warn] src/app/(app)/layout.tsx
[warn] src/app/(app)/main-scroll-area.tsx
Code style issues found in 2 files. Run Prettier with --write to fix.

Hand edits / small tweaks are not enough. CI only accepts Prettier output.

Please run exactly this, then push:

npm install
npx prettier --write "src/app/(app)/layout.tsx" "src/app/(app)/main-scroll-area.tsx"
npm run format:check

You must see:

All matched files use Prettier code style!