refactor(spaces): reuse shared channel glyph

Generated-By: PostHog Code
Task-Id: 69df779b-b72b-45bc-a11b-3deeff24ad49

Author: puemos

packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx

@@ -1,7 +1,5 @@
 import {
   BrainIcon,
-  CubeIcon,
-  HashIcon,
   PlugsConnectedIcon,
   RobotIcon,
   SquaresFourIcon,
@@ -25,6 +23,7 @@ import {
 } from "@posthog/shared";
 import { channelSectionFor } from "@posthog/ui/features/canvas/channelSections";
 import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import { ensurePersonalChannel } from "@posthog/ui/features/canvas/ensurePersonalChannel";
 import {
   useChannelMutations,
@@ -514,11 +513,10 @@ export function BrowserTabStrip() {
             id: t.id,
             label:
               meta?.label ?? channel ?? (spacesLayout ? "Space" : "Channel"),
-            icon: spacesLayout ? (
-              <CubeIcon size={14} />
-            ) : (
-              <HashIcon size={14} />
-            ),
+            icon: channelGlyph(channel ?? undefined, {
+              size: 14,
+              space: spacesLayout,
+            }),
             channelName: channel,
             // No section meta → the channel's index page.
             isChannelHome: !meta,

packages/ui/src/features/canvas/components/ChannelsList.test.tsx

@@ -125,19 +125,6 @@ describe("ChannelsList", () => {
       renderList();
       expect(screen.getByText("Channels")).toBeTruthy();
     });
-
-    it("shows section icons and the caret for the current state", async () => {
-      const user = userEvent.setup();
-      renderList();
-
-      expect(screen.getByTestId("starred-section-icon")).toBeTruthy();
-      expect(screen.getByTestId("spaces-section-icon")).toBeTruthy();
-      expect(screen.getByTestId("channels:all-caret-down")).toBeTruthy();
-
-      await user.click(screen.getByText("Spaces"));
-
-      expect(screen.getByTestId("channels:all-caret-right")).toBeTruthy();
-    });
   });
 
   describe("search", () => {

packages/ui/src/features/canvas/components/ChannelsList.tsx

@@ -732,7 +732,6 @@ function PersonalChannelRow({ hotkeySlot }: { hotkeySlot?: number }) {
       >
         {channelGlyph(PERSONAL_CHANNEL_NAME, {
           size: 14,
-          space: spacesLayout,
           weight: isUnread ? "bold" : undefined,
           className: cn(
             "shrink-0",
@@ -831,7 +830,7 @@ function ChannelGroup({
   sectionId: string;
   label: string;
   className?: string;
-  /** Layout-only: rows sit at the label's level instead of indented under it. */
+  /** Layout-only: removes the legacy tree indent; rows apply their own inset. */
   flat?: boolean;
   /**
    * Off under the layout: a kept-mounted collapsed row is still an Autocomplete
@@ -870,13 +869,11 @@ function ChannelGroup({
           {isOpen ? (
             <CaretDownIcon
               size={14}
-              data-testid={`${sectionId}-caret-down`}
               className="hidden group-hover/group-trigger:block group-focus-visible/group-trigger:block"
             />
           ) : (
             <CaretRightIcon
               size={14}
-              data-testid={`${sectionId}-caret-right`}
               className="hidden group-hover/group-trigger:block group-focus-visible/group-trigger:block"
             />
           )}
@@ -1009,7 +1006,7 @@ export function ChannelsList() {
           label="Starred"
           flat={channelsLayout}
           keepMounted={!channelsLayout}
-          icon={<StarIcon size={14} data-testid="starred-section-icon" />}
+          icon={<StarIcon size={14} />}
         >
           {starred.map((channel) => (
             <ChannelSection
@@ -1029,7 +1026,7 @@ export function ChannelsList() {
         keepMounted={!channelsLayout}
         icon={
           channelsLayout ? (
-            <CubeFocusIcon size={14} data-testid="spaces-section-icon" />
+            <CubeFocusIcon size={14} />
           ) : (
             <HashIcon size={14} />
           )

packages/ui/src/features/canvas/components/RenameChannelModal.tsx

@@ -1,7 +1,8 @@
-import { CubeIcon, HashIcon, XIcon } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import { validateChannelName } from "@posthog/core/canvas/channelName";
 import { Button } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import type { Channel } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useChannelMutations } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
@@ -114,7 +115,7 @@ export function RenameChannelModal({
             }}
           >
             <TextField.Slot>
-              {spacesLayout ? <CubeIcon size={16} /> : <HashIcon size={16} />}
+              {channelGlyph(channel.name, { size: 16, space: spacesLayout })}
             </TextField.Slot>
             <TextField.Slot side="right">
               <Text className="text-gray-9 text-sm tabular-nums">