refactor(web/menu): radial menu onHover

resource/interface/client/radial.lua

@@ -2,6 +2,7 @@ local isOpen = false
 local menus = {}
 local menuItems = {}
 local currentRadial = nil
+local currentHover = nil
 
 
 function lib.registerRadial(radial)
@@ -24,9 +25,19 @@ local function showRadial(id)
     })
 end
 
+local function getRadialItem(index)
+    return not currentRadial and menuItems[index + 1] or currentRadial.items[index + 1]
+end
+
 function lib.hideRadial()
     if not isOpen then return end
 
+    if currentHover then
+        local item = getRadialItem(currentHover)
+        item.onHover(false)
+        currentHover = nil
+    end
+
     SendNUIMessage({
         action = 'openRadialMenu',
         data = false
@@ -71,9 +82,18 @@ function lib.removeRadialItem(id)
     end
 end
 
+RegisterNUICallback('radialHover', function(data, cb)
+    cb(1)
+    local item = getRadialItem(data.index)
+
+    if not item.onHover then return end
+    item.onHover(data.entered)
+    currentHover = data.entered and data.index
+end)
+
 RegisterNUICallback('radialClick', function(index, cb)
     cb(1)
-    local item = not currentRadial and menuItems[index + 1] or currentRadial.items[index + 1]
+    local item = getRadialItem(index)
 
     if item.onSelect then item.onSelect() end
     if item.menu then return showRadial(item.menu) end

web/src/features/menu/radial/index.tsx

@@ -97,6 +97,8 @@ const RadialMenu: React.FC = () => {
                     transform={`rotate(-${index * pieAngle} 175 175)`}
                     className={classes.sector}
                     onClick={() => fetchNui('radialClick', index)}
+                    onMouseEnter={() => fetchNui('radialHover', { index, entered: true })}
+                    onMouseLeave={() => fetchNui('radialHover', { index, entered: false })}
                   >
                     <path
                       d={`M175.01,175.01 l175,0 A175.01,175.01 0 0,0 ${175 + 175 * Math.cos(-degToRad(pieAngle))}, ${