Cursor rule

1---
2globs: apps/web/src/**/*, apps/web/index.html, apps/web/uno.config.ts, apps/web/vite.config.ts, apps/web/typed-router.d.ts
3---
4 
5## Frontend (apps/web)
6 
7- **Role**: Deliver the Telegram search UI. All business logic and side effects should live in `packages/client` / `packages/core`, not in Vue components.
8- **Architecture**:
9  - Use **Composition API** with `<script setup lang="ts">` by default. Avoid Options API for new code.
10  - Keep components small and focused; extract logic into composables in `apps/web/src/composables` or into `packages/client`.
11  - Do not access Telegram or the database directly from `apps/web`; always go through `@tg-search/client`.
12 
13### Routing, Layouts & Navigation
14 
15- Use the auto-generated routes from `vue-router/auto-routes` and `virtual:generated-layouts`.
16- Prefer **file-based routing** conventions over manual route declarations.
17- Guard routes via Pinia stores or client events (auth status), not ad‑hoc `localStorage` checks in components.
18- When adding navigation transitions or loading states:
19  - Integrate with the existing `NProgress` guards in `main.ts` instead of ad‑hoc spinners in every page.
20 
21### State & Data Fetching
22 
23- Global/shared state belongs in **Pinia** stores (either in `apps/web/src/stores` or `packages/client`).
24- For async data and server/core interactions:
25  - Prefer **TanStack Query** (`@tanstack/vue-query`) for request lifecycle, caching, and background refetch.
26  - Model long‑running operations (imports, indexing, sync) as events and progress updates flowing through `@tg-search/client`, not as raw HTTP calls from components.
27- Never call `initDrizzle` or mutate `CoreContext` directly from `apps/web`; that belongs in `packages/client`.
28 
29### UI, Styling & UX
30 
31- Use **UnoCSS** utilities and the existing presets (`unocss`, `unocss-preset-shadcn`, `@proj-airi/unocss-preset-chromatic`) as the primary styling tools.
32- Keep layout and visual primitives reusable:
33  - Extract repeated patterns into small components under `apps/web/src/components`.
34  - Avoid deep CSS overrides; prefer class-based composition.
35- Respect accessibility basics:
36  - Use semantic HTML elements and proper labels for inputs and buttons.
37  - Ensure keyboard navigation works for any new interactive components.
38 
39### Error Handling & Notifications
40 
41- Surface user-facing errors via consistent UI (e.g. toast/notification component or error blocks), not `alert` or silent failures.
42- For unexpected errors:
43  - Log via `@guiiai/logg` only inside `packages/client` / `packages/common`; the web app should avoid its own logging layer beyond dev tooling.
44  - Show a generic message to the user; do not display raw stack traces.
45 
46### Devtools & PGlite
47 
48- PGlite devtools (`@unbird/pglite-inspector`) must remain **development-only**:
49  - Guard setup with `import.meta.env.DEV` as in `main.ts`.
50  - If you add more devtools hooks, wire them behind the same guard and avoid impacting production bundle size significantly.
51 
52