From 647bde2cf4e2585c42415b468533d011ff2e47ca Mon Sep 17 00:00:00 2001
From: Mistral Vibe <vibe@mistral.ai>
Date: Tue, 7 Apr 2026 13:42:04 +0000
Subject: [PATCH] Optimize song view: remove queue section and center comments
 on mobile

- Removed 'Up next in Session' queue section to declutter mobile view
- Added responsive layout that stacks waveform and comments vertically on mobile
- Centered comment panel on mobile with max-width constraint
- Removed unused queueSongs variable

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
---
 web/src/pages/SongPage.tsx | 75 +++++++++++++-------------------------
 1 file changed, 26 insertions(+), 49 deletions(-)

diff --git a/web/src/pages/SongPage.tsx b/web/src/pages/SongPage.tsx
index 7241b16..a810dda 100644
--- a/web/src/pages/SongPage.tsx
+++ b/web/src/pages/SongPage.tsx
@@ -409,9 +409,7 @@ export function SongPage() {
     }
   }, []);
 
-  // ── Queue: other songs in the session ────────────────────────────────────
 
-  const queueSongs = session?.songs?.filter((s) => s.id !== songId) ?? [];
 
   // ── Styles ────────────────────────────────────────────────────────────────
 
@@ -511,11 +509,11 @@ export function SongPage() {
         </button>
       </div>
 
-      {/* ── Body: waveform/queue | comments ────────────────────────────── */}
-      <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
+      {/* ── Body: waveform | comments ────────────────────────────────── */}
+      <div className="song-page-body" style={{ display: "flex", flex: 1, overflow: "hidden" }}>
 
-        {/* ── Left: waveform + transport + queue ───────────────────────── */}
-        <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", padding: "16px 20px" }}>
+        {/* ── Left: waveform + transport ──────────────────────────────── */}
+        <div className="waveform-section" style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", padding: "16px 20px" }}>
 
           {/* Waveform card */}
           <div
@@ -634,53 +632,12 @@ export function SongPage() {
             </div>
           </div>
 
-          {/* Queue */}
-          {queueSongs.length > 0 && (
-            <div style={{ flex: 1, overflow: "hidden", minHeight: 0 }}>
-              <div style={{ fontSize: 10, color: "rgba(255,255,255,0.22)", textTransform: "uppercase", letterSpacing: "0.7px", fontWeight: 600, marginBottom: 7 }}>
-                Up next in session
-              </div>
-              <div style={{ overflowY: "auto", maxHeight: "100%" }}>
-                {queueSongs.map((s, i) => (
-                  <button
-                    key={s.id}
-                    onClick={() => navigate(`/bands/${bandId}/songs/${s.id}`)}
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 10,
-                      width: "100%",
-                      padding: "7px 10px",
-                      borderRadius: 7,
-                      background: "rgba(255,255,255,0.025)",
-                      border: `1px solid rgba(255,255,255,0.04)`,
-                      cursor: "pointer",
-                      marginBottom: 3,
-                      textAlign: "left",
-                      fontFamily: "inherit",
-                      transition: "background 0.1s",
-                    }}
-                    onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(255,255,255,0.05)")}
-                    onMouseLeave={(e) => (e.currentTarget.style.background = "rgba(255,255,255,0.025)")}
-                  >
-                    <span style={{ fontSize: 10, color: "rgba(255,255,255,0.18)", fontFamily: "monospace", minWidth: 14 }}>
-                      {i + 2}
-                    </span>
-                    <span style={{ flex: 1, fontSize: 12, color: "rgba(255,255,255,0.52)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "monospace" }}>
-                      {s.title}
-                    </span>
-                    <span style={{ fontSize: 10, padding: "1px 6px", borderRadius: 3, background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.32)" }}>
-                      {s.status}
-                    </span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
+
         </div>
 
         {/* ── Right: comment panel ──────────────────────────────────────── */}
         <div
+          className="comment-panel"
           style={{
             width: 280,
             minWidth: 280,
@@ -689,6 +646,8 @@ export function SongPage() {
             flexDirection: "column",
             overflow: "hidden",
             background: "rgba(0,0,0,0.12)",
+            // Responsive: center on mobile
+            margin: "0 auto",
           }}
         >
           {/* Header */}
@@ -965,6 +924,24 @@ export function SongPage() {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.3; }
         }
+        
+        /* Responsive layout for mobile */
+        @media (max-width: 768px) {
+          .song-page-body {
+            flex-direction: column;
+          }
+          .waveform-section {
+            padding: 12px 16px;
+          }
+          .comment-panel {
+            width: 100% !important;
+            min-width: auto !important;
+            border-left: none;
+            border-top: 1px solid rgba(255,255,255,0.055);
+            margin: 0;
+            max-width: 600px;
+          }
+        }
       `}</style>
     </div>
   );