From ac9f3d9f6f7475f41cb099be7e2c99dfae2b4c9a Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Wed, 27 Nov 2024 09:28:01 +0700
Subject: [PATCH 01/39] Update desktop menu animation

---
 app/modules/header/menu/desktop-menu.tsx | 4 ++--
 tailwind.config.js                       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/modules/header/menu/desktop-menu.tsx b/app/modules/header/menu/desktop-menu.tsx
index 3fb21a9d..0fa761d3 100644
--- a/app/modules/header/menu/desktop-menu.tsx
+++ b/app/modules/header/menu/desktop-menu.tsx
@@ -173,8 +173,8 @@ function SlideIn(props: {
       )}
       style={
         {
-          "--left-distance": "60px",
-          "--slide-left-and-fade-duration": "200ms",
+          "--left-distance": "40px",
+          "--slide-left-and-fade-duration": "400ms",
           ...style,
         } as React.CSSProperties
       }
diff --git a/tailwind.config.js b/tailwind.config.js
index f962d2eb..a6ad4d99 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,7 +50,7 @@ export default {
         underline: "underline 400ms linear",
         "fade-in": "fade-in var(--fade-in-duration, .5s) ease-in forwards",
         "slide-left-and-fade":
-          "slide-left-and-fade var(--slide-left-and-fade-duration, .5s) cubic-bezier(0.14, 0.8, 0.6, 1) forwards",
+          "slide-left-and-fade var(--slide-left-and-fade-duration, .5s) cubic-bezier(.165,.84,.44,1) forwards",
       },
       borderWidth: {
         6: "6px",

From eb173a7d1cdb031fc82cf3a95de59978defb4204 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Wed, 27 Nov 2024 10:35:09 +0700
Subject: [PATCH 02/39] Refactor country selector's onClick handler for
 improved readability and inline function usage

---
 app/modules/country-selector.tsx | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/modules/country-selector.tsx b/app/modules/country-selector.tsx
index 04807803..a81d6080 100644
--- a/app/modules/country-selector.tsx
+++ b/app/modules/country-selector.tsx
@@ -101,25 +101,24 @@ export function CountrySelector() {
                   countryLocale.language === selectedLocale.language &&
                   countryLocale.country === selectedLocale.country;
 
-                let countryUrlPath = getCountryUrlPath({
-                  countryLocale,
-                  defaultLocalePrefix,
-                  pathWithoutLocale,
-                });
-                let onChangeLocale = () =>
-                  handleLocaleChange({
-                    redirectTo: countryUrlPath,
-                    buyerIdentity: {
-                      countryCode: countryLocale.country,
-                    },
-                  });
                 return (
                   <CloseButton
                     as="button"
                     key={countryPath}
                     type="button"
-                    onClick={onChangeLocale}
-                    className="text-white bg-neutral-800 hover:bg-gray-100 w-full p-2 transition flex gap-2 items-center text-left cursor-pointer py-2 px-4 text-sm"
+                    onClick={() =>
+                      handleLocaleChange({
+                        redirectTo: getCountryUrlPath({
+                          countryLocale,
+                          defaultLocalePrefix,
+                          pathWithoutLocale,
+                        }),
+                        buyerIdentity: {
+                          countryCode: countryLocale.country,
+                        },
+                      })
+                    }
+                    className="text-white bg-neutral-800 hover:bg-neutral-600 w-full p-2 transition flex gap-2 items-center text-left cursor-pointer py-2 px-4 text-sm"
                   >
                     <ReactCountryFlag
                       svg

From 674057d0ca1978bbbfc6d6268973ad97c03859d1 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 12:08:38 +0700
Subject: [PATCH 03/39] Optimize mobile menu render with collapsible comp

---
 app/modules/header/index.tsx            |  29 +--
 app/modules/header/menu/mobile-menu.tsx | 297 +++++++-----------------
 package-lock.json                       |  49 +++-
 package.json                            |   3 +-
 4 files changed, 135 insertions(+), 243 deletions(-)

diff --git a/app/modules/header/index.tsx b/app/modules/header/index.tsx
index 92b6bda3..af9a343d 100644
--- a/app/modules/header/index.tsx
+++ b/app/modules/header/index.tsx
@@ -8,7 +8,6 @@ import type { RootLoader } from "~/root";
 import { CartLoading } from "../cart-loading";
 import { Drawer, useDrawer } from "../drawer";
 import { DesktopHeader } from "./desktop-header";
-import { MobileMenu } from "./menu/mobile-menu";
 import { MobileHeader } from "./mobile-header";
 import { ScrollingAnnouncement } from "./scrolling-announcement";
 
@@ -39,10 +38,7 @@ export function Header({
 
   return (
     <>
-      <CartDrawer isOpen={isCartOpen} onClose={closeCart} />
-      {menu && (
-        <MenuDrawer isOpen={isMenuOpen} onClose={closeMenu} menu={menu} />
-      )}
+      {/* <CartDrawer isOpen={isCartOpen} onClose={closeCart} /> */}
       <ScrollingAnnouncement />
       <DesktopHeader shopName={shopName} menu={menu} openCart={openCart} />
       <MobileHeader
@@ -81,26 +77,3 @@ function CartDrawer({
     </Drawer>
   );
 }
-
-export function MenuDrawer({
-  isOpen,
-  onClose,
-  menu,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-  menu: EnhancedMenu;
-}) {
-  return (
-    <Drawer
-      bordered
-      open={isOpen}
-      onClose={onClose}
-      openFrom="left"
-      heading="MENU"
-      spacing="sm"
-    >
-      <MobileMenu menu={menu} />
-    </Drawer>
-  );
-}
diff --git a/app/modules/header/menu/mobile-menu.tsx b/app/modules/header/menu/mobile-menu.tsx
index 1d366ded..6e345afd 100644
--- a/app/modules/header/menu/mobile-menu.tsx
+++ b/app/modules/header/menu/mobile-menu.tsx
@@ -1,228 +1,99 @@
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from "@headlessui/react";
-import { Link } from "@remix-run/react";
-import { Image } from "@shopify/hydrogen";
-import clsx from "clsx";
-import { IconCaretDown, IconCaretRight } from "~/components/icons";
-import { getMaxDepth } from "~/lib/menu";
+import { CaretRight, List, X } from "@phosphor-icons/react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useRouteLoaderData } from "@remix-run/react";
+import { forwardRef } from "react";
+import Link from "~/components/link";
+import { cn } from "~/lib/cn";
 import type { SingleMenuItem } from "~/lib/type";
 import type { EnhancedMenu } from "~/lib/utils";
-import { Drawer, useDrawer } from "~/modules/drawer";
+import type { RootLoader } from "~/root";
 
-export function MobileMenu({ menu }: { menu: EnhancedMenu }) {
-  let items = menu.items as unknown as SingleMenuItem[];
-  return (
-    <nav className="grid px-4 py-2 w-[360px]">
-      {items.map((item, id) => {
-        let { title, ...rest } = item;
-        let level = getMaxDepth(item);
-        let isResourceType =
-          item.items.length &&
-          item.items.every((item) => item?.resource !== null);
-        let Comp: React.FC<SingleMenuItem> = isResourceType
-          ? ImageMenu
-          : level > 2
-            ? MultiMenu
-            : level === 2
-              ? SingleMenu
-              : ItemHeader;
-        return <Comp key={id} title={title} {...rest} />;
-      })}
-    </nav>
-  );
-}
+export function MobileMenu() {
+  let data = useRouteLoaderData<RootLoader>("root");
+  let menu = data?.layout?.headerMenu as EnhancedMenu;
 
-function MultiMenu(props: SingleMenuItem) {
-  const {
-    isOpen: isMenuOpen,
-    openDrawer: openMenu,
-    closeDrawer: closeMenu,
-  } = useDrawer();
-  let { title, to, items } = props;
-  let content = (
-    <Drawer
-      open={isMenuOpen}
-      onClose={closeMenu}
-      openFrom="left"
-      heading={title}
-      isBackMenu
-      bordered
-      spacing="sm"
-    >
-      <div className="grid px-4 py-2 overflow-auto w-[360px]">
-        {items.map((item, id) => (
-          <div key={id}>
-            <Disclosure>
-              {({ open }) => (
-                <>
-                  <DisclosureButton className="text-left w-full">
-                    <h5 className="flex justify-between py-3 w-full uppercase font-medium">
-                      <Link to={item.to} prefetch="intent">
-                        {item.title}
-                      </Link>
-                      {item?.items?.length > 0 && (
-                        <span className="md:hidden">
-                          {open ? (
-                            <IconCaretDown className="w-4 h-4" />
-                          ) : (
-                            <IconCaretRight className="w-4 h-4" />
-                          )}
-                        </span>
-                      )}
-                    </h5>
-                  </DisclosureButton>
-                  {item?.items?.length > 0 ? (
-                    <div
-                      className={clsx(
-                        "overflow-hidden transition-all duration-300",
-                        open ? "max-h-48 h-fit" : "max-h-0 md:max-h-fit",
-                      )}
-                    >
-                      <DisclosurePanel static>
-                        <ul className="space-y-3 pb-3 pt-2">
-                          {item.items.map((subItem, ind) => (
-                            <li key={ind} className="leading-6">
-                              <Link key={ind} to={subItem.to} prefetch="intent">
-                                {subItem.title}
-                              </Link>
-                            </li>
-                          ))}
-                        </ul>
-                      </DisclosurePanel>
-                    </div>
-                  ) : null}
-                </>
-              )}
-            </Disclosure>
-          </div>
-        ))}
-      </div>
-    </Drawer>
-  );
-  return (
-    <div className="">
-      <div
-        className="flex justify-between items-center py-3"
-        role="button"
-        onClick={openMenu}
-      >
-        <Link to={to} prefetch="intent">
-          <span className="uppercase font-medium">{title}</span>
-        </Link>
-        <IconCaretRight className="w-4 h-4" />
-      </div>
-      {content}
-    </div>
-  );
-}
+  if (!menu) return <MenuTrigger />;
 
-function ImageMenu({ title, items, to }: SingleMenuItem) {
-  const {
-    isOpen: isMenuOpen,
-    openDrawer: openMenu,
-    closeDrawer: closeMenu,
-  } = useDrawer();
-  let content = (
-    <Drawer
-      open={isMenuOpen}
-      onClose={closeMenu}
-      openFrom="left"
-      heading={title}
-      isBackMenu
-      bordered
-      spacing="sm"
-    >
-      <div className="grid px-4 py-5 gap-3 grid-cols-2 w-[360px]">
-        {items.map((item, id) => (
-          <Link to={item.to} prefetch="intent" key={id}>
-            <div className="w-full aspect-square relative">
-              <Image
-                data={item.resource?.image}
-                className="w-full h-full object-cover"
-                sizes="auto"
-              />
-              <div className="absolute w-full inset-0 text-center text-white font-medium pointer-events-none p-2 bg-black/15 group-hover/item:bg-black/30 flex items-center justify-center">
-                {item.title}
-              </div>
-            </div>
-          </Link>
-        ))}
-      </div>
-    </Drawer>
-  );
   return (
-    <div className="">
-      <div
-        className="flex justify-between items-center py-3"
-        role="button"
-        onClick={openMenu}
+    <Dialog.Root>
+      <Dialog.Trigger
+        asChild
+        className="relative flex items-center justify-center w-8 h-8 focus-visible:outline-none"
       >
-        <Link to={to} prefetch="intent">
-          <span className="uppercase font-medium">{title}</span>
-        </Link>
-        <IconCaretRight className="w-4 h-4" />
-      </div>
-      {content}
-    </div>
+        <MenuTrigger />
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="fixed inset-0 bg-black/50 data-[state=open]:animate-fade-in z-10"
+          style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
+        />
+        <Dialog.Content
+          className={cn([
+            "fixed inset-0 bg-[--color-background] p-4 z-10",
+            "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
+            "focus-visible:outline-none",
+            "uppercase",
+          ])}
+          style={
+            { "--enter-from-left-duration": "200ms" } as React.CSSProperties
+          }
+        >
+          <Dialog.Close asChild>
+            <X className="w-5 h-5 fixed top-4 right-4" />
+          </Dialog.Close>
+          <div>Menu</div>
+          <div className="mt-4 mb-2 -mx-4 border-t border-line-subtle" />
+          <div className="space-y-1">
+            {menu.items.map((item) => (
+              <CollapsibleMenuItem
+                key={item.id}
+                item={item as unknown as SingleMenuItem}
+              />
+            ))}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }
 
-function SingleMenu(props: SingleMenuItem) {
-  const {
-    isOpen: isMenuOpen,
-    openDrawer: openMenu,
-    closeDrawer: closeMenu,
-  } = useDrawer();
-  let { title, items, to } = props;
-  let content = (
-    <Drawer
-      open={isMenuOpen}
-      onClose={closeMenu}
-      openFrom="left"
-      heading={title}
-      isBackMenu
-      bordered
-      spacing="sm"
-    >
-      <div className="grid px-4 py-2 overflow-auto w-[360px]">
-        <ul className="space-y-3 pb-3 pt-2">
-          {items.map((subItem, ind) => (
-            <li key={ind} className="leading-6">
-              <Link key={ind} to={subItem.to} prefetch="intent">
-                {subItem.title}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </Drawer>
-  );
-  return (
-    <div className="">
-      <div
-        className="flex justify-between items-center py-3"
-        role="button"
-        onClick={openMenu}
-      >
-        <Link to={to} prefetch="intent">
-          <span className="uppercase font-medium">{title}</span>
+function CollapsibleMenuItem({ item }: { item: SingleMenuItem }) {
+  let { title, to, items } = item;
+
+  if (!items?.length) {
+    return (
+      <Dialog.Close asChild>
+        <Link to={to} className="py-3">
+          {title}
         </Link>
-        <IconCaretRight className="w-4 h-4" />
-      </div>
-      {content}
-    </div>
-  );
-}
+      </Dialog.Close>
+    );
+  }
 
-function ItemHeader({ title, to }: { title: string; to: string }) {
   return (
-    <div className="flex justify-between items-center py-3">
-      <Link to={to} prefetch="intent">
-        <span className="uppercase font-medium">{title}</span>
-      </Link>
-    </div>
+    <Collapsible.Root>
+      <Collapsible.Trigger asChild>
+        <button className='py-3 w-full flex items-center gap-4 justify-between [&>svg]:data-[state="open"]:rotate-90'>
+          <span className="uppercase">{title}</span>
+          <CaretRight className="w-4 h-4" />
+        </button>
+      </Collapsible.Trigger>
+      <Collapsible.Content className="pl-4 border-l border-gray-300">
+        {items.map((item) => (
+          <CollapsibleMenuItem key={item.id} item={item} />
+        ))}
+      </Collapsible.Content>
+    </Collapsible.Root>
   );
 }
+
+let MenuTrigger = forwardRef<HTMLButtonElement, Dialog.DialogTriggerProps>(
+  (props, ref) => {
+    return (
+      <button ref={ref} type="button" {...props}>
+        <List className="w-5 h-5" />
+      </button>
+    );
+  },
+);
diff --git a/package-lock.json b/package-lock.json
index dd32a2ac..e95444a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "@headlessui/react": "2.2.0",
         "@phosphor-icons/react": "2.1.7",
         "@radix-ui/react-checkbox": "1.1.2",
-        "@radix-ui/react-dialog": "1.1.2",
+        "@radix-ui/react-collapsible": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-menubar": "^1.1.2",
         "@radix-ui/react-tooltip": "1.1.4",
         "@remix-run/react": "2.14.0",
@@ -4423,6 +4424,51 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz",
+      "integrity": "sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
@@ -4481,6 +4527,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
       "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.0",
         "@radix-ui/react-compose-refs": "1.1.0",
diff --git a/package.json b/package.json
index dea82ba4..089a40af 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
     "@headlessui/react": "2.2.0",
     "@phosphor-icons/react": "2.1.7",
     "@radix-ui/react-checkbox": "1.1.2",
-    "@radix-ui/react-dialog": "1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-tooltip": "1.1.4",
     "@remix-run/react": "2.14.0",

From abb4922b49da4db8df69e3fe93ea9cf6893f06eb Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 12:08:54 +0700
Subject: [PATCH 04/39] Add more tailwind config for animations

---
 tailwind.config.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index a6ad4d99..49a38f9b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,9 +13,17 @@ export default {
     extend: {
       keyframes: {
         "fade-in": {
-          from: { opacity: "0.5" },
+          from: { opacity: "0" },
           to: { opacity: "1" },
         },
+        "slide-down": {
+          from: { height: 0 },
+          to: { height: "var(--slide-down-to)" },
+        },
+        "slide-up": {
+          from: { height: "var(--slide-up-from)" },
+          to: { height: 0 },
+        },
         "slide-left-and-fade": {
           from: {
             opacity: 0,
@@ -23,6 +31,14 @@ export default {
           },
           to: { opacity: 1, transform: "translateX(0)" },
         },
+        "enter-from-left": {
+          from: { transform: "translateX(-100%)" },
+          to: { transform: "translateX(0)" },
+        },
+        "enter-from-right": {
+          from: { transform: "translateX(100%)" },
+          to: { transform: "translateX(0)" },
+        },
         marquee: {
           from: { transform: "translateZ(0)" },
           to: { transform: "translate3d(-100%,0,0)" },
@@ -49,8 +65,15 @@ export default {
         marquee: "marquee var(--marquee-duration, 15s) linear infinite",
         underline: "underline 400ms linear",
         "fade-in": "fade-in var(--fade-in-duration, .5s) ease-in forwards",
+        "slide-down":
+          "slide-down var(--slide-down-duration, .3s) ease-out forwards",
+        "slide-up": "slide-up var(--slide-up-duration, .3s) ease-out forwards",
         "slide-left-and-fade":
           "slide-left-and-fade var(--slide-left-and-fade-duration, .5s) cubic-bezier(.165,.84,.44,1) forwards",
+        "enter-from-left":
+          "enter-from-left var(--enter-from-left-duration, .3s) ease-out forwards",
+        "enter-from-right":
+          "enter-from-right var(--enter-from-right-duration, .3s) ease-out forwards",
       },
       borderWidth: {
         6: "6px",

From 5cad041fc3ac7d9d26bde95e15e7b2936dc802bb Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 12:09:17 +0700
Subject: [PATCH 05/39] Fix header z-indexes

---
 app/modules/header/mobile-header.tsx          | 19 +++++++------------
 app/modules/header/scrolling-announcement.tsx |  2 +-
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/app/modules/header/mobile-header.tsx b/app/modules/header/mobile-header.tsx
index fe00986c..7d07990a 100644
--- a/app/modules/header/mobile-header.tsx
+++ b/app/modules/header/mobile-header.tsx
@@ -8,12 +8,13 @@ import {
 import { useThemeSettings } from "@weaverse/hydrogen";
 import { Suspense } from "react";
 import useWindowScroll from "react-use/esm/useWindowScroll";
-import { IconList, IconMagnifyingGlass, IconUser } from "~/components/icons";
+import { IconMagnifyingGlass, IconUser } from "~/components/icons";
 import { Logo } from "~/components/logo";
 import { cn } from "~/lib/cn";
 import { useIsHomePath } from "~/lib/utils";
 import type { RootLoader } from "~/root";
 import { CartCount } from "./cart-count";
+import { MobileMenu } from "./menu/mobile-menu";
 
 export function MobileHeader({
   shopName,
@@ -35,29 +36,23 @@ export function MobileHeader({
     <header
       className={cn(
         "transition-colors duration-300 ease-in-out",
-        "h-nav z-40 top-[var(--topbar-height,var(--initial-topbar-height))] w-full leading-none",
+        "h-nav z-1 top-[var(--topbar-height,var(--initial-topbar-height))] w-full leading-none",
         "flex lg:hidden justify-between items-center gap-4",
         "px-3 md:px-10",
-        "text-[var(--color-header-text)] bg-[--color-header-bg]",
-        "hover:text-[var(--color-header-text)] hover:bg-[--color-header-bg]",
+        "text-[--color-header-text] bg-[--color-header-bg]",
+        "hover:text-[--color-header-text] hover:bg-[--color-header-bg]",
         scrolled && "shadow-header",
         enableTransparentHeader && isHome
           ? [
               "fixed top-[var(--topbar-height,var(--initial-topbar-height))] w-screen group/header",
               !scrolled &&
-                "text-[var(--color-transparent-header-text)] bg-transparent border-transparent",
+                "text-[--color-transparent-header-text] bg-transparent border-transparent",
             ]
           : "sticky top-0",
       )}
     >
       <div className="flex items-center justify-start w-full">
-        <button
-          type="button"
-          onClick={openMenu}
-          className="relative flex items-center justify-center w-8 h-8"
-        >
-          <IconList className="w-5 h-5" />
-        </button>
+        <MobileMenu />
         <Form
           method="get"
           action={params.locale ? `/${params.locale}/search` : "/search"}
diff --git a/app/modules/header/scrolling-announcement.tsx b/app/modules/header/scrolling-announcement.tsx
index 283de5ca..1e8b1ccf 100644
--- a/app/modules/header/scrolling-announcement.tsx
+++ b/app/modules/header/scrolling-announcement.tsx
@@ -39,7 +39,7 @@ export function ScrollingAnnouncement() {
   return (
     <div
       id="announcement-bar"
-      className="text-center z-50 relative flex items-center whitespace-nowrap overflow-hidden"
+      className="text-center relative flex items-center whitespace-nowrap overflow-hidden"
       style={
         {
           height: `${topbarHeight}px`,

From 3990c58626a3bfdbd094f4216595172069da4941 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 16:13:04 +0700
Subject: [PATCH 06/39] Add scroll area component

---
 app/components/scroll-area.tsx | 79 ++++++++++++++++++++++++++++++++++
 package-lock.json              | 55 +++++++++++++++++++++++
 package.json                   |  2 +
 3 files changed, 136 insertions(+)
 create mode 100644 app/components/scroll-area.tsx

diff --git a/app/components/scroll-area.tsx b/app/components/scroll-area.tsx
new file mode 100644
index 00000000..73904b9c
--- /dev/null
+++ b/app/components/scroll-area.tsx
@@ -0,0 +1,79 @@
+import type { ScrollAreaProps as RadixScrollAreaProps } from "@radix-ui/react-scroll-area";
+import { Root, Scrollbar, Thumb, Viewport } from "@radix-ui/react-scroll-area";
+import { type VariantProps, cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "~/lib/cn";
+
+let variants = cva("", {
+  variants: {
+    size: {
+      sm: "data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1",
+      md: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
+      lg: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
+      xl: "data-[orientation=horizontal]:h-3 data-[orientation=vertical]:w-3",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+interface ScrollAreaProps
+  extends RadixScrollAreaProps,
+    VariantProps<typeof variants> {
+  style?: React.CSSProperties;
+  rootClassName?: string;
+  scrollbarClassName?: string;
+  thumbClassName?: string;
+}
+
+export let ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
+  (
+    {
+      size,
+      rootClassName,
+      className,
+      scrollbarClassName,
+      thumbClassName,
+      children,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <Root
+        {...rest}
+        ref={ref}
+        className={cn("overflow-hidden", rootClassName)}
+      >
+        <Viewport
+          style={style}
+          className={cn("relative h-full w-full", className)}
+        >
+          {children}
+        </Viewport>
+        <Scrollbar
+          className={cn(
+            "flex touch-none select-none rounded-lg data-[orientation=horizontal]:flex-col",
+            "bg-black/10 dark:bg-gray-700/50",
+            "transition-colors duration-150 ease-out",
+            variants({ size }),
+            scrollbarClassName,
+          )}
+          orientation="vertical"
+        >
+          <Thumb
+            className={cn(
+              "relative flex-1 rounded-lg shadow-intense",
+              "bg-gray-500 dark:bg-gray-500",
+              "before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
+              "before:h-full before:min-h-[20px] before:w-full before:min-w-[20px]",
+              thumbClassName,
+            )}
+          />
+        </Scrollbar>
+      </Root>
+    );
+  },
+);
diff --git a/package-lock.json b/package-lock.json
index e95444a8..b8dc3ef5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,9 @@
         "@radix-ui/react-collapsible": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-menubar": "^1.1.2",
+        "@radix-ui/react-scroll-area": "^1.2.1",
         "@radix-ui/react-tooltip": "1.1.4",
+        "@radix-ui/react-visually-hidden": "^1.1.0",
         "@remix-run/react": "2.14.0",
         "@remix-run/server-runtime": "2.14.0",
         "@shopify/cli": "^3.70.0",
@@ -4352,6 +4354,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
@@ -4902,6 +4910,52 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.1.tgz",
+      "integrity": "sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -5081,6 +5135,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
       "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-primitive": "2.0.0"
       },
diff --git a/package.json b/package.json
index 089a40af..1ecbba6c 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,9 @@
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-tooltip": "1.1.4",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "@remix-run/react": "2.14.0",
     "@remix-run/server-runtime": "2.14.0",
     "@shopify/cli": "^3.70.0",

From b18fda0197fe1d551d3bc8373ae19fc359235153 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 16:19:02 +0700
Subject: [PATCH 07/39] Allowing mobile menu to scroll

---
 app/modules/header/menu/mobile-menu.tsx | 30 ++++++++++++++++---------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/modules/header/menu/mobile-menu.tsx b/app/modules/header/menu/mobile-menu.tsx
index 6e345afd..4b9b06ab 100644
--- a/app/modules/header/menu/mobile-menu.tsx
+++ b/app/modules/header/menu/mobile-menu.tsx
@@ -1,9 +1,11 @@
 import { CaretRight, List, X } from "@phosphor-icons/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import * as Dialog from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { useRouteLoaderData } from "@remix-run/react";
 import { forwardRef } from "react";
 import Link from "~/components/link";
+import { ScrollArea } from "~/components/scroll-area";
 import { cn } from "~/lib/cn";
 import type { SingleMenuItem } from "~/lib/type";
 import type { EnhancedMenu } from "~/lib/utils";
@@ -30,7 +32,7 @@ export function MobileMenu() {
         />
         <Dialog.Content
           className={cn([
-            "fixed inset-0 bg-[--color-background] p-4 z-10",
+            "fixed inset-0 h-screen-dynamic bg-[--color-background] pt-4 pb-2 z-10",
             "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
             "focus-visible:outline-none",
             "uppercase",
@@ -38,19 +40,27 @@ export function MobileMenu() {
           style={
             { "--enter-from-left-duration": "200ms" } as React.CSSProperties
           }
+          aria-describedby={undefined}
         >
+          <VisuallyHidden.Root asChild>
+            <Dialog.Title>Mobile menu</Dialog.Title>
+          </VisuallyHidden.Root>
           <Dialog.Close asChild>
             <X className="w-5 h-5 fixed top-4 right-4" />
           </Dialog.Close>
-          <div>Menu</div>
-          <div className="mt-4 mb-2 -mx-4 border-t border-line-subtle" />
-          <div className="space-y-1">
-            {menu.items.map((item) => (
-              <CollapsibleMenuItem
-                key={item.id}
-                item={item as unknown as SingleMenuItem}
-              />
-            ))}
+          <div className="px-4">Menu</div>
+          <div className="mt-4 border-t border-line-subtle" />
+          <div className="py-2">
+            <ScrollArea className="h-[calc(100vh-5rem)]">
+              <div className="space-y-1 px-4">
+                {menu.items.map((item) => (
+                  <CollapsibleMenuItem
+                    key={item.id}
+                    item={item as unknown as SingleMenuItem}
+                  />
+                ))}
+              </div>
+            </ScrollArea>
           </div>
         </Dialog.Content>
       </Dialog.Portal>

From d827238c88554f306548e61db559753c21c4b593 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 22:00:49 +0700
Subject: [PATCH 08/39] Simplify layout by getting menu from `useShopMenu` hook

---
 app/components/logo.tsx                  | 10 ++++------
 app/hooks/use-shop-menu.tsx              | 15 +++++++++++++++
 app/modules/footer.tsx                   | 14 +++++---------
 app/modules/header/index.tsx             | 22 +++-------------------
 app/modules/header/menu/desktop-menu.tsx | 10 ++++++----
 app/modules/header/menu/mobile-menu.tsx  | 11 ++++-------
 app/modules/header/mobile-header.tsx     |  6 +-----
 app/modules/layout.tsx                   | 23 ++++++-----------------
 app/root.tsx                             |  5 +----
 9 files changed, 45 insertions(+), 71 deletions(-)
 create mode 100644 app/hooks/use-shop-menu.tsx

diff --git a/app/components/logo.tsx b/app/components/logo.tsx
index 09bd3f3f..a36239f8 100644
--- a/app/components/logo.tsx
+++ b/app/components/logo.tsx
@@ -2,13 +2,11 @@ import { Image } from "@shopify/hydrogen";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import { Link } from "~/components/link";
+import { useShopMenu } from "~/hooks/use-shop-menu";
 
-export function Logo({
-  isTransparent,
-  shopName,
-}: { isTransparent?: boolean; shopName: string }) {
-  let settings = useThemeSettings();
-  let { logoData, transparentLogoData, logoWidth } = settings;
+export function Logo({ isTransparent }: { isTransparent?: boolean }) {
+  let { shopName } = useShopMenu();
+  let { logoData, transparentLogoData, logoWidth } = useThemeSettings();
 
   return (
     <Link
diff --git a/app/hooks/use-shop-menu.tsx b/app/hooks/use-shop-menu.tsx
new file mode 100644
index 00000000..a3e13039
--- /dev/null
+++ b/app/hooks/use-shop-menu.tsx
@@ -0,0 +1,15 @@
+import { useRouteLoaderData } from "@remix-run/react";
+import type { EnhancedMenu } from "~/lib/utils";
+import type { RootLoader } from "~/root";
+
+export function useShopMenu() {
+  let { layout } = useRouteLoaderData<RootLoader>("root");
+  let shopName = layout?.shop?.name;
+  let headerMenu = layout?.headerMenu as EnhancedMenu;
+  let footerMenu = layout?.footerMenu as EnhancedMenu;
+  return {
+    shopName,
+    headerMenu,
+    footerMenu,
+  };
+}
diff --git a/app/modules/footer.tsx b/app/modules/footer.tsx
index aced7097..4a5f8a70 100644
--- a/app/modules/footer.tsx
+++ b/app/modules/footer.tsx
@@ -14,8 +14,9 @@ import {
   IconLinkedinLogo,
   IconXLogo,
 } from "~/components/icons";
+import { useShopMenu } from "~/hooks/use-shop-menu";
 import { cn } from "~/lib/cn";
-import type { ChildEnhancedMenuItem, EnhancedMenu } from "~/lib/utils";
+import type { ChildEnhancedMenuItem } from "~/lib/utils";
 import { Input } from "~/modules/input";
 import { CountrySelector } from "./country-selector";
 
@@ -34,13 +35,8 @@ let variants = cva("divide-y divide-line-subtle space-y-9", {
   },
 });
 
-export function Footer({
-  menu,
-  shopName,
-}: {
-  menu?: EnhancedMenu;
-  shopName: string;
-}) {
+export function Footer() {
+  let { footerMenu, shopName } = useShopMenu();
   let {
     footerWidth,
     socialFacebook,
@@ -60,7 +56,7 @@ export function Footer({
     newsletterButtonText,
   } = useThemeSettings();
 
-  let { items = [] } = menu || {};
+  let { items = [] } = footerMenu || {};
   let socialItems = [
     {
       name: "Instagram",
diff --git a/app/modules/header/index.tsx b/app/modules/header/index.tsx
index af9a343d..41246e15 100644
--- a/app/modules/header/index.tsx
+++ b/app/modules/header/index.tsx
@@ -2,7 +2,6 @@ import { Await, useRouteLoaderData } from "@remix-run/react";
 import { CartForm, type CartReturn } from "@shopify/hydrogen";
 import { Suspense, useEffect } from "react";
 import { useCartFetchers } from "~/hooks/use-cart-fetchers";
-import type { EnhancedMenu } from "~/lib/utils";
 import { Cart } from "~/modules/cart";
 import type { RootLoader } from "~/root";
 import { CartLoading } from "../cart-loading";
@@ -11,23 +10,12 @@ import { DesktopHeader } from "./desktop-header";
 import { MobileHeader } from "./mobile-header";
 import { ScrollingAnnouncement } from "./scrolling-announcement";
 
-export function Header({
-  shopName,
-  menu,
-}: {
-  shopName: string;
-  menu?: EnhancedMenu;
-}) {
+export function Header() {
   let {
     isOpen: isCartOpen,
     openDrawer: openCart,
     closeDrawer: closeCart,
   } = useDrawer();
-  let {
-    isOpen: isMenuOpen,
-    openDrawer: openMenu,
-    closeDrawer: closeMenu,
-  } = useDrawer();
 
   let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd);
   // toggle cart drawer when adding to cart
@@ -40,12 +28,8 @@ export function Header({
     <>
       {/* <CartDrawer isOpen={isCartOpen} onClose={closeCart} /> */}
       <ScrollingAnnouncement />
-      <DesktopHeader shopName={shopName} menu={menu} openCart={openCart} />
-      <MobileHeader
-        shopName={shopName}
-        openCart={openCart}
-        openMenu={openMenu}
-      />
+      <DesktopHeader openCart={openCart} />
+      <MobileHeader openCart={openCart} />
     </>
   );
 }
diff --git a/app/modules/header/menu/desktop-menu.tsx b/app/modules/header/menu/desktop-menu.tsx
index 0fa761d3..815ca665 100644
--- a/app/modules/header/menu/desktop-menu.tsx
+++ b/app/modules/header/menu/desktop-menu.tsx
@@ -5,16 +5,18 @@ import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import { useState } from "react";
 import Link from "~/components/link";
+import { useShopMenu } from "~/hooks/use-shop-menu";
 import { cn } from "~/lib/cn";
 import { getMaxDepth } from "~/lib/menu";
 import type { SingleMenuItem } from "~/lib/type";
-import type { EnhancedMenu } from "~/lib/utils";
 
-export function DesktopMenu({ menu }: { menu: EnhancedMenu }) {
+export function DesktopMenu() {
+  let { headerMenu } = useShopMenu();
   let { openMenuBy } = useThemeSettings();
   let [value, setValue] = useState<string | null>(null);
-  if (menu?.items?.length) {
-    let items = menu.items as unknown as SingleMenuItem[];
+
+  if (headerMenu?.items?.length) {
+    let items = headerMenu.items as unknown as SingleMenuItem[];
     return (
       <Menubar.Root
         asChild
diff --git a/app/modules/header/menu/mobile-menu.tsx b/app/modules/header/menu/mobile-menu.tsx
index 4b9b06ab..f7931706 100644
--- a/app/modules/header/menu/mobile-menu.tsx
+++ b/app/modules/header/menu/mobile-menu.tsx
@@ -2,20 +2,17 @@ import { CaretRight, List, X } from "@phosphor-icons/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import * as Dialog from "@radix-ui/react-dialog";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
-import { useRouteLoaderData } from "@remix-run/react";
 import { forwardRef } from "react";
 import Link from "~/components/link";
 import { ScrollArea } from "~/components/scroll-area";
+import { useShopMenu } from "~/hooks/use-shop-menu";
 import { cn } from "~/lib/cn";
 import type { SingleMenuItem } from "~/lib/type";
-import type { EnhancedMenu } from "~/lib/utils";
-import type { RootLoader } from "~/root";
 
 export function MobileMenu() {
-  let data = useRouteLoaderData<RootLoader>("root");
-  let menu = data?.layout?.headerMenu as EnhancedMenu;
+  let { headerMenu } = useShopMenu();
 
-  if (!menu) return <MenuTrigger />;
+  if (!headerMenu) return <MenuTrigger />;
 
   return (
     <Dialog.Root>
@@ -53,7 +50,7 @@ export function MobileMenu() {
           <div className="py-2">
             <ScrollArea className="h-[calc(100vh-5rem)]">
               <div className="space-y-1 px-4">
-                {menu.items.map((item) => (
+                {headerMenu.items.map((item) => (
                   <CollapsibleMenuItem
                     key={item.id}
                     item={item as unknown as SingleMenuItem}
diff --git a/app/modules/header/mobile-header.tsx b/app/modules/header/mobile-header.tsx
index 7d07990a..96caa90b 100644
--- a/app/modules/header/mobile-header.tsx
+++ b/app/modules/header/mobile-header.tsx
@@ -17,13 +17,9 @@ import { CartCount } from "./cart-count";
 import { MobileMenu } from "./menu/mobile-menu";
 
 export function MobileHeader({
-  shopName,
   openCart,
-  openMenu,
 }: {
-  shopName: string;
   openCart: () => void;
-  openMenu: () => void;
 }) {
   let isHome = useIsHomePath();
   let { enableTransparentHeader } = useThemeSettings();
@@ -66,7 +62,7 @@ export function MobileHeader({
           </button>
         </Form>
       </div>
-      <Logo isTransparent={isTransparent} shopName={shopName} />
+      <Logo isTransparent={isTransparent} />
       <div className="flex items-center justify-end w-full">
         <AccountLink className="relative flex items-center justify-center w-8 h-8" />
         <CartCount
diff --git a/app/modules/layout.tsx b/app/modules/layout.tsx
index ea90773a..89cd8127 100644
--- a/app/modules/layout.tsx
+++ b/app/modules/layout.tsx
@@ -1,18 +1,11 @@
-import type { LayoutQuery } from "storefrontapi.generated";
-import type { EnhancedMenu } from "~/lib/utils";
 import { Footer } from "./footer";
 import { Header } from "./header";
 
-type LayoutProps = {
+export function Layout({
+  children,
+}: {
   children: React.ReactNode;
-  layout?: LayoutQuery & {
-    headerMenu?: EnhancedMenu | null;
-    footerMenu?: EnhancedMenu | null;
-  };
-};
-
-export function Layout({ children, layout }: LayoutProps) {
-  let { headerMenu, footerMenu } = layout || {};
+}) {
   return (
     <>
       <div className="flex flex-col min-h-screen">
@@ -21,16 +14,12 @@ export function Layout({ children, layout }: LayoutProps) {
             Skip to content
           </a>
         </div>
-        {headerMenu && layout?.shop.name && (
-          <Header shopName={layout.shop.name} menu={headerMenu} />
-        )}
+        <Header />
         <main id="mainContent" className="flex-grow">
           {children}
         </main>
       </div>
-      {footerMenu && layout?.shop.name && (
-        <Footer shopName={layout.shop.name} menu={footerMenu} />
-      )}
+      <Footer />
     </>
   );
 }
diff --git a/app/root.tsx b/app/root.tsx
index d71ae34e..e7005b33 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -190,10 +190,7 @@ function Layout({ children }: { children?: React.ReactNode }) {
             consent={data.consent}
           >
             <TooltipProvider disableHoverableContent>
-              <PageLayout
-                key={`${locale.language}-${locale.country}`}
-                layout={data.layout}
-              >
+              <PageLayout key={`${locale.language}-${locale.country}`}>
                 {children}
               </PageLayout>
             </TooltipProvider>

From 9ec48830ba706933e970ab98fd6779947e57bf0f Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 22:01:38 +0700
Subject: [PATCH 09/39] Update default theme settings & cleaning up

---
 app/modules/product-form/variants.tsx | 1 -
 app/weaverse/schema.server.ts         | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/modules/product-form/variants.tsx b/app/modules/product-form/variants.tsx
index fe0080b7..6c2dfb2a 100644
--- a/app/modules/product-form/variants.tsx
+++ b/app/modules/product-form/variants.tsx
@@ -75,7 +75,6 @@ export function ProductVariants(props: ProductVariantsProps) {
         options={options.filter((option) => option.optionValues.length > 1)}
       >
         {({ option }) => {
-          console.log("option", option);
           let optionName = option.name;
           let clonedSelectedOptionMap = new Map(selectedOptionMap);
           let values = option.values
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index 349648d4..7fee7da0 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -298,7 +298,7 @@ export let themeSchema: HydrogenThemeSchema = {
           type: "color",
           label: "Lines and borders",
           name: "colorLine",
-          defaultValue: "#a8a29e",
+          defaultValue: "#3B352C",
         },
         {
           type: "heading",
@@ -534,7 +534,7 @@ export let themeSchema: HydrogenThemeSchema = {
             step: 1,
             unit: "px",
           },
-          defaultValue: 16,
+          defaultValue: 14,
         },
         {
           type: "range",

From b17e68278a50bfd2d1da2c56fe600732d3b6a3a8 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 22:50:02 +0700
Subject: [PATCH 10/39] Update predictive search and enhance header structure

---
 .../header/cart-count.tsx                     |  0
 .../header/desktop-header.tsx                 | 73 ++++--------------
 app/{modules => components}/header/index.tsx  |  6 +-
 .../header/menu/desktop-menu.tsx              |  0
 .../header/menu/mobile-menu.tsx               |  2 +-
 .../header/mobile-header.tsx                  |  0
 .../header/predictive-search/index.tsx        | 74 +++++++++++++++++++
 .../predictive-search-result.tsx              |  2 +-
 .../predictive-search-results.tsx             |  4 +-
 .../header}/predictive-search/result-item.tsx |  2 +-
 .../header}/predictive-search/search-form.tsx |  2 +-
 .../header/scrolling-announcement.tsx         |  0
 app/modules/layout.tsx                        |  2 +-
 app/modules/predictive-search/index.tsx       | 33 ---------
 14 files changed, 97 insertions(+), 103 deletions(-)
 rename app/{modules => components}/header/cart-count.tsx (100%)
 rename app/{modules => components}/header/desktop-header.tsx (64%)
 rename app/{modules => components}/header/index.tsx (92%)
 rename app/{modules => components}/header/menu/desktop-menu.tsx (100%)
 rename app/{modules => components}/header/menu/mobile-menu.tsx (97%)
 rename app/{modules => components}/header/mobile-header.tsx (100%)
 create mode 100644 app/components/header/predictive-search/index.tsx
 rename app/{modules => components/header}/predictive-search/predictive-search-result.tsx (97%)
 rename app/{modules => components/header}/predictive-search/predictive-search-results.tsx (94%)
 rename app/{modules => components/header}/predictive-search/result-item.tsx (96%)
 rename app/{modules => components/header}/predictive-search/search-form.tsx (97%)
 rename app/{modules => components}/header/scrolling-announcement.tsx (100%)
 delete mode 100644 app/modules/predictive-search/index.tsx

diff --git a/app/modules/header/cart-count.tsx b/app/components/header/cart-count.tsx
similarity index 100%
rename from app/modules/header/cart-count.tsx
rename to app/components/header/cart-count.tsx
diff --git a/app/modules/header/desktop-header.tsx b/app/components/header/desktop-header.tsx
similarity index 64%
rename from app/modules/header/desktop-header.tsx
rename to app/components/header/desktop-header.tsx
index 2fbe4715..d8da64b9 100644
--- a/app/modules/header/desktop-header.tsx
+++ b/app/components/header/desktop-header.tsx
@@ -1,23 +1,21 @@
 import {
   Await,
   Link,
-  useLocation,
   useRouteError,
   useRouteLoaderData,
 } from "@remix-run/react";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import { cva } from "class-variance-authority";
-import { Suspense, useEffect } from "react";
+import { Suspense } from "react";
 import useWindowScroll from "react-use/esm/useWindowScroll";
-import { IconMagnifyingGlass, IconUser } from "~/components/icons";
+import { DialogDemo } from "~/components/drawer";
+import { IconUser } from "~/components/icons";
 import { Logo } from "~/components/logo";
 import { cn } from "~/lib/cn";
-import { type EnhancedMenu, useIsHomePath } from "~/lib/utils";
-import { PredictiveSearch } from "~/modules/predictive-search";
+import { useIsHomePath } from "~/lib/utils";
 import type { RootLoader } from "~/root";
-import { Drawer, useDrawer } from "../drawer";
-import { CartCount } from "./cart-count";
 import { DesktopMenu } from "./menu/desktop-menu";
+import { PredictiveSearchButton } from "./predictive-search";
 
 let variants = cva("", {
   variants: {
@@ -34,19 +32,10 @@ let variants = cva("", {
   },
 });
 
-export function DesktopHeader({
-  menu,
-  openCart,
-  shopName,
-}: {
-  openCart: () => void;
-  menu?: EnhancedMenu;
-  shopName: string;
-}) {
+export function DesktopHeader() {
   let { enableTransparentHeader, headerWidth } = useThemeSettings();
   let isHome = useIsHomePath();
   let { y } = useWindowScroll();
-  let { isOpen, openDrawer, closeDrawer } = useDrawer();
   let routeError = useRouteError();
 
   let scrolled = y >= 50;
@@ -57,7 +46,7 @@ export function DesktopHeader({
     <header
       className={cn(
         "transition-all duration-300 ease-in-out",
-        "hidden lg:block lg:w-full z-10",
+        "hidden lg:block lg:w-full z-1",
         "bg-[--color-header-bg] hover:bg-[--color-header-bg]",
         "text-[--color-header-text] hover:text-[--color-header-text]",
         "border-b border-[rgb(230,230,230)]",
@@ -78,20 +67,17 @@ export function DesktopHeader({
           variants({ width: headerWidth }),
         )}
       >
-        <Logo isTransparent={isTransparent} shopName={shopName} />
-        <DesktopMenu menu={menu} />
+        <Logo isTransparent={isTransparent} />
+        <DesktopMenu />
         <div className="flex items-center gap-1 z-1">
-          <SearchToggle
-            isOpen={isOpen}
-            openDrawer={openDrawer}
-            closeDrawer={closeDrawer}
-          />
+          <PredictiveSearchButton />
           <AccountLink className="relative flex items-center justify-center w-8 h-8" />
-          <CartCount
+          <DialogDemo openFrom="right" />
+          {/* <CartCount
             isHome={isHome}
             openCart={openCart}
             isTransparent={isTransparent}
-          />
+          /> */}
         </div>
       </div>
     </header>
@@ -121,36 +107,3 @@ function AccountLink({ className }: { className?: string }) {
     </Link>
   );
 }
-
-function SearchToggle({
-  isOpen,
-  openDrawer,
-  closeDrawer,
-}: {
-  isOpen: boolean;
-  openDrawer: () => void;
-  closeDrawer: () => void;
-}) {
-  let { pathname } = useLocation();
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
-    if (isOpen) {
-      closeDrawer();
-    }
-  }, [pathname]);
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={openDrawer}
-        className="relative flex h-8 w-8 items-center justify-center"
-      >
-        <IconMagnifyingGlass className="w-5 h-5" />
-      </button>
-      <Drawer open={isOpen} onClose={closeDrawer} openFrom="top">
-        <PredictiveSearch isOpen={isOpen} />
-      </Drawer>
-    </>
-  );
-}
diff --git a/app/modules/header/index.tsx b/app/components/header/index.tsx
similarity index 92%
rename from app/modules/header/index.tsx
rename to app/components/header/index.tsx
index 41246e15..33f5e605 100644
--- a/app/modules/header/index.tsx
+++ b/app/components/header/index.tsx
@@ -4,8 +4,8 @@ import { Suspense, useEffect } from "react";
 import { useCartFetchers } from "~/hooks/use-cart-fetchers";
 import { Cart } from "~/modules/cart";
 import type { RootLoader } from "~/root";
-import { CartLoading } from "../cart-loading";
-import { Drawer, useDrawer } from "../drawer";
+import { CartLoading } from "../../modules/cart-loading";
+import { Drawer, useDrawer } from "../../modules/drawer";
 import { DesktopHeader } from "./desktop-header";
 import { MobileHeader } from "./mobile-header";
 import { ScrollingAnnouncement } from "./scrolling-announcement";
@@ -28,7 +28,7 @@ export function Header() {
     <>
       {/* <CartDrawer isOpen={isCartOpen} onClose={closeCart} /> */}
       <ScrollingAnnouncement />
-      <DesktopHeader openCart={openCart} />
+      <DesktopHeader />
       <MobileHeader openCart={openCart} />
     </>
   );
diff --git a/app/modules/header/menu/desktop-menu.tsx b/app/components/header/menu/desktop-menu.tsx
similarity index 100%
rename from app/modules/header/menu/desktop-menu.tsx
rename to app/components/header/menu/desktop-menu.tsx
diff --git a/app/modules/header/menu/mobile-menu.tsx b/app/components/header/menu/mobile-menu.tsx
similarity index 97%
rename from app/modules/header/menu/mobile-menu.tsx
rename to app/components/header/menu/mobile-menu.tsx
index f7931706..2c846322 100644
--- a/app/modules/header/menu/mobile-menu.tsx
+++ b/app/components/header/menu/mobile-menu.tsx
@@ -29,7 +29,7 @@ export function MobileMenu() {
         />
         <Dialog.Content
           className={cn([
-            "fixed inset-0 h-screen-dynamic bg-[--color-background] pt-4 pb-2 z-10",
+            "fixed inset-0 h-screen-dynamic bg-[--color-header-bg] pt-4 pb-2 z-10",
             "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
             "focus-visible:outline-none",
             "uppercase",
diff --git a/app/modules/header/mobile-header.tsx b/app/components/header/mobile-header.tsx
similarity index 100%
rename from app/modules/header/mobile-header.tsx
rename to app/components/header/mobile-header.tsx
diff --git a/app/components/header/predictive-search/index.tsx b/app/components/header/predictive-search/index.tsx
new file mode 100644
index 00000000..f6e275d9
--- /dev/null
+++ b/app/components/header/predictive-search/index.tsx
@@ -0,0 +1,74 @@
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import * as Dialog from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { IconMagnifyingGlass } from "~/components/icons";
+import { cn } from "~/lib/cn";
+import { Input } from "~/modules/input";
+import { PredictiveSearchResults } from "./predictive-search-results";
+import { PredictiveSearchForm } from "./search-form";
+
+export function PredictiveSearchButton() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger
+        asChild
+        className="flex h-8 w-8 items-center justify-center"
+      >
+        <button type="button">
+          <MagnifyingGlass className="w-5 h-5" />
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="fixed inset-0 bg-black/50 data-[state=open]:animate-fade-in z-10"
+          style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
+        />
+        <Dialog.Content
+          className={cn([
+            "fixed inset-x-0 top-0 bg-[--color-header-bg] z-10",
+            "-translate-y-full data-[state=open]:animate-enter-from-top",
+            "focus-visible:outline-none",
+          ])}
+          style={
+            { "--enter-from-top-duration": "200ms" } as React.CSSProperties
+          }
+          aria-describedby={undefined}
+        >
+          <VisuallyHidden.Root asChild>
+            <Dialog.Title>Predictive search</Dialog.Title>
+          </VisuallyHidden.Root>
+          <PredictiveSearch />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+function PredictiveSearch() {
+  return (
+    <div className="relative pt-[--topbar-height]">
+      <PredictiveSearchForm>
+        {({ fetchResults, inputRef }) => (
+          <div className="mx-auto w-full max-w-[560px] p-6">
+            <Input
+              name="q"
+              type="search"
+              onChange={fetchResults}
+              onFocus={fetchResults}
+              onClear={fetchResults}
+              placeholder="Enter a keyword"
+              ref={inputRef}
+              className="rounded"
+              autoComplete="off"
+              prefixElement={
+                <IconMagnifyingGlass className="h-5 w-5 shrink-0 text-gray-500" />
+              }
+              autoFocus={true}
+            />
+          </div>
+        )}
+      </PredictiveSearchForm>
+      <PredictiveSearchResults />
+    </div>
+  );
+}
diff --git a/app/modules/predictive-search/predictive-search-result.tsx b/app/components/header/predictive-search/predictive-search-result.tsx
similarity index 97%
rename from app/modules/predictive-search/predictive-search-result.tsx
rename to app/components/header/predictive-search/predictive-search-result.tsx
index a2063839..067f8095 100644
--- a/app/modules/predictive-search/predictive-search-result.tsx
+++ b/app/components/header/predictive-search/predictive-search-result.tsx
@@ -5,7 +5,7 @@ import type {
   NormalizedPredictiveSearchResultItem,
   NormalizedPredictiveSearchResults,
   SearchResultTypeProps,
-} from "../../types/predictive-search";
+} from "../../../types/predictive-search";
 
 export function PredictiveSearchResult({
   goToSearchResult,
diff --git a/app/modules/predictive-search/predictive-search-results.tsx b/app/components/header/predictive-search/predictive-search-results.tsx
similarity index 94%
rename from app/modules/predictive-search/predictive-search-results.tsx
rename to app/components/header/predictive-search/predictive-search-results.tsx
index e7142b6e..818e3f78 100644
--- a/app/modules/predictive-search/predictive-search-results.tsx
+++ b/app/components/header/predictive-search/predictive-search-results.tsx
@@ -28,14 +28,14 @@ export function PredictiveSearchResults() {
 
   if (!totalResults) {
     return (
-      <div className="absolute top-20 z-10 flex w-full items-center justify-center">
+      <div className="absolute top-full z-10 flex w-full items-center justify-center">
         <NoPredictiveSearchResults searchTerm={searchTerm} />
       </div>
     );
   }
   return (
     <div className="absolute left-1/2 top-full z-10 flex w-fit -translate-x-1/2 items-center justify-center">
-      <div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 bg-white p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
+      <div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 bg-[--color-header-bg] p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
         <div className="space-y-8">
           <div className="flex flex-col gap-4 divide-y divide-line">
             <PredictiveSearchResult
diff --git a/app/modules/predictive-search/result-item.tsx b/app/components/header/predictive-search/result-item.tsx
similarity index 96%
rename from app/modules/predictive-search/result-item.tsx
rename to app/components/header/predictive-search/result-item.tsx
index b7d1e4c0..6f9568ea 100644
--- a/app/modules/predictive-search/result-item.tsx
+++ b/app/components/header/predictive-search/result-item.tsx
@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { Link } from "~/components/link";
 import { CompareAtPrice } from "~/components/compare-at-price";
 import { getImageAspectRatio, isDiscounted } from "~/lib/utils";
-import type { SearchResultItemProps } from "../../types/predictive-search";
+import type { SearchResultItemProps } from "../../../types/predictive-search";
 
 export function SearchResultItem({
   goToSearchResult,
diff --git a/app/modules/predictive-search/search-form.tsx b/app/components/header/predictive-search/search-form.tsx
similarity index 97%
rename from app/modules/predictive-search/search-form.tsx
rename to app/components/header/predictive-search/search-form.tsx
index c9f5d867..4c6e71f4 100644
--- a/app/modules/predictive-search/search-form.tsx
+++ b/app/components/header/predictive-search/search-form.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef } from "react";
 import type {
   NormalizedPredictiveSearchResults,
   SearchFromProps,
-} from "../../types/predictive-search";
+} from "../../../types/predictive-search";
 
 /**
  *  Search form component that posts search requests to the `/search` route
diff --git a/app/modules/header/scrolling-announcement.tsx b/app/components/header/scrolling-announcement.tsx
similarity index 100%
rename from app/modules/header/scrolling-announcement.tsx
rename to app/components/header/scrolling-announcement.tsx
diff --git a/app/modules/layout.tsx b/app/modules/layout.tsx
index 89cd8127..b7f1421f 100644
--- a/app/modules/layout.tsx
+++ b/app/modules/layout.tsx
@@ -1,5 +1,5 @@
+import { Header } from "~/components/header";
 import { Footer } from "./footer";
-import { Header } from "./header";
 
 export function Layout({
   children,
diff --git a/app/modules/predictive-search/index.tsx b/app/modules/predictive-search/index.tsx
deleted file mode 100644
index 247f914b..00000000
--- a/app/modules/predictive-search/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { IconMagnifyingGlass } from "~/components/icons";
-import { Input } from "~/modules/input";
-import { PredictiveSearchResults } from "./predictive-search-results";
-import { PredictiveSearchForm } from "./search-form";
-
-export function PredictiveSearch({ isOpen }: { isOpen?: boolean }) {
-  return (
-    <div className="relative pt-[var(--topbar-height)] transition-all">
-      <PredictiveSearchForm>
-        {({ fetchResults, inputRef }) => (
-          <div className="mx-auto w-full max-w-[560px] p-6">
-            <Input
-              name="q"
-              type="search"
-              onChange={fetchResults}
-              onFocus={fetchResults}
-              onClear={fetchResults}
-              placeholder="Enter a keyword"
-              ref={inputRef}
-              className="rounded"
-              autoComplete="off"
-              prefixElement={
-                <IconMagnifyingGlass className="h-5 w-5 shrink-0 text-gray-500" />
-              }
-              autoFocus={true}
-            />
-          </div>
-        )}
-      </PredictiveSearchForm>
-      {isOpen && <PredictiveSearchResults />}
-    </div>
-  );
-}

From 26b17cf4b31a75608e6ad32c03664d5a0b029b78 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 28 Nov 2024 22:52:47 +0700
Subject: [PATCH 11/39] Using radix dialog for predictive search popup

---
 app/components/drawer.tsx                     | 39 +++++++++++++++++++
 .../predictive-search-result.tsx              |  4 +-
 .../predictive-search-results.tsx             |  8 ----
 .../header/predictive-search/search-form.tsx  | 14 +++----
 tailwind.config.js                            |  6 +++
 5 files changed, 54 insertions(+), 17 deletions(-)
 create mode 100644 app/components/drawer.tsx

diff --git a/app/components/drawer.tsx b/app/components/drawer.tsx
new file mode 100644
index 00000000..22961637
--- /dev/null
+++ b/app/components/drawer.tsx
@@ -0,0 +1,39 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { cn } from "~/lib/cn";
+
+export function DialogDemo({
+  width = "400px",
+  openFrom,
+}: { width?: string; openFrom: "left" | "right" }) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button className="inline-flex h-[35px] items-center justify-center rounded bg-white px-[15px] font-medium leading-none text-violet11 shadow-[0_2px_10px] shadow-blackA4 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
+          Edit profile
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="fixed inset-0 bg-black/50 data-[state=open]:animate-fade-in z-10"
+          style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
+        />
+        <Dialog.Content
+          className={cn([
+            "fixed inset-y-0 w-[--drawer-width] bg-[--color-background] p-4 z-10",
+            openFrom === "left" &&
+              "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
+            openFrom === "right" &&
+              "right-0 translate-x-full data-[state=open]:animate-enter-from-right",
+          ])}
+          style={
+            {
+              "--drawer-width": width,
+            } as React.CSSProperties
+          }
+        >
+          content goes here
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/app/components/header/predictive-search/predictive-search-result.tsx b/app/components/header/predictive-search/predictive-search-result.tsx
index 067f8095..ec574dd4 100644
--- a/app/components/header/predictive-search/predictive-search-result.tsx
+++ b/app/components/header/predictive-search/predictive-search-result.tsx
@@ -1,11 +1,11 @@
 import { Link } from "@remix-run/react";
 import clsx from "clsx";
-import { SearchResultItem } from "./result-item";
 import type {
   NormalizedPredictiveSearchResultItem,
   NormalizedPredictiveSearchResults,
   SearchResultTypeProps,
-} from "../../../types/predictive-search";
+} from "~/types/predictive-search";
+import { SearchResultItem } from "./result-item";
 
 export function PredictiveSearchResult({
   goToSearchResult,
diff --git a/app/components/header/predictive-search/predictive-search-results.tsx b/app/components/header/predictive-search/predictive-search-results.tsx
index 818e3f78..ebae9eb4 100644
--- a/app/components/header/predictive-search/predictive-search-results.tsx
+++ b/app/components/header/predictive-search/predictive-search-results.tsx
@@ -72,14 +72,6 @@ export function PredictiveSearchResults() {
                 <span>View all products</span>
                 <IconArrowRight className="w-4 h-4" />
               </Link>
-              {/* <Link
-                onClick={goToSearchResult}
-                to={`/search?q=${searchTerm.current}`}
-                className="flex items-center gap-2"
-              >
-                <span className="reveal-underline">View all products</span>
-                <IconArrowRight className="w-4 h-4 mb-[3px]" />
-              </Link> */}
             </div>
           )}
         </div>
diff --git a/app/components/header/predictive-search/search-form.tsx b/app/components/header/predictive-search/search-form.tsx
index 4c6e71f4..13574dfc 100644
--- a/app/components/header/predictive-search/search-form.tsx
+++ b/app/components/header/predictive-search/search-form.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef } from "react";
 import type {
   NormalizedPredictiveSearchResults,
   SearchFromProps,
-} from "../../../types/predictive-search";
+} from "~/types/predictive-search";
 
 /**
  *  Search form component that posts search requests to the `/search` route
@@ -15,16 +15,16 @@ export function PredictiveSearchForm({
   method = "POST",
   ...props
 }: SearchFromProps) {
-  const params = useParams();
-  const fetcher = useFetcher<NormalizedPredictiveSearchResults>();
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  let params = useParams();
+  let fetcher = useFetcher<NormalizedPredictiveSearchResults>();
+  let inputRef = useRef<HTMLInputElement | null>(null);
 
   function fetchResults(event: React.ChangeEvent<HTMLInputElement>) {
-    const searchAction = action ?? "/api/predictive-search";
-    const localizedAction = params.locale
+    let searchAction = action ?? "/api/predictive-search";
+    let localizedAction = params.locale
       ? `/${params.locale}${searchAction}`
       : searchAction;
-    const newSearchTerm = event.target.value || "";
+    let newSearchTerm = event.target.value || "";
     fetcher.submit(
       { q: newSearchTerm, limit: "6" },
       { method, action: localizedAction },
diff --git a/tailwind.config.js b/tailwind.config.js
index 49a38f9b..a0cefe1e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -39,6 +39,10 @@ export default {
           from: { transform: "translateX(100%)" },
           to: { transform: "translateX(0)" },
         },
+        "enter-from-top": {
+          from: { transform: "translateY(-100%)" },
+          to: { transform: "translateY(0)" },
+        },
         marquee: {
           from: { transform: "translateZ(0)" },
           to: { transform: "translate3d(-100%,0,0)" },
@@ -74,6 +78,8 @@ export default {
           "enter-from-left var(--enter-from-left-duration, .3s) ease-out forwards",
         "enter-from-right":
           "enter-from-right var(--enter-from-right-duration, .3s) ease-out forwards",
+        "enter-from-top":
+          "enter-from-top var(--enter-from-top-duration, .3s) ease-out forwards",
       },
       borderWidth: {
         6: "6px",

From 266a50f411898063532615c0aaa565b76d77643b Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sat, 30 Nov 2024 09:55:51 +0700
Subject: [PATCH 12/39] Remove outline of search toggle button on focus

---
 app/components/header/predictive-search/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/header/predictive-search/index.tsx b/app/components/header/predictive-search/index.tsx
index f6e275d9..21082faa 100644
--- a/app/components/header/predictive-search/index.tsx
+++ b/app/components/header/predictive-search/index.tsx
@@ -12,7 +12,7 @@ export function PredictiveSearchButton() {
     <Dialog.Root>
       <Dialog.Trigger
         asChild
-        className="flex h-8 w-8 items-center justify-center"
+        className="flex h-8 w-8 items-center justify-center focus-visible:outline-none"
       >
         <button type="button">
           <MagnifyingGlass className="w-5 h-5" />

From 47b86ecb18de04e0117dcd480d0cd33d540e682f Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 1 Dec 2024 07:08:21 +0700
Subject: [PATCH 13/39] Update filters, remove unused code

---
 app/lib/filter.ts    | 11 ++++---
 app/modules/icon.tsx | 70 --------------------------------------------
 2 files changed, 5 insertions(+), 76 deletions(-)

diff --git a/app/lib/filter.ts b/app/lib/filter.ts
index 4f1ddcfc..11c4536f 100644
--- a/app/lib/filter.ts
+++ b/app/lib/filter.ts
@@ -16,15 +16,14 @@ export type SortParam =
   | "relevance";
 
 export function getAppliedFilterLink(
-  filter: AppliedFilter,
+  { filter }: AppliedFilter,
   params: URLSearchParams,
   location: Location,
 ) {
-  const paramsClone = new URLSearchParams(params);
-  Object.entries(filter.filter).forEach(([key, value]) => {
-    const fullKey = FILTER_URL_PREFIX + key;
-    paramsClone.delete(fullKey, JSON.stringify(value));
-  });
+  let paramsClone = new URLSearchParams(params);
+  for (let [k, v] of Object.entries(filter)) {
+    paramsClone.delete(FILTER_URL_PREFIX + k, JSON.stringify(v));
+  }
   return `${location.pathname}?${paramsClone.toString()}`;
 }
 
diff --git a/app/modules/icon.tsx b/app/modules/icon.tsx
index d27d6f7b..67c6529a 100644
--- a/app/modules/icon.tsx
+++ b/app/modules/icon.tsx
@@ -584,74 +584,4 @@ export function IconSliders(props: IconProps) {
       />
     </Icon>
   );
-
-  /**
-   * @deprecated Use icon from `@/components/icons` instead
-   */
-}
-export function IconFourGrid(props: IconProps) {
-  return (
-    <Icon {...props} viewBox="0 0 46 46" fill="none">
-      <rect x="12" y="12" width="4" height="4" fill="currentColor" />
-      <rect x="18" y="12" width="4" height="4" fill="currentColor" />
-      <rect x="24" y="12" width="4" height="4" fill="currentColor" />
-      <rect x="30" y="12" width="4" height="4" fill="currentColor" />
-      <rect x="12" y="18" width="4" height="4" fill="currentColor" />
-      <rect x="18" y="18" width="4" height="4" fill="currentColor" />
-      <rect x="24" y="18" width="4" height="4" fill="currentColor" />
-      <rect x="30" y="18" width="4" height="4" fill="currentColor" />
-      <rect x="12" y="24" width="4" height="4" fill="currentColor" />
-      <rect x="18" y="24" width="4" height="4" fill="currentColor" />
-      <rect x="24" y="24" width="4" height="4" fill="currentColor" />
-      <rect x="30" y="24" width="4" height="4" fill="currentColor" />
-      <rect x="12" y="30" width="4" height="4" fill="currentColor" />
-      <rect x="18" y="30" width="4" height="4" fill="currentColor" />
-      <rect x="24" y="30" width="4" height="4" fill="currentColor" />
-      <rect x="30" y="30" width="4" height="4" fill="currentColor" />
-    </Icon>
-  );
-
-  /**
-   * @deprecated Use icon from `@/components/icons` instead
-   */
-}
-export function IconThreeGrid(props: IconProps) {
-  return (
-    <Icon {...props} viewBox="0 0 46 46" fill="none">
-      <rect x="12" y="12" width="6" height="6" fill="currentColor" />
-      <rect x="20" y="12" width="6" height="6" fill="currentColor" />
-      <rect x="28" y="12" width="6" height="6" fill="currentColor" />
-      <rect x="12" y="20" width="6" height="6" fill="currentColor" />
-      <rect x="20" y="20" width="6" height="6" fill="currentColor" />
-      <rect x="28" y="20" width="6" height="6" fill="currentColor" />
-      <rect x="12" y="28" width="6" height="6" fill="currentColor" />
-      <rect x="20" y="28" width="6" height="6" fill="currentColor" />
-      <rect x="28" y="28" width="6" height="6" fill="currentColor" />
-    </Icon>
-  );
-
-  /**
-   * @deprecated Use icon from `@/components/icons` instead
-   */
-}
-export function IconTwoGrid(props: IconProps) {
-  return (
-    <Icon {...props} viewBox="0 0 46 46" fill="none">
-      <rect x="12" y="12" width="10" height="10" fill="currentColor" />
-      <rect x="24" y="12" width="10" height="10" fill="currentColor" />
-      <rect x="12" y="24" width="10" height="10" fill="currentColor" />
-      <rect x="24" y="24" width="10" height="10" fill="currentColor" />
-    </Icon>
-  );
-
-  /**
-   * @deprecated Use icon from `@/components/icons` instead
-   */
-}
-export function IconOneGrid(props: IconProps) {
-  return (
-    <Icon {...props} viewBox="0 0 46 46" fill="none">
-      <rect x="12" y="12" width="22" height="22" fill="currentColor" />
-    </Icon>
-  );
 }

From fd1f9bd7284c5a15dbe58aa8c142f2a88ac9c5c9 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 1 Dec 2024 07:08:43 +0700
Subject: [PATCH 14/39] Add sort component for product sort in collection page

---
 app/sections/collection-filters/sort.tsx | 83 ++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 app/sections/collection-filters/sort.tsx

diff --git a/app/sections/collection-filters/sort.tsx b/app/sections/collection-filters/sort.tsx
new file mode 100644
index 00000000..b22156f5
--- /dev/null
+++ b/app/sections/collection-filters/sort.tsx
@@ -0,0 +1,83 @@
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import { CaretDown } from "@phosphor-icons/react";
+import { Link, useLocation, useSearchParams } from "@remix-run/react";
+import clsx from "clsx";
+import type { SortParam } from "~/lib/filter";
+import { getSortLink } from "~/lib/filter";
+
+const PRODUCT_SORT: { label: string; key: SortParam }[] = [
+  { label: "Featured", key: "featured" },
+  {
+    label: "Price: Low - High",
+    key: "price-low-high",
+  },
+  {
+    label: "Price: High - Low",
+    key: "price-high-low",
+  },
+  {
+    label: "Best Selling",
+    key: "best-selling",
+  },
+  {
+    label: "Newest",
+    key: "newest",
+  },
+];
+
+const SEARCH_SORT: { label: string; key: SortParam }[] = [
+  {
+    label: "Price: Low - High",
+    key: "price-low-high",
+  },
+  {
+    label: "Price: High - Low",
+    key: "price-high-low",
+  },
+  {
+    label: "Relevance",
+    key: "relevance",
+  },
+];
+
+export function Sort({
+  show = false,
+}: {
+  show?: boolean;
+}) {
+  let [params] = useSearchParams();
+  let location = useLocation();
+  let sortList = show ? SEARCH_SORT : PRODUCT_SORT;
+  let active =
+    sortList.find(({ key }) => key === params.get("sort")) || sortList[0];
+
+  return (
+    <Menu as="div" className="relative z-10">
+      <MenuButton className="flex items-center gap-1.5 h-10 border px-4 py-2.5">
+        <span className="font-medium">Sort by</span>
+        <CaretDown />
+      </MenuButton>
+      <MenuItems
+        as="nav"
+        className="absolute right-0 top-12 flex h-fit w-40 flex-col gap-2 border border-line-subtle bg-background p-5"
+      >
+        {sortList.map((item) => (
+          <MenuItem key={item.label}>
+            {() => (
+              <Link to={getSortLink(item.key, params, location)}>
+                <p
+                  className={clsx(
+                    "block text-base hover:underline underline-offset-4",
+                    active?.key === item.key ? "font-bold" : "font-normal",
+                  )}
+                >
+                  {item.label}
+                </p>
+              </Link>
+            )}
+          </MenuItem>
+        ))}
+      </MenuItems>
+    </Menu>
+  );
+}

From dd217d58d2483d93b3d7addf1be9b8c0a624e747 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 1 Dec 2024 07:08:59 +0700
Subject: [PATCH 15/39] Add layout switcher for changing grid layout in
 collection page

---
 .../collection-filters/layout-switcher.tsx    | 120 ++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 app/sections/collection-filters/layout-switcher.tsx

diff --git a/app/sections/collection-filters/layout-switcher.tsx b/app/sections/collection-filters/layout-switcher.tsx
new file mode 100644
index 00000000..4e392718
--- /dev/null
+++ b/app/sections/collection-filters/layout-switcher.tsx
@@ -0,0 +1,120 @@
+import type { IconProps } from "@phosphor-icons/react";
+import { cn } from "~/lib/cn";
+
+export function LayoutSwitcher({
+  value,
+  onChange,
+  className,
+}: {
+  value: number;
+  onChange: (number: number) => void;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex",
+        "[&>button]:text-[#b7b7b7] [&>button]:border-[#b7b7b7]",
+        '[&>button[data-active="true"]]:text-[#696662]',
+        '[&>button[data-active="true"]]:border-[#696662]',
+        className,
+      )}
+    >
+      <button
+        type="button"
+        data-active={value === 4}
+        onClick={() => onChange(4)}
+        className="border w-10 h-10 items-center justify-center hidden lg:flex"
+      >
+        <FourColumns className="w-5 h-5" />
+      </button>
+      <button
+        type="button"
+        data-active={value === 3}
+        className="border w-10 h-10 items-center justify-center hidden lg:flex"
+        onClick={() => onChange(3)}
+      >
+        <ThreeColumns className="w-5 h-5" />
+      </button>
+      <button
+        type="button"
+        data-active={value === 2}
+        className="border w-10 h-10 items-center justify-center flex lg:hidden"
+        onClick={() => onChange(2)}
+      >
+        <TwoColumns className="w-5 h-5" />
+      </button>
+      <button
+        type="button"
+        data-active={value === 1}
+        className="border w-10 h-10 items-center justify-center flex lg:hidden"
+        onClick={() => onChange(1)}
+      >
+        <LayoutList className="w-5 h-5" />
+      </button>
+    </div>
+  );
+}
+
+function LayoutList(props: IconProps) {
+  return (
+    <svg
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 12.5 9.5"
+      {...props}
+    >
+      <path d="M12.5.75a.76.76 0 01-.75.75h-11A.76.76 0 010 .75.76.76 0 01.75 0h11a.76.76 0 01.75.75z" />
+      <path d="M12.5 4.75a.76.76 0 01-.75.75h-11A.76.76 0 010 4.75.76.76 0 01.75 4h11a.76.76 0 01.75.75z" />
+      <path d="M12.5 8.75a.76.76 0 01-.75.75h-11A.76.76 0 010 8.75.76.76 0 01.75 8h11a.76.76 0 01.75.75z" />
+    </svg>
+  );
+}
+
+function TwoColumns(props: IconProps) {
+  return (
+    <svg
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 5.5 12.5"
+      {...props}
+    >
+      <path d="M.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 01.75 0z" />
+      <path d="M4.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 014.75 0z" />
+    </svg>
+  );
+}
+
+function ThreeColumns(props: IconProps) {
+  return (
+    <svg
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 9.5 12.5"
+      {...props}
+    >
+      <path d="M.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 01.75 0z" />
+      <path d="M4.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 014.75 0z" />
+      <path d="M8.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 018.75 0z" />
+    </svg>
+  );
+}
+
+function FourColumns(props: IconProps) {
+  return (
+    <svg
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 13.5 12.5"
+      {...props}
+    >
+      <path
+        id="Rectangle"
+        d="M.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 01.75 0z"
+      />
+      <path d="M4.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 014.75 0z" />
+      <path d="M8.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 018.75 0z" />
+      <path d="M12.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11a.76.76 0 01.75-.75z" />
+    </svg>
+  );
+}

From 68fa3ee5b2c28cfa049bf5bea32e43e4b81542e9 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 1 Dec 2024 07:09:10 +0700
Subject: [PATCH 16/39] Restructuring collection filters

---
 .../collection-filters}/drawer-filter.tsx     | 150 ++----------------
 app/sections/collection-filters/index.tsx     |   3 +-
 2 files changed, 15 insertions(+), 138 deletions(-)
 rename app/{modules => sections/collection-filters}/drawer-filter.tsx (64%)

diff --git a/app/modules/drawer-filter.tsx b/app/sections/collection-filters/drawer-filter.tsx
similarity index 64%
rename from app/modules/drawer-filter.tsx
rename to app/sections/collection-filters/drawer-filter.tsx
index 395789b4..1ad4593b 100644
--- a/app/modules/drawer-filter.tsx
+++ b/app/sections/collection-filters/drawer-filter.tsx
@@ -2,34 +2,25 @@ import {
   Disclosure,
   DisclosureButton,
   DisclosurePanel,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
 } from "@headlessui/react";
-import { CaretDown, Sliders } from "@phosphor-icons/react";
-import {
-  Link,
-  useLocation,
-  useNavigate,
-  useSearchParams,
-} from "@remix-run/react";
+import { Sliders } from "@phosphor-icons/react";
+import { useLocation, useNavigate, useSearchParams } from "@remix-run/react";
 import type {
   Filter,
   ProductFilter,
 } from "@shopify/hydrogen/storefront-api-types";
-import clsx from "clsx";
 import type { SyntheticEvent } from "react";
 import { useState } from "react";
 import { Button } from "~/components/button";
 import { Checkbox } from "~/components/checkbox";
 import { IconCaretDown, IconCaretRight } from "~/components/icons";
 import { FILTER_URL_PREFIX } from "~/lib/const";
-import type { AppliedFilter, SortParam } from "~/lib/filter";
-import { getAppliedFilterLink, getFilterLink, getSortLink } from "~/lib/filter";
-import { Drawer, useDrawer } from "./drawer";
-import { IconFourGrid, IconOneGrid, IconThreeGrid, IconTwoGrid } from "./icon";
-import { Input } from "./input";
+import type { AppliedFilter } from "~/lib/filter";
+import { getAppliedFilterLink, getFilterLink } from "~/lib/filter";
+import { Drawer, useDrawer } from "../../modules/drawer";
+import { Input } from "../../modules/input";
+import { LayoutSwitcher } from "./layout-switcher";
+import { Sort } from "./sort";
 
 type DrawerFilterProps = {
   productNumber?: number;
@@ -53,51 +44,14 @@ export function DrawerFilter({
   return (
     <div className="border-y border-line-subtle py-4">
       <div className="gap-4 md:gap-8 flex w-full items-center justify-between">
-        <div className="flex gap-1 flex-1">
-          <button
-            type="button"
-            className={clsx(
-              "border cursor-pointer hidden lg:block",
-              numberInRow === 4 && " bg-gray-200",
-            )}
-            onClick={() => onLayoutChange(4)}
-          >
-            <IconFourGrid className="w-10 h-10" />
-          </button>
-          <button
-            type="button"
-            className={clsx(
-              "border cursor-pointer hidden lg:block",
-              numberInRow === 3 && " bg-gray-200",
-            )}
-            onClick={() => onLayoutChange(3)}
-          >
-            <IconThreeGrid className="w-10 h-10" />
-          </button>
-          <button
-            type="button"
-            className={clsx(
-              "border cursor-pointer lg:hidden",
-              numberInRow === 4 && "bg-gray-200",
-            )}
-            onClick={() => onLayoutChange(4)}
-          >
-            <IconTwoGrid className="w-10 h-10" />
-          </button>
-          <button
-            type="button"
-            className={clsx(
-              "border cursor-pointer lg:hidden",
-              numberInRow === 3 && "bg-gray-200",
-            )}
-            onClick={() => onLayoutChange(3)}
-          >
-            <IconOneGrid className="w-10 h-10" />
-          </button>
-        </div>
+        <LayoutSwitcher
+          value={numberInRow}
+          onChange={onLayoutChange}
+          className="grow"
+        />
         <span className="flex-1 text-center">{productNumber} Products</span>
         <div className="flex gap-2 flex-1 justify-end">
-          <SortMenu showSearchSort={showSearchSort} />
+          <Sort show={showSearchSort} />
           <Button
             onClick={openDrawer}
             variant="outline"
@@ -298,79 +252,3 @@ function PriceRangeFilter({ max, min }: { max?: number; min?: number }) {
     </div>
   );
 }
-
-export default function SortMenu({
-  showSearchSort = false,
-}: {
-  showSearchSort?: boolean;
-}) {
-  const productShortItems: { label: string; key: SortParam }[] = [
-    { label: "Featured", key: "featured" },
-    {
-      label: "Price: Low - High",
-      key: "price-low-high",
-    },
-    {
-      label: "Price: High - Low",
-      key: "price-high-low",
-    },
-    {
-      label: "Best Selling",
-      key: "best-selling",
-    },
-    {
-      label: "Newest",
-      key: "newest",
-    },
-  ];
-
-  const searchSortItems: { label: string; key: SortParam }[] = [
-    {
-      label: "Price: Low - High",
-      key: "price-low-high",
-    },
-    {
-      label: "Price: High - Low",
-      key: "price-high-low",
-    },
-    {
-      label: "Relevance",
-      key: "relevance",
-    },
-  ];
-  const items = showSearchSort ? searchSortItems : productShortItems;
-  const [params] = useSearchParams();
-  const location = useLocation();
-  const activeItem =
-    items.find((item) => item.key === params.get("sort")) || items[0];
-
-  return (
-    <Menu as="div" className="relative z-10">
-      <MenuButton className="flex items-center gap-1.5 h-10 border px-4 py-2.5">
-        <span className="font-medium">Sort by</span>
-        <CaretDown />
-      </MenuButton>
-      <MenuItems
-        as="nav"
-        className="absolute right-0 top-12 flex h-fit w-40 flex-col gap-2 border border-line-subtle bg-background p-5"
-      >
-        {items.map((item) => (
-          <MenuItem key={item.label}>
-            {() => (
-              <Link to={getSortLink(item.key, params, location)}>
-                <p
-                  className={clsx(
-                    "block text-base hover:underline underline-offset-4",
-                    activeItem?.key === item.key ? "font-bold" : "font-normal",
-                  )}
-                >
-                  {item.label}
-                </p>
-              </Link>
-            )}
-          </MenuItem>
-        ))}
-      </MenuItems>
-    </Menu>
-  );
-}
diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
index d9f9b65d..aec95ba6 100644
--- a/app/sections/collection-filters/index.tsx
+++ b/app/sections/collection-filters/index.tsx
@@ -7,9 +7,8 @@ import { useInView } from "react-intersection-observer";
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
 import { Section, type SectionProps, layoutInputs } from "~/components/section";
 import { Button } from "~/modules/button";
-import { DrawerFilter } from "~/modules/drawer-filter";
 import type { AppliedFilter } from "~/modules/sort-filter";
-import { PageHeader, Text } from "~/modules/text";
+import { DrawerFilter } from "./drawer-filter";
 import { ProductsLoadedOnScroll } from "./products-loaded-on-scroll";
 
 interface CollectionFiltersProps extends SectionProps {

From 6ad239a1c00c49b03bfcba1092a3ef8a39bd27b8 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Wed, 4 Dec 2024 06:25:15 +0700
Subject: [PATCH 17/39] Remove role and update background gradient colors of
 `GlobalLoading`

---
 app/modules/global-loading.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/modules/global-loading.tsx b/app/modules/global-loading.tsx
index 80f2d4c4..e161f8d4 100644
--- a/app/modules/global-loading.tsx
+++ b/app/modules/global-loading.tsx
@@ -26,8 +26,6 @@ export function GlobalLoading() {
 
   return (
     <div
-      // biome-ignore lint/a11y/useAriaPropsForRole: <explanation>
-      role="progressbar"
       aria-hidden={!active}
       aria-valuetext={active ? "Loading" : undefined}
       className="fixed inset-x-0 left-0 top-0 z-50 h-1 animate-pulse"
@@ -35,7 +33,7 @@ export function GlobalLoading() {
       <div
         ref={ref}
         className={clsx(
-          "h-full bg-gradient-to-r from-background to-body transition-all duration-500 ease-in-out",
+          "h-full bg-gradient-to-r from-neutral-600 to-gray-300 transition-all duration-500 ease-in-out",
           transition.state === "idle" &&
             (animating ? "w-full" : "w-0 opacity-0 transition-none"),
           transition.state === "submitting" && "w-4/12",

From c0ef845c7a7a510171302002c7a1988099220b32 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 5 Dec 2024 10:21:11 +0700
Subject: [PATCH 18/39] Update collection layout switcher icons

---
 .../collection-filters/layout-switcher.tsx    | 118 ++++++++++--------
 1 file changed, 67 insertions(+), 51 deletions(-)

diff --git a/app/sections/collection-filters/layout-switcher.tsx b/app/sections/collection-filters/layout-switcher.tsx
index 4e392718..3a0365be 100644
--- a/app/sections/collection-filters/layout-switcher.tsx
+++ b/app/sections/collection-filters/layout-switcher.tsx
@@ -1,6 +1,15 @@
 import type { IconProps } from "@phosphor-icons/react";
+import clsx from "clsx";
 import { cn } from "~/lib/cn";
 
+const LAYOUT_ICONS = {
+  1: LayoutList,
+  2: TwoColumns,
+  3: ThreeColumns,
+  4: FourColumns,
+  5: FiveColumns,
+};
+
 export function LayoutSwitcher({
   value,
   onChange,
@@ -20,38 +29,23 @@ export function LayoutSwitcher({
         className,
       )}
     >
-      <button
-        type="button"
-        data-active={value === 4}
-        onClick={() => onChange(4)}
-        className="border w-10 h-10 items-center justify-center hidden lg:flex"
-      >
-        <FourColumns className="w-5 h-5" />
-      </button>
-      <button
-        type="button"
-        data-active={value === 3}
-        className="border w-10 h-10 items-center justify-center hidden lg:flex"
-        onClick={() => onChange(3)}
-      >
-        <ThreeColumns className="w-5 h-5" />
-      </button>
-      <button
-        type="button"
-        data-active={value === 2}
-        className="border w-10 h-10 items-center justify-center flex lg:hidden"
-        onClick={() => onChange(2)}
-      >
-        <TwoColumns className="w-5 h-5" />
-      </button>
-      <button
-        type="button"
-        data-active={value === 1}
-        className="border w-10 h-10 items-center justify-center flex lg:hidden"
-        onClick={() => onChange(1)}
-      >
-        <LayoutList className="w-5 h-5" />
-      </button>
+      {[1, 2, 3, 4, 5].map((col) => {
+        let Icon = LAYOUT_ICONS[col];
+        return (
+          <button
+            key={col}
+            type="button"
+            data-active={value === col}
+            onClick={() => onChange(col)}
+            className={clsx(
+              "border w-10 h-10 items-center justify-center",
+              col <= 2 ? "flex lg:hidden" : "hidden lg:flex",
+            )}
+          >
+            <Icon className="w-5 h-5" />
+          </button>
+        );
+      })}
     </div>
   );
 }
@@ -59,14 +53,14 @@ export function LayoutSwitcher({
 function LayoutList(props: IconProps) {
   return (
     <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 12.5 9.5"
       {...props}
     >
-      <path d="M12.5.75a.76.76 0 01-.75.75h-11A.76.76 0 010 .75.76.76 0 01.75 0h11a.76.76 0 01.75.75z" />
-      <path d="M12.5 4.75a.76.76 0 01-.75.75h-11A.76.76 0 010 4.75.76.76 0 01.75 4h11a.76.76 0 01.75.75z" />
-      <path d="M12.5 8.75a.76.76 0 01-.75.75h-11A.76.76 0 010 8.75.76.76 0 01.75 8h11a.76.76 0 01.75.75z" />
+      <rect width="22" height="22" />
     </svg>
   );
 }
@@ -74,13 +68,15 @@ function LayoutList(props: IconProps) {
 function TwoColumns(props: IconProps) {
   return (
     <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 5.5 12.5"
       {...props}
     >
-      <path d="M.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 01.75 0z" />
-      <path d="M4.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 014.75 0z" />
+      <rect width="10" height="22" />
+      <rect x="12" width="10" height="22" />
     </svg>
   );
 }
@@ -88,14 +84,16 @@ function TwoColumns(props: IconProps) {
 function ThreeColumns(props: IconProps) {
   return (
     <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 9.5 12.5"
       {...props}
     >
-      <path d="M.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 01.75 0z" />
-      <path d="M4.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 014.75 0z" />
-      <path d="M8.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 018.75 0z" />
+      <rect width="6" height="22" />
+      <rect x="8" width="6" height="22" />
+      <rect x="16" width="6" height="22" />
     </svg>
   );
 }
@@ -103,18 +101,36 @@ function ThreeColumns(props: IconProps) {
 function FourColumns(props: IconProps) {
   return (
     <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="4" height="22" />
+      <rect x="6" width="4" height="22" />
+      <rect x="12" width="4" height="22" />
+      <rect x="18" width="4" height="22" />
+    </svg>
+  );
+}
+
+function FiveColumns(props: IconProps) {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 13.5 12.5"
       {...props}
     >
-      <path
-        id="Rectangle"
-        d="M.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 01.75 0z"
-      />
-      <path d="M4.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 014.75 0z" />
-      <path d="M8.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11A.76.76 0 018.75 0z" />
-      <path d="M12.75 0a.76.76 0 01.75.75v11a.76.76 0 01-.75.75.76.76 0 01-.75-.75v-11a.76.76 0 01.75-.75z" />
+      <rect width="2.8" height="22" />
+      <rect x="4.7998" width="2.8" height="22" />
+      <rect x="9.6001" width="2.8" height="22" />
+      <rect x="14.3999" width="2.8" height="22" />
+      <rect x="19.2002" width="2.8" height="22" />
     </svg>
   );
 }

From bb36a0c838d5f856f2e45b26f269614127e5d524 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 5 Dec 2024 16:30:56 +0700
Subject: [PATCH 19/39] Add filters component for product collections with
 price range functionality

---
 app/sections/collection-filters/filters.tsx | 238 ++++++++++++++++++++
 1 file changed, 238 insertions(+)
 create mode 100644 app/sections/collection-filters/filters.tsx

diff --git a/app/sections/collection-filters/filters.tsx b/app/sections/collection-filters/filters.tsx
new file mode 100644
index 00000000..c8dd9400
--- /dev/null
+++ b/app/sections/collection-filters/filters.tsx
@@ -0,0 +1,238 @@
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+import { Sliders } from "@phosphor-icons/react";
+import * as Dialog from "@radix-ui/react-dialog";
+import {
+  useLoaderData,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+} from "@remix-run/react";
+import type {
+  Filter,
+  ProductFilter,
+} from "@shopify/hydrogen/storefront-api-types";
+import clsx from "clsx";
+import type { SyntheticEvent } from "react";
+import { useState } from "react";
+import type { CollectionDetailsQuery } from "storefrontapi.generated";
+import { Button } from "~/components/button";
+import { Checkbox } from "~/components/checkbox";
+import { IconCaretDown, IconCaretRight } from "~/components/icons";
+import { FILTER_URL_PREFIX } from "~/lib/const";
+import type { AppliedFilter } from "~/lib/filter";
+import { getAppliedFilterLink, getFilterLink } from "~/lib/filter";
+import { Input } from "../../modules/input";
+
+export function Filters() {
+  let { collection, appliedFilters } = useLoaderData<
+    CollectionDetailsQuery & {
+      collections: Array<{ handle: string; title: string }>;
+      appliedFilters: AppliedFilter[];
+    }
+  >();
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <Button
+          variant="outline"
+          className="flex items-center gap-1.5 border py-2"
+        >
+          <Sliders size={18} />
+          <span>Filter</span>
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="fixed inset-0 bg-black/50 data-[state=open]:animate-fade-in z-10"
+          style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
+        />
+        <Dialog.Content
+          className={clsx([
+            "fixed inset-y-0 w-full md:w-[360px] bg-[--color-background] p-4 z-10",
+            "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
+          ])}
+        >
+          <FiltersList
+            filters={collection.products.filters as Filter[]}
+            appliedFilters={appliedFilters as AppliedFilter[]}
+          />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+function ListItemFilter({
+  option,
+  appliedFilters,
+}: {
+  option: Filter["values"][0];
+  appliedFilters: AppliedFilter[];
+}) {
+  let navigate = useNavigate();
+  let [params] = useSearchParams();
+  let location = useLocation();
+  let filter = appliedFilters.find(
+    (filter) => JSON.stringify(filter.filter) === option.input,
+  );
+  let [checked, setChecked] = useState(!!filter);
+
+  let handleCheckedChange = (checked: boolean) => {
+    setChecked(checked);
+    if (checked) {
+      const link = getFilterLink(option.input as string, params, location);
+      navigate(link);
+    } else if (filter) {
+      let link = getAppliedFilterLink(filter, params, location);
+      navigate(link);
+    }
+  };
+  return (
+    <div className="flex gap-2">
+      <Checkbox
+        checked={checked}
+        onCheckedChange={handleCheckedChange}
+        label={option.label}
+      />
+    </div>
+  );
+}
+
+export function FiltersList({ filters = [], appliedFilters = [] }) {
+  let [params] = useSearchParams();
+  let filterMarkup = (filter: Filter, option: Filter["values"][0]) => {
+    switch (filter.type) {
+      case "PRICE_RANGE": {
+        let priceFilter = params.get(`${FILTER_URL_PREFIX}price`);
+        let price = priceFilter
+          ? (JSON.parse(priceFilter) as ProductFilter["price"])
+          : undefined;
+        let min = Number.isNaN(Number(price?.min))
+          ? undefined
+          : Number(price?.min);
+        let max = Number.isNaN(Number(price?.max))
+          ? undefined
+          : Number(price?.max);
+        return <PriceRangeFilter min={min} max={max} />;
+      }
+
+      default:
+        return (
+          <ListItemFilter appliedFilters={appliedFilters} option={option} />
+        );
+    }
+  };
+
+  return (
+    <div className="text-sm">
+      {filters.map((filter: Filter) => (
+        <Disclosure
+          as="div"
+          key={filter.id}
+          className="w-full pb-6 pt-7 border-b"
+        >
+          {({ open }) => (
+            <>
+              <DisclosureButton className="flex w-full justify-between items-center">
+                <span className="text-sm">{filter.label}</span>
+                {open ? (
+                  <IconCaretDown className="w-4 h-4" />
+                ) : (
+                  <IconCaretRight className="w-4 h-4" />
+                )}
+              </DisclosureButton>
+              <DisclosurePanel key={filter.id}>
+                <ul key={filter.id} className="space-y-5 pt-8">
+                  {filter.values?.map((option) => {
+                    return (
+                      <li key={option.id}>{filterMarkup(filter, option)}</li>
+                    );
+                  })}
+                </ul>
+              </DisclosurePanel>
+            </>
+          )}
+        </Disclosure>
+      ))}
+    </div>
+  );
+}
+
+// const PRICE_RANGE_FILTER_DEBOUNCE = 500;
+
+function PriceRangeFilter({ max, min }: { max?: number; min?: number }) {
+  // const location = useLocation();
+  // const params = useMemo(
+  //   () => new URLSearchParams(location.search),
+  //   [location.search],
+  // );
+  // const navigate = useNavigate();
+
+  const [minPrice, setMinPrice] = useState(min);
+  const [maxPrice, setMaxPrice] = useState(max);
+
+  // useDebounce(
+  //   () => {
+  //     if (minPrice === undefined && maxPrice === undefined) {
+  //       params.delete(`${FILTER_URL_PREFIX}price`);
+  //       navigate(`${location.pathname}?${params.toString()}`);
+  //       return;
+  //     }
+
+  //     const price = {
+  //       ...(minPrice === undefined ? {} : {min: minPrice}),
+  //       ...(maxPrice === undefined ? {} : {max: maxPrice}),
+  //     };
+  //     const newParams = filterInputToParams({price}, params);
+  //     navigate(`${location.pathname}?${newParams.toString()}`);
+  //   },
+  //   PRICE_RANGE_FILTER_DEBOUNCE,
+  //   [minPrice, maxPrice],
+  // );
+
+  const onChangeMax = (event: SyntheticEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    const newMaxPrice = Number.isNaN(Number.parseFloat(value))
+      ? undefined
+      : Number.parseFloat(value);
+    setMaxPrice(newMaxPrice);
+  };
+
+  const onChangeMin = (event: SyntheticEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    const newMinPrice = Number.isNaN(Number.parseFloat(value))
+      ? undefined
+      : Number.parseFloat(value);
+    setMinPrice(newMinPrice);
+  };
+
+  return (
+    <div className="flex gap-6">
+      <label className="flex items-center gap-1" htmlFor="minPrice">
+        <span>$</span>
+        <Input
+          name="minPrice"
+          type="number"
+          value={minPrice ?? ""}
+          placeholder="From"
+          onChange={onChangeMin}
+        />
+      </label>
+      <label className="flex items-center gap-1" htmlFor="maxPrice">
+        <span>$</span>
+        <Input
+          name="maxPrice"
+          type="number"
+          value={maxPrice ?? ""}
+          placeholder="To"
+          onChange={onChangeMax}
+        />
+      </label>
+    </div>
+  );
+}

From d5e72c1684a2de58a6ce9d3db45b8321fef3c89d Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 5 Dec 2024 16:31:09 +0700
Subject: [PATCH 20/39] Add collection toolbars

---
 app/sections/collection-filters/tools-bar.tsx | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 app/sections/collection-filters/tools-bar.tsx

diff --git a/app/sections/collection-filters/tools-bar.tsx b/app/sections/collection-filters/tools-bar.tsx
new file mode 100644
index 00000000..d1eba741
--- /dev/null
+++ b/app/sections/collection-filters/tools-bar.tsx
@@ -0,0 +1,53 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { Filters } from "./filters";
+import { LayoutSwitcher } from "./layout-switcher";
+import { Sort } from "./sort";
+import { cn } from "~/lib/cn";
+
+let variants = cva("", {
+  variants: {
+    width: {
+      full: "",
+      stretch: "-mx-3 px-3 md:-mx-10 md:px-10 lg:-mx-16 lg:px-16",
+      fixed: [
+        "-mx-3 px-3 md:-mx-10 md:px-10",
+        "lg:-mx-[max(calc((100vw-var(--page-width))/2),1.5rem)]",
+        "lg:px-[max(calc((100vw-var(--page-width))/2),1.5rem)]",
+      ],
+    },
+  },
+});
+
+interface ToolsBarProps extends VariantProps<typeof variants> {
+  productsCount?: number;
+  showSearchSort?: boolean;
+  numberInRow?: number;
+  onLayoutChange: (number: number) => void;
+}
+
+export function ToolsBar({
+  width,
+  numberInRow,
+  productsCount = 0,
+  showSearchSort = false,
+  onLayoutChange,
+}: ToolsBarProps) {
+  return (
+    <div
+      className={cn("border-y border-line-subtle py-4", variants({ width }))}
+    >
+      <div className="gap-4 md:gap-8 flex w-full items-center justify-between">
+        <LayoutSwitcher
+          value={numberInRow}
+          onChange={onLayoutChange}
+          className="grow"
+        />
+        <span className="flex-1 text-center">{productsCount} Products</span>
+        <div className="flex gap-2 flex-1 justify-end">
+          <Sort show={showSearchSort} />
+          <Filters />
+        </div>
+      </div>
+    </div>
+  );
+}

From 90401b6126bed91bf6ba59f08842709f945ccc35 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 5 Dec 2024 16:31:31 +0700
Subject: [PATCH 21/39] Add config for border subtle

---
 app/weaverse/schema.server.ts | 8 +++++++-
 app/weaverse/style.tsx        | 4 ++--
 package-lock.json             | 7 -------
 package.json                  | 1 -
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index 7fee7da0..a44887d0 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -296,10 +296,16 @@ export let themeSchema: HydrogenThemeSchema = {
         },
         {
           type: "color",
-          label: "Lines and borders",
+          label: "Borders",
           name: "colorLine",
           defaultValue: "#3B352C",
         },
+        {
+          type: "color",
+          label: "Borders (subtle)",
+          name: "colorLineSubtle",
+          defaultValue: "#A19B91",
+        },
         {
           type: "heading",
           label: "Announcement bar",
diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index 0a157cab..e438f10a 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -1,5 +1,4 @@
 import { useThemeSettings } from "@weaverse/hydrogen";
-import { colord } from "colord";
 
 export function GlobalStyle() {
   let settings = useThemeSettings();
@@ -10,6 +9,7 @@ export function GlobalStyle() {
       colorTextSubtle,
       colorTextInverse,
       colorLine,
+      colorLineSubtle,
       topbarTextColor,
       topbarBgColor,
       headerBgColor,
@@ -58,7 +58,7 @@ export function GlobalStyle() {
               --color-text-subtle: ${colorTextSubtle};
               --color-text-inverse: ${colorTextInverse};
               --color-line: ${colorLine};
-              --color-line-subtle: ${colord(colorLine).lighten(0.3).toHex()};
+              --color-line-subtle: ${colorLineSubtle};
 
               /* Colors (header & footer) */
               --color-topbar-text: ${topbarTextColor};
diff --git a/package-lock.json b/package-lock.json
index b8dc3ef5..2e7b9b1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,6 @@
         "@weaverse/hydrogen": "4.0.0",
         "class-variance-authority": "0.7.0",
         "clsx": "2.1.1",
-        "colord": "^2.9.3",
         "cross-env": "7.0.3",
         "framer-motion": "^11.11.0",
         "graphql": "16.9.0",
@@ -7669,12 +7668,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/colord": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
-      "license": "MIT"
-    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
diff --git a/package.json b/package.json
index 1ecbba6c..a7bf1c5d 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "@weaverse/hydrogen": "4.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
-    "colord": "^2.9.3",
     "cross-env": "7.0.3",
     "framer-motion": "^11.11.0",
     "graphql": "16.9.0",

From aebf1b552e2dd93e4828c7d121049f44c376cd18 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Thu, 5 Dec 2024 16:31:46 +0700
Subject: [PATCH 22/39] Update collection details page

---
 .../collection-filters/drawer-filter.tsx      | 254 ------------------
 app/sections/collection-filters/index.tsx     |  59 ++--
 .../collection-filters/layout-switcher.tsx    |   2 +-
 3 files changed, 31 insertions(+), 284 deletions(-)
 delete mode 100644 app/sections/collection-filters/drawer-filter.tsx

diff --git a/app/sections/collection-filters/drawer-filter.tsx b/app/sections/collection-filters/drawer-filter.tsx
deleted file mode 100644
index 1ad4593b..00000000
--- a/app/sections/collection-filters/drawer-filter.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from "@headlessui/react";
-import { Sliders } from "@phosphor-icons/react";
-import { useLocation, useNavigate, useSearchParams } from "@remix-run/react";
-import type {
-  Filter,
-  ProductFilter,
-} from "@shopify/hydrogen/storefront-api-types";
-import type { SyntheticEvent } from "react";
-import { useState } from "react";
-import { Button } from "~/components/button";
-import { Checkbox } from "~/components/checkbox";
-import { IconCaretDown, IconCaretRight } from "~/components/icons";
-import { FILTER_URL_PREFIX } from "~/lib/const";
-import type { AppliedFilter } from "~/lib/filter";
-import { getAppliedFilterLink, getFilterLink } from "~/lib/filter";
-import { Drawer, useDrawer } from "../../modules/drawer";
-import { Input } from "../../modules/input";
-import { LayoutSwitcher } from "./layout-switcher";
-import { Sort } from "./sort";
-
-type DrawerFilterProps = {
-  productNumber?: number;
-  filters: Filter[];
-  appliedFilters?: AppliedFilter[];
-  collections?: Array<{ handle: string; title: string }>;
-  showSearchSort?: boolean;
-  numberInRow?: number;
-  onLayoutChange: (number: number) => void;
-};
-
-export function DrawerFilter({
-  filters,
-  numberInRow,
-  onLayoutChange,
-  appliedFilters = [],
-  productNumber = 0,
-  showSearchSort = false,
-}: DrawerFilterProps) {
-  const { openDrawer, isOpen, closeDrawer } = useDrawer();
-  return (
-    <div className="border-y border-line-subtle py-4">
-      <div className="gap-4 md:gap-8 flex w-full items-center justify-between">
-        <LayoutSwitcher
-          value={numberInRow}
-          onChange={onLayoutChange}
-          className="grow"
-        />
-        <span className="flex-1 text-center">{productNumber} Products</span>
-        <div className="flex gap-2 flex-1 justify-end">
-          <Sort show={showSearchSort} />
-          <Button
-            onClick={openDrawer}
-            variant="outline"
-            className="flex items-center gap-1.5 border py-2"
-          >
-            <Sliders size={18} />
-            <span>Filter</span>
-          </Button>
-          <Drawer
-            open={isOpen}
-            onClose={closeDrawer}
-            openFrom="left"
-            heading="Filter"
-          >
-            <div className="px-5 w-[360px]">
-              <FiltersDrawer
-                filters={filters}
-                appliedFilters={appliedFilters}
-                onLayoutChange={console.log}
-              />
-            </div>
-          </Drawer>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ListItemFilter({
-  option,
-  appliedFilters,
-}: {
-  option: Filter["values"][0];
-  appliedFilters: AppliedFilter[];
-}) {
-  const navigate = useNavigate();
-  const [params] = useSearchParams();
-  const location = useLocation();
-  let filter = appliedFilters.find(
-    (filter) => JSON.stringify(filter.filter) === option.input,
-  );
-  let [checked, setChecked] = useState(!!filter);
-
-  let handleCheckedChange = (checked: boolean) => {
-    setChecked(checked);
-    if (checked) {
-      const link = getFilterLink(option.input as string, params, location);
-      navigate(link);
-    } else if (filter) {
-      let link = getAppliedFilterLink(filter, params, location);
-      navigate(link);
-    }
-  };
-  return (
-    <div className="flex gap-2">
-      <Checkbox
-        checked={checked}
-        onCheckedChange={handleCheckedChange}
-        label={option.label}
-      />
-    </div>
-  );
-}
-
-export function FiltersDrawer({
-  filters = [],
-  appliedFilters = [],
-}: Omit<DrawerFilterProps, "children">) {
-  const [params] = useSearchParams();
-  const filterMarkup = (filter: Filter, option: Filter["values"][0]) => {
-    switch (filter.type) {
-      case "PRICE_RANGE": {
-        let priceFilter = params.get(`${FILTER_URL_PREFIX}price`);
-        let price = priceFilter
-          ? (JSON.parse(priceFilter) as ProductFilter["price"])
-          : undefined;
-        let min = Number.isNaN(Number(price?.min))
-          ? undefined
-          : Number(price?.min);
-        let max = Number.isNaN(Number(price?.max))
-          ? undefined
-          : Number(price?.max);
-        return <PriceRangeFilter min={min} max={max} />;
-      }
-
-      default:
-        return (
-          <ListItemFilter appliedFilters={appliedFilters} option={option} />
-        );
-    }
-  };
-
-  return (
-    <div className="text-sm">
-      {filters.map((filter: Filter) => (
-        <Disclosure
-          as="div"
-          key={filter.id}
-          className="w-full pb-6 pt-7 border-b"
-        >
-          {({ open }) => (
-            <>
-              <DisclosureButton className="flex w-full justify-between items-center">
-                <span className="text-sm">{filter.label}</span>
-                {open ? (
-                  <IconCaretDown className="w-4 h-4" />
-                ) : (
-                  <IconCaretRight className="w-4 h-4" />
-                )}
-              </DisclosureButton>
-              <DisclosurePanel key={filter.id}>
-                <ul key={filter.id} className="space-y-5 pt-8">
-                  {filter.values?.map((option) => {
-                    return (
-                      <li key={option.id}>{filterMarkup(filter, option)}</li>
-                    );
-                  })}
-                </ul>
-              </DisclosurePanel>
-            </>
-          )}
-        </Disclosure>
-      ))}
-    </div>
-  );
-}
-
-// const PRICE_RANGE_FILTER_DEBOUNCE = 500;
-
-function PriceRangeFilter({ max, min }: { max?: number; min?: number }) {
-  // const location = useLocation();
-  // const params = useMemo(
-  //   () => new URLSearchParams(location.search),
-  //   [location.search],
-  // );
-  // const navigate = useNavigate();
-
-  const [minPrice, setMinPrice] = useState(min);
-  const [maxPrice, setMaxPrice] = useState(max);
-
-  // useDebounce(
-  //   () => {
-  //     if (minPrice === undefined && maxPrice === undefined) {
-  //       params.delete(`${FILTER_URL_PREFIX}price`);
-  //       navigate(`${location.pathname}?${params.toString()}`);
-  //       return;
-  //     }
-
-  //     const price = {
-  //       ...(minPrice === undefined ? {} : {min: minPrice}),
-  //       ...(maxPrice === undefined ? {} : {max: maxPrice}),
-  //     };
-  //     const newParams = filterInputToParams({price}, params);
-  //     navigate(`${location.pathname}?${newParams.toString()}`);
-  //   },
-  //   PRICE_RANGE_FILTER_DEBOUNCE,
-  //   [minPrice, maxPrice],
-  // );
-
-  const onChangeMax = (event: SyntheticEvent) => {
-    const value = (event.target as HTMLInputElement).value;
-    const newMaxPrice = Number.isNaN(Number.parseFloat(value))
-      ? undefined
-      : Number.parseFloat(value);
-    setMaxPrice(newMaxPrice);
-  };
-
-  const onChangeMin = (event: SyntheticEvent) => {
-    const value = (event.target as HTMLInputElement).value;
-    const newMinPrice = Number.isNaN(Number.parseFloat(value))
-      ? undefined
-      : Number.parseFloat(value);
-    setMinPrice(newMinPrice);
-  };
-
-  return (
-    <div className="flex gap-6">
-      <label className="flex items-center gap-1" htmlFor="minPrice">
-        <span>$</span>
-        <Input
-          name="minPrice"
-          type="number"
-          value={minPrice ?? ""}
-          placeholder="From"
-          onChange={onChangeMin}
-        />
-      </label>
-      <label className="flex items-center gap-1" htmlFor="maxPrice">
-        <span>$</span>
-        <Input
-          name="maxPrice"
-          type="number"
-          value={maxPrice ?? ""}
-          placeholder="To"
-          onChange={onChangeMax}
-        />
-      </label>
-    </div>
-  );
-}
diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
index aec95ba6..9706b84e 100644
--- a/app/sections/collection-filters/index.tsx
+++ b/app/sections/collection-filters/index.tsx
@@ -1,56 +1,54 @@
 import { useLoaderData } from "@remix-run/react";
 import { Pagination } from "@shopify/hydrogen";
-import type { Filter } from "@shopify/hydrogen/storefront-api-types";
 import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import { forwardRef, useState } from "react";
 import { useInView } from "react-intersection-observer";
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
+import Link from "~/components/link";
 import { Section, type SectionProps, layoutInputs } from "~/components/section";
 import { Button } from "~/modules/button";
-import type { AppliedFilter } from "~/modules/sort-filter";
-import { DrawerFilter } from "./drawer-filter";
 import { ProductsLoadedOnScroll } from "./products-loaded-on-scroll";
+import { ToolsBar } from "./tools-bar";
 
 interface CollectionFiltersProps extends SectionProps {
-  showCollectionDescription: boolean;
   loadPrevText: string;
   loadMoreText: string;
 }
 
 let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
   (props, sectionRef) => {
-    let { showCollectionDescription, loadPrevText, loadMoreText, ...rest } =
-      props;
+    let { loadPrevText, loadMoreText, ...rest } = props;
 
     let { ref, inView } = useInView();
     let [numberInRow, setNumberInRow] = useState(4);
     let onLayoutChange = (number: number) => {
       setNumberInRow(number);
     };
-    let { collection, collections, appliedFilters } = useLoaderData<
+    let { collection, collections } = useLoaderData<
       CollectionDetailsQuery & {
         collections: Array<{ handle: string; title: string }>;
-        appliedFilters: AppliedFilter[];
       }
     >();
     let productNumber = collection?.products.nodes.length;
 
     if (collection?.products && collections) {
       return (
-        <Section ref={sectionRef} {...rest}>
-          <h6>{collection.title}</h6>
-          {showCollectionDescription && collection?.description && (
-            <div className="flex items-baseline justify-between w-full">
-              {collection.description}
+        <Section ref={sectionRef} {...rest} overflow="unset">
+          <div className="space-y-2.5 py-10">
+            <div className="flex items-center gap-2 text-body-subtle">
+              <Link to="/" className="hover:underline underline-offset-4">
+                Home
+              </Link>
+              <span>/</span>
+              <span>{collection.title}</span>
             </div>
-          )}
-          <DrawerFilter
+            <h3>{collection.title}</h3>
+          </div>
+          <ToolsBar
+            width={rest.width}
             numberInRow={numberInRow}
             onLayoutChange={onLayoutChange}
-            productNumber={productNumber}
-            filters={collection.products.filters as Filter[]}
-            appliedFilters={appliedFilters as AppliedFilter[]}
-            collections={collections}
+            productsCount={productNumber}
           />
           <Pagination connection={collection.products}>
             {({
@@ -62,7 +60,7 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
               hasNextPage,
               state,
             }) => (
-              <>
+              <div className="pt-12 pb-20">
                 <div className="flex items-center justify-center mb-6 empty:hidden">
                   <Button as={PreviousLink} variant="secondary" width="full">
                     {isLoading ? "Loading..." : loadPrevText}
@@ -86,7 +84,7 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
                     {isLoading ? "Loading..." : loadMoreText}
                   </Button>
                 </div>
-              </>
+              </div>
             )}
           </Pagination>
         </Section>
@@ -106,16 +104,19 @@ export let schema: HydrogenComponentSchema = {
     pages: ["COLLECTION"],
   },
   inspector: [
-    { group: "Layout", inputs: layoutInputs },
     {
-      group: "Collection filters",
+      group: "Layout",
+      inputs: layoutInputs.filter((inp) => {
+        return inp.name !== "borderRadius" && inp.name !== "gap";
+      }),
+    },
+    {
+      group: "Filtering and sorting",
+      inputs: [],
+    },
+    {
+      group: "Load more buttons",
       inputs: [
-        {
-          type: "switch",
-          name: "showCollectionDescription",
-          label: "Show collection description",
-          defaultValue: true,
-        },
         {
           type: "text",
           name: "loadPrevText",
diff --git a/app/sections/collection-filters/layout-switcher.tsx b/app/sections/collection-filters/layout-switcher.tsx
index 3a0365be..3ec8f0fd 100644
--- a/app/sections/collection-filters/layout-switcher.tsx
+++ b/app/sections/collection-filters/layout-switcher.tsx
@@ -22,7 +22,7 @@ export function LayoutSwitcher({
   return (
     <div
       className={cn(
-        "flex",
+        "flex gap-1",
         "[&>button]:text-[#b7b7b7] [&>button]:border-[#b7b7b7]",
         '[&>button[data-active="true"]]:text-[#696662]',
         '[&>button[data-active="true"]]:border-[#696662]',

From 9df18904bd76e43269031fea35f302e068e79ce3 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Fri, 6 Dec 2024 09:11:21 +0700
Subject: [PATCH 23/39] Refactor sort component to use Radix UI's dropdown menu

---
 app/sections/collection-filters/sort.tsx | 57 +++++++++++++-----------
 package-lock.json                        | 45 +++++++++++++++++++
 package.json                             |  1 +
 3 files changed, 77 insertions(+), 26 deletions(-)

diff --git a/app/sections/collection-filters/sort.tsx b/app/sections/collection-filters/sort.tsx
index b22156f5..ab6f7856 100644
--- a/app/sections/collection-filters/sort.tsx
+++ b/app/sections/collection-filters/sort.tsx
@@ -1,9 +1,9 @@
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { CaretDown } from "@phosphor-icons/react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Link, useLocation, useSearchParams } from "@remix-run/react";
 import clsx from "clsx";
+import { cn } from "~/lib/cn";
 import type { SortParam } from "~/lib/filter";
-import { getSortLink } from "~/lib/filter";
 
 const PRODUCT_SORT: { label: string; key: SortParam }[] = [
   { label: "Featured", key: "featured" },
@@ -48,36 +48,41 @@ export function Sort({
   let [params] = useSearchParams();
   let location = useLocation();
   let sortList = show ? SEARCH_SORT : PRODUCT_SORT;
-  let active =
+  let { key: currentSortValue } =
     sortList.find(({ key }) => key === params.get("sort")) || sortList[0];
 
   return (
-    <Menu as="div" className="relative z-10">
-      <MenuButton className="flex items-center gap-1.5 h-10 border px-4 py-2.5">
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger className="flex items-center gap-1.5 h-10 border px-4 py-2.5 focus-visible:outline-none">
         <span className="font-medium">Sort by</span>
         <CaretDown />
-      </MenuButton>
-      <MenuItems
-        as="nav"
-        className="absolute right-0 top-12 flex h-fit w-40 flex-col gap-2 border border-line-subtle bg-background p-5"
-      >
-        {sortList.map((item) => (
-          <MenuItem key={item.label}>
-            {() => (
-              <Link to={getSortLink(item.key, params, location)}>
-                <p
-                  className={clsx(
-                    "block text-base hover:underline underline-offset-4",
-                    active?.key === item.key ? "font-bold" : "font-normal",
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          sideOffset={8}
+          align="end"
+          className="flex h-fit w-44 flex-col gap-2 border border-line-subtle bg-background p-5"
+        >
+          {sortList.map(({ key, label }) => {
+            let pr = new URLSearchParams(params);
+            pr.set("sort", key);
+            let sortUrl = `${location.pathname}?${pr.toString()}`;
+            return (
+              <DropdownMenu.Item key={key} asChild>
+                <Link
+                  to={sortUrl}
+                  className={cn(
+                    "hover:underline underline-offset-[6px] hover:outline-none",
+                    currentSortValue === key && "underline",
                   )}
                 >
-                  {item.label}
-                </p>
-              </Link>
-            )}
-          </MenuItem>
-        ))}
-      </MenuItems>
-    </Menu>
+                  {label}
+                </Link>
+              </DropdownMenu.Item>
+            );
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index 2e7b9b1e..e9d75be6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@radix-ui/react-checkbox": "1.1.2",
         "@radix-ui/react-collapsible": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.2",
+        "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-menubar": "^1.1.2",
         "@radix-ui/react-scroll-area": "^1.2.1",
         "@radix-ui/react-tooltip": "1.1.4",
@@ -4621,6 +4622,50 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.2.tgz",
+      "integrity": "sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
diff --git a/package.json b/package.json
index a7bf1c5d..f85b7bd0 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@radix-ui/react-checkbox": "1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-tooltip": "1.1.4",

From fb19a56c7468ddbbe5017d7260a8adbe8aa8d65d Mon Sep 17 00:00:00 2001
From: Paul <phanminh65@gmail.com>
Date: Fri, 6 Dec 2024 13:48:06 +0700
Subject: [PATCH 24/39] Update to support defining localization

---
 app/lib/type.ts               | 13 +++++--------
 app/root.tsx                  |  2 +-
 app/weaverse/components.ts    | 10 +++++-----
 app/weaverse/schema.server.ts |  8 ++++++++
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/app/lib/type.ts b/app/lib/type.ts
index 289bfeb2..0b623c37 100644
--- a/app/lib/type.ts
+++ b/app/lib/type.ts
@@ -1,17 +1,14 @@
-import type { Storefront as HydrogenStorefront } from "@shopify/hydrogen";
 import type {
-  CountryCode,
-  CurrencyCode,
-  LanguageCode,
-} from "@shopify/hydrogen/storefront-api-types";
+  Storefront as HydrogenStorefront,
+  I18nBase,
+} from "@shopify/hydrogen";
+import type { CurrencyCode } from "@shopify/hydrogen/storefront-api-types";
 
 export type NonNullableFields<T> = {
   [P in keyof T]: NonNullable<T[P]>;
 };
 
-export type Locale = {
-  language: LanguageCode;
-  country: CountryCode;
+export type Locale = I18nBase & {
   label: string;
   currency: CurrencyCode;
 };
diff --git a/app/root.tsx b/app/root.tsx
index e7005b33..418a728c 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -218,7 +218,7 @@ function App() {
 export default withWeaverse(App);
 
 export function ErrorBoundary({ error }: { error: Error }) {
-  let routeError = useRouteError();
+  let routeError = useRouteError() as any;
   let isRouteError = isRouteErrorResponse(routeError);
 
   let pageType = "page";
diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts
index 80b4a89c..537c0d98 100644
--- a/app/weaverse/components.ts
+++ b/app/weaverse/components.ts
@@ -1,6 +1,6 @@
 import type { HydrogenComponent } from "@weaverse/hydrogen";
-import * as Link from "~/components/link";
 import * as Heading from "~/components/heading";
+import * as Link from "~/components/link";
 import * as Paragraph from "~/components/paragraph";
 import * as SubHeading from "~/components/subheading";
 import * as Judgeme from "~/modules/product-form/judgeme-review";
@@ -30,6 +30,8 @@ import * as ImageGalleryItems from "~/sections/image-gallery/items";
 import * as ImageWithText from "~/sections/image-with-text";
 import * as ImageWithTextContent from "~/sections/image-with-text/content";
 import * as ImageWithTextImage from "~/sections/image-with-text/image";
+import * as JudgemeReview from "~/sections/judgeme-reviews";
+import * as ReviewIndex from "~/sections/judgeme-reviews/review-index";
 import * as MapSection from "~/sections/map";
 import * as NewsLetter from "~/sections/newsletter";
 import * as NewsLetterForm from "~/sections/newsletter/newsletter-form";
@@ -52,16 +54,14 @@ import * as TestimonialItem from "~/sections/testimonials/item";
 import * as TestimonialItems from "~/sections/testimonials/items";
 import * as VideoEmbed from "~/sections/video-embed";
 import * as VideoEmbedItem from "~/sections/video-embed/video";
-import * as JudgemeReview from "~/sections/judgeme-reviews";
-import * as ReviewIndex from "~/sections/judgeme-reviews/review-index";
 
 export let components: HydrogenComponent[] = [
   SubHeading,
   Heading,
   Paragraph,
   Link,
-  AliReview,
-  AliReviewList,
+  // AliReview,
+  // AliReviewList,
   AllProducts,
   FeaturedCollections,
   FeaturedCollectionItems,
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index a44887d0..aabeb9ed 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -1,4 +1,5 @@
 import type { HydrogenThemeSchema, SwatchesConfigs } from "@weaverse/hydrogen";
+import { countries } from "~/data/countries";
 import pkg from "../../package.json";
 
 let swatchesConfigs: SwatchesConfigs = {
@@ -84,6 +85,13 @@ export let themeSchema: HydrogenThemeSchema = {
     documentationUrl: "https://weaverse.io/docs",
     supportUrl: "https://weaverse.io/contact",
   },
+  i18n: Object.values(countries).map((i) => {
+    return {
+      language: i.language,
+      country: i.country,
+      label: i.label,
+    };
+  }),
   inspector: [
     {
       group: "Layout",

From 5f98a509c5aab7180988af83e0f0b3eed5f1d7c3 Mon Sep 17 00:00:00 2001
From: Paul <phanminh65@gmail.com>
Date: Fri, 6 Dec 2024 13:49:46 +0700
Subject: [PATCH 25/39] Update to support defining localization

---
 CHANGELOG.md | 7 +++++++
 package.json | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8fe5b793..550235ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @weaverse/pilot
 
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @weaverse/hydrogen@4.0.1
+
 ## 3.0.4
 
 ### Patch Changes
diff --git a/package.json b/package.json
index a7bf1c5d..52d5932b 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@weaverse/pilot",
   "private": true,
   "sideEffects": false,
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "author": "Weaverse",
   "scripts": {
@@ -37,7 +37,7 @@
     "@shopify/cli": "^3.70.0",
     "@shopify/hydrogen": "2024.10.0",
     "@shopify/remix-oxygen": "2.0.9",
-    "@weaverse/hydrogen": "4.0.0",
+    "@weaverse/hydrogen": "4.0.1",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "cross-env": "7.0.3",

From 6183649bf01ff7a5855d9af3174028af4b8bad9e Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sat, 7 Dec 2024 15:41:11 +0700
Subject: [PATCH 26/39] Use *.ts file for hooks

---
 app/hooks/use-weaverse-component.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 app/hooks/use-weaverse-component.ts

diff --git a/app/hooks/use-weaverse-component.ts b/app/hooks/use-weaverse-component.ts
new file mode 100644
index 00000000..e69de29b

From 48db92a0a411a016d38fd8879a5fd6bf4c50f265 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sat, 7 Dec 2024 15:41:26 +0700
Subject: [PATCH 27/39] Use *.ts file for hooks

---
 app/hooks/{use-analytics.tsx => use-analytics.ts}           | 0
 app/hooks/{use-animation.tsx => use-animation.ts}           | 0
 app/hooks/{use-cart-fetchers.tsx => use-cart-fetchers.ts}   | 0
 app/hooks/{use-is-hydrated.tsx => use-is-hydrated.ts}       | 0
 app/hooks/{use-page-analytics.tsx => use-page-analytics.ts} | 0
 app/hooks/{use-shop-menu.tsx => use-shop-menu.ts}           | 0
 6 files changed, 0 insertions(+), 0 deletions(-)
 rename app/hooks/{use-analytics.tsx => use-analytics.ts} (100%)
 rename app/hooks/{use-animation.tsx => use-animation.ts} (100%)
 rename app/hooks/{use-cart-fetchers.tsx => use-cart-fetchers.ts} (100%)
 rename app/hooks/{use-is-hydrated.tsx => use-is-hydrated.ts} (100%)
 rename app/hooks/{use-page-analytics.tsx => use-page-analytics.ts} (100%)
 rename app/hooks/{use-shop-menu.tsx => use-shop-menu.ts} (100%)

diff --git a/app/hooks/use-analytics.tsx b/app/hooks/use-analytics.ts
similarity index 100%
rename from app/hooks/use-analytics.tsx
rename to app/hooks/use-analytics.ts
diff --git a/app/hooks/use-animation.tsx b/app/hooks/use-animation.ts
similarity index 100%
rename from app/hooks/use-animation.tsx
rename to app/hooks/use-animation.ts
diff --git a/app/hooks/use-cart-fetchers.tsx b/app/hooks/use-cart-fetchers.ts
similarity index 100%
rename from app/hooks/use-cart-fetchers.tsx
rename to app/hooks/use-cart-fetchers.ts
diff --git a/app/hooks/use-is-hydrated.tsx b/app/hooks/use-is-hydrated.ts
similarity index 100%
rename from app/hooks/use-is-hydrated.tsx
rename to app/hooks/use-is-hydrated.ts
diff --git a/app/hooks/use-page-analytics.tsx b/app/hooks/use-page-analytics.ts
similarity index 100%
rename from app/hooks/use-page-analytics.tsx
rename to app/hooks/use-page-analytics.ts
diff --git a/app/hooks/use-shop-menu.tsx b/app/hooks/use-shop-menu.ts
similarity index 100%
rename from app/hooks/use-shop-menu.tsx
rename to app/hooks/use-shop-menu.ts

From 8541d62f935fbaa53afbc63e066d0dc86768bc65 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 10:54:43 +0700
Subject: [PATCH 28/39] Add hook to get closest weaverse instance of any
 component

---
 app/hooks/use-closest-weaverse-item.ts | 22 ++++++++++++++++++++++
 app/hooks/use-weaverse-component.ts    |  0
 2 files changed, 22 insertions(+)
 create mode 100644 app/hooks/use-closest-weaverse-item.ts
 delete mode 100644 app/hooks/use-weaverse-component.ts

diff --git a/app/hooks/use-closest-weaverse-item.ts b/app/hooks/use-closest-weaverse-item.ts
new file mode 100644
index 00000000..69657a91
--- /dev/null
+++ b/app/hooks/use-closest-weaverse-item.ts
@@ -0,0 +1,22 @@
+import { useItemInstance } from "@weaverse/hydrogen";
+import { useEffect, useState } from "react";
+
+export function useClosestWeaverseItem(selector: string) {
+  let [weaverseId, setWeaverseId] = useState<string>("");
+  let weaverseItem = useItemInstance(weaverseId);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (!weaverseItem) {
+      let target = document.querySelector(selector);
+      if (target) {
+        let closest = target.closest("[data-wv-id]");
+        if (closest) {
+          setWeaverseId(closest.getAttribute("data-wv-id"));
+        }
+      }
+    }
+  }, []);
+
+  return weaverseItem;
+}
diff --git a/app/hooks/use-weaverse-component.ts b/app/hooks/use-weaverse-component.ts
deleted file mode 100644
index e69de29b..00000000

From 684ba7a27fc6ebae1b68df10a494192035324dee Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 10:55:04 +0700
Subject: [PATCH 29/39] Update collection filters layout switcher

---
 .../collection-filters/layout-switcher.tsx    | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/app/sections/collection-filters/layout-switcher.tsx b/app/sections/collection-filters/layout-switcher.tsx
index 3ec8f0fd..1c00c7bb 100644
--- a/app/sections/collection-filters/layout-switcher.tsx
+++ b/app/sections/collection-filters/layout-switcher.tsx
@@ -10,15 +10,18 @@ const LAYOUT_ICONS = {
   5: FiveColumns,
 };
 
+export type LayoutSwitcherProps = {
+  gridSizeDesktop: number;
+  gridSizeMobile: number;
+  onGridSizeChange: (number: number) => void;
+};
+
 export function LayoutSwitcher({
-  value,
-  onChange,
+  gridSizeDesktop,
+  gridSizeMobile,
+  onGridSizeChange,
   className,
-}: {
-  value: number;
-  onChange: (number: number) => void;
-  className?: string;
-}) {
+}: LayoutSwitcherProps & { className?: string }) {
   return (
     <div
       className={cn(
@@ -35,14 +38,16 @@ export function LayoutSwitcher({
           <button
             key={col}
             type="button"
-            data-active={value === col}
-            onClick={() => onChange(col)}
+            data-active={
+              col > 2 ? gridSizeDesktop === col : gridSizeMobile === col
+            }
+            onClick={() => onGridSizeChange(col)}
             className={clsx(
-              "border w-10 h-10 items-center justify-center",
-              col <= 2 ? "flex lg:hidden" : "hidden lg:flex",
+              "border w-12 h-12 items-center justify-center",
+              col > 2 ? "hidden lg:flex" : "flex lg:hidden",
             )}
           >
-            <Icon className="w-5 h-5" />
+            <Icon className="w-[22px] h-[22px]" />
           </button>
         );
       })}

From c3b7514165df44a1dcf3e1c629d98a289cfb5697 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 10:55:17 +0700
Subject: [PATCH 30/39] Update collection sorting

---
 app/lib/filter.ts                        |  9 ---------
 app/sections/collection-filters/sort.tsx | 11 +++--------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/app/lib/filter.ts b/app/lib/filter.ts
index 11c4536f..788e0442 100644
--- a/app/lib/filter.ts
+++ b/app/lib/filter.ts
@@ -27,15 +27,6 @@ export function getAppliedFilterLink(
   return `${location.pathname}?${paramsClone.toString()}`;
 }
 
-export function getSortLink(
-  sort: SortParam,
-  params: URLSearchParams,
-  location: Location,
-) {
-  params.set("sort", sort);
-  return `${location.pathname}?${params.toString()}`;
-}
-
 export function getFilterLink(
   rawInput: string | ProductFilter,
   params: URLSearchParams,
diff --git a/app/sections/collection-filters/sort.tsx b/app/sections/collection-filters/sort.tsx
index ab6f7856..34455287 100644
--- a/app/sections/collection-filters/sort.tsx
+++ b/app/sections/collection-filters/sort.tsx
@@ -1,7 +1,6 @@
 import { CaretDown } from "@phosphor-icons/react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Link, useLocation, useSearchParams } from "@remix-run/react";
-import clsx from "clsx";
 import { cn } from "~/lib/cn";
 import type { SortParam } from "~/lib/filter";
 
@@ -40,20 +39,16 @@ const SEARCH_SORT: { label: string; key: SortParam }[] = [
   },
 ];
 
-export function Sort({
-  show = false,
-}: {
-  show?: boolean;
-}) {
+export function Sort() {
   let [params] = useSearchParams();
   let location = useLocation();
-  let sortList = show ? SEARCH_SORT : PRODUCT_SORT;
+  let sortList = PRODUCT_SORT;
   let { key: currentSortValue } =
     sortList.find(({ key }) => key === params.get("sort")) || sortList[0];
 
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger className="flex items-center gap-1.5 h-10 border px-4 py-2.5 focus-visible:outline-none">
+      <DropdownMenu.Trigger className="flex items-center gap-1.5 h-12 border px-4 py-2.5 focus-visible:outline-none">
         <span className="font-medium">Sort by</span>
         <CaretDown />
       </DropdownMenu.Trigger>

From 11b37cfc88b059e945c482bd059e0e3a72cbff08 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 10:55:35 +0700
Subject: [PATCH 31/39] Update collection filters toolbar

---
 app/sections/collection-filters/filters.tsx   | 164 ++++++-------
 app/sections/collection-filters/index.tsx     | 219 ++++++++++++++----
 app/sections/collection-filters/tools-bar.tsx |  89 +++++--
 3 files changed, 306 insertions(+), 166 deletions(-)

diff --git a/app/sections/collection-filters/filters.tsx b/app/sections/collection-filters/filters.tsx
index c8dd9400..fe62a65d 100644
--- a/app/sections/collection-filters/filters.tsx
+++ b/app/sections/collection-filters/filters.tsx
@@ -1,10 +1,4 @@
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from "@headlessui/react";
-import { Sliders } from "@phosphor-icons/react";
-import * as Dialog from "@radix-ui/react-dialog";
+import * as Accordion from "@radix-ui/react-accordion";
 import {
   useLoaderData,
   useLocation,
@@ -15,64 +9,96 @@ import type {
   Filter,
   ProductFilter,
 } from "@shopify/hydrogen/storefront-api-types";
-import clsx from "clsx";
 import type { SyntheticEvent } from "react";
 import { useState } from "react";
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
-import { Button } from "~/components/button";
 import { Checkbox } from "~/components/checkbox";
-import { IconCaretDown, IconCaretRight } from "~/components/icons";
+import { IconCaretRight } from "~/components/icons";
 import { FILTER_URL_PREFIX } from "~/lib/const";
 import type { AppliedFilter } from "~/lib/filter";
 import { getAppliedFilterLink, getFilterLink } from "~/lib/filter";
 import { Input } from "../../modules/input";
+import { useClosestWeaverseItem } from "~/hooks/use-closest-weaverse-item";
+import type { CollectionFiltersData } from ".";
 
 export function Filters() {
+  let parentInstance = useClosestWeaverseItem(".filters-list");
+  let parentData = parentInstance.data as unknown as CollectionFiltersData;
+  let { expandFilters, showFiltersCount } = parentData;
+  let [params] = useSearchParams();
   let { collection, appliedFilters } = useLoaderData<
     CollectionDetailsQuery & {
       collections: Array<{ handle: string; title: string }>;
       appliedFilters: AppliedFilter[];
     }
   >();
+  let filters = collection.products.filters as Filter[];
 
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <Button
-          variant="outline"
-          className="flex items-center gap-1.5 border py-2"
-        >
-          <Sliders size={18} />
-          <span>Filter</span>
-        </Button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay
-          className="fixed inset-0 bg-black/50 data-[state=open]:animate-fade-in z-10"
-          style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
-        />
-        <Dialog.Content
-          className={clsx([
-            "fixed inset-y-0 w-full md:w-[360px] bg-[--color-background] p-4 z-10",
-            "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
-          ])}
-        >
-          <FiltersList
-            filters={collection.products.filters as Filter[]}
+  let filterMarkup = (filter: Filter, option: Filter["values"][0]) => {
+    switch (filter.type) {
+      case "PRICE_RANGE": {
+        let priceFilter = params.get(`${FILTER_URL_PREFIX}price`);
+        let price = priceFilter
+          ? (JSON.parse(priceFilter) as ProductFilter["price"])
+          : undefined;
+        let min = Number.isNaN(Number(price?.min))
+          ? undefined
+          : Number(price?.min);
+        let max = Number.isNaN(Number(price?.max))
+          ? undefined
+          : Number(price?.max);
+        return <PriceRangeFilter min={min} max={max} />;
+      }
+
+      default:
+        return (
+          <ListItemFilter
             appliedFilters={appliedFilters as AppliedFilter[]}
+            option={option}
+            showFiltersCount={showFiltersCount}
           />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+        );
+    }
+  };
+
+  return (
+    <Accordion.Root
+      type="multiple"
+      className="filters-list"
+      key={expandFilters.toString() + showFiltersCount}
+      defaultValue={expandFilters ? filters.map((filter) => filter.id) : []}
+    >
+      {filters.map((filter: Filter) => (
+        <Accordion.Item
+          key={filter.id}
+          value={filter.id}
+          className="w-full pb-6 pt-7 border-b border-[#b7b7b7]"
+        >
+          <Accordion.Trigger className="flex w-full justify-between items-center [&>svg]:data-[state=open]:rotate-90">
+            <span>{filter.label}</span>
+            <IconCaretRight className="w-4 h-4 transition-transform rotate-0" />
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <ul key={filter.id} className="space-y-5 pt-8">
+              {filter.values?.map((option) => {
+                return <li key={option.id}>{filterMarkup(filter, option)}</li>;
+              })}
+            </ul>
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
   );
 }
 
 function ListItemFilter({
   option,
   appliedFilters,
+  showFiltersCount,
 }: {
   option: Filter["values"][0];
   appliedFilters: AppliedFilter[];
+  showFiltersCount: boolean;
 }) {
   let navigate = useNavigate();
   let [params] = useSearchParams();
@@ -97,72 +123,14 @@ function ListItemFilter({
       <Checkbox
         checked={checked}
         onCheckedChange={handleCheckedChange}
-        label={option.label}
+        label={
+          showFiltersCount ? `${option.label} (${option.count})` : option.label
+        }
       />
     </div>
   );
 }
 
-export function FiltersList({ filters = [], appliedFilters = [] }) {
-  let [params] = useSearchParams();
-  let filterMarkup = (filter: Filter, option: Filter["values"][0]) => {
-    switch (filter.type) {
-      case "PRICE_RANGE": {
-        let priceFilter = params.get(`${FILTER_URL_PREFIX}price`);
-        let price = priceFilter
-          ? (JSON.parse(priceFilter) as ProductFilter["price"])
-          : undefined;
-        let min = Number.isNaN(Number(price?.min))
-          ? undefined
-          : Number(price?.min);
-        let max = Number.isNaN(Number(price?.max))
-          ? undefined
-          : Number(price?.max);
-        return <PriceRangeFilter min={min} max={max} />;
-      }
-
-      default:
-        return (
-          <ListItemFilter appliedFilters={appliedFilters} option={option} />
-        );
-    }
-  };
-
-  return (
-    <div className="text-sm">
-      {filters.map((filter: Filter) => (
-        <Disclosure
-          as="div"
-          key={filter.id}
-          className="w-full pb-6 pt-7 border-b"
-        >
-          {({ open }) => (
-            <>
-              <DisclosureButton className="flex w-full justify-between items-center">
-                <span className="text-sm">{filter.label}</span>
-                {open ? (
-                  <IconCaretDown className="w-4 h-4" />
-                ) : (
-                  <IconCaretRight className="w-4 h-4" />
-                )}
-              </DisclosureButton>
-              <DisclosurePanel key={filter.id}>
-                <ul key={filter.id} className="space-y-5 pt-8">
-                  {filter.values?.map((option) => {
-                    return (
-                      <li key={option.id}>{filterMarkup(filter, option)}</li>
-                    );
-                  })}
-                </ul>
-              </DisclosurePanel>
-            </>
-          )}
-        </Disclosure>
-      ))}
-    </div>
-  );
-}
-
 // const PRICE_RANGE_FILTER_DEBOUNCE = 500;
 
 function PriceRangeFilter({ max, min }: { max?: number; min?: number }) {
diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
index 9706b84e..a65e58a5 100644
--- a/app/sections/collection-filters/index.tsx
+++ b/app/sections/collection-filters/index.tsx
@@ -1,35 +1,63 @@
 import { useLoaderData } from "@remix-run/react";
 import { Pagination } from "@shopify/hydrogen";
 import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
-import { forwardRef, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { useInView } from "react-intersection-observer";
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
 import Link from "~/components/link";
 import { Section, type SectionProps, layoutInputs } from "~/components/section";
-import { Button } from "~/modules/button";
+import { Filters } from "./filters";
 import { ProductsLoadedOnScroll } from "./products-loaded-on-scroll";
 import { ToolsBar } from "./tools-bar";
 
-interface CollectionFiltersProps extends SectionProps {
+export interface CollectionFiltersData {
+  enableSort: boolean;
+  showProductsCount: boolean;
+  enableFilter: boolean;
+  filtersPosition: "sidebar" | "drawer";
+  expandFilters: boolean;
+  showFiltersCount: boolean;
+  productsPerRowDesktop: number;
+  productsPerRowMobile: number;
   loadPrevText: string;
   loadMoreText: string;
 }
 
+interface CollectionFiltersProps extends SectionProps, CollectionFiltersData {}
+
 let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
   (props, sectionRef) => {
-    let { loadPrevText, loadMoreText, ...rest } = props;
-
+    let {
+      enableSort,
+      showFiltersCount,
+      enableFilter,
+      filtersPosition,
+      expandFilters,
+      showProductsCount,
+      productsPerRowDesktop,
+      productsPerRowMobile,
+      loadPrevText,
+      loadMoreText,
+      ...rest
+    } = props;
     let { ref, inView } = useInView();
-    let [numberInRow, setNumberInRow] = useState(4);
-    let onLayoutChange = (number: number) => {
-      setNumberInRow(number);
-    };
     let { collection, collections } = useLoaderData<
       CollectionDetailsQuery & {
         collections: Array<{ handle: string; title: string }>;
       }
     >();
-    let productNumber = collection?.products.nodes.length;
+
+    let [gridSizeDesktop, setGridSizeDesktop] = useState(
+      Number(productsPerRowDesktop) || 3,
+    );
+    let [gridSizeMobile, setGridSizeMobile] = useState(
+      Number(productsPerRowMobile) || 1,
+    );
+
+    useEffect(() => {
+      setGridSizeDesktop(Number(productsPerRowDesktop) || 3);
+      setGridSizeMobile(Number(productsPerRowMobile) || 1);
+    }, [productsPerRowDesktop, productsPerRowMobile]);
 
     if (collection?.products && collections) {
       return (
@@ -46,47 +74,67 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
           </div>
           <ToolsBar
             width={rest.width}
-            numberInRow={numberInRow}
-            onLayoutChange={onLayoutChange}
-            productsCount={productNumber}
+            gridSizeDesktop={gridSizeDesktop}
+            gridSizeMobile={gridSizeMobile}
+            onGridSizeChange={(v) => {
+              if (v > 2) {
+                setGridSizeDesktop(v);
+              } else {
+                setGridSizeMobile(v);
+              }
+            }}
+            {...props}
           />
-          <Pagination connection={collection.products}>
-            {({
-              nodes,
-              isLoading,
-              PreviousLink,
-              NextLink,
-              nextPageUrl,
-              hasNextPage,
-              state,
-            }) => (
-              <div className="pt-12 pb-20">
-                <div className="flex items-center justify-center mb-6 empty:hidden">
-                  <Button as={PreviousLink} variant="secondary" width="full">
-                    {isLoading ? "Loading..." : loadPrevText}
-                  </Button>
-                </div>
-                <ProductsLoadedOnScroll
-                  numberInRow={numberInRow}
-                  nodes={nodes}
-                  inView={inView}
-                  nextPageUrl={nextPageUrl}
-                  hasNextPage={hasNextPage}
-                  state={state}
-                />
-                <div className="flex items-center justify-center mt-6">
-                  <Button
-                    ref={ref}
-                    as={NextLink}
-                    variant="secondary"
-                    width="full"
-                  >
-                    {isLoading ? "Loading..." : loadMoreText}
-                  </Button>
-                </div>
+          <div className="flex gap-8 pt-6 lg:pt-12 pb-8 lg:pb-20">
+            {filtersPosition === "sidebar" && (
+              <div className="hidden lg:block shrink-0 w-72 space-y-4">
+                <div className="font-bold">Filters</div>
+                <Filters />
               </div>
             )}
-          </Pagination>
+            <Pagination connection={collection.products}>
+              {({
+                nodes,
+                isLoading,
+                nextPageUrl,
+                previousPageUrl,
+                hasNextPage,
+                hasPreviousPage,
+                state,
+              }) => (
+                <div className="flex w-full flex-col gap-8 items-center">
+                  {hasPreviousPage && (
+                    <Link
+                      to={previousPageUrl}
+                      variant="outline"
+                      className="mx-auto"
+                    >
+                      {isLoading ? "Loading..." : loadPrevText}
+                    </Link>
+                  )}
+                  <ProductsLoadedOnScroll
+                    gridSizeDesktop={gridSizeDesktop}
+                    gridSizeMobile={gridSizeMobile}
+                    nodes={nodes}
+                    inView={inView}
+                    nextPageUrl={nextPageUrl}
+                    hasNextPage={hasNextPage}
+                    state={state}
+                  />
+                  {hasNextPage && (
+                    <Link
+                      ref={ref}
+                      to={nextPageUrl}
+                      variant="outline"
+                      className="mx-auto"
+                    >
+                      {isLoading ? "Loading..." : loadMoreText}
+                    </Link>
+                  )}
+                </div>
+              )}
+            </Pagination>
+          </div>
         </Section>
       );
     }
@@ -112,11 +160,82 @@ export let schema: HydrogenComponentSchema = {
     },
     {
       group: "Filtering and sorting",
-      inputs: [],
+      inputs: [
+        {
+          type: "switch",
+          name: "enableSort",
+          label: "Enable sorting",
+          defaultValue: true,
+        },
+        {
+          type: "switch",
+          name: "showProductsCount",
+          label: "Show products count",
+          defaultValue: true,
+        },
+        {
+          type: "switch",
+          name: "enableFilter",
+          label: "Enable filtering",
+          defaultValue: true,
+        },
+        {
+          type: "select",
+          name: "filtersPosition",
+          label: "Filters position",
+          configs: {
+            options: [
+              { value: "sidebar", label: "Sidebar" },
+              { value: "drawer", label: "Drawer" },
+            ],
+          },
+          defaultValue: "sidebar",
+          condition: "enableFilter.eq.true",
+        },
+        {
+          type: "switch",
+          name: "expandFilters",
+          label: "Expand filters",
+          defaultValue: true,
+          condition: "enableFilter.eq.true",
+        },
+        {
+          type: "switch",
+          name: "showFiltersCount",
+          label: "Show filters count",
+          defaultValue: true,
+          condition: "enableFilter.eq.true",
+        },
+      ],
     },
     {
-      group: "Load more buttons",
+      group: "Products",
       inputs: [
+        {
+          type: "select",
+          name: "productsPerRowDesktop",
+          label: "Default products per row (desktop)",
+          configs: {
+            options: [
+              { value: "3", label: "3" },
+              { value: "4", label: "4" },
+              { value: "5", label: "5" },
+            ],
+          },
+          defaultValue: "3",
+        },
+        {
+          type: "select",
+          name: "productsPerRowMobile",
+          label: "Default products per row (mobile)",
+          configs: {
+            options: [
+              { value: "1", label: "1" },
+              { value: "2", label: "2" },
+            ],
+          },
+          defaultValue: "1",
+        },
         {
           type: "text",
           name: "loadPrevText",
diff --git a/app/sections/collection-filters/tools-bar.tsx b/app/sections/collection-filters/tools-bar.tsx
index d1eba741..855710a1 100644
--- a/app/sections/collection-filters/tools-bar.tsx
+++ b/app/sections/collection-filters/tools-bar.tsx
@@ -1,8 +1,14 @@
+import { useLoaderData } from "@remix-run/react";
 import { type VariantProps, cva } from "class-variance-authority";
+import type { CollectionDetailsQuery } from "storefrontapi.generated";
+import { cn } from "~/lib/cn";
 import { Filters } from "./filters";
-import { LayoutSwitcher } from "./layout-switcher";
+import { LayoutSwitcher, type LayoutSwitcherProps } from "./layout-switcher";
 import { Sort } from "./sort";
-import { cn } from "~/lib/cn";
+import * as Dialog from "@radix-ui/react-dialog";
+import { Button } from "~/components/button";
+import { Sliders } from "@phosphor-icons/react";
+import clsx from "clsx";
 
 let variants = cva("", {
   variants: {
@@ -18,36 +24,83 @@ let variants = cva("", {
   },
 });
 
-interface ToolsBarProps extends VariantProps<typeof variants> {
-  productsCount?: number;
-  showSearchSort?: boolean;
-  numberInRow?: number;
-  onLayoutChange: (number: number) => void;
+interface ToolsBarProps
+  extends VariantProps<typeof variants>,
+    LayoutSwitcherProps {
+  enableSort: boolean;
+  showProductsCount: boolean;
+  enableFilter: boolean;
+  filtersPosition: "sidebar" | "drawer";
+  expandFilters: boolean;
+  showFiltersCount: boolean;
 }
 
 export function ToolsBar({
+  enableSort,
+  enableFilter,
+  filtersPosition,
+  showProductsCount,
   width,
-  numberInRow,
-  productsCount = 0,
-  showSearchSort = false,
-  onLayoutChange,
+  gridSizeDesktop,
+  gridSizeMobile,
+  onGridSizeChange,
 }: ToolsBarProps) {
+  let { collection } = useLoaderData<CollectionDetailsQuery>();
   return (
     <div
       className={cn("border-y border-line-subtle py-4", variants({ width }))}
     >
       <div className="gap-4 md:gap-8 flex w-full items-center justify-between">
         <LayoutSwitcher
-          value={numberInRow}
-          onChange={onLayoutChange}
-          className="grow"
+          gridSizeDesktop={gridSizeDesktop}
+          gridSizeMobile={gridSizeMobile}
+          onGridSizeChange={onGridSizeChange}
         />
-        <span className="flex-1 text-center">{productsCount} Products</span>
-        <div className="flex gap-2 flex-1 justify-end">
-          <Sort show={showSearchSort} />
-          <Filters />
+        {showProductsCount && (
+          <span className="grow text-center hidden md:inline">
+            {collection?.products.nodes.length} Products
+          </span>
+        )}
+        <div className="flex gap-2">
+          {enableSort && <Sort />}
+          {enableFilter && <FiltersDrawer filtersPosition={filtersPosition} />}
         </div>
       </div>
     </div>
   );
 }
+
+function FiltersDrawer({
+  filtersPosition,
+}: { filtersPosition: ToolsBarProps["filtersPosition"] }) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "flex items-center gap-1.5 border py-2 h-12",
+            filtersPosition === "sidebar" && "lg:hidden",
+          )}
+        >
+          <Sliders size={18} />
+          <span>Filter</span>
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="fixed inset-0 bg-black/50 data-[state=open]:animate-fade-in z-10"
+          style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
+        />
+        <Dialog.Content
+          className={clsx([
+            "fixed inset-y-0 w-full md:w-[360px] bg-[--color-background] p-4 z-10",
+            "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
+          ])}
+        >
+          <Filters />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

From 639569a5a7d6d0161f3966ecd3ac2d5ecdfd0ead Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 10:55:45 +0700
Subject: [PATCH 32/39] Update product card size

---
 app/modules/product-card/index.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/modules/product-card/index.tsx b/app/modules/product-card/index.tsx
index 0512227e..9cb7a784 100644
--- a/app/modules/product-card/index.tsx
+++ b/app/modules/product-card/index.tsx
@@ -39,13 +39,16 @@ export function ProductCard({
   return (
     <div className="flex flex-col gap-2">
       <div className={clsx("grid gap-4", className)}>
-        <div className="relative aspect-[4/5] group">
+        <div className="relative group">
           {image && (
-            <Link to={`/products/${product.handle}`} prefetch="intent">
+            <Link
+              to={`/products/${product.handle}`}
+              prefetch="intent"
+              className="block"
+            >
               <Image
-                className="object-cover w-full opacity-0 animate-fade-in"
+                className="w-full h-full opacity-0 animate-fade-in"
                 sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
-                aspectRatio="4/5"
                 data={image}
                 alt={image.altText || `Picture of ${product.title}`}
                 loading={loading}

From 372ff57c45aaf519707747ebd712ebf074fb7263 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 10:55:58 +0700
Subject: [PATCH 33/39] Update collection list product grid

---
 .../products-loaded-on-scroll.tsx             | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/sections/collection-filters/products-loaded-on-scroll.tsx b/app/sections/collection-filters/products-loaded-on-scroll.tsx
index e23df346..ad7adf02 100644
--- a/app/sections/collection-filters/products-loaded-on-scroll.tsx
+++ b/app/sections/collection-filters/products-loaded-on-scroll.tsx
@@ -1,26 +1,27 @@
 import { useNavigate } from "@remix-run/react";
 import { useEffect } from "react";
 import { getImageLoadingPriority } from "~/lib/const";
-import { Grid } from "~/modules/grid";
 import { ProductCard } from "~/modules/product-card";
 
-type ProductsLoadedOnScrollProps = {
+interface ProductsLoadedOnScrollProps {
+  gridSizeDesktop: number;
+  gridSizeMobile: number;
   nodes: any;
-  numberInRow: number;
   inView: boolean;
   nextPageUrl: string;
   hasNextPage: boolean;
   state: any;
-};
+}
 
 export function ProductsLoadedOnScroll(props: ProductsLoadedOnScrollProps) {
   let {
+    gridSizeMobile,
+    gridSizeDesktop,
     nodes,
     inView,
     nextPageUrl,
     hasNextPage,
     state,
-    numberInRow = 4,
   } = props;
   let navigate = useNavigate();
 
@@ -35,7 +36,15 @@ export function ProductsLoadedOnScroll(props: ProductsLoadedOnScrollProps) {
   }, [inView, navigate, state, nextPageUrl, hasNextPage]);
 
   return (
-    <Grid layout="products" numberInRow={numberInRow}>
+    <div
+      style={
+        {
+          "--cols-mobile": `repeat(${gridSizeMobile || 1}, minmax(0, 1fr))`,
+          "--cols-desktop": `repeat(${gridSizeDesktop || 3}, minmax(0, 1fr))`,
+        } as React.CSSProperties
+      }
+      className="w-full grid grid-cols-[--cols-mobile] lg:grid-cols-[--cols-desktop] gap-x-1.5 gap-y-8 lg:gap-y-10"
+    >
       {nodes.map((product: any, i: number) => (
         <ProductCard
           key={product.id}
@@ -43,6 +52,6 @@ export function ProductsLoadedOnScroll(props: ProductsLoadedOnScrollProps) {
           loading={getImageLoadingPriority(i)}
         />
       ))}
-    </Grid>
+    </div>
   );
 }

From ecb011124f067b0b08581e6393de1e5aa888a2bc Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 10:56:11 +0700
Subject: [PATCH 34/39] Adding radix dep for handling accordions

---
 package-lock.json | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 48 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index e9d75be6..6abbe60a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@graphql-codegen/cli": "5.0.3",
         "@headlessui/react": "2.2.0",
         "@phosphor-icons/react": "2.1.7",
+        "@radix-ui/react-accordion": "^1.2.1",
         "@radix-ui/react-checkbox": "1.1.2",
         "@radix-ui/react-collapsible": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.2",
@@ -4365,6 +4366,52 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.1.tgz",
+      "integrity": "sha512-bg/l7l5QzUjgsh8kjwDFommzAshnUsuVMV5NM56QVCm+7ZckYdd9P/ExR8xG/Oup0OajVxNLaHJ1tb8mXk+nzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collapsible": "1.1.1",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
diff --git a/package.json b/package.json
index f85b7bd0..f8ba08a2 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@graphql-codegen/cli": "5.0.3",
     "@headlessui/react": "2.2.0",
     "@phosphor-icons/react": "2.1.7",
+    "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-checkbox": "1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",

From cfaa13925f07c48028a88c8c3a07b62276d9a18f Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 11:02:45 +0700
Subject: [PATCH 35/39] Enhance accordion behavior in filters with animations

---
 app/sections/collection-filters/filters.tsx | 21 ++++++++++++++++++---
 tailwind.config.js                          |  5 +++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/sections/collection-filters/filters.tsx b/app/sections/collection-filters/filters.tsx
index fe62a65d..b3a54f7a 100644
--- a/app/sections/collection-filters/filters.tsx
+++ b/app/sections/collection-filters/filters.tsx
@@ -9,17 +9,18 @@ import type {
   Filter,
   ProductFilter,
 } from "@shopify/hydrogen/storefront-api-types";
+import clsx from "clsx";
 import type { SyntheticEvent } from "react";
 import { useState } from "react";
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
 import { Checkbox } from "~/components/checkbox";
 import { IconCaretRight } from "~/components/icons";
+import { useClosestWeaverseItem } from "~/hooks/use-closest-weaverse-item";
 import { FILTER_URL_PREFIX } from "~/lib/const";
 import type { AppliedFilter } from "~/lib/filter";
 import { getAppliedFilterLink, getFilterLink } from "~/lib/filter";
-import { Input } from "../../modules/input";
-import { useClosestWeaverseItem } from "~/hooks/use-closest-weaverse-item";
 import type { CollectionFiltersData } from ".";
+import { Input } from "../../modules/input";
 
 export function Filters() {
   let parentInstance = useClosestWeaverseItem(".filters-list");
@@ -78,7 +79,21 @@ export function Filters() {
             <span>{filter.label}</span>
             <IconCaretRight className="w-4 h-4 transition-transform rotate-0" />
           </Accordion.Trigger>
-          <Accordion.Content>
+          <Accordion.Content
+            style={
+              {
+                "--slide-up-from": "var(--radix-accordion-content-height)",
+                "--slide-down-to": "var(--radix-accordion-content-height)",
+                "--slide-up-duration": "0.15s",
+                "--slide-down-duration": "0.15s",
+              } as React.CSSProperties
+            }
+            className={clsx([
+              "overflow-hidden",
+              "data-[state=closed]:animate-slide-up",
+              "data-[state=open]:animate-slide-down",
+            ])}
+          >
             <ul key={filter.id} className="space-y-5 pt-8">
               {filter.values?.map((option) => {
                 return <li key={option.id}>{filterMarkup(filter, option)}</li>;
diff --git a/tailwind.config.js b/tailwind.config.js
index a0cefe1e..e5340e24 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -70,8 +70,9 @@ export default {
         underline: "underline 400ms linear",
         "fade-in": "fade-in var(--fade-in-duration, .5s) ease-in forwards",
         "slide-down":
-          "slide-down var(--slide-down-duration, .3s) ease-out forwards",
-        "slide-up": "slide-up var(--slide-up-duration, .3s) ease-out forwards",
+          "slide-down var(--slide-down-duration, .3s) cubic-bezier(0.87, 0, 0.13, 1) forwards",
+        "slide-up":
+          "slide-up var(--slide-up-duration, .3s) cubic-bezier(0.87, 0, 0.13, 1) forwards",
         "slide-left-and-fade":
           "slide-left-and-fade var(--slide-left-and-fade-duration, .5s) cubic-bezier(.165,.84,.44,1) forwards",
         "enter-from-left":

From 5210307d34e44713d903d2ec98fc7fe94d729472 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 11:14:45 +0700
Subject: [PATCH 36/39] Refactor filters drawer layout: add header with close
 button and styling adjustments for better usability

---
 app/sections/collection-filters/filters.tsx   |  4 ++--
 app/sections/collection-filters/tools-bar.tsx | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/sections/collection-filters/filters.tsx b/app/sections/collection-filters/filters.tsx
index b3a54f7a..6632b47c 100644
--- a/app/sections/collection-filters/filters.tsx
+++ b/app/sections/collection-filters/filters.tsx
@@ -65,7 +65,7 @@ export function Filters() {
   return (
     <Accordion.Root
       type="multiple"
-      className="filters-list"
+      className="filters-list divide-y divide-line-subtle"
       key={expandFilters.toString() + showFiltersCount}
       defaultValue={expandFilters ? filters.map((filter) => filter.id) : []}
     >
@@ -73,7 +73,7 @@ export function Filters() {
         <Accordion.Item
           key={filter.id}
           value={filter.id}
-          className="w-full pb-6 pt-7 border-b border-[#b7b7b7]"
+          className="w-full pb-6 pt-7"
         >
           <Accordion.Trigger className="flex w-full justify-between items-center [&>svg]:data-[state=open]:rotate-90">
             <span>{filter.label}</span>
diff --git a/app/sections/collection-filters/tools-bar.tsx b/app/sections/collection-filters/tools-bar.tsx
index 855710a1..ea966d4e 100644
--- a/app/sections/collection-filters/tools-bar.tsx
+++ b/app/sections/collection-filters/tools-bar.tsx
@@ -7,7 +7,7 @@ import { LayoutSwitcher, type LayoutSwitcherProps } from "./layout-switcher";
 import { Sort } from "./sort";
 import * as Dialog from "@radix-ui/react-dialog";
 import { Button } from "~/components/button";
-import { Sliders } from "@phosphor-icons/react";
+import { Sliders, X } from "@phosphor-icons/react";
 import clsx from "clsx";
 
 let variants = cva("", {
@@ -98,7 +98,17 @@ function FiltersDrawer({
             "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
           ])}
         >
-          <Filters />
+          <div className="space-y-1">
+            <div className="flex gap-2 items-center justify-between">
+              <span className="py-2.5 font-bold">Filters</span>
+              <Dialog.Close asChild>
+                <button className="p-2 translate-x-2">
+                  <X className="w-4 h-4" />
+                </button>
+              </Dialog.Close>
+            </div>
+            <Filters />
+          </div>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>

From b6d73ab0ef9a7dba759227f3b372455f625928e0 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 11:24:14 +0700
Subject: [PATCH 37/39] Type the error type in ErrorBoundary with better typing
 for routeError variable in app/root.tsx

---
 app/root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/root.tsx b/app/root.tsx
index 418a728c..bbb397cc 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -218,7 +218,7 @@ function App() {
 export default withWeaverse(App);
 
 export function ErrorBoundary({ error }: { error: Error }) {
-  let routeError = useRouteError() as any;
+  let routeError: { status?: number; data?: any } = useRouteError();
   let isRouteError = isRouteErrorResponse(routeError);
 
   let pageType = "page";

From 871c0b8bbe5296f98b444645173f281338b52c06 Mon Sep 17 00:00:00 2001
From: "Tuan Anh (Leo) Huynh" <huynhtuananh21895@gmail.com>
Date: Sat, 7 Dec 2024 20:26:25 -0800
Subject: [PATCH 38/39] Add aria-label to filters drawer close button

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 app/sections/collection-filters/tools-bar.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/sections/collection-filters/tools-bar.tsx b/app/sections/collection-filters/tools-bar.tsx
index ea966d4e..880b6946 100644
--- a/app/sections/collection-filters/tools-bar.tsx
+++ b/app/sections/collection-filters/tools-bar.tsx
@@ -102,7 +102,9 @@ function FiltersDrawer({
             <div className="flex gap-2 items-center justify-between">
               <span className="py-2.5 font-bold">Filters</span>
               <Dialog.Close asChild>
-                <button className="p-2 translate-x-2">
+                <button className="p-2 translate-x-2"
+                   aria-label="Close"
+                >
                   <X className="w-4 h-4" />
                 </button>
               </Dialog.Close>

From 55da6586c508236b032fba12ef71816cb7fe06e4 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 11:30:58 +0700
Subject: [PATCH 39/39] Remove changelog file

---
 CHANGELOG.md | 120 ---------------------------------------------------
 1 file changed, 120 deletions(-)
 delete mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index 550235ab..00000000
--- a/CHANGELOG.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# @weaverse/pilot
-
-## 3.1.1
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@4.0.1
-
-## 3.0.4
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@4.0.0
-
-## 2.8.1
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.4.1
-
-## 2.7.8
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.4.0
-
-## 2.6.8
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.1.9
-
-## 2.6.7
-
-### Patch Changes
-
-- @weaverse/hydrogen@3.1.8
-
-## 2.6.6
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.1.7
-
-## 2.6.5
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.1.6
-
-## 2.6.4
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.1.5
-
-## 2.6.3
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.1.3
-
-## 2.6.2
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.1.2
-
-## 2.5.3
-
-### Patch Changes
-
-- 3a975da: Adding url input type
-- Updated dependencies [3a975da]
-  - @weaverse/hydrogen@3.1.1
-
-## 2.5.2
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.1.0
-
-## 2.5.1
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@3.0.1
-
-## 2.4.5
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@2.10.1
-
-## 2.4.5-next.0
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@2.10.1-next.0
-
-## 2.4.3
-
-### Patch Changes
-
-- Updated dependencies
-  - @weaverse/hydrogen@2.9.0