Profile API: Avatar Ring & Banner

useDreyloProfile Hook

// Verwendung in einer Komponente:
import { useDreyloProfile, getAvatarRingStyle, getBannerStyle }
  from "../../ui/components/features/profiles/useDreyloProfile";
function UserCard(props: { userId: string }) {
  const dreylo = useDreyloProfile(() => props.userId);
return (
    <div>
      {/ Avatar mit Ring /}
      <div style={getAvatarRingStyle(dreylo(), "#1e2530")}>
        <Avatar src={avatarUrl} size={72} />
      </div>
{/ Banner mit Farbe /}
      <div style={{ background: getBannerStyle(dreylo(), false) }}>
        Banner-Bereich
      </div>
    </div>
  );
}

Ring-Typen

none      → Kein Ring
solid     → Einfarbiger Ring (box-shadow)
gradient  → Farbverlauf-Ring (border-box Trick)
animated  → Rotierender Farbverlauf (hue-rotate Animation)

CSS Gradient-Ring Technik

/ Gradient als Border-Ersatz /
border: 3px solid transparent;
background:
  linear-gradient(#hintergrund, #hintergrund) padding-box,
  linear-gradient(135deg, #farbe1, #farbe2) border-box;

ProfileCustomizer (Settings)

Datei: components/app/interface/settings/user/profile/ProfileCustomizer.tsx

Enthält:

• Ring-Typ Auswahl


• Farbpalette (12 Presets + Custom)


• Gradient-Picker


• Banner-Farbe


• Live-Vorschau

API Calls aus Frontend

// Token holen
const [authHeader, authHeaderValue] = client().authenticationHeader;
// authHeader = "X-Session-Token"
// authHeaderValue = "SESSION_TOKEN_WERT"
// Profile speichern
const res = await fetch("/profile-api/api/profile/me", {
  method: "PATCH",
  headers: {
    "Content-Type": "application/json",
    [authHeader]: authHeaderValue,
  },
  body: JSON.stringify({
    ring_type: "gradient",
    ring_gradient: ["#ff6b6b", "#4ecdc4"],
  }),
});

Server-Folder API

// Folder laden
const res = await fetch(/profile-api/api/folders/${userId});
const { folders, server_order } = await res.json();
// Folder speichern
await fetch("/profile-api/api/folders/me", {
  method: "PUT",
  headers: { "Content-Type": "application/json", [authHeader]: authHeaderValue },
  body: JSON.stringify({ folders, server_order }),
});