From aaa37047f1af8047a63dcf9ae7cfe6e4cf211cad Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Fri, 22 Sep 2023 13:49:15 +0200
Subject: [PATCH] feat(web/context): readOnly buttons

---
 package/client/resource/interface/context.ts  |  1 +
 .../menu/context/components/ContextButton.tsx | 22 ++++++++++++++-----
 web/src/typings/context.ts                    |  1 +
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/package/client/resource/interface/context.ts b/package/client/resource/interface/context.ts
index 897b312..ff8fda8 100644
--- a/package/client/resource/interface/context.ts
+++ b/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;
diff --git a/web/src/features/menu/context/components/ContextButton.tsx b/web/src/features/menu/context/components/ContextButton.tsx
index 936f523..534541f 100644
--- a/web/src/features/menu/context/components/ContextButton.tsx
+++ b/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 }}
-            onClick={() => (!button.disabled ? (button.menu ? openMenu(button.menu) : clickContext(buttonKey)) : null)}
+            classNames={{ inner: classes.inner, label: classes.label, root: classes.button }}
+            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>
diff --git a/web/src/typings/context.ts b/web/src/typings/context.ts
index 275581f..c9f6c4f 100644
--- a/web/src/typings/context.ts
+++ b/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;