fix(ci): validate active catalog navigation components

workloads/ecommerce/src/components/catalog/CatalogRouteBoundary.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { usePathname, useSearchParams } from "next/navigation";
-
-type CatalogRouteBoundaryProps = {
-  children: ReactNode;
-};
-
-/**
- * Fuerza el remontaje del árbol del catálogo cuando cambia:
- * - pathname
- * - category
- * - collection
- * - section
- * - búsqueda, orden u otros parámetros
- *
- * Esto evita que useState/useMemo conserven filtros de una navegación anterior.
- */
-export default function CatalogRouteBoundary({
-  children,
-}: CatalogRouteBoundaryProps) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const navigationKey = `${pathname}?${searchParams.toString()}`;
-
-  return <div key={navigationKey}>{children}</div>;
-}

workloads/ecommerce/src/components/navigation/CategoryMenu.module.css

@@ -1,89 +0,0 @@
-.navigation {
-  align-items: center;
-  background: #020617;
-  border-bottom: 3px solid #cbd5e1;
-  box-sizing: border-box;
-  display: flex;
-  gap: 30px;
-  min-height: 72px;
-  overflow-x: auto;
-  padding: 0 32px;
-  scrollbar-width: none;
-  width: 100%;
-}
-
-.navigation::-webkit-scrollbar {
-  display: none;
-}
-
-.menuButton {
-  align-items: center;
-  display: inline-flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  gap: 5px;
-  justify-content: center;
-  min-height: 44px;
-  min-width: 44px;
-  text-decoration: none;
-}
-
-.menuButton span {
-  background: #f8fafc;
-  border-radius: 999px;
-  display: block;
-  height: 3px;
-  width: 22px;
-}
-
-.links {
-  align-items: stretch;
-  display: flex;
-  gap: clamp(28px, 4vw, 62px);
-  min-width: max-content;
-}
-
-.link {
-  align-items: center;
-  border-bottom: 3px solid transparent;
-  color: #f8fafc;
-  display: inline-flex;
-  font-size: 16px;
-  font-weight: 800;
-  min-height: 69px;
-  padding: 0 2px;
-  text-decoration: none;
-  transition:
-    border-color 160ms ease,
-    color 160ms ease,
-    opacity 160ms ease;
-  white-space: nowrap;
-}
-
-.link:hover,
-.link:focus-visible {
-  color: #ffffff;
-  opacity: 0.82;
-  outline: none;
-}
-
-.active {
-  border-bottom-color: #ffffff;
-}
-
-@media (max-width: 900px) {
-  .navigation {
-    gap: 18px;
-    min-height: 64px;
-    padding: 0 18px;
-  }
-
-  .links {
-    gap: 28px;
-  }
-
-  .link {
-    font-size: 14px;
-    min-height: 61px;
-  }
-}

workloads/ecommerce/src/components/navigation/CategoryMenu.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { usePathname, useSearchParams } from "next/navigation";
-import styles from "./CategoryMenu.module.css";
-
-type MenuItem = {
-  label: string;
-  href: string;
-};
-
-/**
- * Menú principal ARI Shopping.
- *
- * Hotfix de estabilidad:
- * Se utilizan enlaces HTML nativos para que cada cambio de categoría
- * realice una navegación completa. Esto evita conservar estados obsoletos
- * del catálogo cuando únicamente cambia el query string.
- */
-const MENU_ITEMS: readonly MenuItem[] = [
-  {
-    label: "Juguetes para bebés",
-    href: "/catalog?category=Figuras",
-  },
-  {
-    label: "Educativos",
-    href: "/catalog?category=Figuras&section=educativos",
-  },
-  {
-    label: "Muñecas y peluches",
-    href: "/catalog?category=Peluches",
-  },
-  {
-    label: "Acción y aventura",
-    href: "/catalog?collection=Marvel",
-  },
-  {
-    label: "Mochilas",
-    href: "/catalog?category=Mochilas",
-  },
-  {
-    label: "Variedades",
-    href: "/catalog",
-  },
-];
-
-function normalizeUrl(pathname: string, query: string): string {
-  return query ? `${pathname}?${query}` : pathname;
-}
-
-export default function CategoryMenu() {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const currentUrl = normalizeUrl(pathname, searchParams.toString());
-
-  return (
-    <nav className={styles.navigation} aria-label="Categorías principales">
-      <a
-        className={styles.menuButton}
-        href="/catalog"
-        aria-label="Abrir catálogo"
-        title="Abrir catálogo"
-      >
-        <span aria-hidden="true" />
-        <span aria-hidden="true" />
-        <span aria-hidden="true" />
-      </a>
-
-      <div className={styles.links}>
-        {MENU_ITEMS.map((item) => {
-          const active = currentUrl === item.href;
-
-          return (
-            <a
-              key={`${item.label}:${item.href}`}
-              href={item.href}
-              className={`${styles.link}${active ? ` ${styles.active}` : ""}`}
-              aria-current={active ? "page" : undefined}
-              data-navigation-mode="document"
-            >
-              {item.label}
-            </a>
-          );
-        })}
-      </div>
-    </nav>
-  );
-}