tower-studio 0.1.1 → 0.1.3

package/src/components/board/kanban-board.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { TaskCardContextMenu } from "./task-card-context-menu";
+import {
+  DndContext,
+  DragOverlay,
+  closestCorners,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragStartEvent,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import { BoardColumn } from "./board-column";
+import { TaskCard } from "./task-card";
+import { BOARD_COLUMNS } from "@/lib/constants";
+import type { TaskStatus } from "@prisma/client";
+import type { TaskWithLabels } from "@/types";
+
+interface KanbanBoardProps {
+  initialTasks: TaskWithLabels[];
+  onTaskMove?: (taskId: string, newStatus: TaskStatus) => void;
+  onTaskClick?: (task: TaskWithLabels) => void;
+  onEditTask?: (task: TaskWithLabels) => void;
+  onAddTask?: (status: TaskStatus) => void;
+  onDeleteTask?: (taskId: string) => void;
+  onTogglePin?: (taskId: string) => void;
+  onContextMenuStatusChange?: (taskId: string, status: TaskStatus) => void;
+  onContextMenuLaunch?: (taskId: string) => void;
+  workspaceId?: string;
+}
+
+export function KanbanBoard({
+  initialTasks,
+  onTaskMove,
+  onTaskClick,
+  onEditTask,
+  onAddTask,
+  onDeleteTask,
+  onTogglePin,
+  onContextMenuStatusChange,
+  onContextMenuLaunch,
+  workspaceId,
+}: KanbanBoardProps) {
+  // Local tasks state for optimistic drag updates
+  const [tasks, setTasks] = useState<TaskWithLabels[]>(initialTasks);
+  const [activeTask, setActiveTask] = useState<TaskWithLabels | null>(null);
+  const [contextMenu, setContextMenu] = useState<{
+    task: TaskWithLabels;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Sync with server data when props change
+  useEffect(() => {
+    setTasks(initialTasks);
+  }, [initialTasks]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    })
+  );
+
+  const handleContextMenu = useCallback((task: TaskWithLabels, x: number, y: number) => {
+    setContextMenu({ task, x, y });
+  }, []);
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const task = tasks.find((t) => t.id === event.active.id);
+      if (task) setActiveTask(task);
+    },
+    [tasks]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      setActiveTask(null);
+
+      if (!over) return;
+
+      const activeId = active.id as string;
+      const overId = over.id as string;
+
+      // Determine target column
+      const isOverColumn = BOARD_COLUMNS.some((col) => col.id === overId);
+      let targetStatus: TaskStatus | undefined;
+
+      if (isOverColumn) {
+        targetStatus = overId as TaskStatus;
+      } else {
+        // Dropped on another task — use that task's column
+        const overTask = tasks.find((t) => t.id === overId);
+        targetStatus = overTask?.status;
+      }
+
+      if (targetStatus) {
+        // Optimistic update
+        setTasks((prev) =>
+          prev.map((t) =>
+            t.id === activeId ? { ...t, status: targetStatus! } : t
+          )
+        );
+        // Persist to server
+        onTaskMove?.(activeId, targetStatus);
+      }
+    },
+    [tasks, onTaskMove]
+  );
+
+  return (
+    <DndContext
+      id="kanban-board"
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="mx-2 flex h-full overflow-x-auto rounded-xl border border-border bg-card/50">
+        {BOARD_COLUMNS.map((column) => (
+          <BoardColumn
+            key={column.id}
+            id={column.id}
+            label={column.label}
+            color={column.color}
+            tasks={tasks.filter((t) => t.status === column.id)}
+            onTaskClick={onTaskClick}
+            onEditTask={onEditTask}
+            onAddTask={() => onAddTask?.(column.id)}
+            onDeleteTask={onDeleteTask}
+            onTogglePin={onTogglePin}
+            onContextMenu={handleContextMenu}
+          />
+        ))}
+      </div>
+
+      <DragOverlay>
+        {activeTask ? (
+          <div className="rotate-3 scale-105">
+            <TaskCard task={activeTask} />
+          </div>
+        ) : null}
+      </DragOverlay>
+
+      {contextMenu && (
+        <TaskCardContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          taskId={contextMenu.task.id}
+          currentStatus={contextMenu.task.status}
+          hasExecutions={((contextMenu.task as any)._count?.executions ?? 0) > 0}
+          workspaceId={workspaceId ?? ""}
+          onClose={() => setContextMenu(null)}
+          onStatusChange={(taskId, status) => {
+            onContextMenuStatusChange?.(taskId, status);
+            setContextMenu(null);
+          }}
+          onLaunch={(taskId) => {
+            onContextMenuLaunch?.(taskId);
+            setContextMenu(null);
+          }}
+        />
+      )}
+    </DndContext>
+  );
+}

package/src/components/board/project-tabs.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface ProjectTabsProps {
+  projects: Array<{ id: string; name: string; alias: string | null }>;
+  activeProjectId: string;
+  onSelect: (projectId: string) => void;
+}
+
+export function ProjectTabs({ projects, activeProjectId, onSelect }: ProjectTabsProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(false);
+
+  const checkOverflow = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setShowLeftArrow(el.scrollLeft > 0);
+    setShowRightArrow(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+  };
+
+  useEffect(() => {
+    checkOverflow();
+    const el = scrollRef.current;
+    if (el) {
+      el.addEventListener("scroll", checkOverflow);
+      const observer = new ResizeObserver(checkOverflow);
+      observer.observe(el);
+      return () => {
+        el.removeEventListener("scroll", checkOverflow);
+        observer.disconnect();
+      };
+    }
+  }, [projects]);
+
+  const scroll = (direction: "left" | "right") => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({ left: direction === "left" ? -150 : 150, behavior: "smooth" });
+  };
+
+  return (
+    <div className="relative flex items-center">
+      {showLeftArrow && (
+        <button
+          onClick={() => scroll("left")}
+          className="absolute left-0 z-10 flex h-8 w-8 items-center justify-center rounded-md bg-background/90 text-muted-foreground shadow-sm ring-1 ring-border backdrop-blur-sm transition-colors hover:text-foreground"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+      )}
+
+      <div
+        ref={scrollRef}
+        className="flex items-center gap-1.5 overflow-x-auto scrollbar-none px-1 py-1"
+        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+      >
+        {projects.map((p) => {
+          const isActive = activeProjectId === p.id;
+          return (
+            <button
+              key={p.id}
+              onClick={() => { if (!isActive) onSelect(p.id); }}
+              className={`shrink-0 rounded-lg border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
+                isActive
+                  ? "border-primary bg-primary/10 text-primary ring-1 ring-primary/20 cursor-default"
+                  : "border-transparent text-muted-foreground hover:bg-accent hover:text-foreground cursor-pointer"
+              }`}
+            >
+              <span>{p.name}</span>
+              {p.alias && (
+                <span className="ml-1.5 text-xs text-muted-foreground font-normal">
+                  {p.alias}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {showRightArrow && (
+        <button
+          onClick={() => scroll("right")}
+          className="absolute right-0 z-10 flex h-8 w-8 items-center justify-center rounded-md bg-background/90 text-muted-foreground shadow-sm ring-1 ring-border backdrop-blur-sm transition-colors hover:text-foreground"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/board/task-card-context-menu.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useRouter } from "next/navigation";
+import { Check } from "lucide-react";
+import type { TaskStatus } from "@prisma/client";
+import { useI18n } from "@/lib/i18n";
+import { BOARD_COLUMNS } from "@/lib/constants";
+
+interface TaskCardContextMenuProps {
+  x: number;
+  y: number;
+  taskId: string;
+  currentStatus: TaskStatus;
+  hasExecutions: boolean;
+  workspaceId: string;
+  onClose: () => void;
+  onStatusChange: (taskId: string, status: TaskStatus) => void;
+  onLaunch: (taskId: string) => void;
+}
+
+export function TaskCardContextMenu({
+  x,
+  y,
+  taskId,
+  currentStatus,
+  hasExecutions,
+  workspaceId,
+  onClose,
+  onStatusChange,
+  onLaunch,
+}: TaskCardContextMenuProps) {
+  const { t } = useI18n();
+  const router = useRouter();
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+
+  const itemClass =
+    "flex items-center px-3 py-1.5 text-xs cursor-pointer hover:bg-accent rounded-sm w-full text-left";
+
+  const menu = (
+    <div
+      ref={menuRef}
+      style={{ position: "fixed", top: y, left: x, zIndex: 9999 }}
+      className="bg-popover border border-border rounded-md shadow-md py-1 min-w-[180px]"
+    >
+      <div className="px-3 py-1 text-[10px] text-muted-foreground uppercase tracking-wider">
+        {t("board.contextMenu.changeStatus")}
+      </div>
+      {BOARD_COLUMNS.map((col) => (
+        <button
+          key={col.id}
+          type="button"
+          className={itemClass}
+          onClick={() => {
+            onStatusChange(taskId, col.id);
+            onClose();
+          }}
+        >
+          {currentStatus === col.id ? (
+            <Check className="h-3 w-3 mr-2 flex-shrink-0" />
+          ) : (
+            <span className="w-5 flex-shrink-0" />
+          )}
+          {col.label}
+        </button>
+      ))}
+      <hr className="my-1 border-border" />
+      <button
+        type="button"
+        className={`${itemClass} ${hasExecutions ? "opacity-50 cursor-not-allowed" : ""}`}
+        disabled={hasExecutions}
+        onClick={() => {
+          if (!hasExecutions) {
+            onLaunch(taskId);
+            onClose();
+          }
+        }}
+      >
+        {t("board.contextMenu.launch")}
+      </button>
+      {currentStatus !== "DONE" && currentStatus !== "CANCELLED" && (
+        <>
+          <hr className="my-1 border-border" />
+          <button
+            type="button"
+            className={itemClass}
+            onClick={() => {
+              router.push(`/workspaces/${workspaceId}/tasks/${taskId}`);
+              onClose();
+            }}
+          >
+            {t("board.contextMenu.goToDetail")}
+          </button>
+        </>
+      )}
+    </div>
+  );
+
+  if (typeof document === "undefined") return null;
+  return createPortal(menu, document.body);
+}

package/src/components/board/task-card.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { MoreHorizontal, Pencil, Trash2, Pin } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { PRIORITY_CONFIG } from "@/lib/constants";
+import { useI18n } from "@/lib/i18n";
+import type { TaskWithLabels } from "@/types";
+
+interface TaskCardProps {
+  task: TaskWithLabels;
+  onClick?: () => void;
+  onEdit?: (task: TaskWithLabels) => void;
+  onDelete?: (taskId: string) => void;
+  onTogglePin?: (taskId: string) => void;
+  onContextMenu?: (task: TaskWithLabels, x: number, y: number) => void;
+}
+
+export function TaskCard({ task, onClick, onEdit, onDelete, onTogglePin, onContextMenu }: TaskCardProps) {
+  const { t } = useI18n();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: task.id, data: { type: "task", task } });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+  };
+
+  const priorityConfig = PRIORITY_CONFIG[task.priority];
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className="group cursor-grab rounded-lg border border-border bg-card p-3 transition-all hover:border-primary/20 hover:bg-accent/50 active:cursor-grabbing"
+      onClick={onClick}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu?.(task, e.clientX, e.clientY);
+      }}
+      data-testid="task-card"
+    >
+      <div className="flex items-start justify-between">
+        <h4 className="text-sm font-medium text-foreground">{task.title}</h4>
+        <div className="flex items-center gap-0.5 shrink-0">
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            className={`transition-all ${
+              task.pinned
+                ? "text-primary opacity-100"
+                : "text-muted-foreground opacity-0 group-hover:opacity-100"
+            }`}
+            onClick={(e) => { e.stopPropagation(); onTogglePin?.(task.id); }}
+            aria-label={task.pinned ? t("board.unpin") : t("board.pin")}
+          >
+            <Pin className={`h-3.5 w-3.5 ${task.pinned ? "-rotate-45" : ""}`} />
+          </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <button
+                className="rounded-md p-0.5 text-muted-foreground opacity-0 transition-all hover:bg-background hover:text-foreground group-hover:opacity-100"
+                onClick={(e) => e.stopPropagation()}
+              />
+            }
+          >
+            <MoreHorizontal className="h-4 w-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onEdit?.(task); }}>
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              {t("common.edit")}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="text-rose-400"
+              onClick={(e) => { e.stopPropagation(); onDelete?.(task.id); }}
+            >
+              <Trash2 className="mr-2 h-3.5 w-3.5" />
+              {t("common.delete")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        </div>
+      </div>
+
+      {task.description && (
+        <p className="mt-1.5 line-clamp-3 text-xs leading-relaxed text-muted-foreground">
+          {task.description}
+        </p>
+      )}
+
+      <div className="mt-2.5">
+        <Badge variant="secondary" className={`text-[10px] font-semibold ${priorityConfig.color}`}>
+          {priorityConfig.label}
+        </Badge>
+      </div>
+
+      {task.labels && task.labels.length > 0 && (
+        <div className="mt-1.5 flex flex-wrap gap-1">
+          {task.labels.map((tl) => (
+            <span
+              key={tl.label.id}
+              className="rounded-full px-1.5 py-0.5 text-[10px] font-medium"
+              style={{
+                backgroundColor: tl.label.color + "20",
+                color: tl.label.color,
+              }}
+            >
+              {tl.label.name}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/layout/__tests__/top-bar-username.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { getInitials } from "../top-bar";
+
+describe("getInitials", () => {
+  it("returns single initial for a single name", () => {
+    expect(getInitials("Alice")).toBe("A");
+  });
+
+  it("returns two initials for a full name", () => {
+    expect(getInitials("Alice Bob")).toBe("AB");
+  });
+
+  it("limits to max 2 chars for a three-word name", () => {
+    expect(getInitials("Alice Bob Charlie")).toBe("AB");
+  });
+
+  it("returns empty string for empty input", () => {
+    expect(getInitials("")).toBe("");
+  });
+
+  it("trims whitespace and returns initials", () => {
+    expect(getInitials("  spaced  name  ")).toBe("SN");
+  });
+});