`public/panels/calendarhub.html`

26 lines
<!-- Calendar — one panel, two views. [ Timeline ] reuses the advanced calendars
     panel (activation/marketing/campaign layers, drag-to-reschedule). [ Plan ]
     reuses the simple calendar panel (curated moments + "Plan it" + campaign
     create/delete). calendarhub.js loads each real panel's html+js into its pane
     and calls that panel's own init() — no code duplicated; calendars.js /
     calendar.js stay authoritative. Both calendar BACKENDS stay mounted; only
     their nav entries are hidden (denylist in app.js). -->
<div class="calh">
  <div class="calh-tabbar">
    <button type="button" class="calh-tab active" data-tab="timeline">🗓️ Timeline</button>
    <button type="button" class="calh-tab" data-tab="plan">📝 Plan</button>
    <span class="calh-hint">Timeline = full activation + marketing calendar · Plan = curated moments + schedule a campaign</span>
  </div>
  <div class="calh-pane" data-pane="timeline"><div class="loading">Loading calendar…</div></div>
  <div class="calh-pane" data-pane="plan" hidden></div>
</div>

<style>
  .calh-tabbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .calh-tab{border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;
    font:600 13px/1 Inter;color:var(--ink);padding:9px 15px}
  .calh-tab:hover{background:var(--cream)}
  .calh-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .calh-hint{font-size:11.5px;color:var(--mut);margin-left:4px}
</style>