From cfd0c533a40d2819daf8b1cf657c1445b0f345d9 Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Sat, 27 Jun 2026 19:26:38 -0500
Subject: [PATCH] fix(admin): slideshow gallery image selection and preview

---
 src/app/admin/page.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 35cdf51..6f3e05b 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -492,9 +492,17 @@ export default function AdminPage() {
         <form onSubmit={saveSlide} style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginBottom: '1.5rem' }}>
           <Text label="Title" value={slideForm.title || ''} onChange={(v) => setSlideForm({ ...slideForm, title: v })} />
           <Text label="Subtitle" value={slideForm.subtitle || ''} onChange={(v) => setSlideForm({ ...slideForm, subtitle: v })} />
-          <Text label="Image URL (or pick image ID below)" value={slideForm.image_url || ''} onChange={(v) => setSlideForm({ ...slideForm, image_url: v })} />
           <Number label="Sort order" value={slideForm.sort_order ?? 0} onChange={(v) => setSlideForm({ ...slideForm, sort_order: parseInt(v || '0', 10) })} />
-          <ImageSelect label="Gallery image" images={images} value={slideForm.image_id ?? ''} onChange={(v) => setSlideForm({ ...slideForm, image_id: v ? parseInt(v, 10) : null })} />
+          <ImageSelect label="Gallery image" images={images} value={slideForm.image_id ?? ''} onChange={(v) => {
+            const imageId = v ? parseInt(v, 10) : null;
+            const image = imageId ? images.find((img) => img.id === imageId) : null;
+            setSlideForm({ ...slideForm, image_id: imageId, image_url: image?.data || '' });
+          }} />
+          {slideForm.image_url && (
+            <div style={{ gridColumn: '1 / -1' }}>
+              <img src={slideForm.image_url} alt="Slide preview" style={{ width: '100%', maxHeight: '200px', objectFit: 'cover', borderRadius: '12px' }} />
+            </div>
+          )}
           <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
             <input type="checkbox" checked={slideForm.active !== false} onChange={(e) => setSlideForm({ ...slideForm, active: e.target.checked })} />
             Active
@@ -504,7 +512,7 @@ export default function AdminPage() {
             {editingSlide && <SecondaryButton onClick={() => { setEditingSlide(null); setSlideForm({ title: '', subtitle: '', image_id: null, image_url: '', active: true, sort_order: 0 }); }}>Cancel</SecondaryButton>}
           </div>
         </form>
-        <ListTable rows={slides.map((s) => [s.title || '(untitled)', s.active ? 'On' : 'Off', `#${s.sort_order}`])} onEdit={(i) => editSlide(slides[i])} onDelete={(i) => deleteSlide(slides[i].id)} />
+        <ListTable rows={slides.map((s) => [s.title || '(untitled)', s.image_url ? '🖼️ image' : 'no image', s.active ? 'On' : 'Off', `#${s.sort_order}`])} onEdit={(i) => editSlide(slides[i])} onDelete={(i) => deleteSlide(slides[i].id)} />
       </Section>
 
       <Section title="Calendar Events">