# Client chrome — handoff

## Summary

App shell UI outside core chat: custom title bar (Electron), splash screen, welcome page, account switcher, update notifications, sync status, spec version warnings, and feature capability checks.

## User-facing behavior

- **Title bar**: drag region, window controls, room title, account menu (desktop)
- **Splash**: loading spinner during client init
- **Welcome page**: first-run / empty state hints
- **Account switcher**: switch between logged-in accounts (if multi-session)
- **Update notification**: new version available (electron-updater)
- **Feature check**: block unsupported browsers
- **Spec versions**: warn on old homeserver

## Architecture

```
ClientRoot → TitleBar + AccountSwitcher + children
SplashScreen during matrix init
WelcomePage on empty states
UpdateNotification component
FeatureCheck wraps App
SpecVersions in ClientRoot
```

## Key files

| Path | Role |
|------|------|
| `cinny/src/app/components/title-bar/TitleBar.tsx` | Desktop title bar |
| `cinny/src/app/components/splash-screen/SplashScreen.tsx` | Splash |
| `cinny/src/app/pages/client/WelcomePage.tsx` | Welcome / download links |
| `cinny/src/app/components/account-switcher/AccountSwitcher.tsx` | Multi-account |
| `cinny/src/app/components/update-notification/UpdateNotification.tsx` | Auto-update UI |
| `cinny/src/app/pages/FeatureCheck.tsx` | Browser capability gate |
| `cinny/src/app/pages/client/SpecVersions.tsx` | HS version warning |
| `cinny/src/app/pages/client/SyncStatus.tsx` | Sync indicator |
| `cinny/src/app/pages/ConfigConfig.tsx` | Config load error UI |
| `cinny/src/app/components/ClientConfigLoader.tsx` | Load config.json |

## Data model

| Key | Storage |
|-----|---------|
| Sessions | multi-account in sessions.ts |
| electron-store | window bounds (main process) |

## Dependencies

- Electron IPC for window controls
- `electron-updater` for updates
- `clientConfig` JSON (homeserver default, hash router, etc.)

## Integration points

- **electron-shell**: title bar IPC
- **matrix-client**: splash until sync ready
- **authentication**: account switcher sessions

## Testing

### Manual

1. Desktop: minimize/maximize/close via title bar.
2. Slow network: splash shows until ready.
3. Trigger update check in dev (if configured).
4. Unsupported browser: FeatureCheck message.

### Automated

- None

## Known issues & gotchas

- Title bar only on Electron — web uses browser chrome
- Welcome page links point to GitHub releases — verify URLs match your distribution (Gitea vs GitHub)
- `FeatureCheck` may block older WebViews on Android

## Future work

- Unified status bar (sync + update + call status)
- macOS traffic lights styling

## Related docs

- [electron-shell HANDOFF](../electron-shell/HANDOFF.md)
- [matrix-client HANDOFF](../matrix-client/HANDOFF.md)
- [authentication HANDOFF](../authentication/HANDOFF.md)

## Add your extra things here

- Title bar shows `Paarrot` prefix + dynamic room/space title suffix
- `ClientConfigLoader` reads public config — document config.json schema in client config handoff if split later