feat: add floating Scroll-to-Top button for improved navigation#513
Conversation
- Replace raw user_id with SHA256 hash (8-char prefix) in all log statements - Maintains audit trail capability while protecting user identifiers (PII) - Complies with GDPR/CCPA privacy requirements - Hash is deterministic for correlation without exposing PII Resolves CodeRabbit PII logging concern
…backfill Fix tenant ticket orphaning by persisting company_id on save
…ashboard feat: Real-time Support Dashboard Updates Using Supabase Realtime Channels
…y bugs on Ticket Detail page
…bles across UI and config
… with premium header
…link them in landing footer
…and style premium elements
- Add ScrollToTopButton component with fade-in/fade-out animation - Button appears after scrolling down 300px - Smooth scroll animation back to top - Responsive positioning (bottom-right corner) - Accessible with aria-label and title attributes - Uses Tailwind CSS for styling with hover/focus states Closes ritesh-1918#250
|
@zeroknowledge0x is attempting to deploy a commit to the ritesh Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR adds a scroll-to-top button feature to the application. A new ChangesScroll to Top Button Feature
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@Frontend/src/components/shared/ScrollToTopButton.jsx`:
- Around line 12-19: The effect that registers toggleVisibility only updates
visibility on scroll, so the button may remain hidden if the page mounts at a
deep scroll position; inside the useEffect that defines toggleVisibility (the
effect that adds/removes the "scroll" listener), call toggleVisibility() once
immediately after adding the listener (or before) to initialize isVisible via
setIsVisible, ensuring the ScrollToTopButton reflects the current window.scrollY
on mount; keep the existing cleanup that removes the listener.
- Around line 30-39: The button remains in the keyboard tab order when hidden;
update the button element that uses isVisible (the one with
onClick={scrollToTop}) to remove it from the accessibility tree and from tab
order when isVisible is false by setting tabIndex={isVisible ? 0 : -1} and
aria-hidden={isVisible ? "false" : "true"} (or aria-hidden={!isVisible}) so it
is non-focusable and hidden from AT while visually hidden.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0e09eefe-a6e7-4dbb-9b36-f9d2226e71f3
📒 Files selected for processing (2)
Frontend/src/App.jsxFrontend/src/components/shared/ScrollToTopButton.jsx
| useEffect(() => { | ||
| const toggleVisibility = () => { | ||
| setIsVisible(window.scrollY > 300); | ||
| }; | ||
|
|
||
| window.addEventListener("scroll", toggleVisibility); | ||
| return () => window.removeEventListener("scroll", toggleVisibility); | ||
| }, []); |
There was a problem hiding this comment.
Initialize visibility once on mount.
At Line 12, isVisible only updates after a scroll event. If the page restores at a deep scroll position, the button stays incorrectly hidden until the user scrolls again. Call toggleVisibility() once inside the effect.
Suggested fix
useEffect(() => {
const toggleVisibility = () => {
setIsVisible(window.scrollY > 300);
};
+ toggleVisibility();
window.addEventListener("scroll", toggleVisibility);
return () => window.removeEventListener("scroll", toggleVisibility);
}, []);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| const toggleVisibility = () => { | |
| setIsVisible(window.scrollY > 300); | |
| }; | |
| window.addEventListener("scroll", toggleVisibility); | |
| return () => window.removeEventListener("scroll", toggleVisibility); | |
| }, []); | |
| useEffect(() => { | |
| const toggleVisibility = () => { | |
| setIsVisible(window.scrollY > 300); | |
| }; | |
| toggleVisibility(); | |
| window.addEventListener("scroll", toggleVisibility); | |
| return () => window.removeEventListener("scroll", toggleVisibility); | |
| }, []); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/components/shared/ScrollToTopButton.jsx` around lines 12 - 19,
The effect that registers toggleVisibility only updates visibility on scroll, so
the button may remain hidden if the page mounts at a deep scroll position;
inside the useEffect that defines toggleVisibility (the effect that adds/removes
the "scroll" listener), call toggleVisibility() once immediately after adding
the listener (or before) to initialize isVisible via setIsVisible, ensuring the
ScrollToTopButton reflects the current window.scrollY on mount; keep the
existing cleanup that removes the listener.
| <button | ||
| onClick={scrollToTop} | ||
| className={`fixed bottom-6 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition-all duration-300 hover:bg-blue-700 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${ | ||
| isVisible | ||
| ? "translate-y-0 opacity-100" | ||
| : "pointer-events-none translate-y-4 opacity-0" | ||
| }`} | ||
| aria-label="Scroll to top" | ||
| title="Scroll to top" | ||
| > |
There was a problem hiding this comment.
Hidden button is still keyboard-focusable.
At Line 30, the button stays in the tab order even when visually hidden (opacity-0). This creates an invisible focus target for keyboard/screen-reader users. Make it non-focusable/hidden from AT when isVisible is false.
Suggested fix
<button
onClick={scrollToTop}
+ tabIndex={isVisible ? 0 : -1}
+ aria-hidden={!isVisible}
className={`fixed bottom-6 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition-all duration-300 hover:bg-blue-700 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
isVisible
? "translate-y-0 opacity-100"
: "pointer-events-none translate-y-4 opacity-0"
}`}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Frontend/src/components/shared/ScrollToTopButton.jsx` around lines 30 - 39,
The button remains in the keyboard tab order when hidden; update the button
element that uses isVisible (the one with onClick={scrollToTop}) to remove it
from the accessibility tree and from tab order when isVisible is false by
setting tabIndex={isVisible ? 0 : -1} and aria-hidden={isVisible ? "false" :
"true"} (or aria-hidden={!isVisible}) so it is non-focusable and hidden from AT
while visually hidden.
|
| GitGuardian id | GitGuardian status | Secret | Commit | Filename | |
|---|---|---|---|---|---|
| 29368972 | Triggered | Supabase Service Role JWT | b460068 | scratch/test_companies.js | View secret |
🛠 Guidelines to remediate hardcoded secrets
- Understand the implications of revoking this secret by investigating where it is used in your code.
- Replace and store your secret safely. Learn here the best practices.
- Revoke and rotate this secret.
- If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.
To avoid such incidents in the future consider
- following these best practices for managing and storing secrets including API keys and other credentials
- install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.
🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.
ritesh-1918
added
gssoc
|
Hi @unsiqasik! Thanks for the contribution. I have successfully converted your PR's target branch to PR approved and merged! Welcome to the family! 🚀💻 🌟 Developer Action NetworkBefore starting or submitting updates, please complete these quick onboarding steps:
Note: All PR branches must target the |
5 participants
Summary
Adds a floating Scroll-to-Top button that enhances navigation on long pages.
Changes
ScrollToTopButtoninFrontend/src/components/shared/aria-labelandtitleattributesImplementation Details
useStateanduseEffectfor scroll position trackingpointer-events-nonewhen hidden to prevent accidental clicksTesting
Closes #250
Summary by CodeRabbit