Fix http_request not allowing bodys (#352)

* Redesign store, add comments for filtering

* Improve installation/uninstallation modals

* Fix store comment to be easier to fix

* Add source code info to about page

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,36 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: bug
-assignees: ''
-
----
-
-**Description**
-[A clear and concise description of what the bug is.]
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-[A clear and concise description of what you expected to happen.]
-
-**Screenshots**
-[If applicable, add screenshots to help explain your problem.]
-
-**Version information**
- - SteamOS Version: ``[Run ``uname -a`` and place the output here. Leave the single quotations outside.]``
- - Selected Update Channel: [Stable, Beta or Preview.]
-
-**Logs**
-[Please reboot your deck (if possible) when attempting to recreate the issue, then run
-``cd ~ && journalctl -b0  -u plugin_loader.service > backendlog.txt``. This will save the log file to ``~`` aka ``/home/deck``. Please upload the file here in place of this textblock.]
-
-**Additional context**
-Have you modified the read-only filesystem at any point?  
-[Yes or No.]

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,73 @@
+name: Bug report
+description: File a bug/issue
+title: "[BUG] <title>"
+labels: [bug]
+body:
+  - type: checkboxes
+    id: low-effort-checks
+    attributes:
+      label: Please confirm
+      description: Issues without all checks may be ignored/closed.
+      options:
+        - label: I have searched existing issues
+        - label: This issue is not a duplicate of an existing one
+        - label: I have checked the [common issues section in the readme file](https://github.com/SteamDeckHomebrew/decky-loader#-common-issues)
+
+  - type: textarea
+    attributes:
+      label: Bug Report Description
+      description: A clear and concise description of what the bug is and if possible, the steps you used to get to the bug. If appropriate, include screenshots or videos.
+      placeholder: |
+        When I try to use ...
+
+        Steps to reproduce the behavior:
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected Behaviour
+      description: A brief description of the expected behavior.
+      placeholder: It should be ...
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: SteamOS version
+#      description: Can be found with `uname -a`
+#      placeholder: "Linux steamdeck 5.13.0-valve36-1-neptune #1 SMP PREEMPT Mon, 19 Dec 2022 23:39:41 +0000 x86_64 GNU/Linux"
+      placeholder: "SteamOS 3.4.3 Stable"
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: Selected Update Channel
+      description: Which branch of Decky are you on?
+      multiple: false
+      options:
+         - Stable
+         - Prerelease
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: Have you modified the read-only filesystem at any point?
+      description: Describe how here, if you haven't done anything you can leave this blank
+      placeholder: Yes, I've installed neofetch via pacman.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Logs
+      description: Please reboot your deck (if possible) when attempting to recreate the issue, then run ``cd ~ && journalctl -b0  -u plugin_loader.service > deckylog.txt``. This will save the log file to ``~`` aka ``/home/deck``. Please upload the file here
+      placeholder: deckylog.txt
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Steam Deck Homebrew Discord Server
+    url: https://discord.gg/ZU74G2NJzk
+    about: Please ask and answer questions here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,35 @@
+name: Feature request
+description: Request a new feature (NOT A PLUGIN)
+title: "[Request] <title>"
+labels: [feature request]
+body:
+  - type: checkboxes
+    id: low-effort-checks
+    attributes:
+      label: Please confirm
+      description: Issues without all checks may be ignored/closed.
+      options:
+        - label: I have searched existing issues
+        - label: This issue is not a duplicate of an existing one
+        - label: This is not a request for a plugin
+
+  - type: textarea
+    attributes:
+      label: Feature Request Description
+      description: A clear and concise description of what the new feature. 
+      placeholder: |
+        Decky plugins should be sortable in the quick access menu
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Further Description
+      description: A further explanation of the feature. If appropriate, include screenshots or videos.
+      placeholder: |
+        This would help make the UI clearer and easier to use as there is less clutter in the QAM.
+        It would also make it faster to access plugins that are used more.
+
+        This could be implemented by adding ...
+    validations:
+      required: false

.github/workflows/build.yml

@@ -159,7 +159,7 @@ jobs:
       uses: softprops/action-gh-release@v1
       if: ${{ github.event_name == 'workflow_dispatch' && !env.ACT  }}
       with:
-        name: Prerelease ${{ steps.ready_tag.outputs.tag_name }}
+        name: Release ${{ steps.ready_tag.outputs.tag_name }}
         tag_name: ${{ steps.ready_tag.outputs.tag_name }}
         files: ./dist/PluginLoader
         prerelease: false

README.md

@@ -2,6 +2,8 @@
   <a name="logo" href="https://deckbrew.xyz/"><img src="https://deckbrew.xyz/logo.png" alt="Deckbrew logo" width="200"></a>
   <br>
   Decky Loader
+  <br>
+  <a name="logo" href="https://github.com/SteamDeckHomebrew/decky-installer/releases/latest/download/decky_installer.desktop"><img src="./docs/images/download_button.png"  alt="Download decky" width="350"></a>
 </h1>
 
 <p align="center">
@@ -36,11 +38,7 @@ For more information about Decky Loader as well as documentation and development
 - If you are using any software that uses port 1337 or 8080, please change its port to something else or uninstall it.
 
 ## 💾 Installation
-
-1. Press the <img src="./docs/images/light/steam.svg#gh-dark-mode-only" height=16><img src="./docs/images/dark/steam.svg#gh-light-mode-only" height=16> button and open the Settings menu.
-1. Navigate to the System menu and scroll to the System Settings. Toggle "Enable Developer Mode" so it is enabled.
-1. Navigate to the Developer menu and scroll to Miscellaneous. Toggle "CEF Remote Debugging" so it is enabled.
-1. Select "Restart Now" to apply your changes.
+- This installation can be done without an admin/sudo password set.
 1. Prepare a mouse and keyboard if possible.
    - Keyboards and mice can be connected to the Steam Deck via USB-C or Bluetooth.
    - Many Bluetooth keyboard and mouse apps are available for iOS and Android.
@@ -48,24 +46,27 @@ For more information about Decky Loader as well as documentation and development
    - If you have no other options, use the right trackpad as a mouse and press <img src="./docs/images/light/steam.svg#gh-dark-mode-only" height=16><img src="./docs/images/dark/steam.svg#gh-light-mode-only" height=16>+<img src="./docs/images/light/x.svg#gh-dark-mode-only" height=16><img src="./docs/images/dark/x.svg#gh-light-mode-only" height=16> to open the on-screen keyboard as needed.
 1. Press the <img src="./docs/images/light/steam.svg#gh-dark-mode-only" height=16><img src="./docs/images/dark/steam.svg#gh-light-mode-only" height=16> button and open the Power menu.
 1. Select "Switch to Desktop".
-1. Open the Konsole app and enter the command `passwd`. You can skip this step if you have already created a sudo password using this command. ([YouTube Guide](https://www.youtube.com/watch?v=1vOMYGj22rQ))
-1. You will be prompted to create a password. Your text will not be visible. After you press enter, you will need to type your password again to confirm.
-1. Choose the version of Decky Loader you want to install and paste the following command into the Konsole app.
+1. Navigate to this Github page on a browser of your choice.
+1. Press the 'Download' button at the top of the page.
+1. Run the downloaded file by clicking on it in Dolphin (the file manager).
+1. Either type your admin password or allow Decky to temporarily set your password to `Decky!`
+1. Choose the version of Decky Loader you want to install.
    - **Latest Release**  
      Intended for most users. This is the latest stable version of Decky Loader.  
-     `curl -L https://github.com/SteamDeckHomebrew/decky-loader/raw/main/dist/install_release.sh | sh`
    - **Latest Pre-Release**  
-     Intended for plugin developers. Pre-releases are unlikely to be fully stable but contain the latest changes. For more information on plugin development, please consult [the wiki page](https://deckbrew.xyz/en/loader-dev/development).  
-     `curl -L https://github.com/SteamDeckHomebrew/decky-loader/raw/main/dist/install_prerelease.sh | sh`
+     Intended for plugin developers. Pre-releases are unlikely to be fully stable but contain the latest changes. For more information on plugin development, please consult [the wiki page](https://deckbrew.xyz/en/loader-dev/development).
 1. Open the Return to Gaming Mode shortcut on your desktop.
 
+- There is also a fast install for those who can use Konsole. Run `curl -L https://github.com/SteamDeckHomebrew/decky-installer/releases/latest/download/install_release.sh | sh` and type your password when prompted.
+
 ### 👋 Uninstallation
 
 We are sorry to see you go! If you are considering uninstalling because you are having issues, please consider [opening an issue](https://github.com/SteamDeckHomebrew/decky-loader/issues) or [joining our Discord](https://discord.gg/ZU74G2NJzk) so we can help you and other users.
 
 1. Press the <img src="./docs/images/light/steam.svg#gh-dark-mode-only" height=16><img src="./docs/images/dark/steam.svg#gh-light-mode-only" height=16> button and open the Power menu.
 1. Select "Switch to Desktop".
-1. Open the Konsole app and run `curl -L https://github.com/SteamDeckHomebrew/decky-loader/raw/main/dist/uninstall.sh | sh`.
+1. Run the installer file again, and select `uninstall decky loader` 
+- There is also a fast uninstall for those who can use Konsole. Run `curl -L https://github.com/SteamDeckHomebrew/decky-installer/releases/latest/download/uninstall.sh | sh` and type your password when prompted.
 
 ## 🚀 Getting Started
 

backend/injector.py

@@ -394,9 +394,12 @@ async def get_tab_lambda(test) -> Tab:
         raise ValueError(f"Tab not found by lambda")
     return tab
 
+def tab_is_gamepadui(t: Tab) -> bool:
+    return "https://steamloopback.host/routes/" in t.url and (t.title == "Steam Shared Context presented by Valve™" or t.title == "Steam" or t.title == "SP")
+
 async def get_gamepadui_tab() -> Tab:
     tabs = await get_tabs()
-    tab = next((i for i in tabs if ("https://steamloopback.host/routes/" in i.url and (i.title == "Steam" or i.title == "SP"))), None)
+    tab = next((i for i in tabs if tab_is_gamepadui(i)), None)
     if not tab:
         raise ValueError(f"GamepadUI Tab not found")
     return tab
@@ -405,3 +408,11 @@ async def inject_to_tab(tab_name, js, run_async=False):
     tab = await get_tab(tab_name)
 
     return await tab.evaluate_js(js, run_async)
+
+async def close_old_tabs():
+    tabs = await get_tabs()
+    for t in tabs:
+        if not t.title or (t.title != "Steam Shared Context presented by Valve™" and t.title != "Steam" and t.title != "SP"):
+            logger.debug("Closing tab: " + getattr(t, "title", "Untitled"))
+            await t.close()
+            await sleep(0.5)

backend/main.py

@@ -22,7 +22,7 @@ from helpers import (REMOTE_DEBUGGER_UNIT, csrf_middleware, get_csrf_token,
                      get_home_path, get_homebrew_path, get_user,
                      get_user_group, set_user, set_user_group,
                      stop_systemd_unit, start_systemd_unit)
-from injector import get_gamepadui_tab, Tab, get_tabs
+from injector import get_gamepadui_tab, Tab, get_tabs, close_old_tabs
 from loader import Loader
 from settings import SettingsManager
 from updater import Updater
@@ -56,12 +56,15 @@ basicConfig(
 
 logger = getLogger("Main")
 
-async def chown_plugin_dir():
+def chown_plugin_dir():
     code_chown = call(["chown", "-R", USER+":"+GROUP, CONFIG["plugin_path"]])
     code_chmod = call(["chmod", "-R", "555", CONFIG["plugin_path"]])
     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})")
 
+if CONFIG["chown_plugin_path"] == True:
+    chown_plugin_dir()
+
 class PluginManager:
     def __init__(self, loop) -> None:
         self.loop = loop
@@ -87,8 +90,6 @@ class PluginManager:
                 self.loop.create_task(start_systemd_unit(REMOTE_DEBUGGER_UNIT))
             else:
                 self.loop.create_task(stop_systemd_unit(REMOTE_DEBUGGER_UNIT))
-            if CONFIG["chown_plugin_path"] == True:
-                chown_plugin_dir()
             self.loop.create_task(self.loader_reinjector())
             self.loop.create_task(self.load_plugins())
 
@@ -170,12 +171,7 @@ class PluginManager:
         try:
             if first:
                 if await tab.has_global_var("deckyHasLoaded", False):
-                    tabs = await get_tabs()
-                    for t in tabs:
-                        if not t.title or (t.title != "Steam" and t.title != "SP"):
-                            logger.debug("Closing tab: " + getattr(t, "title", "Untitled"))
-                            await t.close()
-                            await sleep(0.5)
+                    await close_old_tabs()
             await tab.evaluate_js("try{if (window.deckyHasLoaded){setTimeout(() => location.reload(), 100)}else{window.deckyHasLoaded = true;(async()=>{try{while(!window.SP_REACT){await new Promise(r => setTimeout(r, 10))};await import('http://localhost:1337/frontend/index.js')}catch(e){console.error(e)};})();}}catch(e){console.error(e)}", False, False, False)
         except:
             logger.info("Failed to inject JavaScript into tab\n" + format_exc())

backend/utilities.py

@@ -7,7 +7,7 @@ from asyncio import sleep, start_server, gather, open_connection
 from aiohttp import ClientSession, web
 
 from logging import getLogger
-from injector import inject_to_tab, get_gamepadui_tab
+from injector import inject_to_tab, get_gamepadui_tab, close_old_tabs
 import helpers
 import subprocess
 
@@ -233,7 +233,7 @@ class Utilities:
             self.rdt_proxy_server.close()
             self.rdt_proxy_task.cancel()
 
-    async def enable_rdt(self):
+    async def _enable_rdt(self):
         # TODO un-hardcode port
         try:
             self.stop_rdt_proxy()
@@ -243,14 +243,26 @@ class Utilities:
                 self.logger.info("Connecting to React DevTools at " + ip)
                 async with ClientSession() as web:
                     res = await web.request("GET", "http://" + ip + ":8097", ssl=helpers.get_ssl_context())
+                    script = """
+                    if (!window.deckyHasConnectedRDT) {
+                        window.deckyHasConnectedRDT = true;
+                        // This fixes the overlay when hovering over an element in RDT
+                        Object.defineProperty(window, '__REACT_DEVTOOLS_TARGET_WINDOW__', {
+                            enumerable: true,
+                            configurable: true,
+                            get: function() {
+                                return FocusNavController?.m_ActiveContext?.ActiveWindow || window;
+                            }
+                        });
+                    """ + await res.text() + "\n}"
                 if res.status != 200:
                     self.logger.error("Failed to connect to React DevTools at " + ip)
                     return False
                 self.start_rdt_proxy(ip, 8097)
-                script = "if(!window.deckyHasConnectedRDT){window.deckyHasConnectedRDT=true;\n" + await res.text() + "\n}"
                 self.logger.info("Connected to React DevTools, loading script")
                 tab = await get_gamepadui_tab()
                 # RDT needs to load before React itself to work.
+                await close_old_tabs()
                 result = await tab.reload_and_evaluate(script)
                 self.logger.info(result)
                         
@@ -258,9 +270,13 @@ class Utilities:
             self.logger.error("Failed to connect to React DevTools")
             self.logger.error(format_exc())
 
+    async def enable_rdt(self):
+        self.context.loop.create_task(self._enable_rdt())
+
     async def disable_rdt(self):
         self.logger.info("Disabling React DevTools")
         tab = await get_gamepadui_tab()
         self.rdt_script_id = None
-        await tab.evaluate_js("SteamClient.User.StartRestart();", False, True, False)
+        await close_old_tabs()
+        await tab.evaluate_js("location.reload();", False, True, False)
         self.logger.info("React DevTools disabled")

dist/install_prerelease.sh

@@ -11,10 +11,12 @@ HOMEBREW_FOLDER="${USER_DIR}/homebrew"
 rm -rf "${HOMEBREW_FOLDER}/services"
 sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/services"
 sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/plugins"
+touch "${USER_DIR}/.steam/steam/.cef-enable-remote-debugging"
 
 # Download latest release and install it
 RELEASE=$(curl -s 'https://api.github.com/repos/SteamDeckHomebrew/decky-loader/releases' | jq -r "first(.[] | select(.prerelease == "true"))")
-read VERSION DOWNLOADURL < <(echo $(jq -r '.tag_name, .assets[].browser_download_url' <<< ${RELEASE}))
+VERSION=$(jq -r '.tag_name' <<< ${RELEASE} )
+DOWNLOADURL=$(jq -r '.assets[].browser_download_url | select(endswith("PluginLoader"))' <<< ${RELEASE})
 
 printf "Installing version %s...\n" "${VERSION}"
 curl -L $DOWNLOADURL --output ${HOMEBREW_FOLDER}/services/PluginLoader

dist/install_release.sh

@@ -11,10 +11,12 @@ HOMEBREW_FOLDER="${USER_DIR}/homebrew"
 rm -rf "${HOMEBREW_FOLDER}/services"
 sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/services"
 sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/plugins"
+touch "${USER_DIR}/.steam/steam/.cef-enable-remote-debugging"
 
 # Download latest release and install it
 RELEASE=$(curl -s 'https://api.github.com/repos/SteamDeckHomebrew/decky-loader/releases' | jq -r "first(.[] | select(.prerelease == "false"))")
-read VERSION DOWNLOADURL < <(echo $(jq -r '.tag_name, .assets[].browser_download_url' <<< ${RELEASE}))
+VERSION=$(jq -r '.tag_name' <<< ${RELEASE} )
+DOWNLOADURL=$(jq -r '.assets[].browser_download_url | select(endswith("PluginLoader"))' <<< ${RELEASE})
 
 printf "Installing version %s...\n" "${VERSION}"
 curl -L $DOWNLOADURL --output ${HOMEBREW_FOLDER}/services/PluginLoader

frontend/index.d.ts

@@ -0,0 +1,2 @@
+declare module '*.png';
+declare module '*.jpg';

frontend/package.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-image": "^3.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -41,7 +42,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "^3.18.4",
+    "decky-frontend-lib": "^3.18.10",
     "react-file-icon": "^1.2.0",
     "react-icons": "^4.4.0",
     "react-markdown": "^8.0.3",

frontend/pnpm-lock.yaml

@@ -2,6 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   '@rollup/plugin-commonjs': ^21.1.0
+  '@rollup/plugin-image': ^3.0.1
   '@rollup/plugin-json': ^4.1.0
   '@rollup/plugin-node-resolve': ^13.3.0
   '@rollup/plugin-replace': ^4.0.0
@@ -10,7 +11,7 @@ specifiers:
   '@types/react-file-icon': ^1.0.1
   '@types/react-router': 5.1.18
   '@types/webpack': ^5.28.0
-  decky-frontend-lib: ^3.18.4
+  decky-frontend-lib: ^3.18.10
   husky: ^8.0.1
   import-sort-style-module: ^6.0.0
   inquirer: ^8.2.4
@@ -30,7 +31,7 @@ specifiers:
   typescript: ^4.7.4
 
 dependencies:
-  decky-frontend-lib: 3.18.4
+  decky-frontend-lib: 3.18.10
   react-file-icon: 1.2.0_wcqkhtmu7mswc6yz4uyexck3ty
   react-icons: 4.4.0_react@16.14.0
   react-markdown: 8.0.3_vshvapmxg47tngu7tvrsqpq55u
@@ -38,6 +39,7 @@ dependencies:
 
 devDependencies:
   '@rollup/plugin-commonjs': 21.1.0_rollup@2.76.0
+  '@rollup/plugin-image': 3.0.1_rollup@2.76.0
   '@rollup/plugin-json': 4.1.0_rollup@2.76.0
   '@rollup/plugin-node-resolve': 13.3.0_rollup@2.76.0
   '@rollup/plugin-replace': 4.0.0_rollup@2.76.0
@@ -339,6 +341,20 @@ packages:
       rollup: 2.76.0
     dev: true
 
+  /@rollup/plugin-image/3.0.1_rollup@2.76.0:
+    resolution: {integrity: sha512-F50Sko4Xcc576x7HG9f3MvJKKnBfSmqfVFWJkJgyIEkI8YxZxux28lDbuy0+GsAK6BFl9Gn+TRXOUgHHJbFh3w==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.0.2_rollup@2.76.0
+      mini-svg-data-uri: 1.4.4
+      rollup: 2.76.0
+    dev: true
+
   /@rollup/plugin-inject/4.0.4_rollup@2.76.0:
     resolution: {integrity: sha512-4pbcU4J/nS+zuHk+c+OL3WtmEQhqxlZ9uqfjQMQDOHOPld7PsCd8k5LWs8h5wjwJN7MgnAn768F2sDxEP4eNFQ==}
     peerDependencies:
@@ -422,6 +438,21 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@rollup/pluginutils/5.0.2_rollup@2.76.0:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.76.0
+    dev: true
+
   /@types/debug/4.1.7:
     resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
     dependencies:
@@ -944,8 +975,8 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib/3.18.4:
-    resolution: {integrity: sha512-i3TAe3RJtT1TK0rJgW9Ek5jxMWZRCYLDvqHDylGVieUvuyI7c8X+cogz30pP4cqeGOaA1d/MxBEbhlpD3JhVvg==}
+  /decky-frontend-lib/3.18.10:
+    resolution: {integrity: sha512-2mgbA3sSkuwQR/FnmhXVrcW6LyTS95IuL6muJAmQCruhBvXapDtjk1TcgxqMZxFZwGD1IPnemPYxHZll6IgnZw==}
     dev: false
 
   /decode-named-character-reference/1.0.2:
@@ -1936,6 +1967,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /mini-svg-data-uri/1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: true
+
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:

frontend/rollup.config.js

@@ -1,4 +1,5 @@
 import commonjs from '@rollup/plugin-commonjs';
+import image from '@rollup/plugin-image';
 import json from '@rollup/plugin-json';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
@@ -29,6 +30,7 @@ export default defineConfig({
       preventAssignment: false,
       'process.env.NODE_ENV': JSON.stringify('production'),
     }),
+    image(),
   ],
   preserveEntrySignatures: false,
   output: {

frontend/src/components/DeckyGlobalComponentsState.tsx

@@ -14,13 +14,13 @@ export class DeckyGlobalComponentsState {
     return { components: this._components };
   }
 
-  addComponent(name: string, component: FC) {
-    this._components.set(name, component);
+  addComponent(path: string, component: FC) {
+    this._components.set(path, component);
     this.notifyUpdate();
   }
 
-  removeComponent(name: string) {
-    this._components.delete(name);
+  removeComponent(path: string) {
+    this._components.delete(path);
     this.notifyUpdate();
   }
 
@@ -30,8 +30,8 @@ export class DeckyGlobalComponentsState {
 }
 
 interface DeckyGlobalComponentsContext extends PublicDeckyGlobalComponentsState {
-  addComponent(name: string, component: FC): void;
-  removeComponent(name: string): void;
+  addComponent(path: string, component: FC): void;
+  removeComponent(path: string): void;
 }
 
 const DeckyGlobalComponentsContext = createContext<DeckyGlobalComponentsContext>(null as any);

frontend/src/components/DeckyMenuState.tsx

@@ -1,147 +0,0 @@
-import { CustomMainMenuItem, ItemPatch, OverlayPatch } from 'decky-frontend-lib';
-import { FC, ReactNode, createContext, useContext, useEffect, useState } from 'react';
-
-interface PublicDeckyMenuState {
-  items: Set<CustomMainMenuItem>;
-  itemPatches: Map<string, Set<ItemPatch>>;
-  overlayPatches: Set<OverlayPatch>;
-  overlayComponents: Set<ReactNode>;
-}
-
-export class DeckyMenuState {
-  private _items = new Set<CustomMainMenuItem>();
-  private _itemPatches = new Map<string, Set<ItemPatch>>();
-  private _overlayPatches = new Set<OverlayPatch>();
-  private _overlayComponents = new Set<ReactNode>();
-
-  public eventBus = new EventTarget();
-
-  publicState(): PublicDeckyMenuState {
-    return {
-      items: this._items,
-      itemPatches: this._itemPatches,
-      overlayPatches: this._overlayPatches,
-      overlayComponents: this._overlayComponents,
-    };
-  }
-
-  addItem(item: CustomMainMenuItem) {
-    this._items.add(item);
-    this.notifyUpdate();
-    return item;
-  }
-
-  addPatch(path: string, patch: ItemPatch) {
-    let patchList = this._itemPatches.get(path);
-    if (!patchList) {
-      patchList = new Set();
-      this._itemPatches.set(path, patchList);
-    }
-    patchList.add(patch);
-    this.notifyUpdate();
-    return patch;
-  }
-
-  addOverlayPatch(patch: OverlayPatch) {
-    this._overlayPatches.add(patch);
-    this.notifyUpdate();
-    return patch;
-  }
-
-  addOverlayComponent(component: ReactNode) {
-    this._overlayComponents.add(component);
-    this.notifyUpdate();
-    return component;
-  }
-
-  removePatch(path: string, patch: ItemPatch) {
-    const patchList = this._itemPatches.get(path);
-    patchList?.delete(patch);
-    if (patchList?.size == 0) {
-      this._itemPatches.delete(path);
-    }
-    this.notifyUpdate();
-  }
-
-  removeItem(item: CustomMainMenuItem) {
-    this._items.delete(item);
-    this.notifyUpdate();
-    return item;
-  }
-
-  removeOverlayPatch(patch: OverlayPatch) {
-    this._overlayPatches.delete(patch);
-    this.notifyUpdate();
-  }
-
-  removeOverlayComponent(component: ReactNode) {
-    this._overlayComponents.delete(component);
-    this.notifyUpdate();
-  }
-
-  private notifyUpdate() {
-    this.eventBus.dispatchEvent(new Event('update'));
-  }
-}
-
-interface DeckyMenuStateContext extends PublicDeckyMenuState {
-  addItem: DeckyMenuState['addItem'];
-  addPatch: DeckyMenuState['addPatch'];
-  addOverlayPatch: DeckyMenuState['addOverlayPatch'];
-  addOverlayComponent: DeckyMenuState['addOverlayComponent'];
-  removePatch: DeckyMenuState['removePatch'];
-  removeOverlayPatch: DeckyMenuState['removeOverlayPatch'];
-  removeOverlayComponent: DeckyMenuState['removeOverlayComponent'];
-  removeItem: DeckyMenuState['removeItem'];
-}
-
-const DeckyMenuStateContext = createContext<DeckyMenuStateContext>(null as any);
-
-export const useDeckyMenuState = () => useContext(DeckyMenuStateContext);
-
-interface Props {
-  deckyMenuState: DeckyMenuState;
-}
-
-export const DeckyMenuStateContextProvider: FC<Props> = ({ children, deckyMenuState }) => {
-  const [publicDeckyMenuState, setPublicDeckyMenuState] = useState<PublicDeckyMenuState>({
-    ...deckyMenuState.publicState(),
-  });
-
-  useEffect(() => {
-    function onUpdate() {
-      setPublicDeckyMenuState({ ...deckyMenuState.publicState() });
-    }
-
-    deckyMenuState.eventBus.addEventListener('update', onUpdate);
-
-    return () => deckyMenuState.eventBus.removeEventListener('update', onUpdate);
-  }, []);
-
-  const addItem = deckyMenuState.addItem.bind(deckyMenuState);
-  const addPatch = deckyMenuState.addPatch.bind(deckyMenuState);
-  const addOverlayPatch = deckyMenuState.addOverlayPatch.bind(deckyMenuState);
-  const addOverlayComponent = deckyMenuState.addOverlayComponent.bind(deckyMenuState);
-  const removePatch = deckyMenuState.removePatch.bind(deckyMenuState);
-  const removeOverlayPatch = deckyMenuState.removeOverlayPatch.bind(deckyMenuState);
-  const removeOverlayComponent = deckyMenuState.removeOverlayComponent.bind(deckyMenuState);
-  const removeItem = deckyMenuState.removeItem.bind(deckyMenuState);
-
-  return (
-    <DeckyMenuStateContext.Provider
-      value={{
-        ...publicDeckyMenuState,
-        addItem,
-        addPatch,
-        addOverlayPatch,
-        addOverlayComponent,
-        removePatch,
-        removeOverlayPatch,
-        removeOverlayComponent,
-        removeItem,
-      }}
-    >
-      {children}
-    </DeckyMenuStateContext.Provider>
-  );
-};

frontend/src/components/modals/PluginInstallModal.tsx

@@ -1,4 +1,4 @@
-import { ConfirmModal, Navigation, QuickAccessTab, Spinner, staticClasses } from 'decky-frontend-lib';
+import { ConfirmModal, Navigation, QuickAccessTab } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
 
 interface PluginInstallModalProps {
@@ -26,15 +26,14 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, ha
       onCancel={async () => {
         await onCancel();
       }}
+      strTitle={`Install ${artifact}`}
+      strOKButtonText={loading ? 'Installing' : 'Install'}
     >
-      <div className={staticClasses.Title} style={{ flexDirection: 'column' }}>
-        {hash == 'False' ? <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3> : null}
-        <div style={{ flexDirection: 'row' }}>
-          {loading && <Spinner style={{ width: '20px' }} />} {loading ? 'Installing' : 'Install'} {artifact}
-          {version ? ' version ' + version : null}
-          {!loading && '?'}
-        </div>
-      </div>
+      {hash == 'False' ? (
+        <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3>
+      ) : (
+        `Are you sure you want to install ${artifact} ${version}?`
+      )}
     </ConfirmModal>
   );
 };

frontend/src/components/store/PluginCard.tsx

@@ -1,15 +1,12 @@
 import {
-  DialogButton,
+  ButtonItem,
   Dropdown,
   Focusable,
-  Navigation,
-  QuickAccessTab,
+  PanelSectionRow,
   SingleDropdownOption,
   SuspensefulImage,
-  joinClassNames,
-  staticClasses,
 } from 'decky-frontend-lib';
-import { FC, useRef, useState } from 'react';
+import { FC, useState } from 'react';
 
 import { StorePlugin, StorePluginVersion, requestPluginInstall } from '../../store';
 
@@ -19,168 +16,162 @@ interface PluginCardProps {
 
 const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
   const [selectedOption, setSelectedOption] = useState<number>(0);
-  const buttonRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const root: boolean = plugin.tags.some((tag) => tag === 'root');
+
   return (
     <div
+      className="deckyStoreCard"
       style={{
-        padding: '30px',
-        paddingTop: '10px',
-        paddingBottom: '10px',
+        marginLeft: '20px',
+        marginRight: '20px',
+        marginBottom: '20px',
+        display: 'flex',
+        alignItems: 'center',
       }}
     >
-      {/* TODO: abstract this messy focus hackiness into a custom component in lib */}
-      <Focusable
-        className="deckyStoreCard"
-        ref={containerRef}
-        onActivate={(_: CustomEvent) => {
-          buttonRef.current!.focus();
-        }}
-        onCancel={(_: CustomEvent) => {
-          if (containerRef.current!.querySelectorAll('* :focus').length === 0) {
-            Navigation.NavigateBack();
-            setTimeout(() => Navigation.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
-          } else {
-            containerRef.current!.focus();
-          }
-        }}
+      <div
+        className="deckyStoreCardImageContainer"
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          background: '#ACB2C924',
-          height: 'unset',
-          marginBottom: 'unset',
-          // boxShadow: var(--gpShadow-Medium);
-          scrollSnapAlign: 'start',
-          boxSizing: 'border-box',
+          width: '320px',
+          height: '200px',
+          position: 'relative',
         }}
       >
-        <div className="deckyStoreCardHeader" style={{ display: 'flex', alignItems: 'center' }}>
-          <div
-            style={{ fontSize: '18pt', padding: '10px' }}
-            className={joinClassNames(staticClasses.Text)}
-            // onClick={() => Router.NavigateToExternalWeb('https://github.com/' + plugin.artifact)}
-          >
-            {plugin.name}
-          </div>
-        </div>
-        <div
+        <SuspensefulImage
+          className="deckyStoreCardImage"
+          suspenseHeight="200px"
+          suspenseWidth="320px"
           style={{
-            display: 'flex',
-            flexDirection: 'row',
+            width: '320px',
+            height: '200px',
+            objectFit: 'cover',
           }}
-          className="deckyStoreCardBody"
-        >
-          <SuspensefulImage
-            className="deckyStoreCardImage"
-            suspenseWidth="256px"
-            style={{
-              width: 'auto',
-              height: '160px',
-            }}
-            src={plugin.image_url}
-          />
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-            className="deckyStoreCardInfo"
-          >
-            <p
-              className={joinClassNames(staticClasses.PanelSectionRow)}
-              style={{ marginTop: '0px', marginLeft: '16px' }}
-            >
-              <span style={{ paddingLeft: '0px' }}>Author: {plugin.author}</span>
-            </p>
-            <p
-              className={joinClassNames(staticClasses.PanelSectionRow)}
-              style={{
-                marginLeft: '16px',
-                marginTop: '0px',
-                marginBottom: '0px',
-                marginRight: '16px',
-              }}
-            >
-              <span style={{ paddingLeft: '0px' }}>{plugin.description}</span>
-            </p>
-            <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',
-                    borderRadius: '5px',
-                    background: tag == 'root' ? '#842029' : '#ACB2C947',
-                  }}
-                >
-                  {tag == 'root' ? 'Requires root' : tag}
-                </span>
-              ))}
-            </p>
-          </div>
-        </div>
-        <div
-          className="deckyStoreCardActionsContainer"
+          src={plugin.image_url}
+        />
+      </div>
+      <div
+        className="deckyStoreCardInfo"
+        style={{
+          width: 'calc(100% - 320px)', // The calc is here so that the info section doesn't expand into the image
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          marginLeft: '1em',
+          justifyContent: 'center',
+        }}
+      >
+        <span
+          className="deckyStoreCardTitle"
           style={{
+            fontSize: '1.25em',
+            fontWeight: 'bold',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '90%',
+          }}
+        >
+          {plugin.name}
+        </span>
+        <span
+          className="deckyStoreCardAuthor"
+          style={{
+            marginRight: 'auto',
+            fontSize: '1em',
+          }}
+        >
+          {plugin.author}
+        </span>
+        <span
+          className="deckyStoreCardDescription"
+          style={{
+            fontSize: '13px',
+            color: '#969696',
+            WebkitLineClamp: root ? '2' : '3',
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            display: '-webkit-box',
+          }}
+        >
+          {plugin.description ? (
+            plugin.description
+          ) : (
+            <span>
+              <i style={{ color: '#666' }}>No description provided.</i>
+            </span>
+          )}
+        </span>
+        {root && (
+          <span
+            className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
+            style={{
+              fontSize: '13px',
+              color: '#fee75c',
+            }}
+          >
+            <i>This plugin has full access to your Steam Deck.</i>{' '}
+            <a
+              className="deckyStoreCardDescriptionRootLink"
+              href="https://deckbrew.xyz/root"
+              target="_blank"
+              style={{
+                color: '#fee75c',
+                textDecoration: 'none',
+              }}
+            >
+              deckbrew.xyz/root
+            </a>
+          </span>
+        )}
+        <div
+          className="deckyStoreCardButtonRow"
+          style={{
+            marginTop: '1em',
             width: '100%',
-            alignSelf: 'flex-end',
-            display: 'flex',
-            flexDirection: 'row',
+            overflow: 'hidden',
           }}
         >
-          <Focusable
-            className="deckyStoreCardActions"
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              width: '100%',
-            }}
-          >
-            <div
-              className="deckyStoreCardInstallButtonContainer"
-              style={{
-                flex: '1',
-              }}
-            >
-              <DialogButton
-                className="deckyStoreCardInstallButton"
-                ref={buttonRef}
-                onClick={() => requestPluginInstall(plugin.name, plugin.versions[selectedOption])}
+          <PanelSectionRow>
+            <Focusable style={{ display: 'flex', maxWidth: '100%' }}>
+              <div
+                className="deckyStoreCardInstallContainer"
+                style={{
+                  paddingTop: '0px',
+                  paddingBottom: '0px',
+                  width: '40%',
+                }}
               >
-                Install
-              </DialogButton>
-            </div>
-            <div
-              className="deckyStoreCardVersionDropdownContainer"
-              style={{
-                flex: '0.2',
-              }}
-            >
-              <Dropdown
-                rgOptions={
-                  plugin.versions.map((version: StorePluginVersion, index) => ({
-                    data: index,
-                    label: version.name,
-                  })) as SingleDropdownOption[]
-                }
-                strDefaultLabel={'Select a version'}
-                selectedOption={selectedOption}
-                onChange={({ data }) => setSelectedOption(data)}
-              />
-            </div>
-          </Focusable>
+                <ButtonItem
+                  bottomSeparator="none"
+                  layout="below"
+                  onClick={() => requestPluginInstall(plugin.name, plugin.versions[selectedOption])}
+                >
+                  <span className="deckyStoreCardInstallText">Install</span>
+                </ButtonItem>
+              </div>
+              <div
+                className="deckyStoreCardVersionContainer"
+                style={{
+                  marginLeft: '5%',
+                  width: '30%',
+                }}
+              >
+                <Dropdown
+                  rgOptions={
+                    plugin.versions.map((version: StorePluginVersion, index) => ({
+                      data: index,
+                      label: version.name,
+                    })) as SingleDropdownOption[]
+                  }
+                  menuLabel="Plugin Version"
+                  selectedOption={selectedOption}
+                  onChange={({ data }) => setSelectedOption(data)}
+                />
+              </div>
+            </Focusable>
+          </PanelSectionRow>
         </div>
-      </Focusable>
+      </div>
     </div>
   );
 };

frontend/src/components/store/Store.tsx

@@ -1,6 +1,16 @@
-import { SteamSpinner } from 'decky-frontend-lib';
-import { FC, useEffect, useState } from 'react';
+import {
+  Dropdown,
+  DropdownOption,
+  Focusable,
+  PanelSectionRow,
+  SteamSpinner,
+  Tabs,
+  TextField,
+  findModule,
+} from 'decky-frontend-lib';
+import { FC, useEffect, useMemo, useState } from 'react';
 
+import logo from '../../../assets/plugin_store.png';
 import Logger from '../../logger';
 import { StorePlugin, getPluginList } from '../../store';
 import PluginCard from './PluginCard';
@@ -8,7 +18,12 @@ import PluginCard from './PluginCard';
 const logger = new Logger('FilePicker');
 
 const StorePage: FC<{}> = () => {
+  const [currentTabRoute, setCurrentTabRoute] = useState<string>('browse');
   const [data, setData] = useState<StorePlugin[] | null>(null);
+  const { TabCount } = findModule((m) => {
+    if (m?.TabCount && m?.TabTitle) return true;
+    return false;
+  });
 
   useEffect(() => {
     (async () => {
@@ -19,19 +34,12 @@ const StorePage: FC<{}> = () => {
   }, []);
 
   return (
-    <div
-      style={{
-        marginTop: '40px',
-        height: 'calc( 100% - 40px )',
-        overflowY: 'scroll',
-      }}
-    >
+    <>
       <div
         style={{
-          display: 'flex',
-          flexWrap: 'nowrap',
-          flexDirection: 'column',
-          height: '100%',
+          marginTop: '40px',
+          height: 'calc( 100% - 40px )',
+          background: '#0005',
         }}
       >
         {!data ? (
@@ -39,13 +47,193 @@ const StorePage: FC<{}> = () => {
             <SteamSpinner />
           </div>
         ) : (
-          <div>
-            {data.map((plugin: StorePlugin) => (
-              <PluginCard plugin={plugin} />
-            ))}
-          </div>
+          <Tabs
+            activeTab={currentTabRoute}
+            onShowTab={(tabId: string) => {
+              setCurrentTabRoute(tabId);
+            }}
+            tabs={[
+              {
+                title: 'Browse',
+                content: <BrowseTab children={{ data: data }} />,
+                id: 'browse',
+                renderTabAddon: () => <span className={TabCount}>{data.length}</span>,
+              },
+              {
+                title: 'About',
+                content: <AboutTab />,
+                id: 'about',
+              },
+            ]}
+          />
         )}
       </div>
+    </>
+  );
+};
+
+const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
+  const sortOptions = useMemo(
+    (): DropdownOption[] => [
+      { data: 1, label: 'Alphabetical (A to Z)' },
+      { data: 2, label: 'Alphabetical (Z to A)' },
+    ],
+    [],
+  );
+
+  // const filterOptions = useMemo((): DropdownOption[] => [{ data: 1, label: 'All' }], []);
+
+  const [selectedSort, setSort] = useState<number>(sortOptions[0].data);
+  // const [selectedFilter, setFilter] = useState<number>(filterOptions[0].data);
+  const [searchFieldValue, setSearchValue] = useState<string>('');
+
+  return (
+    <>
+      <style>{`
+              .deckyStoreCardInstallContainer > .Panel {
+                padding: 0;
+              }
+            `}</style>
+      {/* This should be used once filtering is added
+
+      <PanelSectionRow>
+        <Focusable style={{ display: 'flex', maxWidth: '100%' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '47.5%',
+            }}
+          >
+            <span className="DialogLabel">Sort</span>
+            <Dropdown
+              menuLabel="Sort"
+              rgOptions={sortOptions}
+              strDefaultLabel="Last Updated (Newest)"
+              selectedOption={selectedSort}
+              onChange={(e) => setSort(e.data)}
+            />
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '47.5%',
+              marginLeft: 'auto',
+            }}
+          >
+            <span className="DialogLabel">Filter</span>
+            <Dropdown
+              menuLabel="Filter"
+              rgOptions={filterOptions}
+              strDefaultLabel="All"
+              selectedOption={selectedFilter}
+              onChange={(e) => setFilter(e.data)}
+            />
+          </div>
+        </Focusable>
+      </PanelSectionRow>
+      <div style={{ justifyContent: 'center', display: 'flex' }}>
+        <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}>
+          <div style={{ width: '100%' }}>
+            <TextField label="Search" value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
+          </div>
+        </Focusable>
+      </div>
+      */}
+      <PanelSectionRow>
+        <Focusable style={{ display: 'flex', maxWidth: '100%' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              minWidth: '100%',
+              maxWidth: '100%',
+            }}
+          >
+            <span className="DialogLabel">Sort</span>
+            <Dropdown
+              menuLabel="Sort"
+              rgOptions={sortOptions}
+              strDefaultLabel="Last Updated (Newest)"
+              selectedOption={selectedSort}
+              onChange={(e) => setSort(e.data)}
+            />
+          </div>
+        </Focusable>
+      </PanelSectionRow>
+      <div style={{ justifyContent: 'center', display: 'flex' }}>
+        <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}>
+          <div style={{ width: '100%' }}>
+            <TextField label="Search" value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
+          </div>
+        </Focusable>
+      </div>
+      <div>
+        {data.children.data
+          .filter((plugin: StorePlugin) => {
+            return (
+              plugin.name.toLowerCase().includes(searchFieldValue.toLowerCase()) ||
+              plugin.description.toLowerCase().includes(searchFieldValue.toLowerCase()) ||
+              plugin.author.toLowerCase().includes(searchFieldValue.toLowerCase()) ||
+              plugin.tags.some((tag: string) => tag.toLowerCase().includes(searchFieldValue.toLowerCase()))
+            );
+          })
+          .sort((a, b) => {
+            if (selectedSort % 2 === 1) return a.name.localeCompare(b.name);
+            else return b.name.localeCompare(a.name);
+          })
+          .map((plugin: StorePlugin) => (
+            <PluginCard plugin={plugin} />
+          ))}
+      </div>
+    </>
+  );
+};
+
+const AboutTab: FC<{}> = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <style>{`
+              .deckyStoreAboutHeader {
+                font-size: 24px;
+                font-weight: 600;
+                margin-top: 20px;
+              }
+            `}</style>
+      <img
+        src={logo}
+        style={{
+          width: '256px',
+          height: 'auto',
+          alignSelf: 'center',
+        }}
+      />
+      <span className="deckyStoreAboutHeader">Testing</span>
+      <span>
+        Please consider testing new plugins to help the Decky Loader team!{' '}
+        <a
+          href="https://deckbrew.xyz/testing"
+          target="_blank"
+          style={{
+            textDecoration: 'none',
+          }}
+        >
+          deckbrew.xyz/testing
+        </a>
+      </span>
+      <span className="deckyStoreAboutHeader">Contributing</span>
+      <span>
+        If you would like to contribute to the Decky Plugin Store, check the SteamDeckHomebrew/decky-plugin-template
+        repository on GitHub. Information on development and distribution is available in the README.
+      </span>
+      <span className="deckyStoreAboutHeader">Source Code</span>
+      <span>All plugin source code is available on SteamDeckHomebrew/decky-plugin-database repository on GitHub.</span>
     </div>
   );
 };

frontend/src/index.tsx

@@ -1,3 +1,5 @@
+import { Navigation, Router, sleep } from 'decky-frontend-lib';
+
 import PluginLoader from './plugin-loader';
 import { DeckyUpdater } from './updater';
 
@@ -14,6 +16,23 @@ declare global {
   }
 }
 
+(async () => {
+  try {
+    if (!Router.NavigateToAppProperties || !Router.NavigateToLibraryTab || !Router.NavigateToInvites) {
+      while (!Navigation.NavigateToAppProperties) await sleep(100);
+      const shims = {
+        NavigateToAppProperties: Navigation.NavigateToAppProperties,
+        NavigateToInvites: Navigation.NavigateToInvites,
+        NavigateToLibraryTab: Navigation.NavigateToLibraryTab,
+      };
+      (Router as unknown as any).deckyShim = true;
+      Object.assign(Router, shims);
+    }
+  } catch (e) {
+    console.error('[DECKY]: Error initializing Navigation interface shims', e);
+  }
+})();
+
 (async () => {
   window.deckyAuthToken = await fetch('http://127.0.0.1:1337/auth/token').then((r) => r.text());
 

frontend/src/menu-hook.tsx

@@ -1,235 +0,0 @@
-import {
-  CustomMainMenuItem,
-  ItemPatch,
-  MainMenuItem,
-  OverlayPatch,
-  afterPatch,
-  findInReactTree,
-  sleep,
-} from 'decky-frontend-lib';
-import { FC } from 'react';
-import { ReactNode, cloneElement, createElement } from 'react';
-
-import { DeckyMenuState, DeckyMenuStateContextProvider, useDeckyMenuState } from './components/DeckyMenuState';
-import Logger from './logger';
-
-declare global {
-  interface Window {
-    __MENU_HOOK_INSTANCE: any;
-  }
-}
-
-class MenuHook extends Logger {
-  private menuRenderer?: any;
-  private originalRenderer?: any;
-  private menuState: DeckyMenuState = new DeckyMenuState();
-
-  constructor() {
-    super('MenuHook');
-
-    this.log('Initialized');
-    window.__MENU_HOOK_INSTANCE?.deinit?.();
-    window.__MENU_HOOK_INSTANCE = this;
-  }
-
-  init() {
-    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
-    let outerMenuRoot: any;
-    const findMenuRoot = (currentNode: any, iters: number): any => {
-      if (iters >= 60) {
-        // currently 54
-        return null;
-      }
-      if (currentNode?.memoizedProps?.navID == 'MainNavMenuContainer') {
-        this.log(`Menu root was found in ${iters} recursion cycles`);
-        return currentNode;
-      }
-      if (currentNode.child) {
-        let node = findMenuRoot(currentNode.child, iters + 1);
-        if (node !== null) return node;
-      }
-      if (currentNode.sibling) {
-        let node = findMenuRoot(currentNode.sibling, iters + 1);
-        if (node !== null) return node;
-      }
-      return null;
-    };
-
-    (async () => {
-      outerMenuRoot = findMenuRoot(tree, 0);
-      while (!outerMenuRoot) {
-        this.error(
-          'Failed to find Menu root node, reattempting in 5 seconds. A developer may need to increase the recursion limit.',
-        );
-        await sleep(5000);
-        outerMenuRoot = findMenuRoot(tree, 0);
-      }
-      this.log('found outermenuroot', outerMenuRoot);
-      const menuRenderer = outerMenuRoot.return;
-      this.menuRenderer = menuRenderer;
-      this.originalRenderer = menuRenderer.type;
-      let toReplace = new Map<string, ReactNode>();
-      let alreadyPatched = new Map<string, { total: number; node: ReactNode }>();
-
-      let patchedInnerMenu: any;
-      let overlayComponentManager: any;
-
-      const DeckyOverlayComponentManager = () => {
-        const { overlayComponents } = useDeckyMenuState();
-
-        return <>{overlayComponents.values()}</>;
-      };
-
-      const DeckyInnerMenuWrapper = (props: { innerProps: any }) => {
-        const { overlayPatches } = useDeckyMenuState();
-
-        const rendererRet = this.originalRenderer(props.innerProps);
-
-        // Find the first array of children, this contains [mainmenu, overlay]
-        const childArray = findInReactTree(rendererRet, (x) => x?.[0]?.type);
-
-        // Insert the overlay components manager
-        if (!overlayComponentManager) {
-          overlayComponentManager = <DeckyOverlayComponentManager />;
-        }
-
-        childArray.push(overlayComponentManager);
-
-        // This must be cached in patchedInnerMenu to prevent re-renders
-        if (patchedInnerMenu) {
-          childArray[0].type = patchedInnerMenu;
-        } else {
-          afterPatch(childArray[0], 'type', (_, ret) => {
-            const { itemPatches, items } = useDeckyMenuState();
-
-            const itemList = ret.props.children;
-
-            // Add custom menu items
-            if (items.size > 0) {
-              const button = findInReactTree(ret.props.children, (x) =>
-                x?.type?.toString()?.includes('exactRouteMatch:'),
-              );
-
-              const MenuItemComponent: FC<MainMenuItem> = button.type;
-
-              items.forEach((item) => {
-                let realIndex = 0; // there are some non-item things in the array
-                let count = 0;
-                itemList.forEach((i: any) => {
-                  if (count == item.index) return;
-                  if (i?.type == MenuItemComponent) count++;
-                  realIndex++;
-                });
-                itemList.splice(realIndex, 0, createElement(MenuItemComponent, item));
-              });
-            }
-
-            // Apply and revert patches
-            itemList.forEach((item: { props: MainMenuItem }, index: number) => {
-              if (!item?.props?.route) return;
-              const replaced = toReplace.get(item?.props?.route as string);
-              if (replaced) {
-                itemList[index] = replaced;
-                toReplace.delete(item?.props.route as string);
-              }
-              if (item?.props?.route && (itemPatches.has(item.props.route as string) || itemPatches.has('*'))) {
-                if (
-                  item?.props?.route && 
-                  alreadyPatched.has(item.props.route) &&
-                  alreadyPatched.get(item.props.route)?.total ==
-                    (itemPatches.get(item.props.route)?.size || 0) + (itemPatches.get('*')?.size || 0)
-                ) {
-                  const patched = alreadyPatched.get(item.props.route);
-                  this.debug('found already patched', patched);
-                  itemList[index] = patched?.node;
-                  return;
-                }
-                toReplace.set(item?.props?.route as string, itemList[index]);
-                itemPatches.get(item.props.route as string)?.forEach((patch) => {
-                  const oType = itemList[index].type;
-                  itemList[index] = patch({
-                    ...cloneElement(itemList[index]),
-                    type: (props: any) => createElement(oType, props),
-                  });
-                });
-                itemPatches.get('*')?.forEach((patch) => {
-                  const oType = itemList[index].type;
-                  itemList[index] = patch({
-                    ...cloneElement(itemList[index]),
-                    type: (props: any) => createElement(oType, props),
-                  });
-                });
-                alreadyPatched.set(item.props.route, {
-                  total: (itemPatches.get(item.props.route)?.size || 0) + (itemPatches.get('*')?.size || 0),
-                  node: itemList[index],
-                });
-              }
-            });
-
-            return ret;
-          });
-          patchedInnerMenu = childArray[0].type;
-        }
-
-        // Apply patches to the overlay
-        if (childArray[1]) {
-          overlayPatches.forEach((patch) => (childArray[1] = patch(childArray[1])));
-        }
-
-        return rendererRet;
-      };
-
-      const DeckyOuterMenuWrapper = (props: any) => {
-        return (
-          <DeckyMenuStateContextProvider deckyMenuState={this.menuState}>
-            <DeckyInnerMenuWrapper innerProps={props} />
-          </DeckyMenuStateContextProvider>
-        );
-      };
-      menuRenderer.type = DeckyOuterMenuWrapper;
-      if (menuRenderer.alternate) {
-        menuRenderer.alternate.type = menuRenderer.type;
-      }
-      this.log('Finished initial injection');
-    })();
-  }
-
-  deinit() {
-    this.menuRenderer.type = this.originalRenderer;
-    this.menuRenderer.alternate.type = this.menuRenderer.type;
-  }
-
-  addItem(item: CustomMainMenuItem) {
-    return this.menuState.addItem(item);
-  }
-
-  addPatch(path: string, patch: ItemPatch) {
-    return this.menuState.addPatch(path, patch);
-  }
-
-  addOverlayPatch(patch: OverlayPatch) {
-    return this.menuState.addOverlayPatch(patch);
-  }
-
-  addOverlayComponent(component: ReactNode) {
-    return this.menuState.addOverlayComponent(component);
-  }
-
-  removePatch(path: string, patch: ItemPatch) {
-    return this.menuState.removePatch(path, patch);
-  }
-
-  removeItem(item: CustomMainMenuItem) {
-    return this.menuState.removeItem(item);
-  }
-
-  removeOverlayPatch(patch: OverlayPatch) {
-    return this.menuState.removeOverlayPatch(patch);
-  }
-
-  removeOverlayComponent(component: ReactNode) {
-    return this.menuState.removeOverlayComponent(component);
-  }
-}
-
-export default MenuHook;

frontend/src/plugin-loader.tsx

@@ -1,4 +1,4 @@
-import { ConfirmModal, ModalRoot, QuickAccessTab, Router, showModal, sleep, staticClasses } from 'decky-frontend-lib';
+import { ConfirmModal, ModalRoot, Patch, QuickAccessTab, Router, showModal, sleep } from 'decky-frontend-lib';
 import { FC, lazy } from 'react';
 import { FaCog, FaExclamationCircle, FaPlug } from 'react-icons/fa';
 
@@ -10,7 +10,6 @@ import NotificationBadge from './components/NotificationBadge';
 import PluginView from './components/PluginView';
 import WithSuspense from './components/WithSuspense';
 import Logger from './logger';
-import MenuHook from './menu-hook';
 import { Plugin } from './plugin';
 import RouterHook from './router-hook';
 import { deinitSteamFixes, initSteamFixes } from './steamfixes';
@@ -29,7 +28,6 @@ const FilePicker = lazy(() => import('./components/modals/filepicker'));
 class PluginLoader extends Logger {
   private plugins: Plugin[] = [];
   private tabsHook: TabsHook | OldTabsHook = document.title == 'SP' ? new OldTabsHook() : new TabsHook();
-  private menuHook: MenuHook = new MenuHook();
   // private windowHook: WindowHook = new WindowHook();
   private routerHook: RouterHook = new RouterHook();
   public toaster: Toaster = new Toaster();
@@ -39,10 +37,11 @@ class PluginLoader extends Logger {
   // stores a list of plugin names which requested to be reloaded
   private pluginReloadQueue: { name: string; version?: string }[] = [];
 
+  private focusWorkaroundPatch?: Patch;
+
   constructor() {
     super(PluginLoader.name);
     this.tabsHook.init();
-    this.menuHook.init();
     this.log('Initialized');
 
     const TabBadge = () => {
@@ -147,10 +146,10 @@ class PluginLoader extends Logger {
         onCancel={() => {
           // do nothing
         }}
+        strTitle={`Uninstall ${name}`}
+        strOKButtonText={'Uninstall'}
       >
-        <div className={staticClasses.Title} style={{ flexDirection: 'column' }}>
-          Uninstall {name}?
-        </div>
+        Are you sure you want to uninstall {name}?
       </ConfirmModal>,
     );
   }
@@ -177,6 +176,7 @@ class PluginLoader extends Logger {
     this.routerHook.removeRoute('/decky/settings');
     deinitSteamFixes();
     deinitFilepickerPatches();
+    this.focusWorkaroundPatch?.unpatch();
   }
 
   public unloadPlugin(name: string) {
@@ -313,7 +313,6 @@ class PluginLoader extends Logger {
 
   createPluginAPI(pluginName: string) {
     return {
-      menuHook: this.menuHook,
       routerHook: this.routerHook,
       toaster: this.toaster,
       callServerMethod: this.callServerMethod,
@@ -336,6 +335,7 @@ class PluginLoader extends Logger {
       fetchNoCors(url: string, request: any = {}) {
         let args = { method: 'POST', headers: {} };
         const req = { ...args, ...request, url, data: request.body };
+        req?.body && delete req.body
         return this.callServerMethod('http_request', req);
       },
       executeInTab(tab: string, runAsync: boolean, code: string) {

frontend/src/router-hook.tsx

@@ -120,8 +120,6 @@ class RouterHook extends Logger {
       return <>{renderedComponents}</>;
     };
 
-    let globalComponents: any;
-
     this.wrapperPatch = afterPatch(this.gamepadWrapper, 'render', (_: any, ret: any) => {
       if (ret?.props?.children?.props?.children?.length == 5 || ret?.props?.children?.props?.children?.length == 4) {
         const idx = ret?.props?.children?.props?.children?.length == 4 ? 1 : 2;
@@ -145,17 +143,11 @@ class RouterHook extends Logger {
             this.memoizedRouter = memo(this.router.type);
             this.memoizedRouter.isDeckyRouter = true;
           }
-
-          if (!globalComponents) {
-            globalComponents = (
-              <DeckyGlobalComponentsStateContextProvider deckyGlobalComponentsState={this.globalComponentsState}>
-                <DeckyGlobalComponentsWrapper />
-              </DeckyGlobalComponentsStateContextProvider>
-            );
-          }
-
-          ret.props.children.props.children.push(globalComponents);
-
+          ret.props.children.props.children.push(
+            <DeckyGlobalComponentsStateContextProvider deckyGlobalComponentsState={this.globalComponentsState}>
+              <DeckyGlobalComponentsWrapper />
+            </DeckyGlobalComponentsStateContextProvider>,
+          );
           ret.props.children.props.children[idx].props.children[0].type = this.memoizedRouter;
         }
       }

frontend/tsconfig.json

@@ -18,6 +18,6 @@
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true
   },
-  "include": ["src"],
+  "include": ["src", "index.d.ts"],
   "exclude": ["node_modules"]
 }

requirements.txt

@@ -2,4 +2,4 @@ aiohttp==3.8.1
 aiohttp-jinja2==1.5.0
 aiohttp_cors==0.7.0
 watchdog==2.1.7
-certifi==2022.6.15
+certifi==2022.12.7