diff --git a/PROJECT_STATUS.md b/PROJECT_STATUS.md index 1382a20..6cbaf22 100644 --- a/PROJECT_STATUS.md +++ b/PROJECT_STATUS.md @@ -1,6 +1,6 @@ # Aurora Admin v2 — Project Status -_Last updated: 2026-07-03_ +_Last updated: 2026-07-03 (evening session — theme system rebuild + window chrome)_ ## What this project is @@ -34,20 +34,29 @@ get back up to speed instead of relying on prior chat history. Chrome MCP tools (`tabs_context_mcp`, `navigate`, `computer`/screenshot, `javascript_exec`) to inspect real DOM/computed styles rather than guessing from source. -- **Zip packaging**: Windows `Compress-Archive` corrupts the WP upload - (backslash path separators break PHP's unzip). Always build the zip via - PowerShell `System.IO.Compression.ZipFile`, normalizing every entry path - with `.Replace('\', '/')`. Full sequence used every time: - 1. `npm run build` in `app/` - 2. `robocopy` the whole `aurora-admin-v2/` tree into - `aurora-admin-v2-dist/aurora-admin/` with `/MIR /XD node_modules .git` - (exit code 3 = success, not an error) - 3. Rebuild `aurora-admin-v2-dist/aurora-admin-v2.zip` via the - `System.IO.Compression.ZipFile` PowerShell snippet (see any recent - commit's session for the exact script) - 4. User manually reinstalls the zip into WordPress — **the Chrome MCP - `file_upload` tool cannot push arbitrary local files into the browser**, - confirmed this session, so this step can't be automated. +- **Zip packaging**: on macOS, build via `npm run build` in `app/`, `rsync` + the repo (excluding `node_modules`, `.git`, `/dist`) into a scratch staging + dir, then `zip -r -X` it into `dist/aurora-admin-v2.zip` — macOS `zip` + produces forward-slash paths natively, no path-separator corruption issue + like Windows `Compress-Archive`/PowerShell had. **Always delete the + existing zip first** (`rm -f dist/aurora-admin-v2.zip`) — `zip -r` merges + into an existing archive rather than replacing it, so stale entries (old + content hashes) silently survive otherwise. If building on Windows again, + the old PowerShell `System.IO.Compression.ZipFile` + `.Replace('\', '/')` + approach from earlier sessions still applies. +- **Fast local iteration**: the test site is LocalWP at + `/Users/kris/Local Sites/aurora/app/public/wp-content/plugins/aurora-admin`. + Instead of rezipping + manually reinstalling for every small CSS/JS tweak, + hot-patch the built files straight into that install + (`rm -rf app/dist && cp -R /app/dist app/dist`, or copy individual + files like `admin/assets/native-dark.css`) and just reload the page in + Chrome — near-instant feedback loop. Rezip properly (see above) once the + change is confirmed, so the zip artifact matches what's live-verified. +- User manually reinstalls the zip from a downloaded/attached copy when + actually deploying — **the Chrome MCP `file_upload` tool cannot push + arbitrary local files into the browser**, confirmed in an earlier session, + so that step can't be automated. (Hot-patching, above, sidesteps this for + local dev/verification.) - **Old build caching gotcha**: WordPress serves whatever plugin files were last installed — if the user says "didn't fix it," suspect a stale zip still installed before suspecting the code. Verify the live script hash via @@ -93,17 +102,68 @@ get back up to speed instead of relying on prior chat history. - `UserMenu.vue`: floating card that expands **upward** from a bottom-left trigger (avatar+name+chevron). Card contains: user header (avatar/name/ email), links (Edit Profile → `profile.php`, Visit site, Site Settings → - `options-general.php`, Sign Out in red), and a 3-way theme control. - - Theme is a **3-state model**: `'light' | 'dark' | 'system'`, stored as - that string in `settings.dark_mode` (old `'on'`/`'off'` values are - migrated on read via `normalizeStoredTheme()` in `SiteShell.vue`). - `system` tracks `matchMedia('(prefers-color-scheme: dark)')` live via a - change listener. The theme control renders as 3 actual color swatches - (white / near-black / diagonal split for light/dark/system) — **not** - icons; an earlier icon-based version (sun/moon/gear) was explicitly - replaced after user feedback that the gear "did nothing" visually. + `options-general.php`, Sign Out in red). No theme control here anymore — + see "Theme system" below; the old light/dark/system 3-way swatch picker + and the `dark_mode` setting it drove are both gone entirely. - Old top-right toolbar user-dropdown and sun/moon toggle button are **removed** — fully replaced by the bottom-left `UserMenu`. + - Sidebar is **inset**, not flush against the browser edge: fixed at + `top/left/bottom: var(--aurora-sidebar-gap)` (16px), fully rounded + corners, `background: var(--aurora-card-bg)` — floats as its own card + over the page gradient. `--aurora-sidebar-gap` is a shared CSS var + (`shell-frame.css`) that the toolbar's `left` offset and `#wpcontent`'s + `margin-left` both add too, so nothing overlaps when the gap changes. + +## Theme system (rewrite — supersedes the old dark_mode 3-state model) + +Went through several rounds of user-directed rework this session, landing on: +**10 fixed, named color presets + 2 flat neutrals ("Black & Grey", "White") +— no custom color picker, no separate light/dark toggle.** Each preset is +fully self-contained (its own coordinated backgrounds/cards/borders/text), +not a hue applied on top of a shared light/dark base. + +- `app/src/pages/settings/themePresets.js`: `themePresets` array (10 hue-based + presets like `{ id: 'indigo', label: 'Indigo', hue: 235 }`, plus `mono` and + `white` with an explicit `palette` object instead of a hue). `buildPalette(preset)` + returns all `--aurora-*` tokens — for hue presets, computed via HSL ramps; + for the two flat presets, returned as-is. `resolvePreset(id)` looks up by id. +- The main app background (`--aurora-app-bg`) is a **3-stop gradient**, not + flat: `linear-gradient(135deg, vivid1 0%, vivid2 55%, near-black 100%)` — + two bright, saturated stops of the same hue family carry most of the bar, + dipping to a near-black anchor only in the last stretch. This exact ratio + went through several corrections against a competing plugin's ("FleekDash") + reference screenshots — a 50/50 dark-to-vivid split reads "washed out", two + competing saturated hues ~70° apart reads "muddy"; this formula was the one + the user confirmed as clean. If revisiting the gradient formula, re-check + against those reference screenshots in the conversation history rather than + re-deriving from scratch. +- `--aurora-card-bg-deep`: a newer token, one step darker than + `--aurora-card-bg`, used only by the Dashboard's `AuroraCard.vue`. Needed + because the Dashboard got its own frame background using `--aurora-frame-bg` + (see "Window chrome" below), which is close in lightness to `--aurora-card-bg` + for most presets — cards would nearly disappear into the new frame without it. +- `applyThemePalette(themePresetId)` / `applyFontFamily(family)` + (`app/src/pages/settings/applyLiveTheme.js`) — shared between the settings + page's live preview (`Settings.vue`'s `watch()`) and the real per-page-load + application (`SiteShell.vue::onMounted`). Sets each token via + `document.documentElement.style.setProperty`. +- Google Fonts picker: `app/src/pages/settings/googleFonts.js` (curated ~70 + family list, not the full catalog), searchable dropdown in + `SettingsField.vue`'s `font-picker` field type, applied by injecting a + Google Fonts CSS2 `` tag + setting `--aurora-font-family`. +- **Recurring bug class this session — "independently-painted gradient"**: + several elements (sidebar, toolbar, `#wpbody-content` on the settings page, + `#wpbody-content` in general) each used to paint their *own* copy of + `var(--aurora-app-bg)`. Since it's a gradient, each element computes it + independently over *its own* bounding box — a narrow tall sidebar and a + wide short toolbar get visibly different-looking slices of "the same" + gradient, creating seams at their shared edges. Fixed by making `html`/`body` + the *only* thing that paints the gradient (`background-attachment: fixed` + so it doesn't scroll away from the fixed sidebar/toolbar), and leaving + every other element transparent so that one gradient plane shows through. + **If a new seam/mismatched-rectangle bug shows up, suspect this pattern + first** — grep for `var(--aurora-app-bg)` outside `shell-frame.css`'s + `html.aurora-ready, html.aurora-ready body` rule; it shouldn't be there. - **Dashboard takeover** (`admin/src/Pages/DashboardTakeover.php` + `app/src/pages/dashboard/Dashboard.vue`): hijacks native `index.php` via `in_admin_header`, hides the native `.wrap`, renders the Aurora dashboard @@ -157,6 +217,16 @@ get back up to speed instead of relying on prior chat history. `deactivated_plugin`, `switch_theme`, `update_option_aurora_admin_settings`. REST: `GET /activity-log?action_type=&object_type=&search=&page=`. + - **Plugins** (`admin/src/Rest/PluginsData.php` + `app/src/pages/plugins/Plugins.vue`): + custom plugin management list (activate/deactivate/delete), also using + `AppListShell.vue`. **Known bug, unresolved**: unlike the other sub-apps, + Menu Creator/Activity Log/Role Editor currently throw WordPress's native + "Sorry, you are not allowed to access this page" for the logged-in admin + user when navigated to directly, while Settings/Plugins/Dashboard work + fine — likely a capability-check mismatch in how those three register + their submenu pages vs. the working ones. Not yet root-caused; a + background investigation task was spawned for it but not completed this + session — check for it before re-investigating from scratch. - **Database Explorer** (`admin/src/DatabaseExplorer/`): no custom table — reads real `$wpdb` schema. `GET /db-tables` (SHOW TABLE STATUS), `GET /db-tables/:table` (columns + paginated rows — table name validated @@ -197,7 +267,67 @@ get back up to speed instead of relying on prior chat history. `#wpbody-content`) + `admin/assets/native-enhance.js` (progressive JS enhancement — currently only `enhanceUpdates()`, which groups the flat Updates page sections into `.aurora-native-card` wrapper divs on - `body.update-core-php`). + `body.update-core-php`). This session also extended coverage to media/ + thickbox modals, plugin/theme card grids, and the plugin-search filter bar + (all previously untouched, so still native white regardless of theme). + Known gap: the plugin "More Details" popup renders inside an `