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

package/src/components/ChannelList.tsx

@@ -11,6 +11,12 @@ import { Avatar } from './Avatar';
 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';
+
+export { DefaultChannelActions } from './ChannelActions';
+export type { ChannelAction, ChannelActionsProps } from '../types';
 
 /**
  * Get a human-readable preview string for the last message,
@@ -19,26 +25,28 @@ export type { ChannelListProps, ChannelItemProps } from '../types';
 function getLastMessagePreview(
   channel: Channel,
   myUserId?: string,
-): { text: string; user: 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: '' };
+    return { text: parseSystemMessage(rawText, userMap), user: '', timestamp };
   }
 
   if (msgType === 'signal') {
     const result = parseSignalMessage(rawText, myUserId || '');
-    return { text: result?.text || rawText, user: '' };
+    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 || '' };
+    return { text: 'Sticker', user: lastMsg.user?.name || lastMsg.user_id || '', timestamp };
   }
 
   // Regular / other
@@ -78,6 +86,7 @@ function getLastMessagePreview(
   return {
     text: displayText,
     user: lastMsg.user?.name || lastMsg.user_id || '',
+    timestamp,
   };
 }
 
@@ -91,25 +100,68 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
   unreadCount,
   lastMessageText,
   lastMessageUser,
+  lastMessageTimestamp,
   onSelect,
   AvatarComponent,
   isBlocked,
   isPending,
   pendingBadgeLabel,
   blockedBadgeLabel,
+  isClosedTopic,
+  closedTopicIcon,
+  PinnedIconComponent,
+  ChannelActionsComponent,
+  onAddTopic,
+  onEditTopic,
+  onToggleCloseTopic,
+  hiddenActions,
+  actionLabels,
+  actionIcons,
 }) => {
+  const { client } = useChatClient();
+  const currentUserId = client.userID;
+
   // Subscribe to channel.updated so that when name/image/description change,
   // we re-render from within (bypasses React.memo which only blocks parent-driven re-renders)
-  const [, forceUpdate] = useState(0);
+  const [updateCount, forceUpdate] = useState(0);
   useEffect(() => {
-    const sub = channel.on('channel.updated', () => forceUpdate((c) => c + 1));
-    return () => sub.unsubscribe();
+    const handleUpdate = () => forceUpdate((c) => c + 1);
+    const sub1 = channel.on('channel.updated', handleUpdate);
+    const sub2 = channel.on('channel.pinned', handleUpdate);
+    const sub3 = channel.on('channel.unpinned', handleUpdate);
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+      sub3.unsubscribe();
+    };
   }, [channel]);
 
+  const defaultActions = useMemo(
+    () => computeDefaultActions(channel, currentUserId, { onAddTopic, onEditTopic, onToggleCloseTopic, isBlocked, actionLabels, actionIcons }),
+    [channel, currentUserId, updateCount, onAddTopic, onEditTopic, onToggleCloseTopic, isBlocked, actionLabels, actionIcons],
+  );
+
+  const filteredActions = useMemo(() => {
+    if (!hiddenActions || hiddenActions.length === 0) return defaultActions;
+    return defaultActions.filter(a => !hiddenActions.includes(a.id));
+  }, [defaultActions, hiddenActions]);
+  const ActionsComponent = ChannelActionsComponent || DefaultChannelActions;
+
   const name = channel.data?.name || channel.cid;
   const image = channel.data?.image as string | undefined;
   const showUnread = hasUnread && !isActive;
 
+  const timestampText = useMemo(() => {
+    if (!lastMessageTimestamp) return null;
+    const d = new Date(lastMessageTimestamp);
+    if (isNaN(d.getTime())) return null;
+    const today = new Date();
+    const isToday = d.toDateString() === today.toDateString();
+    return isToday
+      ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  }, [lastMessageTimestamp]);
+
   const handleClick = useCallback(() => {
     onSelect(channel);
   }, [channel, onSelect]);
@@ -118,7 +170,6 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
     'ermis-channel-list__item',
     isActive ? 'ermis-channel-list__item--active' : '',
     showUnread ? 'ermis-channel-list__item--unread' : '',
-    isBlocked ? 'ermis-channel-list__item--blocked' : '',
     isPending ? 'ermis-channel-list__item--pending' : '',
   ].filter(Boolean).join(' ');
 
@@ -126,39 +177,78 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
     <div className={itemClass} onClick={handleClick}>
       <AvatarComponent image={image} name={name} size={40} />
       <div className="ermis-channel-list__item-content">
-        <div className="ermis-channel-list__item-name">{name}</div>
-        {lastMessageText && (
-          <div className="ermis-channel-list__item-last-message">
-            {lastMessageUser && (
-              <span className="ermis-channel-list__item-last-message-user">
-                {lastMessageUser}:{' '}
-              </span>
-            )}
-            <span>{lastMessageText}</span>
-          </div>
-        )}
+        <div className="ermis-channel-list__item-top-row">
+          <div className="ermis-channel-list__item-name">{name}</div>
+          {channel.data?.is_pinned === true && !isClosedTopic && PinnedIconComponent && (
+            <span className="ermis-channel-list__pinned-icon" title="Pinned">
+              <PinnedIconComponent />
+            </span>
+          )}
+          {isClosedTopic && (
+            <span className="ermis-channel-list__closed-icon">
+              {closedTopicIcon || (
+                <svg width="14" height="14" 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>
+          )}
+          {!isClosedTopic && timestampText && <div className="ermis-channel-list__item-timestamp">{timestampText}</div>}
+
+          {isPending && (
+            <span className="ermis-channel-list__pending-badge">{pendingBadgeLabel || 'Invited'}</span>
+          )}
+
+          {isBlocked && (
+            <span className="ermis-channel-list__blocked-icon" title={blockedBadgeLabel || "Blocked"}>
+              <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="4.93" y1="4.93" x2="19.07" y2="19.07" />
+              </svg>
+            </span>
+          )}
+        </div>
+        <div className="ermis-channel-list__item-bottom-row">
+          {!isClosedTopic && lastMessageText && (
+            <div className="ermis-channel-list__item-last-message">
+              {lastMessageUser && (
+                <span className="ermis-channel-list__item-last-message-user">
+                  {lastMessageUser}:{' '}
+                </span>
+              )}
+              <span>{lastMessageText}</span>
+            </div>
+          )}
+
+          {!isClosedTopic && (
+            <div className="ermis-channel-list__item-badges">
+              {showUnread && unreadCount > 0 && (
+                <span className="ermis-channel-list__unread-badge">
+                  {unreadCount > 99 ? '99+' : unreadCount}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
       </div>
-      {showUnread && unreadCount > 0 && (
-        <span className="ermis-channel-list__unread-badge">
-          {unreadCount > 99 ? '99+' : unreadCount}
-        </span>
-      )}
-      {isBlocked && (
-        <span className="ermis-channel-list__blocked-icon" title={blockedBadgeLabel || "Blocked"}>
-          <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="4.93" y1="4.93" x2="19.07" y2="19.07" />
-          </svg>
-        </span>
-      )}
-      {isPending && (
-        <span className="ermis-channel-list__pending-badge">{pendingBadgeLabel || 'Invited'}</span>
+      {!isPending && (
+        <div className="ermis-channel-list__item-actions-wrapper">
+          <ActionsComponent channel={channel} actions={filteredActions} onClose={() => { }} />
+        </div>
       )}
     </div>
   );
 });
 ChannelItem.displayName = 'ChannelItem';
 
+export const DefaultPinnedIcon = React.memo(() => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z" />
+  </svg>
+));
+DefaultPinnedIcon.displayName = 'DefaultPinnedIcon';
+
 const DefaultLoading = React.memo(({ text }: { text?: string }) => (
   <div className="ermis-channel-list__loading">{text || 'Loading channels...'}</div>
 ));
@@ -182,6 +272,15 @@ type ChannelRowProps = {
   currentUserId?: string;
   pendingBadgeLabel?: string;
   blockedBadgeLabel?: string;
+  closedTopicIcon?: React.ReactNode;
+  PinnedIconComponent?: React.ComponentType;
+  ChannelActionsComponent?: React.ComponentType<ChannelActionsProps>;
+  onAddTopic?: (channel: Channel) => void;
+  onEditTopic?: (channel: Channel) => void;
+  onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+  hiddenActions?: string[];
+  actionLabels?: import('../types').ChannelActionLabels;
+  actionIcons?: import('../types').ChannelActionIcons;
 };
 
 const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
@@ -194,6 +293,15 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
   currentUserId,
   pendingBadgeLabel,
   blockedBadgeLabel,
+  closedTopicIcon,
+  PinnedIconComponent,
+  ChannelActionsComponent,
+  onAddTopic,
+  onEditTopic,
+  onToggleCloseTopic,
+  hiddenActions,
+  actionLabels,
+  actionIcons,
 }) => {
   // Use the new custom hook to handle all row-level realtime updates
   const { isBannedInChannel, isBlockedInChannel, updateCount } = useChannelRowUpdates(channel, currentUserId);
@@ -201,12 +309,15 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
 
   const channelState = channel.state as unknown as Record<string, unknown> | undefined;
   const rawUnreadCount = (channelState?.unreadCount as number) ?? 0;
+
+  const isClosedTopic = channel.data?.is_closed_topic === true;
+
+  // Render logic continues...
   const unreadCount = (isBannedInChannel || isBlockedInChannel || isPending) ? 0 : rawUnreadCount;
   const hasUnread = unreadCount > 0;
 
-  // Derive last message preview computation is deferred here, 
-  // so it only executes when VList actually mounts this visible item
-  const { text: rawLastMessageText, user: rawLastMessageUser } = useMemo(
+  // Derive last message preview computation
+  const { text: rawLastMessageText, user: rawLastMessageUser, timestamp: rawLastMessageTimestamp } = useMemo(
     () => getLastMessagePreview(channel, currentUserId),
     // Recompute if latestMessage changes or we get a force update
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -216,6 +327,7 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
   // Hide last message preview when banned, blocked, or pending
   const lastMessageText = (isBannedInChannel || isBlockedInChannel || isPending) ? '' : rawLastMessageText;
   const lastMessageUser = (isBannedInChannel || isBlockedInChannel || isPending) ? '' : rawLastMessageUser;
+  const lastMessageTimestamp = (isBannedInChannel || isBlockedInChannel || isPending) ? null : rawLastMessageTimestamp;
 
   if (renderChannel) {
     return (
@@ -233,19 +345,209 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
       unreadCount={unreadCount}
       lastMessageText={lastMessageText}
       lastMessageUser={lastMessageUser}
+      lastMessageTimestamp={lastMessageTimestamp}
       onSelect={handleSelect}
       AvatarComponent={AvatarComponent}
       isBlocked={isBlockedInChannel}
       isPending={isPending}
       pendingBadgeLabel={pendingBadgeLabel}
       blockedBadgeLabel={blockedBadgeLabel}
+      isClosedTopic={isClosedTopic}
+      closedTopicIcon={closedTopicIcon}
+      PinnedIconComponent={PinnedIconComponent}
+      ChannelActionsComponent={ChannelActionsComponent}
+      onAddTopic={onAddTopic}
+      onEditTopic={onEditTopic}
+      onToggleCloseTopic={onToggleCloseTopic}
+      hiddenActions={hiddenActions}
+      actionLabels={actionLabels}
+      actionIcons={actionIcons}
     />
   );
 });
 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 = Boolean(userRole === 'owner' || userRole === 'moder');
+
+  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} />
+        <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'], include_pinned_messages: true } as unknown as ChannelFilters,
+  filters = { type: ['messaging', 'team', 'meeting'], include_pinned_messages: true } as unknown as ChannelFilters,
   sort = [],
   options = { message_limit: 25 } as unknown as ChannelListProps['options'],
   renderChannel,
@@ -261,28 +563,86 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   loadingLabel,
   emptyStateLabel = 'No channels found',
   blockedBadgeLabel = 'Blocked',
+  ChannelTopicGroupComponent,
+  GeneralTopicAvatarComponent,
+  TopicAvatarComponent,
+  generalTopicLabel = 'general',
+  onAddTopic,
+  TopicEmojiPickerComponent,
+  closedTopicIcon,
+  PinnedIconComponent = DefaultPinnedIcon,
+  ChannelActionsComponent,
+  onEditTopic,
+  onToggleCloseTopic,
+  hiddenActions,
+  actionLabels,
+  actionIcons,
 }) => {
   const { client, activeChannel, setActiveChannel } = useChatClient();
   const [channels, setChannels] = useState<Channel[]>([]);
   const [loading, setLoading] = useState(true);
   const [isPendingExpanded, setIsPendingExpanded] = useState(true);
+  const [addingTopicForChannel, setAddingTopicForChannel] = useState<Channel | null>(null);
+  const [editingTopicForChannel, setEditingTopicForChannel] = useState<Channel | null>(null);
+
+  const handleAddTopicClick = useCallback((channel: Channel) => {
+    if (onAddTopic) {
+      onAddTopic(channel);
+    } else {
+      setAddingTopicForChannel(channel);
+    }
+  }, [onAddTopic]);
+
+  const handleEditTopicClick = useCallback((channel: Channel) => {
+    if (onEditTopic) {
+      onEditTopic(channel);
+    } else {
+      setEditingTopicForChannel(channel);
+    }
+  }, [onEditTopic]);
+
+  const handleToggleCloseTopicClick = useCallback(async (channel: Channel, isClosed: boolean) => {
+    if (onToggleCloseTopic) {
+      onToggleCloseTopic(channel, isClosed);
+      return;
+    }
+
+    const parentCid = channel.data?.parent_cid as string | undefined;
+    if (!parentCid) return;
+
+    const parentChannel = client.activeChannels[parentCid];
+    if (!parentChannel) return;
+
+    try {
+      if (isClosed) {
+        await parentChannel.reopenTopic(channel.cid);
+      } else {
+        await parentChannel.closeTopic(channel.cid);
+      }
+    } catch (err) {
+      console.error('Failed to toggle topic close state', err);
+    }
+  }, [client.activeChannels, onToggleCloseTopic]);
 
   // Group channels into pending and regular
   const { pendingChannels, regularChannels } = useMemo<{ pendingChannels: Channel[], regularChannels: Channel[] }>(() => {
     const pending: Channel[] = [];
+    const pinned: Channel[] = [];
     const regular: Channel[] = [];
-    
+
     channels.forEach(ch => {
       const ms = ch.state?.membership as Record<string, unknown> | undefined;
       const isPending = ms?.channel_role === 'pending' || ms?.role === 'pending';
       if (isPending) {
         pending.push(ch);
+      } else if (ch.data?.is_pinned) {
+        pinned.push(ch);
       } else {
         regular.push(ch);
       }
     });
 
-    return { pendingChannels: pending, regularChannels: regular };
+    return { pendingChannels: pending, regularChannels: [...pinned, ...regular] };
   }, [channels]);
 
   const filtersKey = useMemo(() => JSON.stringify(filters), [filters]);
@@ -317,7 +677,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
       const isBannedInChannel = Boolean(ms?.banned);
       const isBlockedInChannel = channel.type === 'messaging' && Boolean(ms?.blocked);
       const isPending = ms?.channel_role === 'pending' || ms?.role === 'pending';
-      
+
       if (!isBannedInChannel && !isBlockedInChannel && !isPending && (chState?.unreadCount as number) > 0) {
         channel.markRead().catch(() => { });
         // Optimistically reset unread to update UI immediately
@@ -336,8 +696,8 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
       {/* VList requires its container to have a height to work. */}
       <VList style={{ height: '100%' }}>
         {pendingChannels.length > 0 && (
-          <div 
-            className="ermis-channel-list__accordion-header" 
+          <div
+            className="ermis-channel-list__accordion-header"
             onClick={() => setIsPendingExpanded(prev => !prev)}
           >
             <span>
@@ -345,9 +705,9 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
                 ? pendingInvitesLabel(pendingChannels.length)
                 : pendingInvitesLabel || `Invites (${pendingChannels.length})`}
             </span>
-            <svg 
+            <svg
               className={`ermis-channel-list__accordion-icon ${isPendingExpanded ? 'ermis-channel-list__accordion-icon--expanded' : ''}`}
-              width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" 
+              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>
@@ -367,6 +727,12 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
               currentUserId={client.userID}
               pendingBadgeLabel={pendingBadgeLabel}
               blockedBadgeLabel={blockedBadgeLabel}
+              closedTopicIcon={closedTopicIcon}
+              PinnedIconComponent={PinnedIconComponent}
+              ChannelActionsComponent={ChannelActionsComponent}
+              hiddenActions={hiddenActions}
+              actionLabels={actionLabels}
+              actionIcons={actionIcons}
             />
           );
         })}
@@ -377,6 +743,37 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
         )}
         {regularChannels.map((channel: Channel) => {
           const isActive = activeChannel?.cid === channel.cid;
+          const isTeamWithTopics = (channel.type === 'team' || channel.type === 'meeting') && channel.data?.topics_enabled;
+
+          if (isTeamWithTopics) {
+            const GroupComponent = ChannelTopicGroupComponent || ChannelTopicGroup;
+            return (
+              <GroupComponent
+                key={channel.cid}
+                channel={channel}
+                activeChannel={activeChannel}
+                handleSelect={handleSelect}
+                renderChannel={renderChannel}
+                ChannelItemComponent={ChannelItemComponent}
+                AvatarComponent={AvatarComponent}
+                GeneralTopicAvatarComponent={GeneralTopicAvatarComponent}
+                TopicAvatarComponent={TopicAvatarComponent}
+                currentUserId={client.userID}
+                pendingBadgeLabel={pendingBadgeLabel}
+                blockedBadgeLabel={blockedBadgeLabel}
+                generalTopicLabel={generalTopicLabel}
+                onAddTopic={handleAddTopicClick}
+                closedTopicIcon={closedTopicIcon}
+                PinnedIconComponent={PinnedIconComponent}
+                ChannelActionsComponent={ChannelActionsComponent}
+                onEditTopic={handleEditTopicClick}
+                onToggleCloseTopic={handleToggleCloseTopicClick}
+                hiddenActions={hiddenActions}
+                actionLabels={actionLabels}
+                actionIcons={actionIcons}
+              />
+            );
+          }
 
           return (
             <ChannelRow
@@ -390,10 +787,35 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
               currentUserId={client.userID}
               pendingBadgeLabel={pendingBadgeLabel}
               blockedBadgeLabel={blockedBadgeLabel}
+              closedTopicIcon={closedTopicIcon}
+              PinnedIconComponent={PinnedIconComponent}
+              ChannelActionsComponent={ChannelActionsComponent}
+              onAddTopic={handleAddTopicClick}
+              onEditTopic={handleEditTopicClick}
+              onToggleCloseTopic={handleToggleCloseTopicClick}
+              hiddenActions={hiddenActions}
+              actionLabels={actionLabels}
+              actionIcons={actionIcons}
             />
           );
         })}
       </VList>
+      {addingTopicForChannel && (
+        <TopicModal
+          isOpen={true}
+          onClose={() => setAddingTopicForChannel(null)}
+          parentChannel={addingTopicForChannel}
+          EmojiPickerComponent={TopicEmojiPickerComponent}
+        />
+      )}
+      {editingTopicForChannel && (
+        <TopicModal
+          isOpen={true}
+          onClose={() => setEditingTopicForChannel(null)}
+          topic={editingTopicForChannel}
+          EmojiPickerComponent={TopicEmojiPickerComponent}
+        />
+      )}
     </div>
   );
 });