`public/panels/linkedin.html`

72 lines
<div id="li-root" style="max-width:880px;">
  <div class="muted-banner" id="li-banner">Loading…</div>

  <div class="row" id="li-modebar" style="gap:8px;margin-bottom:14px;">
    <button class="btn gold" id="li-mode-compose-btn">✍️ Compose a post</button>
    <button class="btn ghost" id="li-mode-follow-btn">👥 Follow list</button>
  </div>

  <div id="li-mode-compose">
  <div class="card">
    <h2>Compose a LinkedIn post</h2>
    <div class="muted" style="font-size:12.5px;margin-bottom:12px;">Draft with DW B2B best-practices baked in, then <b>Copy</b> + <b>Open LinkedIn</b> to post manually (compliant today). Live one-click posting via the official API is Phase 2 (gated).</div>

    <div class="row" style="align-items:flex-end;margin-bottom:10px;">
      <div style="flex:1;min-width:200px;">
        <label for="li-tpl">Start from a template</label>
        <select id="li-tpl"><option value="">— blank —</option></select>
      </div>
    </div>

    <label for="li-text">Post text</label>
    <textarea id="li-text" rows="9" placeholder="Hook in the first 2 lines — the feed truncates ~140 chars before “see more”. One idea per post."></textarea>
    <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-top:4px;">
      <span class="muted" id="li-hook">First line is your hook.</span>
      <span id="li-count" class="muted">0 chars</span>
    </div>

    <label for="li-tags" style="margin-top:10px;">Hashtags <span class="muted" style="font-weight:400;">(3–5; posted in the first comment, not the body)</span></label>
    <input id="li-tags" type="text" placeholder="#interiordesign #wallcoverings #trade">

    <div class="row" style="margin-top:14px;align-items:center;">
      <button class="btn gold" id="li-save">Save draft</button>
      <button class="btn ghost" id="li-copy">Copy text</button>
      <button class="btn ghost" id="li-copytags">Copy hashtags</button>
      <button class="btn" id="li-open">Open LinkedIn to post ↗</button>
      <button class="btn gated" id="li-publish">🚀 Publish via API…</button>
      <span class="muted" id="li-msg"></span>
    </div>
  </div>

  <div class="card">
    <h2>Saved drafts <span id="li-dcount" class="pill">0</span></h2>
    <div id="li-drafts" class="muted">No drafts yet.</div>
  </div>
  </div><!-- /li-mode-compose -->

  <div id="li-mode-follow" hidden>
    <div class="card">
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
        <h2 style="margin:0;">Follow list</h2>
        <span class="pill" id="li-fl-progress">0 / 0 followed</span>
        <span style="flex:1;"></span>
        <button class="btn ghost" id="li-fl-reset" style="font-size:11px;padding:5px 9px;">Reset checks</button>
      </div>
      <div class="muted" id="li-fl-guidance" style="font-size:12.5px;margin:10px 0 0;"></div>
      <div class="progress-track" style="height:6px;border-radius:4px;background:var(--line,#e6e6e6);margin-top:12px;overflow:hidden;">
        <div id="li-fl-bar" style="height:100%;width:0;background:var(--gold,#0a66c2);transition:width .2s;"></div>
      </div>
      <input id="li-fl-search" type="text" placeholder="Filter by name…" style="margin-top:12px;width:100%;">
    </div>

    <div class="card">
      <h2 style="font-size:14px;">Saved searches</h2>
      <div class="muted" style="font-size:12px;margin-bottom:8px;">Open a live LinkedIn people-search, then Follow from each profile.</div>
      <div id="li-fl-searches"></div>
    </div>

    <div id="li-fl-sections"></div>
    <p class="muted" id="li-fl-updated" style="font-size:11px;text-align:center;margin:18px 0;"></p>
  </div><!-- /li-mode-follow -->
</div>