// tweaks-panel.jsx
// Drop-in replacement for the existing tweaks-panel.
// CHANGE: useTweaks(DEFAULTS) → useTweaks(DEFAULTS, 'tool-slug-name')
//
// Tool slugs to use (pass as the second argument):
// Social Square → 'social-square'
// Partner Spotlight → 'partner-spotlight'
// Event Announcement → 'event-announcement'
// Carousel Cover → 'carousel-cover'
// Quote/Testimonial → 'quote-testimonial'
// Story Templates → 'story-templates'
// Highlight Covers → 'highlight-covers'
// Brand Post → 'brand-post'
// Feed Previewer → 'feed-previewer'
// ─── useTweaks hook ─────────────────────────────────────────────────────────
//
// Usage in each tool:
// const [tweaks, setTweak] = useTweaks(DEFAULTS, 'social-square');
//
// Returns:
// tweaks – current settings object (merge of defaults + saved values)
// setTweak – (key, value) => void — update a single setting
//
// Data flow:
// 1. Mount: load from Supabase (if logged in) OR localStorage OR use DEFAULTS
// 2. Each setTweak: update React state, write to localStorage immediately,
// schedule a debounced Supabase write (800ms)
// 3. Visual indicator: "Syncing…" / "Saved" / "Offline" chip
function useTweaks(defaults, toolName) {
// ── state ──────────────────────────────────────────────────────────────
const [tweaks, setTweaks] = React.useState(() => {
// Synchronous initialisation from localStorage (Supabase load is async below)
const lsKey = toolName ? `trylo_tweaks_${toolName}` : 'trylo_tweaks';
try {
const saved = localStorage.getItem(lsKey);
if (saved) return { ...defaults, ...JSON.parse(saved) };
} catch (e) {}
return { ...defaults };
});
const [syncStatus, setSyncStatus] = React.useState('idle'); // idle | syncing | saved | offline
const debounceRef = React.useRef(null);
const userRef = React.useRef(null);
// ── load from Supabase once auth is ready ──────────────────────────────
React.useEffect(() => {
if (!toolName || !window.__authReady) return;
window.__authReady.then(async (user) => {
userRef.current = user;
if (!user || !window.__supabase) return;
const cloudSettings = await window.__supabase.loadSettings(toolName, user.id);
if (cloudSettings) {
const merged = { ...defaults, ...cloudSettings };
setTweaks(merged);
// Keep localStorage in sync with what came from cloud
try {
localStorage.setItem(`trylo_tweaks_${toolName}`, JSON.stringify(merged));
} catch (e) {}
}
});
// Re-run when user signs in or out
if (window.__authUI) {
const unsub = window.__authUI.onAuthChange(async (auth) => {
userRef.current = auth.user;
if (!auth.user || !window.__supabase) return;
const cloudSettings = await window.__supabase.loadSettings(toolName, auth.user.id);
if (cloudSettings) {
const merged = { ...defaults, ...cloudSettings };
setTweaks(merged);
try {
localStorage.setItem(`trylo_tweaks_${toolName}`, JSON.stringify(merged));
} catch (e) {}
}
});
return unsub;
}
}, [toolName]);
// ── setTweak: update one key, persist everywhere ───────────────────────
function setTweak(key, value) {
setTweaks((prev) => {
const next = { ...prev, [key]: value };
// 1. localStorage: immediate, synchronous
const lsKey = toolName ? `trylo_tweaks_${toolName}` : 'trylo_tweaks';
try { localStorage.setItem(lsKey, JSON.stringify(next)); } catch (e) {}
// 2. Supabase: debounced 800ms
if (toolName && window.__supabase && userRef.current) {
setSyncStatus('syncing');
clearTimeout(debounceRef.current);
debounceRef.current = setTimeout(async () => {
const ok = await window.__supabase.saveSettings(toolName, userRef.current.id, next);
setSyncStatus(ok ? 'saved' : 'offline');
// Reset indicator to idle after 2s
setTimeout(() => setSyncStatus('idle'), 2000);
}, 800);
}
return next;
});
}
return [tweaks, setTweak, syncStatus];
}
// ─── SyncIndicator component ─────────────────────────────────────────────────
// Renders a small status chip. Include once in each tool's root component:
//
function SyncIndicator({ status }) {
if (status === 'idle') return null;
const config = {
syncing: { label: 'Syncing…', color: '#C26A41', dot: '⟳' },
saved: { label: 'Saved', color: '#6B8C5E', dot: '✓' },
offline: { label: 'Offline', color: '#999', dot: '⚠' },
}[status] || null;
if (!config) return null;
return (
{config.dot}{config.label}
);
}
// ─── Control components (unchanged from original) ───────────────────────────
// These are the building blocks used by each tool's tweaks panel.
// Preserve the exact component names and props your existing tools expect.
function TweaksPanel({ children, title }) {
const [open, setOpen] = React.useState(true);
return (