[Feature] Freeze updates for devs (#582)

3 files changed, 45 insertions, 9 deletions

diff --git a/frontend/src/components/settings/index.tsx b/frontend/src/components/settings/index.tsx
index 568a0a49..80400058 100644
--- a/frontend/src/components/settings/index.tsx
+++ b/frontend/src/components/settings/index.tsx
@@ -25,7 +25,7 @@ export default function SettingsPage() {
     },
     {
       title: t('SettingsIndex.plugins_title'),
-      content: <PluginList />,
+      content: <PluginList isDeveloper={isDeveloper} />,
       route: '/decky/settings/plugins',
       icon: <FaPlug />,
     },
diff --git a/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx b/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx
index a49f808f..fec03e56 100644
--- a/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx
+++ b/frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx
@@ -1,18 +1,34 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaEyeSlash } from 'react-icons/fa';
+import { FaEyeSlash, FaLock } from 'react-icons/fa';
 
 interface PluginListLabelProps {
+  frozen: boolean;
   hidden: boolean;
   name: string;
   version?: string;
 }
 
-const PluginListLabel: FC<PluginListLabelProps> = ({ name, hidden, version }) => {
+const PluginListLabel: FC<PluginListLabelProps> = ({ name, frozen, hidden, version }) => {
   const { t } = useTranslation();
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-      <div>{version ? `${name} - ${version}` : name}</div>
+      <div>
+        {name}
+        {version && (
+          <>
+            {' - '}
+            <span style={{ color: frozen ? '#67707b' : 'inherit' }}>
+              {frozen && (
+                <>
+                  <FaLock />{' '}
+                </>
+              )}
+              {version}
+            </span>
+          </>
+        )}
+      </div>
       {hidden && (
         <div
           style={{
diff --git a/frontend/src/components/settings/pages/plugin_list/index.tsx b/frontend/src/components/settings/pages/plugin_list/index.tsx
index 0728b12d..d8a268ae 100644
--- a/frontend/src/components/settings/pages/plugin_list/index.tsx
+++ b/frontend/src/components/settings/pages/plugin_list/index.tsx
@@ -33,7 +33,16 @@ async function reinstallPlugin(pluginName: string, currentVersion?: string) {
   }
 }
 
-type PluginTableData = PluginData & { name: string; hidden: boolean; onHide(): void; onShow(): void };
+type PluginTableData = PluginData & {
+  name: string;
+  frozen: boolean;
+  onFreeze(): void;
+  onUnfreeze(): void;
+  hidden: boolean;
+  onHide(): void;
+  onShow(): void;
+  isDeveloper: boolean;
+};
 
 const reloadPluginBackend = DeckyBackend.callable<[pluginName: string], void>('loader/reload_plugin');
 
@@ -45,7 +54,7 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginTableData> }
     return null;
   }
 
-  const { name, update, version, onHide, onShow, hidden } = props.entry.data;
+  const { name, update, version, onHide, onShow, hidden, onFreeze, onUnfreeze, frozen, isDeveloper } = props.entry.data;
 
   const showCtxMenu = (e: MouseEvent | GamepadEvent) => {
     showContextMenu(
@@ -80,6 +89,11 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginTableData> }
         ) : (
           <MenuItem onSelected={onHide}>{t('PluginListIndex.hide')}</MenuItem>
         )}
+        {frozen ? (
+          <MenuItem onSelected={onUnfreeze}>{t('PluginListIndex.unfreeze')}</MenuItem>
+        ) : (
+          isDeveloper && <MenuItem onSelected={onFreeze}>{t('PluginListIndex.freeze')}</MenuItem>
+        )}
       </Menu>,
       e.currentTarget ?? window,
     );
@@ -134,8 +148,8 @@ type PluginData = {
   version?: string;
 };
 
-export default function PluginList() {
-  const { plugins, updates, pluginOrder, setPluginOrder, hiddenPlugins } = useDeckyState();
+export default function PluginList({ isDeveloper }: { isDeveloper: boolean }) {
+  const { plugins, updates, pluginOrder, setPluginOrder, frozenPlugins, hiddenPlugins } = useDeckyState();
   const [_, setPluginOrderSetting] = useSetting<string[]>(
     'pluginOrder',
     plugins.map((plugin) => plugin.name),
@@ -148,20 +162,26 @@ export default function PluginList() {
 
   const [pluginEntries, setPluginEntries] = useState<ReorderableEntry<PluginTableData>[]>([]);
   const hiddenPluginsService = DeckyPluginLoader.hiddenPluginsService;
+  const frozenPluginsService = DeckyPluginLoader.frozenPluginsService;
 
   useEffect(() => {
     setPluginEntries(
       plugins.map(({ name, version }) => {
+        const frozen = frozenPlugins.includes(name);
         const hidden = hiddenPlugins.includes(name);
 
         return {
-          label: <PluginListLabel name={name} hidden={hidden} version={version} />,
+          label: <PluginListLabel name={name} frozen={frozen} hidden={hidden} version={version} />,
           position: pluginOrder.indexOf(name),
           data: {
             name,
+            frozen,
             hidden,
+            isDeveloper,
             version,
             update: updates?.get(name),
+            onFreeze: () => frozenPluginsService.update([...frozenPlugins, name]),
+            onUnfreeze: () => frozenPluginsService.update(frozenPlugins.filter((pluginName) => name !== pluginName)),
             onHide: () => hiddenPluginsService.update([...hiddenPlugins, name]),
             onShow: () => hiddenPluginsService.update(hiddenPlugins.filter((pluginName) => name !== pluginName)),
           },