feat: require admin approval for new photos, show placeholder otherwise

src/app/admin/page.tsx

@@ -207,22 +207,28 @@ export default function AdminDashboard() {
               borderRadius: 'var(--radius)',
               overflow: 'hidden',
               border: '1px solid var(--color-border)',
-              opacity: item.published ? 1 : 0.6,
+              opacity: (!item.wasOncePublished && !item.published) ? 1 : (item.published ? 1 : 0.6),
               transition: 'opacity 0.2s'
             }}
           >
             <div style={{ position: 'relative', aspectRatio: '1/1', background: '#eee' }}>
-              {/* eslint-disable-next-line @next/next/no-img-element */}
+              {(!item.wasOncePublished && !item.published) ? (
-              <img 
+                <div style={{ width: '100%', height: '100%', background: '#fff' }} />
-                src={`/api/media/${item.relativePath}?type=thumb`} 
+              ) : (
-                alt={item.filename}
+                <>
-                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                loading="lazy"
+                  <img 
-              />
+                    src={`/api/media/${item.relativePath}?type=thumb`} 
-              {item.mediaType === 'VIDEO' && (
+                    alt={item.filename}
-                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.3)' }}>
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                  <svg width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="none"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+                    loading="lazy"
-                </div>
+                  />
+                  {item.mediaType === 'VIDEO' && (
+                    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.3)' }}>
+                      <svg width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="none"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+                    </div>
+                  )}
+                </>
               )}
             </div>