From 95c33e0b0fcbeb8d0b505cab70a753ae8bf67423 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Wed, 2 Sep 2026 03:45:07 +0200
Subject: [PATCH] refactor(playlists): compact the playlist header to two rows
 (E9 12A)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header portals into the shell's FIXED toolbar band, so its height is
list height the user never gets back — and it was spending four stacked
blocks on it: title, meta line, an action row, then a separate view-control
row under the cover. Option B collapses that into two tight rows beside a
smaller cover: title + rename/YouTube-link on the first, with Play-all,
push/revert/delete and the unsynced badge pushed right; the meta line
(count · playtime · filtered) and the view controls (group-by, reset view,
save order, view status, undo/redo) sharing the second.

Every control and its gating is unchanged — the view-control group still
appears only for `items.length > 1 || viewActive`, so a one-item playlist
shows just the meta line.

Measured on a 32-item playlist: the band goes 170px -> 88px at rest
(122px while a view is active, where the status sentence wraps), which is
~80px more visible list.
---
 frontend/src/components/Playlists.tsx | 312 +++++++++++++-------------
 1 file changed, 162 insertions(+), 150 deletions(-)

diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index 27ed8765..de3e04e6 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -606,173 +606,185 @@ export default function Playlists() {
       {/* Header (title, actions, view controls) is fixed chrome — it portals into the shell's
           fixed band, so only the video list scrolls. */}
       <PageToolbar>
-        <div className="px-4 pt-2 pb-2 max-w-5xl mx-auto">
-          <div className="flex gap-3 items-start mb-4">
-            <div className="w-24 h-13.5 rounded-lg bg-card overflow-hidden shrink-0">
+        {/* Two tight rows beside a small cover: title + actions on the first, the meta line and the
+            view controls sharing the second. This band is FIXED chrome (it never scrolls), so every
+            row it sheds is list height won back — the old layout stacked three rows next to the
+            cover plus a fourth block under it, for roughly twice this height. */}
+        <div className="px-4 py-2 max-w-5xl mx-auto">
+          <div className="flex gap-3 items-center">
+            <div className="w-20 h-11.25 rounded-lg bg-card overflow-hidden shrink-0">
               {items[0]?.thumbnail_url && (
                 <img src={items[0].thumbnail_url} alt="" className="w-full h-full object-cover" />
               )}
             </div>
             <div className="min-w-0 flex-1">
-              {renaming ? (
-                <input
-                  autoFocus
-                  value={renameValue}
-                  onChange={(e) => setRenameValue(e.target.value)}
-                  onBlur={saveRename}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") saveRename();
-                    if (e.key === "Escape") setRenaming(false);
-                  }}
-                  aria-label={t("playlists.rename")}
-                  className="text-lg font-semibold bg-surface border border-border rounded-md px-2 py-0.5 focus:outline-hidden focus:ring-2 focus:ring-accent/40"
-                />
-              ) : (
-                <div className="flex items-center gap-2 min-w-0">
-                  <h2 className="text-lg font-semibold truncate">{plName(detail)}</h2>
-                  {editable && (
-                    <button
-                      onClick={() => {
-                        setRenameValue(detail.name);
-                        setRenaming(true);
-                      }}
-                      title={t("playlists.rename")}
-                      aria-label={t("playlists.rename")}
-                      className="shrink-0 text-muted hover:text-fg"
+              <div className="flex items-center gap-2 min-w-0">
+                {renaming ? (
+                  <input
+                    autoFocus
+                    value={renameValue}
+                    onChange={(e) => setRenameValue(e.target.value)}
+                    onBlur={saveRename}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") saveRename();
+                      if (e.key === "Escape") setRenaming(false);
+                    }}
+                    aria-label={t("playlists.rename")}
+                    className="min-w-0 text-lg font-semibold bg-surface border border-border rounded-md px-2 py-0.5 focus:outline-hidden focus:ring-2 focus:ring-accent/40"
+                  />
+                ) : (
+                  <>
+                    <h2 className="text-lg font-semibold truncate">{plName(detail)}</h2>
+                    {editable && (
+                      <button
+                        onClick={() => {
+                          setRenameValue(detail.name);
+                          setRenaming(true);
+                        }}
+                        title={t("playlists.rename")}
+                        aria-label={t("playlists.rename")}
+                        className="shrink-0 text-muted hover:text-fg"
+                      >
+                        <Pencil className="w-3.5 h-3.5" />
+                      </button>
+                    )}
+                    {detail.yt_playlist_id && (
+                      <a
+                        href={`https://www.youtube.com/playlist?list=${detail.yt_playlist_id}`}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        title={t("playlists.openOnYoutube")}
+                        aria-label={t("playlists.openOnYoutube")}
+                        className="shrink-0 text-muted hover:text-accent"
+                      >
+                        <ExternalLink className="w-3.5 h-3.5" />
+                      </a>
+                    )}
+                  </>
+                )}
+                <div className="ml-auto flex gap-1.5 items-center shrink-0">
+                  {linked && detail.dirty && (
+                    <span
+                      title={t("playlists.unsyncedHint")}
+                      className="inline-flex items-center gap-1.5 text-2xs text-accent mr-1"
                     >
-                      <Pencil className="w-3.5 h-3.5" />
+                      <span className="w-1.5 h-1.5 rounded-full bg-accent" />
+                      {t("playlists.unsynced")}
+                    </span>
+                  )}
+                  <button
+                    onClick={() => shown.length && setPlayingId(shown[0]!.id)}
+                    disabled={!shown.length}
+                    className="inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg btn-primary disabled:opacity-40 transition"
+                  >
+                    <Play className="w-3.5 h-3.5 fill-current" /> {t("playlists.playAll")}
+                  </button>
+                  {editable && canWrite && (
+                    <button
+                      onClick={pushToYoutube}
+                      disabled={pushing}
+                      title={linked ? t("playlists.pushToYoutube") : t("playlists.exportToYoutube")}
+                      aria-label={
+                        linked ? t("playlists.pushToYoutube") : t("playlists.exportToYoutube")
+                      }
+                      className={`inline-flex items-center justify-center p-2 rounded-lg border transition disabled:opacity-40 ${
+                        detail.dirty
+                          ? "border-accent text-accent hover:bg-accent/10"
+                          : "border-border text-muted hover:text-fg hover:border-accent"
+                      }`}
+                    >
+                      {pushing ? (
+                        <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                      ) : linked ? (
+                        <Youtube className="w-3.5 h-3.5" />
+                      ) : (
+                        <Upload className="w-3.5 h-3.5" />
+                      )}
                     </button>
                   )}
-                  {detail.yt_playlist_id && (
-                    <a
-                      href={`https://www.youtube.com/playlist?list=${detail.yt_playlist_id}`}
-                      target="_blank"
-                      rel="noreferrer noopener"
-                      title={t("playlists.openOnYoutube")}
-                      aria-label={t("playlists.openOnYoutube")}
-                      className="shrink-0 text-muted hover:text-accent"
+                  {linked && detail.dirty && (
+                    <button
+                      onClick={revertToYoutube}
+                      disabled={reverting}
+                      title={t("playlists.revert")}
+                      aria-label={t("playlists.revert")}
+                      className="inline-flex items-center justify-center p-2 rounded-lg border border-border text-muted hover:text-fg hover:border-accent transition disabled:opacity-40"
                     >
-                      <ExternalLink className="w-3.5 h-3.5" />
-                    </a>
+                      <RotateCcw className={`w-3.5 h-3.5 ${reverting ? "animate-spin" : ""}`} />
+                    </button>
+                  )}
+                  {editable && (
+                    <button
+                      onClick={deletePlaylist}
+                      title={t("playlists.delete")}
+                      aria-label={t("playlists.delete")}
+                      className="inline-flex items-center justify-center p-2 rounded-lg border border-border text-muted hover:text-danger hover:border-danger/50 transition"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
                   )}
                 </div>
-              )}
-              <div className="text-xs text-muted mt-0.5">
-                {t("playlists.itemCount", { count: items.length })}
-                {totalSeconds > 0 && ` · ${formatRuntime(totalSeconds)}`}
-                {filterActive && ` · ${t("playlists.filteredCount", { count: shown.length })}`}
               </div>
-              <div className="flex gap-1.5 mt-3 flex-wrap items-center">
-                <button
-                  onClick={() => shown.length && setPlayingId(shown[0]!.id)}
-                  disabled={!shown.length}
-                  className="inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg btn-primary disabled:opacity-40 transition"
-                >
-                  <Play className="w-3.5 h-3.5 fill-current" /> {t("playlists.playAll")}
-                </button>
-                {editable && canWrite && (
-                  <button
-                    onClick={pushToYoutube}
-                    disabled={pushing}
-                    title={linked ? t("playlists.pushToYoutube") : t("playlists.exportToYoutube")}
-                    aria-label={
-                      linked ? t("playlists.pushToYoutube") : t("playlists.exportToYoutube")
-                    }
-                    className={`inline-flex items-center justify-center p-2 rounded-lg border transition disabled:opacity-40 ${
-                      detail.dirty
-                        ? "border-accent text-accent hover:bg-accent/10"
-                        : "border-border text-muted hover:text-fg hover:border-accent"
-                    }`}
-                  >
-                    {pushing ? (
-                      <RefreshCw className="w-3.5 h-3.5 animate-spin" />
-                    ) : linked ? (
-                      <Youtube className="w-3.5 h-3.5" />
-                    ) : (
-                      <Upload className="w-3.5 h-3.5" />
+
+              <div className="flex items-center gap-2 mt-1 flex-wrap">
+                <span className="text-xs text-muted">
+                  {t("playlists.itemCount", { count: items.length })}
+                  {totalSeconds > 0 && ` · ${formatRuntime(totalSeconds)}`}
+                  {filterActive && ` · ${t("playlists.filteredCount", { count: shown.length })}`}
+                </span>
+                {(items.length > 1 || viewActive) && (
+                  <>
+                    <span aria-hidden="true" className="text-xs text-muted/40">
+                      ·
+                    </span>
+                    <label className="inline-flex items-center gap-1.5 text-xs text-muted cursor-pointer select-none">
+                      <input
+                        type="checkbox"
+                        checked={groupBy}
+                        onChange={(e) => setGroupBy(e.target.checked)}
+                        className="accent-accent"
+                      />
+                      {t("playlists.groupByChannel")}
+                    </label>
+                    {viewActive && (
+                      <button
+                        onClick={clearView}
+                        className="text-xs text-muted hover:text-accent underline underline-offset-2 transition"
+                      >
+                        {t("playlists.clearView")}
+                      </button>
                     )}
-                  </button>
-                )}
-                {linked && detail.dirty && (
-                  <button
-                    onClick={revertToYoutube}
-                    disabled={reverting}
-                    title={t("playlists.revert")}
-                    aria-label={t("playlists.revert")}
-                    className="inline-flex items-center justify-center p-2 rounded-lg border border-border text-muted hover:text-fg hover:border-accent transition disabled:opacity-40"
-                  >
-                    <RotateCcw className={`w-3.5 h-3.5 ${reverting ? "animate-spin" : ""}`} />
-                  </button>
-                )}
-                {editable && (
-                  <button
-                    onClick={deletePlaylist}
-                    title={t("playlists.delete")}
-                    aria-label={t("playlists.delete")}
-                    className="inline-flex items-center justify-center p-2 rounded-lg border border-border text-muted hover:text-danger hover:border-danger/50 transition"
-                  >
-                    <Trash2 className="w-3.5 h-3.5" />
-                  </button>
-                )}
-                {linked && detail.dirty && (
-                  <span
-                    title={t("playlists.unsyncedHint")}
-                    className="inline-flex items-center gap-1.5 text-2xs text-accent ml-1"
-                  >
-                    <span className="w-1.5 h-1.5 rounded-full bg-accent" />
-                    {t("playlists.unsynced")}
-                  </span>
+                    {canSaveOrder && (
+                      <button
+                        onClick={saveOrder}
+                        className="inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-lg border border-accent text-accent hover:bg-accent/10 transition"
+                      >
+                        <Check className="w-3.5 h-3.5" /> {t("playlists.saveOrder")}
+                      </button>
+                    )}
+                    {/* ONE sentence that names the state. Three loose texts used to pile up here
+                        (reset link + save hint + "reordering is off"), and none of them answered the
+                        question a user actually has — "did I just change my playlist?". Worse,
+                        sorting a list whose stored order ALREADY matches the sort produced a
+                        warning, no Save button and no visible change, which reads as a malfunction.
+                        Now the line says which of the three situations you are in; the disabled grip
+                        still explains itself on hover/focus. */}
+                    {viewActive && <span className="text-2xs text-muted/80">{viewStatus}</span>}
+                    {canEdit && (
+                      <div className="ml-auto">
+                        <UndoToolbar
+                          canUndo={order.canUndo}
+                          canRedo={order.canRedo}
+                          onUndo={order.undo}
+                          onRedo={order.redo}
+                        />
+                      </div>
+                    )}
+                  </>
                 )}
               </div>
             </div>
           </div>
-
-          {(items.length > 1 || viewActive) && (
-            <div className="flex items-center gap-2 mb-3 flex-wrap max-w-5xl">
-              <label className="inline-flex items-center gap-1.5 text-xs text-muted cursor-pointer select-none">
-                <input
-                  type="checkbox"
-                  checked={groupBy}
-                  onChange={(e) => setGroupBy(e.target.checked)}
-                  className="accent-accent"
-                />
-                {t("playlists.groupByChannel")}
-              </label>
-              {viewActive && (
-                <button
-                  onClick={clearView}
-                  className="text-xs text-muted hover:text-accent underline underline-offset-2 transition"
-                >
-                  {t("playlists.clearView")}
-                </button>
-              )}
-              {canSaveOrder && (
-                <button
-                  onClick={saveOrder}
-                  className="inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-lg border border-accent text-accent hover:bg-accent/10 transition"
-                >
-                  <Check className="w-3.5 h-3.5" /> {t("playlists.saveOrder")}
-                </button>
-              )}
-              {/* ONE sentence that names the state. Three loose texts used to pile up here (reset
-                  link + save hint + "reordering is off"), and none of them answered the question a
-                  user actually has — "did I just change my playlist?". Worse, sorting a list whose
-                  stored order ALREADY matches the sort produced a warning, no Save button and no
-                  visible change, which reads as a malfunction. Now the line says which of the three
-                  situations you are in; the disabled grip still explains itself on hover/focus. */}
-              {viewActive && <span className="text-2xs text-muted/80">{viewStatus}</span>}
-              {canEdit && (
-                <div className="ml-auto">
-                  <UndoToolbar
-                    canUndo={order.canUndo}
-                    canRedo={order.canRedo}
-                    onUndo={order.undo}
-                    onRedo={order.redo}
-                  />
-                </div>
-              )}
-            </div>
-          )}
         </div>
       </PageToolbar>