fix: updated keyboard shortcuts display to use tooltips

[Akhileshait]

What does this PR do?

This PR improves the UX of keyboard shortcuts in the dashboard by replacing hover-revealed containers with proper tooltip components.

Changes

Replaced hover-revealed keyboard shortcuts with tooltips in:

• LiveSwitchButton (live-switch-button/index.tsx)

  • Removed the group class and animated hover-revealed container
  • Wrapped button with InfoTooltip displaying "Toggle live updates ⌥+⇧+Q"
  • Tooltip appears on hover with 300ms delay

• RefreshButton (refresh-button.tsx)

  • Enhanced existing InfoTooltip to show keyboard shortcut when enabled
  • Displays "Refresh data ⌥+⇧+W" when enabled
  • Maintains existing error message when disabled
  • Removed hover-revealed container and group class

Benefits

• More consistent with standard UI patterns
• Better accessibility with proper ARIA attributes
• Cleaner implementation leveraging existing InfoTooltip component
• Improved discoverability of keyboard shortcuts

Fixes #4086

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How should this be tested?

1. Navigate to Gateway Logs page

   • Go to any workspace → project → gateway logs

2. Test Live Switch Button

   • Hover over the "Live" button
   • Verify tooltip appears showing "Toggle live updates ⌥+⇧+Q"
   • Confirm keyboard shortcut ⌥+⇧+Q (Option+Shift+Q) still toggles live mode
   • Test on both live and paused states

3. Test Refresh Button

   • When enabled (with relative time filter selected):
     • Hover over the "Refresh" button
     • Verify tooltip shows "Refresh data ⌥+⇧+W"
     • Confirm keyboard shortcut ⌥+⇧+W (Option+Shift+W) triggers refresh
   • When disabled (with absolute time range):
     • Hover over the "Refresh" button
     • Verify tooltip shows error message about selecting relative time filter
     • Confirm button is disabled and shortcut doesn't work

4. Accessibility Testing

   • Tab to buttons and verify tooltips appear on focus
   • Test with screen reader to ensure keyboard shortcuts are announced properly

5. Visual Verification

   • Confirm no visual regressions in button appearance
   • Verify tooltip styling matches other tooltips in the application
   • Check tooltip positioning (should appear below buttons, centered)

Checklist

Required

• Filled out the "How to test" section in this PR
• Read Contributing Guide
• Self-reviewed my own code
• Commented on my code in hard-to-understand areas
• Ran pnpm build
• Ran pnpm fmt
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Unkey Docs if changes were necessary

[changeset-bot]

⚠️ No Changeset found

Latest commit: ca9879d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@Akhileshait is attempting to deploy a commit to the Unkey Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaces hover-revealed keyboard shortcut displays with InfoTooltip wrappers around buttons. Tooltip content now shows a label plus a KeyboardButton shortcut (⌥+⇧+Q / ⌥+⇧+W); button click behavior and public props remain unchanged. Tooltip delay set to 300ms and positioned bottom-center.

Changes

Cohort / File(s)	Summary
Live switch button apps/dashboard/components/logs/live-switch-button/index.tsx	Wraps the existing ghost Button in an InfoTooltip (asChild). Tooltip shows label + KeyboardButton shortcut (⌥+⇧+Q), positioned bottom-center with 300ms delay. Keeps onToggle click wiring, preserves isLive styling and conditional ping indicator rendered inside the Button. Removed previous hover-revealed keyboard hint markup.
Refresh button internal/ui/src/components/buttons/refresh-button.tsx	Replaces inline hover keyboard hint with tooltipContent that varies by isEnabled: enabled shows "Refresh data" + KeyboardButton (⌥+⇧+W), disabled shows guidance text. Tooltip uses 300ms delay, is disabled while loading, and adjusts tooltip variant (primary when enabled, inverted when disabled). Removed title attribute and inline keyboard hint block. Public API unchanged.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as InfoTooltip / Button
    participant App as Component (onToggle / onRefresh)

    Note over User,UI: Hover (300ms delay)
    User->>UI: hover
    UI-->>User: show tooltip (label + KeyboardButton shortcut)

    Note over User,App: Click action
    User->>UI: click button (asChild)
    UI->>App: invoke handler (onToggle / onRefresh)
    App-->>UI: update state (isLive / loading)
    UI-->>User: reflect new visual state (active styling, ping, disabled states)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Inspect InfoTooltip usage and props (position, delay, disabled) in both components.
• Verify conditional tooltipContent logic in refresh-button.tsx and variant selection.
• Confirm no regressions in click handlers, live-state styling, and ping indicator rendering.
• Check keyboard shortcut text accuracy and accessibility attributes.

Possibly related PRs

• chore: Move keyboard button to UI #3289 — related changes that moved KeyboardButton into the UI and consolidated imports used by the live-switch refactor.
• chore: Move refresh button to UI #3407 — edits to internal/ui/src/components/buttons/refresh-button.tsx that overlap with the tooltip/keyboard-hint changes.

Suggested labels

Bug

Pre-merge checks and finishing touches

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "fix: updated keyboard shortcuts display to use tooltips" accurately reflects the primary change in the changeset. It clearly and specifically describes the main objective: replacing hover-revealed keyboard shortcuts with tooltip components in the LiveSwitchButton and RefreshButton components. The title is concise, readable, and would help teammates understand the purpose when scanning history.
Linked Issues Check	✅ Passed	The PR directly addresses all requirements from linked issue #4086, which requests replacing hover-revealed keyboard shortcut displays with proper tooltip components. The changes to LiveSwitchButton and RefreshButton implement exactly this objective by wrapping components with InfoTooltip and removing hover-revealed containers. The PR also delivers the listed benefits: consistency with standard UI patterns, improved accessibility through proper ARIA attributes in tooltips, and a cleaner implementation using the existing InfoTooltip component rather than custom hover solutions.
Out of Scope Changes Check	✅ Passed	All changes in the PR are directly scoped to the requirements in issue #4086. The modifications to LiveSwitchButton and RefreshButton are focused specifically on replacing hover-revealed keyboard shortcuts with tooltip components, which is the exact change requested. No unrelated refactoring, feature additions, or auxiliary changes are present; the PR maintains backward compatibility with no changes to public component signatures or APIs, keeping the scope tightly aligned with the linked issue.
Description Check	✅ Passed	The PR description comprehensively follows the required template structure with all mandatory sections properly filled out. It includes a clear summary of changes with specific file references and line numbers, identifies the linked issue (#4086), marks the appropriate change type categories (bug fix, chore, enhancement), provides detailed testing instructions covering normal operation, edge cases, accessibility, and visual verification, and completes all required checklist items. The description exceeds the minimum requirements with thorough technical detail and actionable testing steps.

✨ 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 5ec8e5b and 1d402c4.

📒 Files selected for processing (1)

• internal/ui/src/components/buttons/refresh-button.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: ogzhanolguncu
Repo: unkeyed/unkey PR: 2825
File: apps/dashboard/app/(app)/logs-v2/components/controls/components/logs-datetime/index.tsx:0-0
Timestamp: 2025-01-30T20:38:00.058Z
Learning: In the logs dashboard, keyboard shortcuts that toggle UI elements (like popovers) should be implemented in the component that owns the state being toggled, not in the presentational wrapper components. For example, the 'T' shortcut for toggling the datetime filter is implemented in DatetimePopover, not in LogsDateTime.

📚 Learning: 2025-08-25T13:05:22.441Z

Learnt from: ogzhanolguncu
Repo: unkeyed/unkey PR: 3834
File: internal/ui/src/components/form/input.tsx:130-131
Timestamp: 2025-08-25T13:05:22.441Z
Learning: The Input component in internal/ui/src/components/form/input.tsx is designed to support interactive right icons (like X buttons for deletion) by enabling pointer events on the right icon container, allowing clicks to be handled by the icon rather than passed through to the input.

Applied to files:

• internal/ui/src/components/buttons/refresh-button.tsx

🔇 Additional comments (1)

internal/ui/src/components/buttons/refresh-button.tsx (1)

52-69: Tooltip content handling looks solid.

Dynamic content cleanly differentiates enabled and disabled states, keeps the shortcut discoverable, and folds into the existing InfoTooltip API without regressions.

---

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.}

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dashboard	Ready	Preview	Comment	Nov 3, 2025 0:59am

[ogzhanolguncu]

Can we do show something like this in the tooltip instead of what we have right now?
Press 'XXXXXX' to toggle. Please, address

Clear filters: ⌥+⇧+A
Focus filters: ⌥+⇧+S

Those two as well