channel rename + large new button

Author: adamleithp

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

@@ -525,7 +525,7 @@ export function BrowserTabStrip() {
           const meta = channelSectionFor(section);
           return {
             id: t.id,
-            label: meta?.label ?? channel ?? "Context",
+            label: meta?.label ?? channel ?? "Channel",
             icon: <SquircleDashed size={14} />,
             channelName: channel,
             // No section meta → the channel's index page.

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

@@ -176,7 +176,7 @@ export function ActivityView() {
           Activity
         </Text>
         <Text size="2" className="block text-muted-foreground">
-          Mentions of you across contexts.
+          Mentions of you across channels.
         </Text>
         <div className="mt-4">
           {isLoading && items.length === 0 ? (

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

@@ -63,7 +63,7 @@ describe("ChannelContextPanel", () => {
     const user = userEvent.setup();
     const onClose = renderPanel();
     await user.click(
-      screen.getByRole("button", { name: "Close context panel" }),
+      screen.getByRole("button", { name: "Close CONTEXT.md panel" }),
     );
     expect(onClose).toHaveBeenCalledTimes(1);
   });

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

@@ -35,7 +35,7 @@ export function ChannelContextPanel({
           <button
             type="button"
             onClick={onClose}
-            aria-label="Close context panel"
+            aria-label="Close CONTEXT.md panel"
             className="flex size-6 shrink-0 items-center justify-center rounded text-gray-10 hover:bg-gray-4 hover:text-gray-12"
           >
             <X size={14} />

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

@@ -34,7 +34,7 @@ export function ChannelHeader({ channelId }: { channelId: string }) {
           className="shrink-0 text-muted-foreground/80"
         />
         <Text className="min-w-0 truncate font-medium" title={channelName}>
-          {channelName ?? "Context"}
+          {channelName ?? "Channel"}
         </Text>
       </Button>
       <ChannelTabs channelId={channelId} />

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

@@ -55,9 +55,9 @@ export function ChannelIntro({
             <span className={mentionChipClass}>
               @{userDisplayName(creator ?? null)}
             </span>{" "}
-            created this context {creationDatePhrase(channel.created_at)}. This
+            created this channel {creationDatePhrase(channel.created_at)}. This
             is the very beginning of the{" "}
-            <Text weight="bold">{channelName}</Text> context.
+            <Text weight="bold">{channelName}</Text> channel.
           </Text>
         )}
       </div>
@@ -70,7 +70,7 @@ export function ChannelIntro({
             <ItemContent className="self-start">
               <ItemTitle>Created context.md</ItemTitle>
               <ItemDescription className="text-xs">
-                Used in all sessions within this context
+                Used in all sessions within this channel
               </ItemDescription>
             </ItemContent>
           </Item>
@@ -125,9 +125,10 @@ export function ChannelIntro({
             <Info size={18} />
           </ItemMedia>
           <ItemContent className="self-start">
-            <ItemTitle>Learn more about contexts</ItemTitle>
+            <ItemTitle>Learn more about channels</ItemTitle>
             <ItemDescription className="text-xs">
-              Context is a group of tasks that are related to a specific topic.
+              A channel is a group of tasks that are related to a specific
+              topic.
             </ItemDescription>
           </ItemContent>
         </Item>

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

@@ -0,0 +1,72 @@
+import { FileTextIcon, PlusIcon } from "@phosphor-icons/react";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@posthog/quill";
+import { CreateChannelModal } from "@posthog/ui/features/canvas/components/CreateChannelModal";
+import { openTaskInput } from "@posthog/ui/router/useOpenTask";
+import { useRouterState } from "@tanstack/react-router";
+import { SquircleDashed } from "lucide-react";
+import { useState } from "react";
+
+// The create affordance for the Channels space, floated over the bottom-right
+// of the channel list. It owns the create-channel modal (the list itself has no
+// other entry point) and opens its menu upward, since it sits at the bottom.
+export function ChannelsFab() {
+  const [modalOpen, setModalOpen] = useState(false);
+  // New task has no /website mirror yet, so it jumps back to Code unless we're
+  // already in the Channels space — same rule as the nav's New task row.
+  const inChannels = useRouterState({
+    select: (s) => s.location.pathname.startsWith("/website"),
+  });
+
+  return (
+    <>
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    variant="primary"
+                    size="icon-lg"
+                    aria-label="Create"
+                    className="absolute right-3 bottom-3 z-10 rounded-full shadow-lg"
+                  >
+                    <PlusIcon size={20} weight="bold" />
+                  </Button>
+                }
+              />
+            }
+          />
+          <TooltipContent side="top" align="center">
+            Create something new
+          </TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent align="center" side="top" sideOffset={6}>
+          <DropdownMenuItem onClick={() => setModalOpen(true)}>
+            <SquircleDashed size={14} className="text-gray-9" />
+            New channel
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() =>
+              openTaskInput(inChannels ? { space: "website" } : undefined)
+            }
+          >
+            <FileTextIcon size={14} className="text-gray-9" />
+            New task
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <CreateChannelModal open={modalOpen} onOpenChange={setModalOpen} />
+    </>
+  );
+}