@tuturuuu/ui 0.0.4 → 0.1.0

package/src/components/ui/tu-do/my-tasks/command-bar.tsx

@@ -0,0 +1,1351 @@
+'use client';
+
+import {
+  ArrowLeft,
+  Box,
+  Calendar,
+  Check,
+  ChevronRight,
+  Flag,
+  MapPin,
+  Plus,
+  Search,
+  Settings,
+  Sparkles,
+  Tag,
+  Timer,
+  UserMinus,
+  UserPlus,
+  UserStar,
+  X,
+} from '@tuturuuu/icons';
+import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
+import { Button } from '@tuturuuu/ui/button';
+import { useUserConfig } from '@tuturuuu/ui/hooks/use-user-config';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import { ScrollArea } from '@tuturuuu/ui/scroll-area';
+import { Separator } from '@tuturuuu/ui/separator';
+import { Switch } from '@tuturuuu/ui/switch';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@tuturuuu/ui/tooltip';
+import {
+  buildEstimationIndices,
+  type EstimationType,
+  mapEstimationPoints,
+} from '@tuturuuu/ui/tu-do/shared/estimation-mapping';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import type { KeyboardEvent } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+export interface TaskOptions {
+  priority?: 'critical' | 'high' | 'normal' | 'low' | null;
+  dueDate?: Date | null;
+  estimationPoints?: number | null;
+  labelIds?: string[];
+  projectIds?: string[];
+  assigneeIds?: string[];
+}
+
+interface WorkspaceLabel {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface WorkspaceProject {
+  id: string;
+  name: string;
+}
+
+interface WorkspaceMember {
+  id: string;
+  display_name?: string;
+  email?: string;
+  avatar_url?: string;
+}
+
+interface WorkspaceEstimationConfig {
+  estimation_type?: EstimationType;
+  extended_estimation?: boolean | null;
+  allow_zero_estimates?: boolean | null;
+}
+
+interface CommandBarProps {
+  onCreateTask: (title: string, options?: TaskOptions) => Promise<boolean>;
+  onGenerateAI: (entry: string) => Promise<boolean>;
+  onOpenBoardSelector: (title?: string, isAi?: boolean) => void;
+  selectedDestination: {
+    boardName?: string;
+    listName?: string;
+  } | null;
+  onClearDestination: () => void;
+  isLoading?: boolean;
+  aiGenerateDescriptions?: boolean;
+  aiGeneratePriority?: boolean;
+  aiGenerateLabels?: boolean;
+  onAiGenerateDescriptionsChange?: (value: boolean) => void;
+  onAiGeneratePriorityChange?: (value: boolean) => void;
+  onAiGenerateLabelsChange?: (value: boolean) => void;
+  autoAssignToMe?: boolean;
+  onAutoAssignToMeChange?: (value: boolean) => void;
+  workspaceLabels?: WorkspaceLabel[];
+  workspaceProjects?: WorkspaceProject[];
+  workspaceMembers?: WorkspaceMember[];
+  workspaceEstimationConfig?: WorkspaceEstimationConfig | null;
+  wsId?: string;
+  onCreateNewLabel?: () => void;
+  onCreateNewProject?: () => void;
+  value: string;
+  onValueChange: (value: string) => void;
+  aiCreditsExhausted?: boolean;
+  aiCreditsTooltip?: string;
+}
+
+export function CommandBar({
+  onCreateTask,
+  onGenerateAI,
+  onOpenBoardSelector,
+  selectedDestination,
+  onClearDestination,
+  isLoading = false,
+  aiGenerateDescriptions = true,
+  aiGeneratePriority = true,
+  aiGenerateLabels = true,
+  onAiGenerateDescriptionsChange,
+  onAiGeneratePriorityChange,
+  onAiGenerateLabelsChange,
+  autoAssignToMe = true,
+  onAutoAssignToMeChange,
+  workspaceLabels = [],
+  workspaceProjects = [],
+  workspaceMembers = [],
+  workspaceEstimationConfig = null,
+  onCreateNewLabel,
+  onCreateNewProject,
+  value,
+  onValueChange,
+  aiCreditsExhausted = false,
+  aiCreditsTooltip,
+}: CommandBarProps) {
+  const t = useTranslations('ws-tasks');
+  const [aiEnabled, setAiEnabled] = useState(true);
+  const effectiveAiEnabled = aiEnabled && !aiCreditsExhausted;
+
+  // Submit shortcut preference
+  const { data: submitShortcut } = useUserConfig(
+    'TASK_SUBMIT_SHORTCUT',
+    'enter'
+  );
+  const isMac =
+    typeof navigator !== 'undefined' &&
+    /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+  const shortcutHint =
+    submitShortcut === 'cmd_enter'
+      ? isMac
+        ? '⌘+Enter'
+        : 'Ctrl+Enter'
+      : 'Enter';
+
+  // Input history for undo functionality
+  const inputHistoryRef = useRef<string[]>([]);
+  const historyIndexRef = useRef<number>(-1);
+  const isUndoingRef = useRef(false);
+
+  // Track input changes for history
+  useEffect(() => {
+    if (isUndoingRef.current) {
+      isUndoingRef.current = false;
+      return;
+    }
+
+    // Only track non-empty values that are different from the last entry
+    if (
+      value.trim() &&
+      inputHistoryRef.current[inputHistoryRef.current.length - 1] !== value
+    ) {
+      inputHistoryRef.current.push(value);
+      historyIndexRef.current = inputHistoryRef.current.length - 1;
+    }
+  }, [value]);
+
+  // Handle undo (CMD/Ctrl+Z)
+  const handleUndo = () => {
+    if (inputHistoryRef.current.length === 0) return;
+
+    // If we're at the current position, save it and move back
+    if (historyIndexRef.current === inputHistoryRef.current.length - 1) {
+      historyIndexRef.current -= 1;
+    } else if (historyIndexRef.current > 0) {
+      historyIndexRef.current -= 1;
+    }
+
+    if (historyIndexRef.current >= 0) {
+      isUndoingRef.current = true;
+      onValueChange(inputHistoryRef.current[historyIndexRef.current] || '');
+    }
+  };
+
+  // Optional task fields
+  const [priority, setPriority] = useState<
+    'critical' | 'high' | 'normal' | 'low' | null
+  >(null);
+  const [dueDate, setDueDate] = useState<Date | null>(null);
+  const [estimationPoints, setEstimationPoints] = useState<number | null>(null);
+  const [selectedLabelIds, setSelectedLabelIds] = useState<string[]>([]);
+  const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
+  const [selectedAssigneeIds, setSelectedAssigneeIds] = useState<string[]>([]);
+
+  // Popover states
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [activeSettingsView, setActiveSettingsView] = useState<
+    | 'main'
+    | 'priority'
+    | 'dueDate'
+    | 'estimation'
+    | 'projects'
+    | 'labels'
+    | 'assignees'
+  >('main');
+  const [assigneeSearchQuery, setAssigneeSearchQuery] = useState('');
+
+  // Calculate available estimation indices based on board config
+  const availableEstimationIndices = useMemo(() => {
+    return buildEstimationIndices({
+      extended: workspaceEstimationConfig?.extended_estimation,
+      allowZero: workspaceEstimationConfig?.allow_zero_estimates,
+    });
+  }, [workspaceEstimationConfig]);
+
+  // Calculate dynamic heights for scrollable sections
+  // Each item is approximately 40px (py-2 = 8px top + 8px bottom + content ~24px)
+  const ITEM_HEIGHT = 39;
+  const MAX_VISIBLE_ITEMS = 7;
+
+  const projectsScrollHeight = useMemo(() => {
+    const itemCount = Math.min(workspaceProjects.length, MAX_VISIBLE_ITEMS);
+    return itemCount > 0 ? `${itemCount * ITEM_HEIGHT}px` : 'auto';
+  }, [workspaceProjects.length]);
+
+  const labelsScrollHeight = useMemo(() => {
+    const itemCount = Math.min(workspaceLabels.length, MAX_VISIBLE_ITEMS);
+    return itemCount > 0 ? `${itemCount * ITEM_HEIGHT}px` : 'auto';
+  }, [workspaceLabels.length]);
+
+  const hasDestination = Boolean(
+    selectedDestination?.boardName && selectedDestination?.listName
+  );
+  const canExecute = Boolean(value.trim());
+
+  const handleAction = async () => {
+    if (!value.trim()) return;
+
+    try {
+      // AI mode: generate immediately without requiring destination
+      if (effectiveAiEnabled) {
+        await onGenerateAI(value.trim());
+      } else if (!hasDestination) {
+        onOpenBoardSelector(value.trim(), false);
+        return;
+      } else {
+        // Pass optional task fields
+        const options: TaskOptions = {
+          priority,
+          dueDate,
+          estimationPoints,
+          labelIds: selectedLabelIds.length > 0 ? selectedLabelIds : undefined,
+          projectIds:
+            selectedProjectIds.length > 0 ? selectedProjectIds : undefined,
+          assigneeIds:
+            selectedAssigneeIds.length > 0 ? selectedAssigneeIds : undefined,
+        };
+        const success = await onCreateTask(value.trim(), options);
+        if (success) {
+          onValueChange('');
+        }
+      }
+      // Reset optional fields
+      setPriority(null);
+      setDueDate(null);
+      setEstimationPoints(null);
+      setSelectedLabelIds([]);
+      setSelectedProjectIds([]);
+      setSelectedAssigneeIds([]);
+    } catch (error) {
+      console.error('Command bar action error:', error);
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    // Handle CMD/Ctrl+Z for undo
+    if (event.key === 'z' && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      handleUndo();
+      return;
+    }
+
+    if (event.key !== 'Enter') return;
+
+    const isModifier = event.metaKey || event.ctrlKey;
+
+    // Cmd/Ctrl+Enter always submits regardless of setting
+    if (isModifier) {
+      event.preventDefault();
+      handleAction();
+      return;
+    }
+
+    // Plain Enter behaviour depends on the submit shortcut setting
+    if (submitShortcut === 'enter') {
+      event.preventDefault();
+      handleAction();
+    }
+    // When 'cmd_enter', plain Enter falls through to default textarea newline
+  };
+
+  const handleSettingsOpenChange = (open: boolean) => {
+    setSettingsOpen(open);
+    if (!open) {
+      // Reset to main view when closing
+      setTimeout(() => setActiveSettingsView('main'), 200);
+    }
+  };
+
+  return (
+    <div className="relative">
+      {/* Main Input Area */}
+      <div className="group relative rounded-xl border border-border/60 bg-background transition-all duration-200 focus-within:border-border focus-within:shadow-md">
+        {/* Scrollable Textarea Container */}
+        <div className="max-h-45 overflow-hidden overflow-y-auto px-3 pt-3 md:px-4 md:pt-4 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-foreground/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1.5">
+          {/* Inline Destination Selector */}
+          <div className="mb-2">
+            {hasDestination && selectedDestination ? (
+              <div
+                onClick={() => onOpenBoardSelector()}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onOpenBoardSelector();
+                  }
+                }}
+                className="group/dest inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-dynamic-blue/20 bg-dynamic-blue/5 px-2.5 py-1 text-dynamic-blue text-xs transition-all hover:bg-dynamic-blue/10"
+              >
+                <MapPin className="h-3 w-3 shrink-0" />
+                <span>
+                  {selectedDestination.boardName} /{' '}
+                  {selectedDestination.listName}
+                </span>
+                <button
+                  type="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onClearDestination();
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.stopPropagation();
+                      onClearDestination();
+                    }
+                  }}
+                  className="inline-flex w-0 items-center justify-center overflow-hidden rounded-sm opacity-0 transition-all hover:bg-dynamic-blue/20 group-hover/dest:ml-0.5 group-hover/dest:w-4 group-hover/dest:opacity-100"
+                >
+                  <X className="h-3 w-3 shrink-0" />
+                </button>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => onOpenBoardSelector()}
+                disabled={isLoading}
+                className="inline-flex items-center justify-center gap-1.5 rounded-lg border border-border border-dashed px-2.5 py-1 text-muted-foreground text-xs transition-all hover:border-primary/30 hover:bg-muted/50 hover:text-foreground"
+              >
+                <MapPin className="h-3 w-3 shrink-0" />
+                <span>{t('cmd_select_destination')}</span>
+              </button>
+            )}
+          </div>
+
+          <Textarea
+            id="my-tasks-command-bar-textarea"
+            value={value}
+            onChange={(e) => onValueChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={
+              effectiveAiEnabled
+                ? `${t('cmd_ai_placeholder')} (${shortcutHint})`
+                : `${t('cmd_task_placeholder')} (${shortcutHint})`
+            }
+            className="min-h-10 w-full resize-none border-0 bg-transparent p-0 text-sm leading-relaxed placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-0 md:min-h-12 md:text-base"
+            disabled={isLoading}
+          />
+        </div>
+
+        {/* Bottom Action Bar */}
+        <div className="flex flex-wrap items-center justify-between gap-2 px-3 py-2.5 sm:flex-nowrap md:px-4 md:py-3">
+          {/* Left Side: Settings + AI */}
+          <div className="flex items-center gap-1.5 sm:gap-2">
+            {/* Settings Button - AI settings when AI on, Task options when AI off */}
+            <Popover
+              open={settingsOpen}
+              onOpenChange={handleSettingsOpenChange}
+            >
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        disabled={isLoading}
+                        className={cn(
+                          'h-8 w-8 rounded-lg border border-border p-0 transition-colors hover:bg-muted md:h-9 md:w-9',
+                          !hasDestination && 'cursor-not-allowed opacity-50'
+                        )}
+                      >
+                        <Settings className="h-3.5 w-3.5 md:h-4 md:w-4" />
+                      </Button>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  {!hasDestination && (
+                    <TooltipContent>
+                      <p>{t('cmd_select_board_hint')}</p>
+                    </TooltipContent>
+                  )}
+                </Tooltip>
+              </TooltipProvider>
+              {hasDestination && (
+                <PopoverContent
+                  align="start"
+                  side="bottom"
+                  className="w-72 p-0"
+                  sideOffset={8}
+                >
+                  {effectiveAiEnabled ? (
+                    // AI Settings (unchanged)
+                    <div className="space-y-3 p-4">
+                      <div className="flex items-center gap-2 border-b pb-3">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+                          <Sparkles className="h-4 w-4 text-primary" />
+                        </div>
+                        <h4 className="font-semibold text-sm">
+                          {t('cmd_ai_configuration')}
+                        </h4>
+                      </div>
+                      <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-0.5">
+                            <Label
+                              htmlFor="ai-descriptions"
+                              className="font-medium text-sm"
+                            >
+                              {t('cmd_generate_descriptions')}
+                            </Label>
+                            <p className="text-muted-foreground text-xs">
+                              {t('cmd_add_detailed_context')}
+                            </p>
+                          </div>
+                          <Switch
+                            id="ai-descriptions"
+                            checked={aiGenerateDescriptions}
+                            onCheckedChange={onAiGenerateDescriptionsChange}
+                            disabled={isLoading}
+                          />
+                        </div>
+                        <Separator />
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-0.5">
+                            <Label
+                              htmlFor="ai-priority"
+                              className="font-medium text-sm"
+                            >
+                              {t('cmd_set_priority')}
+                            </Label>
+                            <p className="text-muted-foreground text-xs">
+                              {t('cmd_auto_assign_importance')}
+                            </p>
+                          </div>
+                          <Switch
+                            id="ai-priority"
+                            checked={aiGeneratePriority}
+                            onCheckedChange={onAiGeneratePriorityChange}
+                            disabled={isLoading}
+                          />
+                        </div>
+                        <Separator />
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-0.5">
+                            <Label
+                              htmlFor="ai-labels"
+                              className="font-medium text-sm"
+                            >
+                              {t('cmd_suggest_labels')}
+                            </Label>
+                            <p className="text-muted-foreground text-xs">
+                              {t('cmd_categorize_automatically')}
+                            </p>
+                          </div>
+                          <Switch
+                            id="ai-labels"
+                            checked={aiGenerateLabels}
+                            onCheckedChange={onAiGenerateLabelsChange}
+                            disabled={isLoading}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    // Task Options - Two-level navigation
+                    <div>
+                      {activeSettingsView === 'main' ? (
+                        // Main menu - List of options
+                        <div className="py-1">
+                          <div className="space-y-0.5 p-2">
+                            <button
+                              type="button"
+                              onClick={() => setActiveSettingsView('priority')}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Flag className="h-4 w-4 text-dynamic-orange" />
+                                <span>{t('cmd_priority')}</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                {priority && (
+                                  <span
+                                    className={cn(
+                                      'font-medium text-xs',
+                                      priority === 'critical' &&
+                                        'text-dynamic-red',
+                                      priority === 'high' &&
+                                        'text-dynamic-orange',
+                                      priority === 'normal' &&
+                                        'text-dynamic-blue',
+                                      priority === 'low' && 'text-dynamic-gray'
+                                    )}
+                                  >
+                                    {t(`cmd_priority_${priority}`)}
+                                  </span>
+                                )}
+                                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                              </div>
+                            </button>
+
+                            <button
+                              type="button"
+                              onClick={() => setActiveSettingsView('dueDate')}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Calendar className="h-4 w-4 text-dynamic-purple" />
+                                <span>{t('cmd_due_date')}</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                {dueDate && (
+                                  <span className="font-medium text-muted-foreground text-xs">
+                                    {dueDate.toLocaleDateString('en-US', {
+                                      month: 'short',
+                                      day: 'numeric',
+                                    })}
+                                  </span>
+                                )}
+                                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                              </div>
+                            </button>
+
+                            {workspaceEstimationConfig?.estimation_type &&
+                              availableEstimationIndices.length > 0 && (
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    setActiveSettingsView('estimation')
+                                  }
+                                  className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <Timer className="h-4 w-4 text-dynamic-purple" />
+                                    <span>{t('cmd_estimation')}</span>
+                                  </div>
+                                  <div className="flex items-center gap-2">
+                                    {estimationPoints !== null && (
+                                      <span className="font-medium text-muted-foreground text-xs">
+                                        {mapEstimationPoints(
+                                          estimationPoints,
+                                          workspaceEstimationConfig?.estimation_type
+                                        )}
+                                      </span>
+                                    )}
+                                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                                  </div>
+                                </button>
+                              )}
+
+                            {workspaceProjects.length > 0 && (
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  setActiveSettingsView('projects')
+                                }
+                                className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                              >
+                                <div className="flex items-center gap-2">
+                                  <Box className="h-4 w-4 text-dynamic-sky" />
+                                  <span>{t('cmd_projects')}</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  {selectedProjectIds.length > 0 && (
+                                    <span className="font-medium text-muted-foreground text-xs">
+                                      {selectedProjectIds.length}
+                                    </span>
+                                  )}
+                                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                                </div>
+                              </button>
+                            )}
+
+                            {workspaceLabels.length > 0 && (
+                              <button
+                                type="button"
+                                onClick={() => setActiveSettingsView('labels')}
+                                className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                              >
+                                <div className="flex items-center gap-2">
+                                  <Tag className="h-4 w-4 text-dynamic-cyan" />
+                                  <span>{t('cmd_labels')}</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  {selectedLabelIds.length > 0 && (
+                                    <span className="font-medium text-muted-foreground text-xs">
+                                      {selectedLabelIds.length}
+                                    </span>
+                                  )}
+                                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                                </div>
+                              </button>
+                            )}
+
+                            {workspaceMembers.length > 0 && (
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  setActiveSettingsView('assignees')
+                                }
+                                className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                              >
+                                <div className="flex items-center gap-2">
+                                  <UserStar className="h-4 w-4 text-dynamic-indigo" />
+                                  <span>{t('cmd_assignees')}</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                  {selectedAssigneeIds.length > 0 && (
+                                    <span className="font-medium text-muted-foreground text-xs">
+                                      {selectedAssigneeIds.length}
+                                    </span>
+                                  )}
+                                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                                </div>
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      ) : activeSettingsView === 'priority' ? (
+                        // Priority selection view
+                        <div>
+                          <div className="space-y-0.5 p-2">
+                            <button
+                              type="button"
+                              onClick={() => setActiveSettingsView('main')}
+                              className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <ArrowLeft className="h-4 w-4" />
+                              <span className="font-semibold">
+                                {t('cmd_select_priority')}
+                              </span>
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setPriority('critical');
+                                setActiveSettingsView('main');
+                              }}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Flag className="h-4 w-4 text-dynamic-red" />
+                                <span className="text-dynamic-red">
+                                  {t('cmd_priority_critical')}
+                                </span>
+                              </div>
+                              {priority === 'critical' && (
+                                <Check className="h-4 w-4 text-dynamic-red" />
+                              )}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setPriority('high');
+                                setActiveSettingsView('main');
+                              }}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Flag className="h-4 w-4 text-dynamic-orange" />
+                                <span className="text-dynamic-orange">
+                                  {t('cmd_priority_high')}
+                                </span>
+                              </div>
+                              {priority === 'high' && (
+                                <Check className="h-4 w-4 text-dynamic-orange" />
+                              )}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setPriority('normal');
+                                setActiveSettingsView('main');
+                              }}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Flag className="h-4 w-4 text-dynamic-blue" />
+                                <span className="text-dynamic-blue">
+                                  {t('cmd_priority_normal')}
+                                </span>
+                              </div>
+                              {priority === 'normal' && (
+                                <Check className="h-4 w-4 text-dynamic-blue" />
+                              )}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setPriority('low');
+                                setActiveSettingsView('main');
+                              }}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Flag className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-muted-foreground">
+                                  {t('cmd_priority_low')}
+                                </span>
+                              </div>
+                              {priority === 'low' && (
+                                <Check className="h-4 w-4 text-muted-foreground" />
+                              )}
+                            </button>
+                            {priority && (
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setPriority(null);
+                                  setActiveSettingsView('main');
+                                }}
+                                className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-muted-foreground text-sm transition-colors hover:bg-muted"
+                              >
+                                <X className="h-4 w-4" />
+                                <span>{t('cmd_clear')}</span>
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      ) : activeSettingsView === 'dueDate' ? (
+                        // Due Date selection view
+                        <div>
+                          <div className="space-y-0.5 p-2">
+                            <button
+                              type="button"
+                              onClick={() => setActiveSettingsView('main')}
+                              className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <ArrowLeft className="h-4 w-4" />
+                              <span className="font-semibold">
+                                {t('cmd_select_due_date')}
+                              </span>
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setDueDate(new Date());
+                                setActiveSettingsView('main');
+                              }}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Calendar className="h-4 w-4 text-dynamic-green" />
+                                <span>{t('cmd_today')}</span>
+                              </div>
+                              {dueDate?.toDateString() ===
+                                new Date().toDateString() && (
+                                <Check className="h-4 w-4" />
+                              )}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                const tomorrow = new Date();
+                                tomorrow.setDate(tomorrow.getDate() + 1);
+                                setDueDate(tomorrow);
+                                setActiveSettingsView('main');
+                              }}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Calendar className="h-4 w-4 text-dynamic-blue" />
+                                <span>{t('cmd_tomorrow')}</span>
+                              </div>
+                              {(() => {
+                                const tomorrow = new Date();
+                                tomorrow.setDate(tomorrow.getDate() + 1);
+                                return (
+                                  dueDate?.toDateString() ===
+                                    tomorrow.toDateString() && (
+                                    <Check className="h-4 w-4" />
+                                  )
+                                );
+                              })()}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                const nextWeek = new Date();
+                                nextWeek.setDate(nextWeek.getDate() + 7);
+                                setDueDate(nextWeek);
+                                setActiveSettingsView('main');
+                              }}
+                              className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Calendar className="h-4 w-4 text-dynamic-purple" />
+                                <span>{t('cmd_next_week')}</span>
+                              </div>
+                              {(() => {
+                                const nextWeek = new Date();
+                                nextWeek.setDate(nextWeek.getDate() + 7);
+                                return (
+                                  dueDate?.toDateString() ===
+                                    nextWeek.toDateString() && (
+                                    <Check className="h-4 w-4" />
+                                  )
+                                );
+                              })()}
+                            </button>
+                            {dueDate && (
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setDueDate(null);
+                                  setActiveSettingsView('main');
+                                }}
+                                className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-muted-foreground text-sm transition-colors hover:bg-muted"
+                              >
+                                <X className="h-4 w-4" />
+                                <span>{t('cmd_clear')}</span>
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      ) : activeSettingsView === 'estimation' ? (
+                        // Estimation selection view
+                        <div>
+                          <div className="space-y-0.5 p-2">
+                            <button
+                              type="button"
+                              onClick={() => setActiveSettingsView('main')}
+                              className="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm transition-colors hover:bg-muted"
+                            >
+                              <ArrowLeft className="h-4 w-4" />
+                              <span className="font-semibold">
+                                {t('cmd_select_estimation')}
+                              </span>
+                            </button>
+                            {availableEstimationIndices.map((index) => {
+                              const isExtended = index > 5;
+                              const isDisabled =
+                                isExtended &&
+                                !workspaceEstimationConfig?.extended_estimation;
+
+                              return (
+                                <button
+                                  key={index}
+                                  type="button"
+                                  onClick={() => {
+                                    if (!isDisabled) {
+                                      setEstimationPoints(index);
+                                      setActiveSettingsView('main');
+                                    }
+                                  }}
+                                  disabled={isDisabled}
+                                  className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+                                  title={
+                                    isDisabled ? t('cmd_upgrade_to_use') : ''
+                                  }
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <Timer className="h-4 w-4 text-muted-foreground" />
+                                    <span>
+                                      {mapEstimationPoints(
+                                        index,
+                                        workspaceEstimationConfig?.estimation_type
+                                      )}
+                                    </span>
+                                  </div>
+                                  {estimationPoints === index && (
+                                    <Check className="h-4 w-4" />
+                                  )}
+                                </button>
+                              );
+                            })}
+                            {estimationPoints !== null && (
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setEstimationPoints(null);
+                                  setActiveSettingsView('main');
+                                }}
+                                className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-muted-foreground text-sm transition-colors hover:bg-muted"
+                              >
+                                <X className="h-4 w-4" />
+                                <span>{t('cmd_clear')}</span>
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      ) : activeSettingsView === 'projects' ? (
+                        // Projects selection view
+                        <div className="space-y-0.5 p-2">
+                          <button
+                            type="button"
+                            onClick={() => setActiveSettingsView('main')}
+                            className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                          >
+                            <ArrowLeft className="h-4 w-4" />
+                            <span className="font-semibold">
+                              {t('cmd_select_projects')}
+                            </span>
+                          </button>
+                          <ScrollArea style={{ height: projectsScrollHeight }}>
+                            <div className="space-y-0.5">
+                              {workspaceProjects.map((project) => {
+                                const isSelected = selectedProjectIds.includes(
+                                  project.id
+                                );
+                                return (
+                                  <button
+                                    key={project.id}
+                                    type="button"
+                                    onClick={() => {
+                                      if (isSelected) {
+                                        setSelectedProjectIds(
+                                          selectedProjectIds.filter(
+                                            (id) => id !== project.id
+                                          )
+                                        );
+                                      } else {
+                                        setSelectedProjectIds([
+                                          ...selectedProjectIds,
+                                          project.id,
+                                        ]);
+                                      }
+                                    }}
+                                    className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                                  >
+                                    <div className="flex items-center gap-2">
+                                      <Box className="h-3.5 w-3.5 text-dynamic-sky" />
+                                      <span className="line-clamp-1">
+                                        {project.name}
+                                      </span>
+                                    </div>
+                                    {isSelected && (
+                                      <Check className="h-4 w-4 shrink-0 text-dynamic-sky" />
+                                    )}
+                                  </button>
+                                );
+                              })}
+                            </div>
+                          </ScrollArea>
+                          <div className="border-t pt-2">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                onCreateNewProject?.();
+                                setSettingsOpen(false);
+                              }}
+                              className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground"
+                            >
+                              <Plus className="h-4 w-4" />
+                              <span>{t('cmd_add_new_project')}</span>
+                            </button>
+                          </div>
+                        </div>
+                      ) : activeSettingsView === 'labels' ? (
+                        // Labels selection view
+                        <div className="space-y-0.5 p-2">
+                          <button
+                            type="button"
+                            onClick={() => setActiveSettingsView('main')}
+                            className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                          >
+                            <ArrowLeft className="h-4 w-4" />
+                            <span className="font-semibold">
+                              {t('cmd_select_labels')}
+                            </span>
+                          </button>
+                          <ScrollArea style={{ height: labelsScrollHeight }}>
+                            <div className="space-y-0.5">
+                              {workspaceLabels.map((label) => {
+                                const isSelected = selectedLabelIds.includes(
+                                  label.id
+                                );
+                                return (
+                                  <button
+                                    key={label.id}
+                                    type="button"
+                                    onClick={() => {
+                                      if (isSelected) {
+                                        setSelectedLabelIds(
+                                          selectedLabelIds.filter(
+                                            (id) => id !== label.id
+                                          )
+                                        );
+                                      } else {
+                                        setSelectedLabelIds([
+                                          ...selectedLabelIds,
+                                          label.id,
+                                        ]);
+                                      }
+                                    }}
+                                    className="flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                                  >
+                                    <div className="flex items-center gap-2">
+                                      <span
+                                        className="h-3 w-3 rounded-full"
+                                        style={{
+                                          backgroundColor: label.color,
+                                        }}
+                                      />
+                                      <span
+                                        className="line-clamp-1"
+                                        style={{ color: label.color }}
+                                      >
+                                        {label.name}
+                                      </span>
+                                    </div>
+                                    {isSelected && (
+                                      <Check
+                                        className="h-4 w-4 shrink-0"
+                                        style={{ color: label.color }}
+                                      />
+                                    )}
+                                  </button>
+                                );
+                              })}
+                            </div>
+                          </ScrollArea>
+                          <div className="border-t pt-2">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                onCreateNewLabel?.();
+                                setSettingsOpen(false);
+                              }}
+                              className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground"
+                            >
+                              <Plus className="h-4 w-4" />
+                              <span>{t('cmd_add_new_label')}</span>
+                            </button>
+                          </div>
+                        </div>
+                      ) : activeSettingsView === 'assignees' ? (
+                        // Assignees selection view - matching kanban.tsx implementation
+                        <div className="p-3">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setActiveSettingsView('main');
+                              setAssigneeSearchQuery('');
+                            }}
+                            className="mb-3 flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-muted"
+                          >
+                            <ArrowLeft className="h-4 w-4" />
+                            <span className="font-semibold">
+                              {t('cmd_select_assignees')}
+                            </span>
+                          </button>
+
+                          {/* Search Input */}
+                          <div className="relative mb-3">
+                            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                            <Input
+                              placeholder={t('cmd_search_members')}
+                              value={assigneeSearchQuery}
+                              onChange={(e) =>
+                                setAssigneeSearchQuery(e.target.value)
+                              }
+                              className="h-9 border-0 bg-muted/50 pl-9 text-sm focus-visible:ring-0"
+                            />
+                          </div>
+
+                          <div className="space-y-3">
+                            {/* Assigned Members Section */}
+                            {(() => {
+                              const assignedMembers = workspaceMembers.filter(
+                                (member) =>
+                                  selectedAssigneeIds.includes(member.id)
+                              );
+
+                              if (assignedMembers.length > 0) {
+                                return (
+                                  <div className="space-y-1.5">
+                                    <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
+                                      {t('cmd_assigned_count', {
+                                        count: assignedMembers.length,
+                                      })}
+                                    </p>
+                                    <div className="flex flex-wrap gap-1.5">
+                                      {assignedMembers.map((member) => (
+                                        <Button
+                                          key={member.id}
+                                          type="button"
+                                          variant="default"
+                                          size="xs"
+                                          onClick={() => {
+                                            setSelectedAssigneeIds(
+                                              selectedAssigneeIds.filter(
+                                                (id) => id !== member.id
+                                              )
+                                            );
+                                          }}
+                                          className="h-7 gap-1.5 rounded-full border border-dynamic-orange/30 bg-dynamic-orange/15 px-3 font-medium text-dynamic-orange text-xs shadow-sm transition-all hover:border-dynamic-orange/50 hover:bg-dynamic-orange/25"
+                                        >
+                                          <Avatar className="h-4 w-4">
+                                            <AvatarImage
+                                              src={member.avatar_url}
+                                            />
+                                            <AvatarFallback className="bg-dynamic-orange/20 font-bold text-[9px]">
+                                              {member.display_name?.[0] ||
+                                                member.email?.[0] ||
+                                                '?'}
+                                            </AvatarFallback>
+                                          </Avatar>
+                                          {member.display_name || member.email}
+                                          <X className="h-3 w-3 opacity-70" />
+                                        </Button>
+                                      ))}
+                                    </div>
+                                    {assignedMembers.length > 1 && (
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="xs"
+                                        onClick={() =>
+                                          setSelectedAssigneeIds([])
+                                        }
+                                        className="mt-1 h-6 w-full text-dynamic-red text-xs hover:bg-dynamic-red/10 hover:text-dynamic-red"
+                                      >
+                                        <UserMinus className="mr-1 h-3 w-3" />
+                                        {t('cmd_remove_all')}
+                                      </Button>
+                                    )}
+                                  </div>
+                                );
+                              }
+                              return null;
+                            })()}
+
+                            {/* Available Members Section */}
+                            <div className="space-y-1.5">
+                              {(() => {
+                                const unassignedMembers =
+                                  workspaceMembers.filter(
+                                    (member) =>
+                                      !selectedAssigneeIds.includes(member.id)
+                                  );
+
+                                const filteredMembers =
+                                  unassignedMembers.filter(
+                                    (member) =>
+                                      !assigneeSearchQuery ||
+                                      (member.display_name || '')
+                                        .toLowerCase()
+                                        .includes(
+                                          assigneeSearchQuery.toLowerCase()
+                                        ) ||
+                                      (member.email || '')
+                                        .toLowerCase()
+                                        .includes(
+                                          assigneeSearchQuery.toLowerCase()
+                                        )
+                                  );
+
+                                if (filteredMembers.length === 0) {
+                                  return assigneeSearchQuery ? (
+                                    <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-muted/30 py-6">
+                                      <UserPlus className="h-4 w-4 text-muted-foreground/40" />
+                                      <p className="text-center text-muted-foreground text-xs">
+                                        {t('cmd_no_members_found')}
+                                      </p>
+                                    </div>
+                                  ) : selectedAssigneeIds.length > 0 ? (
+                                    <div className="rounded-lg bg-muted/30 py-3 text-center">
+                                      <p className="text-muted-foreground text-xs">
+                                        {t('cmd_all_members_assigned')}
+                                      </p>
+                                    </div>
+                                  ) : (
+                                    <div className="rounded-lg bg-muted/30 py-3 text-center">
+                                      <p className="text-muted-foreground text-xs">
+                                        {t('cmd_no_members_available')}
+                                      </p>
+                                    </div>
+                                  );
+                                }
+
+                                return (
+                                  <>
+                                    <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
+                                      {t('cmd_available_count', {
+                                        count: filteredMembers.length,
+                                      })}
+                                    </p>
+                                    <div className="flex max-h-60 flex-col gap-1 overflow-y-auto">
+                                      {filteredMembers.map((member) => (
+                                        <button
+                                          key={member.id}
+                                          type="button"
+                                          onClick={() => {
+                                            setSelectedAssigneeIds([
+                                              ...selectedAssigneeIds,
+                                              member.id,
+                                            ]);
+                                          }}
+                                          className="group flex items-center gap-2.5 rounded-md border border-transparent bg-background/50 px-3 py-2 text-left transition-all hover:border-dynamic-orange/30 hover:bg-dynamic-orange/5"
+                                        >
+                                          <Avatar className="h-7 w-7 shrink-0">
+                                            <AvatarImage
+                                              src={member.avatar_url}
+                                            />
+                                            <AvatarFallback className="bg-muted font-semibold text-muted-foreground text-xs group-hover:bg-dynamic-orange/20 group-hover:text-dynamic-orange">
+                                              {member.display_name?.[0] ||
+                                                member.email?.[0] ||
+                                                '?'}
+                                            </AvatarFallback>
+                                          </Avatar>
+                                          <span className="flex-1 truncate text-sm">
+                                            {member.display_name ||
+                                              member.email}
+                                          </span>
+                                          <UserPlus className="h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+                                        </button>
+                                      ))}
+                                    </div>
+                                  </>
+                                );
+                              })()}
+                            </div>
+                          </div>
+                        </div>
+                      ) : null}
+                    </div>
+                  )}
+                </PopoverContent>
+              )}
+            </Popover>
+
+            {/* AI Toggle Button (like Claude's extended thinking) */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant={effectiveAiEnabled ? 'default' : 'ghost'}
+                    size="sm"
+                    onClick={() => setAiEnabled(!aiEnabled)}
+                    disabled={isLoading || aiCreditsExhausted}
+                    className={cn(
+                      'h-8 gap-1.5 rounded-lg border px-2.5 transition-all md:h-9 md:gap-2 md:px-3',
+                      effectiveAiEnabled
+                        ? 'border-dynamic-blue/20 bg-dynamic-blue/5 text-dynamic-blue shadow-lg hover:bg-dynamic-blue/10 hover:shadow-xl'
+                        : 'border-border',
+                      aiCreditsExhausted && 'cursor-not-allowed opacity-50'
+                    )}
+                  >
+                    <Sparkles
+                      className={cn(
+                        'h-3.5 w-3.5 md:h-4 md:w-4',
+                        effectiveAiEnabled ? 'animate-pulse' : ''
+                      )}
+                    />
+                    <span className="text-xs md:text-sm">{t('cmd_ai')}</span>
+                  </Button>
+                </TooltipTrigger>
+                {aiCreditsExhausted && aiCreditsTooltip ? (
+                  <TooltipContent>
+                    <p>{aiCreditsTooltip}</p>
+                  </TooltipContent>
+                ) : null}
+              </Tooltip>
+            </TooltipProvider>
+
+            {/* Assign to me toggle */}
+            <Button
+              variant={autoAssignToMe ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => onAutoAssignToMeChange?.(!autoAssignToMe)}
+              disabled={isLoading}
+              className={cn(
+                'h-8 gap-1.5 rounded-lg border px-2.5 transition-all md:h-9 md:gap-2 md:px-3',
+                autoAssignToMe
+                  ? 'border-dynamic-purple/20 bg-dynamic-purple/5 text-dynamic-purple shadow-lg hover:bg-dynamic-purple/10 hover:shadow-xl'
+                  : 'border-border'
+              )}
+            >
+              <UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
+              <span className="hidden text-xs sm:inline md:text-sm">
+                {t('cmd_assign_to_me')}
+              </span>
+            </Button>
+          </div>
+
+          {/* Right Side: Create Button */}
+          <div className="flex items-center gap-1.5 sm:gap-2">
+            {/* Create/Generate Button */}
+            <Button
+              onClick={handleAction}
+              disabled={!canExecute || isLoading}
+              size="sm"
+              className="h-8 shrink-0 gap-1.5 rounded-lg bg-linear-to-r from-primary to-primary/90 px-3 font-semibold text-xs shadow-lg transition-all hover:scale-[1.02] hover:shadow-xl active:scale-[0.98] disabled:opacity-50 sm:gap-2 sm:px-4 md:h-9 md:text-sm"
+            >
+              {isLoading ? (
+                <>
+                  <div className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent md:h-4 md:w-4" />
+                  <span className="hidden sm:inline">
+                    {effectiveAiEnabled
+                      ? t('cmd_generating')
+                      : t('cmd_creating')}
+                  </span>
+                </>
+              ) : effectiveAiEnabled ? (
+                <>
+                  <Sparkles className="h-3.5 w-3.5 md:h-4 md:w-4" />
+                  <span>{t('cmd_generate')}</span>
+                </>
+              ) : (
+                <>
+                  <Plus className="h-3.5 w-3.5 md:h-4 md:w-4" />
+                  <span>{t('cmd_create')}</span>
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}