benya/Messenger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): redesign chat ui in telegram-like style
All checks were successful
CI / test (push) Successful in 21s
Details

Browse Source 
- update overall layout for desktop/mobile chat navigation

- restyle dialogs list, message bubbles and composer

- add atmospheric background and unified panel styling
This commit is contained in:
Alex
2026-03-08 00:10:08 +03:00
parent a4d7294628
commit 0a602e4078
6 changed files with 188 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/components/ChatList.tsx
View File

@@ -3,22 +3,53 @@ import { NewChatPanel } from "./NewChatPanel";
export function ChatList() {
const chats = useChatStore((s) => s.chats);
const messagesByChat = useChatStore((s) => s.messagesByChat);
const activeChatId = useChatStore((s) => s.activeChatId);
const setActiveChatId = useChatStore((s) => s.setActiveChatId);
return (
<aside className="w-full max-w-xs border-r border-slate-700 bg-panel">
<div className="border-b border-slate-700 p-3 text-sm font-semibold">Chats</div>
<aside className="flex h-full w-full max-w-xs flex-col bg-slate-900/60">
<div className="border-b border-slate-700/50 px-4 py-3">
<div className="mb-3 flex items-center justify-between">
<p className="text-base font-semibold tracking-wide">Chats</p>
<span className="rounded-full bg-slate-700/70 px-2 py-1 text-[11px] text-slate-200">{chats.length}</span>
</div>
<label className="block">
<input
className="w-full rounded-xl border border-slate-700/80 bg-slate-800/80 px-3 py-2 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
placeholder="Search chats..."
disabled
value=""
readOnly
/>
</label>
</div>
<NewChatPanel />
<div className="max-h-[calc(100vh-56px)] overflow-auto">
<div className="tg-scrollbar flex-1 overflow-auto">
{chats.map((chat) => (
<button
className={`block w-full border-b border-slate-800 px-3 py-3 text-left ${activeChatId === chat.id ? "bg-slate-800" : "hover:bg-slate-800/40"}`}
className={`block w-full border-b border-slate-800/60 px-4 py-3 text-left transition ${
activeChatId === chat.id ? "bg-sky-500/20" : "hover:bg-slate-800/65"
}`}
key={chat.id}
onClick={() => setActiveChatId(chat.id)}
>
<p className="font-medium">{chat.title || `${chat.type} #${chat.id}`}</p>
<p className="text-xs text-slate-400">{chat.type}</p>
<div className="flex items-start gap-3">
<div className="mt-0.5 flex h-10 w-10 items-center justify-center rounded-full bg-sky-500/30 text-sm font-semibold uppercase text-sky-100">
{(chat.title || chat.type).slice(0, 1)}
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-2">
<p className="truncate text-sm font-semibold">{chat.title || `${chat.type} #${chat.id}`}</p>
<span className="shrink-0 text-[11px] text-slate-400">
{messagesByChat[chat.id]?.length ? "now" : ""}
</span>
</div>
<p className="truncate text-xs text-slate-400">{chat.type}</p>
</div>
</div>
</button>
))}
</div>