Files

Tran G. (Revernomad) Khoa a688bdfdf9 docs: finalise Arma 3 UX enhancement plan and update project docs

- .claude/plan/arma3-ux-enhancement.md: full plan review pass
  - Add Progress Tracker table for session handoff
  - Fix Phase 1 field names to match ServerConfig model (password_admin,
    battleye, disable_von)
  - Fix Phase 2 rotation endpoints to use ServerService(db) inline pattern
  - Fix Phase 4 router/service: add get_by_slot() to PlayerRepository,
    add get_rcon_client() to ThreadRegistry, fix BanRepository.create()
    signature (expires_at not duration_minutes), correct router pattern
  - Fix Phase 6: already implemented, mark as SKIP
  - Fix CSS class names: btn-secondary→btn-ghost, input-base→neu-input
  - Add 19 implementation decisions from Q&A session to Coding Conventions
- CLAUDE.md: update status table, type mapping table, add plan summary
  and new endpoint list, add key implementation gotchas section
- frontend/README.md: replace Vite boilerplate with project README
- frontend/tests-e2e: E2E test improvements from previous session
  (mock-based login error test, full dashboard mock coverage)

2026-04-17 15:45:34 +07:00

2.3 KiB

Raw Permalink Blame History

Languard Server Manager — Frontend

React 19 + TypeScript + Vite frontend for the Languard game server management panel.

Stack

React 19 with hooks
TypeScript strict mode
Vite dev server + build
TanStack Query for server state (all API calls)
Zustand for client state (auth, UI notifications)
react-hook-form + Zod for form validation
Tailwind CSS with custom neumorphic design tokens
Vitest for unit tests

Dev Server

# From this directory
npx vite --host
# → http://localhost:5173

Tests

npx vitest run          # run once
npx vitest              # watch mode
npx tsc --noEmit        # type check only

Project Structure

src/
├── components/
│   ├── layout/         # Sidebar
│   ├── servers/        # ServerCard, ConfigEditor, PlayerTable, MissionList, ModList, LogViewer, BanTable
│   ├── settings/       # PasswordChange, UserManager
│   └── ui/             # StatusLed, (planned) TagListEditor, ConfirmModal
├── hooks/
│   ├── useServers.ts       # Dashboard server list + start/stop/restart mutations
│   ├── useServerDetail.ts  # All per-server queries and mutations
│   ├── useAuth.ts
│   └── useWebSocket.ts     # Real-time events (logs, status changes)
├── pages/
│   ├── LoginPage.tsx
│   ├── DashboardPage.tsx
│   ├── ServerDetailPage.tsx
│   ├── CreateServerPage.tsx
│   └── SettingsPage.tsx
├── store/
│   ├── auth.store.ts   # JWT + user role
│   └── ui.store.ts     # Notification queue
└── lib/
    ├── api.ts          # Axios instance with JWT interceptor + 401 redirect
    └── logger.ts

CSS Conventions

Custom utility classes defined in src/index.css (do not add new CSS files):

Class	Use
`neu-card`	Card surface with neumorphic raised shadow
`neu-input`	Input with recessed shadow
`btn-primary`	Amber accent button
`btn-ghost`	Text-only button with hover background
`btn-danger`	Red destructive button

Tailwind design tokens in tailwind.config.js: surface-{base,raised,recessed,overlay}, text-{primary,secondary,muted}, status-{running,stopped,crashed,starting,restarting}, accent.

2.3 KiB Raw Permalink Blame History