UPDATE: Draft

2026-01-10 20:23:16 +07:00
parent cb2f040010
commit f837e880d0
16 changed files with 473 additions and 167 deletions
--- a/src/components/card/characterCard.tsx
+++ b/src/components/card/characterCard.tsx
@@ -18,7 +18,7 @@ export default function CharacterCard({ data }: CharacterCardProps) {
    className="z-10 flex flex-col items-center rounded-xl shadow-xl 
               bg-linear-to-br from-base-300 via-base-100 to-warning/70
               transform transition-transform duration-300 ease-in-out 
-               hover:scale-105 cursor-pointer min-h-[170px] sm:min-h-[180px] md:min-h-[210px] lg:min-h-[220px] xl:min-h-[240px] 2xl:min-h-[340px]"
+               hover:scale-105 cursor-pointer min-h-42.5 sm:min-h-45 md:min-h-52.5 lg:min-h-55 xl:min-h-60 2xl:min-h-85"
    >
      <div
        className={`w-full rounded-md bg-linear-to-br ${data.rank === "CombatPowerAvatarRarityType5"
--- a/src/components/extraSettingBar/index.tsx
+++ b/src/components/extraSettingBar/index.tsx
@@ -1,80 +1,229 @@
 'use client'
 import { motion } from "framer-motion"
-import { EyeOff, Eye, Hammer, RefreshCw, ShieldBan } from "lucide-react"
-import useGlobalStore from '@/stores/globalStore';
-import { useTranslations } from "next-intl";
-
+import { EyeOff, Eye, Hammer, RefreshCw, ShieldBan, User, Swords, SkipForward, BowArrow, Info } from "lucide-react"
+import useGlobalStore from '@/stores/globalStore'
+import { useTranslations } from "next-intl"
+import useEventStore from "@/stores/eventStore"
+import { getLocaleName, getNameChar } from "@/helper"
+import useLocaleStore from "@/stores/localeStore"
+import useAvatarStore from "@/stores/avatarStore"
+import SelectCustomImage from "../select/customSelectImage"

 export default function ExtraSettingBar() {
  const { extraData, setExtraData } = useGlobalStore()
  const transI18n = useTranslations("DataPage")
+  const { PEAKEvent } = useEventStore()
+  const { listAvatar } = useAvatarStore()
+  const { locale } = useLocaleStore()

  return (
-    <div className="px-4 sm:px-6 py-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {/* Theorycraft Mode */}
-        {extraData?.theory_craft?.mode !== undefined && (
-          <motion.div 
-            whileHover={{ scale: 1.02 }}
-            className="form-control bg-base-200 p-4 rounded-xl shadow"
-          >
-            <label className="flex flex-wrap items-center label cursor-pointer justify-start gap-3">
-              <Hammer className="text-primary" size={20}/>
+    <div className="px-4 sm:px-6 py-4 space-y-8">
+      {extraData?.theory_craft && (
+        <div className="space-y-4">
+          <h3 className="text-lg font-bold flex items-center gap-2">
+            {transI18n("theoryCraft")} 
+            <div className="tooltip tooltip-info" data-tip={transI18n("detailTheoryCraft")}>
+              <Info className="text-primary" size={20} />
+            </div>
+          </h3>
+
+          <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+            <label className="flex flex-wrap items-center cursor-pointer justify-start gap-3">
+              <Hammer className="text-primary" size={20} />
              <input
                type="checkbox"
                className="toggle toggle-primary"
                checked={extraData?.theory_craft?.mode}
-                onChange={(e) =>
+                onChange={(e) => {
                  setExtraData({
                    ...extraData,
-                    theory_craft: { ...extraData?.theory_craft, mode: e.target.checked }
+                    theory_craft: {
+                      hp: extraData?.theory_craft?.hp || {},
+                      cycle_count: extraData?.theory_craft?.cycle_count || 0,
+                      mode: e.target.checked
+                    }
                  })
                }
+
+                }
              />
              <span className="label-text font-semibold">{transI18n("theoryCraftMode")}</span>
            </label>
          </motion.div>
-        )}

-        {/* Cycle Count */}
-        {extraData?.theory_craft?.mode && (
-          <motion.div 
-            whileHover={{ scale: 1.02 }}
-            className="form-control bg-base-200 p-4 rounded-xl shadow"
-          >
-            <label className="flex flex-wrap items-center label justify-start gap-3">
-              <RefreshCw className="text-info" size={20}/>
-              <span className="label-text font-semibold">{transI18n("cycleCount")}</span>
-              <input
-                type="number"
-                className="input input-bordered"
-                value={extraData?.theory_craft?.cycle_count}
-                onChange={(e) =>
-                  setExtraData({
-                    ...extraData,
-                    theory_craft: {
-                      ...extraData?.theory_craft,
-                      cycle_count: parseInt(e.target.value) || 1
-                    }
-                  })
-                }
-                min="1"
-              />
-            </label>
-          </motion.div>
-        )}
+          {extraData?.theory_craft?.mode && (
+            <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+              <label className="flex flex-wrap items-center justify-start gap-3">
+                <RefreshCw className="text-info" size={20} />
+                <span className="label-text font-semibold">{transI18n("cycleCount")}</span>
+                <input
+                  type="number"
+                  className="input input-primary"
+                  value={extraData?.theory_craft?.cycle_count}
+                  onChange={(e) =>
+                    setExtraData({
+                      ...extraData,
+                      theory_craft: {
+                        hp: extraData?.theory_craft?.hp || {},
+                        cycle_count: parseInt(e.target.value) || 1,
+                        mode: extraData?.theory_craft?.mode || false
+                      }
+                    })
+                  }
+                  min="1"
+                />
+              </label>
+            </motion.div>
+          )}
+        </div>
+      )}

-        {/* Hidden UI */}
-        {extraData?.setting?.hide_ui !== undefined && (
-          <motion.div 
-            whileHover={{ scale: 1.02 }}
-            className="form-control bg-base-200 p-4 rounded-xl shadow"
-          >
-            <label className="flex flex-wrap items-center label cursor-pointer justify-start gap-3">
-              {extraData?.setting?.hide_ui 
-                ? <EyeOff className="text-warning" size={20}/>
-                : <Eye className="text-success" size={20}/>
+
+
+      {/*MULTIPATH CHAR */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-bold flex items-center gap-2">
+          {transI18n("multipathCharacter")}
+          <div className="tooltip tooltip-info" data-tip={transI18n("detailMultipathCharacter")}>
+            <Info className="text-primary" size={20} />
+          </div>
+        </h3>
+
+        <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+          <label className="flex items-center gap-3">
+            <User className="text-warning" size={20} />
+            <span className="label-text font-semibold">{transI18n("mainPath")}</span>
+            <SelectCustomImage
+              customSet={listAvatar.filter((it) => extraData?.multi_path?.multi_path_main?.includes(Number(it.id))).map((it) => ({
+                value: it.id,
+                label: getNameChar(locale, it),
+                imageUrl: `/icon/${it.baseType.toLowerCase()}.webp`
+              }))}
+              excludeSet={[]}
+              selectedCustomSet={extraData?.multi_path?.main?.toString() || ""}
+              placeholder={transI18n("selectAMainStat")}
+              setSelectedCustomSet={(it) => { 
+                if (!it) return
+                setExtraData({
+                  ...extraData,
+                  multi_path: {
+                    march_7: extraData?.multi_path?.march_7 || 1001,
+                    main: Number(it) || 8001,
+                    multi_path_main: extraData?.multi_path?.multi_path_main || [],
+                    multi_path_march_7: extraData?.multi_path?.multi_path_march_7 || []
+                  }
+                })
+              }}
+            />
+
+          </label>
+        </motion.div>
+
+        <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+          <label className="flex items-center gap-3">
+            <BowArrow className="text-info" size={20} />
+            <span className="label-text font-semibold">{transI18n("march7Path")}</span>
+            <SelectCustomImage
+              customSet={listAvatar.filter((it) => extraData?.multi_path?.multi_path_march_7?.includes(Number(it.id))).map((it) => ({
+                value: it.id,
+                label: getNameChar(locale, it),
+                imageUrl: `/icon/${it.baseType.toLowerCase()}.webp`
+              }))}
+              excludeSet={[]}
+              selectedCustomSet={extraData?.multi_path?.march_7?.toString() || ""}
+              placeholder={transI18n("selectAMainStat")}
+              setSelectedCustomSet={(it) => { 
+                if (!it) return
+                setExtraData({
+                  ...extraData,
+                  multi_path: {
+                    march_7: Number(it) || 1001,
+                    main: extraData?.multi_path?.main || 8001,
+                    multi_path_main: extraData?.multi_path?.multi_path_main || [],
+                    multi_path_march_7: extraData?.multi_path?.multi_path_march_7 || []
+                  }
+                })
+              }}
+            />
+          </label>
+        </motion.div>
+      </div>
+
+      {/* CHALLENGE */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-bold">{transI18n("challenge")}</h3>
+
+        <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+          <label className="flex items-center gap-3">
+            <Swords className="text-error" size={20} />
+            <span className="label-text font-semibold">{transI18n("anomalyArbitration")}</span>
+            <div className="tooltip tooltip-info" data-tip={transI18n("detailChallengePeak")}>
+              <Info className="text-primary" size={20} />
+            </div>
+            <select
+              value={extraData?.challenge?.challenge_peak_group_id || ""}
+              className="select select-error"
+              onChange={(e) =>
+                setExtraData({
+                  ...extraData,
+                  challenge: {
+                    skip_node: extraData?.challenge?.skip_node || 0,
+                    challenge_peak_group_id: parseInt(e.target.value) || 0,
+                    challenge_peak_group_id_list: extraData?.challenge?.challenge_peak_group_id_list || []
+                  }
+                })
              }
+            >
+              {PEAKEvent.filter(event => extraData?.challenge?.challenge_peak_group_id_list?.includes(Number(event.id))).map(event => (
+                <option key={event.id} value={event.id}>
+                  {getLocaleName(locale, event)} ({event.id})
+                </option>
+              ))}
+            </select>
+          </label>
+        </motion.div>
+
+        <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+          <label className="flex items-center gap-3">
+            <SkipForward className="text-warning" size={20} />
+            <span className="label-text font-semibold">{transI18n("skipNode")}</span>
+            <div className="tooltip tooltip-info" data-tip={transI18n("detailSkipNode")}>
+              <Info className="text-primary" size={20} />
+            </div>
+            <select
+              value={extraData?.challenge?.skip_node || "0"}
+              className="select select-warning"
+              onChange={(e) =>
+                setExtraData({
+                  ...extraData,
+                  challenge: {
+                    challenge_peak_group_id: extraData?.challenge?.challenge_peak_group_id || 0,
+                    challenge_peak_group_id_list: extraData?.challenge?.challenge_peak_group_id_list || [],
+                    skip_node: parseInt(e.target.value) || 0
+                  }
+                })
+              }
+            >
+              <option value="0">{transI18n("disableSkip")}</option>
+              <option value="1">{transI18n("skipNode1")}</option>
+              <option value="2">{transI18n("skipNode2")}</option>
+            </select>
+          </label>
+        </motion.div>
+      </div>
+
+      {/*EXTRA FEATURES */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-bold">{transI18n("extraFeatures")}</h3>
+
+        {extraData?.setting?.hide_ui !== undefined && (
+          <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+            <label className="flex flex-wrap items-center cursor-pointer justify-start gap-3">
+              {extraData?.setting?.hide_ui
+                ? <EyeOff className="text-warning" size={20} />
+                : <Eye className="text-success" size={20} />
+              }
+
              <input
                type="checkbox"
                className="toggle toggle-secondary"
@@ -82,23 +231,27 @@ export default function ExtraSettingBar() {
                onChange={(e) =>
                  setExtraData({
                    ...extraData,
-                    setting: { ...extraData?.setting, hide_ui: e.target.checked }
+                    setting: {
+                      hide_ui: e.target.checked,
+                      censorship: extraData?.setting?.censorship || false,
+                      cm: extraData?.setting?.cm || false,
+                      first_person: extraData?.setting?.first_person || false
+                    }
                  })
                }
              />
              <span className="label-text font-semibold">{transI18n("hideUI")}</span>
+              <div className="tooltip tooltip-info" data-tip={transI18n("detailHiddenUi")}>
+                <Info className="text-primary" size={20} />
+              </div>
            </label>
          </motion.div>
        )}

-        {/* Censorship */}
        {extraData?.setting?.censorship !== undefined && (
-          <motion.div 
-            whileHover={{ scale: 1.02 }}
-            className="form-control bg-base-200 p-4 rounded-xl shadow"
-          >
-            <label className="flex flex-wrap items-center label cursor-pointer justify-start gap-3">
-              <ShieldBan className="text-error" size={20}/>
+          <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+            <label className="flex flex-wrap items-center cursor-pointer justify-start gap-3">
+              <ShieldBan className="text-error" size={20} />
              <input
                type="checkbox"
                className="toggle toggle-accent"
@@ -106,15 +259,26 @@ export default function ExtraSettingBar() {
                onChange={(e) =>
                  setExtraData({
                    ...extraData,
-                    setting: { ...extraData?.setting, censorship: e.target.checked }
+                    setting: {
+                      censorship: e.target.checked,
+                      hide_ui: extraData?.setting?.hide_ui || false,
+                      cm: extraData?.setting?.cm || false,
+                      first_person: extraData?.setting?.first_person || false
+                    }
                  })
                }
              />
              <span className="label-text font-semibold">{transI18n("disableCensorship")}</span>
+              <div className="tooltip tooltip-info" data-tip={transI18n("detailDisableCensorship")}>
+                <Info className="text-primary" size={20} />
+              </div>
            </label>
          </motion.div>
        )}
      </div>
+
+
+
    </div>
-  );
+  )
 }
--- a/src/components/monsterBar/peak.tsx
+++ b/src/components/monsterBar/peak.tsx
@@ -108,7 +108,7 @@ export default function PeakBar() {
                    <SelectCustomText
                        customSet={PEAKEvent.map((peak) => ({
                            id: peak.id,
-                            name: `${getLocaleName(locale, peak)} (${peak.id}) `,
+                            name: `${getLocaleName(locale, peak)} (${peak.id})`,
                        }))}
                        excludeSet={[]}
                        selectedCustomSet={peak_config.event_id.toString()}
--- a/src/components/relicBar/index.tsx
+++ b/src/components/relicBar/index.tsx
@@ -413,19 +413,19 @@ export default function RelicMaker() {
                                    <div className="grid grid-cols-3 gap-1">
                                        <button
                                            onClick={() => handleSubStatChange(v.affixId, index, v.rollCount + 1, v.stepCount + 0)}
-                                            className="btn btn-sm bg-white text-slate-800 hover:bg-gray-200 border-0"
+                                            className="btn btn-sm btn-info border-0"
                                        >
                                            {calcAffixBonus(subAffixOptions[v.affixId], 0, v.rollCount + 1)}{mappingStats?.[subAffixOptions[v.affixId]?.property]?.unit || ""}
                                        </button>
                                        <button
                                            onClick={() => handleSubStatChange(v.affixId, index, v.rollCount + 1, v.stepCount + 1)}
-                                            className="btn btn-sm bg-white text-slate-800 hover:bg-gray-200 border-0"
+                                            className="btn btn-sm btn-info border-0"
                                        >
                                            {calcAffixBonus(subAffixOptions[v.affixId], v.stepCount + 1, v.rollCount + 1)}{mappingStats?.[subAffixOptions[v.affixId]?.property]?.unit || ""}
                                        </button>
                                        <button
                                            onClick={() => handleSubStatChange(v.affixId, index, v.rollCount + 1, v.stepCount + 2)}
-                                            className="btn btn-sm bg-white text-slate-800 hover:bg-gray-200 border-0"
+                                            className="btn btn-sm btn-info border-0"
                                        >
                                            {calcAffixBonus(subAffixOptions[v.affixId], v.stepCount + 2, v.rollCount + 1)}{mappingStats?.[subAffixOptions[v.affixId]?.property]?.unit || ""}
                                        </button>
@@ -441,19 +441,19 @@ export default function RelicMaker() {
                                    <div className="grid grid-cols-3 gap-1">
                                        <button
                                            onClick={() => handleSubStatChange(v.affixId, index, Math.max(v.rollCount - 1, 0), Math.max(v.stepCount, 0))}
-                                            className="btn btn-sm bg-white text-slate-800 hover:bg-gray-200 border-0"
+                                            className="btn btn-sm btn-info border-0"
                                        >
                                            {calcAffixBonus(subAffixOptions[v.affixId], 0, Math.max(v.rollCount - 1, 0))}{mappingStats?.[subAffixOptions[v.affixId]?.property]?.unit || ""}
                                        </button>
                                        <button
                                            onClick={() => handleSubStatChange(v.affixId, index, Math.max(v.rollCount - 1, 0), Math.max(v.stepCount - 1, 0))}
-                                            className="btn btn-sm bg-white text-slate-800 hover:bg-gray-200 border-0"
+                                            className="btn btn-sm btn-info border-0"
                                        >
                                            {calcAffixBonus(subAffixOptions[v.affixId], Math.max(v.stepCount - 1, 0), Math.max(v.rollCount - 1, 0))}{mappingStats?.[subAffixOptions[v.affixId]?.property]?.unit || ""}
                                        </button>
                                        <button
                                            onClick={() => handleSubStatChange(v.affixId, index, Math.max(v.rollCount - 1, 0), Math.max(v.stepCount - 2, 0))}
-                                            className="btn btn-sm bg-white text-slate-800 hover:bg-gray-200 border-0"
+                                            className="btn btn-sm btn-info border-0"
                                        >
                                            {calcAffixBonus(subAffixOptions[v.affixId], Math.max(v.stepCount - 2, 0), Math.max(v.rollCount - 1, 0))}{mappingStats?.[subAffixOptions[v.affixId]?.property]?.unit || ""}
                                        </button>
--- a/src/components/select/customSelectImage.tsx
+++ b/src/components/select/customSelectImage.tsx
@@ -4,6 +4,7 @@ import Select, { SingleValue } from 'react-select'
 import Image from 'next/image'
 import useLocaleStore from '@/stores/localeStore'
 import ParseText from '../parseText'
+import { themeColors } from '@/constant/constant'

 export type SelectOption = {
  value: string
@@ -12,8 +13,8 @@ export type SelectOption = {
 }

 type SelectCustomProp = {
-  customSet:  SelectOption[]
-  excludeSet:  SelectOption[]
+  customSet: SelectOption[]
+  excludeSet: SelectOption[]
  selectedCustomSet: string
  placeholder: string
  setSelectedCustomSet: (value: string) => void
@@ -21,31 +22,54 @@ type SelectCustomProp = {

 export default function SelectCustomImage({ customSet, excludeSet, selectedCustomSet, placeholder, setSelectedCustomSet }: SelectCustomProp) {
  const options: SelectOption[] = customSet
-  const { locale } = useLocaleStore()
+  const { locale, theme } = useLocaleStore()
+
+  const c = themeColors[theme] || themeColors.winter
+
  const customStyles = {
-    option: (provided: any) => ({
-      ...provided,
+    option: (p: any, s: any) => ({
+      ...p,
      display: 'flex',
      alignItems: 'center',
      gap: '8px',
-      padding: '8px',
-      backgroundColor: 'transparent',
+      padding: '8px 12px',
+      backgroundColor: s.isFocused ? c.bgHover : c.bg,
+      color: c.text,
+      cursor: 'pointer'
    }),
-    singleValue: (provided: any) => ({
-      ...provided,
+
+    singleValue: (p: any) => ({
+      ...p,
      display: 'flex',
      alignItems: 'center',
      gap: '8px',
-      backgroundColor: 'transparent',
+      color: c.text
    }),
-    menuPortal: (provided: any) => ({ ...provided, zIndex: 9999 }),
-    menu: (provided: any) => ({ ...provided, zIndex: 9999 })
+
+    control: (p: any) => ({
+      ...p,
+      backgroundColor: c.bg,
+      borderColor: c.border,
+      boxShadow: 'none'
+    }),
+
+    menu: (p: any) => ({
+      ...p,
+      backgroundColor: c.bg,
+      color: c.text,
+      zIndex: 9999
+    }),
+
+    menuPortal: (p: any) => ({
+      ...p,
+      zIndex: 9999
+    })
  }

  const formatOptionLabel = (option: SelectOption) => (
    <div className="flex items-center gap-1 w-full h-full z-50">
      <Image src={option.imageUrl} alt="" width={125} height={125} className="w-8 h-8 object-contain bg-warning-content rounded-full" />
-      <ParseText className='font-bold text-warning-content' text={option.label} locale={locale} />
+      <ParseText className='font-bold' text={option.label} locale={locale} />
    </div>
  )

@@ -53,14 +77,15 @@ export default function SelectCustomImage({ customSet, excludeSet, selectedCusto
    <Select
      options={options.filter(opt => !excludeSet.some(ex => ex.value === opt.value))}
      value={options.find(opt => {
-        return opt.value === selectedCustomSet}) || null}
+        return opt.value === selectedCustomSet
+      }) || null}
      onChange={(selected: SingleValue<SelectOption>) => {
        setSelectedCustomSet(selected?.value || '')
      }}
      formatOptionLabel={formatOptionLabel}
      styles={customStyles}
      placeholder={placeholder}
-      className="my-react-select-container" 
+      className="my-react-select-container"
      classNamePrefix="my-react-select"
      isSearchable
      isClearable
--- a/src/components/select/customSelectText.tsx
+++ b/src/components/select/customSelectText.tsx
@@ -2,6 +2,8 @@
 'use client'
 import Select, { SingleValue } from 'react-select'
 import { replaceByParam } from '@/helper'
+import useLocaleStore from '@/stores/localeStore'
+import { themeColors } from '@/constant/constant'

 export type SelectOption = {
  id: string
@@ -20,29 +22,52 @@ type SelectCustomProp = {

 export default function SelectCustomText({ customSet, excludeSet, selectedCustomSet, placeholder, setSelectedCustomSet }: SelectCustomProp) {
  const options: SelectOption[] = customSet
+  const { theme } = useLocaleStore()
+  const c = themeColors[theme] || themeColors.winter
+
  const customStyles = {
-    option: (provided: any) => ({
-      ...provided,
+    option: (p: any, s: any) => ({
+      ...p,
      display: 'flex',
      alignItems: 'center',
      gap: '8px',
-      padding: '8px',
-      backgroundColor: 'transparent',
+      padding: '8px 12px',
+      backgroundColor: s.isFocused ? c.bgHover : c.bg,
+      color: c.text,
+      cursor: 'pointer'
    }),
-    singleValue: (provided: any) => ({
-      ...provided,
+
+    singleValue: (p: any) => ({
+      ...p,
      display: 'flex',
      alignItems: 'center',
-      gap: '8px'
+      gap: '8px',
+      color: c.text
    }),

+    control: (p: any) => ({
+      ...p,
+      backgroundColor: c.bg,
+      borderColor: c.border,
+      boxShadow: 'none'
+    }),

-    menuPortal: (provided: any) => ({ ...provided, zIndex: 9999 }),
-    menu: (provided: any) => ({ ...provided, zIndex: 9999 })
+    menu: (p: any) => ({
+      ...p,
+      backgroundColor: c.bg,
+      color: c.text,
+      zIndex: 9999
+    }),
+
+    menuPortal: (p: any) => ({
+      ...p,
+      zIndex: 9999
+    })
  }

+
  const formatOptionLabel = (option: SelectOption) => (
-    <div className="flex flex-col gap-1 w-full h-full z-50 text-warning-content ">
+    <div className="flex flex-col gap-1 w-full h-full z-50">
      <div
        className="font-bold text-lg"
        dangerouslySetInnerHTML={{
--- a/src/components/themeController/themeContext.tsx
+++ b/src/components/themeController/themeContext.tsx
@@ -17,7 +17,7 @@ export const ThemeProvider = ({ children }: PropsWithChildren) => {
            const storedTheme = localStorage.getItem("theme");
            if (storedTheme) setTheme(storedTheme);
        }
-    }, []);
+    }, [setTheme]);

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const changeTheme = (nextTheme: string | null) => {