P14:[{"_330":55,"_331":52,"_332":333},"app1","app2","diffPatch","diff --git a/app/hooks/use-intersection-observer.ts b/app/hooks/use-intersection-observer.ts\nnew file mode 100644\nindex 0000000..eb564d6\n--- /dev/null\n+++ b/app/hooks/use-intersection-observer.ts\n@@ -0,0 +1,28 @@\n+import { useEffect } from 'react'\n+\n+export const useIntersectionObserver = (\n+\tref: React.RefObject,\n+\tonIntersect: () => void,\n+\toptions?: IntersectionObserverInit,\n+) => {\n+\tuseEffect(() => {\n+\t\tconst observer = new IntersectionObserver((entries) => {\n+\t\t\tentries.forEach((entry) => {\n+\t\t\t\tif (entry.isIntersecting) {\n+\t\t\t\t\tonIntersect()\n+\t\t\t\t}\n+\t\t\t})\n+\t\t}, options)\n+\n+\t\tconst currentRef = ref.current\n+\t\tif (currentRef) {\n+\t\t\tobserver.observe(currentRef)\n+\t\t}\n+\n+\t\treturn () => {\n+\t\t\tif (currentRef) {\n+\t\t\t\tobserver.unobserve(currentRef)\n+\t\t\t}\n+\t\t}\n+\t}, [ref, onIntersect, options])\n+}\ndiff --git a/app/routes/_landing.products.$productId.tsx b/app/routes/_landing.products.$productId.tsx\nindex b4f3913..7d81326 100644\n--- a/app/routes/_landing.products.$productId.tsx\n+++ b/app/routes/_landing.products.$productId.tsx\n@@ -9,12 +9,12 @@ import {\n \tMinus,\n } from 'lucide-react'\n import { useState } from 'react'\n-import { Link } from 'react-router'\n+import { Link, useSearchParams } from 'react-router'\n import { ProductCard } from '#app/components/product-card.js'\n import {\n \tgetProductById,\n \tgetRelatedProducts,\n-} from '#app/domain/products.server.ts'\n+} from '#app/domain/products.server.js'\n import {\n \tgetMetaFromMatches,\n \tgetMetaTitle,\n@@ -32,7 +33,7 @@ export const meta: Route.MetaFunction = ({ matches }) => {\n \t]\n }\n \n-export const loader = async ({ params }: Route.LoaderArgs) => {\n+export const loader = async ({ params, request }: Route.LoaderArgs) => {\n \tconst { productId } = params\n \tconst product = await getProductById(productId)\n \tconst relatedProducts = await getRelatedProducts(\n@@ -40,9 +41,42 @@ export const loader = async ({ params }: Route.LoaderArgs) => {\n \t\tproduct?.category.id,\n \t\tproduct?.brand.id,\n \t)\n+\tconst uniqueSizes = Array.from(\n+\t\tnew Set(product?.variations.map((v) => v.size) || []),\n+\t)\n+\tconst uniqueColors = Array.from(\n+\t\tnew Set(product?.variations.map((v) => v.color) || []),\n+\t)\n+\n+\tconst url = new URL(request.url)\n+\tconst searchParams = url.searchParams\n+\t// Get the selected size and color from the search params\n+\tconst selectedSize = searchParams.get('size') || ''\n+\tconst selectedColor = searchParams.get('color') || ''\n+\t// Determine available sizes for the currently selected color\n+\tconst availableSizes = selectedColor\n+\t\t? product?.variations\n+\t\t\t\t.filter((v) => v.color === selectedColor && v.quantity > 0)\n+\t\t\t\t.map((v) => v.size) || []\n+\t\t: uniqueSizes\n+\t// Determine available colors for the currently selected size\n+\tconst availableColors = selectedSize\n+\t\t? product?.variations\n+\t\t\t\t.filter((v) => v.size === selectedSize && v.quantity > 0)\n+\t\t\t\t.map((v) => v.color) || []\n+\t\t: uniqueColors\n+\n+\tconst selectedVariation = product?.variations.find(\n+\t\t(v) => v.size === selectedSize && v.color === selectedColor,\n+\t)\n \n \treturn {\n \t\tproduct,\n+\t\tuniqueSizes,\n+\t\tuniqueColors,\n+\t\tavailableSizes,\n+\t\tavailableColors,\n+\t\tselectedVariation,\n \t\trelatedProducts,\n \t}\n }\n@@ -50,12 +84,20 @@ export const loader = async ({ params }: Route.LoaderArgs) => {\n export default function ProductDetailPage({\n \tloaderData,\n }: Route.ComponentProps) {\n-\tconst { product, relatedProducts } = loaderData\n-\tconst [selectedSize] = useState('')\n-\tconst [selectedColor] = useState('')\n+\tconst {\n+\t\tproduct,\n+\t\tselectedVariation,\n+\t\tuniqueColors,\n+\t\tuniqueSizes,\n+\t\tavailableColors,\n+\t\tavailableSizes,\n+\t\trelatedProducts,\n+\t} = loaderData\n+\tconst [searchParams, setSearchParams] = useSearchParams()\n \tconst [quantity, setQuantity] = useState(1)\n \tconst [activeImage, setActiveImage] = useState(0)\n-\n+\tconst selectedSize = searchParams.get('size') || ''\n+\tconst selectedColor = searchParams.get('color') || ''\n \tif (!product) {\n \t\treturn (\n \t\t\t

\n@@ -83,6 +125,53 @@ export default function ProductDetailPage({\n \t\talert('Added to cart!')\n \t}\n \n+\tconst handleSizeChange = (size: string) => () => {\n+\t\tsetSearchParams((prev) => {\n+\t\t\tconst newParams = new URLSearchParams(prev)\n+\t\t\tif (size === selectedSize) {\n+\t\t\t\tnewParams.delete('size')\n+\t\t\t} else {\n+\t\t\t\tnewParams.set('size', size)\n+\t\t\t}\n+\t\t\tconst color = newParams.get('color')\n+\t\t\t// If the selected color is not available for the new size, remove it\n+\t\t\tconst noQuantityForColor =\n+\t\t\t\tcolor &&\n+\t\t\t\tproduct.variations.some(\n+\t\t\t\t\t(v) => v.size === size && v.color === color && v.quantity === 0,\n+\t\t\t\t)\n+\n+\t\t\tif (noQuantityForColor) {\n+\t\t\t\tnewParams.delete('color')\n+\t\t\t}\n+\t\t\treturn newParams\n+\t\t})\n+\t\tsetQuantity(1)\n+\t}\n+\n+\tconst handleColorChange = (color: string) => () => {\n+\t\tsetSearchParams((prev) => {\n+\t\t\tconst newParams = new URLSearchParams(prev)\n+\t\t\tif (color === selectedColor) {\n+\t\t\t\tnewParams.delete('color')\n+\t\t\t} else {\n+\t\t\t\tnewParams.set('color', color)\n+\t\t\t}\n+\t\t\tconst size = newParams.get('size')\n+\t\t\t// If the selected size is not available for the new color, remove it\n+\t\t\tconst noQuantityForSize =\n+\t\t\t\tsize &&\n+\t\t\t\tproduct.variations.some(\n+\t\t\t\t\t(v) => v.color === color && v.size === size && v.quantity === 0,\n+\t\t\t\t)\n+\t\t\tif (noQuantityForSize) {\n+\t\t\t\tnewParams.delete('size')\n+\t\t\t}\n+\t\t\treturn newParams\n+\t\t})\n+\t\tsetQuantity(1)\n+\t}\n+\n \t// Mock additional images for gallery\n \tconst productImages = [\n \t\tproduct.imageUrl,\n@@ -179,11 +268,13 @@ export default function ProductDetailPage({\n \t\t\t\t\t\t\t\tSize\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t{/* {product.sizes.map((size) => (\n+\t\t\t\t\t\t\t\t{uniqueSizes.map((size) => (\n \t\t\t\t\t\t\t\t\t setSelectedSize(size)}\n-\t\t\t\t\t\t\t\t\t\tclassName={`rounded-lg border px-4 py-3 text-center transition-colors duration-200 ${\n+\t\t\t\t\t\t\t\t\t\tdisabled={!availableSizes.includes(size)}\n+\t\t\t\t\t\t\t\t\t\ttitle={!availableSizes.includes(size) ? 'Out of stock' : ''}\n+\t\t\t\t\t\t\t\t\t\tonClick={handleSizeChange(size)}\n+\t\t\t\t\t\t\t\t\t\tclassName={`rounded-lg border px-4 py-3 text-center transition-colors duration-200 disabled:opacity-20 ${\n \t\t\t\t\t\t\t\t\t\t\tselectedSize === size\n \t\t\t\t\t\t\t\t\t\t\t\t? 'border-amber-500 bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\n \t\t\t\t\t\t\t\t\t\t\t\t: 'border-gray-300 text-gray-700 hover:border-amber-300 dark:border-gray-600 dark:text-gray-300 dark:hover:border-amber-700'\n@@ -191,7 +282,7 @@ export default function ProductDetailPage({\n \t\t\t\t\t\t\t\t\t>\n \t\t\t\t\t\t\t\t\t\t{size}\n \t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t))} */}\n+\t\t\t\t\t\t\t\t))}\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t

\n \n@@ -200,12 +291,16 @@ export default function ProductDetailPage({\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\tColor\n \t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t{/* {product.colors.map((color) => (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{uniqueColors.map((color) => (\n \t\t\t\t\t\t\t\t\t setSelectedColor(color)}\n-\t\t\t\t\t\t\t\t\t\tclassName={`rounded-lg border px-4 py-2 transition-colors duration-200 ${\n+\t\t\t\t\t\t\t\t\t\tdisabled={!availableColors.includes(color)}\n+\t\t\t\t\t\t\t\t\t\ttitle={\n+\t\t\t\t\t\t\t\t\t\t\t!availableColors.includes(color) ? 'Out of stock' : ''\n+\t\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\t\tonClick={handleColorChange(color)}\n+\t\t\t\t\t\t\t\t\t\tclassName={`rounded-lg border px-4 py-2 transition-colors duration-200 disabled:opacity-20 ${\n \t\t\t\t\t\t\t\t\t\t\tselectedColor === color\n \t\t\t\t\t\t\t\t\t\t\t\t? 'border-amber-500 bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200'\n \t\t\t\t\t\t\t\t\t\t\t\t: 'border-gray-300 text-gray-700 hover:border-amber-300 dark:border-gray-600 dark:text-gray-300 dark:hover:border-amber-700'\n@@ -213,11 +308,12 @@ export default function ProductDetailPage({\n \t\t\t\t\t\t\t\t\t>\n \t\t\t\t\t\t\t\t\t\t{color}\n \t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t))} */}\n+\t\t\t\t\t\t\t\t))}\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t

\n \n \t\t\t\t\t\t{/* Quantity */}\n+\t\t\t\t\t\t{selectedVariation ? (\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t\tQuantity\n@@ -226,7 +322,8 @@ export default function ProductDetailPage({\n \t\t\t\t\t\t\t\t\t
\n \t\t\t\t\t\t\t\t\t\t setQuantity(Math.max(1, quantity - 1))}\n-\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700\"\n+\t\t\t\t\t\t\t\t\t\t\tdisabled={quantity === 1}\n+\t\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 transition-colors duration-200 hover:bg-gray-100 disabled:opacity-20 disabled:hover:bg-transparent dark:hover:bg-gray-700\"\n \t\t\t\t\t\t\t\t\t\t>\n \t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\n@@ -235,18 +332,23 @@ export default function ProductDetailPage({\n \t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t setQuantity(quantity + 1)}\n-\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-700\"\n+\t\t\t\t\t\t\t\t\t\t\tdisabled={quantity === selectedVariation.quantity}\n+\t\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 transition-colors duration-200 hover:bg-gray-100 disabled:opacity-20 disabled:hover:bg-transparent dark:hover:bg-gray-700\"\n \t\t\t\t\t\t\t\t\t\t>\n \t\t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t
\n \t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\n+\t\t\t\t\t\t) : null}\n \n \t\t\t\t\t\t{/* Add to Cart */}\n \t\t\t\t\t\t

\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\tAdd to Cart\ndiff --git a/app/routes/_landing.products._index/route.tsx b/app/routes/_landing.products._index/route.tsx\nindex a1be296..158e333 100644\n--- a/app/routes/_landing.products._index/route.tsx\n+++ b/app/routes/_landing.products._index/route.tsx\n@@ -1,5 +1,5 @@\n import { Filter, Grid, List } from 'lucide-react'\n-import { useState } from 'react'\n+import { useState, useRef } from 'react'\n import { useSearchParams, useNavigation } from 'react-router'\n import { ProductCard } from '#app/components/product-card.js'\n import { getAllBrands } from '#app/domain/brand.server.js'\n@@ -8,6 +8,7 @@ import {\n \textractProductFiltersFromSearchParams,\n \tgetProducts,\n } from '#app/domain/products.server.js'\n+import { useIntersectionObserver } from '#app/hooks/use-intersection-observer.js'\n import {\n \tgetMetaFromMatches,\n \tgetMetaTitle,\n@@ -15,6 +16,7 @@ import {\n } from '#app/utils/metadata.js'\n import { type Route } from './+types/route'\n import { ProductFilters } from './product-filters'\n+import { useInfiniteProductFetcher } from './use-infinite-product-fetcher'\n \n export const meta: Route.MetaFunction = ({ matches }) => {\n \tconst rootMeta = getMetaFromMatches(matches, 'root')\n@@ -49,11 +51,18 @@ export const loader = async ({ request }: Route.LoaderArgs) => {\n export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \tconst [searchParams, setSearchParams] = useSearchParams()\n \tconst navigation = useNavigation()\n+\t// 🐨 use the useInfiniteProductFetcher returned properties to fetch infinite data\n+\tconst { loadMoreProducts, allProducts, hasMore, isLoadingMore } =\n+\t\tuseInfiniteProductFetcher(loaderData)\n \tconst isPageLoading = navigation.state !== 'idle'\n+\t// 💣 We won't be needing this when we finish pagination\n \tconst { products } = loaderData\n \tconst [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')\n \tconst [showFilters, setShowFilters] = useState(false)\n-\n+\tconst observerRef = useRef(null)\n+\t// 🐨 use the useIntersectionObserver to call a load of more products when end of screen is reached\n+\t// 💰 pass in loadMoreProducts instead of the arrow function\n+\tuseIntersectionObserver(observerRef, () => {})\n \treturn (\n \t\t

\n \t\t\t{/* Header */}\n@@ -66,6 +75,7 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t{loaderData.pagination.totalCount} products total (\n+\t\t\t\t\t\t\t\t{/** 🐨 use the allProducts variable instead of products to show the number of allProducts */}\n \t\t\t\t\t\t\t\t{products.length} shown)\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t

\n@@ -144,20 +154,50 @@ export default function ProductsPage({ loaderData }: Route.ComponentProps) {\n \n \t\t\t\t\t{/* Products Grid/List */}\n \t\t\t\t\t

\n-\t\t\t\t\t\t{viewMode === 'grid' ? (\n-\t\t\t\t\t\t\t

\n-\t\t\t\t\t\t\t\t{products.map((product) => (\n-\t\t\t\t\t\t\t\t\t\n-\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t{/** 🐨 we should show a loading UI when needed */}\n+\t\t\t\t\t\t{/** 💰 use isPageLoading */}\n+\t\t\t\t\t\t{false ? (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tLoading...\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t) : (\n-\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t<>\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{/** 🐨 we should use allProducts instead of products to show all fetched products */}\n \t\t\t\t\t\t\t\t\t{products.map((product) => (\n \t\t\t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\t\t))}\n \t\t\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t\t\t{/* Intersection observer target */}\n+\t\t\t\t\t\t\t\t{hasMore && (\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t{isLoadingMore ? (\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t

Loading more products...

\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t)}\n \n+\t\t\t\t\t\t\t\t{/* End of results message */}\n+\t\t\t\t\t\t\t\t{!hasMore && allProducts.length > 0 && (\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t

You've reached the end of the product list!

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t)}\n+\t\t\t\t\t\t{/** 🐨 we should use allProducts instead of products to show no products found */}\n \t\t\t\t\t\t{products.length === 0 && (\n \t\t\t\t\t\t\t

\n \t\t\t\t\t\t\t\t

\ndiff --git a/app/routes/_landing.products._index/use-infinite-product-fetcher.ts b/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\nnew file mode 100644\nindex 0000000..4b9c961\n--- /dev/null\n+++ b/app/routes/_landing.products._index/use-infinite-product-fetcher.ts\n@@ -0,0 +1,69 @@\n+import { useState, useEffect, useCallback } from 'react'\n+import { useFetcher, useSearchParams, href } from 'react-router'\n+// 💰 use this to type the route\n+import { type Route } from './+types/route'\n+\n+export function useInfiniteProductFetcher(\n+\t// 🐨 we want to type the loader data to be the type of the returned loader data of the products listing page\n+\t// 💰 Route.ComponentProps['loaderData']\n+\tloaderData: any,\n+) {\n+\t// 💰 we are fetching from the same loader, so we can type this fetcher with the same type as loader-data\n+\tconst fetcher = useFetcher({\n+\t\t// 🐨 Let's define a fetcher key for this fetch\n+\t\t// 💰 key should be infinite-product-fetcher\n+\t})\n+\t// 💰 we are extracting the initial data we fetched and then we will load more from the server\n+\tconst { products, pagination } = loaderData\n+\tconst [allProducts, setAllProducts] = useState(products)\n+\tconst [currentPage, setCurrentPage] = useState(pagination.page)\n+\tconst [hasMore, setHasMore] = useState(pagination.hasMore)\n+\tconst [isLoadingMore, setIsLoadingMore] = useState(false)\n+\tconst [searchParams] = useSearchParams()\n+\tuseEffect(\n+\t\t// 🐨 whenever we change the filters we should start from the beginning again\n+\t\tfunction resetStateOnLoaderRefire() {\n+\t\t\t// 💰 whenever we reset the URL and the loader returns new products, we want to reset the state to the initial values\n+\t\t\t// setAllProducts(products)\n+\t\t\t// setCurrentPage(pagination.page)\n+\t\t\t// setHasMore(pagination.hasMore)\n+\t\t},\n+\t\t[pagination.hasMore, pagination.page, products],\n+\t)\n+\n+\tuseEffect(\n+\t\t// 🐨 whenever we load the new products we want to append them to the existing array\n+\t\tfunction setNewlyLoadedProducts() {\n+\t\t\t// 💰 we want to make sure that the fetcher has returned some data and it's defined, and it is idle and we were loading more products\n+\t\t\tif (false) {\n+\t\t\t\t// 💰 we append the newly loaded products to the existing array\n+\t\t\t\t// setAllProducts((prev) => [...prev, ...(fetcher.data.? ??[])])\n+\t\t\t\t// 💰 we update the current page\n+\t\t\t\t// setCurrentPage(fetcher.data.?)\n+\t\t\t\t// 💰 we update the hasMore flag\n+\t\t\t\t// setHasMore(fetcher.data.?)\n+\t\t\t\t// 💰 we set isLoadingMore to false\n+\t\t\t\t// setIsLoadingMore(false)\n+\t\t\t}\n+\t\t},\n+\t\t[fetcher.data, fetcher.state, isLoadingMore],\n+\t)\n+\n+\tconst loadMoreProducts = useCallback(() => {\n+\t\t// 🐨 we want to create the new search params so we can submit that to the loader so it gives us the next page of results\n+\t\t// 💰 we set the flag to true\n+\t\t// setIsLoadingMore(true)\n+\t\t// 💰 we use the current page to create the next page\n+\t\t// const nextPage = currentPage + 1\n+\t\t// 💰 Create URL params for the fetch\n+\t\t// const params = new URLSearchParams(searchParams)\n+\t\t// params.set('page', nextPage.toString())\n+\t\t// 🐨 finally we want to load the next page using the fetcher\n+\t\t// 💰 use the `load` function and call the /products page in a type-safe manner (href function) and append the search params\n+\t\t// 💰 + \"?\" + params.toString()\n+\t\t// 🐨 don't forget to remove this ignore hook, it's going to be invalid once you implement this!\n+\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n+\t}, [currentPage, fetcher, searchParams])\n+\n+\treturn { fetcher, loadMoreProducts, allProducts, hasMore, isLoadingMore }\n+}"]

app/hooks/use-intersection-observer.ts-0+28App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.$productId.tsx-112+213App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/route.tsx-54+94App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/use-infinite-product-fetcher.ts-0+69App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/hooks/use-intersection-observer.ts-0+28App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.$productId.tsx-112+213App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/route.tsx-54+94App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index/use-infinite-product-fetcher.ts-0+69App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2