Bump DFL to 3.20.7 (#449)

* Hotfix for i18n where the detector was overriding localStorage

* Please, pnpm, cooperate

* Small fix regarding the backend getting hammered when switching to not supported languages plus a small english typo

.github/workflows/build.yml

@@ -69,7 +69,7 @@ jobs:
       run: pnpm run build
 
     - name: Build Python Backend 🛠️
-      run: pyinstaller --noconfirm --onefile --name "PluginLoader" --add-data ./backend/static:/static --add-data ./backend/legacy:/legacy --add-data ./plugin:/plugin ./backend/*.py
+      run: pyinstaller --noconfirm --onefile --name "PluginLoader" --add-data ./backend/static:/static --add-data ./backend/locales:/locales --add-data ./backend/legacy:/legacy --add-data ./plugin:/plugin ./backend/*.py
         
     - name: Upload package artifact ⬆️
       if: ${{ !env.ACT }}

.vscode/tasks.json

@@ -41,6 +41,14 @@
             "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'",
             "problemMatcher": []
         },
+        {
+            "label": "extracttext",
+            "type": "shell",
+            "group": "none",
+            "detail": "Check for new strings in the frontend source code and extract it into the corresponding json language files",
+            "command": "cd frontend && ./node_modules/.bin/i18next --config ./i18next-parser.config.mjs",
+            "problemMatcher": []
+        },
         // BUILD
         {
             "label": "pnpmsetup",

backend/browser.py

@@ -139,6 +139,10 @@ class PluginBrowser:
             self.loader.watcher.disabled = False
 
     async def _install(self, artifact, name, version, hash):
+        # Will be set later in code
+        res_zip = None
+
+        # Check if plugin is installed
         isInstalled = False
         if self.loader.watcher:
             self.loader.watcher.disabled = True
@@ -148,54 +152,69 @@ class PluginBrowser:
                 isInstalled = True
         except:
             logger.error(f"Failed to determine if {name} is already installed, continuing anyway.")
-        logger.info(f"Installing {name} (Version: {version})")
-        async with ClientSession() as client:
-            logger.debug(f"Fetching {artifact}")
-            res = await client.get(artifact, ssl=get_ssl_context())
-            if res.status == 200:
-                logger.debug("Got 200. Reading...")
-                data = await res.read()
-                logger.debug(f"Read {len(data)} bytes")
-                res_zip = BytesIO(data)
-                if isInstalled:
-                    try:
-                        logger.debug("Uninstalling existing plugin...")
-                        await self.uninstall_plugin(name)
-                    except:
-                        logger.error(f"Plugin {name} could not be uninstalled.")
-                logger.debug("Unzipping...")
-                ret = self._unzip_to_plugin_dir(res_zip, name, hash)
-                if ret:
-                    plugin_folder = self.find_plugin_folder(name)
-                    plugin_dir = path.join(self.plugin_path, plugin_folder)
-                    ret = await self._download_remote_binaries_for_plugin_with_name(plugin_dir)
-                    if ret:
-                        logger.info(f"Installed {name} (Version: {version})")
-                        if name in self.loader.plugins:
-                            self.loader.plugins[name].stop()
-                            self.loader.plugins.pop(name, None)
-                        await sleep(1)
-                        
-                        current_plugin_order = self.settings.getSetting("pluginOrder")
-                        current_plugin_order.append(name)
-                        self.settings.setSetting("pluginOrder", current_plugin_order)
-                        logger.debug("Plugin %s was added to the pluginOrder setting", name)
-                        self.loader.import_plugin(path.join(plugin_dir, "main.py"), plugin_folder)
-                    else:
-                        logger.fatal(f"Failed Downloading Remote Binaries")
-                else:
-                    self.log.fatal(f"SHA-256 Mismatch!!!! {name} (Version: {version})")
-                if self.loader.watcher:
-                    self.loader.watcher.disabled = False
-            else:
-                logger.fatal(f"Could not fetch from URL. {await res.text()}")
 
-    async def request_plugin_install(self, artifact, name, version, hash):
+        # Check if the file is a local file or a URL
+        if artifact.startswith("file://"):
+            logger.info(f"Installing {name} from local ZIP file (Version: {version})")
+            res_zip = BytesIO(open(artifact[7:], "rb").read())
+        else:
+            logger.info(f"Installing {name} from URL (Version: {version})")
+            async with ClientSession() as client:
+                logger.debug(f"Fetching {artifact}")
+                res = await client.get(artifact, ssl=get_ssl_context())
+                if res.status == 200:
+                    logger.debug("Got 200. Reading...")
+                    data = await res.read()
+                    logger.debug(f"Read {len(data)} bytes")
+                    res_zip = BytesIO(data)
+                else:
+                    logger.fatal(f"Could not fetch from URL. {await res.text()}")
+
+        # Check to make sure we got the file
+        if res_zip is None:
+            logger.fatal(f"Could not fetch {artifact}")
+            return
+        
+        # If plugin is installed, uninstall it
+        if isInstalled:
+            try:
+                logger.debug("Uninstalling existing plugin...")
+                await self.uninstall_plugin(name)
+            except:
+                logger.error(f"Plugin {name} could not be uninstalled.")
+
+        # Install the plugin
+        logger.debug("Unzipping...")
+        ret = self._unzip_to_plugin_dir(res_zip, name, hash)
+        if ret:
+            plugin_folder = self.find_plugin_folder(name)
+            plugin_dir = path.join(self.plugin_path, plugin_folder)
+            ret = await self._download_remote_binaries_for_plugin_with_name(plugin_dir)
+            if ret:
+                logger.info(f"Installed {name} (Version: {version})")
+                if name in self.loader.plugins:
+                    self.loader.plugins[name].stop()
+                    self.loader.plugins.pop(name, None)
+                await sleep(1)
+                
+                current_plugin_order = self.settings.getSetting("pluginOrder")
+                current_plugin_order.append(name)
+                self.settings.setSetting("pluginOrder", current_plugin_order)
+                logger.debug("Plugin %s was added to the pluginOrder setting", name)
+                self.loader.import_plugin(path.join(plugin_dir, "main.py"), plugin_folder)
+            else:
+                logger.fatal(f"Failed Downloading Remote Binaries")
+        else:
+            self.log.fatal(f"SHA-256 Mismatch!!!! {name} (Version: {version})")
+        if self.loader.watcher:
+            self.loader.watcher.disabled = False
+
+    async def request_plugin_install(self, artifact, name, version, hash, install_type):
         request_id = str(time())
         self.install_requests[request_id] = PluginInstallContext(artifact, name, version, hash)
         tab = await get_gamepadui_tab()
         await tab.open_websocket()
-        await tab.evaluate_js(f"DeckyPluginLoader.addPluginInstallPrompt('{name}', '{version}', '{request_id}', '{hash}')")
+        await tab.evaluate_js(f"DeckyPluginLoader.addPluginInstallPrompt('{name}', '{version}', '{request_id}', '{hash}', {install_type})")
 
     async def confirm_plugin_install(self, request_id):
         request = self.install_requests.pop(request_id)

backend/helpers.py

@@ -36,9 +36,9 @@ async def csrf_middleware(request, handler):
         return await handler(request)
     return Response(text='Forbidden', status='403')
 
-# Get the default homebrew path unless a home_path is specified
+# Get the default homebrew path unless a home_path is specified. home_path argument is deprecated
 def get_homebrew_path(home_path = None) -> str:
-    return os.path.join(home_path if home_path != None else localplatform.get_home_path(), "homebrew")
+    return localplatform.get_unprivileged_path()
 
 # Recursively create path and chown as user
 def mkdir_as_user(path):

backend/loader.py

@@ -77,6 +77,7 @@ class Loader:
 
         server_instance.add_routes([
             web.get("/frontend/{path:.*}", self.handle_frontend_assets),
+            web.get("/locales/{path:.*}", self.handle_frontend_locales),
             web.get("/plugins", self.get_plugins),
             web.get("/plugins/{plugin_name}/frontend_bundle", self.handle_frontend_bundle),
             web.post("/plugins/{plugin_name}/methods/{method_name}", self.handle_plugin_method_call),
@@ -99,6 +100,15 @@ class Loader:
 
         return web.FileResponse(file, headers={"Cache-Control": "no-cache"})
 
+    async def handle_frontend_locales(self, request):
+        req_lang = request.match_info["path"]
+        file = path.join(path.dirname(__file__), "locales", req_lang)
+        if exists(file):
+            return web.FileResponse(file, headers={"Cache-Control": "no-cache", "Content-Type": "application/json"})
+        else:
+            self.logger.info(f"Language {req_lang} not available, returning an empty dictionary")
+            return web.json_response(data={}, headers={"Cache-Control": "no-cache"})
+
     async def get_plugins(self, request):
         plugins = list(self.plugins.values())
         return web.json_response([{"name": str(i) if not i.legacy else "$LEGACY_"+str(i), "version": i.version} for i in plugins])

backend/locales/en-US.json

@@ -0,0 +1,183 @@
+{
+  "BranchSelect": {
+    "update_channel": {
+      "label": "Update Channel",
+      "prerelease": "Prerelease",
+      "stable": "Stable",
+      "testing": "Testing"
+    }
+  },
+  "Developer": {
+    "5secreload": "Reloading in 5 seconds",
+    "disabling": "Disabling",
+    "enabling": "Enabling"
+  },
+  "FilePickerIndex": {
+    "folder": {
+      "select": "Use this folder"
+    }
+  },
+  "PluginCard": {
+    "plugin_full_access": "This plugin has full access to your Steam Deck.",
+    "plugin_install": "Install",
+    "plugin_no_desc": "No description provided.",
+    "plugin_version_label": "Plugin Version"
+  },
+  "PluginInstallModal": {
+    "install": {
+      "button_idle": "Install",
+      "button_processing": "Installing",
+      "desc": "Are you sure you want to install {{artifact}} {{version}}?",
+      "title": "Install {{artifact}}"
+    },
+    "no_hash": "This plugin does not have a hash, you are installing it at your own risk.",
+    "reinstall": {
+      "button_idle": "Reinstall",
+      "button_processing": "Reinstalling",
+      "desc": "Are you sure you want to reinstall {{artifact}} {{version}}?",
+      "title": "Reinstall {{artifact}}"
+    },
+    "update": {
+      "button_idle": "Update",
+      "button_processing": "Updating",
+      "desc": "Are you sure you want to update {{artifact}} {{version}}?",
+      "title": "Update {{artifact}}"
+    }
+  },
+  "PluginListIndex": {
+    "no_plugin": "No plugins installed!",
+    "plugin_actions": "Plugin Actions",
+    "reinstall": "Reinstall",
+    "reload": "Reload",
+    "uninstall": "Uninstall",
+    "update_to": "Update to {{name}}"
+  },
+  "PluginLoader": {
+    "decky_title": "Decky",
+    "decky_update_available": "Update to {{tag_name}} available!",
+    "error": "Error",
+    "plugin_error_uninstall": "Please go to {{-icon}} in the Decky menu if you need to uninstall this plugin.",
+    "plugin_load_error": {
+      "message": "Error loading plugin {{name}}",
+      "toast": "Error loading {{name}}"
+    },
+    "plugin_uninstall": {
+      "button": "Uninstall",
+      "desc": "Are you sure you want to uninstall {{name}}?",
+      "title": "Uninstall {{name}}"
+    },
+    "plugin_update_one": "Updates available for 1 plugin!",
+    "plugin_update_other": "Updates available for {{count}} plugins!"
+  },
+  "RemoteDebugging": {
+    "remote_cef": {
+      "desc": "Allow unauthenticated access to the CEF debugger to anyone in your network",
+      "label": "Allow Remote CEF Debugging"
+    }
+  },
+  "SettingsDeveloperIndex": {
+    "header_other": "Other",
+    "react_devtools": {
+      "desc": "Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set the IP address before enabling.",
+      "ip_label": "IP",
+      "label": "Enable React DevTools"
+    },
+    "third_party_plugins": {
+      "button_install": "Install",
+      "button_zip": "Browse",
+      "header": "Third-Party Plugins",
+      "label_desc": "URL",
+      "label_url": "Install Plugin from URL",
+      "label_zip": "Install Plugin from ZIP File"
+    },
+    "toast_zip": {
+      "body": "Installation failed! Only ZIP files are supported.",
+      "title": "Decky"
+    },
+    "valve_internal": {
+      "desc1": "Enables the Valve internal developer menu.",
+      "desc2": "Do not touch anything in this menu unless you know what it does.",
+      "label": "Enable Valve Internal"
+    }
+  },
+  "SettingsGeneralIndex": {
+    "about": {
+      "decky_version": "Decky Version",
+      "header": "About"
+    },
+    "beta": {
+      "header": "Beta participation"
+    },
+    "developer_mode": {
+      "desc": "Enables Decky's developer settings.",
+      "label": "Developer mode"
+    },
+    "other": {
+      "header": "Other"
+    },
+    "updates": {
+      "header": "Updates"
+    }
+  },
+  "SettingsIndex": {
+    "developer_title": "Developer",
+    "general_title": "General",
+    "navbar_settings": "Decky Settings",
+    "plugins_title": "Plugins"
+  },
+  "Store": {
+    "store_contrib": {
+      "desc": "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.",
+      "label": "Contributing"
+    },
+    "store_filter": {
+      "label": "Filter",
+      "label_def": "All"
+    },
+    "store_search": {
+      "label": "Search"
+    },
+    "store_sort": {
+      "label": "Sort",
+      "label_def": "Last Updated (Newest)"
+    },
+    "store_source": {
+      "desc": "All plugin source code is available on SteamDeckHomebrew/decky-plugin-database repository on GitHub.",
+      "label": "Source Code"
+    },
+    "store_tabs": {
+      "about": "About",
+      "alph_asce": "Alphabetical (Z to A)",
+      "alph_desc": "Alphabetical (A to Z)",
+      "title": "Browse"
+    },
+    "store_testing_cta": "Please consider testing new plugins to help the Decky Loader team!"
+  },
+  "StoreSelect": {
+    "custom_store": {
+      "label": "Custom Store",
+      "url_label": "URL"
+    },
+    "store_channel": {
+      "custom": "Custom",
+      "default": "Default",
+      "label": "Store Channel",
+      "testing": "Testing"
+    }
+  },
+  "Updater": {
+    "decky_updates": "Decky Updates",
+    "no_patch_notes_desc": "no patch notes for this version",
+    "patch_notes_desc": "Patch Notes",
+    "updates": {
+      "check_button": "Check For Updates",
+      "checking": "Checking",
+      "cur_version": "Current version: {{ver}}",
+      "install_button": "Install Update",
+      "label": "Updates",
+      "lat_version": "Up to date: running {{ver}}",
+      "reloading": "Reloading",
+      "updating": "Updating"
+    }
+  }
+}

backend/locales/it-IT.json

@@ -0,0 +1,184 @@
+{
+  "BranchSelect": {
+    "update_channel": {
+      "label": "Canale di aggiornamento",
+      "prerelease": "Prerilascio",
+      "stable": "Stabile",
+      "testing": "In prova"
+    }
+  },
+  "Developer": {
+    "5secreload": "Ricaricando in 5 secondi",
+    "disabling": "Disabilitando",
+    "enabling": "Abilitando"
+  },
+  "FilePickerIndex": {
+    "folder": {
+      "select": "Usa questa cartella"
+    }
+  },
+  "PluginCard": {
+    "plugin_full_access": "Questo plugin ha accesso completo al tuo Steam Deck.",
+    "plugin_install": "Installa",
+    "plugin_no_desc": "Nessuna descrizione fornita.",
+    "plugin_version_label": "Versione Plugin"
+  },
+  "PluginInstallModal": {
+    "install": {
+      "button_idle": "Installa",
+      "button_processing": "Installando",
+      "desc": "Sei sicuro di voler installare {{artifact}} {{version}}?",
+      "title": "Installa {{artifact}}"
+    },
+    "no_hash": "Questo plugin non ha un hash associato, lo stai installando a tuo rischio e pericolo.",
+    "reinstall": {
+      "button_idle": "Reinstalla",
+      "button_processing": "Reinstallando",
+      "desc": "Sei sicuro di voler reinstallare {{artifact}} {{version}}?",
+      "title": "Reinstalla {{artifact}}"
+    },
+    "update": {
+      "button_idle": "Aggiorna",
+      "button_processing": "Aggiornando",
+      "desc": "Sei sicuro di voler aggiornare {{artifact}} {{version}}?",
+      "title": "Aggiorna {{artifact}}"
+    }
+  },
+  "PluginListIndex": {
+    "no_plugin": "Nessun plugin installato!",
+    "plugin_actions": "Operazioni sui plugins",
+    "reinstall": "Reinstalla",
+    "reload": "Ricarica",
+    "uninstall": "Rimuovi",
+    "update_to": "Aggiorna a {{name}}"
+  },
+  "PluginLoader": {
+    "decky_title": "Decky",
+    "decky_update_available": "Disponibile aggiornamento a {{tag_name}}!",
+    "error": "Errore",
+    "plugin_error_uninstall": "Per rimuovere questo plugin vai su {{-icon}} nel menu di Decky.",
+    "plugin_load_error": {
+      "message": "Errore caricando il plugin {{name}}",
+      "toast": "Errore caricando {{name}}"
+    },
+    "plugin_uninstall": {
+      "button": "Rimuovi",
+      "desc": "Sei sicuro di voler rimuovere {{name}}?",
+      "title": "Rimuovi {{name}}"
+    },
+    "plugin_update_one": "Aggiornamento disponibile per un plugin!",
+    "plugin_update_many": "Aggiornamento disponibile per {{count}} plugins!",
+    "plugin_update_other": "Aggiornamento disponibile per {{count}} plugins!"
+  },
+  "RemoteDebugging": {
+    "remote_cef": {
+      "desc": "Permetti l'accesso non autenticato al debugger di CEF da tutti gli indirizzi sulla tua rete locale.",
+      "label": "Permetti il debug remoto di CEF"
+    }
+  },
+  "SettingsDeveloperIndex": {
+    "header_other": "Altro",
+    "react_devtools": {
+      "desc": "Abilita la connessione ad un computer che esegue i DevTools di React. Cambiando questa impostazione ricaricherà Steam. Imposta l'indirizzo IP prima di abilitarlo.",
+      "ip_label": "IP",
+      "label": "Abilita i DevTools di React"
+    },
+    "third_party_plugins": {
+      "button_install": "Installa",
+      "button_zip": "Seleziona",
+      "header": "Plugin di terze parti",
+      "label_desc": "URL",
+      "label_url": "Installa plugin da un'indirizzo web",
+      "label_zip": "Installa plugin da un file ZIP"
+    },
+    "toast_zip": {
+      "body": "Installazione non riuscita, solo i file ZIP sono supportati!",
+      "title": "Decky"
+    },
+    "valve_internal": {
+      "desc1": "Abilita il menu di sviluppo interno di Valve.",
+      "desc2": "Non toccare nulla in questo menu se non sai quello che fa.",
+      "label": "Abilita Menu Sviluppatore"
+    }
+  },
+  "SettingsGeneralIndex": {
+    "about": {
+      "decky_version": "Versione di Decky",
+      "header": "Riguardo a"
+    },
+    "beta": {
+      "header": "Partecipazione alla beta"
+    },
+    "developer_mode": {
+      "desc": "Abilità le impostazioni di sviluppo di Decky.",
+      "label": "Modalità sviluppatore"
+    },
+    "other": {
+      "header": "Altro"
+    },
+    "updates": {
+      "header": "Aggiornamenti"
+    }
+  },
+  "SettingsIndex": {
+    "developer_title": "Sviluppatore",
+    "general_title": "Generali",
+    "navbar_settings": "Impostazioni Decky",
+    "plugins_title": "Plugins"
+  },
+  "Store": {
+    "store_contrib": {
+      "desc": "Se desideri contribuire allo store di Decky, puoi trovare un template caricato su GitHub all'indirizzo SteamDeckHomebrew/decky-plugin-template. Informazioni riguardo sviluppo e distribuzione sono disponibili nel README.",
+      "label": "Contribuisci"
+    },
+    "store_filter": {
+      "label": "Filtra",
+      "label_def": "Tutto"
+    },
+    "store_search": {
+      "label": "Cerca"
+    },
+    "store_sort": {
+      "label": "Ordina",
+      "label_def": "Ultimo aggiornato (Più recente)"
+    },
+    "store_source": {
+      "desc": "Tutto il codice sorgente dei plugin è disponibile su GitHub all'indirizzo SteamDeckHomebrew/decky-plugin-database",
+      "label": "Codice Sorgente"
+    },
+    "store_tabs": {
+      "about": "Riguardo a",
+      "alph_asce": "Alfabetico (Z a A)",
+      "alph_desc": "Alfabetico (A a Z)",
+      "title": "Sfoglia"
+    },
+    "store_testing_cta": "Valuta la possibilità di testare nuovi plugin per aiutare il team di Decky Loader!"
+  },
+  "StoreSelect": {
+    "custom_store": {
+      "label": "Negozio custom",
+      "url_label": "URL"
+    },
+    "store_channel": {
+      "custom": "Personalizzato",
+      "default": "Default",
+      "label": "Canale del negozio",
+      "testing": "In prova"
+    }
+  },
+  "Updater": {
+    "decky_updates": "Aggiornamento di Decky",
+    "no_patch_notes_desc": "nessuna patch notes per questa versione",
+    "patch_notes_desc": "Cambiamenti",
+    "updates": {
+      "check_button": "Cerca aggiornamenti",
+      "checking": "Controllando",
+      "cur_version": "Versione attuale: {{ver}}",
+      "install_button": "Installa aggiornamento",
+      "label": "Aggiornamenti",
+      "lat_version": "Aggiornato. Eseguendo {{ver}}",
+      "reloading": "Ricaricando",
+      "updating": "Aggiornando"
+    }
+  }
+}

backend/localplatform.py

@@ -1,4 +1,4 @@
-import platform
+import platform, os
 
 ON_WINDOWS = platform.system() == "Windows"
 ON_LINUX = not ON_WINDOWS
@@ -8,4 +8,33 @@ if ON_WINDOWS:
     import localplatformwin as localplatform
 else:
     from localplatformlinux import *
-    import localplatformlinux as localplatform
+    import localplatformlinux as localplatform
+
+def get_privileged_path() -> str:
+    '''Get path accessible by elevated user. Holds plugins, decky loader and decky loader configs'''
+    return localplatform.get_privileged_path()
+
+def get_unprivileged_path() -> str:
+    '''Get path accessible by non-elevated user. Holds plugin configuration, plugin data and plugin logs. Externally referred to as the 'Homebrew' directory'''
+    return localplatform.get_unprivileged_path()
+
+def get_unprivileged_user() -> str:
+    '''Get user that should own files made in unprivileged path'''
+    return localplatform.get_unprivileged_user()
+
+def get_chown_plugin_path() -> bool:
+    return os.getenv("CHOWN_PLUGIN_PATH", "1") == "1"
+
+def get_server_host() -> str:
+    return os.getenv("SERVER_HOST", "127.0.0.1")
+
+def get_server_port() -> int:
+    return int(os.getenv("SERVER_PORT", "1337"))
+
+def get_live_reload() -> bool:
+    os.getenv("LIVE_RELOAD", "1") == "1"
+
+def get_log_level() -> int:
+    return {"CRITICAL": 50, "ERROR": 40, "WARNING": 30, "INFO": 20, "DEBUG": 10}[
+        os.getenv("LOG_LEVEL", "INFO")
+    ]

backend/localplatformlinux.py

@@ -1,19 +1,16 @@
-import os, pwd, grp, sys
+import os, pwd, grp, sys, logging
 from subprocess import call, run, DEVNULL, PIPE, STDOUT
 from customtypes import UserType
 
+logger = logging.getLogger("localplatform")
+
 # Get the user id hosting the plugin loader
 def _get_user_id() -> int:
-    proc_path = os.path.realpath(sys.argv[0])
-    pws = sorted(pwd.getpwall(), reverse=True, key=lambda pw: len(pw.pw_dir))
-    for pw in pws:
-        if proc_path.startswith(os.path.realpath(pw.pw_dir)):
-            return pw.pw_uid
-    raise PermissionError("The plugin loader does not seem to be hosted by any known user.")
+    return pwd.getpwnam(_get_user()).pw_uid
 
 # Get the user hosting the plugin loader
 def _get_user() -> str:
-    return pwd.getpwuid(_get_user_id()).pw_name
+    return get_unprivileged_user()
 
 # Get the effective user id of the running process
 def _get_effective_user_id() -> int:
@@ -50,10 +47,12 @@ def _get_user_group() -> str:
 def chown(path : str,  user : UserType = UserType.HOST_USER, recursive : bool = True) -> bool:
     user_str = ""
 
-    if (user == UserType.HOST_USER):
+    if user == UserType.HOST_USER:
         user_str = _get_user()+":"+_get_user_group()
-    elif (user == UserType.EFFECTIVE_USER):
+    elif user == UserType.EFFECTIVE_USER:
         user_str = _get_effective_user()+":"+_get_effective_user_group()
+    elif user == UserType.ROOT:
+        user_str = "root:root"
     else:
         raise Exception("Unknown User Type")
 
@@ -135,4 +134,61 @@ async def service_stop(service_name : str) -> bool:
 async def service_start(service_name : str) -> bool:
     cmd = ["systemctl", "start", service_name]
     res = run(cmd, stdout=PIPE, stderr=STDOUT)
-    return res.returncode == 0
+    return res.returncode == 0
+
+def get_privileged_path() -> str:
+    path = os.getenv("PRIVILEGED_PATH")
+
+    if path == None:
+        path = get_unprivileged_path()
+
+    return path
+
+def _parent_dir(path : str) -> str:
+    if path == None:
+        return None
+
+    if path.endswith('/'):
+        path = path[:-1]
+    
+    return os.path.dirname(path)
+
+def get_unprivileged_path() -> str:
+    path = os.getenv("UNPRIVILEGED_PATH")
+    
+    if path == None:
+        path = _parent_dir(os.getenv("PLUGIN_PATH"))
+    
+    if path == None:
+        logger.debug("Unprivileged path is not properly configured. Making something up!")
+        # Expected path of loader binary is /home/deck/homebrew/service/PluginLoader
+        path = _parent_dir(_parent_dir(os.path.realpath(sys.argv[0])))
+
+        if not os.path.exists(path):
+            path = None
+
+    if path == None:
+        logger.warn("Unprivileged path is not properly configured. Defaulting to /home/deck/homebrew")
+        path = "/home/deck/homebrew" # We give up
+    
+    return path
+
+
+def get_unprivileged_user() -> str:
+    user = os.getenv("UNPRIVILEGED_USER")
+
+    if user == None:
+        # Lets hope we can extract it from the unprivileged dir
+        dir = os.path.realpath(get_unprivileged_path())
+
+        pws = sorted(pwd.getpwall(), reverse=True, key=lambda pw: len(pw.pw_dir))
+        for pw in pws:
+            if dir.startswith(os.path.realpath(pw.pw_dir)):
+                user = pw.pw_name
+                break
+    
+    if user == None:
+        logger.warn("Unprivileged user is not properly configured. Defaulting to 'deck'")
+        user = 'deck'
+
+    return user

backend/localplatformwin.py

@@ -35,4 +35,19 @@ async def service_restart(service_name : str) -> bool:
     return True # Stubbed
 
 def get_username() -> str:
-    return os.getlogin()
+    return os.getlogin()
+
+def get_privileged_path() -> str:
+    '''On windows, privileged_path is equal to unprivileged_path'''
+    return get_unprivileged_path()
+
+def get_unprivileged_path() -> str:
+    path = os.getenv("UNPRIVILEGED_PATH")
+
+    if path == None:
+        path = os.getenv("PRIVILEGED_PATH", os.path.join(os.path.expanduser("~"), "homebrew"))
+
+    return path
+
+def get_unprivileged_user() -> str:
+    return os.getenv("UNPRIVILEGED_USER", os.getlogin())

backend/main.py

@@ -1,6 +1,10 @@
 # Change PyInstaller files permissions
 import sys
-from localplatform import chmod, chown, service_stop, service_start, ON_WINDOWS
+from localplatform import (chmod, chown, service_stop, service_start,
+                            ON_WINDOWS, get_log_level, get_live_reload, 
+                            get_server_port, get_server_host, get_chown_plugin_path,
+                            get_unprivileged_user, get_unprivileged_path, 
+                            get_privileged_path)
 if hasattr(sys, '_MEIPASS'):
     chmod(sys._MEIPASS, 755)
 # Full imports
@@ -20,7 +24,7 @@ from aiohttp_jinja2 import setup as jinja_setup
 # local modules
 from browser import PluginBrowser
 from helpers import (REMOTE_DEBUGGER_UNIT, csrf_middleware, get_csrf_token,
-                     get_homebrew_path, mkdir_as_user, get_system_pythonpaths)
+                     mkdir_as_user, get_system_pythonpaths)
                      
 from injector import get_gamepadui_tab, Tab, get_tabs, close_old_tabs
 from loader import Loader
@@ -29,33 +33,23 @@ from updater import Updater
 from utilities import Utilities
 from customtypes import UserType
 
-HOMEBREW_PATH = get_homebrew_path()
-CONFIG = {
-    "plugin_path": getenv("PLUGIN_PATH", path.join(HOMEBREW_PATH, "plugins")),
-    "chown_plugin_path": getenv("CHOWN_PLUGIN_PATH", "1") == "1",
-    "server_host": getenv("SERVER_HOST", "127.0.0.1"),
-    "server_port": int(getenv("SERVER_PORT", "1337")),
-    "live_reload": getenv("LIVE_RELOAD", "1") == "1",
-    "log_level": {"CRITICAL": 50, "ERROR": 40, "WARNING": 30, "INFO": 20, "DEBUG": 10}[
-        getenv("LOG_LEVEL", "INFO")
-    ],
-}
 
 basicConfig(
-    level=CONFIG["log_level"],
+    level=get_log_level(),
     format="[%(module)s][%(levelname)s]: %(message)s"
 )
 
 logger = getLogger("Main")
+plugin_path = path.join(get_privileged_path(), "plugins")
 
 def chown_plugin_dir():
-    if not path.exists(CONFIG["plugin_path"]): # For safety, create the folder before attempting to do anything with it
-        mkdir_as_user(CONFIG["plugin_path"])
+    if not path.exists(plugin_path): # For safety, create the folder before attempting to do anything with it
+        mkdir_as_user(plugin_path)
 
-    if not chown(CONFIG["plugin_path"], UserType.HOST_USER) or not chmod(CONFIG["plugin_path"], 555):
+    if not chown(plugin_path, UserType.HOST_USER) or not chmod(plugin_path, 555):
         logger.error(f"chown/chmod exited with a non-zero exit code")
 
-if CONFIG["chown_plugin_path"] == True:
+if get_chown_plugin_path() == True:
     chown_plugin_dir()
 
 class PluginManager:
@@ -70,9 +64,9 @@ class PluginManager:
                 allow_credentials=True
             )
         })
-        self.plugin_loader = Loader(self.web_app, CONFIG["plugin_path"], self.loop, CONFIG["live_reload"])
-        self.settings = SettingsManager("loader", path.join(HOMEBREW_PATH, "settings"))
-        self.plugin_browser = PluginBrowser(CONFIG["plugin_path"], self.plugin_loader.plugins, self.plugin_loader, self.settings)
+        self.plugin_loader = Loader(self.web_app, plugin_path, self.loop, get_live_reload())
+        self.settings = SettingsManager("loader", path.join(get_privileged_path(), "settings"))
+        self.plugin_browser = PluginBrowser(plugin_path, self.plugin_loader.plugins, self.plugin_loader, self.settings) 
         self.utilities = Utilities(self)
         self.updater = Updater(self)
 
@@ -174,7 +168,7 @@ class PluginManager:
             pass
 
     def run(self):
-        return run_app(self.web_app, host=CONFIG["server_host"], port=CONFIG["server_port"], loop=self.loop, access_log=None)
+        return run_app(self.web_app, host=get_server_host(), port=get_server_port(), loop=self.loop, access_log=None)
 
 if __name__ == "__main__":
     if ON_WINDOWS:

backend/settings.py

@@ -1,6 +1,6 @@
 from json import dump, load
 from os import mkdir, path, listdir, rename
-from localplatform import chown, folder_owner
+from localplatform import chown, folder_owner, get_chown_plugin_path
 from customtypes import UserType
 
 from helpers import get_homebrew_path
@@ -17,7 +17,6 @@ class SettingsManager:
         #Create the folder with the correct permission
         if not path.exists(settings_directory):
             mkdir(settings_directory)
-            chown(settings_directory)
 
         #Copy all old settings file in the root directory to the correct folder
         for file in listdir(wrong_dir):
@@ -28,9 +27,9 @@ class SettingsManager:
 
 
         #If the owner of the settings directory is not the user, then set it as the user:
-
-        if folder_owner(settings_directory) != UserType.HOST_USER:
-            chown(settings_directory, UserType.HOST_USER, False)
+        expected_user = UserType.HOST_USER if get_chown_plugin_path() else UserType.ROOT
+        if folder_owner(settings_directory) != expected_user:
+            chown(settings_directory, expected_user, False)
 
         self.settings = {}
 

backend/updater.py

@@ -104,6 +104,15 @@ class Updater:
         async with ClientSession() as web:
             async with web.request("GET", "https://api.github.com/repos/SteamDeckHomebrew/decky-loader/releases", ssl=helpers.get_ssl_context()) as res:
                 remoteVersions = await res.json()
+                if selectedBranch == 0:
+                    logger.debug("release type: release")
+                    remoteVersions = list(filter(lambda ver: ver["tag_name"].startswith("v") and not ver["prerelease"] and not ver["tag_name"].find("-pre") > 0 and ver["tag_name"], remoteVersions))
+                elif selectedBranch == 1:
+                    logger.debug("release type: pre-release")
+                    remoteVersions = list(filter(lambda ver:ver["tag_name"].startswith("v"), remoteVersions))
+                else:
+                    logger.error("release type: NOT FOUND")
+                    raise ValueError("no valid branch found")
         self.allRemoteVers = remoteVersions
         logger.debug("determining release type to find, branch is %i" % selectedBranch)
         if selectedBranch == 0:

backend/utilities.py

@@ -61,12 +61,13 @@ class Utilities:
             res["success"] = False
         return web.json_response(res)
 
-    async def install_plugin(self, artifact="", name="No name", version="dev", hash=False):
+    async def install_plugin(self, artifact="", name="No name", version="dev", hash=False, install_type=0):
         return await self.context.plugin_browser.request_plugin_install(
             artifact=artifact,
             name=name,
             version=version,
-            hash=hash
+            hash=hash,
+            install_type=install_type
         )
 
     async def confirm_plugin_install(self, request_id):

dist/plugin_loader-prerelease.service

@@ -9,7 +9,8 @@ Restart=always
 ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
 WorkingDirectory=${HOMEBREW_FOLDER}/services
 KillSignal=SIGKILL
-Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
+Environment=UNPRIVILEGED_PATH=${HOMEBREW_FOLDER}
+Environment=PRIVILEGED_PATH=${HOMEBREW_FOLDER}
 Environment=LOG_LEVEL=DEBUG
 [Install]
 WantedBy=multi-user.target

dist/plugin_loader-release.service

@@ -9,7 +9,8 @@ Restart=always
 ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
 WorkingDirectory=${HOMEBREW_FOLDER}/services
 KillSignal=SIGKILL
-Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
+Environment=UNPRIVILEGED_PATH=${HOMEBREW_FOLDER}
+Environment=PRIVILEGED_PATH=${HOMEBREW_FOLDER}
 Environment=LOG_LEVEL=INFO
 [Install]
 WantedBy=multi-user.target

frontend/i18next-parser.config.mjs

@@ -0,0 +1,100 @@
+export default {
+    contextSeparator: '_',
+    // Key separator used in your translation keys
+  
+    createOldCatalogs: false,
+    // Save the \_old files
+  
+    defaultNamespace: 'translation',
+    // Default namespace used in your i18next config
+  
+    defaultValue: '',
+    // Default value to give to keys with no value
+    // You may also specify a function accepting the locale, namespace, key, and value as arguments
+  
+    indentation: 2,
+    // Indentation of the catalog files
+  
+    keepRemoved: true,
+    // Keep keys from the catalog that are no longer in code
+  
+    keySeparator: '.',
+    // Key separator used in your translation keys
+    // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+  
+    // see below for more details
+    lexers: {
+      mjs: ['JavascriptLexer'],
+      js: ['JavascriptLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
+      ts: ['JavascriptLexer'],
+      jsx: ['JsxLexer'],
+      tsx: ['JsxLexer'],
+  
+      default: ['JavascriptLexer'],
+    },
+  
+    lineEnding: 'auto',
+    // Control the line ending. See options at https://github.com/ryanve/eol
+  
+    locales: ['en-US', 'it-IT'],
+    // An array of the locales in your applications
+  
+    namespaceSeparator: false,
+    // Namespace separator used in your translation keys
+    // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+  
+    output: '../backend/locales/$LOCALE.json',
+    // Supports $LOCALE and $NAMESPACE injection
+    // Supports JSON (.json) and YAML (.yml) file formats
+    // Where to write the locale files relative to process.cwd()
+  
+    pluralSeparator: '_',
+    // Plural separator used in your translation keys
+    // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+  
+    input: './src/**/*.{ts,tsx}',
+    // An array of globs that describe where to look for source files
+    // relative to the location of the configuration file
+  
+    sort: true,
+    // Whether or not to sort the catalog. Can also be a [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#parameters)
+  
+    verbose: false,
+    // Display info about the parsing including some stats
+  
+    failOnWarnings: false,
+    // Exit with an exit code of 1 on warnings
+  
+    failOnUpdate: false,
+    // Exit with an exit code of 1 when translations are updated (for CI purpose)
+  
+    customValueTemplate: null,
+    // If you wish to customize the value output the value as an object, you can set your own format.
+    // ${defaultValue} is the default value you set in your translation function.
+    // Any other custom property will be automatically extracted.
+    //
+    // Example:
+    // {
+    //   message: "${defaultValue}",
+    //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+    // }
+  
+    resetDefaultValueLocale: null,
+    // The locale to compare with default values to determine whether a default value has been changed.
+    // If this is set and a default value differs from a translation in the specified locale, all entries
+    // for that key across locales are reset to the default value, and existing translations are moved to
+    // the `_old` file.
+  
+    i18nextOptions: null,
+    // If you wish to customize options in internally used i18next instance, you can define an object with any
+    // configuration property supported by i18next (https://www.i18next.com/overview/configuration-options).
+    // { compatibilityJSON: 'v3' } can be used to generate v3 compatible plurals.
+  
+    yamlOptions: null,
+    // If you wish to customize options for yaml output, you can define an object here.
+    // Configuration options are here (https://github.com/nodeca/js-yaml#dump-object---options-).
+    // Example:
+    // {
+    //   lineWidth: -1,
+    // }
+  }

frontend/package.json

@@ -22,9 +22,10 @@
     "@types/react-router": "5.1.18",
     "@types/webpack": "^5.28.1",
     "husky": "^8.0.3",
+    "i18next-parser": "^7.7.0",
     "import-sort-style-module": "^6.0.0",
     "inquirer": "^8.2.5",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-import-sort": "^0.0.7",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -42,10 +43,13 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "3.20.5",
+    "decky-frontend-lib": "3.20.7",
+    "i18next": "^22.4.15",
+    "i18next-http-backend": "^2.2.0",
     "react-file-icon": "^1.3.0",
+    "react-i18next": "^12.2.2",
     "react-icons": "^4.8.0",
-    "react-markdown": "^8.0.6",
+    "react-markdown": "^8.0.7",
     "remark-gfm": "^3.0.1"
   }
 }

frontend/rollup.config.js

@@ -15,7 +15,9 @@ export default defineConfig({
   plugins: [
     del({ targets: '../backend/static/*', force: true }),
     commonjs(),
-    nodeResolve(),
+    nodeResolve({
+      browser: true
+    }),
     externalGlobals({
       react: 'SP_REACT',
       'react-dom': 'SP_REACTDOM',
@@ -44,4 +46,4 @@ export default defineConfig({
     if (hiddenWarnings.some((warning) => message.code === warning)) return;
     handleWarning(message);
   },
-});
+});

frontend/src/components/modals/PluginInstallModal.tsx

@@ -1,18 +1,31 @@
 import { ConfirmModal, Navigation, QuickAccessTab } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import TPluginInstallModal, { TranslatedPart } from './TPluginInstallModal';
 
 interface PluginInstallModalProps {
   artifact: string;
   version: string;
   hash: string;
-  // reinstall: boolean;
+  installType: number;
   onOK(): void;
   onCancel(): void;
   closeModal?(): void;
 }
 
-const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, hash, onOK, onCancel, closeModal }) => {
+const PluginInstallModal: FC<PluginInstallModalProps> = ({
+  artifact,
+  version,
+  hash,
+  installType,
+  onOK,
+  onCancel,
+  closeModal,
+}) => {
   const [loading, setLoading] = useState<boolean>(false);
+  const { t } = useTranslation();
+
   return (
     <ConfirmModal
       bOKDisabled={loading}
@@ -26,14 +39,22 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, ha
       onCancel={async () => {
         await onCancel();
       }}
-      strTitle={`Install ${artifact}`}
-      strOKButtonText={loading ? 'Installing' : 'Install'}
+      strTitle={<TPluginInstallModal trans_part={TranslatedPart.TITLE} trans_type={installType} artifact={artifact} />}
+      strOKButtonText={
+        loading ? (
+          <TPluginInstallModal trans_part={TranslatedPart.BUTTON_PROC} trans_type={installType} />
+        ) : (
+          <TPluginInstallModal trans_part={TranslatedPart.BUTTON_IDLE} trans_type={installType} />
+        )
+      }
     >
-      {hash == 'False' ? (
-        <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3>
-      ) : (
-        `Are you sure you want to install ${artifact} ${version}?`
-      )}
+      <TPluginInstallModal
+        trans_part={TranslatedPart.DESC}
+        trans_type={installType}
+        artifact={artifact}
+        version={version ? version : ''}
+      />
+      {hash == 'False' && <span style={{ color: 'red' }}>{t('PluginInstallModal.no_hash')}</span>}
     </ConfirmModal>
   );
 };

frontend/src/components/modals/TPluginInstallModal.tsx

@@ -0,0 +1,95 @@
+import { FC } from 'react';
+import { Translation } from 'react-i18next';
+
+import { InstallType } from '../../plugin';
+
+export enum TranslatedPart {
+  TITLE,
+  DESC,
+  BUTTON_IDLE,
+  BUTTON_PROC,
+}
+interface TPluginInstallModalProps {
+  trans_part: TranslatedPart;
+  trans_type: number;
+  artifact?: string;
+  version?: string;
+}
+
+const TPluginInstallModal: FC<TPluginInstallModalProps> = ({ trans_part, trans_type, artifact, version }) => {
+  return (
+    <Translation>
+      {(t, {}) => {
+        switch (trans_part) {
+          case TranslatedPart.TITLE:
+            switch (trans_type) {
+              case InstallType.INSTALL:
+                return <div>{t('PluginInstallModal.install.title', { artifact: artifact })}</div>;
+              case InstallType.REINSTALL:
+                return <div>{t('PluginInstallModal.reinstall.title', { artifact: artifact })}</div>;
+              case InstallType.UPDATE:
+                return <div>{t('PluginInstallModal.update.title', { artifact: artifact })}</div>;
+              default:
+                return null;
+            }
+          case TranslatedPart.DESC:
+            switch (trans_type) {
+              case InstallType.INSTALL:
+                return (
+                  <div>
+                    {t('PluginInstallModal.install.desc', {
+                      artifact: artifact,
+                      version: version,
+                    })}
+                  </div>
+                );
+              case InstallType.REINSTALL:
+                return (
+                  <div>
+                    {t('PluginInstallModal.reinstall.desc', {
+                      artifact: artifact,
+                      version: version,
+                    })}
+                  </div>
+                );
+              case InstallType.UPDATE:
+                return (
+                  <div>
+                    {t('PluginInstallModal.update.desc', {
+                      artifact: artifact,
+                      version: version,
+                    })}
+                  </div>
+                );
+              default:
+                return null;
+            }
+          case TranslatedPart.BUTTON_IDLE:
+            switch (trans_type) {
+              case InstallType.INSTALL:
+                return <div>{t('PluginInstallModal.install.button_idle')}</div>;
+              case InstallType.REINSTALL:
+                return <div>{t('PluginInstallModal.reinstall.button_idle')}</div>;
+              case InstallType.UPDATE:
+                return <div>{t('PluginInstallModal.update.button_idle')}</div>;
+              default:
+                return null;
+            }
+          case TranslatedPart.BUTTON_PROC:
+            switch (trans_type) {
+              case InstallType.INSTALL:
+                return <div>{t('PluginInstallModal.install.button_processing')}</div>;
+              case InstallType.REINSTALL:
+                return <div>{t('PluginInstallModal.reinstall.button_processing')}</div>;
+              case InstallType.UPDATE:
+                return <div>{t('PluginInstallModal.update.button_processing')}</div>;
+              default:
+                return null;
+            }
+        }
+      }}
+    </Translation>
+  );
+};
+
+export default TPluginInstallModal;

frontend/src/components/modals/filepicker/index.tsx

@@ -2,6 +2,7 @@ import { DialogButton, Focusable, SteamSpinner, TextField } from 'decky-frontend
 import { useEffect } from 'react';
 import { FunctionComponent, useState } from 'react';
 import { FileIcon, defaultStyles } from 'react-file-icon';
+import { useTranslation } from 'react-i18next';
 import { FaArrowUp, FaFolder } from 'react-icons/fa';
 
 import Logger from '../../../logger';
@@ -47,6 +48,7 @@ const FilePicker: FunctionComponent<FilePickerProps> = ({
   onSubmit,
   closeModal,
 }) => {
+  const { t } = useTranslation();
   if (startPath.endsWith('/')) startPath = startPath.substring(0, startPath.length - 1); // remove trailing path
   const [path, setPath] = useState<string>(startPath);
   const [listing, setListing] = useState<FileListing>({ files: [], realpath: path });
@@ -134,7 +136,15 @@ const FilePicker: FunctionComponent<FilePickerProps> = ({
                         )}
                       </div>
                     )}
-                    {file.name}
+                    <span
+                      style={{
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        textAlign: 'left',
+                      }}
+                    >
+                      {file.name}
+                    </span>
                   </div>
                 </DialogButton>
               );
@@ -150,7 +160,7 @@ const FilePicker: FunctionComponent<FilePickerProps> = ({
             closeModal?.();
           }}
         >
-          Use this folder
+          {t('FilePickerIndex.folder.select')}
         </DialogButton>
       )}
     </div>

frontend/src/components/settings/index.tsx

@@ -1,5 +1,6 @@
 import { SidebarNavigation } from 'decky-frontend-lib';
 import { lazy } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FaCode, FaPlug } from 'react-icons/fa';
 
 import { useSetting } from '../../utils/hooks/useSetting';
@@ -12,22 +13,23 @@ const DeveloperSettings = lazy(() => import('./pages/developer'));
 
 export default function SettingsPage() {
   const [isDeveloper, setIsDeveloper] = useSetting<boolean>('developer.enabled', false);
+  const { t } = useTranslation();
 
   const pages = [
     {
-      title: 'Decky',
+      title: t('SettingsIndex.general_title'),
       content: <GeneralSettings isDeveloper={isDeveloper} setIsDeveloper={setIsDeveloper} />,
       route: '/decky/settings/general',
       icon: <DeckyIcon />,
     },
     {
-      title: 'Plugins',
+      title: t('SettingsIndex.plugins_title'),
       content: <PluginList />,
       route: '/decky/settings/plugins',
       icon: <FaPlug />,
     },
     {
-      title: 'Developer',
+      title: t('SettingsIndex.developer_title'),
       content: (
         <WithSuspense>
           <DeveloperSettings />

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

@@ -1,64 +1,127 @@
-import { DialogBody, Field, TextField, Toggle } from 'decky-frontend-lib';
-import { useRef } from 'react';
-import { FaReact, FaSteamSymbol } from 'react-icons/fa';
+import {
+  DialogBody,
+  DialogButton,
+  DialogControlsSection,
+  DialogControlsSectionHeader,
+  Field,
+  TextField,
+  Toggle,
+} from 'decky-frontend-lib';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaFileArchive, FaLink, FaReact, FaSteamSymbol } from 'react-icons/fa';
 
 import { setShouldConnectToReactDevTools, setShowValveInternal } from '../../../../developer';
+import { installFromURL } from '../../../../store';
 import { useSetting } from '../../../../utils/hooks/useSetting';
 import RemoteDebuggingSettings from '../general/RemoteDebugging';
 
+const installFromZip = () => {
+  window.DeckyPluginLoader.openFilePicker('/home/deck', true).then((val) => {
+    const url = `file://${val.path}`;
+    console.log(`Installing plugin locally from ${url}`);
+
+    if (url.endsWith('.zip')) {
+      installFromURL(url);
+    } else {
+      window.DeckyPluginLoader.toaster.toast({
+        //title: t('SettingsDeveloperIndex.toast_zip.title'),
+        title: 'Decky',
+        //body: t('SettingsDeveloperIndex.toast_zip.body'),
+        body: 'Installation failed! Only ZIP files are supported.',
+        onClick: installFromZip,
+      });
+    }
+  });
+};
+
 export default function DeveloperSettings() {
   const [enableValveInternal, setEnableValveInternal] = useSetting<boolean>('developer.valve_internal', false);
   const [reactDevtoolsEnabled, setReactDevtoolsEnabled] = useSetting<boolean>('developer.rdt.enabled', false);
   const [reactDevtoolsIP, setReactDevtoolsIP] = useSetting<string>('developer.rdt.ip', '');
+  const [pluginURL, setPluginURL] = useState('');
   const textRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
 
   return (
     <DialogBody>
-      <RemoteDebuggingSettings />
-      <Field
-        label="Enable Valve Internal"
-        description={
-          <span style={{ whiteSpace: 'pre-line' }}>
-            Enables the Valve internal developer menu.{' '}
-            <span style={{ color: 'red' }}>Do not touch anything in this menu unless you know what it does.</span>
-          </span>
-        }
-        icon={<FaSteamSymbol style={{ display: 'block' }} />}
-      >
-        <Toggle
-          value={enableValveInternal}
-          onChange={(toggleValue) => {
-            setEnableValveInternal(toggleValue);
-            setShowValveInternal(toggleValue);
-          }}
-        />
-      </Field>
-      <Field
-        label="Enable React DevTools"
-        description={
-          <>
+      <DialogControlsSection>
+        <DialogControlsSectionHeader>
+          {t('SettingsDeveloperIndex.third_party_plugins.header')}
+        </DialogControlsSectionHeader>
+        <Field
+          label={t('SettingsDeveloperIndex.third_party_plugins.label_zip')}
+          icon={<FaFileArchive style={{ display: 'block' }} />}
+        >
+          <DialogButton onClick={installFromZip}>
+            {t('SettingsDeveloperIndex.third_party_plugins.button_zip')}
+          </DialogButton>
+        </Field>
+        <Field
+          label={t('SettingsDeveloperIndex.third_party_plugins.label_url')}
+          description={
+            <TextField
+              label={t('SettingsDeveloperIndex.third_party_plugins.label_desc')}
+              value={pluginURL}
+              onChange={(e) => setPluginURL(e?.target.value)}
+            />
+          }
+          icon={<FaLink style={{ display: 'block' }} />}
+        >
+          <DialogButton disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
+            {t('SettingsDeveloperIndex.third_party_plugins.button_install')}
+          </DialogButton>
+        </Field>
+      </DialogControlsSection>
+      <DialogControlsSection>
+        <DialogControlsSectionHeader>{t('SettingsDeveloperIndex.header_other')}</DialogControlsSectionHeader>
+        <RemoteDebuggingSettings />
+        <Field
+          label={t('SettingsDeveloperIndex.valve_internal.label')}
+          description={
             <span style={{ whiteSpace: 'pre-line' }}>
-              Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set the
-              IP address before enabling.
+              {t('SettingsDeveloperIndex.valve_internal.desc1')}{' '}
+              <span style={{ color: 'red' }}>{t('SettingsDeveloperIndex.valve_internal.desc2')}</span>
             </span>
-            <br />
-            <br />
-            <div ref={textRef}>
-              <TextField label={'IP'} value={reactDevtoolsIP} onChange={(e) => setReactDevtoolsIP(e?.target.value)} />
-            </div>
-          </>
-        }
-        icon={<FaReact style={{ display: 'block' }} />}
-      >
-        <Toggle
-          value={reactDevtoolsEnabled}
-          // disabled={reactDevtoolsIP == ''}
-          onChange={(toggleValue) => {
-            setReactDevtoolsEnabled(toggleValue);
-            setShouldConnectToReactDevTools(toggleValue);
-          }}
-        />
-      </Field>
+          }
+          icon={<FaSteamSymbol style={{ display: 'block' }} />}
+        >
+          <Toggle
+            value={enableValveInternal}
+            onChange={(toggleValue) => {
+              setEnableValveInternal(toggleValue);
+              setShowValveInternal(toggleValue);
+            }}
+          />
+        </Field>
+        <Field
+          label={t('SettingsDeveloperIndex.react_devtools.label')}
+          description={
+            <>
+              <span style={{ whiteSpace: 'pre-line' }}>{t('SettingsDeveloperIndex.react_devtools.desc')}</span>
+              <br />
+              <br />
+              <div ref={textRef}>
+                <TextField
+                  label={t('SettingsDeveloperIndex.react_devtools.ip_label')}
+                  value={reactDevtoolsIP}
+                  onChange={(e) => setReactDevtoolsIP(e?.target.value)}
+                />
+              </div>
+            </>
+          }
+          icon={<FaReact style={{ display: 'block' }} />}
+        >
+          <Toggle
+            value={reactDevtoolsEnabled}
+            // disabled={reactDevtoolsIP == ''}
+            onChange={(toggleValue) => {
+              setReactDevtoolsEnabled(toggleValue);
+              setShouldConnectToReactDevTools(toggleValue);
+            }}
+          />
+        </Field>
+      </DialogControlsSection>
     </DialogBody>
   );
 }

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

@@ -1,5 +1,6 @@
 import { Dropdown, Field } from 'decky-frontend-lib';
 import { FunctionComponent } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import Logger from '../../../../logger';
 import { callUpdaterMethod } from '../../../../updater';
@@ -14,17 +15,23 @@ enum UpdateBranch {
 }
 
 const BranchSelect: FunctionComponent<{}> = () => {
+  const { t } = useTranslation();
+  const tBranches = [
+    t('BranchSelect.update_channel.stable'),
+    t('BranchSelect.update_channel.prerelease'),
+    t('BranchSelect.update_channel.testing'),
+  ];
   const [selectedBranch, setSelectedBranch] = useSetting<UpdateBranch>('branch', UpdateBranch.Prerelease);
 
   return (
     // Returns numerical values from 0 to 2 (with current branch setup as of 8/28/22)
     // 0 being stable, 1 being pre-release and 2 being nightly
-    <Field label="Decky Update Channel" childrenContainerWidth={'fixed'}>
+    <Field label={t('BranchSelect.update_channel.label')} childrenContainerWidth={'fixed'}>
       <Dropdown
         rgOptions={Object.values(UpdateBranch)
           .filter((branch) => typeof branch == 'string')
           .map((branch) => ({
-            label: branch,
+            label: tBranches[UpdateBranch[branch]],
             data: UpdateBranch[branch],
           }))}
         selectedOption={selectedBranch}

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

@@ -1,19 +1,17 @@
 import { Field, Toggle } from 'decky-frontend-lib';
+import { useTranslation } from 'react-i18next';
 import { FaChrome } from 'react-icons/fa';
 
 import { useSetting } from '../../../../utils/hooks/useSetting';
 
 export default function RemoteDebuggingSettings() {
   const [allowRemoteDebugging, setAllowRemoteDebugging] = useSetting<boolean>('cef_forward', false);
+  const { t } = useTranslation();
 
   return (
     <Field
-      label="Allow Remote CEF Debugging"
-      description={
-        <span style={{ whiteSpace: 'pre-line' }}>
-          Allows unauthenticated access to the CEF debugger to anyone in your network.
-        </span>
-      }
+      label={t('RemoteDebugging.remote_cef.label')}
+      description={<span style={{ whiteSpace: 'pre-line' }}>{t('RemoteDebugging.remote_cef.desc')}</span>}
       icon={<FaChrome style={{ display: 'block' }} />}
     >
       <Toggle

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

@@ -1,5 +1,6 @@
 import { Dropdown, Field, TextField } from 'decky-frontend-lib';
 import { FunctionComponent } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FaShapes } from 'react-icons/fa';
 
 import Logger from '../../../../logger';
@@ -11,17 +12,23 @@ const logger = new Logger('StoreSelect');
 const StoreSelect: FunctionComponent<{}> = () => {
   const [selectedStore, setSelectedStore] = useSetting<Store>('store', Store.Default);
   const [selectedStoreURL, setSelectedStoreURL] = useSetting<string | null>('store-url', null);
+  const { t } = useTranslation();
+  const tStores = [
+    t('StoreSelect.store_channel.default'),
+    t('StoreSelect.store_channel.testing'),
+    t('StoreSelect.store_channel.custom'),
+  ];
 
   // Returns numerical values from 0 to 2 (with current branch setup as of 8/28/22)
   // 0 being Default, 1 being Testing and 2 being Custom
   return (
     <>
-      <Field label="Plugin Store Channel" childrenContainerWidth={'fixed'}>
+      <Field label={t('StoreSelect.store_channel.label')} childrenContainerWidth={'fixed'}>
         <Dropdown
           rgOptions={Object.values(Store)
             .filter((store) => typeof store == 'string')
             .map((store) => ({
-              label: store,
+              label: tStores[Store[store]],
               data: Store[store],
             }))}
           selectedOption={selectedStore}
@@ -33,11 +40,11 @@ const StoreSelect: FunctionComponent<{}> = () => {
       </Field>
       {selectedStore == Store.Custom && (
         <Field
-          label="Custom Store"
+          label={t('StoreSelect.custom_store.label')}
           indentLevel={1}
           description={
             <TextField
-              label={'URL'}
+              label={t('StoreSelect.custom_store.url_label')}
               value={selectedStoreURL || undefined}
               onChange={(e) => setSelectedStoreURL(e?.target.value || null)}
             />

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

@@ -12,6 +12,7 @@ import {
 import { useCallback } from 'react';
 import { Suspense, lazy } from 'react';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FaExclamation } from 'react-icons/fa';
 
 import { VerInfo, callUpdaterMethod, finishUpdate } from '../../../../updater';
@@ -23,6 +24,7 @@ const MarkdownRenderer = lazy(() => import('../../../Markdown'));
 
 function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | null; closeModal?: () => {} }) {
   const SP = findSP();
+  const { t } = useTranslation();
   return (
     <Focusable onCancelButton={closeModal}>
       <FocusRing>
@@ -39,13 +41,13 @@ function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | n
               }}
             >
               <div>
-                <h1>{versionInfo?.all?.[id]?.name}</h1>
+                <h1>{versionInfo?.all?.[id]?.name || 'Invalid Update Name'}</h1>
                 {versionInfo?.all?.[id]?.body ? (
                   <WithSuspense>
                     <MarkdownRenderer onDismiss={closeModal}>{versionInfo.all[id].body}</MarkdownRenderer>
                   </WithSuspense>
                 ) : (
-                  'no patch notes for this version'
+                  t('Updater.no_patch_notes_desc')
                 )}
               </div>
             </Focusable>
@@ -58,7 +60,7 @@ function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | n
           initialColumn={0}
           autoFocus={true}
           fnGetColumnWidth={() => SP.innerWidth}
-          name="Decky Updates"
+          name={t('Updater.decky_updates') as string}
         />
       </FocusRing>
     </Focusable>
@@ -72,6 +74,8 @@ export default function UpdaterSettings() {
   const [updateProgress, setUpdateProgress] = useState<number>(-1);
   const [reloading, setReloading] = useState<boolean>(false);
 
+  const { t } = useTranslation();
+
   useEffect(() => {
     window.DeckyUpdater = {
       updateProgress: (i) => {
@@ -93,14 +97,14 @@ export default function UpdaterSettings() {
   return (
     <>
       <Field
-        onOptionsActionDescription={versionInfo?.all ? 'Patch Notes' : undefined}
+        onOptionsActionDescription={versionInfo?.all ? t('Updater.patch_notes_desc') : undefined}
         onOptionsButton={versionInfo?.all ? showPatchNotes : undefined}
-        label="Decky Updates"
+        label={t('Updater.updates.label')}
         description={
           checkingForUpdates || versionInfo?.remote?.tag_name != versionInfo?.current || !versionInfo?.remote ? (
             ''
           ) : (
-            <span>Up to date: running {versionInfo?.current}</span>
+            <span>{t('Updater.updates.lat_version', { ver: versionInfo?.current })} </span>
           )
         }
         icon={
@@ -129,10 +133,10 @@ export default function UpdaterSettings() {
             }
           >
             {checkingForUpdates
-              ? 'Checking'
+              ? t('Updater.updates.checking')
               : !versionInfo?.remote || versionInfo?.remote?.tag_name == versionInfo?.current
-              ? 'Check For Updates'
-              : 'Install Update'}
+              ? t('Updater.updates.check_button')
+              : t('Updater.updates.install_button')}
           </DialogButton>
         ) : (
           <ProgressBarWithInfo
@@ -140,7 +144,7 @@ export default function UpdaterSettings() {
             bottomSeparator="none"
             nProgress={updateProgress}
             indeterminate={reloading}
-            sOperationText={reloading ? 'Reloading' : 'Updating'}
+            sOperationText={reloading ? t('Updater.updates.reloading') : t('Updater.updates.updating')}
           />
         )}
       </Field>

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

@@ -1,15 +1,6 @@
-import {
-  DialogBody,
-  DialogButton,
-  DialogControlsSection,
-  DialogControlsSectionHeader,
-  Field,
-  TextField,
-  Toggle,
-} from 'decky-frontend-lib';
-import { useState } from 'react';
+import { DialogBody, DialogControlsSection, DialogControlsSectionHeader, Field, Toggle } from 'decky-frontend-lib';
+import { useTranslation } from 'react-i18next';
 
-import { installFromURL } from '../../../../store';
 import { useDeckyState } from '../../../DeckyState';
 import BranchSelect from './BranchSelect';
 import StoreSelect from './StoreSelect';
@@ -22,23 +13,23 @@ export default function GeneralSettings({
   isDeveloper: boolean;
   setIsDeveloper: (val: boolean) => void;
 }) {
-  const [pluginURL, setPluginURL] = useState('');
   const { versionInfo } = useDeckyState();
+  const { t } = useTranslation();
 
   return (
     <DialogBody>
       <DialogControlsSection>
-        <DialogControlsSectionHeader>Updates</DialogControlsSectionHeader>
+        <DialogControlsSectionHeader>{t('SettingsGeneralIndex.updates.header')}</DialogControlsSectionHeader>
         <UpdaterSettings />
       </DialogControlsSection>
       <DialogControlsSection>
-        <DialogControlsSectionHeader>Beta Participation</DialogControlsSectionHeader>
+        <DialogControlsSectionHeader>{t('SettingsGeneralIndex.beta.header')}</DialogControlsSectionHeader>
         <BranchSelect />
         <StoreSelect />
       </DialogControlsSection>
       <DialogControlsSection>
-        <DialogControlsSectionHeader>Other</DialogControlsSectionHeader>
-        <Field label="Enable Developer Mode">
+        <DialogControlsSectionHeader>{t('SettingsGeneralIndex.other.header')}</DialogControlsSectionHeader>
+        <Field label={t('SettingsGeneralIndex.developer_mode.label')}>
           <Toggle
             value={isDeveloper}
             onChange={(toggleValue) => {
@@ -46,18 +37,10 @@ export default function GeneralSettings({
             }}
           />
         </Field>
-        <Field
-          label="Install plugin from URL"
-          description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}
-        >
-          <DialogButton disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
-            Install
-          </DialogButton>
-        </Field>
       </DialogControlsSection>
       <DialogControlsSection>
-        <DialogControlsSectionHeader>About</DialogControlsSectionHeader>
-        <Field label="Decky Version" focusable={true}>
+        <DialogControlsSectionHeader>{t('SettingsGeneralIndex.about.header')}</DialogControlsSectionHeader>
+        <Field label={t('SettingsGeneralIndex.about.decky_version')} focusable={true}>
           <div style={{ color: 'var(--gpSystemLighterGrey)' }}>{versionInfo?.current}</div>
         </Field>
       </DialogControlsSection>

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

@@ -10,8 +10,10 @@ import {
   showContextMenu,
 } from 'decky-frontend-lib';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FaDownload, FaEllipsisH, FaRecycle } from 'react-icons/fa';
 
+import { InstallType } from '../../../../plugin';
 import { StorePluginVersion, getPluginList, requestPluginInstall } from '../../../../store';
 import { useSetting } from '../../../../utils/hooks/useSetting';
 import { useDeckyState } from '../../../DeckyState';
@@ -25,19 +27,33 @@ async function reinstallPlugin(pluginName: string, currentVersion?: string) {
   const remotePlugin = serverData?.find((x) => x.name == pluginName);
   if (remotePlugin && remotePlugin.versions?.length > 0) {
     const currentVersionData = remotePlugin.versions.find((version) => version.name == currentVersion);
-    if (currentVersionData) requestPluginInstall(pluginName, currentVersionData);
+    if (currentVersionData) requestPluginInstall(pluginName, currentVersionData, InstallType.REINSTALL);
   }
 }
 
 function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
   const data = props.entry.data;
+  const { t } = useTranslation();
   let pluginName = labelToName(props.entry.label, data?.version);
 
   const showCtxMenu = (e: MouseEvent | GamepadEvent) => {
     showContextMenu(
-      <Menu label="Plugin Actions">
-        <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(pluginName, data?.version)}>Reload</MenuItem>
-        <MenuItem onSelected={() => window.DeckyPluginLoader.uninstallPlugin(pluginName)}>Uninstall</MenuItem>
+      <Menu label={t('PluginListIndex.plugin_actions')}>
+        <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(pluginName, data?.version)}>
+          {t('PluginListIndex.reload')}
+        </MenuItem>
+        <MenuItem
+          onSelected={() =>
+            window.DeckyPluginLoader.uninstallPlugin(
+              pluginName,
+              t('PluginLoader.plugin_uninstall.title', { name: pluginName }),
+              t('PluginLoader.plugin_uninstall.button'),
+              t('PluginLoader.plugin_uninstall.desc', { name: pluginName }),
+            )
+          }
+        >
+          {t('PluginListIndex.uninstall')}
+        </MenuItem>
       </Menu>,
       e.currentTarget ?? window,
     );
@@ -48,11 +64,11 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
       {data?.update ? (
         <DialogButton
           style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
-          onClick={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion)}
-          onOKButton={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion)}
+          onClick={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion, InstallType.UPDATE)}
+          onOKButton={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion, InstallType.UPDATE)}
         >
           <div style={{ display: 'flex', flexDirection: 'row' }}>
-            Update to {data?.update?.name}
+            {t('PluginListIndex.update_to', { name: data?.update?.name })}
             <FaDownload style={{ paddingLeft: '2rem' }} />
           </div>
         </DialogButton>
@@ -63,7 +79,7 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
           onOKButton={() => reinstallPlugin(pluginName, data?.version)}
         >
           <div style={{ display: 'flex', flexDirection: 'row' }}>
-            Reinstall
+            {t('PluginListIndex.reinstall')}
             <FaRecycle style={{ paddingLeft: '5.3rem' }} />
           </div>
         </DialogButton>
@@ -90,6 +106,7 @@ export default function PluginList() {
     'pluginOrder',
     plugins.map((plugin) => plugin.name),
   );
+  const { t } = useTranslation();
 
   useEffect(() => {
     window.DeckyPluginLoader.checkPluginUpdates();
@@ -115,7 +132,7 @@ export default function PluginList() {
   if (plugins.length === 0) {
     return (
       <div>
-        <p>No plugins installed</p>
+        <p>{t('PluginListIndex.no_plugin')}</p>
       </div>
     );
   }

frontend/src/components/store/PluginCard.tsx

@@ -7,7 +7,9 @@ import {
   SuspensefulImage,
 } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
+import { InstallType } from '../../plugin';
 import { StorePlugin, StorePluginVersion, requestPluginInstall } from '../../store';
 
 interface PluginCardProps {
@@ -18,6 +20,8 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
   const [selectedOption, setSelectedOption] = useState<number>(0);
   const root: boolean = plugin.tags.some((tag) => tag === 'root');
 
+  const { t } = useTranslation();
+
   return (
     <div
       className="deckyStoreCard"
@@ -97,7 +101,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             plugin.description
           ) : (
             <span>
-              <i style={{ color: '#666' }}>No description provided.</i>
+              <i style={{ color: '#666' }}>{t('PluginCard.plugin_no_desc')}</i>
             </span>
           )}
         </span>
@@ -109,7 +113,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
               color: '#fee75c',
             }}
           >
-            <i>This plugin has full access to your Steam Deck.</i>{' '}
+            <i>{t('PluginCard.plugin_full_access')}</i>{' '}
             <a
               className="deckyStoreCardDescriptionRootLink"
               href="https://deckbrew.xyz/root"
@@ -144,9 +148,11 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                 <ButtonItem
                   bottomSeparator="none"
                   layout="below"
-                  onClick={() => requestPluginInstall(plugin.name, plugin.versions[selectedOption])}
+                  onClick={() =>
+                    requestPluginInstall(plugin.name, plugin.versions[selectedOption], InstallType.INSTALL)
+                  }
                 >
-                  <span className="deckyStoreCardInstallText">Install</span>
+                  <span className="deckyStoreCardInstallText">{t('PluginCard.plugin_install')}</span>
                 </ButtonItem>
               </div>
               <div
@@ -163,7 +169,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                       label: version.name,
                     })) as SingleDropdownOption[]
                   }
-                  menuLabel="Plugin Version"
+                  menuLabel={t('PluginCard.plugin_version_label') as string}
                   selectedOption={selectedOption}
                   onChange={({ data }) => setSelectedOption(data)}
                 />

frontend/src/components/store/Store.tsx

@@ -9,6 +9,7 @@ import {
   findModule,
 } from 'decky-frontend-lib';
 import { FC, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import logo from '../../../assets/plugin_store.png';
 import Logger from '../../logger';
@@ -25,6 +26,8 @@ const StorePage: FC<{}> = () => {
     return false;
   });
 
+  const { t } = useTranslation();
+
   useEffect(() => {
     (async () => {
       const res = await getPluginList();
@@ -54,13 +57,13 @@ const StorePage: FC<{}> = () => {
             }}
             tabs={[
               {
-                title: 'Browse',
+                title: t('Store.store_tabs.title'),
                 content: <BrowseTab children={{ data: data }} />,
                 id: 'browse',
                 renderTabAddon: () => <span className={TabCount}>{data.length}</span>,
               },
               {
-                title: 'About',
+                title: t('Store.store_tabs.about'),
                 content: <AboutTab />,
                 id: 'about',
               },
@@ -73,10 +76,12 @@ const StorePage: FC<{}> = () => {
 };
 
 const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
+  const { t } = useTranslation();
+
   const sortOptions = useMemo(
     (): DropdownOption[] => [
-      { data: 1, label: 'Alphabetical (A to Z)' },
-      { data: 2, label: 'Alphabetical (Z to A)' },
+      { data: 1, label: t('Store.store_tabs.alph_desc') },
+      { data: 2, label: t('Store.store_tabs.alph_asce') },
     ],
     [],
   );
@@ -105,11 +110,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               width: '47.5%',
             }}
           >
-            <span className="DialogLabel">Sort</span>
+            <span className="DialogLabel">{t("Store.store_sort.label")}</span>
             <Dropdown
-              menuLabel="Sort"
+              menuLabel={t("Store.store_sort.label") as string}
               rgOptions={sortOptions}
-              strDefaultLabel="Last Updated (Newest)"
+              strDefaultLabel={t("Store.store_sort.label_def") as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
             />
@@ -122,11 +127,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               marginLeft: 'auto',
             }}
           >
-            <span className="DialogLabel">Filter</span>
+            <span className="DialogLabel">{t("Store.store_filter.label")}</span>
             <Dropdown
-              menuLabel="Filter"
+              menuLabel={t("Store.store_filter.label")}
               rgOptions={filterOptions}
-              strDefaultLabel="All"
+              strDefaultLabel={t("Store.store_filter.label_def")}
               selectedOption={selectedFilter}
               onChange={(e) => setFilter(e.data)}
             />
@@ -136,7 +141,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
       <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)} />
+            <TextField label={t("Store.store_search.label")} value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} />
           </div>
         </Focusable>
       </div>
@@ -151,11 +156,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
               maxWidth: '100%',
             }}
           >
-            <span className="DialogLabel">Sort</span>
+            <span className="DialogLabel">{t('Store.store_sort.label')}</span>
             <Dropdown
-              menuLabel="Sort"
+              menuLabel={t('Store.store_sort.label') as string}
               rgOptions={sortOptions}
-              strDefaultLabel="Last Updated (Newest)"
+              strDefaultLabel={t('Store.store_sort.label_def') as string}
               selectedOption={selectedSort}
               onChange={(e) => setSort(e.data)}
             />
@@ -165,7 +170,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
       <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)} />
+            <TextField
+              label={t('Store.store_search.label')}
+              value={searchFieldValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+            />
           </div>
         </Focusable>
       </div>
@@ -192,6 +201,8 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => {
 };
 
 const AboutTab: FC<{}> = () => {
+  const { t } = useTranslation();
+
   return (
     <div
       style={{
@@ -216,7 +227,7 @@ const AboutTab: FC<{}> = () => {
       />
       <span className="deckyStoreAboutHeader">Testing</span>
       <span>
-        Please consider testing new plugins to help the Decky Loader team!{' '}
+        {t('Store.store_testing_cta')}{' '}
         <a
           href="https://deckbrew.xyz/testing"
           target="_blank"
@@ -227,13 +238,10 @@ const AboutTab: FC<{}> = () => {
           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>
+      <span className="deckyStoreAboutHeader">{t('Store.store_contrib.label')}</span>
+      <span>{t('Store.store_contrib.desc')}</span>
+      <span className="deckyStoreAboutHeader">{t('Store.store_source.label')}</span>
+      <span>{t('Store.store_source.desc')}</span>
     </div>
   );
 };

frontend/src/developer.tsx

@@ -18,6 +18,7 @@ import {
   staticClasses,
   updaterFieldClasses,
 } from 'decky-frontend-lib';
+import { useTranslation } from 'react-i18next';
 import { FaReact } from 'react-icons/fa';
 
 import Logger from './logger';
@@ -58,9 +59,11 @@ export async function setShowValveInternal(show: boolean) {
 }
 
 export async function setShouldConnectToReactDevTools(enable: boolean) {
+  const { t } = useTranslation();
+
   window.DeckyPluginLoader.toaster.toast({
-    title: (enable ? 'Enabling' : 'Disabling') + ' React DevTools',
-    body: 'Reloading in 5 seconds',
+    title: (enable ? t('Developer.enabling') : t('Developer.disabling')) + ' React DevTools',
+    body: t('Developer.5secreload'),
     icon: <FaReact />,
   });
   await sleep(5000);

frontend/src/index.tsx

@@ -1,4 +1,7 @@
 import { Navigation, Router, sleep } from 'decky-frontend-lib';
+import i18n from 'i18next';
+import Backend from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
 
 import PluginLoader from './plugin-loader';
 import { DeckyUpdater } from './updater';
@@ -36,9 +39,35 @@ declare global {
 (async () => {
   window.deckyAuthToken = await fetch('http://127.0.0.1:1337/auth/token').then((r) => r.text());
 
+  i18n
+    .use(Backend)
+    .use(initReactI18next)
+    .init({
+      load: 'currentOnly',
+      detection: {
+        order: ['querystring', 'navigator'],
+        lookupQuerystring: 'lng',
+      },
+      //debug: true,
+      lng: navigator.language,
+      fallbackLng: 'en-US',
+      interpolation: {
+        escapeValue: true,
+      },
+      returnEmptyString: false,
+      backend: {
+        loadPath: 'http://127.0.0.1:1337/locales/{{lng}}.json',
+        customHeaders: {
+          Authentication: window.deckyAuthToken,
+        },
+        requestOptions: {
+          credentials: 'include',
+        },
+      },
+    });
+
   window.DeckyPluginLoader?.dismountAll();
   window.DeckyPluginLoader?.deinit();
-
   window.DeckyPluginLoader = new PluginLoader();
   window.DeckyPluginLoader.init();
   window.importDeckyPlugin = function (name: string, version: string) {
@@ -62,3 +91,5 @@ declare global {
 
   setTimeout(() => window.syncDeckyPlugins(), 5000);
 })();
+
+export default i18n;

frontend/src/plugin-loader.tsx

@@ -98,7 +98,9 @@ class PluginLoader extends Logger {
     const versionInfo = await this.updateVersion();
     if (versionInfo?.remote && versionInfo?.remote?.tag_name != versionInfo?.current) {
       this.toaster.toast({
+        //title: t('PluginLoader.decky_title'),
         title: 'Decky',
+        //body: t('PluginLoader.decky_update_available', { tag_name: versionInfo?.remote?.tag_name }),
         body: `Update to ${versionInfo?.remote?.tag_name} available!`,
         onClick: () => Router.Navigate('/decky/settings'),
       });
@@ -118,26 +120,35 @@ class PluginLoader extends Logger {
     const updates = await this.checkPluginUpdates();
     if (updates?.size > 0) {
       this.toaster.toast({
+        //title: t('PluginLoader.decky_title'),
         title: 'Decky',
+        //body: t('PluginLoader.plugin_update', { count: updates.size }),
         body: `Updates available for ${updates.size} plugin${updates.size > 1 ? 's' : ''}!`,
         onClick: () => Router.Navigate('/decky/settings/plugins'),
       });
     }
   }
 
-  public addPluginInstallPrompt(artifact: string, version: string, request_id: string, hash: string) {
+  public addPluginInstallPrompt(
+    artifact: string,
+    version: string,
+    request_id: string,
+    hash: string,
+    install_type: number,
+  ) {
     showModal(
       <PluginInstallModal
         artifact={artifact}
         version={version}
         hash={hash}
+        installType={install_type}
         onOK={() => this.callServerMethod('confirm_plugin_install', { request_id })}
         onCancel={() => this.callServerMethod('cancel_plugin_install', { request_id })}
       />,
     );
   }
 
-  public uninstallPlugin(name: string) {
+  public uninstallPlugin(name: string, title: string, button_text: string, description: string) {
     showModal(
       <ConfirmModal
         onOK={async () => {
@@ -146,10 +157,10 @@ class PluginLoader extends Logger {
         onCancel={() => {
           // do nothing
         }}
-        strTitle={`Uninstall ${name}`}
-        strOKButtonText={'Uninstall'}
+        strTitle={title}
+        strOKButtonText={button_text}
       >
-        Are you sure you want to uninstall {name}?
+        {description}
       </ConfirmModal>,
     );
   }
@@ -242,7 +253,17 @@ class PluginLoader extends Logger {
           version: version,
         });
       } catch (e) {
+        //this.error(t('PluginLoader.plugin_load_error.message', { name: name }), e);
         this.error('Error loading plugin ' + name, e);
+        /*const TheError: FC<{}> = () => (
+          <>
+            {t('PluginLoader.error')}:{' '}
+            <pre>
+              <code>{e instanceof Error ? e.stack : JSON.stringify(e)}</code>
+            </pre>
+            <>{t('PluginLoader.plugin_error_uninstall', { icon: "<FaCog style={{ display: 'inline' }} />" })}</>
+          </>
+        );*/
         const TheError: FC<{}> = () => (
           <>
             Error:{' '}
@@ -261,7 +282,12 @@ class PluginLoader extends Logger {
           content: <TheError />,
           icon: <FaExclamationCircle />,
         });
-        this.toaster.toast({ title: 'Error loading ' + name, body: '' + e, icon: <FaExclamationCircle /> });
+        this.toaster.toast({
+          //title: t('PluginLoader.plugin_load_error.toast', { name: name }),
+          title: 'Error loading ' + name,
+          body: '' + e,
+          icon: <FaExclamationCircle />,
+        });
       }
     } else throw new Error(`${name} frontend_bundle not OK`);
   }

frontend/src/plugin.ts

@@ -6,3 +6,9 @@ export interface Plugin {
   onDismount?(): void;
   alwaysRender?: boolean;
 }
+
+export enum InstallType {
+  INSTALL,
+  REINSTALL,
+  UPDATE,
+}

frontend/src/store.tsx

@@ -1,4 +1,4 @@
-import { Plugin } from './plugin';
+import { InstallType, Plugin } from './plugin';
 import { getSetting, setSetting } from './utils/settings';
 
 export enum Store {
@@ -73,7 +73,7 @@ export async function installFromURL(url: string) {
   });
 }
 
-export async function requestPluginInstall(plugin: string, selectedVer: StorePluginVersion) {
+export async function requestPluginInstall(plugin: string, selectedVer: StorePluginVersion, installType: InstallType) {
   const artifactUrl =
     selectedVer.artifact ?? `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/versions/${selectedVer.hash}.zip`;
   await window.DeckyPluginLoader.callServerMethod('install_plugin', {
@@ -81,6 +81,7 @@ export async function requestPluginInstall(plugin: string, selectedVer: StorePlu
     artifact: artifactUrl,
     version: selectedVer.name,
     hash: selectedVer.hash,
+    install_type: installType,
   });
 }
 

frontend/tsconfig.json

@@ -16,7 +16,8 @@
     "strict": true,
     "suppressImplicitAnyIndexErrors": true,
     "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "resolveJsonModule": true
   },
   "include": ["src", "index.d.ts"],
   "exclude": ["node_modules"]