feat(workspaces): add thumbnail UI across workspace surfaces

src/components/WorkspaceSelector.tsx

@@ -50,10 +50,9 @@ export const WorkspaceSelector: React.FC = () => {
     const handleWorkspaceEdited = ((e: CustomEvent) => {
       // آپدیت نام کارتابل در نوبار در صورتی که کارتابل فعال ویرایش شده باشد
       if (activeWorkspace?.id === e.detail?.id) {
-        setActiveWorkspace({ 
-          ...activeWorkspace, 
-          name: e.detail.name, 
-          description: e.detail.description 
+        setActiveWorkspace({
+          ...activeWorkspace,
+          ...e.detail,
         } as Workspace);
       }
       refreshWorkspacesList();
@@ -123,9 +122,13 @@ export const WorkspaceSelector: React.FC = () => {
         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"
       >
-        <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">
-          {activeWorkspace?.name?.charAt(0) || <Briefcase className="w-4 h-4" />}
-        </div>
+        <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?.thumbnail ? (
+            <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">
           {activeWorkspace?.name || t.workspace?.title || "Workspaces"}
         </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"
                 >
                   <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">
-                      {ws.name.charAt(0)}
-                    </div>
+                    <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.thumbnail ? (
+                        <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>
                   </div>
                   {activeWorkspace?.id === ws.id && (