From f1537402b59c7382d9834c93cca0a19223609a80 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 18 Jun 2026 11:08:17 -0400
Subject: [PATCH] Disable sold-out variants in picker; default to first
 in-stock option

Sold-out variant buttons now show "Sold Out" and can't be selected.
The picker also defaults to the first in-stock variation instead of
always starting on variations[0], which could be out of stock.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 estore/src/components/ColorPicker.tsx | 42 +++++++++++++++++----------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/estore/src/components/ColorPicker.tsx b/estore/src/components/ColorPicker.tsx
index 7c7dc4f..8047a9d 100644
--- a/estore/src/components/ColorPicker.tsx
+++ b/estore/src/components/ColorPicker.tsx
@@ -50,7 +50,9 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
   const [notes,          setNotes]          = useState(editingEntry?.notes ?? '')
   const [activeImg,      setActiveImg]      = useState(0)
   const [userVariationId, setUserVariationId] = useState<string | undefined>(
-    () => editingEntry?.selectedVariationId ?? product.variations[0]?.id
+    () => editingEntry?.selectedVariationId
+      ?? product.variations.find((v) => v.inventory === null || v.inventory > 0)?.id
+      ?? product.variations[0]?.id
   )
 
   // Vinyl state
@@ -285,21 +287,29 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
             <div className="field" style={{ marginBottom: '1.25rem' }}>
               <label className="label is-small">Size / Option</label>
               <div className="buttons">
-                {selectableVariations.map((v) => (
-                  <button
-                    key={v.id}
-                    type="button"
-                    className={`button is-small${v.id === (userVariation?.id) ? ' is-info' : ''}`}
-                    onClick={() => { setUserVariationId(v.id); setActiveImg(0) }}
-                  >
-                    {v.name}
-                    {v.priceCents > 0 && (
-                      <span style={{ marginLeft: 6, opacity: 0.75, fontSize: '0.78em' }}>
-                        {fmt(v.priceCents)}
-                      </span>
-                    )}
-                  </button>
-                ))}
+                {selectableVariations.map((v) => {
+                  const varSoldOut = v.inventory !== null && v.inventory <= 0
+                  return (
+                    <button
+                      key={v.id}
+                      type="button"
+                      className={`button is-small${v.id === (userVariation?.id) ? ' is-info' : ''}`}
+                      disabled={varSoldOut}
+                      style={varSoldOut ? { opacity: 0.5, cursor: 'not-allowed' } : undefined}
+                      onClick={() => { if (!varSoldOut) { setUserVariationId(v.id); setActiveImg(0) } }}
+                    >
+                      {v.name}
+                      {varSoldOut
+                        ? <span style={{ marginLeft: 6, fontSize: '0.78em' }}>Sold Out</span>
+                        : v.priceCents > 0 && (
+                          <span style={{ marginLeft: 6, opacity: 0.75, fontSize: '0.78em' }}>
+                            {fmt(v.priceCents)}
+                          </span>
+                        )
+                      }
+                    </button>
+                  )
+                })}
               </div>
             </div>
           )}