refactor(frontend): share list empty state card

src/pages/Workspaces.tsx

@@ -10,8 +10,9 @@ import {
   canWorkspace,
   type WorkspaceRole,
 } from '../lib/permissions';
-import FilterBar from '../components/FilterBar';
-import { ListPageSkeleton } from '../components/ListPageSkeleton';
+import FilterBar from '../components/FilterBar';
+import EmptyStateCard from '../components/EmptyStateCard';
+import { ListPageSkeleton } from '../components/ListPageSkeleton';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { Card, CardContent, CardTitle } from '../components/ui/card';
@@ -229,15 +230,13 @@ export default function Workspaces() {
               );
             })}
 
-            {workspaces.length === 0 && (
-              <div className="flex flex-col flex-1 rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
-                <LayoutDashboard className="mx-auto mb-3 h-12 w-12 text-slate-300 dark:text-slate-700" />
-                <h3 className="text-lg font-medium text-slate-900 dark:text-white">{t.workspace.noWorkspace}</h3>
-                <p className="mt-1 text-slate-500 dark:text-slate-400">
-                  {searchQuery ? t.workspace.noWorkspaceSearch : t.workspace?.emptyState}
-                </p>
-              </div>
-            )}
+            {workspaces.length === 0 && (
+              <EmptyStateCard
+                icon={LayoutDashboard}
+                title={t.workspace.noWorkspace}
+                description={searchQuery ? t.workspace.noWorkspaceSearch : t.workspace?.emptyState || t.workspace.noWorkspace}
+              />
+            )}
           </div>
 
           <Pagination