add proposal

test push works
2026-03-18 21:28:06 +01:00 · 2026-03-18 21:08:47 +01:00
15 changed files with 2582 additions and 204 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
 node_modules
 dist
 .DS_Store
--- a/MVP_PLAN.md
+++ b/MVP_PLAN.md
@@ -0,0 +1,310 @@
 # Minimal MVP Plan: P2P Poll App
 ## Recommendation
 Build the MVP with:
 - Vanilla JS or TypeScript
 - Vite for local dev/build
 - Yjs for shared state
 - `y-webrtc` for browser-to-browser sync
 - `y-indexeddb` for local persistence/offline recovery
 This is the best fit for a small poll app because the data model is tiny, concurrent edits are possible, and Yjs already solves merge/conflict handling while `y-webrtc` gives a direct P2P transport with only signaling infrastructure.
 ## Why This Stack
 ### Recommended: Yjs + y-webrtc
 - Best balance of simplicity and correctness
 - Clients connect directly over WebRTC
 - No custom conflict-resolution logic needed
 - Easy to add offline persistence
 - Good fit for a single shared document/room
 ### Not recommended for the first MVP
 #### PeerJS
 - Very simple transport layer
 - But you must design and maintain your own replication and merge rules
 - Fine for demos with a host-authoritative peer, weaker for true collaborative editing
 #### GUN
 - Fast to prototype realtime shared state
 - But official tutorials commonly use a GUN peer/relay server for shared data
 - For this app, its data model is less explicit than a CRDT and gives less control over vote semantics
 #### Automerge
 - Very capable CRDT and local-first model
 - But heavier than needed for a single small poll
 - Better choice if the project is expected to evolve into a richer collaborative app
 ## MVP Scope
 Ship exactly one shared poll per room.
 Included:
 - Join a poll by opening a shared URL
 - Add a new option
 - Vote for one option
 - Change your vote
 - Realtime updates across peers
 - Local persistence in the browser
 - Basic connection status UI
 Excluded:
 - User accounts
 - Multiple polls per room
 - Option deletion/editing
 - Authentication/authorization
 - Rich presence
 - Advanced discovery
 - Production-grade TURN/signaling deployment
 ## MVP UX
 Keep the interface intentionally small:
 - Poll title at the top
 - Option list with vote counts
 - One button per option to cast vote
 - Small form to add an option
 - Status line showing `connecting`, `connected`, or `offline`
 - Small label showing which option you voted for
 Join model:
 - Room ID in the URL, e.g. `/?room=poll-demo`
 - Users share the URL manually
 Identity model:
 - Generate a local `userId` once and store it in `localStorage`
 - Optional local display name, also stored locally
 ## Shared Data Model
 Use a single Yjs document per room.
 Suggested structure:
 - `poll` as a `Y.Map`
 - `poll.title` as a string
 - `poll.options` as a `Y.Map<optionId, Y.Map>`
 - `poll.votes` as a `Y.Map<userId, optionId>`
 Each option record:
 - `id`
 - `label`
 - `createdBy`
 - `createdAt`
 Important design choice:
 Do not store vote counters as mutable shared numbers for the MVP.
 Instead, derive counts from `votes`.
 Why:
 - A user changing vote becomes a single write: `votes[userId] = optionId`
 - No double-counting logic
 - Concurrent writes are easier to reason about
 - Rendering counts from `votes` is trivial at this scale
 ## Sync Model
 ### Networking
 - Use `WebrtcProvider(roomId, ydoc)`
 - Start with the default public signaling servers for local development
 - If needed, swap to a self-hosted signaling server later without changing the app model
 ### Persistence
 - Use `IndexeddbPersistence(roomId, ydoc)`
 - This preserves state across reloads and helps when reconnecting after temporary disconnects
 ### Conflict behavior
 - Concurrent option additions merge naturally
 - Concurrent vote changes resolve at the per-user key level
 - Tally is recalculated from the merged vote map
 ## Suggested Project Structure
 ```text
 src/
  main.ts
  app.ts
  state.ts
  sync.ts
  render.ts
  identity.ts
  styles.css
 index.html
 ```
 Responsibilities:
 - `sync.ts`: create Yjs doc, WebRTC provider, IndexedDB provider
 - `state.ts`: shared structures, add option, cast vote, selectors
 - `identity.ts`: local `userId` and optional name
 - `render.ts`: DOM updates
 - `app.ts`: wire events to state and rendering
 ## Implementation Plan
 ### Phase 1: App shell
 - Create Vite app with vanilla TS or JS
 - Add a minimal single-page UI
 - Parse `room` from the URL
 - Generate and persist `userId`
 Success check:
 - App loads
 - Room ID appears in UI
 - User can type in the form
 ### Phase 2: Shared state
 - Add Yjs document
 - Create root shared maps
 - Seed default poll title if missing
 - Observe document updates and re-render UI
 Success check:
 - State exists in one browser tab
 - Refresh keeps local state when IndexedDB is enabled
 ### Phase 3: P2P sync
 - Add `y-webrtc`
 - Join room based on URL room ID
 - Show connection status from provider events
 Success check:
 - Two browsers on different tabs/devices see the same options
 - New options appear in near real time
 ### Phase 4: Voting logic
 - Implement `castVote(optionId)` as `votes.set(userId, optionId)`
 - Derive tallies from `votes`
 - Highlight the local user’s current vote
 Success check:
 - Votes update live across peers
 - Changing vote updates counts correctly
 ### Phase 5: Basic hardening
 - Trim/validate option labels
 - Prevent empty options
 - Ignore duplicate labels case-insensitively for MVP
 - Show simple offline/connecting text
 Success check:
 - Basic misuse does not break the UI
 - Reconnect restores updates
 ## Minimal API Surface
 These functions are enough for the first build:
 - `getRoomId(): string`
 - `getUserId(): string`
 - `initSync(roomId): AppSync`
 - `ensurePollInitialized()`
 - `addOption(label: string)`
 - `castVote(optionId: string)`
 - `getViewModel(): PollViewModel`
 - `render(viewModel)`
 ## Risks And MVP Mitigations
 ### NAT / WebRTC connectivity
 Risk:
 - Some peer pairs may fail to connect in restrictive networks
 Mitigation:
 - Accept this for MVP
 - Keep signaling configurable
 - Add TURN only if testing shows frequent failures
 ### Small public signaling dependency
 Risk:
 - Public signaling is fine for demos, not ideal for production
 Mitigation:
 - Treat it as replaceable infrastructure
 - Self-host later if the prototype is kept
 ### Duplicate or messy options
 Risk:
 - Users may add near-duplicate entries
 Mitigation:
 - Normalize labels
 - Prevent exact duplicates for MVP
 ### No trust/auth model
 Risk:
 - Any participant in the room can add options and vote
 Mitigation:
 - Accept for MVP
 - Frame rooms as small trusted groups
 ## Estimated MVP Size
 For one developer:
 - Initial prototype: 0.5 to 1 day
 - Polished MVP with basic resilience: 1 to 2 days
 Rough code size:
 - 250 to 500 lines plus styles
 ## Nice Next Steps After MVP
 - Copy-link button
 - Participant list / presence
 - Vote limit modes: single-choice or multi-choice
 - Option editing/deletion
 - QR code for room join
 - Self-hosted signaling server
 - PWA packaging for better offline behavior
 ## Sources
 - PeerJS getting started: https://peerjs.com/client/getting-started
 - Yjs collaborative editor guide: https://docs.yjs.dev/getting-started/a-collaborative-editor
 - Yjs offline support: https://docs.yjs.dev/getting-started/allowing-offline-editing
 - y-webrtc README: https://github.com/yjs/y-webrtc
 - GUN tutorial showing shared data via a GUN peer: https://gun.eco/converse
 - Automerge network sync: https://automerge.org/docs/tutorial/network-sync/
--- a/PollingApp.html
+++ b/PollingApp.html
@@ -1,200 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Peer‑to‑Peer Poll – up to 14 users (no vote loops)</title>
 <style>
  body {font-family:Arial,Helvetica,sans-serif; margin:20px;}
  #options li {margin:5px 0;}
  button {margin-left:5px;}
 </style>
 </head>
 <body>
 <h2>Peer‑to‑Peer Poll (max 14 participants)</h2>
 <div id="setup">
  <label>Your Peer ID: <input id="myId" readonly size="30"></label><br><br>
  <label>Room host ID (leave empty if you are the first client):
    <input id="hostId" placeholder="host peer id">
  </label>
  <button id="joinBtn">Join / Create Room</button>
  <p id="status"></p>
 </div>
 <hr>
 <h3>Poll</h3>
 <ul id="options"></ul>
 <input id="newOption" placeholder="New option text">
 <button id="addOptionBtn">Add option</button>
 <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
 <script>
 /* ---------- 1. Initialise PeerJS ---------- */
 const peer = new Peer();                     // public signalling server
 const myIdInput = document.getElementById('myId');
 const statusEl   = document.getElementById('status');
 let isHost = false;                          // true for the first client
 let connections = [];                        // all open DataConnections
 let knownPeers = new Set();                  // IDs of every peer we know (including host)
 peer.on('open', id => {
  myIdInput.value = id;
  statusEl.textContent = 'Enter a host ID (or leave empty) and click Join.';
 });
 /* ---------- 2. Accept incoming connections (host side) ---------- */
 peer.on('connection', incoming => {
  registerConnection(incoming);
 });
 /* ---------- 3. Join / create a room ---------- */
 document.getElementById('joinBtn').onclick = () => {
  const hostId = document.getElementById('hostId').value.trim();
  if (hostId) {
    isHost = false;
    connectToPeer(hostId);
    statusEl.textContent = `Connecting to host ${hostId}…`;
  } else {
    isHost = true;
    knownPeers.add(peer.id);
    statusEl.textContent = 'Room created – share this Peer ID with others.';
  }
 };
 /* ---------- 4. Helper: connect to a remote peer ---------- */
 function connectToPeer(peerId) {
  if (knownPeers.has(peerId)) return;
  const conn = peer.connect(peerId);
  registerConnection(conn);
 }
 /* ---------- 5. Register a DataConnection ---------- */
 function registerConnection(conn) {
  if (!conn) return;
  connections.push(conn);
  knownPeers.add(conn.peer);
  conn.on('open', () => {
    // 1️⃣ Send full poll state
    conn.send({type: 'full', payload: poll, msgId: crypto.randomUUID()});
    // 2️⃣ If we are the host, tell the newcomer about other peers
    if (isHost) {
      const others = Array.from(knownPeers).filter(id => id !== conn.peer && id !== peer.id);
      if (others.length) conn.send({type: 'peer-list', payload: others, msgId: crypto.randomUUID()});
    }
  });
  conn.on('data', data => handleMessage(data, conn.peer));
  conn.on('close', () => {
    connections = connections.filter(c => c !== conn);
    knownPeers.delete(conn.peer);
  });
 }
 /* ---------- 6. Shared poll state ---------- */
 let poll = {options: []};   // each option: {id, text, votes}
 /* ---------- 7. Track my own votes ---------- */
 const myVotes = new Set();   // option.id values
 /* ---------- 8. Remember which messages we already processed ---------- */
 const seenMsgIds = new Set();
 /* ---------- 9. Broadcast helper (skip the sender) ---------- */
 function broadcast(msg, except = null) {
  connections.forEach(c => {
    if (c.open && c.peer !== except) c.send(msg);
  });
 }
 /* ---------- 10. Message handling ---------- */
 function handleMessage(msg, senderId) {
  // Ignore duplicates
  if (seenMsgIds.has(msg.msgId)) return;
  seenMsgIds.add(msg.msgId);
  switch (msg.type) {
    case 'full':
      poll = msg.payload;
      render();
      break;
    case 'add':
      poll.options.push(msg.payload);
      render();
      broadcast(msg, senderId);   // forward once
      break;
    case 'vote':
      const opt = poll.options.find(o => o.id === msg.payload.id);
      if (opt) opt.votes++;
      render();
      broadcast(msg, senderId);
      break;
    case 'peer-list':
      msg.payload.forEach(id => {
        if (id !== peer.id && !knownPeers.has(id)) connectToPeer(id);
      });
      break;
  }
 }
 /* ---------- 11. UI rendering ---------- */
 function render() {
  const ul = document.getElementById('options');
  ul.innerHTML = '';
  poll.options.forEach(opt => {
    const li = document.createElement('li');
    li.textContent = `${opt.text} – ${opt.votes} vote(s)`;
    const btn = document.createElement('button');
    btn.textContent = myVotes.has(opt.id) ? 'Voted' : 'Vote';
    btn.disabled = myVotes.has(opt.id);
    btn.onclick = () => {
      // Record locally – prevents double‑click on the same client
      myVotes.add(opt.id);
      btn.textContent = 'Voted';
      btn.disabled = true;
      const voteMsg = {
        type: 'vote',
        payload: {id: opt.id},
        msgId: crypto.randomUUID()
      };
      // Apply locally first
      opt.votes++;
      render();
      // Send to all peers
      broadcast(voteMsg);
    };
    li.appendChild(btn);
    ul.appendChild(li);
  });
 }
 /* ---------- 12. Add new option ---------- */
 document.getElementById('addOptionBtn').onclick = () => {
  const txt = document.getElementById('newOption').value.trim();
  if (!txt) return;
  const option = {id: crypto.randomUUID(), text: txt, votes: 0};
  poll.options.push(option);
  render();
  const addMsg = {
    type: 'add',
    payload: option,
    msgId: crypto.randomUUID()
  };
  broadcast(addMsg);
  document.getElementById('newOption').value = '';
 };
 </script>
 </body>
 </html>
--- a/README.md
+++ b/README.md
@@ -1,7 +1,39 @@
 # P2P Poll App
-This is a very simple polling app using peerjs.
+Small peer-to-peer polling app built with `Vite`, `TypeScript`, `Yjs`, `y-webrtc`, and `y-indexeddb`.
 It runs as a single HTML file and can handle multiple users in one poll room.
 The app once open is self explanatory.
 App created with the help of GPTOSS120B.
 ## Features
 - single shared poll per room
 - add options collaboratively
 - one vote per user, changeable at any time
 - peer-to-peer sync over WebRTC
 - local browser persistence for refresh/reconnect recovery
 - shareable room URL
 ## Run locally
 ```bash
 npm install
 npm run dev
 ```
 Open the local URL in two tabs or browsers and use the same `?room=` query string to join the same poll.
 Example:
 ```text
 http://localhost:5173/?room=poll-demo
 ```
 ## Build
 ```bash
 npm run build
 ```
 ## Notes
 - The app uses public signaling through `y-webrtc` for MVP simplicity.
 - Poll state is not stored on an application server.
 - WebRTC connectivity can still depend on the network environment of the participating peers.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>P2P Poll</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,20 @@
 {
  "name": "p2p-poll-app",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "y-indexeddb": "^9.0.12",
    "y-webrtc": "^10.3.0",
    "yjs": "^13.6.27"
  },
  "devDependencies": {
    "typescript": "^5.9.2",
    "vite": "^7.1.5"
  }
 }
--- a/src/app.ts
+++ b/src/app.ts
@@ -0,0 +1,107 @@
 import { getUserId } from "./identity";
 import { renderApp } from "./render";
 import { addOption, castVote, createViewModel } from "./state";
 import { initSync } from "./sync";
 const ROOM_PARAM = "room";
 function createRoomId() {
  const seed = typeof crypto.randomUUID === "function"
    ? crypto.randomUUID().slice(0, 8)
    : Math.random().toString(36).slice(2, 10);
  return `poll-${seed}`;
 }
 function ensureRoomId() {
  const url = new URL(window.location.href);
  let roomId = url.searchParams.get(ROOM_PARAM)?.trim();
  if (!roomId) {
    roomId = createRoomId();
    url.searchParams.set(ROOM_PARAM, roomId);
    window.history.replaceState({}, "", url);
  }
  return roomId;
 }
 export function initApp(container: HTMLElement) {
  const roomId = ensureRoomId();
  const userId = getUserId();
  const sync = initSync(roomId);
  let feedbackMessage = "Ready to collaborate.";
  let feedbackTimer: number | undefined;
  const setFeedbackMessage = (message: string) => {
    feedbackMessage = message;
    render();
    if (feedbackTimer) {
      window.clearTimeout(feedbackTimer);
    }
    feedbackTimer = window.setTimeout(() => {
      feedbackMessage = "Ready to collaborate.";
      render();
    }, 2400);
  };
  const render = () => {
    const viewModel = createViewModel({
      meta: sync.meta,
      options: sync.options,
      votes: sync.votes,
      roomId,
      shareUrl: window.location.href,
      connectionStatus: sync.getConnectionStatus(),
      userId,
    });
    renderApp(container, viewModel, feedbackMessage, {
      onSubmitOption: (label) => {
        const result = addOption(sync.options, label, userId);
        if (!result.ok) {
          setFeedbackMessage(result.error);
          return;
        }
        setFeedbackMessage("Option added and syncing.");
      },
      onVote: (optionId) => {
        castVote(sync.votes, userId, optionId);
        setFeedbackMessage("Vote updated.");
      },
      onCopyLink: async () => {
        try {
          await navigator.clipboard.writeText(window.location.href);
          setFeedbackMessage("Room link copied.");
        } catch {
          setFeedbackMessage("Could not copy the link in this browser.");
        }
      },
    });
  };
  const rerender = () => render();
  const observe = () => rerender();
  sync.doc.on("update", observe);
  sync.persistence.once("synced", rerender);
  sync.provider.on("status", rerender);
  window.addEventListener("online", rerender);
  window.addEventListener("offline", rerender);
  render();
  return () => {
    if (feedbackTimer) {
      window.clearTimeout(feedbackTimer);
    }
    sync.doc.off("update", observe);
    sync.provider.off("status", rerender);
    window.removeEventListener("online", rerender);
    window.removeEventListener("offline", rerender);
    sync.destroy();
  };
 }
--- a/src/identity.ts
+++ b/src/identity.ts
@@ -0,0 +1,20 @@
 const USER_ID_KEY = "p2p-poll:user-id";
 function createUserId() {
  if (typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  return `user-${Math.random().toString(36).slice(2, 10)}`;
 }
 export function getUserId() {
  const existing = localStorage.getItem(USER_ID_KEY);
  if (existing) {
    return existing;
  }
  const next = createUserId();
  localStorage.setItem(USER_ID_KEY, next);
  return next;
 }
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,11 @@
 import "./styles.css";
 import { initApp } from "./app";
 const container = document.querySelector<HTMLElement>("#app");
 if (!container) {
  throw new Error("App container not found.");
 }
 initApp(container);
--- a/src/render.ts
+++ b/src/render.ts
@@ -0,0 +1,131 @@
 import type { PollViewModel } from "./state";
 interface RenderActions {
  onSubmitOption: (label: string) => void;
  onVote: (optionId: string) => void;
  onCopyLink: () => void;
 }
 function escapeHtml(value: string) {
  return value
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
 }
 export function renderApp(
  container: HTMLElement,
  viewModel: PollViewModel,
  feedbackMessage: string,
  actions: RenderActions,
 ) {
  const optionMarkup = viewModel.options.length
    ? viewModel.options
        .map((option) => {
          const buttonLabel = option.isSelectedByMe ? "Selected" : "Vote";
          const selectedClass = option.isSelectedByMe ? "option-card selected" : "option-card";
          return `
            <li class="${selectedClass}">
              <div class="option-main">
                <div>
                  <p class="option-label">${escapeHtml(option.label)}</p>
                  <p class="option-meta">${option.voteCount} vote${option.voteCount === 1 ? "" : "s"}</p>
                </div>
                <button class="vote-button" data-option-id="${option.id}">
                  ${buttonLabel}
                </button>
              </div>
            </li>
          `;
        })
        .join("")
    : `
      <li class="empty-state">
        No options yet. Add the first one and it will sync to everyone in this room.
      </li>
    `;
  const statusClass = `status-pill ${viewModel.connectionStatus}`;
  const myVoteLabel = viewModel.myVoteOptionId
    ? "Your vote is currently synced."
    : "You have not voted yet.";
  container.innerHTML = `
    <main class="shell">
      <section class="hero">
        <div class="hero-copy">
          <p class="eyebrow">Peer-to-peer room</p>
          <h1>${escapeHtml(viewModel.title)}</h1>
          <p class="hero-text">
            Share the room link, add options, and vote live without a central app server storing poll state.
          </p>
        </div>
        <div class="hero-meta">
          <span class="${statusClass}">${viewModel.connectionStatus}</span>
          <p class="room-label">Room: <code>${escapeHtml(viewModel.roomId)}</code></p>
        </div>
      </section>
      <section class="panel share-panel">
        <label class="field-label" for="share-url">Share this room</label>
        <div class="share-row">
          <input id="share-url" class="share-input" type="text" readonly value="${escapeHtml(viewModel.shareUrl)}" />
          <button id="copy-link-button" class="secondary-button" type="button">Copy link</button>
        </div>
      </section>
      <section class="panel">
        <div class="section-header">
          <div>
            <h2>Options</h2>
            <p>${myVoteLabel}</p>
          </div>
        </div>
        <ul class="options-list">${optionMarkup}</ul>
      </section>
      <section class="panel">
        <h2>Add an option</h2>
        <form id="add-option-form" class="option-form">
          <input
            id="option-input"
            name="option"
            type="text"
            maxlength="80"
            placeholder="Add an option"
            autocomplete="off"
            required
          />
          <button class="primary-button" type="submit">Add option</button>
        </form>
        <p class="feedback" aria-live="polite">${escapeHtml(feedbackMessage)}</p>
      </section>
    </main>
  `;
  const addOptionForm = container.querySelector<HTMLFormElement>("#add-option-form");
  const optionInput = container.querySelector<HTMLInputElement>("#option-input");
  const copyLinkButton = container.querySelector<HTMLButtonElement>("#copy-link-button");
  addOptionForm?.addEventListener("submit", (event) => {
    event.preventDefault();
    const label = optionInput?.value ?? "";
    actions.onSubmitOption(label);
  });
  copyLinkButton?.addEventListener("click", () => {
    actions.onCopyLink();
  });
  container.querySelectorAll<HTMLButtonElement>("[data-option-id]").forEach((button) => {
    button.addEventListener("click", () => {
      const optionId = button.dataset.optionId;
      if (optionId) {
        actions.onVote(optionId);
      }
    });
  });
 }
--- a/src/state.ts
+++ b/src/state.ts
@@ -0,0 +1,124 @@
 import * as Y from "yjs";
 export const DEFAULT_POLL_TITLE = "Shared Poll";
 export type ConnectionStatus = "connecting" | "connected" | "offline";
 export interface OptionRecord {
  id: string;
  label: string;
  createdAt: number;
  createdBy: string;
 }
 export interface PollOptionViewModel extends OptionRecord {
  voteCount: number;
  isSelectedByMe: boolean;
 }
 export interface PollViewModel {
  title: string;
  roomId: string;
  shareUrl: string;
  connectionStatus: ConnectionStatus;
  options: PollOptionViewModel[];
  myVoteOptionId: string | null;
 }
 const META_KEY_TITLE = "title";
 function createOptionId() {
  if (typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  return `option-${Math.random().toString(36).slice(2, 10)}`;
 }
 function normalizeLabel(label: string) {
  return label.trim().replace(/\s+/g, " ");
 }
 function getPollTitle(meta: Y.Map<string>) {
  return meta.get(META_KEY_TITLE) ?? DEFAULT_POLL_TITLE;
 }
 export function ensurePollInitialized(meta: Y.Map<string>) {
  if (!meta.has(META_KEY_TITLE)) {
    meta.set(META_KEY_TITLE, DEFAULT_POLL_TITLE);
  }
 }
 export function addOption(
  options: Y.Map<OptionRecord>,
  rawLabel: string,
  userId: string,
 ) {
  const label = normalizeLabel(rawLabel);
  if (!label) {
    return { ok: false as const, error: "Option label cannot be empty." };
  }
  const normalizedTarget = label.toLocaleLowerCase();
  const duplicate = Array.from(options.values()).some(
    (option) => option.label.trim().toLocaleLowerCase() === normalizedTarget,
  );
  if (duplicate) {
    return { ok: false as const, error: "That option already exists." };
  }
  const option: OptionRecord = {
    id: createOptionId(),
    label,
    createdAt: Date.now(),
    createdBy: userId,
  };
  options.set(option.id, option);
  return { ok: true as const, optionId: option.id };
 }
 export function castVote(votes: Y.Map<string>, userId: string, optionId: string) {
  votes.set(userId, optionId);
 }
 export function createViewModel(params: {
  meta: Y.Map<string>;
  options: Y.Map<OptionRecord>;
  votes: Y.Map<string>;
  roomId: string;
  shareUrl: string;
  connectionStatus: ConnectionStatus;
  userId: string;
 }): PollViewModel {
  const { meta, options, votes, roomId, shareUrl, connectionStatus, userId } =
    params;
  const tally = new Map<string, number>();
  for (const optionId of votes.values()) {
    tally.set(optionId, (tally.get(optionId) ?? 0) + 1);
  }
  const myVoteOptionId = votes.get(userId) ?? null;
  const sortedOptions = Array.from(options.values()).sort((left, right) => {
    if (left.createdAt !== right.createdAt) {
      return left.createdAt - right.createdAt;
    }
    return left.label.localeCompare(right.label);
  });
  return {
    title: getPollTitle(meta),
    roomId,
    shareUrl,
    connectionStatus,
    myVoteOptionId,
    options: sortedOptions.map((option) => ({
      ...option,
      voteCount: tally.get(option.id) ?? 0,
      isSelectedByMe: myVoteOptionId === option.id,
    })),
  };
 }
--- a/src/styles.css
+++ b/src/styles.css
@@ -0,0 +1,256 @@
 :root {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: #132238;
  background:
    radial-gradient(circle at top left, rgba(255, 190, 120, 0.55), transparent 28%),
    radial-gradient(circle at top right, rgba(86, 201, 166, 0.3), transparent 24%),
    linear-gradient(180deg, #f9f4e8 0%, #f4efe6 48%, #ece5d8 100%);
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light;
 }
 * {
  box-sizing: border-box;
 }
 body {
  margin: 0;
  min-height: 100vh;
 }
 button,
 input {
  font: inherit;
 }
 button {
  cursor: pointer;
 }
 #app {
  min-height: 100vh;
 }
 .shell {
  width: min(920px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 3rem;
 }
 .hero {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
 }
 .hero-copy h1 {
  margin: 0.15rem 0 0.5rem;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
 }
 .hero-text,
 .section-header p,
 .feedback,
 .option-meta,
 .room-label {
  color: #4a5a6a;
 }
 .eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: #915f00;
 }
 .hero-meta {
  min-width: 15rem;
  padding: 1rem 1.1rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(19, 34, 56, 0.08);
  backdrop-filter: blur(10px);
 }
 .status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 0.9rem;
 }
 .status-pill.connected {
  background: rgba(86, 201, 166, 0.18);
  color: #135d43;
 }
 .status-pill.connecting {
  background: rgba(255, 190, 120, 0.22);
  color: #8c5300;
 }
 .status-pill.offline {
  background: rgba(219, 82, 82, 0.16);
  color: #8f1f1f;
 }
 .panel {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  border-radius: 1.3rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(19, 34, 56, 0.08);
  box-shadow: 0 14px 40px rgba(19, 34, 56, 0.08);
  backdrop-filter: blur(10px);
 }
 .panel h2 {
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
 }
 .share-row,
 .option-form,
 .option-main {
  display: flex;
  gap: 0.75rem;
 }
 .field-label {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 700;
 }
 .share-input,
 .option-form input {
  width: 100%;
  min-width: 0;
  border-radius: 0.95rem;
  border: 1px solid rgba(19, 34, 56, 0.14);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.85rem 1rem;
  color: #132238;
 }
 .share-input:focus,
 .option-form input:focus {
  outline: 2px solid rgba(255, 190, 120, 0.65);
  outline-offset: 1px;
 }
 .primary-button,
 .secondary-button,
 .vote-button {
  border: none;
  border-radius: 0.95rem;
  padding: 0.85rem 1rem;
  font-weight: 700;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
 }
 .primary-button,
 .vote-button {
  background: #132238;
  color: #f9f4e8;
  box-shadow: 0 10px 20px rgba(19, 34, 56, 0.14);
 }
 .secondary-button {
  background: rgba(19, 34, 56, 0.08);
  color: #132238;
 }
 .primary-button:hover,
 .secondary-button:hover,
 .vote-button:hover {
  transform: translateY(-1px);
 }
 .options-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
 }
 .option-card,
 .empty-state {
  border-radius: 1.1rem;
  padding: 1rem;
  background: rgba(247, 244, 236, 0.95);
  border: 1px solid rgba(19, 34, 56, 0.08);
 }
 .option-card.selected {
  border-color: rgba(86, 201, 166, 0.85);
  background: rgba(232, 249, 242, 0.95);
 }
 .option-main {
  align-items: center;
  justify-content: space-between;
 }
 .option-label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
 }
 .option-meta,
 .feedback,
 .room-label {
  margin: 0.35rem 0 0;
 }
 .section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
 }
 .feedback {
  min-height: 1.5rem;
 }
 code {
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
 }
@media (max-width: 720px) {
  .shell {
    width: min(100% - 1rem, 920px);
    padding-top: 1rem;
  }
  .hero,
  .share-row,
  .option-form,
  .option-main,
  .section-header {
    flex-direction: column;
  }
  .hero-meta {
    width: 100%;
    min-width: 0;
  }
  .primary-button,
  .secondary-button,
  .vote-button {
    width: 100%;
  }
 }
--- a/src/sync.ts
+++ b/src/sync.ts
@@ -0,0 +1,64 @@
 import { IndexeddbPersistence } from "y-indexeddb";
 import { WebrtcProvider } from "y-webrtc";
 import * as Y from "yjs";
 import { type ConnectionStatus, ensurePollInitialized, type OptionRecord } from "./state";
 export interface AppSync {
  doc: Y.Doc;
  meta: Y.Map<string>;
  options: Y.Map<OptionRecord>;
  votes: Y.Map<string>;
  provider: WebrtcProvider;
  persistence: IndexeddbPersistence;
  getConnectionStatus: () => ConnectionStatus;
  destroy: () => void;
 }
 export function initSync(roomId: string): AppSync {
  const doc = new Y.Doc();
  const meta = doc.getMap<string>("poll-meta");
  const options = doc.getMap<OptionRecord>("poll-options");
  const votes = doc.getMap<string>("poll-votes");
  ensurePollInitialized(meta);
  let connectionStatus: ConnectionStatus = navigator.onLine ? "connecting" : "offline";
  const provider = new WebrtcProvider(roomId, doc);
  const persistence = new IndexeddbPersistence(roomId, doc);
  const syncConnectionStatus = (status: ConnectionStatus) => {
    connectionStatus = navigator.onLine ? status : "offline";
  };
  const handleOnline = () => {
    syncConnectionStatus(provider.connected ? "connected" : "connecting");
  };
  const handleOffline = () => {
    connectionStatus = "offline";
  };
  provider.on("status", (event: { connected: boolean }) => {
    syncConnectionStatus(event.connected ? "connected" : "connecting");
  });
  window.addEventListener("online", handleOnline);
  window.addEventListener("offline", handleOffline);
  return {
    doc,
    meta,
    options,
    votes,
    provider,
    persistence,
    getConnectionStatus: () => connectionStatus,
    destroy: () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
      persistence.destroy();
      provider.destroy();
      doc.destroy();
    },
  };
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "useDefineForClassFields": true
  },
  "include": ["src"]
 }
Author	SHA1	Message	Date
xstraven	2a39d594c7	add proposal	2026-03-18 21:28:06 +01:00
xstraven	42594951f3	test push works	2026-03-18 21:08:47 +01:00