Part of the avatar-settings rebuild (research: every product except Figma ships a remove button; Figma gets complaints for missing it). Backend DELETE route shipped in the previous commit. - api.ts: removeAvatar() calls DELETE /avatars. Cache invalidation lives in the caller so button-side side effects (progress state, history tick) can chain in the same handler. - AvatarUpload: 'Удалить аватар' / 'Remove avatar' appears in the same row as 'Change' and 'Recrop' when an avatar is set. Two-step inline confirm: first click arms and swaps the label to 'Точно удалить?' with an ember border, second click sends DELETE. The armed state auto-reverts after 4 s so a forgotten armed button never stays one click from destructive. - i18n: avatar.remove / .removeConfirm / .removed / .removeFailed in ru+en. en.ts uses , so a missing key on either side would fail the type check. Not yet: a real Modal with X / ESC / backdrop (comes with the AvatarEditDialog chunk), preview-in-3-sizes, and cropper keyboard/wheel/pinch. Tests stay at 140/140, tsc and oxlint clean. |
||
|---|---|---|
| .. | ||
| public | ||
| scripts | ||
| src | ||
| .env.example | ||
| .gitignore | ||
| .oxlintrc.json | ||
| ARCHITECTURE.md | ||
| bun.lock | ||
| index.html | ||
| package.json | ||
| PLAN.md | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| tsconfig.test.json | ||
| vite.config.ts | ||
LoVisual Website
The frontend for LoVisual - a marketing site with a live in-game GUI demo, download page, documentation, themes/showcase pages, and an account dashboard with a cloud config manager. UI is fully bilingual (Russian default, English toggle, persisted in the URL).
Stack
- React 19 + TypeScript + Vite, package manager: bun
- Tailwind CSS v4 with custom design tokens (radii, glass panels, control sizing)
- TanStack Query for backend calls, react-router for pages
- react-i18next -
ru/enresources per feature, compile-time key parity viasatisfies - motion/react for animation, vitest + Testing Library for tests
- oxlint for linting
Layout
src/
├── app/ router, providers, App shell
├── features/ one folder per domain (account, cloud, demo, themes, ...)
│ └── <f>/ api.ts · i18n/{ru,en}.ts · components/ · tests/
├── pages/ route-level pages composing features
├── shared/ ui primitives, i18n bootstrap, easter eggs, helpers
└── test/ vitest setup and utilities
Feature-folder rules: API calls, translations and components live together; no cross-feature
imports except through shared/.
Scripts
bun install # install dependencies
bun run dev # dev server on http://localhost:5173 (proxies /api to the backend)
bun run test # vitest run
bun run build # tsc -b + vite build → dist/
bun run lint # oxlint
bun run gen:themes # regenerate theme tokens from the mod palette (scripts/extract-themes.ts)
The dev server expects the Rust gateway on 127.0.0.1:8080 (see backend/);
without it, API-backed pages degrade to demo/offline states by design.
Testing
Unit and component tests are colocated in features/*/tests/ and shared/**/tests/;
run a single file with bunx vitest run src/features/account/tests/account.test.tsx.
Translation parity (ru ↔ en key sets) is enforced at compile time and in tests.