starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-17 23:14:03 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Move some things around

Browse Source
This commit is contained in:
Gregory Schier
2023-03-08 23:20:15 -08:00
parent 92ec514442
commit d1b5b9c371
19 changed files with 617 additions and 705 deletions
Download Patch File Download Diff File Expand all files Collapse all files

594
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@@ -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",

4
src-web/App.tsx
View File

@@ -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}

2
src-web/components/Dropdown.tsx
View File

@@ -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}

2
src-web/components/Editor/Editor.css
View File

@@ -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;

198
src-web/components/Editor/Editor.tsx
View File

@@ -1,194 +1,4 @@
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';
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());
}
}),
];
}
import type { EditorProps } from './_Editor';
const { default: Editor } = await import('./_Editor');
export { Editor };
export type { EditorProps };

196
src-web/components/Editor/_Editor.tsx Normal file
View File

@@ -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);
}
};

2
src-web/components/Editor/autocomplete.ts
View File

@@ -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.

2
src-web/components/Input.tsx
View File

@@ -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

2
src-web/components/RequestPane.tsx
View File

@@ -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';

23
src-web/components/ResponsePane.tsx
View File

@@ -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 ? (
<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>
) : viewMode === 'pretty' ? (
<Webview body={response.body} contentType={contentType} url={response.url} />
) : response?.body ? (
<Editor
readOnly

23
src-web/components/Sidebar.tsx
View File

@@ -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"
>

28
src-web/components/Webview.tsx Normal file
View File

@@ -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>
);
}

6
src-web/hooks/useTheme.ts
View File

@@ -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,
};
}

11
src-web/lib/debounce.ts Normal file
View File

@@ -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;
}

11
src-web/lib/theme/window.ts
View File

@@ -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);

191
src-web/main.css
View File

@@ -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%;
}
}

5
src-web/main.tsx
View File

@@ -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();
greet();
// await init();
// greet();
const queryClient = new QueryClient();

14
tailwind.config.cjs
View File

@@ -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"),