From 9cbff21274604e37c0986d57937deef85819c396 Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Wed, 16 Sep 2026 12:10:25 +0200
Subject: music: the playlist menus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One button in Music's sticky toolbar — load, create, delete, remove a
track, sync now — and "add to playlist" on every cover and row. Both
surfaces share one list, read from the manifest, so they open instantly
with every node offline and no body is fetched until one is wanted.

Submenus expand in place rather than flying out: the account menu's
language list already does this, and a flyout has nowhere to go at 400px.
The tracklist under "remove a track" loads when it is expanded.

A name is typed into a field. Electron has no prompt — it throws.

Also splits the two playback failures: a decode failure belongs to that
file and keeps the bounded counter, a connection failure belongs to the
group and skips all of its queued tracks at once. Six dead tracks are
one more than the bound, which is where a playlist would otherwise stop.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../meshbay-hub/src/meshbay_hub/static/style.css   | 51 ++++++++++++++++++++++
 1 file changed, 51 insertions(+)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 5642262..2bf0b18 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -5141,3 +5141,54 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
 /* "Play all" and the album's menu, side by side under the cover. */
 .music-detail-actions { display: flex; align-items: center; gap: 6px; }
 .music-detail-actions .ctx-dots { opacity: 1; }
+
+/* ── Playlists (playlist-menu.js) ─────────────────────────────────────────
+   docs/playlists.md §10.3. One button in Music's sticky toolbar, and the two
+   small surfaces behind it: a field for naming a playlist, and a one-line
+   result that clears itself. */
+
+.playlist-modal { max-width: 420px; }
+.playlist-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.playlist-modal-body input {
+  width: 100%;
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-base);
+  color: var(--text);
+  font: inherit;
+}
+.playlist-modal-body input:focus {
+  outline: none;
+  border-color: var(--border-focus);
+}
+.playlist-modal-error { color: var(--error); font-size: 0.85em; }
+.playlist-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* The result of an action, said once and then gone. Not a dialog: adding an
+   album to a playlist is not a thing anyone should have to dismiss. Fixed
+   above the player bar, which is itself pinned to the bottom — `--music-bar-h`
+   is published by the bar and is 0 when there is no bar. */
+.playlist-note {
+  position: fixed;
+  left: 50%;
+  bottom: calc(var(--music-bar-h, 0px) + 16px + env(safe-area-inset-bottom, 0px));
+  transform: translateX(-50%);
+  z-index: 250;
+  max-width: calc(100vw - 32px);
+  padding: 9px 16px;
+  border-radius: 999px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg);
+  color: var(--text);
+  font-size: 0.85em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
-- 
cgit v1.2.3