2 files changed, 51 insertions, 40 deletions
diff --git a/frontend/src/components/settings/pages/general/BranchSelect.tsx b/frontend/src/components/settings/pages/general/BranchSelect.tsx
index d803f604..154bff9c 100644
--- a/frontend/src/components/settings/pages/general/BranchSelect.tsx
+++ b/frontend/src/components/settings/pages/general/BranchSelect.tsx
@@ -1,9 +1,12 @@
 import { Dropdown, Field } from 'decky-frontend-lib';
 import { FunctionComponent } from 'react';
 
+import Logger from '../../../../logger';
 import { callUpdaterMethod } from '../../../../updater';
 import { useSetting } from '../../../../utils/hooks/useSetting';
 
+const logger = new Logger('BranchSelect');
+
 enum UpdateBranch {
   Stable,
   Prerelease,
@@ -28,7 +31,7 @@ const BranchSelect: FunctionComponent<{}> = () => {
         onChange={async (newVal) => {
           await setSelectedBranch(newVal.data);
           callUpdaterMethod('check_for_updates');
-          console.log('switching branches!');
+          logger.log('switching branches!');
         }}
       />
     </Field>
diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx
index 7056ed13..b4ea8536 100644
--- a/frontend/src/components/settings/pages/general/Updater.tsx
+++ b/frontend/src/components/settings/pages/general/Updater.tsx
@@ -1,4 +1,13 @@
-import { Carousel, DialogButton, Field, Focusable, ProgressBarWithInfo, Spinner, showModal } from 'decky-frontend-lib';
+import {
+  Carousel,
+  DialogButton,
+  Field,
+  FocusRing,
+  Focusable,
+  ProgressBarWithInfo,
+  Spinner,
+  showModal,
+} from 'decky-frontend-lib';
 import { useCallback } from 'react';
 import { Suspense, lazy } from 'react';
 import { useEffect, useState } from 'react';
@@ -7,49 +16,48 @@ import { FaArrowDown } from 'react-icons/fa';
 import { VerInfo, callUpdaterMethod, finishUpdate } from '../../../../updater';
 import { useDeckyState } from '../../../DeckyState';
 import InlinePatchNotes from '../../../patchnotes/InlinePatchNotes';
+import WithSuspense from '../../../WithSuspense';
 
 const MarkdownRenderer = lazy(() => import('../../../Markdown'));
 
-// import ReactMarkdown from 'react-markdown'
-// import remarkGfm from 'remark-gfm'
-
 function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | null; closeModal?: () => {} }) {
   return (
     <Focusable onCancelButton={closeModal}>
-      <Carousel
-        fnItemRenderer={(id: number) => (
-          <Focusable
-            onActivate={() => {}}
-            style={{
-              marginTop: '40px',
-              height: 'calc( 100% - 40px )',
-              overflowY: 'scroll',
-              display: 'flex',
-              justifyContent: 'center',
-              margin: '40px',
-            }}
-          >
-            <div>
-              <h1>{versionInfo?.all?.[id]?.name}</h1>
-              {versionInfo?.all?.[id]?.body ? (
-                <Suspense fallback={<Spinner style={{ width: '24', height: '24' }} />}>
-                  <MarkdownRenderer>{versionInfo.all[id].body}</MarkdownRenderer>
-                </Suspense>
-              ) : (
-                'no patch notes for this version'
-              )}
-            </div>
-          </Focusable>
-        )}
-        fnGetId={(id) => id}
-        nNumItems={versionInfo?.all?.length}
-        nHeight={window.innerHeight - 150}
-        nItemHeight={window.innerHeight - 200}
-        nItemMarginX={0}
-        initialColumn={0}
-        autoFocus={true}
-        fnGetColumnWidth={() => window.innerWidth}
-      />
+      <FocusRing>
+        <Carousel
+          fnItemRenderer={(id: number) => (
+            <Focusable
+              style={{
+                marginTop: '40px',
+                height: 'calc( 100% - 40px )',
+                overflowY: 'scroll',
+                display: 'flex',
+                justifyContent: 'center',
+                margin: '40px',
+              }}
+            >
+              <div>
+                <h1>{versionInfo?.all?.[id]?.name}</h1>
+                {versionInfo?.all?.[id]?.body ? (
+                  <WithSuspense>
+                    <MarkdownRenderer onDismiss={closeModal}>{versionInfo.all[id].body}</MarkdownRenderer>
+                  </WithSuspense>
+                ) : (
+                  'no patch notes for this version'
+                )}
+              </div>
+            </Focusable>
+          )}
+          fnGetId={(id) => id}
+          nNumItems={versionInfo?.all?.length}
+          nHeight={window.innerHeight - 40}
+          nItemHeight={window.innerHeight - 40}
+          nItemMarginX={0}
+          initialColumn={0}
+          autoFocus={true}
+          fnGetColumnWidth={() => window.innerWidth}
+        />
+      </FocusRing>
     </Focusable>
   );
 }
@@ -126,7 +134,7 @@ export default function UpdaterSettings() {
         ) : (
           <ProgressBarWithInfo
             layout="inline"
-            bottomSeparator={false}
+            bottomSeparator="none"
             nProgress={updateProgress}
             indeterminate={reloading}
             sOperationText={reloading ? 'Reloading' : 'Updating'}