fix(desktop): show member count before joining channels

Signed-off-by: Matt Toohey <contact@matttoohey.com>
Co-authored-by: Jitter <2b2e6415e748c35180847a37aadae06a11e30dddc76b784e7fd9354c4eb42e7a@buzz.block.builderlab.xyz>

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 (
+    <Tooltip disableHoverableContent>
+      <TooltipTrigger asChild>
+        <Button
+          aria-label={`View channel members (${memberCount})`}
+          className="h-8 px-2.5"
+          data-testid="channel-members-trigger"
+          onClick={onToggleMembers}
+          type="button"
+          variant="outline"
+        >
+          <Users />
+          <span className="min-w-[1ch] text-sm font-medium tabular-nums">
+            {memberCount}
+          </span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Channel members</TooltipContent>
+    </Tooltip>
+  );
+}
+
 export function ChannelMembersBar({
   channel,
   currentPubkey,
@@ -229,24 +260,10 @@ export function ChannelMembersBar({
       </div>
     ) : (
       <div className="flex items-center gap-[6px]">
-        <Tooltip disableHoverableContent>
-          <TooltipTrigger asChild>
-            <Button
-              aria-label={`View channel members (${memberCount})`}
-              className="h-8 px-2.5"
-              data-testid="channel-members-trigger"
-              onClick={onToggleMembers}
-              type="button"
-              variant="outline"
-            >
-              <Users />
-              <span className="min-w-[1ch] text-sm font-medium tabular-nums">
-                {memberCount}
-              </span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Channel members</TooltipContent>
-        </Tooltip>
+        <ChannelMembersButton
+          memberCount={memberCount}
+          onToggleMembers={onToggleMembers}
+        />
 
         {huddleIndicator}
 

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 ? (
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-[6px]">
+        <ChannelMembersButton
+          memberCount={activeChannel.memberCount}
+          onToggleMembers={onToggleMembers}
+        />
         <Button
           disabled={isJoining}
           onClick={() => void onJoinChannel()}

desktop/tests/e2e/channel-browser.spec.ts

@@ -453,6 +453,43 @@ test("Enter selects a channel when create row is not highlighted", async ({
   await expect(page.getByTestId("chat-title")).toHaveText("design");
 });
 
+test("non-member open channel header shows its member count and roster", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await openChannelBrowser(page);
+  const designRow = page.getByTestId("browse-channel-design");
+  await expect(designRow).toContainText("2 members");
+  await designRow.locator("button").first().click();
+
+  await expect(page.getByTestId("channel-browser-dialog")).not.toBeVisible();
+  await expect(page.getByTestId("chat-title")).toHaveText("design");
+  await expect(
+    page.getByRole("button", { name: "Join", exact: true }),
+  ).toBeVisible();
+  await expect(page.getByTestId("channel-members-trigger")).toHaveAttribute(
+    "aria-label",
+    "View channel members (2)",
+  );
+  await expect(page.getByTestId("channel-start-huddle-trigger")).toHaveCount(0);
+  await expect(page.getByTestId("channel-management-trigger")).toHaveCount(0);
+
+  await page.getByTestId("channel-members-trigger").click();
+  const members = page.getByTestId("members-sidebar");
+  await expect(members).toBeVisible();
+  await expect(
+    members.getByTestId(
+      "sidebar-member-953d3363262e86b770419834c53d2446409db6d918a57f8f339d495d54ab001f",
+    ),
+  ).toBeVisible();
+  await expect(
+    members.getByTestId(
+      "sidebar-member-bb22a5299220cad76ffd46190ccbeede8ab5dc260faa28b6e5a2cb31b9aff260",
+    ),
+  ).toBeVisible();
+});
+
 test("joining a channel from browser adds it to the sidebar", async ({
   page,
 }) => {