feat: Discord-Bild und -Name im Dashboard

Wer ueber Discord hereinkommt, sieht sein Bild in der Kopfzeile, auf der Kontoseite und neben seinen Eintraegen im Verlauf. DIE ADRESSE BAUT DER DIENST, nicht die Oberflaeche. Gespeichert wird nur der Bildstempel; das URL-Schema von Discord steht an EINER Stelle (avatarUrl in db.ts) und nicht in jeder Ansicht, die ein Bild zeigt. Es hat drei Faelle, und alle drei stehen dort: - Stempel faengt mit "a_" an -> bewegtes Bild, muss als .gif angefragt werden - Stempel vorhanden -> .png mit gewuenschter Groesse - kein Stempel -> Discords Ersatzbild, dessen Nummer sich aus der ID ergibt: (id >> 22) % 6. Das ist die NEUE Rechnung; die alte ueber den Diskriminator gilt seit den Pseudonymen nicht mehr. Gegengerechnet an drei IDs. Bild und Anzeigename werden BEI JEDER ANMELDUNG nachgezogen: wer sein Bild wechselt, saehe sonst monatelang das alte und fragte sich, ob er im richtigen Konto sitzt. Der Benutzername im Dashboard bleibt dagegen, wie er ist -- an ihm haengen die Eintraege im Verlauf. Der Avatar-Baustein kennt drei Faelle und keinen kaputten: Bild, sonst die Initialen auf einer Farbe, die sich aus dem Namen ergibt (damit sie beim Neuladen nicht springt), und fuer einen Token einen Schluessel -- ein Token hat kein Gesicht, ein Platzhalterbild daneben waere eine Behauptung. Laedt das Bild nicht (CDN nicht erreichbar, Stempel veraltet), faellt es auf die Initialen zurueck statt ein kaputtes Bildsymbol zu zeigen. Nachgemessen: cdn.discordapp.com liefert das Ersatzbild (200, image/png), die Form der Bildadresse stimmt, und ein Passwort-Konto bekommt sauber avatar:null. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-11 18:59:42 +02:00
parent 23405d68d3
commit 4f149e365f
8 changed files with 260 additions and 36 deletions
@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { KeyRound } from 'lucide-react'
+
+/** Ein Bild zu einem Namen — oder ein ehrlicher Ersatz.
+ *
+ *  Drei Fälle, und jeder sieht anders aus:
+ *
+ *    Bild da        → das Bild von Discords CDN
+ *    kein Bild      → die Initialen auf farbigem Grund
+ *    kein Mensch    → ein Schlüssel, denn ein Token hat kein Gesicht
+ *
+ *  Der Fehlerfall ist mitgedacht: lädt das Bild nicht (CDN nicht erreichbar,
+ *  Stempel veraltet), fällt es auf die Initialen zurück statt ein kaputtes
+ *  Bildsymbol zu zeigen. */
+export function Avatar({
+    name,
+    url,
+    token,
+    groesse = 24,
+}: {
+    name: string
+    url?: string | null
+    token?: boolean
+    groesse?: number
+}) {
+    const [gefallen, setGefallen] = useState(false)
+    const stil = { width: groesse, height: groesse }
+
+    if (token) {
+        return (
+            <span
+                className="flex shrink-0 items-center justify-center rounded border border-rand bg-flaeche-hoch text-schrift-leise"
+                style={stil}
+                title="Token"
+            >
+                <KeyRound size={Math.round(groesse * 0.55)} />
+            </span>
+        )
+    }
+
+    if (url && !gefallen) {
+        return (
+            <img
+                src={url}
+                alt={name}
+                title={name}
+                loading="lazy"
+                onError={() => setGefallen(true)}
+                className="shrink-0 rounded-full object-cover"
+                style={stil}
+            />
+        )
+    }
+
+    // Die Initialen. Die Farbe ergibt sich aus dem Namen, damit derselbe Name
+    // immer dieselbe Farbe bekommt — sonst springt sie bei jedem Neuladen.
+    const initialen = name
+        .split(/[\s._-]+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((t) => t[0]?.toUpperCase() ?? '')
+        .join('')
+
+    let summe = 0
+    for (const z of name) summe = (summe * 31 + z.charCodeAt(0)) % 360
+
+    return (
+        <span
+            className="flex shrink-0 items-center justify-center rounded-full font-medium text-white"
+            style={{
+                ...stil,
+                backgroundColor: `hsl(${summe} 45% 40%)`,
+                fontSize: Math.round(groesse * 0.42),
+            }}
+            title={name}
+        >
+            {initialen || '?'}
+        </span>
+    )
+}