feat(chat, profile, ui): implement chat UX improvements, profile side…

[DevMuhammed3]

Overview

This branch introduces a major improvement to the chat experience by adding a structured profile system, improving UI consistency, and enhancing overall user interaction within conversations.

---

Key Changes

Chat Experience

• Added EmptyChatState for new conversations with guided interaction
• Improved chat flow for first-time messages
• Enhanced chat list and message handling UI

---

Profile System (Sidebar + Modal)

• Introduced ChatSidebar to display real user data:

  • Avatar
  • Name
  • Bio (conditionally rendered)
  • Mutual zones
  • Mutual friends

• Added ProfileModal:

  • Centered modal with overlay
  • Displays full user profile details
  • Supports close via ESC and outside click

---

Reusable Components

• Created reusable Avatar and UserAvatar components with fallback logic
• Standardized avatar rendering across the app

---

Chat Header

• Implemented ChatHeader with:

  • User info
  • Online / status handling
  • Action buttons (call, video, more)

---

Friends System UI Improvements

• Updated:

  • Friend list
  • Pending requests
  • Blocked users

• Fixed inconsistencies in friend state rendering

---

UI / UX Improvements

• Introduced better layout hierarchy and spacing
• Converted sidebar into card-based structure
• Improved button styles and interaction states
• Removed empty or misleading UI states

---

Cleanup & Refactor

• Removed deprecated components:

  • ZoneDashboardSheet
  • ZoneSettingsModal

• Refactored chat-related components for better structure

---

Backend Integration

• Integrated real data from /users/:username

• Added support for:

  • friendStatus
  • mutualFriends
  • mutualZones

• Ensured UI strictly reflects backend data (no fake states)

---

Notes

• Designed for scalability (future real-time updates, typing indicators, etc.)
• All UI decisions are based on real data only
• Improves overall product feel from prototype → production-ready

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
open-chat-frontend	Ready	Preview, Comment	Apr 12, 2026 11:07pm

[qodo-code-review]

Review Summary by Qodo

Chat UX improvements with profile sidebar, message management, and design system standardization

✨ Enhancement

Walkthroughs

Description

• **Chat UX Improvements**: Integrated ChatHeader, ChatSidebar, and ProfileModal components
  for enhanced user profile display and interaction within conversations
• **Profile System**: Implemented structured profile sidebar and modal with user data (avatar, name,
  bio, mutual friends, mutual zones, online status)
• **Backend Relationship Data**: Enhanced /users/:username endpoint with friend status detection,
  mutual friends calculation, and mutual zones computation
• **Reusable Components**: Created UserAvatar component with fallback logic and standardized
  avatar rendering across the app; added EmptyChatState for new conversations
• **Message Management**: Added message editing, deletion, and pinning functionality with mutations,
  queries, and UI controls in channel pages
• **Theme Consistency**: Introduced semantic CSS utility classes (.bg-sidebar, .bg-main,
  .bg-surface) and updated all settings/layout pages to use design tokens instead of hardcoded
  colors
• **Emoji Picker**: Integrated lazy-loaded emoji picker component using @emoji-mart/react library
• **Zone Settings**: Created new ZoneSettings component replacing deprecated ZoneDashboardSheet
  and ZoneSettingsModal with tabbed interface for zone management
• **Input Enhancement**: Added useInputWithCursor hook for cursor-aware text insertion
• **Validation**: Added file size validation (2MB max) for avatar uploads and zone name length
  validation (50 chars max)
• **Responsive Design**: Improved mobile responsiveness with sheet-based sidebars and responsive
  layouts
• **Component Refactoring**: Replaced custom Avatar implementations with reusable UserAvatar
  component across friend lists, chat lists, voice participants, and blocked users
• **Email Verification**: Added VerifyEmailDialog component for modal-based email verification
  flow

Diagram

flowchart LR
  A["Backend User Endpoint<br/>Enhanced with Relationships"] -->|"friend status<br/>mutual friends<br/>mutual zones"| B["Frontend Chat Page"]
  B -->|"displays"| C["ChatHeader<br/>ChatSidebar<br/>ProfileModal"]
  C -->|"uses"| D["UserAvatar<br/>Component"]
  B -->|"manages"| E["Messages<br/>Edit/Delete/Pin"]
  E -->|"queries/mutations"| F["Message API"]
  B -->|"renders"| G["EmojiPicker<br/>GifPicker"]
  H["Theme System<br/>CSS Variables"] -->|"applied to"| I["Settings Pages<br/>Layout Pages<br/>Zone Pages"]
  J["ZoneSettings<br/>Component"] -->|"replaces"| K["Deprecated<br/>Components"]

Loading

File Changes

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1)   📘 Rule violations (0)   📎 Requirement gaps (0)   🖥 UI issues (0)   🎨 UX Issues (0)

🐞\ ≡ Correctness (1)

1. Unused Button import 🐞 ≡

Description

ChatSidebar.tsx imports Button but never uses it. Because the repo enables noUnusedLocals,
this will fail TypeScript compilation and break the frontend build.

Code

apps/frontend/src/components/ChatSidebar.tsx[3]

+import { Button } from 'packages/ui'

Evidence

The new ChatSidebar file imports Button, but the component renders native `` elements and never
references Button; TypeScript is configured to error on unused locals/imports.

apps/frontend/src/components/ChatSidebar.tsx[1-6]
apps/frontend/src/components/ChatSidebar.tsx[120-165]
tsconfig.app.json[2-20]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`apps/frontend/src/components/ChatSidebar.tsx` imports `Button` but never uses it. With `noUnusedLocals` enabled, this causes a TypeScript compile error.
### Issue Context
The component uses native `<button>` elements instead of the `Button` component.
### Fix Focus Areas
- apps/frontend/src/components/ChatSidebar.tsx[1-6]
### Suggested fix
Remove `import { Button } from 'packages/ui'` (or replace the native `<button>` elements with `<Button>` if that was the intent).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Unused cn import ☑ 🐞 ≡

Description

ProfileModal.tsx imports cn but never uses it. Because the repo enables noUnusedLocals, this
will fail TypeScript compilation and break the frontend build.

Code

apps/frontend/src/components/ProfileModal.tsx[5]

+import { cn } from '@openchat/lib'

Evidence

The new ProfileModal file imports cn but does not reference it anywhere; TypeScript is
configured to error on unused locals/imports.

apps/frontend/src/components/ProfileModal.tsx[1-6]
tsconfig.app.json[2-20]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`apps/frontend/src/components/ProfileModal.tsx` imports `cn` from `@openchat/lib` but never uses it. With `noUnusedLocals` enabled, this causes a TypeScript compile error.
### Issue Context
The component uses static `className` strings and does not need `cn`.
### Fix Focus Areas
- apps/frontend/src/components/ProfileModal.tsx[1-6]
### Suggested fix
Remove `import { cn } from '@openchat/lib'` (or refactor className usage to actually use `cn` if needed).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[qodo-code-review]

1. Unused button import 🐞 Bug ≡ Correctness

ChatSidebar.tsx imports Button but never uses it. Because the repo enables noUnusedLocals,
this will fail TypeScript compilation and break the frontend build.

Agent Prompt

### Issue description
`apps/frontend/src/components/ChatSidebar.tsx` imports `Button` but never uses it. With `noUnusedLocals` enabled, this causes a TypeScript compile error.

### Issue Context
The component uses native `<button>` elements instead of the `Button` component.

### Fix Focus Areas
- apps/frontend/src/components/ChatSidebar.tsx[1-6]

### Suggested fix
Remove `import { Button } from 'packages/ui'` (or replace the native `<button>` elements with `<Button>` if that was the intent).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools