Solved UI Overlap

[gaurav05-coder]

Description

This PR fixes the window stacking order issue in the Mac OS themed portfolio where clicking on a window behind another did not bring it to the front. The changes implement centralized state management for window z-index, ensuring that clicked windows move to the highest z-index layer, mimicking macOS Finder behavior.

Key changes:

• Consolidated openWindows and stackOrder into a single windowState object in page.tsx for better state synchronization.
• Added bringWindowToFront function to reorder the stack when a window is focused.
• Modified toggleWindow to update both open state and stack order.
• Updated Window.tsx to accept onFocus and zIndex props, and added onMouseDown handler to the main window div to bring the window to front on any click.
• Updated ResumeWindow.tsx to pass the new props.
• Ensured persistence of window state in localStorage.

Related Issue

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Motivation and Context

The original implementation lacked a mechanism to update z-index on window focus, leading to poor user experience as windows could get stuck behind others. This change ensures proper window management similar to desktop OS behaviors.

How Has This Been Tested?

• Opened multiple windows in the portfolio.
• Verified that clicking anywhere on a background window brings it to the front.
• Confirmed dragging still works and brings windows to front.
• Tested opening/closing windows and persistence via localStorage.
• Checked for no new runtime errors in the browser console.

Test Configuration:

• Browser: Chrome/Firefox
• OS: macOS
• Node.js version: 18+
• Next.js version: 15.1.3

Screenshots (if appropriate):

Checklist:

• I have registered myself at Contrihub website.
• My code follows the code style of this project.
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• Any dependent changes have been merged and published in downstream modules
• I have added tests to cover my changes.
• All new and existing tests passed. (Manual testing completed)

Test Configuration:

• Firmware version:
• Hardware:
• Toolchain:
• SDK:
  Feedback submitted