feat: Add image preview and remove action in block editor

components/AnalyticsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import {
   ArrowLeft,
@@ -33,6 +33,7 @@ type AnalyticsEvent = {
   user_agent: string | null;
   language: string | null;
   screen_w: number | null;
+  viewport_w?: number | null;
   screen_h: number | null;
   visitor_id: string | null;
   session_id: string | null;
@@ -84,50 +85,53 @@ const AnalyticsPage: React.FC = () => {
       .finally(() => setInitialLoading(false));
   }, []);
 
-  const fetchAnalytics = async (customDays?: number) => {
-    const daysToFetch = customDays ?? days;
-    if (!projectUrl || !dbPassword) {
-      setError('Please enter your Supabase URL and database password');
-      return;
-    }
+  const fetchAnalytics = useCallback(
+    async (customDays?: number) => {
+      const daysToFetch = customDays ?? days;
+      if (!projectUrl || !dbPassword) {
+        setError('Please enter your Supabase URL and database password');
+        return;
+      }
 
-    setLoading(true);
-    setError(null);
-
-    try {
-      const res = await fetch('/__openbento/analytics/fetch', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ projectUrl, dbPassword, days: daysToFetch }),
-      });
-
-      const data = await res.json();
-      if (data.ok) {
-        setEvents(data.events || []);
-        setIsConfigured(true);
-      } else {
-        setError(data.error || 'Failed to fetch analytics');
+      setLoading(true);
+      setError(null);
+
+      try {
+        const res = await fetch('/__openbento/analytics/fetch', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ projectUrl, dbPassword, days: daysToFetch }),
+        });
+
+        const data = await res.json();
+        if (data.ok) {
+          setEvents(data.events || []);
+          setIsConfigured(true);
+        } else {
+          setError(data.error || 'Failed to fetch analytics');
+        }
+      } catch (e) {
+        setError('Network error: ' + (e as Error).message);
+      } finally {
+        setLoading(false);
       }
-    } catch (e) {
-      setError('Network error: ' + (e as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  };
+    },
+    [days, projectUrl, dbPassword]
+  );
 
   // Auto-fetch when config is ready
   useEffect(() => {
     if (!initialLoading && projectUrl && dbPassword && !isConfigured) {
       fetchAnalytics();
     }
-  }, [initialLoading, projectUrl, dbPassword]);
+  }, [initialLoading, projectUrl, dbPassword, isConfigured, fetchAnalytics]);
 
   // Auto-refresh when days change (if already configured)
   useEffect(() => {
     if (isConfigured && projectUrl && dbPassword) {
       fetchAnalytics(days);
     }
-  }, [days]);
+  }, [days, isConfigured, projectUrl, dbPassword, fetchAnalytics]);
 
   // Compute analytics stats
   const stats = useMemo(() => {

components/Builder.tsx

@@ -2229,7 +2229,7 @@ const Builder: React.FC<BuilderProps> = ({ onBack }) => {
           }
         }}
         blocks={blocks}
-        setBlocks={handleSetBlocks}
+        onBlocksChange={handleSetBlocks}
       />
 
       {/* 4. AVATAR CROP MODAL */}

components/EditorSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { BlockData, BlockType, SocialPlatform, UserProfile } from '../types';
 import { BASE_COLORS } from '../constants';
 import {
@@ -52,18 +52,30 @@ const EditorSidebar: React.FC<EditorSidebarProps> = ({
 }) => {
   const [isFetching, setIsFetching] = useState(false);
   const [fetchError, setFetchError] = useState<string | null>(null);
+  const blockImageInputRef = useRef<HTMLInputElement | null>(null);
 
   const handleBlockImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file && editingBlock) {
       const reader = new FileReader();
       reader.onloadend = () => {
         updateBlock({ ...editingBlock, imageUrl: reader.result as string });
+        e.target.value = '';
       };
       reader.readAsDataURL(file);
     }
   };
 
+  const handleRemoveBlockImage = () => {
+    if (!editingBlock) return;
+
+    updateBlock({ ...editingBlock, imageUrl: undefined });
+
+    if (blockImageInputRef.current) {
+      blockImageInputRef.current.value = '';
+    }
+  };
+
   const isYouTubeActive =
     editingBlock?.type === BlockType.SOCIAL &&
     !!(editingBlock.channelId && editingBlock.channelId.length > 0);
@@ -751,6 +763,7 @@ const EditorSidebar: React.FC<EditorSidebarProps> = ({
                         <input
                           id="block-img-upload"
                           type="file"
+                          ref={blockImageInputRef}
                           className="sr-only"
                           accept="image/*"
                           onChange={handleBlockImageUpload}
@@ -765,6 +778,38 @@ const EditorSidebar: React.FC<EditorSidebarProps> = ({
                           </div>
                         )}
                       </label>
+                      {editingBlock.imageUrl && (
+                        <div className="mt-3 space-y-3">
+                          <div className="overflow-hidden rounded-xl border border-gray-200 bg-gray-50">
+                            {editingBlock.type === BlockType.MEDIA &&
+                            /\.(mp4|webm|ogg|mov)$/i.test(editingBlock.imageUrl) ? (
+                              <video
+                                src={editingBlock.imageUrl}
+                                className="h-40 w-full object-cover"
+                                controls
+                                muted
+                                playsInline
+                              />
+                            ) : (
+                              <img
+                                src={editingBlock.imageUrl}
+                                alt="Block preview"
+                                className="h-40 w-full object-cover"
+                              />
+                            )}
+                          </div>
+                          <button
+                            type="button"
+                            onClick={handleRemoveBlockImage}
+                            className="w-full py-3 text-red-500 font-medium hover:bg-red-50 rounded-xl transition-colors flex items-center justify-center gap-2"
+                            aria-label="Remove image"
+                            title="Remove image"
+                          >
+                            <Trash2 size={18} />
+                            Remove image
+                          </button>
+                        </div>
+                      )}
                     </div>
                   )}
 

socialPlatforms.ts

@@ -280,7 +280,7 @@ export const SOCIAL_PLATFORM_OPTIONS: SocialPlatformOption[] = [
   {
     id: 'spotify',
     label: 'Spotify',
-    icon: SiSpotify,
+    icon: Globe,
     brandIcon: SiSpotify,
     brandColor: '#1DB954',
     placeholder: 'spotify username',