fix plugins menu scrolling, shut up typecript

* feat: add CEF Remote Debugging toggle

* feat: disable remote debugger on startup

* refactor: stop debugger instead of disable

* feat: add option to allow remote debugging by default

Co-authored-by: TrainDoctor <traindoctor@protonmail.com>

backend/helpers.py

@@ -2,11 +2,15 @@ import certifi
 import ssl
 import uuid
 import re
+import subprocess
 
 from aiohttp.web import middleware, Response
 from subprocess import check_output
 from time import sleep
 
+
+REMOTE_DEBUGGER_UNIT = "steam-web-debug-portforward.service"
+
 # global vars
 csrf_token = str(uuid.uuid4())
 ssl_ctx = ssl.create_default_context(cafile=certifi.where())
@@ -63,3 +67,17 @@ def get_user_group() -> str:
     if group == None:
         raise ValueError("helpers.get_user_group method called before group variable was set. Run helpers.set_user_group first.")
     return group
+
+async def is_systemd_unit_active(unit_name: str) -> bool:
+    res = subprocess.run(["systemctl", "is-active", unit_name], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+    return res.returncode == 0
+
+async def stop_systemd_unit(unit_name: str) -> subprocess.CompletedProcess:
+    cmd = ["systemctl", "stop", unit_name]
+
+    return subprocess.run(cmd, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+
+async def start_systemd_unit(unit_name: str) -> subprocess.CompletedProcess:
+    cmd = ["systemctl", "start", unit_name]
+
+    return subprocess.run(cmd, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)

backend/loader.py

@@ -88,7 +88,7 @@ class Loader:
 
     async def get_plugins(self, request):
         plugins = list(self.plugins.values())
-        return web.json_response([str(i) if not i.legacy else "$LEGACY_"+str(i) for i in plugins])
+        return web.json_response([{"name": str(i) if not i.legacy else "$LEGACY_"+str(i), "version": i.version} for i in plugins])
 
     def handle_frontend_assets(self, request):
         plugin = self.plugins[request.match_info["plugin_name"]]
@@ -116,13 +116,13 @@ class Loader:
                 self.logger.info(f"Plugin {plugin.name} is passive")
             self.plugins[plugin.name] = plugin.start()
             self.logger.info(f"Loaded {plugin.name}")
-            self.loop.create_task(self.dispatch_plugin(plugin.name if not plugin.legacy else "$LEGACY_" + plugin.name))
+            self.loop.create_task(self.dispatch_plugin(plugin.name if not plugin.legacy else "$LEGACY_" + plugin.name, plugin.version))
         except Exception as e:
             self.logger.error(f"Could not load {file}. {e}")
             print_exc()
 
-    async def dispatch_plugin(self, name):
-        await inject_to_tab("SP", f"window.importDeckyPlugin('{name}')")
+    async def dispatch_plugin(self, name, version):
+        await inject_to_tab("SP", f"window.importDeckyPlugin('{name}', '{version}')")
 
     def import_plugins(self):
         self.logger.info(f"import plugins from {self.plugin_path}")

backend/main.py

@@ -13,7 +13,7 @@ from subprocess import call
 
 # local modules
 from browser import PluginBrowser
-from helpers import csrf_middleware, get_csrf_token, get_user, get_user_group, set_user, set_user_group
+from helpers import csrf_middleware, get_csrf_token, get_user, get_user_group, set_user, set_user_group, stop_systemd_unit, REMOTE_DEBUGGER_UNIT
 from injector import inject_to_tab, tab_has_global_var
 from loader import Loader
 from updater import Updater
@@ -28,8 +28,9 @@ set_user_group()
 USER = get_user()
 GROUP = get_user_group()
 HOME_PATH = "/home/"+USER
+HOMEBREW_PATH = HOME_PATH+"/homebrew"
 CONFIG = {
-    "plugin_path": getenv("PLUGIN_PATH", HOME_PATH+"/homebrew/plugins"),
+    "plugin_path": getenv("PLUGIN_PATH", HOMEBREW_PATH+"/plugins"),
     "chown_plugin_path": getenv("CHOWN_PLUGIN_PATH", "1") == "1",
     "server_host": getenv("SERVER_HOST", "127.0.0.1"),
     "server_port": int(getenv("SERVER_PORT", "1337")),
@@ -47,6 +48,9 @@ async def chown_plugin_dir(_):
     if code_chown != 0 or code_chmod != 0:
         logger.error(f"chown/chmod exited with a non-zero exit code (chown: {code_chown}, chmod: {code_chmod})")
 
+def remote_debugging_allowed():
+    return path.exists(HOMEBREW_PATH + "/allow_remote_debugging")
+
 class PluginManager:
     def __init__(self) -> None:
         self.loop = get_event_loop()
@@ -66,6 +70,8 @@ class PluginManager:
             self.web_app.on_startup.append(chown_plugin_dir)
         self.loop.create_task(self.loader_reinjector())
         self.loop.create_task(self.load_plugins())
+        if not remote_debugging_allowed():
+            self.loop.create_task(stop_systemd_unit(REMOTE_DEBUGGER_UNIT))
         self.loop.set_exception_handler(self.exception_handler)
         self.web_app.add_routes([get("/auth/token", self.get_auth_token)])
 
@@ -107,7 +113,7 @@ class PluginManager:
 
     async def inject_javascript(self, request=None):
         try:
-            await inject_to_tab("SP", "try{" + open(path.join(path.dirname(__file__), "./static/plugin-loader.iife.js"), "r").read() + "}catch(e){console.error(e)}", True)
+            await inject_to_tab("SP", "try{window.deckyHasLoaded = true;(async()=>{while(!window.SP_REACT){await new Promise(r => setTimeout(r, 10))};" + open(path.join(path.dirname(__file__), "./static/plugin-loader.iife.js"), "r").read() + "})();}catch(e){console.error(e)}", True)
         except:
             logger.info("Failed to inject JavaScript into tab")
             pass

backend/plugin.py

@@ -5,7 +5,7 @@ from asyncio import (Lock, get_event_loop, new_event_loop,
 from concurrent.futures import ProcessPoolExecutor
 from importlib.util import module_from_spec, spec_from_file_location
 from json import dumps, load, loads
-from os import path, setuid
+from os import path, setgid, setuid
 from signal import SIGINT, signal
 from sys import exit
 from time import time
@@ -21,7 +21,13 @@ class PluginWrapper:
         self.socket_addr = f"/tmp/plugin_socket_{time()}"
         self.method_call_lock = Lock()
 
+        self.version = None
+
         json = load(open(path.join(plugin_path, plugin_directory, "plugin.json"), "r"))
+        if path.isfile(path.join(plugin_path, plugin_directory, "package.json")):
+            package_json = load(open(path.join(plugin_path, plugin_directory, "package.json"), "r"))
+            self.version = package_json["version"]
+
 
         self.legacy = False
         self.main_view_html = json["main_view_html"] if "main_view_html" in json else ""
@@ -43,6 +49,7 @@ class PluginWrapper:
         set_event_loop(new_event_loop())
         if self.passive:
             return
+        setgid(0 if "root" in self.flags else 1000)
         setuid(0 if "root" in self.flags else 1000)
         spec = spec_from_file_location("_", self.file)
         module = module_from_spec(spec)

backend/utilities.py

@@ -5,6 +5,7 @@ from aiohttp import ClientSession, web
 
 from injector import inject_to_tab
 import helpers
+import subprocess
 
 class Utilities:
     def __init__(self, context) -> None:
@@ -16,7 +17,10 @@ class Utilities:
             "confirm_plugin_install": self.confirm_plugin_install,
             "execute_in_tab": self.execute_in_tab,
             "inject_css_into_tab": self.inject_css_into_tab,
-            "remove_css_from_tab": self.remove_css_from_tab
+            "remove_css_from_tab": self.remove_css_from_tab,
+            "allow_remote_debugging": self.allow_remote_debugging,
+            "disallow_remote_debugging": self.disallow_remote_debugging,
+            "remote_debugging_allowed": self.remote_debugging_allowed
         }
 
         if context:
@@ -133,3 +137,15 @@ class Utilities:
                 "success": False,
                 "result": e
             }
+
+
+    async def remote_debugging_allowed(self):
+        return await helpers.is_systemd_unit_active(helpers.REMOTE_DEBUGGER_UNIT)
+
+    async def allow_remote_debugging(self):
+        await helpers.start_systemd_unit(helpers.REMOTE_DEBUGGER_UNIT)
+        return True
+
+    async def disallow_remote_debugging(self):
+        await helpers.stop_systemd_unit(helpers.REMOTE_DEBUGGER_UNIT)
+        return True

frontend/package.json

@@ -37,7 +37,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "^1.6.2",
+    "decky-frontend-lib": "^1.7.8",
     "react-icons": "^4.4.0"
   }
 }

frontend/pnpm-lock.yaml

@@ -9,7 +9,7 @@ specifiers:
   '@types/react': 16.14.0
   '@types/react-router': 5.1.18
   '@types/webpack': ^5.28.0
-  decky-frontend-lib: ^1.6.2
+  decky-frontend-lib: ^1.7.8
   husky: ^8.0.1
   import-sort-style-module: ^6.0.0
   inquirer: ^8.2.4
@@ -23,7 +23,7 @@ specifiers:
   typescript: ^4.7.4
 
 dependencies:
-  decky-frontend-lib: 1.6.2
+  decky-frontend-lib: 1.7.8
   react-icons: 4.4.0_react@16.14.0
 
 devDependencies:
@@ -806,8 +806,8 @@ packages:
       ms: 2.1.2
     dev: true
 
-  /decky-frontend-lib/1.6.2:
-    resolution: {integrity: sha512-O34rHg6BWYP99jxlosAl0hUfo+SmOyjN+TtcyutdIjvPkg/FgHwahTd+SMujTpZemV31c4JX8hdGnN/Z7tjL9g==}
+  /decky-frontend-lib/1.7.8:
+    resolution: {integrity: sha512-CO6EJDxw/Eb6Ovng29IhZxC7SrlGT/iWMgFtKp7x3e7SVfwk9VHygyYBeVHaicj4n4LMgNE8iehh5k22Keyvbw==}
     dependencies:
       minimist: 1.2.6
     dev: false

frontend/src/components/DeckyState.tsx

@@ -1,20 +1,33 @@
 import { FC, createContext, useContext, useEffect, useState } from 'react';
 
 import { Plugin } from '../plugin';
+import { PluginUpdateMapping } from '../store';
 
 interface PublicDeckyState {
   plugins: Plugin[];
   activePlugin: Plugin | null;
+  updates: PluginUpdateMapping | null;
+  hasLoaderUpdate?: boolean;
+  isLoaderUpdating: boolean;
 }
 
 export class DeckyState {
   private _plugins: Plugin[] = [];
   private _activePlugin: Plugin | null = null;
+  private _updates: PluginUpdateMapping | null = null;
+  private _hasLoaderUpdate: boolean = false;
+  private _isLoaderUpdating: boolean = false;
 
   public eventBus = new EventTarget();
 
   publicState(): PublicDeckyState {
-    return { plugins: this._plugins, activePlugin: this._activePlugin };
+    return {
+      plugins: this._plugins,
+      activePlugin: this._activePlugin,
+      updates: this._updates,
+      hasLoaderUpdate: this._hasLoaderUpdate,
+      isLoaderUpdating: this._isLoaderUpdating,
+    };
   }
 
   setPlugins(plugins: Plugin[]) {
@@ -32,12 +45,28 @@ export class DeckyState {
     this.notifyUpdate();
   }
 
+  setUpdates(updates: PluginUpdateMapping) {
+    this._updates = updates;
+    this.notifyUpdate();
+  }
+
+  setHasLoaderUpdate(hasUpdate: boolean) {
+    this._hasLoaderUpdate = hasUpdate;
+    this.notifyUpdate();
+  }
+
+  setIsLoaderUpdating(isUpdating: boolean) {
+    this._isLoaderUpdating = isUpdating;
+    this.notifyUpdate();
+  }
+
   private notifyUpdate() {
     this.eventBus.dispatchEvent(new Event('update'));
   }
 }
 
 interface DeckyStateContext extends PublicDeckyState {
+  setIsLoaderUpdating(hasUpdate: boolean): void;
   setActivePlugin(name: string): void;
   closeActivePlugin(): void;
 }
@@ -63,11 +92,14 @@ export const DeckyStateContextProvider: FC<Props> = ({ children, deckyState }) =
     return () => deckyState.eventBus.removeEventListener('update', onUpdate);
   }, []);
 
+  const setIsLoaderUpdating = (hasUpdate: boolean) => deckyState.setIsLoaderUpdating(hasUpdate);
   const setActivePlugin = (name: string) => deckyState.setActivePlugin(name);
   const closeActivePlugin = () => deckyState.closeActivePlugin();
 
   return (
-    <DeckyStateContext.Provider value={{ ...publicDeckyState, setActivePlugin, closeActivePlugin }}>
+    <DeckyStateContext.Provider
+      value={{ ...publicDeckyState, setIsLoaderUpdating, setActivePlugin, closeActivePlugin }}
+    >
       {children}
     </DeckyStateContext.Provider>
   );

frontend/src/components/NotificationBadge.tsx

@@ -0,0 +1,25 @@
+import { CSSProperties, FunctionComponent } from 'react';
+
+interface NotificationBadgeProps {
+  show?: boolean;
+  style?: CSSProperties;
+}
+
+const NotificationBadge: FunctionComponent<NotificationBadgeProps> = ({ show, style }) => {
+  return show ? (
+    <div
+      style={{
+        position: 'absolute',
+        top: '8px',
+        right: '8px',
+        height: '10px',
+        width: '10px',
+        background: 'orange',
+        borderRadius: '50%',
+        ...style,
+      }}
+    />
+  ) : null;
+};
+
+export default NotificationBadge;

frontend/src/components/PluginView.tsx

@@ -9,9 +9,10 @@ import {
 import { VFC } from 'react';
 
 import { useDeckyState } from './DeckyState';
+import NotificationBadge from './NotificationBadge';
 
 const PluginView: VFC = () => {
-  const { plugins, activePlugin, setActivePlugin } = useDeckyState();
+  const { plugins, updates, activePlugin, setActivePlugin } = useDeckyState();
 
   if (activePlugin) {
     return (
@@ -23,7 +24,6 @@ const PluginView: VFC = () => {
       </div>
     );
   }
-
   return (
     <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}>
       <PanelSection>
@@ -35,6 +35,7 @@ const PluginView: VFC = () => {
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                   <div>{icon}</div>
                   <div>{name}</div>
+                  <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} />
                 </div>
               </ButtonItem>
             </PanelSectionRow>

frontend/src/components/TitleView.tsx

@@ -8,7 +8,6 @@ const titleStyles: CSSProperties = {
   display: 'flex',
   paddingTop: '3px',
   paddingRight: '16px',
-  boxShadow: 'unset',
 };
 
 const TitleView: VFC = () => {

frontend/src/components/modals/PluginInstallModal.tsx

@@ -1,4 +1,4 @@
-import { ModalRoot, QuickAccessTab, Router, Spinner, sleep, staticClasses } from 'decky-frontend-lib';
+import { ModalRoot, QuickAccessTab, Router, Spinner, staticClasses } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
 
 interface PluginInstallModalProps {
@@ -20,9 +20,7 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, ha
       onOK={async () => {
         setLoading(true);
         await onOK();
-        Router.NavigateBackOrOpenMenu();
-        await sleep(250);
-        setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
+        setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 250);
       }}
       onCancel={async () => {
         await onCancel();

frontend/src/components/settings/pages/general/RemoteDebugging.tsx

@@ -0,0 +1,34 @@
+import { Field, Toggle } from 'decky-frontend-lib';
+import { useEffect, useState } from 'react';
+import { FaBug } from 'react-icons/fa';
+
+export default function RemoteDebuggingSettings() {
+  const [allowRemoteDebugging, setAllowRemoteDebugging] = useState<boolean>(false);
+  useEffect(() => {
+    (async () => {
+      const res = (await window.DeckyPluginLoader.callServerMethod('remote_debugging_allowed')) as { result: boolean };
+      setAllowRemoteDebugging(res.result);
+    })();
+  }, []);
+
+  return (
+    <Field
+      label="Allow Remote CEF Debugging"
+      description={
+        <span style={{ whiteSpace: 'pre-line' }}>
+          Allow unauthenticated access to the CEF debugger to anyone in your network
+        </span>
+      }
+      icon={<FaBug style={{ display: 'block' }} />}
+    >
+      <Toggle
+        value={allowRemoteDebugging}
+        onChange={(toggleValue) => {
+          setAllowRemoteDebugging(toggleValue);
+          if (toggleValue) window.DeckyPluginLoader.callServerMethod('allow_remote_debugging');
+          else window.DeckyPluginLoader.callServerMethod('disallow_remote_debugging');
+        }}
+      />
+    </Field>
+  );
+}

frontend/src/components/settings/pages/general/Updater.tsx

@@ -3,12 +3,15 @@ import { useEffect, useState } from 'react';
 import { FaArrowDown } from 'react-icons/fa';
 
 import { VerInfo, callUpdaterMethod, finishUpdate } from '../../../../updater';
+import { useDeckyState } from '../../../DeckyState';
 
 export default function UpdaterSettings() {
   const [versionInfo, setVersionInfo] = useState<VerInfo | null>(null);
+  const [checkingForUpdates, setCheckingForUpdates] = useState<boolean>(false);
+  const { isLoaderUpdating, setIsLoaderUpdating } = useDeckyState();
   const [updateProgress, setUpdateProgress] = useState<number>(-1);
   const [reloading, setReloading] = useState<boolean>(false);
-  const [checkingForUpdates, setCheckingForUpdates] = useState<boolean>(false);
+
   useEffect(() => {
     (async () => {
       const res = (await callUpdaterMethod('get_version')) as { result: VerInfo };
@@ -16,6 +19,20 @@ export default function UpdaterSettings() {
     })();
   }, []);
 
+  useEffect(() => {
+    window.DeckyUpdater = {
+      updateProgress: (i) => {
+        setUpdateProgress(i);
+        setIsLoaderUpdating(true);
+      },
+      finish: async () => {
+        setUpdateProgress(0);
+        setReloading(true);
+        await finishUpdate();
+      },
+    };
+  }, []);
+
   return (
     <Field
       label="Updates"
@@ -34,7 +51,7 @@ export default function UpdaterSettings() {
         )
       }
     >
-      {updateProgress == -1 ? (
+      {updateProgress == -1 && !isLoaderUpdating ? (
         <DialogButton
           disabled={!versionInfo?.updatable || checkingForUpdates}
           onClick={
@@ -46,16 +63,6 @@ export default function UpdaterSettings() {
                   setCheckingForUpdates(false);
                 }
               : async () => {
-                  window.DeckyUpdater = {
-                    updateProgress: (i) => {
-                      setUpdateProgress(i);
-                    },
-                    finish: async () => {
-                      setUpdateProgress(0);
-                      setReloading(true);
-                      await finishUpdate();
-                    },
-                  };
                   setUpdateProgress(0);
                   callUpdaterMethod('do_update');
                 }

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

@@ -2,7 +2,8 @@ import { DialogButton, Field, TextField } from 'decky-frontend-lib';
 import { useState } from 'react';
 import { FaShapes } from 'react-icons/fa';
 
-import { installFromURL } from '../../../store/Store';
+import { installFromURL } from '../../../../store';
+import RemoteDebuggingSettings from './RemoteDebugging';
 import UpdaterSettings from './Updater';
 
 export default function GeneralSettings() {
@@ -20,6 +21,7 @@ export default function GeneralSettings() {
         />
       </Field> */}
       <UpdaterSettings />
+      <RemoteDebuggingSettings />
       <Field
         label="Manual plugin install"
         description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}

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

@@ -1,10 +1,16 @@
-import { DialogButton, Menu, MenuItem, showContextMenu, staticClasses } from 'decky-frontend-lib';
-import { FaEllipsisH } from 'react-icons/fa';
+import { DialogButton, Focusable, Menu, MenuItem, showContextMenu } from 'decky-frontend-lib';
+import { useEffect } from 'react';
+import { FaDownload, FaEllipsisH } from 'react-icons/fa';
 
+import { requestPluginInstall } from '../../../../store';
 import { useDeckyState } from '../../../DeckyState';
 
 export default function PluginList() {
-  const { plugins } = useDeckyState();
+  const { plugins, updates } = useDeckyState();
+
+  useEffect(() => {
+    window.DeckyPluginLoader.checkPluginUpdates();
+  }, []);
 
   if (plugins.length === 0) {
     return (
@@ -16,27 +22,45 @@ export default function PluginList() {
 
   return (
     <ul style={{ listStyleType: 'none' }}>
-      {plugins.map(({ name }) => (
-        <li style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-          <span>{name}</span>
-          <div className={staticClasses.Title} style={{ marginLeft: 'auto', boxShadow: 'none' }}>
-            <DialogButton
-              style={{ height: '40px', width: '40px', padding: '10px 12px' }}
-              onClick={(e: MouseEvent) =>
-                showContextMenu(
-                  <Menu label="Plugin Actions">
-                    <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(name)}>Reload</MenuItem>
-                    <MenuItem onSelected={() => window.DeckyPluginLoader.uninstallPlugin(name)}>Uninstall</MenuItem>
-                  </Menu>,
-                  e.currentTarget ?? window,
-                )
-              }
-            >
-              <FaEllipsisH />
-            </DialogButton>
-          </div>
-        </li>
-      ))}
+      {plugins.map(({ name, version }) => {
+        const update = updates?.get(name);
+        return (
+          <li style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingBottom: '10px' }}>
+            <span>
+              {name} {version}
+            </span>
+            <Focusable style={{ marginLeft: 'auto', boxShadow: 'none', display: 'flex', justifyContent: 'right' }}>
+              {update && (
+                <DialogButton
+                  style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
+                  onClick={() => requestPluginInstall(name, update)}
+                >
+                  <div style={{ display: 'flex', flexDirection: 'row' }}>
+                    Update to {update.name}
+                    <FaDownload style={{ paddingLeft: '2rem' }} />
+                  </div>
+                </DialogButton>
+              )}
+              <DialogButton
+                style={{ height: '40px', width: '40px', padding: '10px 12px', minWidth: '40px' }}
+                onClick={(e: MouseEvent) =>
+                  showContextMenu(
+                    <Menu label="Plugin Actions">
+                      <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(name, version)}>
+                        Reload
+                      </MenuItem>
+                      <MenuItem onSelected={() => window.DeckyPluginLoader.uninstallPlugin(name)}>Uninstall</MenuItem>
+                    </Menu>,
+                    e.currentTarget ?? window,
+                  )
+                }
+              >
+                <FaEllipsisH />
+              </DialogButton>
+            </Focusable>
+          </li>
+        );
+      })}
     </ul>
   );
 }

frontend/src/components/store/PluginCard.tsx

@@ -15,18 +15,15 @@ import {
   LegacyStorePlugin,
   StorePlugin,
   StorePluginVersion,
+  isLegacyPlugin,
   requestLegacyPluginInstall,
   requestPluginInstall,
-} from './Store';
+} from '../../store';
 
 interface PluginCardProps {
   plugin: StorePlugin | LegacyStorePlugin;
 }
 
-function isLegacyPlugin(plugin: LegacyStorePlugin | StorePlugin): plugin is LegacyStorePlugin {
-  return 'artifact' in plugin;
-}
-
 const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
   const [selectedOption, setSelectedOption] = useState<number>(0);
   const buttonRef = useRef<HTMLDivElement>(null);
@@ -119,14 +116,21 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             <p className={joinClassNames(staticClasses.PanelSectionRow)}>
               <span>Author: {plugin.author}</span>
             </p>
-            <p className={joinClassNames('deckyStoreCardTagsContainer', staticClasses.PanelSectionRow)}>
-              <span>Tags:</span>
+            <p
+              className={joinClassNames('deckyStoreCardTagsContainer', staticClasses.PanelSectionRow)}
+              style={{
+                padding: '0 16px',
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '5px 10px',
+              }}
+            >
+              <span style={{ padding: '5px 0' }}>Tags:</span>
               {plugin.tags.map((tag: string) => (
                 <span
                   className="deckyStoreCardTag"
                   style={{
                     padding: '5px',
-                    marginRight: '10px',
                     borderRadius: '5px',
                     background: tag == 'root' ? '#842029' : '#ACB2C947',
                   }}
@@ -140,7 +144,6 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                   style={{
                     color: '#232120',
                     padding: '5px',
-                    marginRight: '10px',
                     borderRadius: '5px',
                     background: '#EDE841',
                   }}
@@ -180,7 +183,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                 onClick={() =>
                   isLegacyPlugin(plugin)
                     ? requestLegacyPluginInstall(plugin, Object.keys(plugin.versions)[selectedOption])
-                    : requestPluginInstall(plugin, plugin.versions[selectedOption])
+                    : requestPluginInstall(plugin.name, plugin.versions[selectedOption])
                 }
               >
                 Install

frontend/src/components/store/Store.tsx

@@ -1,111 +1,21 @@
-import { ModalRoot, SteamSpinner, showModal, staticClasses } from 'decky-frontend-lib';
+import { SteamSpinner } from 'decky-frontend-lib';
 import { FC, useEffect, useState } from 'react';
 
+import { LegacyStorePlugin, StorePlugin, getLegacyPluginList, getPluginList } from '../../store';
 import PluginCard from './PluginCard';
 
-export interface StorePluginVersion {
-  name: string;
-  hash: string;
-}
-
-export interface StorePlugin {
-  id: number;
-  name: string;
-  versions: StorePluginVersion[];
-  author: string;
-  description: string;
-  tags: string[];
-}
-
-export interface LegacyStorePlugin {
-  artifact: string;
-  versions: {
-    [version: string]: string;
-  };
-  author: string;
-  description: string;
-  tags: string[];
-}
-
-export async function installFromURL(url: string) {
-  const formData = new FormData();
-  const splitURL = url.split('/');
-  formData.append('name', splitURL[splitURL.length - 1].replace('.zip', ''));
-  formData.append('artifact', url);
-  await fetch('http://localhost:1337/browser/install_plugin', {
-    method: 'POST',
-    body: formData,
-    credentials: 'include',
-    headers: {
-      Authentication: window.deckyAuthToken,
-    },
-  });
-}
-
-export function requestLegacyPluginInstall(plugin: LegacyStorePlugin, selectedVer: string) {
-  showModal(
-    <ModalRoot
-      onOK={() => {
-        const formData = new FormData();
-        formData.append('name', plugin.artifact);
-        formData.append('artifact', `https://github.com/${plugin.artifact}/archive/refs/tags/${selectedVer}.zip`);
-        formData.append('version', selectedVer);
-        formData.append('hash', plugin.versions[selectedVer]);
-        fetch('http://localhost:1337/browser/install_plugin', {
-          method: 'POST',
-          body: formData,
-          credentials: 'include',
-          headers: {
-            Authentication: window.deckyAuthToken,
-          },
-        });
-      }}
-      onCancel={() => {
-        // do nothing
-      }}
-    >
-      <div className={staticClasses.Title} style={{ flexDirection: 'column', boxShadow: 'unset' }}>
-        Using legacy plugins
-      </div>
-      You are currently installing a <b>legacy</b> plugin. Legacy plugins are no longer supported and may have issues.
-      Legacy plugins do not support gamepad input. To interact with a legacy plugin, you will need to use the
-      touchscreen.
-    </ModalRoot>,
-  );
-}
-
-export async function requestPluginInstall(plugin: StorePlugin, selectedVer: StorePluginVersion) {
-  const formData = new FormData();
-  formData.append('name', plugin.name);
-  formData.append('artifact', `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/versions/${selectedVer.hash}.zip`);
-  formData.append('version', selectedVer.name);
-  formData.append('hash', selectedVer.hash);
-  await fetch('http://localhost:1337/browser/install_plugin', {
-    method: 'POST',
-    body: formData,
-    credentials: 'include',
-    headers: {
-      Authentication: window.deckyAuthToken,
-    },
-  });
-}
-
 const StorePage: FC<{}> = () => {
   const [data, setData] = useState<StorePlugin[] | null>(null);
   const [legacyData, setLegacyData] = useState<LegacyStorePlugin[] | null>(null);
 
   useEffect(() => {
     (async () => {
-      const res = await fetch('https://beta.deckbrew.xyz/plugins', {
-        method: 'GET',
-      }).then((r) => r.json());
+      const res = await getPluginList();
       console.log(res);
-      setData(res.filter((x: StorePlugin) => x.name !== 'Example Plugin'));
+      setData(res);
     })();
     (async () => {
-      const res = await fetch('https://plugins.deckbrew.xyz/get_plugins', {
-        method: 'GET',
-      }).then((r) => r.json());
+      const res = await getLegacyPluginList();
       console.log(res);
       setLegacyData(res);
     })();

frontend/src/index.tsx

@@ -1,3 +1,6 @@
+import { ButtonItem, CommonUIModule, webpackCache } from 'decky-frontend-lib';
+import { forwardRef } from 'react';
+
 import PluginLoader from './plugin-loader';
 import { DeckyUpdater } from './updater';
 
@@ -9,18 +12,40 @@ declare global {
     syncDeckyPlugins: Function;
     deckyHasLoaded: boolean;
     deckyAuthToken: string;
+    webpackJsonp: any;
   }
 }
+
+// HACK to fix plugins using webpack v4 push
+
+const v4Cache = {};
+for (let m of Object.keys(webpackCache)) {
+  v4Cache[m] = { exports: webpackCache[m] };
+}
+
+if (!window.webpackJsonp || window.webpackJsonp.deckyShimmed) {
+  window.webpackJsonp = {
+    deckyShimmed: true,
+    push: (mod: any): any => {
+      if (mod[1].get_require) return { c: v4Cache };
+    },
+  };
+  CommonUIModule.__deckyButtonItemShim = forwardRef((props: any, ref: any) => {
+    // tricks the old filter into working
+    const dummy = `childrenContainerWidth:"min"`;
+    return <ButtonItem ref={ref} _shim={dummy} {...props} />;
+  });
+}
+
 (async () => {
-  window.deckyHasLoaded = true;
   window.deckyAuthToken = await fetch('http://127.0.0.1:1337/auth/token').then((r) => r.text());
 
   window.DeckyPluginLoader?.dismountAll();
   window.DeckyPluginLoader?.deinit();
 
   window.DeckyPluginLoader = new PluginLoader();
-  window.importDeckyPlugin = function (name: string) {
-    window.DeckyPluginLoader?.importPlugin(name);
+  window.importDeckyPlugin = function (name: string, version: string) {
+    window.DeckyPluginLoader?.importPlugin(name, version);
   };
 
   window.syncDeckyPlugins = async function () {
@@ -31,8 +56,10 @@ declare global {
       })
     ).json();
     for (const plugin of plugins) {
-      if (!window.DeckyPluginLoader.hasPlugin(plugin)) window.DeckyPluginLoader?.importPlugin(plugin);
+      if (!window.DeckyPluginLoader.hasPlugin(plugin.name))
+        window.DeckyPluginLoader?.importPlugin(plugin.name, plugin.version);
     }
+    window.DeckyPluginLoader.checkPluginUpdates();
   };
 
   setTimeout(() => window.syncDeckyPlugins(), 5000);

frontend/src/plugin-loader.tsx

@@ -1,9 +1,10 @@
-import { ModalRoot, QuickAccessTab, showModal, staticClasses } from 'decky-frontend-lib';
+import { ModalRoot, QuickAccessTab, Router, showModal, sleep, staticClasses } from 'decky-frontend-lib';
 import { FaPlug } from 'react-icons/fa';
 
-import { DeckyState, DeckyStateContextProvider } from './components/DeckyState';
+import { DeckyState, DeckyStateContextProvider, useDeckyState } from './components/DeckyState';
 import LegacyPlugin from './components/LegacyPlugin';
 import PluginInstallModal from './components/modals/PluginInstallModal';
+import NotificationBadge from './components/NotificationBadge';
 import PluginView from './components/PluginView';
 import SettingsPage from './components/settings';
 import StorePage from './components/store/Store';
@@ -11,6 +12,7 @@ import TitleView from './components/TitleView';
 import Logger from './logger';
 import { Plugin } from './plugin';
 import RouterHook from './router-hook';
+import { checkForUpdates } from './store';
 import TabsHook from './tabs-hook';
 import Toaster from './toaster';
 import { VerInfo, callUpdaterMethod } from './updater';
@@ -29,12 +31,17 @@ class PluginLoader extends Logger {
 
   private reloadLock: boolean = false;
   // stores a list of plugin names which requested to be reloaded
-  private pluginReloadQueue: string[] = [];
+  private pluginReloadQueue: { name: string; version?: string }[] = [];
 
   constructor() {
     super(PluginLoader.name);
     this.log('Initialized');
 
+    const TabIcon = () => {
+      const { updates, hasLoaderUpdate } = useDeckyState();
+      return <NotificationBadge show={(updates && updates.size > 0) || hasLoaderUpdate} />;
+    };
+
     this.tabsHook.add({
       id: QuickAccessTab.Decky,
       title: null,
@@ -44,7 +51,14 @@ class PluginLoader extends Logger {
           <PluginView />
         </DeckyStateContextProvider>
       ),
-      icon: <FaPlug />,
+      icon: (
+        <DeckyStateContextProvider deckyState={this.deckyState}>
+          <>
+            <FaPlug />
+            <TabIcon />
+          </>
+        </DeckyStateContextProvider>
+      ),
     });
 
     this.routerHook.addRoute('/decky/store', () => <StorePage />);
@@ -62,7 +76,28 @@ class PluginLoader extends Logger {
     if (versionInfo?.remote && versionInfo?.remote?.tag_name != versionInfo?.current) {
       this.toaster.toast({
         title: 'Decky',
-        body: `Update to ${versionInfo?.remote?.tag_name} availiable!`,
+        body: `Update to ${versionInfo?.remote?.tag_name} available!`,
+        onClick: () => Router.Navigate('/decky/settings'),
+      });
+      this.deckyState.setHasLoaderUpdate(true);
+    }
+    await sleep(7000);
+    await this.notifyPluginUpdates();
+  }
+
+  public async checkPluginUpdates() {
+    const updates = await checkForUpdates(this.plugins);
+    this.deckyState.setUpdates(updates);
+    return updates;
+  }
+
+  public async notifyPluginUpdates() {
+    const updates = await this.checkPluginUpdates();
+    if (updates?.size > 0) {
+      this.toaster.toast({
+        title: 'Decky',
+        body: `Updates available for ${updates.size} plugin${updates.size > 1 ? 's' : ''}!`,
+        onClick: () => Router.Navigate('/decky/settings/plugins'),
       });
     }
   }
@@ -128,10 +163,10 @@ class PluginLoader extends Logger {
     this.deckyState.setPlugins(this.plugins);
   }
 
-  public async importPlugin(name: string) {
+  public async importPlugin(name: string, version?: string | undefined) {
     if (this.reloadLock) {
       this.log('Reload currently in progress, adding to queue', name);
-      this.pluginReloadQueue.push(name);
+      this.pluginReloadQueue.push({ name, version: version });
       return;
     }
 
@@ -144,7 +179,7 @@ class PluginLoader extends Logger {
       if (name.startsWith('$LEGACY_')) {
         await this.importLegacyPlugin(name.replace('$LEGACY_', ''));
       } else {
-        await this.importReactPlugin(name);
+        await this.importReactPlugin(name, version);
       }
 
       this.deckyState.setPlugins(this.plugins);
@@ -155,12 +190,12 @@ class PluginLoader extends Logger {
       this.reloadLock = false;
       const nextPlugin = this.pluginReloadQueue.shift();
       if (nextPlugin) {
-        this.importPlugin(nextPlugin);
+        this.importPlugin(nextPlugin.name, nextPlugin.version);
       }
     }
   }
 
-  private async importReactPlugin(name: string) {
+  private async importReactPlugin(name: string, version?: string) {
     let res = await fetch(`http://127.0.0.1:1337/plugins/${name}/frontend_bundle`, {
       credentials: 'include',
       headers: {
@@ -172,6 +207,7 @@ class PluginLoader extends Logger {
       this.plugins.push({
         ...plugin,
         name: name,
+        version: version,
       });
     } else throw new Error(`${name} frontend_bundle not OK`);
   }

frontend/src/plugin.ts

@@ -1,5 +1,6 @@
 export interface Plugin {
   name: string;
+  version?: string;
   icon: JSX.Element;
   content?: JSX.Element;
   onDismount?(): void;

frontend/src/store.tsx

@@ -0,0 +1,121 @@
+import { ModalRoot, showModal, staticClasses } from 'decky-frontend-lib';
+
+import { Plugin } from './plugin';
+
+export interface StorePluginVersion {
+  name: string;
+  hash: string;
+}
+
+export interface StorePlugin {
+  id: number;
+  name: string;
+  versions: StorePluginVersion[];
+  author: string;
+  description: string;
+  tags: string[];
+}
+
+export interface LegacyStorePlugin {
+  artifact: string;
+  versions: {
+    [version: string]: string;
+  };
+  author: string;
+  description: string;
+  tags: string[];
+}
+
+// name: version
+export type PluginUpdateMapping = Map<string, StorePluginVersion>;
+
+export function getPluginList(): Promise<StorePlugin[]> {
+  return fetch('https://beta.deckbrew.xyz/plugins', {
+    method: 'GET',
+  }).then((r) => r.json());
+}
+
+export function getLegacyPluginList(): Promise<LegacyStorePlugin[]> {
+  return fetch('https://plugins.deckbrew.xyz/get_plugins', {
+    method: 'GET',
+  }).then((r) => r.json());
+}
+
+export async function installFromURL(url: string) {
+  const formData = new FormData();
+  const splitURL = url.split('/');
+  formData.append('name', splitURL[splitURL.length - 1].replace('.zip', ''));
+  formData.append('artifact', url);
+  await fetch('http://localhost:1337/browser/install_plugin', {
+    method: 'POST',
+    body: formData,
+    credentials: 'include',
+    headers: {
+      Authentication: window.deckyAuthToken,
+    },
+  });
+}
+
+export function requestLegacyPluginInstall(plugin: LegacyStorePlugin, selectedVer: string) {
+  showModal(
+    <ModalRoot
+      onOK={() => {
+        const formData = new FormData();
+        formData.append('name', plugin.artifact);
+        formData.append('artifact', `https://github.com/${plugin.artifact}/archive/refs/tags/${selectedVer}.zip`);
+        formData.append('version', selectedVer);
+        formData.append('hash', plugin.versions[selectedVer]);
+        fetch('http://localhost:1337/browser/install_plugin', {
+          method: 'POST',
+          body: formData,
+          credentials: 'include',
+          headers: {
+            Authentication: window.deckyAuthToken,
+          },
+        });
+      }}
+      onCancel={() => {
+        // do nothing
+      }}
+    >
+      <div className={staticClasses.Title} style={{ flexDirection: 'column', boxShadow: 'unset' }}>
+        Using legacy plugins
+      </div>
+      You are currently installing a <b>legacy</b> plugin. Legacy plugins are no longer supported and may have issues.
+      Legacy plugins do not support gamepad input. To interact with a legacy plugin, you will need to use the
+      touchscreen.
+    </ModalRoot>,
+  );
+}
+
+export async function requestPluginInstall(plugin: string, selectedVer: StorePluginVersion) {
+  const formData = new FormData();
+  formData.append('name', plugin);
+  formData.append('artifact', `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/versions/${selectedVer.hash}.zip`);
+  formData.append('version', selectedVer.name);
+  formData.append('hash', selectedVer.hash);
+  await fetch('http://localhost:1337/browser/install_plugin', {
+    method: 'POST',
+    body: formData,
+    credentials: 'include',
+    headers: {
+      Authentication: window.deckyAuthToken,
+    },
+  });
+}
+
+export async function checkForUpdates(plugins: Plugin[]): Promise<PluginUpdateMapping> {
+  const serverData = await getPluginList();
+  const updateMap = new Map<string, StorePluginVersion>();
+  for (let plugin of plugins) {
+    const remotePlugin = serverData?.find((x) => x.name == plugin.name);
+    if (remotePlugin && remotePlugin.versions?.length > 0 && plugin.version != remotePlugin?.versions?.[0]?.name) {
+      updateMap.set(plugin.name, remotePlugin.versions[0]);
+    }
+  }
+  return updateMap;
+}
+
+export function isLegacyPlugin(plugin: LegacyStorePlugin | StorePlugin): plugin is LegacyStorePlugin {
+  return 'artifact' in plugin;
+}