frontend

Workavera Frontend

简体中文 · Repository README

This directory contains the Workavera Vite, React, and TypeScript application. Production output is written to frontend/dist, embedded into the Go binary via frontend/embed.go (go:embed), and served by the Go/PocketBase application.

Stack

• React 19 and React Router 8
• TypeScript 6 and Vite 8
• Tailwind CSS 4
• Local shadcn/ui primitives in src/components/ui
• Zustand stores
• PocketBase JavaScript SDK and realtime subscriptions
• AI SDK React and AI Elements-style components
• BlockNote for Markdown documents
• Shiki syntax highlighting for document code blocks

Development

Install dependencies:

pnpm install

Start the Go/PocketBase server from the repository root:

task dev:go

Start Vite from this directory:

pnpm dev

Open http://127.0.0.1:5173. The Vite server proxies /api to http://127.0.0.1:8090.

Set VITE_POCKETBASE_URL to use another PocketBase origin. Without it, the frontend uses window.location.origin.

Commands

For a normal frontend change, run:

pnpm typecheck
pnpm lint
pnpm build

Source layout

src/
├── components/
│   ├── ai-elements/    # Streamed chat presentation primitives
│   ├── board/          # Board and task surfaces
│   ├── calendar/       # Calendar lists and event sheet
│   ├── chat/           # Conversation and tool-result UI
│   ├── docs/           # BlockNote document editor
│   ├── notifications/  # Notification items
│   └── ui/             # Reusable local UI primitives
├── pages/              # Lazy-loaded route pages
├── store/              # Zustand feature stores
├── lib/                # PocketBase, navigation, timezone, and helpers
├── types/              # Shared frontend types
├── router.tsx          # Protected application routes
└── App.tsx             # Authentication and theme initialization

UI development

• Reuse components from src/components/ui before adding a new primitive.

• Add shadcn/ui components with:

  pnpm dlx shadcn@latest add <component>
  

• Keep feature components inside their existing module directories.

• Reuse shared UI primitives for stable presentation patterns such as pagination, selects, menus, and confirmation dialogs, while keeping permissions, queries, and record actions in feature-specific stores or page services. Extract cross-feature list behavior only when those domain rules genuinely match.

• Use the shared workspaceRecordUrl helper for record deep links.

• Keep PocketBase access in established stores or page services and preserve owner/member rules enforced by the backend.

• Do not edit dist or node_modules directly.