From a2a4093da016b4f31f73e4b484592aeeacf92c4f Mon Sep 17 00:00:00 2001
From: Alexander <30348563+Volumed@users.noreply.github.com>
Date: Thu, 20 Apr 2023 15:09:48 +0200
Subject: [PATCH] feat(client): nested custom context buttons (#1266)

---
 client.lua                                    |  2 +-
 data/items.lua                                | 21 +++++++
 modules/items/shared.lua                      |  2 +-
 .../components/inventory/InventoryContext.tsx | 61 +++++++++++++++++--
 4 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/client.lua b/client.lua
index 2457bb90f4..4057b5f826 100644
--- a/client.lua
+++ b/client.lua
@@ -1157,7 +1157,7 @@ RegisterNetEvent('ox_inventory:setPlayerInventory', function(currentDrops, inven
 
 		if buttons then
 			for i = 1, #v.buttons do
-				buttons[i] = v.buttons[i].label
+				buttons[i] = {label = v.buttons[i].label, group = v.buttons[i].group}
 			end
 		end
 
diff --git a/data/items.lua b/data/items.lua
index b6a353bddf..710b8a79bf 100644
--- a/data/items.lua
+++ b/data/items.lua
@@ -26,6 +26,27 @@ return {
 				action = function(slot)
 					print('You squeezed the burger :(')
 				end
+			},
+			{
+				label = 'What do you call a vegan burger?',
+				group = 'Hamburger Puns',
+				action = function(slot)
+					print('A misteak.')
+				end
+			},
+			{
+				label = 'What do frogs like to eat with their hamburgers?',
+				group = 'Hamburger Puns',
+				action = function(slot)
+					print('French flies.')
+				end
+			},
+			{
+				label = 'Why were the burger and fries running?',
+				group = 'Hamburger Puns',
+				action = function(slot)
+					print('Because they\'re fast food.')
+				end
 			}
 		},
 		consume = 0.3
diff --git a/modules/items/shared.lua b/modules/items/shared.lua
index 2cfcd21e48..95ddce3823 100644
--- a/modules/items/shared.lua
+++ b/modules/items/shared.lua
@@ -10,7 +10,7 @@
 ---@field stack? boolean Set to false to prevent the item from stacking.
 ---@field close? boolean Set to false to keep the inventory open on item use.
 ---@field allowArmed? boolean Set to true to allow an item to be used while a weapon is equipped.
----@field buttons? { label: string, action: fun(slot: number) }[] Add interactions when right-clicking an item.
+---@field buttons? { label: string, group: string, action: fun(slot: number) }[] Add interactions when right-clicking an item.
 ---@field [string] any
 
 ---@class OxClientProps
diff --git a/web/src/components/inventory/InventoryContext.tsx b/web/src/components/inventory/InventoryContext.tsx
index 9b6482f902..fdaa947524 100644
--- a/web/src/components/inventory/InventoryContext.tsx
+++ b/web/src/components/inventory/InventoryContext.tsx
@@ -20,6 +20,23 @@ interface DataProps {
   id?: number;
 }
 
+interface Button {
+  label: string;
+  index: number;
+  group?: string;
+}
+
+interface Group {
+  groupName: string | null;
+  buttons: ButtonWithIndex[];
+}
+
+interface ButtonWithIndex extends Button {
+  index: number;
+}
+
+interface GroupedButtons extends Array<Group> {}
+
 const InventoryContext: React.FC = () => {
   const contextMenu = useAppSelector((state) => state.inventory.contextMenu);
   const item = contextMenu.item;
@@ -55,6 +72,28 @@ const InventoryContext: React.FC = () => {
     }
   };
 
+  const groupButtons = (buttons: any): GroupedButtons => {
+    return buttons.reduce((groups: Group[], button: Button, index: number) => {
+      if (button.group) {
+        const groupIndex = groups.findIndex((group) => group.groupName === button.group);
+        if (groupIndex !== -1) {
+          groups[groupIndex].buttons.push({ ...button, index });
+        } else {
+          groups.push({
+            groupName: button.group,
+            buttons: [{ ...button, index }],
+          });
+        }
+      } else {
+        groups.push({
+          groupName: null,
+          buttons: [{ ...button, index }],
+        });
+      }
+      return groups;
+    }, []);
+  }
+
   return (
     <>
       <Menu
@@ -98,10 +137,24 @@ const InventoryContext: React.FC = () => {
           <>
             {item &&
               item.name &&
-              Items[item.name]?.buttons?.map((label: string, index: number) => (
-                <MenuItem key={index} onClick={() => handleClick({ action: 'custom', id: index })}>
-                  {label}
-                </MenuItem>
+              groupButtons(Items[item.name]?.buttons).map((group: Group, index: number) => (
+                <div key={index}>
+                  {group.groupName ? (
+                    <NestedMenuItem parentMenuOpen={!!contextMenu} label={group.groupName}>
+                      {group.buttons.map((button: Button) => (
+                        <MenuItem key={button.index} onClick={() => handleClick({ action: 'custom', id: button.index })}>
+                          {button.label}
+                        </MenuItem>
+                      ))}
+                    </NestedMenuItem>
+                  ) : (
+                    group.buttons.map((button: Button) => (
+                      <MenuItem key={button.index} onClick={() => handleClick({ action: 'custom', id: button.index })}>
+                        {button.label}
+                      </MenuItem>
+                    ))
+                  )}
+                </div>
               ))}
           </>
         )}