Make settings menu a regular window (#113)

src-web/components/CommandPalette.tsx

@@ -1,11 +1,10 @@
 import classNames from 'classnames';
 import { search } from 'fast-fuzzy';
 import type { KeyboardEvent, ReactNode } from 'react';
-import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
 import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
@@ -17,6 +16,7 @@ import { useEnvironments } from '../hooks/useEnvironments';
 import type { HotkeyAction } from '../hooks/useHotKey';
 import { useHotKey } from '../hooks/useHotKey';
 import { useHttpRequestActions } from '../hooks/useHttpRequestActions';
+import { useOpenSettings } from '../hooks/useOpenSettings';
 import { useOpenWorkspace } from '../hooks/useOpenWorkspace';
 import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
 import { useRecentRequests } from '../hooks/useRecentRequests';
@@ -28,7 +28,6 @@ import { useSendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
-import { invokeCmd } from '../lib/tauri';
 import { CookieDialog } from './CookieDialog';
 import { Button } from './core/Button';
 import { Heading } from './core/Heading';
@@ -74,11 +73,11 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
   const createGrpcRequest = useCreateGrpcRequest();
   const createEnvironment = useCreateEnvironment();
   const dialog = useDialog();
-  const workspace = useActiveWorkspace();
   const sendRequest = useSendAnyHttpRequest();
   const renameRequest = useRenameRequest(activeRequest?.id ?? null);
   const deleteRequest = useDeleteRequest(activeRequest?.id ?? null);
   const [, setSidebarHidden] = useSidebarHidden();
+  const openSettings = useOpenSettings();
 
   const workspaceCommands = useMemo<CommandPaletteItem[]>(() => {
     const commands: CommandPaletteItem[] = [
@@ -86,14 +85,7 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
         key: 'settings.open',
         label: 'Open Settings',
         action: 'settings.show',
-        onSelect: async () => {
-          if (workspace == null) return;
-          await invokeCmd('cmd_new_nested_window', {
-            url: routes.paths.workspaceSettings({ workspaceId: workspace.id }),
-            label: 'settings',
-            title: 'Yaak Settings',
-          });
-        },
+        onSelect: openSettings.mutate,
       },
       {
         key: 'app.create',
@@ -195,11 +187,10 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
     deleteRequest.mutate,
     dialog,
     httpRequestActions,
+    openSettings.mutate,
     renameRequest.mutate,
-    routes.paths,
     sendRequest,
     setSidebarHidden,
-    workspace,
   ]);
 
   const sortedRequests = useMemo(() => {

src-web/components/GlobalHooks.tsx

@@ -160,9 +160,8 @@ export function GlobalHooks() {
       return;
     }
 
-    const { interfaceScale, interfaceFontSize, editorFontSize } = settings;
+    const { interfaceScale, editorFontSize } = settings;
     getCurrentWebviewWindow().setZoom(interfaceScale).catch(console.error);
-    document.documentElement.style.setProperty('font-size', `${interfaceFontSize}px`);
     document.documentElement.style.setProperty('--editor-font-size', `${editorFontSize}px`);
   }, [settings]);
 

src-web/components/SettingsDropdown.tsx

@@ -1,13 +1,11 @@
 import { open } from '@tauri-apps/plugin-shell';
 import { useRef } from 'react';
-import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useAppInfo } from '../hooks/useAppInfo';
-import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useCheckForUpdates } from '../hooks/useCheckForUpdates';
 import { useExportData } from '../hooks/useExportData';
 import { useImportData } from '../hooks/useImportData';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
-import { invokeCmd } from '../lib/tauri';
+import { useOpenSettings } from '../hooks/useOpenSettings';
 import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
@@ -22,19 +20,9 @@ export function SettingsDropdown() {
   const dropdownRef = useRef<DropdownRef>(null);
   const dialog = useDialog();
   const checkForUpdates = useCheckForUpdates();
-  const routes = useAppRoutes();
-  const workspace = useActiveWorkspace();
+  const openSettings = useOpenSettings();
 
-  const showSettings = async () => {
-    if (!workspace) return;
-    await invokeCmd('cmd_new_nested_window', {
-      url: routes.paths.workspaceSettings({ workspaceId: workspace.id }),
-      label: 'settings',
-      title: 'Yaak Settings',
-    });
-  };
-
-  useListenToTauriEvent('settings', showSettings);
+  useListenToTauriEvent('settings', () => openSettings.mutate());
 
   return (
     <Dropdown
@@ -45,7 +33,7 @@ export function SettingsDropdown() {
           label: 'Settings',
           hotKeyAction: 'settings.show',
           leftSlot: <Icon icon="settings" />,
-          onSelect: showSettings,
+          onSelect: openSettings.mutate,
         },
         {
           key: 'hotkeys',

src-web/font-size.ts

@@ -0,0 +1,15 @@
+// Listen for settings changes, the re-compute theme
+import { listen } from '@tauri-apps/api/event';
+import type { ModelPayload } from './components/GlobalHooks';
+import { getSettings } from './lib/store';
+
+function setFontSizeOnDocument(fontSize: number) {
+  document.documentElement.style.fontSize = `${fontSize}px`;
+}
+
+listen<ModelPayload>('upserted_model', async (event) => {
+  if (event.payload.model.model !== 'settings') return;
+  setFontSizeOnDocument(event.payload.model.interfaceFontSize);
+}).catch(console.error);
+
+getSettings().then((settings) => setFontSizeOnDocument(settings.interfaceFontSize));

src-web/hooks/useOpenSettings.ts

@@ -0,0 +1,22 @@
+import { useMutation } from '@tanstack/react-query';
+import { invokeCmd } from '../lib/tauri';
+import { useActiveWorkspace } from './useActiveWorkspace';
+import { useAppRoutes } from './useAppRoutes';
+
+export function useOpenSettings() {
+  const routes = useAppRoutes();
+  const workspace = useActiveWorkspace();
+  return useMutation({
+    mutationKey: ['open_settings'],
+    mutationFn: async () => {
+      if (workspace == null) return;
+
+      await invokeCmd('cmd_new_child_window', {
+        url: routes.paths.workspaceSettings({ workspaceId: workspace.id }),
+        label: 'settings',
+        title: 'Yaak Settings',
+        innerSize: [600, 550],
+      });
+    },
+  });
+}

src-web/hooks/useOpenWorkspace.ts

@@ -26,7 +26,7 @@ export function useOpenWorkspace() {
           requestId != null
             ? routes.paths.request({ ...baseArgs, requestId })
             : routes.paths.workspace({ ...baseArgs });
-        await invokeCmd('cmd_new_window', { url: path });
+        await invokeCmd('cmd_new_main_window', { url: path });
       } else {
         if (requestId != null) {
           routes.navigate('request', { ...baseArgs, requestId });

src-web/index.html

@@ -27,6 +27,7 @@
 <div id="react-portal"></div>
 <div id="radix-portal" class="cm-portal"></div>
 <script type="module" src="/theme.ts"></script>
+<script type="module" src="/font-size.ts"></script>
 <script type="module" src="/main.tsx"></script>
 </body>
 </html>

src-web/lib/tauri.ts

@@ -51,8 +51,8 @@ type TauriCmd =
   | 'cmd_list_plugins'
   | 'cmd_list_workspaces'
   | 'cmd_metadata'
-  | 'cmd_new_nested_window'
-  | 'cmd_new_window'
+  | 'cmd_new_main_window'
+  | 'cmd_new_child_window'
   | 'cmd_parse_template'
   | 'cmd_plugin_info'
   | 'cmd_render_template'