feat: add reusable tag selector for Add/Edit Task dialogs

frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx

@@ -31,19 +31,19 @@ import { format } from 'date-fns';
 import { ADDTASKDIALOG_FIELDS } from './constants';
 import { useAddTaskDialogKeyboard } from './UseTaskDialogKeyboard';
 import { useAddTaskDialogFocusMap } from './UseTaskDialogFocusMap';
+import { MultiSelect } from './MultiSelect';
 
 export const AddTaskdialog = ({
   onOpenChange,
   isOpen,
   setIsOpen,
   newTask,
   setNewTask,
-  tagInput,
-  setTagInput,
   onSubmit,
   isCreatingNewProject,
   setIsCreatingNewProject,
   uniqueProjects = [],
+  uniqueTags = [],
   allTasks = [],
 }: AddTaskDialogProps) => {
   const [annotationInput, setAnnotationInput] = useState('');
@@ -164,20 +164,6 @@ export const AddTaskdialog = ({
     });
   };
 
-  const handleAddTag = () => {
-    if (tagInput && !newTask.tags.includes(tagInput, 0)) {
-      setNewTask({ ...newTask, tags: [...newTask.tags, tagInput] });
-      setTagInput('');
-    }
-  };
-
-  const handleRemoveTag = (tagToRemove: string) => {
-    setNewTask({
-      ...newTask,
-      tags: newTask.tags.filter((tag) => tag !== tagToRemove),
-    });
-  };
-
   return (
     <Dialog open={isOpen} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>
@@ -523,44 +509,21 @@ export const AddTaskdialog = ({
             <div
               className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'tags' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
             >
-              <Label htmlFor="tags" className="text-left col-spa w-[77px]">
+              <Label htmlFor="tags" className="text-left col-span-1 w-[77px]">
                 Tags
               </Label>
               <div className="col-span-3">
-                <Input
-                  ref={(element) => (inputRefs.current.tags = element)}
-                  id="tags"
-                  name="tags"
-                  placeholder="Add a tag"
-                  value={tagInput}
-                  onChange={(e) => setTagInput(e.target.value)}
-                  onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
-                  required
-                  className="col-span-6"
+                <MultiSelect
+                  availableItems={uniqueTags}
+                  selectedItems={newTask.tags}
+                  onItemsChange={(tags: string[]) =>
+                    setNewTask({ ...newTask, tags })
+                  }
+                  placeholder="Select or create tags"
                 />
               </div>
             </div>
 
-            {newTask.tags.length > 0 && (
-              <div className="grid grid-cols-4 items-center">
-                <div> </div>
-                <div className="flex flex-wrap gap-2 col-span-3">
-                  {newTask.tags.map((tag, index) => (
-                    <Badge key={index}>
-                      <span>{tag}</span>
-                      <button
-                        type="button"
-                        className="ml-2 text-red-500"
-                        onClick={() => handleRemoveTag(tag)}
-                      >
-                        ✖
-                      </button>
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-
             <div
               className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'annotations' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
             >

frontend/src/components/HomeComponents/Tasks/MultiSelect.tsx

@@ -0,0 +1,199 @@
+import { useState, useRef, useEffect } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { MultiSelectProps } from '@/components/utils/types';
+import { ChevronDown, Plus, Check, X } from 'lucide-react';
+import { getFilteredItems, shouldShowCreateOption } from './multi-select-utils';
+
+export const MultiSelect = ({
+  availableItems,
+  selectedItems,
+  onItemsChange,
+  placeholder = 'Select or create items',
+  disabled = false,
+  className = '',
+  showActions = false,
+  onSave,
+  onCancel,
+}: MultiSelectProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+        setSearchTerm('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const filteredItems = getFilteredItems(
+    availableItems,
+    selectedItems,
+    searchTerm
+  );
+
+  const handleItemSelect = (item: string) => {
+    if (!selectedItems.includes(item)) {
+      onItemsChange([...selectedItems, item]);
+    }
+    setSearchTerm('');
+  };
+
+  const handleItemRemove = (itemToRemove: string) => {
+    onItemsChange(selectedItems.filter((item) => item !== itemToRemove));
+  };
+
+  const handleNewItemCreate = () => {
+    const trimmedTerm = searchTerm.trim();
+    if (
+      trimmedTerm &&
+      !selectedItems.includes(trimmedTerm) &&
+      !availableItems.includes(trimmedTerm)
+    ) {
+      onItemsChange([...selectedItems, trimmedTerm]);
+      setSearchTerm('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (searchTerm.trim()) {
+        if (filteredItems.length > 0) {
+          handleItemSelect(filteredItems[0]);
+        } else {
+          handleNewItemCreate();
+        }
+      }
+    } else if (e.key === 'Escape') {
+      setIsOpen(false);
+      setSearchTerm('');
+    }
+  };
+
+  const showCreate = shouldShowCreateOption(
+    searchTerm,
+    availableItems,
+    selectedItems
+  );
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      <Button
+        type="button"
+        variant="outline"
+        onClick={() => setIsOpen(!isOpen)}
+        disabled={disabled}
+        className="w-full justify-between text-left font-normal"
+        aria-label="Select items"
+      >
+        <span className="truncate">
+          {selectedItems.length > 0
+            ? `${selectedItems.length} item${selectedItems.length > 1 ? 's' : ''} selected`
+            : placeholder}
+        </span>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </Button>
+
+      {selectedItems.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 mt-2">
+          {selectedItems.map((item) => (
+            <Badge key={item} className="flex items-center gap-1">
+              <span>{item}</span>
+              <button
+                type="button"
+                onClick={() => handleItemRemove(item)}
+                className="ml-1 text-red-500 hover:text-red-700 text-xs"
+                disabled={disabled}
+                aria-label={`Remove ${item}`}
+              >
+                ✖
+              </button>
+            </Badge>
+          ))}
+          {showActions && onSave && onCancel && (
+            <div className="flex items-center gap-1 whitespace-nowrap">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={onSave}
+                className="h-8 w-8"
+                aria-label="Save items"
+              >
+                <Check className="h-4 w-4 text-green-500" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={onCancel}
+                className="h-8 w-8"
+                aria-label="Cancel"
+              >
+                <X className="h-4 w-4 text-red-500" />
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {isOpen && (
+        <div className="absolute z-50 w-full mt-1 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-hidden">
+          <div className="p-2 border-b">
+            <Input
+              ref={inputRef}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search or create..."
+              className="h-8"
+              autoFocus
+            />
+          </div>
+
+          <div className="max-h-40 overflow-y-auto">
+            {filteredItems.map((item) => (
+              <div
+                key={item}
+                className="px-3 py-2 cursor-pointer hover:bg-accent transition-colors"
+                onClick={() => handleItemSelect(item)}
+              >
+                <span className="text-sm">{item}</span>
+              </div>
+            ))}
+
+            {showCreate && (
+              <div
+                className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent transition-colors border-t"
+                onClick={handleNewItemCreate}
+              >
+                <Plus className="h-4 w-4 text-muted-foreground" />
+                <span className="flex-1 text-sm">
+                  Create "{searchTerm.trim()}"
+                </span>
+              </div>
+            )}
+
+            {filteredItems.length === 0 && !showCreate && (
+              <div className="px-3 py-2 text-sm text-muted-foreground text-center">
+                No items found
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};