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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ermis-network/ermis-chat-react",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "React UI components for Ermis Chat",
   "author": "Ermis",
   "homepage": "https://ermis.network/",
@@ -20,7 +20,7 @@
     "/src"
   ],
   "dependencies": {
-    "@ermis-network/ermis-chat-sdk": "1.0.5",
+    "@ermis-network/ermis-chat-sdk": "1.0.7",
     "virtua": "^0.48.8"
   },
   "peerDependencies": {

package/src/components/BannedOverlay.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export type BannedOverlayProps = {
+  isBlocked?: boolean;
+  blockedTitle: string;
+  bannedTitle: string;
+  blockedSubtitle: string;
+  bannedSubtitle: string;
+  onUnblock?: () => void;
+};
+
+export const BannedOverlay: React.FC<BannedOverlayProps> = React.memo(({
+  isBlocked,
+  blockedTitle,
+  bannedTitle,
+  blockedSubtitle,
+  bannedSubtitle,
+  onUnblock,
+}) => (
+  <div className="ermis-message-list__banned-overlay">
+    <div className="ermis-message-list__banned-overlay-icon">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+      </svg>
+    </div>
+    <span className="ermis-message-list__banned-overlay-title">{isBlocked ? blockedTitle : bannedTitle}</span>
+    <span className="ermis-message-list__banned-overlay-subtitle">{isBlocked ? blockedSubtitle : bannedSubtitle}</span>
+    {isBlocked && onUnblock && (
+      <button
+        className="ermis-message-list__unblock-btn"
+        onClick={onUnblock}
+      >
+        Unblock
+      </button>
+    )}
+  </div>
+));
+
+BannedOverlay.displayName = 'BannedOverlay';

package/src/components/ChannelActions.tsx

@@ -0,0 +1,231 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import type { ChannelAction, ChannelActionLabels, ChannelActionIcons, ChannelActionsProps } from '../types';
+import { Dropdown } from './Dropdown';
+
+/* ----------------------------------------------------------
+   SVG Icons for default actions
+   ---------------------------------------------------------- */
+const PinIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" /><path d="M9 15l-4.5 4.5" /><path d="M14.5 4l5.5 5.5" /></svg>);
+const UnpinIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" /><path d="M9 15l-4.5 4.5" /><path d="M14.5 4l5.5 5.5" /><line x1="3" y1="3" x2="21" y2="21" /></svg>);
+const BlockIcon = () => (<svg width="14" height="14" 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>);
+const LeaveIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" /></svg>);
+const TrashIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>);
+const LockIcon = () => (<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>);
+const UnlockIcon = () => (<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 9.9-1" /></svg>);
+const CreateTopicIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>);
+const EditIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>);
+const MoreIcon = () => (<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="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg>);
+
+/* ----------------------------------------------------------
+   computeDefaultActions
+   Derives a list of ChannelAction[] based on channel type
+   and the current user's role. Currently actions only log
+   to console — real API calls will be wired later.
+   ---------------------------------------------------------- */
+export function computeDefaultActions(
+  channel: Channel,
+  currentUserId?: string,
+  options?: {
+    onAddTopic?: (channel: Channel) => void;
+    onEditTopic?: (channel: Channel) => void;
+    onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+    isBlocked?: boolean;
+    actionLabels?: ChannelActionLabels;
+    actionIcons?: ChannelActionIcons;
+  },
+): ChannelAction[] {
+  const actions: ChannelAction[] = [];
+  if (!currentUserId) return actions;
+
+  const isDirect = channel.type === 'messaging';
+  const isTeamOrMeeting = channel.type === 'team' || channel.type === 'meeting';
+  const isTopic = channel.type === 'topic' || Boolean(channel.data?.parent_cid);
+  const isClosed = channel.data?.is_closed_topic === true;
+
+  const ms = channel.state?.members?.[currentUserId] || channel.state?.membership;
+  const role = ms?.channel_role || (ms as any)?.role;
+  const isBlocked = options?.isBlocked !== undefined ? options.isBlocked : (ms as any)?.blocked;
+  const isPinned = channel.data?.is_pinned === true;
+
+  // Pin / Unpin — available for all channel types
+  const actionLabels = options?.actionLabels;
+
+  const pinLabel = isPinned
+    ? (isTopic ? (actionLabels?.unpinTopic || 'Unpin topic') : (actionLabels?.unpinChannel || 'Unpin channel'))
+    : (isTopic ? (actionLabels?.pinTopic || 'Pin topic') : (actionLabels?.pinChannel || 'Pin channel'));
+
+  const actionIcons = options?.actionIcons;
+
+  const pinIcon = isPinned 
+    ? (actionIcons?.UnpinIcon || <UnpinIcon />) 
+    : (actionIcons?.PinIcon || <PinIcon />);
+
+  actions.push({
+    id: isPinned ? 'unpin' : 'pin',
+    label: pinLabel,
+    icon: pinIcon,
+    onClick: async (ch) => {
+      try {
+        if (isPinned) {
+          await ch.unpin();
+        } else {
+          await ch.pin();
+        }
+      } catch (e) {
+        console.error('Error toggling pin state', e);
+      }
+    },
+  });
+
+  if (isDirect) {
+    // Direct channel: Block / Unblock
+    actions.push({
+      id: isBlocked ? 'unblock' : 'block',
+      label: isBlocked ? (actionLabels?.unblockUser || 'Unblock user') : (actionLabels?.blockUser || 'Block user'),
+      icon: isBlocked ? (actionIcons?.UnblockIcon || <BlockIcon />) : (actionIcons?.BlockIcon || <BlockIcon />),
+      isDanger: !isBlocked,
+      onClick: async (ch) => {
+        try {
+          if (isBlocked) {
+            await ch.unblockUser();
+          } else {
+            await ch.blockUser();
+          }
+        } catch (e) {
+          console.error('Error toggling block state', e);
+        }
+      },
+    });
+  } else if (isTopic) {
+    // Topic: Edit topic (owner & moder only)
+    if (role === 'owner' || role === 'moder') {
+      actions.push({
+        id: 'edit_topic',
+        label: actionLabels?.editTopic || 'Edit topic',
+        icon: actionIcons?.EditTopicIcon || <EditIcon />,
+        onClick: (ch) => {
+          options?.onEditTopic?.(ch);
+        },
+      });
+    }
+    // Topic: Close / Reopen (owner & moder only)
+    if (role === 'owner' || role === 'moder') {
+      actions.push({
+        id: isClosed ? 'reopen' : 'close',
+        label: isClosed ? (actionLabels?.reopenTopic || 'Reopen topic') : (actionLabels?.closeTopic || 'Close topic'),
+        icon: isClosed ? (actionIcons?.ReopenTopicIcon || <UnlockIcon />) : (actionIcons?.CloseTopicIcon || <LockIcon />),
+        isDanger: !isClosed,
+        onClick: (ch) => {
+          options?.onToggleCloseTopic?.(ch, isClosed);
+        },
+      });
+    }
+  } else if (isTeamOrMeeting) {
+    // Team channel: Create Topic (owner & moder, only if topics enabled)
+    const hasTopicsEnabled = Boolean(channel.data?.topics_enabled);
+    if (hasTopicsEnabled && (role === 'owner' || role === 'moder') && options?.onAddTopic) {
+      actions.push({
+        id: 'create_topic',
+        label: actionLabels?.createTopic || 'Create topic',
+        icon: actionIcons?.CreateTopicIcon || <CreateTopicIcon />,
+        onClick: (ch) => { options.onAddTopic!(ch); },
+      });
+    }
+    if (role === 'owner') {
+      actions.push({
+        id: 'delete',
+        label: actionLabels?.deleteChannel || 'Delete channel',
+        icon: actionIcons?.DeleteChannelIcon || <TrashIcon />,
+        isDanger: true,
+        onClick: async (ch) => {
+          try {
+            await ch.delete();
+          } catch (e) {
+            console.error('Error deleting channel', e);
+          }
+        },
+      });
+    }
+    if (role === 'moder' || role === 'member') {
+      actions.push({
+        id: 'leave',
+        label: actionLabels?.leaveChannel || 'Leave channel',
+        icon: actionIcons?.LeaveChannelIcon || <LeaveIcon />,
+        isDanger: true,
+        onClick: async (ch) => {
+          try {
+            await ch.removeMembers([currentUserId]);
+          } catch (e) {
+            console.error('Error leaving channel', e);
+          }
+        },
+      });
+    }
+  }
+
+  return actions;
+}
+
+/* ----------------------------------------------------------
+   DefaultChannelActions
+   The default UI component that renders the "more" trigger
+   button and the dropdown menu. Consumer can fully replace
+   this via ChannelActionsComponent prop.
+   ---------------------------------------------------------- */
+export const DefaultChannelActions: React.FC<ChannelActionsProps> = React.memo(({ channel, actions, onClose }) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null);
+
+  const handleActionsClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setAnchorRect(e.currentTarget.getBoundingClientRect());
+    setDropdownOpen(true);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setDropdownOpen(false);
+    setAnchorRect(null);
+    onClose();
+  }, [onClose]);
+
+  if (!actions || actions.length === 0) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`ermis-channel-list__actions-trigger ${dropdownOpen ? 'ermis-channel-list__actions-trigger--active' : ''}`}
+        onClick={handleActionsClick}
+        title="More actions"
+      >
+        <MoreIcon />
+      </button>
+      <Dropdown
+        isOpen={dropdownOpen}
+        anchorRect={anchorRect}
+        onClose={handleClose}
+        align="right"
+      >
+        <div className="ermis-dropdown__menu">
+          {actions.map((action) => (
+            <button
+              key={action.id}
+              className={`ermis-dropdown__item ${action.isDanger ? 'ermis-dropdown__item--danger' : ''}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleClose();
+                action.onClick(channel, e);
+              }}
+            >
+              {action.icon}
+              <span>{action.label}</span>
+            </button>
+          ))}
+        </div>
+      </Dropdown>
+    </>
+  );
+});
+
+DefaultChannelActions.displayName = 'DefaultChannelActions';

package/src/components/ChannelHeader.tsx

@@ -60,17 +60,53 @@ 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 ((activeChannel.type === 'team' || activeChannel.type === 'meeting') && activeChannel.data?.topics_enabled) {
+      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]);
+
   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>
         )}
         {subtitle && (
           <div className="ermis-channel-header__subtitle">{subtitle}</div>

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 {
@@ -32,10 +33,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 +60,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 +92,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">
@@ -125,8 +143,32 @@ export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = Reac
           </button>
         )
       )}
+      {/* Topics: Close/Reopen Topic for owner/moder */}
+      {isTopic && (currentUserRole === 'owner' || currentUserRole === 'moder') && (
+        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 +202,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 +258,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 +273,22 @@ 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 = channel?.type === 'team' || channel?.type === 'meeting';
+  const isTopic = Boolean(channel?.data?.parent_cid) || channel?.type === 'topic';
+  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);
+
+  // If this is the proxy 'general' channel, its real name is the parent team name
+  if ((channel?.type === 'team' || channel?.type === 'meeting') && channel?.data?.name === 'general' && channel.cid) {
+    const realChannelName = client?.activeChannels[channel.cid]?.data?.name;
+    if (realChannelName && realChannelName !== 'general') {
+      parentChannelName = realChannelName;
+    }
+  }
 
   const handleDeleteChannel = useCallback(async () => {
     if (onDeleteChannelProp) return onDeleteChannelProp();
@@ -293,20 +356,35 @@ 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 [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 && (currentUserRole === 'owner' || currentUserRole === 'moder');
 
   const handleEditChannelClick = useCallback(() => {
-    setShowEditChannelModal(true);
-  }, []);
+    if (isTopic) {
+      setShowEditTopicModal(true);
+    } else {
+      setShowEditChannelModal(true);
+    }
+  }, [isTopic]);
 
   const handleAddMemberClick = useCallback(() => {
     if (onAddMemberClick) return onAddMemberClick();
@@ -330,19 +408,20 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
         onEditClick={handleEditChannelClick}
         isPublic={Boolean(channel?.data?.public)}
         isTeamChannel={isTeamChannel}
+        parentChannelName={parentChannelName}
+        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 +430,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 +443,8 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
             leaveLabel={actionsLeaveLabel}
             blockLabel={actionsBlockLabel}
             unblockLabel={actionsUnblockLabel}
+            closeTopicLabel={actionsCloseTopicLabel}
+            reopenTopicLabel={actionsReopenTopicLabel}
           />
 
           <TabsComponent
@@ -427,6 +512,16 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
               />
             );
           })()}
+
+          {showEditTopicModal && (() => {
+            return (
+              <TopicModal
+                isOpen={true}
+                onClose={() => setShowEditTopicModal(false)}
+                topic={channel}
+              />
+            );
+          })()}
         </>
       )}
 
@@ -446,6 +541,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

@@ -32,10 +32,18 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
   LoadingComponent,
 }) => {
   const isMessaging = channel?.type === 'messaging';
+  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 +53,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;