change AddonContextMenu and SettingsContextMenu addon enable/disable items to CheckboxItems to make them easier to see at a glance

src/core/modules/components/addon/AddonContextMenu.jsx

@@ -1,6 +1,7 @@
 import { ContextMenu } from '@vizality/components';
 import { toPlural } from '@vizality/util/string';
 import { contextMenu } from '@vizality/webpack';
+import { useForceUpdate } from '@vizality/hooks';
 import React, { memo } from 'react';
 import { Messages } from '@vizality/i18n';
 
@@ -15,12 +16,12 @@ const { closeContextMenu } = contextMenu;
  * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
  */
 export default memo(({ addonId, type }) => {
+  const forceUpdate = useForceUpdate();
   const isEnabled = vizality.manager[toPlural(type)].isEnabled(addonId);
   const isInstalled = vizality.manager[toPlural(type)].isInstalled(addonId);
   const hasSettings = vizality.manager[toPlural(type)].hasSettings(addonId);
   const hasScreenshots = vizality.manager[toPlural(type)].hasScreenshots(addonId);
   const hasChangelog = vizality.manager[toPlural(type)].hasChangelog(addonId);
-
   return (
     <ContextMenu.Menu navId='vz-addon-context-menu' onClose={closeContextMenu}>
       <ContextMenu.Item
@@ -57,17 +58,15 @@ export default memo(({ addonId, type }) => {
       )}
       <ContextMenu.Separator />
       {isInstalled && (
-        isEnabled
-          ? <ContextMenu.Item
-            id='disable'
-            label='Disable'
-            action={async () => vizality.manager[toPlural(type)].disable(addonId)}
-          />
-          : <ContextMenu.Item
-            id='enable'
-            label='Enable'
-            action={async () => vizality.manager[toPlural(type)].enable(addonId)}
-          />
+        <ContextMenu.CheckboxItem
+          id='enable'
+          label='Enable'
+          checked={isEnabled}
+          action={async () => {
+            vizality.manager[toPlural(type)].toggle(addonId);
+            forceUpdate();
+          }}
+        />
       )}
       {isInstalled
         ? <ContextMenu.Item

src/core/modules/components/vizality/SettingsContextMenu.jsx

@@ -251,17 +251,15 @@ export default memo(() => {
                         )}
                         <ContextMenu.Separator />
                         {isInstalled && (
-                          isEnabled
-                            ? <ContextMenu.Item
-                              id='disable'
-                              label='Disable'
-                              action={async () => vizality.manager[type].disable(addon.addonId)}
-                            />
-                            : <ContextMenu.Item
-                              id='enable'
-                              label='Enable'
-                              action={async () => vizality.manager[type].enable(addon.addonId)}
-                            />
+                          <ContextMenu.CheckboxItem
+                            id='enable'
+                            label='Enable'
+                            checked={isEnabled}
+                            action={async () => {
+                              vizality.manager[type].toggle(addon.addonId);
+                              forceUpdate();
+                            }}
+                          />
                         )}
                         {isInstalled
                           ? <ContextMenu.Item