Add modern NUI inventory UI with red/blue glassmorphism theme

[Copilot]

Adds an optional modern NUI inventory interface with glassmorphism styling, body silhouette health display, and drag-drop support while preserving existing ox_inventory backend compatibility.

New Files

• web/ui.html - NUI entrypoint with equipment slots, 8x3 inventory grid, body silhouette, and conditional backpack panel
• web/style.css - Glassmorphism styling with red/blue accents, performance fallback for backdrop-filter
• web/script.js - NUI logic: message receiver, drag-drop, tooltips, hotkey bindings (1-5)
• client/ox_nui_integration.lua - Client glue with NUI callbacks and key mappings
• server/README.update_item_meta.md - Server event documentation for moveItem, useHotkey, updateItemMeta
• web/preview_inventory_red_blue_fixed.svg - Visual mockup

fxmanifest.lua Changes

New files added to files block. Custom NUI disabled by default:

-- Custom NUI integration (optional - enable by adding to client_scripts)
-- client_script 'client/ox_nui_integration.lua'

-- Alternative custom NUI (uncomment to use instead of default)
-- ui_page 'web/ui.html'

Enabling the Custom NUI

1. Uncomment client_script 'client/ox_nui_integration.lua'
2. Uncomment ui_page 'web/ui.html' and comment out the default
3. Implement server events documented in server/README.update_item_meta.md

Original prompt

Summary

Add a modern NUI (HTML/CSS/JS) inventory UI to the repository and minimal client integration glue so the resource can optionally use the new UI while keeping existing ox_inventory backend logic intact.

Design references

Include the example images the user provided to match the visual style (body silhouette + limb bars, glass/transparent panels, red & blue accents):

• 
• 
• 

Goals / Acceptance criteria

• Add a new web/ UI (NUI) that implements the modern, semi-transparent red & blue themed inventory UI with:

  • A main pockets grid (8x3 default) for the main inventory
  • A separate backpack panel that appears when an equipped backpack provides extra slots
  • A center body silhouette with limb health bars (head/leftArm/rightArm/body/leftLeg/rightLeg) driven by incoming payload
  • Equipment slots (backpack, parachute, armor, weapon1, weapon2) and hotkey slots (3,4,5) with labels and visual state
  • Top-mode toggle Inventory/Utility, weight display, and Close button
  • Drag & drop support within the UI which posts a dragDrop payload to the client (client will forward to server)
  • Tooltips and item hover details
  • Hotkey bindings: 1 & 2 mapped to weapon slots, 3/4/5 to extra hotkeys (instant use). The client integration registers these key mappings.

• Add a client integration file (client/ox_nui_integration.lua) that:

  • Intercepts an inventory open event (example: 'ox_inventory:openInventory') and, when configured, builds a normalized payload and opens the new NUI (SendNUIMessage + SetNuiFocus)
  • Listens for NUI callbacks (nuiClose, dragDrop, useItem) and forwards actions to the server via existing or new server events (ox_inventory:moveItem, ox_inventory:updateItemMeta, ox_inventory:useHotkey). The server-side implementation should validate moves.
  • Registers KeyMappings for keys 1..5 to trigger hotkey events to the server (TriggerServerEvent('ox_inventory:useHotkey', slotName))
  • Exposes an event to update the NUI when inventory changes

• Update fxmanifest.lua file entries so the UI files are included and ui_page is set to web/ui.html. Do not remove existing fxmanifest content; append the web files and ui_page entries.

• Add a small server-side README (server/README.update_item_meta.md) that documents the expected server event ox_inventory:updateItemMeta and ox_inventory:moveItem for persisting backpack metadata and forwarding drag/drop moves.

Files to create

1. web/ui.html — the NUI HTML entrypoint (modern red & blue UI)
2. web/style.css — CSS implementing glassmorphism and red/blue accents
3. web/script.js — NUI logic: message receiver, render, drag/drop, tooltips, preview helper
4. client/ox_nui_integration.lua — client glue shown in problem description
5. server/README.update_item_meta.md — instructions/example server event to store backpack meta
6. web/preview_inventory_red_blue_fixed.svg — preview image (fixed XML escaping) to show the mockup

Implementation details (what the PR must do)

• Add the files above with the contents previously produced by the assistant (HTML/CSS/JS/Lua/Markdown/SVG). Use the modern NUI prototype code and the client integration code that was provided in the chat.
• Modify fxmanifest.lua in the repo root to ensure the files are listed in the files block and ui_page 'web/ui.html' is set. If there is already a files list and ui_page present, append missing file names and ensure duplicates are avoided.
• Do not remove or modify existing server logic; the PR will only add new files and small client glue, and append the fxmanifest entries. Any server event implementations should be described in server/README.update_item_meta.md — do not implement DB logic in this PR.

Testing guidance (for the PR description)

• After merging, the developer should:
  1. Copy the web/ files into the resource and ensure fxmanifest.lua includes ui_page 'web/ui.html' and the files list contains the web files.
  2. Place client/ox_nui_integration.lua in the resource and add it to fxmanifest.lua's client_scripts if not using the wildcard.
  3. Configure a toggle in a config file to enable the new NUI (example: Config.UseCustomNUI = true) and ensure the existing ox_inventory open event is intercepted.
  4. Implement the server events documented in server/README.update_item_meta.md to persist backpack metadata and validate drag/drop moves, or adapt to existing server exports.
  5. Start the server and open the NUI (either via the in-NUI preview helper or by triggering the same open event used by the resource). Verify drag/drop emits move requests and hotkeys trigger the server useHotkey event.

Images

Include the three reference images the user provided to guide design:

• 
• 
• 

Deliverable

Create a new pull request that adds the files and the fxmanifest updates described above on a new branch.

Do not assign reviewers or include any personal accounts in the P...

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

Summary

Add a modern NUI (HTML/CSS/JS) inventory UI to the repository and minimal client integration glue so the resource can optionally use the new UI while keeping existing ox_inventory backend logic intact.

Design references

Include the example images the user provided to match the visual style (body silhouette + limb bars, glass/transparent panels, red & blue accents):

• 
• 
• 

Goals / Acceptance criteria

• Add a new web/ UI (NUI) that implements the modern, semi-transparent red & blue themed inventory UI with:

  • A main pockets grid (8x3 default) for the main inventory
  • A separate backpack panel that appears when an equipped backpack provides extra slots
  • A center body silhouette with limb health bars (head/leftArm/rightArm/body/leftLeg/rightLeg) driven by incoming payload
  • Equipment slots (backpack, parachute, armor, weapon1, weapon2) and hotkey slots (3,4,5) with labels and visual state
  • Top-mode toggle Inventory/Utility, weight display, and Close button
  • Drag & drop support within the UI which posts a dragDrop payload to the client (client will forward to server)
  • Tooltips and item hover details
  • Hotkey bindings: 1 & 2 mapped to weapon slots, 3/4/5 to extra hotkeys (instant use). The client integration registers these key mappings.

• Add a client integration file (client/ox_nui_integration.lua) that:

  • Intercepts an inventory open event (example: 'ox_inventory:openInventory') and, when configured, builds a normalized payload and opens the new NUI (SendNUIMessage + SetNuiFocus)
  • Listens for NUI callbacks (nuiClose, dragDrop, useItem) and forwards actions to the server via existing or new server events (ox_inventory:moveItem, ox_inventory:updateItemMeta, ox_inventory:useHotkey). The server-side implementation should validate moves.
  • Registers KeyMappings for keys 1..5 to trigger hotkey events to the server (TriggerServerEvent('ox_inventory:useHotkey', slotName))
  • Exposes an event to update the NUI when inventory changes

• Update fxmanifest.lua file entries so the UI files are included and ui_page is set to web/ui.html. Do not remove existing fxmanifest content; append the web files and ui_page entries.

• Add a small server-side README (server/README.update_item_meta.md) that documents the expected server event ox_inventory:updateItemMeta and ox_inventory:moveItem for persisting backpack metadata and forwarding drag/drop moves.

Files to create

1. web/ui.html — the NUI HTML entrypoint (modern red & blue UI)
2. web/style.css — CSS implementing glassmorphism and red/blue accents
3. web/script.js — NUI logic: message receiver, render, drag/drop, tooltips, preview helper
4. client/ox_nui_integration.lua — client glue shown in problem description
5. server/README.update_item_meta.md — instructions/example server event to store backpack meta
6. web/preview_inventory_red_blue_fixed.svg — preview image (fixed XML escaping) to show the mockup

Implementation details (what the PR must do)

• Add the files above with the contents previously produced by the assistant (HTML/CSS/JS/Lua/Markdown/SVG). Use the modern NUI prototype code and the client integration code that was provided in the chat.
• Modify fxmanifest.lua in the repo root to ensure the files are listed in the files block and ui_page 'web/ui.html' is set. If there is already a files list and ui_page present, append missing file names and ensure duplicates are avoided.
• Do not remove or modify existing server logic; the PR will only add new files and small client glue, and append the fxmanifest entries. Any server event implementations should be described in server/README.update_item_meta.md — do not implement DB logic in this PR.

Testing guidance (for the PR description)

• After merging, the developer should:
  1. Copy the web/ files into the resource and ensure fxmanifest.lua includes ui_page 'web/ui.html' and the files list contains the web files.
  2. Place client/ox_nui_integration.lua in the resource and add it to fxmanifest.lua's client_scripts if not using the wildcard.
  3. Configure a toggle in a config file to enable the new NUI (example: Config.UseCustomNUI = true) and ensure the existing ox_inventory open event is intercepted.
  4. Implement the server events documented in server/README.update_item_meta.md to persist backpack metadata and validate drag/drop moves, or adapt to existing server exports.
  5. Start the server and open the NUI (either via the in-NUI preview helper or by triggering the same open event used by the resource). Verify drag/drop emits move requests and hotkeys trigger the server useHotkey event.

Images

Include the three reference images the user provided to guide design:

• 
• 
• 

Deliverable

Create a new pull request that adds the files and the fxmanifest updates described above on a new branch.

Do not assign reviewers or include any personal accounts in the PR body. Keep the PR focused on adding the UI and the minimal client integration only.

Notes

• If you need to change the exact event names to match the resource's existing events, indicate that in the PR description and leave placeholders in the code with a clear TODO.
• The PR should not change existing server.lua and client.lua logic except appending the new client file to fxmanifest.lua and adding a small example hook if necessary (do not rewrite client.lua).

References

• Use the UI code and client glue previously provided in the chat message as the file contents for the new files.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.