[#2542] Add scroll button component and implement on views by FisherSkyi · Pull Request #2556 · reposense/RepoSense

FisherSkyi · 2026-03-10T05:39:44Z

Proposed commit message

Add roll back to top button

Currently, users have no quick way to navigate back to the top of the
page after scrolling down.

Let's add a floating button that scrolls the user back to the top of
the page on click.

Other information

N/A

Copilot

Pull request overview

Adds a “scroll back to top” affordance to the report UI by introducing a reusable scroll-to-top button and wiring it into the main report panes.

Changes:

Added a new c-scroll-top-button Vue component that shows/hides based on a scroll container’s scroll position and scrolls back to top on click.
Integrated the button into the summary pane and the right-side tab views (authorship + global file browser).
Registered the Font Awesome arrow-up icon and added Cypress coverage for the new button behavior.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
frontend/src/views/c-summary.vue	Renders the scroll-to-top button for the summary pane (`#summary-wrapper`).
frontend/src/views/c-scroll-top-button.vue	New scroll-to-top button component (scroll listener + UI + styling).
frontend/src/views/c-global-file-browser.vue	Renders the scroll-to-top button for the right tab pane (`#tabs-wrapper`).
frontend/src/views/c-authorship.vue	Renders the scroll-to-top button for the right tab pane (`#tabs-wrapper`).
frontend/src/utils/load-font-awesome-icons.ts	Adds `faArrowUp` to the Font Awesome library.
frontend/cypress/tests/globalBrowserView/globalBrowserView_scrollButton.cy.js	Cypress coverage for scroll-to-top button in global file browser view.
frontend/cypress/tests/chartView/chartView_scrollButton.cy.js	Cypress coverage for scroll-to-top button in the summary/chart view.

FisherSkyi · 2026-03-30T08:32:34Z

Update on copilot's review:

Make c-scroll-top-button presentational only.
In frontend/src/components/c-scroll-top-button.vue:
- remove scrollContainerId, mounted, beforeUnmount, handleScroll, topFunction
- add a boolean prop like showBackToTop
- emit one event like scroll-to-top on click
- change the root element from a plain div to button type="button"
- replace the hard-coded id with a class such as .go-back-button
Move scroll ownership to frontend/src/views/c-home.vue.
c-home already owns both real scroll containers:
- #summary-wrapper
- #tabs-wrapper
Add:
- showSummaryBackToTop
- showTabsBackToTop
- Or to prevent duplicate method, we may use
  c-scroll-top-button(@scroll-to-top="scrollPaneToTop('summary')")
  c-scroll-top-button(@scroll-to-top="scrollPaneToTop('tabs')")
  Then in home.vue:
```
methods: {
  scrollPaneToTop(pane: 'summary' | 'tabs') {
    const el = pane === 'summary'
      ? this.$refs.summaryWrapper
      : this.$refs.tabWrapper;
    (el as HTMLElement | undefined)?.scrollTo({ top: 0, behavior: 'smooth' });
  },
}
```
- scroll handlers for each wrapper
- click handlers that scroll the corresponding wrapper to top
Render the two button instances in c-home.vue, one per pane.
Example idea:
- one inside #summary-wrapper, bound to showSummaryBackToTop and scrollSummaryToTop
- one inside #tabs-wrapper, bound to showTabsBackToTop and scrollTabsToTop
Remove c-scroll-top-button usage from child views.
Remove it from:
- frontend/src/views/c-summary.vue
- frontend/src/views/c-authorship.vue
- frontend/src/views/c-global-file-browser.vue
Update Cypress selectors.
Since the button should no longer use #go-back-button, change tests to use something like:
- #summary-wrapper .go-back-button
- #tabs-wrapper .go-back-button

Rationale:

Keeps the child reusable.
c-scroll-top-button becomes a generic control that only says “user clicked me” and “show/hide me”.
Avoids container binding.
No scrollContainerId and document.getElementById(...) inside the reusable child.
Makes event handling unambiguous.
Both buttons can emit the same scroll-to-top event, because each instance is wired separately in c-home.vue.

…-back

github-actions · 2026-03-30T09:39:29Z

The following links are for previewing this pull request:

Dashboard Preview: https://dashboard-2556-pr-reposense-reposense.surge.sh
Docs Preview: https://docs-2556-pr-reposense-reposense.surge.sh

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Copilot · 2026-04-02T13:57:15Z

+  padding: 0;
+  place-content: center;
+  place-items: center;
+  position: sticky;


Using position: sticky here keeps the button in normal document flow. Because the button is rendered after all content in each scroll container, it won’t be reachable/visible until the user scrolls near the bottom of the container (defeating the purpose of a “back to top” control for long reports). Consider positioning it out of flow (e.g., position: absolute within a position: relative scroll container, or position: fixed with appropriate container scoping) so it can appear whenever showBackToTop becomes true.

Suggested change

position: sticky;

position: fixed;

From a practical perspective fixed will cause the left and right buttons overlap as they are both positioned relative to the viewpoint. But help and suggestions are welcome here as I don't really understand the mechanism of css layout.

Regarding this issue, yes, position: fixed won't work here. position: sticky does technically work (the button sticks to the bottom of the visible scroll area since it's the last child in the container), but it stays in document flow and can cause layout shifts.

The cleaner fix might be position: absolute scoped to each panel:

Add position: relative to #summary-wrapper in style.scss).

Change the button to position: absolute; bottom: 20px; right: 20px and remove margin-left: auto.

Make sure c-scroll-top-buttonin the tabs panel out of .tab-pane/.tab-content and make it a direct child of #tabs-wrapper, so it floats over the panel content rather than scrolling with it. The summary panel button is already placed correctly.
This keeps each button scoped to its own panel, out of document flow, and visible at any scroll depth regardless of content length.

Can try this out though and see if it works!

agree with ashmita here !

The behavior with proposed fix: the button will scroll along with the segment, which is not desirable. Right now I think we can keep the sticky.

ashmitahaldar

Overall great work! Just some questions and inputs on the existing PR comments.

ashmitahaldar · 2026-04-09T06:30:43Z

+  padding: 0;
+  place-content: center;
+  place-items: center;
+  position: sticky;


Regarding this issue, yes, position: fixed won't work here. position: sticky does technically work (the button sticks to the bottom of the visible scroll area since it's the last child in the container), but it stays in document flow and can cause layout shifts.

The cleaner fix might be position: absolute scoped to each panel:

Add position: relative to #summary-wrapper in style.scss).

Change the button to position: absolute; bottom: 20px; right: 20px and remove margin-left: auto.

Make sure c-scroll-top-buttonin the tabs panel out of .tab-pane/.tab-content and make it a direct child of #tabs-wrapper, so it floats over the panel content rather than scrolling with it. The summary panel button is already placed correctly.
This keeps each button scoped to its own panel, out of document flow, and visible at any scroll depth regardless of content length.

Can try this out though and see if it works!

ashmitahaldar · 2026-04-09T06:34:14Z

+  });
+
+  it('shows the button when scroll more than 200 pixels', () => {
+    cy.get('#tabs-wrapper').scrollTo(0, 300).trigger('scroll');


What does this .trigger('scroll') do? Why does test 2 and 3 use it but not test 1? Just a bit confused haha, would be good to understand.

trigger will emit the event "scroll".

scroll is an event. It's handler is in c-home.vue line 48 #summary-wrapper(ref="summaryWrapper", @scroll="handleSummaryScroll")

trigger is needed, as cy.scrollTo() changes the element's scrollTop property in the DOM. But in test environments (on CI/CD env specifically), the native scroll event does not fire automatically

@FisherSkyi Thanks for clarifying! Do you need to include it then in the other tests or no need?

jonasongg

lgtm other than the small comment!

jonasongg · 2026-04-09T08:27:37Z

+  padding: 0;
+  place-content: center;
+  place-items: center;
+  position: sticky;


agree with ashmita here !

ashmitahaldar

Generally LGTM! Would just like you to check if .trigger() is needed on other tests, otherwise looks good to go.

FisherSkyi · 2026-04-12T03:17:06Z

Generally LGTM! Would just like you to check if .trigger() is needed on other tests, otherwise looks good to go.

I double checked and it seems scrollTo along is enough. Chaining with .trigger() would emit scroll event twice, which is not desirable.

Also while exploring I found another separate issue #2574 but it should be addressed in separate pr.

CYX22222003

LGTM!

CYX22222003 · 2026-04-13T04:24:32Z

+    scrollTabsToTop(): void {
+      const el = this.$refs.tabWrapper as HTMLElement | undefined;
+      el?.scrollTo({ top: 0, behavior: 'smooth' });
+    },


Scrolling logic appears to be sound.

…2556)" This reverts commit 5f50615.

github-actions · 2026-04-16T05:43:34Z

The following links are for previewing this pull request:

Dashboard Preview: https://dashboard-2556-pr-reposense-reposense.surge.sh
Docs Preview: https://docs-2556-pr-reposense-reposense.surge.sh

FisherSkyi added 7 commits March 9, 2026 20:01

Feat: scroll button

f1934d7

Fix: container logic and css

41b32dd

Merge with upstream

4c6f6e7

Refactor: create reusable composable scroll button

85c51a8

Feat: add scroll button to global search panel

20c87b6

Feat: add scroll button to authorship

3df3dad

Fix

fa3e02f

FisherSkyi changed the title ~~Feat: scroll button~~ [#2542] Add scroll button component and implement on views Mar 16, 2026

FisherSkyi added 4 commits March 16, 2026 16:54

Feat: add testing

e01edcc

Fix: eof

a2b360d

Fix: linter

665d497

Fix: cypress test

c85035c

FisherSkyi requested review from Airiinnn and removed request for Airiinnn March 16, 2026 10:36

FisherSkyi added 3 commits March 17, 2026 01:27

Fix: cypress CICD

c170ce6

Fix test: race condition

c23a474

Merge branch 'master' of github.com:reposense/RepoSense into roll-back

9417476

FisherSkyi marked this pull request as ready for review March 23, 2026 10:57

FisherSkyi requested review from CYX22222003 and jonasongg March 23, 2026 10:57

Merge branch 'master' into roll-back

9e56b97

CYX22222003 requested a review from Copilot March 26, 2026 08:14

Copilot started reviewing on behalf of CYX22222003 March 26, 2026 08:15 View session

Copilot AI reviewed Mar 26, 2026

View reviewed changes

FisherSkyi added 2 commits March 30, 2026 15:15

Fix suggestions on style

5484119

Move into component

6df3391

FisherSkyi added 3 commits March 30, 2026 17:38

Refactor: callback

cde8aa7

Merge branch 'master' of github.com:reposense/RepoSense into roll-back

7ead3aa

Merge branch 'roll-back' of github.com:FisherSkyi/RepoSense into roll…

11d2a5d

…-back

FisherSkyi closed this Mar 30, 2026

FisherSkyi reopened this Mar 30, 2026

Change selector

6c4226d

FisherSkyi requested a review from Copilot April 2, 2026 13:51

Copilot started reviewing on behalf of FisherSkyi April 2, 2026 13:52 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

FisherSkyi added 2 commits April 7, 2026 15:35

Fix with copilot's suggestions

b6cfde9

Merge branch 'master' of github.com:reposense/RepoSense into roll-back

a116ace

ashmitahaldar reviewed Apr 9, 2026

View reviewed changes

Fix scss

68cf8e2

jonasongg reviewed Apr 9, 2026

View reviewed changes

FisherSkyi added 2 commits April 9, 2026 17:12

Fix test

7fa99c1

Fix

5f5a25a

ashmitahaldar approved these changes Apr 11, 2026

View reviewed changes

Remove scroll

6156d94

FisherSkyi requested a review from jonasongg April 12, 2026 03:21

Merge branch 'master' into roll-back

0d0f48d

CYX22222003 approved these changes Apr 13, 2026

View reviewed changes

Merge branch 'master' into roll-back

d82d7e1

CYX22222003 added the s.ToMerge label Apr 13, 2026

Merge branch 'master' into roll-back

3b49227

FisherSkyi merged commit 5f50615 into reposense:master Apr 16, 2026
10 checks passed

FisherSkyi added a commit that referenced this pull request Apr 16, 2026

Revert "[#2542] Add scroll button component and implement on views (#…

9e9c691

…2556)" This reverts commit 5f50615.

Conversation

FisherSkyi commented Mar 10, 2026

Proposed commit message

Other information

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

FisherSkyi commented Mar 30, 2026

Update on copilot's review:

Rationale:

Uh oh!

github-actions Bot commented Mar 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

FisherSkyi Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ashmitahaldar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jonasongg left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ashmitahaldar left a comment

Choose a reason for hiding this comment

Uh oh!

FisherSkyi commented Apr 12, 2026

Uh oh!

CYX22222003 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

FisherSkyi Apr 9, 2026 •

edited

Loading