fiddle/public/js/browse.js

import { listFiddles, listTags } from './api.js';

const $ = (sel) => document.querySelector(sel);
let debounceTimer = null;
let currentPage = 1;
let activeTag = '';

const JS_TYPE_LABELS = {
  javascript: 'JS',
  typescript: 'TS',
  react: 'React',
  'react-ts': 'React+TS',
  vue: 'Vue',
  svelte: 'Svelte',
};

function relativeTime(dateStr) {
  const now = Date.now();
  const then = new Date(dateStr + 'Z').getTime();
  const diff = Math.floor((now - then) / 1000);
  if (diff < 60) return 'just now';
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
  if (diff < 2592000) return `${Math.floor(diff / 86400)}d ago`;
  return new Date(dateStr).toLocaleDateString();
}

function renderCards(fiddles) {
  const grid = $('#fiddle-grid');
  if (!fiddles.length) {
    grid.innerHTML = '<div class="empty-state">No fiddles found. <a href="/new" style="color: var(--accent)">Create one!</a></div>';
    return;
  }
  grid.innerHTML = fiddles.map(f => {
    const preview = f.js_preview || f.html_preview || '';
    const badge = JS_TYPE_LABELS[f.js_type] || 'JS';
    const tags = (f.tags || []).map(t => `<span class="card-tag">${esc(t.name)}</span>`).join('');
    return `
      <a href="/f/${f.id}" class="fiddle-card">
        <div class="card-title">${esc(f.title)}</div>
        <div class="card-meta">
          <span class="card-badge">${badge}</span>
          <span>${relativeTime(f.updated_at)}</span>
        </div>
        ${preview ? `<div class="card-preview">${esc(preview)}</div>` : ''}
        ${tags ? `<div class="card-tags">${tags}</div>` : ''}
      </a>
    `;
  }).join('');
}

function renderPagination(total, page, limit) {
  const pages = Math.ceil(total / limit);
  if (pages <= 1) { $('#pagination').innerHTML = ''; return; }
  let html = '';
  if (page > 1) html += `<button class="page-btn" data-page="${page - 1}">&laquo; Prev</button>`;
  for (let i = 1; i <= pages; i++) {
    if (pages > 7 && i > 2 && i < pages - 1 && Math.abs(i - page) > 1) {
      if (i === 3 || i === pages - 2) html += '<span style="color:var(--text-dim)">...</span>';
      continue;
    }
    html += `<button class="page-btn${i === page ? ' active' : ''}" data-page="${i}">${i}</button>`;
  }
  if (page < pages) html += `<button class="page-btn" data-page="${page + 1}">Next &raquo;</button>`;
  const el = $('#pagination');
  el.innerHTML = html;
  el.querySelectorAll('.page-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      currentPage = parseInt(btn.dataset.page, 10);
      fetchAndRender();
    });
  });
}

async function renderTagsBar() {
  try {
    const { tags } = await listTags();
    const bar = $('#tags-bar');
    bar.innerHTML = tags.map(t =>
      `<span class="tag-filter${activeTag === t.name ? ' active' : ''}" data-tag="${esc(t.name)}">${esc(t.name)} (${t.count})</span>`
    ).join('');
    bar.querySelectorAll('.tag-filter').forEach(el => {
      el.addEventListener('click', () => {
        activeTag = activeTag === el.dataset.tag ? '' : el.dataset.tag;
        currentPage = 1;
        fetchAndRender();
        renderTagsBar();
      });
    });
  } catch (_) { /* ignore */ }
}

async function fetchAndRender() {
  const q = $('#search-input').value.trim();
  const js_type = $('#filter-framework').value;
  const sort = $('#filter-sort').value;
  try {
    const { fiddles, total, page, limit } = await listFiddles({ q, js_type, tag: activeTag, page: currentPage, sort });
    renderCards(fiddles);
    renderPagination(total, page, limit);
  } catch (e) {
    $('#fiddle-grid').innerHTML = `<div class="empty-state">Error loading fiddles: ${esc(e.message)}</div>`;
  }
}

function esc(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

// Event listeners
$('#search-input').addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    currentPage = 1;
    fetchAndRender();
  }, 300);
});

$('#filter-framework').addEventListener('change', () => {
  currentPage = 1;
  fetchAndRender();
});

$('#filter-sort').addEventListener('change', () => {
  currentPage = 1;
  fetchAndRender();
});

// Init
renderTagsBar();
fetchAndRender();