deactive category

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

@@ -6,7 +6,7 @@ import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRe
 import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
 import clsx from "clsx";
 import { usePathname } from "next/navigation";
-import { GLASS_SURFACE_SELECTED } from "@/lib/styles/glassSurface";
+import { GLASS_SURFACE_DISABLED, GLASS_SURFACE_SELECTED } from "@/lib/styles/glassSurface";
 
 /** TODO: remove when backend sends avatarRenderMode */
 const COLORED_SVG_RESTAURANT_SLUGS = new Set(["havasone"]);
@@ -20,14 +20,14 @@ const SVG_MASK_STYLE = {
   WebkitMaskPosition: "center",
 } as const;
 
-function CategoryImage({ src, size, alt, tintWithPrimary = true }: { src: string; size: number; alt: string; tintWithPrimary?: boolean }) {
+function CategoryImage({ src, size, alt, tintWithPrimary = true, disabled = false }: { src: string; size: number; alt: string; tintWithPrimary?: boolean; disabled?: boolean }) {
   const isSvg = src.endsWith(".svg");
   const shouldUseSvgMask = isSvg && tintWithPrimary;
 
   if (shouldUseSvgMask) {
     return (
       <div
-        className="shrink-0 bg-primary"
+        className={clsx("shrink-0 bg-primary", disabled && "opacity-40")}
         style={{
           width: size,
           height: size,
@@ -49,7 +49,7 @@ function CategoryImage({ src, size, alt, tintWithPrimary = true }: { src: string
       height={size}
       alt={alt}
       loading="lazy"
-      className="shrink-0 object-contain"
+      className={clsx("shrink-0 object-contain", disabled && "opacity-40")}
       onError={(event) => {
         event.currentTarget.src = "/assets/images/food-image.png";
       }}
@@ -109,11 +109,21 @@ const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "lar
       </Renderer> */}
       {categories.map((item) => {
         const isSelected = item.id === selectedCategory;
+        const isDisabled = !item.isActive;
 
         return (
-          <Renderer key={item.id} className={clsx(isSelected && GLASS_SURFACE_SELECTED)} onClick={handleSelect(item.id)}>
-            <CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} />
-            <span className="text-xs text-foreground text-center whitespace-nowrap">{item.title}</span>
+          <Renderer
+            key={item.id}
+            className={clsx(
+              isDisabled && GLASS_SURFACE_DISABLED,
+              isDisabled && "cursor-not-allowed",
+              isSelected && !isDisabled && GLASS_SURFACE_SELECTED,
+            )}
+            onClick={isDisabled ? undefined : handleSelect(item.id)}
+            aria-disabled={isDisabled}
+          >
+            <CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} disabled={isDisabled} />
+            <span className={clsx("text-xs text-center whitespace-nowrap", isDisabled ? "text-disabled-text" : "text-foreground")}>{item.title}</span>
           </Renderer>
         );
       })}

src/lib/styles/glassSurface.ts

@@ -3,6 +3,7 @@ import clsx, { type ClassValue } from "clsx";
 export const GLASS_SURFACE = "glass-surface";
 export const GLASS_SURFACE_FLAT = "glass-surface--flat";
 export const GLASS_SURFACE_SELECTED = "glass-surface--selected";
+export const GLASS_SURFACE_DISABLED = "glass-surface--disabled";
 export const GLASS_SURFACE_NAV = "glass-surface-nav";
 
 export function glassSurfaceNav(...extra: ClassValue[]) {

src/styles/glass.css

@@ -32,6 +32,58 @@ html[data-theme="dark"] .glass-surface--selected {
   background-color: color-mix(in oklch, var(--container) 85%, transparent) !important;
 }
 
+/* Figma disabled category: white 40%, 2px inner gradient border, blur 12 */
+.glass-surface--disabled {
+  position: relative;
+  background-color: rgba(255, 255, 255, 0.4) !important;
+  border: none;
+  box-shadow: none;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+
+.glass-surface--disabled::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 253, 253, 0) 50%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+html[data-pattern-bg="true"] .glass-surface--disabled,
+html[data-image-bg="true"] .glass-surface--disabled {
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+html[data-theme="dark"] .glass-surface--disabled {
+  background-color: color-mix(in oklch, var(--container) 40%, transparent) !important;
+}
+
+html[data-theme="dark"] .glass-surface--disabled::before {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.35) 0%,
+    rgba(255, 255, 255, 0) 50%,
+    rgba(255, 255, 255, 0.35) 100%
+  );
+}
+
 .glass-surface-nav {
   background-color: rgba(255, 255, 255, 0.32);
   border: 1px solid rgba(255, 255, 255, 0.8);