UI - ЛАУНЧЕР: КРУГЛЫЕ АВАТАРЫ КЛИЕНТОВ

src/styles/globals.css

@@ -411,20 +411,25 @@ code {
   position: relative;
   display: flex;
   width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
   height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  flex: 0 0 3rem;
+  aspect-ratio: 1;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border: 0;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.04);
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
+  background: transparent;
+  padding: 0;
   transition: background-color 160ms ease;
 }
 
 .nodedc-expanded-workspace-button:hover {
-  background: rgba(255, 255, 255, 0.07);
+  background: transparent;
 }
 
 .nodedc-expanded-workspace-button select,
@@ -450,6 +455,7 @@ code {
 }
 
 .nodedc-expanded-workspace-avatar {
+  display: block;
   width: 100%;
   height: 100%;
   border-radius: inherit;
@@ -3053,7 +3059,10 @@ code {
 .client-avatar-preview {
   display: grid;
   width: 3.1rem;
+  min-width: 3.1rem;
   height: 3.1rem;
+  min-height: 3.1rem;
+  aspect-ratio: 1;
   place-items: center;
   overflow: hidden;
   border-radius: var(--launcher-radius-circle);
@@ -3061,6 +3070,7 @@ code {
 }
 
 .client-avatar-preview img {
+  display: block;
   width: 100%;
   height: 100%;
   border-radius: inherit;

src/widgets/admin-overlay/AdminOverlay.tsx

@@ -1705,6 +1705,7 @@ function ClientEditorModal({
   canDelete: boolean;
 }) {
   const [draft, setDraft] = useState<Client>(client);
+  const [avatarPreviewUrl, setAvatarPreviewUrl] = useState<string | null>(client.avatarUrl ?? null);
   const [uploadingAvatar, setUploadingAvatar] = useState(false);
   const [storageError, setStorageError] = useState<string | null>(null);
   const taskManagerWorkspaceBindings = getClientTaskManagerWorkspaces(draft);
@@ -1713,10 +1714,19 @@ function ClientEditorModal({
 
   useEffect(() => {
     setDraft(client);
+    setAvatarPreviewUrl(client.avatarUrl ?? null);
     setUploadingAvatar(false);
     setStorageError(null);
   }, [client]);
 
+  useEffect(() => {
+    return () => {
+      if (avatarPreviewUrl?.startsWith("blob:")) {
+        URL.revokeObjectURL(avatarPreviewUrl);
+      }
+    };
+  }, [avatarPreviewUrl]);
+
   function update<K extends keyof Client>(key: K, value: Client[K]) {
     setDraft((current) => ({ ...current, [key]: value }));
   }
@@ -1765,14 +1775,18 @@ function ClientEditorModal({
   async function handleAvatarUpload(file?: File) {
     if (!file) return;
 
+    const localPreviewUrl = URL.createObjectURL(file);
+    setAvatarPreviewUrl(localPreviewUrl);
     setUploadingAvatar(true);
     setStorageError(null);
 
     try {
       const storedFile = await uploadStorageFile(file);
       update("avatarUrl", storedFile.url);
+      setAvatarPreviewUrl(storedFile.url);
     } catch (error) {
       setStorageError(error instanceof Error ? error.message : "Не удалось сохранить аватар компании");
+      setAvatarPreviewUrl(draft.avatarUrl ?? null);
     } finally {
       setUploadingAvatar(false);
     }
@@ -1829,10 +1843,10 @@ function ClientEditorModal({
             <span>Аватар компании</span>
             <div className="client-avatar-control">
               <div className="client-avatar-preview" aria-hidden="true">
-                {draft.avatarUrl ? <img src={draft.avatarUrl} alt="" /> : null}
+                {avatarPreviewUrl ? <img src={avatarPreviewUrl} alt="" /> : null}
               </div>
               <div className="client-avatar-control__copy">
-                <strong>{draft.avatarUrl ? "Аватар подключён" : "Аватар не задан"}</strong>
+                <strong>{avatarPreviewUrl ? "Аватар подключён" : "Аватар не задан"}</strong>
                 <small>Показывается в верхнем переключателе компании.</small>
               </div>
               <label className="service-media-file-button client-avatar-upload-button">
@@ -1847,8 +1861,16 @@ function ClientEditorModal({
                   }}
                 />
               </label>
-              {draft.avatarUrl ? (
-                <button className="admin-icon-action client-avatar-clear-action" type="button" onClick={() => update("avatarUrl", null)} aria-label="Убрать аватар">
+              {avatarPreviewUrl ? (
+                <button
+                  className="admin-icon-action client-avatar-clear-action"
+                  type="button"
+                  onClick={() => {
+                    update("avatarUrl", null);
+                    setAvatarPreviewUrl(null);
+                  }}
+                  aria-label="Убрать аватар"
+                >
                   <X size={11} />
                 </button>
               ) : null}