feat(ui): top New session button, My tasks section, space selector, tab icons

Sidebar feedback round four. Create moves to a New session button at the
top of the nav (the Fab is gone), landing on the composer which now
carries a Space dropdown to retarget where the task files — the typed
draft survives the switch. Space rows trade their inline New session row
for a hover plus beside the gear, and their task lists show five recents
flat (no inner scroll) with View all still leading to Recents. A
cross-space My tasks section sits above Spaces, each row wearing its
space's name in muted text and opening the task inside that space. The
header page tabs pick up their channelPages icons.

Generated-By: PostHog Code
Task-Id: 0331ac58-0a1c-4b4e-b884-2ff7d8e71986

Author: puemos

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

@@ -78,15 +78,7 @@ export function AllSpacesSection() {
 
   return (
     <div className="shrink-0 border-border border-t">
-      <div
-        className={cn(
-          "flex flex-col gap-px px-2 pt-1",
-          // Open, the section ends in rows with hover controls at their right
-          // edge — clear the floating create button. The bare header can share
-          // its row with it.
-          open ? "pb-12" : "pb-2",
-        )}
-      >
+      <div className="flex flex-col gap-px px-2 pt-1 pb-2">
         {/* Same shape as a pinned space row, so the carets line up. */}
         <Button
           variant="default"

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

@@ -4,6 +4,7 @@ import { CHANNEL_SECTIONS } from "@posthog/ui/features/canvas/channelSections";
 import { ChannelPinnedMenu } from "@posthog/ui/features/canvas/components/ChannelPinnedMenu";
 import {
   type ChannelPageKey,
+  channelPageIcon,
   channelPageLabel,
 } from "@posthog/ui/features/canvas/components/channelPages";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
@@ -99,6 +100,7 @@ export function ChannelPageTabs({
         >
           {tabs.map((key) => (
             <TabsTrigger key={key} value={key} className="gap-1.5 px-2.5 py-2">
+              {channelPageIcon(key, { size: 14 })}
               <span className="font-medium text-[13px]">
                 {channelPageLabel(key)}
               </span>

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

@@ -134,12 +134,11 @@ export function ChannelsSidebar() {
             {/* The static spaces sidebar (prototype): one nav where every space
                 expands inline with its tasks beneath it. Replaces the panes
                 slider under this flag. The nav owns its own scroll regions
-                (pinned spaces scroll; All spaces docks at the bottom); the Fab
-                keeps create (task, canvas, space) in the same corner as the
-                panes layout. */}
+                (pinned spaces scroll; All spaces docks at the bottom) and its
+                own create entry points (New session at the top, New space in
+                the directory), so no Fab here. */}
             <Box className="relative min-h-0 flex-1">
               <SpacesSidebarNav />
-              <ChannelsFab />
             </Box>
           </>
         ) : bodyChannelsWorld ? (

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

@@ -0,0 +1,125 @@
+import { CaretRightIcon } from "@phosphor-icons/react";
+import { Button, cn } from "@posthog/quill";
+import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
+import {
+  normalizeChannelName,
+  PERSONAL_CHANNEL_NAME,
+  useTaskChannels,
+} from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { useSpacesSidebarStore } from "@posthog/ui/features/canvas/stores/spacesSidebarStore";
+import { SidebarItem } from "@posthog/ui/features/sidebar/components/SidebarItem";
+import { useTasks } from "@posthog/ui/features/tasks/useTasks";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { useMemo } from "react";
+
+const MY_TASKS_CAP = 10;
+
+/**
+ * The viewer's tasks across every space, newest first, each wearing its
+ * space's name in muted text on the right. Rows open the task inside its
+ * space; tasks that predate spaces (no backend channel) fall back to the
+ * personal space. Same folding header shape as the space rows below it.
+ */
+export function MyTasksSection() {
+  const open = useSpacesSidebarStore((s) => s.openMyTasks);
+  const toggleMyTasks = useSpacesSidebarStore((s) => s.toggleMyTasks);
+  const navigate = useNavigate();
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+
+  // useTasks() without showAllUsers is already scoped to the viewer.
+  const { data: myTasks = [] } = useTasks();
+  const { channels: backendChannels } = useTaskChannels({ enabled: open });
+  const { channels: folderChannels } = useChannels();
+
+  const rows = useMemo(() => {
+    const backendById = new Map(backendChannels.map((c) => [c.id, c]));
+    const folderByName = new Map(
+      folderChannels.map((c) => [normalizeChannelName(c.name), c]),
+    );
+    const me = folderChannels.find((c) => c.name === PERSONAL_CHANNEL_NAME);
+    return [...myTasks]
+      .sort(
+        (a, b) =>
+          (Date.parse(b.updated_at) || 0) - (Date.parse(a.updated_at) || 0),
+      )
+      .slice(0, MY_TASKS_CAP)
+      .map((task) => {
+        const backend = task.channel
+          ? backendById.get(task.channel)
+          : undefined;
+        const spaceName = backend
+          ? backend.channel_type === "personal"
+            ? PERSONAL_CHANNEL_NAME
+            : backend.name
+          : null;
+        const folder = spaceName
+          ? folderByName.get(normalizeChannelName(spaceName))
+          : undefined;
+        return {
+          task,
+          spaceName,
+          // The route needs the folder channel; unmapped tasks open under #me.
+          folderId: (folder ?? me)?.id,
+        };
+      });
+  }, [myTasks, backendChannels, folderChannels]);
+
+  return (
+    <div className="flex flex-col gap-px">
+      {/* Same shape as a space row, so the carets line up. */}
+      <Button
+        variant="default"
+        left
+        aria-expanded={open}
+        onClick={toggleMyTasks}
+        className="w-full gap-1.5 text-left"
+      >
+        <CaretRightIcon
+          size={12}
+          className={cn(
+            "shrink-0 text-muted-foreground transition-transform",
+            open && "rotate-90",
+          )}
+        />
+        <span className="min-w-0 flex-1 truncate font-medium text-[13px] text-muted-foreground group-hover/button:text-foreground">
+          My tasks
+        </span>
+      </Button>
+
+      {open && (
+        <div className="flex flex-col gap-px pb-1 pl-5">
+          {rows.length === 0 ? (
+            <div className="px-2 py-1.5 text-[12px] text-muted-foreground">
+              No tasks yet
+            </div>
+          ) : (
+            rows.map(({ task, spaceName, folderId }) => (
+              <SidebarItem
+                key={task.id}
+                depth={0}
+                label={<span>{task.title || "Untitled task"}</span>}
+                isActive={pathname.endsWith(`/tasks/${task.id}`)}
+                onClick={
+                  folderId
+                    ? () =>
+                        void navigate({
+                          to: "/website/$channelId/tasks/$taskId",
+                          params: { channelId: folderId, taskId: task.id },
+                        })
+                    : undefined
+                }
+                endContent={
+                  spaceName ? (
+                    <span className="ml-1 max-w-20 shrink-0 truncate text-[11px] text-muted-foreground">
+                      {spaceName}
+                    </span>
+                  ) : undefined
+                }
+              />
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -10,7 +10,6 @@ import { useIsChannelUnread } from "@posthog/ui/features/canvas/hooks/useUnreadC
 import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
 import { useSpacesSidebarStore } from "@posthog/ui/features/canvas/stores/spacesSidebarStore";
 import { useCommandCenterStore } from "@posthog/ui/features/command-center/commandCenterStore";
-import { SidebarItem } from "@posthog/ui/features/sidebar/components/SidebarItem";
 import { useRenameTask } from "@posthog/ui/features/tasks/useTaskMutations";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
 import { toast } from "@posthog/ui/primitives/toast";
@@ -19,15 +18,15 @@ import { track } from "@posthog/ui/shell/analytics";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { type Ref, useMemo, useState } from "react";
 
-const RECENTS_CAP = 10;
+const RECENTS_CAP = 5;
 
 /**
  * One pinned space in the static sidebar. The whole row is one click target:
  * it folds the space's task list open and closed (caret included — no separate
- * hover zones). The hover gear on the right is what opens the space itself in
- * the main view, where the header tabs (Feed/Context/Loops/Artifacts) live.
- * #me wears its lock in the same right-hand well, stepping aside for the gear
- * on hover.
+ * hover zones). Hovering reveals two controls on the right: a plus that files
+ * a new task into this space, and the gear that opens the space itself in the
+ * main view, where the header tabs (Feed/Context/Loops/Artifacts) live. #me
+ * wears its lock in the same right-hand well, stepping aside on hover.
  *
  * Expand state is local view state in `spacesSidebarStore`; the space's
  * presence in the sidebar is its star, managed from the All spaces directory.
@@ -152,11 +151,12 @@ export function SpaceSection({
             {channel.name}
           </span>
           {/* Trailing well, reserved so the name truncates clear of the lock
-              and hover gear rather than shifting when they appear. */}
-          <span aria-hidden className="size-6 shrink-0" />
+              and the two hover controls rather than shifting when they appear. */}
+          <span aria-hidden className="h-6 w-12 shrink-0" />
         </Button>
         {/* Overlays, not children — the row is a button already. The lock
-            yields its spot to the gear on hover so the well never doubles up. */}
+            yields its spot to the controls on hover so the well never doubles
+            up. */}
         {glyph && (
           <span
             aria-hidden
@@ -165,6 +165,22 @@ export function SpaceSection({
             {glyph}
           </span>
         )}
+        <Button
+          variant="default"
+          size="icon-sm"
+          aria-label={`New task in ${channel.name}`}
+          onClick={() => {
+            track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+              action_type: "new_task_open",
+              surface: "sidebar",
+              channel_id: channel.id,
+            });
+            openTaskInput({ channelId: channel.id });
+          }}
+          className="-translate-y-1/2 absolute top-1/2 right-[30px] text-muted-foreground opacity-0 transition-opacity focus-visible:opacity-100 group-hover/space:opacity-100"
+        >
+          <PlusIcon size={14} />
+        </Button>
         <Button
           variant="default"
           size="icon-sm"
@@ -180,21 +196,6 @@ export function SpaceSection({
           groups' trees (pl-5). */}
       {open && (
         <div className="flex flex-col gap-px pb-1 pl-5">
-          {/* Creating is the list's first move, so it leads the list — filed
-              straight into this space, like the Fab's New task with a channel. */}
-          <SidebarItem
-            depth={0}
-            icon={<PlusIcon size={14} className="text-muted-foreground" />}
-            label={<span className="text-muted-foreground">New session</span>}
-            onClick={() => {
-              track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
-                action_type: "new_task_open",
-                surface: "sidebar",
-                channel_id: channel.id,
-              });
-              openTaskInput({ channelId: channel.id });
-            }}
-          />
           {isLoading && sectionItems.length === 0 ? (
             <div className="flex flex-col gap-2 px-2 py-2">
               <Skeleton className="h-3 w-3/4" />
@@ -206,11 +207,9 @@ export function SpaceSection({
             </div>
           ) : (
             <>
-              {/* A five-row window (rows are ~26px + the px gaps); the rest of
-                  the capped list scrolls within it, View all stays put below.
-                  The right padding keeps the rows' trailing badges clear of
-                  the overlay scrollbar instead of drawn over by it. */}
-              <div className="flex max-h-[134px] flex-col gap-px overflow-y-auto pr-1">
+              {/* Five recents, no inner scroll — the full list is one click
+                  away on the space's Recents page via View all. */}
+              <div className="flex flex-col gap-px">
                 {sectionItems.map((item) => (
                   <ChannelItemRow
                     key={item.key}

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

@@ -1,19 +1,26 @@
 import { PointerSensor } from "@dnd-kit/dom";
 import { type DragDropEvents, DragDropProvider } from "@dnd-kit/react";
 import { useSortable } from "@dnd-kit/react/sortable";
+import { PlusIcon } from "@phosphor-icons/react";
 import {
+  Button,
   Switch,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@posthog/quill";
+import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { AllSpacesSection } from "@posthog/ui/features/canvas/components/AllSpacesSection";
 import { ChannelNav } from "@posthog/ui/features/canvas/components/ChannelNav";
+import { MyTasksSection } from "@posthog/ui/features/canvas/components/MyTasksSection";
 import { SpaceSection } from "@posthog/ui/features/canvas/components/SpaceSection";
 import type { Channel } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useStarredChannelSlots } from "@posthog/ui/features/canvas/hooks/useStarredChannelSlots";
 import { PERSONAL_CHANNEL_NAME } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
+import { useCurrentChannelStore } from "@posthog/ui/features/canvas/stores/currentChannelStore";
 import { useSpacesSidebarStore } from "@posthog/ui/features/canvas/stores/spacesSidebarStore";
+import { openTaskInput } from "@posthog/ui/router/useOpenTask";
+import { track } from "@posthog/ui/shell/analytics";
 import type { RefCallback } from "react";
 import { useMemo } from "react";
 
@@ -55,6 +62,7 @@ export function SpacesSidebarNav() {
   const toggleOnlyMyTasks = useSpacesSidebarStore((s) => s.toggleOnlyMyTasks);
   const spaceOrder = useSpacesSidebarStore((s) => s.spaceOrder);
   const setSpaceOrder = useSpacesSidebarStore((s) => s.setSpaceOrder);
+  const currentChannelId = useCurrentChannelStore((s) => s.currentChannelId);
 
   const me = pinnedSpaces.find((c) => c.name === PERSONAL_CHANNEL_NAME);
   // The user's drag order over the starred set; spaces they've never dragged
@@ -88,6 +96,36 @@ export function SpacesSidebarNav() {
     <div className="flex h-full min-h-0 flex-col">
       <ChannelNav />
 
+      {/* The create entry point, now that the floating button is gone. Files
+          into the space you're in; the composer's space selector can retarget
+          it. */}
+      <div className="shrink-0 px-2 pb-1.5">
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full justify-start gap-1.5"
+          onClick={() => {
+            track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+              action_type: "new_task_open",
+              surface: "sidebar",
+              channel_id: currentChannelId ?? me?.id,
+            });
+            openTaskInput({
+              channelId: currentChannelId ?? me?.id,
+              space: "website",
+            });
+          }}
+        >
+          <PlusIcon size={14} />
+          New session
+        </Button>
+      </div>
+
+      {/* The viewer's tasks across every space. */}
+      <div className="shrink-0 px-2 pb-1">
+        <MyTasksSection />
+      </div>
+
       {/* The section label, with one filter over every space's task list. */}
       <div className="flex shrink-0 items-center justify-between px-3 pb-1.5 text-[12px] text-muted-foreground">
         Spaces