# Project Memory - UI/UX Notes

## Last Updated: 2026-05-29

---

## Chat Workspace Layout

### Structure
- **Left Panel**: Sidebar with navigation + user profile + filter tabs
- **Center Panel**: Conversation list with search + filters
- **Right Panel**: Chat area with messages + composer
- **Detail Panel**: Contact info sidebar (collapsible)

### Message Input (Textarea)
- **Element**: `<textarea id="messageInput" rows="1">`
- **Auto-grow**: Starts at 1 line, grows up to ~7 lines (150px max)
- **Keyboard**: Enter = send message, Shift+Enter = new line
- **Scrollbar**: Appears when content exceeds 150px; thin custom scrollbar
- **Firefox**: scrollbar-width thin, scrollbar-color
- **Placeholder**: "اكتب رد الموظف هنا"
- **Focus**: Border highlights green (WhatsApp theme)

### Sidebar
- **Collapsible**: Toggle button to collapse/expand
- **Persistence**: State saved in localStorage
- **Items**: 9 navigation items (dashboard, conversations, queue, contacts, assignments, team, reports, permissions, settings)

### Notifications
- **Visual**: Pulsing green background on conversation, animated badge with count
- **Audio**: Two-tone beep via Web Audio API
- **Trigger**: New incoming message from customer

### Quick Replies
- 6 predefined buttons above message input
- `useQuickReply()` JS function inserts text into textarea
- Auto-grow triggered after insertion

### Chat Focus Mode
- Hides Filament sidebar and topbar
- Custom CSS overrides for `.fi-topbar`, `.fi-sidebar`
- Full-screen workspace experience

### Color Scheme (WhatsApp-inspired)
- Primary green: `#25D366` (var `--wa`)
- Dark green: `#128C7E` (var `--wa-dark`)
- Light green: `#DCF8C6` (var `--wa-soft`) — outgoing message bubbles
- Background: `#ECE5DD` → `#F0F2F5` gradient
- Dark mode supported

### RTL Support
- Arabic interface, right-to-left layout
- Sidebar on right side
- Messages flow RTL