render mode

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -7,6 +7,9 @@ import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
 import clsx from "clsx";
 import { usePathname } from "next/navigation";
 
+/** TODO: remove when backend sends avatarRenderMode */
+const COLORED_SVG_RESTAURANT_SLUGS = new Set(["havasone"]);
+
 const SVG_MASK_STYLE = {
   maskSize: "contain",
   maskRepeat: "no-repeat",
@@ -20,16 +23,17 @@ function CategoryImage({
   src,
   size,
   alt,
-  // proxyBase,
+  tintWithPrimary = true,
 }: {
   src: string;
   size: number;
   alt: string;
-  // proxyBase: string | null;
+  tintWithPrimary?: boolean;
 }) {
   const isSvg = src.endsWith(".svg");
+  const shouldUseSvgMask = isSvg && tintWithPrimary;
 
-  if (isSvg) {
+  if (shouldUseSvgMask) {
     return (
       <div
         className="shrink-0 bg-primary"
@@ -44,17 +48,6 @@ function CategoryImage({
         aria-label={alt}
       />
     );
-
-    return (
-      // eslint-disable-next-line @next/next/no-img-element
-      <img
-        src={src}
-        width={size}
-        height={size}
-        alt={alt}
-        className="shrink-0 object-contain"
-      />
-    );
   }
 
   return (
@@ -65,6 +58,7 @@ function CategoryImage({
       height={size}
       alt={alt}
       loading="lazy"
+      className="shrink-0 object-contain"
       onError={(event) => {
         event.currentTarget.src = "/assets/images/food-image.png";
       }}
@@ -107,7 +101,9 @@ const CategoryScroll = ({
   className,
 }: Props) => {
   const segment = usePathname()?.split("/").filter(Boolean)[0];
-  const proxyBase = segment != null ? `/${segment}` : null;
+  const usesColoredSvg =
+    segment != null &&
+    COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
   const { renderer: Renderer, imageSize } = variantConfig[variant];
 
   const handleSelect = (categoryId: string) => () => onSelect(categoryId);
@@ -147,7 +143,7 @@ const CategoryScroll = ({
               src={item.avatarUrl || "/assets/images/food-image.png"}
               size={imageSize}
               alt="category image"
-              // proxyBase={proxyBase}
+              tintWithPrimary={!usesColoredSvg}
             />
             <span className="text-xs text-foreground text-center">
               {item.title}