clawwork-ai/ClawWork
View on GitHub[Cleanup] Extract keyboard shortcuts and settings bootstrap from App.tsx
Open
#231 opened on Apr 1, 2026
area/uigood first issuekind/cleanup
Repository metrics
- Stars
- (519 stars)
- PR merge metrics
- (PR metrics pending)
Description
What problem are you trying to solve?
App.tsx (281 lines) handles 5+ concerns inline: layout, keyboard shortcuts, settings bootstrap, workspace detection, and window/tray event handling. Some hooks have already been extracted (useGatewayBootstrap, useUpdateCheck, useTraySync), but keyboard shortcuts and settings bootstrap are still inline, making the root component harder to read and test.
Where
packages/desktop/src/renderer/App.tsx
What needs to be done
- Open
packages/desktop/src/renderer/App.tsx - Extract a
useKeyboardShortcuts()hook:- Move the
handleGlobalKeyDownfunction and theuseEffectthat attaches/detaches thekeydownlistener - The hook should accept any dependencies it needs as parameters
- Place it in
packages/desktop/src/renderer/hooks/useKeyboardShortcuts.ts
- Move the
- Extract a
useSettingsBootstrap()hook:- Move the settings loading
useEffectthat runs on mount - Place it in
packages/desktop/src/renderer/hooks/useSettingsBootstrap.ts
- Move the settings loading
- Import and call both hooks in
App.tsx - Run
pnpm checkto verify nothing breaks
Why does this matter?
Smaller components are easier to read and maintain. The keyboard shortcut logic in particular is complex enough (~50 lines) to deserve its own file.
Primary area
Renderer UI