<div class="demo">
  <div class="phone-frame">
    <div class="inbox-screen">
      <div class="inbox-header">Inbox</div>
      <ul class="swipe-list" id="swipeList">
        <li class="swipe-item" data-id="1">
          <div class="swipe-actions">
            <button class="swipe-action archive" data-action="archive">Archive</button>
            <button class="swipe-action delete" data-action="delete">Delete</button>
          </div>
          <div class="swipe-content">
            <span class="swipe-avatar">MC</span>
            <div class="swipe-text">
              <span class="swipe-title">Mia Chen</span>
              <span class="swipe-preview">Approved the design changes for the...</span>
            </div>
          </div>
        </li>
        <li class="swipe-item" data-id="2">
          <div class="swipe-actions">
            <button class="swipe-action archive" data-action="archive">Archive</button>
            <button class="swipe-action delete" data-action="delete">Delete</button>
          </div>
          <div class="swipe-content">
            <span class="swipe-avatar">SO</span>
            <div class="swipe-text">
              <span class="swipe-title">Sam Okoye</span>
              <span class="swipe-preview">Can we move Thursday's sync to...</span>
            </div>
          </div>
        </li>
        <li class="swipe-item" data-id="3">
          <div class="swipe-actions">
            <button class="swipe-action archive" data-action="archive">Archive</button>
            <button class="swipe-action delete" data-action="delete">Delete</button>
          </div>
          <div class="swipe-content">
            <span class="swipe-avatar">JP</span>
            <div class="swipe-text">
              <span class="swipe-title">Jules Park</span>
              <span class="swipe-preview">Here's the updated budget spreadsheet...</span>
            </div>
          </div>
        </li>
      </ul>
      <p class="swipe-hint">Drag a row left to reveal actions. Drag with a mouse too — the interaction works with both touch and pointer input.</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; }
.demo { display: flex; }

.phone-frame { width: 300px; height: 480px; border-radius: 32px; border: 8px solid #0f172a; background: #0f172a; overflow: hidden; box-shadow: 0 30px 60px rgba(15,23,42,0.25); }
.inbox-screen { height: 100%; background: #fff; display: flex; flex-direction: column; }
.inbox-header { padding: 14px 16px; font-size: 14px; font-weight: 800; color: #111827; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }

.swipe-list { flex: 1; overflow-y: auto; list-style: none; }
.swipe-item { position: relative; overflow: hidden; border-bottom: 1px solid #f1f5f9; touch-action: pan-y; }

.swipe-actions { position: absolute; inset: 0; display: flex; justify-content: flex-end; }
.swipe-action { width: 76px; border: none; color: #fff; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.swipe-action.archive { background: #f59e0b; }
.swipe-action.delete { background: #ef4444; }

.swipe-content {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #fff;
  transform: translateX(0);
  transition: transform 0.2s ease;
  touch-action: pan-y;
}
.swipe-avatar { width: 34px; height: 34px; border-radius: 50%; background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.swipe-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swipe-title { font-size: 12.5px; font-weight: 700; color: #111827; }
.swipe-preview { font-size: 11.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.swipe-hint { padding: 10px 16px; font-size: 10.5px; color: #94a3b8; line-height: 1.5; flex-shrink: 0; }

.swipe-item.removing .swipe-content { transition: transform 0.22s ease, opacity 0.22s ease; opacity: 0; }
.swipe-item.removing { transition: max-height 0.22s ease 0.1s; max-height: 0 !important; }

const ACTIONS_WIDTH = 152; // must match the combined width of the two action buttons

document.querySelectorAll('.swipe-item').forEach((item) => {
  const content = item.querySelector('.swipe-content');
  const actions = item.querySelectorAll('.swipe-action');

  let startX = 0;
  let currentX = 0;
  let dragging = false;
  let isOpen = false;

  function setTranslate(x, animate) {
    content.style.transition = animate ? 'transform 0.2s ease' : 'none';
    content.style.transform = `translateX(${x}px)`;
  }

  content.addEventListener('pointerdown', (e) => {
    dragging = true;
    startX = e.clientX;
    currentX = isOpen ? -ACTIONS_WIDTH : 0;
    content.setPointerCapture(e.pointerId);
  });

  content.addEventListener('pointermove', (e) => {
    if (!dragging) return;
    const delta = e.clientX - startX;
    // Clamp so the row can never be dragged past fully-open (revealing more
    // than the actions' own width) or past fully-closed in the other
    // direction — the drag always stays within the valid [-ACTIONS_WIDTH, 0]
    // range no matter how far the pointer actually moves.
    const next = Math.min(0, Math.max(-ACTIONS_WIDTH, currentX + delta));
    setTranslate(next, false);
  });

  function endDrag(e) {
    if (!dragging) return;
    dragging = false;
    const delta = e.clientX - startX;
    const finalX = Math.min(0, Math.max(-ACTIONS_WIDTH, currentX + delta));

    // Snap open or closed based on how far past the halfway point the drag
    // ended — a genuine "flick" threshold, not requiring the user to drag
    // the entire width before anything happens.
    isOpen = finalX < -ACTIONS_WIDTH / 2;
    setTranslate(isOpen ? -ACTIONS_WIDTH : 0, true);
  }

  content.addEventListener('pointerup', endDrag);
  content.addEventListener('pointercancel', endDrag);

  // Tapping an already-open row's content (rather than dragging) closes it —
  // a natural way to dismiss revealed actions without needing to swipe back.
  content.addEventListener('click', () => {
    if (isOpen) {
      isOpen = false;
      setTranslate(0, true);
    }
  });

  actions.forEach((btn) => {
    btn.addEventListener('click', () => {
      const action = btn.dataset.action;
      if (action === 'delete') {
        // Removing an item animates its height to zero after its content
        // has already faded, rather than vanishing instantly — a smoother,
        // more intentional-feeling removal than an abrupt DOM removal.
        item.classList.add('removing');
        setTimeout(() => item.remove(), 350);
      } else {
        content.style.background = '#fffbeb';
        setTranslate(0, true);
        isOpen = false;
        setTimeout(() => { content.style.background = ''; }, 500);
      }
    });
  });
});