my-airdrop 1.2.2 → 1.3.0

package/README.md

@@ -49,8 +49,9 @@ Opens a beautiful web interface anyone can access by scanning a QR code. Upload
 - **Folder download** — zip and download entire folders in one tap
 - **Multi-select** — select multiple files and download as a single zip
 - **QR code** — instantly connect any device with a camera
-- **Public tunnel** — share outside your local network via a public URL
+- **Public tunnel** — share outside your local network via a public URL, works on any network including WiFi
 - **Mobile-optimized** — large touch targets, responsive layout, dark UI
+- **Clipboard sync** — share text snippets, URLs, or code between devices in real time
 - **Safety limits** — warns on large directories, hard stops at 5000 files / 5 GB
 
 ## Usage
@@ -77,6 +78,14 @@ npx my-airdrop --port 8080
 npx my-airdrop --no-upload
 ```
 
+## Clipboard sync
+
+Tap **⎘ Clip** on any device to open the clipboard panel. Type or paste text and hit Send — it instantly appears on all connected devices.
+
+- Works both ways: PC → phone and phone → PC
+- Real-time sync via SSE (no refresh needed)
+- Last 10 clips kept in memory (cleared on server restart)
+
 ## Public mode
 
 With `--public`, a Cloudflare Quick Tunnel is created so anyone on the internet can access your files:
@@ -87,6 +96,10 @@ Public   https://random-words.trycloudflare.com
 
 Share the URL with whoever you want to give access. No password required — just open and go.
 
+- Powered by [Cloudflare Quick Tunnels](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/)
+- Works on any network including WiFi (uses TCP 443, not blocked by routers)
+- Auto-reconnects if the tunnel drops
+
 ## Install globally
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-airdrop",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Share files over local network — like AirDrop but from your terminal",
   "keywords": [
     "file-sharing",

package/src/server.js

@@ -68,6 +68,18 @@ function createServer(root, opts = {}) {
   const { allowUpload = true, maxUploadMB = 500 } = opts;
   const events = new EventEmitter();
 
+  // ── Clipboard state ──────────────────────────────────
+  const clips = [];
+  const sseClients = new Set();
+  const MAX_CLIPS = 10;
+
+  function broadcastClip(clip) {
+    const msg = `data: ${JSON.stringify(clip)}\n\n`;
+    for (const client of sseClients) {
+      try { client.write(msg); } catch { sseClients.delete(client); }
+    }
+  }
+
   const server = http.createServer((req, res) => {
     const url  = req.url || '/';
     const route = url.split('?')[0];
@@ -157,6 +169,46 @@ function createServer(root, opts = {}) {
         return;
       }
 
+      // ── Clipboard SSE stream ─────────────────────────
+      if (route === '/api/clip-stream') {
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          'Connection': 'keep-alive',
+          'X-Accel-Buffering': 'no',
+        });
+        res.write(': connected\n\n');
+        sseClients.add(res);
+        const hb = setInterval(() => {
+          try { res.write(': ping\n\n'); } catch { clearInterval(hb); sseClients.delete(res); }
+        }, 25000);
+        req.on('close', () => { clearInterval(hb); sseClients.delete(res); });
+        return;
+      }
+
+      // ── Get clips ────────────────────────────────────
+      if (route === '/api/clips') {
+        return json(res, 200, { clips });
+      }
+
+      // ── Post clip ────────────────────────────────────
+      if (route === '/api/clip' && req.method === 'POST') {
+        let raw = '';
+        req.on('data', c => { raw += c; if (raw.length > 52000) req.destroy(); });
+        req.on('end', () => {
+          try {
+            const { text } = JSON.parse(raw);
+            if (!text || typeof text !== 'string' || !text.trim()) return json(res, 400, { error: 'no text' });
+            const clip = { id: Date.now(), text: text.slice(0, 50000), time: new Date().toISOString() };
+            clips.unshift(clip);
+            if (clips.length > MAX_CLIPS) clips.pop();
+            broadcastClip(clip);
+            return json(res, 200, { ok: true });
+          } catch { json(res, 400, { error: 'bad request' }); }
+        });
+        return;
+      }
+
       // ── Upload ───────────────────────────────────────
       if (route === '/api/ul' && req.method === 'POST') {
         if (!allowUpload) return json(res, 403, { error: 'upload disabled' });

package/src/ui.html

@@ -179,6 +179,53 @@ body{
   .file-row{min-height:52px}
   .file-name{font-size:15px}
 }
+
+/* ── Clip panel ── */
+#clipPanel{
+  position:fixed;bottom:18px;right:18px;
+  width:320px;max-width:calc(100vw - 24px);
+  max-height:70vh;
+  background:var(--surface);border:1px solid var(--border);
+  border-radius:10px;z-index:200;
+  box-shadow:0 8px 32px rgba(0,0,0,.6);
+  display:flex;flex-direction:column;
+}
+#clipPanel.hidden{display:none}
+.clip-head{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:12px 14px 0;
+  font-size:11px;font-weight:700;color:var(--muted);
+  text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;
+}
+.clip-close{
+  background:none;border:none;color:var(--muted);
+  cursor:pointer;font-size:16px;padding:0;line-height:1;
+}
+.clip-close:hover{color:var(--text)}
+.clip-compose{padding:10px 14px;flex-shrink:0}
+#clipInput{
+  width:100%;background:var(--surface2);
+  border:1px solid var(--border);border-radius:6px;
+  color:var(--text);font-size:13px;padding:8px 10px;
+  resize:none;height:72px;font-family:inherit;display:block;
+}
+#clipInput:focus{outline:none;border-color:var(--accent)}
+.clip-send-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
+.clip-hint{font-size:11px;color:var(--muted)}
+.clip-list{flex:1;overflow-y:auto;padding:0 14px 12px;-webkit-overflow-scrolling:touch}
+.clip-item{
+  display:flex;align-items:flex-start;gap:8px;
+  padding:8px 0;border-top:1px solid var(--border);
+}
+.clip-body{flex:1;min-width:0}
+.clip-text{
+  font-size:13px;color:var(--text);
+  word-break:break-all;white-space:pre-wrap;
+  display:-webkit-box;-webkit-line-clamp:3;
+  -webkit-box-orient:vertical;overflow:hidden;
+}
+.clip-time{font-size:11px;color:var(--muted);margin-top:3px}
+.clip-empty{font-size:13px;color:var(--muted);text-align:center;padding:20px 0}
 </style>
 </head>
 <body>
@@ -196,6 +243,7 @@ body{
   <button class="btn" id="selAllBtn">Select All</button>
   <button class="btn accent" id="dlSelBtn" disabled>↓ <span id="selLabel">Download</span></button>
   <button class="btn no-mobile" id="zipBtn">⊡ Zip Folder</button>
+  <button class="btn" id="clipBtn">⎘ Clip</button>
 </div>
 
 <div id="scroll"><div id="fileList"></div></div>
@@ -218,6 +266,24 @@ body{
   <div class="drop-label">Drop to upload</div>
 </div>
 
+<!-- Clip panel -->
+<div id="clipPanel" class="hidden">
+  <div class="clip-head">
+    Clipboard
+    <button class="clip-close" id="clipClose">✕</button>
+  </div>
+  <div class="clip-compose">
+    <textarea id="clipInput" placeholder="Paste or type text to share…"></textarea>
+    <div class="clip-send-row">
+      <span class="clip-hint">⌘↵ to send</span>
+      <button class="btn accent" id="clipSendBtn">Send</button>
+    </div>
+  </div>
+  <div class="clip-list" id="clipList">
+    <div class="clip-empty">No clips yet</div>
+  </div>
+</div>
+
 <!-- Toasts -->
 <div id="toasts"></div>
 
@@ -506,8 +572,118 @@ function fmtSize(b) {
   return (b / 1073741824).toFixed(1) + ' GB';
 }
 
+// ── Clipboard ─────────────────────────────────────────
+
+function setupClip() {
+  const panel = document.getElementById('clipPanel');
+
+  document.getElementById('clipBtn').addEventListener('click', () => {
+    const opening = panel.classList.contains('hidden');
+    panel.classList.toggle('hidden');
+    if (opening) {
+      loadClips();
+      document.getElementById('clipInput').focus();
+    }
+  });
+
+  document.getElementById('clipClose').addEventListener('click', () => {
+    panel.classList.add('hidden');
+  });
+
+  document.getElementById('clipSendBtn').addEventListener('click', sendClip);
+
+  document.getElementById('clipInput').addEventListener('keydown', e => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); sendClip(); }
+  });
+
+  connectClipSSE();
+}
+
+function connectClipSSE() {
+  const es = new EventSource('/api/clip-stream');
+  es.onmessage = e => {
+    try {
+      const clip = JSON.parse(e.data);
+      if (!document.querySelector(`.clip-item[data-id="${clip.id}"]`)) {
+        addClipToList(clip, true);
+        if (document.getElementById('clipPanel').classList.contains('hidden')) {
+          toast('New clip received', '');
+        }
+      }
+    } catch {}
+  };
+  es.onerror = () => { es.close(); setTimeout(connectClipSSE, 3000); };
+}
+
+async function loadClips() {
+  try {
+    const { clips } = await (await fetch('/api/clips')).json();
+    const list = document.getElementById('clipList');
+    list.innerHTML = clips.length ? '' : '<div class="clip-empty">No clips yet</div>';
+    clips.forEach(c => addClipToList(c, false));
+  } catch {}
+}
+
+function addClipToList(clip, prepend) {
+  const list = document.getElementById('clipList');
+  const empty = list.querySelector('.clip-empty');
+  if (empty) empty.remove();
+
+  const div = document.createElement('div');
+  div.className = 'clip-item';
+  div.dataset.id = clip.id;
+  const time = new Date(clip.time).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', hour12: false });
+  div.innerHTML = `
+    <div class="clip-body">
+      <div class="clip-text">${esc(clip.text)}</div>
+      <div class="clip-time">${time}</div>
+    </div>
+    <button class="icon-btn" title="Copy">⎘</button>`;
+  div.querySelector('.icon-btn').addEventListener('click', () => copyText(clip.text));
+
+  if (prepend) list.prepend(div); else list.appendChild(div);
+  while (list.querySelectorAll('.clip-item').length > 10) list.removeChild(list.lastElementChild);
+}
+
+function copyText(text) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text).then(() => toast('Copied', 'ok')).catch(() => fallbackCopy(text));
+  } else {
+    fallbackCopy(text);
+  }
+}
+
+function fallbackCopy(text) {
+  const ta = Object.assign(document.createElement('textarea'), {
+    value: text, style: 'position:fixed;opacity:0',
+  });
+  document.body.appendChild(ta);
+  ta.focus(); ta.select();
+  try { document.execCommand('copy'); toast('Copied', 'ok'); } catch { toast('Copy failed', 'err'); }
+  ta.remove();
+}
+
+async function sendClip() {
+  const input = document.getElementById('clipInput');
+  const text = input.value.trim();
+  if (!text) return;
+  const btn = document.getElementById('clipSendBtn');
+  btn.disabled = true;
+  try {
+    const r = await fetch('/api/clip', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text }),
+    });
+    if (!r.ok) throw new Error();
+    input.value = '';
+  } catch { toast('Failed to send', 'err'); }
+  finally { btn.disabled = false; }
+}
+
 // ── Init ─────────────────────────────────────────────
 setupUpload();
+setupClip();
 go('/');
 </script>
 </body>