#562: search filter match highlight and quota blur

src/components/product/badges/SearchFilterMatchBadge.tsx

@@ -0,0 +1,36 @@
+import { Badge } from "@/components/ui/badge.tsx";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip.tsx";
+import { Filter } from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+    readonly filterId: string;
+    readonly filterName?: string;
+    readonly matchReason?: string;
+};
+
+export function SearchFilterMatchBadge({ filterId, filterName, matchReason }: Props) {
+    const { t } = useTranslation();
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <Link to="/me/search-filter/$filterId" params={{ filterId }}>
+                    <Badge className="bg-tertiary text-tertiary-foreground py-1 gap-1 cursor-pointer">
+                        <Filter className="w-3 h-3" />
+                        {t("product.searchFilter.matchedBadge")}
+                    </Badge>
+                </Link>
+            </TooltipTrigger>
+            {(filterName ?? matchReason) && (
+                <TooltipContent className="max-w-64 flex flex-col gap-1">
+                    {filterName && <span className="font-semibold">{filterName}</span>}
+                    {matchReason && (
+                        <span className="text-sm text-muted-foreground">{matchReason}</span>
+                    )}
+                </TooltipContent>
+            )}
+        </Tooltip>
+    );
+}

src/components/product/badges/__tests__/SearchFilterMatchBadge.test.tsx

@@ -0,0 +1,53 @@
+import type React from "react";
+
+vi.mock("@tanstack/react-router", async () => {
+    const actual =
+        await vi.importActual<typeof import("@tanstack/react-router")>("@tanstack/react-router");
+
+    return {
+        ...actual,
+        Link: ({
+            to,
+            params,
+            children,
+            ...props
+        }: {
+            to: string;
+            params?: Record<string, string>;
+            children: React.ReactNode;
+        }) => {
+            let href = to;
+            for (const [key, value] of Object.entries(params ?? {})) {
+                href = href.replace(`$${key}`, value);
+            }
+            return (
+                <a href={href} {...props}>
+                    {children}
+                </a>
+            );
+        },
+    };
+});
+
+import { render, screen } from "@testing-library/react";
+import { SearchFilterMatchBadge } from "../SearchFilterMatchBadge.tsx";
+
+describe("SearchFilterMatchBadge", () => {
+    it("should render badge with 'Treffer' text", () => {
+        render(<SearchFilterMatchBadge filterId="filter-123" />);
+
+        expect(screen.getByText("Treffer")).toBeInTheDocument();
+    });
+
+    it("should link to the search filter page", () => {
+        render(<SearchFilterMatchBadge filterId="filter-123" />);
+
+        expect(screen.getByRole("link")).toHaveAttribute("href", "/me/search-filter/filter-123");
+    });
+
+    it("should render the filter icon", () => {
+        const { container } = render(<SearchFilterMatchBadge filterId="filter-123" />);
+
+        expect(container.querySelector(".lucide-funnel")).toBeInTheDocument();
+    });
+});

src/components/product/detail/ProductInfo.tsx

@@ -22,6 +22,8 @@ export function ProductInfo({ product }: { readonly product: ProductDetail }) {
     const isRemoved = product.state === "REMOVED";
     const merchantUrl = product.viewUrl?.href ?? product.url?.href;
 
+    const searchFilterData = product.userData?.searchFilterData;
+
     return (
         <section className="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:gap-12 pb-8">
             <div className="shrink-0 lg:col-span-7">
@@ -111,6 +113,28 @@ export function ProductInfo({ product }: { readonly product: ProductDetail }) {
                     )}
                 </div>
 
+                {searchFilterData?.matched &&
+                    !searchFilterData?.hidden &&
+                    searchFilterData?.userSearchFilterId && (
+                        <div className="mt-6 border-l-2 border-tertiary pl-4 flex flex-col gap-2">
+                            <p className="text-xs uppercase tracking-[0.08em] text-muted-foreground">
+                                {t("product.searchFilter.matchedBy")}
+                            </p>
+                            <Link
+                                to="/me/search-filter/$filterId"
+                                params={{ filterId: searchFilterData.userSearchFilterId }}
+                                className="text-sm font-semibold text-tertiary transition-colors hover:underline"
+                            >
+                                {searchFilterData.userSearchFilterName}
+                            </Link>
+                            {searchFilterData.matchReason && (
+                                <p className="mt-1 text-sm italic text-on-surface/80">
+                                    {searchFilterData.matchReason}
+                                </p>
+                            )}
+                        </div>
+                    )}
+
                 <div className="mt-8 flex flex-col gap-3">
                     <Button
                         variant="default"

src/components/product/detail/__tests__/ProductInfo.test.tsx

@@ -20,11 +20,17 @@ vi.mock("@tanstack/react-router", async () => {
             params?: Record<string, string>;
             children: React.ReactNode;
             className?: string;
-        }) => (
-            <a href={to.replace("$shopSlugId", params?.shopSlugId ?? "")} {...props}>
-                {children}
-            </a>
-        ),
+        }) => {
+            let href = to;
+            for (const [key, value] of Object.entries(params ?? {})) {
+                href = href.replace(`$${key}`, value);
+            }
+            return (
+                <a href={href} {...props}>
+                    {children}
+                </a>
+            );
+        },
         useParams: () => ({}),
         useRouteContext: () => ({ timeZone: "UTC" }),
     };
@@ -182,4 +188,78 @@ describe("ProductInfo", () => {
         const shareButtons = screen.getAllByRole("button");
         expect(shareButtons.length).toBeGreaterThan(0);
     });
+
+    describe("search filter info", () => {
+        const mockProductMatched: ProductDetail = {
+            ...mockProduct,
+            userData: {
+                watchlistData: { isWatching: false, isNotificationEnabled: false },
+                notificationData: { hasUnseenNotification: false },
+                restrictedContentData: { consentGiven: false },
+                searchFilterData: {
+                    matched: true,
+                    hidden: false,
+                    userSearchFilterId: "filter-123",
+                    userSearchFilterName: "Vintage Art Deco",
+                    matchReason: "Passt zum gesuchten Vintage Art Deco Stil.",
+                },
+            },
+        };
+
+        it("should render filter name as a link to the search filter", () => {
+            renderWithQueryClient(<ProductInfo product={mockProductMatched} />);
+            expect(screen.getByRole("link", { name: "Vintage Art Deco" })).toHaveAttribute(
+                "href",
+                "/me/search-filter/filter-123",
+            );
+        });
+
+        it("should render the match reason immediately visible", () => {
+            renderWithQueryClient(<ProductInfo product={mockProductMatched} />);
+            expect(
+                screen.getByText("Passt zum gesuchten Vintage Art Deco Stil."),
+            ).toBeInTheDocument();
+        });
+
+        it("should NOT render search filter info when not matched", () => {
+            renderWithQueryClient(<ProductInfo product={mockProduct} />);
+            expect(screen.queryByText("Suchauftrag")).not.toBeInTheDocument();
+        });
+
+        it("should NOT render search filter info when hidden", () => {
+            const hiddenProduct: ProductDetail = {
+                ...mockProduct,
+                userData: {
+                    watchlistData: { isWatching: false, isNotificationEnabled: false },
+                    notificationData: { hasUnseenNotification: false },
+                    restrictedContentData: { consentGiven: false },
+                    searchFilterData: { matched: true, hidden: true },
+                },
+            };
+            renderWithQueryClient(<ProductInfo product={hiddenProduct} />);
+            expect(screen.queryByText("Suchauftrag")).not.toBeInTheDocument();
+        });
+
+        it("should render filter name but NOT match reason when matchReason is absent", () => {
+            const productNoReason: ProductDetail = {
+                ...mockProduct,
+                userData: {
+                    watchlistData: { isWatching: false, isNotificationEnabled: false },
+                    notificationData: { hasUnseenNotification: false },
+                    restrictedContentData: { consentGiven: false },
+                    searchFilterData: {
+                        matched: true,
+                        hidden: false,
+                        userSearchFilterId: "filter-123",
+                        userSearchFilterName: "Vintage Art Deco",
+                    },
+                },
+            };
+            renderWithQueryClient(<ProductInfo product={productNoReason} />);
+            expect(screen.getByRole("link", { name: "Vintage Art Deco" })).toBeInTheDocument();
+            expect(
+                screen.queryByText("Passt zum gesuchten Vintage Art Deco Stil."),
+            ).not.toBeInTheDocument();
+        });
+    });
 });

src/components/product/detail/similar/ProductSimilar.tsx

@@ -1,5 +1,6 @@
 import { useSimilarProducts } from "@/hooks/useSimilarProducts.ts";
 import { ProductSimilarCard } from "@/components/product/detail/similar/ProductSimilarCard.tsx";
+import { HiddenMatchCard } from "@/components/product/overview/HiddenMatchCard.tsx";
 import { H2 } from "@/components/typography/H2.tsx";
 import { H3 } from "@/components/typography/H3.tsx";
 import { useTranslation } from "react-i18next";
@@ -105,9 +106,14 @@ export function ProductSimilar({ shopId, shopsProductId }: ProductSimilarProps)
         <section className="flex min-w-0 flex-col gap-8">
             <SimilarSectionHeading title={t("product.similar.title")} />
             <div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
-                {data.products.map((product) => (
-                    <ProductSimilarCard key={product.productId} product={product} />
-                ))}
+                {data.products.map((product) => {
+                    const isHidden = product.userData?.searchFilterData?.hidden === true;
+                    return isHidden ? (
+                        <HiddenMatchCard key={product.productId} />
+                    ) : (
+                        <ProductSimilarCard key={product.productId} product={product} />
+                    );
+                })}
             </div>
         </section>
     );

src/components/product/detail/similar/ProductSimilarCard.tsx

@@ -1,5 +1,6 @@
 import { StatusBadge } from "@/components/product/badges/StatusBadge.tsx";
 import { UnseenNotificationBadge } from "@/components/product/badges/UnseenNotificationBadge.tsx";
+import { SearchFilterMatchBadge } from "@/components/product/badges/SearchFilterMatchBadge.tsx";
 import { Card } from "@/components/ui/card.tsx";
 import type { OverviewProduct } from "@/data/internal/product/OverviewProduct.ts";
 import { ImageOff } from "lucide-react";
@@ -20,6 +21,12 @@ export function ProductSimilarCard({ product }: { readonly product: OverviewProd
     const originEventId = product.userData?.notificationData?.originEventId;
     const markSeen = useMarkNotificationSeen();
 
+    const searchFilterData = product.userData?.searchFilterData;
+    const matchedFilterId =
+        searchFilterData?.matched && !searchFilterData.hidden
+            ? searchFilterData.userSearchFilterId
+            : undefined;
+
     const handleProductClick = useCallback(() => {
         if (hasUnseenNotification && originEventId) {
             markSeen.mutate(originEventId);
@@ -31,6 +38,7 @@ export function ProductSimilarCard({ product }: { readonly product: OverviewProd
             className={cn(
                 "h-full min-w-0 overflow-hidden border-0 bg-card p-0 shadow-none",
                 hasUnseenNotification && "border-2 border-primary",
+                !hasUnseenNotification && matchedFilterId && "border-2 border-tertiary",
             )}
         >
             <Link
@@ -42,7 +50,16 @@ export function ProductSimilarCard({ product }: { readonly product: OverviewProd
                 className="group flex h-full gap-4 bg-card p-2 transition-colors hover:bg-surface-container"
                 onClick={handleProductClick}
             >
-                <div className="size-24 shrink-0 overflow-hidden bg-background">
+                <div className="relative size-24 shrink-0 overflow-hidden bg-background">
+                    {!hasUnseenNotification && matchedFilterId && (
+                        <div className="absolute left-1 top-1 z-10">
+                            <SearchFilterMatchBadge
+                                filterId={matchedFilterId}
+                                filterName={searchFilterData?.userSearchFilterName}
+                                matchReason={searchFilterData?.matchReason}
+                            />
+                        </div>
+                    )}
                     {product.images.length > 0 ? (
                         isRestrictedImage(
                             product.images[0],

src/components/product/detail/similar/__tests__/ProductSimilar.test.tsx

@@ -190,6 +190,30 @@
         expect(screen.getByText("Keine ähnlichen Artikel")).toBeInTheDocument();
     });
 
+    it("should render HiddenMatchCard instead of ProductSimilarCard when product is hidden", () => {
+        const hiddenProduct: OverviewProduct = {
+            ...mockProducts[0],
+            productId: "00000000-0000-0000-0000-000000000000",
+            userData: {
+                watchlistData: { isWatching: false, isNotificationEnabled: false },
+                notificationData: { hasUnseenNotification: false },
+                restrictedContentData: { consentGiven: false },
+                searchFilterData: { matched: true, hidden: true },
+            },
+        };
+        vi.mocked(useSimilarProducts).mockReturnValue({
+            data: { isEmbeddingsPending: false, products: [hiddenProduct] },
+            isLoading: false,
+            isError: false,
+            error: null,
+        } as never);
+
+        render(<ProductSimilar {...defaultProps} />);
+
+        expect(screen.getByText(/Verborgen/i)).toBeInTheDocument();
+        expect(screen.queryByText(mockProducts[0].title)).not.toBeInTheDocument();
+    });
+
     it("should render similar products correctly in grid", () => {
         vi.mocked(useSimilarProducts).mockReturnValue({
             data: { isEmbeddingsPending: false, products: mockProducts },