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

package/src/components/ChannelInfo/ChannelInfo.tsx

@@ -1,14 +1,20 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Virtualizer as _Virtualizer } from 'virtua';
+const Virtualizer = _Virtualizer as any;
 import { useChatClient } from '../../hooks/useChatClient';
 import { useBannedState } from '../../hooks/useBannedState';
 import { useBlockedState } from '../../hooks/useBlockedState';
+import { usePreviewState } from '../../hooks/usePreviewState';
 import { Avatar } from '../Avatar';
-import { DefaultChannelInfoTabs } from './ChannelInfoTabs';
+import { DefaultChannelInfoTabHeader } from './ChannelInfoTabs';
+import { useChannelInfoTabs } from './useChannelInfoTabs';
 import { AddMemberModal } from './AddMemberModal';
 import { EditChannelModal } from './EditChannelModal';
 import { TopicModal } from '../TopicModal';
 import { MessageSearchPanel } from './MessageSearchPanel';
 import { ChannelSettingsPanel } from './ChannelSettingsPanel';
+import { MediaLightbox } from '../MediaLightbox';
+import { PENDING_STYLE, READY_STYLE } from './utils';
 import type {
   ChannelInfoProps,
   ChannelInfoHeaderProps,
@@ -19,6 +25,22 @@ import { useChannelMembers, useChannelProfile } from '../../hooks/useChannelData
 import { isGroupChannel, isTopicChannel } from '../../channelTypeUtils';
 import { canManageChannel, CHANNEL_ROLES } from '../../channelRoleUtils';
 
+const MemoizedVirtualizer = React.memo(({ scrollRef, startMargin, data, renderItem, overscan = 10 }: any) => (
+  <Virtualizer scrollRef={scrollRef} startMargin={startMargin} data={data} overscan={overscan}>
+    {renderItem}
+  </Virtualizer>
+));
+
+const PinIcon = () => (<svg width="20" height="20" 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="20" height="20" 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 SearchIcon = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>);
+const SettingsIcon = () => (<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="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>);
+const DeleteIcon = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6V20a2 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"></path></svg>);
+const LeaveIcon = () => (<svg width="20" height="20" 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"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>);
+const CloseTopicIcon = () => (<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>);
+const ReopenTopicIcon = () => (<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>);
+const BlockIcon = () => (<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" /><line x1="4.93" y1="4.93" x2="19.07" y2="19.07" /></svg>);
+
 export const DefaultChannelInfoHeader: React.FC<ChannelInfoHeaderProps> = React.memo(({ title, onClose }) => {
   return (
     <div className="ermis-channel-info__header">
@@ -93,30 +115,31 @@ export const DefaultChannelInfoCover: React.FC<ChannelInfoCoverProps> = React.me
 DefaultChannelInfoCover.displayName = 'DefaultChannelInfoCover';
 
 export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = React.memo(({
-  onSearchClick, onSettingsClick, onLeaveChannel, onDeleteChannel,
-  onBlockUser, onUnblockUser, onCloseTopic, onReopenTopic,
-  isTeamChannel, isTopic, isClosedTopic, isBlocked, currentUserRole,
-  searchLabel = 'Search', settingsLabel = 'Settings', deleteLabel = 'Delete', leaveLabel = 'Leave',
-  blockLabel = 'Block', unblockLabel = 'Unblock', closeTopicLabel = 'Close Topic', reopenTopicLabel = 'Reopen Topic'
+  onSearchClick, onSettingsClick, onLeaveChannel, onDeleteChannel, onDeleteTopic, onTruncateChannel,
+  onBlockUser, onUnblockUser, onPin, onUnpin, onCloseTopic, onReopenTopic,
+  isTeamChannel, isTopic, isClosedTopic, isBlocked, isPinned, currentUserRole,
+  searchLabel = 'Search', settingsLabel = 'Settings', deleteLabel = 'Delete', truncateLabel = 'Clear history', leaveLabel = 'Leave',
+  blockLabel = 'Block', unblockLabel = 'Unblock', pinLabel = 'Pin', unpinLabel = 'Unpin',
+  closeTopicLabel = 'Close Topic', reopenTopicLabel = 'Reopen Topic', deleteTopicLabel = 'Delete Topic'
 }) => {
   return (
     <div className="ermis-channel-info__actions">
       <button className="ermis-channel-info__action-btn" onClick={onSearchClick} disabled={isBlocked}>
         <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">
-            <circle cx="11" cy="11" r="8"></circle>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-          </svg>
+          <SearchIcon />
         </div>
         <span>{searchLabel}</span>
       </button>
+      <button className="ermis-channel-info__action-btn" onClick={isPinned ? onUnpin : onPin} disabled={isBlocked}>
+        <div className="ermis-channel-info__action-icon">
+          {isPinned ? <UnpinIcon /> : <PinIcon />}
+        </div>
+        <span>{isPinned ? unpinLabel : pinLabel}</span>
+      </button>
       {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">
-              <circle cx="12" cy="12" r="3"></circle>
-              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-            </svg>
+            <SettingsIcon />
           </div>
           <span>{settingsLabel}</span>
         </button>
@@ -125,21 +148,14 @@ export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = Reac
         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">
-                <polyline points="3 6 5 6 21 6"></polyline>
-                <path d="M19 6V20a2 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"></path>
-              </svg>
+              <DeleteIcon />
             </div>
             <span>{deleteLabel}</span>
           </button>
         ) : (
           <button className="ermis-channel-info__action-btn ermis-channel-info__action-btn--danger" onClick={onLeaveChannel}>
             <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">
-                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-                <polyline points="16 17 21 12 16 7"></polyline>
-                <line x1="21" y1="12" x2="9" y2="12"></line>
-              </svg>
+              <LeaveIcon />
             </div>
             <span>{leaveLabel}</span>
           </button>
@@ -150,48 +166,55 @@ export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = Reac
         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>
+              <ReopenTopicIcon />
             </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>
+              <CloseTopicIcon />
             </div>
             <span>{closeTopicLabel}</span>
           </button>
         )
       )}
-      {/* Block/Unblock — messaging (1-1) channels only */}
+      {/* Topics: Delete Topic for owner */}
+      {isTopic && currentUserRole === CHANNEL_ROLES.OWNER && onDeleteTopic && (
+        <button className="ermis-channel-info__action-btn ermis-channel-info__action-btn--danger" onClick={onDeleteTopic}>
+          <div className="ermis-channel-info__action-icon">
+            <DeleteIcon />
+          </div>
+          <span>{deleteTopicLabel}</span>
+        </button>
+      )}
+      {/* Block/Unblock & Truncate — messaging (1-1) channels only */}
       {!isTeamChannel && !isTopic && (
-        isBlocked ? (
+        <>
+          {onTruncateChannel && (
+            <button className="ermis-channel-info__action-btn ermis-channel-info__action-btn--danger" onClick={onTruncateChannel}>
+              <div className="ermis-channel-info__action-icon">
+                <DeleteIcon />
+              </div>
+              <span>{truncateLabel}</span>
+            </button>
+          )}
+          {isBlocked ? (
           <button className="ermis-channel-info__action-btn" onClick={onUnblockUser}>
             <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">
-                <circle cx="12" cy="12" r="10" />
-                <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
-              </svg>
+              <BlockIcon />
             </div>
             <span>{unblockLabel}</span>
           </button>
         ) : (
           <button className="ermis-channel-info__action-btn ermis-channel-info__action-btn--danger" onClick={onBlockUser}>
             <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">
-                <circle cx="12" cy="12" r="10" />
-                <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
-              </svg>
+              <BlockIcon />
             </div>
             <span>{blockLabel}</span>
           </button>
-        )
+          )}
+        </>
       )}
     </div>
   );
@@ -205,16 +228,20 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     AvatarComponent = Avatar,
     onClose,
     title: titleProp,
+    isVisible = true,
     HeaderComponent = DefaultChannelInfoHeader,
     CoverComponent = DefaultChannelInfoCover,
     ActionsComponent = DefaultChannelInfoActions,
-    TabsComponent = DefaultChannelInfoTabs,
+    TabHeaderComponent = DefaultChannelInfoTabHeader,
     AddMemberModalComponent,
     EditChannelModalComponent,
+    EditTopicModalComponent,
     actionsSearchLabel,
     actionsSettingsLabel,
     actionsDeleteLabel,
+    actionsTruncateLabel,
     actionsLeaveLabel,
+    actionsCreateTopicLabel,
     MemberItemComponent,
     MediaItemComponent,
     LinkItemComponent,
@@ -224,12 +251,17 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     onSearchClick,
     onLeaveChannel: onLeaveChannelProp,
     onDeleteChannel: onDeleteChannelProp,
+    onTruncateChannel: onTruncateChannelProp,
+    onDeleteTopic: onDeleteTopicProp,
+    onCreateTopic: onCreateTopicProp,
     onAddMemberClick,
     onRemoveMember: onRemoveMemberProp,
     onBanMember: onBanMemberProp,
     onUnbanMember: onUnbanMemberProp,
     onPromoteMember: onPromoteMemberProp,
     onDemoteMember: onDemoteMemberProp,
+    onPinChannel: onPinChannelProp,
+    onUnpinChannel: onUnpinChannelProp,
     // Add Member customization
     addMemberModalTitle,
     addMemberSearchPlaceholder,
@@ -239,6 +271,8 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     addMemberAddingLabel,
     addMemberAddedLabel,
     addMemberButtonLabel,
+    MessageSearchPanelComponent,
+    ChannelSettingsPanelComponent,
     AddMemberButtonComponent,
     // Edit Channel customization
     onEditChannel: onEditChannelProp,
@@ -260,18 +294,27 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     onUnblockUser: onUnblockUserProp,
     actionsBlockLabel,
     actionsUnblockLabel,
+    actionsPinLabel,
+    actionsUnpinLabel,
+    actionsPinTopicLabel,
+    actionsUnpinTopicLabel,
     actionsCloseTopicLabel,
     actionsReopenTopicLabel,
+    actionsDeleteTopicLabel,
     // Settings panel customizations
     settingsWorkspaceTopicsTitle,
     settingsTopicsFeatureName,
     settingsTopicsFeatureDescription,
+    roleLabels,
   } = props;
 
   const { activeChannel, client } = useChatClient();
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+
   const channel = channelProp || activeChannel;
   const { isBanned } = useBannedState(channel, client?.userID);
   const { isBlocked } = useBlockedState(channel, client?.userID);
+  const { isPreviewMode } = usePreviewState(channel, client?.userID);
 
   const currentUserId = client?.userID;
   const currentUserRole = currentUserId ? channel?.state?.members?.[currentUserId]?.channel_role : undefined;
@@ -350,6 +393,18 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     try { await channel.unblockUser(); } catch (e) { console.error('Error unblocking user', e); }
   }, [channel, onUnblockUserProp]);
 
+  const handlePinChannel = useCallback(async () => {
+    if (onPinChannelProp) return onPinChannelProp();
+    if (!channel) return;
+    try { await channel.pin(); } catch (e) { console.error('Error pinning channel', e); }
+  }, [channel, onPinChannelProp]);
+
+  const handleUnpinChannel = useCallback(async () => {
+    if (onUnpinChannelProp) return onUnpinChannelProp();
+    if (!channel) return;
+    try { await channel.unpin(); } catch (e) { console.error('Error unpanning channel', e); }
+  }, [channel, onUnpinChannelProp]);
+
   const handleCloseTopic = useCallback(async () => {
     if (!channel || !parentChannel) return;
     try { await parentChannel.closeTopic(channel.cid); } catch (e) { console.error('Error closing topic', e); }
@@ -360,8 +415,14 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     try { await parentChannel.reopenTopic(channel.cid); } catch (e) { console.error('Error reopening topic', e); }
   }, [channel, parentChannel]);
 
+  const handleDeleteTopic = useCallback(async () => {
+    if (onDeleteTopicProp) return onDeleteTopicProp(channel as any);
+    if (!channel) return;
+    try { await channel.delete(); } catch (e) { console.error('Error deleting topic', e); }
+  }, [channel, onDeleteTopicProp]);
+
   const { members } = useChannelMembers(channel);
-  const { channelName: profileChannelName, channelImage, channelDescription } = useChannelProfile(channel);
+  const { channelName: profileChannelName, channelImage, channelDescription, isPinned } = useChannelProfile(channel);
 
   let finalChannelName = profileChannelName;
   let finalParentChannelName = parentChannelName;
@@ -397,161 +458,243 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
     setShowAddMemberModal(true);
   }, [onAddMemberClick]);
 
-
+  // virtualizer anchors for page-level virtualization
+  const virtualizerAnchorRef = useRef<HTMLDivElement | null>(null);
+  const [startMargin, setStartMargin] = useState(0);
+
+  // Use the headless tabs hook
+  const tabs = useChannelInfoTabs({
+    channel: channel as any,
+    members: members as any,
+    AvatarComponent,
+    currentUserId,
+    currentUserRole,
+    onAddMemberClick: isTeamChannel && !isPreviewMode ? handleAddMemberClick : undefined,
+    onRemoveMember: handleRemoveMember,
+    onBanMember: handleBanMember,
+    onUnbanMember: handleUnbanMember,
+    onPromoteMember: handlePromoteMember,
+    onDemoteMember: handleDemoteMember,
+    addMemberButtonLabel,
+    AddMemberButtonComponent,
+    MemberItemComponent,
+    MediaItemComponent,
+    LinkItemComponent,
+    FileItemComponent,
+    EmptyStateComponent,
+    LoadingComponent,
+    isVisible,
+    isPreviewMode,
+    roleLabels,
+  });
+
+  // Calculate startMargin for Virtualizer (distance from body top to virtualizer anchor)
+  useEffect(() => {
+    const body = scrollContainerRef.current;
+    const anchor = virtualizerAnchorRef.current;
+    if (!body || !anchor) return;
+    const bodyRect = body.getBoundingClientRect();
+    const anchorRect = anchor.getBoundingClientRect();
+    setStartMargin(anchorRect.top - bodyRect.top + body.scrollTop);
+  }, [isVisible, tabs.activeTab, isBanned, isPreviewMode]);
 
   if (!channel) return null;
 
   return (
     <div className={`ermis-channel-info ${className}`.trim()}>
       <HeaderComponent title={title} onClose={onClose} />
+      <div className="ermis-channel-info__body" ref={scrollContainerRef}>
+        <CoverComponent
+          channelName={finalChannelName}
+          channelImage={channelImage}
+          channelDescription={channelDescription}
+          AvatarComponent={AvatarComponent}
+          canEdit={canEditChannel}
+          onEditClick={handleEditChannelClick}
+          isPublic={Boolean(channel?.data?.public)}
+          isTeamChannel={isTeamChannel}
+          parentChannelName={finalParentChannelName}
+          isTopic={isTopic}
+        />
 
-      <CoverComponent
-        channelName={finalChannelName}
-        channelImage={channelImage}
-        channelDescription={channelDescription}
-        AvatarComponent={AvatarComponent}
-        canEdit={canEditChannel}
-        onEditClick={handleEditChannelClick}
-        isPublic={Boolean(channel?.data?.public)}
-        isTeamChannel={isTeamChannel}
-        parentChannelName={finalParentChannelName}
-        isTopic={isTopic}
-      />
-
-      {isBanned && (
-        <div className="ermis-channel-info__banned-banner">
-          <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)}
-            onSettingsClick={() => setShowSettingsPanel(true)}
-            onLeaveChannel={handleLeaveChannel}
-            onDeleteChannel={handleDeleteChannel}
-            onBlockUser={handleBlockUser}
-            onUnblockUser={handleUnblockUser}
-            onCloseTopic={handleCloseTopic}
-            onReopenTopic={handleReopenTopic}
-            isTeamChannel={isTeamChannel}
-            isTopic={isTopic}
-            isClosedTopic={isClosedTopic}
-            isBlocked={isBlocked}
-            currentUserRole={currentUserRole}
-            searchLabel={actionsSearchLabel}
-            settingsLabel={actionsSettingsLabel}
-            deleteLabel={actionsDeleteLabel}
-            leaveLabel={actionsLeaveLabel}
-            blockLabel={actionsBlockLabel}
-            unblockLabel={actionsUnblockLabel}
-            closeTopicLabel={actionsCloseTopicLabel}
-            reopenTopicLabel={actionsReopenTopicLabel}
-          />
-
-          <TabsComponent
-            channel={channel}
-            members={members as any}
-            AvatarComponent={AvatarComponent}
-            currentUserId={currentUserId}
-            currentUserRole={currentUserRole}
-            onAddMemberClick={isTeamChannel ? handleAddMemberClick : undefined}
-            onRemoveMember={handleRemoveMember}
-            onBanMember={handleBanMember}
-            onUnbanMember={handleUnbanMember}
-            onPromoteMember={handlePromoteMember}
-            onDemoteMember={handleDemoteMember}
-            addMemberButtonLabel={addMemberButtonLabel}
-            AddMemberButtonComponent={AddMemberButtonComponent}
-            MemberItemComponent={MemberItemComponent}
-            MediaItemComponent={MediaItemComponent}
-            LinkItemComponent={LinkItemComponent}
-            FileItemComponent={FileItemComponent}
-            EmptyStateComponent={EmptyStateComponent}
-            LoadingComponent={LoadingComponent}
-          />
-
-          {showAddMemberModal && (() => {
-            const ModalComp = AddMemberModalComponent || AddMemberModal;
-            return (
-              <ModalComp
-                channel={channel}
-                currentMembers={members as any}
-                onClose={() => setShowAddMemberModal(false)}
-                AvatarComponent={AvatarComponent}
-                title={addMemberModalTitle}
-                searchPlaceholder={addMemberSearchPlaceholder}
-                loadingText={addMemberLoadingText}
-                emptyText={addMemberEmptyText}
-                addLabel={addMemberAddLabel}
-                addingLabel={addMemberAddingLabel}
-                addedLabel={addMemberAddedLabel}
-              />
-            );
-          })()}
-
-          {showEditChannelModal && (() => {
-            const EditComp = EditChannelModalComponent || EditChannelModal;
-            return (
-              <EditComp
-                channel={channel}
-                onClose={() => setShowEditChannelModal(false)}
-                onSave={onEditChannelProp}
-                AvatarComponent={AvatarComponent}
-                title={editChannelModalTitle}
-                nameLabel={editChannelNameLabel}
-                descriptionLabel={editChannelDescriptionLabel}
-                namePlaceholder={editChannelNamePlaceholder}
-                descriptionPlaceholder={editChannelDescriptionPlaceholder}
-                publicLabel={editChannelPublicLabel}
-                saveLabel={editChannelSaveLabel}
-                cancelLabel={editChannelCancelLabel}
-                savingLabel={editChannelSavingLabel}
-                changeAvatarLabel={editChannelChangeAvatarLabel}
-                imageAccept={editChannelImageAccept}
-                maxImageSize={editChannelMaxImageSize}
-                maxImageSizeError={editChannelMaxImageSizeError}
+        {isBanned && (
+          <div className="ermis-channel-info__banned-banner">
+            <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 && isPreviewMode && (
+          <div className="ermis-channel-info__preview-actions">
+            <button
+              className="ermis-channel-info__join-btn"
+              onClick={() => channel?.acceptInvite('join').catch(e => console.error('Failed to join public channel', e))}
+            >
+              Join Channel
+            </button>
+          </div>
+        )}
+        {!isBanned && (
+          <>
+            {!isPreviewMode && (
+              <ActionsComponent
+                onSearchClick={() => setShowSearchPanel(true)}
+                onSettingsClick={() => setShowSettingsPanel(true)}
+                onLeaveChannel={handleLeaveChannel}
+                onDeleteChannel={handleDeleteChannel}
+                onTruncateChannel={onTruncateChannelProp ? () => onTruncateChannelProp(channel) : undefined}
+                onBlockUser={handleBlockUser}
+                onUnblockUser={handleUnblockUser}
+                onPin={handlePinChannel}
+                onUnpin={handleUnpinChannel}
+                onCloseTopic={handleCloseTopic}
+                onReopenTopic={handleReopenTopic}
+                onDeleteTopic={handleDeleteTopic}
+                onCreateTopic={onCreateTopicProp ? () => onCreateTopicProp(channel) : undefined}
+                isTeamChannel={isTeamChannel}
+                isTopic={isTopic}
+                isClosedTopic={isClosedTopic}
+                isBlocked={isBlocked}
+                isPinned={isPinned}
+                topicsEnabled={channel?.data?.topics_enabled === true}
+                currentUserRole={currentUserRole}
+                searchLabel={actionsSearchLabel}
+                settingsLabel={actionsSettingsLabel}
+                deleteLabel={actionsDeleteLabel}
+                truncateLabel={actionsTruncateLabel}
+                leaveLabel={actionsLeaveLabel}
+                blockLabel={actionsBlockLabel}
+                unblockLabel={actionsUnblockLabel}
+                pinLabel={isTopic ? (actionsPinTopicLabel || 'Pin topic') : (actionsPinLabel || 'Pin channel')}
+                unpinLabel={isTopic ? (actionsUnpinTopicLabel || 'Unpin topic') : (actionsUnpinLabel || 'Unpin channel')}
+                closeTopicLabel={actionsCloseTopicLabel}
+                reopenTopicLabel={actionsReopenTopicLabel}
+                deleteTopicLabel={actionsDeleteTopicLabel}
+                createTopicLabel={actionsCreateTopicLabel}
               />
-            );
-          })()}
-
-          {showEditTopicModal && (() => {
-            return (
-              <TopicModal
-                isOpen={true}
-                onClose={() => setShowEditTopicModal(false)}
-                topic={channel}
+            )}
+
+            <TabHeaderComponent
+              activeTab={tabs.activeTab}
+              onTabChange={tabs.handleTabChange}
+              availableTabs={tabs.availableTabs}
+              tabCounts={{} as any}
+            />
+
+            <div
+              ref={virtualizerAnchorRef}
+              className="ermis-channel-info__media-content"
+              style={tabs.isPending ? PENDING_STYLE : READY_STYLE}
+            >
+              {tabs.isPending || (tabs.loading && tabs.contentTab !== 'members') ? (
+                <tabs.Loading tab={tabs.activeTab} />
+              ) : tabs.isTabEmpty ? (
+                <tabs.EmptyState label={tabs.emptyLabel} />
+              ) : (
+                <MemoizedVirtualizer 
+                  scrollRef={scrollContainerRef} 
+                  startMargin={startMargin} 
+                  data={tabs.vlistData} 
+                  renderItem={tabs.renderVlistItem} 
+                />
+              )}
+            </div>
+
+            {/* Media Lightbox */}
+            {tabs.lightboxItems.length > 0 && (
+              <MediaLightbox
+                items={tabs.lightboxItems}
+                initialIndex={tabs.lightboxIndex}
+                isOpen={tabs.lightboxOpen}
+                onClose={tabs.closeLightbox}
               />
-            );
-          })()}
-        </>
-      )}
+            )}
+
+            {showAddMemberModal && (() => {
+              const ModalComp = AddMemberModalComponent || AddMemberModal;
+              return (
+                <ModalComp
+                  channel={channel}
+                  currentMembers={members as any}
+                  onClose={() => setShowAddMemberModal(false)}
+                  AvatarComponent={AvatarComponent}
+                  title={addMemberModalTitle}
+                  searchPlaceholder={addMemberSearchPlaceholder}
+                  loadingText={addMemberLoadingText}
+                  emptyText={addMemberEmptyText}
+                  addLabel={addMemberAddLabel}
+                />
+              );
+            })()}
+
+            {showEditChannelModal && (() => {
+              const ModalComp = EditChannelModalComponent || EditChannelModal;
+              return (
+                <ModalComp
+                  channel={channel}
+                  onClose={() => setShowEditChannelModal(false)}
+                  onSave={onEditChannelProp}
+                  AvatarComponent={AvatarComponent}
+                  title={editChannelModalTitle}
+                  nameLabel={editChannelNameLabel}
+                  descriptionLabel={editChannelDescriptionLabel}
+                  namePlaceholder={editChannelNamePlaceholder}
+                  descriptionPlaceholder={editChannelDescriptionPlaceholder}
+                  publicLabel={editChannelPublicLabel}
+                  saveLabel={editChannelSaveLabel}
+                  cancelLabel={editChannelCancelLabel}
+                  savingLabel={editChannelSavingLabel}
+                  changeAvatarLabel={editChannelChangeAvatarLabel}
+                  imageAccept={editChannelImageAccept}
+                  maxImageSize={editChannelMaxImageSize}
+                  maxImageSizeError={editChannelMaxImageSizeError}
+                />
+              );
+            })()}
+
+            {showEditTopicModal && (() => {
+              const ModalComp = EditTopicModalComponent || TopicModal;
+              return (
+                <ModalComp
+                  isOpen={true}
+                  onClose={() => setShowEditTopicModal(false)}
+                  topic={channel}
+                />
+              );
+            })()}
+          </>
+        )}
+      </div>
 
       {/* Search Panel — slides over entire ChannelInfo body */}
-      {channel && showSearchPanel && (
-        <MessageSearchPanel
-          isOpen={showSearchPanel}
-          onClose={() => setShowSearchPanel(false)}
-          channel={channel}
-          AvatarComponent={AvatarComponent}
-        />
-      )}
+      {channel && showSearchPanel && (() => {
+        const SearchPanel = MessageSearchPanelComponent || MessageSearchPanel;
+        return (
+          <SearchPanel
+            isOpen={showSearchPanel}
+            onClose={() => setShowSearchPanel(false)}
+            channel={channel}
+            AvatarComponent={AvatarComponent}
+          />
+        );
+      })()}
 
       {/* Settings Panel — slides over entire ChannelInfo body */}
-      {channel && showSettingsPanel && (
-        <ChannelSettingsPanel
-          isOpen={showSettingsPanel}
-          onClose={() => setShowSettingsPanel(false)}
-          channel={channel}
-          workspaceTopicsTitle={settingsWorkspaceTopicsTitle}
-          topicsFeatureName={settingsTopicsFeatureName}
-          topicsFeatureDescription={settingsTopicsFeatureDescription}
-        />
-      )}
+      {channel && showSettingsPanel && (() => {
+        const SettingsPanel = ChannelSettingsPanelComponent || ChannelSettingsPanel;
+        return (
+          <SettingsPanel
+            isOpen={showSettingsPanel}
+            onClose={() => setShowSettingsPanel(false)}
+            channel={channel}
+            workspaceTopicsTitle={settingsWorkspaceTopicsTitle}
+            topicsFeatureName={settingsTopicsFeatureName}
+            topicsFeatureDescription={settingsTopicsFeatureDescription}
+          />
+        );
+      })()}
     </div>
   );
 });