space fit

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

@@ -19,17 +19,7 @@ const SVG_MASK_STYLE = {
   WebkitMaskPosition: "center",
 } as const;
 
-function CategoryImage({
+function CategoryImage({ src, size, alt, tintWithPrimary = true }: { src: string; size: number; alt: string; tintWithPrimary?: boolean }) {
-  src,
-  size,
-  alt,
-  tintWithPrimary = true,
-}: {
-  src: string;
-  size: number;
-  alt: string;
-  tintWithPrimary?: boolean;
-}) {
   const isSvg = src.endsWith(".svg");
   const shouldUseSvgMask = isSvg && tintWithPrimary;
 
@@ -93,29 +83,15 @@ type Props = {
   className?: string;
 };
 
-const CategoryScroll = ({
+const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "large", className }: Props) => {
-  categories,
-  selectedCategory,
-  onSelect,
-  variant = "large",
-  className,
-}: Props) => {
   const segment = usePathname()?.split("/").filter(Boolean)[0];
-  const usesColoredSvg =
+  const usesColoredSvg = segment != null && COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
-    segment != null &&
-    COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
   const { renderer: Renderer, imageSize } = variantConfig[variant];
 
   const handleSelect = (categoryId: string) => () => onSelect(categoryId);
 
   return (
-    <HorizontalScrollView
+    <HorizontalScrollView className={clsx("w-full noscrollbar py-2!", variant === "large" && "mt-3!", className)}>
-      className={clsx(
-        "w-full noscrollbar py-4!",
-        variant === "large" && "mt-4!",
-        className,
-      )}
-    >
       {/* <Renderer
         key="all"
         className={clsx(selectedCategory === "0" && "bg-container!")}
@@ -134,20 +110,9 @@ const CategoryScroll = ({
         const isSelected = item.id === selectedCategory;
 
         return (
-          <Renderer
+          <Renderer key={item.id} className={clsx(isSelected && "bg-container!")} onClick={handleSelect(item.id)}>
-            key={item.id}
+            <CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} />
-            className={clsx(isSelected && "bg-container!")}
+            <span className="text-xs text-foreground text-center">{item.title}</span>
-            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">
-              {item.title}
-            </span>
           </Renderer>
         );
       })}

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

@@ -18,22 +18,13 @@ import { useTranslation } from "react-i18next";
 import { useGetCategories, useGetFoods } from "../hooks/useMenuData";
 import type { Category, Food } from "../types/Types";
 
-const sortings = [
+const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;
-  "PopularityDescending",
-  "RateDescending",
-  "PriceAscending",
-  "PriceDescending",
-] as const;
 
 const MenuIndex = () => {
   const { data: foodsData, isLoading: foodsLoading } = useGetFoods();
-  const { data: categoriesData, isLoading: categoriesLoading } =
+  const { data: categoriesData, isLoading: categoriesLoading } = useGetCategories();
-    useGetCategories();
   const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
-  const categories = useMemo<Category[]>(
+  const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);
-    () => categoriesData?.data || [],
-    [categoriesData?.data],
-  );
 
   const isLoading = foodsLoading || categoriesLoading;
   const { t: tCommon } = useTranslation("common");
@@ -45,19 +36,11 @@ const MenuIndex = () => {
   const [selectedCategory, setSelectedCategory] = useQueryState("category", {
     defaultValue: "0",
   });
-  const [selectedIngredients, setSelectedIngredients] = useQueryState(
+  const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" });
-    "ingredients",
+  const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState("delivery", { defaultValue: "0" });
-    { defaultValue: "" },
+  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> = useRef(null);
-  );
-  const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState(
-    "delivery",
-    { defaultValue: "0" },
-  );
-  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> =
-    useRef(null);
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
-  const [smallCategoriesVisible, setSmallCategoriesVisibility] =
+  const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
-    useState(false);
   const [isInitialMount, setIsInitialMount] = useState(true);
 
   useEffect(() => {
@@ -68,13 +51,7 @@ const MenuIndex = () => {
       setSorting(null);
       setIsInitialMount(false);
     }
-  }, [
+  }, [isInitialMount, setSearch, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
-    isInitialMount,
-    setSearch,
-    setSelectedIngredients,
-    setSelectedDeliveryId,
-    setSorting,
-  ]);
 
   useEffect(() => {
     if (categoriesData?.data && selectedCategory === "0") {
@@ -92,9 +69,7 @@ const MenuIndex = () => {
 
     const handleScroll = () => {
       if (!smallCategoriesRef.current) return;
-      setSmallCategoriesVisibility(
+      setSmallCategoriesVisibility(scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop);
-        scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop,
-      );
     };
 
     scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
@@ -122,9 +97,7 @@ const MenuIndex = () => {
   const sortingIndex = Number(sorting);
   const activeSortingIndex = Number.isNaN(sortingIndex) ? 0 : sortingIndex;
   const activeSortingKey = sortings[activeSortingIndex] ?? sortings[0];
-  const activeSortingLabel = tMenu(
+  const activeSortingLabel = tMenu(`MenuSortingDrawer.Options.${activeSortingKey}`);
-    `MenuSortingDrawer.Options.${activeSortingKey}`,
-  );
 
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
@@ -148,43 +121,26 @@ const MenuIndex = () => {
   const filteredReceiptItems = useMemo(() => {
     if (!foods.length) return [];
     const lowerSearch = search.toLowerCase();
-    const lowerIngredients = selectedIngredients
+    const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : "";
-      ? selectedIngredients.toLowerCase()
-      : "";
     const selectedCatId = selectedCategory === "0" ? null : selectedCategory;
 
     const filtered = foods.filter((item) => {
       const matchesCategory = !selectedCatId || item.category === selectedCatId;
       const itemName = item.title;
-      const matchesSearch =
+      const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);
-        !search || itemName.toLowerCase().includes(lowerSearch);
 
       const matchesIngredients =
         !selectedIngredients ||
         (() => {
-          if (
+          if (item.content && Array.isArray(item.content) && item.content.length > 0) {
-            item.content &&
+            return item.content.some((content: string) => content.toLowerCase().includes(lowerIngredients));
-            Array.isArray(item.content) &&
-            item.content.length > 0
-          ) {
-            return item.content.some((content: string) =>
-              content.toLowerCase().includes(lowerIngredients),
-            );
           }
           return item.desc.toLowerCase().includes(lowerIngredients);
         })();
 
-      const matchesDelivery =
+      const matchesDelivery = selectedDeliveryId === "0" || (selectedDeliveryId === "pickup" && item.pickupServe) || (selectedDeliveryId === "inPlace" && item.inPlaceServe);
-        selectedDeliveryId === "0" ||
-        (selectedDeliveryId === "pickup" && item.pickupServe) ||
-        (selectedDeliveryId === "inPlace" && item.inPlaceServe);
 
-      return (
+      return matchesCategory && matchesSearch && matchesIngredients && matchesDelivery;
-        matchesCategory &&
-        matchesSearch &&
-        matchesIngredients &&
-        matchesDelivery
-      );
     });
 
     const sortingKey = sortings[Number(sorting)] || sortings[0];
@@ -202,65 +158,30 @@ const MenuIndex = () => {
           return 0;
       }
     });
-  }, [
+  }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, sorting]);
-    selectedCategory,
-    search,
-    selectedIngredients,
-    selectedDeliveryId,
-    foods,
-    sorting,
-  ]);
 
   if (isLoading) {
     return <MenuSkeleton />;
   }
 
   return (
-    <div
+    <div className="flex flex-col gap-4 items-center pt-5 mb-8" ref={wrapperRef}>
-      className="flex flex-col gap-4 items-center pt-8 mb-8"
-      ref={wrapperRef}
-    >
       <div className="w-full">
-        <SearchBox
+        <SearchBox value={search} placeholder={tCommon("SearchPlaceholder")} onChange={updateSearch} />
-          value={search}
+        <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
-          placeholder={tCommon("SearchPlaceholder")}
-          onChange={updateSearch}
-        />
-        <CategoryScroll
-          categories={categories}
-          selectedCategory={selectedCategory}
-          onSelect={updateCategory}
-        />
       </div>
 
       <section className="w-full">
-        <div
+        <div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
-          className="flex flex-wrap gap-2 items-center relative"
+          <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
-          ref={smallCategoriesRef}
-        >
-          <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">
-            {selectedCategory === "0"
-              ? ""
-              : categories.find((c) => c.id === selectedCategory)?.title || ""}
-          </span>
           <div className="flex min-w-[247px] flex-1 gap-2 justify-end items-center">
-            <button
+            <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
-              onClick={toggleFilterModal}
-              className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]"
-            >
               <Candle2 className="stroke-foreground" size={16} />
-              <span className="text-xs leading-5 font-medium whitespace-nowrap">
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
-                {tMenu("MenuFilterDrawer.Label")}
-              </span>
             </button>
-            <button
+            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2">
-              onClick={toggleSortingModal}
-              className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2"
-            >
               <TextAlignIcon className="text-foreground" />
-              <span className="text-xs leading-5 font-medium whitespace-nowrap">
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
-                {activeSortingLabel}
-              </span>
             </button>
           </div>
         </div>
@@ -275,24 +196,14 @@ const MenuIndex = () => {
             opacity: smallCategoriesVisible ? 1 : 0,
           }}
           transition={{ duration: 0.1 }}
-          className={clsx(
+          className={clsx("fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20", !smallCategoriesVisible && "pointer-events-none")}
-            "fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20",
-            !smallCategoriesVisible && "pointer-events-none",
-          )}
         >
-          <CategoryScroll
+          <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} variant="small" />
-            categories={categories}
-            selectedCategory={selectedCategory}
-            onSelect={updateCategory}
-            variant="small"
-          />
         </motion.div>
 
         <VerticalScrollView className="mt-5! overflow-y-auto h-full">
           {filteredReceiptItems.length === 0 ? (
-            <div className="text-center text-foreground/60 py-8">
+            <div className="text-center text-foreground/60 py-8">{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}</div>
-              {foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}
-            </div>
           ) : (
             filteredReceiptItems.map((food) => (
               <MenuItemRenderer key={food.id}>
@@ -314,14 +225,7 @@ const MenuIndex = () => {
         tMenu={tMenu}
       />
 
-      <MenuSortingDrawer
+      <MenuSortingDrawer visible={sortingModal} onClose={toggleSortingModal} sortings={sortings} activeIndex={activeSortingIndex} onSelect={changeSorting} tMenu={tMenu} />
-        visible={sortingModal}
-        onClose={toggleSortingModal}
-        sortings={sortings}
-        activeIndex={activeSortingIndex}
-        onSelect={changeSorting}
-        tMenu={tMenu}
-      />
     </div>
   );
 };

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

@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { Skeleton } from "@/components/ui/skeleton";
-import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import VerticalScrollView from "@/components/listview/VerticalScrollView";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const MenuSkeleton = () => {
   return (
-    <div className="flex flex-col gap-4 items-center pt-8 mb-8">
+    <div className="flex flex-col gap-4 items-center pt-5 mb-8">
       <div className="w-full">
         <Skeleton className="h-12 w-full rounded-xl mb-4" />
         <div className="flex gap-3 overflow-x-hidden py-4">