web(mobile): compact composer under 390px and fix stale title draft in chat info
All checks were successful
CI / test (push) Successful in 41s

This commit is contained in:
2026-03-08 19:20:04 +03:00
parent cb59f1063e
commit 67752b9f47
2 changed files with 42 additions and 5 deletions

View File

@@ -116,7 +116,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
try {
const detail = await getChatDetail(targetChatId);
setChat(detail);
setTitleDraft((prev) => (prev.trim() ? prev : (detail.title ?? "")));
setTitleDraft(detail.title ?? "");
const notificationSettings = await getChatNotificationSettings(targetChatId);
setMuted(notificationSettings.muted);
if (detail.type === "private" && !detail.is_saved && detail.counterpart_user_id) {

View File

@@ -1137,7 +1137,8 @@ export function MessageComposer() {
onClick={() => setShowAttachMenu((v) => !v)}
type="button"
>
📎
<span className="hidden min-[390px]:inline">📎</span>
<span className="inline min-[390px]:hidden"></span>
</button>
{showAttachMenu ? (
<div className="absolute bottom-12 left-0 z-20 w-44 rounded-xl border border-slate-700/80 bg-slate-900/95 p-1.5 shadow-2xl">
@@ -1155,6 +1156,42 @@ export function MessageComposer() {
>
File
</button>
<button
className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block"
onClick={() => {
setShowAttachMenu(false);
setShowGifMenu(false);
setShowFormatMenu(false);
setShowStickerMenu((v) => !v);
}}
type="button"
>
Stickers
</button>
<button
className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block"
onClick={() => {
setShowAttachMenu(false);
setShowStickerMenu(false);
setShowFormatMenu(false);
setShowGifMenu((v) => !v);
}}
type="button"
>
GIF
</button>
<button
className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block"
onClick={() => {
setShowAttachMenu(false);
setShowStickerMenu(false);
setShowGifMenu(false);
setShowFormatMenu((v) => !v);
}}
type="button"
>
Text format
</button>
</div>
) : null}
<input
@@ -1189,7 +1226,7 @@ export function MessageComposer() {
</div>
<button
className="h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 sm:h-[42px] sm:min-w-[42px]"
className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]"
disabled={!canSendInActiveChat}
onClick={() => {
setShowGifMenu(false);
@@ -1202,7 +1239,7 @@ export function MessageComposer() {
</button>
<button
className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[430px]:inline-flex sm:h-[42px] sm:min-w-[42px]"
className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]"
disabled={!canSendInActiveChat}
onClick={() => {
setShowStickerMenu(false);
@@ -1215,7 +1252,7 @@ export function MessageComposer() {
</button>
<button
className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 sm:inline-flex sm:h-[42px] sm:min-w-[42px]"
className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]"
onClick={() => setShowFormatMenu((v) => !v)}
type="button"
title="Text formatting"