Skip to content

Dock hover-peek + title-bar menu cleanup + native "Open on startup" - #69

Merged
AllTerrainDeveloper merged 2 commits into
trunkfrom
fix/enhacements_thumbnails_UX_UI_polishment
May 2, 2026
Merged

Dock hover-peek + title-bar menu cleanup + native "Open on startup"#69
AllTerrainDeveloper merged 2 commits into
trunkfrom
fix/enhacements_thumbnails_UX_UI_polishment

Conversation

@AllTerrainDeveloper

@AllTerrainDeveloper AllTerrainDeveloper commented May 2, 2026

Copy link
Copy Markdown
Collaborator

Summary

Replaces the dock's legacy + chip with a hover-reveal peek popover, moves a couple of infrequent title-bar actions into the existing three-dots menu, and makes "Open on startup" actually work for native windows (OS Settings, Recycle Bin, plugin-registered native apps). Adds two extension hooks so plugins can render their own thumbnails inside peek cards. A few small admin-bar polish fixes ride along.

Changes

Dock hover-peek (new)

  • src/dock-peek/ — fan-out popover anchored to a dock tile. Shows when the tile has ≥1 open window.
  • Mini-window cards: faux titlebar (traffic-light dots + page icon + live window title), hash-tinted body. Titlebar background uses --wp-desktop-titlebar-bg-focused so cards inherit the user's WP profile color scheme (the variables are read off .wp-desktop-shell and inlined on the body-attached popover so they cascade correctly).
  • Ghost Card — trailing dashed/breathing card for "open new instance." Click → windowManager.openNew() wrapped in document.startViewTransition() so the card morphs into the new window.
  • Hover-to-raise on instance cards: pointerenter calls windowManager.focus(win) so the live window jumps to front behind the popover (Mission-Control / Aero-Peek feel).
  • Glass material (backdrop-filter: blur(28px) saturate(180%)), capped at min(80vh, 480px) with internal scroll, JS clamp pass to keep the popover inside the viewport.
  • Bottom dock: cards lay out as a horizontal reel (200×116 thumbnails) with X-axis scroll instead of a vertical column.
  • Native windows get the peek too — singletons render a focus card without a Ghost Card. Built-in renderers ship for OS Settings (tinted hero icon + "System Preferences" + tab chips) and Recycle Bin (trash icon + live count + paper-slips stack when full).
  • Replaces the legacy + chip on multi tiles; chip code removed from src/dock.ts.

Title-bar three-dots menu

  • New item: "Open in new window" — opens the current iframe URL as a fresh sibling (distinct from "Open another <Page>" which uses the landing URL).
  • Moved from controls cluster into the menu: "Reload" and "Open in browser tab".
  • Menu now renders for native windows too (with non-iframe-applicable items hidden).

"Open on startup" works for native windows

  • New native:<slug> marker form for the saved preference. PHP validator accepts it (slug constrained to ^[a-z0-9_-]+$); portal redirect falls back to admin_url() when it sees the marker (markers aren't HTTP-redirectable).
  • JS toggle saves native:${win.id} for native windows; boot flow detects the marker and opens the right window after init. Built-in OS Settings is opened via its local closure; plugin-registered native windows go through nativeWindows.openById.
  • "Open on startup" checkbox state now reflects native-marker matches in the menu's refreshStartupCheckState.

Admin-bar polish

  • Ask AI + Switch-to-Desktop icons no longer hardcode #72aee6 blue — they color: inherit and pick up the user's profile color scheme.
  • ⌘K badge re-centered (inline-flex + 1px optical nudge).
  • Fixed PHP fatal: apostrophes inside CSS comments inside $css = '…' were terminating the single-quoted string. Lesson logged in memory.

New hooks (plugin extension points)

Hook Type Signature
wp-desktop.dock.peek-card-content filter (body: HTMLElement, { window, item }) => HTMLElement
wp-desktop.dock.peek-card-element filter (card: HTMLElement, { window, item }) => HTMLElement

peek-card-content swaps just the card body (default mini-window chrome stays). peek-card-element replaces the whole card — plugin owns chrome and click wiring; the wp-desktop-dock-peek__card class must be preserved (the fan-out animation keys off it).

window.wp.hooks.addFilter(
    'wp-desktop.dock.peek-card-content',
    'my-plugin/thumbnail',
    ( body, { window: win } ) => {
        const img = document.createElement( 'img' );
        img.src = `/wp-json/my-plugin/v1/thumbnail/${ win.id }`;
        img.alt = win.config.title;
        return img;
    }
);

Test plan

  • Hover the Posts dock icon with multiple Posts windows open — fan-out reel + Ghost Card appear; instance cards hover-raise the matching window; click morphs the card into focus.
  • Hover the OS Settings / Recycle Bin tile when open — bespoke thumbnail renderer (gear / trash + count) shows.
  • Hover Plugins / Appearance / Tools / Settings (singletons) when open — single focus card, no Ghost Card.
  • Move the dock to bottom — peek opens above the icon as a horizontal reel.
  • In a window's three-dots menu: Reload, Open in browser tab, Open in new window all work; native windows show the menu with only the relevant items.
  • Mark OS Settings as "Open on startup" → reload from the portal → OS Settings auto-opens.
  • Switch admin profile color scheme to Midnight / Coffee / Modern → card titlebars + admin-bar Ask AI / Switch icons match the scheme.
  • prefers-reduced-motion: no card animations, no breathing pulse, no spring magnify.
  • PHPUnit: desktop_mode_validate_default_window_url accepts native:<slug>, rejects native:, native:foo bar, native:foo/bar, native:../etc/passwd.

Files

src/dock-peek/index.ts                                   (new)
src/dock-peek/built-in-renderers.ts                      (new)
assets/css/dock-peek.css                                 (new)
src/dock.ts                                              (peek wiring + chip removal)
src/desktop.ts                                           (boot-flow native default + renderer bootstrap)
src/window/dom.ts                                        (menu item additions, native-window menu unlock)
src/window/index.ts                                      (menu click handlers)
src/window/menus.ts                                      (native-marker check)
src/window-chrome/controls/built-ins.ts                  (removed core/detach + core/reload)
src/hooks.ts                                             (DOCK_PEEK_CARD_CONTENT, DOCK_PEEK_CARD_ELEMENT)
includes/default-window.php                              (native: validator)
includes/portal.php                                      (native: redirect fallback)
includes/admin-bar.php                                   (icon color + ⌘K alignment + apostrophe fix)
includes/assets.php, includes/render.php                 (enqueue dock-peek.css)
docs/javascript-reference.md                             (peek + filters documented)
docs/hooks-reference.md                                  (multi flag wording updated)
tests/vitest/dock-peek.test.ts                           (new — 12 cases)
tests/vitest/window-submenu.test.ts                      (Open in new window cases)
tests/vitest/window-chrome-controls-render.test.ts       (cluster size 6→4)
tests/phpunit/tests/wpDesktopDefaultWindow.php           (3 native: cases)
Open WordPress Playground Preview

…gs and Recycle Bin

- Add built-in renderers for the OS Settings and Recycle Bin windows in the dock peek feature.
- Create custom HTML structures for each renderer to enhance visual identity and state representation.
- Introduce a mechanism to register built-in renderers and ensure third-party plugins can customize peek card content.
- Implement tests to validate the functionality of the dock peek feature, including rendering conditions and interaction behaviors.
@AllTerrainDeveloper
AllTerrainDeveloper enabled auto-merge (squash) May 2, 2026 14:04
Resolves the desktop.ts import conflict between bug-report (trunk) and
the dock-peek built-in renderers (this branch).

Also dequeues wp-desktop-dock-peek between admin-bar tests so its
transitive wp-desktop-dock dependency doesn't make the chromeless
enqueue assertion flake.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@AllTerrainDeveloper
AllTerrainDeveloper merged commit 80a04e4 into trunk May 2, 2026
7 checks passed
@AllTerrainDeveloper
AllTerrainDeveloper deleted the fix/enhacements_thumbnails_UX_UI_polishment branch May 2, 2026 21:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant