fix(preview): enable block toggle via localStorage when API is offline

BlockMetaBar now falls back to localStorage for preview toggle when
NestJS API is unavailable. PreviewClient reads localStorage state
and listens for bb-preview-change events to stay in sync.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AR 15 M4
2026-03-24 18:52:21 +05:00
parent 950799193a
commit 36d5faf67d
2 changed files with 65 additions and 38 deletions
@@ -11,6 +11,7 @@ import { ContactFormsBlock } from "@/components/blocks/ContactFormsBlock";
import { FooterBlock } from "@/components/blocks/FooterBlock";
const STORAGE_KEY = "bb-preview-created";
const LS_PREFIX = "bb-block-preview:";
function BlockPlaceholder({ name, href }: { name: string; href: string }) {
return (
@@ -119,11 +120,17 @@ export function PreviewClient() {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
// Counter to force re-render when localStorage preview toggles change
const [, setRefresh] = useState(0);
useEffect(() => {
setMounted(true);
if (localStorage.getItem(STORAGE_KEY) === "true") {
setCreated(true);
}
const handler = () => setRefresh((n) => n + 1);
window.addEventListener("bb-preview-change", handler);
return () => window.removeEventListener("bb-preview-change", handler);
}, []);
useEffect(() => {
@@ -141,9 +148,16 @@ export function PreviewClient() {
}, [apiUrl]);
function isReady(block: BlockDef): boolean {
// 1. API online → use API data
if (apiMeta !== null && block.path in apiMeta) {
return apiMeta[block.path] && !!block.component;
}
// 2. Check localStorage (set by BlockMetaBar toggle)
const lsVal = typeof window !== "undefined" ? localStorage.getItem(LS_PREFIX + block.path) : null;
if (lsVal !== null) {
return lsVal === "true" && !!block.component;
}
// 3. Fallback to defaultReady
return block.defaultReady && !!block.component;
}