Klaxon

Appearance

Web App ​

The Klaxon web app (packages/web/) is a browser-based client that renders the same UI as the desktop app. It connects to the cloud server via REST API + WebSocket.

Running ​

bash
pnpm --filter @klaxon/web dev

Opens at http://localhost:5173. Configure the server URL and log in via the Settings panel.

Architecture ​

The web app is a thin entry point that renders <MainWidget /> from @ottercoders/klaxon-common:

tsx
import { MainWidget, connectWebSocket } from "@ottercoders/klaxon-common";

function WebApp() {
  useEffect(() => {
    connectWebSocket();
  }, []);
  return <MainWidget />;
}

All components, hooks, and the API transport layer live in the shared packages/common/ library. The web app adds only the HTML shell and Vite config.

Features ​

Everything the desktop app supports:

  • Slack-style sidebar with filter views, channels, saved views, settings
  • Item list with search, date filters, multi-select bulk actions
  • Item detail with inline form rendering
  • Keyboard shortcuts (J/K navigate, A ack, D dismiss, / search, ? help)
  • Undo toast for dismiss/archive
  • Real-time updates via WebSocket
  • Theme support (dark/light/dracula/nord)

Building for Production ​

bash
pnpm --filter @klaxon/web build

Outputs static files to packages/web/dist/. Serve with any static file server or CDN.