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/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>
     </>