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

Custom font sizes and better zoom

Browse Source
This commit is contained in:
Gregory Schier
2024-05-29 12:10:01 -07:00
parent 7c71d8b751
commit fbc684140b
55 changed files with 487 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -21,7 +21,7 @@
</style>
</head>
<body>
<body class="text-base">
<div id="root"></div>
<div id="cm-portal" class="cm-portal"></div>
<div id="react-portal"></div>

12
src-tauri/.sqlx/query-8e88c7070a34a6e151da66f521deeafaea9a12e2aa68081daaf235d2003b513d.json generated
View File

@@ -1,12 +0,0 @@
{
"db_name": "SQLite",
"query": "\n UPDATE settings SET (\n theme, appearance, theme_dark, theme_light, update_channel\n ) = (?, ?, ?, ?, ?) WHERE id = 'default';\n ",
"describe": {
"columns": [],
"parameters": {
"Right": 5
},
"nullable": []
},
"hash": "8e88c7070a34a6e151da66f521deeafaea9a12e2aa68081daaf235d2003b513d"
}

28
src-tauri/.sqlx/query-cae02809532d086fbde12a246d12e3839ec8610b66e08315106dbdbf25d8699c.json → src-tauri/.sqlx/query-ca3485d87b060cd77c4114d2af544adf18f6f15341d9d5db40865e92a80da4e2.json generated
View File

@@ -1,6 +1,6 @@
{
"db_name": "SQLite",
"query": "\n SELECT\n id, model, created_at, updated_at, theme, appearance,\n theme_dark, theme_light, update_channel\n FROM settings\n WHERE id = 'default'\n ",
"query": "\n SELECT\n id, model, created_at, updated_at, theme, appearance,\n theme_dark, theme_light, update_channel,\n interface_font_size, interface_scale, editor_font_size, editor_soft_wrap\n FROM settings\n WHERE id = 'default'\n ",
"describe": {
"columns": [
{
@@ -47,6 +47,26 @@
"name": "update_channel",
"ordinal": 8,
"type_info": "Text"
},
{
"name": "interface_font_size",
"ordinal": 9,
"type_info": "Int64"
},
{
"name": "interface_scale",
"ordinal": 10,
"type_info": "Int64"
},
{
"name": "editor_font_size",
"ordinal": 11,
"type_info": "Int64"
},
{
"name": "editor_soft_wrap",
"ordinal": 12,
"type_info": "Bool"
}
],
"parameters": {
@@ -61,8 +81,12 @@
false,
false,
false,
false,
false,
false,
false,
false
]
},
"hash": "cae02809532d086fbde12a246d12e3839ec8610b66e08315106dbdbf25d8699c"
"hash": "ca3485d87b060cd77c4114d2af544adf18f6f15341d9d5db40865e92a80da4e2"
}

12
src-tauri/.sqlx/query-efd8ba41ea909b18dd520c57c1d464c5ae057b720cbbedcaec1513d43535632c.json generated Normal file
View File

@@ -0,0 +1,12 @@
{
"db_name": "SQLite",
"query": "\n UPDATE settings SET (\n theme, appearance, theme_dark, theme_light, update_channel,\n interface_font_size, interface_scale, editor_font_size, editor_soft_wrap\n ) = (?, ?, ?, ?, ?, ?, ?, ?, ?) WHERE id = 'default';\n ",
"describe": {
"columns": [],
"parameters": {
"Right": 9
},
"nullable": []
},
"hash": "efd8ba41ea909b18dd520c57c1d464c5ae057b720cbbedcaec1513d43535632c"
}

1
src-tauri/capabilities/capabilities.json
View File

@@ -39,6 +39,7 @@
}
]
},
"webview:allow-set-webview-zoom",
"window:allow-close",
"window:allow-is-fullscreen",
"window:allow-maximize",

2
src-tauri/gen/schemas/capabilities.json
View File

@@ -1 +1 @@
{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["os:allow-os-type","event:allow-emit","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","event:allow-listen","event:allow-unlisten","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":true,"name":"protoc","sidecar":true}]},"window:allow-close","window:allow-is-fullscreen","window:allow-maximize","window:allow-minimize","window:allow-toggle-maximize","window:allow-set-decorations","window:allow-set-title","window:allow-start-dragging","window:allow-unmaximize","window:allow-theme","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}}
{"main":{"identifier":"main","description":"Main permissions","local":true,"windows":["*"],"permissions":["os:allow-os-type","event:allow-emit","clipboard-manager:allow-write-text","clipboard-manager:allow-read-text","dialog:allow-open","dialog:allow-save","event:allow-listen","event:allow-unlisten","fs:allow-read-file","fs:allow-read-text-file",{"identifier":"fs:scope","allow":[{"path":"$APPDATA"},{"path":"$APPDATA/**"}]},"shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":true,"name":"protoc","sidecar":true}]},"webview:allow-set-webview-zoom","window:allow-close","window:allow-is-fullscreen","window:allow-maximize","window:allow-minimize","window:allow-toggle-maximize","window:allow-set-decorations","window:allow-set-title","window:allow-start-dragging","window:allow-unmaximize","window:allow-theme","clipboard-manager:allow-read-text","clipboard-manager:allow-write-text"]}}

4
src-tauri/migrations/20240529143147_more-settings.sql Normal file
View File

@@ -0,0 +1,4 @@
ALTER TABLE settings ADD COLUMN interface_font_size INTEGER DEFAULT 15 NOT NULL;
ALTER TABLE settings ADD COLUMN interface_scale INTEGER DEFAULT 1 NOT NULL;
ALTER TABLE settings ADD COLUMN editor_font_size INTEGER DEFAULT 13 NOT NULL;
ALTER TABLE settings ADD COLUMN editor_soft_wrap BOOLEAN DEFAULT 1 NOT NULL;

6
src-tauri/src/lib.rs
View File

@@ -1793,9 +1793,9 @@ fn create_window(handle: &AppHandle, url: Option<&str>) -> WebviewWindow {
match event.id().0.as_str() {
"quit" => exit(0),
"close" => w.close().unwrap(),
"zoom_reset" => w.emit("zoom", 0).unwrap(),
"zoom_in" => w.emit("zoom", 1).unwrap(),
"zoom_out" => w.emit("zoom", -1).unwrap(),
"zoom_reset" => w.emit("zoom_reset", true).unwrap(),
"zoom_in" => w.emit("zoom_in", true).unwrap(),
"zoom_out" => w.emit("zoom_out", true).unwrap(),
"settings" => w.emit("settings", true).unwrap(),
"duplicate_request" => w.emit("duplicate_request", true).unwrap(),
"refresh" => win2.eval("location.reload()").unwrap(),

18
src-tauri/src/models.rs
View File

@@ -55,6 +55,10 @@ pub struct Settings {
pub theme_dark: String,
pub theme_light: String,
pub update_channel: String,
pub interface_font_size: i64,
pub interface_scale: i64,
pub editor_font_size: i64,
pub editor_soft_wrap: bool,
}
#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)]
@@ -886,7 +890,8 @@ async fn get_settings(mgr: &impl Manager<Wry>) -> Result<Settings, sqlx::Error>
r#"
SELECT
id, model, created_at, updated_at, theme, appearance,
theme_dark, theme_light, update_channel
theme_dark, theme_light, update_channel,
interface_font_size, interface_scale, editor_font_size, editor_soft_wrap
FROM settings
WHERE id = 'default'
"#,
@@ -922,14 +927,19 @@ pub async fn update_settings(
sqlx::query!(
r#"
UPDATE settings SET (
theme, appearance, theme_dark, theme_light, update_channel
) = (?, ?, ?, ?, ?) WHERE id = 'default';
theme, appearance, theme_dark, theme_light, update_channel,
interface_font_size, interface_scale, editor_font_size, editor_soft_wrap
) = (?, ?, ?, ?, ?, ?, ?, ?, ?) WHERE id = 'default';
"#,
settings.theme,
settings.appearance,
settings.theme_dark,
settings.theme_light,
settings.update_channel
settings.update_channel,
settings.interface_font_size,
settings.interface_scale,
settings.editor_font_size,
settings.editor_soft_wrap,
)
.execute(&db)
.await?;

8
src-web/components/BinaryFileEditor.tsx
View File

@@ -49,7 +49,7 @@ export function BinaryFileEditor({
<Button variant="border" color="secondary" size="sm" onClick={handleClick}>
Choose File
</Button>
<div className="text-xs font-mono truncate rtl pr-3 text-fg">
<div className="text-sm font-mono truncate rtl pr-3 text-fg">
{/* Special character to insert ltr text in rtl element without making things wonky */}
&#x200E;
{filePath ?? 'Select File'}
@@ -57,7 +57,7 @@ export function BinaryFileEditor({
</HStack>
{filePath != null && mimeType !== contentType && !ignoreContentType.value && (
<Banner className="mt-3 !py-5">
<div className="text-sm mb-4 text-center">
<div className="mb-4 text-center">
<div>Set Content-Type header</div>
<InlineCode>{mimeType}</InlineCode> for current request?
</div>
@@ -65,12 +65,12 @@ export function BinaryFileEditor({
<Button
variant="solid"
color="secondary"
size="xs"
size="sm"
onClick={() => onChangeContentType(mimeType)}
>
Set Header
</Button>
<Button size="xs" variant="border" onClick={() => ignoreContentType.set(true)}>
<Button size="sm" variant="border" onClick={() => ignoreContentType.set(true)}>
Ignore
</Button>
</HStack>

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

@@ -28,7 +28,7 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
return (
<div className="pb-2">
<table className="w-full text-xs mb-auto min-w-full max-w-full divide-y divide-background-highlight">
<table className="w-full text-sm mb-auto min-w-full max-w-full divide-y divide-background-highlight">
<thead>
<tr>
<th className="py-2 text-left">Domain</th>

61
src-web/components/GlobalHooks.tsx
View File

@@ -1,5 +1,6 @@
import { useQueryClient } from '@tanstack/react-query';
import { getCurrent } from '@tauri-apps/api/webviewWindow';
import { useEffect } from 'react';
import { useCommandPalette } from '../hooks/useCommandPalette';
import { cookieJarsQueryKey } from '../hooks/useCookieJars';
import { foldersQueryKey } from '../hooks/useFolders';
@@ -7,6 +8,7 @@ import { useGlobalCommands } from '../hooks/useGlobalCommands';
import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
import { grpcEventsQueryKey } from '../hooks/useGrpcEvents';
import { grpcRequestsQueryKey } from '../hooks/useGrpcRequests';
import { useHotKey } from '../hooks/useHotKey';
import { httpRequestsQueryKey } from '../hooks/useHttpRequests';
import { httpResponsesQueryKey } from '../hooks/useHttpResponses';
import { keyValueQueryKey } from '../hooks/useKeyValue';
@@ -16,15 +18,15 @@ import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
import { useRecentRequests } from '../hooks/useRecentRequests';
import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
import { settingsQueryKey } from '../hooks/useSettings';
import { settingsQueryKey, useSettings } from '../hooks/useSettings';
import { useSyncThemeToDocument } from '../hooks/useSyncThemeToDocument';
import { useSyncWindowTitle } from '../hooks/useSyncWindowTitle';
import { useUpdateSettings } from '../hooks/useUpdateSettings';
import { workspacesQueryKey } from '../hooks/useWorkspaces';
import { useZoom } from '../hooks/useZoom';
import type { Model } from '../lib/models';
import { modelsEq } from '../lib/models';
const DEFAULT_FONT_SIZE = 16;
export function GlobalHooks() {
// Include here so they always update, even if no component references them
useRecentWorkspaces();
@@ -125,26 +127,43 @@ export function GlobalHooks() {
}
});
useListenToTauriEvent<number>(
'zoom',
({ payload: zoomDelta }) => {
const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
const settings = useSettings();
useEffect(() => {
if (settings == null) {
return;
}
let newFontSize;
if (zoomDelta === 0) {
newFontSize = DEFAULT_FONT_SIZE;
} else if (zoomDelta > 0) {
newFontSize = Math.min(fontSize * 1.1, DEFAULT_FONT_SIZE * 5);
} else if (zoomDelta < 0) {
newFontSize = Math.max(fontSize * 0.9, DEFAULT_FONT_SIZE * 0.4);
}
const { interfaceScale, interfaceFontSize, editorFontSize } = settings;
getCurrent().setZoom(interfaceScale).catch(console.error);
document.documentElement.style.cssText = [
`font-size: ${interfaceFontSize}px`,
`--editor-font-size: ${editorFontSize}px`,
].join('; ');
}, [settings]);
const updateSettings = useUpdateSettings();
document.documentElement.style.fontSize = `${newFontSize}px`;
},
{
target: { kind: 'WebviewWindow', label: getCurrent().label },
},
);
// Handle Zoom. Note, Mac handles it in app menu, so need to also handle keyboard
// shortcuts for Windows/Linux
const zoom = useZoom();
useHotKey('app.zoom_in', () => zoom.zoomIn);
useListenToTauriEvent('zoom_in', () => zoom.zoomIn);
useHotKey('app.zoom_out', () => zoom.zoomOut);
useListenToTauriEvent('zoom_out', () => zoom.zoomOut);
useHotKey('app.zoom_out', () => zoom.zoomReset);
useListenToTauriEvent('zoom_out', () => zoom.zoomReset);
useHotKey('app.zoom_out', () => {
if (!settings) return;
updateSettings.mutate({
...settings,
interfaceScale: Math.max(0.4, settings.interfaceScale * 0.9),
});
});
useHotKey('app.zoom_reset', () => {
if (!settings) return;
updateSettings.mutate({ ...settings, interfaceScale: 1 });
});
return null;
}

8
src-web/components/GrpcConnectionMessagesPane.tsx
View File

@@ -105,7 +105,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
Message {activeEvent.eventType === 'client_message' ? 'Sent' : 'Received'}
</div>
{!showLarge && activeEvent.content.length > 1000 * 1000 ? (
<VStack space={2} className="text-sm italic text-fg-subtler">
<VStack space={2} className="italic text-fg-subtler">
Message previews larger than 1MB are hidden
<div>
<Button
@@ -136,7 +136,7 @@ export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }:
{activeEvent.content}
</div>
{activeEvent.error && (
<div className="select-text cursor-text text-xs font-mono py-1 text-fg-warning">
<div className="select-text cursor-text text-sm font-mono py-1 text-fg-warning">
{activeEvent.error}
</div>
)}
@@ -220,11 +220,11 @@ function EventRow({
: 'info'
}
/>
<div className={classNames('w-full truncate text-2xs')}>
<div className={classNames('w-full truncate text-xs')}>
{content.slice(0, 1000)}
{error && <span className="text-fg-warning"> ({error})</span>}
</div>
<div className={classNames('opacity-50 text-2xs')}>
<div className={classNames('opacity-50 text-xs')}>
{format(createdAt + 'Z', 'HH:mm:ss.SSS')}
</div>
</button>

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

@@ -209,7 +209,7 @@ export function GrpcConnectionSetupPane({
rightSlot={<Icon className="text-fg-subtler" size="sm" icon="chevronDown" />}
disabled={isStreaming || services == null}
className={classNames(
'font-mono text-xs min-w-[5rem] !ring-0',
'font-mono text-sm min-w-[5rem] !ring-0',
paneSize < 400 && 'flex-1',
)}
>

13
src-web/components/GrpcProtoSelection.tsx
View File

@@ -40,7 +40,6 @@ export function GrpcProtoSelection({ requestId }: Props) {
<HStack space={2} justifyContent="start" className="flex-row-reverse">
<Button
color="primary"
size="sm"
onClick={async () => {
const selected = await open({
title: 'Select Proto Files',
@@ -61,7 +60,6 @@ export function GrpcProtoSelection({ requestId }: Props) {
isLoading={grpc.reflect.isFetching}
disabled={grpc.reflect.isFetching}
color="secondary"
size="sm"
onClick={() => grpc.reflect.refetch()}
>
Refresh Schema
@@ -103,25 +101,24 @@ export function GrpcProtoSelection({ requestId }: Props) {
)}
{protoFiles.length > 0 && (
<table className="w-full divide-y">
<table className="w-full divide-y divide-background-highlight">
<thead>
<tr>
<th className="text-fg-subtler">
<span className="font-mono text-sm">*.proto</span> Files
<span className="font-mono">*.proto</span> Files
</th>
<th></th>
</tr>
</thead>
<tbody className="divide-y">
<tbody className="divide-y divide-background-highlight">
{protoFiles.map((f, i) => (
<tr key={f + i} className="group">
<td className="pl-1 text-sm font-mono">{f.split('/').pop()}</td>
<td className="pl-1 font-mono">{f.split('/').pop()}</td>
<td className="w-0 py-0.5">
<IconButton
title="Remove file"
size="sm"
icon="trash"
className="ml-auto opacity-30 transition-opacity group-hover:opacity-100"
className="ml-auto opacity-50 transition-opacity group-hover:opacity-100"
onClick={async () => {
await protoFilesKv.set(protoFiles.filter((p) => p !== f));
}}

4
src-web/components/KeyboardShortcutsDialog.tsx
View File

@@ -1,10 +1,10 @@
import { hotkeyActions } from '../hooks/useHotKey';
import { HotKeyList } from './core/HotKeyList';
export const KeyboardShortcutsDialog = () => {
export function KeyboardShortcutsDialog() {
return (
<div className="h-full w-full pb-2">
<HotKeyList hotkeys={hotkeyActions} />
</div>
);
};
}

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

@@ -45,7 +45,7 @@ export function RecentConnectionsDropdown({
label: (
<HStack space={2} alignItems="center">
{formatDistanceToNowStrict(c.createdAt + 'Z')} ago &bull;{' '}
<span className="font-mono text-xs">{c.elapsed}ms</span>
<span className="font-mono text-sm">{c.elapsed}ms</span>
</HStack>
),
leftSlot: activeConnection?.id === c.id ? <Icon icon="check" /> : <Icon icon="empty" />,

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

@@ -86,7 +86,7 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
hotkeyAction="request_switcher.toggle"
className={classNames(
className,
'text-fg text-sm truncate pointer-events-auto',
'text-fg truncate pointer-events-auto',
activeRequest === null && 'text-fg-subtler italic',
)}
>

6
src-web/components/RecentResponsesDropdown.tsx
View File

@@ -43,13 +43,13 @@ export const RecentResponsesDropdown = function ResponsePane({
disabled: responses.length === 0,
},
{ type: 'separator', label: 'History' },
...responses.slice(0, 20).map((r) => ({
...responses.slice(0, 20).map((r: HttpResponse) => ({
key: r.id,
label: (
<HStack space={2} alignItems="center">
<StatusTag className="text-xs" response={r} />
<StatusTag className="text-sm" response={r} />
<span>&rarr;</span>{' '}
<span className="font-mono text-xs">{r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'}</span>
<span className="font-mono text-sm">{r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'}</span>
</HStack>
),
leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,

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

@@ -94,7 +94,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
<HStack
alignItems="center"
className={classNames(
'text-fg-subtle text-sm w-full flex-shrink-0',
'text-fg-subtle w-full flex-shrink-0',
// Remove a bit of space because the tabs have lots too
'-mb-1.5',
)}

90
src-web/components/Settings/SettingsAppearance.tsx
View File

@@ -7,6 +7,7 @@ import { useSettings } from '../../hooks/useSettings';
import { useThemes } from '../../hooks/useThemes';
import { useUpdateSettings } from '../../hooks/useUpdateSettings';
import { trackEvent } from '../../lib/analytics';
import { clamp } from '../../lib/clamp';
import { isThemeDark } from '../../lib/theme/window';
import type { ButtonProps } from '../core/Button';
import { Button } from '../core/Button';
@@ -14,8 +15,10 @@ import { Editor } from '../core/Editor';
import type { IconProps } from '../core/Icon';
import { Icon } from '../core/Icon';
import { IconButton } from '../core/IconButton';
import { PlainInput } from '../core/PlainInput';
import type { SelectOption } from '../core/Select';
import { Select } from '../core/Select';
import { Separator } from '../core/Separator';
import { HStack, VStack } from '../core/Stacks';
const buttonColors: ButtonProps['color'][] = [
@@ -75,6 +78,41 @@ export function SettingsAppearance() {
return (
<VStack space={2} className="mb-4">
<PlainInput
size="sm"
name="interfaceFontSize"
label="Font Size"
placeholder="16"
type="number"
labelPosition="left"
defaultValue={`${settings.interfaceFontSize}`}
validate={(value) => parseInt(value) >= 8 && parseInt(value) <= 30}
onChange={(v) =>
updateSettings.mutate({
...settings,
interfaceFontSize: clamp(parseInt(v) || 16, 8, 30),
})
}
/>
<PlainInput
size="sm"
name="editorFontSize"
label="Editor Font Size"
placeholder="14"
type="number"
labelPosition="left"
defaultValue={`${settings.editorFontSize}`}
validate={(value) => parseInt(value) >= 8 && parseInt(value) <= 30}
onChange={(v) =>
updateSettings.mutate({
...settings,
editorFontSize: clamp(parseInt(v) || 14, 8, 30),
})
}
/>
<Separator className="my-4" />
<Select
name="appearance"
label="Appearance"
@@ -91,37 +129,35 @@ export function SettingsAppearance() {
{ label: 'Dark', value: 'dark' },
]}
/>
<div className="grid grid-cols-2 gap-3">
<Select
name="lightTheme"
label={'Light Theme' + (appearance !== 'dark' ? ' (active)' : '')}
labelPosition="top"
size="sm"
value={activeTheme.light.id}
options={lightThemes}
onChange={async (themeLight) => {
await updateSettings.mutateAsync({ ...settings, themeLight });
trackEvent('setting', 'update', { themeLight });
}}
/>
<Select
name="darkTheme"
label={'Dark Theme' + (appearance === 'dark' ? ' (active)' : '')}
labelPosition="top"
size="sm"
value={activeTheme.dark.id}
options={darkThemes}
onChange={async (themeDark) => {
await updateSettings.mutateAsync({ ...settings, themeDark });
trackEvent('setting', 'update', { themeDark });
}}
/>
</div>
<Select
name="lightTheme"
label="Light Theme"
labelPosition="left"
size="sm"
value={activeTheme.light.id}
options={lightThemes}
onChange={async (themeLight) => {
await updateSettings.mutateAsync({ ...settings, themeLight });
trackEvent('setting', 'update', { themeLight });
}}
/>
<Select
name="darkTheme"
label="Dark Theme"
labelPosition="left"
size="sm"
value={activeTheme.dark.id}
options={darkThemes}
onChange={async (themeDark) => {
await updateSettings.mutateAsync({ ...settings, themeDark });
trackEvent('setting', 'update', { themeDark });
}}
/>
<VStack
space={3}
className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
>
<div className="text-sm text-fg font-bold">
<div className="text-fg font-bold">
Theme Preview <span className="text-fg-subtle">({appearance})</span>
</div>
<HStack space={1.5} alignItems="center" className="w-full">

3
src-web/components/Settings/SettingsDialog.tsx
View File

@@ -16,8 +16,7 @@ enum Tab {
}
const tabs = [Tab.General, Tab.Appearance, Tab.Design];
const useTabState = createGlobalState<string>(Tab.Appearance);
const useTabState = createGlobalState<string>(tabs[0]!);
export const SettingsDialog = () => {
const [tab, setTab] = useTabState();

28
src-web/components/Settings/SettingsGeneral.tsx
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
import { useAppInfo } from '../../hooks/useAppInfo';
import { useCheckForUpdates } from '../../hooks/useCheckForUpdates';
@@ -35,19 +36,13 @@ export function SettingsGeneral() {
labelPosition="left"
size="sm"
value={settings.updateChannel}
onChange={async (updateChannel) => {
onChange={(updateChannel) => {
trackEvent('setting', 'update', { update_channel: updateChannel });
await updateSettings.mutateAsync({ ...settings, updateChannel });
updateSettings.mutate({ ...settings, updateChannel });
}}
options={[
{
label: 'Release',
value: 'stable',
},
{
label: 'Early Bird (Beta)',
value: 'beta',
},
{ label: 'Release', value: 'stable' },
{ label: 'Early Bird (Beta)', value: 'beta' },
]}
/>
<IconButton
@@ -59,12 +54,11 @@ export function SettingsGeneral() {
onClick={() => checkForUpdates.mutateAsync()}
/>
</div>
<Separator className="my-4" />
<Heading size={2}>
Workspace{' '}
<div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 text-sm rounded text-fg">
<div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 rounded text-fg text-shrink">
{workspace.name}
</div>
</Heading>
@@ -77,28 +71,28 @@ export function SettingsGeneral() {
labelPosition="left"
defaultValue={`${workspace.settingRequestTimeout}`}
validate={(value) => parseInt(value) >= 0}
onChange={(v) => updateWorkspace.mutateAsync({ settingRequestTimeout: parseInt(v) || 0 })}
onChange={(v) => updateWorkspace.mutate({ settingRequestTimeout: parseInt(v) || 0 })}
/>
<Checkbox
checked={workspace.settingValidateCertificates}
title="Validate TLS Certificates"
onChange={async (settingValidateCertificates) => {
onChange={(settingValidateCertificates) => {
trackEvent('workspace', 'update', {
validate_certificates: JSON.stringify(settingValidateCertificates),
});
await updateWorkspace.mutateAsync({ settingValidateCertificates });
updateWorkspace.mutate({ settingValidateCertificates });
}}
/>
<Checkbox
checked={workspace.settingFollowRedirects}
title="Follow Redirects"
onChange={async (settingFollowRedirects) => {
onChange={(settingFollowRedirects) => {
trackEvent('workspace', 'update', {
follow_redirects: JSON.stringify(settingFollowRedirects),
});
await updateWorkspace.mutateAsync({ settingFollowRedirects });
updateWorkspace.mutate({ settingFollowRedirects });
}}
/>
</VStack>

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

@@ -53,7 +53,7 @@ export function SettingsDropdown() {
dialog.show({
id: 'hotkey',
title: 'Keyboard Shortcuts',
size: 'sm',
size: 'dynamic',
render: () => <KeyboardShortcutsDialog />,
});
},

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

@@ -512,7 +512,7 @@ function SidebarItems({
className={classNames(
tree.depth > 0 && 'border-l border-background-highlight-secondary',
tree.depth === 0 && 'ml-0',
tree.depth >= 1 && 'ml-[1.2em]',
tree.depth >= 1 && 'ml-[1.2rem]',
)}
>
{tree.children.map((child, i) => {
@@ -811,7 +811,7 @@ const SidebarItem = forwardRef(function SidebarItem(
data-active={isActive}
data-selected={selected}
className={classNames(
'w-full flex gap-1.5 items-center text-sm h-xs px-1.5 rounded-md',
'w-full flex gap-1.5 items-center h-xs px-1.5 rounded-md',
editing && 'ring-1 focus-within:ring-focus',
isActive && 'bg-background-highlight-secondary text-fg',
!isActive &&
@@ -855,7 +855,7 @@ const SidebarItem = forwardRef(function SidebarItem(
{isResponseLoading(latestHttpResponse) ? (
<Icon spin size="sm" icon="refresh" className="text-fg-subtler" />
) : (
<StatusTag className="text-2xs" response={latestHttpResponse} />
<StatusTag className="text-xs" response={latestHttpResponse} />
)}
</div>
) : null}

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

@@ -130,7 +130,7 @@ export default function Workspace() {
'grid w-full h-full',
// Animate sidebar width changes but only when not resizing
// because it's too slow to animate on mouse move
!isResizing && 'transition-all',
!isResizing && 'transition-grid',
)}
>
{floating ? (

2
src-web/components/core/Button.tsx
View File

@@ -71,7 +71,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
justify === 'start' && 'justify-start',
justify === 'center' && 'justify-center',
size === 'md' && 'h-md px-3 rounded-md',
size === 'sm' && 'h-sm px-2.5 text-sm rounded-md',
size === 'sm' && 'h-sm px-2.5 rounded-md',
size === 'xs' && 'h-xs px-2 text-sm rounded-md',
size === '2xs' && 'h-5 px-1 text-xs rounded',

2
src-web/components/core/Checkbox.tsx
View File

@@ -28,7 +28,7 @@ export function Checkbox({
as="label"
space={2}
alignItems="center"
className={classNames(className, 'text-fg text-sm', disabled && 'opacity-disabled')}
className={classNames(className, 'text-fg', disabled && 'opacity-disabled')}
>
<div className={classNames(inputWrapperClassName, 'x-theme-input', 'relative flex')}>
<input

14
src-web/components/core/Dropdown.tsx
View File

@@ -448,16 +448,14 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
<HStack
space={2}
alignItems="center"
className="pb-0.5 px-1.5 mb-2 text-xs border border-background-highlight-secondary mx-2 rounded font-mono h-2xs"
className="pb-0.5 px-1.5 mb-2 text-sm border border-background-highlight-secondary mx-2 rounded font-mono h-2xs"
>
<Icon icon="search" size="xs" className="text-fg-subtle" />
<div className="text-fg">{filter}</div>
</HStack>
)}
{filteredItems.length === 0 && (
<span className="text-fg-subtler text-sm text-center px-2 py-1">
No matches
</span>
<span className="text-fg-subtler text-center px-2 py-1">No matches</span>
)}
{filteredItems.map((item, i) => {
if (item.type === 'separator') {
@@ -531,14 +529,18 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
onFocus={handleFocus}
onClick={handleClick}
justify="start"
leftSlot={item.leftSlot && <div className="pr-2 flex justify-start">{item.leftSlot}</div>}
leftSlot={
item.leftSlot && (
<div className="pr-2 flex justify-start text-fg-subtle">{item.leftSlot}</div>
)
}
rightSlot={rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
innerClassName="!text-left"
color="custom"
className={classNames(
className,
'h-xs', // More compact
'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm whitespace-nowrap',
'min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap',
'focus:bg-background-highlight focus:text-fg rounded',
item.variant === 'default' && 'text-fg-subtle',
item.variant === 'danger' && 'text-fg-danger',

15
src-web/components/core/Editor/Editor.css
View File

@@ -104,8 +104,7 @@
}
.cm-scroller {
@apply font-mono text-[0.75rem];
@apply font-mono text-editor;
/*
* Round corners or they'll stick out of the editor bounds of editor is rounded.
* Could potentially be pushed up from the editor like we do with bg color but this
@@ -185,7 +184,7 @@
}
.cm-tooltip.cm-tooltip-hover {
@apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-xs;
@apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-sm;
@apply px-2 py-1;
a {
@@ -208,7 +207,7 @@
/* NOTE: Extra selector required to override default styles */
.cm-tooltip.cm-tooltip-autocomplete,
.cm-tooltip.cm-completionInfo {
@apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-xs;
@apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-sm;
.cm-completionIcon {
@apply italic font-mono;
@@ -267,7 +266,7 @@
}
&.cm-completionInfo-right {
@apply ml-1 -mt-0.5 text-sm;
@apply ml-1 -mt-0.5;
}
&.cm-completionInfo-right-narrow {
@@ -279,12 +278,14 @@
}
&.cm-tooltip-autocomplete {
@apply font-mono text-editor;
& > ul {
@apply p-1 max-h-[40vh];
}
& > ul > li {
@apply cursor-default px-2 rounded-sm text-fg-subtle h-7 flex items-center;
@apply cursor-default px-2 py-1.5 rounded-sm text-fg-subtle flex items-center;
}
& > ul > li[aria-selected] {
@@ -292,7 +293,7 @@
}
.cm-completionIcon {
@apply text-xs flex items-center pb-0.5 flex-shrink-0;
@apply text-sm flex items-center pb-0.5 flex-shrink-0;
}
.cm-completionLabel {

2
src-web/components/core/FormattedError.tsx
View File

@@ -9,7 +9,7 @@ export function FormattedError({ children }: Props) {
return (
<pre
className={classNames(
'w-full text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
'w-full select-auto cursor-text bg-gray-100 p-3 rounded',
'whitespace-pre-wrap border border-fg-danger border-dashed overflow-x-auto',
)}
>

2
src-web/components/core/HotKeyLabel.tsx
View File

@@ -7,5 +7,5 @@ interface Props {
export function HotKeyLabel({ action }: Props) {
const label = useHotKeyLabel(action);
return <span className="text-fg-subtle">{label}</span>;
return <span className="text-fg-subtle whitespace-nowrap">{label}</span>;
}

2
src-web/components/core/HotKeyList.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
export const HotKeyList = ({ hotkeys, bottomSlot }: Props) => {
return (
<div className="h-full flex items-center justify-center text-sm">
<div className="h-full flex items-center justify-center">
<VStack space={2}>
{hotkeys.map((hotkey) => (
<HStack key={hotkey} className="grid grid-cols-2">

2
src-web/components/core/HttpMethodTag.tsx
View File

@@ -27,7 +27,7 @@ export function HttpMethodTag({ request, className }: Props) {
const m = method.toLowerCase();
return (
<span className={classNames(className, 'text-2xs font-mono text-fg-subtle')}>
<span className={classNames(className, 'text-xs font-mono text-fg-subtle')}>
{methodMap[m] ?? m.slice(0, 3).toUpperCase()}
</span>
);

4
src-web/components/core/InlineCode.tsx
View File

@@ -6,8 +6,8 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
<code
className={classNames(
className,
'font-mono text-xs bg-background-highlight-secondary border border-background-highlight',
'px-1.5 py-0.5 rounded text-fg-info shadow-inner',
'font-mono text-shrink bg-background-highlight-secondary border border-background-highlight',
'px-1.5 py-0.5 rounded text-fg shadow-inner',
)}
{...props}
/>

6
src-web/components/core/Input.tsx
View File

@@ -133,11 +133,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
>
<label
htmlFor={id}
className={classNames(
labelClassName,
'text-sm text-fg whitespace-nowrap',
hideLabel && 'sr-only',
)}
className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
>
{label}
</label>

2
src-web/components/core/JsonAttributeTree.tsx
View File

@@ -80,7 +80,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
<span className={classNames(labelClassName, 'select-text group-hover:text-fg')}>{label}</span>
);
return (
<div className={classNames(/*depth === 0 && '-ml-4',*/ 'font-mono text-2xs')}>
<div className={classNames(/*depth === 0 && '-ml-4',*/ 'font-mono text-xs')}>
<div className="flex items-center">
{isExpandable ? (
<button className="group relative flex items-center pl-4 w-full" onClick={toggleExpanded}>

2
src-web/components/core/PairEditor.tsx
View File

@@ -389,7 +389,7 @@ function PairEditorRow({
<Button
size="xs"
color="secondary"
className="font-mono text-xs"
className="font-mono text-sm"
onClick={async (e) => {
e.preventDefault();
const selected = await open({

148
src-web/components/core/PlainInput.tsx Normal file
View File

@@ -0,0 +1,148 @@
import classNames from 'classnames';
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
import { useStateWithDeps } from '../../hooks/useStateWithDeps';
import { IconButton } from './IconButton';
import type { InputProps } from './Input';
import { HStack } from './Stacks';
export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type'> & {
type: 'text' | 'password' | 'number';
};
export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function Input(
{
className,
containerClassName,
defaultValue,
forceUpdateKey,
hideLabel,
label,
labelClassName,
labelPosition = 'top',
leftSlot,
name,
onBlur,
onChange,
onFocus,
onPaste,
placeholder,
require,
rightSlot,
size = 'md',
type = 'text',
validate,
...props
}: PlainInputProps,
ref,
) {
const [obscured, setObscured] = useStateWithDeps(type === 'password', [type]);
const [currentValue, setCurrentValue] = useState(defaultValue ?? '');
const [focused, setFocused] = useState(false);
const handleFocus = useCallback(() => {
setFocused(true);
onFocus?.();
}, [onFocus]);
const handleBlur = useCallback(() => {
setFocused(false);
onBlur?.();
}, [onBlur]);
const id = `input-${name}`;
const inputClassName = classNames(
className,
'!bg-transparent min-w-0 h-auto w-full focus:outline-none placeholder:text-placeholder',
'px-1.5 text-xs font-mono',
);
const isValid = useMemo(() => {
if (require && !validateRequire(currentValue)) return false;
if (validate && !validate(currentValue)) return false;
return true;
}, [currentValue, validate, require]);
const handleChange = useCallback(
(value: string) => {
setCurrentValue(value);
onChange?.(value);
},
[onChange],
);
const wrapperRef = useRef<HTMLDivElement>(null);
return (
<div
ref={wrapperRef}
className={classNames(
'w-full',
'pointer-events-auto', // Just in case we're placing in disabled parent
labelPosition === 'left' && 'flex items-center gap-2',
labelPosition === 'top' && 'flex-row gap-0.5',
)}
>
<label
htmlFor={id}
className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
>
{label}
</label>
<HStack
alignItems="stretch"
className={classNames(
containerClassName,
'x-theme-input',
'relative w-full rounded-md text-fg',
'border',
focused ? 'border-border-focus' : 'border-background-highlight',
!isValid && '!border-fg-danger',
size === 'md' && 'min-h-md',
size === 'sm' && 'min-h-sm',
size === 'xs' && 'min-h-xs',
)}
>
{leftSlot}
<HStack
alignItems="center"
className={classNames(
'w-full min-w-0',
leftSlot && 'pl-0.5 -ml-2',
rightSlot && 'pr-0.5 -mr-2',
)}
>
<input
ref={ref}
key={forceUpdateKey}
id={id}
type={type === 'password' && !obscured ? 'text' : type}
defaultValue={defaultValue}
placeholder={placeholder}
onChange={(e) => handleChange(e.target.value)}
onPaste={(e) => onPaste?.(e.clipboardData.getData('Text'))}
className={inputClassName}
onFocus={handleFocus}
onBlur={handleBlur}
{...props}
/>
</HStack>
{type === 'password' && (
<IconButton
title={obscured ? `Show ${label}` : `Obscure ${label}`}
size="xs"
className="mr-0.5 group/obscure !h-auto my-0.5"
iconClassName="text-fg-subtle group-hover/obscure:text-fg"
iconSize="sm"
icon={obscured ? 'eye' : 'eyeClosed'}
onClick={() => setObscured((o) => !o)}
/>
)}
{rightSlot}
</HStack>
</div>
);
});
function validateRequire(v: string) {
return v.length > 0;
}

8
src-web/components/core/Select.tsx
View File

@@ -45,11 +45,7 @@ export function Select<T extends string>({
>
<label
htmlFor={id}
className={classNames(
labelClassName,
'text-sm text-fg whitespace-nowrap',
hideLabel && 'sr-only',
)}
className={classNames(labelClassName, 'text-fg whitespace-nowrap', hideLabel && 'sr-only')}
>
{label}
</label>
@@ -58,7 +54,7 @@ export function Select<T extends string>({
style={selectBackgroundStyles}
onChange={(e) => onChange(e.target.value as T)}
className={classNames(
'font-mono text-xs border w-full outline-none bg-transparent pl-2 pr-7',
'font-mono text-sm border w-full outline-none bg-transparent pl-2 pr-7',
'bg-background-highlight-secondary border-background-highlight focus:border-border-focus',
size === 'xs' && 'h-xs',
size === 'sm' && 'h-sm',

2
src-web/components/core/Separator.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
export function Separator({ className, orientation = 'horizontal', children }: Props) {
return (
<div role="separator" className={classNames(className, 'flex items-center')}>
{children && <div className="text-xs text-fg-subtler mr-2 whitespace-nowrap">{children}</div>}
{children && <div className="text-sm text-fg-subtler mr-2 whitespace-nowrap">{children}</div>}
<div
className={classNames(
'bg-background-highlight',

2
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -84,7 +84,7 @@ export function Tabs({
{tabs.map((t) => {
const isActive = t.value === value;
const btnClassName = classNames(
'h-full flex items-center text-sm rounded',
'h-full flex items-center rounded',
'!px-2 ml-[1px]',
addBorders && 'border',
isActive ? 'text-fg' : 'text-fg-subtle hover:text-fg',

2
src-web/components/responseViewers/ImageViewer.tsx
View File

@@ -20,7 +20,7 @@ export function ImageViewer({ response, className }: Props) {
if (!show) {
return (
<>
<div className="text-sm italic text-fg-subtler">
<div className="italic text-fg-subtler">
Response body is too large to preview.{' '}
<button className="cursor-pointer underline hover:text-fg" onClick={() => setShow(true)}>
Show anyway

11
src-web/hooks/useHotKey.ts
View File

@@ -20,7 +20,10 @@ export type HotkeyAction =
| 'sidebar.focus'
| 'sidebar.toggle'
| 'urlBar.focus'
| 'command_palette.toggle';
| 'command_palette.toggle'
| 'app.zoom_in'
| 'app.zoom_out'
| 'app.zoom_reset';
const hotkeys: Record<HotkeyAction, string[]> = {
'environmentEditor.toggle': ['CmdCtrl+Shift+e'],
@@ -37,6 +40,9 @@ const hotkeys: Record<HotkeyAction, string[]> = {
'sidebar.toggle': ['CmdCtrl+b'],
'urlBar.focus': ['CmdCtrl+l'],
'command_palette.toggle': ['CmdCtrl+k'],
'app.zoom_in': ['CmdCtrl+='],
'app.zoom_out': ['CmdCtrl+-'],
'app.zoom_reset': ['CmdCtrl+0'],
};
const hotkeyLabels: Record<HotkeyAction, string> = {
@@ -54,6 +60,9 @@ const hotkeyLabels: Record<HotkeyAction, string> = {
'sidebar.toggle': 'Toggle Sidebar',
'urlBar.focus': 'Focus URL',
'command_palette.toggle': 'Toggle Command Palette',
'app.zoom_in': 'Zoom In',
'app.zoom_out': 'Zoom Out',
'app.zoom_reset': 'Zoom to Actual Size',
};
export const hotkeyActions: HotkeyAction[] = Object.keys(hotkeys) as (keyof typeof hotkeys)[];

16
src-web/hooks/usePreferredAppearance.ts
View File

@@ -1,17 +1,17 @@
import { useEffect, useState } from 'react';
import {
type Appearance,
getPreferredAppearance,
subscribeToPreferredAppearanceChange,
} from '../lib/theme/window';
getCSSAppearance,
getWindowAppearance,
subscribeToWindowAppearanceChange,
} from '../lib/theme/appearance';
import { type Appearance } from '../lib/theme/window';
export function usePreferredAppearance() {
const [preferredAppearance, setPreferredAppearance] = useState<Appearance>();
const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(getCSSAppearance());
// Set appearance when preferred theme changes
useEffect(() => {
getPreferredAppearance().then(setPreferredAppearance);
return subscribeToPreferredAppearanceChange(setPreferredAppearance);
getWindowAppearance().then(setPreferredAppearance);
return subscribeToWindowAppearanceChange(setPreferredAppearance);
}, []);
return preferredAppearance;

2
src-web/hooks/useResolvedAppearance.ts
View File

@@ -10,7 +10,5 @@ export function useResolvedAppearance() {
? preferredAppearance
: settings.appearance;
console.log('HELLO', settings?.appearance, preferredAppearance);
return appearance;
}

31
src-web/hooks/useZoom.ts Normal file
View File

@@ -0,0 +1,31 @@
import { useCallback } from 'react';
import { useSettings } from './useSettings';
import { useUpdateSettings } from './useUpdateSettings';
export function useZoom() {
const settings = useSettings();
const updateSettings = useUpdateSettings();
const zoomIn = useCallback(() => {
if (!settings) return;
updateSettings.mutate({
...settings,
interfaceScale: Math.min(1.8, settings.interfaceScale * 1.1),
});
}, [settings, updateSettings]);
const zoomOut = useCallback(() => {
if (!settings) return;
updateSettings.mutate({
...settings,
interfaceScale: Math.max(0.4, settings.interfaceScale * 0.9),
});
}, [settings, updateSettings]);
const zoomReset = useCallback(() => {
if (!settings) return;
updateSettings.mutate({ ...settings, interfaceScale: 1 });
}, [settings, updateSettings]);
return { zoomIn, zoomOut, zoomReset };
}

6
src-web/lib/indent.ts
View File

@@ -1,6 +0,0 @@
export function indent(text: string, space = ' '): string {
return text
.split('\n')
.map((line) => space + line)
.join('\n');
}

4
src-web/lib/models.ts
View File

@@ -37,6 +37,10 @@ export interface Settings extends BaseModel {
themeLight: string;
themeDark: string;
updateChannel: string;
interfaceFontSize: number;
interfaceScale: number;
editorFontSize: number;
editorSoftWrap: number;
}
export interface Workspace extends BaseModel {

31
src-web/lib/theme/appearance.ts Normal file
View File

@@ -0,0 +1,31 @@
import { getCurrent } from '@tauri-apps/api/webviewWindow';
import type { Appearance } from './window';
export function getCSSAppearance(): Appearance {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
export async function getWindowAppearance(): Promise<Appearance> {
const a = await getCurrent().theme();
return a ?? getCSSAppearance();
}
/**
* Subscribe to appearance (dark/light) changes. Note, we use Tauri Window appearance instead of
* CSS appearance because CSS won't fire the way we handle window theme management.
*/
export function subscribeToWindowAppearanceChange(
cb: (appearance: Appearance) => void,
): () => void {
const container = { unsubscribe: () => {} };
getCurrent()
.onThemeChanged((t) => {
cb(t.payload);
})
.then((l) => {
container.unsubscribe = l;
});
return () => container.unsubscribe();
}

12
src-web/lib/theme/color.ts
View File

@@ -41,22 +41,10 @@ export class Color {
return this.theme === 'dark' ? this._darken(mod) : this._lighten(mod);
}
lowerTo(value: number): Color {
return this.theme === 'dark'
? this._darken(1)._lighten(value)
: this._lighten(1)._darken(1 - value);
}
lift(mod: number): Color {
return this.theme === 'dark' ? this._lighten(mod) : this._darken(mod);
}
liftTo(value: number): Color {
return this.theme === 'dark'
? this._lighten(1)._darken(1 - value)
: this._darken(1)._lighten(value);
}
translucify(mod: number): Color {
const c = this.clone();
c.alpha = c.alpha - c.alpha * mod;

4
src-web/lib/theme/themes/yaak.ts
View File

@@ -31,10 +31,10 @@ export const yaakLight: YaakTheme = {
export const yaakDark: YaakTheme = {
id: 'yaak-dark',
name: 'Yaak',
background: new Color('hsl(244,23%,13%)', 'dark'),
background: new Color('hsl(244,23%,14%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
foreground: new Color('hsl(245,23%,86%)', 'dark'),
foreground: new Color('hsl(245,23%,80%)', 'dark'),
foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'),

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

@@ -1,5 +1,3 @@
import { getCurrent } from '@tauri-apps/api/webviewWindow';
import { indent } from '../indent';
import { Color } from './color';
export type Appearance = 'dark' | 'light' | 'system';
@@ -238,24 +236,9 @@ export function setThemeOnDocument(theme: YaakTheme) {
document.documentElement.setAttribute('data-theme', theme.id);
}
export async function getPreferredAppearance(): Promise<Appearance> {
const a = await getCurrent().theme();
return a ?? 'light';
}
export function subscribeToPreferredAppearanceChange(
cb: (appearance: Appearance) => void,
): () => void {
const container = { unsubscribe: () => {} };
getCurrent()
.onThemeChanged((t) => {
console.log('THEME CHANGED', t);
cb(t.payload);
})
.then((l) => {
container.unsubscribe = l;
});
return () => container.unsubscribe();
export function indent(text: string, space = ' '): string {
return text
.split('\n')
.map((line) => space + line)
.join('\n');
}

2
src-web/main.css
View File

@@ -38,7 +38,7 @@
.hide-scrollbars {
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar {
display: none !important;
display: NONE !important;
}
}

15
tailwind.config.cjs
View File

@@ -1,10 +1,10 @@
const plugin = require('tailwindcss/plugin');
const height = {
'2xs': '1.5rem',
xs: '1.75rem',
sm: '2.0rem',
md: '2.5rem',
'2xs': '1.6rem',
xs: '1.8rem',
sm: '2.2rem',
md: '2.7rem',
};
/** @type {import("tailwindcss").Config} */
@@ -27,11 +27,14 @@ module.exports = {
sm: 'calc(2.0rem - 2px)',
md: 'calc(2.5rem - 2px)',
},
transitionProperty: {
grid: 'grid',
},
},
fontFamily: {
mono: ['JetBrains Mono', 'Menlo', 'monospace'],
sans: [
'Inter',
'Inter UI',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
@@ -58,6 +61,8 @@ module.exports = {
'3xl': '2rem',
'4xl': '2.5rem',
'5xl': '3rem',
'editor': 'var(--editor-font-size)',
'shrink': '0.8em',
},
boxShadow: {
DEFAULT: '0 1px 3px 0 var(--shadow);',