`public/panels/compose.html`

36 lines
<!-- Compose — one panel, two flows. [ Suggested ] reuses the engine panel (daily
     AI-suggested posts); [ Manual ] reuses the composer panel (build-a-post).
     compose.js loads each real panel's html+js into its pane and calls that
     panel's own init() — no code is duplicated; engine.js/composer.js stay
     authoritative. The engine + composer BACKENDS stay mounted; only their nav
     entries are hidden (denylist in app.js). -->
<div class="cmp2">
  <div class="cmp2-tabbar">
    <button type="button" class="cmp2-tab active" data-tab="suggested">✨ Suggested</button>
    <button type="button" class="cmp2-tab" data-tab="manual">✍️ Manual<span class="cmp2-badge" id="cmp2-badge" hidden></span></button>
    <span class="cmp2-hint">Suggested = today's AI picks to approve · Manual = build a post from scratch</span>
  </div>
  <div class="cmp2-pane" data-pane="suggested"><div class="loading">Loading suggestions…</div></div>
  <div class="cmp2-pane" data-pane="manual" hidden></div>
</div>

<style>
  .cmp2-tabbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .cmp2-tab{position:relative;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;
    font:600 13px/1 Inter;color:var(--ink);padding:9px 15px}
  .cmp2-tab:hover{background:var(--cream)}
  .cmp2-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .cmp2-badge{display:inline-block;margin-left:7px;background:var(--accent);color:#fff;border-radius:999px;
    font:700 10px/1 Inter;padding:2px 6px;min-width:14px;text-align:center;vertical-align:top}
  .cmp2-tab.active .cmp2-badge{background:#fff;color:var(--ink)}
  .cmp2-hint{font-size:11.5px;color:var(--mut);margin-left:4px}
  /* the sound-queue offer bar injected into the Manual pane */
  .cmp2-soundoffer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--cream);
    border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-bottom:9px;font-size:12.5px;color:var(--ink)}
  .cmp2-soundoffer .cmp2-addbtn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;
    cursor:pointer;font:600 11.5px/1 Inter;padding:7px 11px}
  .cmp2-soundoffer .cmp2-addbtn:hover{filter:brightness(1.05)}
  .cmp2-soundoffer .cmp2-dismiss{margin-left:auto;border:0;background:transparent;color:var(--mut);cursor:pointer;font:700 15px/1 Inter}
  .cmp2-soundoffer .cmp2-dismiss:hover{color:var(--accent)}
</style>