Add category detail URLs and polish mega menu UX.

Route categories to /products/category/{id}/{slug}, improve menu hover/layout, and hide stock/category clutter on product cards.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/products/[id]/[slug]/page.tsx

@@ -149,9 +149,11 @@ export default async function ProductDetailsPage({
                 )}
               </p>
             </div>
-            <p className={`mt-2 text-[13px] ${inStock ? "text-emerald-600" : "text-brand"}`}>
-              {inStock ? "موجود در فروشگاه" : "ناموجود"}
-            </p>
+            {price != null ? (
+              <p className={`mt-2 text-[13px] ${inStock ? "text-emerald-600" : "text-brand"}`}>
+                {inStock ? "موجود در فروشگاه" : "ناموجود"}
+              </p>
+            ) : null}
 
             {variants.length > 1 ? (
               <div className="mt-5 flex flex-wrap gap-2">

app/products/category/[id]/[slug]/page.tsx

@@ -0,0 +1,79 @@
+import type { Metadata } from "next";
+import { notFound, redirect } from "next/navigation";
+import { Container } from "@/components/Container";
+import { PageHero } from "@/components/layout/PageHero";
+import { ProductsListing } from "@/components/products/ProductsListing";
+import {
+  categoryHref,
+  categoryNameSlug,
+  fetchCategoryById,
+} from "@/lib/categories";
+import { loadCategoryProducts } from "@/lib/products-list";
+
+export const revalidate = 60;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string; slug: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const category = await fetchCategoryById(id);
+  if (!category) return { title: "دسته‌بندی" };
+  const title = category.nameFa?.trim() || category.name?.trim() || "دسته‌بندی";
+  return {
+    title,
+    description: category.description?.trim() || `محصولات دسته ${title} در فروشگاه برادران برقعی`,
+  };
+}
+
+export default async function CategoryProductsPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string; slug: string }>;
+  searchParams: Promise<{ page?: string }>;
+}) {
+  const { id, slug } = await params;
+  const { page: pageParam } = await searchParams;
+  const page = Math.max(1, Number(pageParam) || 1);
+
+  const category = await fetchCategoryById(id);
+  if (!category || category.isActive === false) notFound();
+
+  const title = category.nameFa?.trim() || category.name?.trim() || "دسته‌بندی";
+  const canonicalSlug = categoryNameSlug(title);
+  if (decodeURIComponent(slug) !== canonicalSlug) {
+    const href = categoryHref(category);
+    redirect(page > 1 ? `${href}?page=${page}` : href);
+  }
+
+  const { products, total, pageCount } = await loadCategoryProducts({
+    page,
+    pageSize: 20,
+    categoryId: String(category.id),
+  });
+
+  const baseHref = categoryHref(category);
+
+  return (
+    <>
+      <PageHero
+        kicker="Category"
+        title={title}
+        image="/images/lifestyle/franco-debartolo-AXC2vD7y_ho-unsplash.jpg"
+      />
+      <section className="py-10 sm:py-14">
+        <Container>
+          <ProductsListing
+            products={products}
+            total={total}
+            page={page}
+            pageCount={pageCount}
+            pageHref={(number) => (number > 1 ? `${baseHref}?page=${number}` : baseHref)}
+          />
+        </Container>
+      </section>
+    </>
+  );
+}

app/products/page.tsx

@@ -1,16 +1,10 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import { redirect } from "next/navigation";
 import { Container } from "@/components/Container";
 import { PageHero } from "@/components/layout/PageHero";
-import { ProductCard } from "@/components/ui/ProductCard";
-import { getNavCategories } from "@/lib/categories";
-import { faDigits } from "@/lib/format";
-import {
-  catalogProductToCard,
-  fetchCatalogProducts,
-  fetchStoreItems,
-  variantToProduct,
-} from "@/lib/store";
+import { ProductsListing } from "@/components/products/ProductsListing";
+import { categoryHref, fetchCategoryById } from "@/lib/categories";
+import { loadCategoryProducts } from "@/lib/products-list";
 
 export const revalidate = 60;
 
@@ -30,21 +24,21 @@ export default async function ProductsPage({
   const q = params.q?.trim();
   const name = q && q.length > 2 ? q : undefined;
 
-  const [storeResult, catalogResult, nav] = await Promise.all([
-    fetchStoreItems({ page, pageSize: 20, categoryId, name }),
-    fetchCatalogProducts({ page, pageSize: 20, categoryId, name }),
-    getNavCategories(),
-  ]);
+  // Legacy ?categoryId= → canonical /products/category/{id}/{slug}
+  if (categoryId) {
+    const category = await fetchCategoryById(categoryId);
+    if (category) {
+      const href = categoryHref(category);
+      const query = new URLSearchParams();
+      if (page > 1) query.set("page", String(page));
+      if (q) query.set("q", q);
+      const qs = query.toString();
+      redirect(qs ? `${href}?${qs}` : href);
+    }
+  }
 
-  const fromStore = storeResult.items.map(variantToProduct);
-  const products = fromStore.length ? fromStore : catalogResult.items.map(catalogProductToCard);
-  const total = fromStore.length ? storeResult.total : catalogResult.total;
-  const pageSize = fromStore.length ? storeResult.pageSize : catalogResult.pageSize;
-  const pageCount = Math.max(1, Math.ceil((total || products.length) / (pageSize || 20)));
-  const categoryTitle = nav
-    .flatMap((item) => [item, ...item.children.map((child) => ({ ...child, children: [] as never[] }))])
-    .find((item) => item.id === categoryId)?.title;
-  const heroTitle = categoryTitle || (q ? `جستجو: ${q}` : "محصولات");
+  const { products, total, pageCount } = await loadCategoryProducts({ page, pageSize: 20, name });
+  const heroTitle = q ? `جستجو: ${q}` : "محصولات";
 
   return (
     <>
@@ -55,41 +49,19 @@ export default async function ProductsPage({
       />
       <section className="py-10 sm:py-14">
         <Container>
-          {total ? <p className="mb-6 text-[13px] text-muted">{faDigits(total)} کالا</p> : null}
-
-          {products.length === 0 ? (
-            <div className="rounded-2xl border border-line bg-white px-6 py-16 text-center">
-              <p className="text-[15px] font-bold text-ink">محصولی برای نمایش وجود ندارد</p>
-              <p className="mt-2 text-[13px] text-muted">به‌زودی موجودی فروشگاه از پنل Meshkee اینجا دیده می‌شود.</p>
-            </div>
-          ) : (
-            <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-              {products.map((product) => (
-                <ProductCard key={product.id} product={product} />
-              ))}
-            </div>
-          )}
-
-          {pageCount > 1 ? (
-            <div className="mt-8 flex justify-center gap-2">
-              {Array.from({ length: pageCount }, (_, index) => {
-                const number = index + 1;
-                const query = new URLSearchParams();
-                if (categoryId) query.set("categoryId", categoryId);
-                if (q) query.set("q", q);
-                query.set("page", String(number));
-                return (
-                  <Link
-                    key={number}
-                    href={`/products?${query.toString()}`}
-                    className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
-                  >
-                    {faDigits(number)}
-                  </Link>
-                );
-              })}
-            </div>
-          ) : null}
+          <ProductsListing
+            products={products}
+            total={total}
+            page={page}
+            pageCount={pageCount}
+            pageHref={(number) => {
+              const query = new URLSearchParams();
+              if (q) query.set("q", q);
+              if (number > 1) query.set("page", String(number));
+              const qs = query.toString();
+              return qs ? `/products?${qs}` : "/products";
+            }}
+          />
         </Container>
       </section>
     </>