Cross Platform Pages

Steps

1. Read the target page at $ARGUMENTS and understand its data sources, mutations, and navigation.
2. Identify platform boundaries: keep identical page implementations wrapped in packages/ui; use dependency injection only when website and desktop data sources differ.
3. 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 into packages/ui and import it from both frontends.
   • Shared (layouts/shared/) — if the page has different data-fetching logic per platform (e.g. website uses api-client, app uses Tauri invoke). Requires a DI contract.
4. 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/website/, apps/app-frontend/).
5. 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 first paint, keep route-shell prefetch keys and fetchers identical to the layout queries.
6. Verify the page renders correctly by checking for missing imports and that all DI contracts are satisfied.