web(mobile): compact composer under 390px and fix stale title draft in chat info

web/src/components/ChatInfoPanel.tsx

@@ -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) {

web/src/components/MessageComposer.tsx

@@ -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"