feat: add DetailPanel and extend UserHoverCard to all tables

[ArjinAlbay]

DetailPanel Component:

• Create slide-in DetailPanel component for issue details
• Implement smooth slide-in/out animations with backdrop
• Add escape key and backdrop click to close
• Prevent body scroll when panel is open
• Display comprehensive issue information:
  • Title, ID, repository
  • Author with UserHoverCard integration
  • Created/updated dates
  • Priority badge with color coding
  • Labels with color styling
  • Comments count
  • Full description with line breaks
  • Additional info (language, stars, type)
• Responsive design (full-width on mobile, 600px on desktop)

State Management:

• Create detailPanel store with Zustand
• openPanel, closePanel, setIssue actions
• Centralized state for selectedIssue and isOpen

UI Integration:

• Add UserHoverCard to action-required table author column
• Add DetailPanel to action-required page with row click
• Add DetailPanel to quick-wins table with row click
• Prevent panel opening when clicking buttons/links/inputs
• Apply hover effects to clickable rows

All tables now display user hover cards with scores and
clickable rows open the DetailPanel for detailed information.

Summary by CodeRabbit

• New Features
  • Added clickable item rows in the action-required and quick-wins sections that open a detail panel
  • New detail panel displays comprehensive issue information including title, repository, priority, author, timestamps, comments, labels, and description
  • Detail panel closes via backdrop click or Escape key
  • Enhanced author display with hover card information

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

A detail panel feature is introduced using a new DetailPanel component and Zustand store to manage panel state. Integration points in the action-required and quick-wins pages enable clickable rows that open the detail panel for issue inspection.

Changes

Cohort / File(s)	Summary
Detail panel core infrastructure src/components/ui/detail-panel.tsx	New component rendering a slide-over panel with issue details (title, repository, priority badge, author hover card, timestamps, comments, labels, description). Handles keyboard interaction (Escape to close), body scroll locking, and conditional section rendering. Exports DetailPanelIssue interface.
State management src/stores/detailPanel.ts, src/stores/index.ts	New Zustand store with selectedIssue and isOpen state. Actions: openPanel(issue), closePanel(), setIssue(issue). Exported from store index.
Page and component integrations src/app/action-required/page.tsx, src/components/quick-wins/QuickWinsTable.tsx	Both pages add detail panel imports and hooks, make table rows clickable with cursor-pointer and onClick handlers (avoiding button/link/input triggers), render DetailPanel component wired to store. Action-required additionally wraps author display in UserHoverCard.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Page as Page/Component
    participant Store as useDetailPanelStore
    participant Panel as DetailPanel
    
    User->>Page: Click table row
    Page->>Store: openPanel(issue)
    Store->>Store: Set selectedIssue + isOpen=true
    Store-->>Panel: Trigger re-render
    Panel->>Panel: Render with issue data
    Panel-->>User: Display slide-over panel
    
    User->>Panel: Press Escape or click backdrop
    Panel->>Store: onClose()
    Store->>Store: Set isOpen=false
    Store-->>Panel: Trigger re-render
    Panel-->>User: Hide panel

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Specific areas requiring attention:
  • DetailPanel component (src/components/ui/detail-panel.tsx): Verify robust field access patterns for both snake_case and camelCase properties; confirm scroll locking cleanup on unmount; validate Escape key handler doesn't conflict with nested components
  • Store initialization (src/stores/detailPanel.ts): Confirm Zustand pattern follows existing store conventions; validate action semantics (openPanel vs. setIssue distinction)
  • Row click handlers in both integration files: Ensure event delegation correctly avoids button/link/input triggers; verify no competing click handlers or event propagation issues

Possibly related PRs

• add monitoring dashboard #120: Modifies src/app/action-required/page.tsx author/avatar rendering with similar row behavior patterns
• feat: implement Quick Wins tab with GitHub issue filters and tabbed layout #52: Introduces QuickWinsTable implementation that this PR extends with detail panel integration

Poem

🐰 A panel slides in smooth and sleek,
Click a row to peek at what you seek,
Issues bloom in scrollable grace,
Escape to close your viewing space! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 208add2 and 4af9caf.

📒 Files selected for processing (5)

• src/app/action-required/page.tsx (7 hunks)
• src/components/quick-wins/QuickWinsTable.tsx (4 hunks)
• src/components/ui/detail-panel.tsx (1 hunks)
• src/stores/detailPanel.ts (1 hunks)
• src/stores/index.ts (1 hunks)

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}