feat: add React frontend with search and mod pages

Add apps/web (Vite + React Router + Tailwind v4 + Zustand) with a search page and a mod page that analyzes saves via @tts/extract. Document the frontend in the README and docs.
This commit is contained in:
2026-08-08 11:22:09 +08:00
parent b32cb53c67
commit 7c812a109c
21 changed files with 1067 additions and 30 deletions
+14 -5
View File
@@ -27,6 +27,7 @@ shared types/validation package.
| Package | Role | Runtime |
| ------------------ | ------------------------------------------- | ------------ |
| `apps/web` | React frontend: search + mod pages | Browser |
| `apps/proxy` | Hono HTTP server: search + fetch endpoints | Node |
| `packages/tts` | Fetch save from Steam, BSON-parse to `TTSMod` | Node |
| `packages/extract` | Analyze a `TTSMod`: objects, refs, assets | Isomorphic |
@@ -35,15 +36,19 @@ shared types/validation package.
## Dependency graph
```
apps/proxy ──► packages/tts ──► packages/shared
│ │
│ └──► (fetchMod → TTSMod)
packages/extract ──► packages/tts (traverseMod) ──► packages/shared (types)
apps/web ──► apps/proxy ──► packages/tts ──► packages/shared
│ │
└──► (fetchMod → TTSMod)
└──► packages/extract ──► packages/shared (types)
```
### Edges
- **`apps/web``apps/proxy`** — calls `/search`, `/items/:id`, and
`/items/:id/file` over HTTP.
- **`apps/web``packages/extract`** — uses `flattenObjects` / `collectRefs`
to analyze a loaded `TTSMod` in the browser.
- **`apps/proxy``packages/tts`** — calls `fetchMod` / `getFileName` to serve
item requests.
- **`apps/proxy``packages/shared`** — uses shared types and zod schemas for
@@ -90,11 +95,15 @@ packages/extract ──► packages/tts (traverseMod) ──► packages/shared
- `typescript` (strict), `tsx` (dev runner), `eslint`, `prettier`.
- `vitest` (unit tests), colocated as `*.test.ts` next to sources.
- `vite`, `@vitejs/plugin-react`, `tailwindcss`, `@tailwindcss/vite` — frontend
build/dev tooling.
- `pnpm` workspaces for package management.
## Deployment / runtime shape
- The proxy runs as a single Node process via `@hono/node-server`.
- `apps/web` is a static Vite build served separately; during development it
proxies `/search`, `/items`, and `/health` to the proxy.
- `packages/extract` is published/consumed as a plain ESM module usable from a
browser bundle or Node.
- No shared state between requests; each request fetches fresh.