feat: add "open" action to plugins settings

This allows opening plugins even if they are hidden in the quick access
list.

This solves the use case where plugins are hidden from the quick access
list because access to their panels is not used very often. For example,
plugin "ProtonDB Badges" is fire-configure-once-and-forget, so it makes
sense to hide it so it doesn't waste space and attention.

But this doesn't mean the user will never want to access hidden plugin
panels to e.g. briefly change configuration. Currently the only way to
access the plugin content panel is to unhide the plugin, access it in
the quick access list, and then hide it again.

Resolves #734

Author: alvaro-cuesta

backend/decky_loader/locales/en-US.json

@@ -102,6 +102,7 @@
         "freeze": "Freeze updates",
         "hide": "Quick access: Hide",
         "no_plugin": "No plugins installed!",
+        "open": "Open",
         "plugin_actions": "Plugin Actions",
         "reinstall": "Reinstall",
         "reload": "Reload",

frontend/src/components/PluginView.tsx

@@ -26,7 +26,12 @@ const PluginView: FC = () => {
 
   if (activePlugin) {
     return (
-      <Focusable onCancelButton={closeActivePlugin}>
+      <Focusable
+        onCancelButton={closeActivePlugin}
+        // Needed to focus inside the panel when opening plugin from settings menu
+        // Doesn't seem to do any harm (since this seems to need focus in normal cases too) so I made this unconditional
+        autoFocus
+      >
         <TitleView />
         <div style={{ height: '100%', paddingTop: '16px' }}>
           <ErrorBoundary>{(visible || activePlugin.alwaysRender) && activePlugin.content}</ErrorBoundary>

frontend/src/components/TitleView.tsx

@@ -58,7 +58,7 @@ const TitleView: FC = () => {
       >
         <FaArrowLeft style={{ marginTop: '-4px', display: 'block' }} />
       </DialogButton>
-      {activePlugin?.titleView || <div style={{ flex: 0.9 }}>{activePlugin.name}</div>}
+      {activePlugin.titleView || <div style={{ flex: 0.9 }}>{activePlugin.name}</div>}
     </Focusable>
   );
 };

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

@@ -5,11 +5,13 @@ import {
   GamepadEvent,
   Menu,
   MenuItem,
+  Navigation,
+  QuickAccessTab,
   ReorderableEntry,
   ReorderableList,
   showContextMenu,
 } from '@decky/ui';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaDownload, FaEllipsisH, FaRecycle } from 'react-icons/fa';
 
@@ -41,6 +43,7 @@ type PluginTableData = PluginData & {
   hidden: boolean;
   onHide(): void;
   onShow(): void;
+  onOpen(): void;
   isDeveloper: boolean;
 };
 
@@ -54,11 +57,13 @@ 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, onOpen } =
+    props.entry.data;
 
   const showCtxMenu = (e: MouseEvent | GamepadEvent) => {
     showContextMenu(
       <Menu label={t('PluginListIndex.plugin_actions')}>
+        <MenuItem onSelected={onOpen}>{t('PluginListIndex.open')}</MenuItem>
         <MenuItem
           onSelected={async () => {
             try {
@@ -147,7 +152,8 @@ type PluginData = {
 };
 
 export default function PluginList({ isDeveloper }: { isDeveloper: boolean }) {
-  const { plugins, updates, pluginOrder, setPluginOrder, frozenPlugins, hiddenPlugins } = useDeckyState();
+  const { plugins, updates, pluginOrder, setPluginOrder, frozenPlugins, hiddenPlugins, setActivePlugin } =
+    useDeckyState();
   const [_, setPluginOrderSetting] = useSetting<string[]>(
     'pluginOrder',
     plugins.map((plugin) => plugin.name),
@@ -158,13 +164,12 @@ export default function PluginList({ isDeveloper }: { isDeveloper: boolean }) {
     DeckyPluginLoader.checkPluginUpdates();
   }, []);
 
-  const [pluginEntries, setPluginEntries] = useState<ReorderableEntry<PluginTableData>[]>([]);
-  const hiddenPluginsService = DeckyPluginLoader.hiddenPluginsService;
-  const frozenPluginsService = DeckyPluginLoader.frozenPluginsService;
-
-  useEffect(() => {
-    setPluginEntries(
+  const pluginEntries = useMemo(
+    () =>
       plugins.map(({ name, version }) => {
+        const hiddenPluginsService = DeckyPluginLoader.hiddenPluginsService;
+        const frozenPluginsService = DeckyPluginLoader.frozenPluginsService;
+
         const frozen = frozenPlugins.includes(name);
         const hidden = hiddenPlugins.includes(name);
 
@@ -182,11 +187,15 @@ export default function PluginList({ isDeveloper }: { isDeveloper: boolean }) {
             onUnfreeze: () => frozenPluginsService.update(frozenPlugins.filter((pluginName) => name !== pluginName)),
             onHide: () => hiddenPluginsService.update([...hiddenPlugins, name]),
             onShow: () => hiddenPluginsService.update(hiddenPlugins.filter((pluginName) => name !== pluginName)),
+            onOpen: () => {
+              setActivePlugin(name);
+              Navigation.OpenQuickAccessMenu(QuickAccessTab.Decky);
+            },
           },
         };
       }),
-    );
-  }, [plugins, updates, hiddenPlugins]);
+    [plugins, updates, frozenPlugins, hiddenPlugins, setActivePlugin],
+  );
 
   if (plugins.length === 0) {
     return (