Updater UI tweaks, Markdown tweaks, bump lib

4 files changed, 51 insertions, 41 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 0b8e774d..07985df7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -41,7 +41,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "^3.0.0",
+    "decky-frontend-lib": "^3.1.0",
     "react-file-icon": "^1.2.0",
     "react-icons": "^4.4.0",
     "react-markdown": "^8.0.3",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 365573ef..f9974ed6 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -10,7 +10,7 @@ specifiers:
   '@types/react-file-icon': ^1.0.1
   '@types/react-router': 5.1.18
   '@types/webpack': ^5.28.0
-  decky-frontend-lib: ^3.0.0
+  decky-frontend-lib: ^3.1.0
   husky: ^8.0.1
   import-sort-style-module: ^6.0.0
   inquirer: ^8.2.4
@@ -30,7 +30,7 @@ specifiers:
   typescript: ^4.7.4
 
 dependencies:
-  decky-frontend-lib: 3.0.0
+  decky-frontend-lib: 3.1.0
   react-file-icon: 1.2.0_wcqkhtmu7mswc6yz4uyexck3ty
   react-icons: 4.4.0_react@16.14.0
   react-markdown: 8.0.3_vshvapmxg47tngu7tvrsqpq55u
@@ -944,8 +944,8 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib/3.0.0:
-    resolution: {integrity: sha512-ZqJ9ii7QoYWHFfkU8hV82IHi3+McZDmE4wS22duXpgRI8r5BBMiZItw6tYkc24ZtsJIVso83FFt7adcEBqBwJA==}
+  /decky-frontend-lib/3.1.0:
+    resolution: {integrity: sha512-qawFq2p0I69sN9pu2GkoL1pTrkunWzYOMl6SwEPGA8lPL0AxqKzb44BXzH5s6hxBwAcda7/FiNaUWmGyhgpPHA==}
     dependencies:
       minimist: 1.2.6
     dev: false
diff --git a/frontend/src/components/Markdown.tsx b/frontend/src/components/Markdown.tsx
index cefced91..81618b55 100644
--- a/frontend/src/components/Markdown.tsx
+++ b/frontend/src/components/Markdown.tsx
@@ -15,7 +15,6 @@ const Markdown: FunctionComponent<MarkdownProps> = (props) => {
         components={{
           div: (nodeProps) => <Focusable {...nodeProps.node.properties}>{nodeProps.children}</Focusable>,
           a: (nodeProps) => {
-            console.log(nodeProps.node, nodeProps);
             const aRef = useRef<HTMLAnchorElement>(null);
             return (
               // TODO fix focus ring
diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx
index ce859de7..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';
@@ -14,39 +23,41 @@ const MarkdownRenderer = lazy(() => import('../../../Markdown'));
 function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | null; closeModal?: () => {} }) {
   return (
     <Focusable onCancelButton={closeModal}>
-      <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>
+        <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>
   );
 }
@@ -123,7 +134,7 @@ export default function UpdaterSettings() {
         ) : (
           <ProgressBarWithInfo
             layout="inline"
-            bottomSeparator={false}
+            bottomSeparator="none"
             nProgress={updateProgress}
             indeterminate={reloading}
             sOperationText={reloading ? 'Reloading' : 'Updating'}