Merge branch 'main' into main

Author: JustinMissmahl

src/components/shop/CartDrawer.tsx

@@ -26,37 +26,34 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay
-          className={twMerge(
-            'fixed inset-0 z-[100] bg-black/40',
-            'data-[state=open]:animate-in data-[state=open]:fade-in-0',
-            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
-          )}
-        />
+        <Dialog.Overlay className="cart-overlay fixed inset-0 z-[100] bg-black/20" />
         <Dialog.Content
           className={twMerge(
-            'fixed right-0 top-0 bottom-0 z-[100] w-full sm:max-w-md flex flex-col',
-            'bg-white dark:bg-gray-950 shadow-xl border-l border-gray-200 dark:border-gray-800',
-            'data-[state=open]:animate-in data-[state=open]:slide-in-from-right',
-            'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right',
+            'cart-panel',
+            'fixed right-4 top-[calc(var(--navbar-height,56px)+0.5rem)] z-[100]',
+            'w-[calc(100vw-2rem)] sm:w-[24rem]',
+            'max-h-[calc(100dvh-var(--navbar-height,56px)-1rem)]',
+            'flex flex-col',
+            'rounded-xl shadow-2xl',
+            'bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800',
           )}
           aria-describedby={undefined}
         >
-          <header className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
-            <Dialog.Title className="font-semibold">
+          <header className="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-800">
+            <Dialog.Title className="font-semibold text-sm">
               Cart{totalQuantity > 0 ? ` (${totalQuantity})` : ''}
             </Dialog.Title>
             <Dialog.Close
-              className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900"
+              className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
               aria-label="Close cart"
             >
-              <X className="w-4 h-4" />
+              <X className="w-3.5 h-3.5" />
             </Dialog.Close>
           </header>
 
           {hasLines ? (
             <>
-              <ul className="flex-1 overflow-y-auto px-6 divide-y divide-gray-200 dark:divide-gray-800">
+              <ul className="overflow-y-auto px-5 divide-y divide-gray-200 dark:divide-gray-800">
                 {cart.lines.nodes.map((line) => (
                   <DrawerCartLine
                     key={line.id}

src/hooks/useCart.ts

@@ -26,25 +26,31 @@ export const CART_QUERY_KEY = ['shopify', 'cart'] as const
 const CART_MUTATION_KEY = ['shopify', 'cart', 'mutate'] as const
 
 /**
- * Only invalidate (refetch from server) when no other cart mutations are
- * in flight. This prevents a settled mutation's refetch from overwriting
- * another mutation's optimistic state with stale server data.
- *
- * Each `onMutate` reads the *current* cache (which may already reflect
- * earlier optimistic writes) and layers its own change on top. When the
- * last mutation settles, the refetch reconciles everything with the
- * server's final truth.
+ * Explicit in-flight counter. We don't rely on `queryClient.isMutating()`
+ * because its exact semantics at `onSettled` time (does it still count the
+ * current mutation?) vary across React Query versions and are under-documented.
+ * A module-level counter is unambiguous: increment in onMutate, decrement in
+ * onSettled, invalidate when the count hits zero.
+ */
+let cartMutationsInFlight = 0
+
+function trackMutationStart() {
+  cartMutationsInFlight++
+}
+
+/**
+ * Call from every cart mutation's `onSettled`. Decrements the in-flight
+ * counter, and when the last mutation settles, triggers a single background
+ * refetch to reconcile all accumulated optimistic changes with server truth.
  *
  * Returns the invalidation promise so the mutation stays in `isPending`
- * until the background refetch completes (per TkDodo's recommendation).
+ * until the refetch completes.
  *
  * @see https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query
  */
 function settleWhenIdle(qc: ReturnType<typeof useQueryClient>) {
-  // isMutating counts mutations that haven't settled yet. At the time
-  // onSettled fires, the *current* mutation is still counted, so
-  // 1 means "I'm the last one in flight."
-  if (qc.isMutating({ mutationKey: CART_MUTATION_KEY }) === 1) {
+  cartMutationsInFlight = Math.max(0, cartMutationsInFlight - 1)
+  if (cartMutationsInFlight === 0) {
     return qc.invalidateQueries({ queryKey: CART_QUERY_KEY })
   }
 }
@@ -108,6 +114,7 @@ export function useAddToCart() {
       }),
 
     onMutate: async (input) => {
+      trackMutationStart()
       const quantity = input.quantity ?? 1
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
       const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
@@ -128,7 +135,6 @@ export function useAddToCart() {
         } else {
           const lineTotal = String(Number(snap.price.amount) * quantity)
           nextLines = [
-            ...previous.lines.nodes,
             {
               id: `optimistic-${Date.now()}`,
               quantity,
@@ -151,6 +157,7 @@ export function useAddToCart() {
                 },
               },
             } as CartLineDetail,
+            ...previous.lines.nodes,
           ]
         }
 
@@ -193,6 +200,7 @@ export function useUpdateCartLine() {
       updateCartLine({ data: input }),
 
     onMutate: async (input) => {
+      trackMutationStart()
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
       const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
       if (previous) {
@@ -227,6 +235,7 @@ export function useRemoveCartLine() {
     mutationFn: (input: { lineId: string }) => removeCartLine({ data: input }),
 
     onMutate: async (input) => {
+      trackMutationStart()
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
       const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
       if (previous) {
@@ -259,6 +268,7 @@ export function useApplyDiscountCode() {
     mutationFn: (input: { code: string }) =>
       applyDiscountCode({ data: { code: input.code } }),
     onMutate: async () => {
+      trackMutationStart()
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
     },
     onSuccess: (cart) => {
@@ -274,6 +284,7 @@ export function useRemoveDiscountCode() {
     mutationKey: CART_MUTATION_KEY,
     mutationFn: () => removeDiscountCode(),
     onMutate: async () => {
+      trackMutationStart()
       await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
       const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
       if (previous) {

src/routes/shop.products.$handle.tsx

@@ -314,24 +314,25 @@ function AddToCartButton({
 }) {
   const addToCart = useAddToCart()
   const openDrawer = useCartDrawerStore((s) => s.openDrawer)
+  const [showAdded, setShowAdded] = React.useState(false)
 
-  const disabled = !variant || !variant.availableForSale || addToCart.isPending
+  const disabled =
+    !variant || !variant.availableForSale || (addToCart.isPending && !showAdded)
 
-  const label = addToCart.isSuccess
+  const label = showAdded
     ? 'Added ✓'
-    : addToCart.isPending
-      ? 'Adding…'
-      : !variant
-        ? 'Unavailable'
-        : !variant.availableForSale
-          ? 'Sold out'
-          : 'Add to cart'
+    : !variant
+      ? 'Unavailable'
+      : !variant.availableForSale
+        ? 'Sold out'
+        : 'Add to cart'
 
+  // Reset the "Added ✓" confirmation after a moment
   React.useEffect(() => {
-    if (!addToCart.isSuccess) return
-    const id = window.setTimeout(() => addToCart.reset(), 1500)
+    if (!showAdded) return
+    const id = window.setTimeout(() => setShowAdded(false), 1500)
     return () => window.clearTimeout(id)
-  }, [addToCart.isSuccess, addToCart])
+  }, [showAdded])
 
   return (
     <div className="flex flex-col gap-2">
@@ -340,6 +341,7 @@ function AddToCartButton({
         disabled={disabled}
         onClick={() => {
           if (!variant) return
+          setShowAdded(true)
           openDrawer()
           addToCart.mutate({
             variantId: variant.id,

src/styles/app.css

@@ -1060,6 +1060,63 @@ mark {
   animation: dropdown-out 100ms ease-in;
 }
 
+/* Cart panel slide-in from right */
+@keyframes cart-panel-in {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes cart-panel-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes cart-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes cart-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.cart-panel[data-state='open'] {
+  animation: cart-panel-in 200ms ease-out;
+}
+
+.cart-panel[data-state='closed'] {
+  animation: cart-panel-out 150ms ease-in;
+}
+
+.cart-overlay[data-state='open'] {
+  animation: cart-overlay-in 200ms ease-out;
+}
+
+.cart-overlay[data-state='closed'] {
+  animation: cart-overlay-out 150ms ease-in;
+}
+
 /* Doc Feedback Styles */
 .doc-feedback-block {
   transition: