[WIP] Add iPhone-style theme for npwd phone UI

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Create a new branch named feature/iphone-theme and add an iPhone-style theme for the npwd phone UI while preserving all existing npwd NUI events, callbacks, and JavaScript logic. The goal is to replace the visual presentation only, without removing or renaming any event names or server-side hooks used by npwd. The change should be safe to merge: original files are backed up, and the theme leverages the existing JS handlers where possible.

Tasks (actionable and detailed):

1. Create a branch feature/iphone-theme from default branch (detect default if needed).
2. Backup the current html directory: move existing html/ to html/_html_backup_before_iphone_theme/ (preserve file timestamps if possible) so the repo retains the original UI.
3. Add new html/ index.html, css/, js/, img/ to implement the iPhone-style design. The new index.html must:
   • Keep the same NUI entry points and element IDs/classes that npwd uses for its event handling (do not rename or remove top-level NUI callback hooks). If the agent cannot be certain which IDs npwd expects, wrap the original index.html contents inside a new wrapper (e.g.,
     ...
     ) and add the iphone frame around it, and include the original scripts unchanged so all existing handlers continue to work.
   • Add minimal script that forwards existing SendNUIMessage events to the new iPhone visuals (for example, listen for window.message events and map action:'open'/'close' to show/hide the iPhone frame). This script must not change event names or server callbacks.
   • Ensure any fetch POST endpoints used by existing NUI callbacks remain present (e.g., any fetch calls to https://resourceName/...). If needed, include short wrapper endpoints that call into the original handlers.
4. Add html/css/iphone-theme.css with styles to mimic iPhone appearance (rounded frame, notch, home indicator, app grid). Keep file size reasonable and use modern CSS only.
5. Add html/js/iphone-theme.js that handles the UI-only interactions (app grid, showing notifications, simple call prompt). This file must not overwrite or remove existing global functions that the npwd JS uses. It should instead register its own namespace (e.g., window.IPhoneTheme) and hook onto window.addEventListener('message', ...) to react to existing SendNUIMessage calls.
6. Include optimized icon images in html/img/ for the theme and reference them. Use placeholder SVG/PNG files (small, license-free) and add them to the commit.
7. Update fxmanifest.lua if necessary to ensure the repo's ui_page still points to html/index.html and all new files are included in the files list. Do not remove any existing dependencies.
8. Add a short README update at html/README-iphone-theme.md explaining: how to switch between original UI and iPhone theme, how to revert (restore backup folder), and notes about keeping event names unchanged.
9. Run quick sanity checks in the patch: ensure index.html references all included CSS/JS files with correct relative paths, ensure fxmanifest lists them, and ensure there are no syntax errors introduced.

Safety notes for the agent: do not change any server-side event names or server Lua code. The agent should avoid restructuring server/client data flows: only change front-end files and add wrappers. The priority is preserving npwd behavior and keeping the patch minimal.

Deliverables: create a pull request on project-error/npwd with the branch feature/iphone-theme, include a concise PR description summarizing the changes and why they are safe. Attach the new/modified files in the PR.

If the agent cannot determine the exact default branch, use main.

If any assumptions are required (for example exact element IDs in the original index.html), state them in the PR description and keep the changes conservative (use wrapper approach).

This pull request was created as a result of the following prompt from Copilot chat.

Create a new branch named feature/iphone-theme and add an iPhone-style theme for the npwd phone UI while preserving all existing npwd NUI events, callbacks, and JavaScript logic. The goal is to replace the visual presentation only, without removing or renaming any event names or server-side hooks used by npwd. The change should be safe to merge: original files are backed up, and the theme leverages the existing JS handlers where possible.

Tasks (actionable and detailed):

1. Create a branch feature/iphone-theme from default branch (detect default if needed).
2. Backup the current html directory: move existing html/ to html/_html_backup_before_iphone_theme/ (preserve file timestamps if possible) so the repo retains the original UI.
3. Add new html/ index.html, css/, js/, img/ to implement the iPhone-style design. The new index.html must:
   • Keep the same NUI entry points and element IDs/classes that npwd uses for its event handling (do not rename or remove top-level NUI callback hooks). If the agent cannot be certain which IDs npwd expects, wrap the original index.html contents inside a new wrapper (e.g.,
     ...
     ) and add the iphone frame around it, and include the original scripts unchanged so all existing handlers continue to work.
   • Add minimal script that forwards existing SendNUIMessage events to the new iPhone visuals (for example, listen for window.message events and map action:'open'/'close' to show/hide the iPhone frame). This script must not change event names or server callbacks.
   • Ensure any fetch POST endpoints used by existing NUI callbacks remain present (e.g., any fetch calls to https://resourceName/...). If needed, include short wrapper endpoints that call into the original handlers.
4. Add html/css/iphone-theme.css with styles to mimic iPhone appearance (rounded frame, notch, home indicator, app grid). Keep file size reasonable and use modern CSS only.
5. Add html/js/iphone-theme.js that handles the UI-only interactions (app grid, showing notifications, simple call prompt). This file must not overwrite or remove existing global functions that the npwd JS uses. It should instead register its own namespace (e.g., window.IPhoneTheme) and hook onto window.addEventListener('message', ...) to react to existing SendNUIMessage calls.
6. Include optimized icon images in html/img/ for the theme and reference them. Use placeholder SVG/PNG files (small, license-free) and add them to the commit.
7. Update fxmanifest.lua if necessary to ensure the repo's ui_page still points to html/index.html and all new files are included in the files list. Do not remove any existing dependencies.
8. Add a short README update at html/README-iphone-theme.md explaining: how to switch between original UI and iPhone theme, how to revert (restore backup folder), and notes about keeping event names unchanged.
9. Run quick sanity checks in the patch: ensure index.html references all included CSS/JS files with correct relative paths, ensure fxmanifest lists them, and ensure there are no syntax errors introduced.

Safety notes for the agent: do not change any server-side event names or server Lua code. The agent should avoid restructuring server/client data flows: only change front-end files and add wrappers. The priority is preserving npwd behavior and keeping the patch minimal.

Deliverables: create a pull request on project-error/npwd with the branch feature/iphone-theme, include a concise PR description summarizing the changes and why they are safe. Attach the new/modified files in the PR.

If the agent cannot determine the exact default branch, use main.

If any assumptions are required (for example exact element IDs in the original index.html), state them in the PR description and keep the changes conservative (use wrapper approach).

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.