feat: redesign poll UX for cleaner native feed experience by spe1020 · Pull Request #274 · zapcooking/frontend

spe1020 · 2026-03-26T10:19:18Z

Summary

Remove outer wrapper — polls no longer have their own border/padding/background. They flow naturally within the note card, eliminating the "component inside a component" feeling.
Remove badge pills — "Single choice" and date badges removed. Metadata condensed into one clean footer line: 38 votes · Ends in 2 days.
Image polls redesigned — gradient overlay puts labels directly on images (no separate label row), check badge for selection, large percentage + progress bar on results.
Text polls redesigned — stacked list instead of 2-column grid, lighter 1px borders, horizontal animated fill bars for results, inline SVG check marks instead of radio/checkbox indicators.
Unified interaction model — both poll types share the same check badge, footer, and result presentation. They feel like variations of the same component.
Mobile-first — compact spacing, thumb-friendly tap targets, less vertical clutter.

What changed visually

Before	After
Bordered box wrapping the poll	Poll content flows into the note naturally
Badge pills for type + date	Single metadata line in footer
Separate label row under images	Label overlaid on image via gradient
2-column grid for text options	Stacked list with lighter borders
Radio/checkbox indicators	Clean check badges on selection
Heavy "Show results" link	Lighter "Results" text link

Test plan

🤖 Generated with Claude Code

Redesign PollDisplay to feel embedded in the feed rather than like a separate component. Key changes: - Remove outer border/padding/background wrapper so polls flow naturally within notes - Remove badge pills (Single choice, Ends date) — metadata condensed into a single footer line: "38 votes · Ends in 2 days" - Image polls: gradient overlay for labels directly on images instead of separate label boxes; check badge for selected/voted state; large percentage overlay on results; subtle progress bar - Text polls: stacked list instead of 2-column grid; lighter 1px borders; horizontal fill bars for results with animated grow; inline SVG checks instead of radio/checkbox indicators - Unified interaction model: both poll types use the same check badge, same footer structure, same result presentation - Better mobile: larger tap targets, less vertical clutter, compact metadata, thumb-friendly spacing - Dark-mode-first color handling with CSS custom properties - Smooth fillGrow animation on result bars Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

cloudflare-workers-and-pages · 2026-03-26T10:21:20Z

Deploying frontend with Cloudflare Pages

Latest commit:	`e1e0e9e`
Status:	⚡️ Build in progress...

View logs

cloudflare-workers-and-pages · 2026-03-26T10:21:21Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	frontend	`e1e0e9e`	Mar 26 2026, 10:34 AM

Copilot

Pull request overview

This PR redesigns PollDisplay to make polls visually blend into the native feed UI (removing the “boxed component” feel) while unifying interaction and results presentation for image and text polls.

Changes:

Reworked poll layout/styling: removed outer wrapper/badges, added unified footer metadata and actions.
Redesigned image polls (gradient label overlay, percent + progress bar, check badge).
Redesigned text polls (stacked rows, animated fill bar, inline SVG checkmark).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
`src/components/PollDisplay.svelte`	Major UI/UX refactor for poll rendering, results display, and footer metadata/actions.
`package.json`	Bumps app version to `4.2.122`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-26T10:27:20Z

src/components/PollDisplay.svelte

-          {/if}
-        </div>
+        {/if}
      {:else if displayResults && !userVoted && !expired && !voted}


The "Back to vote" action will be shown when the viewer is not logged in ($userPublickey is falsy), because displayResults is always true in that case and userVoted is always false. Clicking it only sets showResults = false, but displayResults stays true (due to || !$userPublickey), so the UI cannot switch back to vote mode and the button becomes a no-op. Consider hiding this action unless $userPublickey is present (and the user can actually vote), or adjust the condition to only show it when showResults is true and a vote mode is possible.

Suggested change

{:else if displayResults && !userVoted && !expired && !voted}

{:else if displayResults && $userPublickey && !userVoted && !expired && !voted}

Copilot · 2026-03-26T10:27:21Z

src/components/PollDisplay.svelte

+      {#if pollData.pollType === 'multiplechoice'}
+        <span class="poll-meta-dot">&middot;</span> Multiple choice
+      {/if}


The footer only renders a type label for multiplechoice, but never for singlechoice. The PR description/test plan mentions the footer includes "... · type"; if the type is still meant to be shown consistently, this should also render something like "Single choice" (or update the description/test plan to match the intended behavior).

Copilot · 2026-03-26T10:27:21Z

src/components/PollDisplay.svelte

-  .poll-img-card-vote:hover:not(:disabled) {
-    border-color: var(--color-primary, #f97316);
+    color: inherit;
+    font: inherit;


.poll-card sets cursor: pointer, but in results mode the markup uses a non-interactive <div class="poll-card">. This will still show a pointer cursor on hover even though the element isn't clickable, which is misleading. Consider moving the pointer cursor styling to button.poll-card only (or overriding cursor to default for the results <div> variant).

Suggested change

font: inherit;

font: inherit;

}

button.poll-card {

- Hide "Back to vote" button for logged-out users (displayResults is always true when not signed in, making the button a no-op) - Show poll type label consistently (Single choice / Multiple choice) in footer metadata for all poll types - Move cursor:pointer to button.poll-card only so result-mode divs don't show a misleading pointer cursor Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

spe1020 requested a review from Copilot March 26, 2026 10:24

Copilot started reviewing on behalf of spe1020 March 26, 2026 10:24 View session

Copilot AI reviewed Mar 26, 2026

View reviewed changes

spe1020 merged commit abec2ae into main Mar 26, 2026
1 of 3 checks passed

spe1020 deleted the feat/poll-ux-cleanup branch March 26, 2026 10:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: redesign poll UX for cleaner native feed experience#274

feat: redesign poll UX for cleaner native feed experience#274
spe1020 merged 2 commits intomainfrom
feat/poll-ux-cleanup

spe1020 commented Mar 26, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Mar 26, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Mar 26, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	{:else if displayResults && !userVoted && !expired && !voted}
	{:else if displayResults && $userPublickey && !userVoted && !expired && !voted}

Conversation

spe1020 commented Mar 26, 2026

Summary

What changed visually

Test plan

Uh oh!

cloudflare-workers-and-pages bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying frontend with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cloudflare-workers-and-pages bot commented Mar 26, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 26, 2026 •

edited

Loading