refactor(ui,tasks): enhance ActionButton to support submit/disabled states and expose isSubmitting

app/(app)/tasks/TaskForm.tsx

@@ -50,6 +50,7 @@ export default function TaskForm({
     form,
     error,
     isEditMode,
+    isSubmitting,
     todayString,
     updateField,
     handleAssigneeToggle,
@@ -95,10 +96,20 @@ export default function TaskForm({
       </div>
 
       <div className="flex items-center justify-end gap-3">
-        <ActionButton href="/dashboard" variant="secondary" icon={X}>
+        <ActionButton
+          href="/dashboard"
+          variant="secondary"
+          disabled={isSubmitting}
+          icon={X}
+        >
           Cancel
         </ActionButton>
-        <ActionButton type="submit" variant="primary" icon={Check}>
+        <ActionButton
+          type="submit"
+          variant="primary"
+          disabled={isSubmitting}
+          icon={Check}
+        >
           {isEditMode ? "Save Changes" : "Create Task"}
         </ActionButton>
       </div>

app/(app)/tasks/useTaskForm.ts

@@ -23,7 +23,7 @@ export function useTaskForm(
   defaultStatus?: TaskStatus,
 ) {
   const router = useRouter();
-  const [, startTransition] = useTransition();
+  const [isPending, startTransition] = useTransition();
   const isEditMode = mode === "edit" && initialData;
 
   const todayString = new Date().toISOString().split("T")[0];
@@ -121,6 +121,7 @@ export function useTaskForm(
     form,
     error,
     isEditMode,
+    isSubmitting: isPending,
     todayString,
     updateField,
     handleAssigneeToggle,

app/components/ui/buttons/ActionButton.tsx

@@ -7,6 +7,16 @@ import Link from "next/link";
 import { ReactNode, ButtonHTMLAttributes } from "react";
 import { LucideIcon } from "lucide-react";
 
+/**
+ * Properties for the ActionButton component.
+ *
+ * @interface ActionButtonProps
+ * @extends {ButtonHTMLAttributes<HTMLButtonElement>}
+ * @property {string} [href] - Optional navigation target URL. Renders a Next.js Link component if defined.
+ * @property {"primary" | "secondary" | "danger"} [variant="primary"] - Visual style variant of the button.
+ * @property {ReactNode} children - Button label content or child nodes.
+ * @property {LucideIcon} [icon] - Optional Lucide icon component to display alongside the text label.
+ */
 interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string;
   variant?: "primary" | "secondary" | "danger";
@@ -14,6 +24,12 @@ interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: LucideIcon;
 }
 
+/**
+ * Renders a customizable button or link element styled with Tailwind CSS, supporting variants, icons, and disabled states.
+ *
+ * @param {ActionButtonProps} props - The component props.
+ * @returns {JSX.Element} The rendered button or link component.
+ */
 export function ActionButton({
   href,
   variant = "primary",
@@ -50,7 +66,16 @@ export function ActionButton({
   // If an href is passed -> Link button
   if (href) {
     return (
-      <Link href={href} className={combinedStyles}>
+      <Link
+        href={disabled ? "#" : href}
+        aria-disabled={disabled}
+        onClick={(e) => {
+          if (disabled) e.preventDefault();
+        }}
+        className={`${combinedStyles} ${
+          disabled ? "pointer-events-none opacity-50" : ""
+        }`}
+      >
         {content}
       </Link>
     );