Surface keyboard shortcuts and cap label overflow#35
Conversation
Three small affordance improvements following the Linear-style design pass:
- App.tsx: wire the advertised T shortcut to toggle theme (was in the
command palette as "T" but had no global handler). All palette
shortcuts now have working global handlers.
- App.tsx + app.css: render sidebar nav items with an inline kbd hint
(Inbox=I, My Issues=M, Views=W, Projects=P, Members=E) at 0.5 opacity,
brightening to full on hover/active/focus. Also adds native `title`
tooltips with the full G-prefix chord ("Go to Inbox · G I") so screen
readers and keyboard-curious users learn the muscle-memory chord.
- IssueCard.tsx: cap visible labels at 2 with a "+N" overflow chip
whose title attribute lists the hidden label names. Prior render
pushed all labels onto the card, which broke the density rhythm.
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughThis PR introduces keyboard shortcuts for theme toggling and enhanced create-issue workflows, adds visual shortcut hints to sidebar navigation links, and limits issue card label display to reduce visual clutter with a "+N" overflow indicator. ChangesKeyboard Shortcuts and Navigation Hints
Issue Card Label Limiting
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new keyboard shortcut ('t') for toggling the theme and enhances the navigation sidebar by adding visual keyboard shortcut indicators and descriptive titles to navigation links. Additionally, it updates the IssueCard component to limit the display of labels to two, using a badge to indicate the count of hidden labels. The review feedback suggests adding a return statement to the new theme shortcut handler in App.tsx to maintain consistency with existing shortcut logic and optimize event handling.
| if (event.key.toLowerCase() === 't' && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) { | ||
| event.preventDefault(); | ||
| setTheme((currentTheme) => (currentTheme === 'dark' ? 'light' : 'dark')); | ||
| } |
There was a problem hiding this comment.
The new 'T' shortcut handler should include a return; statement to exit the function early upon a match. This maintains consistency with the 'C' handler logic updated in this PR and prevents unnecessary evaluation of any future shortcut conditions added below this block.
if (event.key.toLowerCase() === 't' && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
event.preventDefault();
setTheme((currentTheme) => (currentTheme === 'dark' ? 'light' : 'dark'));
return;
}
Mirrors the early-return guard on the C handler so future shortcut branches added below cannot accidentally run after T fires. No current behavioral change since T is the last branch. Addresses gemini-code-assist review feedback on PR #35.
1 participant
Summary
Three small affordance improvements following Linear's "teach the muscle memory, don't bury the chord" pattern.
Thandler for theme toggle (App.tsx). The command palette advertisesTfor toggle-theme but the global key handler had noTbranch — pressingTon the board was a no-op until you opened⌘K. All paletteshortcut:fields now have working global handlers.App.tsx,app.css). Inline<kbd>forI(Inbox),M(My Issues),W(Views),P(Projects),E(Members), rendered atopacity: 0.5and brightening to1on hover / active /:focus-visible. Nativetitle="Go to Inbox · G I"tooltips spell out the full G-prefix chord for discoverability and screen-reader users. Pattern matches the existingSearch ⌘KandCreate issue Cchips already in the chrome.IssueCard.tsx). Cards render the first 2 labels, then a+Nchip with atitleattribute listing the hidden names. Previously SON-432's 4 labels (OAuth/Deploy/Infra/Design) all stacked, breaking the dense rhythm — now shown asOAuth Deploy +2.Test plan
tsc --noEmitcleanvite buildsucceedsIssueCard.test.tsxfixture has 1 label, well under the cap)+2and+1chipsTtoggles theme;G Ijumps to inbox; hovering each nav item shows the chord in the tooltip; cards with >2 labels show overflow chipSummary by CodeRabbit
tto toggle between dark and light themescfor quick exit from the create-issue surface