Refactor plugin store and add sorting by downloads and release date (#547)

* untested first commit

* fix types & names

* comment out built in sorting for now

* rerun search when sort changes

* fix ts complaints

* use prettier

* stop switch-case fall through

* move spinner

* use locale instead of hardcoded string

* fix typo

* add sorting by downloads & try using the data field in the dropdown for data

* fix typing error

* fix asc/desc in dropdown

* fix asc/desc again. asc = smaller one go first aaaaa

* I don't think i know what ascending means maybe

* use props instead of children, like a normal component

.github/workflows/edit-check.yml

@@ -18,7 +18,7 @@ jobs:
       
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@v35.6.3
+      uses: tj-actions/changed-files@v41.0.0
       with:
         separator: ","
         files: |

.vscode/tasks.json

@@ -38,7 +38,7 @@
             "type": "shell",
             "group": "none",
             "detail": "Check for local runs, create a plugins folder",
-            "command": "rsync -azp --rsh='ssh -p ${config:deckport} ${config:deckkey}' requirements.txt deck@${config:deckip}:${config:deckdir}/homebrew/dev/pluginloader/requirements.txt && ssh deck@${config:deckip} -p ${config:deckport} ${config:deckkey} 'python -m ensurepip && python -m pip install --upgrade pip && python -m pip install --upgrade setuptools && python -m pip install -r ${config:deckdir}/homebrew/dev/pluginloader/requirements.txt'",
+            "command": "rsync -azp --rsh='ssh -p ${config:deckport} ${config:deckkey}' backend/requirements.txt deck@${config:deckip}:${config:deckdir}/homebrew/dev/pluginloader/backend/requirements.txt && ssh deck@${config:deckip} -p ${config:deckport} ${config:deckkey} 'python -m ensurepip && python -m pip install --upgrade --break-system-packages pip && python -m pip install --break-system-packages --upgrade setuptools && python -m pip install --break-system-packages -r ${config:deckdir}/homebrew/dev/pluginloader/backend/requirements.txt'",
             "problemMatcher": []
         },
         {
@@ -105,7 +105,7 @@
             "detail": "Deploy dev PluginLoader to deck",
             "type": "shell",
             "group": "none",
-            "command": "rsync -azp --delete --rsh='ssh -p ${config:deckport} ${config:deckkey}' --exclude='.git/' --exclude='.github/' --exclude='.vscode/' --exclude='frontend/' --exclude='dist/' --exclude='contrib/' --exclude='*.log' --exclude='requirements.txt' --exclude='backend/__pycache__/' --exclude='.gitignore' . deck@${config:deckip}:${config:deckdir}/homebrew/dev/pluginloader",
+            "command": "rsync -azp --delete --rsh='ssh -p ${config:deckport} ${config:deckkey}' --exclude='.git/' --exclude='.github/' --exclude='.vscode/' --exclude='frontend/' --exclude='dist/' --exclude='contrib/' --exclude='*.log' --exclude='requirements.txt' --exclude='**/__pycache__/' --exclude='.gitignore' . deck@${config:deckip}:${config:deckdir}/homebrew/dev/pluginloader",
             "problemMatcher": []
         },
         // RUN

act/run-act.sh

@@ -26,10 +26,10 @@ cd ..
 
 if [[ "$type" == "release" ]]; then
     printf "release!\n"
-    act workflow_dispatch -e act/release.json --artifact-server-path act/artifacts --container-architecture linux/amd64
+    act workflow_dispatch -e act/release.json --artifact-server-path act/artifacts --container-architecture linux/amd64 --platform ubuntu-22.04=catthehacker/ubuntu:act-22.04
 elif [[ "$type" == "prerelease" ]]; then
     printf "prerelease!\n"
-    act workflow_dispatch -e act/prerelease.json --artifact-server-path act/artifacts --container-architecture linux/amd64
+    act workflow_dispatch -e act/prerelease.json --artifact-server-path act/artifacts --container-architecture linux/amd64 --platform ubuntu-22.04=catthehacker/ubuntu:act-22.04
 else
     printf "Release type unspecified/badly specified.\n"
     printf "Options: 'release' or 'prerelease'\n"

backend/locales/en-US.json

@@ -218,6 +218,10 @@
       "about": "About",
       "alph_asce": "Alphabetical (Z to A)",
       "alph_desc": "Alphabetical (A to Z)",
+      "date_asce": "Oldest First",
+      "date_desc": "Newest First",
+      "downloads_asce": "Least Downloaded First",
+      "downloads_desc": "Most Downloaded First",
       "title": "Browse"
     },
     "store_testing_cta": "Please consider testing new plugins to help the Decky Loader team!",

backend/locales/ja-JP.json

@@ -0,0 +1,253 @@
+{
+    "BranchSelect": {
+        "update_channel": {
+            "stable": "安定",
+            "testing": "テスト",
+            "label": "アップデートチャンネル",
+            "prerelease": "プレリリース"
+        }
+    },
+    "DropdownMultiselect": {
+        "button": {
+            "back": "戻る"
+        }
+    },
+    "FilePickerIndex": {
+        "file": {
+            "select": "ファイルを選択"
+        },
+        "files": {
+            "all_files": "すべてのファイル",
+            "file_type": "ファイルタイプ",
+            "show_hidden": "非表示ファイルを表示する"
+        },
+        "filter": {
+            "name_asce": "Z-A",
+            "name_desc": "A-Z",
+            "size_asce": "サイズ(小さい順)",
+            "size_desc": "サイズ(大きい順)",
+            "created_asce": "作成日(古い順)",
+            "created_desc": "作成日(新しい順)",
+            "modified_asce": "更新日(古い順)",
+            "modified_desc": "更新日(新しい順)"
+        },
+        "folder": {
+            "label": "フォルダ",
+            "select": "このフォルダを使用",
+            "show_more": "その他のファイルを表示"
+        }
+    },
+    "MultiplePluginsInstallModal": {
+        "description": {
+            "install": "インストール {{name}} {{version}}",
+            "reinstall": "再インストール {{name}} {{version}}",
+            "update": "アップデート {{name}} {{version}}"
+        },
+        "ok_button": {
+            "idle": "確認",
+            "loading": "作業中"
+        },
+        "title": {
+            "install_other": "{{count}} 個のプラグインをインストール",
+            "mixed_other": "{{count}} 個のプラグインを修正",
+            "update_other": "{{count}} 個のプラグインをアップデート",
+            "reinstall_other": "{{count}} 個のプラグインを再インストール"
+        },
+        "confirm": "以下の変更を加えてもよろしいですか?"
+    },
+    "Developer": {
+        "enabling": "React DevToolsを有効",
+        "disabling": "React DevToolsを無効",
+        "5secreload": "5秒以内に再読み込みされます"
+    },
+    "PluginInstallModal": {
+        "install": {
+            "button_idle": "インストール",
+            "title": "{{artifact}} をインストール",
+            "button_processing": "インストール中",
+            "desc": "{{artifact}} {{version}} をインストールしてもよろしいですか？"
+        },
+        "no_hash": "このプラグインにはハッシュがありません。ご自身の責任でインストールしてください。",
+        "reinstall": {
+            "button_idle": "再インストール",
+            "button_processing": "再インストール中",
+            "desc": "{{artifact}} {{version}} を再インストールしてもよろしいですか?",
+            "title": "{{artifact}} を再インストール"
+        },
+        "update": {
+            "button_idle": "アップデート",
+            "title": "{{artifact}} をアップデート",
+            "desc": "{{artifact}} {{version}} をアップデートしてもよろしいですか？",
+            "button_processing": "アップデート中"
+        }
+    },
+    "PluginListIndex": {
+        "hide": "クイックアクセス: 非表示",
+        "no_plugin": "プラグインがインストールされていません!",
+        "reinstall": "再インストール",
+        "reload": "再読み込み",
+        "uninstall": "アンインストール",
+        "plugin_actions": "プラグインアクション",
+        "update_all_other": "{{count}} 個のプラグインをアップデート",
+        "show": "クイックアクセス: 表示",
+        "update_to": "{{name}} を更新"
+    },
+    "PluginListLabel": {
+        "hidden": "クイックアクセスメニューから非表示にします"
+    },
+    "PluginLoader": {
+        "error": "エラー",
+        "plugin_load_error": {
+            "message": "プラグイン {{name}} の読み込みエラー",
+            "toast": "{{name}} の読み込みエラー"
+        },
+        "plugin_uninstall": {
+            "button": "アンインストール",
+            "desc": "{{name}} をアンインストールしてもよろしいですか?",
+            "title": "{{name}} をアンインストール"
+        },
+        "decky_title": "Decky",
+        "decky_update_available": "{{tag_name}} のアップデートが利用可能です!",
+        "plugin_update_other": "{{count}} 個のプラグインのアップデートが利用可能です!",
+        "plugin_error_uninstall": "{{name}} プラグインを読み込む際に上記のような例外が発生しました。 これは通常、SteamUIの最新バージョンに合ったプラグインのアップデートが必要な場合に発生します。Decky設定のプラグインセクションでアップデートがあるかどうかを確認するか、アンインストールをお試しください。"
+    },
+    "SettingsDeveloperIndex": {
+        "cef_console": {
+            "button": "コンソールを開く",
+            "label": "CEFコンソール",
+            "desc": "CEFコンソールを開きます。デバッグ目的でのみ使用してください。これらの項目は危険な可能性があるので、プラグイン開発者であるか、開発者のガイドに従う場合のみ使用する必要があります。"
+        },
+        "react_devtools": {
+            "ip_label": "IP",
+            "label": "React DevTools を有効化",
+            "desc": "React DevToolsを実行しているコンピューターへの接続を有効にします。この設定を変更すると、Steam が再ロードされます。有効にする前にIPアドレスを設定してください。"
+        },
+        "third_party_plugins": {
+            "button_install": "インストール",
+            "button_zip": "ブラウズ",
+            "header": "サードパーティプラグイン",
+            "label_desc": "URL",
+            "label_url": "URLからプラグインをインストール",
+            "label_zip": "ZIPファイルからプラグインをインストール"
+        },
+        "valve_internal": {
+            "desc1": "Valveの内部開発者メニューを有効にします。",
+            "desc2": "このメニューの機能が分からない場合、このメニューには触れないでください。",
+            "label": "Valve Internalを有効"
+        },
+        "header": "その他"
+    },
+    "PluginView": {
+        "hidden_other": "{{count}} 個のプラグインがこのリストから非表示になります"
+    },
+    "SettingsGeneralIndex": {
+        "about": {
+            "decky_version": "Deckyバージョン",
+            "header": "情報"
+        },
+        "developer_mode": {
+            "label": "開発者モード"
+        },
+        "notifications": {
+            "header": "通知",
+            "plugin_updates_label": "プラグインのアップデートが利用可能な場合に通知",
+            "decky_updates_label": "Deckyのアップデートが利用可能な場合に通知"
+        },
+        "beta": {
+            "header": "ベータ版への参加"
+        },
+        "other": {
+            "header": "その他"
+        },
+        "updates": {
+            "header": "アップデート"
+        }
+    },
+    "SettingsIndex": {
+        "developer_title": "開発者",
+        "plugins_title": "プラグイン",
+        "general_title": "一般"
+    },
+    "Store": {
+        "store_filter": {
+            "label": "フィルター",
+            "label_def": "すべて"
+        },
+        "store_search": {
+            "label": "検索"
+        },
+        "store_sort": {
+            "label": "並べ替え",
+            "label_def": "直近のアップデート(新しい順)"
+        },
+        "store_source": {
+            "desc": "すべてのプラグインのソース コードは、GitHubのSteamDeckHomebrew/decky-plugin-databaseリポジトリで入手できます。",
+            "label": "ソースコード"
+        },
+        "store_tabs": {
+            "alph_asce": "アルファベット(Z to A)",
+            "alph_desc": "アルファベット(A to Z)",
+            "title": "閲覧",
+            "about": "概要"
+        },
+        "store_testing_warning": {
+            "label": "テストストア チャンネルへようこそ",
+            "desc": "このストアチャンネルを使用して、最先端のプラグイン バージョンをテストできます。 すべてのユーザーがプラグインを更新できるように、必ずGitHubにフィードバックを残してください。"
+        },
+        "store_contrib": {
+            "desc": "Decky Plugin Storeに貢献したい場合は、GitHubのSteamDeckHomebrew/decky-plugin-templateリポジトリを確認してください。 開発と配布に関する情報は README で入手できます。",
+            "label": "貢献"
+        },
+        "store_testing_cta": "Decky Loaderチームを支援するために、新しいプラグインのテストを検討してください!"
+    },
+    "StoreSelect": {
+        "custom_store": {
+            "label": "カスタムストア",
+            "url_label": "URL"
+        },
+        "store_channel": {
+            "custom": "カスタム",
+            "default": "デフォルト",
+            "label": "ストアチャンネル",
+            "testing": "テスト"
+        }
+    },
+    "TitleView": {
+        "decky_store_desc": "Deckyストアを開く",
+        "settings_desc": "Decky設定を開く"
+    },
+    "Updater": {
+        "decky_updates": "Deckyアップデート",
+        "no_patch_notes_desc": "このバージョンのパッチノートはありません",
+        "patch_notes_desc": "パッチノート",
+        "updates": {
+            "check_button": "アップデートを確認",
+            "checking": "確認中",
+            "cur_version": "現在のバージョン: {{ver}}",
+            "install_button": "アップデートをインストール",
+            "label": "アップデート",
+            "lat_version": "アップデート: {{ver}} を実行中",
+            "reloading": "再読み込み中",
+            "updating": "アップデート中"
+        }
+    },
+    "FilePickerError": {
+        "errors": {
+            "file_not_found": "指定されたパスは無効です。 内容をご確認の上、正しく入力し直してください。",
+            "unknown": "不明なエラーが発生しました。 エラー内容は次のとおりです: {{raw_error}}",
+            "perm_denied": "選択したパスへのアクセス権がありません。選択したフォルダ/ファイルのアクセス権がユーザー(Steam Deckのdeckユーザー)に合わせて正しく設定されていることを確認してください。"
+        }
+    },
+    "PluginCard": {
+        "plugin_version_label": "プラグインバージョン",
+        "plugin_no_desc": "説明はありません。",
+        "plugin_full_access": "このプラグインはSteam Deckの全てのアクセス権を持ちます。",
+        "plugin_install": "インストール"
+    },
+    "RemoteDebugging": {
+        "remote_cef": {
+            "label": "リモート CEF デバッグを許可する",
+            "desc": "ネットワーク上のすべてのユーザーにCEFデバッガへの非認証アクセスを許可します"
+        }
+    }
+}

backend/locales/pt-BR.json

@@ -210,7 +210,11 @@
             "title": "Navegar",
             "alph_asce": "Alfabética (Z - A)"
         },
-        "store_testing_cta": "Por favor, considere testar os novos plugins para ajudar o time do Decky Loader!"
+        "store_testing_cta": "Por favor, considere testar os novos plugins para ajudar o time do Decky Loader!",
+        "store_testing_warning": {
+            "desc": "Você pode usar este canal da loja para testar versões avançadas do plugin. Certifique-se de deixar feedback no GitHub para que o plugin possa ser atualizado para todos os usuários.",
+            "label": "Bem-vindo ao Canal de Testes da Loja"
+        }
     },
     "StoreSelect": {
         "custom_store": {
@@ -255,5 +259,9 @@
             "unknown": "Ocorreu um erro desconhecido. O erro completo é: {{raw_error}}",
             "perm_denied": "Você não tem acesso à este diretório. Por favor, verifiquei se seu usuário (deck no Steam Deck) tem as permissões necessárias para acessar este arquivo/pasta."
         }
+    },
+    "TitleView": {
+        "decky_store_desc": "Abrir Loja Decky",
+        "settings_desc": "Abrir Definições Decky"
     }
 }

backend/locales/pt-PT.json

@@ -1,7 +1,27 @@
 {
     "FilePickerIndex": {
         "folder": {
-            "select": "Usar esta pasta"
+            "select": "Usar esta pasta",
+            "label": "Pasta",
+            "show_more": "Mostrar mais ficheiros"
+        },
+        "file": {
+            "select": "Selecionar este ficheiro"
+        },
+        "filter": {
+            "size_desc": "Tamanho (maior)",
+            "created_asce": "Criado (mais antigo)",
+            "created_desc": "Criado (mais recente)",
+            "modified_asce": "Modificado (mais antigo)",
+            "modified_desc": "Modificado (mais recente)",
+            "name_asce": "Z-A",
+            "name_desc": "A-Z",
+            "size_asce": "Tamanho (mais pequeno)"
+        },
+        "files": {
+            "file_type": "Tipo de ficheiro",
+            "show_hidden": "Mostrar ficheiros ocultos",
+            "all_files": "Todos os ficheiros"
         }
     },
     "PluginView": {
@@ -157,6 +177,11 @@
         },
         "updates": {
             "header": "Actualizações"
+        },
+        "notifications": {
+            "decky_updates_label": "Atualização Decky disponível",
+            "header": "Notificações",
+            "plugin_updates_label": "Atualizações de plugins disponíveis"
         }
     },
     "SettingsIndex": {
@@ -190,7 +215,11 @@
             "alph_desc": "Alfabeticamente (A-Z)",
             "title": "Navegar"
         },
-        "store_testing_cta": "Testa novos plugins e ajuda a equipa do Decky Loader!"
+        "store_testing_cta": "Testa novos plugins e ajuda a equipa do Decky Loader!",
+        "store_testing_warning": {
+            "desc": "Pode usar esta versão da loja para testar versões experimentais de plugins. Certifique-se de deixar feedback no GitHub para que o plugin possa ser atualizado para todos os utilizadores.",
+            "label": "Bem-vindo ao Canal de Testes da Loja"
+        }
     },
     "StoreSelect": {
         "custom_store": {
@@ -218,5 +247,21 @@
             "reloading": "Recarregar",
             "install_button": "Instalar actualização"
         }
+    },
+    "FilePickerError": {
+        "errors": {
+            "perm_denied": "Não tem acesso ao diretório especificado. Por favor, verifique se o seu utilizador (deck na Steam Deck) possui as permissões correspondentes para aceder à pasta/ficheiro especificado.",
+            "unknown": "Ocorreu um erro desconhecido. O erro é: {{raw_error}}",
+            "file_not_found": "O caminho especificado não é válido. Por favor, verifique e insira-o corretamente."
+        }
+    },
+    "TitleView": {
+        "decky_store_desc": "Abrir a Loja Decky",
+        "settings_desc": "Abrir as Definições Decky"
+    },
+    "DropdownMultiselect": {
+        "button": {
+            "back": "Voltar"
+        }
     }
 }

backend/requirements.txt

@@ -1,4 +1,4 @@
-aiohttp==3.8.4
+aiohttp==3.9.0
 aiohttp-jinja2==1.5.1
 aiohttp_cors==0.7.0
 watchdog==2.1.7

backend/src/browser.py

@@ -186,6 +186,18 @@ class PluginBrowser:
                 else:
                     logger.fatal(f"Could not fetch from URL. {await res.text()}")
 
+            storeUrl = ""
+            match self.settings.getSetting("store", 0):
+                case 0: storeUrl = "https://plugins.deckbrew.xyz/plugins" # default
+                case 1: storeUrl = "https://testing.deckbrew.xyz/plugins" # testing
+                case 2: storeUrl = self.settings.getSetting("store-url", "https://plugins.deckbrew.xyz/plugins")  # custom
+                case _: storeUrl = "https://plugins.deckbrew.xyz/plugins"
+            logger.info(f"Incrementing installs for {name} from URL {storeUrl} (version {version})")
+            async with ClientSession() as client:
+                res = await client.post(storeUrl+f"/{name}/versions/{version}/increment?isUpdate={isInstalled}", ssl=get_ssl_context())
+                if res.status != 200:
+                    logger.error(f"Server did not accept install count increment request. code: {res.status}")
+
         # Check to make sure we got the file
         if res_zip is None:
             logger.fatal(f"Could not fetch {artifact}")

backend/src/injector.py

@@ -412,7 +412,7 @@ async def get_tab_lambda(test: Callable[[Tab], bool]) -> Tab:
 
 SHARED_CTX_NAMES = ["SharedJSContext", "Steam Shared Context presented by Valve™", "Steam", "SP"]
 CLOSEABLE_URLS = ["about:blank", "data:text/html,%3Cbody%3E%3C%2Fbody%3E"] # Closing anything other than these *really* likes to crash Steam
-DO_NOT_CLOSE_URL = "Valve Steam Gamepad/default" # Steam Big Picture Mode tab
+DO_NOT_CLOSE_URLS = ["Valve Steam Gamepad/default", "Valve%20Steam%20Gamepad/default"] # Steam Big Picture Mode tab
 
 def tab_is_gamepadui(t: Tab) -> bool:
     return "https://steamloopback.host/routes/" in t.url and t.title in SHARED_CTX_NAMES
@@ -432,7 +432,7 @@ async def inject_to_tab(tab_name: str, js: str, run_async: bool = False):
 async def close_old_tabs():
     tabs = await get_tabs()
     for t in tabs:
-        if not t.title or (t.title not in SHARED_CTX_NAMES and any(url in t.url for url in CLOSEABLE_URLS) and DO_NOT_CLOSE_URL not in t.url):
+        if not t.title or (t.title not in SHARED_CTX_NAMES and any(url in t.url for url in CLOSEABLE_URLS) and not any(url in t.url for url in DO_NOT_CLOSE_URLS)):
             logger.debug("Closing tab: " + getattr(t, "title", "Untitled"))
             await t.close()
             await sleep(0.5)

backend/src/localplatformlinux.py

@@ -58,8 +58,22 @@ def chown(path : str,  user : UserType = UserType.HOST_USER, recursive : bool =
 def chmod(path : str, permissions : int, recursive : bool = True) -> bool:
     if _get_effective_user_id() != 0:
         return True
-    result = call(["chmod", "-R", str(permissions), path] if recursive else ["chmod", str(permissions), path])
-    return result == 0
+
+    try:
+        octal_permissions = int(str(permissions), 8)
+
+        if recursive:
+            for root, dirs, files in os.walk(path):  
+                for d in dirs:  
+                    os.chmod(os.path.join(root, d), octal_permissions)
+                for d in files:
+                    os.chmod(os.path.join(root, d), octal_permissions)
+
+        os.chmod(path, octal_permissions)
+    except:
+        return False
+
+    return True
 
 def folder_owner(path : str) -> UserType|None:
     user_owner = _get_user_owner(path)
@@ -125,11 +139,19 @@ async def service_restart(service_name : str) -> bool:
     return res.returncode == 0
 
 async def service_stop(service_name : str) -> bool:
+    if not await service_active(service_name):
+        # Service isn't running. pretend we stopped it
+        return True
+
     cmd = ["systemctl", "stop", service_name]
     res = run(cmd, stdout=PIPE, stderr=STDOUT)
     return res.returncode == 0
 
 async def service_start(service_name : str) -> bool:
+    if await service_active(service_name):
+        # Service is running. pretend we started it
+        return True
+
     cmd = ["systemctl", "start", service_name]
     res = run(cmd, stdout=PIPE, stderr=STDOUT)
     return res.returncode == 0

backend/src/plugin.py

@@ -118,11 +118,11 @@ class PluginWrapper:
 
         if "stop" in data:
             self.log.info("Calling Loader unload function.")
-            await self._unload()
             get_event_loop().stop()
             while get_event_loop().is_running():
                 await sleep(0)
             get_event_loop().close()
+            await self._unload()
             raise Exception("Closing message listener")
 
         # TODO there is definitely a better way to type this

frontend/package.json

@@ -44,7 +44,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "3.21.1",
+    "decky-frontend-lib": "3.24.5",
     "filesize": "^10.0.7",
     "i18next": "^23.2.1",
     "i18next-http-backend": "^2.2.1",

frontend/pnpm-lock.yaml

@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   decky-frontend-lib:
-    specifier: 3.21.1
-    version: 3.21.1
+    specifier: 3.24.5
+    version: 3.24.5
   filesize:
     specifier: ^10.0.7
     version: 10.0.7
@@ -1482,8 +1482,8 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib@3.21.1:
-    resolution: {integrity: sha512-30605ET9qqZ6St6I9WmMmLGgSrTIdMwo7xy85+lRaF1miUd2icOGEJjwnbVcZDdkal+1fJ3tNEDXlchVfG4TrA==}
+  /decky-frontend-lib@3.24.5:
+    resolution: {integrity: sha512-eYlbKDOOcIBPI0b76Rqvlryq2ym/QNiry4xf2pFrXmBa1f95dflqbQAb2gTq9uHEa5gFmeV4lUcMPGJ3M14Xqw==}
     dev: false
 
   /decode-named-character-reference@1.0.2:
@@ -1852,8 +1852,8 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
 
-  /fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
@@ -3200,6 +3200,7 @@ packages:
       prop-types: 15.8.1
       react: 16.14.0
       scheduler: 0.19.1
+    bundledDependencies: false
 
   /react-file-icon@1.3.0(react-dom@16.14.0)(react@16.14.0):
     resolution: {integrity: sha512-wxl/WwSX5twQKVXloPHbS71iZQUKO84KgZ44Kh7vYZGu1qH2kagx+RSTNfk/+IHtXfjPWPNIHPGi2Y8S94N1CQ==}
@@ -3283,6 +3284,7 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       prop-types: 15.8.1
+    bundledDependencies: false
 
   /readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
@@ -3477,7 +3479,7 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /rsvp@3.2.1:

frontend/src/components/PluginView.tsx

@@ -1,12 +1,4 @@
-import {
-  ButtonItem,
-  Focusable,
-  PanelSection,
-  PanelSectionRow,
-  joinClassNames,
-  scrollClasses,
-  staticClasses,
-} from 'decky-frontend-lib';
+import { ButtonItem, Focusable, PanelSection, PanelSectionRow } from 'decky-frontend-lib';
 import { VFC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaEyeSlash } from 'react-icons/fa';
@@ -36,10 +28,7 @@ const PluginView: VFC = () => {
     return (
       <Focusable onCancelButton={closeActivePlugin}>
         <TitleView />
-        <div
-          className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}
-          style={{ height: '100%' }}
-        >
+        <div style={{ height: '100%', paddingTop: '16px' }}>
           {(visible || activePlugin.alwaysRender) && activePlugin.content}
         </div>
       </Focusable>
@@ -48,7 +37,11 @@ const PluginView: VFC = () => {
   return (
     <>
       <TitleView />
-      <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}>
+      <div
+        style={{
+          paddingTop: '16px',
+        }}
+      >
         <PanelSection>
           {pluginList
             .filter((p) => p.content)

frontend/src/components/TitleView.tsx

@@ -10,6 +10,8 @@ const titleStyles: CSSProperties = {
   display: 'flex',
   paddingTop: '3px',
   paddingRight: '16px',
+  position: 'sticky',
+  top: '0px',
 };
 
 const TitleView: VFC = () => {

frontend/src/components/store/Store.tsx

@@ -8,20 +8,19 @@ import {
   TextField,
   findModule,
 } from 'decky-frontend-lib';
-import { FC, useEffect, useMemo, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import logo from '../../../assets/plugin_store.png';
 import Logger from '../../logger';
-import { Store, StorePlugin, getPluginList, getStore } from '../../store';
+import { SortDirections, SortOptions, Store, StorePlugin, getPluginList, getStore } from '../../store';
 import PluginCard from './PluginCard';
 
 const logger = new Logger('Store');
 
 const StorePage: FC<{}> = () => {
   const [currentTabRoute, setCurrentTabRoute] = useState<string>('browse');
-  const [data, setData] = useState<StorePlugin[] | null>(null);
-  const [isTesting, setIsTesting] = useState<boolean>(false);
+  const [pluginCount, setPluginCount] = useState<number | null>(null);
   const { TabCount } = findModule((m) => {
     if (m?.TabCount && m?.TabTitle) return true;
     return false;
@@ -29,17 +28,6 @@ const StorePage: FC<{}> = () => {
 
   const { t } = useTranslation();
 
-  useEffect(() => {
-    (async () => {
-      const res = await getPluginList();
-      logger.log('got data!', res);
-      setData(res);
-      const storeRes = await getStore();
-      logger.log(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`);
-      setIsTesting(storeRes === Store.Testing);
-    })();
-  }, []);
-
   return (
     <>
       <div
@@ -49,52 +37,71 @@ const StorePage: FC<{}> = () => {
           background: '#0005',
         }}
       >
-        {!data ? (
-          <div style={{ height: '100%' }}>
-            <SteamSpinner />
-          </div>
-        ) : (
-          <Tabs
-            activeTab={currentTabRoute}
-            onShowTab={(tabId: string) => {
-              setCurrentTabRoute(tabId);
-            }}
-            tabs={[
-              {
-                title: t('Store.store_tabs.title'),
-                content: <BrowseTab children={{ data: data, isTesting: isTesting }} />,
-                id: 'browse',
-                renderTabAddon: () => <span className={TabCount}>{data.length}</span>,
-              },
-              {
-                title: t('Store.store_tabs.about'),
-                content: <AboutTab />,
-                id: 'about',
-              },
-            ]}
-          />
-        )}
+        <Tabs
+          activeTab={currentTabRoute}
+          onShowTab={(tabId: string) => {
+            setCurrentTabRoute(tabId);
+          }}
+          tabs={[
+            {
+              title: t('Store.store_tabs.title'),
+              content: <BrowseTab setPluginCount={setPluginCount} />,
+              id: 'browse',
+              renderTabAddon: () => <span className={TabCount}>{pluginCount}</span>,
+            },
+            {
+              title: t('Store.store_tabs.about'),
+              content: <AboutTab />,
+              id: 'about',
+            },
+          ]}
+        />
       </div>
     </>
   );
 };
 
-const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> = (data) => {
+const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }> = ({ setPluginCount }) => {
   const { t } = useTranslation();
 
-  const sortOptions = useMemo(
+  const dropdownSortOptions = useMemo(
     (): DropdownOption[] => [
-      { data: 1, label: t('Store.store_tabs.alph_desc') },
-      { data: 2, label: t('Store.store_tabs.alph_asce') },
+      // ascending and descending order are the wrong way around for the alphabetical sort
+      // this is because it was initially done incorrectly for i18n and 'fixing' it would
+      // make all the translations incorrect
+      { data: [SortOptions.name, SortDirections.ascending], label: t('Store.store_tabs.alph_desc') },
+      { data: [SortOptions.name, SortDirections.descending], label: t('Store.store_tabs.alph_asce') },
+      { data: [SortOptions.date, SortDirections.ascending], label: t('Store.store_tabs.date_asce') },
+      { data: [SortOptions.date, SortDirections.descending], label: t('Store.store_tabs.date_desc') },
+      { data: [SortOptions.downloads, SortDirections.descending], label: t('Store.store_tabs.downloads_desc') },
+      { data: [SortOptions.downloads, SortDirections.ascending], label: t('Store.store_tabs.downloads_asce') },
     ],
     [],
   );
 
   // const filterOptions = useMemo((): DropdownOption[] => [{ data: 1, label: 'All' }], []);
-
-  const [selectedSort, setSort] = useState<number>(sortOptions[0].data);
+  const [selectedSort, setSort] = useState<[SortOptions, SortDirections]>(dropdownSortOptions[0].data);
   // const [selectedFilter, setFilter] = useState<number>(filterOptions[0].data);
   const [searchFieldValue, setSearchValue] = useState<string>('');
+  const [pluginList, setPluginList] = useState<StorePlugin[] | null>(null);
+  const [isTesting, setIsTesting] = useState<boolean>(false);
+
+  useEffect(() => {
+    (async () => {
+      const res = await getPluginList(selectedSort[0], selectedSort[1]);
+      logger.log('got data!', res);
+      setPluginList(res);
+      setPluginCount(res.length);
+    })();
+  }, [selectedSort]);
+
+  useEffect(() => {
+    (async () => {
+      const storeRes = await getStore();
+      logger.log(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`);
+      setIsTesting(storeRes === Store.Testing);
+    })();
+  }, []);
 
   return (
     <>
@@ -117,7 +124,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> =
             <span className="DialogLabel">{t("Store.store_sort.label")}</span>
             <Dropdown
               menuLabel={t("Store.store_sort.label") as string}
-              rgOptions={sortOptions}
+              rgOptions={dropdownSortOptions}
               strDefaultLabel={t("Store.store_sort.label_def") as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
@@ -163,7 +170,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> =
             <span className="DialogLabel">{t('Store.store_sort.label')}</span>
             <Dropdown
               menuLabel={t('Store.store_sort.label') as string}
-              rgOptions={sortOptions}
+              rgOptions={dropdownSortOptions}
               strDefaultLabel={t('Store.store_sort.label_def') as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
@@ -182,7 +189,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> =
           </div>
         </Focusable>
       </div>
-      {data.children.isTesting && (
+      {isTesting && (
         <div
           style={{
             alignItems: 'center',
@@ -213,22 +220,22 @@ const BrowseTab: FC<{ children: { data: StorePlugin[]; isTesting: boolean } }> =
         </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} />
-          ))}
+        {!pluginList ? (
+          <div style={{ height: '100%' }}>
+            <SteamSpinner />
+          </div>
+        ) : (
+          pluginList
+            .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()))
+              );
+            })
+            .map((plugin: StorePlugin) => <PluginCard plugin={plugin} />)
+        )}
       </div>
     </>
   );

frontend/src/developer.tsx

@@ -1,4 +1,4 @@
-import { findModuleChild, sleep } from 'decky-frontend-lib';
+import { sleep } from 'decky-frontend-lib';
 import { FaReact } from 'react-icons/fa';
 
 import Logger from './logger';
@@ -9,32 +9,30 @@ const logger = new Logger('DeveloperMode');
 
 let removeSettingsObserver: () => void = () => {};
 
-export async function setShowValveInternal(show: boolean) {
-  let settingsMod: any;
-  while (!settingsMod) {
-    settingsMod = findModuleChild((m) => {
-      if (typeof m !== 'object') return undefined;
-      for (let prop in m) {
-        if (typeof m[prop]?.settings?.bIsValveEmail !== 'undefined') return m[prop];
-      }
-    });
-    if (!settingsMod) {
-      logger.debug('[ValveInternal] waiting for settingsMod');
-      await sleep(1000);
-    }
+declare global {
+  interface Window {
+    settingsStore: any;
   }
+}
 
+export async function setShowValveInternal(show: boolean) {
   if (show) {
-    removeSettingsObserver = settingsMod[
-      Object.getOwnPropertySymbols(settingsMod).find((x) => x.toString() == 'Symbol(mobx administration)') as any
-    ].observe((e: any) => {
+    const mobx =
+      window.settingsStore[
+        Object.getOwnPropertySymbols(window.settingsStore).find(
+          (x) => x.toString() == 'Symbol(mobx administration)',
+        ) as any
+      ];
+
+    removeSettingsObserver = (mobx.observe_ || mobx.observe).call(mobx, (e: any) => {
       e.newValue.bIsValveEmail = true;
     });
-    settingsMod.m_Settings.bIsValveEmail = true;
+
+    window.settingsStore.m_Settings.bIsValveEmail = true;
     logger.log('Enabled Valve Internal menu');
   } else {
     removeSettingsObserver();
-    settingsMod.m_Settings.bIsValveEmail = false;
+    window.settingsStore.m_Settings.bIsValveEmail = false;
     logger.log('Disabled Valve Internal menu');
   }
 }

frontend/src/store.tsx

@@ -7,6 +7,17 @@ export enum Store {
   Custom,
 }
 
+export enum SortOptions {
+  name = 'name',
+  date = 'date',
+  downloads = 'downloads',
+}
+
+export enum SortDirections {
+  ascending = 'asc',
+  descending = 'desc',
+}
+
 export interface StorePluginVersion {
   name: string;
   hash: string;
@@ -36,11 +47,20 @@ export async function getStore(): Promise<Store> {
   return await getSetting<Store>('store', Store.Default);
 }
 
-export async function getPluginList(): Promise<StorePlugin[]> {
+export async function getPluginList(
+  sort_by: SortOptions | null = null,
+  sort_direction: SortDirections | null = null,
+): Promise<StorePlugin[]> {
   let version = await window.DeckyPluginLoader.updateVersion();
   let store = await getSetting<Store | null>('store', null);
 
   let customURL = await getSetting<string>('store-url', 'https://plugins.deckbrew.xyz/plugins');
+
+  let query: URLSearchParams | string = new URLSearchParams();
+  sort_by && query.set('sort_by', sort_by);
+  sort_direction && query.set('sort_direction', sort_direction);
+  query = '?' + String(query);
+
   let storeURL;
   if (store === null) {
     console.log('Could not get store, using Default.');
@@ -62,7 +82,7 @@ export async function getPluginList(): Promise<StorePlugin[]> {
       storeURL = 'https://plugins.deckbrew.xyz/plugins';
       break;
   }
-  return fetch(storeURL, {
+  return fetch(storeURL + query, {
     method: 'GET',
     headers: {
       'X-Decky-Version': version.current,

frontend/src/tabs-hook.old.tsx

@@ -1,5 +1,5 @@
 // TabsHook for versions before the Desktop merge
-import { Patch, afterPatch, sleep } from 'decky-frontend-lib';
+import { Patch, afterPatch, getReactRoot, sleep } from 'decky-frontend-lib';
 import { memo } from 'react';
 
 import NewTabsHook from './tabs-hook';
@@ -35,7 +35,7 @@ class TabsHook extends NewTabsHook {
 
   init() {
     const self = this;
-    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    const tree = getReactRoot(document.getElementById('root') as any);
     let scrollRoot: any;
     async function findScrollRoot(currentNode: any, iters: number): Promise<any> {
       if (iters >= 30) {

frontend/src/tabs-hook.tsx

@@ -1,5 +1,5 @@
 // TabsHook for versions after the Desktop merge
-import { Patch, QuickAccessTab, afterPatch, findInReactTree, sleep } from 'decky-frontend-lib';
+import { Patch, QuickAccessTab, afterPatch, findInReactTree, getReactRoot, sleep } from 'decky-frontend-lib';
 
 import { QuickAccessVisibleStateProvider } from './components/QuickAccessVisibleState';
 import Logger from './logger';
@@ -32,11 +32,11 @@ class TabsHook extends Logger {
   }
 
   init() {
-    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    const tree = getReactRoot(document.getElementById('root') as any);
     let qAMRoot: any;
     const findQAMRoot = (currentNode: any, iters: number): any => {
-      if (iters >= 65) {
-        // currently 45
+      if (iters >= 80) {
+        // currently 67
         return null;
       }
       if (

frontend/src/toaster.tsx

@@ -1,4 +1,13 @@
-import { Module, Patch, ToastData, afterPatch, findInReactTree, findModuleChild, sleep } from 'decky-frontend-lib';
+import {
+  Module,
+  Patch,
+  ToastData,
+  afterPatch,
+  findInReactTree,
+  findModuleChild,
+  getReactRoot,
+  sleep,
+} from 'decky-frontend-lib';
 import { ReactNode } from 'react';
 
 import Toast from './components/Toast';
@@ -38,16 +47,17 @@ class Toaster extends Logger {
     //   </DeckyToasterStateContextProvider>
     // ));
     let instance: any;
-    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    const tree = getReactRoot(document.getElementById('root') as any);
     const findToasterRoot = (currentNode: any, iters: number): any => {
-      if (iters >= 65) {
-        // currently 65
+      if (iters >= 80) {
+        // currently 66
         return null;
       }
       if (
         currentNode?.memoizedProps?.className?.startsWith?.('gamepadtoasts_GamepadToastPlaceholder') ||
         currentNode?.memoizedProps?.className?.startsWith?.('toastmanager_ToastPlaceholder') ||
-        currentNode?.memoizedProps?.className?.startsWith?.('toastmanager_ToastPopup')
+        currentNode?.memoizedProps?.className?.startsWith?.('toastmanager_ToastPopup') ||
+        currentNode?.memoizedProps?.className?.startsWith?.('gamepadtoasts_GamepadToastPopup')
       ) {
         this.log(`Toaster root was found in ${iters} recursion cycles`);
         return currentNode;
@@ -71,7 +81,10 @@ class Toaster extends Logger {
       instance = findToasterRoot(tree, 0);
     }
     this.node = instance.return;
-    this.rNode = this.node.return;
+    this.rNode = findInReactTree(
+      this.node.return.return,
+      (node) => node?.stateNode && node.type?.InstallErrorReportingStore,
+    );
     let toast: any;
     let renderedToast: ReactNode = null;
     let innerPatched: any;