@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/tu-do/shared/task-edit-dialog/relationships/components/clickable-task-item.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { ExternalLink, Loader2, X } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import { formatRelationshipTaskIdentifier } from '../../../relationship-task-identifier';
+import type { ClickableTaskItemProps } from '../types/task-relationships.types';
+
+export function ClickableTaskItem({
+  task,
+  onNavigateToTask,
+  onRemove,
+  isSaving,
+  isRemoving,
+  showRemove = true,
+  disabled = false,
+}: ClickableTaskItemProps) {
+  const taskIdentifier = formatRelationshipTaskIdentifier(task);
+
+  return (
+    <div className="group flex items-center justify-between gap-3 rounded-xl border border-border/70 bg-linear-to-r from-background via-background to-muted/20 p-3 transition-all hover:border-border hover:shadow-sm">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => onNavigateToTask(task.id)}
+              className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 text-left"
+            >
+              <div
+                className={cn(
+                  'h-2.5 w-2.5 shrink-0 rounded-full ring-4 ring-background',
+                  task.completed ? 'bg-dynamic-green' : 'bg-muted-foreground/30'
+                )}
+              />
+              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <span
+                  className={cn(
+                    'truncate font-medium text-sm transition-colors group-hover:text-primary',
+                    task.completed && 'text-muted-foreground line-through'
+                  )}
+                >
+                  {task.name}
+                </span>
+                <div className="flex flex-wrap items-center gap-1.5 text-muted-foreground text-xs">
+                  {taskIdentifier && (
+                    <span className="w-fit rounded-full border border-border/70 bg-muted/35 px-1.5 py-0.5 font-mono text-[10px] uppercase leading-none">
+                      {taskIdentifier}
+                    </span>
+                  )}
+                  {task.board_name && (
+                    <span className="truncate">{task.board_name}</span>
+                  )}
+                </div>
+              </div>
+              <ExternalLink className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70 opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            <p>Click to open this task</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      {showRemove && onRemove && !disabled && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          disabled={isSaving}
+        >
+          {isRemoving ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <X className="h-3.5 w-3.5" />
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/relationships/components/index.ts

@@ -0,0 +1,4 @@
+export { ClickableTaskItem } from './clickable-task-item';
+export { SubtaskActionButtons } from './subtask-action-buttons';
+export { TabButton } from './tab-button';
+export { TaskRelationshipActionButtons } from './task-relationship-action-buttons';

package/src/components/ui/tu-do/shared/task-edit-dialog/relationships/components/subtask-action-buttons.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { ChevronDown, Plus, Sparkles } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import * as React from 'react';
+import {
+  TaskSearchPopover,
+  TaskSearchPopoverContent,
+} from '../task-search-popover';
+import type { SubtaskActionButtonsProps } from '../types/task-relationships.types';
+
+export function SubtaskActionButtons({
+  wsId,
+  excludeIds,
+  searchOpen,
+  onSearchOpenChange,
+  onAddSubtask,
+  onAddExistingAsSubtask,
+  isSaving,
+  disabled = false,
+}: SubtaskActionButtonsProps) {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const hasBothOptions = onAddSubtask && onAddExistingAsSubtask;
+
+  if (hasBothOptions) {
+    // Dropdown menu with both options + popover content (no separate trigger)
+    return (
+      <Popover open={searchOpen} onOpenChange={onSearchOpenChange} modal>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              className="h-11 w-full justify-between rounded-2xl border-border/70 border-dashed bg-muted/10 px-3 text-muted-foreground hover:border-border hover:bg-muted/20 hover:text-foreground"
+              disabled={isSaving || disabled}
+            >
+              <div className="flex items-center gap-2">
+                <span className="flex h-7 w-7 items-center justify-center rounded-full bg-dynamic-purple/10 text-dynamic-purple">
+                  <Sparkles className="h-4 w-4" />
+                </span>
+                <span className="font-medium">Add sub-task</span>
+              </div>
+              <ChevronDown className="h-4 w-4 opacity-50" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            className="w-72 rounded-2xl border-border/70 p-1.5"
+          >
+            <DropdownMenuItem
+              onClick={onAddSubtask}
+              disabled={isSaving || disabled}
+              className="cursor-pointer rounded-xl px-3 py-2.5"
+            >
+              <Sparkles className="mr-2 h-4 w-4 text-dynamic-purple" />
+              <span>Create new sub-task</span>
+            </DropdownMenuItem>
+            <PopoverTrigger asChild>
+              <DropdownMenuItem
+                disabled={isSaving || disabled}
+                className="cursor-pointer rounded-xl px-3 py-2.5"
+                onSelect={(e) => e.preventDefault()}
+              >
+                <Plus className="mr-2 h-4 w-4 text-dynamic-green" />
+                <span>Add existing task</span>
+              </DropdownMenuItem>
+            </PopoverTrigger>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* Popover content without trigger button */}
+        <PopoverContent
+          className="z-9999 w-(--radix-popover-trigger-width) p-0"
+          align="start"
+          sideOffset={4}
+        >
+          <TaskSearchPopoverContent
+            wsId={wsId}
+            excludeTaskIds={excludeIds}
+            open={searchOpen}
+            onOpenChange={onSearchOpenChange}
+            onSelect={async (task) => {
+              await onAddExistingAsSubtask(task);
+              onSearchOpenChange(false);
+            }}
+            emptyText="No available tasks"
+            isSaving={isSaving}
+            searchQuery={searchQuery}
+            onSearchQueryChange={setSearchQuery}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // Single option - Create new
+  if (onAddSubtask) {
+    return (
+      <Button
+        variant="outline"
+        className="h-11 w-full justify-start gap-3 rounded-2xl border-border/70 border-dashed bg-muted/10 px-3 text-muted-foreground hover:border-border hover:bg-muted/20 hover:text-foreground"
+        onClick={onAddSubtask}
+        disabled={isSaving || disabled}
+      >
+        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-dynamic-purple/10 text-dynamic-purple">
+          <Sparkles className="h-4 w-4" />
+        </span>
+        <span className="font-medium">Create new sub-task</span>
+      </Button>
+    );
+  }
+
+  // Single option - Add existing
+  if (onAddExistingAsSubtask) {
+    return (
+      <TaskSearchPopover
+        wsId={wsId}
+        excludeTaskIds={excludeIds}
+        open={searchOpen}
+        onOpenChange={onSearchOpenChange}
+        onSelect={async (task) => {
+          await onAddExistingAsSubtask(task);
+          onSearchOpenChange(false);
+        }}
+        placeholder="Add existing task as sub-task..."
+        emptyText="No available tasks"
+        isSaving={isSaving}
+        disabled={disabled}
+      />
+    );
+  }
+
+  return null;
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/relationships/components/tab-button.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import type {
+  TabButtonProps,
+  TabColorVariant,
+} from '../types/task-relationships.types';
+
+const colorClasses: Record<
+  TabColorVariant,
+  { active: string; inactive: string; badge: string }
+> = {
+  purple: {
+    active:
+      'border-dynamic-purple/40 bg-dynamic-purple/10 text-dynamic-purple shadow-sm',
+    inactive:
+      'border-border/60 bg-background/60 text-muted-foreground hover:border-dynamic-purple/25 hover:text-foreground',
+    badge: 'bg-dynamic-purple/12 text-dynamic-purple',
+  },
+  green: {
+    active:
+      'border-dynamic-green/40 bg-dynamic-green/10 text-dynamic-green shadow-sm',
+    inactive:
+      'border-border/60 bg-background/60 text-muted-foreground hover:border-dynamic-green/25 hover:text-foreground',
+    badge: 'bg-dynamic-green/12 text-dynamic-green',
+  },
+  red: {
+    active:
+      'border-dynamic-red/40 bg-dynamic-red/10 text-dynamic-red shadow-sm',
+    inactive:
+      'border-border/60 bg-background/60 text-muted-foreground hover:border-dynamic-red/25 hover:text-foreground',
+    badge: 'bg-dynamic-red/12 text-dynamic-red',
+  },
+  blue: {
+    active:
+      'border-dynamic-blue/40 bg-dynamic-blue/10 text-dynamic-blue shadow-sm',
+    inactive:
+      'border-border/60 bg-background/60 text-muted-foreground hover:border-dynamic-blue/25 hover:text-foreground',
+    badge: 'bg-dynamic-blue/12 text-dynamic-blue',
+  },
+};
+
+export function TabButton({
+  active,
+  onClick,
+  icon,
+  label,
+  count,
+  color,
+}: TabButtonProps) {
+  const colors = colorClasses[color];
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex items-center gap-1.5 rounded-full border px-3 py-2 font-medium text-xs transition-all',
+        active ? colors.active : colors.inactive
+      )}
+    >
+      {icon}
+      {label}
+      {count > 0 && (
+        <span
+          className={cn(
+            'rounded-full px-1.5 py-0.5 text-[10px] leading-none',
+            active ? colors.badge : 'bg-muted text-muted-foreground'
+          )}
+        >
+          {count}
+        </span>
+      )}
+    </button>
+  );
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/relationships/components/task-relationship-action-buttons.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { ChevronDown, Plus, Sparkles } from '@tuturuuu/icons';
+import type { RelatedTaskInfo } from '@tuturuuu/types/primitives/TaskRelationship';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import * as React from 'react';
+import { TaskSearchPopoverContent } from '../task-search-popover';
+
+export interface TaskRelationshipActionButtonsProps {
+  wsId: string;
+  excludeIds: string[];
+  searchOpen: boolean;
+  onSearchOpenChange: (open: boolean) => void;
+  onAddExisting?: (task: RelatedTaskInfo) => void | Promise<void>;
+  onCreateNew?: () => void; // Opens dialog flow, like onAddSubtask
+  isSaving: boolean;
+  buttonLabel: string;
+  createNewLabel: string;
+  addExistingLabel: string;
+  emptyText?: string;
+  disabled?: boolean;
+}
+
+export function TaskRelationshipActionButtons({
+  wsId,
+  excludeIds,
+  searchOpen,
+  onSearchOpenChange,
+  onAddExisting,
+  onCreateNew,
+  isSaving,
+  buttonLabel,
+  createNewLabel,
+  addExistingLabel,
+  emptyText = 'No available tasks',
+  disabled = false,
+}: TaskRelationshipActionButtonsProps) {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const hasBothOptions = onCreateNew && onAddExisting;
+
+  if (hasBothOptions) {
+    // Dropdown menu with both options (like SubtaskActionButtons)
+    return (
+      <Popover open={searchOpen} onOpenChange={onSearchOpenChange} modal>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              className="h-11 w-full justify-between rounded-2xl border-border/70 border-dashed bg-muted/10 px-3 text-muted-foreground hover:border-border hover:bg-muted/20 hover:text-foreground"
+              disabled={isSaving || disabled}
+            >
+              <div className="flex items-center gap-2">
+                <span className="flex h-7 w-7 items-center justify-center rounded-full bg-dynamic-purple/10 text-dynamic-purple">
+                  <Sparkles className="h-4 w-4" />
+                </span>
+                <span className="font-medium">{buttonLabel}</span>
+              </div>
+              <ChevronDown className="h-4 w-4 opacity-50" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            className="w-72 rounded-2xl border-border/70 p-1.5"
+          >
+            {/* Create new - opens dialog */}
+            <DropdownMenuItem
+              onClick={onCreateNew}
+              disabled={isSaving || disabled}
+              className="cursor-pointer rounded-xl px-3 py-2.5"
+            >
+              <Sparkles className="mr-2 h-4 w-4 text-dynamic-purple" />
+              <span>{createNewLabel}</span>
+            </DropdownMenuItem>
+            {/* Add existing - opens search popover */}
+            <PopoverTrigger asChild>
+              <DropdownMenuItem
+                disabled={isSaving || disabled}
+                className="cursor-pointer rounded-xl px-3 py-2.5"
+                onSelect={(e) => e.preventDefault()}
+              >
+                <Plus className="mr-2 h-4 w-4 text-dynamic-green" />
+                <span>{addExistingLabel}</span>
+              </DropdownMenuItem>
+            </PopoverTrigger>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* Popover content for adding existing task */}
+        <PopoverContent
+          className="z-9999 w-(--radix-popover-trigger-width) p-0"
+          align="start"
+          sideOffset={4}
+        >
+          <TaskSearchPopoverContent
+            wsId={wsId}
+            excludeTaskIds={excludeIds}
+            open={searchOpen}
+            onOpenChange={onSearchOpenChange}
+            onSelect={async (task) => {
+              await onAddExisting(task);
+              onSearchOpenChange(false);
+            }}
+            emptyText={emptyText}
+            isSaving={isSaving}
+            searchQuery={searchQuery}
+            onSearchQueryChange={setSearchQuery}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // Single option - Create new (opens dialog)
+  if (onCreateNew && !onAddExisting) {
+    return (
+      <Button
+        variant="outline"
+        className="h-11 w-full justify-start gap-3 rounded-2xl border-border/70 border-dashed bg-muted/10 px-3 text-muted-foreground hover:border-border hover:bg-muted/20 hover:text-foreground"
+        onClick={onCreateNew}
+        disabled={isSaving || disabled}
+      >
+        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-dynamic-purple/10 text-dynamic-purple">
+          <Sparkles className="h-4 w-4" />
+        </span>
+        <span className="font-medium">{createNewLabel}</span>
+      </Button>
+    );
+  }
+
+  // Single option - Add existing (opens search popover)
+  if (onAddExisting && !onCreateNew) {
+    return (
+      <Popover open={searchOpen} onOpenChange={onSearchOpenChange} modal>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className="h-11 w-full justify-start gap-3 rounded-2xl border-border/70 border-dashed bg-muted/10 px-3 text-muted-foreground hover:border-border hover:bg-muted/20 hover:text-foreground"
+            disabled={isSaving || disabled}
+          >
+            <span className="flex h-7 w-7 items-center justify-center rounded-full bg-dynamic-green/10 text-dynamic-green">
+              <Plus className="h-4 w-4" />
+            </span>
+            <span className="font-medium">{addExistingLabel}</span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="z-9999 w-(--radix-popover-trigger-width) p-0"
+          align="start"
+          sideOffset={4}
+        >
+          <TaskSearchPopoverContent
+            wsId={wsId}
+            excludeTaskIds={excludeIds}
+            open={searchOpen}
+            onOpenChange={onSearchOpenChange}
+            onSelect={async (task) => {
+              await onAddExisting(task);
+              onSearchOpenChange(false);
+            }}
+            emptyText={emptyText}
+            isSaving={isSaving}
+            searchQuery={searchQuery}
+            onSearchQueryChange={setSearchQuery}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return null;
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/relationships/dependencies-section.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { Button } from '@tuturuuu/ui/button';
+import { ScrollArea } from '@tuturuuu/ui/scroll-area';
+import * as React from 'react';
+import { ClickableTaskItem } from './components/clickable-task-item';
+import { TaskRelationshipActionButtons } from './components/task-relationship-action-buttons';
+import type {
+  DependenciesSectionProps,
+  DependencySubTab,
+} from './types/task-relationships.types';
+
+export function DependenciesSection({
+  wsId,
+  taskId,
+  initialSubTab = 'blocks',
+  blockingTasks,
+  blockedByTasks,
+  isSaving,
+  savingTaskId,
+  onAddBlocking,
+  onRemoveBlocking,
+  onAddBlockedBy,
+  onRemoveBlockedBy,
+  onNavigateToTask,
+  onAddBlockingTaskDialog,
+  onAddBlockedByTaskDialog,
+  disabled,
+}: DependenciesSectionProps) {
+  const [subTab, setSubTab] = React.useState<DependencySubTab>(initialSubTab);
+  const [searchOpen, setSearchOpen] = React.useState(false);
+
+  const allExcludeIds = React.useMemo(() => {
+    const ids = new Set<string>();
+    if (taskId) ids.add(taskId);
+    for (const t of blockingTasks) {
+      ids.add(t.id);
+    }
+    for (const t of blockedByTasks) {
+      ids.add(t.id);
+    }
+    return Array.from(ids);
+  }, [taskId, blockingTasks, blockedByTasks]);
+
+  const currentList = subTab === 'blocks' ? blockingTasks : blockedByTasks;
+  const handleAdd = subTab === 'blocks' ? onAddBlocking : onAddBlockedBy;
+  const handleRemove =
+    subTab === 'blocks' ? onRemoveBlocking : onRemoveBlockedBy;
+  const handleCreateNew =
+    subTab === 'blocks' ? onAddBlockingTaskDialog : onAddBlockedByTaskDialog;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Sub-tab navigation */}
+      <div className="flex shrink-0 gap-2">
+        <Button
+          variant={subTab === 'blocks' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setSubTab('blocks')}
+          className="h-7 text-xs"
+        >
+          Blocks ({blockingTasks.length})
+        </Button>
+        <Button
+          variant={subTab === 'blocked-by' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setSubTab('blocked-by')}
+          className="h-7 text-xs"
+        >
+          Blocked By ({blockedByTasks.length})
+        </Button>
+      </div>
+
+      {/* Task list */}
+      {currentList.length > 0 && (
+        <ScrollArea className="h-[150px]">
+          <div className="space-y-1 pr-2">
+            {currentList.map((task) => (
+              <ClickableTaskItem
+                key={task.id}
+                task={task}
+                onNavigateToTask={onNavigateToTask}
+                onRemove={() => handleRemove(task.id)}
+                isSaving={isSaving}
+                isRemoving={isSaving && savingTaskId === task.id}
+                disabled={disabled}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+
+      {/* Add task with dropdown */}
+      <TaskRelationshipActionButtons
+        wsId={wsId}
+        excludeIds={allExcludeIds}
+        searchOpen={searchOpen}
+        onSearchOpenChange={setSearchOpen}
+        onAddExisting={(task) => {
+          handleAdd(task);
+          setSearchOpen(false);
+        }}
+        onCreateNew={handleCreateNew}
+        isSaving={isSaving}
+        buttonLabel={
+          subTab === 'blocks' ? 'Add task this blocks' : 'Add blocking task'
+        }
+        createNewLabel={
+          subTab === 'blocks'
+            ? 'Create new task this blocks'
+            : 'Create new blocking task'
+        }
+        addExistingLabel={
+          subTab === 'blocks'
+            ? 'Add existing task this blocks'
+            : 'Add existing blocking task'
+        }
+        emptyText="No available tasks"
+        disabled={disabled}
+      />
+
+      <p className="text-muted-foreground text-xs">
+        {subTab === 'blocks'
+          ? 'Tasks that cannot start until this one is complete.'
+          : 'Tasks that must complete before this one can start.'}
+      </p>
+    </div>
+  );
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/relationships/index.ts

@@ -0,0 +1,35 @@
+// Components
+export {
+  ClickableTaskItem,
+  SubtaskActionButtons,
+  TabButton,
+} from './components';
+
+// Section components
+export { DependenciesSection } from './dependencies-section';
+export { ParentSection } from './parent-section';
+export { RelatedSection } from './related-section';
+export { SubtasksSection } from './subtasks-section';
+
+// Search popover
+export {
+  TaskSearchPopover,
+  TaskSearchPopoverContent,
+} from './task-search-popover';
+
+// Types
+export type {
+  ClickableTaskItemProps,
+  DependenciesSectionProps,
+  DependencySubTab,
+  ParentSectionProps,
+  RelatedSectionProps,
+  RelationshipTab,
+  SubtaskActionButtonsProps,
+  SubtasksSectionProps,
+  TabButtonProps,
+  TabColorVariant,
+  TaskRelationshipsPropertiesProps,
+  TaskSearchPopoverContentProps,
+  TaskSearchPopoverProps,
+} from './types/task-relationships.types';