UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: КЛИЕНТСКИЙ БРЕНДИНГ

server/control-plane-store.mjs

@@ -105,6 +105,7 @@ export function createControlPlaneStore({ projectRoot }) {
       demoEndsAt: nullableString(payload?.demoEndsAt),
       contactName: nullableString(payload?.contactName),
       contactEmail: nullableString(payload?.contactEmail),
+      avatarUrl: nullableString(payload?.avatarUrl),
       integrations: normalizeClientIntegrations(payload?.integrations),
       notes: nullableString(payload?.notes),
       createdAt: now,
@@ -141,6 +142,7 @@ export function createControlPlaneStore({ projectRoot }) {
     client.demoEndsAt = nullableStringWithFallback(payload?.demoEndsAt, client.demoEndsAt ?? null);
     client.contactName = nullableStringWithFallback(payload?.contactName, client.contactName ?? null);
     client.contactEmail = nullableStringWithFallback(payload?.contactEmail, client.contactEmail ?? null);
+    client.avatarUrl = nullableStringWithFallback(payload?.avatarUrl, client.avatarUrl ?? null);
     if ("integrations" in (payload ?? {})) {
       client.integrations = normalizeClientIntegrations(payload.integrations, client.integrations);
     }

src/entities/client/types.ts

@@ -20,6 +20,7 @@ export interface Client {
   demoEndsAt?: string | null;
   contactName?: string | null;
   contactEmail?: string | null;
+  avatarUrl?: string | null;
   integrations?: {
     taskManager?: {
       workspaceSlug?: string | null;

src/shared/api/mockData.ts

@@ -21,6 +21,7 @@ export const mockClients: Client[] = [
     demoEndsAt: null,
     contactName: "DC Touch",
     contactEmail: "dcctouch@gmail.com",
+    avatarUrl: null,
     notes: "Live-клиент NODE.DC для первичной проверки control-plane, SSO и доступа к сервисам.",
     createdAt: "2026-05-04T00:00:00.000Z",
     updatedAt: now,

src/styles/globals.css

@@ -449,6 +449,13 @@ code {
   object-fit: contain;
 }
 
+.nodedc-expanded-workspace-avatar {
+  width: 72%;
+  height: 72%;
+  border-radius: inherit;
+  object-fit: contain;
+}
+
 .nodedc-expanded-user-group {
   display: inline-flex;
   height: var(--nodedc-shell-pill-height);
@@ -1429,6 +1436,7 @@ code {
 }
 
 .admin-panel-content {
+  position: relative;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   gap: 1rem;
@@ -2664,8 +2672,8 @@ code {
 }
 
 .admin-icon-action svg {
-  width: 80%;
+  width: 0.78rem;
-  height: 80%;
+  height: 0.78rem;
 }
 
 .invite-icon-action {
@@ -2857,6 +2865,11 @@ code {
   -webkit-backdrop-filter: blur(34px) saturate(1.12);
 }
 
+.client-editor-modal {
+  width: 100%;
+  max-height: 100%;
+}
+
 .service-content-modal__head,
 .service-content-modal__foot {
   display: flex;
@@ -3021,6 +3034,80 @@ code {
   color: rgba(8, 8, 10, 0.96);
 }
 
+.client-avatar-field {
+  align-self: stretch;
+}
+
+.client-avatar-control {
+  display: grid;
+  min-height: 4rem;
+  grid-template-columns: 3.25rem minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 0.75rem;
+  overflow: hidden;
+  border-radius: var(--launcher-radius-control);
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.38rem;
+}
+
+.client-avatar-preview {
+  display: grid;
+  width: 3.1rem;
+  height: 3.1rem;
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--launcher-radius-circle);
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.client-avatar-preview img {
+  width: 72%;
+  height: 72%;
+  object-fit: contain;
+}
+
+.client-avatar-control__copy {
+  display: grid;
+  min-width: 0;
+  gap: 0.18rem;
+}
+
+.client-avatar-control__copy strong {
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 0.84rem;
+  font-weight: 850;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.client-avatar-control__copy small,
+.client-avatar-error {
+  color: var(--text-muted);
+  font-size: 0.74rem;
+  font-weight: 650;
+}
+
+.client-avatar-upload-button {
+  position: relative;
+  min-height: 2.65rem;
+}
+
+.client-avatar-upload-button input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.client-avatar-clear-action {
+  width: 2.35rem;
+  min-width: 2.35rem;
+  height: 2.35rem;
+}
+
 .service-content-field textarea {
   resize: vertical;
   line-height: 1.45;

src/widgets/admin-overlay/AdminOverlay.tsx

@@ -572,11 +572,11 @@ function ClientsSection({
                 <td className="services-admin-table__actions">
                   <IconButton
                     label={`Редактировать клиента ${client.name}`}
-                    className="admin-circle-action services-admin-table__edit"
+                    className="admin-icon-action services-admin-table__edit"
                     type="button"
                     onClick={() => setEditingClientId(client.id)}
                   >
-                    <Edit3 size={15} />
+                    <Edit3 size={12} />
                   </IconButton>
                 </td>
               </tr>
@@ -845,11 +845,11 @@ function GroupsSection({
                 <td className="services-admin-table__actions">
                   <IconButton
                     label={`Редактировать группу ${group.name}`}
-                    className="admin-circle-action services-admin-table__edit"
+                    className="admin-icon-action services-admin-table__edit"
                     type="button"
                     onClick={() => setEditingGroupId(group.id)}
                   >
-                    <Edit3 size={15} />
+                    <Edit3 size={12} />
                   </IconButton>
                 </td>
               </tr>
@@ -1709,11 +1709,17 @@ function ClientEditorModal({
   canDelete: boolean;
 }) {
   const [draft, setDraft] = useState<Client>(client);
+  const [uploadingAvatar, setUploadingAvatar] = useState(false);
+  const [storageError, setStorageError] = useState<string | null>(null);
   const taskManagerWorkspaceBindings = getClientTaskManagerWorkspaces(draft);
   const selectedTaskManagerWorkspaceSlugs = new Set(taskManagerWorkspaceBindings.map((workspace) => workspace.slug));
   const primaryTaskManagerWorkspace = getPrimaryTaskManagerWorkspace(draft);
 
-  useEffect(() => setDraft(client), [client]);
+  useEffect(() => {
+    setDraft(client);
+    setUploadingAvatar(false);
+    setStorageError(null);
+  }, [client]);
 
   function update<K extends keyof Client>(key: K, value: Client[K]) {
     setDraft((current) => ({ ...current, [key]: value }));
@@ -1760,9 +1766,25 @@ function ClientEditorModal({
     updateTaskManagerWorkspaces(normalizeClientTaskManagerWorkspaceDraft(nextWorkspaces));
   }
 
+  async function handleAvatarUpload(file?: File) {
+    if (!file) return;
+
+    setUploadingAvatar(true);
+    setStorageError(null);
+
+    try {
+      const storedFile = await uploadStorageFile(file);
+      update("avatarUrl", storedFile.url);
+    } catch (error) {
+      setStorageError(error instanceof Error ? error.message : "Не удалось сохранить аватар компании");
+    } finally {
+      setUploadingAvatar(false);
+    }
+  }
+
   return (
     <div className="service-content-modal-layer" role="dialog" aria-modal="true" aria-label={`Редактор клиента ${client.name}`}>
-      <article className="service-content-modal admin-entity-modal">
+      <article className="service-content-modal admin-entity-modal client-editor-modal">
         <EntityModalHead
           eyebrow="Клиент"
           title={client.name}
@@ -1807,6 +1829,36 @@ function ClientEditorModal({
             <span>Статус</span>
             <AdminStatusDropdown value={draft.status} options={clientStatusOptions} label="Статус клиента" onChange={(status) => update("status", status)} />
           </div>
+          <div className="service-content-field service-content-field--wide client-avatar-field">
+            <span>Аватар компании</span>
+            <div className="client-avatar-control">
+              <div className="client-avatar-preview" aria-hidden="true">
+                {draft.avatarUrl ? <img src={draft.avatarUrl} alt="" /> : null}
+              </div>
+              <div className="client-avatar-control__copy">
+                <strong>{draft.avatarUrl ? "Аватар подключён" : "Аватар не задан"}</strong>
+                <small>Показывается в верхнем переключателе компании.</small>
+              </div>
+              <label className="service-media-file-button client-avatar-upload-button">
+                {uploadingAvatar ? "Загрузка..." : "Выберите файл"}
+                <input
+                  type="file"
+                  accept="image/*"
+                  disabled={uploadingAvatar}
+                  onChange={(event) => {
+                    void handleAvatarUpload(event.target.files?.[0]);
+                    event.target.value = "";
+                  }}
+                />
+              </label>
+              {draft.avatarUrl ? (
+                <button className="admin-icon-action client-avatar-clear-action" type="button" onClick={() => update("avatarUrl", null)} aria-label="Убрать аватар">
+                  <X size={11} />
+                </button>
+              ) : null}
+            </div>
+            {storageError ? <small className="client-avatar-error">{storageError}</small> : null}
+          </div>
           <div className="service-content-field service-content-field--wide">
             <span>Operational Core workspaces</span>
             <div className="task-workspace-picker-card">

src/widgets/top-bar/TopBar.tsx

@@ -36,17 +36,11 @@ export function TopBar({
   const availableClientIds = new Set(me.memberships.map((membership) => membership.clientId));
   const availableClients = clients.filter((client) => availableClientIds.has(client.id));
   const activeClient = availableClients.find((client) => client.id === activeClientId);
-  const activeProfile = profileOptions.find((profile) => profile.userId === activeProfileId);
   const clientOptions = availableClients.map((client) => ({
     value: client.id,
     label: client.name,
     description: client.legalName ?? undefined,
   }));
-  const profileSelectOptions = profileOptions.map((profile) => ({
-    value: profile.userId,
-    label: profile.label,
-    description: profile.description,
-  }));
 
   return (
     <header className="nodedc-expanded-toolbar-shell">
@@ -76,7 +70,7 @@ export function TopBar({
                   aria-expanded={open}
                   onClick={toggle}
                 >
-                  <img src="/nodedc-mark.svg" alt="" className="nodedc-expanded-workspace-mark" />
+                  {activeClient?.avatarUrl ? <img src={activeClient.avatarUrl} alt="" className="nodedc-expanded-workspace-avatar" /> : null}
                 </button>
               )}
             />
@@ -86,27 +80,6 @@ export function TopBar({
                 <span>Витрина</span>
               </button>
 
-              <NodeDcSelect
-                value={activeProfileId}
-                options={profileSelectOptions}
-                label="Выбрать профиль доступа"
-                minMenuWidth={236}
-                onChange={(userId) => onProfileChange(userId)}
-                trigger={({ open, selectedOption, toggle, setTriggerRef }) => (
-                  <button
-                    ref={setTriggerRef}
-                    className="nodedc-expanded-nav-button nodedc-expanded-select-button"
-                    type="button"
-                    data-active="false"
-                    aria-label="Выбрать профиль доступа"
-                    aria-expanded={open}
-                    onClick={toggle}
-                  >
-                    <span>{selectedOption?.label ?? activeProfile?.label ?? me.user.name}</span>
-                  </button>
-                )}
-              />
-
               {me.permissions.canOpenAdmin ? (
                 <button className="nodedc-expanded-nav-button" type="button" data-active={adminOpen} onClick={onToggleAdmin}>
                   <span>Администрирование</span>