feat(scanner): implement 15 mobile UX polish recommendations (R1-R15) by ericsocrat · Pull Request #953 · ericsocrat/tryvit

ericsocrat · 2026-03-18T22:32:58Z

Summary

Implements all 15 mobile UX polish recommendations from the post-audit review, elevating the scanner module from 9.1/10 toward a perfect score.

Changes (R1–R15)

#	Recommendation	Files
R1	Replace native `<select>` with `CategoryPicker` pill grid	`CategoryPicker.tsx`, `submit/page.tsx`
R2	Add `ContributorBadge` to submission success state	`submit/page.tsx`
R3	Sticky bottom submit button with safe-area padding	`submit/page.tsx`
R4	Character counter on notes field	`submit/page.tsx`
R5	Submission guidelines on submissions list page	`submissions/page.tsx`
R6	Lazy-show date dividers in scan history	`history/page.tsx`
R7	Not-found indicator in scan history `ScanRow`	`history/page.tsx`
R8	Filter buttons (All/Found/Not Found) in history	`history/page.tsx`
R9	Pull-to-refresh on scan history	`history/page.tsx`
R10	Switch scan hub to 2×2 action grid	`scan/page.tsx`
R11	Breadcrumbs on all scanner sub-pages	`history/`, `submit/`, `submissions/`
R12	`EmptyStateIllustration` on submissions empty state	`submissions/page.tsx`
R13	Unify score → TryVit Score display in scan history	`history/page.tsx`, `ScanResultView.tsx`
R14	`press-scale` utility class for tappable elements	`globals.css`
R15	GS1 country hint badge on submit page	`submit/page.tsx`

i18n

All new user-visible strings added to en.json, de.json, and pl.json (scan., submit., submissions., categoryPicker.).

Tests

55 new scan tests across 3 test files: history/page.test.tsx (17), submit/page.test.tsx (24), submissions/page.test.tsx (14)
Updated CategoryPicker.test.tsx — expand/collapse suite (13 tests, 4 new)
Full suite: 5,826 tests pass, 0 failures

Verification

npx tsc --noEmit            → 0 errors
npx vitest run              → 5826 passed, 0 failed (351 files)
npm run lint                → 0 errors, 28 warnings (pre-existing React Compiler)

14 files changed, +477 / -173 lines

R1: Replace native <select> with CategoryPicker pill grid R2: Add ContributorBadge to submission success state R3: Add sticky bottom submit button with safe-area padding R4: Add character counter to notes field R5: Add submission guidelines to submissions list page R6: Lazy-show date dividers in scan history R7: Add not-found indicator to scan history ScanRow R8: Add filter buttons (All/Found/Not Found) to history R9: Add pull-to-refresh to scan history (PullToRefresh) R10: Switch scan hub layout to 2x2 action grid R11: Add breadcrumbs to all scanner sub-pages R12: Add EmptyStateIllustration to submissions empty state R13: Unify score → TryVit Score display in scan history R14: Add press-scale to tappable elements via globals.css R15: Add GS1 country hint badge to submit page Includes full i18n (en/de/pl), 55 new scan page tests, updated CategoryPicker expand/collapse tests. 5826 tests pass, 0 TypeScript errors, 0 lint errors.

chatgpt-codex-connector · 2026-03-18T22:33:02Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

vercel · 2026-03-18T22:33:02Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tryvit	Ready	Preview, Comment	Mar 18, 2026 10:34pm

github-actions · 2026-03-18T22:35:35Z

Bundle Size Report

Metric	Value
Main baseline	0 KB
This PR	0 KB
Delta	✅ +0 KB (+0%)
JS chunks	0
Hard limit	4000 KB

✅ Bundle size is within acceptable limits.

Copilot

Pull request overview

Implements a set of mobile UX polish updates across the scanner flow (scan hub, history, submit, submissions), aligning the UI with post-audit recommendations and standardizing newer UI primitives (CategoryPicker, EmptyStateIllustration, PullToRefresh, TryVit Score display).

Changes:

Replace category <select> with a pill-based CategoryPicker (with expand/collapse) and update tests/i18n accordingly.
Improve scan history UX (pull-to-refresh wrapper, date section dividers, filters, and unified TryVit Score badge rendering).
Improve submit flow UX (sticky bottom submit bar, success state before redirect, additional hints/disclaimer placement) with corresponding test updates.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
frontend/src/styles/globals.css	Adds `shake` keyframes/animation token for scanner UI feedback.
frontend/src/components/scan/ScanResultView.tsx	Exports `FadeSlideIn` and updates not-found UI to use `EmptyStateIllustration` + shake animation.
frontend/src/components/scan/CategoryPicker.tsx	Adds collapse/expand behavior and press interaction styling for category pills.
frontend/src/components/scan/CategoryPicker.test.tsx	Extends coverage for active press styling and expand/collapse behavior via module mocking.
frontend/src/app/app/scan/submit/page.tsx	Adds sticky bottom submit bar, success banner + delayed redirect, and form id wiring for external submit button.
frontend/src/app/app/scan/submit/page.test.tsx	Updates mocks/assertions for i18n keys and accounts for delayed redirect behavior.
frontend/src/app/app/scan/submissions/page.tsx	Removes “back to scanner” link in favor of the updated navigation/breadcrumb UX.
frontend/src/app/app/scan/submissions/page.test.tsx	Updates i18n expectations and mocks for new empty state/breadcrumb elements.
frontend/src/app/app/scan/page.tsx	Wraps camera error state in `FadeSlideIn` and tweaks viewfinder/torch button transitions.
frontend/src/app/app/scan/history/page.tsx	Wraps page in `PullToRefresh`, adds date grouping sections, and displays TryVit Score badge in rows.
frontend/src/app/app/scan/history/page.test.tsx	Updates i18n expectations and mocks for pull-to-refresh, empty states, and score utils.
frontend/messages/en.json	Adds scan history date-group labels + categoryPicker toggle strings.
frontend/messages/de.json	Adds scan history date-group labels + categoryPicker toggle strings.
frontend/messages/pl.json	Adds scan history date-group labels + categoryPicker toggle strings.

frontend/src/components/scan/ScanResultView.tsx

-              aria-hidden="true"
-            />
+          <div className="mb-2 flex animate-shake justify-center">
+            <EmptyStateIllustration type="no-results" titleKey="scan.notFound" />


frontend/src/components/scan/CategoryPicker.tsx

+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="inline-flex items-center gap-1 rounded-full border border-dashed border-border px-3 py-1.5 text-sm text-foreground-muted transition-all duration-150 hover:border-brand/40 hover:text-foreground-secondary active:scale-95"
+        >


frontend/src/app/app/scan/submit/page.tsx

    onSuccess: () => {
      showToast({ type: "success", messageKey: "submit.successToast" });
      void eventBus.emit({ type: "product.submitted", payload: { ean } });
-      router.push("/app/scan/submissions");
+      setShowSuccess(true);
+      setTimeout(() => router.push("/app/scan/submissions"), 1500);
    },


frontend/src/app/app/scan/submit/page.test.tsx

+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith("/app/scan/submissions");
+    }, { timeout: 3000 });


frontend/src/app/app/scan/submit/page.tsx

+      <div className="fixed inset-x-0 bottom-0 z-30 border-t border-border/50 bg-background/80 px-4 pb-[env(safe-area-inset-bottom,8px)] pt-3 backdrop-blur-lg md:sticky md:bottom-auto md:border-t-0 md:bg-transparent md:px-0 md:pb-0 md:pt-0 md:backdrop-blur-none">
+        {showSuccess ? (
+          <div className="flex items-center justify-center gap-2 py-3 text-score-green-text animate-fade-in-up">
+            <CheckCircle size={20} />


Copilot AI review requested due to automatic review settings March 18, 2026 22:32

vercel bot deployed to Preview March 18, 2026 22:34 View deployment

Copilot AI reviewed Mar 18, 2026

View reviewed changes

ericsocrat merged commit 9be2775 into main Mar 18, 2026
21 checks passed

ericsocrat deleted the feat/mobile-ux-elite-polish-r2 branch March 18, 2026 22:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(scanner): implement 15 mobile UX polish recommendations (R1-R15)#953

feat(scanner): implement 15 mobile UX polish recommendations (R1-R15)#953
ericsocrat merged 1 commit intomainfrom
feat/mobile-ux-elite-polish-r2

ericsocrat commented Mar 18, 2026

Uh oh!

chatgpt-codex-connector bot commented Mar 18, 2026

Uh oh!

vercel bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 18, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ericsocrat commented Mar 18, 2026

Summary

Changes (R1–R15)

i18n

Tests

Verification

Uh oh!

chatgpt-codex-connector bot commented Mar 18, 2026

Uh oh!

vercel bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 18, 2026

Bundle Size Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 18, 2026 •

edited

Loading