Add theme presets, gradient backgrounds, and macOS-style window chrome

Replaces the old light/dark toggle with 10 fixed color themes (plus Black & Grey and White) that drive a coordinated gradient palette across the whole admin UI, a Google Fonts picker, and a native-page dark-mode stylesheet that now covers modals and plugin/theme card grids. Fixes several background/gradient seams where the sidebar, toolbar, and content frame were each painting their own independent copy of the page gradient instead of sharing one continuous plane. Also adds a macOS-style traffic-light title bar to every page (close, minimize, maximize) and a persistent bottom taskbar so a minimized page can be restored from anywhere, plus a Plugins management page. Co-Authored-By: Claude Sonnet 5 <[email protected]>
2026-07-03 11:49:15 -05:00
parent db07e21f9e
commit 4a547d2c50
26 changed files with 1816 additions and 223 deletions
@@ -0,0 +1,81 @@
+/**
+ * Adds a macOS-style traffic-light title bar to the top of the page content.
+ * Most pages render inside #wpbody-content (native WP pages and all of
+ * Aurora's own Vue pages, since each mounts its root div there). The
+ * Dashboard is the one exception — DashboardTakeover.php renders it into a
+ * separate #aurora-admin-dashboard-root sibling, above #wpbody (which it
+ * hides), to fully replace the native dashboard, so it gets wrapped in its
+ * own frame to match the card treatment #wpbody-content already has. The
+ * block editor bypasses both (see SiteShell.vue isBlockEditor), so it's
+ * skipped there.
+ *
+ * Red closes (navigates back to the Aurora dashboard). Yellow minimizes —
+ * on any page other than the dashboard, that means "save where I am and
+ * send me home", with SiteShell.vue's taskbar offering a way back; on the
+ * dashboard itself (already home) it just collapses in place instead,
+ * since there's nowhere further back to send it. Green hides Aurora's own
+ * sidebar/toolbar so the content fills the browser window. All of this is
+ * just classes on <html> plus one sessionStorage entry (taskbar.js) — no
+ * server-side state.
+ */
+import { setMinimizedWindow, currentPageTitle } from './taskbar.js';
+
+export function initWindowChrome(adminUrl) {
+  if (document.querySelector('.aurora-winbar')) {
+    return;
+  }
+
+  const bar = document.createElement('div');
+  bar.className = 'aurora-winbar';
+
+  const makeDot = (variant, label, onClick) => {
+    const dot = document.createElement('button');
+    dot.type = 'button';
+    dot.className = 'aurora-winbar__dot aurora-winbar__dot--' + variant;
+    dot.setAttribute('aria-label', label);
+    dot.title = label;
+    dot.addEventListener('click', onClick);
+    return dot;
+  };
+
+  const root = document.documentElement;
+  const dashboardRoot = document.getElementById('aurora-admin-dashboard-root');
+  const isDashboard = !!dashboardRoot;
+
+  bar.appendChild(
+    makeDot('close', 'Close', () => {
+      window.location.href = adminUrl || '/wp-admin/';
+    })
+  );
+  bar.appendChild(
+    makeDot('minimize', 'Minimize', () => {
+      if (isDashboard) {
+        root.classList.toggle('aurora-minimized');
+        root.classList.remove('aurora-maximized');
+      } else {
+        setMinimizedWindow(currentPageTitle(), window.location.href);
+        window.location.href = adminUrl || '/wp-admin/';
+      }
+    })
+  );
+  bar.appendChild(
+    makeDot('maximize', 'Maximize', () => {
+      root.classList.toggle('aurora-maximized');
+      root.classList.remove('aurora-minimized');
+    })
+  );
+
+  if (dashboardRoot) {
+    const frame = document.createElement('div');
+    frame.className = 'aurora-dashboard-frame';
+    dashboardRoot.parentNode.insertBefore(frame, dashboardRoot);
+    frame.appendChild(bar);
+    frame.appendChild(dashboardRoot);
+    return;
+  }
+
+  const wpbodyContent = document.getElementById('wpbody-content');
+  if (wpbodyContent) {
+    wpbodyContent.insertBefore(bar, wpbodyContent.firstChild);
+  }
+}