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]>

app/src/shell/components/Sidebar.vue

@@ -19,10 +19,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  isDark: {
-    type: Boolean,
-    default: false,
-  },
   collapsed: {
     type: Boolean,
     default: false,
@@ -35,19 +31,13 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  theme: {
-    type: String,
-    default: 'system',
-  },
 });
 
-const emit = defineEmits(['set-theme']);
-
-// Custom logo from Settings > General. Dark mode prefers the dark variant
-// and falls back to the standard logo; no logo set = "Aurora" wordmark.
-const activeLogo = computed(() =>
-  props.isDark ? props.darkLogo || props.logo : props.logo
-);
+// Custom logo from Settings > General. Every theme preset is a dark-toned
+// palette now (no separate light mode), so the dark-variant logo is always
+// preferred when set; falls back to the standard logo, or the "Aurora"
+// wordmark if neither is set.
+const activeLogo = computed(() => props.darkLogo || props.logo);
 
 // Normalize any admin URL down to the part after /wp-admin/ so we can
 // compare the current page against menu targets regardless of host/scheme.
@@ -209,8 +199,6 @@ const isAuroraActive = (item) => normalize(item.url) === current.value;
     <UserMenu
       :server-data="serverData"
       :collapsed="collapsed"
-      :theme="theme"
-      @set-theme="(t) => emit('set-theme', t)"
     />
   </nav>
 </template>
@@ -218,11 +206,18 @@ const isAuroraActive = (item) => normalize(item.url) === current.value;
 <style scoped>
 .sidebar {
   position: fixed;
-  top: 0;
-  left: 0;
+  top: var(--aurora-sidebar-gap);
+  left: var(--aurora-sidebar-gap);
+  bottom: var(--aurora-sidebar-gap);
   width: var(--aurora-sidebar-w);
-  height: 100vh;
-  background: var(--aurora-app-bg);
+  height: auto;
+  /* Same surface treatment as the dashboard cards (AuroraCard.vue) —
+     solid card background + rounded corners, floating over the page
+     gradient with a gap on every side now that it's inset instead of
+     flush against the viewport edges. */
+  background: var(--aurora-card-bg);
+  border: 1px solid var(--aurora-card-border);
+  border-radius: 20px;
   transition: width 0.2s ease;
   z-index: 99999;
   box-sizing: border-box;