feat(logos): Infozeile mit Melden, Löschen und Admin-Aktionen

Task 9: die Infozeile zum gewählten Logo unter dem Raster (Spec § 3 und § 6).

- logos/logo-info.ts (neu): „<Name> · von <Anzeigename> · ♥ <Zahl>“ und „Melden“ (auch für Gäste; ein ausgeblendetes Logo lässt
  sich nicht melden). Der Hochlader sieht „Löschen“ mit Rückfrage (Titel mit Namen, Folgen im Text), Admins „<n> Meldungen“ mit den
  Gründen als Text (listLogoReports, einmal je Logo und Stand), „Ausblenden“/„Einblenden“ und „Löschen“. Gelöscht: deleteLogo,
  forgetLogo, Kachel weg, onSelect(null); ein-/ausgeblendet: setLogoVisibility, forgetLogo (ein Null-Bild bleibt nicht im Zwischen-
  speicher), die Zeile des Pickers wird fortgeschrieben (Einblenden setzt reportCount auf 0). Gewähltes Logo nicht auffindbar: „Das
  gewählte Logo ist nicht mehr verfügbar.“ (ein Netzfehler von getLogo sagt nichts). Zugleich die Meldezeile (role="alert") für Fehler
  von Herz, Hochladen und diesen Aktionen; ein Wechsel der Auswahl räumt sie ab. Immer nur eine Aktion zugleich; die Rechte werden
  nach der Rückfrage noch einmal geprüft; der Aufbau steht einmal da, update() ändert nur Texte und Sichtbarkeit (Fokus bleibt).
- logos/logo-picker.ts: hängt die Infozeile als Letztes unter das Raster (info.el). Herz- und Upload-Fehler gehen in die Infozeile,
  der Statusbereich des Pickers bleibt den Ladefehlern der Liste vorbehalten (ein Klick auf ein Herz löscht ihren Text nicht mehr).
  Aus dem Review von Task 8: requireLogin, das wirft, zeigt den Grund statt einer unbehandelten Ablehnung; select() nach dispose()
  ist wirkungslos. Löschen entfernt Kachel, Zeile, Herz und Eintrag der Liste, setzt den Cursor von „Mehr laden“ auf das Logo davor
  (Appwrite lehnt einen Cursor auf eine gelöschte Zeile ab), hebt die Auswahl über onSelect(null) auf und holt den Fokus nach
  „Kein Logo“, wenn er auf „Löschen“ lag. LogoPickerDeps erweitert um reportLogo, deleteLogo, setLogoVisibility, listLogoReports,
  confirm und reportDialog.
- community/report-dialog.ts: subject 'card' (Standard, unverändert) oder 'logo': Überschrift „Logo melden“, Einleitung „dieses
  Logo“, vier Gründe ohne „Echte Kartendaten“, Duplikat-Dank „Danke, du hast dieses Logo schon gemeldet.“. Der ganze Dialog geht
  durch t()/msg(); Fehler des Dienstes über apiErrorText.
- logos/logos.css: das Herz sitzt in der Textzeile unter der Bildfläche (nicht mehr auf dem Logo, folgt dem Theme), die Kachel füllt
  die Zelle (height: 100%), damit „Kein Logo“ so hoch ist wie sein Nachbar; Stile der Infozeile.
- editor/editor-page.ts: Aus dem Review von Task 8: der Ladefehler der Logos verschwindet, sobald ein Logo danach lädt, aber nur
  der, den der Logo-Zustand selbst ins Fehlerfeld geschrieben hat; jeder andere Text im Feld bleibt.
- i18n/en.ts: englische Texte zu allen neuen Beschriftungen und zum Melden-Dialog.
- Tests: logo-info.test.ts (neu), logo-picker.test.ts (Infozeile, Löschen, Ein-/Ausblenden, Fehler, Cursor, Fokus), report-dialog.test.ts
  (Logo und Englisch), editor-page.test.ts (Fehlerfeld). Vitest 52 Dateien, 1764 Tests grün, tsc und Build sauber.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-10-04 23:21:33 +00:00
1 parent 4cf9fe192d
commit a75be2d44c
10 files changed
+1976 -81

No files matched your search

+111 -10
View File
@@ -1,6 +1,6 @@
/* Community-Logos. Dialog „Logo hochladen“: Hülle, Felder, Pflicht-Häkchen, Meldungen und Knöpfe kommen aus community.css
(Melden-/Veröffentlichen-Dialog) und account.css; hier steht nur, was neu ist: das Datei-Feld und die Vorschau.
Weiter unten der Bereich „Logo unten rechts“ im Editor (Raster, Sortierung, Herzen); seine Kacheln beruhen auf `.tile` aus editor.css. */
Weiter unten der Bereich „Logo unten rechts“ im Editor (Raster, Sortierung, Herzen, Infozeile); seine Kacheln beruhen auf `.tile` aus editor.css. */
/* Etwas breiter als der Veröffentlichen-Dialog (480 px): zwei Vorschauen nebeneinander. Mit zwei Klassen, damit die Breite
nicht von der Reihenfolge der Stylesheets abhängt. */
@@ -228,11 +228,13 @@
min-width: 0;
}
/* `height: 100%` füllt die Zelle (das Raster streckt sie auf die Höhe der Reihe): „Kein Logo“ ist so hoch wie sein Nachbar. */
.logo-tile {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
height: 100%;
min-width: 0;
padding: 8px;
}
@@ -293,13 +295,20 @@
line-height: 1.3;
}
/* Herz: ein eigener Knopf neben dem Auswahlknopf, über der Bildfläche (also immer auf dunklem Grund). Gedrückt: gefülltes Herz. */
/* Name und „von …“ lassen rechts Platz für das Herz (nur Logo-Kacheln: „Kein Logo“ hat keins). */
.logo-tile:not(.logo-tile-none) .logo-tile-name,
.logo-tile:not(.logo-tile-none) .logo-tile-by {
padding-right: 64px;
}
/* Herz: ein eigener Knopf neben dem Auswahlknopf, am Ende der Textzeile unter der Bildfläche (liegt also nicht auf dem Logo, sondern
auf dem Grund der Kachel und folgt dem Theme), mittig neben Name und „von …“. Gedrückt: gefülltes Herz. */
.logo-heart {
appearance: none;
position: absolute;
top: 14px;
right: 14px;
right: 8px;
bottom: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -308,24 +317,26 @@
min-height: 32px;
margin: 0;
padding: 0 9px;
border: 0;
border: 1px solid var(--line);
border-radius: 999px;
background: rgb(15 24 40 / 0.78);
color: #e8eef7;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 0.8rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 0.12s;
transition: background-color 0.12s, border-color 0.12s;
}
.logo-heart:hover {
background: rgb(15 24 40 / 0.95);
border-color: var(--line-strong);
background: var(--panel-2);
}
.logo-heart[aria-pressed='true'] {
color: #ff7a8a;
border-color: var(--danger-text);
color: var(--danger-text);
}
.logo-heart[aria-pressed='true'] .icon {
@@ -355,6 +366,96 @@
align-self: center;
}
/* Infozeile zum gewählten Logo (unter dem Raster): Karte mit Name, Urheber und Herzen, Knöpfen und, für Admins, den Meldungen.
Ohne Auswahl ist die Karte verborgen; die beiden Meldezeilen (Hinweis, Fehler) sind immer da. */
.logo-info {
display: flex;
flex-direction: column;
gap: 8px;
}
/* `hidden` gilt auch dort, wo ein Stil `display` setzt (und außerhalb des Editors, der `.editor [hidden]` mitbringt). */
.logo-info [hidden] {
display: none !important;
}
.logo-info-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
}
.logo-info-text {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.logo-info-name {
color: var(--text);
font-size: 0.95rem;
font-weight: 700;
}
.logo-info-hearts {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.logo-info-hidden {
align-self: flex-start;
}
.logo-info-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.logo-info-admin {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.logo-info-reports {
margin: 0;
font-size: 0.9rem;
font-weight: 700;
}
.logo-info-reasons {
margin: 0;
padding-left: 20px;
color: var(--muted);
font-size: 0.9rem;
}
.logo-info-reasons:empty,
.logo-info-note:empty {
display: none;
}
.logo-info-note {
margin: 0;
color: var(--muted);
font-size: 0.85rem;
}
.logo-info-gone {
padding-left: 4px;
color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
.logo-sort-btn,
.logo-heart {