Files
languard-servers-manager/frontend
Tran G. (Revernomad) Khoa bf09a6ed1c fix: fix Arma 3 log discovery and improve config editor UX
- Fix logfiles_router and thread_registry to resolve .rpt log files
  from Path(server["exe_path"]).parent/server/ instead of the languard
  data dir, which never contained log files — log list and live tail
  both now work correctly
- Rewrite get_ui_schema() in config_generator to cover all ~80 fields
  across all 5 sections (server/basic/profile/launch/rcon) with proper
  toggle/select/number/password/tag-list/hidden widgets and labels;
  missions field is hidden (managed by Missions tab)
- Add formatSelectDisplay() to ConfigEditor so select fields show
  descriptive text (e.g. "0 - Never") instead of raw numbers in view mode
- Add ToggleDisplay for boolean fields (Enabled/Disabled with indicator dot)
- Add section tab labels and descriptions to ConfigEditor
- Add MissionList UX hints and dynamic Add/In Rotation button labels
- Add "hidden" to FieldSchema widget union type
- Update API.md, ARCHITECTURE.md, CLAUDE.md, FRONTEND.md, MODULES.md,
  THREADING.md to document log path fix and schema coverage
2026-04-18 15:56:04 +07:00
..

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.