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

1 files changed, 11 insertions, 0 deletions

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>
     </>