Clipboard History Stack Widget — Multi-Item Copy History with Pinning

<div class="demo">
  <div class="clip-widget">
    <div class="clip-input-row">
      <input type="text" id="clipInput" placeholder="Type or paste something, then press Enter" />
      <button id="clipAddBtn" title="Add to history">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
      </button>
    </div>

    <div class="clip-list" id="clipList">
      <p class="clip-empty" id="clipEmpty">Nothing saved yet — copied items will stack up here</p>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }

.clip-widget { width: 360px; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.clip-input-row { display: flex; gap: 8px; }
.clip-input-row input { flex: 1; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: 13px; font-family: inherit; }
.clip-input-row input:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.clip-input-row button { background: #4f46e5; color: #fff; border: none; width: 38px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.clip-input-row button:hover { background: #4338ca; }

.clip-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.clip-empty { font-size: 12px; color: #94a3b8; text-align: center; padding: 20px 8px; }

.clip-item { display: flex; align-items: center; gap: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.clip-item:hover { background: #eef2ff; border-color: #c7d2fe; }
.clip-item.pinned { border-color: #fbbf24; background: #fffbeb; }
.clip-item-text { flex: 1; font-size: 12.5px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.clip-item-actions button { background: none; border: none; padding: 4px; cursor: pointer; color: #94a3b8; border-radius: 6px; display: flex; }
.clip-item-actions button:hover { background: #e2e8f0; color: #475569; }
.clip-item-actions .pin-btn.active { color: #d97706; }

.clip-copied-flash { animation: flash 0.5s ease; }
@keyframes flash { 0% { background: #d1fae5; } 100% { background: #f8fafc; } }

const input = document.getElementById('clipInput');
const addBtn = document.getElementById('clipAddBtn');
const list = document.getElementById('clipList');
const emptyMsg = document.getElementById('clipEmpty');

const MAX_ITEMS = 8;
let history = []; // { text, pinned }

function render() {
  list.querySelectorAll('.clip-item').forEach((el) => el.remove());
  emptyMsg.style.display = history.length === 0 ? 'block' : 'none';

  // Pinned items stay at top, otherwise most-recent-first order is preserved as-is
  const ordered = [...history].sort((a, b) => (b.pinned === a.pinned ? 0 : b.pinned ? 1 : -1));

  ordered.forEach((entry) => {
    const item = document.createElement('div');
    item.className = 'clip-item' + (entry.pinned ? ' pinned' : '');

    const text = document.createElement('span');
    text.className = 'clip-item-text';
    text.textContent = entry.text;

    const actions = document.createElement('div');
    actions.className = 'clip-item-actions';

    const pinBtn = document.createElement('button');
    pinBtn.className = 'pin-btn' + (entry.pinned ? ' active' : '');
    pinBtn.title = entry.pinned ? 'Unpin' : 'Pin to top';
    pinBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 9 9l-7 1 5 5-1 7 6-4 6 4-1-7 5-5-7-1-3-7Z"/></svg>';
    pinBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      entry.pinned = !entry.pinned;
      render();
    });

    const delBtn = document.createElement('button');
    delBtn.title = 'Remove';
    delBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>';
    delBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      history = history.filter((h) => h !== entry);
      render();
    });

    actions.append(pinBtn, delBtn);
    item.append(text, actions);

    item.addEventListener('click', async () => {
      try {
        await navigator.clipboard.writeText(entry.text);
      } catch (err) {
        // Clipboard API unavailable (e.g. insecure context) — fail silently, UI still flashes
      }
      item.classList.remove('clip-copied-flash');
      void item.offsetWidth;
      item.classList.add('clip-copied-flash');
    });

    list.appendChild(item);
  });
}

function addEntry(text) {
  const trimmed = text.trim();
  if (!trimmed) return;
  // De-duplicate: move an existing matching entry to the front instead of adding a copy
  history = history.filter((h) => h.text !== trimmed);
  history.unshift({ text: trimmed, pinned: false });
  if (history.length > MAX_ITEMS) {
    // Never evict pinned items when trimming to the max size
    const pinnedTail = history.slice(MAX_ITEMS).filter((h) => h.pinned);
    history = history.slice(0, MAX_ITEMS).concat(pinnedTail);
  }
  render();
}

input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    addEntry(input.value);
    input.value = '';
  }
});
addBtn.addEventListener('click', () => {
  addEntry(input.value);
  input.value = '';
  input.focus();
});

input.addEventListener('paste', (e) => {
  const pasted = (e.clipboardData || window.clipboardData).getData('text');
  if (pasted && input.value === '') {
    setTimeout(() => { addEntry(pasted); input.value = ''; }, 0);
  }
});

render();