Theme system refactor (#31)

src-web/hooks/Confirm.tsx

@@ -32,10 +32,10 @@ export function Confirm({ onHide, onResult, confirmText, variant = 'confirm' }:
 
   return (
     <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
-      <Button className="focus" color={colors[variant]} onClick={handleSuccess}>
+      <Button color={colors[variant]} onClick={handleSuccess}>
         {confirmText ?? confirmButtonTexts[variant]}
       </Button>
-      <Button className="focus" color="gray" onClick={handleHide}>
+      <Button onClick={handleHide} variant="border">
         Cancel
       </Button>
     </HStack>

src-web/hooks/Prompt.tsx

@@ -52,10 +52,10 @@ export function Prompt({
         onChange={setValue}
       />
       <HStack space={2} justifyContent="end">
-        <Button className="focus" color="gray" onClick={onHide}>
+        <Button onClick={onHide} variant="border">
           Cancel
         </Button>
-        <Button type="submit" className="focus" color="primary">
+        <Button type="submit" color="primary">
           {confirmLabel}
         </Button>
       </HStack>

src-web/hooks/useKeyValue.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { buildKeyValueKey, getKeyValue, setKeyValue } from '../lib/keyValueStore';
 
-const DEFAULT_NAMESPACE = 'app';
+const DEFAULT_NAMESPACE = 'global';
 
 export function keyValueQueryKey({
   namespace = DEFAULT_NAMESPACE,
@@ -20,7 +20,7 @@ export function useKeyValue<T extends Object | null>({
   key,
   fallback,
 }: {
-  namespace?: 'app' | 'no_sync' | 'global';
+  namespace?: 'global' | 'no_sync';
   key: string | string[];
   fallback: T;
 }) {
@@ -51,7 +51,8 @@ export function useKeyValue<T extends Object | null>({
         await mutate.mutateAsync(value);
       }
     },
-    [fallback, key, mutate, namespace],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fallback, key, namespace],
   );
 
   const reset = useCallback(async () => mutate.mutateAsync(fallback), [mutate, fallback]);

src-web/hooks/useNotificationToast.tsx

@@ -1,8 +1,8 @@
+import { invoke } from '@tauri-apps/api/core';
+import { open } from '@tauri-apps/plugin-shell';
+import { Button } from '../components/core/Button';
 import { useToast } from '../components/ToastContext';
 import { useListenToTauriEvent } from './useListenToTauriEvent';
-import { Button } from '../components/core/Button';
-import { open } from '@tauri-apps/plugin-shell';
-import { invoke } from '@tauri-apps/api/core';
 
 export function useNotificationToast() {
   const toast = useToast();
@@ -31,7 +31,7 @@ export function useNotificationToast() {
         actionLabel && actionUrl ? (
           <Button
             size="xs"
-            color="gray"
+            color="secondary"
             className="mr-auto min-w-[5rem]"
             onClick={() => {
               toast.hide(payload.id);

src-web/hooks/usePinnedGrpcConnection.ts

@@ -0,0 +1,19 @@
+import type { GrpcConnection, GrpcRequest } from '../lib/models';
+import { useGrpcConnections } from './useGrpcConnections';
+import { useKeyValue } from './useKeyValue';
+import { useLatestGrpcConnection } from './useLatestGrpcConnection';
+
+export function usePinnedGrpcConnection(activeRequest: GrpcRequest) {
+  const latestConnection = useLatestGrpcConnection(activeRequest.id);
+  const { set: setPinnedConnectionId, value: pinnedConnectionId } = useKeyValue<string | null>({
+    // Key on latest connection instead of activeRequest because connections change out of band of active request
+    key: ['pinned_grpc_connection_id', latestConnection?.id ?? 'n/a'],
+    fallback: null,
+    namespace: 'global',
+  });
+  const connections = useGrpcConnections(activeRequest.id);
+  const activeConnection: GrpcConnection | null =
+    connections.find((r) => r.id === pinnedConnectionId) ?? latestConnection;
+
+  return { activeConnection, setPinnedConnectionId, pinnedConnectionId, connections } as const;
+}

src-web/hooks/usePinnedHttpResponse.ts

@@ -1,28 +1,19 @@
-import { useCallback, useEffect } from 'react';
-import { createGlobalState } from 'react-use';
 import type { HttpRequest, HttpResponse } from '../lib/models';
 import { useHttpResponses } from './useHttpResponses';
+import { useKeyValue } from './useKeyValue';
 import { useLatestHttpResponse } from './useLatestHttpResponse';
 
-const usePinnedResponseIdState = createGlobalState<string | null>(null);
-
 export function usePinnedHttpResponse(activeRequest: HttpRequest) {
-  const [pinnedResponseId, setPinnedResponseId] = usePinnedResponseIdState();
   const latestResponse = useLatestHttpResponse(activeRequest.id);
+  const { set: setPinnedResponseId, value: pinnedResponseId } = useKeyValue<string | null>({
+    // Key on latest response instead of activeRequest because responses change out of band of active request
+    key: ['pinned_http_response_id', latestResponse?.id ?? 'n/a'],
+    fallback: null,
+    namespace: 'global',
+  });
   const responses = useHttpResponses(activeRequest.id);
-  const activeResponse: HttpResponse | null = pinnedResponseId
-    ? responses.find((r) => r.id === pinnedResponseId) ?? null
-    : latestResponse ?? null;
+  const activeResponse: HttpResponse | null =
+    responses.find((r) => r.id === pinnedResponseId) ?? latestResponse;
 
-  // Unset pinned response when a new one comes in
-  useEffect(() => setPinnedResponseId(null), [responses.length, setPinnedResponseId]);
-
-  const setPinnedResponse = useCallback(
-    (r: HttpResponse) => {
-      setPinnedResponseId(r.id);
-    },
-    [setPinnedResponseId],
-  );
-
-  return { activeResponse, setPinnedResponse, pinnedResponseId, responses } as const;
+  return { activeResponse, setPinnedResponseId, pinnedResponseId, responses } as const;
 }