ld
29b176d2db
- build: pin Playwright Test and MCP with repository-local npm, browser, and artifact paths plus sandboxed headless Chromium configuration. - test: add a browser smoke test for the login page while keeping Playwright isolated from Vitest. - docs: document Debian dependency setup, dual Chromium revisions, E2E commands, and project-scoped Codex MCP usage.
66 lines
2.8 KiB
Markdown
66 lines
2.8 KiB
Markdown
# Web Roadmap
|
|
|
|
## Product Boundary
|
|
|
|
- The Web client is a pure client-side rendered single-page application.
|
|
- Vite produces static assets only. The project does not use SSR, React Server Components, a Node API server, or a browser-specific business backend.
|
|
- The Web client consumes the same versioned REST API as future Android and other native clients.
|
|
- Production may serve `web/dist` from MyGO or a reverse proxy.
|
|
- Shared API contracts should remain client-neutral and eventually be described by OpenAPI.
|
|
|
|
## Current Milestone
|
|
|
|
The browser client now provides the first authenticated file workflow:
|
|
|
|
- Email/password login through the shared REST API
|
|
- Session-scoped access and refresh tokens with one automatic refresh retry
|
|
- Protected application shell and root file list
|
|
- Single-file upload to the root directory and authenticated download
|
|
- Server-side pagination with 50 items per page
|
|
|
|
Directory navigation and management, multi-file queues, transfer progress,
|
|
resumable or chunked transfers, account/profile/settings screens, and admin
|
|
screens remain deferred.
|
|
|
|
## Foundation
|
|
|
|
The project foundation contains:
|
|
|
|
- Node.js 24 and npm
|
|
- Vite
|
|
- React
|
|
- TypeScript in strict mode
|
|
- TanStack Query provider
|
|
- Tailwind CSS 4 through its Vite plugin
|
|
- Ant Design provider and components
|
|
- Ant Design icons for application and file actions
|
|
- Oxlint from the Vite template
|
|
- Vitest for framework-independent client and session tests
|
|
- Playwright Test with a headless Chromium smoke test
|
|
- Project-scoped Playwright MCP for interactive browser debugging
|
|
|
|
Ant Design owns reusable UI components and theme tokens. Tailwind CSS is initially limited to application layout, spacing, and responsive utilities.
|
|
|
|
## Planned Structure
|
|
|
|
```text
|
|
web/src/
|
|
├── app/ # Router, providers, and application composition
|
|
├── api/ # API client and generated contracts
|
|
├── components/ # Shared presentation components
|
|
├── features/ # Auth, files, account, and admin features
|
|
├── pages/ # Route entry points
|
|
├── lib/ # Framework-independent utilities
|
|
└── test/ # Shared test setup and fixtures
|
|
```
|
|
|
|
## Deferred Dependencies
|
|
|
|
Some dependencies are suggested for future implementation. Refer these only when the corresponding feature is implemented and propose better choices if any:
|
|
|
|
- `openapi-typescript`: Generate TypeScript API types from the shared OpenAPI document.
|
|
- `openapi-fetch`: Provide a small type-safe Fetch client based on generated OpenAPI types.
|
|
- `openapi-react-query`: Connect generated OpenAPI operations to TanStack Query if handwritten query adapters become repetitive.
|
|
- `zustand`: Manage a cross-route upload queue, bulk selection, or other complex client-only state if React state is insufficient.
|
|
- `pdfjs-dist`: Preview PDF files in the browser when document preview is implemented.
|