Add tooltips with keyboard shortcuts to topbar buttons

[AviPeltz]

Add tooltips to the settings and sidebar toggle buttons in the topbar, displaying the action name alongside the keyboard shortcut using styled Kbd components.

🤖 Generated with Claude Code

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

Summary by CodeRabbit

• New Features
  • Settings button and sidebar toggle now display keyboard shortcuts in tooltips. Hovering over these controls reveals the associated hotkeys, improving discoverability of available keyboard navigation options.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
website	Ready	Preview	Comment	Dec 2, 2025 0:54am

[coderabbitai]

Walkthrough

The PR adds tooltip UI components with keyboard shortcut displays to two TopBar buttons. Settings button tooltips show the hotkey to open settings, and sidebar toggle button tooltips display the keyboard shortcut for toggling the sidebar sidebar, using shared hotkey configuration and formatting utilities.

Changes

Cohort / File(s)	Change Summary
Tooltip UI with hotkey display for TopBar buttons apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx, apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx	Wraps buttons in Tooltip components and displays configured hotkeys via Kbd/KbdGroup UI elements. Imports Tooltip-related components and hotkey formatting utilities. Preserves existing button click behavior and styling while adding keyboard shortcut visibility.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Both changes follow an identical pattern (tooltip wrapping with hotkey display), reducing cognitive load for review
• Straightforward UI component composition using existing hotkey configuration
• No logic changes or complex interactions introduced
• Verify that formatKeysForDisplay() correctly formats keys for both SHOW_HOTKEYS and TOGGLE_SIDEBAR hotkey definitions

Possibly related PRs

• color change on settings button #191: Modifies the SettingsButton component's text color styling, creating a potential merge conflict or interaction with the tooltip changes in this PR.

Poem

🐰 A hop, a bound, through UI so neat,
Tooltips appear for shortcuts so fleet,
Hotkeys now visible with every glance,
Settings and sidebar in interactive dance! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description provides a clear overview of changes and mentions the primary goal, but most template sections remain empty with only placeholder comments and no substantive content filled in.	Complete the template by filling in Related Issues, checking the appropriate Type of Change box, describing testing performed, and adding any relevant screenshots or notes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding tooltips with keyboard shortcuts to topbar buttons, which aligns with the actual modifications in both SettingsButton and SidebarControl components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/topbar-tooltips-with-shortcuts

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx (1)

2-39: Tooltip + hotkey display for sidebar looks solid

Using HOTKEYS.TOGGLE_SIDEBAR.keys with formatKeysForDisplay matches the control’s behavior and label, and wrapping the existing Button with TooltipTrigger asChild keeps semantics intact. Looks good; if more topbar buttons gain the same pattern, consider a tiny shared “IconButtonWithHotkeyTooltip” helper later to avoid repetition.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 07a04b4 and e0516ad.

📒 Files selected for processing (2)

• apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

apps/desktop/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

For Electron interprocess communication, ALWAYS use tRPC as defined in src/lib/trpc

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx

apps/desktop/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)

apps/desktop/**/*.{ts,tsx}: Please use alias as defined in tsconfig.json when possible
Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Avoid using any type - use explicit types instead for type safety
Use camelCase for variable and function names following existing codebase patterns
Keep diffs minimal with targeted edits only - avoid unnecessary changes when making modifications
Follow existing patterns and match the codebase style when writing new code

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx

**/components/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

**/components/**/*.tsx: Create one folder per component with structure: ComponentName/ComponentName.tsx + index.ts for barrel export
Co-locate tests next to the component file they test (e.g., ComponentName.test.tsx)
Co-locate dependencies (utils, hooks, constants, config, stories) next to the file using them
Use nested components/ subdirectory within a parent component only if a sub-component is used 2+ times within that parent; otherwise keep it in the parent's components/ folder
One component per file - avoid multi-component files

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx

apps/desktop/src/renderer/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Never import Node.js modules (fs, path, os, net, etc.) in renderer process code - browser environment only

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx

apps/desktop/src/renderer/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Call IPC methods using window.ipcRenderer.invoke() with object parameters - TypeScript will infer the exact response type automatically

Files:

• apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx
• apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx

🧬 Code graph analysis (2)

apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx (4)

apps/desktop/src/renderer/stores/app-state.ts (1)

• useOpenSettings (61-61)

apps/desktop/src/shared/hotkeys.ts (2)

• formatKeysForDisplay (185-208)
• HOTKEYS (28-156)

packages/ui/src/components/tooltip.tsx (3)

• Tooltip (74-74)
• TooltipTrigger (74-74)
• TooltipContent (74-74)

packages/ui/src/components/kbd.tsx (2)

• KbdGroup (28-28)
• Kbd (28-28)

apps/desktop/src/renderer/screens/main/components/TopBar/SidebarControl.tsx (2)

apps/desktop/src/renderer/stores/sidebar-state.ts (1)

• useSidebarStore (17-37)

apps/desktop/src/shared/hotkeys.ts (1)

• formatKeysForDisplay (185-208)

⏰ 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). (1)

• GitHub Check: Build

🔇 Additional comments (1)

apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx (1)

1-33: Verify the HOTKEYS entry used for the Settings tooltip

The tooltip label says “Settings”, but the shortcut source is HOTKEYS.SHOW_HOTKEYS.keys. The name suggests a “show hotkeys” action rather than “open settings”, so this may surface the wrong shortcut in the UI. Please double-check that this is the intended entry (and switch to a settings‑specific hotkey if one exists).