clawwork-ai/ClawWork

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

Open

#231 opened on Apr 1, 2026

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (63 forks)github user discovery
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

  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