feat(onhover-options-for-resumecard-on-dashboard): added an hover to … #2271
Conversation
…view options on the resumecard in dashboard and, direct click on resume card to open it!
📝 WalkthroughWalkthroughThe changes replace the existing dropdown menu in the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ResumeCard
User->>ResumeCard: Mouse enters card
ResumeCard->>ResumeCard: Start 200ms timer to show dropdown
User->>ResumeCard: Mouse leaves before 200ms
ResumeCard->>ResumeCard: Cancel show timer
User->>ResumeCard: Mouse stays over card >200ms
ResumeCard->>ResumeCard: Show dropdown with fade/slide animation
User->>ResumeCard: Mouse leaves card
ResumeCard->>ResumeCard: Start 300ms timer to hide dropdown
User->>ResumeCard: Mouse re-enters before 300ms
ResumeCard->>ResumeCard: Cancel hide timer
User->>ResumeCard: Mouse stays away >300ms
ResumeCard->>ResumeCard: Hide dropdown with animation
User->>ScrollContext: Scroll event detected
ScrollContext->>ResumeCard: Set isScrolling true
ResumeCard->>ResumeCard: Immediately hide dropdown
ScrollContext->>ResumeCard: After 150ms debounce, set isScrolling false
Assessment against linked issues
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🔭 Outside diff range comments (1)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx (1)
11-17:⚠️ Potential issueRemove dead
DropdownMenu*importsThe legacy dropdown components are no longer referenced, so these imports will trigger “unused import” errors during the build.
-import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@reactive-resume/ui";🧰 Tools
🪛 ESLint
[error] 12-12: 'DropdownMenu' is defined but never used.
(unused-imports/no-unused-imports)
[error] 13-13: 'DropdownMenuContent' is defined but never used.
(unused-imports/no-unused-imports)
[error] 14-14: 'DropdownMenuItem' is defined but never used.
(unused-imports/no-unused-imports)
[error] 15-15: 'DropdownMenuSeparator' is defined but never used.
(unused-imports/no-unused-imports)
[error] 16-16: 'DropdownMenuTrigger' is defined but never used.
(unused-imports/no-unused-imports)
🧹 Nitpick comments (4)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/use-mouse-position.ts (2)
66-75: MoveisElementHoveredoutside the hook to avoid re‑creation
isElementHoveredis re‑declared on every render, although its logic is stateless and relies only on globals.
Extracting it once will reduce unnecessary allocations and keep referential equality stable for consumers.-const isElementHovered = (element: HTMLElement | null): boolean => { +const isElementHovered = (element: HTMLElement | null): boolean => { … -}; +};Then return it directly from the hook:
return { isElementHovered };🧰 Tools
🪛 ESLint
[error] 66-66: Move arrow function 'isElementHovered' to the outer scope.
(unicorn/consistent-function-scoping)
[error] 67-67: Compare with
undefineddirectly instead of usingtypeof.(unicorn/no-typeof-undefined)
[error] 67-67: Compare with
undefineddirectly instead of usingtypeof.(unicorn/no-typeof-undefined)
67-68: Minor lint: compare directly withundefinedIf you want to silence the eslint rule
unicorn/no-typeof-undefined, compare values directly:- if (!element || typeof window.mousePosX === 'undefined') + if (!element || window.mousePosX === undefined)Purely cosmetic, can be skipped if the rule is disabled.
🧰 Tools
🪛 ESLint
[error] 67-67: Compare with
undefineddirectly instead of usingtypeof.(unicorn/no-typeof-undefined)
[error] 67-67: Compare with
undefineddirectly instead of usingtypeof.(unicorn/no-typeof-undefined)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx (2)
37-39:cardRefis declared but never usedIf you plan to leverage the ref later (e.g., with
isElementHovered), leave a TODO comment; otherwise, delete it to avoid the lint warning.- const cardRef = useRef<HTMLDivElement>(null);
140-208: Improve keyboard accessibilityThe hover‑overlay menu is unreachable via keyboard because it is created only on
hover/mouse events and the buttons lacktabIndex.
Recommendation:
- Show the menu when the card gains focus (
onFocus,onBlur).- Ensure the first menu button gets
autoFocus, or wrap the group in arole="menu"with arrow‑key handling.This guarantees parity for keyboard and assistive‑technology users.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/base-card.tsx(1 hunks)apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx(3 hunks)apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/use-mouse-position.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/base-card.tsx (1)
apps/client/src/constants/parallax-tilt.ts (1)
defaultTiltProps(3-11)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx (2)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/base-card.tsx (1)
BaseCard(14-29)libs/utils/src/namespaces/style.ts (1)
cn(14-14)
🪛 ESLint
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/use-mouse-position.ts
[error] 5-5: Use a type instead of an interface.
(@typescript-eslint/consistent-type-definitions)
[error] 66-66: Move arrow function 'isElementHovered' to the outer scope.
(unicorn/consistent-function-scoping)
[error] 67-67: Compare with undefined directly instead of using typeof.
(unicorn/no-typeof-undefined)
[error] 67-67: Compare with undefined directly instead of using typeof.
(unicorn/no-typeof-undefined)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
[error] 105-105: Callbacks must be listed after all other props
(react/jsx-sort-props)
🔇 Additional comments (1)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/base-card.tsx (1)
16-17:touchAction: 'auto'looks goodExplicitly restoring the default
touch-actionprevents unexpected gesture suppression fromTilt. No further issues spotted.
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/use-mouse-position.ts
Outdated
Show resolved
Hide resolved
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx (2)
99-99: Fix ESLint error: Reorder JSX props.React props should be ordered with callbacks after other props.
- onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} className="relative" + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave}🧰 Tools
🪛 ESLint
[error] 99-99: Callbacks must be listed after all other props
(react/jsx-sort-props)
143-149: Consider refactoring for DRY principle.The dropdown's mouse enter handler duplicates logic from the main handleMouseEnter function.
- onMouseEnter={() => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - setDropdownOpen(true); - }} + onMouseEnter={() => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + // Immediately show without delay when hovering the dropdown itself + setDropdownOpen(true); + }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx(3 hunks)apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/scroll-context.tsx(1 hunks)apps/client/src/pages/dashboard/resumes/_layouts/grid/index.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/client/src/pages/dashboard/resumes/_layouts/grid/index.tsx (3)
apps/client/src/services/resume/resumes.ts (1)
useResumes(14-25)apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/scroll-context.tsx (1)
ScrollProvider(11-38)libs/utils/src/namespaces/date.ts (1)
sortByDate(9-16)
🪛 ESLint
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
[error] 99-99: Callbacks must be listed after all other props
(react/jsx-sort-props)
🔇 Additional comments (4)
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/scroll-context.tsx (1)
1-38: Well-implemented ScrollContext for tracking window scroll state.This new context provider is cleanly implemented with appropriate debouncing for scroll events and proper cleanup. The context provides a boolean
isScrollingflag that will be useful for controlling UI behavior during scrolling actions.Some notable quality aspects:
- Good use of debouncing (150ms) to avoid excessive state updates
- Proper cleanup of event listeners and timeouts on unmount
- Use of passive event listeners for better performance
apps/client/src/pages/dashboard/resumes/_layouts/grid/index.tsx (1)
10-10: Clean integration of ScrollProvider.The ScrollProvider is properly integrated to wrap the grid content without disrupting the existing functionality. This provides the scrolling state to all resume cards within the grid.
Also applies to: 16-58
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx (2)
22-73: Well-structured hover detection and state management.Good implementation of delayed hover effects with appropriate debounce timing (200ms before showing, 300ms before hiding) to prevent accidental triggering. The integration with the ScrollContext to prevent dropdown opening during scrolling is particularly thoughtful for UX.
The code properly manages timeouts with useRef and cleans them up on component unmount.
134-203: Good UX implementation for dropdown menu.The custom dropdown menu implementation provides several UX improvements:
- Smooth fade and slide animations
- Immediate response to hover on the dropdown itself
- Background click to open the resume
- Clear visual hierarchy with icons and separator
- Proper event propagation control
This implementation aligns well with the PR objective of improving the accessibility of options when hovering over resume cards.
fixes #2216
Why?
user @laxmanrathod69 raised issue this to enhance.
What i did?
1.Updated that when user hovers resume card it would show that options (Open,Rename,Duplicate,Lock,Delete) options.
2.And also ive enhanced the accessibility of those options as well even in the long list of resumes on dashboards by directly making it display that options as an overly on that card itself.
3.And also implemented an on click open that resume even without clicking on the open option explicitly.
Screenshots
OldOne:
NewOne:
Summary by CodeRabbit
New Features
Style