feat(workspaces): add thumbnail UI across workspace surfaces
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useRef, Fragment } from 'react';
|
||||
import { useBlocker, useNavigate } from 'react-router-dom';
|
||||
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 { toast } from 'sonner';
|
||||
import { createWorkspace } from '../api/workspaces';
|
||||
@@ -40,6 +40,8 @@ export default function WorkspaceCreate() {
|
||||
// Workspace Info States
|
||||
const [name, setName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
|
||||
const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Members States (Local)
|
||||
@@ -54,8 +56,36 @@ export default function WorkspaceCreate() {
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
|
||||
|
||||
const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0;
|
||||
const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
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(() => {
|
||||
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
|
||||
@@ -121,7 +151,8 @@ export default function WorkspaceCreate() {
|
||||
const payload = {
|
||||
name,
|
||||
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);
|
||||
|
||||
@@ -178,13 +209,13 @@ export default function WorkspaceCreate() {
|
||||
const isFirstOwner = true;
|
||||
|
||||
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">
|
||||
{t.workspace?.createTitle || "Create Workspace"}
|
||||
</h1>
|
||||
|
||||
<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="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">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
|
||||
<div className="mb-4">
|
||||
<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"
|
||||
/>
|
||||
</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">
|
||||
<Button
|
||||
type="button"
|
||||
@@ -228,7 +298,7 @@ export default function WorkspaceCreate() {
|
||||
</form>
|
||||
</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">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
{ t.workspace?.members || "Members" }
|
||||
@@ -322,7 +392,7 @@ export default function WorkspaceCreate() {
|
||||
</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) => {
|
||||
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">
|
||||
|
||||
Reference in New Issue
Block a user