Remove most of Radix UI

src-web/hooks/useActiveRequest.ts

@@ -1,16 +1,9 @@
-import { useEffect, useState } from 'react';
 import type { HttpRequest } from '../lib/models';
 import { useActiveRequestId } from './useActiveRequestId';
 import { useRequests } from './useRequests';
 
 export function useActiveRequest(): HttpRequest | null {
-  const requests = useRequests();
   const requestId = useActiveRequestId();
-  const [activeRequest, setActiveRequest] = useState<HttpRequest | null>(null);
-
-  useEffect(() => {
-    setActiveRequest(requests.find((r) => r.id === requestId) ?? null);
-  }, [requests, requestId]);
-
-  return activeRequest;
+  const requests = useRequests();
+  return requests.find((r) => r.id === requestId) ?? null;
 }

src-web/hooks/usePortal.ts

@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+
+const PORTAL_CONTAINER_ID = 'react-portal';
+
+export function usePortal(name: string) {
+  const ref = useRef(getOrCreatePortal(name));
+  return ref.current;
+}
+
+function getOrCreatePortal(name: string) {
+  const portalContainer = document.getElementById(PORTAL_CONTAINER_ID) as HTMLDivElement;
+  let existing = portalContainer.querySelector(`:scope > [data-portal-name="${name}"]`);
+  if (!existing) {
+    const el: HTMLDivElement = document.createElement('div');
+    el.setAttribute('data-portal-name', name);
+    portalContainer.appendChild(el);
+    existing = el;
+  }
+  return existing;
+}

src-web/hooks/useRequests.ts

@@ -2,21 +2,21 @@ import { useQuery } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
 import { convertDates } from '../lib/models';
-import { useActiveWorkspace } from './useActiveWorkspace';
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 
 export function requestsQueryKey(workspaceId: string) {
   return ['http_requests', { workspaceId }];
 }
 
 export function useRequests() {
-  const workspace = useActiveWorkspace();
+  const workspaceId = useActiveWorkspaceId();
   return (
     useQuery({
-      enabled: workspace != null,
-      queryKey: requestsQueryKey(workspace?.id ?? 'n/a'),
+      enabled: workspaceId != null,
+      queryKey: requestsQueryKey(workspaceId ?? 'n/a'),
       queryFn: async () => {
-        if (workspace == null) return [];
-        const requests = (await invoke('requests', { workspaceId: workspace.id })) as HttpRequest[];
+        if (workspaceId == null) return [];
+        const requests = (await invoke('requests', { workspaceId })) as HttpRequest[];
         return requests.map(convertDates);
       },
     }).data ?? []

src-web/hooks/useTheme.ts

@@ -10,7 +10,7 @@ import { useKeyValue } from './useKeyValue';
 export function useTheme() {
   const appearanceKv = useKeyValue<Appearance>({
     key: 'appearance',
-    initialValue: getAppearance(),
+    defaultValue: getAppearance(),
   });
 
   const themeChange = (appearance: Appearance) => {

src-web/hooks/useUpdateAnyRequest.ts

@@ -1,13 +1,12 @@
 import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
-import { useRequests } from './useRequests';
+import { getRequest } from '../lib/store';
 
 export function useUpdateAnyRequest() {
-  const requests = useRequests();
   return useMutation<void, unknown, Partial<HttpRequest> & { id: string }>({
     mutationFn: async (patch) => {
-      const request = requests.find((r) => r.id === patch.id) ?? null;
+      const request = await getRequest(patch.id);
       if (request === null) {
         throw new Error("Can't update a null request");
       }

src-web/hooks/useUpdateRequest.ts

@@ -1,12 +1,12 @@
 import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
-import { useRequest } from './useRequest';
+import { getRequest } from '../lib/store';
 
 export function useUpdateRequest(id: string | null) {
-  const request = useRequest(id);
   return useMutation<void, unknown, Partial<HttpRequest>>({
     mutationFn: async (patch) => {
+      const request = await getRequest(id);
       if (request == null) {
         throw new Error("Can't update a null request");
       }