Component split, UI enhancement and Light, airy, generous whitespace. Sharp editorial typography using DM Sans + Playfair Display. Thin borders, subtle vote progress bars, clean status indicators. Nothing heavy.

feat: add proposed group solution
2026-03-31 13:37:01 +01:00 · 2026-03-29 21:24:42 +02:00
14 changed files with 2336 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
--- a/README.md
+++ b/README.md
@@ -1 +1,44 @@
 # P2P Poll App
+
+A peer-to-peer polling application where users create and vote on polls without any central server. All data syncs directly between browsers using WebRTC and CRDTs.
+
+## Features
+
+- **Real-time P2P sync** — poll options and votes sync instantly across all connected peers via WebRTC
+- **Collaborative poll title** — editable title that syncs between all participants
+- **One vote per user** — each peer gets a stable ID, enforcing one vote per person per option
+- **Vote/Unvote toggle** — change your mind anytime
+- **Connection status** — see when you're connected and how many peers are in the room
+- **Shareable polls** — share via URL with `?room=your-poll-name`
+- **No backend required** — runs entirely in the browser
+
+## Tech Stack
+
+- [Yjs](https://yjs.dev/) — CRDT library for conflict-free shared state
+- [y-webrtc](https://github.com/yjs/y-webrtc) — WebRTC provider for peer-to-peer connections
+- [Vite](https://vitejs.dev/) — Development server and build tool
+- Vanilla JavaScript — no framework dependencies
+
+## Getting Started
+
+```bash
+npm install
+npm run dev
+```
+
+Open `http://localhost:5173/?room=my-poll` in multiple browser tabs to test.
+
+To test across devices on the same network:
+
+```bash
+npm run dev -- --host
+```
+
+Then open the URL shown in the terminal on other devices.
+
+## How It Works
+
+1. Each browser tab creates a Yjs document and connects to other peers via WebRTC
+2. Poll options and votes are stored in Yjs shared data types (Y.Map)
+3. Changes propagate automatically to all connected peers using CRDTs
+4. A public signaling server handles peer discovery; all poll data flows directly between browsers
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Polly — P2P Polls</title>
+  <link rel="stylesheet" href="/src/style.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "p2p-poll",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "yjs": "^13.6.0",
+    "y-webrtc": "^10.3.0"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0"
+  }
+}
--- a/src/components/AddOption.js
+++ b/src/components/AddOption.js
@@ -0,0 +1,47 @@
+import { addOption } from '../utils/store.js';
+
+export function AddOption() {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'add-option-wrapper';
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.className = 'add-option-input';
+  input.placeholder = 'Add an option…';
+  input.maxLength = 100;
+  input.setAttribute('aria-label', 'New poll option');
+
+  const btn = document.createElement('button');
+  btn.className = 'add-option-btn';
+  btn.setAttribute('aria-label', 'Add option');
+
+  // Plus icon
+  btn.innerHTML = `
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
+    </svg>
+    <span>Add</span>
+  `;
+
+  wrapper.append(input, btn);
+
+  function submit() {
+    const name = input.value.trim();
+    if (!name) {
+      input.focus();
+      input.classList.add('shake');
+      input.addEventListener('animationend', () => input.classList.remove('shake'), { once: true });
+      return;
+    }
+    addOption(name);
+    input.value = '';
+    input.focus();
+  }
+
+  btn.addEventListener('click', submit);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') submit();
+  });
+
+  return wrapper;
+}
--- a/src/components/PollList.js
+++ b/src/components/PollList.js
@@ -0,0 +1,77 @@
+import { yOptions, getEntries, getTotalVotes  } from '../utils/store.js';
+import { PollOption } from './PollOption.js';
+
+export function PollList() {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'poll-list-wrapper';
+
+  const meta = document.createElement('div');
+  meta.className = 'poll-list-meta';
+
+  const list = document.createElement('div');
+  list.className = 'poll-list';
+
+  const empty = document.createElement('div');
+  empty.className = 'poll-list-empty';
+  empty.innerHTML = `
+    <div class="empty-icon">
+      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="4" y="10" width="24" height="3" rx="1.5" fill="currentColor" opacity="0.15"/>
+        <rect x="4" y="16" width="18" height="3" rx="1.5" fill="currentColor" opacity="0.1"/>
+        <rect x="4" y="22" width="21" height="3" rx="1.5" fill="currentColor" opacity="0.07"/>
+      </svg>
+    </div>
+    <p>No options yet — add the first one above.</p>
+  `;
+
+  wrapper.append(meta, list, empty);
+
+  function render() {
+    const entries = getEntries();
+    const total = getTotalVotes();
+
+    // Meta line
+    if (entries.length > 0) {
+      meta.textContent = `${entries.length} option${entries.length !== 1 ? 's' : ''} · ${total} vote${total !== 1 ? 's' : ''} total`;
+      meta.style.display = '';
+    } else {
+      meta.style.display = 'none';
+    }
+
+    // Empty state
+    empty.style.display = entries.length === 0 ? '' : 'none';
+
+    // Diff-render: reuse existing rows when possible
+    const existing = new Map(
+      [...list.querySelectorAll('.poll-option')].map((el) => [el.dataset.id, el])
+    );
+
+    // Remove stale rows
+    existing.forEach((el, id) => {
+      if (!entries.find((e) => e.id === id)) el.remove();
+    });
+
+    // Update or insert rows in sorted order
+    entries.forEach((entry, i) => {
+      const newEl = PollOption({ ...entry, totalVotes: total });
+      const currentEl = list.children[i];
+
+      if (!currentEl) {
+        list.appendChild(newEl);
+      } else if (currentEl.dataset.id !== entry.id) {
+        list.insertBefore(newEl, currentEl);
+        // Remove the now-displaced old element if it was this id
+        const old = existing.get(entry.id);
+        if (old && old !== currentEl) old.remove();
+      } else {
+        // Replace in-place so vote bar animation triggers
+        list.replaceChild(newEl, currentEl);
+      }
+    });
+  }
+
+  yOptions.observeDeep(() => render());
+  render();
+
+  return wrapper;
+}
--- a/src/components/PollOption.js
+++ b/src/components/PollOption.js
@@ -0,0 +1,44 @@
+import { toggleVote, deleteOption } from '../utils/store.js';
+
+/**
+ * @param {{ id: string, name: string, votes: number, voted: boolean, totalVotes: number }} entry
+ */
+export function PollOption({ id, name, votes, voted, totalVotes }) {
+  const row = document.createElement('div');
+  row.className = `poll-option${voted ? ' poll-option--voted' : ''}`;
+  row.dataset.id = id;
+
+  const pct = totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0;
+
+  row.innerHTML = `
+    <div class="poll-option__bar" style="width: ${pct}%"></div>
+    <div class="poll-option__content">
+      <span class="poll-option__name">${escapeHtml(name)}</span>
+      <div class="poll-option__actions">
+        <span class="poll-option__pct">${pct}%</span>
+        <span class="poll-option__count">${votes} vote${votes !== 1 ? 's' : ''}</span>
+        <button class="poll-option__vote-btn" aria-pressed="${voted}">
+          ${voted ? 'Voted' : 'Vote'}
+        </button>
+        <button class="poll-option__delete-btn" aria-label="Remove option">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `;
+
+  row.querySelector('.poll-option__vote-btn').addEventListener('click', () => toggleVote(id));
+  row.querySelector('.poll-option__delete-btn').addEventListener('click', () => deleteOption(id));
+
+  return row;
+}
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
--- a/src/components/PollTitle.js
+++ b/src/components/PollTitle.js
@@ -0,0 +1,34 @@
+import { ydoc, yTitle } from '../utils/store.js';
+
+export function PollTitle() {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'poll-title-wrapper';
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.id = 'poll-title';
+  input.className = 'poll-title-input';
+  input.placeholder = 'Untitled Poll';
+  input.maxLength = 120;
+  input.setAttribute('aria-label', 'Poll title');
+  input.value = yTitle.toString();
+
+  wrapper.appendChild(input);
+
+  // Sync from Yjs → input (only when not focused to avoid cursor jump)
+  yTitle.observe(() => {
+    if (document.activeElement !== input) {
+      input.value = yTitle.toString();
+    }
+  });
+
+  // Sync from input → Yjs
+  input.addEventListener('input', () => {
+    ydoc.transact(() => {
+      yTitle.delete(0, yTitle.length);
+      yTitle.insert(0, input.value);
+    });
+  });
+
+  return wrapper;
+}
--- a/src/components/ShareSection.js
+++ b/src/components/ShareSection.js
@@ -0,0 +1,38 @@
+import { roomName } from '../utils/store.js';
+
+export function ShareSection() {
+  const url = `${window.location.origin}${window.location.pathname}?room=${encodeURIComponent(roomName)}`;
+
+  const section = document.createElement('div');
+  section.className = 'share-section';
+
+  section.innerHTML = `
+    <p class="share-label">Share this poll</p>
+    <div class="share-row">
+      <code class="share-url" title="${url}">${url}</code>
+      <button class="share-copy-btn">Copy link</button>
+    </div>
+  `;
+
+  const copyBtn = section.querySelector('.share-copy-btn');
+
+  copyBtn.addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      copyBtn.textContent = 'Copied!';
+      copyBtn.classList.add('share-copy-btn--success');
+      setTimeout(() => {
+        copyBtn.textContent = 'Copy link';
+        copyBtn.classList.remove('share-copy-btn--success');
+      }, 2000);
+    } catch {
+      // Fallback: select the text
+      const range = document.createRange();
+      range.selectNode(section.querySelector('.share-url'));
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(range);
+    }
+  });
+
+  return section;
+}
--- a/src/components/StatusBar.js
+++ b/src/components/StatusBar.js
@@ -0,0 +1,50 @@
+import { provider } from '../utils/store.js';
+
+export function StatusBar() {
+  const el = document.createElement('div');
+  el.className = 'status-bar';
+
+  const dot = document.createElement('span');
+  dot.className = 'status-dot connecting';
+
+  const statusText = document.createElement('span');
+  statusText.className = 'status-text';
+  statusText.textContent = 'Connecting';
+
+  const divider = document.createElement('span');
+  divider.className = 'status-divider';
+  divider.textContent = '·';
+
+  const peerText = document.createElement('span');
+  peerText.className = 'status-peers';
+
+  el.append(dot, statusText, divider, peerText);
+
+  // --- Connection state ---
+
+  let syncTimeout = setTimeout(() => {
+    statusText.textContent = 'Ready';
+    dot.className = 'status-dot ready';
+  }, 3000);
+
+  provider.on('synced', ({ synced }) => {
+    clearTimeout(syncTimeout);
+    dot.className = `status-dot ${synced ? 'connected' : 'connecting'}`;
+    statusText.textContent = synced ? 'Connected' : 'Connecting';
+  });
+
+  // --- Peer count ---
+
+  function updatePeerCount() {
+    const total = provider.awareness.getStates().size;
+    const others = total - 1;
+    peerText.textContent = others === 0
+      ? 'Only you'
+      : `${others} other${others !== 1 ? 's' : ''}`;
+  }
+
+  provider.awareness.on('change', updatePeerCount);
+  updatePeerCount();
+
+  return el;
+}
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,41 @@
+import { StatusBar } from './components/StatusBar.js';
+import { PollTitle } from './components/PollTitle.js';
+import { AddOption } from './components/AddOption.js';
+import { PollList } from './components/PollList.js';
+import { ShareSection } from './components/ShareSection.js';
+
+const app = document.getElementById('app');
+
+// Header: logo + status
+const header = document.createElement('header');
+header.className = 'app-header';
+
+const wordmark = document.createElement('div');
+wordmark.className = 'app-wordmark';
+wordmark.innerHTML = `
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <rect x="2" y="4" width="16" height="2.5" rx="1.25" fill="currentColor"/>
+    <rect x="2" y="8.75" width="11" height="2.5" rx="1.25" fill="currentColor" opacity="0.6"/>
+    <rect x="2" y="13.5" width="13" height="2.5" rx="1.25" fill="currentColor" opacity="0.35"/>
+  </svg>
+  <span>Polly</span>
+`;
+
+header.append(wordmark, StatusBar());
+
+// Main card
+const card = document.createElement('main');
+card.className = 'app-card';
+
+card.append(
+  PollTitle(),
+  AddOption(),
+  PollList(),
+);
+
+// Footer
+const footer = document.createElement('footer');
+footer.className = 'app-footer';
+footer.appendChild(ShareSection());
+
+app.append(header, card, footer);
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,412 @@
+/* ── Fonts ─────────────────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@500&display=swap');
+
+/* ── Tokens ────────────────────────────────────────────── */
+:root {
+  --bg:            #F7F6F2;
+  --surface:       #FFFFFF;
+  --surface-hover: #FAFAF8;
+  --border:        #E8E5DF;
+  --border-focus:  #1A1A1A;
+
+  --text-primary:   #1A1A1A;
+  --text-secondary: #6B6860;
+  --text-muted:     #AAA79F;
+
+  --accent:         #1A1A1A;
+  --accent-text:    #FFFFFF;
+
+  --vote-bar:       rgba(26, 26, 26, 0.07);
+  --vote-bar-voted: rgba(26, 26, 26, 0.12);
+
+  --success:        #2D7D46;
+  --danger:         #C0392B;
+
+  --radius-sm:  6px;
+  --radius-md:  10px;
+  --radius-lg:  14px;
+
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body:    'DM Sans', system-ui, sans-serif;
+
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
+}
+
+/* ── Reset ─────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── Base ──────────────────────────────────────────────── */
+html { font-size: 16px; }
+
+body {
+  font-family: var(--font-body);
+  background: var(--bg);
+  color: var(--text-primary);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Layout ────────────────────────────────────────────── */
+#app {
+  max-width: 580px;
+  margin: 0 auto;
+  padding: 2rem 1.25rem 4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* ── Header ────────────────────────────────────────────── */
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.25rem;
+}
+
+.app-wordmark {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-display);
+  font-size: 1.1rem;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+/* ── Status bar ────────────────────────────────────────── */
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: background 0.3s;
+}
+
+.status-dot.connecting { background: var(--text-muted); }
+.status-dot.ready      { background: var(--text-muted); }
+.status-dot.connected  { background: var(--success); }
+
+.status-divider { color: var(--text-muted); }
+
+/* ── Card ──────────────────────────────────────────────── */
+.app-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+/* ── Poll Title ────────────────────────────────────────── */
+.poll-title-wrapper {
+  padding: 1.75rem 1.75rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.poll-title-input {
+  width: 100%;
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+}
+
+.poll-title-input::placeholder { color: var(--text-muted); }
+
+/* ── Add Option ────────────────────────────────────────── */
+.add-option-wrapper {
+  display: flex;
+  gap: 0.625rem;
+  padding: 1.25rem 1.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.add-option-input {
+  flex: 1;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  font-family: var(--font-body);
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.add-option-input::placeholder { color: var(--text-muted); }
+.add-option-input:focus { border-color: var(--border-focus); }
+
+.add-option-input.shake {
+  animation: shake 0.3s ease;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25%       { transform: translateX(-4px); }
+  75%       { transform: translateX(4px); }
+}
+
+.add-option-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2.5rem;
+  padding: 0 1rem;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--accent-text);
+  background: var(--accent);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: opacity 0.15s;
+  white-space: nowrap;
+}
+
+.add-option-btn:hover { opacity: 0.85; }
+.add-option-btn:active { opacity: 0.7; }
+
+/* ── Poll List ─────────────────────────────────────────── */
+.poll-list-wrapper {
+  padding: 0.5rem 0;
+}
+
+.poll-list-meta {
+  padding: 0.5rem 1.75rem 0.75rem;
+  font-size: 0.775rem;
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.poll-list-empty {
+  padding: 3rem 1.75rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.empty-icon {
+  margin-bottom: 0.75rem;
+  opacity: 0.6;
+}
+
+/* ── Poll Option ───────────────────────────────────────── */
+.poll-option {
+  position: relative;
+  overflow: hidden;
+  transition: background 0.15s;
+}
+
+.poll-option:hover {
+  background: var(--surface-hover);
+}
+
+.poll-option__bar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--vote-bar);
+  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+.poll-option--voted .poll-option__bar {
+  background: var(--vote-bar-voted);
+}
+
+.poll-option__content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1.75rem;
+}
+
+.poll-option__name {
+  flex: 1;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+.poll-option--voted .poll-option__name {
+  font-weight: 500;
+}
+
+.poll-option__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex-shrink: 0;
+}
+
+.poll-option__pct {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  min-width: 2.5rem;
+  text-align: right;
+}
+
+.poll-option__count {
+  font-size: 0.775rem;
+  color: var(--text-muted);
+  min-width: 3.5rem;
+}
+
+.poll-option__vote-btn {
+  height: 1.875rem;
+  padding: 0 0.875rem;
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+
+.poll-option__vote-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.poll-option--voted .poll-option__vote-btn {
+  background: var(--accent);
+  color: var(--accent-text);
+  border-color: var(--accent);
+}
+
+.poll-option--voted .poll-option__vote-btn:hover {
+  opacity: 0.8;
+}
+
+.poll-option__delete-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+
+.poll-option:hover .poll-option__delete-btn { opacity: 1; }
+.poll-option__delete-btn:hover {
+  color: var(--danger);
+  background: rgba(192, 57, 43, 0.07);
+}
+
+/* ── Footer ────────────────────────────────────────────── */
+.app-footer {
+  padding: 0 0.25rem;
+}
+
+/* ── Share Section ─────────────────────────────────────── */
+.share-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  padding: 1.25rem 1.5rem;
+}
+
+.share-label {
+  font-size: 0.775rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.625rem;
+}
+
+.share-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.share-url {
+  flex: 1;
+  font-family: 'DM Mono', 'Fira Mono', monospace;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  user-select: all;
+}
+
+.share-copy-btn {
+  height: 2rem;
+  padding: 0 0.875rem;
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.share-copy-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.share-copy-btn--success {
+  color: var(--success) !important;
+  border-color: var(--success) !important;
+}
+
+/* ── Responsive ────────────────────────────────────────── */
+@media (max-width: 480px) {
+  #app { padding: 1rem 0.75rem 3rem; }
+
+  .poll-title-wrapper  { padding: 1.25rem 1.25rem 1rem; }
+  .add-option-wrapper  { padding: 1rem 1.25rem; }
+  .poll-option__content { padding: 0.875rem 1.25rem; }
+  .poll-list-meta      { padding: 0.5rem 1.25rem 0.625rem; }
+  .poll-list-empty     { padding: 2.5rem 1.25rem; }
+
+  .poll-option__count  { display: none; }
+
+  .share-section { padding: 1rem 1.25rem; }
+}
--- a/src/utils/store.js
+++ b/src/utils/store.js
@@ -0,0 +1,79 @@
+import * as Y from 'yjs';
+import { WebrtcProvider } from 'y-webrtc';
+
+// --- Peer ID (stable across reloads) ---
+
+function getOrCreatePeerId() {
+  let id = localStorage.getItem('peer-id');
+  if (!id) {
+    id = crypto.randomUUID();
+    localStorage.setItem('peer-id', id);
+  }
+  return id;
+}
+
+// --- Room name from URL ---
+
+function getRoomName() {
+  const params = new URLSearchParams(window.location.search);
+  return params.get('room') || 'default-poll';
+}
+
+// --- Yjs setup ---
+
+export const peerId = getOrCreatePeerId();
+export const roomName = getRoomName();
+
+export const ydoc = new Y.Doc();
+export const provider = new WebrtcProvider(roomName, ydoc);
+export const yOptions = ydoc.getMap('poll-options');
+export const yTitle = ydoc.getText('poll-title');
+
+// --- Data operations ---
+
+export function addOption(name) {
+  const id = crypto.randomUUID();
+  const optionMap = new Y.Map();
+  optionMap.set('name', name);
+  optionMap.set('votes', new Y.Map());
+  yOptions.set(id, optionMap);
+}
+
+export function toggleVote(optionId) {
+  const optionMap = yOptions.get(optionId);
+  if (!optionMap) return;
+  const votes = optionMap.get('votes');
+  if (votes.has(peerId)) {
+    votes.delete(peerId);
+  } else {
+    votes.set(peerId, true);
+  }
+}
+
+export function deleteOption(optionId) {
+  yOptions.delete(optionId);
+}
+
+// --- Derived read helpers ---
+
+export function getEntries() {
+  const entries = [];
+  yOptions.forEach((optionMap, id) => {
+    entries.push({
+      id,
+      name: optionMap.get('name'),
+      votes: optionMap.get('votes').size,
+      voted: optionMap.get('votes').has(peerId),
+    });
+  });
+  entries.sort((a, b) => b.votes - a.votes || a.name.localeCompare(b.name));
+  return entries;
+}
+
+export function getTotalVotes() {
+  let total = 0;
+  yOptions.forEach((optionMap) => {
+    total += optionMap.get('votes').size;
+  });
+  return total;
+}
Author	SHA1	Message	Date
Peter Thomas	d34db87df3	Component split, UI enhancement and Light, airy, generous whitespace. Sharp editorial typography using DM Sans + Playfair Display. Thin borders, subtle vote progress bars, clean status indicators. Nothing heavy.	2026-03-31 13:37:01 +01:00
Patrick Charrier	2462872e24	feat: add proposed group solution	2026-03-29 21:24:42 +02:00