feat: add useSheetNavigation hook and SheetNavigationButtons component

[impoiler]

Summary

Introduces reusable keyboard-driven sheet navigation, allowing users to move between items in a sheet panel using arrow keys or vim-style j/k bindings.

Changes

• Added a useSheetNavigation hook that registers up/k (previous) and down/j (next) hotkeys via react-hotkeys-hook, conditionally enabled based on whether adjacent items exist. The hook returns shortcut key metadata for display in the UI.
• Added a SheetNavigationButtons component that renders up/down chevron buttons with tooltips showing the associated keyboard shortcuts. Shortcuts are rendered as styled <kbd> elements, supporting both icon and label representations.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

cd ui
pnpm i || npm i
pnpm build || npm run build

Integrate useSheetNavigation and SheetNavigationButtons into a sheet component with a navigable list. Verify that:

• The up/down buttons appear and are disabled when no previous/next item exists.
• Pressing ↑/k navigates to the previous item and ↓/j navigates to the next.
• Tooltips display the correct keyboard shortcut icons and labels.

Screenshots/Recordings

Add before/after screenshots or clips of the navigation buttons and tooltips in action.

Breaking changes

• Yes
• No

Related issues

Link related issues here.

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Sheet navigation with previous/next chevron buttons controlled by availability states.
  • Built-in keyboard shortcut support (arrow keys and K/J) for navigation when enabled.
  • Tooltips displaying direction labels with optional keyboard shortcut hints.
  • Enhanced sheet auto-focus handling for customizable focus behavior on open.

Walkthrough

This PR adds keyboard-driven sheet navigation by introducing a custom hook that registers up/k and down/j hotkeys, enhancing the sheet component's auto-focus behavior, and creating a reusable button component that renders navigation controls with shortcut hints.

Changes

Sheet Navigation with Keyboard Shortcuts

Layer / File(s)	Summary
Navigation shortcuts hook and types ui/hooks/useSheetNavigation.ts	Hook wires keyboard shortcuts (up/k for prev, down/j for next) to trigger onNavigate callbacks, gated by enabled and hasPrev/hasNext flags. Exports ShortcutKey and SheetNavigationShortcuts types describing the default bindings.
Sheet auto-focus customization ui/components/ui/sheet.tsx	SheetContent now accepts and forwards onOpenAutoFocus callback to SheetPrimitive.Content, allowing consumers to customize focus behavior when the sheet opens.
Navigation buttons component ui/components/sheetNavigationButtons.tsx	Renders previous/next chevron buttons with tooltips and optional keyboard shortcut hints. Buttons are disabled based on hasPrev/hasNext and invoke onNavigate on click, with customizable aria labels.

Sequence Diagram

sequenceDiagram
  participant User
  participant useSheetNavigation as Hook
  participant SheetContent
  participant SheetNavigationButtons
  participant App as onNavigate Callback

  User->>useSheetNavigation: Presses Arrow Up or K
  useSheetNavigation->>useSheetNavigation: Check enabled && hasPrev
  useSheetNavigation->>App: Call onNavigate("prev")
  App->>App: Handle navigation

  User->>SheetNavigationButtons: Click Prev Button
  SheetNavigationButtons->>App: Call onNavigate("prev")
  App->>App: Handle navigation

  User->>User: Sheet opens
  User->>SheetContent: Auto-focus event fires
  SheetContent->>SheetContent: preventDefault()
  SheetContent->>App: Call onOpenAutoFocus (if provided)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• akshaydeo

Poem

A rabbit hops through keyboard lands,
With arrows up and down in hand—
k and j in furry stance,
Leading sheets in keyboard dance! 🐰⌨️

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main changes: adding a new hook and component for sheet navigation.
Description check	✅ Passed	The description covers summary, changes, type, affected areas, and testing instructions, though screenshots are marked as unprovided and some checklist items remain unchecked.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 05-25-feat_added_usesheetnavigation_hook

---

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

[impoiler]

• feat: replace enabled badge with toggle switch and add edit action in MCP clients table #3809
• fix: exclude sonner toast elements from sheet outside-click detection #3805
• refactor: reuse SheetNavigationButtons component and useSheetNavigation hook #3804
• refactor: extract dashboard tab data-fetching into dedicated TabView components #3797
• feat: add GetDimensionRankings API and dashboard tabs for team, customer, BU, and user rankings #3766
• refactor: replace TeamDialog with TeamSheet and improve teams table layout #3757
• feat: add SearchSelect component with sync and async support #3752
• fix: persist customers pagination/search in URL state and improve table layout #3751
• feat: add prev/next navigation to RoutingRuleInfoSheet #3745
• feat: add prev/next navigation to MCPClientSheet #3744
• feat: add keyboard navigation and URL state for virtual key detail sheet #3740
• feat: add useSheetNavigation hook and SheetNavigationButtons component #3739 👈 (View in Graphite)
• refactor: replace CustomerDialog with CustomerSheet for customer create/edit #3726
• feat: log database type when connecting in NewConfigStore #3724
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 4/5

The hook and button component are safe in isolation, but the global auto-focus suppression change in the shared SheetContent requires attention before merging.

The unconditional e.preventDefault() in SheetContent.onOpenAutoFocus removes Radix UI's built-in focus management for every sheet in the application. This was added to support navigation sheets but affects all 15+ sheet consumers, meaning keyboard and screen-reader users must manually tab into any sheet that opens — a regression that goes beyond the intended scope of this feature.

ui/components/ui/sheet.tsx — the global auto-focus suppression affects all sheets, not just navigation-aware ones.

Important Files Changed

Filename	Overview
ui/hooks/useSheetNavigation.ts	New hook wiring up/k and down/j hotkeys via react-hotkeys-hook, conditionally gated on enabled+hasPrev/hasNext; returns static shortcut metadata. Return value produces new object/array references every render.
ui/components/sheetNavigationButtons.tsx	New component rendering prev/next chevron buttons with shortcut-key tooltips. Tooltips won't render on hover when buttons are disabled because native disabled buttons swallow pointer events.
ui/components/ui/sheet.tsx	Adds unconditional e.preventDefault() in onOpenAutoFocus handler, suppressing Radix UI focus management for every sheet in the app; this global side-effect was added to support navigation sheets but affects all consumers.

_{Reviews (2): Last reviewed commit: "feat: added useSheetNavigation hook" | Re-trigger Greptile}

[coderabbitai]

Actionable comments posted: 3

🤖 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 `@ui/components/sheetNavigationButtons.tsx`:
- Around line 46-55: Add data-testid attributes to the new navigation Button
elements in the SheetNavigationButtons component: for the previous button (the
Button with disabled={!hasPrev}, onClick={() => onNavigate("prev")},
aria-label={`Previous ${entityLabel}`} and child ChevronUp) add a unique
data-testid like "sheet-nav-prev" and for the corresponding next button (the
Button with disabled={!hasNext}, onClick={() => onNavigate("next")},
aria-label={`Next ${entityLabel}`} and child ChevronDown) add "sheet-nav-next"
so E2E tests can reliably target these interactive elements.
- Around line 22-24: Replace the unstable index-based key used in the keys.map
render inside sheetNavigationButtons.tsx: instead of key={i} on the
React.Fragment, construct a stable unique key from the shortcut item's
identifying properties (e.g., combine k.icon and k.label or another unique field
on the shortcut object) so the mapping in keys.map((k, i) => ...) uses that
deterministic key for the React.Fragment to ensure stable reconciliation.

In `@ui/components/ui/sheet.tsx`:
- Around line 106-109: The current inline handler always calls
e.preventDefault() in the onOpenAutoFocus prop, which disables Radix's default
autofocus even when no custom handler is provided; change the implementation in
the sheet component so you only call e.preventDefault() when a custom
onOpenAutoFocus handler exists — e.g., check if onOpenAutoFocus is truthy, then
run e.preventDefault() and invoke onOpenAutoFocus(e); otherwise do nothing so
Radix's default focus behavior remains intact.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fc1f70e5-a34d-449a-a725-b17534ccc06e

📥 Commits

Reviewing files that changed from the base of the PR and between fb08c09 and 1149f98.

📒 Files selected for processing (3)

• ui/components/sheetNavigationButtons.tsx
• ui/components/ui/sheet.tsx
• ui/hooks/useSheetNavigation.ts

[akshaydeo]

Merge activity

• May 27, 1:44 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 27, 1:47 PM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.