Three-Column CRM Layout

Purpose

The CRM layout transforms the interface from a WhatsApp clone into a productivity tool. Three persistent columns — contact list, conversation, and CRM sidebar — keep all information visible without overlays or popups.

Architecture

┌──────────────────────────────────────────────────────────────────┐
│ OMELAS CRM   ● READY   +504...   67 chats          [Nav Btns]  │  ← TopBar (44px)
├───────────┬──────────────────────────────┬───────────────────────┤
│ [Filters] │  Contact Name                │ CRM PROFILE           │
│ All Warm  │  ~pushname · +phone          │ Avatar | Name         │
│ Action New│                              │        | +phone       │
│ Archived  │  ┌─────────────────────┐     │        | [Tags]       │
│───────────│  │ Message bubbles     │     │                       │
│ Contact 1 │  │                     │     │ ⚡ ACTIONS            │
│ Contact 2 │  │                     │     │ □ Follow up           │
│ Contact 3 │  │                     │     │                       │
│ Contact 4 │  │                     │     │ 📷 PHOTOS             │
│ ...       │  │                     │     │ [thumb][thumb][thumb]  │
│           │  └─────────────────────┘     │                       │
│           │  [Message Composer]           │ 👤 DETAILS            │
│           │                              │ 📝 NOTES              │
├───────────┴──────────────────────────────┴───────────────────────┤
│  280-340px        flexible                     440px             │
└──────────────────────────────────────────────────────────────────┘

Key Files

File	Role
`frontend/src/pages/ChatPage.tsx`	CSS grid layout: `gridTemplateColumns: contactListWidth 1fr 440px`
`frontend/src/components/TopBar.tsx`	Brand label, status pill, simplified navigation
`frontend/src/components/ChatList.tsx`	Filter chips, resizable width, tag-based filtering
`frontend/src/components/ChatListItem.tsx`	Edge-to-edge 60px avatars, tags, action badge
`frontend/src/components/ConversationView.tsx`	Chat header with Sync/Deep buttons, action banner
`frontend/src/components/CrmPanel.tsx`	Persistent right sidebar replacing ContactProfile overlay

Contact List Features

Filter chips: All, Warm, Action, New, Archived — filter by tag or reminder status
Resizable width: 280-340px, stored in localStorage
Zoom controls: +/- buttons scale contact items and expand sidebar width (300 + offset * 20 px)
Edge-to-edge avatars: 60x60 square with object-cover, initial-letter fallback
Search: Filters by name and phone number
Active indicator: Green left border on selected contact

CRM Panel Sections (all collapsible)

Contact Hero — Large avatar, name, pushname, phone, colored tag chips
Quick Actions — Add Action, Note, Tag buttons
Actions & Reminders — Create/view/complete reminders with due dates
Photos — 4-column thumbnail grid, auto-refreshes after media sync
Contact Details — Editable form: name, company, email, notes, social handles
AI Auto-Reply — Personality picker for auto-reply assignment
Activity — Timeline of recent events, “Where were we?” AI summary

Theme

Fonts: IBM Plex Sans (body), IBM Plex Mono (labels, timestamps, tags)
Colors: Dark base (#0e0f11), surface (#15171a), raised (#1c1f24), accent (#00c896)
Bubbles: Incoming (#1c1f24), Outgoing (#003d2d with #005040 border)

Status

Complete and deployed. All functionality preserved from previous overlay-based design.