feat: animate toggleGroup position and input

mast-react-vite/src/components/ui/action-parser.tsx

···
 const ActionParser = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, ctx, type, onActionChange, onSubmit, value, ...props }, ref) => {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
-    const [selectedToggle, setSelectedToggle] = React.useState("add");
+    const [selectedToggle, setSelectedToggle] = React.useState("");
     const options = ["add", "filter", "done", "delete"];
 		const [suggestions, setSuggestions] = React.useState<string[]>([]);
     const [showShadow, setShowShadow] = React.useState(false);
···
     };
 
     const handleToggleChange = (value: string) => {
-      if (value) {
+      if (value === selectedToggle) {
+        // Clicking the active toggle should deactivate it
+        setSelectedToggle("");
+        onActionChange?.("");
+      } else if (value) {
         setSelectedToggle(value);
         onActionChange?.(value);
       }
···
     return (
       <div className="flex flex-col group">
         <div className="hidden md:flex flex-col w-full">
-          <div className="flex w-full">
+          <motion.div 
+            className="flex w-full"
+            animate={{
+              y: 0
+            }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+          >
             <div className="relative w-auto">
               <ToggleGroup
                 type="single"
                 value={selectedToggle}
                 onValueChange={handleToggleChange}
-                defaultValue="add"
                 className={cn(
-                  "h-11 border rounded-t-md border-b-0 bg-transparent text-sm cursor-default pt-1/2 pl-1 pr-1 pb-1/2",
+                  "h-11 border bg-background text-sm cursor-default pt-1/2 pl-1 pr-1 pb-1/2",
                   "shadow-sm transition-colors duration-0 text-center appearance-none group-focus-within:border-ring",
-                  "rounded-t-md rounded-b-none",
                   "focus:border-ring focus-within:border-ring",
+                  selectedToggle ? "rounded-t-md border-b-0 rounded-b-none" : "rounded-md"
                 )}
               >
-                <ToggleGroupItem value="filter" aria-label="filter tasks">
+                <ToggleGroupItem 
+                  value="filter" 
+                  aria-label="filter tasks"
+                  onClick={() => handleToggleChange("filter")}
+                >
                   <Search className="h-4 w-4 rounded-none" />
                 </ToggleGroupItem>
                 <ToggleGroupItem
                   value="modify"
                   aria-label="Modify selected task(s)"
+                  onClick={() => handleToggleChange("modify")}
                 >
                   <Pencil className="h-4 w-4" />
                 </ToggleGroupItem>
-                <ToggleGroupItem value="add" aria-label="Add a task">
+                <ToggleGroupItem 
+                  value="add" 
+                  aria-label="Add a task"
+                  onClick={() => handleToggleChange("add")}
+                >
                   <Plus className="h-4 w-4" />
                 </ToggleGroupItem>
                 <ToggleGroupItem
                   value="done"
                   aria-label="Toggle selected task(s) done"
+                  onClick={() => handleToggleChange("done")}
                 >
                   <Check className="h-4 w-4" />
                 </ToggleGroupItem>
               </ToggleGroup>
-              <div className="absolute bottom-0 left-0 right-0 h-[2px] border group-focus-within:border-ring border-b-0 border-t-0 bg-background z-20 translate-y-[1px]"></div>
             </div>
             <div className="flex-1"></div>
-          </div>
+          </motion.div>
           
           {/* Two-line input appearance with divider */}
-          <div className="relative w-full flex flex-col">
+          <motion.div 
+            className="relative w-full flex flex-col"
+            animate={{
+              opacity: selectedToggle ? 1 : 0,
+              y: selectedToggle ? -2 : -20,
+              height: selectedToggle ? "auto" : 0
+            }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+          >
+            {/* Connector div that bridges toggle group and input */}
+          <div className="absolute  left-0 h-[1px] border border-b-0 border-t-0 group-focus-within:border-ring bg-background z-20" style={{ width: '166px' }}></div>
+            
             {/* First line (interactive input) */}
             <div className="flex-1 min-h-[36px] border border-b-0 rounded-br-none rounded-tr-md rounded-tl-none bg-background px-3 py-2 text-sm flex items-center group-focus-within:border-ring">
               <input
···
                 ↑
               </Button>
             </div>
-          </div>
+          </motion.div>
         </div>
 
         {/* Mobile view layout - shown only on mobile */}
         <div className="md:hidden fixed bottom-0 left-0 w-full z-50 flex flex-col items-center pb-2">
-          <div className="relative w-auto">
+          <motion.div 
+            className="relative w-auto"
+            animate={{
+              y: selectedToggle ? 4 : -25
+            }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+          >
             <ToggleGroup
               type="single"
               value={selectedToggle}
               onValueChange={handleToggleChange}
-              defaultValue="add"
+
               className={cn(
-                "h-11 border rounded-t-md border-b-0 bg-background text-sm cursor-default pt-1/2 pl-1 pr-1 pb-1/2",
+                "h-11 border bg-background text-sm cursor-default pt-1/2 pl-1 pr-1 pb-1/2",
                 "shadow-sm transition-colors duration-0 text-center appearance-none group-focus-within:border-ring",
-                "rounded-t-md rounded-b-none",
                 "focus:border-ring",
+                selectedToggle ? "rounded-t-md border-b-0 rounded-b-none" : "rounded-md"
               )}
             >
               <ToggleGroupItem
                 value="filter"
                 aria-label="filter tasks"
                 className="rounded-md mx-1 p-2"
+                onClick={() => handleToggleChange("filter")}
               >
                 <Search className="h-5 w-5" />
               </ToggleGroupItem>
···
                 value="modify"
                 aria-label="Modify selected task(s)"
                 className="rounded-md mx-1 p-2"
+                onClick={() => handleToggleChange("modify")}
               >
                 <Pencil className="h-5 w-5" />
               </ToggleGroupItem>
···
                 value="add"
                 aria-label="Add a task"
                 className="rounded-md mx-1 p-2"
+                onClick={() => handleToggleChange("add")}
               >
                 <Plus className="h-5 w-5" />
               </ToggleGroupItem>
···
                 value="done"
                 aria-label="Toggle selected task(s) done"
                 className="rounded-md mx-1 p-2"
+                onClick={() => handleToggleChange("done")}
               >
                 <Check className="h-5 w-5" />
               </ToggleGroupItem>
             </ToggleGroup>
-            <div className="absolute bottom-0 left-0 right-0 h-[2px] border border-b-0 border-t-0 group-focus-within:border-ring bg-background z-20 translate-y-[1px]" />
-          </div>
+
+          </motion.div>
 
           {/* Mobile two-line input appearance */}
-          <div className="relative w-[90%] mb-1 flex flex-col">
+          <motion.div 
+            className="relative w-[90%] mb-1 flex flex-col"
+            animate={{
+              opacity: selectedToggle ? 1 : 0,
+              y: selectedToggle ? 0 : 20,
+              height: selectedToggle ? "auto" : 0
+            }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+          >
+          {/* Connector div that bridges toggle group and input */}
+            <div className="absolute -top-[1px] left-1/2 -translate-x-1/2 h-[1px] border border-b-0 border-t-0 group-focus-within:border-ring bg-background z-20 translate-y-[1px]" style={{ width: '199px' }}></div>
+            
             {/* First line (interactive input) */}
             <div className="flex-1 min-h-[36px] border border-b-0 rounded-t-md bg-background px-3 py-2 text-sm flex items-center group-focus-within:border-ring">
               <input
···
                 ↑
               </Button>
             </div>
-          </div>
+          </motion.div>
         </div>
       </div>
     );