Skip to content

Commit 0b5ca4a

Browse files
authored
refactor(customize): add keyboard shortcut (Ctrl+K / Cmd+K) to focus the username input (JhaSourav07#474)
## Description Fixes JhaSourav07#386 ## Pillar - [ ] 🎨 Pillar 1 — New Theme Design - [ ] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [x] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview No visual change. When we press Ctrl+K / Cmd+K on the Customization Studio page and the username input receives focus instantly. ## Checklist before requesting a review: - [x] I have read the `CONTRIBUTING.md` file. - [x] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). - [x] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). - [x] My commits follow the Conventional Commits format (e.g., `feat(themes): ...`, `fix(calculate): ...`). - [x] I have updated `README.md` if I added a new theme or URL parameter. - [x] I have started the repo. - [x] I have made sure that i have only one commit to merge in this PR. - [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). - [ ] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
2 parents 34958a1 + c1c1fbc commit 0b5ca4a

1 file changed

Lines changed: 14 additions & 2 deletions

File tree

app/customize/page.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,20 @@ export default function CustomizePage(): ReactElement {
3939
};
4040
}, []);
4141

42-
// Clear custom hex overrides when switching to auto — fixed colors
43-
// conflict with the dual-palette prefers-color-scheme switching.
42+
useEffect(() => {
43+
const handleKeyDown = (event: KeyboardEvent) => {
44+
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
45+
const input = document.querySelector<HTMLInputElement>('#username-input');
46+
if (!input || document.activeElement === input) return;
47+
event.preventDefault();
48+
input.focus();
49+
}
50+
};
51+
52+
window.addEventListener('keydown', handleKeyDown);
53+
return () => window.removeEventListener('keydown', handleKeyDown);
54+
}, []);
55+
4456
// Clear custom hex overrides when switching to virtual themes because
4557
// fixed colors conflict with their palette-selection behavior.
4658
const handleThemeChange = useCallback((newTheme: string): void => {

0 commit comments

Comments
 (0)