From 8803d635a03682a82fbc8c156e1bdc741529ff41 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Sun, 8 Dec 2024 16:51:03 +0700
Subject: [PATCH 1/4] Update collection filters toolbar

---
 app/sections/collection-filters/index.tsx     |  2 +-
 app/sections/collection-filters/tools-bar.tsx | 27 +++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
index a65e58a5..97795d27 100644
--- a/app/sections/collection-filters/index.tsx
+++ b/app/sections/collection-filters/index.tsx
@@ -86,7 +86,7 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
             {...props}
           />
           <div className="flex gap-8 pt-6 lg:pt-12 pb-8 lg:pb-20">
-            {filtersPosition === "sidebar" && (
+            {enableFilter && filtersPosition === "sidebar" && (
               <div className="hidden lg:block shrink-0 w-72 space-y-4">
                 <div className="font-bold">Filters</div>
                 <Filters />
diff --git a/app/sections/collection-filters/tools-bar.tsx b/app/sections/collection-filters/tools-bar.tsx
index 880b6946..16e2eb66 100644
--- a/app/sections/collection-filters/tools-bar.tsx
+++ b/app/sections/collection-filters/tools-bar.tsx
@@ -1,14 +1,14 @@
+import { Sliders, X } from "@phosphor-icons/react";
+import * as Dialog from "@radix-ui/react-dialog";
 import { useLoaderData } from "@remix-run/react";
 import { type VariantProps, cva } from "class-variance-authority";
+import clsx from "clsx";
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
+import { Button } from "~/components/button";
 import { cn } from "~/lib/cn";
 import { Filters } from "./filters";
 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, X } from "@phosphor-icons/react";
-import clsx from "clsx";
 
 let variants = cva("", {
   variants: {
@@ -57,14 +57,18 @@ export function ToolsBar({
           onGridSizeChange={onGridSizeChange}
         />
         {showProductsCount && (
-          <span className="grow text-center hidden md:inline">
+          <span className="text-center hidden md:inline">
             {collection?.products.nodes.length} Products
           </span>
         )}
-        <div className="flex gap-2">
-          {enableSort && <Sort />}
-          {enableFilter && <FiltersDrawer filtersPosition={filtersPosition} />}
-        </div>
+        {(enableSort || (enableFilter && filtersPosition === "drawer")) && (
+          <div className="flex gap-2">
+            {enableSort && <Sort />}
+            {enableFilter && (
+              <FiltersDrawer filtersPosition={filtersPosition} />
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
@@ -102,8 +106,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"
-                   aria-label="Close"
+                <button
+                  className="p-2 translate-x-2"
+                  aria-label="Close filters drawer"
                 >
                   <X className="w-4 h-4" />
                 </button>

From 7c301b602fb673264990d8b5c015a7ba6020bdc6 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Mon, 9 Dec 2024 10:19:51 +0700
Subject: [PATCH 2/4] Refine Scrollbar configuration in ScrollArea component
 for better styling and layout consistency

---
 app/components/scroll-area.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/scroll-area.tsx b/app/components/scroll-area.tsx
index 73904b9c..03f947e9 100644
--- a/app/components/scroll-area.tsx
+++ b/app/components/scroll-area.tsx
@@ -55,7 +55,7 @@ export let ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
         </Viewport>
         <Scrollbar
           className={cn(
-            "flex touch-none select-none rounded-lg data-[orientation=horizontal]:flex-col",
+            "flex touch-none select-none data-[orientation=horizontal]:flex-col",
             "bg-black/10 dark:bg-gray-700/50",
             "transition-colors duration-150 ease-out",
             variants({ size }),
@@ -65,7 +65,7 @@ export let ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
         >
           <Thumb
             className={cn(
-              "relative flex-1 rounded-lg shadow-intense",
+              "relative flex-1 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]",

From b7f910a66550dad06fa3ca20f93f992f12d569d2 Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Mon, 9 Dec 2024 10:20:06 +0700
Subject: [PATCH 3/4] Allow filters drawer to be scrollable

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

diff --git a/app/sections/collection-filters/filters.tsx b/app/sections/collection-filters/filters.tsx
index 6632b47c..b62bff55 100644
--- a/app/sections/collection-filters/filters.tsx
+++ b/app/sections/collection-filters/filters.tsx
@@ -21,8 +21,9 @@ import type { AppliedFilter } from "~/lib/filter";
 import { getAppliedFilterLink, getFilterLink } from "~/lib/filter";
 import type { CollectionFiltersData } from ".";
 import { Input } from "../../modules/input";
+import { cn } from "~/lib/cn";
 
-export function Filters() {
+export function Filters({ className }: { className?: string }) {
   let parentInstance = useClosestWeaverseItem(".filters-list");
   let parentData = parentInstance.data as unknown as CollectionFiltersData;
   let { expandFilters, showFiltersCount } = parentData;
@@ -65,7 +66,7 @@ export function Filters() {
   return (
     <Accordion.Root
       type="multiple"
-      className="filters-list divide-y divide-line-subtle"
+      className={cn("filters-list divide-y divide-line-subtle", className)}
       key={expandFilters.toString() + showFiltersCount}
       defaultValue={expandFilters ? filters.map((filter) => filter.id) : []}
     >
diff --git a/app/sections/collection-filters/tools-bar.tsx b/app/sections/collection-filters/tools-bar.tsx
index 16e2eb66..eb3dc7b3 100644
--- a/app/sections/collection-filters/tools-bar.tsx
+++ b/app/sections/collection-filters/tools-bar.tsx
@@ -5,6 +5,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 import clsx from "clsx";
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
 import { Button } from "~/components/button";
+import { ScrollArea } from "~/components/scroll-area";
 import { cn } from "~/lib/cn";
 import { Filters } from "./filters";
 import { LayoutSwitcher, type LayoutSwitcherProps } from "./layout-switcher";
@@ -98,12 +99,12 @@ function FiltersDrawer({
         />
         <Dialog.Content
           className={clsx([
-            "fixed inset-y-0 w-full md:w-[360px] bg-[--color-background] p-4 z-10",
+            "fixed inset-y-0 w-full md:w-[360px] bg-[--color-background] py-4 z-10",
             "left-0 -translate-x-full data-[state=open]:animate-enter-from-left",
           ])}
         >
           <div className="space-y-1">
-            <div className="flex gap-2 items-center justify-between">
+            <div className="flex gap-2 items-center justify-between px-4">
               <span className="py-2.5 font-bold">Filters</span>
               <Dialog.Close asChild>
                 <button
@@ -114,7 +115,9 @@ function FiltersDrawer({
                 </button>
               </Dialog.Close>
             </div>
-            <Filters />
+            <ScrollArea className="max-h-[calc(100vh-4.5rem)]" size="sm">
+              <Filters className="px-4" />
+            </ScrollArea>
           </div>
         </Dialog.Content>
       </Dialog.Portal>

From cd617f2a028cb2bf1f3fad386cf16694a46e7cec Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Tue, 10 Dec 2024 07:21:06 +0700
Subject: [PATCH 4/4] Update products pagination in collection page

---
 app/sections/collection-filters/index.tsx     |  67 ++++------
 .../products-loaded-on-scroll.tsx             |  57 ---------
 .../products-pagination.tsx                   | 115 ++++++++++++++++++
 app/sections/collection-filters/sort.tsx      |  28 ++---
 4 files changed, 150 insertions(+), 117 deletions(-)
 delete mode 100644 app/sections/collection-filters/products-loaded-on-scroll.tsx
 create mode 100644 app/sections/collection-filters/products-pagination.tsx

diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
index 97795d27..d7781e2c 100644
--- a/app/sections/collection-filters/index.tsx
+++ b/app/sections/collection-filters/index.tsx
@@ -1,13 +1,11 @@
 import { useLoaderData } from "@remix-run/react";
-import { Pagination } from "@shopify/hydrogen";
 import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 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 { Filters } from "./filters";
-import { ProductsLoadedOnScroll } from "./products-loaded-on-scroll";
+import { ProductsPagination } from "./products-pagination";
 import { ToolsBar } from "./tools-bar";
 
 export interface CollectionFiltersData {
@@ -40,7 +38,6 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
       loadMoreText,
       ...rest
     } = props;
-    let { ref, inView } = useInView();
     let { collection, collections } = useLoaderData<
       CollectionDetailsQuery & {
         collections: Array<{ handle: string; title: string }>;
@@ -92,48 +89,12 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
                 <Filters />
               </div>
             )}
-            <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>
+            <ProductsPagination
+              gridSizeDesktop={gridSizeDesktop}
+              gridSizeMobile={gridSizeMobile}
+              loadPrevText={loadPrevText}
+              loadMoreText={loadMoreText}
+            />
           </div>
         </Section>
       );
@@ -206,6 +167,20 @@ export let schema: HydrogenComponentSchema = {
           defaultValue: true,
           condition: "enableFilter.eq.true",
         },
+        {
+          type: "switch",
+          name: "enableColorSwatch",
+          label: "Enable color swatches",
+          defaultValue: true,
+          condition: "enableFilter.eq.true",
+        },
+        {
+          type: "text",
+          name: "displayAsButtonFor",
+          label: "Display as button for:",
+          defaultValue: "Size, More filters",
+          condition: "enableFilter.eq.true",
+        },
       ],
     },
     {
diff --git a/app/sections/collection-filters/products-loaded-on-scroll.tsx b/app/sections/collection-filters/products-loaded-on-scroll.tsx
deleted file mode 100644
index ad7adf02..00000000
--- a/app/sections/collection-filters/products-loaded-on-scroll.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useNavigate } from "@remix-run/react";
-import { useEffect } from "react";
-import { getImageLoadingPriority } from "~/lib/const";
-import { ProductCard } from "~/modules/product-card";
-
-interface ProductsLoadedOnScrollProps {
-  gridSizeDesktop: number;
-  gridSizeMobile: number;
-  nodes: any;
-  inView: boolean;
-  nextPageUrl: string;
-  hasNextPage: boolean;
-  state: any;
-}
-
-export function ProductsLoadedOnScroll(props: ProductsLoadedOnScrollProps) {
-  let {
-    gridSizeMobile,
-    gridSizeDesktop,
-    nodes,
-    inView,
-    nextPageUrl,
-    hasNextPage,
-    state,
-  } = props;
-  let navigate = useNavigate();
-
-  useEffect(() => {
-    if (inView && hasNextPage) {
-      navigate(nextPageUrl, {
-        replace: true,
-        preventScrollReset: true,
-        state,
-      });
-    }
-  }, [inView, navigate, state, nextPageUrl, hasNextPage]);
-
-  return (
-    <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}
-          product={product}
-          loading={getImageLoadingPriority(i)}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/app/sections/collection-filters/products-pagination.tsx b/app/sections/collection-filters/products-pagination.tsx
new file mode 100644
index 00000000..33897166
--- /dev/null
+++ b/app/sections/collection-filters/products-pagination.tsx
@@ -0,0 +1,115 @@
+import { useLoaderData, useNavigate } from "@remix-run/react";
+import { Pagination } from "@shopify/hydrogen";
+import clsx from "clsx";
+import { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import type { CollectionDetailsQuery } from "storefrontapi.generated";
+import Link from "~/components/link";
+import { getImageLoadingPriority } from "~/lib/const";
+import { ProductCard } from "~/modules/product-card";
+
+export function ProductsPagination({
+  gridSizeDesktop,
+  gridSizeMobile,
+  loadPrevText,
+  loadMoreText,
+}: {
+  gridSizeDesktop: number;
+  gridSizeMobile: number;
+  loadPrevText: string;
+  loadMoreText: string;
+}) {
+  let { collection } = useLoaderData<
+    CollectionDetailsQuery & {
+      collections: Array<{ handle: string; title: string }>;
+    }
+  >();
+  let { ref, inView } = useInView();
+
+  return (
+    <Pagination connection={collection.products}>
+      {({
+        nodes,
+        isLoading,
+        nextPageUrl,
+        previousPageUrl,
+        hasNextPage,
+        hasPreviousPage,
+        state,
+      }) => (
+        <div
+          className="flex w-full flex-col gap-8 items-center"
+          style={
+            {
+              "--cols-mobile": `repeat(${gridSizeMobile || 1}, minmax(0, 1fr))`,
+              "--cols-desktop": `repeat(${gridSizeDesktop || 3}, minmax(0, 1fr))`,
+            } as React.CSSProperties
+          }
+        >
+          {hasPreviousPage && (
+            <Link to={previousPageUrl} variant="outline" className="mx-auto">
+              {isLoading ? "Loading..." : loadPrevText}
+            </Link>
+          )}
+          <ProductsLoadedOnScroll
+            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>
+  );
+}
+
+interface ProductsLoadedOnScrollProps {
+  nodes: any;
+  inView: boolean;
+  nextPageUrl: string;
+  hasNextPage: boolean;
+  state: any;
+}
+
+function ProductsLoadedOnScroll(props: ProductsLoadedOnScrollProps) {
+  let { nodes, inView, nextPageUrl, hasNextPage, state } = props;
+  let navigate = useNavigate();
+
+  useEffect(() => {
+    if (inView && hasNextPage) {
+      navigate(nextPageUrl, {
+        replace: true,
+        preventScrollReset: true,
+        state,
+      });
+    }
+  }, [inView, navigate, state, nextPageUrl, hasNextPage]);
+
+  return (
+    <div
+      className={clsx([
+        "w-full gap-x-1.5 gap-y-8 lg:gap-y-10",
+        "grid grid-cols-[--cols-mobile] lg:grid-cols-[--cols-desktop]",
+      ])}
+    >
+      {nodes.map((product: any, i: number) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          loading={getImageLoadingPriority(i)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/app/sections/collection-filters/sort.tsx b/app/sections/collection-filters/sort.tsx
index 34455287..6b444966 100644
--- a/app/sections/collection-filters/sort.tsx
+++ b/app/sections/collection-filters/sort.tsx
@@ -24,20 +24,20 @@ const PRODUCT_SORT: { label: string; key: SortParam }[] = [
   },
 ];
 
-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",
-  },
-];
+// 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() {
   let [params] = useSearchParams();