rename zustand functions

src/backend-impl/decky-theme-store.ts

@@ -11,7 +11,7 @@ const cssLoaderStore = createCSSLoaderStore(backend);
 
 const useCSSLoaderStore = (fn: (state: ICSSLoaderState) => any) => useStore(cssLoaderStore, fn);
 
-export const useCSSLoaderStateValue = <T extends keyof CSSLoaderStateValues>(
+export const useCSSLoaderValue = <T extends keyof CSSLoaderStateValues>(
   key: T
 ): ICSSLoaderState[T] => useCSSLoaderStore((state) => state[key]);
 

src/index.tsx

@@ -4,7 +4,8 @@ import { QamTabPage } from "@/modules/qam-tab-page";
 import { definePlugin, routerHook } from "@decky/api";
 import { getCSSLoaderState } from "@/backend";
 import { getDeckyPatchState } from "./decky-patches";
-import { ThemeStoreRouter } from "./modules/theme-store/pages/ThemeStoreRouter";
+import { ThemeStoreRouter } from "./modules/theme-store";
+import { ExpandedViewPage } from "./modules/expanded-view";
 
 export default definePlugin(() => {
   getCSSLoaderState().initializeStore();
@@ -16,6 +17,12 @@ export default definePlugin(() => {
     </StyleProvider>
   ));
 
+  routerHook.addRoute("/cssloader/expanded-view", () => (
+    <StyleProvider>
+      <ExpandedViewPage />
+    </StyleProvider>
+  ));
+
   return {
     name: "SDH-CSSLoader",
     titleView: (

src/lib/components/motd-display/MOTDDisplay.tsx

@@ -2,7 +2,7 @@ import { DialogButton, Focusable, PanelSection } from "@decky/ui";
 import { useEffect, useMemo } from "react";
 import { Motd } from "@/types";
 import { FaTimes } from "react-icons/fa";
-import { useCSSLoaderAction, useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderAction, useCSSLoaderValue } from "@/backend";
 
 const SEVERITIES = {
   High: {
@@ -22,8 +22,8 @@ const SEVERITIES = {
 export function MOTDDisplay() {
   const getMotd = useCSSLoaderAction("getMotd");
   const hideMotd = useCSSLoaderAction("hideMotd");
-  const motd = useCSSLoaderStateValue("motd");
-  const hiddenMotdId = useCSSLoaderStateValue("hiddenMotdId");
+  const motd = useCSSLoaderValue("motd");
+  const hiddenMotdId = useCSSLoaderValue("hiddenMotdId");
 
   useEffect(() => {
     void getMotd();

src/lib/components/preset-selection-dropdown/PresetSelectionDropdown.tsx

@@ -3,11 +3,11 @@ import { Flags } from "@/types";
 import { useMemo } from "react";
 import { FiPlusCircle } from "react-icons/fi";
 import { useForcedRerender } from "../../hooks";
-import { useCSSLoaderAction, useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderAction, useCSSLoaderValue } from "@/backend";
 
 export function PresetSelectionDropdown() {
-  const themes = useCSSLoaderStateValue("themes");
-  const selectedPreset = useCSSLoaderStateValue("selectedPreset");
+  const themes = useCSSLoaderValue("themes");
+  const selectedPreset = useCSSLoaderValue("selectedPreset");
   const changePreset = useCSSLoaderAction("changePreset");
   const presets = useMemo(() => themes.filter((e) => e.flags.includes(Flags.isPreset)), [themes]);
   const hasInvalidPresetState = presets.length > 1;

src/lib/components/theme-patch/ThemePatch.tsx

@@ -1,5 +1,5 @@
 import { Patch } from "@/types";
-import { useCSSLoaderAction, useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderAction, useCSSLoaderValue } from "@/backend";
 import { useState } from "react";
 import { DropdownItem, PanelSectionRow, SliderField, ToggleField } from "@decky/ui";
 import { ThemePatchComponent } from "./ThemePatchComponent";

src/lib/components/theme-patch/ThemePatchComponent.tsx

@@ -1,5 +1,5 @@
 import { ThemePatchComponent } from "@/types";
-import { useCSSLoaderAction, useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderAction, useCSSLoaderValue } from "@/backend";
 import { ButtonItem, ColorPickerModal, PanelSectionRow, showModal } from "@decky/ui";
 import { FaFolder } from "react-icons/fa";
 import { FileSelectionType, openFilePicker } from "@decky/api";
@@ -21,7 +21,7 @@ export function ThemePatchComponent({
   const bottomSeparatorValue = shouldHaveBottomSeparator ? "standard" : "none";
 
   const setComponentValue = useCSSLoaderAction("setComponentValue");
-  const themeRootPath = useCSSLoaderStateValue("themeRootPath");
+  const themeRootPath = useCSSLoaderValue("themeRootPath");
   const toast = useCSSLoaderAction("toast");
   if (currentPatchValue !== component.on) return null;
 

src/lib/components/title-view/TitleView.tsx

@@ -1,11 +1,11 @@
 import { DialogButton, Navigation, Focusable, quickAccessMenuClasses } from "@decky/ui";
 import { BsGearFill } from "react-icons/bs";
 import { FaDownload } from "react-icons/fa";
-import { useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderValue } from "@/backend";
 import { cn } from "../../utils";
 
 export function TitleView() {
-  const themes = useCSSLoaderStateValue("themes");
+  const themes = useCSSLoaderValue("themes");
 
   const onSettingsClick = () => {
     Navigation.CloseSideMenus();

src/lib/hooks/useThemeInstallState.ts

@@ -1,8 +1,8 @@
 import { LocalThemeStatus, PartialCSSThemeInfo, Theme } from "@/types";
-import { useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderValue } from "@/backend";
 
 export function useThemeInstallState(theme: Theme | PartialCSSThemeInfo): LocalThemeStatus {
-  const updateStatuses = useCSSLoaderStateValue("updateStatuses");
+  const updateStatuses = useCSSLoaderValue("updateStatuses");
 
   const status = updateStatuses.find((status) => status[0] === theme.id);
   if (status) {

src/modules/expanded-view/components/ExpandedViewLoadingPage.tsx

@@ -0,0 +1,12 @@
+import { ImSpinner5 } from "react-icons/im";
+
+export function ExpandedViewLoadingPage() {
+  return (
+    <>
+      <div className="cl_fullscreenroute_container flex items-center justify-center gap-4">
+        <ImSpinner5 className="cl_spinny" size={48} />
+        <span className="cl_expandedview_loadingtext">Loading</span>
+      </div>
+    </>
+  );
+}

src/modules/expanded-view/components/ExpandedViewScrollingSection.tsx

@@ -0,0 +1,21 @@
+import { ScrollPanelGroup } from "@decky/ui";
+import { useExpandedViewAction } from "../context";
+
+export function ExpandedViewScrollingSection() {
+  const close = useExpandedViewAction("close");
+  return (
+    <ScrollPanelGroup
+      // @ts-ignore
+      classname="cl_expandedview_scrollcontainer"
+      focusable={false}
+      // onCancelButton doesn't work here
+      onCancelActionDescription="Back"
+      onButtonDown={(evt: any) => {
+        if (!evt?.detail?.button) return;
+        if (evt.detail.button === 2) {
+          close();
+        }
+      }}
+    ></ScrollPanelGroup>
+  );
+}

src/modules/expanded-view/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./ExpandedViewLoadingPage";
+export * from "./ExpandedViewScrollingSection";

src/modules/expanded-view/context/ExpandedViewStore.tsx

@@ -0,0 +1,66 @@
+import { getCSSLoaderState } from "@/backend";
+import { FullCSSThemeInfo } from "@/types";
+import { Navigation } from "@decky/ui";
+import { createStore, useStore } from "zustand";
+
+interface IExpandedViewStoreValues {
+  loaded: boolean;
+  error: string | null;
+  openedId: string | null;
+  data: FullCSSThemeInfo;
+}
+
+interface IExpandedViewStoreActions {
+  openTheme: (themeId: string) => Promise<void>;
+  downloadTheme: () => Promise<void>;
+  close: () => void;
+}
+
+export interface IExpandedViewStore extends IExpandedViewStoreValues, IExpandedViewStoreActions {}
+
+const expandedViewStore = createStore<IExpandedViewStore>((set, get) => {
+  return {
+    loaded: false,
+    openedId: null,
+    data: {} as FullCSSThemeInfo,
+    error: null,
+    openTheme: async (themeId) => {
+      set({ loaded: false, error: null, openedId: themeId });
+      Navigation.Navigate("/cssloader/expanded-view");
+      const { apiFetch } = getCSSLoaderState();
+      try {
+        const response = await apiFetch<FullCSSThemeInfo>(`/themes/${themeId}`);
+        if (response) {
+          set({ data: response, loaded: true });
+          return;
+        }
+        throw new Error("No response returned");
+      } catch (error) {
+        set({ error: "Error fetching theme!", loaded: true });
+      }
+    },
+    downloadTheme: async () => {
+      // const { apiFetch } = getCSSLoaderState();
+      // try {
+      //   await apiFetch(`/theme/${get().data.id}/download`, {}, true);
+      // } catch (error) {
+      //   set({ error: "Error downloading theme!" });
+      // }
+    },
+    close: () => {
+      set({ loaded: false, openedId: null, data: {} as FullCSSThemeInfo, error: null });
+      Navigation.NavigateBack();
+    },
+  };
+});
+
+const useExpandedViewState = (fn: (state: IExpandedViewStore) => any) =>
+  useStore(expandedViewStore, fn);
+
+export const useExpandedViewValue = <T extends keyof IExpandedViewStoreValues>(
+  key: T
+): IExpandedViewStore[T] => useExpandedViewState((state) => state[key]);
+
+export const useExpandedViewAction = <T extends keyof IExpandedViewStoreActions>(
+  key: T
+): IExpandedViewStore[T] => useExpandedViewState((state) => state[key]);

src/modules/expanded-view/context/index.ts

@@ -0,0 +1 @@
+export * from "./ExpandedViewStore";

src/modules/expanded-view/index.ts

@@ -0,0 +1,2 @@
+export * from "./pages";
+export * from "./context";

src/modules/expanded-view/pages/ExpandedViewPage.tsx

@@ -0,0 +1,17 @@
+import { ExpandedViewLoadingPage, ExpandedViewScrollingSection } from "../components";
+import { useExpandedViewValue } from "../context";
+
+export function ExpandedViewPage() {
+  const loaded = useExpandedViewValue("loaded");
+  const error = useExpandedViewValue("error");
+
+  if (!loaded) return <ExpandedViewLoadingPage />;
+
+  if (error) return <span>{error}</span>;
+
+  return (
+    <div className="cl_expandedview_container">
+      <ExpandedViewScrollingSection />
+    </div>
+  );
+}

src/modules/expanded-view/pages/index.ts

@@ -0,0 +1 @@
+export * from "./ExpandedViewPage";

src/modules/qam-tab-page/components/QamDummyFunctionBoundary.tsx

@@ -1,8 +1,8 @@
-import { useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderValue } from "@/backend";
 import { PanelSectionRow } from "@decky/ui";
 
 export function QamDummyFunctionBoundary({ children }: { children: React.ReactNode }) {
-  const dummyFunctionResult = useCSSLoaderStateValue("dummyFunctionResult");
+  const dummyFunctionResult = useCSSLoaderValue("dummyFunctionResult");
 
   if (!dummyFunctionResult) {
     return (

src/modules/qam-tab-page/components/QamHiddenThemesDisplay.tsx

@@ -1,8 +1,8 @@
-import { useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderValue } from "@/backend";
 import { FaEyeSlash } from "react-icons/fa";
 
 export function QamHiddenThemesDisplay() {
-  const unpinnedThemes = useCSSLoaderStateValue("unpinnedThemes");
+  const unpinnedThemes = useCSSLoaderValue("unpinnedThemes");
 
   if (unpinnedThemes.length === 0) {
     return null;

src/modules/qam-tab-page/components/QamRefreshButton.tsx

@@ -1,5 +1,5 @@
 import { ButtonItem, PanelSectionRow } from "@decky/ui";
-import { useCSSLoaderAction, useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderAction, useCSSLoaderValue } from "@/backend";
 
 export function QamRefreshButton() {
   const reloadPlugin = useCSSLoaderAction("reloadPlugin");

src/modules/qam-tab-page/components/QamThemeList.tsx

@@ -1,11 +1,11 @@
 import { Focusable } from "@decky/ui";
-import { useCSSLoaderStateValue } from "../../../backend-impl/decky-theme-store";
+import { useCSSLoaderValue } from "../../../backend-impl/decky-theme-store";
 import { Flags } from "@/types";
 import { QamThemeToggle } from "./QamThemeToggle";
 
 export function QamThemeList() {
-  const themes = useCSSLoaderStateValue("themes");
-  const unpinnedThemes = useCSSLoaderStateValue("unpinnedThemes");
+  const themes = useCSSLoaderValue("themes");
+  const unpinnedThemes = useCSSLoaderValue("unpinnedThemes");
 
   if (themes.length === 0) {
     return <span>You have no themes, visit the theme store to download some!</span>;

src/modules/qam-tab-page/components/QamThemeToggle.tsx

@@ -1,13 +1,13 @@
-import { useCSSLoaderAction, useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderAction, useCSSLoaderValue } from "@/backend";
 import { ThemePatch, toggleThemeWithModals, useForcedRerender } from "@/lib";
 import { useEffect, useState } from "react";
 import { LocalThemeStatus, Theme } from "@/types";
 import { ButtonItem, Focusable, PanelSectionRow, ToggleField, showModal } from "@decky/ui";
 import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
 
 export function QamThemeToggle({ theme }: { theme: Theme }) {
-  const updateStatuses = useCSSLoaderStateValue("updateStatuses");
-  const isWorking = useCSSLoaderStateValue("isWorking");
+  const updateStatuses = useCSSLoaderValue("updateStatuses");
+  const isWorking = useCSSLoaderValue("isWorking");
   const installTheme = useCSSLoaderAction("installTheme");
 
   const [collapsed, setCollapsed] = useState<boolean>(true);

src/modules/qam-tab-page/pages/QamTabPage.tsx

@@ -6,10 +6,10 @@ import {
   QamRefreshButton,
   QamThemeList,
 } from "../components";
-import { useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderValue } from "@/backend";
 
 export function QamTabPage() {
-  const themes = useCSSLoaderStateValue("themes");
+  const themes = useCSSLoaderValue("themes");
 
   return (
     <>

src/modules/theme-store/components/BrowserSearchFields.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import {
-  useThemeBrowserSharedStateAction,
-  useThemeBrowserSharedStateValue,
+  useThemeBrowserSharedAction,
+  useThemeBrowserSharedValue,
   useThemeBrowserStoreAction,
   useThemeBrowserStoreValue,
 } from "../context";
@@ -23,8 +23,8 @@ export function BrowserSearchFields() {
   const setSearchOpts = useThemeBrowserStoreAction("setSearchOpts");
   const refreshThemes = useThemeBrowserStoreAction("refreshThemes");
 
-  const browserCardSize = useThemeBrowserSharedStateValue("browserCardSize");
-  const setBrowserCardSize = useThemeBrowserSharedStateAction("setBrowserCardSize");
+  const browserCardSize = useThemeBrowserSharedValue("browserCardSize");
+  const setBrowserCardSize = useThemeBrowserSharedAction("setBrowserCardSize");
 
   const formattedFilters: DropdownOption[] = useMemo(() => {
     const totalNumOptions = Object.values(filters).reduce((acc, cur) => acc + Number(cur), 0);

src/modules/theme-store/components/ThemeBrowserPage.tsx

@@ -1,15 +1,15 @@
 import { Focusable } from "@decky/ui";
 import { useThemeBrowserStoreAction, useThemeBrowserStoreValue } from "../context";
 import { BrowserSearchFields } from "./BrowserSearchFields";
-import { useCSSLoaderStateValue } from "@/backend";
+import { useCSSLoaderValue } from "@/backend";
 import { ThemeCard } from "./ThemeCard";
 import { useEffect, useRef } from "react";
 
 export function ThemeBrowserPage() {
   const initializeStore = useThemeBrowserStoreAction("initializeStore");
   const themes = useThemeBrowserStoreValue("themes");
   const indexToSnapToOnLoad = useThemeBrowserStoreValue("indexToSnapToOnLoad");
-  const backendVersion = useCSSLoaderStateValue("backendVersion");
+  const backendVersion = useCSSLoaderValue("backendVersion");
 
   const endOfPageRef = useRef<HTMLDivElement>(null);
   const firstCardRef = useRef<HTMLDivElement>(null);