# 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

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

## Tests

```bash
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`.