clawwork-ai/ClawWork

[Cleanup] Extract keyboard shortcuts and settings bootstrap from App.tsx

Closed

#231 opened on Apr 1, 2026

 (2 comments) (0 reactions) (0 assignees)TypeScript (76 forks)github user discovery
area/uigood first issuekind/cleanup

Repository metrics

Stars
 (529 stars)
PR merge metrics
 (Avg merge 22d) (2 merged PRs in 30d)

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

  1. Open packages/desktop/src/renderer/App.tsx
  2. Extract a useKeyboardShortcuts() hook:
    • Move the handleGlobalKeyDown function and the useEffect that attaches/detaches the keydown listener
    • The hook should accept any dependencies it needs as parameters
    • Place it in packages/desktop/src/renderer/hooks/useKeyboardShortcuts.ts
  3. Extract a useSettingsBootstrap() hook:
    • Move the settings loading useEffect that runs on mount
    • Place it in packages/desktop/src/renderer/hooks/useSettingsBootstrap.ts
  4. Import and call both hooks in App.tsx
  5. Run pnpm check to 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

Contributor guide