// ---- Client-side router ---- const RouterCtx = React.createContext({ currentScreen: "landing", navigate: () => {}, transitioning: false }); function useRouter() { const [currentScreen, setCurrentScreen] = React.useState(() => { const params = new URLSearchParams(window.location.search); const screen = params.get('screen'); const validScreens = ["reset-password", "login", "signup", "dashboard"]; return (screen && validScreens.includes(screen)) ? screen : "landing"; }); const [transitioning, setTransitioning] = React.useState(false); const navigate = React.useCallback((screen) => { setTransitioning(true); setTimeout(() => { setCurrentScreen(screen); setTransitioning(false); }, 120); }, []); return { currentScreen, navigate, transitioning }; } // Variation B — "Cinemascope": true black + electric green, cinematic film-grid const themeB = { bg: "#050505", bgSoft: "#0d0d0d", panel: "#0a0a0a", panelLine: "rgba(255,255,255,0.1)", text: "#F5F5F4", textDim: "#8A8A85", accent: "#39FF6A", accentText: "#050505", frame: "#000", tabsBg: "#000", shadow: "0 30px 80px rgba(0,0,0,0.7)", }; const DISPLAY_B = "'IBM Plex Mono', ui-monospace, Menlo, monospace"; const SCREEN_LABELS = { dashboard: "// DASHBOARD", editor: "// EDITOR", marketplace: "// MARKETPLACE", jobs: "// JOBS", community: "// COMMUNITY", tokens: "// TOKENS", settings: "// SETTINGS", admin: "// ADMIN", support: "// SUPPORT", "error-404": "// NOT FOUND", "error-403": "// FORBIDDEN", "error-408": "// TIMEOUT", "error-429": "// RATE LIMITED", "error-500": "// SERVER ERROR", "error-503": "// UNAVAILABLE", offline: "// OFFLINE", "session-expired":"// SESSION EXPIRED", "payment-success":"// PAYMENT SUCCESSFUL", "reset-password": "// RESET PASSWORD", }; function VariationB({ accent, density = "comfortable" } = {}) { const t = accent ? { ...themeB, accent, accentText: themeB.accentText } : themeB; const PAD = density === "compact" ? "0 48px" : "0 64px"; const [modal, setModal] = React.useState(null); // null | "signin" | "download" const openDownload = () => setModal("download"); const [newsletterEmail, setNewsletterEmail] = React.useState(""); const [newsletterState, setNewsletterState] = React.useState("idle"); // "idle"|"loading"|"success"|"error" const handleNewsletterSubmit = async (e) => { e.preventDefault(); if (!newsletterEmail.trim() || newsletterState !== "idle") return; setNewsletterState("loading"); try { const { error } = await db.from('newsletter_subscriber').insert({ email: newsletterEmail.trim(), created_at: new Date().toISOString() }); setNewsletterState(error ? "error" : "success"); if (!error) setNewsletterEmail(""); } catch (err) { setNewsletterState("error"); } }; const routerState = useRouter(); const { currentScreen, navigate, transitioning } = routerState; const { user } = useAuth(); // After Google OAuth redirect or any sign-in, land on dashboard instead of the homepage React.useEffect(() => { if (user && currentScreen === "landing") { navigate("dashboard"); } }, [user, currentScreen, navigate]); // Global Escape → dashboard (unless a modal is open) React.useEffect(() => { if (currentScreen === "landing") return; const onKey = (e) => { if (e.key === "Escape") { if (window.__vlModalDepth > 0) return; navigate("dashboard"); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [currentScreen, navigate]); // Global offline event → navigate to offline screen React.useEffect(() => { const handleOffline = () => navigate('offline'); window.addEventListener('vlstudio:offline', handleOffline); return () => window.removeEventListener('vlstudio:offline', handleOffline); }, [navigate]); return (
{currentScreen !== "landing" && ( )} {currentScreen === "signup" && } {currentScreen === "login" && } {currentScreen === "dashboard" && } {currentScreen === "editor" && } {currentScreen === "marketplace" && } {currentScreen === "jobs" && } {currentScreen === "community" && } {currentScreen === "tokens" && } {currentScreen === "settings" && } {currentScreen === "admin" && } {currentScreen === "support" && } {currentScreen === "error-404" && } {currentScreen === "error-403" && } {currentScreen === "error-408" && } {currentScreen === "error-429" && } {currentScreen === "error-500" && } {currentScreen === "error-503" && } {currentScreen === "offline" && } {currentScreen === "session-expired" && } {currentScreen === "payment-success" && } {currentScreen === "reset-password" && } {currentScreen === "landing" && (<> {/* NAV */}
VLSTUDIO
{/* HERO — film slate aesthetic */}
{/* Slate strip */}
REC · BETA · v0.9.2 SCENE 01 / TAKE 12 OPEN BETA · FREE TO USE

POST-PRODUCTION,
POST-PROBLEM.

VLStudio cuts the grunt work out of editing. Auto-trim, caption, translate, and reframe in one window. Designed for the creators and small studios who post weekly — not for Hollywood.

{/* Two-column: editor + side rail */}
macOS · Windows · 240MB · No card
{/* LOGO STRIP */}
━━ Built by creators who post weekly ━━
{/* FEATURE GRID — film strip layout */}
// Feature reel

SIX TOOLS.
NO TABS.

{/* WALKTHROUGH — co-edit */}
● TIMELINE / CO-EDIT 04 collaborators

YOUR EDITOR
WITH PR REVIEWS.

Drop a project link in your team chat. Reviewers leave timestamped notes — or push edits straight into your timeline. Approve, skip, or counter. Like git for video.

{[ ["maya", "00:14", "trim the 'umm' here", "merged"], ["joel", "00:38", "swap to wide cut", "open"], ["ana", "01:02", "missing 's' in caption", "merged"], ["theo", "01:48", "drop bg music here", "open"], ].map(([u, ts, msg, st], i) => (
@{u} {ts} {msg} {st}
))}
{/* USE CASES */}

ONE EDIT.
EVERY FORMAT.

{/* CTA */}
// open beta

BREAK IT.
TELL US HOW.

Download the beta, edit a video, file the bug. We'll read every word — and you'll get a free year of Pro when we go GA.

{/* NEWSLETTER */}
// STAY IN THE LOOP
Get early access updates
{newsletterState === "success" ? (
// YOU'RE ON THE LIST
) : (
{ setNewsletterEmail(e.target.value); if (newsletterState !== "idle") setNewsletterState("idle"); }} style={{ flex: 1, background: t.panel, border: `1px solid ${t.panelLine}`, borderRadius: 4, color: t.text, fontFamily: DISPLAY_B, fontSize: 12, padding: "12px 14px", outline: "none" }} />
)} {newsletterState === "error" && (
Something went wrong. Please try again.
)}
{/* FOOTER */}
VLSTUDIO © 2026 / made for creators
PrivacyTermsStatusChangelog
{/* Modals */} setModal(null)} t={t}/> setModal(null)} t={t}/> )}
); } function StatCardB({ t, big, label, sub }) { return (
{big}
{label}
{sub}
); } function FeatureRollB({ t }) { const feats = [ { tag: "FT-01", title: "Auto-cut", body: "Detect silences, ums, and dead air. Trim a 30-min raw take in 10 seconds." }, { tag: "FT-02", title: "Auto-captions", body: "98% accurate · 30+ languages. Style to your brand." }, { tag: "FT-03", title: "BG remover", body: "One-click greenscreen — without the greenscreen." }, { tag: "FT-04", title: "Smart resize", body: "16:9 → 9:16 → 1:1 with subject-aware reframing." }, { tag: "FT-05", title: "Co-edit", body: "Reviewers push edits straight into your timeline." }, { tag: "FT-06", title: "Local-first", body: "Renders on your machine. Footage stays yours." }, ]; return (
{feats.map((f, i) => (
{f.tag}
{f.title}
{f.body}
→
))}
); } window.VariationB = VariationB; // ---- AppNav (persistent top bar for non-landing screens) ---- function AppNav({ t, currentScreen, navigate }) { const [dropdownOpen, setDropdownOpen] = React.useState(false); const { user, profile, signOut, notifications, unreadCount, setUnreadCount } = useAuth(); const navLinks = [ { key: "dashboard", label: "Dashboard" }, { key: "editor", label: "Editor" }, { key: "marketplace", label: "Marketplace" }, { key: "jobs", label: "Jobs" }, { key: "community", label: "Community" }, ]; const dropdownItems = [ { key: "settings", label: "Settings" }, { key: "tokens", label: "Tokens" }, { key: "admin", label: "Admin" }, { key: "support", label: "Support" }, { key: null, label: "Sign out" }, ]; React.useEffect(() => { if (!dropdownOpen) return; const close = () => setDropdownOpen(false); window.addEventListener("click", close); return () => window.removeEventListener("click", close); }, [dropdownOpen]); return (
{SCREEN_LABELS[currentScreen] || `// ${currentScreen.toUpperCase()}`} {currentScreen === "admin" && ( ADMIN )}
{navLinks.map(nl => ( ))} {/* Bell icon with unread count */}
{dropdownOpen && (
e.stopPropagation()} style={{ position: "absolute", top: 42, right: 0, background: t.panel, border: `1px solid ${t.panelLine}`, borderRadius: 4, minWidth: 160, zIndex: 100, boxShadow: "0 8px 32px rgba(0,0,0,0.5)", }} > {dropdownItems.map((item, i) => ( ))}
)}
); } // ---- Placeholder screen (used until later prompts fill each screen in) ---- function PlaceholderScreen({ screenName, t, navigate }) { return (
// coming soon
{screenName}
); } // ---- Google OAuth Button Component ---- function GoogleOAuthButton({ t }) { return ( ); } function LoginScreen({ t, navigate }) { const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [keepSignedIn, setKeepSignedIn] = React.useState(true); const [showResetFlow, setShowResetFlow] = React.useState(false); const [resetEmail, setResetEmail] = React.useState(""); const [resetSent, setResetSent] = React.useState(false); const [signingIn, setSigningIn] = React.useState(false); const [authError, setAuthError] = React.useState(""); const [resetLoading, setResetLoading] = React.useState(false); const { signIn, signInWithGoogle, user } = useAuth(); const { navigate: routerNavigate, currentScreen } = React.useContext(RouterCtx); // Navigate to dashboard when user signs in React.useEffect(() => { if (user && currentScreen === 'login') { navigate('dashboard'); } }, [user, currentScreen, navigate]); const handleSubmit = async (e) => { e.preventDefault(); if (!email || !password) return; setSigningIn(true); setAuthError(""); const { error } = await signIn(email, password); if (error) { setSigningIn(false); let msg = error.message || ''; if (msg.includes('Invalid login credentials')) msg = '// INVALID EMAIL OR PASSWORD'; else if (msg.includes('Email not confirmed')) msg = '// PLEASE CONFIRM YOUR EMAIL FIRST'; else msg = '// ERROR: ' + msg; setAuthError(msg); } // On success, onAuthStateChange fires → user becomes non-null → useEffect navigates }; const handleResetSubmit = async (e) => { e.preventDefault(); if (!resetEmail) return; setResetLoading(true); await db.auth.resetPasswordForEmail(resetEmail, { redirectTo: window.location.origin + '?screen=reset-password', }); setResetLoading(false); setResetSent(true); }; return (
{/* Sticky top nav - logo only */}
navigate("landing")}> VLSTUDIO
{/* Two-column layout */}
{/* Left side - display text */}

WELCOME
BACK.

// sign in to your studio

{/* Right side - form */}
{!showResetFlow ? ( <>
{authError && (
{authError}
)}
setShowResetFlow(true)} style={{ color: t.textDim, cursor: "pointer", textDecoration: "none" }}> Forgot password?
No account?{" "} navigate("signup")} style={{ color: t.accent, cursor: "pointer" }}> Get the beta →
) : ( <> {!resetSent ? (
RESET PASSWORD

// enter your email

) : (
// CHECK YOUR INBOX

We sent a reset link to {resetEmail}. Click it to set a new password.

)} )}
); } function SignupScreen({ t, navigate }) { const [role, setRole] = React.useState("CREATOR"); const [username, setUsername] = React.useState(""); const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [confirmPassword, setConfirmPassword] = React.useState(""); const [agreedToTerms, setAgreedToTerms] = React.useState(false); const [usernameStatus, setUsernameStatus] = React.useState(null); // null | "checking" | "available" | "taken" const [showEmailConfirm, setShowEmailConfirm] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); const [signupError, setSignupError] = React.useState(""); const [validationErrors, setValidationErrors] = React.useState({}); const usernameTimerRef = React.useRef(null); const { signUp, signInWithGoogle } = useAuth(); // Real DB username availability check with debounce React.useEffect(() => { if (username.length < 3) { setUsernameStatus(null); return; } if (!/^[a-z0-9_]{3,}$/i.test(username)) { setUsernameStatus(null); return; } setUsernameStatus("checking"); if (usernameTimerRef.current) clearTimeout(usernameTimerRef.current); usernameTimerRef.current = setTimeout(async () => { const { data, error } = await db.from('profiles').select('id').eq('username', username).single(); if (data) { setUsernameStatus("taken"); } else if (error && error.code === 'PGRST116') { setUsernameStatus("available"); } else { setUsernameStatus(null); } }, 500); return () => { if (usernameTimerRef.current) clearTimeout(usernameTimerRef.current); }; }, [username]); const validate = () => { const errs = {}; if (!username || username.length < 3 || !/^[a-z0-9_]{3,}$/i.test(username)) errs.username = '// MIN 3 CHARS, LETTERS/NUMBERS/UNDERSCORE ONLY'; if (!email || !email.includes('@')) errs.email = '// INVALID EMAIL ADDRESS'; if (!password || password.length < 8) errs.password = '// MIN 8 CHARACTERS'; if (confirmPassword !== password) errs.confirmPassword = '// PASSWORDS DO NOT MATCH'; if (!agreedToTerms) errs.terms = '// MUST AGREE TO TERMS'; return errs; }; const handleSubmit = async (e) => { e.preventDefault(); const errs = validate(); setValidationErrors(errs); if (Object.keys(errs).length > 0) return; setSubmitting(true); setSignupError(""); const { error } = await signUp(email, password, { username, role: role.toLowerCase() }); setSubmitting(false); if (error) { setSignupError('// ERROR: ' + error.message); } else { setShowEmailConfirm(true); } }; if (showEmailConfirm) { return (
// CHECK YOUR EMAIL
{email}

We sent a confirmation link to your email. Click it to activate your account and start editing.

); } return (
{/* Sticky top nav - logo only */}
navigate("landing")}> VLSTUDIO
{/* Two-column layout */}
{/* Left side - display text */}

JOIN THE
BETA.

// free while we build

{/* Right side - form */}
{/* Role selector */}
I am a
{["CREATOR", "CLIENT"].map(r => { const selected = r === role; return ( ); })}
{/* Username with availability check */} {validationErrors.username &&
{validationErrors.username}
}
{validationErrors.email &&
{validationErrors.email}
}
{validationErrors.password &&
{validationErrors.password}
}
{validationErrors.confirmPassword &&
{validationErrors.confirmPassword}
}
{/* Terms checkbox */} {validationErrors.terms &&
{validationErrors.terms}
} {signupError &&
{signupError}
}
Already have an account?{" "} navigate("login")} style={{ color: t.accent, cursor: "pointer" }}> Sign in →
); } function DashboardScreen({ t, navigate }) { useRequireAuth(navigate); const { user, profile, notifications: authNotifications, unreadCount, setUnreadCount } = useAuth(); const [ytConnected, setYtConnected] = React.useState(false); const [notifications, setNotifications] = React.useState([ { id: 1, icon: "💬", msg: "Sarah left a comment on \"Vlog #12\"", time: "2 min ago" }, { id: 2, icon: "👥", msg: "Alex joined as collaborator on \"Brand Spot\"", time: "18 min ago" }, { id: 3, icon: "✅", msg: "Render complete: \"Product Demo v3.mp4\"", time: "1 hr ago" }, { id: 4, icon: "📦", msg: "Export ready: \"Summer Reel 4K.zip\"", time: "3 hr ago" }, ]); const navItems = [ { key: "dashboard", label: "Dashboard", icon: ( )}, { key: "editor", label: "Editor", icon: ( )}, { key: "marketplace", label: "Marketplace", icon: ( )}, { key: "jobs", label: "Jobs", icon: ( )}, { key: "community", label: "Community", icon: ( )}, ]; // Real projects from DB const { data: dbProjects, loading: projectsLoading, error: projectsError, refetch: refetchProjects } = useQuery( () => user ? db.from('projects').select('*').eq('user_id', user.id).order('updated_at', { ascending: false }).limit(5) : Promise.resolve({ data: [], error: null }), [user?.id] ); const projectStatusMap = { draft: 'DRAFT', active: 'LIVE', review: 'REVIEW', live: 'LIVE' }; const statusColor = { LIVE: t.accent, REVIEW: "#5BE3FF", DRAFT: t.textDim }; // SVG traffic chart data — 30 days upward-trending polyline const chartW = 540, chartH = 180; const rawVals = [28,32,29,35,31,38,42,39,44,48,45,52,50,57,55,60,58,64,62,68,70,66,74,72,78,80,76,84,88,92]; const minV = 20, maxV = 100; const pts = rawVals.map((v, i) => { const x = 40 + (i / (rawVals.length - 1)) * (chartW - 56); const y = (chartH - 30) - ((v - minV) / (maxV - minV)) * (chartH - 50); return `${x},${y}`; }).join(" "); const xLabels = ["MAY 06","MAY 11","MAY 16","MAY 21","MAY 26","JUN 01"]; const gridLines = [0.25, 0.5, 0.75, 1.0].map(r => (chartH - 30) - r * (chartH - 50)); return (
{/* ── LEFT SIDEBAR ── */} {/* ── MAIN CONTENT ── */}
{/* Page header */}
// DASHBOARD
Creator Overview
{/* ── STAT CARDS ── */}
{[ { label: "TOTAL VIEWS", value: "128.4K", delta: "+12% this week" }, { label: "UNIQUE VISITORS", value: "34.2K", delta: null }, { label: "ENGAGEMENT RATE", value: "6.8%", delta: null }, { label: "CONVERSION RATE", value: "3.2%", delta: null }, ].map(card => (
{card.label}
{card.value}
{card.delta && (
{card.delta}
)}
// DEMO DATA
))}
{/* ── YOUTUBE BANNER ── */}
{/* YouTube icon */} {ytConnected ? ( <>
John Doe Studio 4,821 subscribers 312K total views
✓ CONNECTED
) : ( <>
Connect your YouTube channel for analytics
)}
{/* ── MIDDLE ROW: Traffic chart + Audience ── */}
{/* Traffic SVG chart */}
// TRAFFIC · 30 DAYS
{/* Grid lines */} {gridLines.map((y, i) => ( ))} {/* Y-axis ticks */} {gridLines.map((y, i) => ( {Math.round(minV + (i + 1) * (maxV - minV) / 4)} ))} {/* Polyline fill */} {/* Polyline */} {/* X-axis labels */} {xLabels.map((lbl, i) => { const x = 40 + (i / (xLabels.length - 1)) * (chartW - 56); return ( {lbl} ); })}
{/* Audience breakdown */}
// AUDIENCE
{/* Device bars */}
DEVICE SPLIT
{[ { label: "Mobile", pct: 58 }, { label: "Desktop", pct: 31 }, { label: "Tablet", pct: 11 }, ].map(row => (
{row.label} {row.pct}%
))}
{/* Top countries */}
TOP COUNTRIES
{[ { flag: "🇺🇸", name: "United States", pct: "42%" }, { flag: "🇬🇧", name: "United Kingdom", pct: "18%" }, { flag: "🇨🇦", name: "Canada", pct: "11%" }, ].map(c => (
{c.flag} {c.name} {c.pct}
))}
{/* ── BOTTOM ROW: Projects + Notifications ── */}
{/* Recent projects */}
// RECENT PROJECTS
{projectsLoading ? (
{[0,1,2,3,4].map(i => (
))}
) : projectsError ? (
// FAILED TO LOAD PROJECTS
) : ( {["TITLE", "STATUS", "DURATION", "LAST SAVED"].map(h => ( ))} {(dbProjects || []).map((p, i) => { const statusKey = projectStatusMap[p.status] || p.status?.toUpperCase() || 'DRAFT'; const sc = statusColor[statusKey] || t.textDim; const dur = typeof p.duration === 'number' ? `${Math.floor(p.duration/60)}:${String(p.duration%60).padStart(2,'0')}` : (p.duration || '—'); return ( ); })} {(dbProjects || []).length === 0 && ( )}
{h}
{p.title} {statusKey} {dur} {formatRelativeTime(p.updated_at)}
No projects yet.
)}
{/* Notifications */}
// NOTIFICATIONS
{notifications.length === 0 ? (
No notifications.
) : ( notifications.map(n => (
{n.icon}
{n.msg}
{n.time}
)) )}
); } function EditorScreen({ t, navigate }) { useRequireAuth(navigate); const { user, profile } = useAuth(); // ── LEFT PANEL STATE ── const [activeProjectId, setActiveProjectId] = React.useState(null); const [showNewProjectForm, setShowNewProjectForm] = React.useState(false); const [newProjectTitle, setNewProjectTitle] = React.useState(""); const [newProjectDesc, setNewProjectDesc] = React.useState(""); const [newProjectStatus, setNewProjectStatus] = React.useState("DRAFT"); const [projects, setProjects] = React.useState([]); const [projectsLoading, setProjectsLoading] = React.useState(true); const [projectsError, setProjectsError] = React.useState(null); const [createError, setCreateError] = React.useState(""); const [deleteConfirm, setDeleteConfirm] = React.useState(null); // project id pending delete // Load projects from DB const loadProjects = React.useCallback(async () => { if (!user) return; setProjectsLoading(true); setProjectsError(null); const { data, error } = await db.from('projects').select('*').eq('user_id', user.id).order('updated_at', { ascending: false }); setProjectsLoading(false); if (error) { setProjectsError(error.message); } else { setProjects(data || []); if ((data || []).length > 0 && activeProjectId === null) { setActiveProjectId(data[0].id); } } }, [user, activeProjectId]); React.useEffect(() => { loadProjects(); }, [user?.id]); const [kebabOpen, setKebabOpen] = React.useState(null); // ── CENTER PANEL STATE ── const [showVersions, setShowVersions] = React.useState(false); // ── RIGHT PANEL STATE ── const [rightTab, setRightTab] = React.useState("TASKS"); const [showAddTask, setShowAddTask] = React.useState(false); const [newTaskTitle, setNewTaskTitle] = React.useState(""); const [newTaskAssignee, setNewTaskAssignee] = React.useState(""); const [newTaskDeadline, setNewTaskDeadline] = React.useState(""); const [tasks, setTasks] = React.useState([]); const [tasksLoading, setTasksLoading] = React.useState(false); const [tasksError, setTasksError] = React.useState(null); const [copied, setCopied] = React.useState(false); const [inviteEmail, setInviteEmail] = React.useState(""); const [presentUsers, setPresentUsers] = React.useState([]); // realtime presence // Presence channel for editor React.useEffect(() => { if (!user || !activeProjectId) return; const channelName = 'editor-presence:' + activeProjectId; const channel = db.channel(channelName, { config: { presence: { key: user.id } } }) .on('presence', { event: 'sync' }, () => { const state = channel.presenceState(); const others = Object.values(state).flat().filter(p => p.user_id !== user.id); setPresentUsers(others); }) .subscribe(async (status) => { if (status === 'SUBSCRIBED') { await channel.track({ user_id: user.id, username: profile?.username || user.email?.split('@')[0] || 'user', online_at: new Date().toISOString() }); } }); return () => { db.removeChannel(channel); setPresentUsers([]); }; }, [user?.id, activeProjectId, profile?.username]); const activeProject = projects.find(p => p.id === activeProjectId) || projects[0]; const statusColor = { ACTIVE: t.accent, REVIEW: "#FFD166", DRAFT: t.textDim }; const handleCreateProject = async () => { if (!newProjectTitle.trim() || !user) return; setCreateError(""); const { data, error } = await db.from('projects').insert({ user_id: user.id, title: newProjectTitle, description: newProjectDesc, status: newProjectStatus.toLowerCase(), created_at: new Date().toISOString(), updated_at: new Date().toISOString(), }).select().single(); if (error) { setCreateError(error.message); return; } setProjects(prev => [data, ...prev]); setNewProjectTitle(""); setNewProjectDesc(""); setNewProjectStatus("DRAFT"); setShowNewProjectForm(false); setActiveProjectId(data.id); }; const handleDeleteProject = async (projId) => { if (deleteConfirm !== projId) { setDeleteConfirm(projId); return; } setDeleteConfirm(null); const { error } = await db.from('projects').delete().eq('id', projId).eq('user_id', user.id); if (!error) { setProjects(prev => { const next = prev.filter(p => p.id !== projId); if (activeProjectId === projId) { setActiveProjectId(next.length > 0 ? next[0].id : null); } return next; }); } }; const handleCopy = () => { navigator.clipboard.writeText("https://vlstudio.app/share/summer-reel-2026"); setCopied(true); setTimeout(() => setCopied(false), 2000); }; // Load tasks when active project changes React.useEffect(() => { if (!activeProjectId) { setTasks([]); return; } setTasksLoading(true); db.from('tasks').select('*').eq('project_id', activeProjectId).order('created_at') .then(({ data, error }) => { setTasksLoading(false); if (error) { setTasksError(error.message); } else { setTasks(data || []); setTasksError(null); } }); }, [activeProjectId]); const handleAddTask = async () => { if (!newTaskTitle.trim() || !activeProjectId) return; const optimistic = { id: Date.now(), title: newTaskTitle, assignee: newTaskAssignee || "@me", deadline: newTaskDeadline, completed: false, created_at: new Date().toISOString() }; setTasks(prev => [optimistic, ...prev]); setNewTaskTitle(""); setNewTaskAssignee(""); setNewTaskDeadline(""); setShowAddTask(false); const { data, error } = await db.from('tasks').insert({ project_id: activeProjectId, title: optimistic.title, assignee: optimistic.assignee, deadline: optimistic.deadline, completed: false, created_at: optimistic.created_at, }).select().single(); if (!error && data) { setTasks(prev => prev.map(tk => tk.id === optimistic.id ? data : tk)); } }; const toggleTask = async (id) => { const task = tasks.find(tk => tk.id === id); if (!task) return; const newCompleted = !task.completed; setTasks(prev => prev.map(tk => tk.id === id ? { ...tk, completed: newCompleted } : tk)); const { error } = await db.from('tasks').update({ completed: newCompleted }).eq('id', id); if (error) { // Roll back on error setTasks(prev => prev.map(tk => tk.id === id ? { ...tk, completed: task.completed } : tk)); } }; React.useEffect(() => { if (kebabOpen === null) return; const close = () => setKebabOpen(null); window.addEventListener("click", close); return () => window.removeEventListener("click", close); }, [kebabOpen]); const inputStyle = { width: "100%", background: "#000", color: t.text, border: `1px solid ${t.panelLine}`, borderRadius: 4, padding: "8px 10px", fontSize: 11, fontFamily: DISPLAY_B, outline: "none", boxSizing: "border-box", letterSpacing: 0.5, }; const outlineBtn = { background: "transparent", color: t.textDim, border: `1px solid ${t.panelLine}`, borderRadius: 3, padding: "5px 10px", fontSize: 11, fontWeight: 700, cursor: "pointer", fontFamily: DISPLAY_B, letterSpacing: 1, textTransform: "uppercase", }; const editorFilename = activeProject ? activeProject.title.toLowerCase().replace(/\s+/g,"_").replace(/[^a-z0-9_]/g,"") + ".mov" : "untitled.mov"; return (
{/* ══════════════ LEFT PANEL ══════════════ */}
{/* Header */}
// PROJECTS
{/* New project form */} {showNewProjectForm && (
Title
setNewProjectTitle(e.target.value)} placeholder="My new project" style={inputStyle} onFocus={e => e.target.style.borderColor = t.accent} onBlur={e => e.target.style.borderColor = t.panelLine} />
Description