176d4301c3
* feat: implement shared loading bar component and polished loading states across the app * feat: align loading states + ensureQueryData changes * fix: lint + bugs * fix: skeleton for manage servers page * fix: merge conflict fix
2.1 KiB
2.1 KiB
name, description, argument-hint
| name | description | argument-hint |
|---|---|---|
| cross-platform-pages | Convert a page to the cross-platform page system so it works in both the website and the desktop app. Use when moving a page into packages/ui/src/layouts/, creating shared or wrapped layouts, or setting up DI contracts for platform abstraction. | <path-to-page> |
Refer to the standards: @standards/frontend/CROSS_PLATFORM_PAGES.md and @standards/frontend/DEPENDENCY_INJECTION.md
Steps
- Read the target page at
$ARGUMENTSand understand its data sources, mutations, and navigation. - Read the standards above to understand the shared vs wrapped distinction and the DI pattern.
- Decide the category:
- Wrapped (
layouts/wrapped/) — if the page uses the same API source on both platforms (e.g. web requests, not Tauri plugins). Just move the page component intopackages/uiand import it from both frontends. - Shared (
layouts/shared/) — if the page has different data-fetching logic per platform (e.g. website usesapi-client, app uses Tauriinvoke). Requires a DI contract.
- Wrapped (
- For shared layouts:
- Define a DI contract interface in
providers/capturing all platform-specific operations. - Create the layout component that injects the context and handles all UI logic.
- Extract reusable stateful logic (search, filtering, selection) into
composables/. - Implement the contract separately in each frontend (
apps/frontend/,apps/app-frontend/).
- Define a DI contract interface in
- For wrapped pages:
- Move the page component into
packages/ui/src/layouts/wrapped/matching the route structure. - Replace any platform-specific imports with shared utilities.
- Import and render the wrapped page from both frontends as a simple component.
- If the layout uses TanStack Query for initial route paint with
ReadyTransition/useReadyState, each platform route shell must callensureQueryDatafor those queries with matching keys and fetchers — see Platform route shells: prefetch withensureQueryDatainstandards/frontend/CROSS_PLATFORM_PAGES.md.
- Move the page component into
- Verify the page renders correctly by checking for missing imports and that all DI contracts are satisfied.