fix(frontend): standardize dashboard arrow icons (#973) by ericsocrat · Pull Request #976 · ericsocrat/tryvit

ericsocrat · 2026-03-19T19:27:37Z

Summary

Fixes the double-arrow bug in the dashboard "View history" link and standardizes all 4 dashboard navigation links to use a consistent lucide-react <ArrowRight> icon instead of mixed text arrows.

Closes #973 | Part of Epic #972

Problem

The dashboard had 4 different arrow patterns across its navigation links:

Link	Component	Before	Issue
View history	`RecentlyViewed`	i18n `"→"` + `<ArrowRight>` icon	Double arrow `→ →`
View all	`CategoriesBrowse`	i18n `"→"` only (text)	No icon, inconsistent
Learn more	`NutritionTip`	Hardcoded `→` in JSX	Text arrow, inconsistent
View swap	`QuickWinCard`	`<ArrowRight>` icon only	✅ Correct pattern

Screenshot evidence: "View history → →" double arrow clearly visible in mobile dashboard screenshots (see issue #973).

Fix

Standardized pattern: {t("key")} <ArrowRight className="h-3 w-3" aria-hidden="true" />

i18n changes (3 locale files × 2 keys = 6 string edits)

Removed Unicode → from dashboard.viewAll and dashboard.viewHistory in en.json, pl.json, de.json

Component changes

CategoriesBrowse.tsx: Added ArrowRight import from lucide-react, added icon to "View all" link with inline-flex items-center gap-1 layout
NutritionTip.tsx: Added ArrowRight import from lucide-react, replaced hardcoded → with <ArrowRight> icon, changed link to inline-flex items-center gap-1 layout
RecentlyViewed.tsx: No code change needed — already had <ArrowRight> icon; removing → from i18n fixes the double arrow

Test changes

RecentlyViewed.test.tsx: Updated i18n mock value (removed →), added test verifying single SVG icon and no text arrow
CategoriesBrowse.test.tsx: Added test verifying SVG icon in "View all" link and no text arrow
NutritionTip.test.tsx: Added test verifying SVG icon in "Learn more" link and no text arrow

After (all 4 links standardized)

Link	Pattern	Result
View history	`{t("viewHistory")}` + `<ArrowRight>`	`View history →` (single icon) ✅
View all	`{t("viewAll")}` + `<ArrowRight>`	`View all →` (icon) ✅
Learn more	`{t("tipLearnMore")}` + `<ArrowRight>`	`Learn more →` (icon) ✅
View swap	`{t("quickWinViewSwap")}` + `<ArrowRight>`	`View healthier option →` (icon) ✅

Verification

npx tsc --noEmit             → 0 errors
npx vitest run               → 5,863 passed | 19 skipped (352 files, 0 failures)
Dashboard-specific tests     → 21/21 pass (RecentlyViewed 14, CategoriesBrowse 6, NutritionTip 6)

8 files changed, +48 / -12 lines

… from i18n, add ArrowRight icons (#973) - Remove Unicode '→' from viewAll and viewHistory i18n keys in en/pl/de locales - Add ArrowRight lucide icon to CategoriesBrowse 'View all' link - Add ArrowRight lucide icon to NutritionTip 'Learn more' link - Fix double-arrow bug in RecentlyViewed 'View history' link (i18n '→' + icon) - All 4 dashboard navigation links now use consistent pattern: text + ArrowRight icon - Add 3 new tests verifying arrow icon presence and no text arrow artifacts - Update RecentlyViewed test mock to match new i18n values Closes #973

vercel · 2026-03-19T19:27:43Z

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

Project	Deployment	Actions	Updated (UTC)
tryvit	Ready	Preview, Comment	Mar 19, 2026 7:29pm

chatgpt-codex-connector · 2026-03-19T19:27:44Z

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.

github-actions · 2026-03-19T19:29:12Z

📸 PR Screenshots

Captured 2 screenshots (1 mobile, 1 desktop) for 1 changed page(s):

i18n-dashboard

📥 Download screenshots from workflow artifacts.

_{Captured by PR Screenshots workflow • 2026-03-19}

github-actions · 2026-03-19T19:30:01Z

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

Standardizes dashboard “action link” arrows by removing Unicode right-arrow characters from i18n strings and rendering a consistent lucide-react <ArrowRight> icon in components, addressing the “double-arrow” bug.

Changes:

Removed → from dashboard.viewAll / dashboard.viewHistory in en/pl/de message dictionaries.
Updated dashboard components to render a consistent <ArrowRight> icon layout for “View all” and “Learn more”.
Updated/added unit tests to assert icon presence and absence of the Unicode arrow character.

Reviewed changes

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

Show a summary per file

File	Description
frontend/src/components/dashboard/RecentlyViewed.test.tsx	Updates i18n mock + adds assertion for icon/no Unicode arrow in “View history” link
frontend/src/components/dashboard/NutritionTip.tsx	Replaces hardcoded text arrow with `<ArrowRight>` icon and aligns link layout
frontend/src/components/dashboard/NutritionTip.test.tsx	Adds test ensuring icon arrow is used and Unicode arrow is absent
frontend/src/components/dashboard/CategoriesBrowse.tsx	Adds `<ArrowRight>` icon to “View all” link and updates link layout
frontend/src/components/dashboard/CategoriesBrowse.test.tsx	Adds test ensuring “View all” link includes SVG icon and no Unicode arrow
frontend/messages/en.json	Removes `→` from `dashboard.viewAll` / `dashboard.viewHistory` strings
frontend/messages/pl.json	Removes `→` from `dashboard.viewAll` / `dashboard.viewHistory` strings
frontend/messages/de.json	Removes `→` from `dashboard.viewAll` / `dashboard.viewHistory` strings

Copilot · 2026-03-19T19:32:29Z

frontend/src/components/dashboard/RecentlyViewed.test.tsx

 vi.mock("@/lib/i18n", () => ({
  useTranslation: () => ({
    t: (key: string) => {
      const map: Record<string, string> = {
        "dashboard.recentlyViewedCompact": "Recently Viewed",
        "dashboard.viewAll": "View all",
-        "dashboard.viewHistory": "View history →",
+        "dashboard.viewHistory": "View history",
      };
      return map[key] ?? key;


This file mocks useTranslation() with a hardcoded map, so the new “no text arrow” assertion won’t fail if messages/*.json accidentally reintroduce a → in dashboard.viewHistory. To actually guard against the original regression, consider using the real translate()/dictionary in this test (or add a small assertion that the locale value for dashboard.viewHistory does not contain →).

Copilot · 2026-03-19T19:32:29Z

frontend/src/components/dashboard/RecentlyViewed.test.tsx

+    render(<RecentlyViewed products={products} />);
+
+    const link = screen.getByRole("link", { name: /View history/ });
+    expect(link.querySelector("svg")).toBeInTheDocument();


The test name says “single arrow icon”, but the assertion only checks that an svg exists. If a future change renders multiple SVGs inside the link (or reintroduces a double-icon bug), this test would still pass; consider asserting the SVG count is exactly 1 for this link.

Suggested change

expect(link.querySelector("svg")).toBeInTheDocument();

const svgs = link.querySelectorAll("svg");

expect(svgs).toHaveLength(1);

Copilot · 2026-03-19T19:32:29Z

frontend/src/components/dashboard/NutritionTip.test.tsx

+  it("learn more link uses icon arrow instead of text arrow", () => {
+    render(<NutritionTip />);
+    const link = screen.getByText(/Learn more/);
+    expect(link.querySelector("svg")).toBeInTheDocument();


This test verifies an svg exists, but it doesn’t assert that there’s exactly one icon in the link. If multiple SVGs get rendered inside the anchor, the test would still pass; consider asserting the SVG count is exactly 1.

Suggested change

expect(link.querySelector("svg")).toBeInTheDocument();

const svgs = link.querySelectorAll("svg");

expect(svgs).toHaveLength(1);

Copilot · 2026-03-19T19:32:30Z

frontend/src/components/dashboard/CategoriesBrowse.test.tsx

+        (l) => l.getAttribute("href") === "/app/categories",
+      );
+      expect(viewAll).toBeDefined();
+      expect(viewAll!.querySelector("svg")).toBeInTheDocument();


The test checks that a link contains an svg, but it doesn’t assert it’s the only icon within that link. To make the “no double arrow” intent more robust, consider asserting querySelectorAll("svg") has length 1 for the /app/categories link.

Suggested change

expect(viewAll!.querySelector("svg")).toBeInTheDocument();

const svgs = viewAll!.querySelectorAll("svg");

expect(svgs.length).toBe(1);

expect(svgs[0]).toBeInTheDocument();

Copilot · 2026-03-19T19:32:30Z

frontend/messages/en.json

    "newInCategory": "New {category}",
-    "viewAll": "View all →",
-    "viewHistory": "View history →",
+    "viewAll": "View all",
+    "viewHistory": "View history",


dashboard.viewAll is also used by RecentComparisons.tsx (link to /app/compare) which currently does not render an <ArrowRight> icon. After removing the → from this translation, that “View all” link will lose its arrow entirely, reintroducing inconsistency on the dashboard. Consider adding the icon there as well, or splitting the i18n keys so only icon-suffixed links use the arrowless label.

Copilot AI review requested due to automatic review settings March 19, 2026 19:27

Copilot started reviewing on behalf of ericsocrat March 19, 2026 19:28 View session

vercel bot deployed to Preview March 19, 2026 19:29 View deployment

Copilot AI reviewed Mar 19, 2026

View reviewed changes

ericsocrat merged commit 959d408 into main Mar 19, 2026
22 checks passed

ericsocrat deleted the fix/973-dashboard-arrow-standardization branch March 19, 2026 19:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(frontend): standardize dashboard arrow icons (#973)#976

fix(frontend): standardize dashboard arrow icons (#973)#976
ericsocrat merged 1 commit intomainfrom
fix/973-dashboard-arrow-standardization

ericsocrat commented Mar 19, 2026

Uh oh!

vercel bot commented Mar 19, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector bot commented Mar 19, 2026

Uh oh!

github-actions bot commented Mar 19, 2026

Uh oh!

github-actions bot commented Mar 19, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 19, 2026

Uh oh!

Copilot AI Mar 19, 2026

Uh oh!

Copilot AI Mar 19, 2026

Uh oh!

Copilot AI Mar 19, 2026

Uh oh!

Copilot AI Mar 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	expect(link.querySelector("svg")).toBeInTheDocument();
	const svgs = link.querySelectorAll("svg");
	expect(svgs).toHaveLength(1);

-      expect(viewAll!.querySelector("svg")).toBeInTheDocument();
+      const svgs = viewAll!.querySelectorAll("svg");
+      expect(svgs.length).toBe(1);
+      expect(svgs[0]).toBeInTheDocument();

Conversation

ericsocrat commented Mar 19, 2026

Summary

Problem

Fix

i18n changes (3 locale files × 2 keys = 6 string edits)

Component changes

Test changes

After (all 4 links standardized)

Verification

Uh oh!

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

Uh oh!

Uh oh!

chatgpt-codex-connector bot commented Mar 19, 2026

Uh oh!

github-actions bot commented Mar 19, 2026

📸 PR Screenshots

Uh oh!

github-actions bot commented Mar 19, 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!

Copilot AI Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 19, 2026 •

edited

Loading