`public/panels/linkedin.html`

108 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>
    <button class="btn ghost" id="li-mode-feed-btn">📰 Network feed</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 id="li-mode-feed" hidden>
    <div class="card">
      <h2 style="margin:0 0 4px;">Amplify a post from your network</h2>
      <div class="muted" style="font-size:12.5px;margin-bottom:10px;">Saw a post worth resharing? Paste its LinkedIn URL — it renders as the <b>official LinkedIn embed</b> (video plays inline) with a one-click <b>Reshare from the DW Page</b> (gated) and, when the post is public, <b>Download to assets</b>. TOS-clean, no scraping.</div>
      <div class="row" style="gap:8px;align-items:flex-end;flex-wrap:wrap;">
        <div style="flex:1;min-width:240px;">
          <label for="li-cur-url">LinkedIn post URL</label>
          <input id="li-cur-url" type="text" placeholder="https://www.linkedin.com/posts/…-activity-7…  or  /feed/update/urn:li:activity:7…">
        </div>
        <div style="flex:1;min-width:180px;">
          <label for="li-cur-note">Your reshare note <span class="muted" style="font-weight:400;">(optional)</span></label>
          <input id="li-cur-note" type="text" placeholder="Why this matters for DW…">
        </div>
        <button class="btn gold" id="li-cur-add">+ Add to board</button>
      </div>
      <div id="li-cur-msg" class="muted" style="font-size:11.5px;margin-top:8px;"></div>
    </div>
    <div id="li-curated-cards"></div>

    <div class="card">
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
        <h2 style="margin:0;">Auto-harvest <span class="pill" style="background:#b8860b;color:#fff;font-size:9px;">EXPERIMENTAL</span></h2>
        <span class="pill" id="li-feed-count">0</span>
        <span style="flex:1;"></span>
        <label style="display:flex;align-items:center;gap:6px;font-size:11.5px;" class="muted"><input type="checkbox" id="li-feed-all"> show non-video too</label>
        <button class="btn ghost" id="li-feed-refresh" title="Runs the local openclaw harvester. Currently returns nothing against LinkedIn's anti-automation feed — see note.">↻ Refresh (experimental)</button>
      </div>
      <div style="border:1px solid #b8860b;background:rgba(184,134,11,.08);border-radius:8px;padding:10px 12px;margin:12px 0 0;font-size:12px;">
        <b>⚠ Not functional against LinkedIn's current feed.</b> LinkedIn has no feed API, so this harvests your own logged-in feed via openclaw real Chrome — but LinkedIn now serves automation-controlled Chrome a stripped feed with hashed class names, no post URNs in the DOM, and <code>blob:</code> video (nothing downloadable). Probed empirically 2026-08-12 (TK-10504): 0 posts. The scaffold is kept for a future approach. <b>Note:</b> the harvester only runs where openclaw lives (your Mac) — not on the live server. The <b>Download-to-assets</b> and <b>gated Reshare</b> actions below work whenever a card is present.
      </div>
      <div id="li-feed-status" class="muted" style="font-size:11.5px;margin-top:8px;"></div>
    </div>
    <div id="li-feed-cards"><div class="card muted">No feed harvested — this is an experimental scaffold (see note above).</div></div>
  </div><!-- /li-mode-feed -->
</div>