@ermis-network/ermis-chat-react 1.0.5 → 1.0.7

package/src/components/ClosedTopicOverlay.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export type ClosedTopicOverlayProps = {
+  title: string;
+  subtitle: string;
+  canManageTopic: boolean;
+  reopenLabel: string;
+  onReopen?: () => void;
+};
+
+export const ClosedTopicOverlay: React.FC<ClosedTopicOverlayProps> = React.memo(({
+  title,
+  subtitle,
+  canManageTopic,
+  reopenLabel,
+  onReopen,
+}) => (
+  <div className="ermis-message-list__closed-overlay">
+    <div className="ermis-message-list__closed-overlay-icon">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+      </svg>
+    </div>
+    <span className="ermis-message-list__closed-overlay-title">{title}</span>
+    <span className="ermis-message-list__closed-overlay-subtitle">{subtitle}</span>
+    {canManageTopic && onReopen && (
+      <button
+        className="ermis-message-list__reopen-btn"
+        onClick={onReopen}
+      >
+        {reopenLabel}
+      </button>
+    )}
+  </div>
+));
+
+ClosedTopicOverlay.displayName = 'ClosedTopicOverlay';

package/src/components/MessageInput.tsx

@@ -35,7 +35,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   EmojiButtonComponent = DefaultEmojiButton,
   ReplyPreviewComponent = ReplyPreview,
   EditPreviewComponent = EditPreview,
-  bannedLabel = 'You have been blocked from this channel',
+  bannedLabel = 'You have been banned from this channel',
   blockedLabel = 'You have blocked this user. Unblock to send messages.',
   linksDisabledLabel = 'Message blocked: Sending links is disabled for members.',
   keywordBlockedLabel = (match: string) => `Message blocked: Contains restricted word "${match}".`,
@@ -43,6 +43,7 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   slowModeLabel = (cooldown: number) => (
     <>Slow mode is active. You can send another message in <strong>{cooldown}s</strong>.</>
   ),
+  closedTopicLabel = 'This topic is closed.',
 }) => {
   const { client, activeChannel, syncMessages, quotedMessage, setQuotedMessage, editingMessage, setEditingMessage } = useChatClient();
   const { isBanned } = useBannedState(activeChannel, client.userID);
@@ -51,7 +52,8 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
   const editableRef = React.useRef<HTMLDivElement>(null);
   const [hasContent, setHasContent] = useState(false);
 
-  const { role, isTeamChannel, hasCapability } = useChannelCapabilities();
+  const { role, isTeamOrMeetingChannel: isTeamChannel, hasCapability } = useChannelCapabilities();
+  const isClosedTopic = activeChannel?.data?.is_closed_topic === true;
 
   // Slow Mode Logic
   const [memberMessageCooldown, setMemberMessageCooldown] = useState(Number(activeChannel?.data?.member_message_cooldown) || 0);
@@ -398,6 +400,21 @@ export const MessageInput: React.FC<MessageInputProps> = React.memo(({
     );
   }
 
+  // Show closed topic banner instead of input
+  if (isClosedTopic) {
+    return (
+      <div className={`ermis-message-input ermis-message-input--closed${className ? ` ${className}` : ''}`}>
+        <div className="ermis-message-input__closed-banner">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+          <span>{closedTopicLabel}</span>
+        </div>
+      </div>
+    );
+  }
+
   const isStillUploading = files.some((f) => f.status === 'uploading');
 
   return (

package/src/components/MessageItem.tsx

@@ -155,9 +155,7 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
           />
         )}
         <div className="ermis-message-list__bubble-wrapper">
-          <div style={!canReact ? { opacity: 0.5, pointerEvents: 'none' } : {}}>
-            <MessageQuickReactions message={message} isOwnMessage={isOwnMessage} />
-          </div>
+          <MessageQuickReactions message={message} isOwnMessage={isOwnMessage} disabled={!canReact} />
           <MessageBubble message={message} isOwnMessage={isOwnMessage}>
             {isForwarded && (
               <span className="ermis-message-list__forwarded-indicator">{forwardedLabel}</span>
@@ -187,14 +185,13 @@ export const MessageItem: React.FC<MessageItemProps> = React.memo(({
 
           {/* Message Reactions */}
           {MessageReactionsComponent && (
-            <div style={!canReact ? { opacity: 0.8, pointerEvents: 'none' } : {}}>
-              <MessageReactionsComponent
-                reactionCounts={(message as any).reaction_counts}
-                ownReactions={(message as any).own_reactions}
-                latestReactions={(message as any).latest_reactions}
-                onClickReaction={handleReactionToggle}
-              />
-            </div>
+            <MessageReactionsComponent
+              reactionCounts={(message as any).reaction_counts}
+              ownReactions={(message as any).own_reactions}
+              latestReactions={(message as any).latest_reactions}
+              onClickReaction={handleReactionToggle}
+              disabled={!canReact}
+            />
           )}
         </div>
       </div>

package/src/components/MessageQuickReactions.tsx

@@ -14,7 +14,8 @@ const EMOJI_MAP: Record<string, string> = {
 export const MessageQuickReactions: React.FC<{
   message: FormatMessageResponse;
   isOwnMessage: boolean;
-}> = React.memo(({ message, isOwnMessage }) => {
+  disabled?: boolean;
+}> = React.memo(({ message, isOwnMessage, disabled }) => {
   const { activeChannel, client } = useChatClient();
   const currentUserId = client?.userID;
 
@@ -41,7 +42,7 @@ export const MessageQuickReactions: React.FC<{
   );
 
   return (
-    <div className={`ermis-message-quick-reactions ${isOwnMessage ? 'ermis-message-quick-reactions--own' : ''}`}>
+    <div className={`ermis-message-quick-reactions ${isOwnMessage ? 'ermis-message-quick-reactions--own' : ''} ${disabled ? 'ermis-message-quick-reactions--disabled' : ''}`}>
       {QUICK_REACTIONS.map((type) => {
         const isOwn =
           (message as any).own_reactions?.some((r: any) => r.type === type) ||

package/src/components/MessageReactions.tsx

@@ -16,6 +16,7 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
   ownReactions,
   latestReactions,
   onClickReaction,
+  disabled,
 }) => {
   const { client } = useChatClient();
   const currentUserId = client?.userID;
@@ -23,18 +24,22 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
   if (!reactionCounts || Object.keys(reactionCounts).length === 0) return null;
 
   return (
-    <div className="ermis-message-reactions">
+    <div className={`ermis-message-reactions${disabled ? ' ermis-message-reactions--disabled' : ''}`}>
       {Object.entries(reactionCounts).map(([type, count]) => {
         const isOwn = 
           ownReactions?.some((r) => r.type === type) ||
           latestReactions?.some((r) => r.type === type && (r.user?.id === currentUserId || (r as any).user_id === currentUserId));
         
         // Find users who reacted with this type for the tooltip
-        const userNames = latestReactions
+        const rawUserNames = latestReactions
           ?.filter((r) => r.type === type)
           .map((r: any) => r.user?.name || r.user?.id || r.user_id || 'Someone');
         
-        const tooltip = userNames && userNames.length > 0 ? userNames.join('\n') : type;
+        const userNames = Array.from(new Set(rawUserNames || []))
+          .map((n: any) => typeof n === 'string' ? n.replace(/&lrm;|\u200E/gi, '').trim() : n)
+          .filter(Boolean);
+
+        const tooltip = userNames.length > 0 ? userNames.join(', ') : type;
         const emoji = defaultReactionEmojiMap[type] || type;
 
         return (

package/src/components/MessageRenderers.tsx

@@ -52,7 +52,7 @@ const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
   }, [loaded, src]);
 
   return (
-    <div className="ermis-attachment-aspect-box" style={{ paddingBottom: '75%' }}>
+    <div className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3">
       {/* Blur placeholder: use thumb if available, otherwise shimmer */}
       {!loaded && (
         thumbSrc && thumbSrc !== src ? (
@@ -104,7 +104,7 @@ const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
   }, [loaded, posterSrc]);
 
   return (
-    <div className="ermis-attachment-aspect-box" style={{ paddingBottom: '75%' }}>
+    <div className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3">
       {!loaded && (
         blurThumb && blurThumb !== posterSrc ? (
           <img
@@ -121,7 +121,7 @@ const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
         <img
           ref={imgRef}
           src={posterSrc}
-          style={{ display: 'none' }}
+          className="ermis-attachment--hidden-loader"
           onLoad={() => setLoaded(true)}
           alt="poster-loader"
         />
@@ -133,7 +133,7 @@ const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
         controls
         preload="metadata"
         onLoadedData={() => {
-           if (!posterSrc) setLoaded(true);
+          if (!posterSrc) setLoaded(true);
         }}
       />
     </div>
@@ -226,7 +226,7 @@ const LinkPreviewAttachment: React.FC<AttachmentProps> = React.memo(({ attachmen
       rel="noopener noreferrer"
     >
       {image && (
-        <div style={{ position: 'relative', width: '100%', minHeight: '120px', backgroundColor: 'var(--ermis-bg-hover, #2a2a4a)', overflow: 'hidden' }}>
+        <div className="ermis-attachment__link-image-wrapper">
           {!loaded && <div className="ermis-attachment-shimmer" />}
           <img
             ref={imgRef}
@@ -235,7 +235,6 @@ const LinkPreviewAttachment: React.FC<AttachmentProps> = React.memo(({ attachmen
             alt={title || 'preview'}
             loading="lazy"
             onLoad={() => setLoaded(true)}
-            style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease', display: 'block', width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', top: 0, left: 0 }}
           />
         </div>
       )}
@@ -553,16 +552,15 @@ export const StickerMessage: React.FC<MessageRendererProps> = ({ message }) => {
 
   if (stickerUrl) {
     return (
-      <div style={{ position: 'relative', width: '120px', height: '120px', overflow: 'hidden' }}>
+      <div className="ermis-message-sticker-wrapper">
         {!loaded && <div className="ermis-attachment-shimmer" />}
         <img
           ref={imgRef}
-          className="ermis-message-sticker"
+          className={`ermis-message-sticker${loaded ? ' ermis-attachment--loaded' : ''}`}
           src={stickerUrl}
           alt="sticker"
           loading="lazy"
           onLoad={() => setLoaded(true)}
-          style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'contain' }}
         />
       </div>
     );

package/src/components/PendingOverlay.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { AvatarProps } from '../types';
+
+export type PendingOverlayProps = {
+  channelImage?: string;
+  channelName?: string;
+  title: string;
+  subtitle: string;
+  acceptLabel: string;
+  rejectLabel: string;
+  onAccept: () => void;
+  onReject: () => void;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+};
+
+export const PendingOverlay: React.FC<PendingOverlayProps> = React.memo(({
+  channelImage,
+  channelName,
+  title,
+  subtitle,
+  acceptLabel,
+  rejectLabel,
+  onAccept,
+  onReject,
+  AvatarComponent,
+}) => (
+  <div className="ermis-message-list__pending-overlay">
+    <div className="ermis-message-list__pending-card">
+      <AvatarComponent image={channelImage} name={channelName} size={64} className="ermis-message-list__pending-avatar" />
+      <span className="ermis-message-list__pending-overlay-title">{title}</span>
+      <div className="ermis-message-list__pending-channel-name">{channelName}</div>
+      <span className="ermis-message-list__pending-overlay-subtitle">{subtitle}</span>
+      <div className="ermis-message-list__pending-actions">
+        <button className="ermis-message-list__reject-btn" onClick={onReject}>{rejectLabel}</button>
+        <button className="ermis-message-list__accept-btn" onClick={onAccept}>{acceptLabel}</button>
+      </div>
+    </div>
+  </div>
+));
+
+PendingOverlay.displayName = 'PendingOverlay';

package/src/components/TopicModal.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useCallback } from 'react';
+import type { CreateTopicData, EditTopicData } from '@ermis-network/ermis-chat-sdk';
+import { Modal } from './Modal';
+import { useChatClient } from '../hooks/useChatClient';
+import type { TopicModalProps } from '../types';
+
+const DEFAULT_TOPIC_ICONS = ['💬', '🔥', '🚀', '⭐', '💡', '🎉', '📌', '📁', '🎨', '💻', '📈', '🤝'];
+
+export const TopicModal: React.FC<TopicModalProps> = React.memo(({
+  isOpen,
+  onClose,
+  onSuccess,
+  EmojiPickerComponent,
+  parentChannel,
+  topic,
+  title = topic ? 'Edit Topic' : 'Create Topic',
+  nameLabel = 'Topic Name',
+  namePlaceholder = 'Enter topic name',
+  emojiLabel = 'Topic icon',
+  descriptionLabel = 'Description',
+  descriptionPlaceholder = 'Enter topic description',
+  cancelButtonLabel = 'Cancel',
+  saveButtonLabel = topic ? 'Save' : 'Create',
+  savingButtonLabel = topic ? 'Saving...' : 'Creating...',
+}) => {
+  const { activeChannel, client } = useChatClient();
+  
+  const originalName = (topic?.data?.name as string) || '';
+  const originalImage = (topic?.data?.image as string) || '';
+  const originalEmoji = originalImage.startsWith('emoji://') ? originalImage.replace('emoji://', '') : '';
+  const originalDescription = (topic?.data?.description as string) || '';
+
+  const [name, setName] = useState(originalName);
+  const [emoji, setEmoji] = useState(originalEmoji);
+  const [description, setDescription] = useState(originalDescription);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const targetParent = parentChannel || activeChannel;
+
+  const handleSave = useCallback(async () => {
+    if (!name.trim() || !emoji) return;
+
+    // Resolve parent channel (owner of topics)
+    let editorParent = targetParent;
+    if (topic && topic.data?.parent_cid) {
+      editorParent = client.activeChannels[topic.data.parent_cid as string] || editorParent;
+    }
+    
+    if (!editorParent && !topic) return;
+
+    setIsSaving(true);
+    setError(null);
+
+    try {
+      if (topic) {
+        if (!editorParent) throw new Error("Parent channel not found");
+        
+        const payload: EditTopicData = {};
+        if (name.trim() !== originalName) payload.name = name.trim();
+        if (emoji !== originalEmoji) payload.image = emoji ? `emoji://${emoji}` : '';
+        if (description.trim() !== originalDescription) payload.description = description.trim();
+
+        if (Object.keys(payload).length > 0 && topic.cid) {
+          await editorParent.editTopic(topic.cid, payload);
+        }
+
+        if (onSuccess) {
+          onSuccess(topic);
+        } else {
+          onClose();
+        }
+      } else {
+        if (!editorParent) return;
+        const payload: CreateTopicData = {
+          name: name.trim(),
+        };
+
+        if (emoji) {
+          payload.image = `emoji://${emoji}`;
+        }
+        if (description.trim()) {
+          payload.description = description.trim();
+        }
+
+        await editorParent.createTopic(payload);
+
+        if (onSuccess) {
+          onSuccess(editorParent);
+        } else {
+          onClose();
+          setName('');
+          setEmoji('');
+          setDescription('');
+        }
+      }
+    } catch (err: any) {
+      setError(err?.message || (topic ? 'Failed to save topic' : 'Failed to create topic'));
+    } finally {
+      setIsSaving(false);
+    }
+  }, [targetParent, topic, name, emoji, description, originalName, originalEmoji, originalDescription, onSuccess, onClose, client.activeChannels]);
+
+  const isValid = name.trim().length > 0 && emoji.length > 0;
+
+  const footer = (
+    <div className="ermis-create-topic__footer">
+      <button className="ermis-create-topic__btn ermis-create-topic__btn--cancel" onClick={onClose} disabled={isSaving}>{cancelButtonLabel}</button>
+      <button className="ermis-create-topic__btn ermis-create-topic__btn--create" onClick={handleSave} disabled={isSaving || !isValid}>
+        {isSaving ? savingButtonLabel : saveButtonLabel}
+      </button>
+    </div>
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={isSaving ? () => { } : onClose} title={title} maxWidth="400px" footer={footer}>
+      <div className="ermis-create-topic__body">
+        <div className="ermis-create-topic__live-preview">
+          <span className="ermis-create-topic__live-preview-emoji">{emoji || <span style={{opacity: 0.3}}>#</span>}</span>
+          <span className="ermis-create-topic__live-preview-name">{name || namePlaceholder}</span>
+        </div>
+
+        <div className="ermis-create-topic__field">
+          <label className="ermis-create-topic__label">{nameLabel} <span className="ermis-create-topic__required">*</span></label>
+          <input
+            className="ermis-create-topic__input"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={namePlaceholder}
+            disabled={isSaving}
+            maxLength={100}
+            autoFocus
+          />
+        </div>
+
+        <div className="ermis-create-topic__field">
+          <label className="ermis-create-topic__label">{emojiLabel} <span className="ermis-create-topic__required">*</span></label>
+
+          <div className="ermis-create-topic__emoji-picker">
+            {EmojiPickerComponent ? (
+              <EmojiPickerComponent onSelect={(e: any) => setEmoji(e.native || e.emoji || e.id || e)} />
+            ) : (
+              <div className="ermis-create-topic__default-icons">
+                {DEFAULT_TOPIC_ICONS.map(icon => (
+                  <button
+                    key={icon}
+                    type="button"
+                    className={`ermis-create-topic__default-icon ${icon === emoji ? 'ermis-create-topic__default-icon--active' : ''}`}
+                    onClick={() => setEmoji(icon)}
+                    disabled={isSaving}
+                  >
+                    {icon}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="ermis-create-topic__field">
+          <label className="ermis-create-topic__label">{descriptionLabel}</label>
+          <textarea
+            className="ermis-create-topic__input"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={descriptionPlaceholder}
+            disabled={isSaving}
+            rows={3}
+            maxLength={500}
+            style={{ resize: 'vertical' }}
+          />
+        </div>
+
+        {error && (
+          <div className="ermis-create-topic__error">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            {error}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+});
+
+TopicModal.displayName = 'TopicModal';

package/src/components/VirtualMessageList.tsx

@@ -21,6 +21,9 @@ import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { PinnedMessages } from './PinnedMessages';
 import { ReadReceipts } from './ReadReceipts';
 import { TypingIndicator } from './TypingIndicator';
+import { PendingOverlay } from './PendingOverlay';
+import { BannedOverlay } from './BannedOverlay';
+import { ClosedTopicOverlay } from './ClosedTopicOverlay';
 import type { MessageListProps } from '../types';
 
 /* ----------------------------------------------------------
@@ -104,7 +107,7 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   emptyTitle = 'No messages yet',
   emptySubtitle = 'Send a message to start the conversation',
   jumpToLatestLabel = '↓ Jump to latest',
-  bannedOverlayTitle = 'You have been blocked from this channel',
+  bannedOverlayTitle = 'You have been banned from this channel',
   bannedOverlaySubtitle = 'You can no longer read or send messages here',
   blockedOverlayTitle = 'You have blocked this user',
   blockedOverlaySubtitle = 'Unblock to continue the conversation',
@@ -112,11 +115,17 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   pendingOverlaySubtitle = 'Accept the invitation to view messages and interact',
   pendingAcceptLabel = 'Accept',
   pendingRejectLabel = 'Reject',
+  closedTopicOverlayTitle = 'This topic has been closed',
+  closedTopicOverlaySubtitle = 'You can no longer read or send messages in this topic.',
+  closedTopicReopenLabel = 'Reopen Topic',
 }) => {
   const { client, messages, readState, activeChannel, jumpToMessageId, setJumpToMessageId } = useChatClient();
   const { isBanned } = useBannedState(activeChannel, client.userID);
   const { isBlocked } = useBlockedState(activeChannel, client.userID);
   const { isPending } = usePendingState(activeChannel, client.userID);
+  const isClosedTopic = activeChannel?.data?.is_closed_topic === true;
+  const parentCid = activeChannel?.data?.parent_cid as string | undefined;
+  const parentChannel = parentCid && client ? client.activeChannels[parentCid] : undefined;
 
   const { channelName, channelImage } = useChannelProfile(activeChannel);
 
@@ -124,6 +133,8 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   const messagesRef = useRef(messages);
   messagesRef.current = messages;
   const currentUserId = client.userID;
+  const currentUserRole = currentUserId ? activeChannel?.state?.members?.[currentUserId]?.channel_role : undefined;
+  const canManageTopic = currentUserRole === 'owner' || currentUserRole === 'moder';
 
   // Ref to scope DOM queries (safe for multiple instances)
   const containerRef = useRef<HTMLDivElement>(null);
@@ -134,8 +145,8 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   const handleAcceptInvite = useCallback(async () => {
     if (!activeChannel) return;
     try {
-      const isPublicTeam = activeChannel.type === 'team' && Boolean(activeChannel.data?.public);
-      const action = isPublicTeam ? 'join' : 'accept';
+      const isPublicTeamOrMeeting = (activeChannel.type === 'team' || activeChannel.type === 'meeting') && Boolean(activeChannel.data?.public);
+      const action = isPublicTeamOrMeeting ? 'join' : 'accept';
       await activeChannel.acceptInvite(action);
     } catch (e: any) {
       console.error('Error accepting invite', e);
@@ -212,6 +223,20 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     }, [setHasMore, setHasNewer]),
   });
 
+  const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked);
+  const prevOverlayRef = useRef(hasOverlay);
+
+  useEffect(() => {
+    if (prevOverlayRef.current && !hasOverlay) {
+      // Transitioned from having an overlay to normal view.
+      // Give VList a moment to measure its new DOM size via ResizeObserver, then jump to the bottom.
+      setTimeout(() => scrollToBottom(false), 50);
+      setTimeout(() => scrollToBottom(false), 200);
+      setTimeout(() => scrollToBottom(false), 500);
+    }
+    prevOverlayRef.current = hasOverlay;
+  }, [hasOverlay, scrollToBottom]);
+
   const renderers = useMemo(
     () => ({ ...defaultMessageRenderers, ...customRenderers }),
     [customRenderers],
@@ -354,19 +379,57 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     readReceiptsMaxAvatars,
   ]);
 
-  const blockedClass = isBlocked ? ' ermis-message-list--blocked' : '';
+  if (isBanned || isBlocked) {
+    return (
+      <BannedOverlay
+        isBlocked={isBlocked}
+        blockedTitle={blockedOverlayTitle}
+        bannedTitle={bannedOverlayTitle}
+        blockedSubtitle={blockedOverlaySubtitle}
+        bannedSubtitle={bannedOverlaySubtitle}
+        onUnblock={() => { activeChannel?.unblockUser().catch((e: any) => console.error('Error unblocking user', e)); }}
+      />
+    );
+  }
+
+  if (isPending) {
+    return (
+      <PendingOverlay
+        channelImage={channelImage}
+        channelName={channelName}
+        title={pendingOverlayTitle}
+        subtitle={pendingOverlaySubtitle}
+        rejectLabel={pendingRejectLabel}
+        acceptLabel={pendingAcceptLabel}
+        onReject={handleRejectInvite}
+        onAccept={handleAcceptInvite}
+        AvatarComponent={AvatarComponent}
+      />
+    );
+  }
+
+  if (isClosedTopic) {
+    return (
+      <ClosedTopicOverlay
+        title={closedTopicOverlayTitle}
+        subtitle={closedTopicOverlaySubtitle}
+        canManageTopic={Boolean(canManageTopic && activeChannel && parentChannel)}
+        reopenLabel={closedTopicReopenLabel}
+        onReopen={() => { parentChannel?.reopenTopic(activeChannel!.cid).catch((e: any) => console.error('Error reopening topic', e)); }}
+      />
+    );
+  }
 
   return (
-    <div ref={containerRef} className={`ermis-message-list${isBanned ? ' ermis-message-list--banned' : ''}${blockedClass}${className ? ` ${className}` : ''}`}>
-      {!isBanned && !isBlocked && showPinnedMessages && <PinnedMessagesComponent onClickMessage={scrollToMessage} AvatarComponent={AvatarComponent} />}
+    <div ref={containerRef} className={`ermis-message-list${className ? ` ${className}` : ''}`}>
+      {showPinnedMessages && <PinnedMessagesComponent onClickMessage={scrollToMessage} AvatarComponent={AvatarComponent} />}
 
-      {messages.length === 0 && !isBanned && !isPending && (
+      {messages.length === 0 && (
         EmptyStateIndicator === DefaultEmpty
           ? <DefaultEmpty title={emptyTitle} subtitle={emptySubtitle} />
           : <EmptyStateIndicator />
       )}
 
-      {/* VList always rendered so virtua keeps its viewport measurement */}
       <VList
         key={activeChannel?.cid || 'empty'}
         ref={vlistRef}
@@ -374,46 +437,14 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
         onScroll={handleScroll}
         className="ermis-message-list__vlist"
       >
-        {isPending && !isBanned && !isBlocked ? (
-          <div className="ermis-message-list__pending-overlay">
-            <div className="ermis-message-list__pending-card">
-              <Avatar image={channelImage} name={channelName} size={64} className="ermis-message-list__pending-avatar" />
-              <span className="ermis-message-list__pending-overlay-title">{pendingOverlayTitle}</span>
-              <div className="ermis-message-list__pending-channel-name">{channelName}</div>
-              <span className="ermis-message-list__pending-overlay-subtitle">{pendingOverlaySubtitle}</span>
-              <div className="ermis-message-list__pending-actions">
-                <button className="ermis-message-list__reject-btn" onClick={handleRejectInvite}>{pendingRejectLabel}</button>
-                <button className="ermis-message-list__accept-btn" onClick={handleAcceptInvite}>{pendingAcceptLabel}</button>
-              </div>
-            </div>
-          </div>
-        ) : (isBanned || isBlocked) && !isPending ? (
-          <div className="ermis-message-list__banned-overlay">
-            <div className="ermis-message-list__banned-overlay-icon">
-              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-                <circle cx="12" cy="12" r="10" />
-                <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
-              </svg>
-            </div>
-            <span className="ermis-message-list__banned-overlay-title">{isBlocked ? blockedOverlayTitle : bannedOverlayTitle}</span>
-            <span className="ermis-message-list__banned-overlay-subtitle">{isBlocked ? blockedOverlaySubtitle : bannedOverlaySubtitle}</span>
-            {isBlocked && activeChannel && (
-              <button
-                className="ermis-message-list__unblock-btn"
-                onClick={() => { activeChannel.unblockUser().catch((e: any) => console.error('Error unblocking user', e)); }}
-              >
-                Unblock
-              </button>
-            )}
-          </div>
-        ) : messageElements}
+        {messageElements}
       </VList>
 
       {/* Typing indicator */}
-      {!isBanned && !isBlocked && !isPending && showTypingIndicator && <TypingIndicatorComponent />}
+      {showTypingIndicator && <TypingIndicatorComponent />}
 
       {/* Jump to latest button */}
-      {!isBanned && !isBlocked && !isPending && hasNewer && (
+      {hasNewer && (
         JumpToLatestButton === DefaultJumpToLatest
           ? <DefaultJumpToLatest onClick={jumpToLatest} label={jumpToLatestLabel} />
           : <JumpToLatestButton onClick={jumpToLatest} />