fix(workspaces): improve workspace's UI and UX

src/pages/Workspaces.tsx

@@ -1,13 +1,16 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Plus, Edit2, Trash2, Eye } from 'lucide-react';
+import { Plus, Trash2, Pencil, ChevronRight } from 'lucide-react';
 import { toast } from 'sonner';
 import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
 import { useAppContext } from '../context/AppContext';
 import { useTranslation } from '../hooks/useTranslation';
 import FilterBar from '../components/FilterBar';
 import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Card, CardContent, CardTitle } from '../components/ui/card';
 import { Pagination } from '../components/Pagination';
+import { Modal } from '../components/Modal';
 
 type WorkspaceRole = "owner" | "admin" | "member" | "guest";
 
@@ -33,12 +36,11 @@ export default function Workspaces() {
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
-  const [ordering, setOrdering] = useState('-updated_at');
+  const [ordering, setOrdering] = useState('-created_at');
 
-  // تنظیمات پاژینیشن
   const [currentPage, setCurrentPage] = useState(1);
   const [totalItems, setTotalItems] = useState(0);
-  const [limit, setLimit] = useState(9);
+  const [limit, setLimit] = useState(10);
   
   const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
   const [deleteInput, setDeleteInput] = useState('');
@@ -48,13 +50,13 @@ export default function Workspaces() {
   const { t } = useTranslation();
 
   const orderingOptions = [
-    { value: '-updated_at', label: t.workspace?.orderByUpdatedDesc || 'Recently Updated' },
-    { value: '-created_at', label: t.workspace?.orderByCreatedDesc || 'Newest First' },
-    { value: 'created_at', label: t.workspace?.orderByCreatedAsc || 'Oldest First' },
-    { value: 'name', label: t.workspace?.orderByName || 'Name (A-Z)' },
+    { value: '-created_at', label: t.ordering?.createdAtDesc || 'Newest First' },
+    { value: 'created_at', label: t.ordering?.createdAt || 'Oldest First' },
+    { value: 'name', label: t.ordering?.name || 'Name (A-Z)' },
+    { value: '-name', label: t.ordering?.nameDesc || 'Name (Z-A)' },
+    { value: '-updated_at', label: t.ordering?.updatedAtDesc || 'Recently Updated' },
   ];
 
-  // وقتی جستجو یا ترتیب تغییر کرد، به صفحه اول برگرد
   useEffect(() => {
     setCurrentPage(1);
   }, [searchQuery, ordering]);
@@ -79,7 +81,6 @@ export default function Workspaces() {
       
       const data = await fetchWorkspaces(params as any);
       
-      // استخراج هوشمند نتایج و تعداد کل
       const items = Array.isArray(data) ? data : (data?.results || []);
       const count = !Array.isArray(data) && data?.count !== undefined ? data.count : items.length;
       
@@ -92,7 +93,7 @@ export default function Workspaces() {
     }
   };
 
- const confirmDelete = async () => {
+  const confirmDelete = async () => {
     if (!deleteModal.workspace) return;
     try {
       const deletedId = deleteModal.workspace.id;
@@ -100,7 +101,6 @@ export default function Workspaces() {
       
       loadWorkspaces(); 
 
-      // ارسال سیگنال به کل اپلیکیشن برای آپدیت نوار ناوبری
       window.dispatchEvent(new CustomEvent('workspace_deleted', { 
         detail: { id: deletedId } 
       }));
@@ -114,7 +114,7 @@ export default function Workspaces() {
   };
 
   return (
-    <div className="flex flex-col p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
+    <div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
       <div className="flex justify-between items-center mb-8">
         <div>
           <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
@@ -122,7 +122,7 @@ export default function Workspaces() {
         </div>
         <Button
           onClick={() => navigate('/workspaces/create')}
-          className="gap-2 rounded-xl shadow-sm"
+          className="gap-2 shadow-sm"
         >
           <Plus className="h-5 w-5" />
           {t.workspace?.createNew || 'Create New'}
@@ -143,108 +143,104 @@ export default function Workspaces() {
            <div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div>
         </div>
       ) : (
-        <>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        <div className="flex flex-col flex-1">
+          <div className="flex flex-col gap-4 mb-6">
             {workspaces.map((workspace) => {
               const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
               const isAdmin = workspace.my_role === 'admin' || isOwner;
 
               return (
-                <div 
-                  key={workspace.id} 
-                  className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col"
-                >
-                  <div className="flex-1">
-                    <div className="flex justify-between items-start mb-3 gap-2">
-                      <h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-1">
-                        {workspace.name}
-                      </h3>
-                      <RoleBadge role={workspace.my_role} />
+                <Card key={workspace.id} className="flex flex-col text-slate-800 dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 shadow-sm">
+                  <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between py-4 px-6 gap-4">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <CardTitle className="text-lg line-clamp-1">
+                          {workspace.name}
+                        </CardTitle>
+                        <RoleBadge role={workspace.my_role} />
+                      </div>
+                      <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
+                        {workspace.description || t.workspace?.noDescription || 'No description'}
+                      </p>
                     </div>
-                    <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
-                      {workspace.description || t.workspace?.noDescription || 'No description'}
-                    </p>
-                  </div>
 
-                  <div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
-                    <Button
-                      variant="secondary"
-                      size="icon"
-                      onClick={() => navigate(`/workspaces/${workspace.id}`)}
-                      className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
-                      title={t.workspace?.view || 'View'}
-                    >
-                      <Eye className="h-4 w-4" />
-                    </Button>
+                    <div className="flex items-center gap-2 shrink-0">
+                      {isOwner && (
+                        <Button 
+                          variant="ghost" 
+                          size="icon"
+                          onClick={() => setDeleteModal({ isOpen: true, workspace })}
+                          className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
+                          title={t.actions?.delete || 'Delete'}
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      )}
+
+                      {isAdmin && (
+                      <Button 
+                          variant="ghost" 
+                          size="icon"
+                          onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
+                          className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
+                          title={t.actions?.edit || 'Edit'}
+                          >
+                          <Pencil className="w-4 h-4" />
+                        </Button>
+                      )}
 
-                    {isAdmin && (
                       <Button
-                        variant="secondary"
                         size="icon"
-                        onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
-                        className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
-                        title={t.workspace?.edit || 'Edit'}
+                        onClick={() => navigate(`/workspaces/${workspace.id}`)}
+                        className="h-8 w-8 hover:bg-blue-700 dark:hover:bg-blue-500 border-none shadow-sm transition-all"
+                        title={t.actions?.view || 'View'}
                       >
-                        <Edit2 className="h-4 w-4" />
+                        <ChevronRight className="h-4 w-4 rtl:-scale-x-100" />
                       </Button>
-                    )}
-
-                    {isOwner && (
-                      <Button
-                        variant="secondary"
-                        size="icon"
-                        onClick={() => setDeleteModal({ isOpen: true, workspace })}
-                        className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
-                        title={t.workspace?.delete || 'Delete'}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                </div>
+                    </div>
+                  </CardContent>
+                </Card>
               );
             })}
 
             {workspaces.length === 0 && (
-              <div className="col-span-full py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
+              <div className="py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
                 <p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
               </div>
             )}
           </div>
 
           <Pagination
-            currentPage={currentPage}
-            totalCount={totalItems}
-            limit={limit}
-            onPageChange={setCurrentPage}
-            onLimitChange={setLimit}
-            pageSizeOptions={[9, 12, 24]} // Custom options for Workspaces
-          />
-        </>
+              currentPage={currentPage}
+              totalCount={totalItems}
+              limit={limit}
+              onPageChange={setCurrentPage}
+              onLimitChange={setLimit}
+              pageSizeOptions={[10, 20, 50]}
+            />
+        </div>
       )}
 
-      {/* Delete Modal */}
-      {deleteModal.isOpen && deleteModal.workspace && (
-        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 max-w-md w-full shadow-2xl border border-slate-200 dark:border-slate-800">
-            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{t.workspace?.deleteTitle || 'Delete Workspace'}</h3>
-            <p className="text-slate-600 dark:text-slate-400 mb-5 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>
-            <input
-              type="text"
-              value={deleteInput}
-              onChange={(e) => setDeleteInput(e.target.value)}
-              placeholder={deleteModal.workspace.name}
-              className="w-full border rounded-xl p-3 mb-6 bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-red-500 transition-shadow"
-            />
-            <div className="flex justify-end gap-3">
+      {deleteModal.workspace && (
+        <Modal
+          isOpen={deleteModal.isOpen}
+          onClose={() => {
+            setDeleteModal({ isOpen: false, workspace: null });
+            setDeleteInput('');
+          }}
+          title={t.workspace?.deleteTitle || 'Delete Workspace'}
+          maxWidth="max-w-md"
+          footer={
+            <>
               <Button 
                 variant="secondary"
-                onClick={() => { setDeleteModal({ isOpen: false, workspace: null }); setDeleteInput(''); }} 
+                onClick={() => { 
+                  setDeleteModal({ isOpen: false, workspace: null }); 
+                  setDeleteInput(''); 
+                }} 
                 className="rounded-xl font-semibold"
               >
-                {t.workspace?.cancel || 'Cancel'}
+                {t.actions?.cancel || 'Cancel'}
               </Button>
               <Button 
                 variant="destructive"
@@ -252,11 +248,24 @@ export default function Workspaces() {
                 onClick={confirmDelete} 
                 className="rounded-xl font-semibold"
               >
-                {t.workspace?.delete || 'Delete'}
+                {t.actions?.delete || 'Delete'}
               </Button>
-            </div>
+            </>
+          }
+        >
+          <div 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>
+            
+            <Input
+              type="text"
+              value={deleteInput}
+              onChange={(e) => setDeleteInput(e.target.value)}
+              placeholder={deleteModal.workspace.name}
+            />
           </div>
-        </div>
+        </Modal>
       )}
     </div>
   );