chore(*): run prettier

.github/workflows/docs.yaml

@@ -51,4 +51,4 @@ jobs:
           ssh: true
           directory: ./wiki
           repository: SteamDeckHomebrew/wiki
-          branch: main
+          branch: main

.releaserc.json

@@ -6,9 +6,9 @@
       {
         "preset": "angular",
         "releaseRules": [
-          {"type": "chore", "scope": "classes", "release": "patch"},
-          {"type": "docs", "scope": "steamclient", "release": "patch"},
-          {"type": "*", "scope": "docs", "release": false}
+          { "type": "chore", "scope": "classes", "release": "patch" },
+          { "type": "docs", "scope": "steamclient", "release": "patch" },
+          { "type": "*", "scope": "docs", "release": false }
         ]
       }
     ],

.vscode/tasks.json

@@ -1,15 +1,13 @@
 {
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "dev",
-			"problemMatcher": [
-				"$tsc-watch"
-			],
-			"label": "npm: dev",
-			"detail": "tsc -b -w",
-			"isBackground": true
-		}
-	]
-}
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev",
+      "problemMatcher": ["$tsc-watch"],
+      "label": "npm: dev",
+      "detail": "tsc -b -w",
+      "isBackground": true
+    }
+  ]
+}

README.md

@@ -20,7 +20,7 @@ This library can also theoretically be used to extend existing UI elements of th
 
 ### Getting Started (Developers)
 
-If you would like a feature added to decky-frontend-lib, please request it via a Github issue.  
+If you would like a feature added to decky-frontend-lib, please request it via a Github issue.
 
 If you want to start making a plugin with decky-frontend-lib, please direct your attention to the [decky-plugin-template](https://github.com/SteamDeckHomebrew/decky-plugin-template) repository.
 

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript',],
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
 };

globals.d.ts

@@ -1,5 +1,5 @@
 declare global {
-    interface Window {
-        SP_REACT: typeof React;
-    }
-}
+  interface Window {
+    SP_REACT: typeof React;
+  }
+}

src/class-mapper.ts

@@ -1,34 +1,34 @@
-import { Module, findAllModules } from "./webpack";
+import { Module, findAllModules } from './webpack';
 
 export interface ClassModule {
-    [name: string]: string
-};
-  
+  [name: string]: string;
+}
+
 export const classMap: ClassModule[] = findAllModules((m: Module) => {
-    if (typeof m == "object" && !m.__esModule) {
-        const keys = Object.keys(m);
-        // special case some libraries
-        if (keys.length == 1 && m.version) return false;
-        // special case localization
-        if (keys.length > 1000 && m.AboutSettings) return false;
-  
-        return keys.length > 0 && keys.every(k => !Object.getOwnPropertyDescriptor(m, k)?.get && typeof m[k] == "string")
-    }
-    return false;
+  if (typeof m == 'object' && !m.__esModule) {
+    const keys = Object.keys(m);
+    // special case some libraries
+    if (keys.length == 1 && m.version) return false;
+    // special case localization
+    if (keys.length > 1000 && m.AboutSettings) return false;
+
+    return keys.length > 0 && keys.every((k) => !Object.getOwnPropertyDescriptor(m, k)?.get && typeof m[k] == 'string');
+  }
+  return false;
 });
-  
+
 export function findClass(name: string): string | void {
-    return classMap.find(m => m?.[name])?.[name];
+  return classMap.find((m) => m?.[name])?.[name];
 }
-  
-export function findClassModule(filter: (module: any) => boolean) : ClassModule | void {
-    return classMap.find(m => filter(m));
+
+export function findClassModule(filter: (module: any) => boolean): ClassModule | void {
+  return classMap.find((m) => filter(m));
 }
 
 export function unminifyClass(minifiedClass: string): string | void {
-    for (let m of classMap) {
-        for (let className of Object.keys(m)) {
-            if (m[className] == minifiedClass) return className;
-        }
+  for (let m of classMap) {
+    for (let className of Object.keys(m)) {
+      if (m[className] == minifiedClass) return className;
     }
-}
+  }
+}

src/components/ButtonItem.tsx

@@ -7,9 +7,8 @@ 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 = Object.values(CommonUIModule).find(
+  (mod: any) =>
+    mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
+    mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+) as FC<ButtonItemProps>;

src/components/Carousel.ts

@@ -20,4 +20,6 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   scrollToAlignment?: 'center';
 }
 
-export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as VFC<CarouselProps & RefAttributes<HTMLDivElement>>;
+export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as VFC<
+  CarouselProps & RefAttributes<HTMLDivElement>
+>;

src/components/ControlsList.tsx

@@ -1,9 +1,13 @@
-import { Export, findModuleExport } from '../webpack';
 import { FC } from 'react';
 
+import { Export, findModuleExport } from '../webpack';
+
 export interface ControlsListProps {
   alignItems?: 'left' | 'right' | 'center';
   spacing?: 'standard' | 'extra';
 }
 
-export const ControlsList: FC<ControlsListProps> = findModuleExport((e: Export) => e?.toString && e.toString().includes('().ControlsListChild') && e.toString().includes('().ControlsListOuterPanel'));
+export const ControlsList: FC<ControlsListProps> = findModuleExport(
+  (e: Export) =>
+    e?.toString && e.toString().includes('().ControlsListChild') && e.toString().includes('().ControlsListOuterPanel'),
+);

src/components/Dialog.tsx

@@ -11,33 +11,33 @@ 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 
+   * 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. 
-   * 
+   * 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/components/DialogCheckbox.tsx

@@ -18,16 +18,19 @@ export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProp
   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
+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/components/Field.tsx

@@ -23,4 +23,6 @@ export interface FieldProps extends FooterLegendProps {
   onClick?: (e: CustomEvent | MouseEvent) => void;
 }
 
-export const Field = findModuleExport((e: Export) => e?.render?.toString().includes('"shift-children-below"')) as FC<FieldProps & RefAttributes<HTMLDivElement>>;
+export const Field = findModuleExport((e: Export) => e?.render?.toString().includes('"shift-children-below"')) as FC<
+  FieldProps & RefAttributes<HTMLDivElement>
+>;

src/components/FocusRing.ts

@@ -10,4 +10,6 @@ export interface FocusRingProps {
   NavigationManager?: any;
 }
 
-export const FocusRing = findModuleExport((e: Export) => e?.toString()?.includes('.GetShowDebugFocusRing())')) as FC<FocusRingProps>;
+export const FocusRing = findModuleExport((e: Export) =>
+  e?.toString()?.includes('.GetShowDebugFocusRing())'),
+) as FC<FocusRingProps>;

src/components/Focusable.tsx

@@ -13,4 +13,6 @@ export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLe
   onCancel?: (e: CustomEvent) => void;
 }
 
-export const Focusable = findModuleExport((e: Export) => e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",')) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;
+export const Focusable = findModuleExport((e: Export) =>
+  e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'),
+) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;

src/components/FooterLegend.ts

@@ -36,16 +36,16 @@ export declare enum NavEntryPositionPreferences {
   LAST,
   MAINTAIN_X,
   MAINTAIN_Y,
-  PREFERRED_CHILD
+  PREFERRED_CHILD,
 }
 export interface GamepadEventDetail {
   button: number;
   is_repeat?: boolean;
   source: number;
 }
 export declare type ActionDescriptionMap = {
-  [key in GamepadButton]?: ReactNode
-}
+  [key in GamepadButton]?: ReactNode;
+};
 export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
 export interface FooterLegendProps {
   actionDescriptionMap?: ActionDescriptionMap;

src/components/Marquee.tsx

@@ -15,4 +15,6 @@ export interface MarqueeProps {
   children: React.ReactNode;
 }
 
-export const Marquee: FC<MarqueeProps> = findModuleExport((e: Export) => e?.toString && e.toString().includes('.Marquee') && e.toString().includes('--fade-length'));
+export const Marquee: FC<MarqueeProps> = findModuleExport(
+  (e: Export) => e?.toString && e.toString().includes('.Marquee') && e.toString().includes('--fade-length'),
+);

src/components/Panel.tsx

@@ -21,4 +21,6 @@ export const PanelSection = panelSection as FC<PanelSectionProps>;
 export interface PanelSectionRowProps {
   children?: ReactNode;
 }
-export const PanelSectionRow = Object.values(mod).filter((exp: any) => !exp?.toString()?.includes('.PanelSection'))[0] as FC<PanelSectionRowProps>;
+export const PanelSectionRow = Object.values(mod).filter(
+  (exp: any) => !exp?.toString()?.includes('.PanelSection'),
+)[0] as FC<PanelSectionRowProps>;

src/components/ProgressBar.tsx

@@ -22,8 +22,14 @@ export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
   sOperationText?: ReactNode;
 }
 
-export const ProgressBar = findModuleExport((e: Export) => e?.toString()?.includes('.ProgressBar,"standard"==')) as VFC<ProgressBarProps>;
+export const ProgressBar = findModuleExport((e: Export) =>
+  e?.toString()?.includes('.ProgressBar,"standard"=='),
+) as VFC<ProgressBarProps>;
 
-export const ProgressBarWithInfo = findModuleExport((e: Export) => e?.toString()?.includes('.ProgressBarFieldStatus},')) as VFC<ProgressBarWithInfoProps>;
+export const ProgressBarWithInfo = findModuleExport((e: Export) =>
+  e?.toString()?.includes('.ProgressBarFieldStatus},'),
+) as VFC<ProgressBarWithInfoProps>;
 
-export const ProgressBarItem = findModuleExport((e: Export) => e?.toString()?.includes('"indeterminate","nTransitionSec"')) as VFC<ProgressBarItemProps>;
+export const ProgressBarItem = findModuleExport((e: Export) =>
+  e?.toString()?.includes('"indeterminate","nTransitionSec"'),
+) as VFC<ProgressBarItemProps>;

src/components/Scroll.tsx

@@ -2,10 +2,14 @@ import { FC, ReactNode } from 'react';
 
 import { Export, findModuleByExport, findModuleExport } from '../webpack';
 
-const ScrollingModule = findModuleByExport((e: Export) => e?.render?.toString?.().includes("{case\"x\":"));
+const ScrollingModule = findModuleByExport((e: Export) => e?.render?.toString?.().includes('{case"x":'));
 
 const ScrollingModuleProps = ScrollingModule ? Object.values(ScrollingModule) : [];
 
-export const ScrollPanel = ScrollingModuleProps.find((prop: any) => prop?.render?.toString?.().includes("{case\"x\":")) as FC<{ children?: ReactNode }>;
+export const ScrollPanel = ScrollingModuleProps.find((prop: any) =>
+  prop?.render?.toString?.().includes('{case"x":'),
+) as FC<{ children?: ReactNode }>;
 
-export const ScrollPanelGroup: FC<{ children?: ReactNode }> = findModuleExport((e: Export) => e?.render?.toString().includes(".FocusVisibleChild()),[])"));
+export const ScrollPanelGroup: FC<{ children?: ReactNode }> = findModuleExport((e: Export) =>
+  e?.render?.toString().includes('.FocusVisibleChild()),[])'),
+);

src/components/SidebarNavigation.tsx

@@ -23,4 +23,6 @@ export interface SidebarNavigationProps {
   onPageRequested?: (page: string) => void;
 }
 
-export const SidebarNavigation = findModuleExport((e: Export) => e?.toString()?.includes('"disableRouteReporting"')) as VFC<SidebarNavigationProps>;
+export const SidebarNavigation = findModuleExport((e: Export) =>
+  e?.toString()?.includes('"disableRouteReporting"'),
+) as VFC<SidebarNavigationProps>;

src/components/SteamSpinner.tsx

@@ -2,4 +2,6 @@ import { FC, SVGAttributes } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
-export const SteamSpinner = findModuleExport((e: Export) => e?.toString?.()?.includes('Steam Spinner') && e?.toString?.()?.includes('src')) as FC<SVGAttributes<SVGElement>>;
+export const SteamSpinner = findModuleExport(
+  (e: Export) => e?.toString?.()?.includes('Steam Spinner') && e?.toString?.()?.includes('src'),
+) as FC<SVGAttributes<SVGElement>>;

src/components/Tabs.tsx

@@ -109,8 +109,7 @@ try {
  * Tabs component as used in the library and media tabs. See {@link TabsProps}.
  * Unlike other components in `decky-frontend-lib`, this requires Decky Loader to be running.
  */
-export const Tabs =
-  (oldTabs ||
+export const Tabs = (oldTabs ||
   ((props: TabsProps) => {
     const found = tabsComponent;
     const [tc, setTC] = useState<FC<TabsProps>>(found);

src/components/index.ts

@@ -22,4 +22,4 @@ export * from './Tabs';
 export * from './TextField';
 export * from './Toggle';
 export * from './ToggleField';
-export * from './Scroll';
+export * from './Scroll';

src/custom-hooks/useQuickAccessVisible.tsx

@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react';
+
 import { getGamepadNavigationTrees } from '../utils';
 
 function getQuickAccessWindow(): Window | null {
   const navTrees = getGamepadNavigationTrees();
-  return navTrees.find((tree: any) => tree?.id === 'QuickAccess-NA')?.m_Root?.m_element?.ownerDocument.defaultView ?? null;
+  return (
+    navTrees.find((tree: any) => tree?.id === 'QuickAccess-NA')?.m_Root?.m_element?.ownerDocument.defaultView ?? null
+  );
 }
 
 /**

src/globals/SteamClient.ts

@@ -227,7 +227,7 @@ export interface LogoPosition {
   pinnedPosition: LogoPinPositions;
   nWidthPct: number;
   nHeightPct: number;
-};
+}
 
 export interface AppDetails {
   achievements: AppAchievements;