Skip to content

fix: show open window indicators for bottom dock tiles - #386

Merged
AllTerrainDeveloper merged 2 commits into
WordPress:trunkfrom
Pranjal1423:fix/open-window-indicators-bottom-dock
Jul 22, 2026
Merged

fix: show open window indicators for bottom dock tiles#386
AllTerrainDeveloper merged 2 commits into
WordPress:trunkfrom
Pranjal1423:fix/open-window-indicators-bottom-dock

Conversation

@Pranjal1423

Copy link
Copy Markdown
Contributor

Closes #378

Description

This PR fixes missing open window indicators (active dots, focused pills, and minimized rings) underneath items placed on the bottom dock (such as WooCommerce ,Marketing, or Payments).

Root Causes & Fixes

  1. CSS Clipping:
    • Issue: .desktop-mode-dock__scroll had overflow-y: hidden with 0px bottom padding. Positioned at bottom: -4px, active indicators were rendered outside the scroll wrapper bounds and completely clipped by the browser.
    • Fix: Added padding-bottom: 6px and overflow-y: visible to the scroll and pinned containers in dock.css, and positioned the indicator at bottom: -3px.
  2. URL Parameter Encoding Mismatch:
    • Issue: Encoded plugin routes (like wc-admin&path=%2Fmarketing) slugified to admin-php-page-wc-admin-path-2Fmarketing (with 2F), while the opened window URL slugified to admin-php-page-wc-admin-path-marketing. The resulting base ID mismatch prevented the dock from identifying open windows.
    • Fix: Added decodeURIComponent handling inside slugify() in utils.ts so encoded and unencoded URLs slugify identically.
  3. Window ID Resolution Fallback:
    • Issue: Windows opened via deep links or native remaps had base IDs that didn't strictly match the dock tile URL's derived ID. Additionally, promoted desktop icons (dock: prefix) carried empty URLs, causing base ID resolution to fail.
    • Fix: Updated resolveItemBaseId() in dock.ts to handle promoted desktop icons and added a fallback matcher to updateActiveStates() checking derived URL IDs and tile IDs.

Verification

  • Build: npm run build:desktop built successfully.
  • Typecheck: npm run typecheck passed with no errors.
  • Lint: npm run lint passed with no errors.
  • Unit Tests: npx vitest run tests/vitest/dock-minimized-indicator.test.ts passed 9/9 tests.

Before fix

Screenshot 2026-07-21 at 6 19 21 PM

After fix

Screenshot 2026-07-21 at 6 37 54 PM

@AllTerrainDeveloper AllTerrainDeveloper left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Went through this today. Nice find on the three root causes, and thanks for the before/after shots, they made it easy to verify. I checked out the branch and ran the full vitest suite (2085 tests), all green, which was my main worry since slugify feeds window ids everywhere. Left a few small comments inline, nothing blocking. Thanks for the contribution!

@AllTerrainDeveloper AllTerrainDeveloper left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and works nicely, seems I messed up with the review having other changes applied. I will merge the changes and do separate changes later for adding tests.

Thank you again for the fixes!

Image

@AllTerrainDeveloper
AllTerrainDeveloper merged commit 0034453 into WordPress:trunk Jul 22, 2026
15 checks passed
@AllTerrainDeveloper

Copy link
Copy Markdown
Collaborator

Just a note, that you are already appearing here:
https://next-admin.blog/contribute/

If you have any inconvenience, please tell it to me :)

@Pranjal1423

Copy link
Copy Markdown
Contributor Author

Thank you so much !! :)

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.

Open window indicators for bottom dock items

2 participants