From 68ba97bb905c6b85f3d583244eb20d7edc06ab93 Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 11:27:16 +0300
Subject: [PATCH] fix(web): unify mic/send button and restore scroll-down

- show one action button in composer: mic when empty, send when text exists

- add floating scroll-to-bottom button in message list

- exclude non-text/media messages from Chat Info links list to avoid duplicates
---
 web/src/components/ChatInfoPanel.tsx   | 27 +++++++++++------
 web/src/components/MessageComposer.tsx | 39 ++++++++++++++-----------
 web/src/components/MessageList.tsx     | 40 +++++++++++++++++++++++++-
 3 files changed, 80 insertions(+), 26 deletions(-)

diff --git a/web/src/components/ChatInfoPanel.tsx b/web/src/components/ChatInfoPanel.tsx
index d649e0e..0a54b10 100644
--- a/web/src/components/ChatInfoPanel.tsx
+++ b/web/src/components/ChatInfoPanel.tsx
@@ -61,9 +61,20 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
     }
     return members.find((m) => m.user_id === me?.id)?.role;
   }, [chat?.my_role, members, me?.id]);
+  const myRoleNormalized = useMemo(() => {
+    if (!myRole) {
+      return null;
+    }
+    const role = String(myRole).toLowerCase();
+    if (role === "owner" || role === "admin" || role === "member") {
+      return role;
+    }
+    return null;
+  }, [myRole]);
   const isGroupLike = chat?.type === "group" || chat?.type === "channel";
   const showMembersSection = Boolean(chat && isGroupLike && !chat.is_saved);
-  const canManageMembers = Boolean(isGroupLike && (myRole === "owner" || myRole === "admin"));
+  const canManageMembers = Boolean(isGroupLike && (myRoleNormalized === "owner" || myRoleNormalized === "admin"));
+  const canEditTitle = Boolean(isGroupLike && (myRoleNormalized === "owner" || myRoleNormalized === "admin"));
   const photoAttachments = useMemo(() => attachments.filter((item) => item.file_type.startsWith("image/")).sort((a, b) => b.id - a.id), [attachments]);
   const videoAttachments = useMemo(() => attachments.filter((item) => item.file_type.startsWith("video/")).sort((a, b) => b.id - a.id), [attachments]);
   const voiceAttachments = useMemo(() => attachments.filter((item) => item.message_type === "voice").sort((a, b) => b.id - a.id), [attachments]);
@@ -259,7 +270,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
                 </button>
               </div>
               <p className="mb-2 text-xs text-slate-300">{muted ? "Chat notifications are muted." : "Chat notifications are enabled."}</p>
-              {isGroupLike ? (
+              {isGroupLike && canEditTitle ? (
                 <>
                   <p className="mt-2 text-xs text-slate-400">Title</p>
                   <input
@@ -321,7 +332,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
                     const canOpenMemberMenu =
                       canManageMembers &&
                       !isSelf &&
-                      (myRole === "owner" || (myRole === "admin" && member.role === "member"));
+                      (myRoleNormalized === "owner" || (myRoleNormalized === "admin" && member.role === "member"));
                     return (
                       <button
                         className="block w-full rounded border border-slate-700/60 bg-slate-900/60 p-2 text-left hover:bg-slate-800/70"
@@ -652,7 +663,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
           style={{ left: memberCtx.x, top: memberCtx.y }}
           onClick={(event) => event.stopPropagation()}
         >
-          {myRole === "owner" && memberCtx.member.role === "member" ? (
+          {myRoleNormalized === "owner" && memberCtx.member.role === "member" ? (
             <button
               className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
               onClick={async () => {
@@ -670,7 +681,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
               Make admin
             </button>
           ) : null}
-          {myRole === "owner" && memberCtx.member.role === "admin" ? (
+          {myRoleNormalized === "owner" && memberCtx.member.role === "admin" ? (
             <button
               className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
               onClick={async () => {
@@ -688,7 +699,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
               Remove admin rights
             </button>
           ) : null}
-          {myRole === "owner" && memberCtx.member.role !== "owner" ? (
+          {myRoleNormalized === "owner" && memberCtx.member.role !== "owner" ? (
             <button
               className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
               onClick={async () => {
@@ -706,7 +717,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
               Transfer ownership
             </button>
           ) : null}
-          {(myRole === "owner" || (myRole === "admin" && memberCtx.member.role === "member")) ? (
+          {(myRoleNormalized === "owner" || (myRoleNormalized === "admin" && memberCtx.member.role === "member")) ? (
             <button
               className="block w-full rounded px-2 py-1.5 text-left text-sm text-red-300 hover:bg-slate-800"
               onClick={async () => {
@@ -869,7 +880,7 @@ function extractLinkItems(messages: Message[]): Array<{ url: string; messageId:
   const seen = new Set<string>();
   const regex = /\bhttps?:\/\/[^\s<>"')]+/gi;
   for (const message of messages) {
-    if (!message.text) {
+    if (message.type !== "text" || !message.text) {
       continue;
     }
     const links = message.text.match(regex) ?? [];
diff --git a/web/src/components/MessageComposer.tsx b/web/src/components/MessageComposer.tsx
index 72d0bcc..4a4e2d0 100644
--- a/web/src/components/MessageComposer.tsx
+++ b/web/src/components/MessageComposer.tsx
@@ -48,6 +48,7 @@ export function MessageComposer() {
   const [recordingState, setRecordingState] = useState<RecordingState>("idle");
   const [recordSeconds, setRecordSeconds] = useState(0);
   const [dragHint, setDragHint] = useState<"idle" | "lock" | "cancel">("idle");
+  const hasTextToSend = text.trim().length > 0;
 
   useEffect(() => {
     recordingStateRef.current = recordingState;
@@ -560,23 +561,27 @@ export function MessageComposer() {
           }}
         />
 
-        <button
-          className="h-[42px] w-[72px] rounded-full bg-sky-500 px-4 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60"
-          disabled={recordingState !== "idle"}
-          onClick={handleSend}
-          type="button"
-        >
-          Send
-        </button>
-
-        <button
-          className={`h-[42px] w-[56px] rounded-full px-3 text-sm font-semibold ${recordingState === "idle" ? "bg-emerald-500 text-slate-950 hover:bg-emerald-400" : "bg-slate-700 text-slate-300"}`}
-          disabled={isUploading}
-          onPointerDown={onMicPointerDown}
-          type="button"
-        >
-          Mic
-        </button>
+        {hasTextToSend ? (
+          <button
+            className="h-[42px] w-[56px] rounded-full bg-sky-500 px-3 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60"
+            disabled={recordingState !== "idle" || !activeChatId}
+            onClick={handleSend}
+            type="button"
+          >
+            ➤
+          </button>
+        ) : (
+          <button
+            className={`h-[42px] w-[56px] rounded-full px-3 text-sm font-semibold ${
+              recordingState === "idle" ? "bg-emerald-500 text-slate-950 hover:bg-emerald-400" : "bg-slate-700 text-slate-300"
+            }`}
+            disabled={isUploading || !activeChatId}
+            onPointerDown={onMicPointerDown}
+            type="button"
+          >
+            🎤
+          </button>
+        )}
       </div>
 
       {selectedFile ? (
diff --git a/web/src/components/MessageList.tsx b/web/src/components/MessageList.tsx
index bbd5b8b..47e0b21 100644
--- a/web/src/components/MessageList.tsx
+++ b/web/src/components/MessageList.tsx
@@ -67,6 +67,8 @@ export function MessageList() {
   const [undoTick, setUndoTick] = useState(0);
   const [reactionsByMessage, setReactionsByMessage] = useState<Record<number, MessageReaction[]>>({});
   const [mediaViewer, setMediaViewer] = useState<MediaViewerState>(null);
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   const messages = useMemo(() => {
     if (!activeChatId) {
@@ -143,11 +145,28 @@ export function MessageList() {
     return () => window.clearTimeout(timer);
   }, [activeChatId, focusedMessageId, messages.length, setFocusedMessage]);
 
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+    const distance = container.scrollHeight - container.scrollTop - container.clientHeight;
+    setShowScrollToBottom(distance > 180);
+  }, [messages.length, activeChatId]);
+
   if (!activeChatId) {
     return <div className="flex h-full items-center justify-center text-slate-300/80">Select a chat</div>;
   }
   const chatId = activeChatId;
 
+  function scrollToBottom() {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+    container.scrollTo({ top: container.scrollHeight, behavior: "smooth" });
+  }
+
   async function ensureReactionsLoaded(messageId: number) {
     if (reactionsByMessage[messageId]) {
       return;
@@ -325,7 +344,15 @@ export function MessageList() {
         </div>
       ) : null}
 
-      <div className="tg-scrollbar flex-1 overflow-auto px-2 py-4 md:px-5">
+      <div
+        className="tg-scrollbar flex-1 overflow-auto px-2 py-4 md:px-5"
+        ref={scrollContainerRef}
+        onScroll={(event) => {
+          const target = event.currentTarget;
+          const distance = target.scrollHeight - target.scrollTop - target.clientHeight;
+          setShowScrollToBottom(distance > 180);
+        }}
+      >
         {hasMore ? (
           <div className="mb-3 flex justify-center">
             <button
@@ -466,6 +493,17 @@ export function MessageList() {
       </div>
 
       <div className="px-5 pb-2 text-xs text-slate-300/80">{(typingByChat[activeChatId] ?? []).length > 0 ? "typing..." : ""}</div>
+      {showScrollToBottom ? (
+        <div className="pointer-events-none absolute bottom-4 right-4 z-40">
+          <button
+            className="pointer-events-auto inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-600/80 bg-slate-900/90 text-lg text-slate-100 shadow-lg hover:bg-slate-800"
+            onClick={scrollToBottom}
+            type="button"
+          >
+            ↓
+          </button>
+        </div>
+      ) : null}
 
       {ctx
         ? createPortal(