feat(foundry): add managed data consumers and agent settings

2026-07-19 15:03:54 +03:00
parent 5f583caa05
commit aac44d057f
35 changed files with 4534 additions and 243 deletions
@@ -0,0 +1,108 @@
+import type { ReactNode } from "react";
+import { Dropdown } from "./Dropdown.js";
+import { HeaderAvatar } from "./AppHeader.js";
+import { Icon, type IconName } from "./Icon.js";
+
+export interface UserProfileMenuAction {
+  id: string;
+  label: ReactNode;
+  icon?: IconName;
+  href?: string;
+  disabled?: boolean;
+  tone?: "default" | "danger";
+  onSelect?: () => void;
+}
+
+export interface UserProfileMenuProps {
+  displayName: string;
+  subtitle?: string;
+  avatarUrl?: string;
+  coverImageUrl?: string;
+  triggerLabel?: ReactNode;
+  actions: readonly UserProfileMenuAction[];
+}
+
+export function UserProfileMenu({
+  displayName,
+  subtitle,
+  avatarUrl,
+  coverImageUrl,
+  triggerLabel,
+  actions,
+}: UserProfileMenuProps) {
+  const label = displayName || "NODE.DC";
+  return (
+    <Dropdown
+      placement="bottom-end"
+      width={296}
+      offset={10}
+      surfaceClassName="nodedc-user-profile-menu"
+      trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
+        <button
+          ref={setTriggerRef}
+          type="button"
+          className="nodedc-user-profile-menu__trigger"
+          title={label}
+          aria-label={`Меню пользователя ${label}`}
+          aria-expanded={open}
+          aria-controls={surfaceId}
+          onClick={toggle}
+        >
+          {triggerLabel === null ? null : <span className="nodedc-user-profile-menu__trigger-label">{triggerLabel ?? label}</span>}
+          <HeaderAvatar label={label} imageUrl={avatarUrl} />
+        </button>
+      )}
+    >
+      {({ close }) => (
+        <div className="nodedc-user-profile-card">
+          <div
+            className="nodedc-user-profile-card__cover"
+            style={coverImageUrl ? { backgroundImage: `linear-gradient(180deg, rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.52)), url(${JSON.stringify(coverImageUrl)})` } : undefined}
+          >
+            <HeaderAvatar label={label} imageUrl={avatarUrl} />
+            <strong>{label}</strong>
+            {subtitle ? <span>{subtitle}</span> : null}
+          </div>
+          <div className="nodedc-user-profile-card__actions">
+            {actions.map((action) => {
+              const content = (
+                <>
+                  {action.icon ? <Icon name={action.icon} size={16} /> : <span />}
+                  <span>{action.label}</span>
+                </>
+              );
+              if (action.href && !action.disabled) {
+                return (
+                  <a
+                    key={action.id}
+                    className="nodedc-user-profile-card__action"
+                    data-tone={action.tone === "danger" ? "danger" : undefined}
+                    href={action.href}
+                    onClick={() => close()}
+                  >
+                    {content}
+                  </a>
+                );
+              }
+              return (
+                <button
+                  key={action.id}
+                  type="button"
+                  className="nodedc-user-profile-card__action"
+                  data-tone={action.tone === "danger" ? "danger" : undefined}
+                  disabled={action.disabled}
+                  onClick={() => {
+                    action.onSelect?.();
+                    close();
+                  }}
+                >
+                  {content}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </Dropdown>
+  );
+}