feat: add layout switching and vertical links layout

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,
@@ -34,6 +34,8 @@ type AnalyticsEvent = {
   language: string | null;
   screen_w: number | null;
   screen_h: number | null;
+  viewport_w?: number | null;
+  viewport_h?: number | null;
   visitor_id: string | null;
   session_id: string | null;
   duration_seconds: number | null;
@@ -84,50 +86,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/Block.tsx

@@ -91,6 +91,7 @@ interface BlockProps {
   onInlineUpdate?: (block: BlockData) => void;
   enableTiltEffect?: boolean; // Apple TV style 3D tilt on hover
   previewMode?: boolean; // In preview mode, clicks navigate to URLs instead of editing
+  draggableEnabled?: boolean;
 }
 
 const Block: React.FC<BlockProps> = ({
@@ -111,6 +112,7 @@ const Block: React.FC<BlockProps> = ({
   onInlineUpdate,
   enableTiltEffect,
   previewMode,
+  draggableEnabled = true,
 }) => {
   // Apple TV tilt effect
   const {
@@ -444,9 +446,9 @@ const Block: React.FC<BlockProps> = ({
         }}
         layoutId={block.id}
         layout
-        draggable={!isResizing}
+        draggable={draggableEnabled && !isResizing}
         onDragStart={(e) => {
-          if (isResizing) {
+          if (!draggableEnabled || isResizing) {
             e.preventDefault();
             return;
           }
@@ -524,9 +526,9 @@ const Block: React.FC<BlockProps> = ({
         href={url || undefined}
         target="_blank"
         rel="noopener noreferrer"
-        draggable={!isResizing}
+        draggable={draggableEnabled && !isResizing}
         onDragStart={(e) => {
-          if (isResizing) {
+          if (!draggableEnabled || isResizing) {
             e.preventDefault();
             return;
           }
@@ -679,9 +681,9 @@ const Block: React.FC<BlockProps> = ({
         }}
         layoutId={block.id}
         layout
-        draggable={!isResizing}
+        draggable={draggableEnabled && !isResizing}
         onDragStart={(e) => {
-          if (isResizing) {
+          if (!draggableEnabled || isResizing) {
             e.preventDefault();
             return;
           }
@@ -814,9 +816,9 @@ const Block: React.FC<BlockProps> = ({
       }}
       layoutId={block.id}
       layout
-      draggable={!isResizing}
+      draggable={draggableEnabled && !isResizing}
       onDragStart={(e) => {
-        if (isResizing) {
+        if (!draggableEnabled || isResizing) {
           e.preventDefault();
           return;
         }