feat(web/context): readOnly buttons

package/client/resource/interface/context.ts

@@ -11,6 +11,7 @@ interface ContextMenuItem {
   progress?: number;
   colorScheme?: string;
   onSelect?: (args: any) => void;
+  readOnly?: boolean;
   metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress?: number }[];
   disabled?: boolean;
   event?: string;

web/src/features/menu/context/components/ContextButton.tsx

@@ -15,7 +15,7 @@ const clickContext = (id: string) => {
   fetchNui('clickContext', id);
 };
 
-const useStyles = createStyles((theme, params: { disabled?: boolean }) => ({
+const useStyles = createStyles((theme, params: { disabled?: boolean; readOnly?: boolean }) => ({
   inner: {
     justifyContent: 'flex-start',
   },
@@ -28,6 +28,13 @@ const useStyles = createStyles((theme, params: { disabled?: boolean }) => ({
     height: 'fit-content',
     width: '100%',
     padding: 10,
+    '&:hover': {
+      backgroundColor: params.readOnly ? theme.colors.dark[6] : undefined,
+      cursor: params.readOnly ? 'unset' : 'pointer',
+    },
+    '&:active': {
+      transform: params.readOnly ? 'unset' : undefined,
+    },
   },
   iconImage: {
     maxWidth: '25px',
@@ -74,7 +81,7 @@ const ContextButton: React.FC<{
 }> = ({ option }) => {
   const button = option[1];
   const buttonKey = option[0];
-  const { classes } = useStyles({ disabled: button.disabled });
+  const { classes } = useStyles({ disabled: button.disabled, readOnly: button.readOnly });
 
   return (
     <>
@@ -85,10 +92,15 @@ const ContextButton: React.FC<{
       >
         <HoverCard.Target>
           <Button
-            classNames={{ inner: classes.inner, label: classes.label }}
+            classNames={{ inner: classes.inner, label: classes.label, root: classes.button }}
-            onClick={() => (!button.disabled ? (button.menu ? openMenu(button.menu) : clickContext(buttonKey)) : null)}
+            onClick={() =>
+              !button.disabled && !button.readOnly
+                ? button.menu
+                  ? openMenu(button.menu)
+                  : clickContext(buttonKey)
+                : null
+            }
             variant="default"
-            className={classes.button}
             disabled={button.disabled}
           >
             <Group position="apart" w="100%" noWrap>

web/src/typings/context.ts

@@ -10,6 +10,7 @@ export interface Option {
   iconColor?: string;
   progress?: number;
   colorScheme?: string;
+  readOnly?: boolean;
   metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress?: number }[];
   disabled?: boolean;
   event?: string;