From 303f12e0f9ca969c82614af9a40ac6bad8eb3315 Mon Sep 17 00:00:00 2001 From: ZGaetano Date: Fri, 29 May 2026 00:01:19 +0000 Subject: [PATCH] ui: add Billing admin nav, drop Editor nav, replace Editor tile with Premiere panel download modal - shell.jsx: add Billing item under Admin (routes to the parody pricing page); drop Editor from the Operations section - app.jsx: route 'billing' to TokensParody; remove 'editor' and 'tokens-parody' routes - screens-admin.jsx: rename parody h1 from 'Tokens' to 'Billing'; drop the cross-link from the real Tokens page (no longer needed) - screens-home.jsx: replace the Editor launcher tile with a 'Premiere panel' tile that opens a new PremiereDownloadModal listing every registered release (ZXP + Windows installer) with version + LATEST badge + release date + notes - styles-screens.css: .premiere-release-* row styles for the modal Editor screen + nav button retired; users get the Premiere panel as the recommended editor instead, with all download options in one place from Home. --- services/web-ui/public/app.jsx | 3 +- services/web-ui/public/screens-admin.jsx | 9 +-- services/web-ui/public/screens-home.jsx | 84 +++++++++++++++++++++-- services/web-ui/public/shell.jsx | 11 ++- services/web-ui/public/styles-screens.css | 26 +++++++ 5 files changed, 113 insertions(+), 20 deletions(-) diff --git a/services/web-ui/public/app.jsx b/services/web-ui/public/app.jsx index f713b8b..b49e141 100644 --- a/services/web-ui/public/app.jsx +++ b/services/web-ui/public/app.jsx @@ -113,10 +113,9 @@ function App() { case 'capture': content = ; break; case 'monitors': content = ; break; case 'jobs': content = ; break; - case 'editor': content = ; break; case 'users': content = ; break; case 'tokens': content = ; break; - case 'tokens-parody': content = ; break; + case 'billing': content = ; break; case 'containers':content = ; break; case 'cluster': content = ; break; case 'settings': content = ; break; diff --git a/services/web-ui/public/screens-admin.jsx b/services/web-ui/public/screens-admin.jsx index 055dafe..8a0c0b9 100644 --- a/services/web-ui/public/screens-admin.jsx +++ b/services/web-ui/public/screens-admin.jsx @@ -538,8 +538,8 @@ function GroupsPanel({ groups, users, onChange }) { // Real Tokens admin page: wraps ApiTokensSection (defined further down) in a // .page shell so it can be a top-level admin nav destination. The old parody -// page lives below as TokensParody and is still reachable via the hidden -// `tokens-parody` route for posterity. +// pricing page lives below as TokensParody and is now routed at /billing in +// the Admin section. function Tokens() { return (
@@ -549,9 +549,6 @@ function Tokens() {
); @@ -611,7 +608,7 @@ function TokensParody() { return (
-

Tokens

+

Billing

Token-metered pricing parody · You actually pay $0.00
SATIRE diff --git a/services/web-ui/public/screens-home.jsx b/services/web-ui/public/screens-home.jsx index 56f50eb..bd39b01 100644 --- a/services/web-ui/public/screens-home.jsx +++ b/services/web-ui/public/screens-home.jsx @@ -18,6 +18,8 @@ // Anything that would just say "all clear" is hidden, not rendered. function Home({ navigate }) { + const [showPremiereDownload, setShowPremiereDownload] = React.useState(false); + // Pull live counts so the tile subtitles ("34 assets", "0 live", "3 running") // reflect what's actually in the DB right now, not a stale boot-time cache. const [cards, setCards] = React.useState({}); @@ -62,12 +64,12 @@ function Home({ navigate }) { desc: 'SDI · SRT · RTMP ingest. Start, stop, schedule.', }, { - id: 'editor', - label: 'Editor', + id: '__premiere', + label: 'Premiere panel', icon: 'editor', tone: 'purple', - sub: 'Beta', - desc: 'Timeline editor with cross-clip preview and render queue.', + sub: 'v' + ((window.PREMIERE_LATEST || {}).version || '·'), + desc: 'Download the Adobe Premiere Pro panel for frame-accurate editing.', }, { id: 'jobs', @@ -125,7 +127,7 @@ function Home({ navigate }) {
+ {showPremiereDownload && setShowPremiereDownload(false)} />} +
+ ); +} + +// Modal listing all Premiere panel downloads (ZXP + Windows installer for +// each released version). Sourced from window.PREMIERE_RELEASES, written by +// the Settings → SDKs section in screens-admin.jsx. +function PremiereDownloadModal({ onClose }) { + const releases = (window.PREMIERE_RELEASES || []).slice().sort((a, b) => { + // Newest first; fall back to lexicographic compare on version string. + const av = String(a.version || ''), bv = String(b.version || ''); + return bv.localeCompare(av, undefined, { numeric: true }); + }); + const latest = window.PREMIERE_LATEST || releases[0] || null; + + return ( +
+
e.stopPropagation()} style={{ maxWidth: 560 }}> +
+
+
Premiere panel
+
+ Adobe Premiere Pro integration. Install one ZXP per workstation. +
+
+ +
+ +
+ {releases.length === 0 && ( +
+ No releases registered yet. Upload one from Settings → Capture SDKs. +
+ )} + {releases.map((rel, i) => ( +
+
+ v{rel.version} + {latest && latest.version === rel.version && ( + LATEST + )} + {rel.released_at && ( + + {new Date(rel.released_at).toLocaleDateString()} + + )} +
+ {rel.notes &&
{rel.notes}
} +
+ {rel.zxp && ( + + ZXP + + )} + {rel.installer && ( + + Windows installer + + )} +
+
+ ))} +
+ +
+
+ Need help installing? Use the Adobe Extension Manager or UPIA. +
+ +
+
); } diff --git a/services/web-ui/public/shell.jsx b/services/web-ui/public/shell.jsx index d1fad79..d934e80 100644 --- a/services/web-ui/public/shell.jsx +++ b/services/web-ui/public/shell.jsx @@ -29,7 +29,6 @@ const NAV_SECTIONS = [ items: [ { id: "capture", label: "Capture", icon: "capture" }, { id: "jobs", label: "Jobs", icon: "jobs" }, - { id: "editor", label: "Editor", icon: "editor", badge: { kind: 'neutral', text: 'BETA' } }, ], }, { @@ -37,6 +36,7 @@ const NAV_SECTIONS = [ items: [ { id: "users", label: "Users", icon: "users" }, { id: "tokens", label: "Tokens", icon: "token" }, + { id: "billing", label: "Billing", icon: "token" }, { id: "containers", label: "Containers", icon: "container" }, { id: "cluster", label: "Cluster", icon: "cluster" }, { id: "settings", label: "Settings", icon: "settings" }, @@ -44,12 +44,9 @@ const NAV_SECTIONS = [ }, ]; -// Hidden routes: not in the sidebar but still reachable by direct nav. -// `tokens-parody` is the old satirical pricing page (see issue #152). Real -// API token management lives at /tokens (in the Admin section above). -const NAV_HIDDEN = [ - { id: "tokens-parody", label: "Tokens (parody)", icon: "token" }, -]; +// No hidden routes currently; Billing (the satirical pricing page) lives in +// the Admin section above. Real API token management is at /tokens. +const NAV_HIDDEN = []; // Back-compat: NAV_TREE and ADMIN_TREE were used by other modules. // NAV_FLAT is consumed by topbar search and the keyboard router. diff --git a/services/web-ui/public/styles-screens.css b/services/web-ui/public/styles-screens.css index 9cd1285..5214bb6 100644 --- a/services/web-ui/public/styles-screens.css +++ b/services/web-ui/public/styles-screens.css @@ -1346,3 +1346,29 @@ justify-content: flex-end; } .job-row .job-row-cancel { color: var(--danger); } + +/* Premiere panel download modal (rows for each released version) */ +.premiere-release { + display: flex; flex-direction: column; + gap: 6px; + padding: 12px 0; + border-bottom: 1px solid var(--border); +} +.premiere-release:last-child { border-bottom: 0; } +.premiere-release-head { + display: flex; align-items: center; gap: 8px; +} +.premiere-release-version { + font-size: 13px; font-weight: 600; color: var(--text-1); +} +.premiere-release-date { + font-size: 11px; color: var(--text-3); + margin-left: auto; +} +.premiere-release-notes { + font-size: 12px; color: var(--text-2); line-height: 1.5; +} +.premiere-release-actions { + display: flex; gap: 8px; margin-top: 4px; +} +.premiere-release-actions a { text-decoration: none; }