Toju/toju-app/AGENTS.md

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.