fix: ensure compatibility with new display_name prop as well as pro…

…file renaming

ThemeTypes.ts

@@ -4,6 +4,7 @@ export interface Theme {
   id: string;
   enabled: boolean; // used to be called checked
   name: string;
+  display_name?: string;
   author: string;
   bundled: boolean; // deprecated
   require: number;

components/CreatePresetModal.tsx

@@ -1,10 +1,12 @@
-import { useContext, useMemo, useState } from "react";
+import { useContext } from "react";
 import { themeContext } from "@contexts/themeContext";
 import { changePreset, checkIfThemeExists, generatePreset, setThemeState, toast } from "../backend";
 import { InputAlertDialog } from "./Primitives/InputAlertDialog";
+import { backendStatusContext } from "@contexts/backendStatusContext";
 
 export function CreatePresetModal({ closeModal }: { closeModal: () => void }) {
   const { themes: localThemeList, refreshThemes, selectedPreset } = useContext(themeContext);
+  const { backendManifestVersion } = useContext(backendStatusContext);
 
   const nameContainsInvalidCharacters = (presetName: string) =>
     !!presetName.match(/[\\/:*?\"<>|]/g);
@@ -28,7 +30,7 @@ export function CreatePresetModal({ closeModal }: { closeModal: () => void }) {
       if (selectedPreset) {
         await setThemeState(selectedPreset?.name, false);
       }
-      await setThemeState(input, true);
+      await setThemeState(backendManifestVersion >= 9 ? input + ".profile" : input, true);
       await refreshThemes();
       toast("Preset Created Successfully");
       closeModal();

components/Presets/PresetSelectionDropdown.tsx

@@ -25,19 +25,18 @@ export function PresetSelectionDropdown() {
           triggerClass="bg-base-5.5-dark"
           headingText="Selected Profile"
           ariaLabel="Profile Selection Dropdown"
-          // value={presets.find((e) => e.enabled)?.name || "Default Profile"}
           value={
             themes.filter((e) => e.flags.includes(Flags.isPreset) && e.enabled).length > 1
               ? "Invalid State"
-              : selectedPreset?.name || "None"
+              : selectedPreset?.display_name || selectedPreset?.name || "None"
           }
           options={[
             // This just ensures that default profile is the first result
             ...(themes.filter((e) => e.flags.includes(Flags.isPreset) && e.enabled).length > 1
               ? ["Invalid State"]
               : []),
             "None",
-            ...presets.map((e) => e.name),
+            ...presets.map((e) => e?.display_name || e.name),
             "New Profile",
           ]}
           onValueChange={async (e) => {
@@ -46,7 +45,15 @@ export function PresetSelectionDropdown() {
               return;
             }
             if (e === "Invalid State") return;
-            await changePreset(e, themes);
+            if (e === "None") {
+              await changePreset(e, themes);
+            }
+            // since e is the display_name, and toggle uses the real name, need to find that...
+            // Still checks name as a fallback
+            const themeEntry = themes.find((f) => f?.display_name === e || f.name === e);
+            if (themeEntry) {
+              await changePreset(themeEntry.name, themes);
+            }
             refreshThemes();
           }}
         />

components/SingleTheme/ThemeToggle.tsx

@@ -6,7 +6,6 @@ import { themeContext } from "@contexts/themeContext";
 import { generatePreset, generatePresetFromThemeNames, setThemeState, toast } from "../../backend";
 import { AlertDialog, ToggleSwitch } from "..";
 import { twMerge } from "tailwind-merge";
-import { BsXCircleFill } from "react-icons/bs";
 
 function OptionalDepsModal({
   themeData,
@@ -106,7 +105,7 @@ export function ThemeToggle({
       )}
       <div className="flex justify-between gap-4">
         <div className="flex flex-col">
-          <span className="font-fancy text-md font-bold">{data.name}</span>
+          <span className="font-fancy text-md font-bold">{data?.display_name || data.name}</span>
           <span className="font-fancy text-muted text-sm">
             {isPreset ? `Preset` : `${data.version} • ${data.author}`}
           </span>

contexts/backendStatusContext.ts

@@ -8,6 +8,7 @@ export const backendStatusContext = createContext<{
   recheckDummy: any;
   setNewBackend: Dispatch<SetStateAction<string>>;
   setShowNewBackend: Dispatch<SetStateAction<boolean>>;
+  backendManifestVersion: number;
 }>({
   dummyResult: undefined,
   showNewBackendPage: false,
@@ -16,4 +17,5 @@ export const backendStatusContext = createContext<{
   backendExists: false,
   setNewBackend: () => {},
   setShowNewBackend: () => {},
+  backendManifestVersion: 8,
 });

pages/_app.tsx

@@ -15,6 +15,7 @@ import {
   getOS,
   generatePresetFromThemeNames,
   changePreset,
+  getBackendVersion,
 } from "../backend";
 import { themeContext } from "@contexts/themeContext";
 import { FontContext } from "@contexts/FontContext";
@@ -32,6 +33,7 @@ export default function App(AppProps: AppProps) {
   const [backendExists, setBackendExists] = useState<boolean>(false);
   const [newBackendVersion, setNewBackend] = useState<string>("");
   const [showNewBackendPage, setShowNewBackend] = useState<boolean>(false);
+  const [backendManifestVersion, setManifestVersion] = useState<number>(8);
   const [OS, setOS] = useState<string>("");
   const isWindows = useMemo(() => OS === "win32", [OS]);
 
@@ -87,6 +89,10 @@ export default function App(AppProps: AppProps) {
   async function refreshThemes(reset: boolean = false) {
     if (isWindows) await refreshBackendExists();
     await dummyFuncTest();
+    const backendVer = await getBackendVersion();
+    if (backendVer.success) {
+      setManifestVersion(backendVer.result);
+    }
 
     const data = reset ? await reloadBackend() : await getInstalledThemes();
     if (data) {
@@ -105,6 +111,7 @@ export default function App(AppProps: AppProps) {
           recheckDummy,
           setNewBackend,
           setShowNewBackend,
+          backendManifestVersion,
         }}
       >
         <osContext.Provider value={{ OS, isWindows }}>