From b909ed14fd3e831e7961d9f4a1df358ca385065e Mon Sep 17 00:00:00 2001 From: Beebles <102569435+beebls@users.noreply.github.com> Date: Sat, 12 Oct 2024 16:47:30 -0600 Subject: [PATCH] fix selected preset and style fixes --- .../decky-backend-repository-impl.ts | 2 ++ src/backend/state/theme-store.ts | 8 +++++++- .../components/ExpandedViewButtonsSection.tsx | 11 +++++++---- .../components/ExpandedViewScrollingSection.tsx | 2 +- .../expanded-view/pages/ExpandedViewPage.tsx | 7 ++++--- .../context/ThemeBrowserSharedStore.tsx | 2 ++ .../theme-store/context/ThemeBrowserStore.tsx | 4 ++++ src/styles/styles-as-string.ts | 17 +++++++++++++---- src/styles/styles.css | 13 +++++++++++++ 9 files changed, 53 insertions(+), 13 deletions(-) diff --git a/src/backend-impl/decky-backend-repository-impl.ts b/src/backend-impl/decky-backend-repository-impl.ts index 1d6f369..4735fb0 100644 --- a/src/backend-impl/decky-backend-repository-impl.ts +++ b/src/backend-impl/decky-backend-repository-impl.ts @@ -17,6 +17,8 @@ class DeckyBackendRepository implements IBackendRepository { async fetch(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}`); diff --git a/src/backend/state/theme-store.ts b/src/backend/state/theme-store.ts index 8289e22..427f9e9 100644 --- a/src/backend/state/theme-store.ts +++ b/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 { const queryStr = "?ids=" + idsToQuery.join("."); try { + console.log("FETCHTHEMEIDS STRING", themes.length); const value = await apiFetch(`/themes/ids${queryStr}`); + console.log("VALUE", value); if (value) return value; } catch {} return []; diff --git a/src/modules/expanded-view/components/ExpandedViewButtonsSection.tsx b/src/modules/expanded-view/components/ExpandedViewButtonsSection.tsx index ff42658..600efeb 100644 --- a/src/modules/expanded-view/components/ExpandedViewButtonsSection.tsx +++ b/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 ( -
+ {/* Star */}
@@ -81,7 +83,8 @@ export function ExpandedViewButtonsSection() { }} > - {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"} @@ -107,6 +110,6 @@ export function ExpandedViewButtonsSection() { )}
-
+ ); } diff --git a/src/modules/expanded-view/components/ExpandedViewScrollingSection.tsx b/src/modules/expanded-view/components/ExpandedViewScrollingSection.tsx index cc32b50..cc6090a 100644 --- a/src/modules/expanded-view/components/ExpandedViewScrollingSection.tsx +++ b/src/modules/expanded-view/components/ExpandedViewScrollingSection.tsx @@ -61,7 +61,7 @@ export function ExpandedViewScrollingSection() { {/* Targets */} Targets - + {data.targets.map((target) => ( -
- + + -
+ ); } diff --git a/src/modules/theme-store/context/ThemeBrowserSharedStore.tsx b/src/modules/theme-store/context/ThemeBrowserSharedStore.tsx index b7a4978..754d531 100644 --- a/src/modules/theme-store/context/ThemeBrowserSharedStore.tsx +++ b/src/modules/theme-store/context/ThemeBrowserSharedStore.tsx @@ -27,6 +27,8 @@ const themeBrowserSharedStore = createStore((set) => { }; }); +export const getThemeBrowserSharedState = () => themeBrowserSharedStore.getState(); + const useThemeBrowserSharedState = (fn: (state: IThemeBrowserSharedStore) => any) => useStore(themeBrowserSharedStore, fn); diff --git a/src/modules/theme-store/context/ThemeBrowserStore.tsx b/src/modules/theme-store/context/ThemeBrowserStore.tsx index 85f48ae..87135cf 100644 --- a/src/modules/theme-store/context/ThemeBrowserStore.tsx +++ b/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( diff --git a/src/styles/styles-as-string.ts b/src/styles/styles-as-string.ts index bcdb4d1..09c0e58 100644 --- a/src/styles/styles-as-string.ts +++ b/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,6 +434,12 @@ 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; @@ -443,6 +447,11 @@ export const styles = ` width: fit-content !important; } +.cl_expandedview_targetbutton.gpfocuswithin { + background: white !important; + color: black !important; +} + .cl_expandedview_buttonscontainer { position: sticky !important; padding-top: 1em !important; diff --git a/src/styles/styles.css b/src/styles/styles.css index 3bd2cec..ab807c8 100644 --- a/src/styles/styles.css +++ b/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,6 +436,12 @@ 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; @@ -441,6 +449,11 @@ width: fit-content !important; } +.cl_expandedview_targetbutton.gpfocuswithin { + background: white !important; + color: black !important; +} + .cl_expandedview_buttonscontainer { position: sticky !important; padding-top: 1em !important;