Refactor UI code for improved readability and consistency

Updated formatting in ui.js for better code clarity, including consistent line breaks and indentation. Adjusted lobby music volume from 0.28 to 0.2 for a softer background experience. Ensured that the length slider and related functions maintain their intended behavior while enhancing overall code maintainability.

frontend/ui.js

@@ -28,19 +28,23 @@ export function initUI({
   // 1.5 min are stitched from 30s chunks. The set is hardware-dependent — a
   // CPU-only backend allows only 30s — so we fetch the real list from /api/config
   // and collapse the slider when there's a single option.
-  const fmtLen = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+  const fmtLen = (s) =>
+    `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
   let LENGTHS = [30, 60, 90].map((s) => ({ seconds: s, label: fmtLen(s) }));
-  const selectedLength = () => LENGTHS[Number(lengthSlider.value)] ?? LENGTHS[0];
+  const selectedLength = () =>
+    LENGTHS[Number(lengthSlider.value)] ?? LENGTHS[0];
   // adapt the slider to what this backend actually allows; defensive — any failure
   // keeps the 30/60/90 default, so the GPU path is never affected
   fetch("/api/config")
     .then((r) => (r.ok ? r.json() : null))
     .then((cfg) => {
-      const allowed = cfg && Array.isArray(cfg.allowed_seconds) ? cfg.allowed_seconds : null;
+      const allowed =
+        cfg && Array.isArray(cfg.allowed_seconds) ? cfg.allowed_seconds : null;
       if (!allowed || !allowed.length) return;
       LENGTHS = allowed.map((s) => ({ seconds: s, label: fmtLen(s) }));
       lengthSlider.max = String(Math.max(0, LENGTHS.length - 1));
-      if (Number(lengthSlider.value) > LENGTHS.length - 1) lengthSlider.value = "0";
+      if (Number(lengthSlider.value) > LENGTHS.length - 1)
+        lengthSlider.value = "0";
       lengthValue.textContent = selectedLength().label;
       if (LENGTHS.length <= 1) lengthRow.style.display = "none"; // single option → no slider
     })
@@ -105,7 +109,7 @@ export function initUI({
   // audio autoplay until the user interacts, so it's primed on the first gesture;
   // after that it just follows the player state via syncPlayState() -> updateLobby().
   // Track: Alex Morgan — "Peaceful Cafe Jazz" (Pixabay, royalty-free).
-  const LOBBY_VOL = 0.28; // 70% of the original 0.4
+  const LOBBY_VOL = 0.2; // 70% of the original 0.4
   const lobby = new Audio("/static/lobby.mp3");
   lobby.loop = true;
   lobby.preload = "auto";
@@ -120,7 +124,10 @@ export function initUI({
     let i = 0;
     lobbyFade = setInterval(() => {
       i += 1;
-      lobby.volume = Math.max(0, Math.min(1, from + (target - from) * (i / steps)));
+      lobby.volume = Math.max(
+        0,
+        Math.min(1, from + (target - from) * (i / steps)),
+      );
       if (i >= steps) {
         clearInterval(lobbyFade);
         lobbyFade = null;
@@ -192,7 +199,8 @@ export function initUI({
       const p = await getProgress();
       if (!p || !p.total) return;
       if (!sawFresh) {
-        if (p.done < p.total) sawFresh = true; // this brew has actually started
+        if (p.done < p.total)
+          sawFresh = true; // this brew has actually started
         else return; // a stale "complete" from the last tape — ignore it
       }
       setBrewProgress(p.done / p.total);
@@ -226,7 +234,10 @@ export function initUI({
     try {
       // hold the brewing moment even if the backend is fast
       const seconds = selectedLength().seconds;
-      const [result] = await Promise.all([generate(prompt, seconds), delay(2600)]);
+      const [result] = await Promise.all([
+        generate(prompt, seconds),
+        delay(2600),
+      ]);
       sessionTapes.unshift(result); // newest first, kept only for this session
       setBrewProgress(1); // the tape's here — top the bar off
       loadCassette(result);
@@ -444,7 +455,7 @@ export function initUI({
     });
     // open centered on the tape already playing, otherwise the newest one
     const playingIdx = songs.findIndex(
-      (s) => tapeKey(s.url) === tapeKey(currentSong?.url)
+      (s) => tapeKey(s.url) === tapeKey(currentSong?.url),
     );
     centerIndex = playingIdx >= 0 ? playingIdx : 0;
     layoutCarousel();
@@ -547,16 +558,23 @@ export function initUI({
   const seek = (bar) => (e) => {
     if (!active.duration) return;
     const rect = bar.getBoundingClientRect();
-    active.currentTime = ((e.clientX - rect.left) / rect.width) * active.duration;
+    active.currentTime =
+      ((e.clientX - rect.left) / rect.width) * active.duration;
   };
   progress.addEventListener("click", seek(progress));
   deckProgress.addEventListener("click", seek(deckProgress));
 
-  $("collection-close").addEventListener("click", () => onRequestCloseCollection());
+  $("collection-close").addEventListener("click", () =>
+    onRequestCloseCollection(),
+  );
   $("gameboy-close").addEventListener("click", () => onRequestCloseGameboy());
   playWaitBtn.addEventListener("click", () => onPlayWhileWaiting());
-  caroPrev.addEventListener("click", () => centerOn(centerIndex - 1, { load: true }));
-  caroNext.addEventListener("click", () => centerOn(centerIndex + 1, { load: true }));
+  caroPrev.addEventListener("click", () =>
+    centerOn(centerIndex - 1, { load: true }),
+  );
+  caroNext.addEventListener("click", () =>
+    centerOn(centerIndex + 1, { load: true }),
+  );
 
   // --- modal controls ---------------------------------------------------------