From 6d2e9365c0fb1bea804743245d79a5b97e3af108 Mon Sep 17 00:00:00 2001
From: AAGaming <aagaming@riseup.net>
Date: Wed, 21 Feb 2024 01:08:25 -0500
Subject: more major websocket progress

---
 .../components/settings/pages/developer/index.tsx  |  6 +-
 .../components/settings/pages/general/Updater.tsx  |  4 +-
 .../components/settings/pages/testing/index.tsx    | 96 ++++++++++++++--------
 3 files changed, 66 insertions(+), 40 deletions(-)

(limited to 'frontend/src/components/settings')

diff --git a/frontend/src/components/settings/pages/developer/index.tsx b/frontend/src/components/settings/pages/developer/index.tsx
index 9c8504e7..091e367e 100644
--- a/frontend/src/components/settings/pages/developer/index.tsx
+++ b/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,
                 );
diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx
index c563bbca..3c7e53f1 100644
--- a/frontend/src/components/settings/pages/general/Updater.tsx
+++ b/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);
     });
diff --git a/frontend/src/components/settings/pages/testing/index.tsx b/frontend/src/components/settings/pages/testing/index.tsx
index 72267295..cdf51c71 100644
--- a/frontend/src/components/settings/pages/testing/index.tsx
+++ b/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
+              <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);
+                      }}
+                    >
+                      <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',
-                        minWidth: '150px',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
                       }}
+                      onClick={() => Navigation.NavigateToExternalWeb(version.link)}
                     >
-                      {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>
+                      <FaInfo />
+                    </DialogButton>
+                  </Focusable>
+                </Field>
               </li>
             );
           })}
-- 
cgit v1.2.3