cesnimda
4ce2df0a2b
CI / backend (push) Successful in 52s
CI / frontend (push) Successful in 14s
Deploy Staging / deploy (push) Successful in 18s
CI / backend (pull_request) Successful in 52s
CI / frontend (pull_request) Successful in 15s
Security / secrets (push) Successful in 4s
Security / dependencies (push) Successful in 55s
Security / secrets (pull_request) Successful in 4s
Security / dependencies (pull_request) Successful in 54s
76 lines
3.8 KiB
Markdown
76 lines
3.8 KiB
Markdown
# 07 — UX Flows (Part 7)
|
|
|
|
Applies the [Design Brief](../00-design-brief.md) (Notion/Arc-professional, dark-first,
|
|
green accent, pointer-first, responsive). **Keep it simple** — these are utility surfaces,
|
|
not the daily driver.
|
|
|
|
## 1. Provider selection on login
|
|
A calm, centred card — the *only* thing on screen.
|
|
```
|
|
InboxIntel
|
|
───────────────────────────
|
|
Sign in to continue
|
|
[ ▸ Continue with Google ]
|
|
[ ▸ Continue with Microsoft ]
|
|
( IMAP — coming soon, disabled )
|
|
───────────────────────────
|
|
Your email stays on your machine.
|
|
```
|
|
- Only **enabled** providers show (driven by `provider.*` flags).
|
|
- One click → provider OAuth → back into the app. First-timer lands on an empty, friendly
|
|
inbox with a "syncing your mail…" state.
|
|
|
|
## 2. Connected accounts page
|
|
Reached from the account switcher or Settings → Accounts.
|
|
```
|
|
Accounts [ + Add account ]
|
|
┌─────────────────────────────────────────────────────────┐
|
|
│ 🟢 Google me@gmail.com Synced 2m ago ⋯ │
|
|
│ 🟢 Microsoft me@outlook.com Synced 5m ago ⋯ │
|
|
│ 🟠 Google old@gmail.com Reconnect needed → [Reconnect]│
|
|
└─────────────────────────────────────────────────────────┘
|
|
```
|
|
- Status badges: 🟢 Active · 🟠 ReauthNeeded (with **Reconnect**) · ⚪ Disabled.
|
|
- Per-account row menu (⋯): set as default · sync now · rename · **remove account** (confirm +
|
|
explains local data deletion).
|
|
- **+ Add account** → provider picker → OAuth in link-mode → new row appears.
|
|
- **Account switcher** (top bar): "All accounts" (unified) or pick one to scope the inbox/search.
|
|
|
|
## 3. Settings page (user)
|
|
Left sub-nav, one panel at a time — no overwhelm.
|
|
```
|
|
Settings
|
|
Appearance ▸ Theme (System/Light/Dark) · density · layout
|
|
Accounts ▸ (the page above)
|
|
Notifications ▸ channels · quiet hours · priority-only
|
|
AI ▸ (visible only if ai.enabled; see below)
|
|
Privacy ▸ data, export, clear search history
|
|
```
|
|
|
|
## 4. AI toggle visibility
|
|
- If **`ai.enabled` (system) is OFF** → the **AI section is hidden entirely** (or shown as a
|
|
single disabled note: "AI features are turned off by your administrator"). No dead toggles.
|
|
- If **ON** → a master **"Use AI features"** switch (user opt-in) + per-feature toggles
|
|
(Summaries · Reply suggestions · Semantic search · Ask your inbox), each reflecting its
|
|
`ai.<feature>` flag. Toggling off a feature instantly falls back to the non-AI path.
|
|
- A small **status chip** ("Local · Ollama · ready") reassures it's on-device.
|
|
|
|
## 5. Admin dashboard
|
|
Only visible to Admins (nav item appears for the Admin role).
|
|
```
|
|
Admin
|
|
Overview ▸ sync health · Ollama/VRAM · sessions · errors (cards)
|
|
Users ▸ table: name · role · status · last login · [actions]
|
|
Flags ▸ toggles grouped: AI · Providers · Maintenance
|
|
System ▸ maintenance mode · registration · defaults
|
|
Audit ▸ searchable event log
|
|
```
|
|
- Clean tables + toggles; destructive/sensitive actions show a **confirm dialog** (step-up).
|
|
- Maintenance mode shows a **global banner** to all users while active.
|
|
|
|
## Cross-cutting
|
|
- **Reduced-motion & keyboard** reachability on all of the above (baseline a11y).
|
|
- **Empty/loading/error states** per the design system (skeletons, friendly empties, calm errors).
|
|
- Fully **responsive**: settings/admin sub-nav collapses to a top tab bar on mobile; the login
|
|
card is centred on all sizes.
|