Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workspaces): add thumbnail UI across workspace surfaces

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-28 11:38:35 +03:30
parent 599e25e836
commit f45038d398
5 changed files with 440 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/api/workspaces.ts
View File

@@ -2,12 +2,13 @@ import { authFetch } from "./client";
export interface Workspace { export interface Workspace {
id: string; id: string;
name: string; name: string;
description?: string; description?: string;
owner?: string; thumbnail?: string | null;
my_role?: 'owner' | 'admin' | 'member' | 'guest'; owner?: string;
[key: string]: any; my_role?: 'owner' | 'admin' | 'member' | 'guest';
} [key: string]: any;
}
export interface PaginatedResponse<T> { export interface PaginatedResponse<T> {
count: number; count: number;
@@ -77,11 +78,36 @@ export const getWorkspace = async (id: string): Promise<Workspace> => {
return await response.json(); return await response.json();
}; };
export const createWorkspace = async (data: { name: string; description: string; members?: any[] }): Promise<Workspace> => { export const createWorkspace = async (data: {
const response = await authFetch('/api/workspaces/', { name: string;
method: 'POST', description: string;
body: JSON.stringify(data), members?: any[];
}); thumbnail?: File | null;
}): Promise<Workspace> => {
const hasFile = data.thumbnail instanceof File;
const body = hasFile
? (() => {
const formData = new FormData();
formData.append("name", data.name);
formData.append("description", data.description);
if (Array.isArray(data.members)) {
formData.append("members", JSON.stringify(data.members));
}
if (data.thumbnail) {
formData.append("thumbnail", data.thumbnail);
}
return formData;
})()
: JSON.stringify({
name: data.name,
description: data.description,
members: data.members,
});
const response = await authFetch('/api/workspaces/', {
method: 'POST',
body,
});
if (!response.ok) { if (!response.ok) {
const errorData = await response.json(); const errorData = await response.json();
@@ -90,11 +116,33 @@ export const createWorkspace = async (data: { name: string; description: string;
return await response.json(); return await response.json();
}; };
export const updateWorkspace = async (id: string, data: { name?: string; description?: string }): Promise<Workspace> => { export const updateWorkspace = async (
const response = await authFetch(`/api/workspaces/${id}/`, { id: string,
method: 'PATCH', data: {
body: JSON.stringify(data), name?: string;
}); description?: string;
thumbnail?: File | null;
clear_thumbnail?: boolean;
},
): Promise<Workspace> => {
const hasFile = data.thumbnail instanceof File;
const shouldClear = Boolean(data.clear_thumbnail);
const useForm = hasFile || shouldClear;
const body = useForm
? (() => {
const formData = new FormData();
if (data.name !== undefined) formData.append("name", data.name);
if (data.description !== undefined) formData.append("description", data.description);
if (data.thumbnail) formData.append("thumbnail", data.thumbnail);
if (shouldClear) formData.append("clear_thumbnail", "true");
return formData;
})()
: JSON.stringify(data);
const response = await authFetch(`/api/workspaces/${id}/`, {
method: 'PATCH',
body,
});
if (!response.ok) { if (!response.ok) {
const errorData = await response.json(); const errorData = await response.json();

27
src/components/WorkspaceSelector.tsx
View File

@@ -50,10 +50,9 @@ export const WorkspaceSelector: React.FC = () => {
const handleWorkspaceEdited = ((e: CustomEvent) => { const handleWorkspaceEdited = ((e: CustomEvent) => {
// آپدیت نام کارتابل در نوبار در صورتی که کارتابل فعال ویرایش شده باشد // آپدیت نام کارتابل در نوبار در صورتی که کارتابل فعال ویرایش شده باشد
if (activeWorkspace?.id === e.detail?.id) { if (activeWorkspace?.id === e.detail?.id) {
setActiveWorkspace({ setActiveWorkspace({
...activeWorkspace, ...activeWorkspace,
name: e.detail.name, ...e.detail,
description: e.detail.description
} as Workspace); } as Workspace);
} }
refreshWorkspacesList(); refreshWorkspacesList();
@@ -123,9 +122,13 @@ export const WorkspaceSelector: React.FC = () => {
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
> >
<div className="w-6 h-6 flex items-center justify-center bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-md"> <div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400">
{activeWorkspace?.name?.charAt(0) || <Briefcase className="w-4 h-4" />} {activeWorkspace?.thumbnail ? (
</div> <img src={activeWorkspace.thumbnail} alt={activeWorkspace?.name || "Workspace"} className="h-full w-full object-cover" />
) : (
activeWorkspace?.name?.charAt(0)?.toUpperCase() || <Briefcase className="w-4 h-4" />
)}
</div>
<span className="max-w-30 truncate"> <span className="max-w-30 truncate">
{activeWorkspace?.name || t.workspace?.title || "Workspaces"} {activeWorkspace?.name || t.workspace?.title || "Workspaces"}
</span> </span>
@@ -159,9 +162,13 @@ export const WorkspaceSelector: React.FC = () => {
className="w-full flex items-center justify-between px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" className="w-full flex items-center justify-between px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
> >
<div className="flex items-center gap-2 truncate"> <div className="flex items-center gap-2 truncate">
<div className="w-6 h-6 flex items-center justify-center bg-slate-100 dark:bg-slate-800 rounded-md font-medium"> <div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-slate-100 font-medium dark:bg-slate-800">
{ws.name.charAt(0)} {ws.thumbnail ? (
</div> <img src={ws.thumbnail} alt={ws.name} className="h-full w-full object-cover" />
) : (
ws.name.charAt(0).toUpperCase()
)}
</div>
<span className="truncate">{ws.name}</span> <span className="truncate">{ws.name}</span>
</div> </div>
{activeWorkspace?.id === ws.id && ( {activeWorkspace?.id === ws.id && (

88
src/pages/WorkspaceCreate.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef, Fragment } from 'react'; import React, { useState, useEffect, useRef, Fragment } from 'react';
import { useBlocker, useNavigate } from 'react-router-dom'; import { useBlocker, useNavigate } from 'react-router-dom';
import { useTranslation } from '../hooks/useTranslation'; import { useTranslation } from '../hooks/useTranslation';
import { AlertCircle, UserPlus, Trash2, Shield, Loader2 } from 'lucide-react'; import { AlertCircle, UserPlus, Trash2, Shield, Loader2, UploadCloud } from 'lucide-react';
import { Dialog, Transition } from '@headlessui/react'; import { Dialog, Transition } from '@headlessui/react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { createWorkspace } from '../api/workspaces'; import { createWorkspace } from '../api/workspaces';
@@ -40,6 +40,8 @@ export default function WorkspaceCreate() {
// Workspace Info States // Workspace Info States
const [name, setName] = useState(''); const [name, setName] = useState('');
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
// Members States (Local) // Members States (Local)
@@ -54,8 +56,36 @@ export default function WorkspaceCreate() {
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null); const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null); const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0; const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0 || !!thumbnailFile;
useEffect(() => {
if (!thumbnailFile) {
setThumbnailPreview(null);
return;
}
const objectUrl = URL.createObjectURL(thumbnailFile);
setThumbnailPreview(objectUrl);
return () => URL.revokeObjectURL(objectUrl);
}, [thumbnailFile]);
const handleThumbnailChange = (file: File | null) => {
if (!file) {
setThumbnailFile(null);
return;
}
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
if (!allowedTypes.includes(file.type)) {
toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
return;
}
const maxBytes = 2 * 1024 * 1024;
if (file.size > maxBytes) {
toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
return;
}
setThumbnailFile(file);
};
useEffect(() => { useEffect(() => {
const handleBeforeUnload = (e: BeforeUnloadEvent) => { const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -121,7 +151,8 @@ export default function WorkspaceCreate() {
const payload = { const payload = {
name, name,
description, description,
members: members.map(m => ({ user_id: m.user.id, role: m.role })) members: members.map(m => ({ user_id: m.user.id, role: m.role })),
thumbnail: thumbnailFile,
}; };
const newWorkspace = await createWorkspace(payload); const newWorkspace = await createWorkspace(payload);
@@ -178,13 +209,13 @@ export default function WorkspaceCreate() {
const isFirstOwner = true; const isFirstOwner = true;
return ( return (
<div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6"> <div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6">
<h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0"> <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0">
{t.workspace?.createTitle || "Create Workspace"} {t.workspace?.createTitle || "Create Workspace"}
</h1> </h1>
<div className="flex flex-col gap-4 lg:min-h-0 lg:flex-1 lg:flex-row sm:gap-6"> <div className="flex flex-col gap-4 lg:min-h-0 lg:flex-1 lg:flex-row sm:gap-6">
<div className="w-full shrink-0 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-1/3 lg:max-w-md lg:flex-col lg:overflow-y-auto"> <div className="w-full shrink-0 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-1/3 lg:max-w-md lg:flex-col lg:overflow-y-auto">
<form onSubmit={handleSubmit} className="flex flex-col h-full p-6"> <form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
<div className="mb-4"> <div className="mb-4">
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"> <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
@@ -210,6 +241,45 @@ export default function WorkspaceCreate() {
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none" className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
/> />
</div> </div>
<div className="mb-6">
<label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
{t.workspace?.thumbnailLabel || "Thumbnail"}
</label>
<label className="mt-3 flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-100 text-5xl font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
{thumbnailPreview ? (
<img
src={thumbnailPreview}
alt={name || "Workspace"}
className="h-full w-full object-cover"
/>
) : (
<div className="flex flex-col items-center gap-2 text-center">
<UploadCloud className="h-12 w-12 text-slate-500 dark:text-slate-400" />
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">
{t.workspace?.uploadImage || "Click to upload image"}
</span>
</div>
)}
<Input
type="file"
accept=".jpg,.jpeg,.png,.webp"
className="hidden"
onChange={(e) => handleThumbnailChange(e.target.files?.[0] || null)}
/>
</label>
{thumbnailFile && (
<button
type="button"
onClick={() => setThumbnailFile(null)}
className="mt-2 text-xs text-red-600 hover:underline dark:text-red-400"
>
{t.workspace?.removeImage || "Remove image"}
</button>
)}
</div>
<div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0"> <div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
<Button <Button
type="button" type="button"
@@ -228,7 +298,7 @@ export default function WorkspaceCreate() {
</form> </form>
</div> </div>
<div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden"> <div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden">
<div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10"> <div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4"> <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
{ t.workspace?.members || "Members" } { t.workspace?.members || "Members" }
@@ -322,7 +392,7 @@ export default function WorkspaceCreate() {
</div> </div>
{/* لیست اعضا (با قابلیت اسکرول) */} {/* لیست اعضا (با قابلیت اسکرول) */}
<div className="space-y-3 bg-slate-50/30 p-6 dark:bg-slate-900/30 lg:flex-1 lg:overflow-y-auto"> <div className="space-y-3 bg-slate-50/30 p-6 dark:bg-slate-900/30 lg:flex-1 lg:overflow-y-auto">
{members.map((m) => { {members.map((m) => {
return ( return (
<div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg gap-3 shadow-sm hover:border-blue-200 dark:hover:border-blue-800 transition-colors"> <div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg gap-3 shadow-sm hover:border-blue-200 dark:hover:border-blue-800 transition-colors">

397
src/pages/WorkspaceEdit.tsx
View File

@@ -1,11 +1,11 @@
import React, { useState, useEffect, useRef, Fragment, useMemo, useCallback } from 'react'; import React, { useState, useEffect, useRef, Fragment, useMemo, useCallback } from 'react';
import { useBlocker, useNavigate, useParams } from 'react-router-dom'; import { useBlocker, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from '../hooks/useTranslation'; import { useTranslation } from '../hooks/useTranslation';
import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react'; import { AlertCircle, UserPlus, Trash2, Shield, UploadCloud } from 'lucide-react';
import { Dialog, Transition } from '@headlessui/react'; import { Dialog, Transition } from '@headlessui/react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { getPriceUnits, getWorkspaceUserRates, type PriceUnit, type WorkspaceUserRate } from '../api/rates'; import { getPriceUnits, getWorkspaceUserRates, type PriceUnit, type WorkspaceUserRate } from '../api/rates';
import { import {
updateWorkspace, updateWorkspace,
addWorkspaceMembership, addWorkspaceMembership,
removeWorkspaceMembership, removeWorkspaceMembership,
@@ -14,21 +14,21 @@ import {
getWorkspace getWorkspace
} from '../api/workspaces'; } from '../api/workspaces';
import { searchUserByExactMobile, type SearchedUser } from '../api/users'; import { searchUserByExactMobile, type SearchedUser } from '../api/users';
import { useAppContext } from '../context/AppContext'; import { useAppContext } from '../context/AppContext';
import { import {
WORKSPACE_EDIT, WORKSPACE_EDIT,
WORKSPACE_MEMBERS_ADD, WORKSPACE_MEMBERS_ADD,
WORKSPACE_MEMBERS_CHANGE_ROLE, WORKSPACE_MEMBERS_CHANGE_ROLE,
canChangeWorkspaceMember, canChangeWorkspaceMember,
canWorkspace, canWorkspace,
type WorkspaceRole, type WorkspaceRole,
} from '../lib/permissions'; } from '../lib/permissions';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { InfiniteScroll } from '../components/InfiniteScroll'; import { InfiniteScroll } from '../components/InfiniteScroll';
import { Select } from '../components/ui/Select'; import { Select } from '../components/ui/Select';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
import { TextAreaInput } from '../components/ui/TextAreaInput'; import { TextAreaInput } from '../components/ui/TextAreaInput';
import WorkspaceMemberRateFields from '../components/rates/WorkspaceMemberRateFields'; import WorkspaceMemberRateFields from '../components/rates/WorkspaceMemberRateFields';
const toEnglishDigits = (str: string) => { const toEnglishDigits = (str: string) => {
return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString()) return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
@@ -55,12 +55,16 @@ export default function EditWorkspace() {
// Workspace Info States // Workspace Info States
const [name, setName] = useState(''); const [name, setName] = useState('');
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const [myRole, setMyRole] = useState<WorkspaceRole>('member'); const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
const [clearThumbnail, setClearThumbnail] = useState(false);
const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
const [myRole, setMyRole] = useState<WorkspaceRole>('member');
const [workspaceOwnerId, setWorkspaceOwnerId] = useState<string>(''); const [workspaceOwnerId, setWorkspaceOwnerId] = useState<string>('');
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const [workspaceRates, setWorkspaceRates] = useState<WorkspaceUserRate[]>([]); const [workspaceRates, setWorkspaceRates] = useState<WorkspaceUserRate[]>([]);
const [priceUnits, setPriceUnits] = useState<PriceUnit[]>([]); const [priceUnits, setPriceUnits] = useState<PriceUnit[]>([]);
// Members States // Members States
const [members, setMembers] = useState<any[]>([]); const [members, setMembers] = useState<any[]>([]);
@@ -79,7 +83,7 @@ export default function EditWorkspace() {
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null); const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null); const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const [initialData, setInitialData] = useState({ const [initialData, setInitialData] = useState({
name: '', name: '',
@@ -91,9 +95,39 @@ export default function EditWorkspace() {
const isNameChanged = name.trim() !== (initialData.name || '').trim(); const isNameChanged = name.trim() !== (initialData.name || '').trim();
const isDescChanged = description.trim() !== (initialData.description || '').trim(); const isDescChanged = description.trim() !== (initialData.description || '').trim();
const isImageChanged = !!thumbnailFile || clearThumbnail;
return isNameChanged || isDescChanged; return isNameChanged || isDescChanged || isImageChanged;
}, [name, description, initialData, isLoading]); }, [name, description, initialData, isLoading, thumbnailFile, clearThumbnail]);
useEffect(() => {
if (!thumbnailFile) {
setThumbnailPreview(null);
return;
}
const objectUrl = URL.createObjectURL(thumbnailFile);
setThumbnailPreview(objectUrl);
return () => URL.revokeObjectURL(objectUrl);
}, [thumbnailFile]);
const handleThumbnailChange = (file: File | null) => {
if (!file) {
setThumbnailFile(null);
return;
}
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
if (!allowedTypes.includes(file.type)) {
toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
return;
}
const maxBytes = 2 * 1024 * 1024;
if (file.size > maxBytes) {
toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
return;
}
setThumbnailFile(file);
setClearThumbnail(false);
};
useEffect(() => { useEffect(() => {
const handleBeforeUnload = (e: BeforeUnloadEvent) => { const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -113,16 +147,16 @@ export default function EditWorkspace() {
return false; return false;
}); });
useEffect(() => { useEffect(() => {
if (id) loadData(); if (id) loadData();
}, [id]); }, [id]);
useEffect(() => { useEffect(() => {
if (!isLoading && id && !canWorkspace(myRole, WORKSPACE_EDIT)) { if (!isLoading && id && !canWorkspace(myRole, WORKSPACE_EDIT)) {
toast.error("You do not have permission to edit this workspace."); toast.error("You do not have permission to edit this workspace.");
navigate(`/workspaces/${id}`); navigate(`/workspaces/${id}`);
} }
}, [id, isLoading, myRole, navigate]); }, [id, isLoading, myRole, navigate]);
const loadData = async () => { const loadData = async () => {
try { try {
@@ -130,20 +164,23 @@ export default function EditWorkspace() {
const workspaceData = await getWorkspace(id!); const workspaceData = await getWorkspace(id!);
setName(workspaceData.name); setName(workspaceData.name);
setDescription(workspaceData.description || ''); setDescription(workspaceData.description || '');
setThumbnailUrl(workspaceData.thumbnail || null);
setThumbnailFile(null);
setClearThumbnail(false);
setMyRole(workspaceData.my_role || 'member'); setMyRole(workspaceData.my_role || 'member');
setWorkspaceOwnerId(workspaceData.owner || ''); setWorkspaceOwnerId(workspaceData.owner || '');
const [membersData, ratesData, unitsData] = await Promise.all([ const [membersData, ratesData, unitsData] = await Promise.all([
fetchWorkspaceMemberships({ workspace: id!, limit: LIMIT, offset: 0 }), fetchWorkspaceMemberships({ workspace: id!, limit: LIMIT, offset: 0 }),
getWorkspaceUserRates(id!), getWorkspaceUserRates(id!),
getPriceUnits(), getPriceUnits(),
]); ]);
const results = membersData.results || (Array.isArray(membersData) ? membersData : []); const results = membersData.results || (Array.isArray(membersData) ? membersData : []);
setMembers(results); setMembers(results);
setWorkspaceRates(ratesData.results || []); setWorkspaceRates(ratesData.results || []);
setPriceUnits(unitsData.results || []); setPriceUnits(unitsData.results || []);
setOffset(LIMIT); setOffset(LIMIT);
// Robust hasMore check: use `.next` if available, otherwise check if array filled the limit // Robust hasMore check: use `.next` if available, otherwise check if array filled the limit
setHasMore(membersData.next ? true : results.length >= LIMIT); setHasMore(membersData.next ? true : results.length >= LIMIT);
@@ -225,10 +262,15 @@ export default function EditWorkspace() {
if (!name.trim() || !id) return; if (!name.trim() || !id) return;
try { try {
setIsSaving(true); setIsSaving(true);
await updateWorkspace(id, { name, description }); const updatedWorkspace = await updateWorkspace(id, {
name,
description,
thumbnail: thumbnailFile,
clear_thumbnail: clearThumbnail,
});
toast.success(t.workspace?.toast?.successUpdate || "Workspace updated successfully."); toast.success(t.workspace?.toast?.successUpdate || "Workspace updated successfully.");
window.dispatchEvent(new CustomEvent('workspace_edited', { window.dispatchEvent(new CustomEvent('workspace_edited', {
detail: { id, name, description } detail: updatedWorkspace
})); }));
navigate('/workspaces'); navigate('/workspaces');
} catch (error) { } catch (error) {
@@ -241,11 +283,11 @@ export default function EditWorkspace() {
const handleAddMember = async () => { const handleAddMember = async () => {
if (!searchResult || !id) return; if (!searchResult || !id) return;
try { try {
const newMembership = await addWorkspaceMembership({ const newMembership = await addWorkspaceMembership({
workspace: id, workspace: id,
user: String(searchResult.id), user: String(searchResult.id),
role: newMemberRole role: newMemberRole
}); });
setMembers([newMembership, ...members]); setMembers([newMembership, ...members]);
toast.success(t.workspace?.toast?.successAdd || "Member added successfully."); toast.success(t.workspace?.toast?.successAdd || "Member added successfully.");
setSearchQuery(''); setSearchQuery('');
@@ -283,27 +325,27 @@ export default function EditWorkspace() {
} }
}; };
const canManageMembers = canWorkspace(myRole, WORKSPACE_MEMBERS_CHANGE_ROLE); const canManageMembers = canWorkspace(myRole, WORKSPACE_MEMBERS_CHANGE_ROLE);
const isFirstOwner = currentUserId === workspaceOwnerId; const isFirstOwner = currentUserId === workspaceOwnerId;
const isOwner = myRole === "owner"; const isOwner = myRole === "owner";
const roleOptions = (allowOwnerRole: boolean, allowAdminRole: boolean) => [ const roleOptions = (allowOwnerRole: boolean, allowAdminRole: boolean) => [
...(allowOwnerRole ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []), ...(allowOwnerRole ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
...(allowAdminRole ? [{ value: "admin", label: t.workspace?.roles?.admin || "Admin" }] : []), ...(allowAdminRole ? [{ value: "admin", label: t.workspace?.roles?.admin || "Admin" }] : []),
{ value: "member", label: t.workspace?.roles?.member || "Member" }, { value: "member", label: t.workspace?.roles?.member || "Member" },
{ value: "guest", label: t.workspace?.roles?.guest || "Guest" }, { value: "guest", label: t.workspace?.roles?.guest || "Guest" },
]; ];
if (isLoading) return <div className="p-8 text-center">{t.workspace?.loading || "Loading..."}</div>; if (isLoading) return <div className="p-8 text-center">{t.workspace?.loading || "Loading..."}</div>;
return ( return (
<div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6"> <div className="absolute inset-0 flex flex-col overflow-y-auto bg-slate-50 p-4 dark:bg-slate-900 lg:overflow-hidden sm:p-6">
<h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0"> <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0">
{t.workspace?.editTitle || "Edit Workspace"} {t.workspace?.editTitle || "Edit Workspace"}
</h1> </h1>
<div className="flex flex-col gap-4 lg:min-h-0 lg:flex-1 lg:flex-row sm:gap-6"> <div className="flex flex-col gap-4 lg:min-h-0 lg:flex-1 lg:flex-row sm:gap-6">
<div className="w-full shrink-0 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-1/3 lg:max-w-md lg:flex-col lg:overflow-y-auto"> <div className="w-full shrink-0 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-1/3 lg:max-w-md lg:flex-col lg:overflow-y-auto">
<form onSubmit={handleSubmit} className="flex flex-col h-full p-6"> <form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
<div className="mb-4"> <div className="mb-4">
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1"> <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
@@ -328,6 +370,55 @@ export default function EditWorkspace() {
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none" className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
/> />
</div> </div>
<div className="mb-6">
<label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
{t.workspace?.thumbnailLabel || "Thumbnail"}
</label>
<label className="mt-3 flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-100 text-5xl font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
{thumbnailPreview ? (
<img
src={thumbnailPreview}
alt={name || "Workspace"}
className="h-full w-full object-cover"
/>
) : !clearThumbnail && thumbnailUrl ? (
<img
src={thumbnailUrl}
alt={name || "Workspace"}
className="h-full w-full object-cover"
/>
) : (
<div className="flex flex-col items-center gap-2 text-center">
<UploadCloud className="h-10 w-10 text-slate-500 dark:text-slate-400" />
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">
{t.workspace?.uploadImage || "Click to upload image"}
</span>
</div>
)}
<input
type="file"
accept=".jpg,.jpeg,.png,.webp"
className="hidden"
onChange={(e) => handleThumbnailChange(e.target.files?.[0] || null)}
/>
</label>
{(thumbnailUrl || thumbnailFile) && (
<button
type="button"
onClick={() => {
setThumbnailFile(null);
setClearThumbnail(true);
}}
className="mt-2 text-xs text-red-600 hover:underline dark:text-red-400"
>
{t.workspace?.removeImage || "Remove image"}
</button>
)}
</div>
<div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0"> <div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
<Button type="button" variant="ghost" onClick={() => navigate('/workspaces')}> <Button type="button" variant="ghost" onClick={() => navigate('/workspaces')}>
{t.actions?.cancel || "Cancel"} {t.actions?.cancel || "Cancel"}
@@ -339,14 +430,14 @@ export default function EditWorkspace() {
</form> </form>
</div> </div>
<div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden"> <div className="w-full rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:flex lg:w-2/3 lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden">
<div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10"> <div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4"> <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
{ t.workspace?.members || "Members" } { t.workspace?.members || "Members" }
</h2> </h2>
{canWorkspace(myRole, WORKSPACE_MEMBERS_ADD) && ( {canWorkspace(myRole, WORKSPACE_MEMBERS_ADD) && (
<div className="space-y-3"> <div className="space-y-3">
<Input <Input
type="text" type="text"
placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."} placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
@@ -387,13 +478,13 @@ export default function EditWorkspace() {
<div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0"> <div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
<Select <Select
value={newMemberRole} value={newMemberRole}
onChange={(val) => setNewMemberRole(val as any)} onChange={(val) => setNewMemberRole(val as any)}
options={[ options={[
...roleOptions(isFirstOwner, isOwner), ...roleOptions(isFirstOwner, isOwner),
]} ]}
className="flex-1 sm:flex-none" className="flex-1 sm:flex-none"
buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm" buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm"
/> />
<Button <Button
@@ -415,7 +506,7 @@ export default function EditWorkspace() {
)} )}
</div> </div>
<div className="space-y-3 bg-slate-50/30 p-6 dark:bg-slate-900/30 lg:flex-1 lg:overflow-y-auto"> <div className="space-y-3 bg-slate-50/30 p-6 dark:bg-slate-900/30 lg:flex-1 lg:overflow-y-auto">
<InfiniteScroll <InfiniteScroll
onLoadMore={loadMoreMembers} onLoadMore={loadMoreMembers}
hasMore={hasMore} hasMore={hasMore}
@@ -425,21 +516,21 @@ export default function EditWorkspace() {
> >
{members.map((m) => { {members.map((m) => {
const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId; const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
const canChangeThisUserRole = canChangeWorkspaceMember({ const canChangeThisUserRole = canChangeWorkspaceMember({
actorRole: myRole, actorRole: myRole,
actorUserId: currentUserId, actorUserId: currentUserId,
targetRole: m.role, targetRole: m.role,
targetUserId: m.user?.id, targetUserId: m.user?.id,
ownerUserId: workspaceOwnerId, ownerUserId: workspaceOwnerId,
}); });
return ( return (
<div key={m.id} className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-3 shadow-sm transition-colors hover:border-blue-200 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-blue-800"> <div key={m.id} className="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-3 shadow-sm transition-colors hover:border-blue-200 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-blue-800">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{m.user?.profile_picture ? ( {m.user?.profile_picture ? (
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" /> <img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
) : ( ) : (
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm shadow-sm"> <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm shadow-sm">
{m.user?.name?.[0] || m.user?.first_name?.[0] || "U"} {m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
</div> </div>
@@ -448,57 +539,57 @@ export default function EditWorkspace() {
<p className="text-sm font-medium text-slate-900 dark:text-slate-100"> <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
{m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'} {m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
</p> </p>
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p> <p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3 self-end sm:self-auto"> <div className="flex items-center gap-3 self-end sm:self-auto">
{canChangeThisUserRole ? ( {canChangeThisUserRole ? (
<Select <Select
value={m.role} value={m.role}
onChange={(val) => handleChangeRole(m.id, val)} onChange={(val) => handleChangeRole(m.id, val)}
options={roleOptions(isFirstOwner, isOwner)} options={roleOptions(isFirstOwner, isOwner)}
buttonClassName="w-[110px] px-3 py-1.5 text-sm" buttonClassName="w-[110px] px-3 py-1.5 text-sm"
/> />
) : ( ) : (
<span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1"> <span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
{m.role === 'owner' && <Shield className="w-3 h-3" />} {m.role === 'owner' && <Shield className="w-3 h-3" />}
{m.role && m.role in t.workspace.roles {m.role && m.role in t.workspace.roles
? t.workspace.roles[m.role as keyof typeof t.workspace.roles] ? t.workspace.roles[m.role as keyof typeof t.workspace.roles]
: m.role || "-"} : m.role || "-"}
</span> </span>
)} )}
{canChangeThisUserRole && ( {canChangeThisUserRole && (
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => openDeleteModal(m.id)} onClick={() => openDeleteModal(m.id)}
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10" className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
title={t.workspace?.removeMemberTitle || "Remove member"} title={t.workspace?.removeMemberTitle || "Remove member"}
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
)} )}
</div> </div>
</div> </div>
<div className="flex flex-col gap-2 border-t border-slate-100 pt-3 dark:border-slate-800 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-2 border-t border-slate-100 pt-3 dark:border-slate-800 sm:flex-row sm:items-center sm:justify-between">
<div className="text-xs text-slate-500 dark:text-slate-400"> <div className="text-xs text-slate-500 dark:text-slate-400">
{t.rates?.workspaceRate || "Workspace rate"} {t.rates?.workspaceRate || "Workspace rate"}
</div> </div>
<WorkspaceMemberRateFields <WorkspaceMemberRateFields
workspaceId={id!} workspaceId={id!}
userId={m.user.id} userId={m.user.id}
rate={workspaceRates.find((item) => item.user === m.user.id)} rate={workspaceRates.find((item) => item.user === m.user.id)}
priceUnits={priceUnits} priceUnits={priceUnits}
onRatesChanged={(updater) => setWorkspaceRates((current) => updater(current))} onRatesChanged={(updater) => setWorkspaceRates((current) => updater(current))}
/> />
</div> </div>
</div> </div>
); );
})} })}
</InfiniteScroll> </InfiniteScroll>
{members.length === 0 && !isLoadingMembers && ( {members.length === 0 && !isLoadingMembers && (
<div className="flex flex-col items-center justify-center py-10 text-slate-500"> <div className="flex flex-col items-center justify-center py-10 text-slate-500">
@@ -506,12 +597,12 @@ export default function EditWorkspace() {
<p className="text-sm"> <p className="text-sm">
{t.workspace?.noMembers || "No members found."} {t.workspace?.noMembers || "No members found."}
</p> </p>
</div> </div>
)} )}
</div> </div>
</div> </div>
</div> </div>
<Transition appear show={isDeleteDialogOpen} as={Fragment}> <Transition appear show={isDeleteDialogOpen} as={Fragment}>
<Dialog as="div" className="relative z-50" onClose={() => setIsDeleteDialogOpen(false)}> <Dialog as="div" className="relative z-50" onClose={() => setIsDeleteDialogOpen(false)}>

65
src/pages/Workspaces.tsx
View File

@@ -2,14 +2,14 @@ import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Plus, Trash2, Pencil, ChevronRight } from 'lucide-react'; import { Plus, Trash2, Pencil, ChevronRight } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces'; import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
import { useTranslation } from '../hooks/useTranslation'; import { useTranslation } from '../hooks/useTranslation';
import { import {
WORKSPACE_DELETE, WORKSPACE_DELETE,
WORKSPACE_EDIT, WORKSPACE_EDIT,
canWorkspace, canWorkspace,
type WorkspaceRole, type WorkspaceRole,
} from '../lib/permissions'; } from '../lib/permissions';
import FilterBar from '../components/FilterBar'; import FilterBar from '../components/FilterBar';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
@@ -17,7 +17,7 @@ import { Card, CardContent, CardTitle } from '../components/ui/card';
import { Pagination } from '../components/Pagination'; import { Pagination } from '../components/Pagination';
import { Modal } from '../components/Modal'; import { Modal } from '../components/Modal';
const RoleBadge = ({ role }: { role?: WorkspaceRole }) => { const RoleBadge = ({ role }: { role?: WorkspaceRole }) => {
const { t } = useTranslation(); const { t } = useTranslation();
if (!role) return null; if (!role) return null;
@@ -48,8 +48,8 @@ export default function Workspaces() {
const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null}); const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
const [deleteInput, setDeleteInput] = useState(''); const [deleteInput, setDeleteInput] = useState('');
const navigate = useNavigate(); const navigate = useNavigate();
const { t } = useTranslation(); const { t } = useTranslation();
const orderingOptions = [ const orderingOptions = [
{ value: '-created_at', label: t.ordering?.createdAtDesc || 'Newest First' }, { value: '-created_at', label: t.ordering?.createdAtDesc || 'Newest First' },
@@ -122,14 +122,14 @@ export default function Workspaces() {
<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="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle || 'Manage your workspaces'}</p> <p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle || 'Manage your workspaces'}</p>
</div> </div>
<Button <Button
onClick={() => navigate('/workspaces/create')} onClick={() => navigate('/workspaces/create')}
size="icon" size="icon"
className="shadow-sm" className="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>
<FilterBar <FilterBar
@@ -148,19 +148,26 @@ export default function Workspaces() {
) : ( ) : (
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<div className="flex flex-col gap-4 mb-6"> <div className="flex flex-col gap-4 mb-6">
{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 ? (
<img src={workspace.thumbnail} alt={workspace.name} className="h-full w-full object-cover" />
) : (
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>
<RoleBadge role={workspace.my_role} /> <RoleBadge role={workspace.my_role} />
</div> </div>
<p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1"> <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
{workspace.description || t.workspace?.noDescription || 'No description'} {workspace.description || t.workspace?.noDescription || 'No description'}
@@ -168,8 +175,8 @@ export default function Workspaces() {
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <div className="flex items-center gap-2 shrink-0">
{canDeleteWorkspace && ( {canDeleteWorkspace && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setDeleteModal({ isOpen: true, workspace })} onClick={() => setDeleteModal({ isOpen: true, workspace })}
@@ -180,8 +187,8 @@ export default function Workspaces() {
</Button> </Button>
)} )}
{canEditWorkspace && ( {canEditWorkspace && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)} onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}