# 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.
- On mobile discovery routes (`/dashboard`, `/people`, `/servers`, …) the global `app.html` servers rail stays visible (`shouldShowMobileAppServersRail` in `core/platform/mobile-shell-layout.rules.ts`); routed pages render full-width in `appWorkspace` and must not embed a second `<app-servers-rail>`/Swiper stack.
- 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`. Chat/DM/call routes keep their embedded rail inside Swiper and hide the global app-shell rail.
- 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.

## i18n

- User-visible UI strings use `@ngx-translate/core` (same stack as `website/`). Edit fragment catalogs in `public/i18n/catalog/*.json`, then run `npm run i18n:sync` from the repo root to regenerate `public/i18n/en.json`. Only `en` ships today.
- Bootstrap and locale rules: `src/app/core/i18n/`. Import `APP_TRANSLATE_IMPORTS` in standalone components that use the `translate` pipe; use `AppI18nService.instant()` in TypeScript.
- Vitest harnesses: `provideAppI18nForTests()` from `src/app/core/i18n/app-i18n.testing.ts`.
- See `agents-docs/features/app-i18n.md` for the full contract.

## 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.