feat(frontend): mobile UX elite polish — 15 recommendations#952
Merged
ericsocrat merged 1 commit intomainfrom Mar 18, 2026
Merged
feat(frontend): mobile UX elite polish — 15 recommendations#952ericsocrat merged 1 commit intomainfrom
ericsocrat merged 1 commit intomainfrom
Conversation
R1: Grouped scan history by date with count badges R2: FadeSlideIn transition on scan result cards R3: Primary CTA button on not-found view R4: Torch/flashlight toggle for barcode scanner R5: Scanning tips accordion below viewfinder R6: CategoryPicker pills replacing native select R7: Relative time formatting (just now, Xm ago, Xh ago) R8: Score count-up animation with bounceIn badge R9: Lock icon on EAN field (read-only indicator) R10: Empty-state illustration for submissions page R11: Submit button loading/success/error states R12: Desktop-only breadcrumbs on all scan subpages R13: Stagger animation on list items (history, submissions) R14: Viewfinder overlay with rounded corners R15: Pull-to-refresh glow effect and scale snap - 4 new files: CategoryPicker, format-time utility + tests - i18n keys added to en/de/pl - useReducedMotion mock for animation tests in jsdom - All 5822 tests passing, 0 TS errors
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Bundle Size Report
✅ Bundle size is within acceptable limits. |
There was a problem hiding this comment.
Pull request overview
Implements a set of mobile UX improvements across the scan flow (scanner, results, history/submissions, and submit form), adding animations, better touch-first controls, and a new relative-time utility.
Changes:
- Adds new UI components/UX affordances (CategoryPicker pills, empty-state illustration usage, desktop-only breadcrumbs + mobile back buttons).
- Introduces/extends motion effects (FadeSlideIn wrappers, staggered list entrance, score count-up + bounce-in).
- Adds utilities and copy for relative time formatting and manual-entry tips (with tests and new i18n strings).
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/styles/globals.css | Reformat motion tokens and add @keyframes bounceIn for scan celebration. |
| frontend/src/lib/format-time.ts | Adds formatRelativeTime() helper for scan history timestamps. |
| frontend/src/lib/format-time.test.ts | Unit tests for the new relative time formatter. |
| frontend/src/components/scan/ScanResultView.tsx | Adds FadeSlideIn transitions and TryVit score count-up + bounce animation. |
| frontend/src/components/scan/ScanResultView.test.tsx | Updates tests to accommodate animated score display and reduced-motion behavior. |
| frontend/src/components/scan/CategoryPicker.tsx | New pill-based category selector component. |
| frontend/src/components/scan/CategoryPicker.test.tsx | Tests for CategoryPicker selection/toggling and aria-pressed behavior. |
| frontend/src/components/common/PullToRefresh.tsx | Adds triggered/refreshing “glow + scale snap” styling. |
| frontend/src/app/app/scan/submit/page.tsx | Uses CategoryPicker, adds EAN lock indicator, and submit button pending/success UI. |
| frontend/src/app/app/scan/submit/page.test.tsx | Updates form tests to interact with CategoryPicker instead of <select>. |
| frontend/src/app/app/scan/submissions/page.tsx | Adds empty-state illustration and staggered list entrance; adds mobile back button. |
| frontend/src/app/app/scan/page.tsx | Adds torch pill in viewfinder, manual-entry tips, and mobile back button; adjusts viewfinder overlay. |
| frontend/src/app/app/scan/page.test.tsx | Updates scan page test to wait for animated score value. |
| frontend/src/app/app/scan/history/page.tsx | Adds grouping/count badges and relative timestamps; adds staggered entrance + mobile back button. |
| frontend/messages/en.json | Adds scan manual-entry tips strings. |
| frontend/messages/de.json | Adds scan manual-entry tips strings. |
| frontend/messages/pl.json | Adds scan manual-entry tips strings. |
Comment on lines
+19
to
+23
|
|
||
| if (diffSec < MINUTE) return "just now"; | ||
| if (diffSec < HOUR) return `${Math.floor(diffSec / MINUTE)}m ago`; | ||
| if (diffSec < DAY) return `${Math.floor(diffSec / HOUR)}h ago`; | ||
| if (diffSec < DAY * 7) return `${Math.floor(diffSec / DAY)}d ago`; |
Comment on lines
+168
to
+183
| // ─── R1: Group consecutive duplicate EAN scans ────────────────────────────── | ||
|
|
||
| type GroupedScan = ScanHistoryItem & { count: number }; | ||
|
|
||
| function groupScans(scans: ScanHistoryItem[]): GroupedScan[] { | ||
| const grouped: GroupedScan[] = []; | ||
| for (const scan of scans) { | ||
| const prev = grouped[grouped.length - 1]; | ||
| if (prev && prev.ean === scan.ean) { | ||
| prev.count += 1; | ||
| } else { | ||
| grouped.push({ ...scan, count: 1 }); | ||
| } | ||
| } | ||
| return grouped; | ||
| } |
| <Lock | ||
| size={14} | ||
| className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground-muted" | ||
| aria-label={t("submit.eanLocked")} |
Comment on lines
248
to
+254
| <label | ||
| htmlFor="category" | ||
| className="mb-1 block text-sm font-medium text-foreground-secondary" | ||
| > | ||
| {t("submit.categoryLabel")}{" "} | ||
| <span className="font-normal text-foreground-muted">{t("common.optional")}</span> | ||
| </label> | ||
| <select | ||
| id="category" | ||
| value={category} | ||
| onChange={(e) => setCategory(e.target.value)} | ||
| className="input-field" | ||
| > | ||
| <option value="">{t("submit.categoryPlaceholder")}</option> | ||
| {FOOD_CATEGORIES.map((cat) => ( | ||
| <option key={cat.slug} value={cat.slug}> | ||
| {cat.emoji} {t(cat.labelKey)} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| <CategoryPicker value={category} onChange={setCategory} /> |
Comment on lines
+13
to
+19
| } | ||
|
|
||
| export function CategoryPicker({ value, onChange }: CategoryPickerProps) { | ||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| <div className="flex flex-wrap gap-2"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements all 15 mobile UX recommendations from the comprehensive mobile audit (score 8.3/10, 31 findings analyzed).
Changes (R1–R15)
history/page.tsxScanResultView.tsxScanResultView.tsxscan/page.tsxscan/page.tsxCategoryPicker.tsx,submit/page.tsxformat-time.ts,history/page.tsxScanResultView.tsx,globals.csssubmit/page.tsxsubmissions/page.tsxsubmit/page.tsxhistory/page.tsx,submissions/page.tsxscan/page.tsxPullToRefresh.tsxNew Files
frontend/src/components/scan/CategoryPicker.tsx— mobile-friendly category selector (button pills with aria-pressed)frontend/src/components/scan/CategoryPicker.test.tsx— 7 test casesfrontend/src/lib/format-time.ts— relative time formatting utilityfrontend/src/lib/format-time.test.ts— 11 test casesTesting
Verification