fix selected preset and style fixes

src/backend-impl/decky-backend-repository-impl.ts

@@ -17,6 +17,8 @@ class DeckyBackendRepository implements IBackendRepository {
   async fetch<Return>(url: string, request: RequestInit) {
     try {
       console.debug("CSSLOADER FETCH", url, request);
+      // TODO: Think this is a decky types issue
+      // @ts-ignore
       const res = await fetchNoCors(url, request);
       if (!res.ok) {
         throw new Error(`Res Not Okay - Code ${res.status}`);

src/backend/state/theme-store.ts

@@ -145,7 +145,11 @@ export const createCSSLoaderStore = (backend: Backend) =>
           set({ backendVersion });
 
           const themes = (await backend.getThemes()) ?? [];
-          set({ themes, selectedPreset: themes.find((e) => e.flags.includes(Flags.isPreset)) });
+          console.log("THEMES", themes.length, themes.filter((e) => e.enabled).length);
+          set({
+            themes,
+            selectedPreset: themes.find((e) => e.flags.includes(Flags.isPreset) && e.enabled),
+          });
 
           const themePath = await backend.fetchThemePath();
           set({ themeRootPath: themePath });
@@ -284,7 +288,9 @@ export const createCSSLoaderStore = (backend: Backend) =>
         async function fetchThemeIDS(idsToQuery: string[]): Promise<MinimalCSSThemeInfo[]> {
           const queryStr = "?ids=" + idsToQuery.join(".");
           try {
+            console.log("FETCHTHEMEIDS STRING", themes.length);
             const value = await apiFetch<MinimalCSSThemeInfo[]>(`/themes/ids${queryStr}`);
+            console.log("VALUE", value);
             if (value) return value;
           } catch {}
           return [];

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

@@ -1,7 +1,7 @@
 import { shortenNumber, useThemeInstallState } from "@/lib";
 import { useExpandedViewAction, useExpandedViewValue } from "../context";
 import { FaRegStar, FaStar } from "react-icons/fa";
-import { DialogButton } from "@decky/ui";
+import { DialogButton, Focusable } from "@decky/ui";
 import { useEffect, useRef, useState } from "react";
 import { useCSSLoaderAction, useCSSLoaderValue } from "@/backend";
 import { ImCog } from "react-icons/im";
@@ -36,8 +36,10 @@ export function ExpandedViewButtonsSection() {
     }
   }, [downloadButtonRef, hasBeenFocused]);
 
+  console.log("INSTALL STATUS, ", installStatus);
+
   return (
-    <div className="cl_expandedview_buttonscontainer">
+    <Focusable className="cl_expandedview_buttonscontainer">
       {/* Star */}
       <div className="cl_expandedview_singlebuttoncontainer">
         <div className="flex w-full justify-between">
@@ -81,7 +83,8 @@ export function ExpandedViewButtonsSection() {
             }}
           >
             <span className="CssLoader_ThemeBrowser_ExpandedView_InstallText">
-              {installStatus === "installed" && "Reinstall"}
+              {/* Technically 'local' should mean a remote copy doesn't exist, but there might be weird network race conditions on the install status check */}
+              {(installStatus === "installed" || installStatus === "local") && "Reinstall"}
               {installStatus === "outdated" && "Update"}
               {installStatus === "notinstalled" && "Install"}
             </span>
@@ -107,6 +110,6 @@ export function ExpandedViewButtonsSection() {
           )}
         </div>
       </div>
-    </div>
+    </Focusable>
   );
 }

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

@@ -61,7 +61,7 @@ export function ExpandedViewScrollingSection() {
           {/* Targets */}
           <Focusable className="flex flex-col gap-1">
             <span className="font-bold">Targets</span>
-            <Focusable className="flex gap-1">
+            <Focusable className="cl_expandedview_targetbuttonscontainer">
               {data.targets.map((target) => (
                 <DialogButton
                   onOKActionDescription={`View Other '${target}' Themes`}

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

@@ -1,3 +1,4 @@
+import { Focusable } from "@decky/ui";
 import {
   ExpandedViewLoadingPage,
   ExpandedViewCssVariables,
@@ -16,11 +17,11 @@ export function ExpandedViewPage() {
 
   return (
     <div className="cl_fullscreenroute_container">
-      <div className="cl_expandedview_container">
-        <ExpandedViewCssVariables />
+      <ExpandedViewCssVariables />
+      <Focusable className="cl_expandedview_container">
         <ExpandedViewScrollingSection />
         <ExpandedViewButtonsSection />
-      </div>
+      </Focusable>
     </div>
   );
 }

src/modules/theme-store/context/ThemeBrowserSharedStore.tsx

@@ -27,6 +27,8 @@ const themeBrowserSharedStore = createStore<IThemeBrowserSharedStore>((set) => {
   };
 });
 
+export const getThemeBrowserSharedState = () => themeBrowserSharedStore.getState();
+
 const useThemeBrowserSharedState = (fn: (state: IThemeBrowserSharedStore) => any) =>
   useStore(themeBrowserSharedStore, fn);
 

src/modules/theme-store/context/ThemeBrowserStore.tsx

@@ -3,6 +3,7 @@ import { FilterQueryResponse, ThemeQueryRequest, ThemeQueryResponse } from "@/ty
 import { StoreApi, createStore, useStore } from "zustand";
 import { getCSSLoaderState } from "@/backend";
 import { isEqual } from "lodash";
+import { getThemeBrowserSharedState } from "./ThemeBrowserSharedStore";
 
 interface ThemeBrowserStoreValues {
   themes: ThemeQueryResponse;
@@ -110,6 +111,9 @@ export function ThemeBrowserStoreProvider({
       getThemes: async () => {
         try {
           const { searchOpts } = get();
+          const { targetOverride } = getThemeBrowserSharedState();
+          const formattedSearchOpts = { ...searchOpts };
+          targetOverride && (formattedSearchOpts.filters = targetOverride);
 
           const { apiFetch } = getCSSLoaderState();
           const response = await apiFetch<ThemeQueryResponse>(

src/styles/styles-as-string.ts

@@ -1,10 +1,6 @@
 import { gamepadDialogClasses } from "@decky/ui";
 
 export const styles = `
-/* THIS FILE IS NOT USED IN BUILD */
-/* ANY MODIFICATIONS HERE MUST BE COPY PASTED INTO stylesAsString.ts */
-/* THAT IS NEEDED FOR STATIC CLASS INJECTIOn */
-
 .flex {
   display: flex !important;
 }
@@ -356,6 +352,8 @@ export const styles = `
 .cl_expandedview_scrollpanel {
   display: flex !important;
   margin-bottom: 40px !important;
+  /* To be completely honest, I'm not sure why this isn't inherited from fullscrenroute_container */
+  height: calc(100vh - 40px) !important
 }
 
 .cl_expandedview_themedatacontainer {
@@ -436,13 +434,24 @@ export const styles = `
   color: rgb(26, 159, 255) !important;
 }
 
+.cl_expandedview_targetbuttonscontainer {
+  display: flex !important;
+  gap: 0.25rem !important;
+  padding-bottom: 80px !important;
+}
+
 .cl_expandedview_targetbutton {
   background: rgba(59, 90, 114, 0.5) !important;
   color: rgb(26, 159, 255) !important;
   padding: 8px 12px !important;
   width: fit-content !important;
 }
 
+.cl_expandedview_targetbutton.gpfocuswithin {
+  background: white !important;
+  color: black !important;
+}
+
 .cl_expandedview_buttonscontainer {
   position: sticky !important;
   padding-top: 1em !important;

src/styles/styles.css

@@ -354,6 +354,8 @@
 .cl_expandedview_scrollpanel {
   display: flex !important;
   margin-bottom: 40px !important;
+  /* To be completely honest, I'm not sure why this isn't inherited from fullscrenroute_container */
+  height: calc(100vh - 40px) !important
 }
 
 .cl_expandedview_themedatacontainer {
@@ -434,13 +436,24 @@
   color: rgb(26, 159, 255) !important;
 }
 
+.cl_expandedview_targetbuttonscontainer {
+  display: flex !important;
+  gap: 0.25rem !important;
+  padding-bottom: 80px !important;
+}
+
 .cl_expandedview_targetbutton {
   background: rgba(59, 90, 114, 0.5) !important;
   color: rgb(26, 159, 255) !important;
   padding: 8px 12px !important;
   width: fit-content !important;
 }
 
+.cl_expandedview_targetbutton.gpfocuswithin {
+  background: white !important;
+  color: black !important;
+}
+
 .cl_expandedview_buttonscontainer {
   position: sticky !important;
   padding-top: 1em !important;