feat(web/context): disabled buttons

package/client/resource/interface/context.ts

@@ -9,6 +9,7 @@ interface ContextMenuItem {
   arrow?: boolean;
   description?: string;
   metadata?: string | { [key: string]: any } | string[];
+  disabled?: boolean;
   event?: string;
   serverEvent?: string;
   args?: any;

resource/interface/client/context.lua

@@ -10,6 +10,7 @@ local openContextMenu = nil
 ---@field arrow? boolean
 ---@field description? string
 ---@field metadata? string | { [string]: any } | string[]
+---@field disabled? boolean
 ---@field event? string
 ---@field serverEvent? string
 ---@field args? any

web/src/features/dev/debug/context.ts

@@ -15,6 +15,7 @@ export const debugContext = () => {
             icon: 'inbox',
             image: 'https://i.imgur.com/YAe7k17.jpeg',
             metadata: [{ label: 'Value 1', value: 300 }],
+            disabled: true,
           },
           {
             title: 'Menu button',

web/src/features/menu/context/ContextMenu.tsx

@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { fetchNui } from '../../../utils/fetchNui';
 
 const openMenu = (id: string | undefined) => {
-  fetchNui<ContextMenuProps>('openContext', {id: id, back: true});
+  fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
 };
 
 const ContextMenu: React.FC = () => {

web/src/features/menu/context/Item.tsx

@@ -34,7 +34,7 @@ const Item: React.FC<{
       <Popover placement="right-start" trigger="hover" eventListeners={{ scroll: true }} isLazy>
         <PopoverTrigger>
           <Box
-            bg="gray.800"
+            bg={button.disabled ? 'gray.600' : 'gray.800'}
             borderRadius="md"
             h="fit-content"
             w="100%"
@@ -43,12 +43,16 @@ const Item: React.FC<{
             fontFamily="Poppins"
             fontSize="md"
             transition="300ms"
-            _hover={{ bg: 'gray.700' }}
+            _hover={{ bg: !button.disabled && 'gray.700' }}
+            cursor={(button.disabled && 'not-allowed') || undefined}
           >
             <Flex
               w="100%"
               alignItems="center"
-              onClick={() => (button.menu ? openMenu(button.menu) : clickContext(buttonKey))}
+              color={button.disabled ? '#718096' : undefined}
+              onClick={() =>
+                !button.disabled ? (button.menu ? openMenu(button.menu) : clickContext(buttonKey)) : null
+              }
             >
               {button?.icon && (
                 <FontAwesomeIcon
@@ -64,12 +68,12 @@ const Item: React.FC<{
               )}
               <Box>
                 <Box paddingBottom={button.description ? 1 : 0}>
-                  <Text w="100%" fontWeight="medium">
+                  <Text w="100%" fontWeight="medium" color={button.disabled ? '#718096' : undefined}>
                     {button.title ? button.title : buttonKey}
                   </Text>
                 </Box>
                 {button.description && (
-                  <Box paddingBottom={1}>
+                  <Box paddingBottom={1} color={button.disabled ? '#718096' : undefined}>
                     <Text>{button.description}</Text>
                   </Box>
                 )}
@@ -84,7 +88,7 @@ const Item: React.FC<{
               )}
             </Flex>
             <Portal>
-              {(button.metadata || button.image) && (
+              {!button.disabled && (button.metadata || button.image) && (
                 <PopoverContent
                   fontFamily="Poppins"
                   bg="gray.800"

web/src/interfaces/context.ts

@@ -9,6 +9,7 @@ export interface Option {
   icon?: IconProp;
   iconColor?: string;
   metadata?: string[] | { [key: string]: any } | { label: string; value: any }[];
+  disabled?: boolean;
   event?: string;
   serverEvent?: string;
   args?: any;