Show progressive blur at scroll ends in AI view#2330
Show progressive blur at scroll ends in AI view#2330ComputelessComputer merged 2 commits intomainfrom
Conversation
Add a scroll container with state tracking and edge gradient overlays to AI view so a progressive blur appears at the top and bottom when content is scrollable. Use a ref, ResizeObserver and a scroll listener to detect atStart/atEnd and avoid showing gradients when scrolling is at the very start or end. This matches the behavior used in body/index.tsx and prevents gradients from showing on initial or fully-scrolled states.
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughAdds client-side scroll handling to the AI component: a ref-backed inner scroll container, a scrollState with atStart/atEnd, an updateScrollState helper, a useEffect that attaches a scroll listener plus a ResizeObserver with cleanup, and conditional gradient overlays; imports updated for React hooks. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
ComputelessComputer
force-pushed
the
ui/ai-scroll-edge-gradients
branch
from
6dc6a5b to
e895a5b
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/desktop/src/components/main/body/ai.tsx (1)
122-135: Verify gradient background assumption and consider removing redundant class.The implementation correctly adds scroll-aware gradient overlays. Two items to consider:
Redundant
flex-1class: On line 125, theflex-1class is redundant since the parent (line 122) is not a flex container. Onlyh-fullis needed to fill the parent height.Gradient color assumption: The gradients use
from-white(lines 130, 133), assuming the background is always white. Please verify this matches the actual background color, or consider using a CSS variable to ensure theme compatibility.Note: The PR title mentions "progressive blur," but the implementation uses gradient fades (
bg-gradient-to-b/t), which is a standard pattern for indicating scrollable content.Apply this diff to remove the redundant class:
- className="flex-1 w-full h-full overflow-y-auto scrollbar-hide px-6 pb-6" + className="w-full h-full overflow-y-auto scrollbar-hide px-6 pb-6"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/desktop/src/components/main/body/ai.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*
📄 CodeRabbit inference engine (AGENTS.md)
Format using
dprint fmtfrom the root. Do not usecargo fmt.
Files:
apps/desktop/src/components/main/body/ai.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props. Just inline them.
Never do manual state management for form/mutation. UseuseFormfrom tanstack-form anduseQuery/useMutationfrom tanstack-query for 99% cases.
Files:
apps/desktop/src/components/main/body/ai.tsx
**/*.{ts,tsx,rs,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
By default, avoid writing comments at all. If you write one, it should be about 'Why', not 'What'.
Files:
apps/desktop/src/components/main/body/ai.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: If there are many classNames with conditional logic, usecn(import from@hypr/utils). Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/desktop/src/components/main/body/ai.tsx
🧬 Code graph analysis (1)
apps/desktop/src/components/main/body/ai.tsx (2)
apps/desktop/src/components/settings/ai/stt/index.tsx (1)
STT(4-11)apps/desktop/src/components/settings/ai/llm/index.tsx (1)
LLM(4-11)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: fmt
- GitHub Check: desktop_ci (linux, depot-ubuntu-22.04-8)
- GitHub Check: desktop_ci (linux, depot-ubuntu-24.04-8)
🔇 Additional comments (4)
apps/desktop/src/components/main/body/ai.tsx (4)
2-2: LGTM!The additional React hooks are appropriate for the scroll state management being introduced.
55-59: LGTM!The ref and state initialization is correct. Setting both
atStartandatEndtotrueinitially prevents gradients from appearing before the first scroll state calculation.
68-76: LGTM!The scroll state calculation logic is correct, and the 1px threshold appropriately handles sub-pixel scrolling and rounding issues.
78-91: LGTM!The scroll listener and ResizeObserver setup is correct with proper cleanup. Including
activeTabin the dependencies ensures the scroll state updates immediately when switching tabs, rather than waiting for the ResizeObserver to fire after content change.
2 participants
Add a scroll container with state tracking and edge gradient overlays to AI view so a progressive blur appears at the top and bottom when content is scrollable. Use a ref, ResizeObserver and a scroll listener to detect atStart/atEnd and avoid showing gradients when scrolling is at the very start or end. This matches the behavior used in body/index.tsx and prevents gradients from showing on initial or fully-scrolled states.