feat(ui): fold-only space rows, My-tasks filter, and bottom-docked directory

Sidebar feedback round: a space row is now a single click target that
folds its task list (no separate caret hover zone); the hover gear on the
right opens the space in the main view, and #me's lock moves into that
same trailing well. The header regains a tab strip under the channels
layout (Feed, Context, Loops, Artifacts, Recents) as the breadcrumb's
trailing slot, since the sidebar no longer carries page links. A My-tasks
switch above the pinned list narrows every space's tasks to the viewer's
own via the exported core ownership rule. All spaces docks at the bottom,
sheds its cube for a caret aligned with the space rows, and opens upward
to a capped, scrollable height.

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

Author: puemos

packages/core/src/canvas/channelItems.ts

@@ -37,7 +37,9 @@ export interface ChannelItemOwner {
 // A display name is NOT an identity — two users can share one — so it must never
 // gate the private `#me` space. Items without a creator uuid fail closed
 // (excluded from #me); `authorName`/`authorUser` are display-only.
-function isOwnedBy(
+// Exported for the sidebar's "my tasks" filter, which applies the same
+// fail-closed ownership rule to any channel's list.
+export function isOwnedBy(
   item: Pick<ChannelItemModel, "authorUuid">,
   owner: ChannelItemOwner,
 ): boolean {

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

@@ -1,11 +1,5 @@
-import {
-  CaretDownIcon,
-  CaretRightIcon,
-  CubeFocusIcon,
-  PlusIcon,
-  StarIcon,
-} from "@phosphor-icons/react";
-import { Button, cn, MenuLabel } from "@posthog/quill";
+import { CaretRightIcon, PlusIcon, StarIcon } from "@phosphor-icons/react";
+import { Button, cn } from "@posthog/quill";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
 import { CreateChannelModal } from "@posthog/ui/features/canvas/components/CreateChannelModal";
 import {
@@ -26,11 +20,12 @@ import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { useMemo, useState } from "react";
 
 /**
- * The project's space directory. A section label (like Starred/Spaces in the
- * channel list) that folds open to every shared space, alphabetically.
- * Clicking a row opens the space; the hover star is what pins it into the
- * sidebar above — pinned rows wear their star filled so the directory shows
- * what's already up there. The personal space isn't listed: it can't be
+ * The project's space directory, docked at the bottom of the sidebar. The
+ * header is shaped exactly like a pinned space row (same caret, same inset) and
+ * folding it open grows the section upward to a capped height, then the list
+ * scrolls. Clicking a row opens the space; the hover star is what pins it into
+ * the sidebar above — pinned rows wear their star filled so the directory
+ * shows what's already up there. The personal space isn't listed: it can't be
  * pinned or shared, and it's always first in the pinned list anyway.
  */
 export function AllSpacesSection() {
@@ -82,89 +77,94 @@ export function AllSpacesSection() {
   };
 
   return (
-    <div className="flex flex-col gap-px px-2 pb-2">
-      {/* Same header shape as the channel list's groups: MenuLabel carries the
-          sidebar's label styling, and the section glyph swaps to a disclosure
-          caret on hover or keyboard focus. */}
-      <MenuLabel
-        render={
-          <button
-            type="button"
-            onClick={toggle}
-            aria-expanded={open}
-            className="group/all-spaces flex w-full items-center gap-2"
-          />
-        }
+    <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",
+        )}
       >
-        <span className="relative flex size-3.5 shrink-0 items-center justify-center">
-          <span className="group-hover/all-spaces:hidden group-focus-visible/all-spaces:hidden">
-            <CubeFocusIcon size={14} />
+        {/* Same shape as a pinned space row, so the carets line up. */}
+        <Button
+          variant="default"
+          left
+          aria-expanded={open}
+          onClick={toggle}
+          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">
+            All spaces
           </span>
-          {open ? (
-            <CaretDownIcon
-              size={14}
-              className="hidden group-hover/all-spaces:block group-focus-visible/all-spaces:block"
+        </Button>
+
+        {open && (
+          <>
+            <div className="flex max-h-64 flex-col gap-px overflow-y-auto">
+              {spaces.map((channel) => {
+                const shortcutId = starredRefToShortcutId.get(channel.path);
+                const base = `/website/${channel.id}`;
+                const isActive =
+                  pathname === base || pathname.startsWith(`${base}/`);
+                return (
+                  // Overlay, not endContent: the row is a button already, and
+                  // a star nested inside it would be a button within a button.
+                  <div key={channel.id} className="group/space relative">
+                    <SidebarItem
+                      depth={1}
+                      label={channel.name}
+                      isActive={isActive}
+                      onClick={() => openSpace(channel)}
+                      // Star well, so the name truncates clear of the star.
+                      endContent={
+                        <span aria-hidden className="size-5 shrink-0" />
+                      }
+                    />
+                    <Button
+                      variant="default"
+                      size="icon-sm"
+                      aria-label={shortcutId ? "Unpin space" : "Pin space"}
+                      onClick={() => togglePin(channel)}
+                      className={cn(
+                        "-translate-y-1/2 absolute top-1/2 right-[2px] text-muted-foreground transition-opacity",
+                        shortcutId
+                          ? "opacity-100"
+                          : "opacity-0 focus-visible:opacity-100 group-hover/space:opacity-100",
+                      )}
+                    >
+                      <StarIcon
+                        size={13}
+                        weight={shortcutId ? "fill" : "regular"}
+                      />
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+            {/* Below the scroll region so it's reachable without scrolling
+                the whole directory. */}
+            <SidebarItem
+              depth={1}
+              icon={<PlusIcon size={14} className="text-muted-foreground" />}
+              label={<span className="text-muted-foreground">New space</span>}
+              onClick={() => setCreateOpen(true)}
             />
-          ) : (
-            <CaretRightIcon
-              size={14}
-              className="hidden group-hover/all-spaces:block group-focus-visible/all-spaces:block"
+            <CreateChannelModal
+              open={createOpen}
+              onOpenChange={setCreateOpen}
             />
-          )}
-        </span>
-        All spaces
-      </MenuLabel>
-
-      {open && (
-        <>
-          {spaces.map((channel) => {
-            const shortcutId = starredRefToShortcutId.get(channel.path);
-            const base = `/website/${channel.id}`;
-            const isActive =
-              pathname === base || pathname.startsWith(`${base}/`);
-            return (
-              // Overlay, not endContent: the row is a button already, and a
-              // star nested inside it would be a button within a button.
-              <div key={channel.id} className="group/space relative">
-                <SidebarItem
-                  depth={1}
-                  label={channel.name}
-                  isActive={isActive}
-                  onClick={() => openSpace(channel)}
-                  // Star well, so the name truncates clear of the hover star.
-                  endContent={<span aria-hidden className="size-5 shrink-0" />}
-                />
-                <Button
-                  variant="default"
-                  size="icon-sm"
-                  aria-label={shortcutId ? "Unpin space" : "Pin space"}
-                  onClick={() => togglePin(channel)}
-                  className={cn(
-                    "-translate-y-1/2 absolute top-1/2 right-[2px] text-muted-foreground transition-opacity",
-                    shortcutId
-                      ? "opacity-100"
-                      : "opacity-0 focus-visible:opacity-100 group-hover/space:opacity-100",
-                  )}
-                >
-                  <StarIcon
-                    size={13}
-                    weight={shortcutId ? "fill" : "regular"}
-                  />
-                </Button>
-              </div>
-            );
-          })}
-          {/* The directory is also where a space that doesn't exist yet would
-              be — so creating one starts here. */}
-          <SidebarItem
-            depth={1}
-            icon={<PlusIcon size={14} className="text-muted-foreground" />}
-            label={<span className="text-muted-foreground">New space</span>}
-            onClick={() => setCreateOpen(true)}
-          />
-          <CreateChannelModal open={createOpen} onOpenChange={setCreateOpen} />
-        </>
-      )}
+          </>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -15,9 +15,9 @@ import { useNavigate, useRouterState } from "@tanstack/react-router";
 
 // The shared channel header. Every space scene renders the same breadcrumb —
 // the root segment is identical whether or not there's a leaf, so the space
-// name doesn't change size between the space home and its sub-pages. The new
-// layout drops the section tab strip (the channel sidebar carries those
-// entries); flag off keeps it. Starring lives on the sidebar back row and the
+// name doesn't change size between the space home and its sub-pages. Both
+// layouts carry the section tab strip (the new one trails it after the
+// breadcrumb, Feed included). Starring lives on the sidebar back row and the
 // channel list, not here.
 export function ChannelHeader({
   channelId,
@@ -48,6 +48,10 @@ export function ChannelHeader({
       channelId={channelId}
       leafIcon={page ? channelPageIcon(page, { size: 12 }) : undefined}
       leafLabel={page ? channelPageLabel(page) : undefined}
+      // The static sidebar's rows only fold their task lists, so the space's
+      // pages need a switcher in the main view — the same strip the legacy
+      // header carries, with Feed leading back to the root.
+      trailing={<ChannelTabs channelId={channelId} includeHome />}
     />
   );
 }

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

@@ -2,6 +2,7 @@ import { Button, cn } from "@posthog/quill";
 import { LOOPS_FLAG } from "@posthog/shared";
 import { CHANNEL_SECTIONS } from "@posthog/ui/features/canvas/channelSections";
 import { ChannelPinnedMenu } from "@posthog/ui/features/canvas/components/ChannelPinnedMenu";
+import { channelPageLabel } from "@posthog/ui/features/canvas/components/channelPages";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { Link, useRouterState } from "@tanstack/react-router";
 
@@ -11,16 +12,53 @@ const TABS = CHANNEL_SECTIONS.map((s) => ({
   to: `/website/$channelId/${s.key}` as const,
 }));
 
+// The space-page variant: Feed leads (it's the space itself, and the way back
+// once you've tabbed away), Context follows it, and the labels come from the
+// channelPages table ("Context", not the legacy "CONTEXT.md").
+const SPACE_TABS = (["context", "loops", "artifacts", "history"] as const).map(
+  (key) => ({
+    key,
+    label: channelPageLabel(key),
+    to: `/website/$channelId/${key}` as const,
+  }),
+);
+
 // Home / History / Artifacts tab switcher shown in the channel header bar, with
 // a Pinned quick-access menu alongside. Pathname-driven active state (the
 // codebase's convention) rather than Link's activeProps.
-export function ChannelTabs({ channelId }: { channelId: string }) {
+export function ChannelTabs({
+  channelId,
+  includeHome,
+}: {
+  channelId: string;
+  /**
+   * Adds a leading Feed tab for the space root. On: the header is the only tab
+   * strip (channels layout). Off: legacy header, where the channel pill beside
+   * this nav already links home.
+   */
+  includeHome?: boolean;
+}) {
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const loopsEnabled = useFeatureFlag(LOOPS_FLAG, import.meta.env.DEV);
-  const tabs = loopsEnabled ? TABS : TABS.filter((tab) => tab.key !== "loops");
+  const sectionTabs = includeHome ? SPACE_TABS : TABS;
+  const tabs = loopsEnabled
+    ? sectionTabs
+    : sectionTabs.filter((tab) => tab.key !== "loops");
+  const home = `/website/${channelId}`;
 
   return (
     <nav className="flex items-center gap-px">
+      {includeHome && (
+        <Button
+          variant="default"
+          size="sm"
+          data-selected={pathname === home || undefined}
+          className={cn(pathname === home && "bg-fill-selected")}
+          render={<Link to="/website/$channelId" params={{ channelId }} />}
+        >
+          {channelPageLabel("home")}
+        </Button>
+      )}
       {tabs.map((tab) => {
         const href = tab.to.replace("$channelId", channelId);
         const active = pathname === href;

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

@@ -133,13 +133,12 @@ export function ChannelsSidebar() {
             </Box>
             {/* 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 Fab keeps create (task, canvas,
-                space) in the same corner as the panes layout; bottom padding
-                keeps the last row reachable under it. */}
+                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. */}
             <Box className="relative min-h-0 flex-1">
-              <Box className="h-full overflow-y-auto pb-16">
-                <SpacesSidebarNav />
-              </Box>
+              <SpacesSidebarNav />
               <ChannelsFab />
             </Box>
           </>