Flatten migrations, kvs lib, fix tabs

src-web/hooks/useIsResponseLoading.ts

@@ -4,5 +4,5 @@ export function useIsResponseLoading(): boolean {
   const responses = useResponses();
   const response = responses[responses.length - 1];
   if (!response) return false;
-  return !(response.body || response.error);
+  return !(response.body || response.status || response.error);
 }

src-web/hooks/useKeyValue.ts

@@ -0,0 +1,39 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { buildKeyValueKey, getKeyValue, setKeyValue } from '../lib/keyValueStore';
+
+const DEFAULT_NAMESPACE = 'app';
+
+export function keyValueQueryKey({
+  namespace = DEFAULT_NAMESPACE,
+  key,
+}: {
+  namespace?: string;
+  key: string | string[];
+}) {
+  return ['key_value', { namespace, key: buildKeyValueKey(key) }];
+}
+
+export function useKeyValue<T extends string | number | boolean>({
+  namespace = DEFAULT_NAMESPACE,
+  key,
+  initialValue,
+}: {
+  namespace?: string;
+  key: string | string[];
+  initialValue: T;
+}) {
+  const query = useQuery<T>({
+    initialData: initialValue,
+    queryKey: keyValueQueryKey({ namespace, key }),
+    queryFn: async () => getKeyValue({ namespace, key, fallback: initialValue }),
+  });
+
+  const mutate = useMutation<T, unknown, T>({
+    mutationFn: (value) => setKeyValue<T>({ namespace, key, value }),
+  });
+
+  return {
+    value: query.data,
+    set: (value: T) => mutate.mutate(value),
+  };
+}

src-web/hooks/useKeyValues.ts

@@ -1,57 +0,0 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
-import type { KeyValue } from '../lib/models';
-
-const DEFAULT_NAMESPACE = 'app';
-
-export function keyValueQueryKey({
-  namespace = DEFAULT_NAMESPACE,
-  key,
-}: {
-  namespace?: string;
-  key: string | string[];
-}) {
-  return ['key_value', { namespace, key: buildKey(key) }];
-}
-
-export function useKeyValues<T extends string | number | boolean>({
-  namespace = DEFAULT_NAMESPACE,
-  key,
-  initialValue,
-}: {
-  namespace?: string;
-  key: string | string[];
-  initialValue: T;
-}) {
-  const query = useQuery<KeyValue | null>({
-    initialData: null,
-    queryKey: keyValueQueryKey({ namespace, key }),
-    queryFn: async () => invoke('get_key_value', { namespace, key: buildKey(key) }),
-  });
-
-  const mutate = useMutation<KeyValue, unknown, T>({
-    mutationFn: (value) => {
-      return invoke('set_key_value', {
-        namespace,
-        key: buildKey(key),
-        value: JSON.stringify(value),
-      });
-    },
-  });
-
-  let value: T;
-  try {
-    value = JSON.parse(query.data?.value ?? JSON.stringify(initialValue));
-  } catch (e) {
-    value = initialValue;
-  }
-  return {
-    value,
-    set: (value: T) => mutate.mutate(value),
-  };
-}
-
-function buildKey(key: string | string[]): string {
-  if (typeof key === 'string') return key;
-  return key.join('::');
-}

src-web/hooks/useResponseViewMode.ts

@@ -1,7 +1,7 @@
-import { useKeyValues } from './useKeyValues';
+import { useKeyValue } from './useKeyValue';
 
 export function useResponseViewMode(requestId?: string): [string, () => void] {
-  const v = useKeyValues({
+  const v = useKeyValue<string>({
     namespace: 'app',
     key: ['response_view_mode', requestId ?? 'n/a'],
     initialValue: 'pretty',

src-web/hooks/useTheme.ts

@@ -1,3 +1,4 @@
+import { app } from '@tauri-apps/api';
 import { useEffect } from 'react';
 import type { Appearance } from '../lib/theme/window';
 import {
@@ -5,10 +6,13 @@ import {
   setAppearance,
   subscribeToPreferredAppearanceChange,
 } from '../lib/theme/window';
-import { useKeyValues } from './useKeyValues';
+import { useKeyValue } from './useKeyValue';
 
 export function useTheme() {
-  const appearanceKv = useKeyValues({ key: 'appearance', initialValue: getAppearance() });
+  const appearanceKv = useKeyValue<Appearance>({
+    key: 'appearance',
+    initialValue: getAppearance(),
+  });
 
   const themeChange = (appearance: Appearance) => {
     appearanceKv.set(appearance);
@@ -22,7 +26,7 @@ export function useTheme() {
   useEffect(() => subscribeToPreferredAppearanceChange(themeChange), []);
 
   // Sync appearance when k/v changes
-  useEffect(() => setAppearance(appearanceKv.value as Appearance), [appearanceKv.value]);
+  useEffect(() => setAppearance(appearanceKv.value), [appearanceKv.value]);
 
   return {
     appearance: appearanceKv.value,

src-web/hooks/useWorkspaces.ts

@@ -6,6 +6,7 @@ import { useQuery } from '@tanstack/react-query';
 export function useWorkspaces() {
   return (
     useQuery(['workspaces'], async () => {
+      console.log('INVOKING WORKSPACES');
       const workspaces = (await invoke('workspaces')) as Workspace[];
       return workspaces.map(convertDates);
     }).data ?? []