",
22 | "license": "GPL-2.0-or-later",
23 | "bugs": {
24 | "url": "https://github.com/SteamDeckHomebrew/decky-plugin-template/issues"
25 | },
26 | "homepage": "https://github.com/SteamDeckHomebrew/decky-plugin-template#readme",
27 | "devDependencies": {
28 | "@rollup/plugin-commonjs": "^21.1.0",
29 | "@rollup/plugin-json": "^4.1.0",
30 | "@rollup/plugin-node-resolve": "^13.2.1",
31 | "@rollup/plugin-replace": "^4.0.0",
32 | "@rollup/plugin-typescript": "^8.3.2",
33 | "@types/color": "^3.0.3",
34 | "@types/lodash": "^4.14.191",
35 | "@types/react": "16.14.0",
36 | "@types/webpack": "^5.28.0",
37 | "rollup": "^2.70.2",
38 | "rollup-plugin-import-assets": "^1.1.1",
39 | "rollup-plugin-styles": "^4.0.0",
40 | "shx": "^0.3.4",
41 | "tslib": "^2.4.0",
42 | "typescript": "^4.6.4"
43 | },
44 | "dependencies": {
45 | "color": "^4.2.3",
46 | "decky-frontend-lib": "^3.25.0",
47 | "lodash": "^4.17.21",
48 | "react-icons": "^4.12.0"
49 | },
50 | "pnpm": {
51 | "peerDependencyRules": {
52 | "ignoreMissing": [
53 | "react",
54 | "react-dom"
55 | ]
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/backend/pythonMethods/pluginSettingsMethods.ts:
--------------------------------------------------------------------------------
1 | import { storeRead, toast } from "../../python";
2 | import { server, globalState } from "../pythonRoot";
3 | import { booleanStoreRead, stringStoreRead } from "./storeUtils";
4 |
5 | export function enableServer() {
6 | return server!.callPluginMethod("enable_server", {});
7 | }
8 |
9 | export async function getServerState() {
10 | const deckyRes = await server!.callPluginMethod<{}, boolean>("get_server_state", {});
11 | if (!deckyRes.success) {
12 | toast("Error fetching server state", deckyRes.result);
13 | return false;
14 | }
15 | return deckyRes.result;
16 | }
17 |
18 | export async function getWatchState() {
19 | const deckyRes = await server!.callPluginMethod<{}, boolean>("get_watch_state", {});
20 | if (!deckyRes.success) {
21 | toast("Error fetching watch state", deckyRes.result);
22 | return false;
23 | }
24 | return deckyRes.result;
25 | }
26 |
27 | export async function getBetaTranslationsState() {
28 | return stringStoreRead("beta_translations");
29 | }
30 |
31 | export function toggleWatchState(bool: boolean, onlyThisSession: boolean = false) {
32 | return server!.callPluginMethod<{ enable: boolean; only_this_session: boolean }, void>(
33 | "toggle_watch_state",
34 | {
35 | enable: bool,
36 | only_this_session: onlyThisSession,
37 | }
38 | );
39 | }
40 |
41 | // Todo: when i rewrite store interop, move this
42 | export function setHiddenMotd(id: string) {
43 | return server!.callPluginMethod<{ key: string; val: string }>("store_write", {
44 | key: "hiddenMotd",
45 | val: id,
46 | });
47 | }
48 | export function getHiddenMotd() {
49 | return server!.callPluginMethod<{ key: string }, string>("store_read", {
50 | key: "hiddenMotd",
51 | });
52 | }
53 |
54 | export function fetchClassMappings() {
55 | return server!.callPluginMethod<{}>("fetch_class_mappings", {});
56 | }
57 |
--------------------------------------------------------------------------------
/src/deckyPatches/NavPatch.tsx:
--------------------------------------------------------------------------------
1 | import { replacePatch } from "decky-frontend-lib";
2 | import { NavController } from "./NavControllerFinder";
3 | import { globalState, toast, storeWrite } from "../python";
4 |
5 | export function enableNavPatch(shouldToast: boolean = false) {
6 | const setGlobalState = globalState!.setGlobalState.bind(globalState);
7 | const { navPatchInstance } = globalState!.getPublicState();
8 | // Don't patch twice
9 | if (navPatchInstance) return;
10 | const patch = replacePatch(
11 | NavController.prototype,
12 | "FindNextFocusableChildInDirection",
13 | function (args) {
14 | const e = args[0];
15 | const t = args[1];
16 | const r = args[2];
17 | let n = t == 1 ? 1 : -1;
18 | // @ts-ignore
19 | for (let t = e + n; t >= 0 && t < this.m_rgChildren.length; t += n) {
20 | // @ts-ignore
21 | const e = this.m_rgChildren[t].FindFocusableNode(r);
22 | if (e && window.getComputedStyle(e.m_element).display !== "none") return e;
23 | }
24 | return null;
25 | }
26 | );
27 | setGlobalState("navPatchInstance", patch);
28 | shouldToast && toast("CSS Loader", "Nav Patch Enabled");
29 | return;
30 | }
31 |
32 | export function disableNavPatch(shouldToast: boolean = false) {
33 | const setGlobalState = globalState!.setGlobalState.bind(globalState);
34 | const { navPatchInstance } = globalState!.getPublicState();
35 | // Don't unpatch something that doesn't exist
36 | // Probably the closest thing JS can get to null dereference
37 | if (!navPatchInstance) return;
38 | navPatchInstance.unpatch();
39 | setGlobalState("navPatchInstance", undefined);
40 | shouldToast && toast("CSS Loader", "Nav Patch Disabled");
41 | return;
42 | }
43 |
44 | export function setNavPatch(value: boolean, shouldToast: boolean = false) {
45 | value ? enableNavPatch(shouldToast) : disableNavPatch(shouldToast);
46 | storeWrite("enableNavPatch", value + "");
47 | }
48 |
--------------------------------------------------------------------------------
/src/pages/settings/PresetSettings.tsx:
--------------------------------------------------------------------------------
1 | import { Focusable, PanelSection } from "decky-frontend-lib";
2 | import { useCssLoaderState } from "../../state";
3 | import { Flags, Theme } from "../../ThemeTypes";
4 | import { useState } from "react";
5 | import { PresetSelectionDropdown } from "../../components";
6 | import { FullscreenProfileEntry } from "../../components/ThemeSettings/FullscreenProfileEntry";
7 | import { installTheme } from "../../api";
8 | import * as python from "../../python";
9 |
10 | export function PresetSettings() {
11 | const { localThemeList, setGlobalState, updateStatuses } = useCssLoaderState();
12 |
13 | const [isInstalling, setInstalling] = useState(false);
14 |
15 | async function handleUpdate(e: Theme) {
16 | setInstalling(true);
17 | await installTheme(e.id);
18 | // This just updates the updateStatuses arr to know that this theme now is up to date, no need to re-fetch the API to know that
19 | setGlobalState(
20 | "updateStatuses",
21 | updateStatuses.map((f) => (f[0] === e.id ? [e.id, "installed", false] : e))
22 | );
23 | setInstalling(false);
24 | }
25 |
26 | async function handleUninstall(listEntry: Theme) {
27 | setInstalling(true);
28 | await python.deleteTheme(listEntry.name);
29 | await python.reloadBackend();
30 | setInstalling(false);
31 | }
32 |
33 | return (
34 |
35 |
36 |
37 |
40 | {localThemeList
41 | .filter((e) => e.flags.includes(Flags.isPreset))
42 | .map((e) => (
43 |
47 | ))}
48 |
49 |
50 |
19 |
20 | {
23 | setGlobalState("currentTab", tabID);
24 | }}
25 | tabs={[
26 | {
27 | title: "All Themes",
28 | content: ,
29 | id: "ThemeBrowser",
30 | },
31 | ...(!!apiMeData
32 | ? [
33 | {
34 | title: "Starred Themes",
35 | content: ,
36 | id: "StarredThemes",
37 | },
38 | ...(apiMeData.permissions.includes(Permissions.viewSubs)
39 | ? [
40 | {
41 | title: "Submissions",
42 | content: ,
43 | id: "SubmissionsPage",
44 | },
45 | ]
46 | : []),
47 | ]
48 | : []),
49 | {
50 | title: "DeckThemes Account",
51 | content: ,
52 | id: "LogInPage",
53 | },
54 | ]}
55 | />
56 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/Modals/CreatePresetModal.tsx:
--------------------------------------------------------------------------------
1 | import { ConfirmModal, TextField } from "decky-frontend-lib";
2 | import { useState } from "react";
3 | import * as python from "../../python";
4 | import { CssLoaderContextProvider, useCssLoaderState } from "../../state";
5 |
6 | export function CreatePresetModalRoot({ closeModal }: { closeModal: any }) {
7 | return (
8 | <>
9 | {/* @ts-ignore */}
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
17 | function CreatePresetModal({ closeModal }: { closeModal: () => void }) {
18 | const { localThemeList, selectedPreset } = useCssLoaderState();
19 | const [presetName, setPresetName] = useState("");
20 | const enabledNumber = localThemeList.filter((e) => e.enabled).length;
21 |
22 | return (
23 | {
29 | if (presetName.length === 0) {
30 | python.toast("No Name!", "Please add a name to your profile.");
31 | return;
32 | }
33 | // TODO: Potentially dont need 2 reloads here, not entirely sure
34 | await python.generatePreset(presetName);
35 | await python.reloadBackend();
36 | if (selectedPreset) {
37 | await python.setThemeState(selectedPreset?.name, false);
38 | }
39 | await python.setThemeState(presetName + ".profile", true);
40 | await python.getInstalledThemes();
41 | closeModal();
42 | }}
43 | >
44 |
45 | {
49 | setPresetName(e.target.value);
50 | }}
51 | />
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/TitleView.tsx:
--------------------------------------------------------------------------------
1 | import { DialogButton, Navigation, staticClasses, Focusable } from "decky-frontend-lib";
2 | import { BsGearFill } from "react-icons/bs";
3 | import { FaDownload } from "react-icons/fa";
4 | import { useCssLoaderState } from "../state";
5 |
6 | export function TitleView({ onDocsClick }: { onDocsClick?: () => {} }) {
7 | const { localThemeList } = useCssLoaderState();
8 |
9 | const onSettingsClick = () => {
10 | Navigation.CloseSideMenus();
11 | Navigation.Navigate("/cssloader/settings");
12 | };
13 |
14 | const onStoreClick = () => {
15 | Navigation.CloseSideMenus();
16 | Navigation.Navigate("/cssloader/theme-manager");
17 | };
18 |
19 | return (
20 |
31 |
46 | CSS Loader
47 |
57 |
58 |
59 |
63 |
64 |
65 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/ThemeManager/LoadMoreButton.tsx:
--------------------------------------------------------------------------------
1 | import { DialogButton } from "decky-frontend-lib";
2 | import { useState, Dispatch, SetStateAction, useEffect } from "react";
3 | import { ThemeQueryRequest, ThemeQueryResponse } from "../../apiTypes";
4 | import { generateParamStr } from "../../logic";
5 | import { genericGET } from "../../api";
6 | import { useCssLoaderState } from "../../state";
7 |
8 | export function LoadMoreButton({
9 | fetchPath = "/themes",
10 | origSearchOpts,
11 | themeArr,
12 | themeArrVarName,
13 | paramStrFilterPrepend = "",
14 | setSnapIndex = undefined,
15 | }: {
16 | fetchPath: string;
17 | origSearchOpts: ThemeQueryRequest;
18 | themeArrVarName: string;
19 | themeArr: ThemeQueryResponse;
20 | paramStrFilterPrepend: string;
21 | setSnapIndex?: Dispatch>;
22 | }) {
23 | const { setGlobalState } = useCssLoaderState();
24 | const [loadMoreCurPage, setLoadMorePage] = useState(1);
25 | const [loading, setLoading] = useState(false);
26 |
27 | function loadMore() {
28 | setLoading(true);
29 | // This just changes "All" to "", as that is what the backend looks for
30 | let searchOptClone = { ...origSearchOpts };
31 | searchOptClone.page = loadMoreCurPage + 1;
32 | const searchOpts = generateParamStr(
33 | searchOptClone.filters !== "All" ? searchOptClone : { ...searchOptClone, filters: "" },
34 | paramStrFilterPrepend
35 | );
36 | genericGET(`${fetchPath}${searchOpts}`).then((data) => {
37 | if (data) {
38 | setGlobalState(themeArrVarName, {
39 | total: themeArr.total,
40 | items: [...themeArr.items, ...data.items],
41 | });
42 | if (setSnapIndex) {
43 | setSnapIndex(origSearchOpts.perPage * loadMoreCurPage - 1);
44 | }
45 | setLoadMorePage((curPage) => curPage + 1);
46 | }
47 | setLoading(false);
48 | });
49 | }
50 |
51 | useEffect(() => {
52 | setLoadMorePage(1);
53 | }, [origSearchOpts]);
54 | return (
55 | <>
56 | {themeArr.items.length < themeArr.total ? (
57 | <>
58 |
59 | Load More
60 |
61 |
62 | ) : null}
63 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/.github/workflows/push.yml:
--------------------------------------------------------------------------------
1 | name: Builder
2 |
3 | on: ["push", "pull_request", "workflow_dispatch"]
4 |
5 | jobs:
6 | build:
7 | name: Build SDH-CSSLoader for Decky
8 | runs-on: ubuntu-20.04
9 |
10 | steps:
11 | - name: Checkout
12 | uses: actions/checkout@v3
13 |
14 | - name: Set up NodeJS 18
15 | uses: actions/setup-node@v3
16 | with:
17 | node-version: 18
18 |
19 | - name: Install JS dependencies
20 | run: |
21 | npm i -g pnpm
22 | pnpm install
23 |
24 | - name: Build Frontend
25 | run: |
26 | pnpm run build
27 |
28 | - name: Package Release
29 | run: |
30 | mkdir "SDH-CssLoader"
31 | cp *.py "./SDH-CssLoader"
32 | cp *.json "./SDH-CssLoader"
33 | cp LICENSE "./SDH-CssLoader"
34 | cp README.md "./SDH-CssLoader"
35 | cp -r dist "./SDH-CssLoader"
36 | mkdir upload
37 | mv "./SDH-CssLoader" ./upload
38 |
39 | - name: Upload package artifact
40 | uses: actions/upload-artifact@v3
41 | with:
42 | name: SDH-CSSLoader-Decky
43 | path: ./upload
44 |
45 | build-standalone-win:
46 | name: Build SDH-CSSLoader Standalone for Windows
47 | runs-on: windows-2022
48 |
49 | steps:
50 | - name: Checkout
51 | uses: actions/checkout@v3
52 |
53 | - name: Set up Python 3.10.2
54 | uses: actions/setup-python@v4
55 | with:
56 | python-version: "3.10.2"
57 |
58 | - name: Install Python dependencies
59 | run: |
60 | python -m pip install --upgrade pip
61 | pip install pyinstaller==5.5
62 | pip install -r requirements.txt
63 |
64 | - name: Build Python Backend
65 | run: pyinstaller --noconfirm --onefile --add-data "./assets;/assets" --name "CssLoader-Standalone" ./main.py ./css_win_tray.py
66 |
67 | - name: Build Python Backend Headless
68 | run: pyinstaller --noconfirm --noconsole --onefile --add-data "./assets;/assets" --name "CssLoader-Standalone-Headless" ./main.py ./css_win_tray.py
69 |
70 | - name: Upload package artifact
71 | uses: actions/upload-artifact@v3
72 | with:
73 | name: SDH-CSSLoader-Win-Standalone
74 | path: |
75 | ./dist/CssLoader-Standalone.exe
76 | ./dist/CssLoader-Standalone-Headless.exe
77 |
--------------------------------------------------------------------------------
/src/components/QAMTab/QAMThemeToggleList.tsx:
--------------------------------------------------------------------------------
1 | import { Focusable } from "decky-frontend-lib";
2 | import { useCssLoaderState } from "../../state";
3 | import { ThemeToggle } from "../ThemeToggle";
4 | import { Flags } from "../../ThemeTypes";
5 | import { ThemeErrorCard } from "../ThemeErrorCard";
6 | import { BsArrowDown } from "react-icons/bs";
7 | import { FaEyeSlash } from "react-icons/fa";
8 |
9 | export function QAMThemeToggleList() {
10 | const { localThemeList, unpinnedThemes } = useCssLoaderState();
11 |
12 | if (localThemeList.length === 0) {
13 | return (
14 | <>
15 | You have no themes installed. Get started by selecting the download icon above!
16 |
17 | );
18 | }
19 |
20 | return (
21 | <>
22 | {/* This styles the collapse buttons, putting it here just means it only needs to be rendered once instead of like 20 times */}
23 |
41 |
42 | <>
43 | {localThemeList
44 | .filter((e) => !unpinnedThemes.includes(e.id) && !e.flags.includes(Flags.isPreset))
45 | .map((x) => (
46 |
47 | ))}
48 |
49 |
50 | {unpinnedThemes.length > 0 && (
51 |
60 |
61 |
62 | {unpinnedThemes.length} theme{unpinnedThemes.length > 1 ? "s are" : "is"} hidden.
63 |
64 |
47 |
48 | New Profile
49 |
50 | ),
51 | },
52 | ]}
53 | onChange={async ({ data }) => {
54 | if (data === "New Profile") {
55 | showModal(
56 | // @ts-ignore
57 |
58 | );
59 | rerender();
60 | return;
61 | }
62 | await changePreset(data, localThemeList);
63 | getInstalledThemes();
64 | }}
65 | />
66 |
67 | )}
68 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/ThemeSettings/FullscreenProfileEntry.tsx:
--------------------------------------------------------------------------------
1 | import { DialogButton, Focusable, PanelSectionRow } from "decky-frontend-lib";
2 | import { Flags, LocalThemeStatus, Theme } from "../../ThemeTypes";
3 | import { useCssLoaderState } from "../../state";
4 | import { AiOutlineDownload } from "react-icons/ai";
5 | import { FaTrash } from "react-icons/fa";
6 | import { installTheme } from "../../api";
7 |
8 | export function FullscreenProfileEntry({
9 | data: e,
10 | handleUninstall,
11 | isInstalling,
12 | handleUpdate,
13 | }: {
14 | data: Theme;
15 | handleUninstall: (e: Theme) => void;
16 | handleUpdate: (e: Theme) => void;
17 | isInstalling: boolean;
18 | }) {
19 | const { updateStatuses } = useCssLoaderState();
20 | let [updateStatus]: [LocalThemeStatus] = ["installed"];
21 | const themeArrPlace = updateStatuses.find((f) => f[0] === e.id);
22 | if (themeArrPlace) {
23 | updateStatus = themeArrPlace[1];
24 | }
25 | return (
26 |
27 |
33 |
{e.display_name}
34 |
43 | {/* Update Button */}
44 | {updateStatus === "outdated" && (
45 | handleUpdate(e)}
53 | disabled={isInstalling}
54 | >
55 |
56 |
57 | )}
58 | {/* This shows when a theme is local, but not a preset */}
59 | {updateStatus === "local" && !e.flags.includes(Flags.isPreset) && (
60 |
68 | Local Theme
69 |
70 | )}
71 | handleUninstall(e)}
78 | disabled={isInstalling}
79 | >
80 |
81 |
82 |
83 |
68 | {motd?.name}
69 |
84 |
89 |
90 |
91 | {motd?.description}
92 |
93 |
94 | );
95 | }
96 | return null;
97 | }
98 |
--------------------------------------------------------------------------------
/src/backend/backendHelpers/toggleTheme.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction } from "react";
2 | import { Flags, Theme } from "../../ThemeTypes";
3 | import * as python from "../../python";
4 | import { OptionalDepsModalRoot } from "../../components";
5 | import { showModal } from "decky-frontend-lib";
6 | import { enableNavPatch } from "../../deckyPatches/NavPatch";
7 | import { NavPatchInfoModalRoot } from "../../deckyPatches/NavPatchInfoModal";
8 |
9 | // rerender and setCollapsed only apply to the QAM list version of the ThemeToggle, not the one in the fullscreen 'Your Themes' modal
10 | export async function toggleTheme(
11 | data: Theme,
12 | enabled: boolean,
13 | rerender: () => void = () => {},
14 | setCollapsed: Dispatch> = () => {}
15 | ) {
16 | const { selectedPreset, navPatchInstance } = python.globalState!.getPublicState();
17 |
18 | // Optional Deps Themes
19 | if (enabled && data.flags.includes(Flags.optionalDeps)) {
20 | showModal();
21 | rerender && rerender();
22 | } else {
23 | // Actually enabling the theme
24 | await python.setThemeState(data.name, enabled);
25 | await python.getInstalledThemes();
26 | }
27 |
28 | // Re-collapse menu
29 | setCollapsed && setCollapsed(true);
30 |
31 | // Dependency Toast
32 | if (data.dependencies.length > 0) {
33 | if (enabled) {
34 | python.toast(
35 | `${data.display_name} enabled other themes`,
36 | // This lists out the themes by name, but often overflowed off screen
37 | // @ts-ignore
38 | // `${new Intl.ListFormat().format(data.dependencies)} ${
39 | // data.dependencies.length > 1 ? "are" : "is"
40 | // } required for this theme`
41 | // This just gives the number of themes
42 | `${
43 | data.dependencies.length === 1
44 | ? `1 other theme is required by ${data.display_name}`
45 | : `${data.dependencies.length} other themes are required by ${data.display_name}`
46 | }`
47 | );
48 | }
49 | if (!enabled && !data.flags.includes(Flags.dontDisableDeps)) {
50 | python.toast(
51 | `${data.display_name} disabled other themes`,
52 | `${
53 | data.dependencies.length === 1
54 | ? `1 theme was originally enabled by ${data.display_name}`
55 | : `${data.dependencies.length} themes were originally enabled by ${data.display_name}`
56 | }`
57 | );
58 | }
59 | }
60 |
61 | // Nav Patch
62 | if (enabled && data.flags.includes(Flags.navPatch) && !navPatchInstance) {
63 | showModal();
64 | }
65 |
66 | // Preset Updating
67 | if (!selectedPreset) return;
68 | // Fetch this here so that the data is up to date
69 | const { localThemeList } = python.globalState!.getPublicState();
70 |
71 | // This is copied from the desktop codebase
72 | await python.generatePresetFromThemeNames(
73 | selectedPreset.name,
74 | localThemeList.filter((e) => e.enabled && !e.flags.includes(Flags.isPreset)).map((e) => e.name)
75 | );
76 | // Getting the new data for the preset
77 | await python.getInstalledThemes();
78 | }
79 |
--------------------------------------------------------------------------------
/src/pages/settings/SettingsPageRouter.tsx:
--------------------------------------------------------------------------------
1 | import { SidebarNavigation } from "decky-frontend-lib";
2 | import { BsFolderFill, BsGearFill } from "react-icons/bs";
3 | import { RiPaintFill, RiSettings2Fill } from "react-icons/ri";
4 | import { ThemeSettings } from "./ThemeSettings";
5 | import { PresetSettings } from "./PresetSettings";
6 | import { PluginSettings } from "./PluginSettings";
7 | import { Credits } from "./Credits";
8 | import { AiFillGithub, AiFillHeart } from "react-icons/ai";
9 | import { DonatePage } from "./DonatePage";
10 | import { FaFolder, FaGithub, FaHeart } from "react-icons/fa";
11 |
12 | export function SettingsPageRouter() {
13 | return (
14 | <>
15 |
65 | ,
70 | route: "/cssloader/settings/themes",
71 | content: ,
72 | },
73 | {
74 | title: "Profiles",
75 | icon: ,
76 | route: "/cssloader/settings/profiles",
77 |
78 | content: ,
79 | },
80 | {
81 | title: "Settings",
82 | icon: ,
83 | route: "/cssloader/settings/plugin",
84 |
85 | content: ,
86 | },
87 | {
88 | title: "Donate",
89 | icon: ,
90 | route: "/cssloader/settings/donate",
91 |
92 | content: ,
93 | },
94 | {
95 | title: "Credits",
96 | icon: ,
97 | route: "/cssloader/settings/credits",
98 |
99 | content: ,
100 | },
101 | ]}
102 | >
103 |
104 | );
105 | }
106 |
--------------------------------------------------------------------------------
/src/pages/theme-manager/StarredThemesPage.tsx:
--------------------------------------------------------------------------------
1 | import { Focusable } from "decky-frontend-lib";
2 | import { useCssLoaderState } from "../../state";
3 | import * as python from "../../python";
4 | import { BrowserSearchFields, LoadMoreButton, VariableSizeCard } from "../../components";
5 | import { useEffect, useRef, useState } from "react";
6 | import { isEqual } from "lodash";
7 | import { getThemes } from "../../api";
8 |
9 | export function StarredThemesPage() {
10 | const {
11 | apiFullToken,
12 | apiMeData,
13 | starredSearchOpts: searchOpts,
14 | starredServerFilters: serverFilters,
15 | starredThemeList: themeArr,
16 | browserCardSize,
17 | prevStarSearchOpts: prevSearchOpts,
18 | backendVersion,
19 | } = useCssLoaderState();
20 |
21 | function reloadThemes() {
22 | getThemes(searchOpts, "/users/me/stars", "starredThemeList", setSnapIndex, true);
23 | python.reloadBackend();
24 | }
25 |
26 | useEffect(() => {
27 | if (!isEqual(prevSearchOpts, searchOpts) || themeArr.total === 0) {
28 | getThemes(searchOpts, "/users/me/stars", "starredThemeList", setSnapIndex, true);
29 | }
30 | }, [searchOpts, prevSearchOpts, apiMeData]);
31 |
32 | const endOfPageRef = useRef();
33 | const [indexToSnapTo, setSnapIndex] = useState(-1);
34 | useEffect(() => {
35 | if (endOfPageRef?.current) {
36 | endOfPageRef?.current?.focus();
37 | }
38 | }, [indexToSnapTo]);
39 |
40 | if (!apiFullToken) {
41 | return (
42 | <>
43 |
52 | You Are Not Logged In!
53 | Link your deck to your deckthemes.com account to sync Starred Themes
54 |
55 |
56 | );
57 | }
58 | return (
59 | <>
60 |
70 |
79 | {themeArr.items
80 | .filter((e) => e.manifestVersion <= backendVersion)
81 | .map((e, i) => (
82 |
89 | ))}
90 |
91 |
111 |
112 | );
113 | }
114 |
--------------------------------------------------------------------------------
/src/pages/theme-manager/LogInPage.tsx:
--------------------------------------------------------------------------------
1 | import { DialogButton, Focusable, TextField, ToggleField } from "decky-frontend-lib";
2 | import { SiWebauthn } from "react-icons/si";
3 | import { useEffect, useMemo, useState, VFC } from "react";
4 | import { logInWithShortToken, logOut } from "../../api";
5 | import { useCssLoaderState } from "../../state";
6 | import { enableServer, getServerState, storeWrite } from "../../python";
7 | import { disableNavPatch, enableNavPatch } from "../../deckyPatches/NavPatch";
8 | import { FaArrowRightToBracket } from "react-icons/fa6";
9 |
10 | export const LogInPage: VFC = () => {
11 | const { apiShortToken, apiFullToken, apiMeData } = useCssLoaderState();
12 | const [shortTokenInterimValue, setShortTokenIntValue] = useState(apiShortToken);
13 |
14 | return (
15 | // The outermost div is to push the content down into the visible area
16 |
17 |
18 | {apiFullToken ? (
19 |
Your Account
20 | ) : (
21 |
22 | Log In
23 |
24 | )}
25 | {apiFullToken ? (
26 | <>
27 |
28 |
29 | {apiMeData ? (
30 | <>
31 | Logged In As {apiMeData.username}
32 |
33 | ) : (
34 | Loading...
35 | )}
36 |
37 |
49 | Unlink My Deck
50 |
51 |
52 |
53 | ) : (
54 | <>
55 |
56 |
57 | setShortTokenIntValue(e.target.value)}
63 | />
64 |
65 | {
68 | logInWithShortToken(shortTokenInterimValue);
69 | }}
70 | style={{
71 | maxWidth: "30%",
72 | height: "50%",
73 | marginLeft: "auto",
74 | display: "flex",
75 | alignItems: "center",
76 | justifyContent: "center",
77 | gap: "0.5em",
78 | }}
79 | >
80 |
81 | Log In
82 |
83 |
84 |
85 | )}
86 |
87 | Logging in gives you access to star themes, saving them to their own page where you can
88 | quickly find them.
89 |
90 | Create an account on deckthemes.com and generate an account key on your profile page.
91 |
92 |
93 |
94 |
52 | You Are Not Logged In!
53 | Link your deck to your deckthemes.com account to sync Starred Themes
54 |
55 |
56 | );
57 | }
58 | return (
59 | <>
60 |
70 |
79 | {themeArr.items
80 | .filter((e) => e.manifestVersion <= backendVersion)
81 | .map((e, i) => (
82 |
89 | ))}
90 |
91 |
111 |
112 | );
113 | }
114 |
--------------------------------------------------------------------------------
/src/components/ThemeSettings/FullscreenSingleThemeEntry.tsx:
--------------------------------------------------------------------------------
1 | import { DialogButton, Focusable, ToggleField, showModal } from "decky-frontend-lib";
2 | import { LocalThemeStatus, Theme } from "../../ThemeTypes";
3 | import { useCssLoaderState } from "../../state";
4 | import * as python from "../../python";
5 | import { ImCog } from "react-icons/im";
6 | import { toggleTheme } from "../../backend/backendHelpers/toggleTheme";
7 | import { ThemeSettingsModalRoot } from "../Modals/ThemeSettingsModal";
8 | import { FaEye, FaEyeSlash, FaTrash } from "react-icons/fa";
9 | import { BsGearFill } from "react-icons/bs";
10 |
11 | export function FullscreenSingleThemeEntry({
12 | data: e,
13 | showModalButtonPrompt = false,
14 | handleUninstall,
15 | handleUpdate,
16 | isInstalling,
17 | }: {
18 | data: Theme;
19 | showModalButtonPrompt?: boolean;
20 | handleUninstall: (e: Theme) => void;
21 | handleUpdate: (e: Theme) => void;
22 | isInstalling: boolean;
23 | }) {
24 | const { unpinnedThemes, updateStatuses } = useCssLoaderState();
25 | const isPinned = !unpinnedThemes.includes(e.id);
26 |
27 | let [updateStatus]: [LocalThemeStatus] = ["installed"];
28 | const themeArrPlace = updateStatuses.find((f) => f[0] === e.id);
29 | if (themeArrPlace) {
30 | updateStatus = themeArrPlace[1];
31 | }
32 |
33 | // I extracted these here as doing conditional props inline sucks
34 | const modalButtonProps = showModalButtonPrompt
35 | ? {
36 | onOptionsActionDescription: "Expand Settings",
37 | onOptionsButton: () => {
38 | showModal();
39 | },
40 | }
41 | : {};
42 |
43 | const updateButtonProps =
44 | updateStatus === "outdated"
45 | ? {
46 | onSecondaryButton: () => {
47 | handleUpdate(e);
48 | },
49 | onSecondaryActionDescription: "Update Theme",
50 | }
51 | : {};
52 |
53 | return (
54 | <>
55 |
56 | {updateStatus === "outdated" && (
57 |
69 | )}
70 |
75 | {e.display_name}}
79 | checked={e.enabled}
80 | onChange={(switchValue: boolean) => {
81 | toggleTheme(e, switchValue);
82 | }}
83 | />
84 |
85 |
{
89 | if (isPinned) {
90 | python.unpinTheme(e.id);
91 | } else {
92 | python.pinTheme(e.id);
93 | }
94 | }}
95 | >
96 | {isPinned ? (
97 |
98 | ) : (
99 |
100 | )}
101 |
102 |
{
106 | showModal();
107 | }}
108 | >
109 |
110 |
111 |
59 | {installStatus === "outdated" && (
60 |
63 | )}
64 |
{
69 | if (onClick) {
70 | onClick();
71 | return;
72 | }
73 | if (searchOpts && prevSearchOptsVarName) {
74 | setGlobalState(prevSearchOptsVarName, searchOpts);
75 | }
76 | setGlobalState("currentExpandedTheme", e);
77 | Navigation.Navigate("/cssloader/expanded-view");
78 | }}
79 | >
80 |
81 |
.slice(4,)
87 |
88 |
89 |
90 |
91 | {shortenNumber(e.download.downloadCount) ?? e.download.downloadCount}
92 |
93 |
94 |
95 | {shortenNumber(e.starCount) ?? e.starCount}
96 |
97 |
98 |
99 | {e.target}
100 |
101 |
102 |
104 | {e.displayName}
105 |
106 | {e.version} - Last Updated {new Date(e.updated).toLocaleDateString()}
107 |
108 | By {e.specifiedAuthor}
109 |
110 |
111 |
76 |
77 | setBetaTranslations(data.data)}
87 | />
88 |
89 |
90 | {
95 | setServer(value);
96 | }}
97 | />
98 |
99 |
100 | setNavPatch(value, true)}
105 | />
106 |
107 |
108 |
114 |
115 |
116 |
122 |
123 |
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/src/components/Styles/ThemeBrowserCardStyles.tsx:
--------------------------------------------------------------------------------
1 | import { useCssLoaderState } from "../../state";
2 |
3 | export function ThemeBrowserCardStyles({ customCardSize }: { customCardSize?: number }) {
4 | const { browserCardSize } = customCardSize
5 | ? { browserCardSize: customCardSize }
6 | : useCssLoaderState();
7 |
8 | return (
9 |
123 | );
124 | }
125 |
--------------------------------------------------------------------------------
/css_themepatch.py:
--------------------------------------------------------------------------------
1 | from css_inject import Inject, to_injects
2 | from css_themepatchcomponent import ThemePatchComponent
3 | from css_utils import Log, Result
4 |
5 | class ThemePatch:
6 | def __init__(self, theme, json : dict, name : str):
7 | self.json = json
8 | self.name = name
9 | self.default = json["default"] if "default" in json else None
10 | self.type = json["type"] if "type" in json else "dropdown"
11 | self.theme = theme
12 | self.value = self.default
13 | self.injects = []
14 | self.options = {}
15 | self.patchVersion = None
16 | self.components = []
17 |
18 | if "values" in json: # Do we have a v2 or a v1 format?
19 | self.patchVersion = 2
20 | for x in json["values"]:
21 | self.options[x] = []
22 | else:
23 | self.patchVersion = 1
24 | for x in json:
25 | if (x == "default"):
26 | continue
27 |
28 | self.options[x] = []
29 |
30 | if len(self.options) <= 0:
31 | raise Exception(f"In patch '{name}' there is less than 1 value present")
32 |
33 | if self.default is None:
34 | self.default = list(self.options.keys())[0]
35 |
36 | if self.default not in self.options:
37 | raise Exception(f"In patch '{self.name}', '{self.default}' does not exist as a patch option")
38 |
39 | self.load()
40 |
41 | def set_value(self, value):
42 | if isinstance(value, str):
43 | self.value = value
44 | elif isinstance(value, dict):
45 | if "value" in value:
46 | self.value = value["value"]
47 |
48 | if "components" in value:
49 | components = value["components"]
50 |
51 | if not isinstance(components, dict):
52 | raise Exception("???")
53 |
54 | for x in self.components:
55 | if x.name in components:
56 | x.value = components[x.name]
57 | x.generate()
58 |
59 | def get_value(self) -> str | dict:
60 | if len(self.components) <= 0:
61 | return self.value
62 | else:
63 | components = {}
64 | for x in self.components:
65 | components[x.name] = x.value
66 |
67 | return {
68 | "value": self.value,
69 | "components": components,
70 | }
71 |
72 | def check_value(self):
73 | if (self.value not in self.options):
74 | self.value = self.default
75 |
76 | if (self.type not in ["dropdown", "checkbox", "slider", "none"]):
77 | self.type = "dropdown"
78 |
79 | if (self.type == "checkbox"):
80 | if not ("No" in self.options and "Yes" in self.options):
81 | self.type = "dropdown"
82 |
83 | def load(self):
84 | for x in self.options:
85 | data = self.json[x] if self.patchVersion == 1 else self.json["values"][x]
86 |
87 | items = to_injects(data, self.theme.themePath, self.theme)
88 | self.injects.extend(items)
89 | self.options[x].extend(items)
90 |
91 | if "components" in self.json:
92 | for x in self.json["components"]:
93 | component = ThemePatchComponent(self, x)
94 | if component.on not in self.options:
95 | raise Exception("Component references non-existent value")
96 |
97 | self.components.append(component)
98 | self.injects.append(component.inject)
99 | self.options[component.on].append(component.inject)
100 |
101 | self.check_value()
102 |
103 | async def inject(self, inject_now : bool = True) -> Result:
104 | self.check_value()
105 | Log(f"Injecting patch '{self.name}' of theme '{self.theme.name}'")
106 | for x in self.options[self.value]:
107 | if inject_now:
108 | await x.inject() # Ignore result for now. It'll be logged but not acted upon
109 | else:
110 | x.enabled = True
111 |
112 | return Result(True)
113 |
114 | async def remove(self) -> Result:
115 | self.check_value()
116 | Log(f"Removing patch '{self.name}' of theme '{self.theme.name}'")
117 | for x in self.injects:
118 | result = await x.remove()
119 | if not result.success:
120 | return result
121 |
122 | return Result(True)
123 |
124 | def to_dict(self) -> dict:
125 | return {
126 | "name": self.name,
127 | "default": self.default,
128 | "value": self.value,
129 | "options": [x for x in self.options],
130 | "type": self.type,
131 | "components": [x.to_dict() for x in self.components]
132 | }
--------------------------------------------------------------------------------
/src/components/Modals/AuthorViewModal.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 | import * as python from "../../python";
3 | import { CssLoaderContextProvider, useCssLoaderState } from "../../state";
4 | import { Focusable, ModalRoot } from "decky-frontend-lib";
5 | import { genericGET } from "../../api";
6 | import { PartialCSSThemeInfo, ThemeQueryResponse, UserInfo } from "../../apiTypes";
7 | import { ImSpinner5 } from "react-icons/im";
8 | import { VariableSizeCard } from "../ThemeManager";
9 | import { ThemeBrowserCardStyles } from "../Styles";
10 | import { SupporterIcon } from "../SupporterIcon";
11 |
12 | export function AuthorViewModalRoot({
13 | closeModal,
14 | authorData,
15 | }: {
16 | closeModal?: any;
17 | authorData: UserInfo;
18 | }) {
19 | return (
20 | <>
21 |
22 | {/* @ts-ignore */}
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 |
31 | function AuthorViewModal({
32 | authorData,
33 | closeModal,
34 | }: {
35 | authorData: UserInfo;
36 | closeModal: () => {};
37 | }) {
38 | const { setGlobalState } = useCssLoaderState();
39 |
40 | const [loaded, setLoaded] = useState(false);
41 | const [themes, setThemes] = useState([]);
42 |
43 | const firstThemeRef = useRef();
44 |
45 | async function fetchThemeData() {
46 | const data: ThemeQueryResponse = await genericGET(
47 | `/users/${authorData.id}/themes?page=1&perPage=50&filters=CSS&order=Most Downloaded`
48 | );
49 | if (data?.total && data.total > 0) {
50 | setThemes(data.items);
51 | setLoaded(true);
52 | }
53 | }
54 | useEffect(() => {
55 | fetchThemeData();
56 | }, []);
57 |
58 | useEffect(() => {
59 | if (firstThemeRef?.current) {
60 | setTimeout(() => {
61 | firstThemeRef?.current?.focus();
62 | }, 10);
63 | }
64 | }, [loaded]);
65 |
66 | return (
67 |
68 | {loaded ? (
69 | <>
70 |
90 |
91 |
92 |
98 |
{authorData.username}
99 |
100 |
101 |
102 |
145 |
146 | Loading
147 |
148 |
149 | )}
150 |
151 | );
152 | }
153 |
--------------------------------------------------------------------------------
/css_utils.py:
--------------------------------------------------------------------------------
1 | from logging import getLogger
2 | import os, platform, traceback
3 |
4 | HOME = os.getenv("HOME")
5 |
6 | if not HOME:
7 | HOME = os.path.expanduser("~")
8 |
9 | USER = os.getenv("USER", "user") # USER is just used for config name
10 |
11 | DECKY_HOME = os.getenv("DECKY_HOME", os.path.join(HOME, "homebrew"))
12 | DECKY_USER = os.getenv("DECKY_USER")
13 |
14 | if not DECKY_USER:
15 | DECKY_USER = os.getlogin()
16 |
17 | if not os.path.exists(DECKY_HOME):
18 | os.mkdir(DECKY_HOME)
19 |
20 | PLATFORM_WIN = platform.system() == "Windows"
21 |
22 | if not PLATFORM_WIN:
23 | import pwd
24 |
25 | Logger = getLogger("CSS_LOADER")
26 |
27 | FLAG_KEEP_DEPENDENCIES = "KEEP_DEPENDENCIES"
28 | FLAG_PRESET = "PRESET"
29 |
30 | def Log(text : str):
31 | Logger.info(f"[CSS_Loader] {text}")
32 |
33 | class Result:
34 | def __init__(self, success : bool, message : str = "Success", log : bool = True):
35 | self.success = success
36 | self.message = message
37 |
38 | stack = traceback.extract_stack()
39 | function_above = stack[-2]
40 |
41 | if log and not self.success:
42 | Log(f"[FAIL] [{os.path.basename(function_above.filename)}:{function_above.lineno}] {message}")
43 |
44 | def raise_on_failure(self):
45 | if not self.success:
46 | raise Exception(self.message)
47 |
48 | def to_dict(self):
49 | return {"success": self.success, "message": self.message}
50 |
51 | def create_dir(dirPath : str):
52 | if (os.path.exists(dirPath)):
53 | return
54 |
55 | os.mkdir(dirPath)
56 |
57 | if not PLATFORM_WIN:
58 | a = pwd.getpwnam(DECKY_USER)
59 | uid = a.pw_uid
60 | gid = a.pw_gid
61 |
62 | if (os.stat(dirPath).st_uid != uid):
63 | os.chown(dirPath, uid, gid) # Change to deck user
64 |
65 | def get_user_home() -> str:
66 | return HOME
67 |
68 | def get_theme_path() -> str:
69 | path = os.path.join(DECKY_HOME, "themes")
70 |
71 | if not os.path.exists(path):
72 | create_dir(path)
73 |
74 | return path
75 |
76 | def create_symlink(src : str, dst : str) -> Result:
77 | try:
78 | if not os.path.exists(dst):
79 | os.symlink(src, dst, True)
80 | except Exception as e:
81 | return Result(False, str(e))
82 |
83 | return Result(True)
84 |
85 | def get_steam_path() -> str:
86 | if PLATFORM_WIN:
87 | try:
88 | import winreg
89 | conn = winreg.ConnectRegistry(None, winreg.HKEY_LOCAL_MACHINE)
90 | key = winreg.OpenKey(conn, "SOFTWARE\\Wow6432Node\\Valve\\Steam")
91 | val, type = winreg.QueryValueEx(key, "InstallPath")
92 | if type != winreg.REG_SZ:
93 | raise Exception(f"Expected type {winreg.REG_SZ}, got {type}")
94 |
95 | Log(f"Got win steam install path: '{val}'")
96 | return val
97 | except Exception as e:
98 | return "C:\\Program Files (x86)\\Steam" # Taking a guess here
99 | else:
100 | return f"{get_user_home()}/.steam/steam"
101 |
102 | def is_steam_beta_active() -> bool:
103 | beta_path = os.path.join(get_steam_path(), "package", "beta")
104 | if not os.path.exists(beta_path):
105 | return False
106 |
107 | with open(beta_path, 'r') as fp:
108 | content = fp.read().strip()
109 |
110 | stable_branches = [
111 | "steamdeck_stable",
112 | ]
113 |
114 | return content not in stable_branches
115 |
116 | def create_steam_symlink() -> Result:
117 | return create_symlink(get_theme_path(), os.path.join(get_steam_path(), "steamui", "themes_custom"))
118 |
119 | def create_cef_flag() -> Result:
120 | path = os.path.join(get_steam_path(), ".cef-enable-remote-debugging")
121 | if not os.path.exists(path):
122 | with open(path, 'w') as fp:
123 | pass
124 |
125 | def store_path() -> str:
126 | return os.path.join(get_theme_path(), "STORE")
127 |
128 | def store_reads() -> dict:
129 | path = store_path()
130 | items = {}
131 |
132 | if not os.path.exists(path):
133 | return items
134 |
135 | with open(path, 'r') as fp:
136 | for x in fp.readlines():
137 | c = x.strip()
138 | if (c == ""):
139 | continue
140 |
141 | split = c.split(":", 1)
142 |
143 | if (len(split) <= 1):
144 | continue
145 |
146 | items[split[0]] = split[1]
147 |
148 | return items
149 |
150 | def store_read(key : str) -> str:
151 | items = store_reads()
152 | return items[key] if key in items else ""
153 |
154 | def store_write(key : str, val : str):
155 | path = store_path()
156 | items = store_reads()
157 | items[key] = val.replace('\n', '')
158 | with open(path, 'w') as fp:
159 | fp.write("\n".join([f"{x}:{items[x]}" for x in items]))
160 |
161 | def store_or_file_config(key : str) -> bool:
162 | if os.path.exists(os.path.join(get_theme_path(), key.upper())):
163 | return True
164 |
165 | read = store_read(key)
166 | return read == "True" or read == "1"
--------------------------------------------------------------------------------
/src/pages/settings/ThemeSettings.tsx:
--------------------------------------------------------------------------------
1 | import { DialogButton, DialogCheckbox, Focusable, PanelSection } from "decky-frontend-lib";
2 | import { useCssLoaderState } from "../../state";
3 | import { useMemo, useState } from "react";
4 | import { Flags, Theme } from "../../ThemeTypes";
5 | import { FullscreenSingleThemeEntry } from "../../components/ThemeSettings/FullscreenSingleThemeEntry";
6 | import { ThemeErrorCard } from "../../components/ThemeErrorCard";
7 | import { installTheme } from "../../api";
8 | import * as python from "../../python";
9 | import { DeleteMenu } from "../../components/ThemeSettings/DeleteMenu";
10 | import { UpdateAllThemesButton } from "../../components/ThemeSettings/UpdateAllThemesButton";
11 |
12 | export function ThemeSettings() {
13 | const { localThemeList, unpinnedThemes, themeErrors, setGlobalState, updateStatuses } =
14 | useCssLoaderState();
15 |
16 | const [isInstalling, setInstalling] = useState(false);
17 | const [mode, setMode] = useState<"view" | "delete">("view");
18 |
19 | const sortedList = useMemo(() => {
20 | return localThemeList
21 | .filter((e) => !e.flags.includes(Flags.isPreset))
22 | .sort((a, b) => {
23 | const aPinned = !unpinnedThemes.includes(a.id);
24 | const bPinned = !unpinnedThemes.includes(b.id);
25 | // This sorts the pinned themes alphabetically, then the non-pinned alphabetically
26 | if (aPinned === bPinned) {
27 | return a.name.localeCompare(b.name);
28 | }
29 | return Number(bPinned) - Number(aPinned);
30 | });
31 | }, [localThemeList.length]);
32 |
33 | async function handleUpdate(e: Theme) {
34 | setInstalling(true);
35 | const unpinned = unpinnedThemes.includes(e.id);
36 | await installTheme(e.id);
37 | // This just updates the updateStatuses arr to know that this theme now is up to date, no need to re-fetch the API to know that
38 | setGlobalState(
39 | "updateStatuses",
40 | updateStatuses.map((f) => (f[0] === e.id ? [e.id, "installed", false] : e))
41 | );
42 | // Remove duplicate theme from unpinned list.
43 | if (unpinned) python.pinTheme(e.id);
44 | setInstalling(false);
45 | }
46 |
47 | async function handleUninstall(listEntry: Theme) {
48 | setInstalling(true);
49 | await python.deleteTheme(listEntry.name);
50 | if (unpinnedThemes.includes(listEntry.id)) {
51 | // This isn't really pinning it, it's just removing its name from the unpinned list.
52 | python.pinTheme(listEntry.id);
53 | }
54 | await python.reloadBackend();
55 | setInstalling(false);
56 | }
57 |
58 | return (
59 |
60 |
83 |
84 |
85 |
86 | (mode === "delete" ? setMode("view") : setMode("delete"))}
89 | >
90 | {mode === "delete" ? "Go Back" : "Delete Themes"}
91 |
92 |
93 |
94 | {mode === "view" && (
95 | <>
96 |
97 | {sortedList.map((e) => (
98 |
103 | ))}
104 |
105 |
106 | )}
107 | {mode === "delete" && (
108 | setMode("view")} themeList={sortedList} />
109 | )}
110 |
111 |
112 | {themeErrors.length > 0 && (
113 |
114 |
117 | {themeErrors.map((e) => {
118 | return ;
119 | })}
120 |
121 |
122 | )}
123 |
148 | {name}
149 |
150 | );
151 | };
152 |
--------------------------------------------------------------------------------
/src/components/Modals/ThemeSettingsModal/ThemeSettingsModalButtons.tsx:
--------------------------------------------------------------------------------
1 | import { DialogButton, Focusable, showModal } from "decky-frontend-lib";
2 | import { LocalThemeStatus, Theme } from "../../../ThemeTypes";
3 | import { FaDownload, FaEye, FaEyeSlash, FaRegStar, FaStar, FaTrashAlt } from "react-icons/fa";
4 | import { DeleteConfirmationModalRoot } from "../DeleteConfirmationModal";
5 | import { useCssLoaderState } from "../../../state";
6 | import * as python from "../../../python";
7 | import {
8 | genericGET,
9 | logInWithShortToken,
10 | refreshToken,
11 | toggleStar as apiToggleStar,
12 | installTheme,
13 | } from "../../../api";
14 | import { useState, useEffect } from "react";
15 |
16 | export function ThemeSettingsModalButtons({
17 | themeData,
18 | closeModal,
19 | }: {
20 | themeData: Theme;
21 | closeModal: () => void;
22 | }) {
23 | const { unpinnedThemes, apiShortToken, apiFullToken, updateStatuses, setGlobalState } =
24 | useCssLoaderState();
25 | const isPinned = !unpinnedThemes.includes(themeData.id);
26 | const [starFetchLoaded, setStarFetchLoaded] = useState(false);
27 | const [isStarred, setStarred] = useState(false);
28 | const [blurButtons, setBlurButtons] = useState(false);
29 |
30 | const [updateStatus, setUpdateStatus] = useState("installed");
31 | useEffect(() => {
32 | if (!themeData) return;
33 | const themeArrPlace = updateStatuses.find((f) => f[0] === themeData.id);
34 | if (themeArrPlace) {
35 | setUpdateStatus(themeArrPlace[1]);
36 | }
37 | }, [themeData]);
38 |
39 | async function toggleStar() {
40 | if (apiFullToken) {
41 | setBlurButtons(true);
42 | const newToken = await refreshToken();
43 | if (themeData && newToken) {
44 | apiToggleStar(themeData.id, isStarred, newToken).then((bool) => {
45 | if (bool) {
46 | setStarred((cur) => !cur);
47 | setBlurButtons(false);
48 | }
49 | });
50 | }
51 | } else {
52 | python.toast("Not Logged In!", "You can only star themes if logged in.");
53 | }
54 | }
55 |
56 | async function getStarredStatus() {
57 | if (themeData && apiShortToken) {
58 | if (!apiFullToken) {
59 | await logInWithShortToken();
60 | }
61 | const data = (await genericGET(`/users/me/stars/${themeData.id}`, true, undefined)) as {
62 | starred: boolean;
63 | };
64 | if (data) {
65 | setStarFetchLoaded(true);
66 | setStarred(data.starred);
67 | }
68 | }
69 | }
70 | useEffect(() => {
71 | getStarredStatus();
72 | }, []);
73 |
74 | return (
75 | <>
76 |
77 | {updateStatus === "outdated" && (
78 | {
82 | await installTheme(themeData.id);
83 | // This just updates the updateStatuses arr to know that this theme now is up to date, no need to re-fetch the API to know that
84 | setGlobalState(
85 | "updateStatuses",
86 | updateStatuses.map((e) =>
87 | e[0] === themeData.id ? [themeData.id, "installed", false] : e
88 | )
89 | );
90 | }}
91 | >
92 |
93 | Update
94 |
95 | )}
96 | {
100 | if (isPinned) {
101 | python.unpinTheme(themeData.id);
102 | } else {
103 | python.pinTheme(themeData.id);
104 | }
105 | }}
106 | >
107 | {isPinned ? (
108 |
109 | ) : (
110 |
111 | )}
112 |
113 | {starFetchLoaded && (
114 |
119 | {isStarred ? : }
120 |
121 | )}
122 | {
126 | showModal(
127 |
131 | );
132 | }}
133 | >
134 |
135 |
136 |
137 |
138 | );
139 | }
140 |
--------------------------------------------------------------------------------
/src/components/PatchComponent.tsx:
--------------------------------------------------------------------------------
1 | import { VFC } from "react";
2 |
3 | import * as python from "../python";
4 |
5 | import Color from "color";
6 | import { showModal, ButtonItem, PanelSectionRow } from "decky-frontend-lib";
7 |
8 | import { ColorPickerModal } from "decky-frontend-lib";
9 | import { ThemePatchComponent } from "../ThemeTypes";
10 | import { FaFolder } from "react-icons/fa";
11 | import { useCssLoaderState } from "../state";
12 |
13 | export const PatchComponent: VFC<{
14 | data: ThemePatchComponent;
15 | selectedLabel: string;
16 | themeName: string;
17 | patchName: string;
18 | bottomSeparatorValue: "standard" | "none";
19 | }> = ({ data, selectedLabel, themeName, patchName, bottomSeparatorValue }) => {
20 | const { selectedPreset } = useCssLoaderState();
21 | if (selectedLabel === data.on) {
22 | // The only value that changes from component to component is the value, so this can just be re-used
23 | async function setComponentAndReload(value: string) {
24 | await python.setComponentOfThemePatch(themeName, patchName, data.name, value);
25 | if (selectedPreset && selectedPreset.dependencies.includes(themeName)) {
26 | python.generatePresetFromThemeNames(selectedPreset.name, selectedPreset.dependencies);
27 | }
28 | python.getInstalledThemes();
29 | }
30 | switch (data.type) {
31 | case "image-picker":
32 | // This makes things compatible with people using HoloISO or who don't have the user /deck/
33 | function getRootPath() {
34 | python.resolve(python.fetchThemePath(), (path: string) => pickImage(path));
35 | }
36 | // These have to
37 | async function pickImage(rootPath: string) {
38 | const res = await python.openFilePicker(rootPath);
39 | if (!res.path.includes(rootPath)) {
40 | python.toast("Invalid File", "Images must be within themes folder");
41 | return;
42 | }
43 | if (!/\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(res.path)) {
44 | python.toast("Invalid File", "Must be an image file");
45 | return;
46 | }
47 | const relativePath = res.path.split(`${rootPath}/`)[1];
48 | setComponentAndReload(relativePath);
49 | }
50 | return (
51 |
52 | getRootPath()}
55 | layout="below"
56 | >
57 |
58 |
Open {data.name}
59 |
69 |
70 |
71 |
102 |
Open {data.name}
103 |
122 |
127 | {themeData.display_name}
128 |
129 | {themeData.version} | {themeData.author}
130 |
131 |
132 | {
135 | toggleTheme(themeData, checked);
136 | }}
137 | />
138 |
139 | {themeData.enabled && themeData.patches.length > 0 && (
140 | <>
141 |
142 | {themeData.patches.map((x, i, arr) => (
143 |
144 | ))}
145 |
146 |
147 | )}
148 |
149 | ) : (
150 | No Theme Data
151 | )}
152 |
153 | {
156 | closeModal();
157 | }}
158 | >
159 | Close
160 |
161 | {themeData && }
162 |
163 |
164 |
165 | );
166 | }
167 |
--------------------------------------------------------------------------------
/src/pages/settings/DonatePage.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | DialogButton,
3 | Focusable,
4 | Navigation,
5 | Panel,
6 | PanelSection,
7 | ScrollPanelGroup,
8 | } from "decky-frontend-lib";
9 | import { useEffect, useMemo, useState } from "react";
10 | import { SiKofi, SiPatreon } from "react-icons/si";
11 | import { server } from "../../python";
12 |
13 | export function DonatePage() {
14 | const [loaded, setLoaded] = useState(false);
15 | const [supporters, setSupporters] = useState("");
16 |
17 | const formattedSupporters = useMemo(() => {
18 | const numOfNamesPerPage = 10;
19 | const supportersArr = supporters.split("\n");
20 | const newArr = [];
21 | for (let i = 0; i < supportersArr.length; i += numOfNamesPerPage) {
22 | newArr.push(supportersArr.slice(i, i + numOfNamesPerPage).join("\n"));
23 | }
24 | return newArr;
25 | }, [supporters]);
26 |
27 | function fetchSupData() {
28 | server!
29 | .fetchNoCors("https://api.deckthemes.com/patrons", { method: "GET" })
30 | .then((deckyRes) => {
31 | if (deckyRes.success) {
32 | return deckyRes.result;
33 | }
34 | throw new Error("unsuccessful");
35 | })
36 | .then((res) => {
37 | if (res.status === 200) {
38 | return res.body;
39 | }
40 | throw new Error("Res not OK");
41 | })
42 | .then((text) => {
43 | if (text) {
44 | setLoaded(true);
45 | setSupporters(text);
46 | }
47 | })
48 | .catch((err) => {
49 | console.error("CSS Loader - Error Fetching Supporter Data", err);
50 | });
51 | }
52 | useEffect(() => {
53 | fetchSupData();
54 | }, []);
55 | return (
56 |
57 |
107 |
108 | Donations help to cover the costs of hosting the store, as well as funding development for
109 | CSS Loader and its related projects.
110 |
111 |
112 | Navigation.NavigateToExternalWeb("https://patreon.com/deckthemes")}
114 | focusWithinClassName="gpfocuswithin"
115 | className="patreon-or-kofi-container patreon"
116 | >
117 |
118 |
119 | Patreon
120 |
121 | Recurring Donation
122 | patreon.com/deckthemes
123 | Perks:
124 |
125 | -
126 | {/* Potentially could expand this to add it to deckthemes and audioloader */}
127 | Your name in CSS Loader
128 |
129 | - Patreon badge on deckthemes.com
130 | -
131 | {/* Could also impl. this on deck store to make it more meaningful */}
132 | Colored name + VIP channel in the DeckThemes Discord
133 |
134 |
135 |
136 | Navigation.NavigateToExternalWeb("https://ko-fi.com/suchmememanyskill")}
138 | focusWithinClassName="gpfocuswithin"
139 | className="patreon-or-kofi-container"
140 | >
141 |
142 |
143 | Ko-Fi
144 |
145 | One-time Donation
146 | ko-fi.com/suchmememanyskill
147 |
148 |
149 | {loaded ? (
150 |
151 |
152 | {formattedSupporters.map((e) => {
153 | return (
154 | {}} focusWithinClassName="gpfocuswithin">
155 | {e}
156 |
157 | );
158 | })}
159 |
160 |
161 | ) : null}
162 |
116 |
117 | setCollapsed(!collapsed)}
121 | >
122 | {collapsed ? (
123 |
126 | ) : (
127 |
130 | )}
131 |
132 |
133 |
CSSLoader
,
195 | alwaysRender: true,
196 | content: (
197 |
198 |
199 |
200 | ),
201 | icon: ,
202 | onDismount: () => {
203 | const { updateCheckTimeout } = state.getPublicState();
204 | if (updateCheckTimeout) clearTimeout(updateCheckTimeout);
205 | disableUnminifyMode();
206 | disableNavPatch();
207 | },
208 | };
209 | });
210 |
--------------------------------------------------------------------------------
/css_inject.py:
--------------------------------------------------------------------------------
1 | import json
2 | import re
3 | import os
4 | import aiohttp
5 | import asyncio
6 | from typing import List
7 | from css_utils import Result, Log, store_read, get_theme_path
8 | from css_browserhook import BrowserTabHook as CssTab, inject, remove
9 |
10 | CLASS_MAPPINGS = {}
11 |
12 | def initialize_class_mappings():
13 | css_translations_path = os.path.join(get_theme_path(), "css_translations.json")
14 |
15 | if not os.path.exists(css_translations_path):
16 | Log("Failed to get css translations from local file")
17 | return
18 |
19 | try:
20 | with open(css_translations_path, "r", encoding="utf-8") as fp:
21 | data : dict = json.load(fp)
22 | except Exception as e:
23 | Log(f"Failed to load css translations from local file: {str(e)}")
24 | return
25 |
26 | CLASS_MAPPINGS.clear()
27 |
28 | # Data is in the format of { "uid": ["ver1", "ver2", "ver3"]}
29 | for uid in data:
30 | latest_value = data[uid][-1]
31 | for y in data[uid][:-1]:
32 | CLASS_MAPPINGS[y] = latest_value
33 |
34 | Log(f"Loaded {len(CLASS_MAPPINGS)} css translations from local file")
35 |
36 | ALL_INJECTS = []
37 |
38 | def helper_get_tab_from_list(tab_list : List[str], cssTab : CssTab) -> str|None:
39 | for x in tab_list:
40 | if cssTab.compare(x):
41 | return x
42 |
43 | return None
44 |
45 | class Inject:
46 | def __init__(self, cssPath : str, tabs : List[str], theme):
47 | self.css = None
48 | self.cssPath = cssPath
49 | self.tabs = tabs
50 | self.uuids = {}
51 | self.theme = theme
52 | self.enabled = False
53 | for x in self.tabs:
54 | self.uuids[x] = []
55 |
56 | async def load(self) -> Result:
57 | try:
58 | with open(self.cssPath, "r") as fp:
59 | self.css = fp.read()
60 |
61 | split_css = re.split(r"(\.[_a-zA-Z]+[_a-zA-Z0-9-]*)", self.css)
62 |
63 | for x in range(len(split_css)):
64 | if split_css[x].startswith(".") and split_css[x][1:] in CLASS_MAPPINGS:
65 | split_css[x] = "." + CLASS_MAPPINGS[split_css[x][1:]]
66 |
67 | self.css = ("".join(split_css)).replace("\\", "\\\\").replace("`", "\\`")
68 |
69 | split_css = re.split(r"(\[class[*^|~]=\"[_a-zA-Z0-9-]*\"\])", self.css)
70 |
71 | for x in range(len(split_css)):
72 | if split_css[x].startswith("[class") and split_css[x].endswith("\"]") and split_css[x][9:-2] in CLASS_MAPPINGS:
73 | split_css[x] = split_css[x][0:9] + CLASS_MAPPINGS[split_css[x][9:-2]] + split_css[x][-2:]
74 |
75 | self.css = ("".join(split_css)).replace("\\", "\\\\").replace("`", "\\`")
76 | Log(f"Loaded css at {self.cssPath}")
77 |
78 | return Result(True)
79 | except Exception as e:
80 | return Result(False, str(e))
81 |
82 | async def inject(self) -> Result:
83 | for tab_name in self.tabs:
84 | for uuid in self.uuids[tab_name]:
85 | res = await remove(tab_name, uuid)
86 |
87 | if (self.css is None):
88 | result = await self.load()
89 | if not result.success:
90 | return result
91 |
92 | try:
93 | res = await inject(tab_name, self.css)
94 | if not res.success:
95 | return res
96 |
97 | # Log(f"+{str(res.message)} @ {tab_name}")
98 | self.uuids[tab_name].append(str(res.message))
99 | except Exception as e:
100 | return Result(False, str(e))
101 |
102 | self.enabled = True
103 | return Result(True)
104 |
105 | async def inject_with_tab(self, tab : CssTab) -> Result:
106 | tab_name = helper_get_tab_from_list(self.tabs, tab)
107 |
108 | if tab_name == None:
109 | return
110 |
111 | if (self.css is None):
112 | result = await self.load()
113 | if not result.success:
114 | return result
115 |
116 | try:
117 | res = await tab.inject_css(self.css)
118 | if not res.success:
119 | return res
120 |
121 | # Log(f"+{str(res.message)} @ {tab_name}")
122 | self.uuids[tab_name].append(str(res.message))
123 | except Exception as e:
124 | return Result(False, str(e))
125 |
126 | return Result(True)
127 |
128 | async def remove(self) -> Result:
129 | for tab_name in self.tabs:
130 | if (len(self.uuids[tab_name]) <= 0):
131 | return Result(True) # this is kind of cheating but
132 |
133 | try:
134 | for x in self.uuids[tab_name]:
135 | res = await remove(tab_name, x)
136 | #if not res["success"]:
137 | # return Result(False, res["result"])
138 | # Silently ignore error. If any page gets reloaded, and there was css loaded. this will fail as it will fail to remove the css
139 |
140 | self.uuids[tab_name] = []
141 | except Exception as e:
142 | return Result(False, str(e))
143 |
144 | self.enabled = False
145 | return Result(True)
146 |
147 | DEFAULT_MAPPINGS = {
148 | "desktop": ["Steam|SteamLibraryWindow"],
149 | "desktopchat": ["!friendsui-container"],
150 | "desktoppopup": ["OverlayBrowser_Browser", "SP Overlay:.*", "notificationtoasts_.*", "SteamBrowser_Find", "OverlayTab\\d+_Find", "!ModalDialogPopup", "!FullModalOverlay"],
151 | "desktopoverlay": ["desktoppopup"],
152 | "desktopcontextmenu": [".*Menu", ".*Supernav"],
153 | "bigpicture": ["~Valve Steam Gamepad/default~", "~Valve%20Steam%20Gamepad~"],
154 | "bigpictureoverlay": ["QuickAccess", "MainMenu"],
155 | "store": ["~https://store.steampowered.com~", "~https://steamcommunity.com~"],
156 |
157 | # Legacy
158 | "SP": ["bigpicture"],
159 | "Steam Big Picture Mode": ["bigpicture"],
160 | "MainMenu": ["MainMenu.*"],
161 | "MainMenu_.*": ["MainMenu"],
162 | "QuickAccess": ["QuickAccess.*"],
163 | "QuickAccess_.*": ["QuickAccess"],
164 | "Steam": ["desktop"],
165 | "SteamLibraryWindow": ["desktop"],
166 | "All": ["bigpicture", "bigpictureoverlay"]
167 | }
168 |
169 | def extend_tabs(tabs : list, theme) -> list:
170 | new_tabs = []
171 |
172 | if len(tabs) <= 0:
173 | return extend_tabs(theme.tab_mappings["default"], theme) if ("default" in theme.tab_mappings) else []
174 |
175 | for x in tabs:
176 | if x in theme.tab_mappings:
177 | new_tabs.extend(extend_tabs(theme.tab_mappings[x], theme))
178 | elif x in DEFAULT_MAPPINGS:
179 | new_tabs.extend(extend_tabs(DEFAULT_MAPPINGS[x], theme))
180 | else:
181 | new_tabs.append(x)
182 |
183 | return new_tabs
184 |
185 | def to_inject(key : str, tabs : list, basePath : str, theme) -> Inject:
186 | if key.startswith("--"):
187 | value = tabs[0]
188 | inject = Inject("", extend_tabs(tabs[1:], theme), theme)
189 | inject.css = f":root {{ {key}: {value}; }}"
190 | else:
191 | inject = Inject(basePath + "/" + key, extend_tabs(tabs, theme), theme)
192 |
193 | return inject
194 |
195 | def to_injects(items : dict, basePath : str, theme) -> list:
196 | return [to_inject(x, items[x], basePath, theme) for x in items]
--------------------------------------------------------------------------------
/css_theme.py:
--------------------------------------------------------------------------------
1 | import os, json, shutil, time
2 | from os import path
3 | from typing import List
4 | from css_inject import Inject, to_injects
5 | from css_utils import Result, Log, create_dir, USER
6 | from css_themepatch import ThemePatch
7 | from css_sfp_compat import is_folder_sfp_theme, convert_to_css_theme
8 |
9 | CSS_LOADER_VER = 9
10 |
11 | class Theme:
12 | def __init__(self, themePath : str, json : dict, configPath : str = None):
13 | self.configPath = configPath if (configPath is not None) else themePath
14 | self.display_name = None
15 | self.configJsonPath = self.configPath + "/config" + ("_ROOT.json" if USER == "root" else "_USER.json")
16 | self.patches = []
17 | self.injects = []
18 | self.tab_mappings = {}
19 | self.flags = []
20 | self.themePath = themePath
21 | self.bundled = self.configPath != self.themePath
22 | self.enabled = False
23 | self.json = json
24 | self.priority_mod = 0
25 | self.created = None
26 | self.modified = path.getmtime(self.configJsonPath) if path.exists(self.configJsonPath) else None
27 |
28 | try:
29 | if os.path.exists(os.path.join(themePath, "PRIORITY")):
30 | with open(os.path.join(themePath, "PRIORITY")) as fp:
31 | self.priority_mod = int(fp.readline().strip())
32 | except:
33 | pass
34 |
35 | if (json is None):
36 | if os.path.exists(os.path.join(themePath, "theme.css")):
37 | self.name = os.path.basename(themePath)
38 | self.id = self.name
39 | self.version = "v1.0"
40 | self.author = ""
41 | self.require = 1
42 | self.injects = [Inject(os.path.join(themePath, "theme.css"), [".*"], self)]
43 | self.dependencies = []
44 | return
45 | elif is_folder_sfp_theme(themePath):
46 | convert_to_css_theme(themePath, self)
47 | return
48 | else:
49 | raise Exception("Folder does not look like a theme?")
50 |
51 |
52 | jsonPath = path.join(self.themePath, "theme.json")
53 |
54 | if path.exists(jsonPath):
55 | self.created = path.getmtime(jsonPath)
56 |
57 | self.name = json["name"]
58 | self.display_name = json["display_name"] if ("display_name" in json) else None
59 | self.id = json["id"] if ("id" in json) else self.name
60 | self.version = json["version"] if ("version" in json) else "v1.0"
61 | self.author = json["author"] if ("author" in json) else ""
62 | self.require = int(json["manifest_version"]) if ("manifest_version" in json) else 1
63 | self.flags = [x.upper() for x in list(json["flags"])] if ("flags" in json) else []
64 | self.tab_mappings = json["tabs"] if ("tabs" in json) else {}
65 |
66 | if (CSS_LOADER_VER < self.require):
67 | raise Exception(f"A newer version of the CssLoader is required to load this theme (Read manifest version {self.require} but only up to {CSS_LOADER_VER} is supported)")
68 |
69 | self.dependencies = json["dependencies"] if "dependencies" in json else {}
70 |
71 | if "inject" in self.json:
72 | self.injects = to_injects(self.json["inject"], self.themePath, self)
73 |
74 | if "patches" in self.json:
75 | self.patches = [ThemePatch(self, self.json["patches"][x], x) for x in self.json["patches"]]
76 |
77 | async def load(self, inject_now : bool = True) -> Result:
78 | if not path.exists(self.configJsonPath):
79 | return Result(True)
80 |
81 | try:
82 | with open(self.configJsonPath, "r") as fp:
83 | config = json.load(fp)
84 | except Exception as e:
85 | return Result(False, str(e))
86 |
87 | activate = False
88 |
89 | for x in config:
90 | if x == "active" and config["active"]:
91 | activate = True
92 | else:
93 | for y in self.patches:
94 | if y.name == x:
95 | y.set_value(config[x])
96 |
97 | if activate:
98 | result = await self.inject(inject_now)
99 | if not result.success:
100 | return result
101 |
102 | return Result(True)
103 |
104 | async def save(self) -> Result:
105 | create_dir(self.configPath)
106 |
107 | try:
108 | config = {"active": self.enabled}
109 | for x in self.patches:
110 | config[x.name] = x.get_value()
111 |
112 | with open(self.configJsonPath, "w") as fp:
113 | json.dump(config, fp)
114 |
115 | self.modified = time.time()
116 | except Exception as e:
117 | return Result(False, str(e))
118 |
119 | return Result(True)
120 |
121 | async def inject(self, inject_now : bool = True) -> Result:
122 | Log(f"Injecting theme '{self.name}'")
123 | for x in self.injects:
124 | if inject_now:
125 | await x.inject() # Ignore result for now. It'll be logged but not acted upon
126 | else:
127 | x.enabled = True
128 |
129 | for x in self.patches:
130 | result = await x.inject(inject_now)
131 | if not result.success:
132 | return result
133 |
134 | self.enabled = True
135 | await self.save()
136 | return Result(True)
137 |
138 | async def remove(self) -> Result:
139 | Log(f"Removing theme '{self.name}'")
140 | for x in self.get_all_injects():
141 | result = await x.remove()
142 | if not result.success:
143 | return result
144 |
145 | self.enabled = False
146 | await self.save()
147 | return Result(True)
148 |
149 | async def delete(self) -> Result:
150 | if (self.bundled):
151 | return Result(False, "Can't delete a bundled theme")
152 |
153 | result = await self.remove()
154 | if not result.success:
155 | return result
156 |
157 | try:
158 | shutil.rmtree(self.themePath)
159 | except Exception as e:
160 | return Result(False, str(e))
161 |
162 | return Result(True)
163 |
164 | def get_all_injects(self) -> List[Inject]:
165 | injects = []
166 | injects.extend(self.injects)
167 | for x in self.patches:
168 | injects.extend(x.injects)
169 |
170 | return injects
171 |
172 | def to_dict(self) -> dict:
173 | return {
174 | "id": self.id,
175 | "name": self.name,
176 | "display_name": self.get_display_name(),
177 | "version": self.version,
178 | "author": self.author,
179 | "enabled": self.enabled,
180 | "patches": [x.to_dict() for x in self.patches],
181 | "bundled": self.bundled,
182 | "require": self.require,
183 | "dependencies": [x for x in self.dependencies],
184 | "flags": self.flags,
185 | "created": self.created,
186 | "modified": self.modified,
187 | }
188 |
189 | def get_display_name(self) -> str:
190 | return self.display_name if (self.display_name is not None) else self.name
191 |
192 | def add_prefix(self, id : int):
193 | if self.display_name is None:
194 | self.display_name = self.name
195 |
196 | self.name += f"_{id}"
--------------------------------------------------------------------------------
/src/components/ThemeManager/BrowserSearchFields.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | DialogButton,
3 | Dropdown,
4 | DropdownOption,
5 | Focusable,
6 | gamepadDialogClasses,
7 | gamepadSliderClasses,
8 | PanelSectionRow,
9 | SliderField,
10 | TextField,
11 | } from "decky-frontend-lib";
12 | import { useEffect, useMemo, memo } from "react";
13 | import { TiRefreshOutline } from "react-icons/ti";
14 | import { FaRotate } from "react-icons/fa6";
15 | import { ThemeQueryRequest } from "../../apiTypes";
16 | import { genericGET } from "../../api";
17 | import { useCssLoaderState } from "../../state";
18 | import { FilterDropdownCustomLabel } from "./FilterDropdownCustomLabel";
19 |
20 | export function BrowserSearchFields({
21 | searchOpts,
22 | searchOptsVarName,
23 | prevSearchOptsVarName,
24 | unformattedFilters,
25 | unformattedFiltersVarName,
26 | onReload,
27 | requiresAuth = false,
28 | getTargetsPath,
29 | }: {
30 | searchOpts: ThemeQueryRequest;
31 | searchOptsVarName: string;
32 | prevSearchOptsVarName: string;
33 | unformattedFilters: { filters: string[]; order: string[] };
34 | unformattedFiltersVarName: string;
35 | getTargetsPath: string;
36 | requiresAuth?: boolean;
37 | onReload: () => void;
38 | }) {
39 | const { browserCardSize, setGlobalState } = useCssLoaderState();
40 |
41 | async function getThemeTargets() {
42 | genericGET(`${getTargetsPath}`, requiresAuth).then((data) => {
43 | if (data?.filters) {
44 | setGlobalState(unformattedFiltersVarName, {
45 | filters: data.filters,
46 | order: data.order,
47 | });
48 | }
49 | });
50 | }
51 |
52 | const formattedFilters = useMemo<{ filters: DropdownOption[]; order: DropdownOption[] }>(
53 | () => ({
54 | filters: [
55 | {
56 | data: "All",
57 | label: (
58 | prev + Number(cur),
63 | 0
64 | ) || ""
65 | }
66 | />
67 | ),
68 | },
69 | ...Object.entries(unformattedFilters.filters)
70 | .filter(([_, itemCount]) => Number(itemCount) > 0)
71 | .map(([filterValue, itemCount]) => ({
72 | data: filterValue,
73 | label: ,
74 | })),
75 | ],
76 | order: unformattedFilters.order.map((e) => ({ data: e, label: e })),
77 | }),
78 | [unformattedFilters]
79 | );
80 | useEffect(() => {
81 | if (unformattedFilters.filters.length < 2) {
82 | getThemeTargets();
83 | }
84 | }, []);
85 |
86 | const repoOptions: never[] = [];
87 | return (
88 | <>
89 |
90 |
91 |
99 | Sort
100 | {
106 | setGlobalState(prevSearchOptsVarName, searchOpts);
107 | setGlobalState(searchOptsVarName, { ...searchOpts, order: e.data });
108 | }}
109 | />
110 |
111 |
121 | Filter
122 | {
128 | setGlobalState(prevSearchOptsVarName, searchOpts);
129 | setGlobalState(searchOptsVarName, { ...searchOpts, filters: e.data });
130 | }}
131 | />
132 |
145 |
146 |
147 |
148 |
149 |
150 |
151 | {
155 | setGlobalState(prevSearchOptsVarName, searchOpts);
156 | setGlobalState(searchOptsVarName, { ...searchOpts, search: e.target.value });
157 | }}
158 | />
159 |
160 |
171 |
172 | Refresh
173 |
174 |
178 | {
184 | setGlobalState("browserCardSize", num);
185 | }}
186 | />
187 |
188 |
212 |
213 |