feat: integrate TagMultiSelect with TaskDialog for editing

Author: Hell1213

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

@@ -38,6 +38,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useTaskDialogKeyboard } from './UseTaskDialogKeyboard';
 import { FIELDS } from './constants';
 import { useTaskDialogFocusMap } from './UseTaskDialogFocusMap';
+import { TagMultiSelect } from './TagMultiSelect';
 
 export const TaskDialog = ({
   index,
@@ -54,6 +55,7 @@ export const TaskDialog = ({
   isCreatingNewProject,
   setIsCreatingNewProject,
   uniqueProjects,
+  uniqueTags,
   onSaveDescription,
   onSaveTags,
   onSavePriority,
@@ -1188,104 +1190,41 @@ export const TaskDialog = ({
                   <TableCell>Tags:</TableCell>
                   <TableCell>
                     {editState.isEditingTags ? (
-                      <div>
-                        <div className="flex items-center w-full">
-                          <Input
-                            ref={(element) =>
-                              (inputRefs.current.tags = element)
-                            }
-                            type="text"
-                            value={editState.editTagInput}
-                            onChange={(e) => {
-                              // For allowing only alphanumeric characters
-                              if (e.target.value.length > 1) {
-                                /^[a-zA-Z0-9]*$/.test(e.target.value.trim())
-                                  ? onUpdateState({
-                                      editTagInput: e.target.value.trim(),
-                                    })
-                                  : '';
-                              } else {
-                                /^[a-zA-Z]*$/.test(e.target.value.trim())
-                                  ? onUpdateState({
-                                      editTagInput: e.target.value.trim(),
-                                    })
-                                  : '';
-                              }
-                            }}
-                            placeholder="Add a tag (press enter to add)"
-                            className="flex-grow mr-2"
-                            onKeyDown={(e) => {
-                              if (
-                                e.key === 'Enter' &&
-                                editState.editTagInput.trim()
-                              ) {
-                                onUpdateState({
-                                  editedTags: [
-                                    ...editState.editedTags,
-                                    editState.editTagInput.trim(),
-                                  ],
-                                  editTagInput: '',
-                                });
-                              }
-                            }}
-                          />
+                      <div className="space-y-2">
+                        <TagMultiSelect
+                          availableTags={uniqueTags}
+                          selectedTags={editState.editedTags}
+                          onTagsChange={(tags) =>
+                            onUpdateState({ editedTags: tags })
+                          }
+                          placeholder="Select or create tags"
+                        />
+                        <div className="flex items-center gap-2 whitespace-nowrap">
                           <Button
                             variant="ghost"
                             size="icon"
-                            aria-label="Save tags"
+                            aria-label="save"
                             onClick={() => {
                               onSaveTags(task, editState.editedTags);
-                              onUpdateState({
-                                isEditingTags: false,
-                                editTagInput: '',
-                              });
+                              onUpdateState({ isEditingTags: false });
                             }}
                           >
                             <CheckIcon className="h-4 w-4 text-green-500" />
                           </Button>
                           <Button
                             variant="ghost"
                             size="icon"
-                            aria-label="Cancel editing tags"
-                            onClick={() => {
+                            aria-label="cancel"
+                            onClick={() =>
                               onUpdateState({
                                 isEditingTags: false,
                                 editedTags: task.tags || [],
-                                editTagInput: '',
-                              });
-                            }}
+                              })
+                            }
                           >
                             <XIcon className="h-4 w-4 text-red-500" />
                           </Button>
                         </div>
-                        <div className="mt-2">
-                          {editState.editedTags != null &&
-                            editState.editedTags.length > 0 && (
-                              <div>
-                                <div className="flex flex-wrap gap-2 col-span-3">
-                                  {editState.editedTags.map((tag, index) => (
-                                    <Badge key={index}>
-                                      <span>{tag}</span>
-                                      <button
-                                        type="button"
-                                        className="ml-2 text-red-500"
-                                        onClick={() =>
-                                          onUpdateState({
-                                            editedTags:
-                                              editState.editedTags.filter(
-                                                (t) => t !== tag
-                                              ),
-                                          })
-                                        }
-                                      >
-                                        ✖
-                                      </button>
-                                    </Badge>
-                                  ))}
-                                </div>
-                              </div>
-                            )}
-                        </div>
                       </div>
                     ) : (
                       <div className="flex items-center flex-wrap">

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

@@ -1198,6 +1198,7 @@ export const Tasks = (
                             onUpdateState={updateEditState}
                             allTasks={tasks}
                             uniqueProjects={uniqueProjects}
+                            uniqueTags={uniqueTags}
                             isCreatingNewProject={isCreatingNewProject}
                             setIsCreatingNewProject={setIsCreatingNewProject}
                             onSaveDescription={handleSaveDescription}

frontend/src/components/utils/types.ts

@@ -149,6 +149,7 @@ export interface EditTaskDialogProps {
   onUpdateState: (updates: Partial<EditTaskState>) => void;
   allTasks: Task[];
   uniqueProjects: string[];
+  uniqueTags: string[];
   isCreatingNewProject: boolean;
   setIsCreatingNewProject: (value: boolean) => void;
   onSaveDescription: (task: Task, description: string) => void;