feat(ui): drag spaces from the directory to pin; live watch-list status

All-spaces rows now carry a text/x-space-id drag payload and the pinned
region accepts them — dropping stars the space (one gesture instead of
the hover star) and lands it at the bottom of the user's order, ready to
reorder. The watch list stops going stale: each watched task gets its
own polled detail query, merged over the list copies, so a task the
task-list query doesn't return still renders with its real status dot
and badges instead of the synthesized quiet row.

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

Author: puemos

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

@@ -116,6 +116,13 @@ export function AllSpacesSection() {
                       label={channel.name}
                       isActive={isActive}
                       onClick={() => openSpace(channel)}
+                      // Dragging a directory row up into the pinned area pins
+                      // it — same result as the star, one gesture instead.
+                      draggable
+                      onDragStart={(e) => {
+                        e.dataTransfer.setData("text/x-space-id", channel.id);
+                        e.dataTransfer.effectAllowed = "copy";
+                      }}
                       // Star well, so the name truncates clear of the star.
                       endContent={
                         <span aria-hidden className="size-5 shrink-0" />

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

@@ -18,13 +18,21 @@ import { AllSpacesSection } from "@posthog/ui/features/canvas/components/AllSpac
 import { ChannelNav } from "@posthog/ui/features/canvas/components/ChannelNav";
 import { SpaceSection } from "@posthog/ui/features/canvas/components/SpaceSection";
 import { WatchListSection } from "@posthog/ui/features/canvas/components/WatchListSection";
-import type { Channel } from "@posthog/ui/features/canvas/hooks/useChannels";
+import {
+  useChannelStarMutations,
+  useChannelStars,
+} from "@posthog/ui/features/canvas/hooks/useChannelStars";
+import {
+  type Channel,
+  useChannels,
+} 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 { useSpacesSidebarStore } from "@posthog/ui/features/canvas/stores/spacesSidebarStore";
+import { toast } from "@posthog/ui/primitives/toast";
 import { openTaskInput } from "@posthog/ui/router/useOpenTask";
 import { track } from "@posthog/ui/shell/analytics";
-import type { RefCallback } from "react";
+import type { DragEvent, RefCallback } from "react";
 import { useMemo, useState } from "react";
 
 /**
@@ -81,6 +89,13 @@ export function SpacesSidebarNav() {
     ? searchText.trim().toLowerCase() || undefined
     : undefined;
 
+  // Dropping an All-spaces row into this region pins it (stars it), same as
+  // the directory's star but as one gesture.
+  const { channels } = useChannels();
+  const { starredRefToShortcutId } = useChannelStars();
+  const { star } = useChannelStarMutations();
+  const [isSpaceDropTarget, setIsSpaceDropTarget] = useState(false);
+
   const me = pinnedSpaces.find((c) => c.name === PERSONAL_CHANNEL_NAME);
   // The user's drag order over the starred set; spaces they've never dragged
   // keep their backend order after the ranked ones (sort is stable).
@@ -96,6 +111,41 @@ export function SpacesSidebarNav() {
     );
   }, [pinnedSpaces, spaceOrder]);
 
+  const handleSpaceDragOver = (e: DragEvent) => {
+    if (!e.dataTransfer.types.includes("text/x-space-id")) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setIsSpaceDropTarget(true);
+  };
+  const handleSpaceDragLeave = (e: DragEvent) => {
+    // dragleave fires when crossing into children; only clear on a real exit.
+    if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+    setIsSpaceDropTarget(false);
+  };
+  const handleSpaceDrop = (e: DragEvent) => {
+    setIsSpaceDropTarget(false);
+    const spaceId = e.dataTransfer.getData("text/x-space-id");
+    if (!spaceId) return;
+    e.preventDefault();
+    const channel = channels.find((c) => c.id === spaceId);
+    if (!channel || starredRefToShortcutId.has(channel.path)) return;
+    track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
+      action_type: "star",
+      surface: "sidebar",
+      channel_id: channel.id,
+    });
+    star(channel).catch((error: unknown) =>
+      toast.error("Couldn't pin space", {
+        description: error instanceof Error ? error.message : String(error),
+      }),
+    );
+    // Pins land at the bottom of the user's order, ready to drag into place.
+    setSpaceOrder([
+      ...orderedSpaces.map((c) => c.id).filter((id) => id !== spaceId),
+      spaceId,
+    ]);
+  };
+
   const handleDragEnd: DragDropEvents["dragend"] = (event) => {
     if (event.canceled) return;
     const sourceId = event.operation.source?.id;
@@ -201,8 +251,18 @@ export function SpacesSidebarNav() {
 
       {/* Pinned (starred) spaces; #me first and fixed, the rest reorderable.
           This region is the sidebar's one scroll container — spaces unfold
-          their full lists inside it, so there are no nested scrollbars. */}
-      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
+          their full lists inside it, so there are no nested scrollbars. It
+          also accepts All-spaces rows dragged up from the directory below. */}
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: drop target for space drags; the directory's star is the keyboard path */}
+      <div
+        className={cn(
+          "min-h-0 flex-1 overflow-y-auto px-2 pb-2 transition-colors",
+          isSpaceDropTarget && "bg-fill-hover",
+        )}
+        onDragOver={handleSpaceDragOver}
+        onDragLeave={handleSpaceDragLeave}
+        onDrop={handleSpaceDrop}
+      >
         <div className="flex flex-col gap-px">
           {me && <SpaceSection channel={me} query={query} />}
           {/* The handle doubles as the fold toggle, so a small pickup

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

@@ -16,11 +16,15 @@ import {
 } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
 import { useSpacesSidebarStore } from "@posthog/ui/features/canvas/stores/spacesSidebarStore";
 import { usePinnedTasks } from "@posthog/ui/features/sidebar/usePinnedTasks";
+import { taskDetailQuery } from "@posthog/ui/features/tasks/queries";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
 import { toast } from "@posthog/ui/primitives/toast";
+import { useQueries } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { type DragEvent, useMemo, useState } from "react";
 
+const WATCHED_TASK_POLL_INTERVAL_MS = 30_000;
+
 /**
  * A personal watch list: drag any task row onto the section (they all carry
  * the text/x-task-id payload) to keep a reference to it here, newest first.
@@ -43,6 +47,16 @@ export function WatchListSection() {
 
   // Anyone's task can be watched, so resolve against the full list.
   const { data: allTasks = [] } = useTasks({ showAllUsers: true });
+  // The list query misses tasks (its own filters and page), and a synthesized
+  // fallback row carries no live status — so each watched task also gets its
+  // own polled detail query, the same authoritative record the task views
+  // read. The status dot then agrees with the space lists.
+  const watchedTaskQueries = useQueries({
+    queries: watchList.map((entry) => ({
+      ...taskDetailQuery(entry.id),
+      refetchInterval: WATCHED_TASK_POLL_INTERVAL_MS,
+    })),
+  });
   const { channels: backendChannels } = useTaskChannels({ enabled: open });
   const { channels: folderChannels } = useChannels();
   const archivedTaskIds = useArchivedTaskIds();
@@ -55,9 +69,17 @@ export function WatchListSection() {
   // renders, from the reference captured at drop time.
   const items = useMemo<ChannelItemModel[]>(() => {
     const watched = new Set(watchList.map((entry) => entry.id));
+    // Detail records win over list copies: fresher, and they cover watched
+    // tasks the list query doesn't return at all.
+    const taskById = new Map(
+      allTasks.filter((t) => watched.has(t.id)).map((t) => [t.id, t]),
+    );
+    for (const query of watchedTaskQueries) {
+      if (query.data) taskById.set(query.data.id, query.data);
+    }
     const built = buildChannelItems({
       dashboards: [],
-      feedTasks: allTasks.filter((t) => watched.has(t.id)),
+      feedTasks: [...taskById.values()],
       archivedTaskIds,
       pinnedTaskIds,
       ownedBy: null,
@@ -80,7 +102,7 @@ export function WatchListSection() {
           task: null,
         },
     );
-  }, [watchList, allTasks, archivedTaskIds, pinnedTaskIds]);
+  }, [watchList, allTasks, watchedTaskQueries, archivedTaskIds, pinnedTaskIds]);
 
   // Each task's space: backend channel → display name → folder channel (which
   // the routes need). Unmapped tasks open under #me and carry no label.
@@ -222,7 +244,7 @@ export function WatchListSection() {
                   size="icon-sm"
                   aria-label="Remove from watch list"
                   onClick={() => removeFromWatchList(item.id)}
-                  className="-translate-y-1/2 absolute top-1/2 right-0.5 bg-chrome text-muted-foreground opacity-0 shadow-sm transition-opacity focus-visible:opacity-100 group-hover/watch:opacity-100 hover:text-foreground"
+                  className="-translate-y-1/2 absolute top-1/2 right-0.5 bg-chrome text-muted-foreground opacity-0 shadow-sm transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover/watch:opacity-100"
                 >
                   <XIcon size={13} weight="bold" />
                 </Button>