Merge branch 'dev' into main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SDH-CssLoader",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A css loader",
   "scripts": {
     "build": "shx rm -rf dist && rollup -c",
@@ -40,7 +40,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "decky-frontend-lib": "^1.7.5",
+    "decky-frontend-lib": "3.0.0",
     "react-icons": "^4.3.1"
   },
   "pnpm": {

src/components/ColorPickerModal.tsx

@@ -1,4 +1,4 @@
-import { ModalRoot, SliderField } from "decky-frontend-lib";
+import { ConfirmModal, SliderField } from "decky-frontend-lib";
 import { CSSProperties, useState, VFC } from "react";
 
 interface ColorPickerModalProps {
@@ -79,7 +79,7 @@ export const ColorPickerModal: VFC<ColorPickerModalProps> = ({
         }
         `}
       </style>
-      <ModalRoot
+      <ConfirmModal
         bAllowFullSize
         onCancel={closeModal}
         onOK={() => {
@@ -158,7 +158,7 @@ export const ColorPickerModal: VFC<ColorPickerModalProps> = ({
             />
           </div>
         </div>
-      </ModalRoot>
+      </ConfirmModal>
     </>
   );
 };

src/components/ThemePatch.tsx

@@ -117,8 +117,8 @@ export const ThemePatch: VFC<{
               selectedOption={data.index}
               onChange={(index) => {
                 data.index = index.data;
-                data.value = index.label;
-                setLabel(index.label);
+                data.value = index.label as string;
+                setLabel(data.value);
                 python.execute(
                   python.setPatchOfTheme(data.theme.name, data.name, data.value)
                 );

src/components/ThemeToggle.tsx

@@ -20,6 +20,10 @@ export const ThemeToggle: VFC<{ data: Theme; setThemeList: any }> = ({
           label={data.name}
           description={data.description}
           onChange={(switchValue: boolean) => {
+            // Actually enabling the theme
+            python.resolve(python.setThemeState(data.name, switchValue), () => {
+              python.resolve(python.getThemes(), setThemeList);
+            });
             // Dependency Toast
             if (switchValue === true && data.dependencies.length > 0) {
               python.toast(
@@ -30,11 +34,6 @@ export const ThemeToggle: VFC<{ data: Theme; setThemeList: any }> = ({
                 } required for this theme`
               );
             }
-
-            // Actually enabling the theme
-            python.resolve(python.setThemeState(data.name, switchValue), () => {
-              python.resolve(python.getThemes(), setThemeList);
-            });
           }}
         />
       </PanelSectionRow>

src/python.ts

@@ -72,11 +72,18 @@ export function setComponentOfThemePatch(
 }
 
 export function toast(title: string, message: string) {
-  return server?.toaster.toast({
-    title: title,
-    body: message,
-    duration: 8000,
-  });
+  // This is a weirdo self-invoking function, but it works.
+  return (() => {
+    try {
+      return server?.toaster.toast({
+        title: title,
+        body: message,
+        duration: 8000,
+      });
+    } catch (e) {
+      console.log("CSSLoader Toaster Error", e);
+    }
+  })();
 }
 
 export function downloadTheme(uuid: string): Promise<any> {

src/theme-manager/ThemeBrowserPage.tsx

@@ -40,7 +40,7 @@ export const ThemeBrowserPage: VFC = () => {
   // const [selectedTarget, setTarget] = useState<SingleDropdownOption>({ data: 1, label: "All", });
   // const [selectedSort, setSort] = useState<number>(3);
 
-  const [backendVersion, setBackendVer] = useState<number>(2);
+  const [backendVersion, setBackendVer] = useState<number>(3);
   function reloadBackendVer() {
     python.resolve(python.getBackendVersion(), setBackendVer);
   }
@@ -161,7 +161,7 @@ export const ThemeBrowserPage: VFC = () => {
           .filter(searchFilter)
           .filter((e: browseThemeEntry) => {
             if (selectedTarget.label === "All") {
-              return e.target !== "Background"
+              return e.target !== "Background";
             } else if (selectedTarget.label === "Installed") {
               const strValue = checkIfThemeInstalled(e);
               return strValue === "installed" || strValue === "outdated";