[Fix] Fix Various bugs on the Explore Apps Page (#1142)

### Context

There are a smattering of bugs on the explore apps page. Clicking
"Enable App" may enable the app, but the button still shows, plus it
causes unnecessary redirects while the modal is still up. This behavior
can be seen in the linked clip


https://github.com/user-attachments/assets/09b12ccf-e174-4289-91f3-4f0e73cfe7e4

### Summary of Changes

We dynamically handle the modal open state, and track the path updates.
This lets us deal with the bugs above while avoiding unnecessary
renders, allowing reopening of previously opened modals, and preventing
unnecessary redirects.
Dealing with the enable apps button issues also now allows users to
navigate to the app page from the explore apps modal.

We also add a disable button to the modal. Previously, users had to
check the options for each app in order to disable it. Now they can do
it on the modal itself, which is in line with how the "Enable App"
functionality works.

### UI Demo




https://github.com/user-attachments/assets/5bfd35c6-5d28-4f99-958a-9300533e2351

Author: nams1570

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

@@ -7,32 +7,67 @@ import { Dialog, DialogContent, DialogTitle } from "@/components/ui";
 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 { wait } from "@stackframe/stack-shared/dist/utils/promises";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export default function AppDetailsModalPageClient({ appId }: { appId: AppId }) {
   const router = useRouter();
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(true);
 
   const adminApp = useAdminApp();
   const project = adminApp.useProject();
+  const config = project.useConfig();
   const updateConfig = useUpdateConfig();
 
+  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);
+    setIsOpen(isModalRoute);
+  }, [pathname]);
+
   const handleEnable = async () => {
-    await wait(1000);
     await updateConfig({
       adminApp,
       configUpdate: { [`apps.installed.${appId}.enabled`]: true },
       pushable: true,
     });
+  };
+
+  const handleDisable = async () => {
+    await updateConfig({
+      adminApp,
+      configUpdate: { [`apps.installed.${appId}.enabled`]: false },
+      pushable: true,
+    });
+  };
+
+  const handleOpen = () => {
     const path = getAppPath(project.id, ALL_APPS_FRONTEND[appId]);
-    router.push(path);
+    // Navigate to the app page. Modal stays open until pathname changes.
+    router.replace(path);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      // Navigate back to apps list. Modal stays open until pathname changes.
+      router.replace(`/projects/${project.id}/apps`);
+    }
   };
 
   return (
-    <Dialog open={true} onOpenChange={(open) => !open && router.back()} modal>
+    <Dialog open={isOpen} onOpenChange={handleOpenChange} modal>
       <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0 flex flex-col" noCloseButton>
         <AppStoreEntry
           appId={appId}
+          isEnabled={isEnabled}
           onEnable={handleEnable}
+          onDisable={handleDisable}
+          onOpen={handleOpen}
           titleComponent={DialogTitle}
         />
       </DialogContent>

apps/dashboard/src/components/app-store-entry.tsx

@@ -156,8 +156,9 @@ export function AppStoreEntry({
                       {onDisable && (
                         <Button
                           onClick={onDisable}
-                          variant="secondary"
-                          size="sm"
+                          variant="ghost"
+                          size="lg"
+                          className="text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950 dark:hover:text-red-300"
                         >
                           Disable
                         </Button>