diff --git a/desktop/src/features/channels/ui/ChannelMembersBar.tsx b/desktop/src/features/channels/ui/ChannelMembersBar.tsx
index 5eda936c41..6b851f7fd0 100644
--- a/desktop/src/features/channels/ui/ChannelMembersBar.tsx
+++ b/desktop/src/features/channels/ui/ChannelMembersBar.tsx
@@ -43,6 +43,37 @@ type ChannelMembersBarProps = {
variant?: "inline" | "compact";
};
+type ChannelMembersButtonProps = {
+ memberCount: number;
+ onToggleMembers: () => void;
+};
+
+export function ChannelMembersButton({
+ memberCount,
+ onToggleMembers,
+}: ChannelMembersButtonProps) {
+ return (
+
+
+
+
+ Channel members
+
+ );
+}
+
export function ChannelMembersBar({
channel,
currentPubkey,
@@ -229,24 +260,10 @@ export function ChannelMembersBar({
) : (
-
-
-
-
- Channel members
-
+
{huddleIndicator}
diff --git a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
index f1c5f5ae42..61b83f77ce 100644
--- a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
@@ -8,7 +8,10 @@ import { getChannelDescription } from "@/features/channels/lib/channelDescriptio
import { getDmParticipantPreview } from "@/features/channels/lib/dmParticipantDisplay";
import { ChannelGlyph } from "@/features/channels/ui/ChannelGlyph";
import { ChannelHeaderStatusBadge } from "@/features/channels/ui/ChannelHeaderStatusBadge";
-import { ChannelMembersBar } from "@/features/channels/ui/ChannelMembersBar";
+import {
+ ChannelMembersBar,
+ ChannelMembersButton,
+} from "@/features/channels/ui/ChannelMembersBar";
import {
DEFAULT_HOVER_PROFILE_STATUS_GEOMETRY,
ProfileAvatarWithStatus,
@@ -100,7 +103,11 @@ export function ChannelScreenHeader({
) : null;
const channelActions = activeChannel ? (
showJoinButton ? (
-
+
+