From 9bb90f406f474666d9d4418d7cee437a67cc8530 Mon Sep 17 00:00:00 2001
From: ericsocrat <ericsocrat@users.noreply.github.com>
Date: Thu, 19 Mar 2026 20:27:02 +0100
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20standardize=20dashboard=20arro?=
 =?UTF-8?q?w=20icons=20=E2=80=94=20remove=20text=20arrows=20from=20i18n,?=
 =?UTF-8?q?=20add=20ArrowRight=20icons=20(#973)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 frontend/messages/de.json                        |  4 ++--
 frontend/messages/en.json                        |  4 ++--
 frontend/messages/pl.json                        |  4 ++--
 .../dashboard/CategoriesBrowse.test.tsx          | 16 ++++++++++++++++
 .../components/dashboard/CategoriesBrowse.tsx    |  4 +++-
 .../components/dashboard/NutritionTip.test.tsx   |  9 ++++++++-
 .../src/components/dashboard/NutritionTip.tsx    |  8 +++++---
 .../components/dashboard/RecentlyViewed.test.tsx | 11 ++++++++++-
 8 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index 5fdde62b..aa020733 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -116,8 +116,8 @@
     "favoritesEmptyCta": "Tippen Sie ❤️ auf einem Produkt",
     "newProducts": "Neue Produkte",
     "newInCategory": "Neu in {category}",
-    "viewAll": "Alle anzeigen →",
-    "viewHistory": "Verlauf anzeigen →",
+    "viewAll": "Alle anzeigen",
+    "viewHistory": "Verlauf anzeigen",
     "browse": "Durchsuchen →",
     "scanned": "Gescannt",
     "viewed": "Angesehen",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index ec25813f..6443b6c6 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -116,8 +116,8 @@
     "favoritesEmptyCta": "Tap \u2764\uFE0F on any product",
     "newProducts": "New Products",
     "newInCategory": "New {category}",
-    "viewAll": "View all →",
-    "viewHistory": "View history →",
+    "viewAll": "View all",
+    "viewHistory": "View history",
     "browse": "Browse →",
     "scanned": "Scanned",
     "viewed": "Viewed",
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 424faabe..e24f93d2 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -116,8 +116,8 @@
     "favoritesEmptyCta": "Kliknij \u2764\uFE0F przy produkcie",
     "newProducts": "Nowe produkty",
     "newInCategory": "Nowe {category}",
-    "viewAll": "Pokaż wszystko →",
-    "viewHistory": "Historia →",
+    "viewAll": "Pokaż wszystko",
+    "viewHistory": "Historia",
     "browse": "Przeglądaj →",
     "scanned": "Zeskanowane",
     "viewed": "Przeglądane",
diff --git a/frontend/src/components/dashboard/CategoriesBrowse.test.tsx b/frontend/src/components/dashboard/CategoriesBrowse.test.tsx
index 9f090df6..91e9716c 100644
--- a/frontend/src/components/dashboard/CategoriesBrowse.test.tsx
+++ b/frontend/src/components/dashboard/CategoriesBrowse.test.tsx
@@ -146,6 +146,22 @@ describe("CategoriesBrowse", () => {
     });
   });
 
+  it("View All link includes an arrow icon (no text arrow)", async () => {
+    mockGetCategoryOverview.mockResolvedValue({
+      ok: true,
+      data: MOCK_CATEGORIES,
+    });
+    render(<CategoriesBrowse />, { wrapper: createWrapper() });
+    await vi.waitFor(() => {
+      const viewAll = screen.getAllByRole("link").find(
+        (l) => l.getAttribute("href") === "/app/categories",
+      );
+      expect(viewAll).toBeDefined();
+      expect(viewAll!.querySelector("svg")).toBeInTheDocument();
+      expect(viewAll!.textContent).not.toContain("\u2192");
+    });
+  });
+
   it("renders category icons for each chip", async () => {
     mockGetCategoryOverview.mockResolvedValue({
       ok: true,
diff --git a/frontend/src/components/dashboard/CategoriesBrowse.tsx b/frontend/src/components/dashboard/CategoriesBrowse.tsx
index c878d35a..7c4d9261 100644
--- a/frontend/src/components/dashboard/CategoriesBrowse.tsx
+++ b/frontend/src/components/dashboard/CategoriesBrowse.tsx
@@ -10,6 +10,7 @@ import { queryKeys, staleTimes } from "@/lib/query-keys";
 import { createClient } from "@/lib/supabase/client";
 import type { CategoryOverviewItem } from "@/lib/types";
 import { useQuery } from "@tanstack/react-query";
+import { ArrowRight } from "lucide-react";
 import Link from "next/link";
 
 function CategoryChip({
@@ -68,9 +69,10 @@ export function CategoriesBrowse() {
         </h2>
         <Link
           href="/app/categories"
-          className="text-sm font-medium text-brand transition-colors hover:text-brand-hover"
+          className="inline-flex items-center gap-1 text-sm font-medium text-brand transition-colors hover:text-brand-hover"
         >
           {t("dashboard.viewAll")}
+          <ArrowRight className="h-3 w-3" aria-hidden="true" />
         </Link>
       </div>
 
diff --git a/frontend/src/components/dashboard/NutritionTip.test.tsx b/frontend/src/components/dashboard/NutritionTip.test.tsx
index beac3a58..b7dde662 100644
--- a/frontend/src/components/dashboard/NutritionTip.test.tsx
+++ b/frontend/src/components/dashboard/NutritionTip.test.tsx
@@ -1,5 +1,5 @@
-import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 import { NutritionTip } from "./NutritionTip";
 
 // ─── Mocks ──────────────────────────────────────────────────────────────────
@@ -52,6 +52,13 @@ describe("NutritionTip", () => {
     expect(link.getAttribute("href")).toMatch(/^\/learn\//);
   });
 
+  it("learn more link uses icon arrow instead of text arrow", () => {
+    render(<NutritionTip />);
+    const link = screen.getByText(/Learn more/);
+    expect(link.querySelector("svg")).toBeInTheDocument();
+    expect(link.textContent).not.toContain("\u2192");
+  });
+
   it("learn more link points to a valid learn path", () => {
     render(<NutritionTip />);
     const link = screen.getByText(/Learn more/);
diff --git a/frontend/src/components/dashboard/NutritionTip.tsx b/frontend/src/components/dashboard/NutritionTip.tsx
index 0cffada3..52c57968 100644
--- a/frontend/src/components/dashboard/NutritionTip.tsx
+++ b/frontend/src/components/dashboard/NutritionTip.tsx
@@ -2,9 +2,10 @@
 
 // ─── NutritionTip — cycling daily health tip card ───────────────────────────
 
-import Link from "next/link";
 import { useTranslation } from "@/lib/i18n";
 import { qaStable } from "@/lib/qa-mode";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
 
 /** Total number of tips available in i18n files (dashboard.tip.0 … tip.N-1). */
 const TIP_COUNT = 14;
@@ -67,9 +68,10 @@ export function NutritionTip() {
           {learnHref && (
             <Link
               href={learnHref}
-              className="mt-1.5 inline-block text-xs font-medium text-brand hover:text-brand-hover transition-colors"
+              className="mt-1.5 inline-flex items-center gap-1 text-xs font-medium text-brand hover:text-brand-hover transition-colors"
             >
-              {t("dashboard.tipLearnMore")} →
+              {t("dashboard.tipLearnMore")}
+              <ArrowRight className="h-3 w-3" aria-hidden="true" />
             </Link>
           )}
         </div>
diff --git a/frontend/src/components/dashboard/RecentlyViewed.test.tsx b/frontend/src/components/dashboard/RecentlyViewed.test.tsx
index 1277774e..be8b9609 100644
--- a/frontend/src/components/dashboard/RecentlyViewed.test.tsx
+++ b/frontend/src/components/dashboard/RecentlyViewed.test.tsx
@@ -11,7 +11,7 @@ vi.mock("@/lib/i18n", () => ({
       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;
     },
@@ -133,6 +133,15 @@ describe("RecentlyViewed", () => {
     expect(link).toHaveAttribute("href", "/app/search");
   });
 
+  it("renders a single arrow icon in View history link (no text arrow)", () => {
+    const products = [makeProduct(1)];
+    render(<RecentlyViewed products={products} />);
+
+    const link = screen.getByRole("link", { name: /View history/ });
+    expect(link.querySelector("svg")).toBeInTheDocument();
+    expect(link.textContent).not.toContain("\u2192");
+  });
+
   it("has section aria-label", () => {
     const products = [makeProduct(1)];
     render(<RecentlyViewed products={products} />);