refactor(tasks): move shared board modules out of home

Generated-By: PostHog Code
Task-Id: 1fbd8776-9d5b-4e74-9629-a6bdb8d3b78f

Author: puemos

…es/core/src/home/taskBoardStatus.test.ts …s/core/src/tasks/taskBoardStatus.test.tspackages/core/src/home/taskBoardStatus.test.ts renamed to packages/core/src/tasks/taskBoardStatus.test.ts packages/core/src/home/taskBoardStatus.test.ts renamed to packages/core/src/tasks/taskBoardStatus.test.ts

@@ -1,5 +1,5 @@
 import type { TaskRunStatus } from "@posthog/shared/domain-types";
-import type { PrSnapshot, PrSnapshotState } from "./prSnapshot";
+import type { PrSnapshot, PrSnapshotState } from "../home/prSnapshot";
 
 export const TASK_BOARD_STATUSES = [
   "working",

packages/core/src/home/taskBoardStatus.ts …ckages/core/src/tasks/taskBoardStatus.tspackages/core/src/home/taskBoardStatus.ts renamed to packages/core/src/tasks/taskBoardStatus.ts packages/core/src/home/taskBoardStatus.ts renamed to packages/core/src/tasks/taskBoardStatus.ts

@@ -10,7 +10,7 @@ import {
   TASK_BOARD_STATUSES,
   type TaskBoardStatus,
   taskBoardStatusFromSources,
-} from "@posthog/core/home/taskBoardStatus";
+} from "@posthog/core/tasks/taskBoardStatus";
 import type { Task } from "@posthog/shared/domain-types";
 import { UserAvatar } from "@posthog/ui/features/auth/UserAvatar";
 import {
@@ -24,13 +24,13 @@ import {
 } from "@posthog/ui/features/canvas/hooks/useChannelTaskPrStates";
 import { useTaskThread } from "@posthog/ui/features/canvas/hooks/useTaskThread";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
+import type { SidebarPrState } from "@posthog/ui/features/sidebar/useTaskPrStatus";
+import { useInView } from "@posthog/ui/primitives/hooks/useInView";
 import {
   WorkBoard,
+  type WorkBoardColor,
   type WorkBoardColumn,
-} from "@posthog/ui/features/home/components/WorkBoard";
-import type { SituationColor } from "@posthog/ui/features/home/utils/situationDisplay";
-import type { SidebarPrState } from "@posthog/ui/features/sidebar/useTaskPrStatus";
-import { useInView } from "@posthog/ui/primitives/hooks/useInView";
+} from "@posthog/ui/primitives/WorkBoard";
 import { Box } from "@radix-ui/themes";
 import { useMemo } from "react";
 
@@ -49,7 +49,7 @@ const STATUS_VISUAL: Record<
   {
     label: string;
     description: string;
-    color: SituationColor;
+    color: WorkBoardColor;
     Icon: typeof GitCommit;
   }
 > = {

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

@@ -1,20 +1,33 @@
 import type { Icon } from "@phosphor-icons/react";
-import {
-  type SituationColor,
-  situationCss,
-} from "@posthog/ui/features/home/utils/situationDisplay";
 import { ScrollArea } from "@radix-ui/themes";
 import type { ReactNode } from "react";
 
+export type WorkBoardColor =
+  | "red"
+  | "orange"
+  | "amber"
+  | "green"
+  | "blue"
+  | "purple"
+  | "gray";
+
 export interface WorkBoardColumn<T> {
   id: string;
   label: string;
   description: string;
-  color: SituationColor;
+  color: WorkBoardColor;
   Icon: Icon;
   items: T[];
 }
 
+function columnColors(color: WorkBoardColor) {
+  return {
+    foreground: `var(--${color}-11)`,
+    tint: `var(--${color}-a3)`,
+    wash: `var(--${color}-a2)`,
+  };
+}
+
 export function WorkBoard<T>({
   columns,
   getKey,
@@ -29,7 +42,7 @@ export function WorkBoard<T>({
   return (
     <div className="flex h-full min-h-0 gap-3 overflow-x-auto p-4">
       {columns.map((column) => {
-        const c = situationCss(column.color);
+        const colors = columnColors(column.color);
         const count = column.items.length;
         return (
           <div
@@ -40,22 +53,25 @@ export function WorkBoard<T>({
               className="mb-2 flex items-center gap-2 px-1"
               title={column.description}
             >
-              <span style={{ color: c.fg }}>
+              <span style={{ color: colors.foreground }}>
                 <column.Icon size={14} weight="bold" />
               </span>
               <span className="font-semibold text-[12px] text-gray-12">
                 {column.label}
               </span>
               <span
                 className="rounded-full px-1.5 py-px font-semibold text-[10.5px] tabular-nums"
-                style={{ color: c.fg, backgroundColor: c.tint }}
+                style={{
+                  color: colors.foreground,
+                  backgroundColor: colors.tint,
+                }}
               >
                 {count}
               </span>
             </div>
             <div
               className="min-h-0 flex-1 rounded-xl border border-(--gray-3)"
-              style={{ backgroundColor: c.wash }}
+              style={{ backgroundColor: colors.wash }}
             >
               <ScrollArea scrollbars="vertical" className="h-full min-h-0">
                 <div className="flex flex-col gap-2 p-2">
@@ -85,7 +101,7 @@ export function WorkBoard<T>({
 function WorkBoardCardSkeleton() {
   return (
     <output
-      aria-label="Loading tasks"
+      aria-label="Loading items"
       className="flex h-[112px] animate-pulse flex-col gap-3 rounded-lg border border-(--gray-4) bg-(--color-panel-solid) p-3"
     >
       <div className="h-3 w-4/5 rounded bg-(--gray-5)" />