@ermis-network/ermis-chat-react 1.0.6 → 1.0.8

package/src/components/ChannelHeader.tsx

@@ -3,7 +3,11 @@ import { useChatClient } from '../hooks/useChatClient';
 import { usePendingState } from '../hooks/usePendingState';
 import { Avatar } from './Avatar';
 import type { ChannelHeaderProps } from '../types';
+import type { OnlineStatus } from '../hooks/useOnlineStatus';
 import { ErmisCallContext } from '../context/ErmisCallContext';
+import { hasTopicsEnabled, isDirectChannel } from '../channelTypeUtils';
+import { isSkippedMember, isFriendChannel } from '../channelRoleUtils';
+import type { Event } from '@ermis-network/ermis-chat-sdk';
 
 export type { ChannelHeaderProps } from '../types';
 
@@ -16,6 +20,8 @@ export type { ChannelHeaderProps } from '../types';
  * - `AvatarComponent` — replace the avatar
  * - `renderTitle(channel)` — fully custom title rendering
  * - `renderRight(channel)` — render content on the right side
+ * - `showOnlineStatus` — show online/offline dot for friend channels (default: true)
+ * - `OnlineIndicatorComponent` — replace the default indicator
  *
  * For a fully custom header, use `Channel`'s `HeaderComponent` prop instead.
  */
@@ -32,12 +38,21 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
   audioCallTitle = 'Audio Call',
   videoCallTitle = 'Video Call',
   CallBadgeComponent,
+  showOnlineStatus = true,
+  onlineLabel = 'Online',
+  offlineLabel = 'Offline',
+  OnlineIndicatorComponent,
 }) => {
   const { activeChannel, client, enableCall } = useChatClient();
   const { isPending } = usePendingState(activeChannel, client.userID);
   const callContext = useContext(ErmisCallContext);
 
-  const actionDisabled = isPending;
+  const isSkipped = client.userID 
+    ? isSkippedMember(activeChannel?.state?.members?.[client.userID]?.channel_role as string) || 
+      isSkippedMember(activeChannel?.state?.membership?.channel_role as string)
+    : false;
+
+  const actionDisabled = isPending || isSkipped;
 
   // Force re-render when channel.updated WS event fires
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
@@ -60,26 +75,132 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
     [image, activeChannel?.data?.image, channelUpdateCount],
   );
 
+  const teamName = useMemo(() => {
+    if (!activeChannel) return undefined;
+    
+    // If it's a topic, derive from parent_cid
+    const parentCid = activeChannel.data?.parent_cid as string | undefined;
+    if (parentCid && client.activeChannels[parentCid]) {
+      return client.activeChannels[parentCid].data?.name || client.activeChannels[parentCid].cid;
+    }
+
+    // If it's a topics-enabled team channel (the general proxy), the proxy overrides data.name.
+    // We can pull the original name from the SDK cache.
+    if (hasTopicsEnabled(activeChannel)) {
+      const rawChannel = client.activeChannels[activeChannel.cid];
+      if (rawChannel && rawChannel.data?.name && rawChannel.data.name !== activeChannel.data?.name) {
+        return rawChannel.data.name;
+      }
+    }
+    
+    return undefined;
+  }, [activeChannel, client.activeChannels]);
+
+  // ── Online Status (direct friend channels only) ──
+  const currentUserId = client.userID;
+
+  // Get the "other" user's ID from the direct channel.
+  const otherUserId = useMemo(() => {
+    if (!activeChannel || !currentUserId || !isDirectChannel(activeChannel)) return undefined;
+    const members = activeChannel.state?.members;
+    if (!members) return undefined;
+    for (const memberId of Object.keys(members)) {
+      if (memberId !== currentUserId) return memberId;
+    }
+    return undefined;
+  }, [activeChannel, currentUserId]);
+
+  // Check if this is a friend channel (both members are owner).
+  const isFriend = useMemo(() => {
+    if (!otherUserId || !currentUserId || !activeChannel) return false;
+    return isFriendChannel(activeChannel, otherUserId, currentUserId);
+  }, [activeChannel, otherUserId, currentUserId]);
+
+  // Derive online status from watchers + subscribe to realtime events.
+  const [onlineStatus, setOnlineStatus] = useState<OnlineStatus>('unknown');
+
+  useEffect(() => {
+    if (!showOnlineStatus || !isFriend || !otherUserId || !activeChannel) {
+      setOnlineStatus('unknown');
+      return;
+    }
+
+    // Read initial state from watchers.
+    setOnlineStatus(activeChannel.state?.watchers?.[otherUserId] ? 'online' : 'offline');
+
+    const handleWatchingStart = (event: Event) => {
+      if (event.user?.id === otherUserId) {
+        setOnlineStatus('online');
+      }
+    };
+
+    const handleWatchingStop = (event: Event) => {
+      if (event.user?.id === otherUserId) {
+        setOnlineStatus('offline');
+      }
+    };
+
+    const sub1 = activeChannel.on('user.watching.start', handleWatchingStart);
+    const sub2 = activeChannel.on('user.watching.stop', handleWatchingStop);
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    };
+  }, [activeChannel, otherUserId, isFriend, showOnlineStatus]);
+
+  const showOnlineDot = showOnlineStatus && onlineStatus !== 'unknown';
+  const isOnline = onlineStatus === 'online';
+
   if (!activeChannel) return null;
 
   return (
     <div className={`ermis-channel-header${className ? ` ${className}` : ''}`}>
-      <AvatarComponent image={channelImage} name={channelName} size={32} />
+      {activeChannel.data?.parent_cid ? (
+        <div className="ermis-channel-header__topic-avatar">
+          {channelImage && typeof channelImage === 'string' && channelImage.startsWith('emoji://') 
+            ? channelImage.replace('emoji://', '') 
+            : '#'}
+        </div>
+      ) : (
+        <AvatarComponent image={channelImage} name={teamName || channelName} size={32} />
+      )}
 
       <div className="ermis-channel-header__info">
         {renderTitle ? (
           renderTitle(activeChannel)
         ) : (
-          <div className="ermis-channel-header__name">{channelName}</div>
+          <div className="ermis-channel-header__title-container">
+            {teamName && (
+              <div className="ermis-channel-header__team-name">
+                {teamName}
+              </div>
+            )}
+            <div className="ermis-channel-header__name">{channelName}</div>
+          </div>
+        )}
+        {/* Online/Offline indicator for friend direct channels */}
+        {showOnlineDot && (
+          OnlineIndicatorComponent ? (
+            <OnlineIndicatorComponent isOnline={isOnline} />
+          ) : (
+            <div className={`ermis-channel-header__online-status ermis-channel-header__online-status--${isOnline ? 'online' : 'offline'}`}>
+              <span className={`ermis-channel-header__online-dot ermis-channel-header__online-dot--${isOnline ? 'online' : 'offline'}`} />
+              <span className="ermis-channel-header__online-label">
+                {isOnline ? onlineLabel : offlineLabel}
+              </span>
+            </div>
+          )
         )}
-        {subtitle && (
+        {/* Consumer-provided subtitle (takes over if set) */}
+        {subtitle && !showOnlineDot && (
           <div className="ermis-channel-header__subtitle">{subtitle}</div>
         )}
       </div>
 
       {/* renderRight exposes actionDisabled for consumers to disable UI features natively */}
       <div className="ermis-channel-header__actions">
-        {enableCall && callContext && activeChannel?.type === 'messaging' && !isPending && (
+        {enableCall && callContext && isDirectChannel(activeChannel) && !isPending && !isSkipped && (
           <>
             {renderAudioCallButton ? (
               renderAudioCallButton(() => callContext.createCall('audio', activeChannel.cid || ''), actionDisabled)

package/src/components/ChannelInfo/ChannelInfo.tsx

@@ -6,6 +6,7 @@ import { Avatar } from '../Avatar';
 import { DefaultChannelInfoTabs } from './ChannelInfoTabs';
 import { AddMemberModal } from './AddMemberModal';
 import { EditChannelModal } from './EditChannelModal';
+import { TopicModal } from '../TopicModal';
 import { MessageSearchPanel } from './MessageSearchPanel';
 import { ChannelSettingsPanel } from './ChannelSettingsPanel';
 import type {
@@ -15,6 +16,8 @@ import type {
   ChannelInfoActionsProps,
 } from '../../types';
 import { useChannelMembers, useChannelProfile } from '../../hooks/useChannelData';
+import { isGroupChannel, isTopicChannel } from '../../channelTypeUtils';
+import { canManageChannel, CHANNEL_ROLES } from '../../channelRoleUtils';
 
 export const DefaultChannelInfoHeader: React.FC<ChannelInfoHeaderProps> = React.memo(({ title, onClose }) => {
   return (
@@ -32,10 +35,22 @@ export const DefaultChannelInfoHeader: React.FC<ChannelInfoHeaderProps> = React.
 });
 DefaultChannelInfoHeader.displayName = 'DefaultChannelInfoHeader';
 
-export const DefaultChannelInfoCover: React.FC<ChannelInfoCoverProps> = React.memo(({ channelName, channelImage, channelDescription, AvatarComponent, canEdit, onEditClick, isPublic, isTeamChannel }) => {
+export const DefaultChannelInfoCover: React.FC<ChannelInfoCoverProps> = React.memo(({ channelName, channelImage, channelDescription, AvatarComponent, canEdit, onEditClick, isPublic, isTeamChannel, parentChannelName, isTopic }) => {
+  const renderAvatar = () => {
+    if (isTopic && channelImage && channelImage.startsWith('emoji://')) {
+      const emoji = channelImage.replace('emoji://', '');
+      return (
+        <div className="ermis-channel-info__topic-emoji-avatar">
+          {emoji}
+        </div>
+      );
+    }
+    return <AvatarComponent image={channelImage} name={channelName} size={80} className="ermis-channel-info__avatar" />;
+  };
+
   return (
     <div className="ermis-channel-info__cover">
-      <AvatarComponent image={channelImage} name={channelName} size={80} className="ermis-channel-info__avatar" />
+      {renderAvatar()}
       <div className="ermis-channel-info__name-row">
         <h2 className="ermis-channel-info__name">{channelName}</h2>
         {canEdit && onEditClick && (
@@ -47,6 +62,11 @@ export const DefaultChannelInfoCover: React.FC<ChannelInfoCoverProps> = React.me
           </button>
         )}
       </div>
+      {parentChannelName && (
+        <div className="ermis-channel-info__parent-name">
+          {parentChannelName}
+        </div>
+      )}
       {isTeamChannel && (
         <span className={`ermis-channel-info__type-badge ${isPublic ? 'ermis-channel-info__type-badge--public' : 'ermis-channel-info__type-badge--private'}`}>
           {isPublic ? (
@@ -74,10 +94,10 @@ DefaultChannelInfoCover.displayName = 'DefaultChannelInfoCover';
 
 export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = React.memo(({
   onSearchClick, onSettingsClick, onLeaveChannel, onDeleteChannel,
-  onBlockUser, onUnblockUser,
-  isTeamChannel, isBlocked, currentUserRole,
+  onBlockUser, onUnblockUser, onCloseTopic, onReopenTopic,
+  isTeamChannel, isTopic, isClosedTopic, isBlocked, currentUserRole,
   searchLabel = 'Search', settingsLabel = 'Settings', deleteLabel = 'Delete', leaveLabel = 'Leave',
-  blockLabel = 'Block', unblockLabel = 'Unblock'
+  blockLabel = 'Block', unblockLabel = 'Unblock', closeTopicLabel = 'Close Topic', reopenTopicLabel = 'Reopen Topic'
 }) => {
   return (
     <div className="ermis-channel-info__actions">
@@ -90,7 +110,7 @@ export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = Reac
         </div>
         <span>{searchLabel}</span>
       </button>
-      {isTeamChannel && (currentUserRole === 'owner' || currentUserRole === 'moder') && (
+      {isTeamChannel && canManageChannel(currentUserRole) && (
         <button className="ermis-channel-info__action-btn" onClick={onSettingsClick}>
           <div className="ermis-channel-info__action-icon">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -102,7 +122,7 @@ export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = Reac
         </button>
       )}
       {isTeamChannel && (
-        currentUserRole === 'owner' ? (
+        currentUserRole === CHANNEL_ROLES.OWNER ? (
           <button className="ermis-channel-info__action-btn ermis-channel-info__action-btn--danger" onClick={onDeleteChannel}>
             <div className="ermis-channel-info__action-icon">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -125,8 +145,32 @@ export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = Reac
           </button>
         )
       )}
+      {/* Topics: Close/Reopen Topic for owner/moder */}
+      {isTopic && canManageChannel(currentUserRole) && (
+        isClosedTopic ? (
+          <button className="ermis-channel-info__action-btn" onClick={onReopenTopic}>
+            <div className="ermis-channel-info__action-icon">
+              <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 9.9-1" />
+              </svg>
+            </div>
+            <span>{reopenTopicLabel}</span>
+          </button>
+        ) : (
+          <button className="ermis-channel-info__action-btn ermis-channel-info__action-btn--danger" onClick={onCloseTopic}>
+            <div className="ermis-channel-info__action-icon">
+              <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>
+            </div>
+            <span>{closeTopicLabel}</span>
+          </button>
+        )
+      )}
       {/* Block/Unblock — messaging (1-1) channels only */}
-      {!isTeamChannel && (
+      {!isTeamChannel && !isTopic && (
         isBlocked ? (
           <button className="ermis-channel-info__action-btn" onClick={onUnblockUser}>
             <div className="ermis-channel-info__action-icon">
@@ -160,7 +204,7 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     className = '',
     AvatarComponent = Avatar,
     onClose,
-    title = 'Channel Info',
+    title: titleProp,
     HeaderComponent = DefaultChannelInfoHeader,
     CoverComponent = DefaultChannelInfoCover,
     ActionsComponent = DefaultChannelInfoActions,
@@ -216,6 +260,12 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     onUnblockUser: onUnblockUserProp,
     actionsBlockLabel,
     actionsUnblockLabel,
+    actionsCloseTopicLabel,
+    actionsReopenTopicLabel,
+    // Settings panel customizations
+    settingsWorkspaceTopicsTitle,
+    settingsTopicsFeatureName,
+    settingsTopicsFeatureDescription,
   } = props;
 
   const { activeChannel, client } = useChatClient();
@@ -225,7 +275,14 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
 
   const currentUserId = client?.userID;
   const currentUserRole = currentUserId ? channel?.state?.members?.[currentUserId]?.channel_role : undefined;
-  const isTeamChannel = channel?.type === 'team';
+  const isTeamChannel = isGroupChannel(channel);
+  const isTopic = isTopicChannel(channel);
+  const isClosedTopic = channel?.data?.is_closed_topic === true;
+  const title = titleProp !== undefined ? titleProp : (isTopic ? 'Topic Info' : 'Channel Info');
+
+  const parentCid = channel?.data?.parent_cid as string | undefined;
+  const parentChannel = parentCid && client ? client.activeChannels[parentCid] : undefined;
+  let parentChannelName = parentChannel?.data?.name || (parentCid ? 'Unknown' : undefined);
 
   const handleDeleteChannel = useCallback(async () => {
     if (onDeleteChannelProp) return onDeleteChannelProp();
@@ -293,20 +350,47 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     try { await channel.unblockUser(); } catch (e) { console.error('Error unblocking user', e); }
   }, [channel, onUnblockUserProp]);
 
+  const handleCloseTopic = useCallback(async () => {
+    if (!channel || !parentChannel) return;
+    try { await parentChannel.closeTopic(channel.cid); } catch (e) { console.error('Error closing topic', e); }
+  }, [channel, parentChannel]);
+
+  const handleReopenTopic = useCallback(async () => {
+    if (!channel || !parentChannel) return;
+    try { await parentChannel.reopenTopic(channel.cid); } catch (e) { console.error('Error reopening topic', e); }
+  }, [channel, parentChannel]);
+
   const { members } = useChannelMembers(channel);
-  const { channelName, channelImage, channelDescription } = useChannelProfile(channel);
+  const { channelName: profileChannelName, channelImage, channelDescription } = useChannelProfile(channel);
+
+  let finalChannelName = profileChannelName;
+  let finalParentChannelName = parentChannelName;
+
+  // If this is the proxy 'general' channel, show the team name as the main name and hide the parent name.
+  if (isGroupChannel(channel) && channel?.data?.name === 'general' && channel.cid) {
+    const realChannelName = client?.activeChannels[channel.cid]?.data?.name;
+    if (realChannelName && realChannelName !== 'general') {
+      finalChannelName = realChannelName;
+      finalParentChannelName = undefined;
+    }
+  }
 
   const [showAddMemberModal, setShowAddMemberModal] = useState(false);
   const [showEditChannelModal, setShowEditChannelModal] = useState(false);
+  const [showEditTopicModal, setShowEditTopicModal] = useState(false);
   const [showSearchPanel, setShowSearchPanel] = useState(false);
   const [showSettingsPanel, setShowSettingsPanel] = useState(false);
 
   // Permission: only owner or moderator can edit channel info (banned users cannot)
-  const canEditChannel = isTeamChannel && !isBanned && (currentUserRole === 'owner' || currentUserRole === 'moder');
+  const canEditChannel = (isTeamChannel || isTopic) && !isBanned && canManageChannel(currentUserRole);
 
   const handleEditChannelClick = useCallback(() => {
-    setShowEditChannelModal(true);
-  }, []);
+    if (isTopic) {
+      setShowEditTopicModal(true);
+    } else {
+      setShowEditChannelModal(true);
+    }
+  }, [isTopic]);
 
   const handleAddMemberClick = useCallback(() => {
     if (onAddMemberClick) return onAddMemberClick();
@@ -322,7 +406,7 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
       <HeaderComponent title={title} onClose={onClose} />
 
       <CoverComponent
-        channelName={channelName}
+        channelName={finalChannelName}
         channelImage={channelImage}
         channelDescription={channelDescription}
         AvatarComponent={AvatarComponent}
@@ -330,19 +414,20 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
         onEditClick={handleEditChannelClick}
         isPublic={Boolean(channel?.data?.public)}
         isTeamChannel={isTeamChannel}
+        parentChannelName={finalParentChannelName}
+        isTopic={isTopic}
       />
 
-      {isBanned ? (
+      {isBanned && (
         <div className="ermis-channel-info__banned-banner">
-          <div className="ermis-channel-info__banned-banner-icon">
-            <svg width="32" height="32" 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-channel-info__banned-banner-text">You have been blocked from this channel</span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
+          </svg>
+          <span className="ermis-channel-info__banned-banner-text">You have been banned from this channel</span>
         </div>
-      ) : (
+      )}
+      {!isBanned && (
         <>
           <ActionsComponent
             onSearchClick={() => setShowSearchPanel(true)}
@@ -351,7 +436,11 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
             onDeleteChannel={handleDeleteChannel}
             onBlockUser={handleBlockUser}
             onUnblockUser={handleUnblockUser}
+            onCloseTopic={handleCloseTopic}
+            onReopenTopic={handleReopenTopic}
             isTeamChannel={isTeamChannel}
+            isTopic={isTopic}
+            isClosedTopic={isClosedTopic}
             isBlocked={isBlocked}
             currentUserRole={currentUserRole}
             searchLabel={actionsSearchLabel}
@@ -360,6 +449,8 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
             leaveLabel={actionsLeaveLabel}
             blockLabel={actionsBlockLabel}
             unblockLabel={actionsUnblockLabel}
+            closeTopicLabel={actionsCloseTopicLabel}
+            reopenTopicLabel={actionsReopenTopicLabel}
           />
 
           <TabsComponent
@@ -427,6 +518,16 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
               />
             );
           })()}
+
+          {showEditTopicModal && (() => {
+            return (
+              <TopicModal
+                isOpen={true}
+                onClose={() => setShowEditTopicModal(false)}
+                topic={channel}
+              />
+            );
+          })()}
         </>
       )}
 
@@ -446,6 +547,9 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
           isOpen={showSettingsPanel}
           onClose={() => setShowSettingsPanel(false)}
           channel={channel}
+          workspaceTopicsTitle={settingsWorkspaceTopicsTitle}
+          topicsFeatureName={settingsTopicsFeatureName}
+          topicsFeatureDescription={settingsTopicsFeatureDescription}
         />
       )}
     </div>

package/src/components/ChannelInfo/ChannelInfoTabs.tsx

@@ -8,7 +8,16 @@ import { LinkListItem } from './LinkListItem';
 import { FileListItem } from './FileListItem';
 import { MemberListItem } from './MemberListItem';
 import { TabEmptyState, TabLoadingState } from './States';
-import type { ChannelInfoTabsProps, MediaTab, AttachmentItem } from '../../types';
+import { MediaLightbox } from '../MediaLightbox';
+import type { ChannelInfoTabsProps, MediaTab, AttachmentItem, MediaLightboxItem } from '../../types';
+import { isDirectChannel } from '../../channelTypeUtils';
+import {
+  CHANNEL_ROLES,
+  canRemoveTargetMember,
+  canBanTargetMember,
+  canPromoteTargetMember,
+  canDemoteTargetMember
+} from '../../channelRoleUtils';
 
 export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo(({
   channel,
@@ -31,11 +40,19 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
   EmptyStateComponent,
   LoadingComponent,
 }) => {
-  const isMessaging = channel?.type === 'messaging';
+  const isMessaging = isDirectChannel(channel);
+  const isTopic = Boolean(channel?.data?.parent_cid);
+  
   const { isBanned } = useBannedState(channel, currentUserId);
   const { isBlocked } = useBlockedState(channel, currentUserId);
 
-  const availableTabs: MediaTab[] = isMessaging ? MESSAGING_TABS : ALL_TABS;
+  const availableTabs: MediaTab[] = useMemo(() => {
+    let tabs = isMessaging ? MESSAGING_TABS : ALL_TABS;
+    if (isTopic) {
+      tabs = tabs.filter(t => t !== 'members');
+    }
+    return tabs;
+  }, [isMessaging, isTopic]);
 
   const [activeTab, setActiveTab] = useState<MediaTab>(availableTabs[0]);
   const contentTab = useDeferredValue(activeTab);
@@ -45,7 +62,7 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
   useEffect(() => {
     setActiveTab(availableTabs[0]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channel?.cid]);
+  }, [channel?.cid, availableTabs]);
 
   // Resolve sub-components with defaults
   const MemberItem = MemberItemComponent || MemberListItem;
@@ -60,8 +77,8 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
 
   const sortedMembers = useMemo(() => {
     return [...members].sort((a, b) => {
-      const aWeight = ROLE_WEIGHTS[a.channel_role || 'member'] || 0;
-      const bWeight = ROLE_WEIGHTS[b.channel_role || 'member'] || 0;
+      const aWeight = ROLE_WEIGHTS[a.channel_role || CHANNEL_ROLES.MEMBER] || 0;
+      const bWeight = ROLE_WEIGHTS[b.channel_role || CHANNEL_ROLES.MEMBER] || 0;
       return bWeight - aWeight;
     });
   }, [members]);
@@ -125,6 +142,31 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
     window.open(url, '_blank', 'noopener,noreferrer');
   }, []);
 
+  // Lightbox state for media tab
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  const lightboxItems = useMemo<MediaLightboxItem[]>(() => {
+    return mediaItems.map(item => ({
+      type: (item.attachment_type === 'video' ? 'video' : 'image') as 'image' | 'video',
+      src: item.url,
+      alt: item.file_name,
+      posterSrc: item.thumb_url || undefined,
+    }));
+  }, [mediaItems]);
+
+  const handleMediaClick = useCallback((url: string) => {
+    const idx = mediaItems.findIndex(item => item.url === url);
+    if (idx >= 0) {
+      setLightboxIndex(idx);
+      setLightboxOpen(true);
+    }
+  }, [mediaItems]);
+
+  const closeLightbox = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+
   // Group media into rows of 3 for grid layout inside VList
   const mediaRows = useMemo(() => {
     const rows: AttachmentItem[][] = [];
@@ -163,42 +205,29 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
           }
         }
         sortedMembers.forEach(member => {
-          const role = member.channel_role || 'member';
-          const isTargetRemovable = role === 'member' || role === 'pending' || (currentUserRole === 'owner' && role === 'moder');
+          const role = member.channel_role || CHANNEL_ROLES.MEMBER;
+          const isTargetRemovable = canRemoveTargetMember(currentUserRole, role);
 
           const canRemove = Boolean(
-            (currentUserRole === 'owner' || currentUserRole === 'moder') &&
             isTargetRemovable &&
             member.user_id !== currentUserId
           );
 
           const canBan = Boolean(
-            (currentUserRole === 'owner' || currentUserRole === 'moder') &&
-            isTargetRemovable &&
-            role !== 'pending' &&
+            canBanTargetMember(currentUserRole, role) &&
             member.user_id !== currentUserId &&
             !member.banned
           );
 
           const canUnban = Boolean(
-            (currentUserRole === 'owner' || currentUserRole === 'moder') &&
-            isTargetRemovable &&
-            role !== 'pending' &&
+            canBanTargetMember(currentUserRole, role) &&
             member.user_id !== currentUserId &&
             member.banned
           );
 
-          const canPromote = Boolean(
-            currentUserRole === 'owner' &&
-            role === 'member' &&
-            member.user_id !== currentUserId
-          );
+          const canPromote = canPromoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
 
-          const canDemote = Boolean(
-            currentUserRole === 'owner' &&
-            role === 'moder' &&
-            member.user_id !== currentUserId
-          );
+          const canDemote = canDemoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
 
           items.push(
             <MemberItem
@@ -224,12 +253,12 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
         if (MediaItem === MediaGridItem) {
           // Default: use grid rows
           return mediaRows.map((row, rowIdx) => (
-            <MediaRow key={row[0]?.id || rowIdx} row={row} onClick={handleOpenUrl} />
+            <MediaRow key={row[0]?.id || rowIdx} row={row} onClick={handleMediaClick} />
           ));
         }
         // Custom: render each item individually
         return mediaItems.map((item, idx) => (
-          <MediaItem key={item.id || idx} item={item} onClick={handleOpenUrl} />
+          <MediaItem key={item.id || idx} item={item} onClick={handleMediaClick} />
         ));
       case 'links':
         return linkItems.map((item, idx) => (
@@ -242,7 +271,7 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
       default:
         return [];
     }
-  }, [contentTab, sortedMembers, mediaRows, mediaItems, linkItems, fileItems, onAddMemberClick, AvatarComponent, handleOpenUrl, MemberItem, MediaItem, LinkItem, FileItem]);
+  }, [contentTab, sortedMembers, mediaRows, mediaItems, linkItems, fileItems, onAddMemberClick, AvatarComponent, handleMediaClick, handleOpenUrl, MemberItem, MediaItem, LinkItem, FileItem]);
 
   // Check if content is empty for the content tab (deferred)
   const isTabEmpty = vlistChildren.length === 0 && !(loading && contentTab !== 'members');
@@ -277,6 +306,16 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
           </VList>
         )}
       </div>
+
+      {/* Media Lightbox */}
+      {lightboxItems.length > 0 && (
+        <MediaLightbox
+          items={lightboxItems}
+          initialIndex={lightboxIndex}
+          isOpen={lightboxOpen}
+          onClose={closeLightbox}
+        />
+      )}
     </div>
   );
 });