Open Settings in a dialog on the web build (#581)

apps/yaak-client/commands/openSettings.tsx

@@ -1,33 +1,42 @@
 import { platform } from "@yaakapp-internal/platform";
-import type { SettingsTab } from "../components/Settings/Settings";
+import type { SettingsTab, SettingsTabWithSubtab } from "../components/Settings/Settings";
 import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
 import { createFastMutation } from "../hooks/useFastMutation";
+import { showDialog } from "../lib/dialog";
 import { jotaiStore } from "../lib/jotai";
 import { router } from "../lib/router";
 import { rpc } from "../lib/rpc";
 
-// Allow tab with optional subtab (e.g., "plugins:installed")
-type SettingsTabWithSubtab = SettingsTab | `${SettingsTab}:${string}` | null;
-
-export const openSettings = createFastMutation<void, string, SettingsTabWithSubtab>({
+export const openSettings = createFastMutation<void, string, SettingsTabWithSubtab | null>({
   mutationKey: ["open_settings"],
   mutationFn: async (tab) => {
     const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
     if (workspaceId == null) return;
 
-    const to = "/workspaces/$workspaceId/settings" as const;
-    const params = { workspaceId };
-    const search = { tab: (tab ?? undefined) as SettingsTab | undefined };
-
     // Settings is its own window where the host has windows to give. Where it
-    // doesn't — a browser tab — the same route opens in place, which is the
-    // whole difference: it is already a route, not a separate app.
+    // doesn't — a browser tab — it's a dialog like any other, so opening it
+    // doesn't take you away from the request you were working on.
     if (!platform.capabilities.multiWindow) {
-      await router.navigate({ to, params, search });
+      // Imported here so Settings stays out of the startup bundle, the way the
+      // route that renders it on desktop already keeps it
+      const { default: Settings } = await import("../components/Settings/Settings");
+      showDialog({
+        id: "settings",
+        size: "md",
+        className: "h-[calc(100vh-5rem)] max-h-150! overflow-hidden",
+        noPadding: true,
+        noScroll: true,
+        // Keyed so opening a specific tab while the dialog is already up moves to it
+        render: ({ hide }) => <Settings key={tab ?? "general"} tab={tab} hide={hide} />,
+      });
       return;
     }
 
-    const location = router.buildLocation({ to, params, search });
+    const location = router.buildLocation({
+      to: "/workspaces/$workspaceId/settings",
+      params: { workspaceId },
+      search: { tab: (tab ?? undefined) as SettingsTab | undefined },
+    });
 
     await rpc("cmd_new_child_window", {
       url: location.href,