wip: optimizations

toju-app/AGENTS.md

@@ -0,0 +1,48 @@
+# Product Client Guidelines
+
+This package is the Angular 21 renderer for the Toju/MetoYou product client.
+
+## Before You Edit
+
+- Use the root commands from the repository root: `npm run build`, `npm run test`, `npm run lint`, and `npm run format` for template changes.
+- Read `src/app/domains/README.md` before adding or moving business logic.
+- See `../doc/typescript.md` for shared TypeScript rules.
+
+## Architecture
+
+- Keep business rules in `src/app/domains/<name>/domain/`.
+- Keep orchestration in `src/app/domains/<name>/application/`.
+- Keep technical adapters in `src/app/domains/<name>/infrastructure/` or `src/app/infrastructure/`.
+- Keep domain-owned UI in `src/app/domains/<name>/feature/` and app-level shells or composition in `src/app/features/`.
+- Outside a domain, import from `src/app/domains/<name>/index.ts` instead of internal files.
+- Put cross-domain contracts in `src/app/shared-kernel/` when two or more domains need them.
+
+## Key Docs
+
+- `src/app/domains/README.md`
+- `src/app/shared-kernel/README.md`
+- `src/app/infrastructure/realtime/README.md`
+
+## Electron Boundary
+
+- In Angular DI code, use `src/app/core/platform/electron/electron-bridge.service.ts`.
+- In non-DI renderer helpers, use `src/app/core/platform/electron/get-electron-api.ts`.
+- When the renderer/Electron contract changes, keep the Angular bridge, preload API, and IPC handlers in sync.
+
+## Mobile / Viewport
+
+- Use `ViewportService` from `src/app/core/platform/viewport.service.ts` for mobile/touch detection. Breakpoint is `md` (max-width 767.98px); exposes `isMobile`, `isTouch`, `isDesktop` signals.
+- Theme-driven grid layouts (`appShell`, `roomLayout`, `dmLayout`) are bypassed on mobile. Do not introduce mobile-specific theme layouts; gate via `@if (isMobile())` in templates instead.
+- The mobile chat-room shell (`features/room/chat-room`) is a 3-page stack (channels -> main -> members); the DM workspace (`domains/direct-message/feature/dm-workspace`) is 2-page (conversations -> chat). Page state is a component-local signal kept in sync with a Swiper carousel (`<swiper-container>` / `<swiper-slide>` from `swiper/element/bundle`, registered in `src/main.ts`); both components declare `CUSTOM_ELEMENTS_SCHEMA`.
+- The Electron-style title bar is hidden on mobile. Screen-share UI must stay hidden on mobile (browsers do not support it reliably on touch devices).
+- Context menus and modal dialogs auto-render as bottom sheets on mobile. `ContextMenuComponent` and `ConfirmDialogComponent` (in `src/app/shared/components/`) inject `ViewportService` and switch their templates between the desktop popover/centered modal and `BottomSheetComponent` (`src/app/shared/components/bottom-sheet/`) on phone-sized viewports. New menus/dialogs should reuse these components rather than rolling their own `fixed inset-0` overlay. For one-off bespoke surfaces, render `<app-bottom-sheet>` directly when `isMobile()`.
+- Tap targets on interactive controls should be at least 44px on mobile. Use `min-h-11` (or explicit `h-11 w-11`) for icon buttons that are tap-only on mobile; desktop sizes can remain smaller via `md:` overrides.
+
+## Templates
+
+- If you touch Angular HTML templates, run `npm run format`.
+- If template property order matters, run `npm run sort:props` or the matching VS Code task.
+
+## Before You Finish
+
+- Validate whether relevant markdown docs or `AGENTS.md` files need updates. If behavior, workflows, commands, or architecture changed, update those docs in the same task.