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>
This commit is contained in:
2026-08-11 18:59:42 +02:00
co-authored by Claude Opus 5
parent 23405d68d3
commit 4f149e365f
8 changed files with 260 additions and 36 deletions
+26 -1
View File
@@ -3,6 +3,7 @@ import { api } from '../api'
import { run, useStore } from '../store'
import { Feld, Karte, Knopf } from '../components/Bausteine'
import { DiscordKarte } from '../components/DiscordKarte'
import { Avatar } from '../components/Avatar'
export function Konto() {
const user = useStore((s) => s.user)
@@ -37,9 +38,33 @@ export function Konto() {
}
}
// Der Discord-Name steht nur daneben, wenn er vom Anzeigenamen abweicht —
// sonst stuende dort zweimal dasselbe.
const herkunft =
user?.discordName && user.discordName !== user.username
? `über Discord angemeldet — dort „${user.discordName}"`
: 'über Discord angemeldet'
return (
<div className="flex max-w-2xl flex-col gap-4">
<Karte titel={`Angemeldet als ${user?.username ?? '—'}`}>
<Karte titel="Konto">
<div className="mb-4 flex items-center gap-3 border-b border-rand pb-4">
<Avatar name={user?.username ?? '?'} url={user?.avatar} groesse={44} />
<div className="min-w-0">
<p className="truncate font-medium">{user?.username ?? '—'}</p>
<p className="text-xs text-schrift-leise">
{user?.discord ? herkunft : 'mit Passwort angemeldet'}
</p>
</div>
</div>
{user?.discord && (
<p className="mb-4 rounded-md border border-rand bg-grund px-3 py-2 text-xs text-schrift-leise">
Dieses Konto hat kein Passwort es kommt ausschließlich über Discord
herein. Das Formular unten wirkt nur für Konten mit Passwort.
</p>
)}
<form onSubmit={wechseln} className="flex flex-col gap-3">
<Feld
label="Aktuelles Passwort"