fix(forms): submit modal actions with enter

src/components/CreateClientModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type FormEvent } from "react";
 import { toast } from "sonner";
 import { createClient } from "../api/clients";
 import { useTranslation } from "../hooks/useTranslation";
@@ -48,8 +48,9 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
     setThumbnailFile(file);
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (event?: FormEvent<HTMLFormElement>) => {
-    if (!name.trim()) return;
+    event?.preventDefault();
+    if (!name.trim()) return;
     setIsLoading(true);
     try {
       await createClient(workspaceId, { name, notes, thumbnail: thumbnailFile });
@@ -72,15 +73,15 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
       <Button variant="outline" onClick={onClose} disabled={isLoading}>
         {t.actions?.cancel}
       </Button>
-      <Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
+      <Button type="submit" form="create-client-form" disabled={isLoading || !name.trim()}>
-        {isLoading ? "..." : t.clients.create}
+        {isLoading ? "..." : t.clients.create}
-      </Button>
+      </Button>
     </>
   );
 
-  return (
+  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t.clients.modalTitle} footer={footer}>
+    <Modal isOpen={isOpen} onClose={onClose} title={t.clients.modalTitle} footer={footer}>
-      <div className="space-y-4">
+      <form id="create-client-form" onSubmit={handleSubmit} className="space-y-4">
         <div>
           <label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
             {t.workspace?.thumbnailLabel || "Thumbnail"}
@@ -117,7 +118,7 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
             placeholder={t.clients.notesPlaceholder}
           />
         </div>
-      </div>
+      </form>
-    </Modal>
+    </Modal>
-  );
+  );
 }

src/components/DeleteClientModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type FormEvent } from "react";
 import { toast } from "sonner";
 import { type Client } from "../types/client";
 import { deleteClient } from "../api/clients";
@@ -17,8 +17,9 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
 
-  const handleDelete = async () => {
+  const handleDelete = async (event?: FormEvent<HTMLFormElement>) => {
-    if (!client) return;
+    event?.preventDefault();
+    if (!client) return;
     setIsLoading(true);
     try {
       await deleteClient(client.id);
@@ -38,11 +39,12 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
       <Button variant="outline" onClick={onClose} disabled={isLoading}>
         {t.actions?.cancel}
       </Button>
-      <Button 
+      <Button
-        variant="destructive"
+        type="submit"
-        onClick={handleDelete} 
+        form="delete-client-form"
-        disabled={isLoading}
+        variant="destructive"
-      >
+        disabled={isLoading}
+      >
         {isLoading ? "..." : t.clients.delete}
       </Button>
     </>
@@ -55,10 +57,12 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
       title={t.clients.deleteConfirmTitle} 
       footer={footer}
       maxWidth="max-w-sm"
-    >
+    >
-      <p className="text-slate-500 dark:text-slate-400">
+      <form id="delete-client-form" onSubmit={handleDelete}>
-        {client ? t.clients.deleteConfirmMessage(client.name) : ""}
+        <p className="text-slate-500 dark:text-slate-400">
-      </p>
+        {client ? t.clients.deleteConfirmMessage(client.name) : ""}
-    </Modal>
+        </p>
-  );
+      </form>
-}
+    </Modal>
+  );
+}

src/components/EditClientModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, type FormEvent } from "react";
 import { toast } from "sonner";
 import { type Client } from "../types/client";
 import { updateClient } from "../api/clients";
@@ -59,8 +59,9 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
     setClearThumbnail(false);
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (event?: FormEvent<HTMLFormElement>) => {
-    if (!client || !name.trim()) return;
+    event?.preventDefault();
+    if (!client || !name.trim()) return;
     setIsLoading(true);
     try {
       await updateClient(client.id, { name, notes, thumbnail: thumbnailFile, clear_thumbnail: clearThumbnail });
@@ -80,15 +81,15 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
       <Button variant="outline" onClick={onClose} disabled={isLoading}>
         {t.actions?.cancel}
       </Button>
-      <Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
+      <Button type="submit" form="edit-client-form" disabled={isLoading || !name.trim()}>
-        {isLoading ? "..." : t.clients.saveChanges}
+        {isLoading ? "..." : t.clients.saveChanges}
-      </Button>
+      </Button>
     </>
   );
 
-  return (
+  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t.clients.editClient} footer={footer}>
+    <Modal isOpen={isOpen} onClose={onClose} title={t.clients.editClient} footer={footer}>
-      <div className="space-y-4">
+      <form id="edit-client-form" onSubmit={handleSubmit} className="space-y-4">
         <div>
           <label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
             {t.workspace?.thumbnailLabel || "Thumbnail"}
@@ -138,7 +139,7 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
             placeholder={t.clients.notesPlaceholder}
           />
         </div>
-      </div>
+      </form>
-    </Modal>
+    </Modal>
-  );
+  );
 }

src/components/projects/ProjectCreateModal.tsx

@@ -100,7 +100,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
       <button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600 dark:hover:bg-slate-700">
         {t.actions?.cancel || "Cancel"}
       </button>
-      <button onClick={handleSubmit} disabled={loading || !formData.name} type="button" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
+      <button form="create-project-form" disabled={loading || !formData.name} type="submit" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
         {loading ? "..." : t.projects?.create}
       </button>
     </>
@@ -110,7 +110,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={t.projects?.createProject} footer={footer}>
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <form id="create-project-form" onSubmit={handleSubmit} className="space-y-4">
         {/* ردیف اول: عنوان و انتخاب رنگ */}
         <div className="flex items-end gap-3">
           <div className="flex-1">

src/components/projects/ProjectEditModal.tsx

@@ -154,7 +154,7 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
         <button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600">
           {t.actions?.cancel || "Cancel"}
         </button>
-        <button onClick={handleSubmit} disabled={loading || !formData.name} type="button" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
+        <button form="edit-project-form" disabled={loading || !formData.name} type="submit" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
           {loading ? "..." : t.save || "Save"}
         </button>
       </div>
@@ -165,7 +165,7 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={t.projects.editProject} footer={footer}>
-      <form onSubmit={handleSubmit} className="space-y-4 mb-6">
+      <form id="edit-project-form" onSubmit={handleSubmit} className="space-y-4 mb-6">
         <div className="flex items-end gap-3">
           <div className="flex-1">
             <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">

src/pages/Projects.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, type FormEvent } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useTranslation } from "../hooks/useTranslation";
 import { getProjects, deleteProject, type Project } from "../api/projects";
@@ -149,7 +149,8 @@ export const Projects: React.FC = () => {
     };
   }, [activeWorkspace?.id, currentPage, limit, search, isArchived, ordering, selectedClientIdsKey]);
 
-  const confirmDelete = async () => {
+  const confirmDelete = async (event?: FormEvent<HTMLFormElement>) => {
+    event?.preventDefault();
     if (!deleteModal.project) return;
     try {
       const deletedId = deleteModal.project.id;
@@ -543,7 +544,8 @@ export const Projects: React.FC = () => {
               <Button 
                 variant="destructive"
                 disabled={deleteInput !== deleteModal.project.name}
-                onClick={confirmDelete} 
+                type="submit"
+                form="delete-project-form"
                 className="rounded-xl font-semibold"
               >
                 {t.actions?.delete || 'Delete'}
@@ -551,7 +553,7 @@ export const Projects: React.FC = () => {
             </>
           }
         >
-          <div className="flex flex-col gap-4">
+          <form id="delete-project-form" onSubmit={confirmDelete} className="flex flex-col gap-4">
             <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
               {t.projects?.deleteWarning || 'To confirm deletion, please type the project name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.project.name}</strong>
             </p>
@@ -562,7 +564,7 @@ export const Projects: React.FC = () => {
               onChange={(e) => setDeleteInput(e.target.value)}
               placeholder={deleteModal.project.name}
             />
-          </div>
+          </form>
         </Modal>
       )}
 

src/pages/Tags.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type FormEvent } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Edit2, Plus, Tag as TagIcon, Trash2 } from "lucide-react";
 import { toast } from "sonner";
@@ -105,7 +105,8 @@ export default function Tags() {
     setFormColor(DEFAULT_COLOR);
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (event?: FormEvent<HTMLFormElement>) => {
+    event?.preventDefault();
     if (!activeWorkspace?.id || !formName.trim()) return;
 
     try {
@@ -284,13 +285,13 @@ export default function Tags() {
             <Button variant="secondary" onClick={closeModal}>
               {t.actions?.cancel || "Cancel"}
             </Button>
-            <Button onClick={() => void handleSubmit()} disabled={isSaving || !formName.trim()}>
+            <Button type="submit" form="tag-form" disabled={isSaving || !formName.trim()}>
               {isSaving ? "..." : (editingTag ? (t.save || "Save") : (t.create || "Create"))}
             </Button>
           </>
         }
       >
-        <div className="space-y-4">
+        <form id="tag-form" onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
               {t.tags?.nameLabel || "Tag name"}
@@ -304,7 +305,7 @@ export default function Tags() {
             </label>
             <input type="color" value={formColor} onChange={(event) => setFormColor(event.target.value)} className="h-10 w-14 cursor-pointer rounded-md border border-slate-200 dark:border-slate-700 bg-transparent" />
           </div>
-        </div>
+        </form>
       </Modal>
 
       {deleteModal.tag && (
@@ -320,21 +321,28 @@ export default function Tags() {
               </Button>
               <Button
                 variant="destructive"
-                onClick={() => {
+                type="submit"
-                  if (!deleteModal.tag) return;
+                form="delete-tag-form"
-                  void handleDelete(deleteModal.tag);
-                  setDeleteModal({ isOpen: false, tag: null });
-                }}
               >
                 {t.actions?.delete || "Delete"}
               </Button>
             </>
           }
         >
-          <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+          <form
-            {(t.tags?.deleteConfirmMessage as ((name: string) => string) | undefined)?.(deleteModal.tag.name) ||
+            id="delete-tag-form"
-              `Are you sure you want to delete "${deleteModal.tag.name}"?`}
+            onSubmit={(event) => {
-          </p>
+              event.preventDefault();
+              if (!deleteModal.tag) return;
+              void handleDelete(deleteModal.tag);
+              setDeleteModal({ isOpen: false, tag: null });
+            }}
+          >
+            <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+              {(t.tags?.deleteConfirmMessage as ((name: string) => string) | undefined)?.(deleteModal.tag.name) ||
+                `Are you sure you want to delete "${deleteModal.tag.name}"?`}
+            </p>
+          </form>
         </Modal>
       )}
     </div>

src/pages/Workspaces.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type FormEvent } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Plus, Trash2, Pencil, Eye, LayoutDashboard } from 'lucide-react';
 import { toast } from 'sonner';
@@ -94,8 +94,9 @@ export default function Workspaces() {
     }
   };
 
-  const confirmDelete = async () => {
+  const confirmDelete = async (event?: FormEvent<HTMLFormElement>) => {
-    if (!deleteModal.workspace) return;
+    event?.preventDefault();
+    if (!deleteModal.workspace) return;
     try {
       const deletedId = deleteModal.workspace.id;
       await deleteWorkspace(deletedId);
@@ -275,15 +276,16 @@ export default function Workspaces() {
               <Button 
                 variant="destructive"
                 disabled={deleteInput !== deleteModal.workspace.name}
-                onClick={confirmDelete} 
+                type="submit"
-                className="rounded-xl font-semibold"
+                form="delete-workspace-form"
+                className="rounded-xl font-semibold"
               >
                 {t.actions?.delete || 'Delete'}
               </Button>
             </>
           }
         >
-          <div className="flex flex-col gap-4">
+          <form id="delete-workspace-form" onSubmit={confirmDelete} className="flex flex-col gap-4">
             <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
               {t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
             </p>
@@ -294,7 +296,7 @@ export default function Workspaces() {
               onChange={(e) => setDeleteInput(e.target.value)}
               placeholder={deleteModal.workspace.name}
             />
-          </div>
+          </form>
         </Modal>
       )}
     </div>