feat(shortcuts): add keyboard shortcuts and repo filter input#204
Open
Adit-Jain-srm wants to merge 4 commits into
Open
feat(shortcuts): add keyboard shortcuts and repo filter input#204Adit-Jain-srm wants to merge 4 commits into
Adit-Jain-srm wants to merge 4 commits into
Conversation
…RODHOSH#168) Adds: - New useKeyboardShortcuts hook (reusable, supports / and Escape) - Repo filter input with '/' keyboard shortcut to focus - Filters repos by name and description (case-insensitive) - Escape handling delegated to Radix (already built-in) - Input styling matches DESIGN.md text-input spec (6px radius, hairline border) Signed-off-by: Adit Jain <aditjain2005@gmail.com>
github-actions
Bot
added
frontend
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughProfileView now adds keyboard-driven repository filtering, with ChangesProfile repository search shortcuts
Sequence Diagram(s)sequenceDiagram
participant User
participant document
participant useKeyboardShortcuts
participant ProfileView
participant repositoryFilterInput
User->>document: presses "/"
document->>useKeyboardShortcuts: keydown
useKeyboardShortcuts->>ProfileView: onSlash()
ProfileView->>repositoryFilterInput: focus()
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Contributor
Author
|
Could you add the elusoc label? Issue #168 has ELUSOC + ADVENTURER. Thanks! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 `@src/components/profile/ProfileView.tsx`:
- Around line 817-834: The repository filter input in ProfileView lacks an
accessible name because it only uses placeholder text. Update the input element
in ProfileView to include an aria-label that clearly describes its purpose,
keeping the existing searchRef, repoFilter, and onChange behavior unchanged.
- Around line 120-122: Inline onSlash in ProfileView is recreating a new
function on every render, which breaks useKeyboardShortcuts memoization and
causes the document listener to be re-subscribed repeatedly. Update ProfileView
to wrap the onSlash handler in useCallback, add useCallback to the React import
if needed, and keep the callback stable when passing it into
useKeyboardShortcuts so handleKeyDown/useEffect in that hook do not rerun
unnecessarily.
In `@src/hooks/useKeyboardShortcuts.ts`:
- Around line 19-22: The keyboard shortcut handler in useKeyboardShortcuts
currently only matches the bare "/" key, so update the shortcut logic to also
recognize Ctrl+/ (and the platform equivalent if applicable) when calling
onSlash. Keep the existing isTyping guard, and adjust the condition in the
keyboard event handler so both "/" and Ctrl+/ trigger the search focus behavior
without interfering with typing.
🪄 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: ASSERTIVE
Plan: Pro Plus
Run ID: bfa0d8d3-bbdc-4223-b495-4ae9ecbd0320
📒 Files selected for processing (2)
src/components/profile/ProfileView.tsxsrc/hooks/useKeyboardShortcuts.ts
Addresses CodeRabbit review: - Input: added aria-label for screen readers - onSlash: wrapped in useCallback to prevent listener re-subscription on each render - Hook: supports both bare / (when not typing) and Ctrl+/ (always) Signed-off-by: Adit Jain <aditjain2005@gmail.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/profile/ProfileView.tsx (1)
837-844: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winNo feedback when the filter matches nothing.
The
repos.length === 0branch only covers profiles with zero repositories. WhenrepoFilterexcludes every repo, an empty grid renders with no "no matches" message, leaving the user unsure whether the filter worked. Consider rendering an empty-state for the filtered result.Sketch
const filteredRepos = repos.filter( (repo) => !repoFilter || repo.name.toLowerCase().includes(repoFilter.toLowerCase()) || (repo.description || "").toLowerCase().includes(repoFilter.toLowerCase()) ); // ...then render a "No repositories match your filter." message when // repos.length > 0 && filteredRepos.length === 0🤖 Prompt for 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. In `@src/components/profile/ProfileView.tsx` around lines 837 - 844, The ProfileView repo list only handles the empty unfiltered case, so when repoFilter removes all items the grid renders blank with no feedback. In ProfileView.tsx, factor the filtering logic used in the repos.map render into a reusable filteredRepos variable and add a separate empty-state branch for repos.length > 0 && filteredRepos.length === 0, showing a “No repositories match your filter.” message before rendering the grid.
♻️ Duplicate comments (1)
src/hooks/useKeyboardShortcuts.ts (1)
19-25: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAdd
metaKeyso the shortcut also works on macOS.
isCtrlSlashonly checkse.ctrlKey. macOS users typically use ⌘ (e.metaKey), soCmd+/won't focus the search there. Consider matching the platform modifier as well.Proposed change
- const isCtrlSlash = e.ctrlKey && e.key === "/"; + const isCtrlSlash = (e.ctrlKey || e.metaKey) && e.key === "/";🤖 Prompt for 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. In `@src/hooks/useKeyboardShortcuts.ts` around lines 19 - 25, The shortcut check in useKeyboardShortcuts only handles Ctrl+/ via isCtrlSlash, so it misses macOS Command+/ users. Update the shortcut detection in the keyboard handler to treat either e.ctrlKey or e.metaKey as the modifier for the slash shortcut, while keeping the bare slash behavior unchanged; use the existing isCtrlSlash condition and onSlash callback to locate the logic.
🤖 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.
Outside diff comments:
In `@src/components/profile/ProfileView.tsx`:
- Around line 837-844: The ProfileView repo list only handles the empty
unfiltered case, so when repoFilter removes all items the grid renders blank
with no feedback. In ProfileView.tsx, factor the filtering logic used in the
repos.map render into a reusable filteredRepos variable and add a separate
empty-state branch for repos.length > 0 && filteredRepos.length === 0, showing a
“No repositories match your filter.” message before rendering the grid.
---
Duplicate comments:
In `@src/hooks/useKeyboardShortcuts.ts`:
- Around line 19-25: The shortcut check in useKeyboardShortcuts only handles
Ctrl+/ via isCtrlSlash, so it misses macOS Command+/ users. Update the shortcut
detection in the keyboard handler to treat either e.ctrlKey or e.metaKey as the
modifier for the slash shortcut, while keeping the bare slash behavior
unchanged; use the existing isCtrlSlash condition and onSlash callback to locate
the logic.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: fa933a38-1fac-4d01-ae5f-82a275055dc0
📒 Files selected for processing (2)
src/components/profile/ProfileView.tsxsrc/hooks/useKeyboardShortcuts.ts
Signed-off-by: Adit Jain <aditjain2005@gmail.com>
Signed-off-by: Adit Jain <aditjain2005@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds keyboard shortcut support and a repo filter input. Press
/anywhere on the profile page to focus the repo filter, then type to narrow down repositories by name or description.Related Issue
Closes #168
Type of Change
Changes Made
New file:
src/hooks/useKeyboardShortcuts.tsonSlash(fires when/pressed outside inputs) andonEscapecallbacksactiveElement.tagNameandisContentEditableto avoid capturing keystrokes while typingModified:
src/components/profile/ProfileView.tsxuseKeyboardShortcutsto focus the filter on/pressAI Usage
The hook uses
useCallbackto memoize the handler anduseEffectfor cleanup. The filter input uses a ref so the hook can call.focus()imperatively. Escape is handled natively by Radix UI dialogs (no custom code needed).Screenshots (if UI change)
A text input appears above the repo grid with placeholder "Filter repositories... (press / to focus)". Pressing
/from anywhere on the page focuses it.Checklist
mainconsole.logleft insrc/schema.sqland a new migration file are includedDESIGN.mdand followed the design system (colors, spacing, typography, components)feat:,fix:,docs:, etc.)Summary by CodeRabbit
/(orCtrl+/) to focus the “Popular repositories” filter, andEscto dismiss.