`public/panels/follow-counts.html`

39 lines
<div id="fc-banner"></div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2>Followers / Following</h2>
      <div class="muted" style="font-size:12px;max-width:640px">
        Live <b>followers_count</b> + <b>follows_count</b> for each DW Instagram account, pulled
        via the official Instagram Graph API (counts only — the Graph API does not return
        follower/following username lists). A daily snapshot is persisted so growth-over-time
        charts. Routed through Norma's instagram-agent (<span class="muted">:9810</span>) — no scraping.
      </div>
    </div>
    <div class="row" style="gap:8px;align-items:center">
      <button class="btn ghost" id="fc-refresh" style="padding:6px 12px;font-size:12.5px">Refresh</button>
      <button class="btn gold" id="fc-snapshot" style="padding:6px 12px;font-size:12.5px" title="Capture today's counts now">Capture snapshot</button>
    </div>
  </div>
</div>

<div id="fc-cards" class="grid" style="grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:start">
  <div class="loading">Loading accounts…</div>
</div>

<div class="card" id="fc-chart-card" style="display:none">
  <div class="row" style="justify-content:space-between;align-items:baseline">
    <div>
      <h2 id="fc-chart-title">Growth over time</h2>
      <div class="muted" id="fc-chart-sub" style="font-size:12px">One point per day</div>
    </div>
    <div class="row" style="gap:6px">
      <button class="btn ghost fc-metric" data-metric="followers" style="padding:5px 11px;font-size:12px">Followers</button>
      <button class="btn ghost fc-metric" data-metric="following" style="padding:5px 11px;font-size:12px">Following</button>
    </div>
  </div>
  <div id="fc-chart" style="margin-top:14px"></div>
  <div class="muted" id="fc-chart-foot" style="font-size:11px;margin-top:8px"></div>
</div>