fix(frontend): harden modal state handling

Author: dreamguxiang

frontend/src/App.tsx

@@ -407,19 +407,27 @@ function App() {
                         </div>
 
                         <TermsModal
-                          isOpen={termsOpen && !isOnboardingMode}
+                          isOpen={
+                            termsOpen && !isOnboardingMode && !isUpdatingMode
+                          }
                           countdown={termsCountdown}
                           onAccept={acceptTerms}
                         />
 
                         <ClarityConsentModal
-                          isOpen={clarityPromptOpen && !isOnboardingMode}
+                          isOpen={
+                            clarityPromptOpen &&
+                            !isOnboardingMode &&
+                            !isUpdatingMode
+                          }
                           onEnable={acceptClarity}
                           onKeepDisabled={declineClarity}
                         />
 
                         <UpdateModal
-                          isOpen={updateOpen && !isOnboardingMode}
+                          isOpen={
+                            updateOpen && !isOnboardingMode && !isUpdatingMode
+                          }
                           version={updateVersion}
                           body={updateBody}
                           loading={updateLoading}
@@ -447,7 +455,11 @@ function App() {
                         />
 
                         <LipUpdateModal
-                          isOpen={lipUpdateOpen && !isOnboardingMode}
+                          isOpen={
+                            lipUpdateOpen &&
+                            !isOnboardingMode &&
+                            !isUpdatingMode
+                          }
                           currentVersion={lipCurrentVersion}
                           latestVersion={lipLatestVersion}
                           onDismiss={() => {

frontend/src/components/BaseModal.tsx

@@ -33,7 +33,12 @@ export const BaseModal: React.FC<ModalProps> = (props) => {
           className="wails-draggable fixed inset-x-0 top-0 h-14 z-[75]"
         />
       ) : null}
-      <Modal isOpen={isOpen} {...rest} backdrop="blur" classNames={finalClassNames} />
+      <Modal
+        isOpen={isOpen}
+        {...rest}
+        backdrop="blur"
+        classNames={finalClassNames}
+      />
     </>
   );
 };

frontend/src/components/ClarityConsentModal.tsx

@@ -21,7 +21,6 @@ export const ClarityConsentModal: React.FC<ClarityConsentModalProps> = ({
     <UnifiedModal
       size="lg"
       isOpen={isOpen}
-      onOpenChange={() => {}}
       type="info"
       title={t("clarity.prompt.title")}
       hideCloseButton
@@ -48,7 +47,9 @@ export const ClarityConsentModal: React.FC<ClarityConsentModalProps> = ({
             size="sm"
             radius="full"
             variant="flat"
-            onPress={() => Browser.OpenURL("https://clarity.microsoft.com/terms")}
+            onPress={() =>
+              Browser.OpenURL("https://clarity.microsoft.com/terms")
+            }
           >
             {t("clarity.prompt.clarity_terms")}
           </Button>

frontend/src/components/TermsModal.tsx

@@ -21,7 +21,6 @@ export const TermsModal: React.FC<TermsModalProps> = ({
     <UnifiedModal
       size="lg"
       isOpen={isOpen}
-      onOpenChange={() => {}}
       type="primary"
       title={t("terms.title")}
       hideCloseButton
@@ -38,11 +37,7 @@ export const TermsModal: React.FC<TermsModalProps> = ({
           >
             {t("terms.decline")}
           </Button>
-          <Button
-            color="primary"
-            isDisabled={countdown > 0}
-            onPress={onAccept}
-          >
+          <Button color="primary" isDisabled={countdown > 0} onPress={onAccept}>
             {countdown > 0
               ? `${t("terms.agree")} (${countdown}s)`
               : t("terms.agree")}

frontend/src/components/UnifiedModal.tsx

@@ -21,7 +21,7 @@ export type ModalType = "success" | "warning" | "error" | "info" | "primary";
 
 export interface UnifiedModalProps {
   isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
   type?: ModalType;
   title: React.ReactNode;
   children?: React.ReactNode;
@@ -145,6 +145,7 @@ export const UnifiedModal: React.FC<UnifiedModalProps> = ({
   title,
   children,
   footer,
+  hideCloseButton = false,
   isDismissable = false,
   size = "md",
   scrollBehavior = "inside",
@@ -167,6 +168,7 @@ export const UnifiedModal: React.FC<UnifiedModalProps> = ({
   const { t } = useTranslation();
   const config = TYPE_CONFIG[type];
   const Icon = config.icon;
+  const handleOpenChange = onOpenChange ?? (() => {});
   const resolvedConfirmText = confirmText ?? t("common.confirm");
   const resolvedCancelText = cancelText ?? t("common.cancel");
   const resolvedConfirmButtonProps = getUnifiedModalConfirmButtonProps(type, {
@@ -191,9 +193,9 @@ export const UnifiedModal: React.FC<UnifiedModalProps> = ({
   return (
     <BaseModal
       isOpen={isOpen}
-      onOpenChange={onOpenChange}
+      onOpenChange={handleOpenChange}
       size={size}
-      hideCloseButton={true}
+      hideCloseButton={hideCloseButton}
       isDismissable={isDismissable}
       scrollBehavior={scrollBehavior}
       classNames={{

frontend/src/hooks/useLauncher.ts

@@ -3,7 +3,10 @@ import { useDisclosure } from "@heroui/react";
 import { Events } from "@wailsio/runtime";
 import { useNavigate } from "react-router-dom";
 import { compareVersions } from "@/utils/version";
-import { readCurrentVersionName, saveCurrentVersionName } from "@/utils/currentVersion";
+import {
+  readCurrentVersionName,
+  saveCurrentVersionName,
+} from "@/utils/currentVersion";
 import * as minecraft from "bindings/github.com/liteldev/LeviLauncher/minecraft";
 import {
   EnsureGameInputInteractive,
@@ -21,10 +24,30 @@ import { GetMods } from "bindings/github.com/liteldev/LeviLauncher/modsservice";
 import { getPlayerGamertagMap, listPlayers } from "@/utils/content";
 import { ROUTES } from "@/constants/routes";
 
-let __didCheckGameInput = false;
-let __didCheckGamingServices = false;
-let __didCheckVcRuntime = false;
 const IGNORE_GS_KEY = "ll.ignore.gs";
+const DEPENDENCY_CHECK_SESSION_KEYS = {
+  gameInput: "ll.session.dependency-check.gameinput",
+  gamingServices: "ll.session.dependency-check.gamingservices",
+  vcRuntime: "ll.session.dependency-check.vcruntime",
+} as const;
+
+const hasSessionDependencyCheckRun = (
+  key: (typeof DEPENDENCY_CHECK_SESSION_KEYS)[keyof typeof DEPENDENCY_CHECK_SESSION_KEYS],
+): boolean => {
+  try {
+    return window.sessionStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+};
+
+const markSessionDependencyCheckRun = (
+  key: (typeof DEPENDENCY_CHECK_SESSION_KEYS)[keyof typeof DEPENDENCY_CHECK_SESSION_KEYS],
+) => {
+  try {
+    window.sessionStorage.setItem(key, "1");
+  } catch {}
+};
 
 const getNextRandomTipIndex = (currentIndex: number, totalTips: number) => {
   const normalizedTotal = Math.max(1, totalTips);
@@ -282,8 +305,7 @@ export const useLauncher = (args: any) => {
         try {
           const mods = ((await (GetMods as any)?.(name)) || []) as any[];
           installed = mods.some(
-            (m: any) =>
-              String(m?.name || "").toLowerCase() === "levilamina",
+            (m: any) => String(m?.name || "").toLowerCase() === "levilamina",
           );
         } catch {}
 
@@ -612,8 +634,10 @@ export const useLauncher = (args: any) => {
   useEffect(() => {
     if (!hasBackend) return;
     const timer = setTimeout(() => {
-      if (!__didCheckVcRuntime) {
-        __didCheckVcRuntime = true;
+      if (
+        !hasSessionDependencyCheckRun(DEPENDENCY_CHECK_SESSION_KEYS.vcRuntime)
+      ) {
+        markSessionDependencyCheckRun(DEPENDENCY_CHECK_SESSION_KEYS.vcRuntime);
         try {
           (minecraft as any)?.IsVcRuntimeInstalled?.().then((ok: boolean) => {
             if (!ok) {
@@ -622,8 +646,10 @@ export const useLauncher = (args: any) => {
           });
         } catch {}
       }
-      if (!__didCheckGameInput) {
-        __didCheckGameInput = true;
+      if (
+        !hasSessionDependencyCheckRun(DEPENDENCY_CHECK_SESSION_KEYS.gameInput)
+      ) {
+        markSessionDependencyCheckRun(DEPENDENCY_CHECK_SESSION_KEYS.gameInput);
         try {
           minecraft?.IsGameInputInstalled?.().then((ok: boolean) => {
             if (!ok) {
@@ -632,8 +658,14 @@ export const useLauncher = (args: any) => {
           });
         } catch {}
       }
-      if (!__didCheckGamingServices) {
-        __didCheckGamingServices = true;
+      if (
+        !hasSessionDependencyCheckRun(
+          DEPENDENCY_CHECK_SESSION_KEYS.gamingServices,
+        )
+      ) {
+        markSessionDependencyCheckRun(
+          DEPENDENCY_CHECK_SESSION_KEYS.gamingServices,
+        );
         try {
           const ig = String(localStorage.getItem(IGNORE_GS_KEY) || "") === "1";
           if (!ig) {
@@ -647,7 +679,12 @@ export const useLauncher = (args: any) => {
       }
     }, 0);
     return () => clearTimeout(timer);
-  }, [hasBackend, gameInputMissingDisclosure, gamingServicesMissingDisclosure]);
+  }, [
+    hasBackend,
+    gameInputMissingDisclosure,
+    gamingServicesMissingDisclosure,
+    vcRuntimeMissingDisclosure,
+  ]);
 
   useEffect(() => {
     const unlistenGiStart = Events.On("gameinput.ensure.start", () => {
@@ -1256,5 +1293,3 @@ export const useLauncher = (args: any) => {
     handleGdkMissingGoSettings,
   };
 };
-
-

frontend/src/pages/BehaviorPacksPage.tsx

@@ -597,15 +597,15 @@ export default function BehaviorPacksPage() {
             />
 
             <div className="flex items-center gap-3">
-                <Dropdown classNames={COMPONENT_STYLES.dropdown}>
-                  <DropdownTrigger>
-                    <Button
-                      variant="flat"
-                      radius="full"
-                      className="min-w-[120px] bg-default-100 dark:bg-zinc-800 text-default-600 dark:text-zinc-200 font-medium"
-                      startContent={
-                        sort.sortAsc ? <FaSortAmountDown /> : <FaSortAmountUp />
-                      }
+              <Dropdown classNames={COMPONENT_STYLES.dropdown}>
+                <DropdownTrigger>
+                  <Button
+                    variant="flat"
+                    radius="full"
+                    className="min-w-[120px] bg-default-100 dark:bg-zinc-800 text-default-600 dark:text-zinc-200 font-medium"
+                    startContent={
+                      sort.sortAsc ? <FaSortAmountDown /> : <FaSortAmountUp />
+                    }
                   >
                     {sort.sortKey === "name"
                       ? (t("filemanager.sort.name") as string)
@@ -666,9 +666,7 @@ export default function BehaviorPacksPage() {
             </span>
             <span className="text-default-300 dark:text-zinc-700">|</span>
             <span>{t("contentpage.isolation")}:</span>
-            <span
-              className="font-medium text-default-700 dark:text-zinc-200 bg-default-100 dark:bg-zinc-800 px-2 py-0.5 rounded-md"
-            >
+            <span className="font-medium text-default-700 dark:text-zinc-200 bg-default-100 dark:bg-zinc-800 px-2 py-0.5 rounded-md">
               {roots.isIsolation ? t("common.yes") : t("common.no")}
             </span>
           </div>
@@ -878,7 +876,6 @@ export default function BehaviorPacksPage() {
 
       <UnifiedModal
         isOpen={transferring}
-        onOpenChange={() => {}}
         type="primary"
         title={t("contentpage.transfer_progress_title")}
         icon={<FaExchangeAlt className="w-6 h-6" />}

frontend/src/pages/ContentPage.tsx

@@ -87,9 +87,7 @@ export default function ContentPage() {
                       |
                     </span>
                     <span>{t("contentpage.isolation")}:</span>
-                    <span
-                      className="font-medium text-default-700 dark:text-zinc-200 bg-default-100 dark:bg-zinc-800 px-2 py-0.5 rounded-md"
-                    >
+                    <span className="font-medium text-default-700 dark:text-zinc-200 bg-default-100 dark:bg-zinc-800 px-2 py-0.5 rounded-md">
                       {cp.roots.isIsolation ? t("common.yes") : t("common.no")}
                     </span>
                     <span className="text-default-300 dark:text-zinc-600">
@@ -520,7 +518,6 @@ export default function ContentPage() {
 
       <UnifiedModal
         isOpen={cp.importing}
-        onOpenChange={() => {}}
         type="primary"
         title={
           cp.transferring