feat(canvas): lock glyph for private channels, and theme-token colours in the sidebar

A private channel now shows a lock where a public one shows a hash, the Slack convention, so privacy reads at a glance. One helper (channelGlyph) decides it for every surface that renders channel identity — sidebar list, switcher trigger and rows, channel header, breadcrumb, command palette — which also retires the awkward trailing lock the #me row carried, since the leading glyph now says it.

The personal #me channel is the only channel that is private today: neither the folder Channel nor the backend TaskChannel carries a privacy flag, so isPrivateChannel is the single place that has to learn about one when it lands.

Also moves the channel sidebar off the absolute gray scale and onto the theme's fill/foreground tokens. The fill tokens are color-mix(foreground N%, transparent) — relative to the surface and tuned per mode (4% light, 7% dark) — whereas gray-3 is absolute, and its relationship to the chrome it is painted on inverts between modes: 3 L* below a near-white chrome in light, where darker reads heavier, so the nav's filled chips came out as muddy beige slabs. They now follow the same transparent-rest, fill-on-hover idiom as every other sidebar control.</body>


Generated-By: PostHog Code
Task-Id: c401c7cb-e436-4da3-80bf-1d3008ee5d38

Author: puemos

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

@@ -1,10 +1,10 @@
-import { HashIcon } from "@phosphor-icons/react";
 import {
   Button,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@posthog/quill";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import { HeaderTitleEditor } from "@posthog/ui/features/task-detail/HeaderTitleEditor";
 import { Flex, Text } from "@radix-ui/themes";
 import { useNavigate } from "@tanstack/react-router";
@@ -52,7 +52,10 @@ export function ChannelBreadcrumb({
 
   const channelSegment = (
     <>
-      <HashIcon size={12} className="mt-px shrink-0 text-muted-foreground/80" />
+      {channelGlyph(channelName, {
+        size: 12,
+        className: "mt-px shrink-0 text-muted-foreground/80",
+      })}
       <Text
         className="min-w-0 truncate whitespace-nowrap font-medium text-[13px]"
         title={channelName}

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

@@ -1,7 +1,8 @@
-import { HashIcon, StarIcon } from "@phosphor-icons/react";
+import { StarIcon } from "@phosphor-icons/react";
 import { Button, cn } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { ChannelTabs } from "@posthog/ui/features/canvas/components/ChannelTabs";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import { useChannelStarToggle } from "@posthog/ui/features/canvas/hooks/useChannelStars";
 import {
   type Channel,
@@ -64,7 +65,10 @@ export function ChannelHeader({ channelId }: { channelId: string }) {
         size="sm"
         className={cn("min-w-0", isHome ? "bg-fill-selected" : "")}
       >
-        <HashIcon size={20} className="shrink-0 text-muted-foreground/80" />
+        {channelGlyph(channelName, {
+          size: 20,
+          className: "shrink-0 text-muted-foreground/80",
+        })}
         <Text className="min-w-0 truncate font-medium" title={channelName}>
           {channelName ?? "Channel"}
         </Text>

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

@@ -60,7 +60,7 @@ export function statusVariantFor(
 }
 
 const HOVER_ACTION_CLASS =
-  "flex h-5 w-5 cursor-pointer items-center justify-center rounded text-gray-10 transition-colors hover:bg-gray-4 hover:text-gray-12";
+  "flex h-5 w-5 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:bg-fill-hover hover:text-foreground";
 
 export function ChannelItemRow({ item }: { item: ChannelItem }) {
   return (
@@ -79,7 +79,7 @@ export function ChannelItemRow({ item }: { item: ChannelItem }) {
               onClick={item.onClick}
               endContent={
                 <>
-                  <span className="shrink-0 text-[11px] text-gray-11 group-hover:hidden">
+                  <span className="shrink-0 text-[11px] text-muted-foreground group-hover:hidden">
                     {formatRelativeTimeShort(item.ts)}
                   </span>
                   <span className="hidden shrink-0 items-center gap-0.5 group-hover:flex">
@@ -122,14 +122,14 @@ export function ChannelItemRow({ item }: { item: ChannelItem }) {
         >
           <PreviewCard.Popup className="w-64 rounded-lg border border-border bg-background p-3 shadow-lg outline-none">
             <div className="flex items-start gap-2.5">
-              <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-gray-3">
+              <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
                 {item.icon}
               </span>
               <div className="min-w-0 flex-1">
-                <p className="break-words font-medium text-[13px] text-gray-12 leading-snug">
+                <p className="break-words font-medium text-[13px] text-foreground leading-snug">
                   {item.title}
                 </p>
-                <p className="mt-0.5 text-[11px] text-gray-10">
+                <p className="mt-0.5 text-[11px] text-muted-foreground">
                   {item.kind === "canvas" ? "Canvas" : "Task"} · updated{" "}
                   {formatRelativeTimeShort(item.ts)}
                 </p>
@@ -152,10 +152,12 @@ export function ChannelItemRow({ item }: { item: ChannelItem }) {
                   </Avatar>
                 )}
                 <div className="min-w-0">
-                  <p className="truncate text-[12px] text-gray-12">
+                  <p className="truncate text-[12px] text-foreground">
                     {item.authorName ?? "Unknown"}
                   </p>
-                  <p className="text-[10px] text-gray-10">Created by</p>
+                  <p className="text-[10px] text-muted-foreground">
+                    Created by
+                  </p>
                 </div>
               </div>
             )}

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

@@ -42,7 +42,7 @@ function IconBadge({
         "-top-1 -right-1 absolute inline-flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-1 font-semibold text-[9px] tabular-nums leading-none ring-2 ring-chrome",
         tone === "notification"
           ? "bg-(--red-9) text-white"
-          : "bg-gray-5 text-gray-11",
+          : "bg-muted text-muted-foreground",
       )}
     >
       {count > 99 ? "99+" : count}
@@ -74,8 +74,8 @@ function NavIcon({
         className={cn(
           "relative flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors duration-100",
           isActive
-            ? "bg-fill-selected text-gray-12"
-            : "bg-gray-3 text-gray-11 hover:bg-gray-4 hover:text-gray-12",
+            ? "bg-fill-selected text-foreground"
+            : "text-muted-foreground hover:bg-fill-hover hover:text-foreground",
         )}
       >
         {icon}

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

@@ -52,10 +52,10 @@ const CREATED_BY_OPTIONS: readonly { value: CreatedByFilter; label: string }[] =
   ] as const;
 
 const HEADER_ICON_BUTTON_CLASS =
-  "flex size-5 shrink-0 items-center justify-center rounded text-gray-10 transition-colors hover:bg-gray-3 hover:text-gray-12";
+  "flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-fill-hover hover:text-foreground";
 
 const cnHeaderButton = (active: boolean) =>
-  cn(HEADER_ICON_BUTTON_CLASS, active && "bg-gray-3 text-gray-12");
+  cn(HEADER_ICON_BUTTON_CLASS, active && "bg-fill-selected text-foreground");
 
 const RECENTS_CAP = 30;
 

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

@@ -1,10 +1,5 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import {
-  CaretUpDownIcon,
-  HashIcon,
-  PlusIcon,
-  StarIcon,
-} from "@phosphor-icons/react";
+import { CaretUpDownIcon, PlusIcon, StarIcon } from "@phosphor-icons/react";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -20,6 +15,7 @@ import {
 } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { CreateChannelModal } from "@posthog/ui/features/canvas/components/CreateChannelModal";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import {
   useChannelStars,
   useChannelStarToggle,
@@ -72,7 +68,7 @@ function SwitcherRow({
   const row = (
     <div
       className={cn(
-        "group flex items-center rounded-md transition-colors hover:bg-gray-3",
+        "group flex items-center rounded-md transition-colors hover:bg-fill-hover",
         active && "bg-fill-selected",
       )}
     >
@@ -82,9 +78,12 @@ function SwitcherRow({
         className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-[13px]"
       >
         <span className="flex w-4 shrink-0 items-center justify-center">
-          <HashIcon size={14} className="text-gray-10" />
+          {channelGlyph(channel.name, {
+            size: 14,
+            className: "text-muted-foreground",
+          })}
         </span>
-        <span className="min-w-0 flex-1 truncate text-gray-12">
+        <span className="min-w-0 flex-1 truncate text-foreground">
           {channel.name}
         </span>
         {hotkeySlot != null && (
@@ -96,7 +95,7 @@ function SwitcherRow({
         // still has to be filled to keep the rows aligned.
         <span
           aria-hidden
-          className="mr-1 flex size-5 shrink-0 items-center justify-center text-gray-10 opacity-40"
+          className="mr-1 flex size-5 shrink-0 items-center justify-center text-muted-foreground opacity-40"
         >
           <StarIcon size={13} weight="fill" />
         </span>
@@ -106,7 +105,7 @@ function SwitcherRow({
           aria-label={isStarred ? "Unstar channel" : "Star channel"}
           onClick={trackedToggleStar}
           className={cn(
-            "mr-1 flex size-5 shrink-0 items-center justify-center rounded text-gray-10 transition-colors hover:text-gray-12",
+            "mr-1 flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground",
             !isStarred && "opacity-0 group-hover:opacity-100",
           )}
         >
@@ -148,7 +147,7 @@ function TriggerStar({ channel }: { channel: Channel }) {
       }}
       // Parks in the trigger's reserved well: 8px padding + 12px caret + 6px
       // gap = 26px from the right edge.
-      className="-translate-y-1/2 absolute top-1/2 right-[26px] flex size-6 items-center justify-center rounded text-gray-10 transition-colors hover:bg-gray-4 hover:text-gray-12"
+      className="-translate-y-1/2 absolute top-1/2 right-[26px] flex size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-fill-hover hover:text-foreground"
     >
       <StarIcon size={14} weight={isStarred ? "fill" : "regular"} />
     </button>
@@ -247,16 +246,22 @@ export function ChannelSwitcher({ channelId }: { channelId: string }) {
               // Fixed height with an unconditional star well: sized off its
               // contents, a starrable channel ran 4px taller than #me and
               // everything below shifted on switch.
-              className="flex h-8 w-full items-center gap-1.5 rounded-md border border-border px-2 text-left transition-colors hover:bg-gray-3 aria-expanded:bg-gray-3"
+              className="flex h-8 w-full items-center gap-1.5 rounded-md border border-border px-2 text-left transition-colors hover:bg-fill-hover aria-expanded:bg-fill-selected"
             >
               <span className="flex w-4 shrink-0 items-center justify-center">
-                <HashIcon size={14} className="text-gray-10" />
+                {channelGlyph(current?.name, {
+                  size: 14,
+                  className: "text-muted-foreground",
+                })}
               </span>
-              <span className="min-w-0 flex-1 truncate font-semibold text-[13px] text-gray-12">
+              <span className="min-w-0 flex-1 truncate font-semibold text-[13px] text-foreground">
                 {current?.name ?? "channel"}
               </span>
               <span aria-hidden className="size-6 shrink-0" />
-              <CaretUpDownIcon size={12} className="shrink-0 text-gray-10" />
+              <CaretUpDownIcon
+                size={12}
+                className="shrink-0 text-muted-foreground"
+              />
             </button>
           }
         />
@@ -300,7 +305,7 @@ export function ChannelSwitcher({ channelId }: { channelId: string }) {
               />
             ))}
             {topFiltered.length === 0 && restFiltered.length === 0 && (
-              <p className="px-2 py-2 text-[12px] text-gray-10">
+              <p className="px-2 py-2 text-[12px] text-muted-foreground">
                 No channels match "{query.trim()}".
               </p>
             )}
@@ -312,7 +317,7 @@ export function ChannelSwitcher({ channelId }: { channelId: string }) {
               setOpen(false);
               setCreateOpen(true);
             }}
-            className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-[13px] text-gray-11 transition-colors hover:bg-gray-3"
+            className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-[13px] text-muted-foreground transition-colors hover:bg-fill-hover"
           >
             <span className="flex w-4 shrink-0 items-center justify-center">
               <PlusIcon size={14} />
@@ -326,7 +331,7 @@ export function ChannelSwitcher({ channelId }: { channelId: string }) {
       {current && !showStar && (
         <span
           aria-hidden
-          className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-[26px] flex size-6 items-center justify-center text-gray-10 opacity-40"
+          className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-[26px] flex size-6 items-center justify-center text-muted-foreground opacity-40"
         >
           <StarIcon size={14} weight="fill" />
         </span>

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

@@ -7,7 +7,6 @@ import {
   FileTextIcon,
   HashIcon,
   LinkIcon,
-  LockSimpleIcon,
   PencilSimpleIcon,
   PlusIcon,
   StarIcon,
@@ -43,6 +42,7 @@ import {
   TooltipTrigger,
 } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
+import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyph";
 import { RenameChannelModal } from "@posthog/ui/features/canvas/components/RenameChannelModal";
 import { trackAndCreateCanvas } from "@posthog/ui/features/canvas/createCanvasAnalytics";
 import { ensurePersonalChannel } from "@posthog/ui/features/canvas/ensurePersonalChannel";
@@ -346,18 +346,18 @@ function ChannelSection({
                   params: { channelId: channel.id },
                 });
               }}
-              className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-gray-12"
+              className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-foreground"
             >
-              <HashIcon
-                size={14}
-                weight={isUnread ? "bold" : undefined}
-                className={cn(
+              {channelGlyph(channel.name, {
+                size: 14,
+                weight: isUnread ? "bold" : undefined,
+                className: cn(
                   "shrink-0",
                   isUnread || isActive
                     ? "text-foreground"
                     : "text-muted-foreground group-hover/button:text-foreground",
-                )}
-              />
+                ),
+              })}
               <span
                 className={cn(
                   "truncate text-[13px] group-hover/chan:pr-8",
@@ -583,18 +583,18 @@ function PersonalChannelRow() {
         data-selected={isActive || undefined}
         disabled={isCreating}
         onClick={() => void open()}
-        className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-gray-12"
+        className="w-full min-w-0 justify-start gap-2 data-selected:bg-fill-selected data-selected:text-foreground"
       >
-        <HashIcon
-          size={14}
-          weight={isUnread ? "bold" : undefined}
-          className={cn(
+        {channelGlyph(PERSONAL_CHANNEL_NAME, {
+          size: 14,
+          weight: isUnread ? "bold" : undefined,
+          className: cn(
             "shrink-0",
             isUnread || isActive
               ? "text-foreground"
               : "text-muted-foreground group-hover/button:text-foreground",
-          )}
-        />
+          ),
+        })}
         <span
           className={cn(
             "truncate text-[13px]",
@@ -606,17 +606,6 @@ function PersonalChannelRow() {
         >
           {PERSONAL_CHANNEL_NAME}
         </span>
-        {/* The lock and the hover "+" share the right edge, so fade the lock
-            out as the "+" comes in. */}
-        <LockSimpleIcon
-          size={12}
-          className={cn(
-            "ml-auto shrink-0 text-chrome-foreground transition-opacity",
-            newMenuOpen
-              ? "opacity-0"
-              : "opacity-100 group-hover/chan:opacity-0",
-          )}
-        />
       </Button>
       <div className="absolute top-0 right-1">
         <DropdownMenu open={newMenuOpen} onOpenChange={setNewMenuOpen}>

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

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { isPrivateChannel } from "./channelGlyph";
+
+describe("isPrivateChannel", () => {
+  it.each([
+    ["me", true],
+    ["  Me  ", true],
+    ["ME", true],
+    ["code", false],
+    ["posthog-feedback", false],
+    // Not a prefix match: only the personal channel itself is private.
+    ["meeting-notes", false],
+    ["team-me", false],
+    [undefined, false],
+    ["", false],
+  ])("%s -> %s", (name, expected) => {
+    expect(isPrivateChannel(name)).toBe(expected);
+  });
+});