feat: add manual save button for player name and update UI interactions

public/index.html

@@ -51,20 +51,24 @@
     <!-- Lobby Card -->
     <div id="lobby"
       class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-4 md:p-6 space-y-4">
-      <div class="flex flex-col sm:flex-row gap-3 sm:items-end">
+      <div class="flex flex-col sm:flex-row gap-3">
         <label class="flex-1 text-sm font-medium text-slate-600 dark:text-slate-300">
           Dein Name
           <input id="name" placeholder="Name"
             class="mt-1 w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 py-2 h-11 outline-none focus:ring-2 focus:ring-indigo-500" />
           <span class="mt-1 block text-xs text-slate-500 dark:text-slate-400">Speichert automatisch</span>
         </label>
+        <button id="saveName"
+          class="h-11 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-medium sm:mt-6">
+          💾 Speichern
+        </button>
       </div>
       <div class="flex flex-col sm:flex-row gap-3">
         <button id="createRoom" class="h-11 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white font-medium">
           Raum erstellen
         </button>
         <input id="roomCode" placeholder="Code"
-          class="flex-1 h-11 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 outline-none focus:ring-2 focus:ring-indigo-500" />
+          class="flex-1 h-11 rounded-lg border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800 px-3 py-2 outline-none focus:ring-2 focus:ring-indigo-500" />
         <button id="joinRoom"
           class="h-11 px-4 rounded-lg bg-slate-900 hover:bg-slate-700 text-white font-medium dark:bg-slate-700 dark:hover:bg-slate-600">
           Beitreten
@@ -137,19 +141,25 @@
         </p>
       </div>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
+      <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center sm:justify-between">
-        <div class="space-y-1">
+        <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
-          <div class="text-slate-700 dark:text-slate-300">
+          <div class="text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
-            Status: <span id="status" class="font-medium"></span>
+            <span class="text-base">⚡</span>
+            <span class="font-medium text-slate-500 dark:text-slate-400">Status:</span>
+            <span id="status" class="font-semibold text-slate-900 dark:text-slate-100"></span>
           </div>
-          <div class="text-slate-700 dark:text-slate-300">
+          <div class="text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
-            Am Zug: <span id="guesser" class="font-medium"></span>
+            <span class="text-base">🎯</span>
+            <span class="font-medium text-slate-500 dark:text-slate-400">Am Zug:</span>
+            <span id="guesser" class="font-semibold text-slate-900 dark:text-slate-100"></span>
           </div>
-          <div id="playlistInfo" class="text-slate-700 dark:text-slate-300">
+          <div id="playlistInfo" class="text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
-            Playlist: <span id="currentPlaylist" class="font-medium">default</span>
+            <span class="text-base">🎵</span>
+            <span class="font-medium text-slate-500 dark:text-slate-400">Playlist:</span>
+            <span id="currentPlaylist" class="font-semibold text-slate-900 dark:text-slate-100">default</span>
           </div>
         </div>
-        <div class="flex flex-wrap items-center gap-3 justify-start md:justify-end">
+        <div class="flex flex-wrap items-center gap-3 justify-start sm:justify-end">
           <label class="inline-flex items-center gap-3 text-slate-700 dark:text-slate-300 select-none">
             <input type="checkbox" id="readyChk" class="peer sr-only" aria-label="Bereit um zu starten" />
             <span

public/js/dom.js

@@ -29,6 +29,7 @@ export const $volumeSlider = el('volumeSlider');
 export const $bufferBadge = el('bufferBadge');
 export const $copyRoomCode = el('copyRoomCode');
 export const $nameLobby = el('name');
+export const $saveName = el('saveName');
 export const $createRoom = el('createRoom');
 export const $joinRoom = el('joinRoom');
 export const $roomCode = el('roomCode');

public/js/ui.js

@@ -21,6 +21,7 @@ import {
   $leaveRoom,
   $playBtn,
   $volumeSlider,
+  $saveName,
 } from './dom.js';
 import { state } from './state.js';
 import { initAudioUI, stopAudioPlayback } from './audio.js';
@@ -50,7 +51,26 @@ export function wireUi() {
     }
   }
 
-  // Button removed: autosave handles everything
+  // Manual save button
+  if ($saveName) {
+    wire($saveName, 'click', () => {
+      if (nameDebounce) {
+        clearTimeout(nameDebounce);
+        nameDebounce = null;
+      }
+      const val = ($nameLobby?.value || '').trim();
+      if (!val) {
+        showToast('⚠️ Bitte gib einen Namen ein!');
+        return;
+      }
+      const prev = localStorage.getItem('playerName') || '';
+      if (prev === val) {
+        showToast('✓ Name bereits gespeichert!');
+        return;
+      }
+      saveNameIfChanged(val);
+    });
+  }
 
   // Autosave on input with debounce
   if ($nameLobby) {