CHAT-001 – Version-Pill: Einheitliches Format im Default Theme

Status: ACCEPTED Datum: 2026-03-10 Autor: xPulse

Kontext

Die App zeigt an mehreren Stellen die aktuelle Version an: Sidebar-Footer, Login-Footer, Info-Seite (Status-Pills). In v1.2.0 war das uneinheitlich – mal runde Pill, mal reiner Text, mal nur die Versionsnummer, mal mit Prefix.

Entscheidung

Einheitliches Format für alle Version-Pills im Default Theme:

1 VERSION: RC-V1.3.0-ABC123

Immer uppercase
Prefix VERSION: gefolgt von Leerzeichen
Wert direkt aus version.json (generiert zur Build-Zeit bzw. per generate-version-dev.sh)
Kein border-radius: 999px – eckig (border-radius: 2px) analog zu allen anderen UI-Elementen
Schriftgröße 10px, letter-spacing: 0.08em, Monospace

Technisch: Gemeinsame Hilfsfunktion initVersionPills() in modules/ui.js. Alle Elemente mit data-version-pill Attribut werden automatisch befüllt.

1 // ui.js
2 export async function initVersionPills() {
3     const { version } = await fetch('/version.json').then(r => r.json());
4     const label = `VERSION: ${version.toUpperCase()}`;
5     document.querySelectorAll('[data-version-pill]').forEach(el => el.textContent = label);
6 }

Version-Format aus Branch (generate-version-dev.sh / generate-changelog.sh):

Branch	Format	Beispiel
`master`	`v{tag}`	`V1.3.0`
`release/v*`	`rc-v{version}-{hash}`	`RC-V1.3.0-ABC123`
`develop`	`develop-{hash}`	`DEVELOP-ABC123`
`feature/xyz`	`feat-xyz-{hash}`	`FEAT-XYZ-ABC123`
`hotfix/xyz`	`fix-xyz-{hash}`	`FIX-XYZ-ABC123`

Begründung

Konsistenz: Ein Format, eine Funktion, kein Drift zwischen Screens
Eckige Pills passen zum restlichen Design-System (alle Borders sind border-radius: 2px)
data-version-pill Attribut ist deklarativ – neue Screens brauchen nur das Attribut, kein JS
Uppercase macht den Debug-Charakter der Information deutlich (nicht für Endnutzer primär)

Konsequenzen

version.json muss vor dem Dev-Start generiert werden → make dev ruft generate-version-dev.sh auf
Alle bisherigen hardcoded v1.3.0 Strings in Pills werden durch data-version-pill ersetzt
initVersionPills() wird in onShellMount, initLogin und initInfo aufgerufen

Alternativen die verworfen wurden

Runde Pill (border-radius: 999px): War in v1.2.0, passt nicht zum restlichen Design-System
Nur Versionsnummer ohne Prefix: Weniger eindeutig was das Element bedeutet
Separate Komponente pro Screen: Führt zu Drift, keine zentrale Kontrolle

1	// ui.js
2	export async function initVersionPills() {
3	const { version } = await fetch('/version.json').then(r => r.json());
4	const label = `VERSION: ${version.toUpperCase()}`;
5	document.querySelectorAll('[data-version-pill]').forEach(el => el.textContent = label);
6	}