Unify player into single compact row, remove orphaned circle button

scraper/internal/server/ui.go

@@ -1937,10 +1937,10 @@ const chapterTmpl = `
     </label>
   </div>
 
-  <div class="max-w-2xl mx-auto px-3 py-2 flex flex-col gap-1.5">
+  <div class="max-w-2xl mx-auto px-3 py-2 flex flex-col gap-0">
 
-    <!-- Row 1: chapter nav + title + status + settings -->
-    <div class="flex items-center gap-2">
+    <!-- Single control row -->
+    <div class="flex items-center gap-1.5 h-11">
 
       <!-- Prev chapter -->
       {{if .PrevN}}
@@ -1951,23 +1951,31 @@ const chapterTmpl = `
          hx-swap="innerHTML"
          title="Previous chapter"
          aria-label="Previous chapter"
-         class="flex-shrink-0 px-2 py-1 rounded-md text-zinc-400 hover:text-zinc-100 text-xs transition-colors no-underline bg-zinc-800 hover:bg-zinc-700">
-        &#8592; Prev
+         class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-lg text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 text-sm transition-colors no-underline">
+        &#8592;
       </a>
       {{else}}
-      <span class="flex-shrink-0 w-[3.5rem]"></span>
+      <span class="flex-shrink-0 w-8"></span>
       {{end}}
 
-      <!-- Title + state badge -->
-      <div class="flex-1 min-w-0 flex items-center gap-2">
-        <span id="player-title" class="text-[0.78rem] font-medium text-zinc-300 truncate">Ch.&#x00A0;{{.ChapterN}}</span>
+      <!-- Play/Pause -->
+      <button id="player-play-btn"
+              type="button"
+              onclick="ttsToggle()"
+              aria-label="Play/Pause"
+              class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-amber-400 text-sm border-none cursor-pointer transition-colors">
+        <span id="player-play-icon" aria-hidden="true">&#9654;</span>
+      </button>
+
+      <!-- Chapter title + state badge -->
+      <div class="flex-1 min-w-0 flex items-center gap-2 px-1">
+        <span id="player-title" class="text-[0.8rem] font-medium text-zinc-300 truncate">Ch.&#x00A0;{{.ChapterN}}</span>
         <span id="player-state-badge" class="queue-badge queue-badge-idle flex-shrink-0">idle</span>
       </div>
 
-      <!-- Next chapter prefetch info -->
-      <div id="player-next-row" hidden class="flex-shrink-0 flex items-center gap-1.5">
-        <span class="text-[0.65rem] text-zinc-600 uppercase tracking-wide font-semibold">Next</span>
-        <span id="player-next-badge" class="queue-badge queue-badge-idle">—</span>
+      <!-- Next prefetch badge (shown at 80%) -->
+      <div id="player-next-row" hidden class="flex-shrink-0 flex items-center gap-1">
+        <span id="player-next-badge" class="queue-badge queue-badge-idle">next</span>
       </div>
 
       <!-- Settings -->
@@ -1976,7 +1984,7 @@ const chapterTmpl = `
               onclick="toggleSettings()"
               aria-label="Reader settings"
               aria-haspopup="dialog"
-              class="flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-md bg-transparent border-none cursor-pointer text-zinc-500 hover:text-amber-400 text-sm transition-colors">
+              class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-lg bg-transparent border-none cursor-pointer text-zinc-500 hover:text-amber-400 transition-colors">
         &#9881;
       </button>
 
@@ -1989,34 +1997,22 @@ const chapterTmpl = `
          hx-swap="innerHTML"
          title="Next chapter"
          aria-label="Next chapter"
-         class="flex-shrink-0 px-2 py-1 rounded-md text-zinc-400 hover:text-zinc-100 text-xs transition-colors no-underline bg-zinc-800 hover:bg-zinc-700">
-        Next &#8594;
+         class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-lg text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 text-sm transition-colors no-underline">
+        &#8594;
       </a>
       {{else}}
-      <span class="flex-shrink-0 w-[3.5rem]"></span>
+      <span class="flex-shrink-0 w-8"></span>
       {{end}}
 
     </div>
 
-    <!-- Row 2: play button + native audio -->
-    <div class="flex items-center gap-2">
-      <!-- Play/Pause button (triggers generation on first press) -->
-      <button id="player-play-btn"
-              type="button"
-              onclick="ttsToggle()"
-              aria-label="Play/Pause"
-              class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 hover:bg-amber-400 text-zinc-950 text-sm border-none cursor-pointer transition-colors">
-        <span id="player-play-icon" aria-hidden="true">&#9654;</span>
-      </button>
-
-      <!-- Native audio element (visible, controls shown after src is set) -->
+    <!-- Native audio seek bar (hidden until audio loads) -->
     <audio id="tts-audio-native"
            controls
            preload="none"
-             class="flex-1 h-8 min-w-0 rounded-lg [&::-webkit-media-controls-panel]:bg-zinc-800 [&::-webkit-media-controls-current-time-display]:text-zinc-300 [&::-webkit-media-controls-time-remaining-display]:text-zinc-500"
-             style="display:none; color-scheme:dark;">
+           class="w-full h-8"
+           style="display:none; color-scheme:dark; accent-color:#f59e0b;">
     </audio>
-    </div>
 
   </div>
 </aside>
@@ -2058,11 +2054,16 @@ const chapterTmpl = `
   .queue-badge-paused      { background: #1c1917; color: #d6d3d1; }
   .queue-badge-error       { background: #450a0a; color: #f87171; }
 
-  /* Native audio element dark theme */
+  /* Native audio — dark theme, hide redundant play button */
   #tts-audio-native {
     color-scheme: dark;
     accent-color: #f59e0b;
   }
+  /* Chrome/Safari: hide the play button inside the native controls */
+  #tts-audio-native::-webkit-media-controls-play-button { display: none !important; }
+  #tts-audio-native::-webkit-media-controls-panel { background: #18181b; border-radius: 0.5rem; }
+  /* Tighten bottom padding now that audio bar can appear */
+  #mini-player { padding-bottom: env(safe-area-inset-bottom, 0); }
 </style>
 
 <script>