Merge branch 'main' into main

Author: JustinMissmahl

media/brand.sketch

@@ -82,6 +82,7 @@
     "jszip": "^3.10.1",
     "lru-cache": "^11.2.7",
     "lucide-react": "^1.7.0",
+    "maath": "^0.10.8",
     "match-sorter": "^8.2.0",
     "mermaid": "^11.14.0",
     "postgres": "^3.4.8",

package.json

@@ -1,19 +1,35 @@
-import { useLocation } from '@tanstack/react-router'
+import { Link, useLocation } from '@tanstack/react-router'
 import { ShoppingCart } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useCart } from '~/hooks/useCart'
 import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'
 
+const badgeClasses = twMerge(
+  'absolute -top-1 -right-1 min-w-[1.125rem] h-[1.125rem] px-1',
+  'flex items-center justify-center rounded-full',
+  'text-[0.65rem] font-bold leading-none',
+  'bg-black text-white dark:bg-white dark:text-black',
+)
+
+const buttonClasses = twMerge(
+  'relative flex items-center justify-center',
+  'h-9 w-9 rounded-lg transition-colors',
+  'hover:bg-gray-500/10 text-gray-700 dark:text-gray-300',
+)
+
 /**
  * Cart button in the main Navbar.
  *
- * Visibility rules:
+ * Behaviour:
+ *   • On /shop/* routes → opens the cart drawer (drawer is mounted in
+ *     ShopLayout, so it exists on these routes)
+ *   • Everywhere else → navigates to /shop/cart (no drawer mounted
+ *     outside the shop, and full navigation is the right UX anyway)
+ *
+ * Visibility:
  *   • Always visible on /shop/* routes (even at zero items)
  *   • Site-wide when the cart has at least one item
  *   • Hidden elsewhere when the cart is empty
- *
- * Click opens the global CartDrawer — no navigation, so the user keeps
- * their place in the docs or blog while reviewing their cart.
  */
 export function NavbarCartButton() {
   const { pathname } = useLocation()
@@ -23,30 +39,35 @@ export function NavbarCartButton() {
 
   if (!onShopRoute && totalQuantity === 0) return null
 
+  const badge =
+    totalQuantity > 0 ? (
+      <span className={badgeClasses}>
+        {totalQuantity > 99 ? '99+' : totalQuantity}
+      </span>
+    ) : null
+
+  const label = totalQuantity > 0 ? `Cart (${totalQuantity} items)` : 'Cart'
+
+  // On shop routes: open the drawer (it's mounted in ShopLayout)
+  if (onShopRoute) {
+    return (
+      <button
+        type="button"
+        onClick={openDrawer}
+        aria-label={label}
+        className={buttonClasses}
+      >
+        <ShoppingCart className="w-4 h-4" />
+        {badge}
+      </button>
+    )
+  }
+
+  // Everywhere else: navigate to the cart page
   return (
-    <button
-      type="button"
-      onClick={openDrawer}
-      aria-label={totalQuantity > 0 ? `Cart (${totalQuantity} items)` : 'Cart'}
-      className={twMerge(
-        'relative flex items-center justify-center',
-        'h-9 w-9 rounded-lg transition-colors',
-        'hover:bg-gray-500/10 text-gray-700 dark:text-gray-300',
-      )}
-    >
+    <Link to="/shop/cart" aria-label={label} className={buttonClasses}>
       <ShoppingCart className="w-4 h-4" />
-      {totalQuantity > 0 ? (
-        <span
-          className={twMerge(
-            'absolute -top-1 -right-1 min-w-[1.125rem] h-[1.125rem] px-1',
-            'flex items-center justify-center rounded-full',
-            'text-[0.65rem] font-bold leading-none',
-            'bg-black text-white dark:bg-white dark:text-black',
-          )}
-        >
-          {totalQuantity > 99 ? '99+' : totalQuantity}
-        </span>
-      ) : null}
-    </button>
+      {badge}
+    </Link>
   )
 }

pnpm-lock.yaml

@@ -28,14 +28,14 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
       <Dialog.Portal>
         <Dialog.Overlay
           className={twMerge(
-            'fixed inset-0 z-50 bg-black/40',
+            '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.Content
           className={twMerge(
-            'fixed right-0 top-0 bottom-0 z-50 w-full sm:max-w-md flex flex-col',
+            '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',