Add functionality to hide plugins from quick access menu (#468)

5 files changed, 133 insertions, 34 deletions

diff --git a/frontend/src/components/DeckyState.tsx b/frontend/src/components/DeckyState.tsx
index 67d4b78e..53ef6d2d 100644
--- a/frontend/src/components/DeckyState.tsx
+++ b/frontend/src/components/DeckyState.tsx
@@ -7,6 +7,7 @@ import { VerInfo } from '../updater';
 interface PublicDeckyState {
   plugins: Plugin[];
   pluginOrder: string[];
+  hiddenPlugins: string[];
   activePlugin: Plugin | null;
   updates: PluginUpdateMapping | null;
   hasLoaderUpdate?: boolean;
@@ -17,6 +18,7 @@ interface PublicDeckyState {
 export class DeckyState {
   private _plugins: Plugin[] = [];
   private _pluginOrder: string[] = [];
+  private _hiddenPlugins: string[] = [];
   private _activePlugin: Plugin | null = null;
   private _updates: PluginUpdateMapping | null = null;
   private _hasLoaderUpdate: boolean = false;
@@ -29,6 +31,7 @@ export class DeckyState {
     return {
       plugins: this._plugins,
       pluginOrder: this._pluginOrder,
+      hiddenPlugins: this._hiddenPlugins,
       activePlugin: this._activePlugin,
       updates: this._updates,
       hasLoaderUpdate: this._hasLoaderUpdate,
@@ -52,6 +55,11 @@ export class DeckyState {
     this.notifyUpdate();
   }
 
+  setHiddenPlugins(hiddenPlugins: string[]) {
+    this._hiddenPlugins = hiddenPlugins;
+    this.notifyUpdate();
+  }
+
   setActivePlugin(name: string) {
     this._activePlugin = this._plugins.find((plugin) => plugin.name === name) ?? null;
     this.notifyUpdate();
@@ -111,11 +119,11 @@ export const DeckyStateContextProvider: FC<Props> = ({ children, deckyState }) =
     return () => deckyState.eventBus.removeEventListener('update', onUpdate);
   }, []);
 
-  const setIsLoaderUpdating = (hasUpdate: boolean) => deckyState.setIsLoaderUpdating(hasUpdate);
-  const setVersionInfo = (versionInfo: VerInfo) => deckyState.setVersionInfo(versionInfo);
-  const setActivePlugin = (name: string) => deckyState.setActivePlugin(name);
-  const closeActivePlugin = () => deckyState.closeActivePlugin();
-  const setPluginOrder = (pluginOrder: string[]) => deckyState.setPluginOrder(pluginOrder);
+  const setIsLoaderUpdating = deckyState.setIsLoaderUpdating.bind(deckyState);
+  const setVersionInfo = deckyState.setVersionInfo.bind(deckyState);
+  const setActivePlugin = deckyState.setActivePlugin.bind(deckyState);
+  const closeActivePlugin = deckyState.closeActivePlugin.bind(deckyState);
+  const setPluginOrder = deckyState.setPluginOrder.bind(deckyState);
 
   return (
     <DeckyStateContext.Provider
diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx
index 3ecc2c86..b53035f7 100644
--- a/frontend/src/components/PluginView.tsx
+++ b/frontend/src/components/PluginView.tsx
@@ -8,6 +8,8 @@ import {
   staticClasses,
 } from 'decky-frontend-lib';
 import { VFC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaEyeSlash } from 'react-icons/fa';
 
 import { Plugin } from '../plugin';
 import { useDeckyState } from './DeckyState';
@@ -16,8 +18,10 @@ import { useQuickAccessVisible } from './QuickAccessVisibleState';
 import TitleView from './TitleView';
 
 const PluginView: VFC = () => {
+  const { hiddenPlugins } = useDeckyState();
   const { plugins, updates, activePlugin, pluginOrder, setActivePlugin, closeActivePlugin } = useDeckyState();
   const visible = useQuickAccessVisible();
+  const { t } = useTranslation();
 
   const [pluginList, setPluginList] = useState<Plugin[]>(
     plugins.sort((a, b) => pluginOrder.indexOf(a.name) - pluginOrder.indexOf(b.name)),
@@ -48,6 +52,7 @@ const PluginView: VFC = () => {
         <PanelSection>
           {pluginList
             .filter((p) => p.content)
+            .filter(({ name }) => !hiddenPlugins.includes(name))
             .map(({ name, icon }) => (
               <PanelSectionRow key={name}>
                 <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
@@ -59,6 +64,12 @@ const PluginView: VFC = () => {
                 </ButtonItem>
               </PanelSectionRow>
             ))}
+          {hiddenPlugins.length > 0 && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', fontSize: '0.8rem', marginTop: '10px' }}>
+              <FaEyeSlash />
+              <div>{t('PluginView.hidden', { count: hiddenPlugins.length })}</div>
+            </div>
+          )}
         </PanelSection>
       </div>
     </>
diff --git a/frontend/src/components/modals/PluginUninstallModal.tsx b/frontend/src/components/modals/PluginUninstallModal.tsx
new file mode 100644
index 00000000..e7ecbc99
--- /dev/null
+++ b/frontend/src/components/modals/PluginUninstallModal.tsx
@@ -0,0 +1,30 @@
+import { ConfirmModal } from 'decky-frontend-lib';
+import { FC } from 'react';
+
+interface PluginUninstallModalProps {
+  name: string;
+  title: string;
+  buttonText: string;
+  description: string;
+  closeModal?(): void;
+}
+
+const PluginUninstallModal: FC<PluginUninstallModalProps> = ({ name, title, buttonText, description, closeModal }) => {
+  return (
+    <ConfirmModal
+      closeModal={closeModal}
+      onOK={async () => {
+        await window.DeckyPluginLoader.callServerMethod('uninstall_plugin', { name });
+        // uninstalling a plugin resets the hidden setting for it server-side
+        // we invalidate here so if you re-install it, you won't have an out-of-date hidden filter
+        await window.DeckyPluginLoader.hiddenPluginsService.invalidate();
+      }}
+      strTitle={title}
+      strOKButtonText={buttonText}
+    >
+      {description}
+    </ConfirmModal>
+  );
+};
+
+export default PluginUninstallModal;
diff --git a/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx b/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx
new file mode 100644
index 00000000..a49f808f
--- /dev/null
+++ b/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx
@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaEyeSlash } from 'react-icons/fa';
+
+interface PluginListLabelProps {
+  hidden: boolean;
+  name: string;
+  version?: string;
+}
+
+const PluginListLabel: FC<PluginListLabelProps> = ({ name, hidden, version }) => {
+  const { t } = useTranslation();
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+      <div>{version ? `${name} - ${version}` : name}</div>
+      {hidden && (
+        <div
+          style={{
+            fontSize: '0.8rem',
+            color: '#dcdedf',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+          }}
+        >
+          <FaEyeSlash />
+          {t('PluginListLabel.hidden')}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PluginListLabel;
diff --git a/frontend/src/components/settings/pages/plugin_list/index.tsx b/frontend/src/components/settings/pages/plugin_list/index.tsx
index fab8ec2b..09d06d48 100644
--- a/frontend/src/components/settings/pages/plugin_list/index.tsx
+++ b/frontend/src/components/settings/pages/plugin_list/index.tsx
@@ -22,10 +22,7 @@ import {
 } from '../../../../store';
 import { useSetting } from '../../../../utils/hooks/useSetting';
 import { useDeckyState } from '../../../DeckyState';
-
-function labelToName(pluginLabel: string, pluginVersion?: string): string {
-  return pluginVersion ? pluginLabel.substring(0, pluginLabel.indexOf(` - ${pluginVersion}`)) : pluginLabel;
-}
+import PluginListLabel from './PluginListLabel';
 
 async function reinstallPlugin(pluginName: string, currentVersion?: string) {
   const serverData = await getPluginList();
@@ -36,10 +33,17 @@ async function reinstallPlugin(pluginName: string, currentVersion?: string) {
   }
 }
 
-function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
-  const data = props.entry.data;
+type PluginTableData = PluginData & { name: string; hidden: boolean; onHide(): void; onShow(): void };
+
+function PluginInteractables(props: { entry: ReorderableEntry<PluginTableData> }) {
   const { t } = useTranslation();
-  let pluginName = labelToName(props.entry.label, data?.version);
+
+  // nothing to display without this data...
+  if (!props.entry.data) {
+    return null;
+  }
+
+  const { name, update, version, onHide, onShow, hidden } = props.entry.data;
 
   const showCtxMenu = (e: MouseEvent | GamepadEvent) => {
     showContextMenu(
@@ -47,7 +51,7 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
         <MenuItem
           onSelected={() => {
             try {
-              fetch(`http://127.0.0.1:1337/plugins/${pluginName}/reload`, {
+              fetch(`http://127.0.0.1:1337/plugins/${name}/reload`, {
                 method: 'POST',
                 credentials: 'include',
                 headers: {
@@ -58,7 +62,7 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
               console.error('Error Reloading Plugin Backend', err);
             }
 
-            window.DeckyPluginLoader.importPlugin(pluginName, data?.version);
+            window.DeckyPluginLoader.importPlugin(name, version);
           }}
         >
           {t('PluginListIndex.reload')}
@@ -66,15 +70,20 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
         <MenuItem
           onSelected={() =>
             window.DeckyPluginLoader.uninstallPlugin(
-              pluginName,
-              t('PluginLoader.plugin_uninstall.title', { name: pluginName }),
+              name,
+              t('PluginLoader.plugin_uninstall.title', { name }),
               t('PluginLoader.plugin_uninstall.button'),
-              t('PluginLoader.plugin_uninstall.desc', { name: pluginName }),
+              t('PluginLoader.plugin_uninstall.desc', { name }),
             )
           }
         >
           {t('PluginListIndex.uninstall')}
         </MenuItem>
+        {hidden ? (
+          <MenuItem onSelected={onShow}>{t('PluginListIndex.show')}</MenuItem>
+        ) : (
+          <MenuItem onSelected={onHide}>{t('PluginListIndex.hide')}</MenuItem>
+        )}
       </Menu>,
       e.currentTarget ?? window,
     );
@@ -82,22 +91,22 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
 
   return (
     <>
-      {data?.update ? (
+      {update ? (
         <DialogButton
           style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
-          onClick={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion, InstallType.UPDATE)}
-          onOKButton={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion, InstallType.UPDATE)}
+          onClick={() => requestPluginInstall(name, update, InstallType.UPDATE)}
+          onOKButton={() => requestPluginInstall(name, update, InstallType.UPDATE)}
         >
           <div style={{ display: 'flex', minWidth: '180px', justifyContent: 'space-between', alignItems: 'center' }}>
-            {t('PluginListIndex.update_to', { name: data?.update?.name })}
+            {t('PluginListIndex.update_to', { name: update.name })}
             <FaDownload style={{ paddingLeft: '1rem' }} />
           </div>
         </DialogButton>
       ) : (
         <DialogButton
           style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
-          onClick={() => reinstallPlugin(pluginName, data?.version)}
-          onOKButton={() => reinstallPlugin(pluginName, data?.version)}
+          onClick={() => reinstallPlugin(name, version)}
+          onOKButton={() => reinstallPlugin(name, version)}
         >
           <div style={{ display: 'flex', minWidth: '180px', justifyContent: 'space-between', alignItems: 'center' }}>
             {t('PluginListIndex.reinstall')}
@@ -130,7 +139,7 @@ type PluginData = {
 };
 
 export default function PluginList() {
-  const { plugins, updates, pluginOrder, setPluginOrder } = useDeckyState();
+  const { plugins, updates, pluginOrder, setPluginOrder, hiddenPlugins } = useDeckyState();
   const [_, setPluginOrderSetting] = useSetting<string[]>(
     'pluginOrder',
     plugins.map((plugin) => plugin.name),
@@ -141,22 +150,29 @@ export default function PluginList() {
     window.DeckyPluginLoader.checkPluginUpdates();
   }, []);
 
-  const [pluginEntries, setPluginEntries] = useState<ReorderableEntry<PluginData>[]>([]);
+  const [pluginEntries, setPluginEntries] = useState<ReorderableEntry<PluginTableData>[]>([]);
+  const hiddenPluginsService = window.DeckyPluginLoader.hiddenPluginsService;
 
   useEffect(() => {
     setPluginEntries(
-      plugins.map((plugin) => {
+      plugins.map(({ name, version }) => {
+        const hidden = hiddenPlugins.includes(name);
+
         return {
-          label: plugin.version ? `${plugin.name} - ${plugin.version}` : plugin.name,
+          label: <PluginListLabel name={name} hidden={hidden} version={version} />,
+          position: pluginOrder.indexOf(name),
           data: {
-            update: updates?.get(plugin.name),
-            version: plugin.version,
+            name,
+            hidden,
+            version,
+            update: updates?.get(name),
+            onHide: () => hiddenPluginsService.update([...hiddenPlugins, name]),
+            onShow: () => hiddenPluginsService.update(hiddenPlugins.filter((pluginName) => name !== pluginName)),
           },
-          position: pluginOrder.indexOf(plugin.name),
         };
       }),
     );
-  }, [plugins, updates]);
+  }, [plugins, updates, hiddenPlugins]);
 
   if (plugins.length === 0) {
     return (
@@ -166,8 +182,8 @@ export default function PluginList() {
     );
   }
 
-  function onSave(entries: ReorderableEntry<PluginData>[]) {
-    const newOrder = entries.map((entry) => labelToName(entry.label, entry?.data?.version));
+  function onSave(entries: ReorderableEntry<PluginTableData>[]) {
+    const newOrder = entries.map((entry) => entry.data!.name);
     console.log(newOrder);
     setPluginOrder(newOrder);
     setPluginOrderSetting(newOrder);
@@ -200,7 +216,7 @@ export default function PluginList() {
         </DialogButton>
       )}
       <DialogControlsSection style={{ marginTop: 0 }}>
-        <ReorderableList<PluginData> entries={pluginEntries} onSave={onSave} interactables={PluginInteractables} />
+        <ReorderableList<PluginTableData> entries={pluginEntries} onSave={onSave} interactables={PluginInteractables} />
       </DialogControlsSection>
     </DialogBody>
   );