refactor: simplify modal handling

This deals with issues in our old approach.
If a confirmation dialog pops up, and the user declines to navigate,
the modal will not be closed.

Author: nams1570

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/@modal/(.)apps/[appId]/page-client.tsx

@@ -8,15 +8,12 @@ import { ALL_APPS_FRONTEND, getAppPath } from "@/lib/apps-frontend";
 import { useUpdateConfig } from "@/lib/config-update";
 import { AppId } from "@stackframe/stack-shared/dist/apps/apps-config";
 import { usePathname } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function AppDetailsModalPageClient({ appId }: { appId: AppId }) {
   const router = useRouter();
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(true);
-  const [navigateTo, setNavigateTo] = useState<string | null>(null);
-  // Tracks whether we've already navigated to prevent duplicate navigations
-  const hasNavigatedRef = useRef(false);
 
   const adminApp = useAdminApp();
   const project = adminApp.useProject();
@@ -25,24 +22,14 @@ export default function AppDetailsModalPageClient({ appId }: { appId: AppId }) {
 
   const isEnabled = config.apps.installed[appId]?.enabled ?? false;
 
+  // Control modal visibility based on whether we're on a modal route.
+  // This ensures the modal only closes when navigation actually succeeds,
+  // preventing issues if router.replace is vetoed by a confirmation dialog.
   useEffect(() => {
     const isModalRoute = /^\/projects\/[^/]+\/apps\/[^/]+$/.test(pathname);
-    if (isModalRoute) {
-      setIsOpen(true);
-      setNavigateTo(null);
-      // Block any stale navigation from previous session's navigateTo value
-      hasNavigatedRef.current = true;
-    }
+    setIsOpen(isModalRoute);
   }, [pathname]);
 
-  useEffect(() => {
-    if (!isOpen && navigateTo && !hasNavigatedRef.current) {
-      // Mark as navigated to prevent duplicate navigation on re-renders
-      hasNavigatedRef.current = true;
-      router.replace(navigateTo);
-    }
-  }, [isOpen, navigateTo, router]);
-
   const handleEnable = async () => {
     await updateConfig({
       adminApp,
@@ -61,18 +48,14 @@ export default function AppDetailsModalPageClient({ appId }: { appId: AppId }) {
 
   const handleOpen = () => {
     const path = getAppPath(project.id, ALL_APPS_FRONTEND[appId]);
-    // Allow navigation by resetting the flag (was set to true by pathname effect)
-    hasNavigatedRef.current = false;
-    setNavigateTo(path);
-    setIsOpen(false);
+    // Navigate to the app page. Modal stays open until pathname changes.
+    router.replace(path);
   };
 
   const handleOpenChange = (open: boolean) => {
     if (!open) {
-      setIsOpen(false);
-      if (!navigateTo) {
-        router.replace(`/projects/${project.id}/apps`);
-      }
+      // Navigate back to apps list. Modal stays open until pathname changes.
+      router.replace(`/projects/${project.id}/apps`);
     }
   };