fix(workspaces): preserve workspace thumbnail layout
This commit is contained in:
@@ -10,9 +10,9 @@ import {
|
|||||||
canWorkspace,
|
canWorkspace,
|
||||||
type WorkspaceRole,
|
type WorkspaceRole,
|
||||||
} from '../lib/permissions';
|
} from '../lib/permissions';
|
||||||
import FilterBar from '../components/FilterBar';
|
import FilterBar from '../components/FilterBar';
|
||||||
import { ListPageSkeleton } from '../components/ListPageSkeleton';
|
import { ListPageSkeleton } from '../components/ListPageSkeleton';
|
||||||
import { Button } from '../components/ui/button';
|
import { Button } from '../components/ui/button';
|
||||||
import { Input } from '../components/ui/input';
|
import { Input } from '../components/ui/input';
|
||||||
import { Card, CardContent, CardTitle } from '../components/ui/card';
|
import { Card, CardContent, CardTitle } from '../components/ui/card';
|
||||||
import { Pagination } from '../components/Pagination';
|
import { Pagination } from '../components/Pagination';
|
||||||
@@ -116,58 +116,60 @@ export default function Workspaces() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto flex min-h-full max-w-7xl flex-col p-4 md:p-6">
|
<div className="mx-auto flex min-h-full max-w-7xl flex-col p-4 md:p-6">
|
||||||
<div className="flex flex-1 flex-col gap-5">
|
<div className="flex flex-1 flex-col gap-5">
|
||||||
<div className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-6">
|
<div className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-6">
|
||||||
<div className="flex items-start justify-between gap-4">
|
<div className="flex items-start justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
|
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
|
||||||
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t.workspace?.subtitle || 'Manage your workspaces'}</p>
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t.workspace?.subtitle || 'Manage your workspaces'}</p>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => navigate('/workspaces/create')}
|
onClick={() => navigate('/workspaces/create')}
|
||||||
size="icon"
|
size="icon"
|
||||||
className="shrink-0 shadow-sm"
|
className="shrink-0 shadow-sm"
|
||||||
title={t.workspace?.createNew || 'Create New'}
|
title={t.workspace?.createNew || 'Create New'}
|
||||||
>
|
>
|
||||||
<Plus className="h-5 w-5" />
|
<Plus className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
|
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
|
||||||
<FilterBar
|
<FilterBar
|
||||||
searchQuery={searchQuery}
|
searchQuery={searchQuery}
|
||||||
setSearchQuery={setSearchQuery}
|
setSearchQuery={setSearchQuery}
|
||||||
ordering={ordering}
|
ordering={ordering}
|
||||||
setOrdering={setOrdering}
|
setOrdering={setOrdering}
|
||||||
orderingOptions={orderingOptions}
|
orderingOptions={orderingOptions}
|
||||||
searchPlaceholder={t.workspace?.searchPlaceholder || 'Search...'}
|
searchPlaceholder={t.workspace?.searchPlaceholder || 'Search...'}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<ListPageSkeleton variant="list" />
|
<ListPageSkeleton variant="list" />
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-1 flex-col gap-6">
|
<div className="flex flex-1 flex-col gap-6">
|
||||||
<div className="flex flex-1 flex-col gap-4">
|
<div className="flex flex-1 flex-col gap-4">
|
||||||
{workspaces.map((workspace) => {
|
{workspaces.map((workspace) => {
|
||||||
const canDeleteWorkspace = canWorkspace(workspace.my_role, WORKSPACE_DELETE);
|
const canDeleteWorkspace = canWorkspace(workspace.my_role, WORKSPACE_DELETE);
|
||||||
const canEditWorkspace = canWorkspace(workspace.my_role, WORKSPACE_EDIT);
|
const canEditWorkspace = canWorkspace(workspace.my_role, WORKSPACE_EDIT);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<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">
|
<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">
|
<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-1">
|
||||||
<div className="flex items-center gap-3 mb-2">
|
<div className="flex items-center gap-3 mb-2">
|
||||||
<div className="h-9 w-9 shrink-0 overflow-hidden rounded-lg bg-slate-100 dark:bg-slate-600 flex items-center justify-center text-sm font-semibold text-slate-700 dark:text-slate-200">
|
{workspace.thumbnail ? (
|
||||||
{workspace.thumbnail ? (
|
<div className="h-9 w-9 shrink-0 overflow-hidden rounded-lg flex items-center justify-center text-sm font-semibold text-slate-700 dark:text-slate-200">
|
||||||
<img src={workspace.thumbnail} alt={workspace.name} className="h-full w-full object-cover" />
|
<img src={workspace.thumbnail} alt={workspace.name} className="h-full w-full object-cover" />
|
||||||
) : (
|
</div>
|
||||||
workspace.name.trim().charAt(0).toUpperCase() || "W"
|
) : (
|
||||||
)}
|
<div className="h-9 w-9 shrink-0 overflow-hidden rounded-lg bg-slate-100 dark:bg-slate-600 flex items-center justify-center text-sm font-semibold text-slate-700 dark:text-slate-200">
|
||||||
</div>
|
{workspace.name.trim().charAt(0).toUpperCase() || "W"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<CardTitle className="text-lg line-clamp-1">
|
<CardTitle className="text-lg line-clamp-1">
|
||||||
{workspace.name}
|
{workspace.name}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
@@ -215,31 +217,31 @@ export default function Workspaces() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{workspaces.length === 0 && (
|
{workspaces.length === 0 && (
|
||||||
<div className="flex flex-1 rounded-3xl border-2 border-dashed border-slate-200 bg-white py-16 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
<div className="flex flex-1 rounded-3xl border-2 border-dashed border-slate-200 bg-white py-16 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
||||||
<div className="flex flex-col items-center justify-center">
|
<div className="flex flex-col items-center justify-center">
|
||||||
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
|
<p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Pagination
|
<Pagination
|
||||||
currentPage={currentPage}
|
currentPage={currentPage}
|
||||||
totalCount={totalItems}
|
totalCount={totalItems}
|
||||||
limit={limit}
|
limit={limit}
|
||||||
onPageChange={setCurrentPage}
|
onPageChange={setCurrentPage}
|
||||||
onLimitChange={setLimit}
|
onLimitChange={setLimit}
|
||||||
pageSizeOptions={[10, 20, 50]}
|
pageSizeOptions={[10, 20, 50]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{deleteModal.workspace && (
|
{deleteModal.workspace && (
|
||||||
<Modal
|
<Modal
|
||||||
isOpen={deleteModal.isOpen}
|
isOpen={deleteModal.isOpen}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setDeleteModal({ isOpen: false, workspace: null });
|
setDeleteModal({ isOpen: false, workspace: null });
|
||||||
|
|||||||
Reference in New Issue
Block a user