`public/panels/ig-activity.html`

60 lines
<div id="ig-banner"></div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap">
    <div>
      <h2>IG Posts</h2>
      <div class="muted" style="font-size:12px;max-width:680px">
        Every post the DW Instagram fleet has published (from the live activity snapshot).
        Deleting routes through Norma's serialized, ban-safe real-Chrome flow —
        the Instagram Graph API cannot delete a post. <b>Remove from board</b> just
        hides it here; <b>Delete on Instagram</b> is the real, gated delete.
      </div>
    </div>
    <div class="row" style="gap:8px;align-items:center">
      <button class="btn ghost" id="ig-refresh" style="padding:6px 12px;font-size:12.5px">Refresh</button>
    </div>
  </div>
  <div class="row" style="gap:18px;align-items:center;flex-wrap:wrap;margin-top:12px">
    <div class="row" style="gap:8px;align-items:center">
      <span class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.06em">Sort</span>
      <select id="ig-sort" class="btn ghost" style="padding:6px 10px;font-size:12.5px">
        <option value="ts|desc">Newest</option>
        <option value="ts|asc">Oldest</option>
        <option value="handle|asc">Account A→Z</option>
        <option value="handle|desc">Account Z→A</option>
        <option value="product_title|asc">Product A→Z</option>
        <option value="product_title|desc">Product Z→A</option>
        <option value="kind|asc">Type A→Z</option>
      </select>
    </div>
    <div class="row" style="gap:8px;align-items:center">
      <span class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.06em">Account</span>
      <select id="ig-acct" class="btn ghost" style="padding:6px 10px;font-size:12.5px"><option value="">All</option></select>
    </div>
    <div class="row" style="gap:8px;align-items:center">
      <span class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.06em">Density</span>
      <input type="range" id="ig-density" min="2" max="7" step="1" style="accent-color:var(--gold,#c9a86a)">
    </div>
    <div class="muted" id="ig-meta" style="font-size:12px;margin-left:auto"></div>
  </div>
</div>

<div id="ig-grid" class="grid" style="grid-template-columns:repeat(var(--ig-cols,4),1fr);align-items:start">
  <div class="loading">Loading posts…</div>
</div>

<!-- delete confirm modal -->
<div id="ig-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;align-items:center;justify-content:center;padding:20px">
  <div class="card" style="max-width:440px;width:100%">
    <h2 id="ig-modal-title" style="margin-top:0">Delete this Instagram post?</h2>
    <div id="ig-modal-body" class="muted" style="font-size:13px;line-height:1.55"></div>
    <div id="ig-modal-status" style="font-size:12.5px;margin-top:10px"></div>
    <div class="row" style="gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap">
      <button class="btn ghost" id="ig-cancel" style="padding:7px 14px;font-size:12.5px">Cancel</button>
      <button class="btn" id="ig-remove" style="padding:7px 14px;font-size:12.5px">Remove from board</button>
      <button class="btn" id="ig-live" style="padding:7px 14px;font-size:12.5px;background:#b3261e;border-color:#b3261e;color:#fff">Delete on Instagram</button>
    </div>
  </div>
</div>