feat(command): add channels to cmd-k and show task filing

Channels were only reachable by clicking the sidebar. Surface them in the
command palette as a searchable "Channels" section that navigates to
/website/$channelId, and auto-expand the channel in the sidebar when its
route is active. Task entries now show the channel they're filed to as a
muted "· #channel" suffix (searchable by channel name).

Generated-By: PostHog Code
Task-Id: bc6e7269-db09-4ef7-b3a4-41f0ca03abaf

Author: raquelmsmith

packages/shared/src/analytics-events.ts

@@ -47,7 +47,8 @@ export type CommandMenuAction =
   | "toggle-theme"
   | "toggle-left-sidebar"
   | "open-review-panel"
-  | "open-task";
+  | "open-task"
+  | "open-channel";
 
 // Event property interfaces
 export interface TaskListViewProperties {

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

@@ -57,7 +57,7 @@ import { toast } from "@posthog/ui/primitives/toast";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { Box, Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import { hostClient } from "../hostClient";
 
 function NavButton({
@@ -338,8 +338,14 @@ function ChannelSection({
   const { data: tasks } = useTasks();
   const { tasks: filedTasks } = useChannelTasks(channel.id);
   const base = `/website/${channel.id}`;
-  // Channels always start collapsed on load; expansion is session-only.
-  const [open, setOpen] = useState(false);
+  const isActive = pathname === base || pathname.startsWith(`${base}/`);
+  // Channels start collapsed; expansion is session-only. Navigating into a
+  // channel (sidebar, cmd-k, deep link) auto-expands it so the active channel
+  // is always open, while leaving manual collapse/expand intact afterward.
+  const [open, setOpen] = useState(isActive);
+  useEffect(() => {
+    if (isActive) setOpen(true);
+  }, [isActive]);
 
   return (
     <Box className="group/chan relative">

packages/ui/src/features/canvas/hooks/useTaskChannelMap.ts

@@ -0,0 +1,41 @@
+import { useHostTRPC } from "@posthog/host-router/react";
+import {
+  type Channel,
+  useChannels,
+} from "@posthog/ui/features/canvas/hooks/useChannels";
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+/**
+ * Map of taskId → the channel it's filed to. A task is filed to at most one
+ * channel (ChannelTasksService moves the row rather than duplicating it), so
+ * the mapping is unambiguous. Fans out one `channelTasks.list` query per
+ * channel; results are shared with the channel sidebar's per-section queries
+ * through the react-query cache.
+ */
+export function useTaskChannelMap(options?: {
+  enabled?: boolean;
+}): Map<string, Channel> {
+  const enabled = options?.enabled ?? true;
+  const { channels } = useChannels({ enabled });
+  const trpc = useHostTRPC();
+  const results = useQueries({
+    queries: channels.map((channel) =>
+      trpc.channelTasks.list.queryOptions(
+        { channelId: channel.id },
+        { enabled, staleTime: 5_000 },
+      ),
+    ),
+  });
+  return useMemo(() => {
+    const map = new Map<string, Channel>();
+    results.forEach((res, i) => {
+      const channel = channels[i];
+      if (!channel) return;
+      for (const record of res.data ?? []) {
+        if (record.taskId) map.set(record.taskId, channel);
+      }
+    });
+    return map;
+  }, [results, channels]);
+}

packages/ui/src/features/command/CommandMenu.tsx

@@ -1,3 +1,4 @@
+import { HashIcon } from "@phosphor-icons/react";
 import {
   Autocomplete,
   AutocompleteCollection,
@@ -15,6 +16,8 @@ import {
   type CommandMenuAction,
 } from "@posthog/shared/analytics-events";
 import type { Task } from "@posthog/shared/domain-types";
+import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
+import { useTaskChannelMap } from "@posthog/ui/features/canvas/hooks/useTaskChannelMap";
 import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
 import { CommandKeyHints } from "@posthog/ui/features/command/CommandKeyHints";
 import { useFolders } from "@posthog/ui/features/folders/useFolders";
@@ -26,6 +29,7 @@ import { TaskIcon } from "@posthog/ui/features/sidebar/components/items/TaskIcon
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { useTaskPrStatus } from "@posthog/ui/features/sidebar/useTaskPrStatus";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
+import { navigateToChannel } from "@posthog/ui/router/navigationBridge";
 import { useAppView } from "@posthog/ui/router/useAppView";
 import { openTask, openTaskInput } from "@posthog/ui/router/useOpenTask";
 import { track } from "@posthog/ui/shell/analytics";
@@ -49,6 +53,8 @@ interface CommandMenuProps {
 type Command = {
   id: string;
   label: string;
+  /** Muted trailing detail shown after a middot, e.g. a task's channel. */
+  detail?: string;
   keywords?: string;
   icon: React.ReactNode;
   action: CommandMenuAction;
@@ -89,6 +95,8 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const openSettingsDialog = openSettings;
   const closeSettingsDialog = closeSettings;
   const { folders } = useFolders();
+  const { channels } = useChannels();
+  const taskChannelMap = useTaskChannelMap({ enabled: open });
   const { theme, setTheme } = useThemeStore();
   const toggleLeftSidebar = useSidebarStore((state) => state.toggle);
   const view = useAppView();
@@ -254,24 +262,50 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
     return [
       {
         label: "Tasks",
-        items: tasks.map((task) => ({
-          id: `task-${task.id}`,
-          label: task.title,
-          icon: <TaskCommandIcon task={task} />,
-          action: "open-task" as CommandMenuAction,
+        items: tasks.map((task) => {
+          const channel = taskChannelMap.get(task.id);
+          return {
+            id: `task-${task.id}`,
+            label: task.title,
+            detail: channel?.name,
+            // Include the channel name so searching it surfaces filed tasks.
+            keywords: channel?.name,
+            icon: <TaskCommandIcon task={task} />,
+            action: "open-task" as CommandMenuAction,
+            onRun: () => {
+              closeSettingsDialog();
+              void openTask(task);
+            },
+          };
+        }),
+      },
+    ];
+  }, [tasks, taskChannelMap, closeSettingsDialog]);
+
+  const channelSections = useMemo<CommandSection[]>(() => {
+    if (channels.length === 0) return [];
+    return [
+      {
+        label: "Channels",
+        items: channels.map((channel) => ({
+          id: `channel-${channel.id}`,
+          label: channel.name,
+          keywords: "channel",
+          icon: <HashIcon size={12} className="text-gray-11" />,
+          action: "open-channel" as CommandMenuAction,
           onRun: () => {
             closeSettingsDialog();
-            void openTask(task);
+            navigateToChannel(channel.id);
           },
         })),
       },
     ];
-  }, [tasks, closeSettingsDialog]);
+  }, [channels, closeSettingsDialog]);
 
-  // Commands and tasks share a single filterable list.
+  // Commands, channels, and tasks share a single filterable list.
   const sections = useMemo(
-    () => [...commandSections, ...taskSections],
-    [commandSections, taskSections],
+    () => [...commandSections, ...channelSections, ...taskSections],
+    [commandSections, channelSections, taskSections],
   );
 
   const allCommands = useMemo(
@@ -314,7 +348,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
           }}
         >
           <AutocompleteInput
-            placeholder="Search commands and tasks…"
+            placeholder="Search commands, channels, and tasks…"
             autoFocus
             showClear
           />
@@ -343,6 +377,11 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
                       <span className="wrap-break-word min-w-0 whitespace-normal">
                         {cmd.label}
                       </span>
+                      {cmd.detail && (
+                        <span className="shrink-0 text-gray-9">
+                          · #{cmd.detail}
+                        </span>
+                      )}
                     </AutocompleteItem>
                   )}
                 </AutocompleteCollection>

packages/ui/src/router/navigationBridge.ts

@@ -32,6 +32,13 @@ export function navigateToTaskPending(key: string): void {
   });
 }
 
+export function navigateToChannel(channelId: string): void {
+  void getRouterOrNull()?.navigate({
+    to: "/website/$channelId",
+    params: { channelId },
+  });
+}
+
 export function navigateToFolderSettings(folderId: string): void {
   void getRouterOrNull()?.navigate({
     to: "/folders/$folderId",