Open workspace pref (#44)

Ability to remember workspace window opening selection.

src-web/components/OpenWorkspaceDialog.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { useOpenWorkspace } from '../hooks/useOpenWorkspace';
+import { useSettings } from '../hooks/useSettings';
+import { useUpdateSettings } from '../hooks/useUpdateSettings';
+import type { Workspace } from '../lib/models';
+import { Button } from './core/Button';
+import { Checkbox } from './core/Checkbox';
+import { Icon } from './core/Icon';
+import { InlineCode } from './core/InlineCode';
+import { HStack, VStack } from './core/Stacks';
+
+interface Props {
+  hide: () => void;
+  workspace: Workspace;
+}
+
+export function OpenWorkspaceDialog({ hide, workspace }: Props) {
+  const openWorkspace = useOpenWorkspace();
+  const settings = useSettings();
+  const updateSettings = useUpdateSettings();
+  const [remember, setRemember] = useState<boolean>(false);
+
+  return (
+    <VStack space={3}>
+      <p>
+        Where would you like to open <InlineCode>{workspace.name}</InlineCode>?
+      </p>
+      <HStack space={2} justifyContent="start" className="flex-row-reverse">
+        <Button
+          className="focus"
+          color="primary"
+          onClick={() => {
+            hide();
+            openWorkspace.mutate({ workspace, inNewWindow: false });
+            if (remember) {
+              updateSettings.mutate({ openWorkspaceNewWindow: false });
+            }
+          }}
+        >
+          This Window
+        </Button>
+        <Button
+          className="focus"
+          color="secondary"
+          rightSlot={<Icon icon="externalLink" />}
+          onClick={() => {
+            hide();
+            openWorkspace.mutate({ workspace, inNewWindow: true });
+            if (remember) {
+              updateSettings.mutate({ openWorkspaceNewWindow: true });
+            }
+          }}
+        >
+          New Window
+        </Button>
+      </HStack>
+      {settings && (
+        <HStack justifyContent="end">
+          <Checkbox checked={remember} title="Remember my choice" onChange={setRemember} />
+        </HStack>
+      )}
+    </VStack>
+  );
+}

src-web/components/Settings/SettingsGeneral.tsx

@@ -50,6 +50,33 @@ export function SettingsGeneral() {
           onClick={() => checkForUpdates.mutateAsync()}
         />
       </div>
+      <Select
+        name="openWorkspace"
+        label="Open Workspace"
+        labelPosition="left"
+        size="sm"
+        value={
+          settings.openWorkspaceNewWindow === true
+            ? 'new'
+            : settings.openWorkspaceNewWindow === false
+            ? 'current'
+            : 'ask'
+        }
+        onChange={(v) => {
+          if (v === 'current') {
+            updateSettings.mutate({ openWorkspaceNewWindow: false });
+          } else if (v === 'new') {
+            updateSettings.mutate({ openWorkspaceNewWindow: true });
+          } else {
+            updateSettings.mutate({ openWorkspaceNewWindow: null });
+          }
+        }}
+        options={[
+          { label: 'Always Ask', value: 'ask' },
+          { label: 'Current Window', value: 'current' },
+          { label: 'New Window', value: 'new' },
+        ]}
+      />
       <Separator className="my-4" />
 
       <Heading size={2}>

src-web/components/WorkspaceActionsDropdown.tsx

@@ -1,13 +1,11 @@
-import { invoke } from '@tauri-apps/api/core';
 import classNames from 'classnames';
 import { memo, useMemo } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
-import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useCommand } from '../hooks/useCommands';
 import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
+import { useOpenWorkspace } from '../hooks/useOpenWorkspace';
 import { usePrompt } from '../hooks/usePrompt';
-import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
-import { getRecentRequests } from '../hooks/useRecentRequests';
+import { useSettings } from '../hooks/useSettings';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import type { ButtonProps } from './core/Button';
@@ -16,8 +14,8 @@ import type { DropdownItem } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { InlineCode } from './core/InlineCode';
-import { HStack } from './core/Stacks';
 import { useDialog } from './DialogContext';
+import { OpenWorkspaceDialog } from './OpenWorkspaceDialog';
 
 type Props = Pick<ButtonProps, 'className' | 'justify' | 'forDropdown' | 'leftSlot'>;
 
@@ -33,7 +31,9 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   const createWorkspace = useCommand('workspace.create');
   const dialog = useDialog();
   const prompt = usePrompt();
-  const routes = useAppRoutes();
+  const settings = useSettings();
+  const openWorkspace = useOpenWorkspace();
+  const openWorkspaceNewWindow = settings?.openWorkspaceNewWindow ?? null;
 
   const items: DropdownItem[] = useMemo(() => {
     const workspaceItems: DropdownItem[] = workspaces.map((w) => ({
@@ -41,58 +41,16 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
       label: w.name,
       leftSlot: w.id === activeWorkspaceId ? <Icon icon="check" /> : <Icon icon="empty" />,
       onSelect: async () => {
+        if (typeof openWorkspaceNewWindow === 'boolean') {
+          openWorkspace.mutate({ workspace: w, inNewWindow: openWorkspaceNewWindow });
+          return;
+        }
+
         dialog.show({
           id: 'open-workspace',
           size: 'sm',
           title: 'Open Workspace',
-          description: (
-            <>
-              Where would you like to open <InlineCode>{w.name}</InlineCode>?
-            </>
-          ),
-          render: ({ hide }) => {
-            return (
-              <HStack space={2} justifyContent="start" className="mt-4 mb-6 flex-row-reverse">
-                <Button
-                  className="focus"
-                  color="primary"
-                  onClick={async () => {
-                    hide();
-                    const environmentId = (await getRecentEnvironments(w.id))[0];
-                    const requestId = (await getRecentRequests(w.id))[0];
-                    if (requestId != null) {
-                      routes.navigate('request', { workspaceId: w.id, environmentId, requestId });
-                    } else {
-                      routes.navigate('workspace', { workspaceId: w.id, environmentId });
-                    }
-                  }}
-                >
-                  This Window
-                </Button>
-                <Button
-                  className="focus"
-                  color="secondary"
-                  rightSlot={<Icon icon="externalLink" />}
-                  onClick={async () => {
-                    hide();
-                    const environmentId = (await getRecentEnvironments(w.id))[0];
-                    const requestId = (await getRecentRequests(w.id))[0];
-                    const path =
-                      requestId != null
-                        ? routes.paths.request({
-                            workspaceId: w.id,
-                            environmentId,
-                            requestId,
-                          })
-                        : routes.paths.workspace({ workspaceId: w.id, environmentId });
-                    await invoke('cmd_new_window', { url: path });
-                  }}
-                >
-                  New Window
-                </Button>
-              </HStack>
-            );
-          },
+          render: ({ hide }) => <OpenWorkspaceDialog workspace={w} hide={hide} />,
         });
       },
     }));
@@ -152,8 +110,9 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
     createWorkspace,
     deleteWorkspace.mutate,
     dialog,
+    openWorkspace,
     prompt,
-    routes,
+    openWorkspaceNewWindow,
     updateWorkspace,
     workspaces,
   ]);

src-web/components/core/Dialog.tsx

@@ -67,7 +67,7 @@ export function Dialog({
               'rounded-lg',
               'border border-background-highlight-secondary shadow-lg shadow-[rgba(0,0,0,0.1)]',
               'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
-              size === 'sm' && 'w-[25rem] max-h-[80vh]',
+              size === 'sm' && 'w-[28rem] max-h-[80vh]',
               size === 'md' && 'w-[45rem] max-h-[80vh]',
               size === 'lg' && 'w-[65rem] max-h-[80vh]',
               size === 'full' && 'w-[100vw] h-[100vh]',