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   |                              |        | +phone       |
| Archived |                              |        | [Tags]       |
|----------|  +---------------------+     |                       |
| Contact 1|  | Message bubbles     |     | ACTIONS               |
| Contact 2|  |                     |     |                       |
| Contact 3|  |                     |     | PHOTOS                |
| Contact 4|  |                     |     | [thumb][thumb][thumb]  |
| ...      |  |                     |     |                       |
|          |  +---------------------+     | DETAILS               |
|          |  [Message Composer]           | 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

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.