Revamp

README.md

@@ -18,6 +18,20 @@ Sign in with Hugging Face to create polls, share `https://huggingface.co/spaces/
 
 **HuggingPolls is an independent community project. It is not affiliated with, endorsed by, or sponsored by Hugging Face.**
 
+## Appearance and drafts
+
+The app follows your system's light or dark appearance by default and updates when the system appearance changes. Use **Theme** at the bottom of any page to choose **System**, **Light**, or **Dark**. Your choice is remembered in this browser and applied before the page appears.
+
+Poll drafts save automatically in the current tab while you type, including when you navigate away, reload, or return from sign-in. Use **Clear draft** to start over. Drafts are cleared after a poll is created and are not sent to the server until you submit. The form shows the question length and available option count, checks for blank or duplicate answers, and supports up to 12 options.
+
+## Browse polls and voting deadlines
+
+Open **See polls** to browse without signing in. Search questions, descriptions, or creators; filter open or closed polls; and sort by newest, most votes, or ending soon. Results appear in pages of 12 polls.
+
+New polls are listed by default and expire after **7 days**. Choose **1 hour, 1 day, 3 days, 7 days, or 30 days** when creating a poll. Deadlines start at creation and are enforced by the server on every vote, including requests from an old browser tab. Expiry ends voting and keeps the poll and its final results available. Expired polls cannot reopen; manually closed polls can reopen until their deadline.
+
+Turn off **List on See polls** for a poll that is only shared by link. Creators can later use **List publicly** or **Unlist poll** on their poll page. Existing polls keep their original links, have no scheduled deadline, and stay unlisted unless their creator lists them.
+
 ## Run on a CPU Basic Docker Space
 
 Upload this folder to a Docker Space. The metadata enables Hugging Face OAuth automatically. Set these Space secrets:
@@ -35,6 +49,10 @@ Install `requirements.txt`, then run `uvicorn app:app --host 0.0.0.0 --port 7860
 
 ## Voting and privacy
 
-Each browser receives a signed anonymous identifier. Signed-in votes are also associated with a hashed HF identity. Results are available to the creator at any time and to voters after they vote, enforced on the server. CSV exports and management controls are restricted to the creator. No access tokens, email addresses, or raw account IDs of voters are saved. Creators' account IDs and usernames are saved for ownership. Anyone with the link can see the question and options. Guest repeat-vote prevention is browser-based: clearing cookies or using a different browser can bypass it. These are casual polls, not verified elections.
+Each browser receives a signed anonymous identifier. Signed-in votes are also associated with a hashed HF identity. Results are available to the creator at any time, to voters after they vote, and to everyone once voting closes or expires, enforced on the server. CSV exports and management controls are restricted to the creator. No access tokens, email addresses, or raw account IDs of voters are saved. Creators' account IDs and usernames are saved for ownership. Anyone with the link can see the question and options. Listed polls also appear in public browsing; unlisted polls remain accessible to anyone with their link. Guest repeat-vote prevention is browser-based: clearing cookies or using a different browser can bypass it. These are casual polls, not verified elections.
 
 Open the app directly at its `hf.space` URL for sign-in: embedded browsers can block the cookies required by OAuth. Copied poll links use the normal `huggingface.co/spaces/OWNER/SPACE#POLL_ID` URL.
+
+## Checks
+
+With the app's requirements installed, run `python -m unittest discover -s tests -v`. The tests use disposable local storage and cover expiry boundaries, late votes, reopening, listing permissions, browsing, filtering, and pagination.

static/app.js

@@ -1,65 +1,377 @@
-const app = document.querySelector('#app');
-let currentUser = null, loginAvailable = false, timer, renderVersion = 0;
-const esc = value => String(value).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
-const toast = message => { const box = document.querySelector('#toast'); box.textContent = message; box.hidden = false; clearTimeout(timer); timer = setTimeout(() => box.hidden = true, 5000); };
-async function api(url, options = {}) {
-  const response = await fetch(url, { ...options, headers: {'Content-Type':'application/json', 'X-HuggingPolls':'1', ...options.headers} });
-  let data; try { data = await response.json(); } catch { throw new Error('The server is unavailable. Please try again.'); }
-  if (!response.ok) throw new Error(typeof data.detail === 'string' ? data.detail : 'Please check your question and answer options.');
-  return data;
-}
-function login() {
-  if (!loginAvailable) return toast('HF sign-in is available when this app runs on its Hugging Face Space.');
-  // Leave the Space iframe so the OAuth session uses first-party cookies.
-  const url = '/auth/login?poll=' + encodeURIComponent(location.hash.slice(1));
-  if (window.self !== window.top) window.open(url, '_blank', 'noopener');
-  else location.href = url;
-}
-async function loadAccount() {
-  const result = await api('/api/me'); currentUser = result.user; loginAvailable = result.login_available;
-  document.querySelector('#account').innerHTML = currentUser ? `<button class="sign-in" id="logout">${esc(currentUser.name)} · Sign out</button>` : '<button class="sign-in" id="login">🤗 Sign in with HF</button>';
-  document.querySelector('#login')?.addEventListener('click', login);
-  document.querySelector('#logout')?.addEventListener('click', async () => {try {await api('/api/logout', {method:'POST'}); await loadAccount(); route();} catch(e) {toast(e.message);}});
-}
-function optionRow(value='') {
-  const row = document.createElement('div'); row.className='option-row';
-  row.innerHTML = `<span class="option-index"></span><input class="option-input" maxlength="160" required value="${esc(value)}"><button type="button" class="remove-option" aria-label="Remove option">×</button>`;
-  row.querySelector('button').onclick = () => { if(document.querySelectorAll('.option-row').length <= 2) return toast('Keep at least two options.'); row.remove(); numberOptions(); };
-  document.querySelector('#options').append(row); numberOptions();
-}
-function numberOptions() {document.querySelectorAll('.option-row').forEach((row,i)=>{row.querySelector('.option-index').textContent=String(i+1);row.querySelector('input').placeholder=`Option ${i+1}`;row.querySelector('input').setAttribute('aria-label',`Option ${i+1}`);});}
-function home() {
-  app.replaceChildren(document.querySelector('#home-template').content.cloneNode(true));
-  optionRow(); optionRow();
-  if(currentUser) document.querySelector('#create-note').innerHTML=`Creating as <b>${esc(currentUser.name)}</b>. Voters can see results after voting.`;
-  document.querySelector('#add-option').onclick=()=>{if(document.querySelectorAll('.option-row').length>=12)return toast('You can add up to 12 options.');optionRow();};
-  document.querySelector('#create-form').onsubmit=async event=>{
-    event.preventDefault(); if(!currentUser){sessionStorage.setItem('draft',JSON.stringify(readDraft()));return login();}
-    const button=document.querySelector('#create-button');button.disabled=true;button.textContent='Creating…';
-    try {const poll=await api('/api/polls',{method:'POST',body:JSON.stringify(readDraft())});sessionStorage.removeItem('draft');location.hash=poll.id;toast('Poll created.');}
-    catch(e){toast(e.message);button.disabled=false;button.textContent='Create poll';}
-  };
-  try {const draft=JSON.parse(sessionStorage.getItem('draft'));if(draft){document.querySelector('#question').value=draft.question;document.querySelector('#description').value=draft.description;document.querySelector('#options').replaceChildren();draft.options.forEach(optionRow);}}catch{}
-}
-function readDraft(){return {question:document.querySelector('#question').value,description:document.querySelector('#description').value,options:[...document.querySelectorAll('.option-input')].map(x=>x.value)};}
-async function myPolls(version) {
-  if(!currentUser){app.innerHTML='<div class="empty"><h2>My polls</h2><p class="subtle">Sign in with your HF account to create and manage polls.</p><button id="list-login" class="primary">Sign in with HF</button></div>';document.querySelector('#list-login').onclick=login;return;}
-  const polls=await api('/api/polls'); if(version!==renderVersion)return;
-  app.innerHTML=`<div class="page-title"><h1>My polls</h1><p class="subtle">View results and manage your polls.</p></div><section class="card">${polls.length?polls.map(p=>`<a class="list-poll" href="#${esc(p.id)}"><div><strong>${esc(p.question)}</strong><span class="subtle">${p.total} vote${p.total===1?'':'s'} · ${new Date(p.created_at).toLocaleDateString()}</span></div><span class="tag">${p.closed?'Closed':'Open'}</span></a>`).join(''):'<div class="empty"><h2>No polls yet</h2><p class="subtle">Create a poll to get started.</p></div>'}<div class="actions"><a class="primary" href="#">+ Create poll</a></div></section>`;
-}
-async function pollPage(id,version) {
-  const p=await api('/api/polls/'+encodeURIComponent(id));if(version!==renderVersion)return;
-  const total=p.results?.reduce((a,b)=>a+b,0)||0;
-  const results = p.results ? `<div class="section-heading"><h2>Results</h2><span class="small-pill">${total} votes</span></div>${p.options.map((label,i)=>`<div class="result"><div class="result-label"><span>${esc(label)}${p.choice===i?' · Your vote':''}</span><b>${p.results[i]} · ${total?Math.round(p.results[i]/total*100):0}%</b></div><div class="bar"><span style="width:${total?p.results[i]/total*100:0}%"></span></div></div>`).join('')}<div class="actions"><button class="secondary" id="refresh-results">Refresh</button>${p.is_owner?`<a class="secondary" href="/api/polls/${p.id}/export">Export CSV</a><button class="secondary" id="toggle-status">${p.closed?'Reopen voting':'Close voting'}</button><button class="quiet danger" id="delete-poll">Delete poll</button>`:''}</div>` : '';
-  app.innerHTML=`<a class="back" href="#${p.is_owner?'my-polls':''}">← ${p.is_owner?'My polls':'HuggingPolls'}</a><section class="card poll-card"><span class="tag">${p.closed?'Closed':'Open'}</span><h1>${esc(p.question)}</h1><p class="subtle">Asked by ${esc(p.owner)} · ${new Date(p.created_at).toLocaleDateString()}</p>${p.description?`<p class="description">${esc(p.description)}</p>`:''}${p.is_owner?`<div class="share"><label for="share-url">Share link</label><div class="share-line"><input id="share-url" readonly value="${esc(p.url)}"><button class="primary" id="copy-link">Copy link</button></div></div>`:''}${p.voted?`<p class="notice">Vote recorded: <b>${esc(p.options[p.choice])}</b>.</p>`:''}${results}${!p.voted?(p.closed?'<p class="notice">This poll is closed.</p>':`${p.is_owner?'<hr style="border:0;border-top:1px solid var(--line);margin:28px 0"><h2>Vote</h2>':''}<form id="vote-form">${p.options.map((label,i)=>`<label class="vote-option"><input type="radio" name="choice" value="${i}" required><span>${esc(label)}</span></label>`).join('')}<div class="actions"><button type="submit" class="primary" id="vote-button">Submit vote</button></div><p class="subtle">${currentUser?'Voting while signed in.':'No account needed to vote.'} Results are available after voting.</p></form>`):''}</section>`;
-  document.querySelector('#copy-link')?.addEventListener('click',async()=>{try{await navigator.clipboard.writeText(p.url);toast('Poll link copied.');}catch{document.querySelector('#share-url').select();toast('Select and copy the poll link above.');}});
-  document.querySelector('#refresh-results')?.addEventListener('click',()=>route());
-  document.querySelector('#toggle-status')?.addEventListener('click',async event=>{event.target.disabled=true;try{await api('/api/polls/'+p.id,{method:'PATCH',body:JSON.stringify({closed:!p.closed})});route();}catch(e){toast(e.message);event.target.disabled=false;}});
-  document.querySelector('#delete-poll')?.addEventListener('click',async()=>{if(!confirm('Delete this poll and all its votes? This cannot be undone.'))return;try{await api('/api/polls/'+p.id,{method:'DELETE'});location.hash='my-polls';toast('Poll deleted.');}catch(e){toast(e.message);}});
-  document.querySelector('#vote-form')?.addEventListener('submit',async event=>{event.preventDefault();const button=document.querySelector('#vote-button');button.disabled=true;button.textContent='Sending your vote…';try{await api('/api/polls/'+p.id+'/vote',{method:'POST',body:JSON.stringify({choice:Number(new FormData(event.target).get('choice'))})});route();}catch(e){toast(e.message);button.disabled=false;button.textContent='Submit vote';}});
-}
-async function route(){const version=++renderVersion;const id=location.hash.slice(1);document.querySelector('#new-poll').classList.toggle('active', !id);document.querySelector('#my-polls').classList.toggle('active', id==='my-polls');try{if(!id)home();else{app.innerHTML='<p class="empty subtle">Loading…</p>';if(id==='my-polls')await myPolls(version);else await pollPage(id,version);}}catch(e){if(version===renderVersion)app.innerHTML=`<div class="empty"><h2>Unable to load poll</h2><p class="subtle">${esc(e.message)}</p><a class="primary" href="#">Create a poll</a></div>`;}}
-document.querySelector('#my-polls').onclick=()=>location.hash='my-polls';
-window.addEventListener('hashchange',route);
-window.addEventListener('pageshow',event=>{if(event.persisted)loadAccount().then(route).catch(e=>toast(e.message));});
-loadAccount().then(route).catch(e=>{home();toast(e.message);});
+const app = document.querySelector('#app');
+let currentUser = null, loginAvailable = false, timer, renderVersion = 0;
+let expiryTimer;
+const browseState = {q: '', status: 'open', sort: 'newest', page: 1};
+const esc = value => String(value).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+const toast = message => { const box = document.querySelector('#toast'); box.textContent = message; box.hidden = false; clearTimeout(timer); timer = setTimeout(() => box.hidden = true, 5000); };
+async function api(url, options = {}) {
+  let response;
+  try { response = await fetch(url, { ...options, headers: {'Content-Type':'application/json', 'X-HuggingPolls':'1', ...options.headers} }); }
+  catch { throw new Error('Could not connect. Check your connection and try again.'); }
+  let data; try { data = await response.json(); } catch { throw new Error('The server is unavailable. Please try again.'); }
+  if (!response.ok) {
+    const error = new Error(typeof data.detail === 'string' ? data.detail : 'Please check your question and answer options.');
+    error.status = response.status;
+    throw error;
+  }
+  return data;
+}
+function login() {
+  if (!loginAvailable) return toast('HF sign-in is available when this app runs on its Hugging Face Space.');
+  // Leave the Space iframe so the OAuth session uses first-party cookies.
+  const url = '/auth/login?poll=' + encodeURIComponent(location.hash.slice(1));
+  if (window.self !== window.top) window.open(url, '_blank', 'noopener');
+  else location.href = url;
+}
+async function loadAccount() {
+  const result = await api('/api/me'); currentUser = result.user; loginAvailable = result.login_available;
+  document.querySelector('#account').innerHTML = currentUser ? `<button class="sign-in" id="logout">${esc(currentUser.name)} · Sign out</button>` : '<button class="sign-in" id="login">🤗 Sign in with HF</button>';
+  document.querySelector('#login')?.addEventListener('click', login);
+  document.querySelector('#logout')?.addEventListener('click', async () => {try {await api('/api/logout', {method:'POST'}); await loadAccount(); route();} catch(e) {toast(e.message);}});
+}
+function readDraft() {
+  return {
+    question: document.querySelector('#question').value,
+    description: document.querySelector('#description').value,
+    options: [...document.querySelectorAll('.option-input')].map(input => input.value),
+    duration_hours: Number(document.querySelector('#duration').value),
+    listed: document.querySelector('#listed').checked
+  };
+}
+function storedDraft() {
+  try {
+    const draft = JSON.parse(sessionStorage.getItem('draft'));
+    if (draft && typeof draft.question === 'string' && typeof draft.description === 'string'
+        && Array.isArray(draft.options) && draft.options.length >= 2 && draft.options.length <= 12
+        && draft.options.every(option => typeof option === 'string' && option.length <= 160)
+        && draft.question.length <= 240 && draft.description.length <= 2000
+        && (draft.duration_hours === undefined || [1, 24, 72, 168, 720].includes(draft.duration_hours))
+        && (draft.listed === undefined || typeof draft.listed === 'boolean')) return draft;
+  } catch {}
+  return null;
+}
+function saveDraft() {
+  const draft = readDraft();
+  const hasContent = Boolean(draft.question || draft.description || draft.options.some(Boolean)
+    || draft.options.length > 2 || draft.duration_hours !== 168 || !draft.listed);
+  document.querySelector('#clear-draft').hidden = !hasContent;
+  try {
+    if (hasContent) sessionStorage.setItem('draft', JSON.stringify(draft));
+    else sessionStorage.removeItem('draft');
+    document.querySelector('#draft-status').textContent = hasContent ? 'Draft saved in this tab.' : 'Drafts are saved in this tab as you type.';
+  } catch {
+    document.querySelector('#draft-status').textContent = 'Draft saving is unavailable in this browser.';
+  }
+}
+function clearValidation() {
+  document.querySelectorAll('#create-form input').forEach(input => {
+    input.setCustomValidity('');
+    input.removeAttribute('aria-invalid');
+  });
+}
+function validateDraft() {
+  clearValidation();
+  const question = document.querySelector('#question');
+  if (!question.value.trim()) question.setCustomValidity('Please enter a question.');
+  const seen = new Set();
+  document.querySelectorAll('.option-input').forEach(input => {
+    const value = input.value.trim().toLowerCase();
+    if (!value) input.setCustomValidity('Please enter an answer option.');
+    else if (seen.has(value)) input.setCustomValidity('Please use a different answer for each option.');
+    seen.add(value);
+  });
+  document.querySelectorAll('#create-form input').forEach(input => {
+    if (!input.validity.valid) input.setAttribute('aria-invalid', 'true');
+  });
+  return document.querySelector('#create-form').reportValidity();
+}
+function optionRow(value = '') {
+  const row = document.createElement('div');
+  row.className = 'option-row';
+  row.innerHTML = `<span class="option-index" aria-hidden="true"></span><input class="option-input" maxlength="160" required value="${esc(value)}"><button type="button" class="remove-option" aria-label="Remove option">×</button>`;
+  row.querySelector('button').onclick = () => {
+    if (document.querySelectorAll('.option-row').length <= 2) return;
+    const neighbor = row.nextElementSibling || row.previousElementSibling;
+    row.remove();
+    numberOptions();
+    clearValidation();
+    saveDraft();
+    neighbor?.querySelector('input').focus();
+  };
+  document.querySelector('#options').append(row);
+  numberOptions();
+  return row;
+}
+function numberOptions() {
+  const rows = document.querySelectorAll('.option-row');
+  rows.forEach((row, i) => {
+    row.querySelector('.option-index').textContent = String(i + 1);
+    row.querySelector('input').placeholder = `Option ${i + 1}`;
+    row.querySelector('input').setAttribute('aria-label', `Option ${i + 1}`);
+    const remove = row.querySelector('button');
+    remove.disabled = rows.length <= 2;
+    remove.setAttribute('aria-label', `Remove option ${i + 1}`);
+    remove.title = rows.length <= 2 ? 'A poll needs at least two options' : `Remove option ${i + 1}`;
+  });
+  document.querySelector('#add-option').disabled = rows.length >= 12;
+  document.querySelector('#options-count').textContent = `${rows.length} of 12 options`;
+}
+function home(restore = true) {
+  app.replaceChildren(document.querySelector('#home-template').content.cloneNode(true));
+  document.title = 'Create a poll · HuggingPolls';
+  const draft = restore ? storedDraft() : null;
+  document.querySelector('#question').value = draft?.question || '';
+  document.querySelector('#description').value = draft?.description || '';
+  document.querySelector('#duration').value = String(draft?.duration_hours ?? 168);
+  document.querySelector('#listed').checked = draft?.listed ?? true;
+  (draft?.options || ['', '']).forEach(optionRow);
+  document.querySelector('#question-count').textContent = `${document.querySelector('#question').value.length} / 240`;
+  saveDraft();
+  if (draft) document.querySelector('#draft-status').textContent = 'Draft restored. Saved in this tab.';
+  if (currentUser) document.querySelector('#create-note').innerHTML = `Creating as <b>${esc(currentUser.name)}</b>.`;
+  document.querySelector('#add-option').onclick = () => {
+    if (document.querySelectorAll('.option-row').length >= 12) return;
+    const row = optionRow();
+    saveDraft();
+    row.querySelector('input').focus();
+  };
+  document.querySelector('#clear-draft').onclick = () => {
+    try { sessionStorage.removeItem('draft'); } catch {}
+    home(false);
+    document.querySelector('#question').focus();
+    toast('Draft cleared.');
+  };
+  const form = document.querySelector('#create-form');
+  form.addEventListener('input', () => {
+    clearValidation();
+    document.querySelector('#question-count').textContent = `${document.querySelector('#question').value.length} / 240`;
+    saveDraft();
+  });
+  form.onsubmit = async event => {
+    event.preventDefault();
+    if (!validateDraft()) return;
+    saveDraft();
+    if (!currentUser) return login();
+    const button = document.querySelector('#create-button');
+    button.disabled = true;
+    button.setAttribute('aria-busy', 'true');
+    button.textContent = 'Creating…';
+    try {
+      const poll = await api('/api/polls', {method: 'POST', body: JSON.stringify(readDraft())});
+      try { sessionStorage.removeItem('draft'); } catch {}
+      location.hash = poll.id;
+      toast('Poll created.');
+    } catch (e) {
+      toast(e.message);
+      button.disabled = false;
+      button.removeAttribute('aria-busy');
+      button.textContent = 'Create poll';
+    }
+  };
+}
+function pollBadge(poll) {
+  return `<span class="tag ${poll.closed ? '' : 'tag-open'}">${poll.expired ? 'Expired' : poll.closed ? 'Closed' : 'Open'}</span>`;
+}
+function deadlineText(poll) {
+  if (!poll.expires_at) return poll.closed ? 'Voting closed' : 'No scheduled end';
+  const date = new Date(poll.expires_at).toLocaleString(undefined, {
+    month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'
+  });
+  return `${poll.expired ? 'Expired' : poll.closed ? 'Scheduled end:' : 'Closes'} ${date}`;
+}
+function watchExpiry(polls, version, refresh = route) {
+  clearTimeout(expiryTimer);
+  const delays = polls.filter(poll => poll.expires_at && !poll.expired)
+    .map(poll => new Date(poll.expires_at).getTime() - Date.now());
+  if (!delays.length) return;
+  const delay = Math.min(...delays);
+  // Recheck with the server if the browser clock is ahead; avoid a request loop.
+  expiryTimer = setTimeout(() => {
+    if (version === renderVersion) refresh();
+  }, delay > 0 ? Math.min(delay + 250, 2147483647) : 30000);
+}
+async function browsePolls(version) {
+  document.title = 'See polls \u00b7 HuggingPolls';
+  app.replaceChildren(document.querySelector('#browse-template').content.cloneNode(true));
+  const form = document.querySelector('#browse-form');
+  const search = document.querySelector('#poll-search');
+  const status = document.querySelector('#poll-status');
+  const sort = document.querySelector('#poll-sort');
+  const results = document.querySelector('#browse-results');
+  const count = document.querySelector('#browse-count');
+  const pager = document.querySelector('#browse-pagination');
+  const clear = document.querySelector('#clear-filters');
+  search.value = browseState.q;
+  status.value = browseState.status;
+  sort.value = browseState.sort;
+  let requestVersion = 0;
+
+  async function load() {
+    const request = ++requestVersion;
+    clearTimeout(expiryTimer);
+    results.setAttribute('aria-busy', 'true');
+    document.querySelector('#previous-page').disabled = true;
+    document.querySelector('#next-page').disabled = true;
+    count.textContent = 'Finding polls\u2026';
+    clear.hidden = !browseState.q && browseState.status === 'open' && browseState.sort === 'newest';
+    try {
+      const data = await api('/api/browse?' + new URLSearchParams(browseState));
+      if (version !== renderVersion || request !== requestVersion) return;
+      browseState.page = data.page;
+      count.textContent = `${data.total} poll${data.total === 1 ? '' : 's'}${browseState.q ? ` matching \u201c${browseState.q}\u201d` : ''}`;
+      results.innerHTML = data.items.length ? `<div class="poll-grid">${data.items.map(poll => `
+        <a class="browse-card" href="#${esc(poll.id)}">
+          ${pollBadge(poll)}<h2>${esc(poll.question)}</h2>
+          ${poll.description ? `<p class="browse-description">${esc(poll.description)}</p>` : ''}
+          <div class="card-meta"><p class="subtle">By ${esc(poll.owner)} &middot; ${poll.total} vote${poll.total === 1 ? '' : 's'} &middot; ${poll.option_count} options</p>
+          <p class="subtle deadline">${esc(deadlineText(poll))}</p></div>
+        </a>`).join('')}</div>` : `<div class="card empty"><h2>${browseState.q ? 'No matching polls' : browseState.status === 'open' ? 'No open polls yet' : 'No polls here yet'}</h2><p class="subtle">${browseState.q ? 'Try another question, topic, or creator, or clear your filters.' : 'Try a different filter or create a poll for the community.'}</p><div class="actions"><a class="primary" href="#">+ Create poll</a></div></div>`;
+      const pages = Math.max(1, Math.ceil(data.total / data.page_size));
+      pager.hidden = pages <= 1;
+      document.querySelector('#browse-page').textContent = `Page ${data.page} of ${pages}`;
+      document.querySelector('#previous-page').disabled = data.page <= 1;
+      document.querySelector('#next-page').disabled = data.page >= pages;
+      watchExpiry(data.items, version, load);
+    } catch (error) {
+      if (version !== renderVersion || request !== requestVersion) return;
+      count.textContent = 'Polls could not be loaded.';
+      results.innerHTML = `<div class="card empty"><h2>Unable to browse polls</h2><p class="subtle">${esc(error.message)}</p><button class="secondary" id="retry-browse">Try again</button></div>`;
+      pager.hidden = true;
+      document.querySelector('#retry-browse').onclick = load;
+    } finally {
+      if (version === renderVersion && request === requestVersion) results.removeAttribute('aria-busy');
+    }
+  }
+  form.onsubmit = event => {
+    event.preventDefault();
+    Object.assign(browseState, {q: search.value.trim(), status: status.value, sort: sort.value, page: 1});
+    load();
+  };
+  status.onchange = sort.onchange = () => form.requestSubmit();
+  clear.onclick = () => {
+    search.value = '';
+    status.value = 'open';
+    sort.value = 'newest';
+    form.requestSubmit();
+  };
+  document.querySelector('#previous-page').onclick = () => { browseState.page--; load(); };
+  document.querySelector('#next-page').onclick = () => { browseState.page++; load(); };
+  await load();
+}
+async function myPolls(version) {
+  document.title = 'My polls \u00b7 HuggingPolls';
+  if (!currentUser) {
+    app.innerHTML = '<div class="empty"><h2>My polls</h2><p class="subtle">Sign in with your HF account to create and manage polls.</p><button id="list-login" class="primary">Sign in with HF</button></div>';
+    document.querySelector('#list-login').onclick = login;
+    return;
+  }
+  const polls = await api('/api/polls');
+  if (version !== renderVersion) return;
+  app.innerHTML = `<div class="page-title"><h1>My polls</h1><p class="subtle">View results and manage your polls.</p></div><section class="card">${polls.length ? polls.map(poll => `
+    <a class="list-poll" href="#${esc(poll.id)}"><div><strong>${esc(poll.question)}</strong>
+    <span class="subtle">${poll.total} vote${poll.total === 1 ? '' : 's'} &middot; ${poll.listed ? 'Listed' : 'Unlisted'} &middot; ${new Date(poll.created_at).toLocaleDateString()}</span>
+    <p class="subtle deadline">${esc(deadlineText(poll))}</p></div>${pollBadge(poll)}</a>`).join('') : '<div class="empty"><h2>No polls yet</h2><p class="subtle">Create a poll to get started.</p></div>'}
+    <div class="actions"><a class="primary" href="#">+ Create poll</a></div></section>`;
+  watchExpiry(polls, version);
+}
+async function pollPage(id, version) {
+  const p = await api('/api/polls/' + encodeURIComponent(id));
+  if (version !== renderVersion) return;
+  document.title = `${p.question} \u00b7 HuggingPolls`;
+  const total = p.results?.reduce((a, b) => a + b, 0) || 0;
+  const results = p.results ? `
+    <div class="section-heading"><h2>${p.closed ? 'Final results' : 'Results'}</h2><span class="small-pill">${total} vote${total === 1 ? '' : 's'}</span></div>
+    ${p.options.map((label, i) => `<div class="result"><div class="result-label"><span>${esc(label)}${p.choice === i ? ' &middot; Your vote' : ''}</span><b>${p.results[i]} &middot; ${total ? Math.round(p.results[i] / total * 100) : 0}%</b></div><div class="bar" aria-hidden="true"><span style="width:${total ? p.results[i] / total * 100 : 0}%"></span></div></div>`).join('')}
+    <div class="actions"><button class="secondary" id="refresh-results">Refresh</button>${p.is_owner ? `
+      <a class="secondary" href="/api/polls/${p.id}/export">Export CSV</a>
+      ${!p.expired ? `<button class="secondary" id="toggle-status">${p.closed ? 'Reopen voting' : 'Close voting'}</button>` : ''}
+      <button class="secondary" id="toggle-listing">${p.listed ? 'Unlist poll' : 'List publicly'}</button>
+      <button class="quiet danger" id="delete-poll">Delete poll</button>` : ''}</div>` : '';
+  app.innerHTML = `<a class="back" href="#${p.is_owner ? 'my-polls' : 'see-polls'}">&larr; ${p.is_owner ? 'My polls' : 'See polls'}</a>
+    <section class="card poll-card"><div class="poll-meta">${pollBadge(p)}${!p.listed ? '<span class="tag">Unlisted</span>' : ''}</div>
+    <h1>${esc(p.question)}</h1><p class="subtle">Asked by ${esc(p.owner)} &middot; ${new Date(p.created_at).toLocaleDateString()}</p>
+    <p class="subtle deadline">${esc(deadlineText(p))}</p>
+    ${p.description ? `<p class="description">${esc(p.description)}</p>` : ''}
+    ${p.is_owner ? `<div class="share"><label for="share-url">Share link</label><div class="share-line"><input id="share-url" readonly value="${esc(p.url)}"><button class="primary" id="copy-link">Copy link</button></div><p class="subtle">${p.listed ? 'Listed on See polls. Anyone can discover this poll.' : 'Unlisted. Share this link with anyone you want to invite.'}</p></div>` : ''}
+    ${p.voted ? `<p class="notice">Vote recorded: <b>${esc(p.options[p.choice])}</b>.</p>` : ''}
+    ${p.closed ? `<p class="notice" id="poll-closed-notice">${p.expired ? 'This poll has expired. Voting has ended.' : 'This poll is closed.'} Final results are available below.</p>` : ''}
+    ${results}
+    ${!p.voted && !p.closed ? `${p.is_owner ? '<hr class="vote-divider"><h2>Vote</h2>' : ''}
+      <form id="vote-form">${p.options.map((label, i) => `<label class="vote-option"><input type="radio" name="choice" value="${i}" required><span>${esc(label)}</span></label>`).join('')}
+      <div class="actions"><button type="submit" class="primary" id="vote-button">Submit vote</button></div>
+      <p class="subtle">${currentUser ? 'Voting while signed in.' : 'No account needed to vote.'} Results appear after voting or once the poll closes.</p></form>` : ''}</section>`;
+  document.querySelector('#copy-link')?.addEventListener('click', async () => {
+    try { await navigator.clipboard.writeText(p.url); toast('Poll link copied.'); }
+    catch { document.querySelector('#share-url').select(); toast('Select and copy the poll link above.'); }
+  });
+  document.querySelector('#refresh-results')?.addEventListener('click', () => route());
+  for (const [selector, change, message] of [
+    ['#toggle-status', {closed: !p.closed}, p.closed ? 'Voting reopened.' : 'Voting closed.'],
+    ['#toggle-listing', {listed: !p.listed}, p.listed ? 'Poll unlisted.' : 'Poll is now listed on See polls.']
+  ]) {
+    document.querySelector(selector)?.addEventListener('click', async event => {
+      const button = event.currentTarget;
+      button.disabled = true;
+      try { await api('/api/polls/' + p.id, {method: 'PATCH', body: JSON.stringify(change)}); await route(); toast(message); }
+      catch (error) { toast(error.message); button.disabled = false; if (error.status === 409) route(); }
+    });
+  }
+  document.querySelector('#delete-poll')?.addEventListener('click', async () => {
+    if (!confirm('Delete this poll and all its votes? This cannot be undone.')) return;
+    try { await api('/api/polls/' + p.id, {method: 'DELETE'}); location.hash = 'my-polls'; toast('Poll deleted.'); }
+    catch (error) { toast(error.message); }
+  });
+  document.querySelector('#vote-form')?.addEventListener('submit', async event => {
+    event.preventDefault();
+    const button = document.querySelector('#vote-button');
+    button.disabled = true;
+    button.setAttribute('aria-busy', 'true');
+    button.textContent = 'Sending your vote\u2026';
+    try {
+      await api('/api/polls/' + p.id + '/vote', {method: 'POST', body: JSON.stringify({choice: Number(new FormData(event.target).get('choice'))})});
+      await route();
+    } catch (error) {
+      toast(error.message);
+      button.disabled = false;
+      button.removeAttribute('aria-busy');
+      button.textContent = 'Submit vote';
+      if (error.status === 409) route();
+    }
+  });
+  watchExpiry([p], version);
+}
+async function route() {
+  const version = ++renderVersion;
+  clearTimeout(expiryTimer);
+  const id = location.hash.slice(1);
+  for (const [selector, active] of [['#new-poll', !id], ['#see-polls', id === 'see-polls'], ['#my-polls', id === 'my-polls']]) {
+    const tab = document.querySelector(selector);
+    tab.classList.toggle('active', active);
+    if (active) tab.setAttribute('aria-current', 'page');
+    else tab.removeAttribute('aria-current');
+  }
+  app.setAttribute('aria-busy', 'true');
+  try {
+    if (!id) home();
+    else {
+      document.title = 'Loading · HuggingPolls';
+      app.innerHTML = '<p class="empty subtle">Loading…</p>';
+      if (id === 'see-polls') await browsePolls(version);
+      else if (id === 'my-polls') await myPolls(version);
+      else await pollPage(id, version);
+    }
+  } catch (e) {
+    if (version === renderVersion) {
+      document.title = 'Unable to load · HuggingPolls';
+      app.innerHTML = `<div class="empty"><h2>Unable to load ${id === 'my-polls' ? 'your polls' : 'poll'}</h2><p class="subtle">${esc(e.message)}</p><div class="actions"><button class="secondary" id="retry-page">Try again</button><a class="primary" href="#">Create a poll</a></div></div>`;
+      document.querySelector('#retry-page').onclick = () => route();
+    }
+  } finally {
+    if (version === renderVersion) app.removeAttribute('aria-busy');
+  }
+}
+document.querySelector('#my-polls').onclick=()=>location.hash='my-polls';
+document.querySelector('.skip-link').onclick = event => { event.preventDefault(); app.focus(); };
+window.addEventListener('hashchange', async () => { await route(); app.focus({preventScroll: true}); });
+window.addEventListener('pageshow',event=>{if(event.persisted)loadAccount().then(route).catch(e=>toast(e.message));});
+loadAccount().catch(e => toast(e.message)).then(route);

static/index.html

@@ -1,19 +1,104 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="theme-color" content="#ffffff"><meta name="description" content="Create polls, share a link, and view your results. Sign in with Hugging Face to create a poll. Anyone can vote.">
-<title>HuggingPolls</title>
-<link rel="icon" href="/static/logo.png"><link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
-<header><a class="brand" href="#"><img src="/static/logo.png" alt="">HuggingPolls</a><span class="header-description">Community polls</span><span id="account"></span></header>
-<div class="page-header"><div class="project-title"><img src="/static/logo.png" alt="Judge Huggy"><div><h1>HuggingPolls</h1><p>Create a poll and share it with anyone.</p></div></div><nav aria-label="Poll navigation"><a id="new-poll" class="tab" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M12 8v8M8 12h8"/></svg>Create poll</a><a id="my-polls" class="tab" href="#my-polls"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M5 20V10h3v10M11 20V4h3v16M17 20v-7h3v7"/></svg>My polls</a></nav></div>
-<main id="app" aria-live="polite"></main>
-<footer>HuggingPolls is an independent community project. Not affiliated with, endorsed by, or sponsored by Hugging Face.</footer>
-<div id="toast" role="status" hidden></div>
-<template id="home-template">
-<div class="workspace"><section class="create-section"><div class="section-heading"><h2>Create a poll</h2><p>Add a question and at least two answer options.</p></div><form id="create-form"><label for="question">Question <span aria-hidden="true">*</span></label><input id="question" maxlength="240" placeholder="What would you like to ask?" required><label for="description">Description <small>optional</small></label><textarea id="description" maxlength="2000" placeholder="Add context for voters" rows="3"></textarea><div class="label-row"><label id="options-label">Answer options <span aria-hidden="true">*</span></label><small>2–12 options</small></div><div id="options" role="group" aria-labelledby="options-label"></div><button type="button" id="add-option" class="secondary add-option">+ Add option</button><div class="form-bottom"><p id="create-note" class="subtle">Sign in with Hugging Face to create a poll.</p><button class="primary" id="create-button" type="submit">Create poll</button></div></form></section><aside><h3>About polls</h3><p>Share your poll using its link. Anyone with the link can vote, with or without an account.</p><h3>Results</h3><p>Voters can see results after voting. The creator can view results at any time, export votes, and close or reopen a poll.</p><h3>Voting</h3><p>Each voter selects one answer. Guest votes are limited by browser; signed-in votes are also checked by account.</p></aside></div>
-</template>
-<script src="/static/app.js" defer></script>
-</body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="theme-color" content="#ffffff">
+  <meta name="color-scheme" content="light dark">
+  <meta name="description" content="Create polls, share a link, and view your results. Sign in with Hugging Face to create a poll. Anyone can vote.">
+  <title>HuggingPolls</title>
+  <script src="/static/theme.js"></script>
+  <link rel="icon" href="/static/logo.png">
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <a class="skip-link" href="#app">Skip to content</a>
+  <header>
+    <a class="brand" href="#"><img src="/static/logo.png" alt="">HuggingPolls</a>
+    <span class="header-description">Community polls</span>
+    <span id="account"></span>
+  </header>
+  <div class="page-header">
+    <div class="project-title">
+      <img src="/static/logo.png" alt="Judge Huggy">
+      <div><h1>HuggingPolls</h1><p>Create a poll and share it with anyone.</p></div>
+    </div>
+    <nav aria-label="Poll navigation">
+      <a id="new-poll" class="tab" href="#">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M12 8v8M8 12h8"/></svg>
+        Create poll
+      </a>
+      <a id="see-polls" class="tab" href="#see-polls">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        See polls
+      </a>
+      <a id="my-polls" class="tab" href="#my-polls">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M5 20V10h3v10M11 20V4h3v16M17 20v-7h3v7"/></svg>
+        My polls
+      </a>
+    </nav>
+  </div>
+  <main id="app" tabindex="-1" aria-live="polite"></main>
+  <footer>
+    <p>HuggingPolls is an independent community project. Not affiliated with, endorsed by, or sponsored by Hugging Face.</p>
+    <div class="theme-control">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8m-4-4v4"/></svg>
+      <label for="theme-select">Theme</label>
+      <select id="theme-select" aria-describedby="theme-status">
+        <option value="system">System</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+      <span id="theme-status" class="sr-only" role="status"></span>
+    </div>
+  </footer>
+  <div id="toast" role="status" hidden></div>
+  <template id="home-template">
+    <div class="workspace">
+      <section class="create-section">
+        <div class="section-heading"><h2>Create a poll</h2><p>Add a question and at least two answer options.</p></div>
+        <form id="create-form">
+          <div class="label-row"><label for="question">Question <span aria-hidden="true">*</span></label><small id="question-count">0 / 240</small></div>
+          <input id="question" maxlength="240" placeholder="What would you like to ask?" aria-describedby="question-count" required>
+          <label for="description">Description <small>optional</small></label>
+          <textarea id="description" maxlength="2000" placeholder="Add context for voters" rows="3"></textarea>
+          <div class="label-row"><label id="options-label">Answer options <span aria-hidden="true">*</span></label><small id="options-count">2&ndash;12 options</small></div>
+          <div id="options" role="group" aria-labelledby="options-label"></div>
+          <button type="button" id="add-option" class="secondary add-option">+ Add option</button>
+          <div class="poll-settings">
+            <label for="duration">Voting duration</label>
+            <select id="duration" aria-describedby="duration-help">
+              <option value="1">1 hour</option>
+              <option value="24">1 day</option>
+              <option value="72">3 days</option>
+              <option value="168" selected>7 days</option>
+              <option value="720">30 days</option>
+            </select>
+            <p id="duration-help" class="subtle">Starts when you create the poll. Voting closes automatically; results stay available.</p>
+            <label class="listing-choice" for="listed"><input id="listed" type="checkbox" checked><span><strong>List on See polls</strong><small>Let anyone discover your poll. Turn off to share it only by link.</small></span></label>
+          </div>
+          <div class="draft-row"><span id="draft-status" class="subtle" role="status"></span><button type="button" id="clear-draft" class="quiet" hidden>Clear draft</button></div>
+          <div class="form-bottom"><p id="create-note" class="subtle">Sign in with Hugging Face to create a poll.</p><button class="primary" id="create-button" type="submit">Create poll</button></div>
+        </form>
+      </section>
+      <aside>
+        <h3>Discover and share</h3><p>Browse community questions in <a class="text-link" href="#see-polls">See polls</a>, or share a poll using its link. Anyone can vote, with or without an account.</p>
+        <h3>Results and expiry</h3><p>Results appear after voting or once a poll closes. Choose how long voting stays open, from 1 hour to 30 days. Creators can view results and export votes at any time.</p>
+        <h3>Voting</h3><p>Each voter selects one answer. Guest votes are limited by browser; signed-in votes are also checked by account.</p>
+      </aside>
+    </div>
+  </template>
+  <template id="browse-template">
+    <div class="page-title browse-title"><div><h1>See polls</h1><p class="subtle">Explore community questions and add your vote. No account needed.</p></div><a class="primary" href="#">+ Create poll</a></div>
+    <form id="browse-form" class="browse-filters" role="search" aria-label="Find polls">
+      <div class="browse-search"><label for="poll-search">Search polls</label><div class="search-line"><input type="search" id="poll-search" maxlength="240" placeholder="Question, topic, or creator"><button type="submit" class="primary">Search</button></div></div>
+      <div><label for="poll-status">Status</label><select id="poll-status"><option value="open">Open for voting</option><option value="closed">Closed &amp; expired</option><option value="all">All polls</option></select></div>
+      <div><label for="poll-sort">Sort by</label><select id="poll-sort"><option value="newest">Newest first</option><option value="popular">Most votes</option><option value="ending">Ending soon</option></select></div>
+    </form>
+    <div class="browse-summary"><p id="browse-count" class="subtle" role="status">Finding polls…</p><button id="clear-filters" class="quiet" hidden>Clear filters</button></div>
+    <section id="browse-results" aria-label="Polls" aria-busy="true"></section>
+    <nav id="browse-pagination" class="pagination" aria-label="Browse pages" hidden><button id="previous-page" class="secondary">Previous</button><span id="browse-page" class="subtle"></span><button id="next-page" class="secondary">Next</button></nav>
+  </template>
+  <script src="/static/app.js" defer></script>
+</body>
+</html>

static/style.css

@@ -1 +1,245 @@
-:root{color-scheme:light;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--bg:#fff;--link:#2563eb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a:focus-visible,button:focus-visible{outline:2px solid #60a5fa;outline-offset:3px}header{max-width:1200px;margin:auto;min-height:70px;display:flex;align-items:center;gap:24px;padding:16px 32px}.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:650;white-space:nowrap}.brand img{width:30px;height:30px;object-fit:contain}.header-description{font-size:14px;color:var(--muted)}#account{margin-left:auto}.sign-in,.secondary,.primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 13px;line-height:20px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;font-weight:400;font-size:14px;white-space:nowrap}.sign-in:hover,.secondary:hover{background:#f9fafb;border-color:#9ca3af}.primary{background:#111827;border-color:#111827;color:white}.primary:hover{background:#374151;border-color:#374151}.quiet{border:0;background:none;padding:7px 8px;color:var(--muted)}.quiet:hover{color:#111827}.page-header{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fafafa}.project-title{max-width:1136px;margin:auto;display:flex;align-items:center;gap:14px;padding:25px 0 22px}.project-title img{width:45px;height:45px;object-fit:contain}.project-title h1{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 4px;letter-spacing:0}.project-title p{margin:0;color:var(--muted);font-size:14px}nav{max-width:1136px;margin:auto;display:flex;gap:24px}.tab{display:inline-flex;align-items:center;gap:7px;padding:10px 1px 12px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}.tab svg{width:17px;height:17px}.tab:hover{color:#111827}.tab.active{color:#111827;border-bottom-color:#f59e0b}main{max-width:1136px;margin:0 auto;min-height:calc(100vh - 292px);padding:32px 0 64px}.workspace{display:grid;grid-template-columns:minmax(0,730px) minmax(220px,1fr);gap:56px}.create-section{min-width:0}.section-heading{margin:0 0 24px}.section-heading h2,h2{font-size:18px;font-weight:600;line-height:1.4;margin:0 0 6px}.section-heading p{margin:0;color:var(--muted);font-size:14px}label{display:block;font-weight:500;margin:22px 0 8px}label span[aria-hidden]{color:#9ca3af}small{font-size:12px;color:var(--muted);font-weight:400}label small{margin-left:8px}input,textarea{display:block;width:100%;border:1px solid #d1d5db;border-radius:6px;padding:9px 12px;color:#111827;background:#fff;line-height:1.5;min-width:0}input::placeholder,textarea::placeholder{color:#9ca3af}input:focus,textarea:focus{outline:2px solid #bfdbfe;outline-offset:1px;border-color:#60a5fa}textarea{resize:vertical}.label-row{display:flex;align-items:center;justify-content:space-between}.label-row small{margin-top:14px}.option-row{display:flex;gap:10px;align-items:center;margin-bottom:10px}.option-index{width:18px;flex-shrink:0;font-size:12px;color:#9ca3af;font-variant-numeric:tabular-nums;text-align:center}.remove-option{display:grid;place-items:center;border:0;background:transparent;color:#9ca3af;width:28px;height:32px;font-size:21px}.remove-option:hover{color:#dc2626}.add-option{margin-top:2px;margin-left:28px}.form-bottom{border-top:1px solid var(--line);margin-top:28px;padding-top:20px;display:flex;gap:20px;align-items:center;justify-content:space-between}.form-bottom p{margin:0}.form-bottom small{font-size:12px}.subtle{font-size:13px;line-height:1.6;color:var(--muted)}aside{border-left:1px solid var(--line);padding-left:28px}aside h3{font-size:14px;font-weight:600;margin:0 0 9px}aside p{font-size:13px;color:var(--muted);margin:0 0 27px;line-height:1.7}footer{border-top:1px solid var(--line);max-width:1136px;margin:auto;padding:22px 0 28px;color:var(--muted);font-size:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);border:1px solid #d1d5db;background:white;color:#374151;padding:12px 18px;border-radius:6px;max-width:calc(100vw - 32px);box-shadow:0 2px 8px #0001;z-index:10}.page-title{margin-bottom:25px}.page-title h1{font-size:22px;font-weight:600;letter-spacing:0;line-height:1.4;margin:0 0 7px}.page-title p{margin:0}.card{border:1px solid var(--line);border-radius:8px;padding:24px;background:white}.poll-card{max-width:760px;margin:20px auto 0}.poll-card h1{font-size:24px;font-weight:600;line-height:1.4;letter-spacing:0;margin:18px 0 8px;overflow-wrap:anywhere}.description{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;margin:20px 0}.tag{display:inline-flex;align-items:center;padding:2px 8px;font-size:12px;color:#4b5563;border:1px solid var(--line);background:#f9fafb;border-radius:4px;white-space:nowrap}.share{background:#f9fafb;border:1px solid var(--line);border-radius:6px;padding:16px;margin:24px 0}.share label{margin:0 0 8px;font-size:13px}.share-line{display:flex;gap:8px}.share-line input{font-size:13px}.poll-card .section-heading{display:flex;align-items:center;justify-content:space-between;margin-top:27px;margin-bottom:5px}.small-pill{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.result{margin:20px 0}.result-label{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px;overflow-wrap:anywhere}.result-label b{font-size:12px;font-weight:500;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}.bar{height:8px;background:#f3f4f6;border-radius:3px;overflow:hidden}.bar span{display:block;height:100%;background:#facc15;border-radius:3px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px}.danger{color:#dc2626}.danger:hover{color:#991b1b}.vote-option{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:6px;padding:12px 14px;cursor:pointer;font-weight:400;margin:12px 0;overflow-wrap:anywhere}.vote-option:hover{background:#f9fafb}.vote-option:has(input:checked){border-color:#9ca3af;background:#f9fafb}.vote-option input{width:16px;height:16px;flex-shrink:0;padding:0;accent-color:#374151}.notice{font-size:14px;background:#f9fafb;border:1px solid var(--line);border-radius:6px;padding:15px;line-height:1.7;margin-top:24px}.list-poll{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}.list-poll:first-child{padding-top:0}.list-poll strong{display:block;font-weight:500;margin-bottom:5px;overflow-wrap:anywhere}.list-poll:hover strong{color:var(--link)}.empty{padding:48px 20px;text-align:center}.empty h2{font-size:18px}.back{color:var(--muted);font-size:13px}.back:hover{color:#111827}.error{color:#dc2626}@media(max-width:1200px){.project-title,nav,main,footer{margin-left:32px;margin-right:32px}}@media(max-width:760px){header{padding:14px 20px;min-height:62px;gap:10px}.header-description{display:none}.brand{font-size:16px}.brand img{width:26px;height:26px}.sign-in{font-size:12px;padding:6px 10px;max-width:200px;white-space:normal;text-align:left}.project-title,nav,main,footer{margin-left:20px;margin-right:20px}.project-title{padding:21px 0}.project-title h1{font-size:20px}.project-title p{font-size:13px}.project-title img{width:38px;height:38px}main{padding-top:26px;padding-bottom:36px}.workspace{grid-template-columns:1fr;gap:32px}aside{border-left:0;border-top:1px solid var(--line);padding:23px 0 0}.form-bottom{align-items:flex-start;flex-direction:column;gap:14px}.form-bottom .primary{width:100%}.card{padding:18px}.poll-card h1{font-size:22px}.share-line{flex-wrap:wrap}.share-line input{flex-basis:100%}.actions{gap:8px}.actions .secondary{font-size:12px;padding:6px 10px}.list-poll{gap:16px}footer{font-size:11px;padding-top:20px}}
+:root {
+  color-scheme: light;
+  --ink: #182230;
+  --muted: #667085;
+  --line: #e4e7ec;
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --soft: #f8fafc;
+  --hover: #f2f4f7;
+  --border: #cbd2dc;
+  --strong-border: #98a2b3;
+  --placeholder: #767f8f;
+  --link: #2563eb;
+  --primary: #182230;
+  --primary-hover: #344054;
+  --primary-ink: #ffffff;
+  --accent: #d99a00;
+  --accent-soft: #fffcf0;
+  --danger: #b42318;
+  --focus: #3b82f6;
+  --focus-ring: #bfdbfe;
+  --shadow: 0 4px 20px #10182814;
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --ink: #e8edf5;
+  --muted: #a3afc2;
+  --line: #2c3545;
+  --bg: #11151d;
+  --surface: #181e29;
+  --soft: #171d27;
+  --hover: #232c3b;
+  --border: #414e63;
+  --strong-border: #75849b;
+  --placeholder: #92a0b5;
+  --link: #93b4ff;
+  --primary: #f5cf56;
+  --primary-hover: #ffdf80;
+  --primary-ink: #20200f;
+  --accent: #f5cf56;
+  --accent-soft: #2a271c;
+  --danger: #ff9b91;
+  --focus: #93b4ff;
+  --focus-ring: #344b70;
+  --shadow: 0 4px 24px #0005;
+}
+/* Respect system appearance even before JavaScript loads or if it is disabled. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --ink: #e8edf5; --muted: #a3afc2; --line: #2c3545;
+    --bg: #11151d; --surface: #181e29; --soft: #171d27; --hover: #232c3b;
+    --border: #414e63; --strong-border: #75849b; --placeholder: #92a0b5;
+    --link: #93b4ff; --primary: #f5cf56; --primary-hover: #ffdf80;
+    --primary-ink: #20200f; --accent: #f5cf56; --accent-soft: #2a271c;
+    --danger: #ff9b91; --focus: #93b4ff; --focus-ring: #344b70;
+    --shadow: 0 4px 24px #0005;
+  }
+}
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+a { color: inherit; text-decoration: none; }
+button, input, textarea, select { font: inherit; }
+button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
+button, select { cursor: pointer; }
+button:disabled { opacity: .5; cursor: not-allowed; }
+button[aria-busy="true"] { cursor: wait; }
+a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.skip-link { position: fixed; top: 8px; left: 16px; padding: 10px 16px; background: var(--primary); color: var(--primary-ink); border-radius: 6px; transform: translateY(-150%); z-index: 20; }
+.skip-link:focus { transform: translateY(0); }
+header { max-width: 1200px; margin: auto; min-height: 70px; display: flex; align-items: center; gap: 24px; padding: 16px 32px; }
+.brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 650; white-space: nowrap; }
+.brand img { width: 30px; height: 30px; object-fit: contain; }
+.header-description { font-size: 14px; color: var(--muted); }
+#account { margin-left: auto; min-width: 0; }
+.sign-in, .secondary, .primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 14px; line-height: 20px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink); font-weight: 500; font-size: 14px; white-space: nowrap; }
+.sign-in:hover, .secondary:hover { background: var(--hover); border-color: var(--strong-border); }
+.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
+.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
+.quiet { border: 0; background: none; padding: 7px 8px; color: var(--muted); border-radius: 5px; }
+.quiet:hover { color: var(--ink); background: var(--hover); }
+.page-header { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
+.project-title { max-width: 1136px; margin: auto; display: flex; align-items: center; gap: 14px; padding: 25px 0 22px; }
+.project-title img { width: 45px; height: 45px; object-fit: contain; }
+.project-title h1 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 0 0 4px; }
+.project-title p { margin: 0; color: var(--muted); }
+nav { max-width: 1136px; margin: auto; display: flex; gap: 24px; }
+.tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 1px 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
+.tab svg { width: 17px; height: 17px; }
+.tab:hover { color: var(--ink); }
+.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
+main { max-width: 1136px; margin: 0 auto; min-height: calc(100vh - 302px); padding: 32px 0 56px; }
+main:focus { outline: none; }
+.workspace { display: grid; grid-template-columns: minmax(0, 730px) minmax(220px, 1fr); gap: 56px; }
+.create-section { min-width: 0; }
+.section-heading { margin: 0 0 24px; }
+.section-heading h2, h2 { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 6px; }
+.section-heading p { margin: 0; color: var(--muted); }
+label { display: block; font-weight: 500; margin: 22px 0 8px; }
+label span[aria-hidden] { color: var(--muted); }
+small { font-size: 12px; color: var(--muted); font-weight: 400; }
+label small { margin-left: 8px; }
+input, textarea, select { display: block; width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; color: var(--ink); background: var(--surface); line-height: 1.5; min-width: 0; }
+input::placeholder, textarea::placeholder { color: var(--placeholder); }
+input:focus, textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus); }
+input[aria-invalid="true"] { border-color: var(--danger); }
+textarea { resize: vertical; min-height: 92px; }
+.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.label-row small { margin-top: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.option-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
+.option-index { width: 18px; flex-shrink: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
+.remove-option { display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); width: 36px; height: 38px; flex-shrink: 0; font-size: 21px; }
+.remove-option:hover:not(:disabled) { color: var(--danger); background: var(--hover); }
+.add-option { margin-top: 2px; margin-left: 28px; }
+.draft-row { min-height: 36px; margin: 12px 0 -12px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
+.draft-row .subtle { font-size: 12px; }
+.draft-row .quiet { font-size: 12px; }
+.poll-settings { border-top: 1px solid var(--line); margin-top: 24px; }
+.poll-settings select { max-width: 250px; }
+.poll-settings p { margin: 8px 0 0; }
+.listing-choice { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 6px; cursor: pointer; }
+.listing-choice input { width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--primary); }
+.listing-choice strong { font-size: 13px; font-weight: 500; }
+.listing-choice small { display: block; margin: 4px 0 0; line-height: 1.6; }
+.text-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
+.form-bottom { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 20px; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
+.form-bottom p { margin: 0; }
+.subtle { font-size: 13px; line-height: 1.6; color: var(--muted); }
+aside { border-left: 1px solid var(--line); padding-left: 28px; }
+aside h3 { font-size: 14px; font-weight: 600; margin: 0 0 9px; }
+aside p { font-size: 13px; color: var(--muted); margin: 0 0 27px; line-height: 1.7; }
+footer { border-top: 1px solid var(--line); max-width: 1136px; margin: auto; padding: 22px 0 28px; color: var(--muted); font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
+footer p { margin: 0; max-width: 720px; }
+.theme-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+.theme-control svg { width: 17px; height: 17px; }
+.theme-control label { margin: 0; font-size: 12px; font-weight: 400; }
+.theme-control select { width: auto; min-height: 36px; padding: 6px 28px 6px 10px; font-size: 12px; }
+#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); border: 1px solid var(--border); background: var(--surface); color: var(--ink); padding: 12px 18px; border-radius: 8px; max-width: calc(100vw - 32px); box-shadow: var(--shadow); z-index: 10; }
+.page-title { margin-bottom: 25px; }
+.page-title h1 { font-size: 22px; font-weight: 600; line-height: 1.4; margin: 0 0 7px; }
+.page-title p { margin: 0; }
+.card { border: 1px solid var(--line); border-radius: 10px; padding: 24px; background: var(--surface); }
+.poll-card { max-width: 760px; margin: 20px auto 0; }
+.poll-card h1 { font-size: 24px; font-weight: 600; line-height: 1.4; margin: 18px 0 8px; overflow-wrap: anywhere; }
+.description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; margin: 20px 0; }
+.tag { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); background: var(--soft); border-radius: 5px; white-space: nowrap; }
+.tag-open { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
+.share { background: var(--soft); border: 1px solid var(--line); border-radius: 7px; padding: 16px; margin: 24px 0; }
+.share label { margin: 0 0 8px; font-size: 13px; }
+.share-line { display: flex; gap: 8px; }
+.share-line input { font-size: 13px; }
+.poll-card .section-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 27px; margin-bottom: 5px; }
+.small-pill { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.result { margin: 20px 0; }
+.result-label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; overflow-wrap: anywhere; }
+.result-label b { font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
+.bar { height: 8px; background: var(--hover); border-radius: 4px; overflow: hidden; }
+.bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
+.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
+.danger, .error { color: var(--danger); }
+.vote-option { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: 7px; padding: 13px 14px; cursor: pointer; font-weight: 400; margin: 12px 0; overflow-wrap: anywhere; }
+.vote-option:hover { background: var(--hover); }
+.vote-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
+.vote-option input { width: 18px; height: 18px; flex-shrink: 0; padding: 0; accent-color: var(--accent); }
+.vote-divider { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
+.notice { font-size: 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 7px; padding: 15px; line-height: 1.7; margin-top: 24px; }
+.list-poll { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
+.list-poll:first-child { padding-top: 0; }
+.list-poll strong { display: block; font-weight: 500; margin-bottom: 5px; overflow-wrap: anywhere; }
+.list-poll:hover strong { color: var(--link); }
+.empty { padding: 48px 20px; text-align: center; }
+.empty h2 { font-size: 18px; }
+.empty .actions { justify-content: center; }
+.back { color: var(--muted); font-size: 13px; }
+.back:hover { color: var(--ink); }
+.poll-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.deadline { margin-top: 6px; }
+.share .subtle { margin-bottom: 0; }
+.browse-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
+.browse-filters { display: grid; grid-template-columns: minmax(0, 1fr) 180px 170px; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
+.browse-filters label { font-size: 13px; margin: 0 0 8px; }
+.search-line { display: flex; gap: 8px; }
+.search-line input { min-width: 0; }
+.browse-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 14px; min-height: 36px; }
+.browse-summary p { margin: 0; }
+.poll-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
+.browse-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 235px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
+.browse-card:hover { border-color: var(--strong-border); background: var(--soft); }
+.browse-card h2 { font-size: 17px; margin: 16px 0 8px; overflow-wrap: anywhere; }
+.browse-card:hover h2 { color: var(--link); }
+.browse-description { color: var(--muted); font-size: 13px; margin: 0 0 18px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.browse-card .card-meta { margin-top: auto; width: 100%; }
+.card-meta p { margin: 5px 0 0; overflow-wrap: anywhere; }
+.card-meta .deadline { font-size: 12px; }
+nav.pagination { max-width: none; margin: 28px 0 0; justify-content: center; align-items: center; gap: 16px; }
+@media (max-width: 1000px) {
+  .poll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .browse-filters { grid-template-columns: 1fr 1fr; }
+  .browse-search { grid-column: 1 / -1; }
+}
+@media (max-width: 1200px) {
+  .project-title, nav, main, footer { margin-left: 32px; margin-right: 32px; }
+}
+@media (max-width: 760px) {
+  header { padding: 14px 20px; min-height: 62px; gap: 10px; }
+  .header-description { display: none; }
+  .brand { font-size: 16px; }
+  .brand img { width: 26px; height: 26px; }
+  .sign-in { font-size: 12px; padding: 6px 10px; max-width: 200px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
+  .project-title, nav, main, footer { margin-left: 20px; margin-right: 20px; }
+  nav { gap: 12px; }
+  .tab { font-size: 13px; gap: 6px; white-space: nowrap; }
+  .tab svg { width: 16px; height: 16px; }
+  .project-title { padding: 21px 0; }
+  .project-title h1 { font-size: 20px; }
+  .project-title p { font-size: 13px; }
+  .project-title img { width: 38px; height: 38px; }
+  main { padding-top: 26px; padding-bottom: 36px; }
+  .workspace { grid-template-columns: 1fr; gap: 32px; }
+  aside { border-left: 0; border-top: 1px solid var(--line); padding: 23px 0 0; }
+  .form-bottom { align-items: flex-start; flex-direction: column; gap: 14px; }
+  .form-bottom .primary { width: 100%; }
+  input, textarea, select { font-size: 16px; }
+  .remove-option { width: 40px; height: 44px; }
+  .card { padding: 18px; }
+  .poll-card h1 { font-size: 22px; }
+  .share-line { flex-wrap: wrap; }
+  .share-line input { flex-basis: 100%; font-size: 16px; }
+  .actions .secondary { font-size: 12px; padding: 8px 10px; }
+  .list-poll { gap: 16px; }
+  footer { font-size: 11px; padding-top: 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
+  .theme-control select { font-size: 16px; }
+  .browse-title { align-items: flex-start; flex-direction: column; gap: 16px; }
+  .browse-filters { padding: 16px; gap: 14px 10px; }
+  .browse-filters select { padding-left: 8px; font-size: 14px; }
+  .browse-filters .search-line { flex-wrap: wrap; }
+  .browse-filters .search-line input { flex: 1 1 150px; }
+  .browse-summary { gap: 8px; }
+  .poll-grid { grid-template-columns: 1fr; gap: 14px; }
+  .browse-card { min-height: 0; padding: 20px; }
+  .browse-card .card-meta { margin-top: 8px; }
+  .poll-settings select { max-width: none; }
+}

static/theme.js

@@ -0,0 +1,38 @@
+// Run before the stylesheet so a saved theme is applied before the first paint.
+(() => {
+  const key = 'huggingpolls-theme';
+  const system = window.matchMedia('(prefers-color-scheme: dark)');
+  const valid = value => ['system', 'light', 'dark'].includes(value);
+  let preference = 'system';
+  try {
+    const saved = localStorage.getItem(key);
+    if (valid(saved)) preference = saved;
+  } catch { /* The system theme still works when browser storage is blocked. */ }
+
+  function apply() {
+    const theme = preference === 'system' ? (system.matches ? 'dark' : 'light') : preference;
+    document.documentElement.dataset.theme = theme;
+    document.querySelector('meta[name="theme-color"]').content = theme === 'dark' ? '#11151d' : '#ffffff';
+    const select = document.querySelector('#theme-select');
+    if (select) select.value = preference;
+    const status = document.querySelector('#theme-status');
+    if (status) status.textContent = `Using ${theme} appearance${preference === 'system' ? ' to match your system' : ''}.`;
+  }
+
+  apply();
+  system.addEventListener('change', apply);
+  window.addEventListener('storage', event => {
+    if (event.key === key || event.key === null) {
+      preference = valid(event.newValue) ? event.newValue : 'system';
+      apply();
+    }
+  });
+  document.addEventListener('DOMContentLoaded', () => {
+    apply();
+    document.querySelector('#theme-select').addEventListener('change', event => {
+      preference = event.target.value;
+      try { localStorage.setItem(key, preference); } catch {}
+      apply();
+    });
+  });
+})();

tests/test_polls.py

@@ -0,0 +1,160 @@
+import base64
+import importlib
+import json
+import os
+from pathlib import Path
+import tempfile
+import unittest
+from datetime import datetime, timedelta, timezone
+from unittest.mock import patch
+
+from fastapi.testclient import TestClient
+from itsdangerous import TimestampSigner
+
+
+class PollTests(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        cls.test_root = Path(__file__).resolve().parent
+        cls.data = tempfile.TemporaryDirectory(prefix='.test-data-', dir=cls.test_root)
+        environment = os.environ.copy()
+        for key in ['DATA_REPO', 'DATA_TOKEN', 'SPACE_HOST', 'OAUTH_CLIENT_ID', 'OAUTH_CLIENT_SECRET']:
+            environment.pop(key, None)
+        environment.update(DATA_DIR=cls.data.name, SESSION_SECRET='test-only-secret', BASE_URL='http://testserver')
+        with patch.dict(os.environ, environment, clear=True):
+            cls.module = importlib.import_module('app')
+
+    @classmethod
+    def tearDownClass(cls):
+        if not Path(cls.data.name).resolve().is_relative_to(cls.test_root):
+            raise RuntimeError('Test data must remain inside the tests directory')
+        cls.data.cleanup()
+
+    def setUp(self):
+        self.module.state.clear()
+        self.module.state.update(polls={})
+        self.at = datetime(2026, 10, 28, 12, tzinfo=timezone.utc)
+        self.clock = patch.object(self.module, 'utc_now', return_value=self.at).start()
+        self.addCleanup(patch.stopall)
+        self.owner = TestClient(self.module.app)
+        self.guest = TestClient(self.module.app)
+        self.addCleanup(self.owner.close)
+        self.addCleanup(self.guest.close)
+        session = base64.b64encode(json.dumps({'user': {'id': 'owner', 'name': 'Tester'}}).encode())
+        self.owner.cookies.set('session', TimestampSigner(self.module.SECRET).sign(session).decode())
+        self.headers = {'X-HuggingPolls': '1'}
+
+    def create(self, **overrides):
+        body = {'question': 'Favorite snack?', 'description': 'Choose for Friday.', 'options': ['Fruit', 'Cookies']}
+        body.update(overrides)
+        response = self.owner.post('/api/polls', json=body, headers=self.headers)
+        self.assertEqual(response.status_code, 200, response.text)
+        return response.json()['id']
+
+    def test_default_duration_and_public_summary(self):
+        poll_id = self.create()
+        poll = self.guest.get(f'/api/polls/{poll_id}').json()
+        self.assertEqual(datetime.fromisoformat(poll['expires_at']), self.at + timedelta(days=7))
+        self.assertTrue(poll['listed'])
+        self.assertFalse(poll['closed'])
+        self.assertIsNone(poll['results'])
+        summary = self.guest.get('/api/browse').json()['items'][0]
+        self.assertEqual(summary['id'], poll_id)
+        self.assertEqual(summary['option_count'], 2)
+        self.assertTrue({'votes', 'owner_id', 'options', 'results'}.isdisjoint(summary))
+
+    def test_expiry_boundary_enforces_votes_and_prevents_reopen(self):
+        poll_id = self.create(duration_hours=1)
+        original = self.module.path.read_bytes()
+        self.clock.return_value = self.at + timedelta(hours=1) - timedelta(microseconds=1)
+        self.assertFalse(self.guest.get(f'/api/polls/{poll_id}').json()['closed'])
+        self.clock.return_value = self.at + timedelta(hours=1)
+        response = self.guest.post(f'/api/polls/{poll_id}/vote', json={'choice': 0}, headers=self.headers)
+        self.assertEqual(response.status_code, 409)
+        self.assertIn('expired', response.json()['detail'])
+        poll = self.guest.get(f'/api/polls/{poll_id}').json()
+        self.assertTrue(poll['expired'])
+        self.assertTrue(poll['closed'])
+        self.assertEqual(poll['results'], [0, 0])
+        self.assertEqual(self.guest.get('/api/browse').json()['total'], 0)
+        self.assertEqual(self.guest.get('/api/browse?status=closed').json()['total'], 1)
+        self.assertTrue(self.owner.get('/api/polls').json()[0]['expired'])
+        response = self.owner.patch(f'/api/polls/{poll_id}', json={'closed': False}, headers=self.headers)
+        self.assertEqual(response.status_code, 409)
+        self.assertEqual(self.module.path.read_bytes(), original, 'Expiry reads must not write storage')
+        self.assertEqual(self.module.state['polls'][poll_id]['votes'], [])
+
+    def test_manual_close_and_reopen_before_expiry(self):
+        poll_id = self.create(duration_hours=24)
+        self.assertEqual(self.owner.patch(f'/api/polls/{poll_id}', json={'closed': True}, headers=self.headers).status_code, 200)
+        self.assertEqual(self.guest.post(f'/api/polls/{poll_id}/vote', json={'choice': 1}, headers=self.headers).status_code, 409)
+        self.assertEqual(self.guest.get(f'/api/polls/{poll_id}').json()['results'], [0, 0])
+        self.assertEqual(self.owner.patch(f'/api/polls/{poll_id}', json={'closed': False}, headers=self.headers).status_code, 200)
+        self.assertEqual(self.guest.post(f'/api/polls/{poll_id}/vote', json={'choice': 1}, headers=self.headers).status_code, 200)
+        self.assertEqual(self.guest.get(f'/api/polls/{poll_id}').json()['results'], [0, 1])
+
+    def test_unlisted_and_legacy_polls_do_not_leak_into_browse(self):
+        hidden_id = self.create(listed=False, question='Unlisted topic')
+        legacy_id = self.create(question='Old link-only poll')
+        legacy = self.module.state['polls'][legacy_id]
+        del legacy['listed']
+        del legacy['expires_at']
+        self.assertEqual(self.guest.get('/api/browse?status=all').json()['total'], 0)
+        self.assertEqual(self.guest.get('/api/browse?q=unlisted&status=all').json()['total'], 0)
+        self.assertEqual(self.guest.get(f'/api/polls/{hidden_id}').status_code, 200)
+        self.clock.return_value = self.at + timedelta(days=365)
+        self.assertFalse(self.guest.get(f'/api/polls/{legacy_id}').json()['expired'])
+        self.assertEqual(self.owner.patch(f'/api/polls/{legacy_id}', json={'listed': True}, headers=self.headers).status_code, 200)
+        self.assertEqual(self.guest.get('/api/browse').json()['items'][0]['id'], legacy_id)
+        self.assertEqual(self.owner.patch(f'/api/polls/{legacy_id}', json={'listed': False}, headers=self.headers).status_code, 200)
+        self.assertEqual(self.guest.get('/api/browse').json()['total'], 0)
+
+    def test_search_status_and_sorting(self):
+        first = self.create(question='A tea break', description='Community choice', duration_hours=24)
+        self.clock.return_value = self.at + timedelta(minutes=1)
+        popular = self.create(question='Coffee time', duration_hours=72)
+        self.clock.return_value = self.at + timedelta(minutes=2)
+        newest = self.create(question='Lunch menu', duration_hours=1)
+        self.guest.post(f'/api/polls/{popular}/vote', json={'choice': 0}, headers=self.headers)
+        self.assertEqual(self.guest.get('/api/browse?sort=newest').json()['items'][0]['id'], newest)
+        self.assertEqual(self.guest.get('/api/browse?sort=popular').json()['items'][0]['id'], popular)
+        self.assertEqual(self.guest.get('/api/browse?sort=ending').json()['items'][0]['id'], newest)
+        self.assertEqual(self.guest.get('/api/browse?q=COMMUNITY').json()['items'][0]['id'], first)
+        self.assertEqual(self.guest.get('/api/browse?q=Tester').json()['total'], 3)
+        self.owner.patch(f'/api/polls/{first}', json={'closed': True}, headers=self.headers)
+        self.assertEqual(self.guest.get('/api/browse').json()['total'], 2)
+        self.assertEqual(self.guest.get('/api/browse?status=closed').json()['items'][0]['id'], first)
+        self.assertEqual(self.guest.get('/api/browse?status=all').json()['total'], 3)
+
+    def test_pagination_and_empty_results(self):
+        for index in range(14):
+            self.clock.return_value = self.at + timedelta(seconds=index)
+            self.create(question=f'Community poll {index}')
+        first = self.guest.get('/api/browse').json()
+        second = self.guest.get('/api/browse?page=2').json()
+        self.assertEqual(first['total'], 14)
+        self.assertEqual(len(first['items']), 12)
+        self.assertEqual(len(second['items']), 2)
+        self.assertTrue({p['id'] for p in first['items']}.isdisjoint(p['id'] for p in second['items']))
+        self.assertEqual(self.guest.get('/api/browse?page=999').json()['page'], 2)
+        empty = self.guest.get('/api/browse?q=does-not-exist&page=2').json()
+        self.assertEqual(empty['page'], 1)
+        self.assertEqual(empty['items'], [])
+
+    def test_invalid_requests_and_owner_permissions(self):
+        for duration in [0, -1, 721]:
+            response = self.owner.post('/api/polls', json={'question': 'Q', 'options': ['A', 'B'], 'duration_hours': duration}, headers=self.headers)
+            self.assertEqual(response.status_code, 422)
+        for query in ['status=invalid', 'sort=invalid', 'page=0', 'q=' + 'x' * 241]:
+            self.assertEqual(self.guest.get('/api/browse?' + query).status_code, 422)
+        poll_id = self.create()
+        self.assertEqual(self.guest.patch(f'/api/polls/{poll_id}', json={'listed': False}, headers=self.headers).status_code, 401)
+        with TestClient(self.module.app) as other:
+            session = base64.b64encode(json.dumps({'user': {'id': 'other', 'name': 'Another user'}}).encode())
+            other.cookies.set('session', TimestampSigner(self.module.SECRET).sign(session).decode())
+            self.assertEqual(other.patch(f'/api/polls/{poll_id}', json={'listed': False}, headers=self.headers).status_code, 403)
+        self.assertEqual(self.owner.patch(f'/api/polls/{poll_id}', json={}, headers=self.headers).status_code, 422)
+
+
+if __name__ == '__main__':
+    unittest.main()