Move some things around

package.json

@@ -31,29 +31,25 @@
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@radix-ui/react-separator": "^1.0.1",
-    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@tanstack/react-query": "^4.24.10",
     "@tauri-apps/api": "^1.2.0",
     "classnames": "^2.3.2",
     "codemirror": "^6.0.1",
     "framer-motion": "^9.0.4",
-    "lodash": "^4.17.21",
     "parse-color": "^1.0.0",
-    "parse-json": "^6.0.2",
     "react": "^18.2.0",
-    "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
+    "@preact/preset-vite": "^2.5.0",
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@tauri-apps/cli": "^1.2.2",
-    "@types/lodash": "^4.14.191",
     "@types/node": "^18.7.10",
     "@types/parse-color": "^1.0.1",
     "@types/parse-json": "^4.0.0",
     "@types/react": "^18.0.15",
-    "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",

src-web/App.tsx

@@ -27,13 +27,13 @@ function App() {
 
   return (
     <div className="grid grid-cols-[auto_1fr] h-full text-gray-900 overflow-hidden rounded-[11px]">
-      <Sidebar requests={requests ?? []} workspaceId={workspaceId} activeRequestId={request?.id} />
+      <Sidebar requests={requests ?? []} workspaceId={workspaceId} activeRequestId={p.requestId} />
       {request && (
         <div className="h-full">
           <div className="grid grid-rows-[auto_1fr] h-full overflow-hidden">
             <HStack
               as={WindowDragRegion}
-              className="px-3 bg-background text-gray-900 border-b border-b-gray-200 pt-[1px]"
+              className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
               alignItems="center"
             >
               {request.name}

src-web/components/Dropdown.tsx

@@ -137,7 +137,7 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
         align="start"
         className={classnames(
           className,
-          'bg-background rounded-md shadow-lg p-1.5 border border-gray-200',
+          'bg-gray-50 rounded-md shadow-lg p-1.5 border border-gray-200',
           'overflow-auto m-1',
         )}
         style={styles}

src-web/components/Editor/Editor.css

@@ -144,7 +144,7 @@
 
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip {
-    @apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-200 z-50 pointer-events-auto;
+    @apply shadow-lg bg-gray-50 rounded overflow-hidden text-gray-900 border border-gray-200 z-50 pointer-events-auto;
 
     * {
         @apply transition-none;

src-web/components/Editor/Editor.tsx

@@ -1,194 +1,4 @@
-import { defaultKeymap } from '@codemirror/commands';
+import type { EditorProps } from './_Editor';
-import { Compartment, EditorState } from '@codemirror/state';
+const { default: Editor } = await import('./_Editor');
-import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
+export { Editor };
-import classnames from 'classnames';
+export type { EditorProps };
-import { EditorView } from 'codemirror';
-import type { HTMLAttributes } from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import './Editor.css';
-import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
-import { singleLineExt } from './singleLine';
-
-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],
-  );
-
-  const syncGutterBg = () => {
-    if (ref.current === null) return;
-    if (singleLine) return;
-    const gutterEl = ref.current.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);
-    }
-  };
-
-  // Create codemirror instance when ref initializes
-  useEffect(() => {
-    if (ref.current === 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: ref.current,
-      });
-      setCm({ view, langHolder });
-      syncGutterBg();
-      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}
-      dangerouslySetInnerHTML={{ __html: '' }}
-      className={classnames(
-        className,
-        'cm-wrapper text-base bg-background',
-        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());
-      }
-    }),
-  ];
-}

src-web/components/Editor/_Editor.tsx

@@ -0,0 +1,196 @@
+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/Editor/autocomplete.ts

@@ -1,6 +1,6 @@
 import { closeCompletion, startCompletion } from '@codemirror/autocomplete';
 import { EditorView } from 'codemirror';
-import { debounce } from 'lodash';
+import { debounce } from '../../lib/debounce';
 
 /*
  * Debounce autocomplete until user stops typing for `millis` milliseconds.

src-web/components/Input.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import type { EditorProps } from './Editor/Editor';
-import Editor from './Editor/Editor';
+import { Editor } from './Editor/Editor';
 import { HStack, VStack } from './Stacks';
 
 interface Props

src-web/components/RequestPane.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import { useRequestUpdate, useSendRequest } from '../hooks/useRequest';
 import type { HttpRequest } from '../lib/models';
 import { Button } from './Button';
-import Editor from './Editor/Editor';
+import { Editor } from './Editor/Editor';
 import { ScrollArea } from './ScrollArea';
 import { HStack } from './Stacks';
 import { UrlBar } from './UrlBar';

src-web/components/ResponsePane.tsx

@@ -2,11 +2,12 @@ import classnames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses';
 import { Dropdown } from './Dropdown';
-import Editor from './Editor/Editor';
+import { Editor } from './Editor/Editor';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
 import { HStack } from './Stacks';
 import { StatusColor } from './StatusColor';
+import { Webview } from './Webview';
 
 interface Props {
   requestId: string;
@@ -33,15 +34,6 @@ export function ResponsePane({ requestId, className }: Props) {
     [response],
   );
 
-  const contentForIframe: string | null = useMemo(() => {
-    if (!contentType.includes('html')) return null;
-    if (response == null) return null;
-    if (response.body.includes('<head>')) {
-      return response.body.replace(/<head>/gi, `<head><base href="${response.url}"/>`);
-    }
-    return response.body;
-  }, [response?.body, contentType]);
-
   if (!response) {
     return null;
   }
@@ -119,15 +111,8 @@ export function ResponsePane({ requestId, className }: Props) {
               <div className="p-1">
                 <div className="text-white bg-red-500 px-3 py-2 rounded">{response.error}</div>
               </div>
-            ) : viewMode === 'pretty' && contentForIframe !== null ? (
+            ) : viewMode === 'pretty' ? (
-              <div className="px-2 pb-2">
+              <Webview body={response.body} contentType={contentType} url={response.url} />
-                <iframe
-                  title="Response preview"
-                  srcDoc={contentForIframe}
-                  sandbox="allow-scripts allow-same-origin"
-                  className="h-full w-full rounded-md border border-gray-100/20"
-                />
-              </div>
             ) : response?.body ? (
               <Editor
                 readOnly

src-web/components/Sidebar.tsx

@@ -1,7 +1,6 @@
 import classnames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import React, { useState } from 'react';
-import { SketchPicker } from 'react-color';
 import { useRequestCreate } from '../hooks/useRequest';
 import useTheme from '../hooks/useTheme';
 import type { HttpRequest } from '../lib/models';
@@ -21,10 +20,8 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 
 export function Sidebar({ className, activeRequestId, workspaceId, requests, ...props }: Props) {
   const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
-  const { appearance, toggleAppearance, forceSetTheme } = useTheme();
+  const { appearance, toggleAppearance } = useTheme();
   const [open, setOpen] = useState<boolean>(false);
-  const [color, setColor] = useState<string>('blue');
-  const [showPicker, setShowPicker] = useState<boolean>(false);
   return (
     <div
       className={classnames(
@@ -63,17 +60,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
           <IconButton icon={appearance === 'dark' ? 'moon' : 'sun'} onClick={toggleAppearance} />
           <IconButton icon="rows" onClick={() => setOpen(true)} />
         </HStack>
-
-        {showPicker && (
-          <SketchPicker
-            className="fixed z-10 bottom-2 right-2"
-            color={color}
-            onChange={(c) => {
-              setColor(c.hex);
-              forceSetTheme(c.hex);
-            }}
-          />
-        )}
       </VStack>
     </div>
   );
@@ -86,7 +72,12 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
         color="custom"
         to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
         disabled={active}
-        className={classnames('w-full', active ? 'bg-gray-200/70 text-gray-900' : 'text-gray-600')}
+        className={classnames(
+          'w-full',
+          active
+            ? 'bg-gray-200/70 text-gray-900'
+            : 'text-gray-600 hover:text-gray-800 active:bg-gray-200/50',
+        )}
         size="sm"
         justify="start"
       >

src-web/components/Webview.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+
+interface Props {
+  body: string;
+  contentType: string;
+  url: string;
+}
+
+export function Webview({ body, url, contentType }: Props) {
+  const contentForIframe: string | undefined = useMemo(() => {
+    if (!contentType.includes('html')) return;
+    if (body.includes('<head>')) {
+      return body.replace(/<head>/gi, `<head><base href="${url}"/>`);
+    }
+    return body;
+  }, [body, contentType]);
+
+  return (
+    <div className="px-2 pb-2">
+      <iframe
+        title="Response preview"
+        srcDoc={contentForIframe}
+        sandbox="allow-scripts allow-same-origin"
+        className="h-full w-full rounded-md border border-gray-100/20"
+      />
+    </div>
+  );
+}

src-web/hooks/useTheme.ts

@@ -1,5 +1,4 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { debounce } from 'lodash';
 import { useEffect } from 'react';
 import type { Appearance } from '../lib/theme/window';
 import {
@@ -11,10 +10,6 @@ import {
 
 const appearanceQueryKey = ['theme', 'appearance'];
 
-const forceSetTheme = debounce((gray: string) => {
-  setAppearance(getAppearance(), gray);
-}, 200);
-
 export default function useTheme() {
   const queryClient = useQueryClient();
   const appearance = useQuery({
@@ -38,7 +33,6 @@ export default function useTheme() {
 
   return {
     appearance,
-    forceSetTheme,
     toggleAppearance: handleToggleAppearance,
   };
 }

src-web/lib/debounce.ts

@@ -0,0 +1,11 @@
+export function debounce(fn: (...args: any[]) => any, delay: number) {
+  let timer: ReturnType<typeof setTimeout>;
+  const result = function (...args: Parameters<typeof fn>) {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), delay);
+  };
+  result.cancel = function () {
+    clearTimeout(timer);
+  };
+  return result;
+}

src-web/lib/theme/window.ts

@@ -8,9 +8,9 @@ const darkTheme: AppTheme = {
   appearance: 'dark',
   layers: {
     root: {
-      blackPoint: 0.3,
+      blackPoint: 0.2,
       colors: {
-        gray: '#656196',
+        gray: '#6b5b98',
         red: '#ee3b3b',
         orange: '#ff9411',
         yellow: '#dcc73b',
@@ -59,15 +59,10 @@ export function toggleAppearance(): Appearance {
   return newAppearance;
 }
 
-export function setAppearance(a?: Appearance, gray?: string) {
+export function setAppearance(a?: Appearance) {
   const appearance = a ?? getPreferredAppearance();
   const theme = appearance === 'dark' ? darkTheme : lightTheme;
 
-  // Hack to update the gray color for a demo
-  if (theme.layers.root && gray) {
-    theme.layers.root.colors.gray = gray;
-  }
-
   document.documentElement.setAttribute('data-appearance', appearance);
   document.documentElement.setAttribute('data-theme', theme.name);
 

src-web/main.css

@@ -28,196 +28,5 @@
         --transition-duration: 100ms ease-in-out;
         --color-white: 255 100% 100%;
         --color-black: 255 0% 0%;
-        --color-background: var(--color-gray-50);
-    }
-
-    :root, [data-theme="light"] {
-        /* Colors */
-        --color-green-50: 160 84% 95%;
-        --color-green-100: 160 84% 88%;
-        --color-green-200: 160 84% 76%;
-        --color-green-300: 160 84% 70%;
-        --color-green-400: 160 84% 60%;
-        --color-green-500: 160 84% 50%;
-        --color-green-600: 160 84% 38%;
-        --color-green-700: 160 84% 30%;
-        --color-green-800: 160 84% 20%;
-        --color-green-900: 160 84% 10%;
-
-        --color-blue-50: 217 91% 95%;
-        --color-blue-100: 217 91% 88%;
-        --color-blue-200: 217 91% 76%;
-        --color-blue-300: 217 91% 70%;
-        --color-blue-400: 217 91% 65%;
-        --color-blue-500: 217 91% 58%;
-        --color-blue-600: 217 91% 43%;
-        --color-blue-700: 217 91% 30%;
-        --color-blue-800: 217 91% 20%;
-        --color-blue-900: 217 91% 10%;
-
-        --color-pink-50: 292 84% 95%;
-        --color-pink-100: 292 84% 88%;
-        --color-pink-200: 292 84% 76%;
-        --color-pink-300: 292 84% 70%;
-        --color-pink-400: 292 84% 65%;
-        --color-pink-500: 292 84% 58%;
-        --color-pink-600: 292 84% 43%;
-        --color-pink-700: 292 84% 30%;
-        --color-pink-800: 292 84% 20%;
-        --color-pink-900: 292 84% 10%;
-
-        --color-violet-50: 258 90% 95%;
-        --color-violet-100: 258 90% 88%;
-        --color-violet-200: 258 90% 76%;
-        --color-violet-300: 258 90% 70%;
-        --color-violet-400: 258 90% 65%;
-        --color-violet-500: 258 90% 58%;
-        --color-violet-600: 258 90% 43%;
-        --color-violet-700: 258 90% 30%;
-        --color-violet-800: 258 90% 20%;
-        --color-violet-900: 258 90% 10%;
-
-        --color-red-50: 0 84% 95%;
-        --color-red-100: 0 84% 88%;
-        --color-red-200: 0 84% 76%;
-        --color-red-300: 0 84% 70%;
-        --color-red-400: 0 84% 65%;
-        --color-red-500: 0 84% 58%;
-        --color-red-600: 0 84% 43%;
-        --color-red-700: 0 84% 30%;
-        --color-red-800: 0 84% 20%;
-        --color-red-900: 0 84% 10%;
-
-        --color-orange-50: 25 95% 95%;
-        --color-orange-100: 25 95% 88%;
-        --color-orange-200: 25 95% 76%;
-        --color-orange-300: 25 95% 70%;
-        --color-orange-400: 25 95% 65%;
-        --color-orange-500: 25 95% 58%;
-        --color-orange-600: 25 95% 43%;
-        --color-orange-700: 25 95% 30%;
-        --color-orange-800: 25 95% 20%;
-        --color-orange-900: 25 95% 10%;
-
-        --color-yellow-50: 45 93% 95%;
-        --color-yellow-100: 45 93% 88%;
-        --color-yellow-200: 45 93% 76%;
-        --color-yellow-300: 45 93% 70%;
-        --color-yellow-400: 45 93% 65%;
-        --color-yellow-500: 45 93% 58%;
-        --color-yellow-600: 45 93% 43%;
-        --color-yellow-700: 45 93% 30%;
-        --color-yellow-800: 45 93% 20%;
-        --color-yellow-900: 45 93% 10%;
-
-        --color-gray-25: 217 21% 98%;
-        --color-gray-50: 217 21% 95%;
-        --color-gray-100: 217 21% 88%;
-        --color-gray-200: 217 21% 76%;
-        --color-gray-300: 217 21% 70%;
-        --color-gray-400: 217 21% 65%;
-        --color-gray-500: 217 21% 58%;
-        --color-gray-600: 217 21% 43%;
-        --color-gray-700: 217 21% 30%;
-        --color-gray-800: 217 21% 20%;
-        --color-gray-900: 217 21% 10%;
-
-        /* Border Radius */
-
-        --border-radius-sm: 0.125rem;
-        --border-radius: 0.25rem;
-        --border-radius-md: 0.375rem;
-        --border-radius-lg: 0.5rem;
-    }
-
-    [data-theme="dark"] {
-        --color-green-900: 160 84% 95%;
-        --color-green-800: 160 84% 88%;
-        --color-green-700: 160 84% 76%;
-        --color-green-600: 160 84% 70%;
-        --color-green-500: 160 84% 60%;
-        --color-green-400: 160 84% 50%;
-        --color-green-300: 160 84% 38%;
-        --color-green-200: 160 84% 30%;
-        --color-green-100: 160 84% 20%;
-        --color-green-50: 160 84% 10%;
-
-        --color-blue-900: 217 91% 95%;
-        --color-blue-800: 217 91% 88%;
-        --color-blue-700: 217 91% 76%;
-        --color-blue-600: 217 91% 70%;
-        --color-blue-500: 217 91% 65%;
-        --color-blue-400: 217 91% 58%;
-        --color-blue-300: 217 91% 43%;
-        --color-blue-200: 217 91% 30%;
-        --color-blue-100: 217 91% 20%;
-        --color-blue-50: 217 91% 10%;
-
-        --color-pink-900: 292 84% 95%;
-        --color-pink-800: 292 84% 88%;
-        --color-pink-700: 292 84% 76%;
-        --color-pink-600: 292 84% 70%;
-        --color-pink-500: 292 84% 65%;
-        --color-pink-400: 292 84% 58%;
-        --color-pink-300: 292 84% 43%;
-        --color-pink-200: 292 84% 30%;
-        --color-pink-100: 292 84% 20%;
-        --color-pink-50: 292 84% 10%;
-
-        --color-violet-900: 258 90% 95%;
-        --color-violet-800: 258 90% 88%;
-        --color-violet-700: 258 90% 79%;
-        --color-violet-600: 258 90% 74%;
-        --color-violet-500: 258 90% 70%;
-        --color-violet-400: 258 90% 58%;
-        --color-violet-300: 258 90% 43%;
-        --color-violet-200: 258 90% 30%;
-        --color-violet-100: 258 90% 20%;
-        --color-violet-50: 258 90% 10%;
-
-        --color-red-900: 0 84% 95%;
-        --color-red-800: 0 84% 88%;
-        --color-red-700: 0 84% 76%;
-        --color-red-600: 0 84% 70%;
-        --color-red-500: 0 84% 65%;
-        --color-red-400: 0 84% 58%;
-        --color-red-300: 0 84% 43%;
-        --color-red-200: 0 84% 30%;
-        --color-red-100: 0 84% 20%;
-        --color-red-50: 0 84% 10%;
-
-        --color-orange-900: 25 95% 95%;
-        --color-orange-800: 25 95% 88%;
-        --color-orange-700: 25 95% 76%;
-        --color-orange-600: 25 95% 70%;
-        --color-orange-500: 25 95% 65%;
-        --color-orange-400: 25 95% 58%;
-        --color-orange-300: 25 95% 43%;
-        --color-orange-200: 25 95% 30%;
-        --color-orange-100: 25 95% 20%;
-        --color-orange-50: 25 95% 10%;
-
-        --color-yellow-900: 45 93% 95%;
-        --color-yellow-800: 45 93% 88%;
-        --color-yellow-700: 45 93% 76%;
-        --color-yellow-600: 45 93% 70%;
-        --color-yellow-500: 45 93% 65%;
-        --color-yellow-400: 45 93% 58%;
-        --color-yellow-300: 45 93% 43%;
-        --color-yellow-200: 45 93% 30%;
-        --color-yellow-100: 45 93% 20%;
-        --color-yellow-50: 45 93% 10%;
-
-        --color-gray-900: 217 21% 95%;
-        --color-gray-800: 217 21% 88%;
-        --color-gray-700: 217 21% 76%;
-        --color-gray-600: 217 21% 70%;
-        --color-gray-500: 217 21% 65%;
-        --color-gray-400: 217 21% 58%;
-        --color-gray-300: 217 21% 43%;
-        --color-gray-200: 217 21% 30%;
-        --color-gray-100: 217 21% 25%;
-        --color-gray-50: 217 21% 15%;
-        --color-gray-25: 217 21% 10%;
     }
 }

src-web/main.tsx

@@ -1,7 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { listen } from '@tauri-apps/api/event';
 import { MotionConfig } from 'framer-motion';
-import init, { greet } from 'hello';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
@@ -21,8 +20,8 @@ import { Workspaces } from './pages/Workspaces';
 setAppearance();
 
 // WASM stuff
-await init();
+// await init();
-greet();
+// greet();
 
 const queryClient = new QueryClient();
 

tailwind.config.cjs

@@ -3,12 +3,13 @@ module.exports = {
   darkMode: ["class", "[data-appearance=\"dark\"]"],
   content: [
     "./index.html",
-    "./src-web/**/*.{html,tsx}"
+    "./src-web/**/*.{html,js,jsx,ts,tsx}"
   ],
   theme: {
     extend: {},
     fontFamily: {
-      "mono": ["JetBrains Mono", "Menlo", "monospace"]
+      "mono": ["JetBrains Mono", "Menlo", "monospace"],
+      "sans": ["Inter", "sans-serif"],
     },
     fontSize: {
       sm: "0.9rem",
@@ -19,19 +20,10 @@ module.exports = {
       "4xl": "2.441rem",
       "5xl": "3.052rem"
     },
-    borderRadius: {
-      none: "0px",
-      sm: "var(--border-radius-sm)",
-      DEFAULT: "var(--border-radius)",
-      md: "var(--border-radius-md)",
-      lg: "var(--border-radius-lg)",
-      full: "9999px"
-    },
     colors: {
       transparent: "transparent",
       white: "hsl(0 100% 100% / <alpha-value>)",
       black: "hsl(0 100% 0% / <alpha-value>)",
-      background: "hsl(var(--color-background) / <alpha-value>)",
       placeholder: "hsl(var(--color-gray-400) / <alpha-value>)",
       red: color("red"),
       orange: color("orange"),