`public/panels/sounds.html`

124 lines
<div class="muted-banner" id="snd-banner">Loading sounds &amp; assets…</div>
<div class="muted snd-legend" id="snd-legend" style="font-size:12px;margin:0 0 12px;line-height:1.6"></div>

<!-- social-selection bar: drag songs here (or tap ＋) to queue them for a post -->
<div class="snd-tray" id="snd-tray" aria-label="Social selection bar">
  <div class="snd-tray-lead">
    <span class="snd-tray-ico">🎵</span>
    <span class="snd-tray-ttl">Social selection</span>
    <span class="snd-tray-ct" id="snd-tray-ct">0</span>
  </div>
  <div class="snd-tray-drop" id="snd-tray-drop">
    <span class="snd-tray-hint">Drag songs here — or tap ＋ — to queue them for a social post.</span>
  </div>
  <div class="snd-tray-act">
    <button type="button" class="snd-tray-btn" id="snd-tray-copy">Copy list</button>
    <button type="button" class="snd-tray-btn ghost" id="snd-tray-clear">Clear</button>
  </div>
</div>

<div class="snd-split">
  <!-- LEFT: every asset lives in its own panel here -->
  <aside class="snd-left">
    <div class="snd-controls">
      <input type="search" id="snd-search" placeholder="Filter sources…" autocomplete="off">
      <div id="snd-badgefilter" class="snd-badgefilter"></div>
    </div>
    <div id="snd-sections" class="snd-list"><div class="muted">Loading…</div></div>
  </aside>

  <!-- RIGHT: in-panel preview, never links out -->
  <section class="snd-view" id="snd-view">
    <div class="snd-ph">Pick an asset on the left ← to preview it here.</div>
  </section>
</div>

<style>
.snd-split{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.snd-split{grid-template-columns:1fr}}

/* social-selection bar */
.snd-tray{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;
 background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:10px 12px;margin:0 0 14px}
.snd-tray-lead{display:flex;align-items:center;gap:8px;flex:none}
.snd-tray-ico{font-size:16px}
.snd-tray-ttl{font:600 13px/1 Inter;color:var(--ink)}
.snd-tray-ct{font:700 10px/1 Inter;background:var(--accent);color:#fff;border-radius:999px;padding:3px 8px;min-width:16px;text-align:center}
.snd-tray-drop{flex:1;min-width:200px;min-height:40px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
 border:1.5px dashed var(--line);border-radius:10px;padding:6px 10px;transition:border-color .12s,background .12s}
.snd-tray-drop.over{border-color:var(--accent);background:var(--cream)}
.snd-tray-hint{font-size:12px;color:var(--mut)}
.snd-chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);
 border-radius:999px;padding:4px 6px 4px 10px;font:600 12px/1 Inter;color:var(--ink);max-width:220px}
.snd-chip .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-chip .dot{width:8px;height:8px;border-radius:50%;flex:none}
.snd-chip .x{border:0;background:transparent;cursor:pointer;color:var(--mut);font:700 15px/1 Inter;padding:0 2px}
.snd-chip .x:hover{color:var(--accent)}
.snd-tray-act{display:flex;gap:6px;flex:none}
.snd-tray-btn{border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font:600 11.5px/1 Inter;color:var(--ink);padding:8px 11px}
.snd-tray-btn:hover{background:var(--cream)}
.snd-tray-btn.ghost{color:var(--mut)}

/* left panel */
.snd-left{border:1px solid var(--line);border-radius:12px;background:#fff;
 box-shadow:0 1px 3px rgba(0,0,0,.04);display:flex;flex-direction:column;
 max-height:calc(100vh - 210px);overflow:hidden}
.snd-controls{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.snd-controls input[type=search]{width:100%;box-sizing:border-box}
.snd-badgefilter{display:flex;gap:6px;flex-wrap:wrap}
.snd-bf{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;
 font:600 12px/1 Inter;color:var(--ink)}
.snd-bf:hover{background:var(--cream)}
.snd-bf.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.snd-legend b{color:var(--ink)}

.snd-list{overflow-y:auto;padding:8px;flex:1}
.snd-sec{margin-bottom:14px}
.snd-sechead{display:flex;align-items:baseline;gap:8px;margin:2px 4px 6px}
.snd-sechead h2{margin:0;font:600 16px/1.1 "Cormorant Garamond",Georgia,serif}
.snd-sechead .ct{font:700 10px/1 Inter;background:var(--cream);color:var(--accent);border-radius:999px;padding:3px 8px}

/* an asset = a row, NOT a link — selecting previews it in-panel */
.snd-item{width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;
 display:flex;flex-direction:column;gap:4px;cursor:grab;margin-bottom:6px;transition:border-color .12s,background .12s,opacity .12s}
.snd-item:hover{border-color:var(--accent);background:var(--paper)}
.snd-item:active{cursor:grabbing}
.snd-item.dragging{opacity:.5}
.snd-item.queued{opacity:.6}
.snd-item.on{border-color:var(--accent);background:var(--cream);box-shadow:inset 3px 0 0 var(--accent)}
.snd-item .st{display:flex;align-items:center;gap:8px}
.snd-add{flex:none;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:7px;background:#fff;
 cursor:pointer;font:700 14px/1 Inter;color:var(--accent)}
.snd-add:hover{background:var(--cream)}
.snd-add.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.snd-item .nm{font:600 13.5px/1.2 Inter;flex:1;min-width:0}
.snd-item .nt{font-size:11.5px;line-height:1.4;color:#5a544b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.snd-item .bdg,.snd-vhead .bdg{font:700 9px/1 Inter;border-radius:999px;padding:3px 8px;white-space:nowrap}
.bdg-brandsafe{background:#e3efe0;color:#2f6b34}
.bdg-cc{background:#eaf0f7;color:#33578a}
.bdg-listen{background:#fdf3dc;color:#8a6a1e}
.bdg-tiktok{background:#f1e8f3;color:#7a3a8a}
.snd-empty{color:var(--mut);font-size:12.5px;padding:8px 4px}

/* right preview panel */
.snd-view{border:1px solid var(--line);border-radius:12px;background:#fff;
 box-shadow:0 1px 3px rgba(0,0,0,.04);min-height:calc(100vh - 210px);display:flex;flex-direction:column;overflow:hidden}
.snd-ph{margin:auto;color:var(--mut);font-size:13px;padding:40px}
.snd-vhead{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.snd-vhead .top{display:flex;align-items:center;gap:10px}
.snd-vhead h2{margin:0;font:600 20px/1.15 "Cormorant Garamond",Georgia,serif;flex:1;min-width:0}
.snd-vhead .sec{font-size:11.5px;color:var(--mut)}
.snd-vhead .nt{font-size:12.5px;line-height:1.5;color:#5a544b;margin:2px 0 0}
.snd-urlrow{display:flex;gap:8px;align-items:center;margin-top:4px}
.snd-url{flex:1;min-width:0;font:500 11.5px/1.3 ui-monospace,Menlo,monospace;color:var(--mut);
 background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:7px 9px;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-copy{flex:none;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;
 font:600 11.5px/1 Inter;color:var(--ink);padding:8px 11px}
.snd-copy:hover{background:var(--cream)}
.snd-frame-wrap{flex:1;position:relative;background:var(--paper)}
.snd-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.snd-blockmsg{position:absolute;left:0;right:0;bottom:0;font-size:11.5px;color:var(--mut);
 background:rgba(251,249,245,.94);border-top:1px solid var(--line);padding:8px 12px;text-align:center}
</style>