Better tauri listeners and stuff

src-web/components/App.tsx

@@ -1,25 +1,11 @@
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { persistQueryClient } from '@tanstack/react-query-persist-client';
-import { invoke } from '@tauri-apps/api';
-import { listen } from '@tauri-apps/api/event';
-import { appWindow } from '@tauri-apps/api/window';
 import { MotionConfig } from 'framer-motion';
 import { Suspense } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { HelmetProvider } from 'react-helmet-async';
-import { matchPath } from 'react-router-dom';
-import { keyValueQueryKey } from '../hooks/useKeyValue';
-import { requestsQueryKey } from '../hooks/useRequests';
-import { responsesQueryKey } from '../hooks/useResponses';
-import { routePaths } from '../hooks/useRoutes';
-import { UPDATE_DEBOUNCE_MILLIS } from '../hooks/useTauriListeners';
-import { workspacesQueryKey } from '../hooks/useWorkspaces';
-import { DEFAULT_FONT_SIZE } from '../lib/constants';
-import { debounce } from '../lib/debounce';
-import { extractKeyValue } from '../lib/keyValueStore';
-import type { HttpRequest, HttpResponse, KeyValue, Workspace } from '../lib/models';
 import { AppRouter } from './AppRouter';
 import { DialogProvider } from './DialogContext';
 
@@ -43,106 +29,6 @@ persistQueryClient({
   maxAge: 1000 * 60 * 60 * 24, // 24 hours
 });
 
-await listen(
-  'updated_key_value',
-  debounce(({ payload: keyValue }: { payload: KeyValue }) => {
-    if (keyValue.updatedBy === appWindow.label) return;
-    queryClient.setQueryData(keyValueQueryKey(keyValue), extractKeyValue(keyValue));
-  }, UPDATE_DEBOUNCE_MILLIS),
-);
-
-await listen('updated_response', ({ payload: response }: { payload: HttpResponse }) => {
-  queryClient.setQueryData(
-    responsesQueryKey(response.requestId),
-    (responses: HttpResponse[] = []) => {
-      // We want updates from every response
-      // if (response.updatedBy === appWindow.label) return;
-
-      const newResponses = [];
-      let found = false;
-      for (const r of responses) {
-        if (r.id === response.id) {
-          found = true;
-          newResponses.push(response);
-        } else {
-          newResponses.push(r);
-        }
-      }
-      if (!found) {
-        newResponses.push(response);
-      }
-      return newResponses;
-    },
-  );
-});
-
-await listen(
-  'updated_workspace',
-  debounce(({ payload: workspace }: { payload: Workspace }) => {
-    queryClient.setQueryData(workspacesQueryKey(), (workspaces: Workspace[] = []) => {
-      if (workspace.updatedBy === appWindow.label) return;
-
-      const newWorkspaces = [];
-      let found = false;
-      for (const w of workspaces) {
-        if (w.id === workspace.id) {
-          found = true;
-          newWorkspaces.push(workspace);
-        } else {
-          newWorkspaces.push(w);
-        }
-      }
-      if (!found) {
-        newWorkspaces.push(workspace);
-      }
-      return newWorkspaces;
-    });
-  }, UPDATE_DEBOUNCE_MILLIS),
-);
-
-await listen(
-  'deleted_model',
-  ({ payload: model }: { payload: Workspace | HttpRequest | HttpResponse | KeyValue }) => {
-    function removeById<T extends { id: string }>(model: T) {
-      return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id);
-    }
-
-    if (model.model === 'workspace') {
-      queryClient.setQueryData(workspacesQueryKey(), removeById<Workspace>(model));
-    } else if (model.model === 'http_request') {
-      queryClient.setQueryData(requestsQueryKey(model.workspaceId), removeById<HttpRequest>(model));
-    } else if (model.model === 'http_response') {
-      queryClient.setQueryData(responsesQueryKey(model.requestId), removeById<HttpResponse>(model));
-    } else if (model.model === 'key_value') {
-      queryClient.setQueryData(keyValueQueryKey(model), undefined);
-    }
-  },
-);
-
-await listen('send_request', async () => {
-  const params = matchPath(routePaths.request(), window.location.pathname);
-  const requestId = params?.params.requestId;
-  if (typeof requestId !== 'string') {
-    return;
-  }
-  await invoke('send_request', { requestId });
-});
-
-await listen('zoom', ({ payload: zoomDelta }: { payload: number }) => {
-  const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-
-  let newFontSize;
-  if (zoomDelta === 0) {
-    newFontSize = DEFAULT_FONT_SIZE;
-  } else if (zoomDelta > 0) {
-    newFontSize = Math.min(fontSize * 1.1, DEFAULT_FONT_SIZE * 5);
-  } else if (zoomDelta < 0) {
-    newFontSize = Math.max(fontSize * 0.9, DEFAULT_FONT_SIZE * 0.4);
-  }
-
-  document.documentElement.style.fontSize = `${newFontSize}px`;
-});
-
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>

src-web/components/RequestPane.tsx

@@ -1,8 +1,8 @@
 import classnames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
+import { createGlobalState } from 'react-use';
 import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useKeyValue } from '../hooks/useKeyValue';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { tryFormatJson } from '../lib/formatters';
@@ -33,15 +33,14 @@ interface Props {
   className?: string;
 }
 
+const useActiveTab = createGlobalState<string>('body');
+
 export const RequestPane = memo(function RequestPane({ style, fullHeight, className }: Props) {
   const activeRequest = useActiveRequest();
   const activeRequestId = activeRequest?.id ?? null;
   const updateRequest = useUpdateRequest(activeRequestId);
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
-  const activeTab = useKeyValue<string>({
-    key: ['active_request_body_tab'],
-    defaultValue: 'body',
-  });
+  const [activeTab, setActiveTab] = useActiveTab();
 
   const tabs: TabItem[] = useMemo(
     () =>
@@ -136,8 +135,8 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
         <>
           <UrlBar id={activeRequest.id} url={activeRequest.url} method={activeRequest.method} />
           <Tabs
-            value={activeTab.value}
-            onChangeValue={activeTab.set}
+            value={activeTab}
+            onChangeValue={setActiveTab}
             tabs={tabs}
             className="mt-2"
             label="Request body"

src-web/components/ToggleThemeButton.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTheme } from '../hooks/useTheme';
-import { toggleAppearance } from '../lib/theme/window';
 import { IconButton } from './core/IconButton';
 
 export function ToggleThemeButton() {

src-web/components/Workspaces.tsx

@@ -1,11 +1,9 @@
 import { Navigate } from 'react-router-dom';
-import { useKeyValue } from '../hooks/useKeyValue';
 import { useRoutes } from '../hooks/useRoutes';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import { Heading } from './core/Heading';
 
 export default function Workspaces() {
-  const lastWorkspace = useKeyValue<string | null>({ key: 'last_workspace', defaultValue: null });
   const routes = useRoutes();
   const workspaces = useWorkspaces();
   const workspace = workspaces[0];

src-web/components/core/Dialog.tsx

@@ -1,10 +1,10 @@
 import classnames from 'classnames';
 import { motion } from 'framer-motion';
-import { useMemo } from 'react';
 import type { ReactNode } from 'react';
+import { useMemo } from 'react';
 import { Overlay } from '../Overlay';
 import { IconButton } from './IconButton';
-import { HStack, VStack } from './Stacks';
+import { VStack } from './Stacks';
 
 export interface DialogProps {
   children: ReactNode;

src-web/components/core/Editor/extensions.ts

@@ -33,7 +33,6 @@ import {
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { graphql, graphqlLanguageSupport } from 'cm6-graphql';
-import { render } from 'react-dom';
 import type { EditorProps } from './index';
 import { text } from './text/extension';
 import { twig } from './twig/extension';

src-web/components/core/RadioDropdown.tsx

@@ -3,23 +3,28 @@ import type { DropdownItemSeparator, DropdownProps } from './Dropdown';
 import { Dropdown } from './Dropdown';
 import { Icon } from './Icon';
 
-export type RadioDropdownItem =
+export type RadioDropdownItem<T = string | null> =
   | {
       type?: 'default';
       label: string;
       shortLabel?: string;
-      value: string | null;
+      value: T;
     }
   | DropdownItemSeparator;
 
-export interface RadioDropdownProps {
-  value: string | null;
-  onChange: (value: string | null) => void;
-  items: RadioDropdownItem[];
+export interface RadioDropdownProps<T = string | null> {
+  value: T;
+  onChange: (value: T) => void;
+  items: RadioDropdownItem<T>[];
   children: DropdownProps['children'];
 }
 
-export function RadioDropdown({ value, items, onChange, children }: RadioDropdownProps) {
+export function RadioDropdown<T = string | null>({
+  value,
+  items,
+  onChange,
+  children,
+}: RadioDropdownProps<T>) {
   const dropdownItems = useMemo(
     () =>
       items.map((item) => {