@pradip1995/segment-animation-shop-grid 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-animation-shop-grid",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -24,9 +24,9 @@
     "next": ">=15"
   },
   "dependencies": {
-    "@pradip1995/segment-primitives": "^0.4.0",
-    "@pradip1995/segment-product-card": "^0.3.10",
-    "@pradip1995/segment-tokens": "^0.3.7",
+    "@pradip1995/segment-primitives": "^0.4.11",
+    "@pradip1995/segment-product-card": "^0.3.26",
+    "@pradip1995/segment-tokens": "^0.3.14",
     "framer-motion": "^12.0.0"
   },
   "devDependencies": {

package/src/animation-shop-grid.css

@@ -1,6 +1,6 @@
 .animation-shop-grid {
   width: 100%;
-  padding: 0 1.5rem 4rem 1.5rem;
+  padding: 0 0 3rem 0;
   background-color: var(--page-bg, #ffffff);
   color: var(--text-color, #111111);
   font-family: inherit;
@@ -9,7 +9,7 @@
 
 @media (min-width: 1024px) {
   .animation-shop-grid {
-    padding: 0 3rem 6rem 3rem;
+    padding: 0 0 6rem 0;
   }
 }
 

package/src/animation-shop-grid.tsx

@@ -9,6 +9,7 @@ import { loadMoreStoreProducts, type StoreLoadMoreFilters } from "./load-more-pr
 import "./animation-shop-grid.css"
 
 const PAGE_SIZE = 12
+const EMPTY_PRODUCTS: HttpTypes.StoreProduct[] = []
 
 const SORT_OPTIONS = [
   { value: "created_at_desc", label: "Newest" },
@@ -240,7 +241,7 @@ export default function AnimationShopGrid(props: {
       props.maxPrice,
     ]
   )
-  const initialProducts = props.products ?? []
+  const initialProducts = props.products ?? EMPTY_PRODUCTS
   const totalCount = props.productCount ?? initialProducts.length
 
   const [items, setItems] = useState(initialProducts)
@@ -255,12 +256,12 @@ export default function AnimationShopGrid(props: {
   const loadingRef = useRef(false)
 
   useEffect(() => {
-    setItems(props.products ?? [])
+    setItems(props.products ?? EMPTY_PRODUCTS)
     setCurrentPage(initialPage)
     setHasMore(sortBy !== "bestsellers" && totalCount > initialPage * PAGE_SIZE)
     setLoadError(null)
     loadingRef.current = false
-  }, [filterSignature, initialPage, sortBy, totalCount])
+  }, [filterSignature, initialPage, sortBy, totalCount, props.products])
 
   const loadNextPage = useCallback(() => {
     if (loadingRef.current || pending || !hasMore || sortBy === "bestsellers") return
@@ -381,6 +382,15 @@ export default function AnimationShopGrid(props: {
   useEffect(() => {
     const sidebar = document.querySelector(".store-page__sidebar") as HTMLElement | null
     const mainCol = document.querySelector(".store-page__main") as HTMLElement | null
+    const isDesktop = typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches
+
+    if (!isDesktop) {
+      // Mobile uses segment-mobile-filters — never force sidebar display
+      if (sidebar) sidebar.style.display = ""
+      if (mainCol) mainCol.classList.remove("w-full", "col-span-full")
+      return
+    }
+
     if (sidebar) {
       sidebar.style.display = showFilters ? "" : "none"
     }
@@ -393,6 +403,10 @@ export default function AnimationShopGrid(props: {
     }
   }, [showFilters])
 
+  function handleFilterToggle() {
+    setShowFilters((v) => !v)
+  }
+
   return (
     <section className="animation-shop-grid flex-1 min-w-0 pt-0" aria-label="Product results">
       {/* Simplified, Clean Hero Header */}
@@ -419,13 +433,13 @@ export default function AnimationShopGrid(props: {
         </p>
       </motion.header>
 
-      {/* Filter Toolbar with Hide Filters Option */}
-      <div className="w-full flex flex-wrap items-center justify-between gap-3 mb-5 py-2.5 px-4 bg-white border border-gray-200/80 rounded-md shadow-2xs">
-        <div className="flex items-center gap-3">
+      {/* Filter Toolbar */}
+      <div className="animation-shop-grid__toolbar w-full flex flex-wrap items-center justify-between gap-2 sm:gap-3 mb-4 sm:mb-5 py-2 sm:py-2.5 px-2.5 sm:px-4 bg-white border border-gray-200/80 rounded-md shadow-2xs">
+        <div className="flex items-center gap-2 sm:gap-3 min-w-0">
           <button
             type="button"
-            onClick={() => setShowFilters(!showFilters)}
-            className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-800 hover:text-black transition-colors py-1 px-2.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded cursor-pointer"
+            onClick={handleFilterToggle}
+            className="hidden lg:inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-800 hover:text-black transition-colors py-1.5 px-2.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded cursor-pointer"
           >
             <svg className="w-3.5 h-3.5 fill-none stroke-current stroke-[1.8]" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9m-9 12h9m-15-6h15M3 6h3m-3 12h3m3-6h3" />
@@ -434,7 +448,7 @@ export default function AnimationShopGrid(props: {
           </button>
 
           {appliedFilters.length > 0 ? (
-            <div className="hidden sm:flex items-center gap-2">
+            <div className="hidden sm:flex items-center gap-2 flex-wrap">
               <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Active:</span>
               {appliedFilters.map((filter) => (
                 <LocalizedLink
@@ -451,17 +465,17 @@ export default function AnimationShopGrid(props: {
           ) : null}
         </div>
 
-        <div className="flex items-center gap-3 ml-auto">
-          <span className="text-xs text-gray-500 font-medium tracking-wide">
-            {showingCount} of {totalCount} {totalCount === 1 ? "Product" : "Products"}
+        <div className="flex items-center gap-2 sm:gap-3 ml-auto shrink-0">
+          <span className="text-[11px] sm:text-xs text-gray-500 font-medium tracking-wide">
+            {showingCount} of {totalCount}
           </span>
           {appliedFilters.length > 0 ? (
             <LocalizedLink
               href={buildClearAllFiltersHref(storeSearchParams)}
-              className="text-xs font-bold text-red-600 hover:text-red-700 uppercase tracking-wider underline ml-2"
+              className="text-[11px] sm:text-xs font-bold text-red-600 hover:text-red-700 uppercase tracking-wider underline"
               countryCode={countryCode}
             >
-              Clear All
+              Clear
             </LocalizedLink>
           ) : null}
         </div>