feat: unique display names + inline recover on join (v0.13.1)

Backend: migration 007 adds a case-insensitive unique index on user names
per event. join endpoint returns 409 conflict when the name is taken.
find_by_event_and_name uses LOWER() for case-insensitive recovery.

Frontend: join page handles 409 with a name-taken view — amber warning,
name-choice tips, inline PIN recovery form, and "Anderen Namen wählen"
button. Test guide updated with Steps 8 and 9.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/routes/join/+page.svelte

@@ -10,6 +10,13 @@
 	let pin = $state('');
 	let copied = $state(false);
 
+	// Name-taken state — shown instead of the normal form
+	let nameTaken = $state(false);
+	let takenName = $state('');
+	let recoveryPin = $state('');
+	let recoveryError = $state('');
+	let recoveryLoading = $state(false);
+
 	async function handleJoin() {
 		if (!displayName.trim()) return;
 		loading = true;
@@ -26,7 +33,10 @@
 			pin = res.pin;
 			showPinModal = true;
 		} catch (e) {
-			if (e instanceof ApiError) {
+			if (e instanceof ApiError && e.code === 'conflict') {
+				takenName = displayName.trim();
+				nameTaken = true;
+			} else if (e instanceof ApiError) {
 				error = e.message;
 			} else {
 				error = 'Ein Fehler ist aufgetreten.';
@@ -36,6 +46,35 @@
 		}
 	}
 
+	async function handleInlineRecover() {
+		if (recoveryPin.length < 4) return;
+		recoveryLoading = true;
+		recoveryError = '';
+		try {
+			const res = await api.post<{ jwt: string; user_id: string }>(
+				'/recover',
+				{ display_name: takenName, pin: recoveryPin.trim() }
+			);
+			setAuth(res.jwt, recoveryPin.trim(), res.user_id, takenName);
+			goto('/feed');
+		} catch (e) {
+			if (e instanceof ApiError) {
+				recoveryError = e.message;
+			} else {
+				recoveryError = 'Ein Fehler ist aufgetreten.';
+			}
+		} finally {
+			recoveryLoading = false;
+		}
+	}
+
+	function tryDifferentName() {
+		nameTaken = false;
+		recoveryPin = '';
+		recoveryError = '';
+		// Keep displayName so the user can edit it slightly
+	}
+
 	function copyPin() {
 		navigator.clipboard.writeText(pin);
 		copied = true;
@@ -49,35 +88,85 @@
 
 <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
 	<div class="w-full max-w-sm">
-		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Willkommen!</h1>
-		<p class="mb-6 text-center text-gray-600">Gib deinen Namen ein, um dem Event beizutreten.</p>
 
-		<form onsubmit={(e) => { e.preventDefault(); handleJoin(); }}>
-			<input
-				type="text"
-				bind:value={displayName}
-				placeholder="Dein Name"
-				maxlength={50}
-				class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
-			/>
+		{#if nameTaken}
+			<!-- Name-taken state: sign in with PIN or choose a different name -->
+			<div class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4">
+				<p class="font-semibold text-amber-900">„{takenName}" ist bereits vergeben.</p>
+				<p class="mt-1 text-sm text-amber-800">
+					Wähle einen anderen Namen, z.&nbsp;B. einen Spitznamen oder füge deinen Nachnamen hinzu
+					(„{takenName} M." oder „{takenName} aus Berlin").
+				</p>
+			</div>
 
-			{#if error}
-				<p class="mb-3 text-sm text-red-600">{error}</p>
-			{/if}
+			<p class="mb-3 text-sm font-medium text-gray-700">
+				Falls du das bist, melde dich mit deinem PIN an:
+			</p>
+
+			<form onsubmit={(e) => { e.preventDefault(); handleInlineRecover(); }}>
+				<input
+					type="text"
+					bind:value={recoveryPin}
+					placeholder="4-stelliger PIN"
+					maxlength={4}
+					inputmode="numeric"
+					pattern="[0-9]*"
+					class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+				/>
+
+				{#if recoveryError}
+					<p class="mb-3 text-sm text-red-600">{recoveryError}</p>
+				{/if}
+
+				<button
+					type="submit"
+					disabled={recoveryLoading || recoveryPin.length < 4}
+					class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+				>
+					{recoveryLoading ? 'Wird angemeldet...' : 'Anmelden'}
+				</button>
+			</form>
 
 			<button
-				type="submit"
-				disabled={loading || !displayName.trim()}
-				class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+				onclick={tryDifferentName}
+				class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50"
 			>
-				{loading ? 'Wird geladen...' : 'Beitreten'}
+				Anderen Namen wählen
 			</button>
-		</form>
 
-		<p class="mt-4 text-center text-sm text-gray-500">
-			Schon dabei?
-			<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
-		</p>
+		{:else}
+			<!-- Normal join form -->
+			<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Willkommen!</h1>
+			<p class="mb-6 text-center text-gray-600">Gib deinen Namen ein, um dem Event beizutreten.</p>
+
+			<form onsubmit={(e) => { e.preventDefault(); handleJoin(); }}>
+				<input
+					type="text"
+					bind:value={displayName}
+					placeholder="Dein Name"
+					maxlength={50}
+					class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+				/>
+
+				{#if error}
+					<p class="mb-3 text-sm text-red-600">{error}</p>
+				{/if}
+
+				<button
+					type="submit"
+					disabled={loading || !displayName.trim()}
+					class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+				>
+					{loading ? 'Wird geladen...' : 'Beitreten'}
+				</button>
+			</form>
+
+			<p class="mt-4 text-center text-sm text-gray-500">
+				Schon dabei?
+				<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
+			</p>
+		{/if}
+
 	</div>
 </div>