[Feature] Warn users on possible risks on installing third party unvetted plugins

.gitignore

@@ -30,6 +30,7 @@ MANIFEST
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 *.manifest
 backend/dist/
+backend/static/
 
 # Installer logs
 pip-log.txt

backend/decky_loader/locales/it-IT.json

@@ -115,7 +115,9 @@
         "update_all_many": "Aggiorna {{count}} plugins",
         "update_all_one": "Aggiorna un plugin",
         "update_all_other": "Aggiorna {{count}} plugins",
-        "update_to": "Aggiorna a {{name}}"
+        "update_to": "Aggiorna a {{name}}",
+        "unfreeze": "Permetti aggiornamenti",
+        "freeze": "Congela aggiornamenti"
     },
     "PluginListLabel": {
         "hidden": "Nascosto dal menu di accesso rapido"

backend/decky_loader/locales/pt-BR.json

@@ -286,5 +286,9 @@
             "reloading": "Recarregando",
             "updating": "Atualizando"
         }
+    },
+    "TitleView": {
+        "decky_store_desc": "Abrir Loja Decky",
+        "settings_desc": "Abrir Definições Decky"
     }
 }

backend/decky_loader/locales/pt-PT.json

@@ -194,6 +194,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": {
@@ -263,5 +268,21 @@
             "reloading": "Recarregar",
             "updating": "Actualização em curso"
         }
+    },
+    "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"
+        }
     }
 }

frontend/src/components/modals/PluginInstallModal.tsx

@@ -60,10 +60,10 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({
       strTitle={
         <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%' }}>
           <TranslationHelper
-            transClass={TranslationClass.PLUGIN_INSTALL_MODAL}
-            transText="title"
-            i18nArgs={{ artifact: artifact }}
-            installType={installType}
+            trans_class={TranslationClass.PLUGIN_INSTALL_MODAL}
+            trans_text="title"
+            i18n_args={{ artifact: artifact }}
+            install_type={installType}
           />
           {loading && (
             <div style={{ marginLeft: 'auto' }}>
@@ -81,31 +81,31 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({
         loading ? (
           <div>
             <TranslationHelper
-              transClass={TranslationClass.PLUGIN_INSTALL_MODAL}
-              transText="button_processing"
-              installType={installType}
+              trans_class={TranslationClass.PLUGIN_INSTALL_MODAL}
+              trans_text="button_processing"
+              install_type={installType}
             />
           </div>
         ) : (
           <div>
             <TranslationHelper
-              transClass={TranslationClass.PLUGIN_INSTALL_MODAL}
-              transText="button_idle"
-              installType={installType}
+              trans_class={TranslationClass.PLUGIN_INSTALL_MODAL}
+              trans_text="button_idle"
+              install_type={installType}
             />
           </div>
         )
       }
     >
       <div>
         <TranslationHelper
-          transClass={TranslationClass.PLUGIN_INSTALL_MODAL}
-          transText="desc"
-          i18nArgs={{
+          trans_class={TranslationClass.PLUGIN_INSTALL_MODAL}
+          trans_text="desc"
+          i18n_args={{
             artifact: artifact,
             version: version,
           }}
-          installType={installType}
+          install_type={installType}
         />
       </div>
       {hash == 'False' && <span style={{ color: 'red' }}>{t('PluginInstallModal.no_hash')}</span>}

frontend/src/components/modals/WarnThirdParty.tsx

@@ -0,0 +1,82 @@
+import { ConfirmModal } from '@decky/ui';
+import { FC, useEffect, useState } from 'react';
+import { FaExclamationTriangle } from 'react-icons/fa';
+
+import TranslationHelper, { TranslationClass } from '../../utils/TranslationHelper';
+
+interface WarnThirdPartyProps {
+  seconds?: number;
+  type: WarnThirdPartyType;
+  onOK(): void;
+  onCancel(): void;
+  closeModal?(): void;
+}
+
+export enum WarnThirdPartyType {
+  REPO = 0,
+  ZIP = 1,
+}
+
+const WarnThirdParty: FC<WarnThirdPartyProps> = ({ seconds = 5, type, onOK, onCancel, closeModal }) => {
+  const [waitTimer, setWaitTimer] = useState(seconds);
+
+  useEffect(() => {
+    // exit early when we reach 0
+    if (waitTimer <= 0) return;
+
+    // save intervalId to clear the interval when the
+    // component re-renders
+    const intervalId = setInterval(() => {
+      setWaitTimer(waitTimer - 1);
+    }, 1000);
+
+    // clear interval on re-render to avoid memory leaks
+    return () => clearInterval(intervalId);
+    // add waitTimer as a dependency to re-rerun the effect
+    // when we update it
+  }, [waitTimer]);
+
+  return (
+    <ConfirmModal
+      bOKDisabled={waitTimer > 0}
+      closeModal={closeModal}
+      onOK={async () => {
+        await onOK();
+      }}
+      onCancel={async () => {
+        await onCancel();
+      }}
+      strTitle={
+        <div>
+          <FaExclamationTriangle />
+          <TranslationHelper trans_class={TranslationClass.WARN_THIRD_PARTY} trans_text="title" warn_type={type} />
+        </div>
+      }
+      strOKButtonText={
+        waitTimer > 0 ? (
+          <div>
+            <TranslationHelper
+              trans_class={TranslationClass.WARN_THIRD_PARTY}
+              trans_text="button_processing"
+              i18n_args={{
+                timer: waitTimer,
+              }}
+            />
+          </div>
+        ) : (
+          <div>
+            <TranslationHelper trans_class={TranslationClass.WARN_THIRD_PARTY} trans_text="button_idle" />
+          </div>
+        )
+      }
+    >
+      <span style={{ color: 'red' }}>
+        <div>
+          <TranslationHelper trans_class={TranslationClass.WARN_THIRD_PARTY} trans_text="desc" warn_type={type} />
+        </div>
+      </span>
+    </ConfirmModal>
+  );
+};
+
+export default WarnThirdParty;

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

@@ -7,6 +7,7 @@ import {
   Navigation,
   TextField,
   Toggle,
+  showModal,
 } from '@decky/ui';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +19,7 @@ import { installFromURL } from '../../../../store';
 import { useSetting } from '../../../../utils/hooks/useSetting';
 import { getSetting } from '../../../../utils/settings';
 import { FileSelectionType } from '../../../modals/filepicker';
+import WarnThirdParty, { WarnThirdPartyType } from '../../../modals/WarnThirdParty';
 import RemoteDebuggingSettings from '../general/RemoteDebugging';
 
 const logger = new Logger('DeveloperIndex');
@@ -43,6 +45,8 @@ 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 [acceptedWarning, setAcceptedWarning] = useSetting<boolean>('developer.warn.third_party', false);
+  const waitTime = acceptedWarning ? 0 : 5;
   const [pluginURL, setPluginURL] = useState('');
   const textRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
@@ -72,7 +76,22 @@ export default function DeveloperSettings() {
           }
           icon={<FaLink style={{ display: 'block' }} />}
         >
-          <DialogButton disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
+          <DialogButton
+            disabled={pluginURL.length == 0}
+            onClick={() =>
+              showModal(
+                <WarnThirdParty
+                  type={WarnThirdPartyType.ZIP}
+                  onOK={() => {
+                    setAcceptedWarning(true);
+                    installFromURL(pluginURL);
+                  }}
+                  onCancel={() => {}}
+                  seconds={waitTime}
+                />,
+              )
+            }
+          >
             {t('SettingsDeveloperIndex.third_party_plugins.button_install')}
           </DialogButton>
         </Field>

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

@@ -1,17 +1,20 @@
-import { Dropdown, Field, TextField } from '@decky/ui';
+import { Dropdown, Field, TextField, showModal } from '@decky/ui';
 import { FunctionComponent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaShapes } from 'react-icons/fa';
 
 import Logger from '../../../../logger';
 import { Store } from '../../../../store';
 import { useSetting } from '../../../../utils/hooks/useSetting';
+import WarnThirdParty, { WarnThirdPartyType } from '../../../modals/WarnThirdParty';
 
 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 [acceptedWarning, setAcceptedWarning] = useSetting<boolean>('store_select.warn.third_party', false);
+  const waitTime = acceptedWarning ? 0 : 5;
   const { t } = useTranslation();
   const tStores = [
     t('StoreSelect.store_channel.default'),
@@ -38,20 +41,30 @@ const StoreSelect: FunctionComponent<{}> = () => {
           }}
         />
       </Field>
-      {selectedStore == Store.Custom && (
-        <Field
-          label={t('StoreSelect.custom_store.label')}
-          indentLevel={1}
-          description={
-            <TextField
-              label={t('StoreSelect.custom_store.url_label')}
-              value={selectedStoreURL || undefined}
-              onChange={(e) => setSelectedStoreURL(e?.target.value || null)}
-            />
-          }
-          icon={<FaShapes style={{ display: 'block' }} />}
-        ></Field>
-      )}
+      {selectedStore == Store.Custom &&
+        showModal(
+          <WarnThirdParty
+            type={WarnThirdPartyType.REPO}
+            seconds={waitTime}
+            onOK={() => {
+              setAcceptedWarning(true);
+            }}
+            onCancel={() => setSelectedStore(Store.Default)}
+          />,
+        ) && (
+          <Field
+            label={t('StoreSelect.custom_store.label')}
+            indentLevel={1}
+            description={
+              <TextField
+                label={t('StoreSelect.custom_store.url_label')}
+                value={selectedStoreURL || undefined}
+                onChange={(e) => setSelectedStoreURL(e?.target.value || null)}
+              />
+            }
+            icon={<FaShapes style={{ display: 'block' }} />}
+          ></Field>
+        )}
     </>
   );
 };

frontend/src/developer.tsx

@@ -40,11 +40,11 @@ export async function setShowValveInternal(show: boolean) {
 export async function setShouldConnectToReactDevTools(enable: boolean) {
   DeckyPluginLoader.toaster.toast({
     title: enable ? (
-      <TranslationHelper transClass={TranslationClass.DEVELOPER} transText={'enabling'} />
+      <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'enabling'} />
     ) : (
-      <TranslationHelper transClass={TranslationClass.DEVELOPER} transText={'disabling'} />
+      <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'disabling'} />
     ),
-    body: <TranslationHelper transClass={TranslationClass.DEVELOPER} transText={'5secreload'} />,
+    body: <TranslationHelper trans_class={TranslationClass.DEVELOPER} trans_text={'5secreload'} />,
     icon: <FaReact />,
   });
   await sleep(5000);