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

@@ -114,19 +114,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

@@ -558,7 +558,6 @@ function ChannelSection({
 // the "me" folder is the bridge that keeps the folder-keyed surfaces
 // (CONTEXT.md, artifacts) routable, created lazily on first open.
 function PersonalChannelRow({ hotkeySlot }: { hotkeySlot?: number }) {
-  const spacesLayout = useChannelsLayout();
   const navigate = useNavigate();
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const setCurrentChannel = useCurrentChannelStore((s) => s.setCurrentChannel);
@@ -635,7 +634,6 @@ function PersonalChannelRow({ hotkeySlot }: { hotkeySlot?: number }) {
       >
         {channelGlyph(PERSONAL_CHANNEL_NAME, {
           size: 14,
-          space: spacesLayout,
           weight: isUnread ? "bold" : undefined,
           className: cn(
             "shrink-0",
@@ -733,7 +731,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;
   icon: ReactNode;
   children: ReactNode;
@@ -766,13 +764,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"
             />
           )}
@@ -881,9 +877,7 @@ export function ChannelsList() {
                   sectionId={STARRED_SECTION_ID}
                   label="Starred"
                   flat={channelsLayout}
-                  icon={
-                    <StarIcon size={14} data-testid="starred-section-icon" />
-                  }
+                  icon={<StarIcon size={14} />}
                 >
                   {starred.map((channel) => (
                     <ChannelSection
@@ -902,10 +896,7 @@ export function ChannelsList() {
                 flat={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">