@decky/ui 4.0.0

package/src/components/Modal.tsx

@@ -0,0 +1,119 @@
+import { FC, ReactNode } from 'react';
+
+import { findSP } from '../utils';
+import { Export, findModule, findModuleByExport, findModuleExport } from '../webpack';
+
+// All of the popout options + strTitle are related. Proper usage is not yet known...
+export interface ShowModalProps {
+  browserContext?: unknown;
+  bForcePopOut?: boolean;
+  bHideActionIcons?: boolean;
+  bHideMainWindowForPopouts?: boolean;
+  bNeverPopOut?: boolean;
+  fnOnClose?: () => void; // Seems to be the same as "closeModal" callback, but only when the modal is a popout. Will no longer work after "Update" invocation!
+  popupHeight?: number;
+  popupWidth?: number;
+  promiseRenderComplete?: Promise<void>; // Invoked once the render is complete. Currently, it seems to be used as image loading success/error callback...
+  strTitle?: string;
+}
+
+export interface ShowModalResult {
+  // This method will not invoke any of the variations of "closeModal" callbacks!
+  Close: () => void;
+
+  // This method will replace the modal element completely and will not update the callback chains,
+  // meaning that "closeModal" and etc. will not automatically close the modal anymore (also "fnOnClose"
+  // will not be even called upon close anymore)! You have to manually call the "Close" method when, for example,
+  // the "closeModal" is invoked in the newly updated modal:
+  //   <ModalRoot closeModal={() => { console.log("ABOUT TO CLOSE"); showModalRes.Close(); }} />
+  Update: (modal: ReactNode) => void;
+}
+
+const showModalRaw: (
+  modal: ReactNode,
+  parent?: EventTarget,
+  title?: string,
+  props?: ShowModalProps,
+  unknown1?: unknown,
+  hideActions?: { bHideActions?: boolean },
+  modalManager?: unknown,
+) => ShowModalResult = findModuleExport(
+  (e: Export) =>
+    typeof e === 'function' && e.toString().includes('props.bDisableBackgroundDismiss') && !e?.prototype?.Cancel,
+);
+
+export const showModal = (
+  modal: ReactNode,
+  parent?: EventTarget,
+  props: ShowModalProps = {
+    strTitle: 'Decky Dialog',
+    bHideMainWindowForPopouts: false,
+  },
+): ShowModalResult => {
+  return showModalRaw(modal, parent || findSP(), props.strTitle, props, undefined, {
+    bHideActions: props.bHideActionIcons,
+  });
+};
+
+export interface ModalRootProps {
+  children?: ReactNode;
+  onCancel?(): void;
+  closeModal?(): void;
+  onOK?(): void;
+  onEscKeypress?(): void;
+  className?: string;
+  modalClassName?: string;
+  bAllowFullSize?: boolean;
+  bDestructiveWarning?: boolean;
+  bDisableBackgroundDismiss?: boolean;
+  bHideCloseIcon?: boolean;
+  bOKDisabled?: boolean;
+  bCancelDisabled?: boolean;
+}
+
+export interface ConfirmModalProps extends ModalRootProps {
+  onMiddleButton?(): void; // setting this prop will enable the middle button
+  strTitle?: ReactNode;
+  strDescription?: ReactNode;
+  strOKButtonText?: ReactNode;
+  strCancelButtonText?: ReactNode;
+  strMiddleButtonText?: ReactNode;
+  bAlertDialog?: boolean; // This will open a modal with only OK button enabled
+  bMiddleDisabled?: boolean;
+}
+
+export const ConfirmModal = findModuleExport(
+  (e: Export) => !e?.prototype?.OK && e?.prototype?.Cancel && e?.prototype?.render,
+) as FC<ConfirmModalProps>;
+
+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;
+      }
+    }
+
+    return false;
+  }) || {},
+)?.find((x: any) => x?.type?.toString()?.includes('((function(){')) as FC<ModalRootProps>;
+
+interface SimpleModalProps {
+  active?: boolean;
+  children: ReactNode;
+}
+
+const ModalModule = findModuleByExport((e: Export) => e?.toString().includes('.ModalPosition,fallback:'), 5);
+
+const ModalModuleProps = ModalModule ? Object.values(ModalModule) : [];
+
+export const SimpleModal = ModalModuleProps.find((prop) => {
+  const string = prop?.toString();
+  return string?.includes('.ShowPortalModal()') && string?.includes('.OnElementReadyCallbacks.Register(');
+}) as FC<SimpleModalProps>;
+
+export const ModalPosition = ModalModuleProps.find((prop) =>
+  prop?.toString().includes('.ModalPosition,fallback:'),
+) as FC<SimpleModalProps>;

package/src/components/Panel.tsx

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+
+import { Export, findModuleDetailsByExport } from '../webpack';
+
+// TODO where did this go?
+// export const Panel: FC<{ children?: ReactNode; }> = findModuleExport((e: Export) => {
+//   if (typeof mod !== 'object' || !mod.__esModule) return undefined;
+//   return mod.Panel;
+// });
+
+export interface PanelSectionProps {
+  title?: string;
+  spinner?: boolean;
+  children?: ReactNode;
+}
+
+const [mod, panelSection] = findModuleDetailsByExport((e: Export) => e.toString()?.includes('.PanelSection'));
+
+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>;

package/src/components/ProgressBar.tsx

@@ -0,0 +1,35 @@
+import { ReactNode, VFC } from 'react';
+
+import { Export, findModuleExport } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface ProgressBarItemProps extends ItemProps {
+  indeterminate?: boolean;
+  nTransitionSec?: number;
+  nProgress?: number;
+  focusable?: boolean;
+}
+
+export interface ProgressBarProps {
+  indeterminate?: boolean;
+  nTransitionSec?: number;
+  nProgress?: number;
+  focusable?: boolean;
+}
+
+export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
+  sTimeRemaining?: ReactNode;
+  sOperationText?: ReactNode;
+}
+
+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 ProgressBarItem = findModuleExport((e: Export) =>
+  e?.toString()?.includes('"indeterminate","nTransitionSec"'),
+) as VFC<ProgressBarItemProps>;

package/src/components/Scroll.tsx

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+
+import { Export, findModuleByExport, findModuleExport } from '../webpack';
+
+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 ScrollPanelGroup: FC<{ children?: ReactNode }> = findModuleExport((e: Export) =>
+  e?.render?.toString().includes('.FocusVisibleChild()),[])'),
+);

package/src/components/SidebarNavigation.tsx

@@ -0,0 +1,28 @@
+import { ReactNode, VFC } from 'react';
+
+import { Export, findModuleExport } from '../webpack';
+
+export interface SidebarNavigationPage {
+  title: ReactNode;
+  content: ReactNode;
+  icon?: ReactNode;
+  visible?: boolean;
+  hideTitle?: boolean;
+  identifier?: string;
+  route?: string;
+  link?: string;
+  padding?: 'none' | 'compact';
+}
+
+export interface SidebarNavigationProps {
+  title?: string;
+  pages: (SidebarNavigationPage | 'separator')[];
+  showTitle?: boolean;
+  disableRouteReporting?: boolean;
+  page?: string;
+  onPageRequested?: (page: string) => void;
+}
+
+export const SidebarNavigation = findModuleExport((e: Export) =>
+  e?.toString()?.includes('"disableRouteReporting"'),
+) as VFC<SidebarNavigationProps>;

package/src/components/SliderField.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface NotchLabel {
+  notchIndex: number;
+  label: string;
+  value?: number;
+}
+
+export interface SliderFieldProps extends ItemProps {
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  notchCount?: number;
+  notchLabels?: NotchLabel[];
+  notchTicksVisible?: boolean;
+  showValue?: boolean;
+  resetValue?: number;
+  disabled?: boolean;
+  editableValue?: boolean;
+  validValues?: 'steps' | 'range' | ((value: number) => boolean);
+  valueSuffix?: string;
+  minimumDpadGranularity?: number;
+  onChange?(value: number): void;
+  className?: string;
+}
+
+export const SliderField = Object.values(CommonUIModule).find((mod: any) =>
+  mod?.toString()?.includes('SliderField,fallback'),
+) as FC<SliderFieldProps>;

package/src/components/Spinner.tsx

@@ -0,0 +1,8 @@
+import { FC, SVGAttributes } from 'react';
+
+import { IconsModule } from '../webpack';
+
+// TODO type this and other icons?
+export const Spinner = Object.values(IconsModule).find(
+  (mod: any) => mod?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString()),
+) as FC<SVGAttributes<SVGElement>>;

package/src/components/SteamSpinner.tsx

@@ -0,0 +1,7 @@
+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>>;

package/src/components/Tabs.tsx

@@ -0,0 +1,127 @@
+import { FC, ReactNode, createElement, useEffect, useState } from 'react';
+
+import { fakeRenderComponent, findInReactTree, sleep } from '../utils';
+import { Export, findModuleByExport } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
+import { SteamSpinner } from './SteamSpinner';
+
+/**
+ * Individual tab objects for the Tabs component
+ *
+ * `id` ID of this tab, can be used with activeTab to auto-focus a given tab
+ * `title` Title shown in the header bar
+ * `renderTabAddon` Return a {@link ReactNode} to render it next to the tab title, i.e. the counts for each tab on the Media page
+ * `content` Content of the tab
+ * `footer` Sets up button handlers and labels
+ */
+export interface Tab {
+  id: string;
+  title: string;
+  renderTabAddon?: () => ReactNode;
+  content: ReactNode;
+  footer?: FooterLegendProps;
+}
+
+/**
+ * Props for the {@link Tabs}
+ *
+ * `tabs` array of {@link Tab}
+ * `activeTab` tab currently active, needs to be one of the tabs {@link Tab.id}, must be set using a `useState` in the `onShowTab` handler
+ * `onShowTab` Called when the active tab should change, needs to set `activeTab`. See example.
+ * `autoFocusContents` Whether to automatically focus the tab contents or not.
+ * `footer` Sets up button handlers and labels
+ *
+ * @example
+ * const Component: FC = () => {
+ * const [currentTab, setCurrentTab] = useState<string>("Tab1");
+ *
+ * return (
+ *   <Tabs
+ *     title="Theme Manager"
+ *     activeTab={currentTabRoute}
+ *     onShowTab={(tabID: string) => {
+ *        setCurrentTabRoute(tabID);
+ *     }}
+ *     tabs={[
+ *       {
+ *         title: "Tab 1",
+ *         content: <Tab1Component />,
+ *         id: "Tab1",
+ *       },
+ *       {
+ *         title: "Tab 2",
+ *         content: <Tab2Component />,
+ *         id: "Tab2",
+ *       },
+ *     ]}
+ *   />
+ *  );
+ * };
+ */
+export interface TabsProps {
+  tabs: Tab[];
+  activeTab: string;
+  onShowTab: (tab: string) => void;
+  autoFocusContents?: boolean;
+}
+
+let tabsComponent: any;
+
+const getTabs = async () => {
+  if (tabsComponent) return tabsComponent;
+  // @ts-ignore
+  while (!window?.DeckyPluginLoader?.routerHook?.routes) {
+    console.debug('[DFL:Tabs]: Waiting for Decky router...');
+    await sleep(500);
+  }
+  return (tabsComponent = fakeRenderComponent(
+    () => {
+      return findInReactTree(
+        findInReactTree(
+          // @ts-ignore
+          window.DeckyPluginLoader.routerHook.routes
+            .find((x: any) => x.props.path == '/library/app/:appid/achievements')
+            .props.children.type(),
+          (x) => x?.props?.scrollTabsTop,
+        ).type({ appid: 1 }),
+        (x) => x?.props?.tabs,
+      ).type;
+    },
+    {
+      useRef: () => ({ current: { reaction: { track: () => {} } } }),
+      useContext: () => ({ match: { params: { appid: 1 } } }),
+      useMemo: () => ({ data: {} }),
+    },
+  ));
+};
+
+let oldTabs: any;
+
+try {
+  const oldTabsModule = findModuleByExport((e: Export) => e.Unbleed);
+  if (oldTabsModule)
+    oldTabs = Object.values(oldTabsModule).find((x: any) => x?.type?.toString()?.includes('((function(){'));
+} catch (e) {
+  console.error('Error finding oldTabs:', e);
+}
+
+/**
+ * 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 ||
+  ((props: TabsProps) => {
+    const found = tabsComponent;
+    const [tc, setTC] = useState<FC<TabsProps>>(found);
+    useEffect(() => {
+      if (found) return;
+      (async () => {
+        console.debug('[DFL:Tabs]: Finding component...');
+        const t = await getTabs();
+        console.debug('[DFL:Tabs]: Found!');
+        setTC(t);
+      })();
+    }, []);
+    console.log('tc', tc);
+    return tc ? createElement(tc, props) : <SteamSpinner />;
+  })) as FC<TabsProps>;

package/src/components/TextField.tsx

@@ -0,0 +1,28 @@
+import { ChangeEventHandler, HTMLAttributes, ReactNode, VFC } from 'react';
+
+import { CommonUIModule, Module } from '../webpack';
+
+export interface TextFieldProps extends HTMLAttributes<HTMLInputElement> {
+  label?: ReactNode;
+  requiredLabel?: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+  bShowCopyAction?: boolean;
+  bShowClearAction?: boolean;
+  bAlwaysShowClearAction?: boolean;
+  bIsPassword?: boolean;
+  rangeMin?: number;
+  rangeMax?: number;
+  mustBeNumeric?: boolean;
+  mustBeURL?: boolean;
+  mustBeEmail?: boolean;
+  focusOnMount?: boolean;
+  tooltip?: string;
+  inlineControls?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  value?: string;
+}
+
+export const TextField = Object.values(CommonUIModule).find(
+  (mod: Module) => mod?.validateUrl && mod?.validateEmail,
+) as VFC<TextFieldProps>;

package/src/components/Toggle.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+
+export interface ToggleProps {
+  value: boolean;
+  disabled?: boolean;
+  onChange?(checked: boolean): void;
+  navRef?: any; // TODO figure out what this is
+}
+
+export const Toggle = Object.values(CommonUIModule).find((mod: any) =>
+  mod?.render?.toString()?.includes('.ToggleOff)'),
+) as FC<ToggleProps>;

package/src/components/ToggleField.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface ToggleFieldProps extends ItemProps {
+  highlightOnFocus?: boolean;
+  checked: boolean;
+  disabled?: boolean;
+  onChange?(checked: boolean): void;
+}
+
+export const ToggleField = Object.values(CommonUIModule).find((mod: any) =>
+  mod?.render?.toString()?.includes('ToggleField,fallback'),
+) as FC<ToggleFieldProps>;

package/src/components/index.ts

@@ -0,0 +1,25 @@
+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';
+export * from './ProgressBar';
+export * from './SidebarNavigation';
+export * from './SliderField';
+export * from './Spinner';
+export * from './SteamSpinner';
+export * from './Tabs';
+export * from './TextField';
+export * from './Toggle';
+export * from './ToggleField';
+export * from './Scroll';

package/src/custom-components/ColorPickerModal.tsx

@@ -0,0 +1,132 @@
+import { CSSProperties, FC, useState } from 'react';
+
+import { ConfirmModal, SliderField } from '../components';
+import { gamepadSliderClasses } from '../utils/static-classes';
+
+interface ColorPickerModalProps {
+  closeModal: () => void;
+  onConfirm?(HSLString: string): any;
+  title?: string;
+  defaultH?: number;
+  defaultS?: number;
+  defaultL?: number;
+  defaultA?: number;
+}
+
+export const ColorPickerModal: FC<ColorPickerModalProps> = ({
+  closeModal,
+  onConfirm = () => {},
+  title = 'Color Picker',
+  defaultH = 0,
+  defaultS = 100,
+  defaultL = 50,
+  defaultA = 1,
+}) => {
+  const [H, setH] = useState<number>(defaultH);
+  const [S, setS] = useState<number>(defaultS);
+  const [L, setL] = useState<number>(defaultL);
+  const [A, setA] = useState<number>(defaultA);
+
+  const colorPickerCSSVars = {
+    '--decky-color-picker-hvalue': `${H}`,
+    '--decky-color-picker-svalue': `${S}%`,
+    '--decky-color-picker-lvalue': `${L}%`,
+    '--decky-color-picker-avalue': `${A}`,
+  } as CSSProperties;
+
+  return (
+    <ConfirmModal
+      bAllowFullSize
+      onCancel={closeModal}
+      onOK={() => {
+        onConfirm(`hsla(${H}, ${S}%, ${L}%, ${A})`);
+        closeModal();
+      }}
+    >
+      <style>
+        {`
+        /* This removes the cyan track color that is behind the slider head */
+        .ColorPicker_Container .${gamepadSliderClasses.SliderTrack} {
+          --left-track-color: #0000;
+          /* This is for compatibility with the "Colored Toggles" CSSLoader Theme*/
+          --colored-toggles-main-color: #0000;
+        }
+
+        .ColorPicker_HSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            270deg,
+            hsla(360, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(270, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(180, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(90, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(0, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_SSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), 0%, var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), 100%, var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_LSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 0%, var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 50%, var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 100%, var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_ASlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 0),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 1)
+          );
+        }
+        `}
+      </style>
+      <div
+        className="ColorPicker_ColorDisplayContainer"
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '1em',
+          // theres a large header by default on the modal, so this just pushes it up into that unused space
+          marginTop: '-2.5em',
+        }}
+      >
+        <div>
+          <span style={{ fontSize: '1.5em' }}>
+            <b>{title}</b>
+          </span>
+        </div>
+        <div
+          style={{
+            backgroundColor: `hsla(${H}, ${S}%, ${L}%, ${A})`,
+            width: '40px',
+            height: '40px',
+          }}
+        ></div>
+      </div>
+      <div className="ColorPicker_Container" style={colorPickerCSSVars}>
+        <div className="ColorPicker_HSlider">
+          <SliderField showValue editableValue label="Hue" value={H} min={0} max={360} onChange={setH} />
+        </div>
+        <div className="ColorPicker_SSlider">
+          <SliderField showValue editableValue label="Saturation" value={S} min={0} max={100} onChange={setS} />
+        </div>
+        <div className="ColorPicker_LSlider">
+          <SliderField showValue editableValue label="Lightness" value={L} min={0} max={100} onChange={setL} />
+        </div>
+        <div className="ColorPicker_ASlider">
+          <SliderField showValue editableValue label="Alpha" value={A} step={0.1} min={0} max={1} onChange={setA} />
+        </div>
+      </div>
+    </ConfirmModal>
+  );
+};