150 lines
8.8 KiB
Markdown
150 lines
8.8 KiB
Markdown
# AGMail Inbox UI — Expectation vs Reality
|
||
|
||
Reference: target mock (populated, high-density inbox).
|
||
Current: implementation screenshot (sparse real data, 3 emails).
|
||
|
||
---
|
||
|
||
## 1. Email rows — structure & density
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Grid columns | Fixed: checkbox, star, avatar, sender, subject—preview, labels, attachment, date/actions | Partial grid; labels column collapses when empty; date/actions compete for space | Labels need reserved column; rail must overlay date |
|
||
| Row height | Fixed 44–48px; hover never changes height | Row 1 visibly taller on hover | **Bug:** hover actions affect layout |
|
||
| Hover actions | 30×30 hit areas, 14–16px icons, replace date in-place | Icons crammed at far right; row expands | Absolute overlay in date rail |
|
||
| Unread | Blue dot + semibold sender/subject + warmer row bg | Weak/unused unread pip; read/unread similar | Stronger unread treatment |
|
||
| Stars | Outline inactive, amber fill active | Present but low contrast | Tune star states |
|
||
| Labels | Dedicated column, vertically aligned across rows | Labels drift near date when present | Fixed label column always reserved |
|
||
| Attachments | Paperclip column before date | Works when present | Keep dedicated column |
|
||
| Sender avatars | Brand logos + deterministic initials | All senders same purple SD | Vary initials colors; logos when domain known |
|
||
| Overflow | Three-dot menu at row end | Missing | Optional future |
|
||
|
||
## 2. Category navigation
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Zero badges | Hidden | Hidden ✓ | OK |
|
||
| Non-zero badges | Coral pills when data exists | None shown (only 3 emails, counts may be 0) | Mechanism OK; needs real unread per category |
|
||
| Active tab | 600 weight, coral underline under label width | Present but weak | Stronger active typography |
|
||
| Icons | Distinct per category | Present | OK |
|
||
| Pagination in tab bar | `1–10 of 243` + controls on right | `1–3` floating in tab bar only | Move to footer control cluster |
|
||
|
||
## 3. Surface hierarchy
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Canvas | Warm off-white, slightly darker than cards | `#F4F3F1` — very close to white cards | Darken canvas ~2–3% |
|
||
| Inbox card | White, subtle shadow, light border | White, very subtle contrast | Increase shadow, not border |
|
||
| Layering | Canvas → workspace tone → white cards | Mostly two layers | Add workspace header tone |
|
||
|
||
## 4. Right panel — AG Agent
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Empty state | Caught-up card when all metrics zero | Present ✓ | Improve green success tint |
|
||
| Populated state | 4 metric cards + greeting + agenda + needs attention | Only shows when `hasSignals`; user sees empty with 3 emails | Threshold/data wiring OK; greeting missing in populated mode |
|
||
| Quick actions | Equal-size buttons, no wrap | "Summarize inbox" wraps | Fix button width/height |
|
||
| Today's agenda | Time + title + venue + color bar | Implemented when meeting emails exist | Needs richer extraction |
|
||
| Needs attention | Avatar + name + status + age | Text only | Add mini avatars |
|
||
| Ask input | Paperclip + send | Send only | Add attach icon |
|
||
| Header | 15px/650 title, larger spark container | Slightly small | Increase presence |
|
||
|
||
## 5. Sidebar
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Badges | Inbox 12, Drafts 3, labels, Action Items 3 | Only Clients 1 | Mechanism exists; apply consistent badge component |
|
||
| Label badge style | Dark translucent pill | Same coral as inbox | Neutral pill for labels |
|
||
| More | Collapsible after Personal | Missing | Add More row |
|
||
| Compose | Gradient + coral shadow + split dropdown | Flat coral, caret not separate hit area | Split button styling |
|
||
| Profile block | Anchored bottom, not clipped | May clip on short viewports | Flex column + `margin-top: auto` |
|
||
| Active inbox | Coral indicator + count | Active state weak | Polish active row |
|
||
|
||
## 6. Header / toolbar
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Search width | Wide command surface | OK but large dead zone before filter | Tighten action cluster |
|
||
| Icon contrast | Secondary but readable | Too faint (~disabled) | +10–15% contrast |
|
||
| Account block | Name 12px/600, email 10px, chevron | Typography too small | Increase legibility |
|
||
| Ask Agent | Lavender pill | Present ✓ | OK |
|
||
|
||
## 7. Pagination / list controls
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Footer cluster | Range + prev/next + density toggles | Only when paginating; minimal | Always show when emails exist |
|
||
| Range format | `1–10 of 243` | `1–3` in tab bar | Full footer cluster |
|
||
|
||
## 8. Notes utility
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Zero notes | Low emphasis | Same weight as agent card | Reduce contrast when `Notes (0)` |
|
||
| With notes | More visible | Collapsible ✓ | OK |
|
||
|
||
## 9. Micro-interactions
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Row hover | Actions fade in, no layout shift | Layout shift | Fix overlay |
|
||
| Nav/category hover | Subtle surfaces | Partial | Consistent transitions |
|
||
| Compose press | Slight scale/brightness | Minimal | Add press feedback |
|
||
|
||
## 10. Color anchors
|
||
|
||
| Area | Expected | Current | Gap |
|
||
|------|----------|---------|-----|
|
||
| Contextual labels | Blue, green, amber, lavender pills in rows | Some labels on row 2 | More label types in `emailLabels` ✓ |
|
||
| Sender diversity | Brand colors/logos | Same purple for self-sent | Deterministic initials colors |
|
||
|
||
---
|
||
|
||
## Priority fix order
|
||
|
||
1. **Row height bug** — hover rail overlay (blocking)
|
||
2. **Surface contrast** — canvas + shadow
|
||
3. **Row grid** — fixed columns, unread, labels column
|
||
4. **Pagination footer** — full control cluster
|
||
5. **Sidebar** — More, compose split, profile anchor, badge variants
|
||
6. **Agent panel** — greeting, quick action sizing, attention avatars, empty-state tint
|
||
7. **Header** — icon contrast, account typography, toolbar spacing
|
||
8. **Notes** — zero-state de-emphasis
|
||
|
||
## Visual rule
|
||
|
||
Every component: **absent → present → interactive**. Zero data reduces complexity; real data increases density. **No state change may alter row dimensions.**
|
||
|
||
---
|
||
|
||
## 11. Post-thickening review (current vs reference)
|
||
|
||
After increasing AG Agent panel weight (wider rail, thicker borders/shadows, 44px quick actions, unified notes footer), these gaps remain:
|
||
|
||
| Area | Expected | Current | Still needed |
|
||
|------|----------|---------|--------------|
|
||
| **Populated agent state** | Full dashboard with metrics, agenda, needs attention | Empty state only (no real signals in 3-email inbox) | Correct behavior — verify with meeting/invoice/action-item emails |
|
||
| **Metric card copy** | "12 Important emails" inline with icon | Number on own line above label | Optional: inline number + label like reference |
|
||
| **Panel header** | Collapse chevron on right | Static header | Add optional collapse affordance |
|
||
| **Quick action colors** | Each button has distinct icon tint (sparkle, pencil, search, list) | Only first two are purple-tinted | Tint all four icon containers subtly |
|
||
| **Agenda rows** | Clickable with chevron, colored left bar | Styled but no navigation | Wire `View calendar` + row click handlers |
|
||
| **Needs attention** | Company avatars with brand colors | Initials via SenderAvatar | OK when diverse senders exist |
|
||
| **Ask input** | Send button outside input on right | Send inside input row | Minor — reference shows external send pill |
|
||
| **Notes footer** | Attached to panel, flower icon | Pin icon, now visually attached ✓ | Swap icon to match reference if desired |
|
||
| **Inbox rows** | Brand logos, label column alignment | Self-sent SD avatars dominate | Needs diverse real senders |
|
||
| **Category badges** | Non-zero unread per tab | Hidden when zero ✓ | Will appear with unread mail |
|
||
| **Sidebar badges** | Inbox, Drafts, labels, Action Items | Only Clients 1 | Wire remaining counts from API/stats |
|
||
| **Sidebar More** | Expands hidden labels | Toggle present, no expansion | Implement label overflow list |
|
||
| **Pagination** | `1–10 of 243` | `1–3` without total | Needs total count from API |
|
||
| **Row overflow menu** | Three-dot at row end | Missing | Add optional overflow column |
|
||
| **Micro-interactions** | Compose press, category hover, selected row coral | Partial | Polish pass on remaining hovers |
|
||
|
||
### Thickening changes applied
|
||
|
||
- Rail width: 292–308px (was 270–288px)
|
||
- Agent panel: heavier shadow, stronger border, 20px top padding
|
||
- Quick actions: 44px height, 11px semibold labels, no ellipsis truncation
|
||
- Caught-up card: stronger green tint + inset highlight
|
||
- Stat cards: gradient fills, 1px tinted borders, 24px numbers
|
||
- Notes: attached footer card (shared border with agent panel)
|
||
- Ask input: 42px, white fill, focus ring
|