`public/panels/channels.html`

70 lines
<div class="muted-banner" id="ch-banner">Loading channel status…</div>

<div class="card">
  <h2>① Activate channels</h2>
  <div class="muted" style="margin-bottom:8px">Paste each app's keys below — they're written to the server <code>.env</code> and <b>never shown back</b>. Then add the redirect URI in that app's portal and click <b>Connect</b> to authorize in your browser.</div>
  <div id="ch-hosthint"></div>
  <div id="ch-setup" class="grid" style="grid-template-columns:repeat(auto-fill,minmax(360px,1fr))">
    <div class="muted">Loading setup…</div>
  </div>
</div>

<div class="card">
  <h2>② Composer</h2>
  <div class="row">
    <div style="flex:1;min-width:280px">
      <label>Caption</label>
      <textarea id="ch-caption" rows="4" placeholder="Write the post… (use the Copy panel for AI captions)"></textarea>
      <label style="margin-top:10px">Image / video URL (required for IG · TikTok)</label>
      <input type="text" id="ch-media" placeholder="https://… (use the Layouts or Assets panel)">
      <label style="margin-top:10px">Post to</label>
      <div class="row" id="ch-targets"></div>

      <!-- Page picker: appears when Facebook/Instagram is selected. Choose WHICH
           of your FB Pages (and their linked IG accounts) the post goes to. -->
      <div id="ch-pages-wrap" style="margin-top:12px;display:none">
        <label><span id="ch-pages-label">Pages</span> <span class="muted" id="ch-pages-count" style="font-weight:400"></span></label>
        <div class="row" style="gap:6px;margin:4px 0;align-items:center">
          <input type="text" id="ch-pages-search" placeholder="filter pages…" style="flex:1;min-width:150px">
          <button class="btn ghost xs" id="ch-pages-all" type="button">All</button>
          <button class="btn ghost xs" id="ch-pages-none" type="button">None</button>
          <button class="btn ghost xs" id="ch-pages-ig" type="button" title="select only Pages with a linked Instagram">📸 IG-linked</button>
          <button class="btn ghost xs" id="ch-pages-refresh" type="button" title="re-fetch your Pages from Meta">↻</button>
        </div>
        <div id="ch-pages" style="max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px">
          <div class="muted">Loading pages…</div>
        </div>
        <div class="muted" id="ch-pages-note" style="font-size:11px;margin-top:4px"></div>
      </div>

      <div class="row" style="margin-top:14px;align-items:center">
        <button class="btn gold" id="ch-stage">Stage post</button>
        <button class="btn gated" id="ch-publish">🚀 Publish live…</button>
        <span class="muted" id="ch-msg"></span>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:center">
    <h2 style="margin:0">Outbox</h2>
    <select id="ch-outbox-sort" style="width:auto;font-size:12px">
      <option value="newest">Newest</option>
      <option value="oldest">Oldest</option>
      <option value="channel">Channel</option>
    </select>
  </div>
  <div id="ch-outbox" class="muted" style="margin-top:8px">No posts yet.</div>
</div>

<style>
  .setup-card .copyrow{display:flex;gap:6px;align-items:center;margin:3px 0}
  .setup-card .copyrow code{flex:1;background:#f3efe7;border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:11px;overflow:auto;white-space:nowrap}
  .setup-card .btn.xs{padding:4px 9px;font-size:11px}
  .setup-card .fld{margin-top:8px}
  .setup-card .fld label{display:flex;gap:6px;align-items:center}
  .setup-card .saved-pill{background:#e3efe0;color:#3a6b3a;font-size:9.5px;padding:1px 7px}
  .ch-sublabel{font-size:11.5px;font-weight:700;color:var(--mut);margin:11px 0 3px;text-transform:uppercase;letter-spacing:.4px}
</style>