chore(release): 3.20.6 [CI SKIP]

fix: reorderable list no longer toggles on backout

.github/workflows/release.yaml

@@ -1,6 +1,7 @@
 name: Release
 
 on:
+  pull_request:
   push:
     branches:
       - main
@@ -20,9 +21,12 @@ jobs:
           node-version: 16
       - name: Setup | Dependencies
         run: npm i -g pnpm && pnpm i --frozen-lockfile
+      - name: Build
+        run: pnpm run build
       - name: Test
         run: pnpm run test
       - name: Release
+        if: github.event_name != 'pull_request'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.md

@@ -1,3 +1,279 @@
+## [3.20.6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.20.5...v3.20.6) (2023-04-29)
+
+
+### Bug Fixes
+
+* **QuickAccessTab:** set decky tab ID to 999 ([5d5cb31](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/5d5cb31638070deae9970a93c587b447d5e56559))
+
+## [3.20.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.20.4...v3.20.5) (2023-04-04)
+
+
+### Bug Fixes
+
+* reorderable list no longer toggles on backout ([7e1182a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7e1182a83f7fafbec6fe115a72f8b64b71c119a4))
+
+## [3.20.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.20.3...v3.20.4) (2023-04-04)
+
+
+### Bug Fixes
+
+* **SteamSpinner:** oh apparently the class was moved outside the component for some reason?????? ([b8ddf3d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/b8ddf3d927401d04c0fde8ebc8960639369b8ad3))
+
+## [3.20.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.20.2...v3.20.3) (2023-04-04)
+
+
+### Bug Fixes
+
+* **SteamSpinner:** fix the fix ([79d229b](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/79d229be50d26e2510af0ea16cdf6644371a5967))
+
+## [3.20.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.20.1...v3.20.2) (2023-04-04)
+
+
+### Bug Fixes
+
+* **SteamSpinner:** dont error on latest desktop beta ([19819b7](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/19819b7a5bc9434fa802f4e8dca4f4cb6921df07))
+
+## [3.20.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.20.0...v3.20.1) (2023-04-03)
+
+
+### Bug Fixes
+
+* **useQuickAccessVisible:** make it work again ([7dacb23](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7dacb23e8be7b1f076cdd0869a4e3a3902b07ec5))
+
+# [3.20.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.19.2...v3.20.0) (2023-04-03)
+
+
+### Bug Fixes
+
+* **Field:** remove style ([53faf55](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/53faf55df1484204e276cd21a32703c2d7809332))
+* fixed missing export ([b480d39](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/b480d397c4251f42c1f24ff5e74322d22e313f05))
+* list didn't update on prop change ([b146eab](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/b146eab8d7e1338afa54a168a2fd895e716c2bb2))
+
+
+### Features
+
+* added doc comments ([dfcb3be](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/dfcb3bec19900e099ae3766771e120dbd4f229f5))
+* added reorderable list and updated fieldProps ([3c171cf](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/3c171cfb8ff18ed02eeb569a183c9d43fd0b4f57))
+* changed ReorderableList to working version ([5b166d6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/5b166d6db879200b049e872cba327957ba5fb705))
+* made requested changes and ran prettier ([b1b2f4f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/b1b2f4fa2da755efd65b82b15b52196f89fb09c0))
+* refactoring mostly complete ([cea315a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/cea315a52c285b31ad4e5d0a03104c674ae4f7f5))
+* reorderable list now saves on backout ([b1591f8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/b1591f86bbd36e160818626760e0717ee50878e0))
+* **ReorderableList:** add animations, clean up ([26fae13](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/26fae13c8ebd3f11f134c3bc0edfc971afd42fff))
+* support for non-interactable reordering ([dbd01b1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/dbd01b11cafe9b102cc371b9812f99aec718d106))
+* support for user specified icon ([47a6fdd](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/47a6fddc89b8f9110252c5e19a6e95152c367dbf))
+
+## [3.19.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.19.1...v3.19.2) (2023-03-07)
+
+
+### Bug Fixes
+
+* **Item:** add highlightOnFocus prop ([c53f87b](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c53f87b4a9273b377853bfff1d27474ebd6e564a))
+
+## [3.19.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.19.0...v3.19.1) (2023-02-23)
+
+
+### Bug Fixes
+
+* refactoring to fix for feb 22 2023 beta ([0b6dc24](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0b6dc24c0da2d7644e185425e975787657f8bba1))
+
+# [3.19.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.11...v3.19.0) (2023-02-22)
+
+
+### Features
+
+* added reorderable list and updated fieldProps ([#57](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/57)) ([5a074b5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/5a074b5bb68c675c484a7b693f67a67488be9bcf))
+
+## [3.18.11](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.10...v3.18.11) (2023-02-18)
+
+
+### Bug Fixes
+
+* **Navigation:** fix NavigateToExternalWeb ([82214fe](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/82214fef4c0a383776631fbb754550fe69f9000d))
+* **Navigation:** fix NavigateToExternalWeb ([c53d7f8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c53d7f8448d8aad76dc699f1f309bdd547ee14df))
+
+## [3.18.10](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.9...v3.18.10) (2023-01-17)
+
+
+### Bug Fixes
+
+* **SuspensefulImage:** fix changing src ([9723854](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/9723854ddca53d7708e1effbddec9e5ead22d5de))
+
+## [3.18.9](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.8...v3.18.9) (2023-01-16)
+
+
+### Bug Fixes
+
+* **Navigation:** fix on stable ([4affd4a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4affd4aaec088f01d0f30af48cb4daa34acf26b1))
+
+## [3.18.8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.7...v3.18.8) (2023-01-16)
+
+
+### Bug Fixes
+
+* **Navigation:** fix timing issue in decky-loader ([58b69f0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/58b69f0d6c43356c4f0ed183802d5bf7fb80e978))
+
+## [3.18.7](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.6...v3.18.7) (2023-01-16)
+
+
+### Bug Fixes
+
+* un-break navigation on stable ([2e66e5a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2e66e5a555f44009d24e332eca82453ba930baf7))
+
+## [3.18.6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.5...v3.18.6) (2023-01-13)
+
+
+### Bug Fixes
+
+* **Router:** fix Navigation for the millionth time ([aac2d52](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/aac2d520a68b1074ba1ae988d6c92f7881a296d7))
+
+## [3.18.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.4...v3.18.5) (2022-12-21)
+
+
+### Bug Fixes
+
+* fixed prop interfaces ([#70](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/70)) ([0b50f2c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0b50f2cf0baa76fc00aa0a41a8435d7a512bff19))
+
+## [3.18.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.3...v3.18.4) (2022-12-16)
+
+
+### Bug Fixes
+
+* **modals:** fix ModalRoot again ([fd94842](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/fd94842647e51dd9a104e170e0c5ee2bebce12d6))
+
+## [3.18.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.2...v3.18.3) (2022-12-12)
+
+
+### Bug Fixes
+
+* **Router:** update Router interface to SteamOS3.4 and add Navigation ([#52](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/52)) ([f0379e5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f0379e5d19279863b571e66918bc9107efedb612))
+
+## [3.18.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.1...v3.18.2) (2022-12-11)
+
+
+### Bug Fixes
+
+* **useQuickAccessVisible:** remove invalid prop access ([#66](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/66)) ([767dc2f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/767dc2fcee97d8b6c2d331ae29704d9b469de51a))
+
+## [3.18.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.0...v3.18.1) (2022-12-11)
+
+
+### Bug Fixes
+
+* **findSP:** fallback to last active context ([#53](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/53)) ([6f14da1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/6f14da152acc4757b814844f1b77bf83dd98d77e))
+
+# [3.18.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.17.0...v3.18.0) (2022-12-11)
+
+
+### Features
+
+* **DialogCheckbox:** Add DialogCheckbox component ([#58](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/58)) ([88f245d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/88f245d476a6477e9fc0cd35e9b675961ecbc26c))
+
+# [3.17.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.16.2...v3.17.0) (2022-12-11)
+
+
+### Features
+
+* **ControlsList:** Add ControlsList component ([#61](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/61)) ([c586afb](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c586afb97d59928ecb703b5a254ed1b9405e2c7e))
+
+## [3.16.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.16.1...v3.16.2) (2022-12-11)
+
+
+### Bug Fixes
+
+* **Marquee:** replace default export with named export ([cd0635e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/cd0635e94f98499f9f5fc24a7fd4b93efe7dfc38))
+
+## [3.16.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.16.0...v3.16.1) (2022-12-11)
+
+
+### Bug Fixes
+
+* **FooterLegend:** change description types to ReactNode ([#62](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/62)) ([d24136e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d24136ecb6b0c5239b68723e8f92a4822aa7b590))
+
+# [3.16.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.15.0...v3.16.0) (2022-12-11)
+
+
+### Features
+
+* **Marquee:** Add Marquee component ([#63](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/63)) ([925ea8c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/925ea8c3ceaaf6ff2f79b8808908a9b144a4fcff))
+
+# [3.15.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.14.0...v3.15.0) (2022-12-11)
+
+
+### Features
+
+* **Focusable:** add noFocusRing prop type ([#65](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/65)) ([cc29dda](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/cc29ddaf578e21ab2abe1cd266f1d15debee0637))
+
+# [3.14.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.13.0...v3.14.0) (2022-12-10)
+
+
+### Features
+
+* **toast:** add showToast/playSound to ToastData ([#64](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/64)) ([7ba1229](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7ba1229a4e24fea587b96dc8b078200faf45ddee))
+
+# [3.13.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.12.0...v3.13.0) (2022-11-29)
+
+
+### Features
+
+* **Menu:** add more missing props ([#60](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/60)) [CI SKIP] ([678ba21](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/678ba216f1e194986b0c391398e6f73536cd0102))
+
+# [3.12.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.11.1...v3.12.0) (2022-11-28)
+
+
+### Features
+
+* **MenuItem:** add missing props ([#59](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/59)) ([c84a091](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c84a09146935f0942265b7a1e4aadc40e8cf22dc))
+
+## [3.11.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.11.0...v3.11.1) (2022-11-20)
+
+
+### Bug Fixes
+
+* **Footer:** add types for ActionDescriptionMap ([2ec9519](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2ec9519b7d6d1cc0d232853ce05a773953b37c5a))
+
+# [3.11.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.10.0...v3.11.0) (2022-11-18)
+
+
+### Features
+
+* **classes:** add "appDetailsClasses" ([#55](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/55)) ([ed98d14](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/ed98d14b37cf09500afd88e7c8e9c03749119b38))
+
+# [3.10.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.9.0...v3.10.0) (2022-11-18)
+
+
+### Features
+
+* **classes:** add appDetailsHeaderClasses ([#54](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/54)) ([3229162](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/32291620b403f8b65cf378343454a3f2668fb6ee))
+
+# [3.9.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.8.0...v3.9.0) (2022-11-16)
+
+
+### Features
+
+* **Dialog:** add "focusable" button prop ([#51](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/51)) ([e167ef5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e167ef5a138a3edc004db2365334f8455c177132))
+
+# [3.8.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.14...v3.8.0) (2022-11-11)
+
+
+### Features
+
+* **routerhook:** add global components support ([215156d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/215156d31688faac9028627379e5a3ac4d64ec46))
+
+## [3.7.14](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.13...v3.7.14) (2022-11-05)
+
+
+### Bug Fixes
+
+* **Menu:** fix on Steam beta ([82768e0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/82768e0415d084deb2af39beb3f9273a83e819de))
+* **Modal:** fix on Steam beta ([e44187f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e44187fe4b9d3e3c9e94490669591599dc5246ba))
+
+## [3.7.13](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.12...v3.7.13) (2022-11-02)
+
+
+### Bug Fixes
+
+* **useQuickAccessVisible:** make it work in beta ([#49](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/49)) ([e1f64a3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e1f64a38de85073e5cea74ecea4b9cde9a783ecc))
+
 ## [3.7.12](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.11...v3.7.12) (2022-10-29)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.7.12",
+  "version": "3.20.6",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,8 +9,7 @@
   "scripts": {
     "build": "shx rm -rf dist && tsc -b",
     "dev": "tsc -b -w",
-    "docs": "typedoc --tsconfig ./tsconfig.json src/**/*",
-    "prepack": "npm run build",
+    "docs": "typedoc --theme wiki-js --tsconfig ./tsconfig.json src/**/*",
     "test": "echo 'No tests for now!'",
     "prepare": "husky install",
     "commit": "git-cz"
@@ -60,11 +59,11 @@
     "semantic-release": "^19.0.3",
     "shx": "^0.3.4",
     "ts-jest": "^27.1.4",
-    "typedoc": "^0.23.15",
-    "typedoc-plugin-markdown": "^3.13.6",
+    "typedoc": "^0.23.24",
     "typedoc-plugin-mdn-links": "^2.0.0",
     "typedoc-plugin-missing-exports": "^1.0.0",
-    "typescript": "^4.6.3"
+    "typedoc-wikijs-theme": "^1.0.5",
+    "typescript": "^4.9.5"
   },
   "pnpm": {
     "peerDependencyRules": {

src/custom-components/ReorderableList.tsx

@@ -0,0 +1,183 @@
+import { Fragment, JSXElementConstructor, ReactElement, useEffect, useState } from 'react';
+
+import { Field, FieldProps, Focusable, GamepadButton } from '../deck-components';
+
+/**
+ * A ReorderableList entry of type <T>.
+ * @param label The name of this entry in the list.
+ * @param data Optional data to connect to this entry.
+ * @param position The position of this entry in the list.
+ */
+export type ReorderableEntry<T> = {
+  label: string;
+  data?: T;
+  position: number;
+};
+
+/**
+ * Properties for a ReorderableList component of type <T>.
+ *
+ * @param animate If the list should animate. @default true
+ */
+export type ReorderableListProps<T> = {
+  entries: ReorderableEntry<T>[];
+  onSave: (entries: ReorderableEntry<T>[]) => void;
+  interactables?: JSXElementConstructor<{ entry: ReorderableEntry<T> }>;
+  fieldProps?: FieldProps;
+  animate?: boolean;
+};
+
+/**
+ * A component for creating reorderable lists.
+ *
+ * See an example implementation {@linkplain https://github.com/Tormak9970/Component-Testing-Plugin/blob/main/src/testing-window/ReorderableListTest.tsx here}.
+ */
+export function ReorderableList<T>(props: ReorderableListProps<T>) {
+  if (props.animate === undefined) props.animate = true;
+  const [entryList, setEntryList] = useState<ReorderableEntry<T>[]>(
+    props.entries.sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position),
+  );
+  const [reorderEnabled, setReorderEnabled] = useState<boolean>(false);
+
+  useEffect(() => {
+    setEntryList(props.entries.sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position));
+  }, [props.entries]);
+
+  function toggleReorderEnabled(): void {
+    let newReorderValue = !reorderEnabled;
+    setReorderEnabled(newReorderValue);
+
+    if (!newReorderValue) {
+      props.onSave(entryList);
+    }
+  }
+
+  function saveOnBackout(e: Event) {
+    const event = e as CustomEvent;
+    if (event.detail.button == GamepadButton.CANCEL && reorderEnabled) {
+      setReorderEnabled(!reorderEnabled);
+      props.onSave(entryList);
+    }
+  }
+
+  return (
+    <Fragment>
+      <div
+        style={{
+          width: 'inherit',
+          height: 'inherit',
+          flex: '1 1 1px',
+          scrollPadding: '48px 0px',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-start',
+          alignContent: 'stretch',
+        }}
+      >
+        <Focusable
+          onSecondaryButton={toggleReorderEnabled}
+          onSecondaryActionDescription={reorderEnabled ? 'Save Order' : 'Reorder'}
+          onClick={toggleReorderEnabled}
+          onButtonDown={saveOnBackout}
+        >
+          {entryList.map((entry: ReorderableEntry<T>) => (
+            <ReorderableItem
+              animate={props.animate!}
+              listData={entryList}
+              entryData={entry}
+              reorderEntryFunc={setEntryList}
+              reorderEnabled={reorderEnabled}
+              fieldProps={props.fieldProps}
+            >
+              {props.interactables ? <props.interactables entry={entry} /> : null}
+            </ReorderableItem>
+          ))}
+        </Focusable>
+      </div>
+    </Fragment>
+  );
+}
+
+/**
+ * Properties for a ReorderableItem component of type <T>
+ */
+export type ReorderableListEntryProps<T> = {
+  fieldProps?: FieldProps;
+  listData: ReorderableEntry<T>[];
+  entryData: ReorderableEntry<T>;
+  reorderEntryFunc: CallableFunction;
+  reorderEnabled: boolean;
+  animate: boolean;
+  children: ReactElement | null;
+};
+
+function ReorderableItem<T>(props: ReorderableListEntryProps<T>) {
+  const [isSelected, _setIsSelected] = useState<boolean>(false);
+  const [isSelectedLastFrame, setIsSelectedLastFrame] = useState<boolean>(false);
+  const listEntries = props.listData;
+
+  function onReorder(e: Event): void {
+    if (!props.reorderEnabled) return;
+
+    const event = e as CustomEvent;
+    const currentIdx = listEntries.findIndex((entryData: ReorderableEntry<T>) => entryData === props.entryData);
+    const currentIdxValue = listEntries[currentIdx];
+    if (currentIdx < 0) return;
+
+    let targetPosition: number = -1;
+    if (event.detail.button == GamepadButton.DIR_DOWN) {
+      targetPosition = currentIdxValue.position + 1;
+    } else if (event.detail.button == GamepadButton.DIR_UP) {
+      targetPosition = currentIdxValue.position - 1;
+    }
+
+    if (targetPosition >= listEntries.length || targetPosition < 0) return;
+
+    let otherToUpdate = listEntries.find((entryData: ReorderableEntry<T>) => entryData.position === targetPosition);
+    if (!otherToUpdate) return;
+
+    let currentPosition = currentIdxValue.position;
+
+    currentIdxValue.position = otherToUpdate.position;
+    otherToUpdate.position = currentPosition;
+
+    props.reorderEntryFunc(
+      [...listEntries].sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position),
+    );
+  }
+
+  async function setIsSelected(val: boolean) {
+    _setIsSelected(val);
+    // Wait 3 frames, then set. I have no idea why, but if you dont wait long enough it doesn't work.
+    for (let i = 0; i < 3; i++) await new Promise((res) => requestAnimationFrame(res));
+    setIsSelectedLastFrame(val);
+  }
+
+  return (
+    <div
+      style={
+        props.animate
+          ? {
+              transition:
+                isSelected || isSelectedLastFrame
+                  ? ''
+                  : 'transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1)', // easeOutQuart https://easings.net/#easeOutQuart
+              transform: !props.reorderEnabled || isSelected ? 'scale(1)' : 'scale(0.9)',
+              opacity: !props.reorderEnabled || isSelected ? 1 : 0.7,
+            }
+          : {}
+      }
+    >
+      <Field
+        label={props.entryData.label}
+        {...props.fieldProps}
+        focusable={!props.children}
+        onButtonDown={onReorder}
+        onGamepadBlur={() => setIsSelected(false)}
+        onGamepadFocus={() => setIsSelected(true)}
+      >
+        <Focusable style={{ display: 'flex', width: '100%', position: 'relative' }}>{props.children}</Focusable>
+      </Field>
+    </div>
+  );
+}

src/custom-components/SuspensefulImage.tsx

@@ -13,6 +13,8 @@ export const SuspensefulImage: FC<SuspensefulImageProps> = (props) => {
   const [error, setError] = useState(false);
 
   useEffect(() => {
+    setLoading(true);
+    setError(false);
     const img = new Image();
     img.src = props.src || '';
     img.addEventListener('load', () => {
@@ -21,7 +23,7 @@ export const SuspensefulImage: FC<SuspensefulImageProps> = (props) => {
     img.addEventListener('error', () => {
       setError(true);
     });
-  }, []);
+  }, [props.src]);
 
   return loading ? (
     <div

src/custom-components/index.ts

@@ -1,2 +1,3 @@
 export * from './SuspensefulImage';
 export * from './ColorPickerModal';
+export * from './ReorderableList';

src/custom-hooks/index.ts

@@ -1 +1 @@
-export * from './usequickaccessvisible';
+export * from './useQuickAccessVisible';

src/custom-hooks/useQuickAccessVisible.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
+import { getGamepadNavigationTrees } from '../utils';
 
-declare global {
-  var FocusNavController: any;
+function getQuickAccessWindow(): Window | null {
+  const navTrees = getGamepadNavigationTrees();
+  return navTrees.find((tree: any) => tree?.id === 'QuickAccess-NA')?.m_Root?.m_element?.ownerDocument.defaultView ?? null;
 }
 
 /**
@@ -42,12 +44,10 @@ declare global {
  * };
  */
 export function useQuickAccessVisible(): boolean {
-  // Assuming that the component is rendered in QAM already, so true by default...
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(getQuickAccessWindow()?.document.hasFocus() ?? true);
 
   useEffect(() => {
-    const quickAccessWindow: Window | null =
-      FocusNavController?.GetGamepadNavTreeByID('QuickAccess-NA')?.m_Root?.m_element?.ownerDocument.defaultView ?? null;
+    const quickAccessWindow = getQuickAccessWindow();
     if (quickAccessWindow === null) {
       console.error('Could not get window of QuickAccess menu!');
       return;

src/deck-components/ButtonItem.tsx

@@ -7,9 +7,10 @@ export interface ButtonItemProps extends ItemProps {
   onClick?(e: MouseEvent): void;
   disabled?: boolean;
 }
-
-export const ButtonItem = Object.values(CommonUIModule).find(
-  (mod: any) =>
-    mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
-    mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
-) as FC<ButtonItemProps>;
+export const ButtonItem =
+  CommonUIModule.ButtonField ||
+  (Object.values(CommonUIModule).find(
+    (mod: any) =>
+      mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
+      mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+  ) as FC<ButtonItemProps>);

src/deck-components/ControlsList.tsx

@@ -0,0 +1,17 @@
+import { findModuleChild } from '../webpack';
+import { FC } from 'react';
+
+export interface ControlsListProps {
+  alignItems?: 'left' | 'right' | 'center';
+  spacing?: 'standard' | 'extra';
+}
+
+export const ControlsList: FC<ControlsListProps> = findModuleChild((m) => {
+  if (typeof m !== 'object') return;
+  for (const prop in m) {
+    if (m[prop]?.toString && m[prop].toString().includes('().ControlsListChild') && m[prop].toString().includes('().ControlsListOuterPanel')) {
+      return m[prop];
+    }
+  }
+  return;
+});

src/deck-components/Dialog.tsx

@@ -9,8 +9,35 @@ export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
 }
 
 export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps {
+  /**
+   * Enables/disables the focus around the button.
+   * 
+   * @note
+   * Default value depends on context, so setting it to `false` will enable it.
+   */
   noFocusRing?: boolean;
+
+  /**
+   * Disables the button - assigned `on*` methods will not be invoked if clicked.
+   * 
+   * @note
+   * Depending on where it is, it might still get focus. In such case it can be 
+   * partially disabled separately.
+   * 
+   * @see focusable.
+   */
   disabled?: boolean;
+
+  /**
+   * Enables/disables the navigation based focus on button - you won't be able to navigate to
+   * it via the gamepad or keyboard. 
+   * 
+   * @note
+   * If set to `false`, it still can be clicked and **WILL** become focused until navigated away.
+   * Depending on the context of where the button is, even a disabled button can focused.
+   */
+  focusable?: boolean;
+  
   onClick?(e: MouseEvent): void;
   onPointerDown?(e: PointerEvent): void;
   onPointerUp?(e: PointerEvent): void;

src/deck-components/DialogCheckbox.tsx

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from 'react';
+
+import { findModule } from '../webpack';
+import { DialogCommonProps } from './Dialog';
+import { FooterLegendProps } from './FooterLegend';
+
+export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProps {
+  onChange?(checked: boolean): void;
+  label?: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+  tooltip?: string;
+  color?: string;
+  highlightColor?: string;
+  bottomSeparator?: 'standard' | 'thick' | 'none';
+  controlled?: boolean;
+  checked?: boolean;
+  onClick?(evt: Event): void;
+}
+
+export const DialogCheckbox = Object.values(findModule((m: any) => {
+  if (typeof m !== 'object') return false;
+  for (const prop in m) {
+    if (m[prop]?.prototype?.GetPanelElementProps) return true;
+  }
+  return false;
+})).find((m: any) =>
+  m.contextType &&
+  m.prototype?.render.toString().includes('fallback:') &&
+  m?.prototype?.SetChecked &&
+  m?.prototype?.Toggle &&
+  m?.prototype?.GetPanelElementProps
+) as FC<DialogCheckboxProps>;

src/deck-components/Focusable.tsx

@@ -8,6 +8,7 @@ export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLe
   'flow-children'?: string;
   focusClassName?: string;
   focusWithinClassName?: string;
+  noFocusRing?: boolean;
   onActivate?: (e: CustomEvent) => void;
   onCancel?: (e: CustomEvent) => void;
 }

src/deck-components/FooterLegend.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export enum GamepadButton {
   INVALID,
   OK,
@@ -29,30 +31,29 @@ export enum GamepadButton {
   STEAM_GUIDE,
   STEAM_QUICK_MENU,
 }
-
-export enum NavEntryPositionPreferences {
+export declare enum NavEntryPositionPreferences {
   FIRST,
   LAST,
   MAINTAIN_X,
   MAINTAIN_Y,
-  PREFERRED_CHILD,
+  PREFERRED_CHILD
 }
-
 export interface GamepadEventDetail {
   button: number;
   is_repeat?: boolean;
   source: number;
 }
-
-export type GamepadEvent = CustomEvent<GamepadEventDetail>;
-
+export declare type ActionDescriptionMap = {
+  [key in GamepadButton]?: ReactNode
+}
+export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
 export interface FooterLegendProps {
-  actionDescriptionMap?: unknown;
-  onOKActionDescription?: string;
-  onCancelActionDescription?: string;
-  onSecondaryActionDescription?: string;
-  onOptionsActionDescription?: string;
-  onMenuActionDescription?: string;
+  actionDescriptionMap?: ActionDescriptionMap;
+  onOKActionDescription?: ReactNode;
+  onCancelActionDescription?: ReactNode;
+  onSecondaryActionDescription?: ReactNode;
+  onOptionsActionDescription?: ReactNode;
+  onMenuActionDescription?: ReactNode;
   onButtonDown?: (evt: GamepadEvent) => void;
   onButtonUp?: (evt: GamepadEvent) => void;
   onOKButton?: (evt: GamepadEvent) => void;

src/deck-components/Item.tsx

@@ -8,4 +8,5 @@ export interface ItemProps {
   bottomSeparator?: 'standard' | 'thick' | 'none';
   indentLevel?: number;
   tooltip?: string;
+  highlightOnFocus?: boolean;
 }

src/deck-components/Marquee.tsx

@@ -0,0 +1,26 @@
+import { CSSProperties, FC } from 'react';
+
+import { findModuleChild } from '../webpack';
+
+export interface MarqueeProps {
+  play?: boolean;
+  direction?: 'left' | 'right';
+  speed?: number;
+  delay?: number;
+  fadeLength?: number;
+  center?: boolean;
+  resetOnPause?: boolean;
+  style?: CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const Marquee: FC<MarqueeProps> = findModuleChild((m) => {
+  if (typeof m !== 'object') return;
+  for (const prop in m) {
+    if (m[prop]?.toString && m[prop].toString().includes('.Marquee') && m[prop].toString().includes('--fade-length')) {
+      return m[prop];
+    }
+  }
+  return;
+});

src/deck-components/Menu.tsx

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from 'react';
 
+import { fakeRenderComponent } from '../utils';
 import { findModuleChild } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
 
 export const showContextMenu: (children: ReactNode, parent?: EventTarget) => void = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
@@ -11,7 +13,7 @@ export const showContextMenu: (children: ReactNode, parent?: EventTarget) => voi
   }
 });
 
-export interface MenuProps {
+export interface MenuProps extends FooterLegendProps {
   label: string;
   onCancel?(): void;
   cancelText?: string;
@@ -38,15 +40,26 @@ export const MenuGroup: FC<MenuGroupProps> = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
 
   for (let prop in m) {
-    if (m[prop]?.prototype?.RenderSubMenu && m[prop]?.prototype?.ShowSubMenu) {
+    if (
+      (m[prop]?.toString()?.includes('bInGamepadUI:') &&
+        fakeRenderComponent(() => m[prop]())?.type?.prototype?.RenderSubMenu) ||
+      (m[prop]?.prototype?.RenderSubMenu && m[prop]?.prototype?.ShowSubMenu)
+    ) {
       return m[prop];
     }
   }
 });
 
-export interface MenuItemProps {
-  onSelected?(): void;
+export interface MenuItemProps extends FooterLegendProps {
+  bInteractableItem?: boolean;
+  onClick?(evt: Event): void;
+  onSelected?(evt: Event): void;
+  onMouseEnter?(evt: MouseEvent): void;
+  onMoveRight?(): void;
+  selected?: boolean;
   disabled?: boolean;
+  bPlayAudio?: boolean;
+  tone?: 'positive' | 'emphasis' | 'destructive';
   children?: ReactNode;
 }
 
@@ -54,7 +67,10 @@ export const MenuItem: FC<MenuItemProps> = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
 
   for (let prop in m) {
-    if (m[prop]?.prototype?.OnOKButton && m[prop]?.prototype?.OnMouseEnter) {
+    if (
+      m[prop]?.render?.toString()?.includes('bPlayAudio:') ||
+      (m[prop]?.prototype?.OnOKButton && m[prop]?.prototype?.OnMouseEnter)
+    ) {
       return m[prop];
     }
   }

src/deck-components/Modal.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 
 import { findSP } from '../utils';
-import { findModuleChild } from '../webpack';
+import { findModule, findModuleChild } from '../webpack';
 
 // All of the popout options + strTitle are related. Proper usage is not yet known...
 export interface ShowModalProps {
@@ -29,7 +29,30 @@ export interface ShowModalResult {
   Update: (modal: ReactNode) => void;
 }
 
-const showModalRaw: (modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => Promise<ShowModalResult> =
+const showModalRaw:
+  | ((
+      modal: ReactNode,
+      parent?: EventTarget,
+      title?: string,
+      props?: ShowModalProps,
+      unknown1?: unknown,
+      hideActions?: { bHideActions?: boolean },
+      modalManager?: unknown,
+    ) => ShowModalResult)
+  | void = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (
+      typeof m[prop] === 'function' &&
+      m[prop].toString().includes('props.bDisableBackgroundDismiss') &&
+      !m[prop]?.prototype?.Cancel
+    ) {
+      return m[prop];
+    }
+  }
+});
+
+const oldShowModalRaw: ((modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => ShowModalResult) | void =
   findModuleChild((m) => {
     if (typeof m !== 'object') return undefined;
     for (let prop in m) {
@@ -39,8 +62,23 @@ const showModalRaw: (modal: ReactNode, parent?: EventTarget, props?: ShowModalPr
     }
   });
 
-export const showModal = (modal: ReactNode, parent?: EventTarget, props?: ShowModalProps): Promise<ShowModalResult> => {
-  return showModalRaw(modal, parent || findSP(), props);
+export const showModal = (
+  modal: ReactNode,
+  parent?: EventTarget,
+  props: ShowModalProps = {
+    strTitle: 'Decky Dialog',
+    bHideMainWindowForPopouts: false,
+  },
+): ShowModalResult => {
+  if (showModalRaw) {
+    return showModalRaw(modal, parent || findSP(), props.strTitle, props, undefined, {
+      bHideActions: props.bHideActionIcons,
+    });
+  } else if (oldShowModalRaw) {
+    return oldShowModalRaw(modal, parent || findSP(), props);
+  } else {
+    throw new Error('[DFL:Modals]: Cannot find showModal function');
+  }
 };
 
 export interface ModalRootProps {
@@ -79,11 +117,40 @@ export const ConfirmModal = findModuleChild((m) => {
   }
 }) as FC<ConfirmModalProps>;
 
-export const ModalRoot = findModuleChild((m) => {
-  if (typeof m !== 'object') return undefined;
-  for (let prop in m) {
-    if (m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
-      return m[prop];
+// new as of december 2022 on beta
+export const ModalRoot = (Object.values(
+  findModule((m: any) => {
+    if (typeof m !== 'object') return false;
+
+    for (let prop in m) {
+      if (m[prop]?.m_mapModalManager && Object.values(m)?.find((x: any) => x?.type)) {
+        return true;
+      }
     }
-  }
-}) as FC<ModalRootProps>;
+
+    return false;
+  }) || {},
+)?.find((x: any) => x?.type?.toString()?.includes('((function(){')) ||
+  // before december 2022 beta
+  Object.values(
+    findModule((m: any) => {
+      if (typeof m !== 'object') return false;
+
+      for (let prop in m) {
+        if (m[prop]?.toString()?.includes('"ModalManager","DialogWrapper"')) {
+          return true;
+        }
+      }
+
+      return false;
+    }) || {},
+  )?.find((x: any) => x?.type?.toString()?.includes('((function(){')) ||
+  // old
+  findModuleChild((m) => {
+    if (typeof m !== 'object') return undefined;
+    for (let prop in m) {
+      if (m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
+        return m[prop];
+      }
+    }
+  })) as FC<ModalRootProps>;

src/deck-components/Panel.tsx

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { findModuleChild } from '../webpack';
 
 export interface PanelSectionProps {
   title?: string;
   spinner?: boolean;
+  children?: ReactNode;
 }
 
 const [panelSection, mod] = findModuleChild((mod: any) => {
@@ -18,6 +19,10 @@ const [panelSection, mod] = findModuleChild((mod: any) => {
 
 export const PanelSection = panelSection as FC<PanelSectionProps>;
 
-export const PanelSectionRow = Object.values(mod).filter(
-  (exp: any) => !exp?.toString()?.includes('.PanelSection'),
-)[0] as FC;
+export interface PanelSectionRowProps {
+  children?: ReactNode;
+}
+// New as of Feb 22 2023 Beta || Old
+export const PanelSectionRow =
+  mod.PanelSectionRow ||
+  (Object.values(mod).filter((exp: any) => !exp?.toString()?.includes('.PanelSection'))[0] as FC<PanelSectionRowProps>);

src/deck-components/Router.tsx

@@ -1,3 +1,4 @@
+import { sleep } from '../utils';
 import { Module, findModuleChild } from '../webpack';
 
 export enum SideMenu {
@@ -14,7 +15,8 @@ export enum QuickAccessTab {
   Settings,
   Perf,
   Help,
-  Decky,
+  Music,
+  Decky = 999,
 }
 
 export enum DisplayStatus {
@@ -63,28 +65,37 @@ export type AppOverview = {
   sort_as: string;
 };
 
-export interface Router {
-  CloseSideMenus(): void;
-  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
-  GetQuickAccessTab(): QuickAccessTab;
-  Navigate(path: string): void;
-  NavigateBackOrOpenMenu(): void;
-  NavigateToAppProperties(): void;
-  NavigateToBugForum(): void;
-  NavigateToExternalWeb(url: string): void;
-  NavigateToHelp(): void;
-  NavigateToInvites(): void;
-  NavigateToRunningApp(replace?: boolean): void;
-  NavigateToStorage(): void;
-  NavigateToStore(): void;
-  NavigateToStoreApp(appId: number | string): void;
-  NavigateToStoreFreeToPlay(): void;
-  NavigateToStoreManual(): void;
-  NavigateToStoreNewReleases(): void;
-  NavigateToStoreOnSale(): void;
-  ToggleSideMenu(sideMenu: SideMenu): void;
-  CloseSideMenus(): void;
+export interface MenuStore {
   OpenSideMenu(sideMenu: SideMenu): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  OpenMainMenu(): void;
+}
+
+export interface WindowRouter {
+  BrowserWindow: Window;
+  MenuStore: MenuStore;
+  Navigate(path: string): void;
+  NavigateToChat(): void;
+  NavigateToSteamWeb(url: string): void;
+  NavigateBack(): void;
+}
+
+export interface WindowStore {
+  GamepadUIMainWindowInstance?: WindowRouter; // Current
+  SteamUIWindows: WindowRouter[];
+  OverlayWindows: WindowRouter[]; // Used by desktop GamepadUI
+}
+
+export interface Router {
+  WindowStore?: WindowStore;
+  CloseSideMenus(): void;
+  Navigate(path: string): void;
+  NavigateToAppProperties(): void;
+  NavigateToExternalWeb(url: string): void;
+  NavigateToInvites(): void;
+  NavigateToChat(): void;
+  NavigateToLibraryTab(): void;
+  NavigateToLayoutPreview(e: unknown): void;
   OpenPowerMenu(unknown?: any): void;
   get RunningApps(): AppOverview[];
   get MainRunningApp(): AppOverview | undefined;
@@ -96,3 +107,80 @@ export const Router = findModuleChild((m: Module) => {
     if (m[prop]?.Navigate && m[prop]?.NavigationManager) return m[prop];
   }
 }) as Router;
+
+export interface Navigation {
+  Navigate(path: string): void;
+  NavigateBack(): void;
+  NavigateToAppProperties(): void;
+  NavigateToExternalWeb(url: string): void;
+  NavigateToInvites(): void;
+  NavigateToChat(): void;
+  NavigateToLibraryTab(): void;
+  NavigateToLayoutPreview(e: unknown): void;
+  NavigateToSteamWeb(url: string): void;
+  OpenSideMenu(sideMenu: SideMenu): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  OpenMainMenu(): void;
+  OpenPowerMenu(unknown?: any): void;
+  CloseSideMenus(): void;
+}
+
+export let Navigation = {} as Navigation;
+
+try {
+  (async () => {
+    let InternalNavigators: any = {};
+    if (!Router.NavigateToAppProperties || (Router as unknown as any).deckyShim) {
+      function initInternalNavigators() {
+        try {
+          InternalNavigators = findModuleChild((m: any) => {
+            if (typeof m !== 'object') return undefined;
+            for (let prop in m) {
+              if (m[prop]?.GetNavigator) {
+                return m[prop];
+              }
+            }
+          })?.GetNavigator();
+        } catch (e) {
+          console.error('[DFL:Router]: Failed to init internal navigators, trying again');
+        }
+      }
+      initInternalNavigators();
+      while (!InternalNavigators?.AppProperties) {
+        console.log('[DFL:Router]: Trying to init internal navigators again');
+        await sleep(100);
+        initInternalNavigators();
+      }
+    }
+    const newNavigation = {
+      Navigate: Router.Navigate?.bind(Router),
+      NavigateBack: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateBack?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance,
+      ),
+      NavigateToAppProperties: InternalNavigators?.AppProperties || Router.NavigateToAppProperties?.bind(Router),
+      NavigateToExternalWeb: InternalNavigators?.ExternalWeb || Router.NavigateToExternalWeb?.bind(Router),
+      NavigateToInvites: InternalNavigators?.Invites || Router.NavigateToInvites?.bind(Router),
+      NavigateToChat: Router.NavigateToChat?.bind(Router),
+      NavigateToLibraryTab: InternalNavigators?.LibraryTab || Router.NavigateToLibraryTab?.bind(Router),
+      NavigateToLayoutPreview: Router.NavigateToLayoutPreview?.bind(Router),
+      NavigateToSteamWeb: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateToSteamWeb?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance,
+      ),
+      OpenSideMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenSideMenu?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+      ),
+      OpenQuickAccessMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenQuickAccessMenu?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+      ),
+      OpenMainMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenMainMenu?.bind(
+        Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+      ),
+      CloseSideMenus: Router.CloseSideMenus?.bind(Router),
+      OpenPowerMenu: Router.OpenPowerMenu?.bind(Router),
+    } as Navigation;
+
+    Object.assign(Navigation, newNavigation);
+  })();
+} catch (e) {
+  console.error('[DFL:Router]: Error initializing Navigation interface', e);
+}

src/deck-components/SidebarNavigation.tsx

@@ -16,7 +16,7 @@ export interface SidebarNavigationPage {
 
 export interface SidebarNavigationProps {
   title?: string;
-  pages: SidebarNavigationPage[];
+  pages: (SidebarNavigationPage | 'separator')[];
   showTitle?: boolean;
   disableRouteReporting?: boolean;
   page?: string;

src/deck-components/SliderField.tsx

@@ -25,6 +25,7 @@ export interface SliderFieldProps extends ItemProps {
   valueSuffix?: string;
   minimumDpadGranularity?: number;
   onChange?(value: number): void;
+  className?: string;
 }
 
 export const SliderField = Object.values(CommonUIModule).find((mod: any) =>

src/deck-components/SteamClient.ts

@@ -0,0 +1,317 @@
+export interface Apps {
+  RegisterForAppOverviewChanges: any;
+  RegisterForAppDetails: any;
+  RegisterForLocalizationChanges: any;
+  RegisterForWorkshopChanges: any;
+  RegisterForWorkshopItemDownloads: any;
+  GetLibraryBootstrapData: any;
+  RegisterForAchievementChanges: any;
+  GetFriendAchievementsForApp: any;
+  GetMyAchievementsForApp: any;
+  AddUserTagToApps: any;
+  RemoveUserTagFromApps: any;
+  ClearUserTagsOnApps: any;
+  ClearAndSetUserTagsOnApp: any;
+  SetAppHidden: any;
+  ResetHiddenState: any;
+  SetAppLaunchOptions: any;
+  SetAppResolutionOverride: any;
+  SetAppCurrentLanguage: any;
+  SetAppAutoUpdateBehavior: any;
+  SetAppBackgroundDownloadsBehavior: any;
+  ToggleAppFamilyBlockedState: any;
+  ToggleAppSteamCloudEnabled: any;
+  ToggleAppSteamCloudSyncOnSuspendEnabled: any;
+  ToggleOverrideResolutionForInternalDisplay: any;
+  ToggleEnableSteamOverlayForApp: any;
+  ToggleEnableDesktopTheatreForApp: any;
+  BrowseLocalFilesForApp: any;
+  BrowseScreenshotsForApp: any;
+  BrowseScreenshotForApp: any;
+  BackupFilesForApp: any;
+  VerifyFilesForApp: any;
+  CreateDesktopShortcutForApp: any;
+  JoinAppContentBeta: any;
+  JoinAppContentBetaByPassword: any;
+  GetAchievementsInTimeRange: any;
+  GetSubscribedWorkshopItems: any;
+  SubscribeWorkshopItem: any;
+  GetDownloadedWorkshopItems: any;
+  DownloadWorkshopItem: any;
+  SetLocalScreenshotCaption: any;
+  SetLocalScreenshotSpoiler: any;
+  GetDetailsForScreenshotUpload: any;
+  UploadLocalScreenshot: any;
+  DeleteLocalScreenshot: any;
+  GetScreenshotsInTimeRange: any;
+  GetFriendsWhoPlay: any;
+  RequestLegacyCDKeysForApp: any;
+  GetSoundtrackDetails: any;
+  GetStoreTagLocalization: any;
+  GetLaunchOptionsForApp: any;
+  GetResolutionOverrideForApp: any;
+  ScanForShortcuts: any;
+  GetAllShortcuts: any;
+  GetShortcutData: any;
+  AddShortcut: any;
+  RemoveShortcut: any;
+  InstallFlatpakAppAndCreateShortcut: any;
+  ListFlatpakApps: any;
+  UninstallFlatpakApp: any;
+  ShowControllerConfigurator: any;
+  SetThirdPartyControllerConfiguration: any;
+  ToggleAllowDesktopConfiguration: any;
+  SetControllerRumblePreference: any;
+  GetCachedAppDetails: any;
+  SetCachedAppDetails: any;
+  ReportLibraryAssetCacheMiss: any;
+  SaveAchievementProgressCache: any;
+  SetStreamingClientForApp: any;
+  SetCustomArtworkForApp: any;
+  ClearCustomArtworkForApp: any;
+  SetCustomLogoPositionForApp: any;
+  ClearCustomLogoPositionForApp: any;
+  RequestIconDataForApp: any;
+  SpecifyCompatTool: any;
+  GetAvailableCompatTools: any;
+  SetShortcutName: any;
+  SetShortcutExe: any;
+  SetShortcutStartDir: any;
+  SetShortcutLaunchOptions: any;
+  SetShortcutIsVR: any;
+  PromptToChangeShortcut: any;
+  PromptToSelectShortcutIcon: any;
+  InstallApp: any;
+  RunGame: any;
+  VerifyApp: any;
+  StreamGame: any;
+  CancelLaunch: any;
+  TerminateApp: any;
+  UninstallApps: any;
+  ShowStore: any;
+  SetDLCEnabled: any;
+  ContinueGameAction: any;
+  CancelGameAction: any;
+  GetActiveGameActions: any;
+  GetGameActionDetails: any;
+  GetGameActionForApp: any;
+  SkipShaderProcessing: any;
+  MarkEulaAccepted: any;
+  MarkEulaRejected: any;
+  LoadEula: any;
+  GetConflictingFileTimestamps: any;
+  GetCloudPendingRemoteOperations: any;
+  ClearProton: any;
+  RegisterForMarketingMessages: any;
+  FetchMarketingMessages: any;
+  MarkMarketingMessageSeen: any;
+  ReportMarketingMessageSeen: any;
+  RegisterForGameActionStart: any;
+  RegisterForGameActionEnd: any;
+  RegisterForGameActionTaskChange: any;
+  RegisterForGameActionUserRequest: any;
+  RegisterForGameActionShowError: any;
+  RegisterForGameActionShowUI: any;
+  OpenAppSettingsDialog: any;
+}
+
+export interface Window {
+  RegisterForExternalDisplayChanged: any;
+  SetManualDisplayScaleFactor: any;
+  SetAutoDisplayScale: any;
+  Minimize: any;
+  ProcessShuttingDown: any;
+  ToggleMaximize: any;
+  MoveTo: any;
+  ResizeTo: any;
+  SetMinSize: any;
+  SetResizeGrip: any;
+  SetComposition: any;
+  GamescopeBlur: any;
+  BringToFront: any;
+  SetForegroundWindow: any;
+  SetKeyFocus: any;
+  FlashWindow: any;
+  StopFlashWindow: any;
+  ShowWindow: any;
+  HideWindow: any;
+  SetWindowIcon: any;
+  GetWindowDimensions: any;
+  GetWindowRestoreDetails: any;
+  PositionWindowRelative: any;
+  GetMousePositionDetails: any;
+  IsWindowMinimized: any;
+  GetBrowserID: any;
+}
+
+export interface SteamClient {
+  Apps: Apps;
+  Browser: any;
+  BrowserView: any;
+  ClientNotifications: any;
+  Cloud: any;
+  Console: any;
+  Downloads: any;
+  FamilySharing: any;
+  FriendSettings: any;
+  Friends: any;
+  GameSessions: any;
+  Input: any;
+  InstallFolder: any;
+  Installs: any;
+  MachineStorage: any;
+  Messaging: any;
+  Notifications: any;
+  OpenVR: any;
+  Overlay: any;
+  Parental: any;
+  RegisterIFrameNavigatedCallback: any;
+  RemotePlay: any;
+  RoamingStorage: any;
+  Screenshots: any;
+  Settings: any;
+  SharedConnection: any;
+  Stats: any;
+  Storage: any;
+  Streaming: any;
+  System: any;
+  UI: any;
+  URL: any;
+  Updates: any;
+  User: any;
+  WebChat: any;
+  Window: Window;
+}
+
+export interface SteamShortcut {
+  appid: number;
+  data: {
+    bIsApplication: boolean;
+    strAppName: string;
+    strExePath: string;
+    strArguments: string;
+    strShortcutPath: string;
+    strSortAs: string;
+  };
+}
+
+/**
+ * @prop unAppID is not properly set by Steam for non-steam game shortcuts, so it defaults to 0 for them
+ */
+export interface LifetimeNotification {
+  unAppID: number;
+  nInstanceID: number;
+  bRunning: boolean;
+}
+
+export type AppAchievements = {
+  nAchieved: number;
+  nTotal: number;
+  vecAchievedHidden: any[];
+  vecHighlight: any[];
+  vecUnachieved: any[];
+};
+
+export type AppLanguages = {
+  strDisplayName: string;
+  strShortName: string;
+};
+
+export type LogoPinPositions = 'BottomLeft' | 'UpperLeft' | 'CenterCenter' | 'UpperCenter' | 'BottomCenter';
+
+export interface LogoPosition {
+  pinnedPosition: LogoPinPositions;
+  nWidthPct: number;
+  nHeightPct: number;
+};
+
+export interface AppDetails {
+  achievements: AppAchievements;
+  bCanMoveInstallFolder: boolean;
+  bCloudAvailable: boolean;
+  bCloudEnabledForAccount: boolean;
+  bCloudEnabledForApp: boolean;
+  bCloudSyncOnSuspendAvailable: boolean;
+  bCloudSyncOnSuspendEnabled: boolean;
+  bCommunityMarketPresence: boolean;
+  bEnableAllowDesktopConfiguration: boolean;
+  bFreeRemovableLicense: boolean;
+  bHasAllLegacyCDKeys: boolean;
+  bHasAnyLocalContent: boolean;
+  bHasLockedPrivateBetas: boolean;
+  bIsExcludedFromSharing: boolean;
+  bIsSubscribedTo: boolean;
+  bOverlayEnabled: boolean;
+  bOverrideInternalResolution: boolean;
+  bRequiresLegacyCDKey: boolean;
+  bShortcutIsVR: boolean;
+  bShowCDKeyInMenus: boolean;
+  bShowControllerConfig: boolean;
+  bSupportsCDKeyCopyToClipboard: boolean;
+  bVRGameTheatreEnabled: boolean;
+  bWorkshopVisible: boolean;
+  eAppOwnershipFlags: number;
+  eAutoUpdateValue: number;
+  eBackgroundDownloads: number;
+  eCloudSync: number;
+  eControllerRumblePreference: number;
+  eDisplayStatus: number;
+  eEnableThirdPartyControllerConfiguration: number;
+  eSteamInputControllerMask: number;
+  iInstallFolder: number;
+  lDiskUsageBytes: number;
+  lDlcUsageBytes: number;
+  nBuildID: number;
+  nCompatToolPriority: number;
+  nPlaytimeForever: number;
+  nScreenshots: number;
+  rtLastTimePlayed: number;
+  rtLastUpdated: number;
+  rtPurchased: number;
+  selectedLanguage: {
+    strDisplayName: string;
+    strShortName: string;
+  };
+  strCloudBytesAvailable: string;
+  strCloudBytesUsed: string;
+  strCompatToolDisplayName: string;
+  strCompatToolName: string;
+  strDeveloperName: string;
+  strDeveloperURL: string;
+  strDisplayName: string;
+  strExternalSubscriptionURL: string;
+  strFlatpakAppID: string;
+  strHomepageURL: string;
+  strLaunchOptions: string;
+  strManualURL: string;
+  strOwnerSteamID: string;
+  strResolutionOverride: string;
+  strSelectedBeta: string;
+  strShortcutExe: string;
+  strShortcutLaunchOptions: string;
+  strShortcutStartDir: string;
+  strSteamDeckBlogURL: string;
+  unAppID: number;
+  vecBetas: any[];
+  vecDLC: any[];
+  vecDeckCompatTestResults: any[];
+  vecLanguages: AppLanguages[];
+  vecLegacyCDKeys: any[];
+  vecMusicAlbums: any[];
+  vecPlatforms: string[];
+  vecScreenShots: any[];
+  libraryAssets?: {
+    logoPosition?: LogoPosition;
+  };
+}
+
+export interface SteamAppOverview {
+  display_name: string;
+  gameid: string;
+  appid: number;
+  icon_hash: string;
+  third_party_mod?: boolean;
+  selected_clientid?: string;
+  BIsModOrShortcut: () => boolean;
+  BIsShortcut: () => boolean;
+}

src/deck-components/SteamSpinner.tsx

@@ -5,7 +5,9 @@ import { findModuleChild } from '../webpack';
 export const SteamSpinner = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
   for (let prop in m) {
-    if (m[prop]?.toString()?.includes('Steam Spinner') && m[prop].toString().includes('PreloadThrobber'))
+    if (
+      m[prop]?.toString?.()?.includes('Steam Spinner') && m[prop]?.toString?.()?.includes('src')
+    )
       return m[prop];
   }
 }) as FC<SVGAttributes<SVGElement>>;

src/deck-components/ToggleField.tsx

@@ -4,6 +4,7 @@ import { CommonUIModule } from '../webpack';
 import { ItemProps } from './Item';
 
 export interface ToggleFieldProps extends ItemProps {
+  highlightOnFocus?: boolean;
   checked: boolean;
   disabled?: boolean;
   onChange?(checked: boolean): void;

src/deck-components/index.ts

@@ -1,12 +1,15 @@
 export * from './Button';
 export * from './ButtonItem';
 export * from './Carousel';
+export * from './ControlsList';
 export * from './Dialog';
+export * from './DialogCheckbox';
 export * from './Dropdown';
 export * from './Field';
 export * from './Focusable';
 export * from './FocusRing';
 export * from './FooterLegend';
+export * from './Marquee';
 export * from './Menu';
 export * from './Modal';
 export * from './Panel';
@@ -21,3 +24,58 @@ export * from './Tabs';
 export * from './TextField';
 export * from './Toggle';
 export * from './ToggleField';
+export * from './SteamClient';
+
+import { AppDetails, LogoPosition, SteamAppOverview, SteamClient } from './SteamClient';
+
+declare global {
+  var SteamClient: SteamClient;
+
+  interface Window {
+    LocalizationManager: {
+      m_mapTokens: Map<string, string>;
+      m_mapFallbackTokens: Map<string, string>;
+      m_rgLocalesToUse: string[];
+    };
+    App: {
+      m_CurrentUser: {
+        bIsLimited: boolean;
+        bIsOfflineMode: boolean;
+        bSupportAlertActive: boolean;
+        bCanInviteFriends: boolean;
+        NotificationCounts: {
+          comments: number;
+          inventory_items: number;
+          invites: number;
+          gifts: number;
+          offline_messages: number;
+          trade_offers: number;
+          async_game_updates: number;
+          moderator_messages: number;
+          help_request_replies: number;
+        };
+        strAccountBalance: string;
+        strAccountName: string;
+        strSteamID: string;
+      };
+    };
+    appStore: {
+      GetAppOverviewByAppID: (appId: number) => SteamAppOverview | null;
+      GetCustomVerticalCapsuleURLs: (app: SteamAppOverview) => string[];
+      GetCustomLandcapeImageURLs: (app: SteamAppOverview) => string[];
+      GetCustomHeroImageURLs: (app: SteamAppOverview) => string[];
+      GetCustomLogoImageURLs: (app: SteamAppOverview) => string[];
+      GetLandscapeImageURLForApp: (app: SteamAppOverview) => string;
+      GetVerticalCapsuleURLForApp: (app: SteamAppOverview) => string;
+      GetCachedLandscapeImageURLForApp: (app: SteamAppOverview) => string;
+      GetCachedVerticalImageURLForApp: (app: SteamAppOverview) => string;
+      GetPregeneratedVerticalCapsuleForApp: (app: SteamAppOverview) => string;
+      GetIconURLForApp: (app: SteamAppOverview) => string;
+    };
+    appDetailsStore: {
+      GetAppDetails: (appId: number) => AppDetails | null;
+      GetCustomLogoPosition: (app: SteamAppOverview) => LogoPosition | null;
+      SaveCustomLogoPosition: (app: SteamAppOverview, logoPositions: LogoPosition) => any;
+    };
+  }
+}

src/deck-components/static-classes.ts

@@ -349,6 +349,98 @@ type GamepadSliderClasses = Record<
   string
 >;
 
+type AppDetailsHeaderClasses = Record<
+  | 'AddBoxSizer'
+  | 'Background'
+  | 'Bottom'
+  | 'BottomCenter'
+  | 'BottomLeft'
+  | 'BottomRight'
+  | 'BoxSizer'
+  | 'BoxSizerButtonContainer'
+  | 'BoxSizerContainer'
+  | 'BoxSizerDelete'
+  | 'BoxSizerDragBox'
+  | 'BoxSizerEdge'
+  | 'BoxSizerGridBox'
+  | 'BoxSizerInfo'
+  | 'BoxSizerSettings'
+  | 'BoxSizerValidRegion'
+  | 'CenterCenter'
+  | 'DialogButton'
+  | 'EdgeDown'
+  | 'FallbackArt'
+  | 'Features'
+  | 'FullscreenEnterActive'
+  | 'FullscreenEnterDone'
+  | 'FullscreenEnterStart'
+  | 'FullscreenExitActive'
+  | 'FullscreenExitDone'
+  | 'FullscreenExitStart'
+  | 'HeaderBackgroundImage'
+  | 'ImgBlur'
+  | 'ImgBlurBackdrop'
+  | 'ImgContainer'
+  | 'ImgSrc'
+  | 'Left'
+  | 'Loaded'
+  | 'Middle'
+  | 'NoArt'
+  | 'PinBox'
+  | 'Right'
+  | 'SVGTitle'
+  | 'SaveBoxSizer'
+  | 'TextNameSpace'
+  | 'TitleImageContainer'
+  | 'TitleLogo'
+  | 'TitleSection'
+  | 'Top'
+  | 'TopCapsule'
+  | 'TopGradient'
+  | 'TopLeft'
+  | 'TopRight'
+  | 'UpperCenter'
+  | 'UpperLeft'
+  | 'duration-app-launch',
+  string
+>;
+
+type AppDetailsClasses = Record<
+  | 'BreakNarrow'
+  | 'BreakShort'
+  | 'BreakTall'
+  | 'BreakUltraWide'
+  | 'BreakWide'
+  | 'Container'
+  | 'GamepadUIBreakNarrow'
+  | 'GamepadUIBreakShort'
+  | 'GamepadUIBreakWide'
+  | 'Glassy'
+  | 'Header'
+  | 'HeaderLoaded'
+  | 'InnerContainer'
+  | 'ItemFocusAnim-darkGrey'
+  | 'ItemFocusAnim-darkerGrey'
+  | 'ItemFocusAnim-darkerGrey-nocolor'
+  | 'ItemFocusAnim-green'
+  | 'ItemFocusAnim-grey'
+  | 'ItemFocusAnimBorder-darkGrey'
+  | 'PlayBar'
+  | 'PreventScrolling'
+  | 'RightBreakNarrow'
+  | 'RightBreakUltraNarrow'
+  | 'RightBreakUltraWide'
+  | 'RightBreakWide'
+  | 'ScrollContainer'
+  | 'ShowPlayBar'
+  | 'Throbber'
+  | 'duration-app-launch'
+  | 'fadein'
+  | 'focusAnimation'
+  | 'hoverAnimation',
+  string
+>;
+
 export const quickAccessMenuClasses: QuickAccessMenuClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.Title?.includes('quickaccessmenu'),
 );
@@ -378,3 +470,9 @@ export const playSectionClasses: PlaySectionClasses = findModule(
 export const gamepadSliderClasses: GamepadSliderClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.SliderControlPanelGroup?.includes('gamepadslider'),
 );
+export const appDetailsHeaderClasses: AppDetailsHeaderClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.TopCapsule?.includes('sharedappdetailsheader'),
+);
+export const appDetailsClasses: AppDetailsClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.HeaderLoaded?.includes('appdetails_'),
+);

src/plugin.tsx

@@ -26,8 +26,10 @@ export type RoutePatch = (route: RouteProps) => RouteProps;
 export interface RouterHook {
   addRoute(path: string, component: ComponentType, props?: Omit<RouteProps, 'path' | 'children'>): void;
   addPatch(path: string, patch: RoutePatch): RoutePatch;
-  removePatch(path: string, patch: RoutePatch): void;
+  addGlobalComponent(name: string, component: ComponentType): void;
   removeRoute(path: string): void;
+  removePatch(path: string, patch: RoutePatch): void;
+  removeGlobalComponent(name: string): void;
 }
 
 export interface ToastData {
@@ -40,6 +42,10 @@ export interface ToastData {
   contentClassName?: string;
   duration?: number;
   critical?: boolean;
+  eType?: number;
+  sound?: number;
+  playSound?: boolean;
+  showToast?: boolean;
 }
 
 export interface Toaster {

src/utils/index.ts

@@ -1,6 +1,11 @@
 export * from './patcher';
 export * from './react';
 
+declare global {
+  var FocusNavController: any;
+  var GamepadNavTree: any;
+}
+
 export function joinClassNames(...classes: string[]): string {
   return classes.join(' ');
 }
@@ -16,6 +21,22 @@ export function findSP(): Window {
   // old (SP as host)
   if (document.title == 'SP') return window;
   // new (SP as popup)
-  return FocusNavController.m_ActiveContext.m_rgGamepadNavigationTrees.find((x: any) => x.m_ID == 'root_1_').Root
-    .Element.ownerDocument.defaultView;
+  const navTrees = getGamepadNavigationTrees();
+  return navTrees.find((x: any) => x.m_ID == 'root_1_').Root.Element.ownerDocument.defaultView;
+}
+
+/**
+ * Gets the correct FocusNavController, as the Feb 22 2023 beta has two for some reason.
+ */
+export function getFocusNavController(): any {
+  return window.GamepadNavTree?.m_context?.m_controller || window.FocusNavController;
+}
+
+/**
+ * Gets the gamepad navigation trees as Valve seems to be moving them.
+ */
+export function getGamepadNavigationTrees(): any {
+  const focusNav = getFocusNavController();
+  const context = focusNav.m_ActiveContext || focusNav.m_LastActiveContext;
+  return context.m_rgGamepadNavigationTrees;
 }

typedoc.json

@@ -1,5 +1,4 @@
 {
-    "githubPages": false,
     "categorizeByGroup": false,
     "excludeExternals": true
 }