From b3e61595191aa4dfd4d7e79fdb5a210b192ad00c Mon Sep 17 00:00:00 2001
From: Ender <enderyildirim@outlook.com>
Date: Fri, 24 Oct 2025 16:00:43 +0200
Subject: [PATCH] feat: add feature image preview with remove button in
 MetadataPanel

---
 apps/admin/src/components/MetadataPanel.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/admin/src/components/MetadataPanel.tsx b/apps/admin/src/components/MetadataPanel.tsx
index 4e001c7..a7ed7b3 100644
--- a/apps/admin/src/components/MetadataPanel.tsx
+++ b/apps/admin/src/components/MetadataPanel.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Stack, TextField, Typography } from '@mui/material';
+import { Box, Button, Stack, TextField, Typography, IconButton } from '@mui/material';
 import { useState } from 'react';
 
 export type Metadata = {
@@ -25,6 +25,23 @@ export default function MetadataPanel({ value, onChange, onPublish }: {
         <TextField label="Tags (comma-separated)" value={value.tagsText} onChange={(e) => set({ tagsText: e.target.value })} fullWidth />
         <TextField label="Canonical URL" value={value.canonicalUrl} onChange={(e) => set({ canonicalUrl: e.target.value })} fullWidth />
         <TextField label="Feature Image URL" value={value.featureImage || ''} onChange={(e) => set({ featureImage: e.target.value })} fullWidth />
+        {value.featureImage && (
+          <Box sx={{ position: 'relative', border: '1px solid #eee', borderRadius: 1, overflow: 'hidden', height: 180, background: '#fafafa' }}>
+            <img
+              src={value.featureImage}
+              alt="feature"
+              style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
+            />
+            <IconButton
+              size="small"
+              onClick={() => set({ featureImage: '' })}
+              sx={{ position: 'absolute', top: 6, right: 6, bgcolor: 'rgba(255,255,255,0.9)', '&:hover': { bgcolor: 'rgba(255,255,255,1)' } }}
+              aria-label="Remove feature image"
+            >
+              ×
+            </IconButton>
+          </Box>
+        )}
         <Stack direction="row" spacing={1}>
           <Button variant="outlined" disabled={busy} onClick={() => onPublish('draft')}>Save Draft to Ghost</Button>
           <Button variant="contained" disabled={busy} onClick={() => onPublish('published')}>Publish to Ghost</Button>