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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ermis-network/ermis-chat-react",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "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.7",
+    "@ermis-network/ermis-chat-sdk": "1.0.8",
     "virtua": "^0.48.8"
   },
   "peerDependencies": {

package/src/channelRoleUtils.ts

@@ -0,0 +1,73 @@
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isDirectChannel } from './channelTypeUtils';
+
+export const CHANNEL_ROLES = {
+  OWNER: 'owner',
+  MODERATOR: 'moder',
+  MEMBER: 'member',
+  PENDING: 'pending',
+  SKIPPED: 'skipped',
+} as const;
+
+export type ChannelRole = typeof CHANNEL_ROLES[keyof typeof CHANNEL_ROLES] | string;
+
+/** Checks if the user is in a pending state */
+export function isPendingMember(role?: string): boolean {
+  return role === CHANNEL_ROLES.PENDING;
+}
+
+/** Checks if the user is in a skipped state (skipped a direct message invite) */
+export function isSkippedMember(role?: string): boolean {
+  return role === CHANNEL_ROLES.SKIPPED;
+}
+
+/** Checks if the user has management permissions (owner or moderator) */
+export function canManageChannel(role?: string): boolean {
+  return role === CHANNEL_ROLES.OWNER || role === CHANNEL_ROLES.MODERATOR;
+}
+
+/** Determines if the current user has the permission to remove a specific target member */
+export function canRemoveTargetMember(currentUserRole?: string, targetRole?: string): boolean {
+  const isTargetRemovable =
+    targetRole === CHANNEL_ROLES.MEMBER ||
+    targetRole === CHANNEL_ROLES.PENDING ||
+    (currentUserRole === CHANNEL_ROLES.OWNER && targetRole === CHANNEL_ROLES.MODERATOR);
+  
+  return canManageChannel(currentUserRole) && isTargetRemovable;
+}
+
+/** Determines if the current user has the permission to ban a specific target member */
+export function canBanTargetMember(currentUserRole?: string, targetRole?: string): boolean {
+  return canRemoveTargetMember(currentUserRole, targetRole) && targetRole !== CHANNEL_ROLES.PENDING;
+}
+
+/** Determines if the current user has the permission to promote a member to moderator */
+export function canPromoteTargetMember(currentUserRole?: string, targetRole?: string): boolean {
+  return currentUserRole === CHANNEL_ROLES.OWNER && targetRole === CHANNEL_ROLES.MEMBER;
+}
+
+/** Determines if the current user has the permission to demote a moderator to simple member */
+export function canDemoteTargetMember(currentUserRole?: string, targetRole?: string): boolean {
+  return currentUserRole === CHANNEL_ROLES.OWNER && targetRole === CHANNEL_ROLES.MODERATOR;
+}
+
+/** Checks if the user is an owner of the channel */
+export function isOwnerMember(role?: string): boolean {
+  return role === CHANNEL_ROLES.OWNER;
+}
+
+/**
+ * Checks if a direct channel represents a "friend" relationship:
+ * both members must have the 'owner' channel_role.
+ */
+export function isFriendChannel(
+  channel: Channel | null | undefined,
+  targetUserId: string,
+  currentUserId: string,
+): boolean {
+  if (!channel || !isDirectChannel(channel)) return false;
+  const targetMember = channel.state?.members?.[targetUserId];
+  const currentMember = channel.state?.members?.[currentUserId];
+  return isOwnerMember(targetMember?.channel_role as string)
+      && isOwnerMember(currentMember?.channel_role as string);
+}

package/src/channelTypeUtils.ts

@@ -0,0 +1,46 @@
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+
+// ─── Group Channel Types ───────────────────────────
+// Types that behave like group/team channels (roles, capabilities, settings, topics)
+const GROUP_CHANNEL_TYPES = new Set(['team', 'meeting']);
+
+// ─── Direct Channel Types ──────────────────────────
+// Types that behave like 1-on-1 direct messaging (block/unblock)
+const DIRECT_CHANNEL_TYPES = new Set(['messaging']);
+
+// ─── Semantic Helpers ──────────────────────────────
+
+/** Channel supports group features: roles, capabilities, settings, topics, edit, delete */
+export function isGroupChannel(channel: Channel | null | undefined): boolean {
+  return channel ? GROUP_CHANNEL_TYPES.has(channel.type) : false;
+}
+
+/** Channel is a direct (1-on-1) conversation: block/unblock, no roles */
+export function isDirectChannel(channel: Channel | null | undefined): boolean {
+  return channel ? DIRECT_CHANNEL_TYPES.has(channel.type) : false;
+}
+
+/** Channel is a topic (sub-channel of a group channel) */
+export function isTopicChannel(channel: Channel | null | undefined): boolean {
+  return channel ? (channel.type === 'topic' || Boolean(channel.data?.parent_cid)) : false;
+}
+
+/** Channel is a public group that users can join without invite */
+export function isPublicGroupChannel(channel: Channel | null | undefined): boolean {
+  return isGroupChannel(channel) && Boolean(channel?.data?.public);
+}
+
+/** The proxy "general" channel of a topics-enabled group */
+export function isGeneralProxy(channel: Channel | null | undefined): boolean {
+  return isGroupChannel(channel) && channel?.data?.name === 'general';
+}
+
+/** Channel has topics feature enabled */
+export function hasTopicsEnabled(channel: Channel | null | undefined): boolean {
+  return isGroupChannel(channel) && Boolean(channel?.data?.topics_enabled);
+}
+
+/** Whether blocked state is relevant for this channel type */
+export function supportsBlocking(channel: Channel | null | undefined): boolean {
+  return isDirectChannel(channel);
+}

package/src/components/Avatar.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
+import { MediaLightbox } from './MediaLightbox';
 import type { AvatarProps } from '../types';
 
 export type { AvatarProps } from '../types';
@@ -24,9 +25,11 @@ export const Avatar: React.FC<AvatarProps> = React.memo(({
   name,
   size = 36,
   className,
+  disableLightbox,
 }) => {
-  const [isLoaded, setIsLoaded] = React.useState(false);
-  const [hasError, setHasError] = React.useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
   const imgRef = React.useRef<HTMLImageElement>(null);
 
   // Reset state if image URL changes
@@ -54,7 +57,8 @@ export const Avatar: React.FC<AvatarProps> = React.memo(({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-  }), [size]);
+    cursor: image && !hasError && !disableLightbox ? 'pointer' : undefined,
+  }), [size, image, hasError, disableLightbox]);
 
   const contentStyle = useMemo<React.CSSProperties>(() => ({
     width: '100%',
@@ -63,39 +67,61 @@ export const Avatar: React.FC<AvatarProps> = React.memo(({
     lineHeight: 1,
   }), [size]);
 
+  const handleAvatarClick = React.useCallback((e: React.MouseEvent) => {
+    if (image && !hasError && !disableLightbox) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsLightboxOpen(true);
+    }
+  }, [image, hasError, disableLightbox]);
+
   return (
-    <div className={`ermis-avatar-wrapper${className ? ` ${className}` : ''}`} style={wrapperStyle}>
-      {/* 1. Underlying Fallback (Placeholder) */}
-      <div
-        className="ermis-avatar ermis-avatar--fallback"
-        style={contentStyle}
-        title={name}
+    <>
+      <div 
+        className={`ermis-avatar-wrapper${className ? ` ${className}` : ''}`} 
+        style={wrapperStyle}
+        onClick={handleAvatarClick}
       >
-        {initials}
+        {/* 1. Underlying Fallback (Placeholder) */}
+        <div
+          className="ermis-avatar ermis-avatar--fallback"
+          style={contentStyle}
+          title={name}
+        >
+          {initials}
+        </div>
+
+        {/* 2. Actual Image (Lazy, Fades in natively using CSS opacity) */}
+        {image && !hasError && (
+          <img
+            ref={imgRef}
+            className="ermis-avatar__img"
+            src={image}
+            alt={name || 'Avatar'}
+            loading="lazy"
+            onLoad={() => setIsLoaded(true)}
+            onError={() => setHasError(true)}
+            style={{
+              ...contentStyle,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              opacity: isLoaded ? 1 : 0,
+              transition: 'opacity 0.3s ease-in-out',
+              objectFit: 'cover',
+            }}
+          />
+        )}
       </div>
 
-      {/* 2. Actual Image (Lazy, Fades in natively using CSS opacity) */}
-      {image && !hasError && (
-        <img
-          ref={imgRef}
-          className="ermis-avatar__img"
-          src={image}
-          alt={name || 'Avatar'}
-          loading="lazy"
-          onLoad={() => setIsLoaded(true)}
-          onError={() => setHasError(true)}
-          style={{
-            ...contentStyle,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            opacity: isLoaded ? 1 : 0,
-            transition: 'opacity 0.3s ease-in-out',
-            objectFit: 'cover',
-          }}
+      {isLightboxOpen && image && !hasError && (
+        <MediaLightbox
+          items={[{ type: 'image', src: image, alt: name || 'Avatar' }]}
+          isOpen={isLightboxOpen}
+          onClose={() => setIsLightboxOpen(false)}
         />
       )}
-    </div>
+    </>
   );
 });
 

package/src/components/ChannelActions.tsx

@@ -2,6 +2,8 @@ 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';
+import { isDirectChannel, isGroupChannel, isTopicChannel } from '../channelTypeUtils';
+import { canManageChannel, CHANNEL_ROLES } from '../channelRoleUtils';
 
 /* ----------------------------------------------------------
    SVG Icons for default actions
@@ -38,13 +40,13 @@ export function computeDefaultActions(
   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 isDirect = isDirectChannel(channel);
+  const isTeamOrMeeting = isGroupChannel(channel);
+  const isTopic = isTopicChannel(channel);
   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 role = ms?.channel_role;
   const isBlocked = options?.isBlocked !== undefined ? options.isBlocked : (ms as any)?.blocked;
   const isPinned = channel.data?.is_pinned === true;
 
@@ -57,8 +59,8 @@ export function computeDefaultActions(
 
   const actionIcons = options?.actionIcons;
 
-  const pinIcon = isPinned 
-    ? (actionIcons?.UnpinIcon || <UnpinIcon />) 
+  const pinIcon = isPinned
+    ? (actionIcons?.UnpinIcon || <UnpinIcon />)
     : (actionIcons?.PinIcon || <PinIcon />);
 
   actions.push({
@@ -99,7 +101,7 @@ export function computeDefaultActions(
     });
   } else if (isTopic) {
     // Topic: Edit topic (owner & moder only)
-    if (role === 'owner' || role === 'moder') {
+    if (canManageChannel(role)) {
       actions.push({
         id: 'edit_topic',
         label: actionLabels?.editTopic || 'Edit topic',
@@ -110,7 +112,7 @@ export function computeDefaultActions(
       });
     }
     // Topic: Close / Reopen (owner & moder only)
-    if (role === 'owner' || role === 'moder') {
+    if (canManageChannel(role)) {
       actions.push({
         id: isClosed ? 'reopen' : 'close',
         label: isClosed ? (actionLabels?.reopenTopic || 'Reopen topic') : (actionLabels?.closeTopic || 'Close topic'),
@@ -124,7 +126,7 @@ export function computeDefaultActions(
   } 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) {
+    if (hasTopicsEnabled && canManageChannel(role) && options?.onAddTopic) {
       actions.push({
         id: 'create_topic',
         label: actionLabels?.createTopic || 'Create topic',
@@ -132,7 +134,7 @@ export function computeDefaultActions(
         onClick: (ch) => { options.onAddTopic!(ch); },
       });
     }
-    if (role === 'owner') {
+    if (role === CHANNEL_ROLES.OWNER) {
       actions.push({
         id: 'delete',
         label: actionLabels?.deleteChannel || 'Delete channel',
@@ -147,7 +149,7 @@ export function computeDefaultActions(
         },
       });
     }
-    if (role === 'moder' || role === 'member') {
+    if (role === CHANNEL_ROLES.MODERATOR || role === CHANNEL_ROLES.MEMBER) {
       actions.push({
         id: 'leave',
         label: actionLabels?.leaveChannel || 'Leave channel',

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);
@@ -71,7 +86,7 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
 
     // 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) {
+    if (hasTopicsEnabled(activeChannel)) {
       const rawChannel = client.activeChannels[activeChannel.cid];
       if (rawChannel && rawChannel.data?.name && rawChannel.data.name !== activeChannel.data?.name) {
         return rawChannel.data.name;
@@ -81,6 +96,62 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
     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 (
@@ -108,14 +179,28 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
             <div className="ermis-channel-header__name">{channelName}</div>
           </div>
         )}
-        {subtitle && (
+        {/* 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>
+          )
+        )}
+        {/* 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

@@ -16,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 (
@@ -108,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">
@@ -120,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">
@@ -144,7 +146,7 @@ export const DefaultChannelInfoActions: React.FC<ChannelInfoActionsProps> = Reac
         )
       )}
       {/* Topics: Close/Reopen Topic for owner/moder */}
-      {isTopic && (currentUserRole === 'owner' || currentUserRole === 'moder') && (
+      {isTopic && canManageChannel(currentUserRole) && (
         isClosedTopic ? (
           <button className="ermis-channel-info__action-btn" onClick={onReopenTopic}>
             <div className="ermis-channel-info__action-icon">
@@ -273,8 +275,8 @@ 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' || channel?.type === 'meeting';
-  const isTopic = Boolean(channel?.data?.parent_cid) || channel?.type === 'topic';
+  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');
 
@@ -282,14 +284,6 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
   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();
     if (!channel) return;
@@ -367,7 +361,19 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
   }, [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);
@@ -376,7 +382,7 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
   const [showSettingsPanel, setShowSettingsPanel] = useState(false);
 
   // Permission: only owner or moderator can edit channel info (banned users cannot)
-  const canEditChannel = (isTeamChannel || isTopic) && !isBanned && (currentUserRole === 'owner' || currentUserRole === 'moder');
+  const canEditChannel = (isTeamChannel || isTopic) && !isBanned && canManageChannel(currentUserRole);
 
   const handleEditChannelClick = useCallback(() => {
     if (isTopic) {
@@ -400,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}
@@ -408,7 +414,7 @@ export const ChannelInfo: React.FC<ChannelInfoProps> = React.memo((props) => {
         onEditClick={handleEditChannelClick}
         isPublic={Boolean(channel?.data?.public)}
         isTeamChannel={isTeamChannel}
-        parentChannelName={parentChannelName}
+        parentChannelName={finalParentChannelName}
         isTopic={isTopic}
       />