Share-URL State Sync — Filters Encoded into a Copyable, Reproducible Link

<div class="demo">
  <div class="filter-bar">
    <div class="filter-group">
      <label for="statusFilter">Status</label>
      <select id="statusFilter">
        <option value="">All</option>
        <option value="open">Open</option>
        <option value="closed">Closed</option>
        <option value="archived">Archived</option>
      </select>
    </div>
    <div class="filter-group">
      <label for="sortFilter">Sort</label>
      <select id="sortFilter">
        <option value="newest">Newest first</option>
        <option value="oldest">Oldest first</option>
        <option value="priority">Priority</option>
      </select>
    </div>
    <div class="filter-group grow">
      <label for="searchFilter">Search</label>
      <input type="text" id="searchFilter" placeholder="Search tickets…" />
    </div>
  </div>

  <button class="copy-link-btn" id="copyLinkBtn">
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
    Copy link to this view
  </button>

  <div class="url-preview">
    <span class="url-preview-label">Current URL</span>
    <code id="urlPreview">/tickets</code>
  </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 { width: 460px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group.grow { flex: 1; min-width: 140px; }
.filter-group label { font-size: 10.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.3px; }
.filter-group select, .filter-group input { padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: 12.5px; font-family: inherit; }
.filter-group select:focus-visible, .filter-group input:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

.copy-link-btn { align-self: flex-start; display: flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #334155; cursor: pointer; font-family: inherit; }
.copy-link-btn:hover { border-color: #6366f1; color: #4338ca; }
.copy-link-btn.copied { background: #ecfdf5; border-color: #10b981; color: #047857; }

.url-preview { background: #0f172a; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.url-preview-label { font-size: 9.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.url-preview code { font-size: 11.5px; color: #a5f3fc; font-family: 'SFMono-Regular', Consolas, monospace; word-break: break-all; }

const statusFilter = document.getElementById('statusFilter');
const sortFilter = document.getElementById('sortFilter');
const searchFilter = document.getElementById('searchFilter');
const urlPreview = document.getElementById('urlPreview');
const copyLinkBtn = document.getElementById('copyLinkBtn');

// A single explicit mapping between filter state and query parameter names —
// every filter control reads and writes through this same map, so the URL
// and the UI can never drift out of sync with each other or with themselves.
const FIELDS = [
  { el: statusFilter, param: 'status', defaultValue: '' },
  { el: sortFilter, param: 'sort', defaultValue: 'newest' },
  { el: searchFilter, param: 'q', defaultValue: '' },
];

function buildUrlFromState() {
  const params = new URLSearchParams();
  FIELDS.forEach(({ el, param, defaultValue }) => {
    // Only include a parameter in the URL when it differs from its default —
    // this keeps the shareable link short and readable rather than always
    // encoding every filter's value even when nothing meaningful was changed.
    if (el.value && el.value !== defaultValue) {
      params.set(param, el.value);
    }
  });
  const query = params.toString();
  return '/tickets' + (query ? '?' + query : '');
}

function updateUrlPreview() {
  const url = buildUrlFromState();
  urlPreview.textContent = url;
  // In a real single-page app this is where history.replaceState (or
  // pushState for a discrete navigation) would sync the browser's actual
  // address bar — kept as a plain preview here since this snippet runs
  // inside a sandboxed iframe where rewriting the real URL isn't meaningful.
}

function applyStateFromUrl(search) {
  const params = new URLSearchParams(search);
  FIELDS.forEach(({ el, param, defaultValue }) => {
    el.value = params.has(param) ? params.get(param) : defaultValue;
  });
  updateUrlPreview();
}

FIELDS.forEach(({ el }) => {
  el.addEventListener('input', updateUrlPreview);
  el.addEventListener('change', updateUrlPreview);
});

copyLinkBtn.addEventListener('click', async () => {
  const fullUrl = window.location.origin + buildUrlFromState();
  try {
    await navigator.clipboard.writeText(fullUrl);
  } catch (err) {
    /* clipboard API unavailable in this context — the URL is still visible
       in the preview box below for manual copying */
  }
  const original = copyLinkBtn.innerHTML;
  copyLinkBtn.classList.add('copied');
  copyLinkBtn.textContent = 'Link copied!';
  setTimeout(() => {
    copyLinkBtn.classList.remove('copied');
    copyLinkBtn.innerHTML = original;
  }, 1600);
});

// On load, restore state from whatever query string is already present —
// this is what makes a previously copied/shared link actually reproduce the
// exact same filtered view when someone else opens it.
applyStateFromUrl(window.location.search);