General enhancements, optimizations, bug fixes

package.json

@@ -34,6 +34,7 @@
     "emoji-picker-react": "^4.13.3",
     "exifr": "^7.1.3",
     "gh-pages": "^6.3.0",
+    "highlight.js": "^11.11.1",
     "html-react-parser": "^5.2.7",
     "marked": "^16.4.0",
     "react": "^18.3.1",

src/components/layout/ChannelList.tsx

@@ -1074,8 +1074,12 @@ export const ChannelList: React.FC<{
                                     privateChat.realname || user?.realname;
                                   if (realname) {
                                     // Parse IRC colors/formatting in realname
-                                    secondPart =
-                                      processMarkdownInText(realname);
+                                    secondPart = processMarkdownInText(
+                                      realname,
+                                      true,
+                                      false,
+                                      `privatechat-${privateChat.id}-realname`,
+                                    );
                                   }
                                 }
 
@@ -1337,6 +1341,7 @@ export const ChannelList: React.FC<{
             <button
               className="hover:text-white"
               data-testid="user-settings-button"
+              onClick={() => toggleUserProfileModal(true)}
             >
               <FaCog className="mr-2" />
             </button>

src/components/layout/ChatArea.tsx

@@ -83,6 +83,7 @@ export const ChatArea: React.FC<{
     FormattingType[]
   >([]);
   const [isScrolledUp, setIsScrolledUp] = useState(false);
+  const wasAtBottomRef = useRef(true); // Track if user was at bottom before new messages
   const [isFormattingInitialized, setIsFormattingInitialized] = useState(false);
   const [cursorPosition, setCursorPosition] = useState(0);
   const [showAutocomplete, setShowAutocomplete] = useState(false);
@@ -477,16 +478,20 @@ export const ChatArea: React.FC<{
       messagesContainerRef.current.scrollTop =
         messagesContainerRef.current.scrollHeight;
     }
-    // Reset visible message count and search when changing channels
+    // Reset scroll state and visible message count when changing channels
+    setIsScrolledUp(false);
+    wasAtBottomRef.current = true;
     setVisibleMessageCount(100);
     setSearchQuery("");
   }, [selectedServerId, selectedChannelId]);
 
   // Auto scroll to bottom on new messages
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to scroll when messages change, not when isScrolledUp changes
   useEffect(() => {
-    if (isScrolledUp) return;
-    scrollDown();
+    // Only auto-scroll if user was at the bottom before new messages arrived
+    if (wasAtBottomRef.current) {
+      scrollDown();
+    }
   }, [displayedMessages]);
 
   // Check if scrolled away from bottom
@@ -499,6 +504,7 @@ export const ChatArea: React.FC<{
         container.scrollHeight - container.scrollTop - container.clientHeight <
         30;
       setIsScrolledUp(!atBottom);
+      wasAtBottomRef.current = atBottom;
     };
 
     container.addEventListener("scroll", checkIfScrolledToBottom);
@@ -544,12 +550,6 @@ export const ChatArea: React.FC<{
         }
       }, 0);
     }
-
-    // Send typing done notification
-    const target = selectedChannel?.name ?? selectedPrivateChat?.username;
-    if (target) {
-      typingNotification.notifyTypingDone(target);
-    }
   };
 
   const handleImageUpload = async (file: File) => {

src/components/layout/ChatHeader.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import {
   FaBell,
   FaBellSlash,
+  FaCheckCircle,
   FaChevronLeft,
   FaChevronRight,
   FaEdit,
@@ -115,6 +116,106 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
     return null;
   }, [selectedPrivateChat, selectedServerId, servers]);
 
+  // Helper function to get user metadata
+  const getUserMetadata = (username: string) => {
+    if (!selectedServerId) return null;
+
+    // First check localStorage for saved metadata
+    const savedMetadata = loadSavedMetadata();
+    const serverMetadata = savedMetadata[selectedServerId];
+    if (serverMetadata?.[username]) {
+      return serverMetadata[username];
+    }
+
+    // If not in localStorage, check if user is in any shared channels
+    const server = servers.find((s) => s.id === selectedServerId);
+    if (!server) return null;
+
+    // Search through all channels for this user
+    for (const channel of server.channels) {
+      const user = channel.users.find(
+        (u) => u.username.toLowerCase() === username.toLowerCase(),
+      );
+      if (user?.metadata && Object.keys(user.metadata).length > 0) {
+        return user.metadata;
+      }
+    }
+
+    return null;
+  };
+
+  // Helper function to get full user object from shared channels
+  const getUserFromChannels = (username: string) => {
+    const server = servers.find((s) => s.id === selectedServerId);
+    if (!server) return null;
+
+    // Search through all channels for this user
+    for (const channel of server.channels) {
+      const user = channel.users.find(
+        (u) => u.username.toLowerCase() === username.toLowerCase(),
+      );
+      if (user) {
+        return user;
+      }
+    }
+
+    return null;
+  };
+
+  // Helper function to render verification and bot badges
+  const renderUserBadges = (
+    username: string,
+    privateChat: PrivateChat | undefined,
+    user: User | null,
+    showVerified = true,
+  ) => {
+    // Get account and bot info from privateChat first, fall back to channel user
+    const account = privateChat?.account || user?.account;
+    const isBot =
+      privateChat?.isBot ||
+      user?.isBot ||
+      user?.metadata?.bot?.value === "true";
+    const isIrcOp = user?.isIrcOp || false;
+
+    const isVerified =
+      showVerified &&
+      account &&
+      account !== "0" &&
+      username.toLowerCase() === account.toLowerCase();
+
+    if (!isVerified && !isBot && !isIrcOp) return null;
+
+    return (
+      <>
+        {isVerified && (
+          <FaCheckCircle
+            className="inline ml-0.5 text-green-500"
+            style={{ fontSize: "0.75em", verticalAlign: "baseline" }}
+            title="Verified account"
+          />
+        )}
+        {isBot && (
+          <span
+            className="inline ml-0.5"
+            style={{ fontSize: "0.9em" }}
+            title="Bot"
+          >
+            🤖
+          </span>
+        )}
+        {isIrcOp && (
+          <span
+            className="inline ml-0.5"
+            style={{ fontSize: "0.9em" }}
+            title="IRC Operator"
+          >
+            🔑
+          </span>
+        )}
+      </>
+    );
+  };
+
   const privateChatAvatar = privateChatUserMetadata?.avatar?.value;
 
   // Check if current user is operator
@@ -345,13 +446,58 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
             {/* Username and status */}
             <div className="flex flex-col">
               <h2 className="font-bold text-white">
-                {selectedPrivateChat.username}
+                {(() => {
+                  const userMetadata = getUserMetadata(
+                    selectedPrivateChat.username,
+                  );
+                  const displayName = userMetadata?.["display-name"]?.value;
+                  const user = getUserFromChannels(
+                    selectedPrivateChat.username,
+                  );
+                  return (
+                    <>
+                      {displayName || selectedPrivateChat.username}
+                      {/* Only show verified badge if NO display-name (showing username directly) */}
+                      {renderUserBadges(
+                        selectedPrivateChat.username,
+                        selectedPrivateChat,
+                        user,
+                        !displayName,
+                      )}
+                    </>
+                  );
+                })()}
               </h2>
-              {privateChatUserMetadata?.status?.value && (
-                <span className="text-xs text-discord-text-muted">
-                  {privateChatUserMetadata.status.value}
-                </span>
-              )}
+              {(() => {
+                const userMetadata = getUserMetadata(
+                  selectedPrivateChat.username,
+                );
+                const displayName = userMetadata?.["display-name"]?.value;
+                const user = getUserFromChannels(selectedPrivateChat.username);
+
+                // Show username in badge if display-name exists
+                if (displayName) {
+                  return (
+                    <div className="flex items-center gap-1.5 text-xs truncate mt-0.5">
+                      <span className="bg-gray-300 text-black px-1 py-0 rounded font-bold whitespace-nowrap text-[10px]">
+                        {selectedPrivateChat.username}
+                        {renderUserBadges(
+                          selectedPrivateChat.username,
+                          selectedPrivateChat,
+                          user,
+                        )}
+                      </span>
+                    </div>
+                  );
+                }
+
+                // Show status if no display-name (status was already shown above when display-name exists)
+                return privateChatUserMetadata?.status?.value ? (
+                  <span className="text-xs text-discord-text-muted">
+                    {privateChatUserMetadata.status.value}
+                  </span>
+                ) : null;
+              })()}
             </div>
             {/* Pin/Unpin button */}
             {selectedServerId && (

src/components/layout/MemberList.tsx

@@ -268,15 +268,25 @@ const UserItem: React.FC<{
           )}
           {user.realname && (
             <span className="truncate text-discord-text-muted">
-              {processMarkdownInText(user.realname)}
+              {processMarkdownInText(
+                user.realname,
+                true,
+                false,
+                `member-${user.id}-realname`,
+              )}
             </span>
           )}
           {user.realname && metadataStatus && (
             <span className="text-discord-text-muted opacity-50">•</span>
           )}
           {metadataStatus && (
             <span className="truncate text-discord-text-muted">
-              {processMarkdownInText(metadataStatus)}
+              {processMarkdownInText(
+                metadataStatus,
+                true,
+                false,
+                `member-${user.id}-status`,
+              )}
             </span>
           )}
           {(user.realname || metadataStatus) && website && (