@ermis-network/ermis-chat-react 1.0.9 → 2.0.1

package/src/components/ChannelList.tsx

@@ -1,97 +1,33 @@
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import { VList } from 'virtua';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { VList as _VList, type VListHandle } from 'virtua';
+const VList = _VList as any;
 import type { Channel, Event, ChannelFilters } from '@ermis-network/ermis-chat-sdk';
-import { parseSystemMessage, parseSignalMessage } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 import { useChannelListUpdates } from '../hooks/useChannelListUpdates';
 import { useOnlineUsers } from '../hooks/useOnlineUsers';
-import { replaceMentionsForPreview, buildUserMap } from '../utils';
+import { getLastMessagePreview } from '../utils';
 import { useChannelRowUpdates } from '../hooks/useChannelRowUpdates';
 import { usePendingState } from '../hooks/usePendingState';
+import {
+  SystemMessageTranslations,
+  SignalMessageTranslations,
+} from '@ermis-network/ermis-chat-sdk';
 import { Avatar } from './Avatar';
+import { useChatComponents } from '../context/ChatComponentsContext';
 import type { ChannelItemProps, ChannelListProps } from '../types';
 
 export type { ChannelListProps, ChannelItemProps } from '../types';
 import type { ChannelActionsProps } from '../types';
 import { TopicModal } from './TopicModal';
 import { DefaultChannelActions, computeDefaultActions } from './ChannelActions';
-import { isDirectChannel, hasTopicsEnabled } from '../channelTypeUtils';
+import { FlatTopicGroupItem } from './FlatTopicGroupItem';
+import { isDirectChannel, isGroupChannel, hasTopicsEnabled } from '../channelTypeUtils';
 import { canManageChannel, isPendingMember, isSkippedMember, isFriendChannel } from '../channelRoleUtils';
 
 export { DefaultChannelActions } from './ChannelActions';
 export type { ChannelAction, ChannelActionsProps } from '../types';
 
-/**
- * Get a human-readable preview string for the last message,
- * handling regular, system, and signal message types.
- */
-function getLastMessagePreview(
-  channel: Channel,
-  myUserId?: string,
-): { text: string; user: string; timestamp?: string | Date } {
-  const lastMsg = channel.state?.latestMessages?.slice(-1)[0];
-  if (!lastMsg) return { text: '', user: '' };
-
-  const timestamp = lastMsg.created_at;
-
-  const msgType = lastMsg.type || 'regular';
-  const rawText = lastMsg.text ?? '';
-
-  if (msgType === 'system') {
-    const userMap = buildUserMap(channel.state);
-    return { text: parseSystemMessage(rawText, userMap), user: '', timestamp };
-  }
-
-  if (msgType === 'signal') {
-    const result = parseSignalMessage(rawText, myUserId || '');
-    return { text: result?.text || rawText, user: '', timestamp };
-  }
-
-  // Display 'Sticker' if message is a sticker
-  if (msgType === 'sticker' || (lastMsg as Record<string, unknown>).sticker_url) {
-    return { text: 'Sticker', user: lastMsg.user?.name || lastMsg.user_id || '', timestamp };
-  }
-
-  // Regular / other
-  let displayText = rawText;
-  if (!displayText && lastMsg.attachments && lastMsg.attachments.length > 0) {
-    const att = lastMsg.attachments[0];
-    const type = att.type || '';
-    switch (type) {
-      case 'image':
-        displayText = '📷 Photo';
-        break;
-      case 'video':
-        displayText = '🎬 Video';
-        break;
-      case 'voiceRecording':
-        displayText = '🎤 Voice message';
-        break;
-      default:
-        displayText = '📎 File';
-        break;
-    }
-    if (lastMsg.attachments.length > 1) {
-      displayText += ` +${lastMsg.attachments.length - 1}`;
-    }
-  }
 
-  // Format mentions if necessary
-  const lastMsgRecord = lastMsg as Record<string, unknown>;
-  const mentionedUsers = lastMsgRecord.mentioned_users as string[] | undefined;
-  const mentionedAll = lastMsgRecord.mentioned_all as boolean | undefined;
-
-  if (displayText && (mentionedAll || (mentionedUsers && mentionedUsers.length > 0))) {
-    const userMap = buildUserMap(channel.state);
-    displayText = replaceMentionsForPreview(displayText, lastMsg as any, userMap);
-  }
-
-  return {
-    text: displayText,
-    user: lastMsg.user?.name || lastMsg.user_id || '',
-    timestamp,
-  };
-}
 
 /* ----------------------------------------------------------
    Memoized channel list item (exported for consumer reuse)
@@ -117,6 +53,8 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
   onAddTopic,
   onEditTopic,
   onToggleCloseTopic,
+  onDeleteTopic,
+  onTruncateChannel,
   hiddenActions,
   actionLabels,
   actionIcons,
@@ -141,8 +79,8 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
   }, [channel]);
 
   const defaultActions = useMemo(
-    () => computeDefaultActions(channel, currentUserId, { onAddTopic, onEditTopic, onToggleCloseTopic, isBlocked, actionLabels, actionIcons }),
-    [channel, currentUserId, updateCount, onAddTopic, onEditTopic, onToggleCloseTopic, isBlocked, actionLabels, actionIcons],
+    () => computeDefaultActions(channel, currentUserId, { onAddTopic, onEditTopic, onToggleCloseTopic, onDeleteTopic, onTruncateChannel, isBlocked, actionLabels, actionIcons }),
+    [channel, currentUserId, updateCount, onAddTopic, onEditTopic, onToggleCloseTopic, onDeleteTopic, onTruncateChannel, isBlocked, actionLabels, actionIcons],
   );
 
   const filteredActions = useMemo(() => {
@@ -151,9 +89,30 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
   }, [defaultActions, hiddenActions]);
   const ActionsComponent = ChannelActionsComponent || DefaultChannelActions;
 
-  const name = channel.data?.name || channel.cid;
-  const image = channel.data?.image as string | undefined;
+  // For DM channels, resolve name/image from the other member if channel.data.name is missing
+  const resolvedNameImage = useMemo(() => {
+    if (channel.data?.name) {
+      return { name: channel.data.name as string, image: channel.data.image as string | undefined };
+    }
+    // For DM (messaging) channels, find the other member's info
+    if (isDirectChannel(channel) && currentUserId && channel.state?.members) {
+      const members = Object.values(channel.state.members) as any[];
+      const other = members.find((m: any) => (m.user_id || m.user?.id) !== currentUserId);
+      if (other) {
+        const otherUser = other.user || other;
+        return {
+          name: otherUser.name || otherUser.id || channel.cid,
+          image: otherUser.image || otherUser.avatar || otherUser.avatar_url,
+        };
+      }
+    }
+    return { name: channel.cid, image: channel.data?.image as string | undefined };
+  }, [channel.data?.name, channel.data?.image, channel.state?.members, currentUserId, channel.cid, updateCount]);
+
+  const name = resolvedNameImage.name;
+  const image = resolvedNameImage.image;
   const showUnread = hasUnread && !isActive;
+  const avatarClassName = isGroupChannel(channel) ? 'ermis-avatar-wrapper--group' : undefined;
 
   const timestampText = useMemo(() => {
     if (!lastMessageTimestamp) return null;
@@ -180,10 +139,15 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
   return (
     <div className={itemClass} onClick={handleClick}>
       <div className="ermis-channel-list__item-avatar-wrapper">
-        <AvatarComponent image={image} name={name} size={40} disableLightbox />
+        <AvatarComponent image={image} name={name} size={45} disableLightbox className={avatarClassName} />
         {isOnline !== undefined && (
           <span className={`ermis-channel-list__online-dot ermis-channel-list__online-dot--${isOnline ? 'online' : 'offline'}`} />
         )}
+        {showUnread && unreadCount > 0 && (
+          <span className="ermis-channel-list__avatar-unread-badge">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
       </div>
       <div className="ermis-channel-list__item-content">
         <div className="ermis-channel-list__item-top-row">
@@ -268,6 +232,29 @@ const DefaultEmpty = React.memo(({ text }: { text?: string }) => (
 ));
 DefaultEmpty.displayName = 'DefaultEmpty';
 
+const DefaultError = React.memo(({ text, onRetry }: { text?: string; onRetry?: () => void }) => (
+  <div className="ermis-channel-list__error">
+    <div className="ermis-channel-list__error-icon">
+      <svg width="40" height="40" 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>
+    </div>
+    <div className="ermis-channel-list__error-text">{text || 'Failed to load channels'}</div>
+    {onRetry && (
+      <button className="ermis-channel-list__error-retry" onClick={onRetry}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: '6px' }}>
+          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+          <path d="M21 3v5h-5" />
+        </svg>
+        Retry
+      </button>
+    )}
+  </div>
+));
+DefaultError.displayName = 'DefaultError';
+
 /* ----------------------------------------------------------
    Virtual Row Component to map channel and defer parsing
    ---------------------------------------------------------- */
@@ -287,13 +274,25 @@ type ChannelRowProps = {
   onAddTopic?: (channel: Channel) => void;
   onEditTopic?: (channel: Channel) => void;
   onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+  onDeleteTopic?: (channel: Channel) => void;
+  onTruncateChannel?: (channel: Channel) => void;
   hiddenActions?: string[];
   actionLabels?: import('../types').ChannelActionLabels;
   actionIcons?: import('../types').ChannelActionIcons;
   isOnline?: boolean;
+  deletedMessageLabel?: React.ReactNode;
+  stickerMessageLabel?: React.ReactNode;
+  photoMessageLabel?: React.ReactNode;
+  videoMessageLabel?: React.ReactNode;
+  voiceRecordingMessageLabel?: React.ReactNode;
+  fileMessageLabel?: React.ReactNode;
+  encryptedMessageLabel?: React.ReactNode;
+  encryptedMessageUnavailableLabel?: React.ReactNode;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
 };
 
-const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
+export const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
   channel,
   isActive,
   handleSelect,
@@ -309,10 +308,22 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
   onAddTopic,
   onEditTopic,
   onToggleCloseTopic,
+  onDeleteTopic,
+  onTruncateChannel,
   hiddenActions,
   actionLabels,
   actionIcons,
   isOnline,
+  deletedMessageLabel,
+  stickerMessageLabel,
+  photoMessageLabel,
+  videoMessageLabel,
+  voiceRecordingMessageLabel,
+  fileMessageLabel,
+  encryptedMessageLabel,
+  encryptedMessageUnavailableLabel,
+  systemMessageTranslations,
+  signalMessageTranslations,
 }) => {
   // Use the new custom hook to handle all row-level realtime updates
   const { isBannedInChannel, isBlockedInChannel, updateCount } = useChannelRowUpdates(channel, currentUserId);
@@ -330,15 +341,41 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
 
   // Derive last message preview computation
   const { text: rawLastMessageText, user: rawLastMessageUser, timestamp: rawLastMessageTimestamp } = useMemo(
-    () => getLastMessagePreview(channel, currentUserId),
+    () =>
+      getLastMessagePreview(channel, currentUserId, {
+        deletedMessageLabel,
+        stickerMessageLabel,
+        photoMessageLabel,
+        videoMessageLabel,
+        voiceRecordingMessageLabel,
+        fileMessageLabel,
+        encryptedMessageLabel,
+        encryptedMessageUnavailableLabel,
+        systemMessageTranslations,
+        signalMessageTranslations,
+      }),
     // Recompute if latestMessage changes or we get a force update
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channel, channel.state?.latestMessages, updateCount]
+    [
+      channel,
+      channel.state?.latestMessages,
+      updateCount,
+      deletedMessageLabel,
+      stickerMessageLabel,
+      photoMessageLabel,
+      videoMessageLabel,
+      voiceRecordingMessageLabel,
+      fileMessageLabel,
+      encryptedMessageLabel,
+      encryptedMessageUnavailableLabel,
+      systemMessageTranslations,
+      signalMessageTranslations,
+    ]
   );
 
   // Hide last message preview when banned, blocked, pending or skipped
   const lastMessageText = (isBannedInChannel || isBlockedInChannel || isPending || isSkipped) ? '' : rawLastMessageText;
-  const lastMessageUser = (isBannedInChannel || isBlockedInChannel || isPending || isSkipped) ? '' : rawLastMessageUser;
+  const lastMessageUser = (isBannedInChannel || isBlockedInChannel || isPending || isSkipped || isDirectChannel(channel)) ? '' : rawLastMessageUser;
   const lastMessageTimestamp = (isBannedInChannel || isBlockedInChannel || isPending || isSkipped) ? null : rawLastMessageTimestamp;
 
   if (renderChannel) {
@@ -371,6 +408,8 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
       onAddTopic={onAddTopic}
       onEditTopic={onEditTopic}
       onToggleCloseTopic={onToggleCloseTopic}
+      onDeleteTopic={onDeleteTopic}
+      onTruncateChannel={onTruncateChannel}
       hiddenActions={hiddenActions}
       actionLabels={actionLabels}
       actionIcons={actionIcons}
@@ -380,194 +419,17 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
 });
 ChannelRow.displayName = 'ChannelRow';
 
-export const ChannelTopicGroup = React.memo(({
-  channel,
-  activeChannel,
-  handleSelect,
-  renderChannel,
-  ChannelItemComponent,
-  AvatarComponent,
-  GeneralTopicAvatarComponent,
-  TopicAvatarComponent,
-  currentUserId,
-  pendingBadgeLabel,
-  blockedBadgeLabel,
-  generalTopicLabel,
-  closedTopicIcon,
-  PinnedIconComponent,
-  ChannelActionsComponent,
-  onAddTopic,
-  onEditTopic,
-  onToggleCloseTopic,
-  hiddenActions,
-  actionLabels,
-  actionIcons,
-}: any) => {
-  const { updateCount } = useChannelRowUpdates(channel, currentUserId);
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [topicUpdateCount, setTopicUpdateCount] = useState(0);
-
-  useEffect(() => {
-    const subs: { unsubscribe: () => void }[] = [];
-    const handleUpdate = () => setTopicUpdateCount((c) => c + 1);
-    const currentTopics = channel.state?.topics || [];
-    currentTopics.forEach((t: Channel) => {
-      subs.push(t.on('channel.pinned', handleUpdate));
-      subs.push(t.on('channel.unpinned', handleUpdate));
-      subs.push(t.on('message.new', handleUpdate));
-      subs.push(t.on('message.deleted', handleUpdate));
-    });
-    return () => {
-      subs.forEach((s) => s.unsubscribe());
-    };
-  }, [channel.state?.topics]);
-
-  const handleToggle = useCallback(() => setIsExpanded((prev) => !prev), []);
-
-  const userRole = channel.state?.members?.[currentUserId]?.channel_role;
-  const hasTopicAddPermission = canManageChannel(userRole);
-
-  const getTopicTime = (t: Channel) => {
-    const lastMsg = t.state?.latestMessages?.slice(-1)[0];
-    if (lastMsg?.created_at) return new Date(lastMsg.created_at).getTime();
-    if (t.data?.last_message_at) return new Date(t.data.last_message_at as string | Date).getTime();
-    if (t.data?.created_at) return new Date(t.data.created_at as string | Date).getTime();
-    return 0;
-  };
-
-  const topics = useMemo(() => {
-    const allTopics = channel.state?.topics || [];
-    return [...allTopics].sort((a: any, b: any) => {
-      const aPinned = a.data?.is_pinned === true;
-      const bPinned = b.data?.is_pinned === true;
-      if (aPinned && !bPinned) return -1;
-      if (!aPinned && bPinned) return 1;
-
-      return getTopicTime(b) - getTopicTime(a);
-    });
-  }, [channel.state?.topics, topicUpdateCount]);
-  const name = channel.data?.name || channel.cid;
-  const image = channel.data?.image as string | undefined;
-
-  const GeneralAvatar = useCallback(() => (
-    <div className="ermis-channel-list__topic-hashtag">#</div>
-  ), []);
-
-  const TopicEmojiAvatar = useCallback(({ image }: any) => {
-    let emoji = '💬';
-    if (image && typeof image === 'string' && image.startsWith('emoji://')) {
-      emoji = image.replace('emoji://', '');
-    }
-    return <div className="ermis-channel-list__topic-hashtag">{emoji}</div>;
-  }, []);
-
-  const generalChannelProxy = useMemo(() => {
-    return new Proxy(channel, {
-      get(target, prop, receiver) {
-        if (prop === 'data') {
-          return { ...target.data, name: generalTopicLabel || 'general', is_pinned: false };
-        }
-        const value = Reflect.get(target, prop, receiver);
-        return typeof value === 'function' ? value.bind(target) : value;
-      }
-    });
-  }, [channel, generalTopicLabel]);
-
-  const defaultActions = useMemo(
-    () => computeDefaultActions(channel, currentUserId, { onAddTopic, actionLabels, actionIcons }),
-    [channel, currentUserId, updateCount, onAddTopic, actionLabels, actionIcons],
-  );
-
-  const filteredActions = useMemo(() => {
-    if (!hiddenActions || hiddenActions.length === 0) return defaultActions;
-    return defaultActions.filter((a: any) => !hiddenActions.includes(a.id));
-  }, [defaultActions, hiddenActions]);
-  const ActionsComponent = ChannelActionsComponent || DefaultChannelActions;
-
-  return (
-    <div className="ermis-channel-list__topic-group">
-      <div
-        className={`ermis-channel-list__topic-header ${isExpanded ? 'ermis-channel-list__topic-header--expanded' : ''}`}
-        onClick={handleToggle}
-      >
-        <AvatarComponent image={image} name={name} size={40} disableLightbox />
-        <div className="ermis-channel-list__topic-header-name">{name}</div>
-
-        {channel.data?.is_pinned === true && PinnedIconComponent && (
-          <span className="ermis-channel-list__pinned-icon" title="Pinned">
-            <PinnedIconComponent />
-          </span>
-        )}
-
-        <div className="ermis-channel-list__topic-actions-wrapper">
-          <ActionsComponent channel={channel} actions={filteredActions} onClose={() => { }} />
-        </div>
-
-        <svg
-          className="ermis-channel-list__accordion-icon"
-          width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
-        >
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
-      </div>
-
-      {isExpanded && (
-        <div className="ermis-channel-list__topic-sublist">
-          <ChannelRow
-            channel={generalChannelProxy as any}
-            isActive={activeChannel?.cid === channel.cid}
-            handleSelect={handleSelect}
-            renderChannel={renderChannel}
-            ChannelItemComponent={ChannelItemComponent}
-            AvatarComponent={GeneralTopicAvatarComponent || GeneralAvatar}
-            currentUserId={currentUserId}
-            pendingBadgeLabel={pendingBadgeLabel}
-            blockedBadgeLabel={blockedBadgeLabel}
-            closedTopicIcon={closedTopicIcon}
-            PinnedIconComponent={PinnedIconComponent}
-            ChannelActionsComponent={() => null}
-            hiddenActions={hiddenActions}
-            actionLabels={actionLabels}
-            actionIcons={actionIcons}
-          />
-          {topics.map((topicChannel: any) => (
-            <ChannelRow
-              key={topicChannel.cid}
-              channel={topicChannel}
-              isActive={activeChannel?.cid === topicChannel.cid}
-              handleSelect={handleSelect}
-              renderChannel={renderChannel}
-              ChannelItemComponent={ChannelItemComponent}
-              AvatarComponent={TopicAvatarComponent || TopicEmojiAvatar}
-              currentUserId={currentUserId}
-              pendingBadgeLabel={pendingBadgeLabel}
-              blockedBadgeLabel={blockedBadgeLabel}
-              closedTopicIcon={closedTopicIcon}
-              PinnedIconComponent={PinnedIconComponent}
-              ChannelActionsComponent={ChannelActionsComponent}
-              onEditTopic={onEditTopic}
-              onToggleCloseTopic={onToggleCloseTopic}
-              hiddenActions={hiddenActions}
-              actionLabels={actionLabels}
-              actionIcons={actionIcons}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-});
-ChannelTopicGroup.displayName = 'ChannelTopicGroup';
 
 export const ChannelList: React.FC<ChannelListProps> = React.memo(({
-  filters = { type: ['messaging', 'team', 'meeting'], include_pinned_messages: true } as unknown as ChannelFilters,
+  filters = { type: ['messaging', 'team', 'meeting'], include_hidden_messages: true } as unknown as ChannelFilters,
   sort = [],
-  options = { message_limit: 25 } as unknown as ChannelListProps['options'],
+  options = { message_limit: 1 } as unknown as ChannelListProps['options'],
   renderChannel,
   onChannelSelect,
   className,
   LoadingIndicator = DefaultLoading,
   EmptyStateIndicator = DefaultEmpty,
+  ErrorIndicator,
   AvatarComponent = Avatar,
   ChannelItemComponent = ChannelItem,
   pendingInvitesLabel,
@@ -575,11 +437,8 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   pendingBadgeLabel,
   loadingLabel,
   emptyStateLabel = 'No channels found',
+  errorLabel = 'Failed to load channels',
   blockedBadgeLabel = 'Blocked',
-  ChannelTopicGroupComponent,
-  GeneralTopicAvatarComponent,
-  TopicAvatarComponent,
-  generalTopicLabel = 'general',
   onAddTopic,
   TopicEmojiPickerComponent,
   closedTopicIcon,
@@ -587,18 +446,52 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   ChannelActionsComponent,
   onEditTopic,
   onToggleCloseTopic,
+  onDeleteTopic,
+  onTruncateChannel,
   hiddenActions,
   actionLabels,
   actionIcons,
   showOnlineStatus = true,
+  showPendingInvites = true,
+  onTopicDrillDown,
+  maxVisibleTopics,
+  moreTopicsLabel,
+  generalTopicLabel = 'general',
+  TopicPillComponent,
+  FlatTopicGroupItemComponent,
+  scrollToTopOnOwnMessage = true,
+  deletedMessageLabel,
+  stickerMessageLabel,
+  photoMessageLabel,
+  videoMessageLabel,
+  voiceRecordingMessageLabel,
+  fileMessageLabel,
+  encryptedMessageLabel,
+  encryptedMessageUnavailableLabel,
+  systemMessageTranslations,
+  signalMessageTranslations,
+  showTopicPills = false,
 }) => {
   const { client, activeChannel, setActiveChannel } = useChatClient();
+  const { ChannelListErrorIndicator } = useChatComponents();
+
   const [channels, setChannels] = useState<Channel[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<any>(null);
+
+  const ActualErrorIndicator = ErrorIndicator || ChannelListErrorIndicator || DefaultError;
   const [isPendingExpanded, setIsPendingExpanded] = useState(true);
   const [addingTopicForChannel, setAddingTopicForChannel] = useState<Channel | null>(null);
   const [editingTopicForChannel, setEditingTopicForChannel] = useState<Channel | null>(null);
 
+  // Ref for imperative scroll control on the virtualized list
+  const vlistRef = useRef<VListHandle>(null);
+
+  // Scroll to top when the current user sends a message
+  const handleOwnMessageNew = useCallback(() => {
+    vlistRef.current?.scrollToIndex(0);
+  }, []);
+
   const handleAddTopicClick = useCallback((channel: Channel) => {
     if (onAddTopic) {
       onAddTopic(channel);
@@ -648,7 +541,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
       const ms = ch.state?.membership as Record<string, unknown> | undefined;
       const isPending = isPendingMember(ms?.channel_role as string);
       const isSkipped = isSkippedMember(ms?.channel_role as string);
-      
+
       if (isSkipped) {
         return; // Filter out completely
       }
@@ -670,10 +563,12 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   const loadChannels = useCallback(async () => {
     try {
       setLoading(true);
+      setError(null);
       const result = await client.queryChannels(filters, sort, options as { message_limit?: number });
       setChannels(result);
     } catch (err) {
       console.error('Failed to load channels:', err);
+      setError(err);
     } finally {
       setLoading(false);
     }
@@ -684,7 +579,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   }, [loadChannels]);
 
   // Real-time: List manipulation (move to top, add, delete)
-  useChannelListUpdates(channels, setChannels);
+  useChannelListUpdates(channels, setChannels, scrollToTopOnOwnMessage ? handleOwnMessageNew : undefined);
 
   // Online status: compute set of online friend user IDs (skip if disabled)
   const onlineUsers = useOnlineUsers(showOnlineStatus ? channels : []);
@@ -714,31 +609,51 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
       onChannelSelect?.(channel);
 
       // Mark as read when user selects a channel (skip if banned, blocked, or pending)
-      const ms = channel.state?.membership as Record<string, unknown> | undefined;
-      const chState = channel.state as unknown as Record<string, unknown> | undefined;
+      const activeCh = client.activeChannels[channel.cid] || channel;
+      const ms = activeCh.state?.membership as Record<string, unknown> | undefined;
+      const chState = activeCh.state as unknown as Record<string, unknown> | undefined;
       const isBannedInChannel = Boolean(ms?.banned);
-      const isBlockedInChannel = isDirectChannel(channel) && Boolean(ms?.blocked);
+      const isBlockedInChannel = isDirectChannel(activeCh) && Boolean(ms?.blocked);
       const isPending = isPendingMember(ms?.channel_role as string);
       const isSkipped = isSkippedMember(ms?.channel_role as string);
 
-      if (!isBannedInChannel && !isBlockedInChannel && !isPending && !isSkipped && (chState?.unreadCount as number) > 0) {
-        channel.markRead().catch(() => { });
-        // Optimistically reset unread to update UI immediately
-        if (chState) chState.unreadCount = 0;
-        setChannels((prev) => [...prev]);
+      if (!isBannedInChannel && !isBlockedInChannel && !isPending && !isSkipped) {
+        let shouldUpdate = false;
+        if ((chState?.unreadCount as number) > 0) {
+          activeCh.markRead().catch(() => { });
+          // Optimistically reset unread to update UI immediately
+          if (chState) chState.unreadCount = 0;
+          shouldUpdate = true;
+        }
+        
+        // Also optimistic update on the stale channel just in case
+        if (channel.state && (channel.state as any).unreadCount > 0) {
+          (channel.state as any).unreadCount = 0;
+          shouldUpdate = true;
+        }
+
+        if (shouldUpdate) {
+          setChannels((prev) => [...prev]);
+        }
       }
     },
     [setActiveChannel, onChannelSelect, setChannels],
   );
 
   if (loading) return <LoadingIndicator text={loadingLabel} />;
-  if (channels.length === 0) return <EmptyStateIndicator text={emptyStateLabel} />;
+  if (error) return <ActualErrorIndicator text={errorLabel} onRetry={loadChannels} />;
+
+  const isEmpty = showPendingInvites
+    ? (pendingChannels.length === 0 && regularChannels.length === 0)
+    : (regularChannels.length === 0);
+
+  if (isEmpty) return <EmptyStateIndicator text={emptyStateLabel} />;
 
   return (
     <div className={`ermis-channel-list${className ? ` ${className}` : ''}`}>
       {/* VList requires its container to have a height to work. */}
-      <VList style={{ height: '100%' }}>
-        {pendingChannels.length > 0 && (
+      <VList ref={vlistRef} style={{ height: '100%' }}>
+        {showPendingInvites && pendingChannels.length > 0 && (
           <div
             className="ermis-channel-list__accordion-header"
             onClick={() => setIsPendingExpanded(prev => !prev)}
@@ -756,7 +671,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
             </svg>
           </div>
         )}
-        {isPendingExpanded && pendingChannels.map((channel: Channel) => {
+        {showPendingInvites && isPendingExpanded && pendingChannels.map((channel: Channel) => {
           const isActive = activeChannel?.cid === channel.cid;
           return (
             <ChannelRow
@@ -773,48 +688,67 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
               closedTopicIcon={closedTopicIcon}
               PinnedIconComponent={PinnedIconComponent}
               ChannelActionsComponent={ChannelActionsComponent}
+              onTruncateChannel={onTruncateChannel}
               hiddenActions={hiddenActions}
               actionLabels={actionLabels}
               actionIcons={actionIcons}
               isOnline={getIsOnline(channel)}
+              deletedMessageLabel={deletedMessageLabel}
+              stickerMessageLabel={stickerMessageLabel}
+              photoMessageLabel={photoMessageLabel}
+              videoMessageLabel={videoMessageLabel}
+              voiceRecordingMessageLabel={voiceRecordingMessageLabel}
+              fileMessageLabel={fileMessageLabel}
+              encryptedMessageLabel={encryptedMessageLabel}
+              encryptedMessageUnavailableLabel={encryptedMessageUnavailableLabel}
+              systemMessageTranslations={systemMessageTranslations}
+              signalMessageTranslations={signalMessageTranslations}
             />
           );
         })}
-        {pendingChannels.length > 0 && regularChannels.length > 0 && (
+        {/* {pendingChannels.length > 0 && regularChannels.length > 0 && (
           <div className="ermis-channel-list__accordion-header ermis-channel-list__accordion-header--static">
             <span>{channelsLabel}</span>
           </div>
-        )}
+        )} */}
         {regularChannels.map((channel: Channel) => {
-          const isActive = activeChannel?.cid === channel.cid;
+          const isActive = activeChannel?.cid === channel.cid ||
+            (activeChannel?.data?.parent_cid === channel.cid);
           const isTeamWithTopics = hasTopicsEnabled(channel);
 
           if (isTeamWithTopics) {
-            const GroupComponent = ChannelTopicGroupComponent || ChannelTopicGroup;
+            // Drill-down mode: always render flat item with topic pills + last msg
+            const FlatComponent = FlatTopicGroupItemComponent || FlatTopicGroupItem;
             return (
-              <GroupComponent
+              <FlatComponent
                 key={channel.cid}
                 channel={channel}
-                activeChannel={activeChannel}
-                handleSelect={handleSelect}
-                renderChannel={renderChannel}
-                ChannelItemComponent={ChannelItemComponent}
+                isActive={isActive}
+                onDrillDown={(c) => {
+                  handleSelect(c);
+                  if (onTopicDrillDown) onTopicDrillDown(c);
+                }}
                 AvatarComponent={AvatarComponent}
-                GeneralTopicAvatarComponent={GeneralTopicAvatarComponent}
-                TopicAvatarComponent={TopicAvatarComponent}
-                currentUserId={client.userID}
-                pendingBadgeLabel={pendingBadgeLabel}
-                blockedBadgeLabel={blockedBadgeLabel}
+                maxVisibleTopics={maxVisibleTopics}
+                moreTopicsLabel={moreTopicsLabel}
                 generalTopicLabel={generalTopicLabel}
-                onAddTopic={handleAddTopicClick}
-                closedTopicIcon={closedTopicIcon}
+                TopicPillComponent={TopicPillComponent}
                 PinnedIconComponent={PinnedIconComponent}
                 ChannelActionsComponent={ChannelActionsComponent}
-                onEditTopic={handleEditTopicClick}
-                onToggleCloseTopic={handleToggleCloseTopicClick}
+                onAddTopic={handleAddTopicClick}
+                onTruncateChannel={onTruncateChannel}
                 hiddenActions={hiddenActions}
                 actionLabels={actionLabels}
                 actionIcons={actionIcons}
+                deletedMessageLabel={deletedMessageLabel}
+                stickerMessageLabel={stickerMessageLabel}
+                photoMessageLabel={photoMessageLabel}
+                videoMessageLabel={videoMessageLabel}
+                voiceRecordingMessageLabel={voiceRecordingMessageLabel}
+                fileMessageLabel={fileMessageLabel}
+                systemMessageTranslations={systemMessageTranslations}
+                signalMessageTranslations={signalMessageTranslations}
+                showTopicPills={showTopicPills}
               />
             );
           }
@@ -837,10 +771,22 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
               onAddTopic={handleAddTopicClick}
               onEditTopic={handleEditTopicClick}
               onToggleCloseTopic={handleToggleCloseTopicClick}
+              onDeleteTopic={onDeleteTopic}
+              onTruncateChannel={onTruncateChannel}
               hiddenActions={hiddenActions}
               actionLabels={actionLabels}
               actionIcons={actionIcons}
               isOnline={getIsOnline(channel)}
+              deletedMessageLabel={deletedMessageLabel}
+              stickerMessageLabel={stickerMessageLabel}
+              photoMessageLabel={photoMessageLabel}
+              videoMessageLabel={videoMessageLabel}
+              voiceRecordingMessageLabel={voiceRecordingMessageLabel}
+              fileMessageLabel={fileMessageLabel}
+              encryptedMessageLabel={encryptedMessageLabel}
+              encryptedMessageUnavailableLabel={encryptedMessageUnavailableLabel}
+              systemMessageTranslations={systemMessageTranslations}
+              signalMessageTranslations={signalMessageTranslations}
             />
           );
         })}
@@ -865,4 +811,4 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   );
 });
 
-ChannelList.displayName = 'ChannelList'; 'ChannelList';
+ChannelList.displayName = 'ChannelList';