more major websocket progress

frontend/src/components/modals/filepicker/patches/library.ts

@@ -1,6 +1,7 @@
 import { Patch, findModuleChild, replacePatch, sleep } from 'decky-frontend-lib';
 
 import Logger from '../../../../logger';
+import { FileSelectionType } from '..';
 
 const logger = new Logger('LibraryPatch');
 
@@ -13,7 +14,12 @@ function rePatch() {
       const details = window.appDetailsStore.GetAppDetails(appid);
       logger.debug('game details', details);
       // strShortcutStartDir
-      const file = await DeckyPluginLoader.openFilePicker(details?.strShortcutStartDir.replaceAll('"', '') || '/');
+      const file = await DeckyPluginLoader.openFilePicker(
+        FileSelectionType.FILE,
+        details?.strShortcutStartDir.replaceAll('"', '') || '/',
+        true,
+        true,
+      );
       logger.debug('user selected', file);
       window.SteamClient.Apps.SetShortcutExe(appid, JSON.stringify(file.path));
       const pathArr = file.path.split('/');

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

@@ -28,7 +28,7 @@ const installFromZip = async () => {
     logger.error('The default path has not been found!');
     return;
   }
-  DeckyPluginLoader.openFilePickerV2(FileSelectionType.FILE, path, true, true, undefined, ['zip'], false, false).then(
+  DeckyPluginLoader.openFilePicker(FileSelectionType.FILE, path, true, true, undefined, ['zip'], false, false).then(
     (val) => {
       const url = `file://${val.path}`;
       console.log(`Installing plugin locally from ${url}`);
@@ -37,6 +37,8 @@ const installFromZip = async () => {
   );
 };
 
+const getTabID = DeckyBackend.callable<[name: string], string>('utilities/get_tab_id');
+
 export default function DeveloperSettings() {
   const [enableValveInternal, setEnableValveInternal] = useSetting<boolean>('developer.valve_internal', false);
   const [reactDevtoolsEnabled, setReactDevtoolsEnabled] = useSetting<boolean>('developer.rdt.enabled', false);
@@ -85,7 +87,7 @@ export default function DeveloperSettings() {
           <DialogButton
             onClick={async () => {
               try {
-                let tabId = await DeckyBackend.call<[name: string], string>('utilities/get_tab_id', 'SharedJSContext');
+                let tabId = await getTabID('SharedJSContext');
                 Navigation.NavigateToExternalWeb(
                   'localhost:8080/devtools/inspector.html?ws=localhost:8080/devtools/page/' + tabId,
                 );

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

@@ -75,12 +75,12 @@ export default function UpdaterSettings() {
   const { t } = useTranslation();
 
   useEffect(() => {
-    const a = DeckyBackend.addEventListener('frontend/update_download_percentage', (percentage) => {
+    const a = DeckyBackend.addEventListener('updater/update_download_percentage', (percentage) => {
       setUpdateProgress(percentage);
       setIsLoaderUpdating(true);
     });
 
-    const b = DeckyBackend.addEventListener('frontend/finish_download', () => {
+    const b = DeckyBackend.addEventListener('updater/finish_download', () => {
       setUpdateProgress(0);
       setReloading(true);
     });

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

@@ -1,4 +1,12 @@
-import { DialogBody, DialogButton, DialogControlsSection, Focusable, Navigation } from 'decky-frontend-lib';
+import {
+  DialogBody,
+  DialogButton,
+  DialogControlsSection,
+  Field,
+  Focusable,
+  Navigation,
+  SteamSpinner,
+} from 'decky-frontend-lib';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaDownload, FaInfo } from 'react-icons/fa';
@@ -19,13 +27,23 @@ const downloadTestingVersion = DeckyBackend.callable<[pr_id: number, sha: string
 export default function TestingVersionList() {
   const { t } = useTranslation();
   const [testingVersions, setTestingVersions] = useState<TestingVersion[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     (async () => {
       setTestingVersions(await getTestingVersions());
+      setLoading(false);
     })();
   }, []);
 
+  if (loading) {
+    return (
+      <>
+        <SteamSpinner>{t('Testing.loading')}</SteamSpinner>
+      </>
+    );
+  }
+
   if (testingVersions.length === 0) {
     return (
       <div>
@@ -37,48 +55,54 @@ export default function TestingVersionList() {
   return (
     <DialogBody>
       <DialogControlsSection>
+        <h4>{t('Testing.header')}</h4>
         <ul style={{ listStyleType: 'none', padding: '0' }}>
           {testingVersions.map((version) => {
             return (
-              <li style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingBottom: '10px' }}>
-                <span>
-                  {version.name} <span style={{ opacity: '50%' }}>{'#' + version.id}</span>
-                </span>
-                <Focusable style={{ height: '40px', marginLeft: 'auto', display: 'flex' }}>
-                  <DialogButton
-                    style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
-                    onClick={() => {
-                      downloadTestingVersion(version.id, version.head_sha);
-                      setSetting('branch', UpdateBranch.Testing);
-                    }}
-                  >
-                    <div
-                      style={{
-                        display: 'flex',
-                        minWidth: '150px',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
+              <li>
+                <Field
+                  label={
+                    <>
+                      {version.name} <span style={{ opacity: '50%' }}>{'#' + version.id}</span>
+                    </>
+                  }
+                >
+                  <Focusable style={{ height: '40px', marginLeft: 'auto', display: 'flex' }}>
+                    <DialogButton
+                      style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
+                      onClick={() => {
+                        downloadTestingVersion(version.id, version.head_sha);
+                        setSetting('branch', UpdateBranch.Testing);
                       }}
                     >
-                      {t('Testing.download')}
-                      <FaDownload style={{ paddingLeft: '1rem' }} />
-                    </div>
-                  </DialogButton>
-                  <DialogButton
-                    style={{
-                      height: '40px',
-                      width: '40px',
-                      padding: '10px 12px',
-                      minWidth: '40px',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      justifyContent: 'center',
-                    }}
-                    onClick={() => Navigation.NavigateToExternalWeb(version.link)}
-                  >
-                    <FaInfo />
-                  </DialogButton>
-                </Focusable>
+                      <div
+                        style={{
+                          display: 'flex',
+                          minWidth: '150px',
+                          justifyContent: 'space-between',
+                          alignItems: 'center',
+                        }}
+                      >
+                        {t('Testing.download')}
+                        <FaDownload style={{ paddingLeft: '1rem' }} />
+                      </div>
+                    </DialogButton>
+                    <DialogButton
+                      style={{
+                        height: '40px',
+                        width: '40px',
+                        padding: '10px 12px',
+                        minWidth: '40px',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                      }}
+                      onClick={() => Navigation.NavigateToExternalWeb(version.link)}
+                    >
+                      <FaInfo />
+                    </DialogButton>
+                  </Focusable>
+                </Field>
               </li>
             );
           })}

frontend/src/components/store/Store.tsx

@@ -89,7 +89,7 @@ const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }>
   useEffect(() => {
     (async () => {
       const res = await getPluginList(selectedSort[0], selectedSort[1]);
-      logger.log('got data!', res);
+      logger.debug('got data!', res);
       setPluginList(res);
       setPluginCount(res.length);
     })();
@@ -98,7 +98,7 @@ const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }>
   useEffect(() => {
     (async () => {
       const storeRes = await getStore();
-      logger.log(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`);
+      logger.debug(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`);
       setIsTesting(storeRes === Store.Testing);
     })();
   }, []);