Switch to Preact!!!

src-web/components/Button.tsx

@@ -1,6 +1,7 @@
 import classnames from 'classnames';
-import type { ButtonHTMLAttributes, ForwardedRef } from 'react';
-import { forwardRef } from 'react';
+import type { ComponentChildren } from 'preact';
+import type { ForwardedRef } from 'preact/compat';
+import { forwardRef } from 'preact/compat';
 import { Icon } from './Icon';
 
 const colorStyles = {
@@ -13,11 +14,17 @@ const colorStyles = {
   danger: 'bg-red-400 text-white hover:bg-red-500',
 };
 
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = {
   color?: keyof typeof colorStyles;
   size?: 'sm' | 'md';
   justify?: 'start' | 'center';
+  type?: 'button' | 'submit';
+  onClick?: (event: MouseEvent) => void;
   forDropdown?: boolean;
+  className?: string;
+  children?: ComponentChildren;
+  disabled?: boolean;
+  title?: string;
 };
 
 export const Button = forwardRef(function Button(

src-web/components/ButtonLink.tsx

@@ -1,22 +1,14 @@
 import classnames from 'classnames';
-import type { LinkProps } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import { Link } from 'preact-router';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
-type Props = ButtonProps & LinkProps;
+type Props = ButtonProps & {
+  href: string;
+};
 
-export function ButtonLink({
-  reloadDocument,
-  replace,
-  state,
-  preventScrollReset,
-  relative,
-  to,
-  className,
-  ...buttonProps
-}: Props) {
-  const linkProps = { reloadDocument, replace, state, preventScrollReset, relative, to };
+export function ButtonLink({ href, className, ...buttonProps }: Props) {
+  const linkProps = { href };
   return (
     <Link {...linkProps}>
       <Button className={classnames(className, 'w-full')} {...buttonProps} />

src-web/components/Dialog.tsx

@@ -1,12 +1,13 @@
 import * as D from '@radix-ui/react-dialog';
 import classnames from 'classnames';
 import { motion } from 'framer-motion';
+import type { ComponentChildren } from 'preact';
 import React from 'react';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 
 interface Props {
-  children: React.ReactNode;
+  children: ComponentChildren;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   title: string;

src-web/components/Dropdown.tsx

@@ -1,13 +1,13 @@
 import * as D from '@radix-ui/react-dropdown-menu';
-import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
 import { CheckIcon } from '@radix-ui/react-icons';
 import classnames from 'classnames';
 import { motion } from 'framer-motion';
-import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
+import type { ComponentChildren } from 'preact';
+import type { ForwardedRef } from 'preact/compat';
 import { forwardRef, useImperativeHandle, useLayoutEffect, useState } from 'react';
 
 interface DropdownMenuRadioProps {
-  children: ReactNode;
+  children: ComponentChildren;
   onValueChange: ((v: { label: string; value: string }) => void) | null;
   value: string;
   label?: string;
@@ -37,13 +37,13 @@ export function DropdownMenuRadio({
       <DropdownMenuPortal>
         <DropdownMenuContent>
           {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
-          <DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
+          <D.DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
             {items.map((item) => (
               <DropdownMenuRadioItem key={item.value} value={item.value}>
                 {item.label}
               </DropdownMenuRadioItem>
             ))}
-          </DropdownMenuRadioGroup>
+          </D.DropdownMenuRadioGroup>
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </D.Root>
@@ -51,13 +51,13 @@ export function DropdownMenuRadio({
 }
 
 export interface DropdownProps {
-  children: ReactNode;
+  children: ComponentChildren;
   items: (
     | {
         label: string;
         onSelect?: () => void;
         disabled?: boolean;
-        leftSlot?: ReactNode;
+        leftSlot?: ComponentChildren;
       }
     | '-----'
   )[];
@@ -92,12 +92,14 @@ export function Dropdown({ children, items }: DropdownProps) {
 }
 
 interface DropdownMenuPortalProps {
-  children: ReactNode;
+  children: ComponentChildren;
 }
 
 function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
+  const container = document.querySelector<Element>('#radix-portal');
+  if (container === null) return null;
   return (
-    <D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
+    <D.Portal>
       <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
         {children}
       </motion.div>
@@ -262,7 +264,12 @@ function DropdownMenuSeparator({ className, ...props }: D.DropdownMenuSeparatorP
   );
 }
 
-function DropdownMenuTrigger({ children, className, ...props }: D.DropdownMenuTriggerProps) {
+type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
+  children: ComponentChildren;
+  className?: string;
+};
+
+function DropdownMenuTrigger({ children, className, ...props }: DropdownMenuTriggerProps) {
   return (
     <D.Trigger asChild className={classnames(className)} {...props}>
       {children}
@@ -270,11 +277,12 @@ function DropdownMenuTrigger({ children, className, ...props }: D.DropdownMenuTr
   );
 }
 
-interface ItemInnerProps extends HTMLAttributes<HTMLDivElement> {
-  leftSlot?: ReactNode;
-  rightSlot?: ReactNode;
-  children: ReactNode;
+interface ItemInnerProps {
+  leftSlot?: ComponentChildren;
+  rightSlot?: ComponentChildren;
+  children: ComponentChildren;
   noHover?: boolean;
+  className?: string;
 }
 
 const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(

src-web/components/Editor/Editor.tsx

@@ -1,4 +1,199 @@
-import type { EditorProps } from './_Editor';
-const { default: Editor } = await import('./_Editor');
-export { Editor };
-export type { EditorProps };
+import { defaultKeymap } from '@codemirror/commands';
+import { Compartment, EditorState } from '@codemirror/state';
+import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
+import classnames from 'classnames';
+import { EditorView } from 'codemirror';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import './Editor.css';
+import { singleLineExt } from './singleLine';
+
+import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
+// const { baseExtensions, getLanguageExtension, multiLineExtensions } = await import('./extensions');
+
+export interface EditorProps {
+  id?: string;
+  readOnly?: boolean;
+  className?: string;
+  heightMode?: 'auto' | 'full';
+  contentType?: string;
+  autoFocus?: boolean;
+  valueKey?: string | number;
+  defaultValue?: string;
+  placeholder?: string;
+  tooltipContainer?: HTMLElement;
+  useTemplating?: boolean;
+  onChange?: (value: string) => void;
+  singleLine?: boolean;
+}
+
+export function Editor({
+  readOnly,
+  heightMode,
+  contentType,
+  autoFocus,
+  placeholder,
+  valueKey,
+  useTemplating,
+  defaultValue,
+  onChange,
+  className,
+  singleLine,
+  ...props
+}: EditorProps) {
+  const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const extensions = useMemo(
+    () =>
+      getExtensions({
+        container: ref.current,
+        readOnly,
+        placeholder,
+        singleLine,
+        onChange,
+        contentType,
+        useTemplating,
+      }),
+    [contentType, ref.current],
+  );
+
+  // Create codemirror instance when ref initializes
+  useEffect(() => {
+    const parent = ref.current;
+    if (parent === null) return;
+
+    // console.log('INIT EDITOR');
+    let view: EditorView | null = null;
+    try {
+      const langHolder = new Compartment();
+      const langExt = getLanguageExtension({ contentType, useTemplating });
+      const state = EditorState.create({
+        doc: `${defaultValue ?? ''}`,
+        extensions: [...extensions, langHolder.of(langExt)],
+      });
+      view = new EditorView({ state, parent });
+      syncGutterBg({ parent, className });
+      setCm({ view, langHolder });
+      if (autoFocus && view) view.focus();
+    } catch (e) {
+      console.log('Failed to initialize Codemirror', e);
+    }
+    return () => view?.destroy();
+  }, [ref.current, valueKey]);
+
+  // Update value when valueKey changes
+  // TODO: This would be more efficient but the onChange handler gets fired on update
+  // useEffect(() => {
+  //   if (cm === null) return;
+  //   console.log('NEW DOC', valueKey, defaultValue);
+  //   cm.view.dispatch({
+  //     changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
+  //   });
+  // }, [valueKey]);
+
+  // Update language extension when contentType changes
+  useEffect(() => {
+    if (cm === null) return;
+    // console.log('UPDATE LANG');
+    const ext = getLanguageExtension({ contentType, useTemplating });
+    cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
+  }, [contentType]);
+
+  return (
+    <div
+      ref={ref}
+      className={classnames(
+        className,
+        'cm-wrapper text-base bg-gray-50',
+        heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
+        singleLine ? 'cm-singleline' : 'cm-multiline',
+        readOnly && 'cm-readonly',
+      )}
+      {...props}
+    />
+  );
+}
+
+function getExtensions({
+  container,
+  readOnly,
+  singleLine,
+  placeholder,
+  onChange,
+  contentType,
+  useTemplating,
+}: Pick<
+  EditorProps,
+  'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
+> & { container: HTMLDivElement | null }) {
+  const ext = getLanguageExtension({ contentType, useTemplating });
+
+  // TODO: Ensure tooltips render inside the dialog if we are in one.
+  const parent =
+    container?.closest<HTMLDivElement>('[role="dialog"]') ??
+    document.querySelector<HTMLDivElement>('#cm-portal') ??
+    undefined;
+
+  return [
+    ...baseExtensions,
+    tooltips({ parent }),
+    keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
+    ...(singleLine ? [singleLineExt()] : []),
+    ...(!singleLine ? [multiLineExtensions] : []),
+    ...(ext ? [ext] : []),
+    ...(readOnly ? [EditorState.readOnly.of(true)] : []),
+    ...(placeholder ? [placeholderExt(placeholder)] : []),
+
+    ...(singleLine
+      ? [
+          EditorView.domEventHandlers({
+            focus: (e, view) => {
+              // select all text on focus, like a regular input does
+              view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
+            },
+            keydown: (e) => {
+              // Submit nearest form on enter if there is one
+              if (e.key === 'Enter') {
+                const el = e.currentTarget as HTMLElement;
+                const form = el.closest('form');
+                form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+              }
+            },
+          }),
+        ]
+      : []),
+
+    // Clear selection on blur
+    EditorView.domEventHandlers({
+      blur: (e, view) => {
+        setTimeout(() => {
+          view.dispatch({ selection: { anchor: 0, head: 0 } });
+        }, 100);
+      },
+    }),
+
+    // Handle onChange
+    EditorView.updateListener.of((update) => {
+      if (typeof onChange === 'function' && update.docChanged) {
+        onChange(update.state.doc.toString());
+      }
+    }),
+  ];
+}
+
+const syncGutterBg = ({
+  parent,
+  className = '',
+}: {
+  parent: HTMLDivElement;
+  className?: string;
+}) => {
+  const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
+  const classList = className?.split(/\s+/) ?? [];
+  const bgClasses = classList
+    .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
+    .map((c) => c.replace(/^bg-/, '!bg-')) // !important
+    .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
+  if (gutterEl) {
+    gutterEl?.classList.add(...bgClasses);
+  }
+};

src-web/components/Editor/_Editor.tsx

@@ -1,196 +0,0 @@
-import { defaultKeymap } from '@codemirror/commands';
-import { Compartment, EditorState } from '@codemirror/state';
-import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
-import classnames from 'classnames';
-import { EditorView } from 'codemirror';
-import type { HTMLAttributes } from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-const { baseExtensions, getLanguageExtension, multiLineExtensions } = await import('./extensions');
-import { singleLineExt } from './singleLine';
-import './Editor.css';
-
-export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  readOnly?: boolean;
-  heightMode?: 'auto' | 'full';
-  contentType?: string;
-  autoFocus?: boolean;
-  valueKey?: string | number;
-  defaultValue?: string;
-  placeholder?: string;
-  tooltipContainer?: HTMLElement;
-  useTemplating?: boolean;
-  onChange?: (value: string) => void;
-  singleLine?: boolean;
-}
-
-export default function Editor({
-  readOnly,
-  heightMode,
-  contentType,
-  autoFocus,
-  placeholder,
-  valueKey,
-  useTemplating,
-  defaultValue,
-  onChange,
-  className,
-  singleLine,
-  ...props
-}: EditorProps) {
-  const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
-  const ref = useRef<HTMLDivElement>(null);
-  const extensions = useMemo(
-    () =>
-      getExtensions({
-        container: ref.current,
-        readOnly,
-        placeholder,
-        singleLine,
-        onChange,
-        contentType,
-        useTemplating,
-      }),
-    [contentType, ref.current],
-  );
-
-  // Create codemirror instance when ref initializes
-  useEffect(() => {
-    const parent = ref.current;
-    if (parent === null) return;
-
-    // console.log('INIT EDITOR');
-    let view: EditorView | null = null;
-    try {
-      const langHolder = new Compartment();
-      const langExt = getLanguageExtension({ contentType, useTemplating });
-      const state = EditorState.create({
-        doc: `${defaultValue ?? ''}`,
-        extensions: [...extensions, langHolder.of(langExt)],
-      });
-      view = new EditorView({ state, parent });
-      syncGutterBg({ parent, className });
-      setCm({ view, langHolder });
-      if (autoFocus && view) view.focus();
-    } catch (e) {
-      console.log('Failed to initialize Codemirror', e);
-    }
-    return () => view?.destroy();
-  }, [ref.current, valueKey]);
-
-  // Update value when valueKey changes
-  // TODO: This would be more efficient but the onChange handler gets fired on update
-  // useEffect(() => {
-  //   if (cm === null) return;
-  //   console.log('NEW DOC', valueKey, defaultValue);
-  //   cm.view.dispatch({
-  //     changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
-  //   });
-  // }, [valueKey]);
-
-  // Update language extension when contentType changes
-  useEffect(() => {
-    if (cm === null) return;
-    // console.log('UPDATE LANG');
-    const ext = getLanguageExtension({ contentType, useTemplating });
-    cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
-  }, [contentType]);
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(
-        className,
-        'cm-wrapper text-base bg-gray-50',
-        heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
-        singleLine ? 'cm-singleline' : 'cm-multiline',
-        readOnly && 'cm-readonly',
-      )}
-      {...props}
-    />
-  );
-}
-
-function getExtensions({
-  container,
-  readOnly,
-  singleLine,
-  placeholder,
-  onChange,
-  contentType,
-  useTemplating,
-}: Pick<
-  EditorProps,
-  'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
-> & { container: HTMLDivElement | null }) {
-  const ext = getLanguageExtension({ contentType, useTemplating });
-
-  // TODO: Ensure tooltips render inside the dialog if we are in one.
-  const parent =
-    container?.closest<HTMLDivElement>('[role="dialog"]') ??
-    document.querySelector<HTMLDivElement>('#cm-portal') ??
-    undefined;
-
-  return [
-    ...baseExtensions,
-    tooltips({ parent }),
-    keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
-    ...(singleLine ? [singleLineExt()] : []),
-    ...(!singleLine ? [multiLineExtensions] : []),
-    ...(ext ? [ext] : []),
-    ...(readOnly ? [EditorState.readOnly.of(true)] : []),
-    ...(placeholder ? [placeholderExt(placeholder)] : []),
-
-    ...(singleLine
-      ? [
-          EditorView.domEventHandlers({
-            focus: (e, view) => {
-              // select all text on focus, like a regular input does
-              view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
-            },
-            keydown: (e) => {
-              // Submit nearest form on enter if there is one
-              if (e.key === 'Enter') {
-                const el = e.currentTarget as HTMLElement;
-                const form = el.closest('form');
-                form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
-              }
-            },
-          }),
-        ]
-      : []),
-
-    // Clear selection on blur
-    EditorView.domEventHandlers({
-      blur: (e, view) => {
-        setTimeout(() => {
-          view.dispatch({ selection: { anchor: 0, head: 0 } });
-        }, 100);
-      },
-    }),
-
-    // Handle onChange
-    EditorView.updateListener.of((update) => {
-      if (typeof onChange === 'function' && update.docChanged) {
-        onChange(update.state.doc.toString());
-      }
-    }),
-  ];
-}
-
-const syncGutterBg = ({
-  parent,
-  className = '',
-}: {
-  parent: HTMLDivElement;
-  className?: string;
-}) => {
-  const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
-  const classList = className?.split(/\s+/) ?? [];
-  const bgClasses = classList
-    .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
-    .map((c) => c.replace(/^bg-/, '!bg-')) // !important
-    .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
-  if (gutterEl) {
-    gutterEl?.classList.add(...bgClasses);
-  }
-};

src-web/components/HeaderEditor.tsx

@@ -1,4 +1,3 @@
-import type { FormEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 import type { HttpHeader } from '../lib/models';
 import { IconButton } from './IconButton';
@@ -10,7 +9,7 @@ export function HeaderEditor() {
   const [newHeaderName, setNewHeaderName] = useState<string>('');
   const [newHeaderValue, setNewHeaderValue] = useState<string>('');
   const handleSubmit = useCallback(
-    (e?: FormEvent) => {
+    (e?: Event) => {
       e?.preventDefault();
       setHeaders([...headers, { name: newHeaderName, value: newHeaderValue }]);
       setNewHeaderName('');

src-web/components/Heading.tsx

@@ -1,7 +1,10 @@
 import classnames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import type { ComponentChildren } from 'preact';
 
-type Props = HTMLAttributes<HTMLHeadingElement>;
+type Props = {
+  className?: string;
+  children?: ComponentChildren;
+};
 
 export function Heading({ className, children, ...props }: Props) {
   return (

src-web/components/HotKey.tsx

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
 import classnames from 'classnames';
+import type { HTMLAttributes } from 'react';
 
 export function HotKey({ children }: HTMLAttributes<HTMLSpanElement>) {
   return (

src-web/components/IconButton.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { forwardRef } from 'react';
+import { forwardRef } from 'preact/compat';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 import type { IconProps } from './Icon';

src-web/components/Input.tsx

@@ -1,14 +1,10 @@
 import classnames from 'classnames';
-import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { ComponentChildren } from 'preact';
 import type { EditorProps } from './Editor/Editor';
 import { Editor } from './Editor/Editor';
 import { HStack, VStack } from './Stacks';
 
-interface Props
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    'size' | 'onChange' | 'onSubmit' | 'defaultValue'
-  > {
+interface Props {
   name: string;
   label: string;
   hideLabel?: boolean;
@@ -17,9 +13,12 @@ interface Props
   onChange?: (value: string) => void;
   useEditor?: Pick<EditorProps, 'contentType' | 'useTemplating' | 'valueKey'>;
   defaultValue?: string;
-  leftSlot?: ReactNode;
-  rightSlot?: ReactNode;
+  leftSlot?: ComponentChildren;
+  rightSlot?: ComponentChildren;
   size?: 'sm' | 'md';
+  className?: string;
+  placeholder?: string;
+  autoFocus?: boolean;
 }
 
 export function Input({
@@ -42,8 +41,8 @@ export function Input({
   const inputClassName = classnames(
     className,
     '!bg-transparent pl-3 pr-2 min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
-    leftSlot && '!pl-0.5',
-    rightSlot && '!pr-0.5',
+    !!leftSlot && '!pl-0.5',
+    !!rightSlot && '!pr-0.5',
   );
 
   return (
@@ -83,7 +82,7 @@ export function Input({
         ) : (
           <input
             id={id}
-            onChange={(e) => onChange?.(e.target.value)}
+            onChange={(e) => onChange?.(e.currentTarget.value)}
             placeholder={placeholder}
             defaultValue={defaultValue}
             className={inputClassName}

src-web/components/Layout.tsx

@@ -1,10 +0,0 @@
-import {Outlet} from 'react-router-dom';
-
-
-export function Layout() {
-  return (
-    <div className="w-full h-full">
-      <Outlet />
-    </div>
-  );
-}

src-web/components/LayoutPane.tsx

@@ -1,15 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface LayoutPaneProps {
-  children?: ReactNode;
-  className?: string;
-}
-
-export function LayoutPane({ className, children }: LayoutPaneProps) {
-  return <div className={className}>{children}</div>;
-  // return (
-  //   <div className={classnames(className, 'w-full h-full p-2')} data-tauri-drag-region>
-  //     <div className={classnames('w-full h-full bg-gray-50/50 rounded-lg')}>{children}</div>
-  //   </div>
-  // );
-}

src-web/components/RouterError.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useRouteError } from 'react-router-dom';
 import { ButtonLink } from './ButtonLink';
 import { Heading } from './Heading';
@@ -15,7 +14,7 @@ export function RouterError() {
         <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
           {message}
         </pre>
-        <ButtonLink to="/" color="primary">
+        <ButtonLink href="/" color="primary">
           Go Home
         </ButtonLink>
       </VStack>

src-web/components/ScrollArea.tsx

@@ -1,9 +1,9 @@
 import * as S from '@radix-ui/react-scroll-area';
 import classnames from 'classnames';
-import type { ReactNode } from 'react';
+import type { ComponentChildren } from 'preact';
 
 interface Props {
-  children: ReactNode;
+  children: ComponentChildren;
   className?: string;
 }
 

src-web/components/Sidebar.tsx

@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import type { HTMLAttributes } from 'react';
 import React, { useState } from 'react';
 import { useRequestCreate } from '../hooks/useRequest';
 import useTheme from '../hooks/useTheme';
@@ -12,13 +11,14 @@ import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 import { WindowDragRegion } from './WindowDragRegion';
 
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+interface Props {
   workspaceId: string;
   requests: HttpRequest[];
   activeRequestId?: string;
+  className?: string;
 }
 
-export function Sidebar({ className, activeRequestId, workspaceId, requests, ...props }: Props) {
+export function Sidebar({ className, activeRequestId, workspaceId, requests }: Props) {
   const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
   const { appearance, toggleAppearance } = useTheme();
   const [open, setOpen] = useState<boolean>(false);
@@ -28,7 +28,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
         className,
         'min-w-[10rem] bg-gray-100 h-full border-r border-gray-200 relative',
       )}
-      {...props}
     >
       <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
         <Dialog wide open={open} onOpenChange={setOpen} title="Edit Headers">
@@ -56,7 +55,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
           alignItems="center"
           justifyContent="end"
         >
-          <IconButton icon="colorWheel" onClick={() => setShowPicker((p) => !p)} />
           <IconButton icon={appearance === 'dark' ? 'moon' : 'sun'} onClick={toggleAppearance} />
           <IconButton icon="rows" onClick={() => setOpen(true)} />
         </HStack>
@@ -70,13 +68,13 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
     <li key={request.id}>
       <ButtonLink
         color="custom"
-        to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
+        href={`/workspaces/${request.workspaceId}/requests/${request.id}`}
         disabled={active}
         className={classnames(
           'w-full',
           active
             ? 'bg-gray-200/70 text-gray-900'
-            : 'text-gray-600 hover:text-gray-800 active:bg-gray-200/50',
+            : 'text-gray-600 hover:text-gray-800 active:bg-gray-200/30',
         )}
         size="sm"
         justify="start"

src-web/components/Stacks.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import type { ReactNode } from 'react';
-import React, { Children, Fragment } from 'react';
+import type { ComponentChildren, ComponentType } from 'preact';
+import { Children, Fragment } from 'react';
 
 const spaceClassesX = {
   0: 'pr-0',
@@ -24,7 +24,7 @@ const spaceClassesY = {
 
 interface HStackProps extends BaseStackProps {
   space?: keyof typeof spaceClassesX;
-  children?: ReactNode;
+  children?: ComponentChildren;
 }
 
 export function HStack({ className, space, children, ...props }: HStackProps) {
@@ -52,7 +52,7 @@ export function HStack({ className, space, children, ...props }: HStackProps) {
 
 export interface VStackProps extends BaseStackProps {
   space?: keyof typeof spaceClassesY;
-  children: ReactNode;
+  children: ComponentChildren;
 }
 
 export function VStack({ className, space, children, ...props }: VStackProps) {
@@ -79,21 +79,15 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
 }
 
 interface BaseStackProps {
-  as?: React.ElementType;
+  as?: ComponentType | 'ul';
   alignItems?: 'start' | 'center';
   justifyContent?: 'start' | 'center' | 'end';
   className?: string;
-  children?: ReactNode;
+  children?: ComponentChildren;
 }
 
-function BaseStack({
-  className,
-  alignItems,
-  justifyContent,
-  children,
-  as = 'div',
-}: BaseStackProps) {
-  const Component = as;
+function BaseStack({ className, alignItems, justifyContent, children, as }: BaseStackProps) {
+  const Component = as ?? 'div';
   return (
     <Component
       className={classnames(

src-web/components/StatusColor.tsx

@@ -1,9 +1,9 @@
 import classnames from 'classnames';
-import type { ReactNode } from 'react';
+import type { ComponentChildren } from 'preact';
 
 interface Props {
   statusCode: number;
-  children: ReactNode;
+  children: ComponentChildren;
 }
 
 export function StatusColor({ statusCode, children }: Props) {

src-web/components/UrlBar.tsx

@@ -1,4 +1,3 @@
-import type { FormEvent } from 'react';
 import { Button } from './Button';
 import { DropdownMenuRadio } from './Dropdown';
 import { IconButton } from './IconButton';
@@ -14,13 +13,14 @@ interface Props {
 }
 
 export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChange, url }: Props) {
-  const handleSendRequest = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    sendRequest();
-  };
-
   return (
-    <form onSubmit={handleSendRequest} className="w-full flex items-center">
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        sendRequest();
+      }}
+      className="w-full flex items-center"
+    >
       <Input
         hideLabel
         useEditor={{ useTemplating: true, contentType: 'url' }}

src-web/components/WindowDragRegion.tsx

@@ -1,7 +1,10 @@
 import classnames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import type { ComponentChildren } from 'preact';
 
-type Props = HTMLAttributes<HTMLDivElement>;
+interface Props {
+  className?: string;
+  children?: ComponentChildren;
+}
 
 export function WindowDragRegion({ className, ...props }: Props) {
   return (