fix: update Tasks, tests, and tagSelector

Author: ShivaGupta-14

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

@@ -608,14 +608,6 @@ export const Tasks = (
     }
   };
 
-  // Handle removing a tag
-  const handleRemoveTag = (tagToRemove: string) => {
-    setNewTask({
-      ...newTask,
-      tags: newTask.tags.filter((tag) => tag !== tagToRemove),
-    });
-  };
-
   const sortWithOverdueOnTop = (tasks: Task[]) => {
     return [...tasks].sort((a, b) => {
       const aOverdue = a.status === 'pending' && isOverdue(a.due);
@@ -1050,28 +1042,6 @@ export const Tasks = (
                                 />
                               </div>
                             </div>
-
-                            <div className="mt-2">
-                              {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>
                           </div>
                           <DialogFooter>
                             <Button

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

@@ -230,7 +230,8 @@ describe('Tasks Component', () => {
   test('renders mocked TagSelector in Add Task dialog', async () => {
     render(<Tasks {...mockProps} />);
 
-    const addButton = screen.getAllByText('Add Task')[0];
+    const addButton = screen.getByRole('button', { name: /add task/i });
+
     fireEvent.click(addButton);
 
     expect(await screen.findByTestId('mock-tag-selector')).toBeInTheDocument();

frontend/src/components/ui/tagSelector.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Check, ChevronsUpDown, Plus } from 'lucide-react';
+import { Check, ChevronsUpDown, Plus, X } from 'lucide-react';
 
 import { cn } from '@/components/utils/utils';
 import { Button } from '@/components/ui/button';
@@ -53,6 +53,13 @@ export function TagSelector({
       onChange([...selected, tag]);
     }
   };
+
+  // Remove a tag when X inside the chip is clicked
+  const removeTagInsideChip = (tag: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(selected.filter((t) => t !== tag));
+  };
+
   return (
     <>
       <Popover open={open} onOpenChange={setOpen}>
@@ -61,7 +68,7 @@ export function TagSelector({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="w-full justify-between h-auto min-h-[40px]"
+            className="w-full justify-between h-auto min-h-[40px] group"
           >
             <div className="flex flex-wrap gap-2 items-center">
               {selected.length === 0 ? (
@@ -70,9 +77,14 @@ export function TagSelector({
                 selected.map((tag) => (
                   <span
                     key={tag}
-                    className="px-2 py-1 rounded-md bg-muted text-sm"
+                    className="px-2 py-1 rounded-md bg-muted text-sm flex items-center gap-1 hover:text-neutral-300
+                                group-hover:bg-black group-hover:text-muted-foreground transition-colors"
                   >
                     {tag}
+                    <X
+                      className="w-3 h-3 cursor-pointer hover:text-red-500"
+                      onClick={(e) => removeTagInsideChip(tag, e)}
+                    />
                   </span>
                 ))
               )}