// Projects landing page — list view with favourites, archive, and 30-day trash. // Uses design-system tokens from /styles.css (table-wrap, table, tbl-row, btn, seg). // // Storage helpers (loadProjectsIndex, saveProjectsIndex, createProject, // updateProjectMeta, trashProject, restoreProject, deleteProjectStorage, // purgeExpiredDeleted, projectKey) are defined in storage.jsx and live on window. const { useState: useStateP, useEffect: useEffectP } = React; function fmtRelative(ts) { if (!ts) return ''; const diff = Date.now() - ts; const sec = Math.floor(diff / 1000); if (sec < 60) return 'just now'; const min = Math.floor(sec / 60); if (min < 60) return `${min}m ago`; const hr = Math.floor(min / 60); if (hr < 24) return `${hr}h ago`; const day = Math.floor(hr / 24); if (day < 7) return `${day}d ago`; if (day < 30) return `${Math.floor(day / 7)}w ago`; return new Date(ts).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }); } function fmtTrashCountdown(deletedAt) { const remaining = window.TRASH_TTL_MS - (Date.now() - deletedAt); if (remaining <= 0) return { label: 'expiring…', level: 'danger' }; const days = Math.ceil(remaining / (24 * 60 * 60 * 1000)); let level = 'ok'; if (days <= 3) level = 'danger'; else if (days <= 7) level = 'urgent'; return { label: `in ${days} day${days === 1 ? '' : 's'}`, level }; } function ProjectsPage() { const [theme, setTheme] = useStateP(() => localStorage.getItem('pp-theme') || 'dark'); const [filter, setFilter] = useStateP('all'); // 'all' | 'favourites' | 'archived' | 'deleted' const [all, setAll] = useStateP(() => window.loadProjectsIndex() || []); const [renamingId, setRenamingId] = useStateP(null); // Entitlement (defaults to Solo if billing.jsx hasn't loaded, so we never // wrongly block when the plan is simply unknown). const ent = (typeof window.useEntitlement === 'function') ? window.useEntitlement() : { solo: true, plan: 'solo' }; const FREE_STORYBOARD_LIMIT = 5; // Apply theme to useEffectP(() => { document.documentElement.dataset.theme = theme; localStorage.setItem('pp-theme', theme); }, [theme]); // Refresh index from storage (called after every mutation) const refresh = () => setAll(window.loadProjectsIndex() || []); // The background cloud reconcile (root.jsx) fires this once it has merged // server rows into localStorage — re-read so freshly-pulled projects show // up without a manual refresh. useEffectP(() => { const onUpdated = () => setAll(window.loadProjectsIndex() || []); window.addEventListener('pp-projects-updated', onUpdated); return () => window.removeEventListener('pp-projects-updated', onUpdated); }, []); // ──────────────── Derived data ──────────────── const active = all.filter(p => !p.deletedAt); const totalShots = active.reduce((n, p) => n + (p.shotCount || 0), 0); const counts = { all: active.filter(p => !p.archived).length, favourites: active.filter(p => p.favourite && !p.archived).length, archived: active.filter(p => p.archived).length, deleted: all.filter(p => p.deletedAt).length, }; // Free plan: only non-deleted storyboards count toward the limit (binned ones // don't, and can't be opened — delete to free a slot). const overStoryboardLimit = !ent.solo && active.length >= FREE_STORYBOARD_LIMIT; let list; if (filter === 'favourites') list = active.filter(p => p.favourite && !p.archived); else if (filter === 'archived') list = active.filter(p => p.archived); else if (filter === 'deleted') list = all.filter(p => p.deletedAt); else list = active.filter(p => !p.archived); list = [...list].sort((a, b) => { if (filter === 'all' && a.favourite !== b.favourite) return a.favourite ? -1 : 1; if (filter === 'deleted') return (b.deletedAt || 0) - (a.deletedAt || 0); return (b.updatedAt || 0) - (a.updatedAt || 0); }); // ──────────────── Actions ──────────────── const onNew = () => { if (overStoryboardLimit) { if (window.ppOpenUpgrade) window.ppOpenUpgrade(`You've reached the Free limit of ${FREE_STORYBOARD_LIMIT} storyboards. Upgrade to Solo for unlimited — or delete one to free a slot.`); return; } const id = window.createProject('Untitled Shot List'); // `new=1` tells the editor this is a fresh project so it can pop the // Project Details modal immediately and prompt for metadata. location.href = `${location.pathname}?id=${encodeURIComponent(id)}&new=1`; }; const onOpen = (p) => { if (p.deletedAt) return; location.href = `${location.pathname}?id=${encodeURIComponent(p.id)}`; }; const onToggleFav = (p) => { const idx = window.loadProjectsIndex() || []; const e = idx.find(x => x.id === p.id); if (e) { e.favourite = !e.favourite; window.saveProjectsIndex(idx); refresh(); } }; const onToggleArchive = (p) => { const idx = window.loadProjectsIndex() || []; const e = idx.find(x => x.id === p.id); if (e) { e.archived = !e.archived; window.saveProjectsIndex(idx); refresh(); } }; const onTrash = (p) => { window.trashProject(p.id); refresh(); }; const onRestore = (p) => { window.restoreProject(p.id); refresh(); }; const onPurge = (p) => { if (!confirm(`Delete "${p.title || 'Untitled'}" forever? This cannot be undone.`)) return; window.deleteProjectStorage(p.id); refresh(); }; const onCommitRename = (p, newTitle) => { const title = (newTitle || '').trim() || 'Untitled'; window.updateProjectMeta(p.id, { title }); // Also patch the per-project state if it exists, so the editor matches. try { const raw = localStorage.getItem(window.projectKey(p.id)); if (raw) { const data = JSON.parse(raw); if (data.project) data.project.title = title; else data.title = title; localStorage.setItem(window.projectKey(p.id), JSON.stringify(data)); } } catch (e) {} setRenamingId(null); refresh(); }; // ──────────────── Render ──────────────── return (

Library

Projects

{all.length > 0 && (

{active.length} project{active.length === 1 ? '' : 's'} · {totalShots} shot{totalShots === 1 ? '' : 's'} total

)}

{!ent.solo && ( {active.length} / {FREE_STORYBOARD_LIMIT} )}

{overStoryboardLimit && (

You're at the Free limit of {FREE_STORYBOARD_LIMIT} storyboards. Upgrade to Solo for unlimited — or delete one to free a slot.

)}

{all.length === 0 ? (

No projects yet

Create your first shot list to get started.

) : list.length === 0 ? (

No projects match this filter.

) : (

{list.map(p => ( setRenamingId(p.id)} onCommitRename={onCommitRename} onCancelRename={() => setRenamingId(null)} /> ))}

	Name	{filter === 'deleted' ? 'Expires' : 'Modified'}	Shots

)}

); } function ProjectRow({ project: p, isTrashed, renaming, onOpen, onToggleFav, onToggleArchive, onTrash, onRestore, onPurge, onStartRename, onCommitRename, onCancelRename }) { const cls = [ 'tbl-row', isTrashed ? 'is-trashed' : '', p.archived ? 'is-archived' : '', ].filter(Boolean).join(' '); const onRowClick = (e) => { if (renaming) return; if (e.target.closest('button, input')) return; onOpen(p); }; return ( {isTrashed ? ( ) : ( )} {renaming ? ( { if (e.key === 'Enter') { e.preventDefault(); onCommitRename(p, e.target.value); } if (e.key === 'Escape') { e.preventDefault(); onCancelRename(); } }} onBlur={(e) => onCommitRename(p, e.target.value)} onClick={(e) => e.stopPropagation()} /> ) : ( {p.title || 'Untitled'} )} {isTrashed ? (() => { const cd = fmtTrashCountdown(p.deletedAt); const color = cd.level === 'danger' ? '#f87171' : cd.level === 'urgent' ? 'var(--status-review)' : 'var(--text-3)'; return Auto-deletes {cd.label}; })() : fmtRelative(p.updatedAt || p.createdAt)} {p.shotCount || 0} e.stopPropagation()}>

{isTrashed ? ( <> ) : ( <> )}

); } // IconArchive is page-specific — not defined in icons.jsx const IconArchive = (props) => ( ); window.ProjectsPage = ProjectsPage;