Feat: Disable plugins (#850)

* implement base frontend changes necessary for plugin disabling

* implement frontend diisable functions/ modal

* plugin disable boilerplate / untested

* Feat disable plugins (#810)

* implement base frontend changes necessary for plugin disabling

* implement frontend diisable functions/ modal

---------

Co-authored-by: Jesse Bofill <jesse_bofill@yahoo.com>

* fix mistakes

* add frontend

* working plugin disable, not tested extensively

* fix uninstalled hidden plugins remaining in list

* hide plugin irrelevant plugin setting menu option when disabled

* fix hidden plugin issues

* reset disabled plugin on uninstall

* fix plugin load on reenable

* move disable settings uninstall cleanup

* add engilsh tranlsations for enable/ disable elements

* fix bug where wrong loadType can get passed to importPlugin

* show correct number of hidden plugins if plugin is both hidden and disabled

* fix: get fresh list of plugin updates when changed in settings plugin list

* fix: fix invalid semver plugin version from preventing latest updates

* retain x position when changing focus in list items  that have multiple horizontal focusables

* correction to pluging version checking validation

* make sure disabled plugins get checked for updates

* show number of disabled plugins at bottom of plugin view

* add notice to update modals that disabled plugins will be enabled upon installation

* run formatter

* Update backend/decky_loader/locales/en-US.json

Co-authored-by: EMERALD <hudson.samuels@gmail.com>

* chore: correct filename typo

* chore: change disabled icon

* chore: revert accidental defsettings changes

* format

* add timeout to frontend importPlugin

if a request hangs this prevent it from blocking other plugin loads.
backend diaptch_plugin which calls this for individual plugin load (as opposed to batch) is set to 15s.
other callers of importPlugin are not using timeout, same as before.

* fix plugin update checking loop

---------

Co-authored-by: marios <marios8543@gmail.com>
Co-authored-by: EMERALD <hudson.samuels@gmail.com>

frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx

@@ -1,15 +1,16 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaEyeSlash, FaLock } from 'react-icons/fa';
+import { FaBan, FaEyeSlash, FaLock } from 'react-icons/fa';
 
 interface PluginListLabelProps {
   frozen: boolean;
   hidden: boolean;
+  disabled: boolean;
   name: string;
   version?: string;
 }
 
-const PluginListLabel: FC<PluginListLabelProps> = ({ name, frozen, hidden, version }) => {
+const PluginListLabel: FC<PluginListLabelProps> = ({ name, frozen, hidden, version, disabled }) => {
   const { t } = useTranslation();
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
@@ -43,6 +44,20 @@ const PluginListLabel: FC<PluginListLabelProps> = ({ name, frozen, hidden, versi
           {t('PluginListLabel.hidden')}
         </div>
       )}
+      {disabled && (
+        <div
+          style={{
+            fontSize: '0.8rem',
+            color: '#dcdedf',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+          }}
+        >
+          <FaBan />
+          {t('PluginListLabel.disabled')}
+        </div>
+      )}
     </div>
   );
 };

frontend/src/components/settings/pages/plugin_list/index.tsx

@@ -2,9 +2,11 @@ import {
   DialogBody,
   DialogButton,
   DialogControlsSection,
+  Focusable,
   GamepadEvent,
   Menu,
   MenuItem,
+  NavEntryPositionPreferences,
   ReorderableEntry,
   ReorderableList,
   showContextMenu,
@@ -13,7 +15,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaDownload, FaEllipsisH, FaRecycle } from 'react-icons/fa';
 
-import { InstallType } from '../../../../plugin';
+import { InstallType, enablePlugin } from '../../../../plugin';
 import {
   StorePluginVersion,
   getPluginList,
@@ -35,6 +37,7 @@ async function reinstallPlugin(pluginName: string, currentVersion?: string) {
 
 type PluginTableData = PluginData & {
   name: string;
+  disabled: boolean;
   frozen: boolean;
   onFreeze(): void;
   onUnfreeze(): void;
@@ -54,22 +57,25 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginTableData> }
     return null;
   }
 
-  const { name, update, version, onHide, onShow, hidden, onFreeze, onUnfreeze, frozen, isDeveloper } = props.entry.data;
+  const { name, update, version, onHide, onShow, hidden, onFreeze, onUnfreeze, frozen, isDeveloper, disabled } =
+    props.entry.data;
 
   const showCtxMenu = (e: MouseEvent | GamepadEvent) => {
     showContextMenu(
       <Menu label={t('PluginListIndex.plugin_actions')}>
-        <MenuItem
-          onSelected={async () => {
-            try {
-              await reloadPluginBackend(name);
-            } catch (err) {
-              console.error('Error Reloading Plugin Backend', err);
-            }
-          }}
-        >
-          {t('PluginListIndex.reload')}
-        </MenuItem>
+        {!disabled && (
+          <MenuItem
+            onSelected={async () => {
+              try {
+                await reloadPluginBackend(name);
+              } catch (err) {
+                console.error('Error Reloading Plugin Backend', err);
+              }
+            }}
+          >
+            {t('PluginListIndex.reload')}
+          </MenuItem>
+        )}
         <MenuItem
           onSelected={() =>
             DeckyPluginLoader.uninstallPlugin(
@@ -82,11 +88,28 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginTableData> }
         >
           {t('PluginListIndex.uninstall')}
         </MenuItem>
-        {hidden ? (
-          <MenuItem onSelected={onShow}>{t('PluginListIndex.show')}</MenuItem>
+        {disabled ? (
+          <MenuItem onSelected={() => enablePlugin(name)}>{t('PluginListIndex.enable')}</MenuItem>
         ) : (
-          <MenuItem onSelected={onHide}>{t('PluginListIndex.hide')}</MenuItem>
+          <MenuItem
+            onSelected={() =>
+              DeckyPluginLoader.disablePlugin(
+                name,
+                t('PluginLoader.plugin_disable.title', { name }),
+                t('PluginLoader.plugin_disable.button'),
+                t('PluginLoader.plugin_disable.desc', { name }),
+              )
+            }
+          >
+            {t('PluginListIndex.disable')}
+          </MenuItem>
         )}
+        {!disabled &&
+          (hidden ? (
+            <MenuItem onSelected={onShow}>{t('PluginListIndex.show')}</MenuItem>
+          ) : (
+            <MenuItem onSelected={onHide}>{t('PluginListIndex.hide')}</MenuItem>
+          ))}
         {frozen ? (
           <MenuItem onSelected={onUnfreeze}>{t('PluginListIndex.unfreeze')}</MenuItem>
         ) : (
@@ -98,7 +121,7 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginTableData> }
   };
 
   return (
-    <>
+    <Focusable navEntryPreferPosition={NavEntryPositionPreferences.MAINTAIN_X} style={{ display: 'flex' }}>
       {update ? (
         <DialogButton
           style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
@@ -137,7 +160,7 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginTableData> }
       >
         <FaEllipsisH />
       </DialogButton>
-    </>
+    </Focusable>
   );
 }
 
@@ -147,16 +170,18 @@ type PluginData = {
 };
 
 export default function PluginList({ isDeveloper }: { isDeveloper: boolean }) {
-  const { plugins, updates, pluginOrder, setPluginOrder, frozenPlugins, hiddenPlugins } = useDeckyState();
+  const { installedPlugins, disabledPlugins, updates, pluginOrder, setPluginOrder, frozenPlugins, hiddenPlugins } =
+    useDeckyState();
+
   const [_, setPluginOrderSetting] = useSetting<string[]>(
     'pluginOrder',
-    plugins.map((plugin) => plugin.name),
+    installedPlugins.map((plugin) => plugin.name),
   );
   const { t } = useTranslation();
 
   useEffect(() => {
     DeckyPluginLoader.checkPluginUpdates();
-  }, []);
+  }, [installedPlugins, frozenPlugins]);
 
   const [pluginEntries, setPluginEntries] = useState<ReorderableEntry<PluginTableData>[]>([]);
   const hiddenPluginsService = DeckyPluginLoader.hiddenPluginsService;
@@ -164,15 +189,24 @@ export default function PluginList({ isDeveloper }: { isDeveloper: boolean }) {
 
   useEffect(() => {
     setPluginEntries(
-      plugins.map(({ name, version }) => {
+      installedPlugins.map(({ name, version }) => {
         const frozen = frozenPlugins.includes(name);
         const hidden = hiddenPlugins.includes(name);
 
         return {
-          label: <PluginListLabel name={name} frozen={frozen} hidden={hidden} version={version} />,
+          label: (
+            <PluginListLabel
+              name={name}
+              frozen={frozen}
+              hidden={hidden}
+              version={version}
+              disabled={disabledPlugins.find((p) => p.name == name) !== undefined}
+            />
+          ),
           position: pluginOrder.indexOf(name),
           data: {
             name,
+            disabled: disabledPlugins.some((disabledPlugin) => disabledPlugin.name === name),
             frozen,
             hidden,
             isDeveloper,
@@ -186,9 +220,9 @@ export default function PluginList({ isDeveloper }: { isDeveloper: boolean }) {
         };
       }),
     );
-  }, [plugins, updates, hiddenPlugins]);
+  }, [installedPlugins, updates, hiddenPlugins, disabledPlugins]);
 
-  if (plugins.length === 0) {
+  if (installedPlugins.length === 0) {
     return (
       <div>
         <p>{t('PluginListIndex.no_plugin')}</p>

frontend/src/components/settings/pages/testing/index.tsx

@@ -4,6 +4,7 @@ import {
   DialogControlsSection,
   Field,
   Focusable,
+  NavEntryPositionPreferences,
   Navigation,
   ProgressBar,
   SteamSpinner,
@@ -87,7 +88,10 @@ export default function TestingVersionList() {
                     </>
                   }
                 >
-                  <Focusable style={{ height: '40px', marginLeft: 'auto', display: 'flex' }}>
+                  <Focusable
+                    style={{ height: '40px', marginLeft: 'auto', display: 'flex' }}
+                    navEntryPreferPosition={NavEntryPositionPreferences.MAINTAIN_X}
+                  >
                     <DialogButton
                       style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
                       onClick={async () => {