diff --git a/package.json b/package.json index 0a3b0fc6..813093a2 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@tauri-apps/plugin-log": "^2.0.0-rc.1", "@tauri-apps/plugin-os": "^2.0.0-rc.1", "@tauri-apps/plugin-shell": "^2.0.0-rc.1", - "@yaakapp/api": "^0.2.3", + "@yaakapp/api": "^0.2.4", "buffer": "^6.0.3", "classnames": "^2.5.1", "cm6-graphql": "^0.0.9", diff --git a/plugin-runtime-types/package.json b/plugin-runtime-types/package.json index 612ef824..d69f14c4 100644 --- a/plugin-runtime-types/package.json +++ b/plugin-runtime-types/package.json @@ -1,6 +1,6 @@ { "name": "@yaakapp/api", - "version": "0.2.3", + "version": "0.2.5", "main": "lib/index.js", "typings": "./lib/index.d.ts", "files": [ diff --git a/plugin-runtime-types/src/gen/events.ts b/plugin-runtime-types/src/gen/events.ts index 1e12b2df..93095ee6 100644 --- a/plugin-runtime-types/src/gen/events.ts +++ b/plugin-runtime-types/src/gen/events.ts @@ -26,6 +26,8 @@ export type CallTemplateFunctionRequest = { name: string, args: CallTemplateFunc export type CallTemplateFunctionResponse = { value: string | null, }; +export type Color = "custom" | "default" | "primary" | "secondary" | "info" | "success" | "notice" | "warning" | "danger"; + export type CopyTextRequest = { text: string, }; export type ExportHttpRequestRequest = { httpRequest: HttpRequest, }; @@ -52,6 +54,8 @@ export type GetTemplateFunctionsResponse = { functions: Array, export type HttpRequestAction = { key: string, label: string, icon: string | null, }; +export type Icon = "copy" | "info" | "check_circle" | "alert_triangle"; + export type ImportRequest = { content: string, }; export type ImportResources = { workspaces: Array, environments: Array, folders: Array, httpRequests: Array, grpcRequests: Array, }; @@ -74,7 +78,7 @@ export type SendHttpRequestRequest = { httpRequest: HttpRequest, }; export type SendHttpRequestResponse = { httpResponse: HttpResponse, }; -export type ShowToastRequest = { message: string, variant: ToastVariant, }; +export type ShowToastRequest = { message: string, color?: Color | null, icon?: Icon | null, }; export type TemplateFunction = { name: string, args: Array, }; @@ -91,5 +95,3 @@ export type TemplateFunctionSelectArg = { options: Array( let toast_event = plugin_handle.build_event_to_send( &InternalEventPayload::ShowToastRequest(ShowToastRequest { message: format!("Reloaded plugin {}", plugin_handle.dir), - variant: ToastVariant::Info, + icon: Some(Icon::Info), + ..Default::default() }), None, ); @@ -2223,9 +2224,9 @@ fn get_focused_window_no_lock(app_handle: &AppHandle) -> Option>>(); - + if main_windows.len() == 1 { - return main_windows.iter().next().map(|w| w.clone()) + return main_windows.iter().next().map(|w| w.clone()); } main_windows diff --git a/src-tauri/yaak_plugin_runtime/src/events.rs b/src-tauri/yaak_plugin_runtime/src/events.rs index fe7d4c78..37a96dad 100644 --- a/src-tauri/yaak_plugin_runtime/src/events.rs +++ b/src-tauri/yaak_plugin_runtime/src/events.rs @@ -169,27 +169,43 @@ pub struct RenderHttpRequestResponse { #[ts(export, export_to="events.ts")] pub struct ShowToastRequest { pub message: String, - pub variant: ToastVariant, + #[ts(optional = nullable)] + pub color: Option, + #[ts(optional = nullable)] + pub icon: Option, } #[derive(Debug, Clone, Serialize, Deserialize, TS)] #[serde(rename_all = "snake_case")] #[ts(export, export_to="events.ts")] -pub enum ToastVariant { +pub enum Color { Custom, - Copied, - Success, + Default, + Primary, + Secondary, Info, + Success, + Notice, Warning, - Error, + Danger, } -impl Default for ToastVariant { +impl Default for Color { fn default() -> Self { - ToastVariant::Info + Color::Default } } +#[derive(Debug, Clone, Serialize, Deserialize, TS)] +#[serde(rename_all = "snake_case")] +#[ts(export, export_to="events.ts")] +pub enum Icon { + Copy, + Info, + CheckCircle, + AlertTriangle, +} + #[derive(Debug, Clone, Default, Serialize, Deserialize, TS)] #[serde(default, rename_all = "camelCase")] #[ts(export, export_to="events.ts")] diff --git a/src-web/components/CookieDialog.tsx b/src-web/components/CookieDialog.tsx index f634eb0d..7a9a8f93 100644 --- a/src-web/components/CookieDialog.tsx +++ b/src-web/components/CookieDialog.tsx @@ -1,7 +1,7 @@ import type { Cookie } from '@yaakapp/api'; import { useCookieJars } from '../hooks/useCookieJars'; import { useUpdateCookieJar } from '../hooks/useUpdateCookieJar'; -import { cookieDomain } from '../lib/models'; +import { cookieDomain } from '../lib/model_util'; import { Banner } from './core/Banner'; import { IconButton } from './core/IconButton'; import { InlineCode } from './core/InlineCode'; diff --git a/src-web/components/EnvironmentEditDialog.tsx b/src-web/components/EnvironmentEditDialog.tsx index 329ca324..81ba4b2a 100644 --- a/src-web/components/EnvironmentEditDialog.tsx +++ b/src-web/components/EnvironmentEditDialog.tsx @@ -67,7 +67,7 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) { iconSize="md" color="custom" title="Add sub environment" - icon="plusCircle" + icon="plus_circle" iconClassName="text-text-subtlest group-hover:text-text-subtle" className="group" onClick={handleCreateEnvironment} @@ -177,7 +177,7 @@ const EnvironmentEditor = function ({ { return valueVisibility.set((v) => !v); diff --git a/src-web/components/GlobalHooks.tsx b/src-web/components/GlobalHooks.tsx index 292f6e03..4a62916b 100644 --- a/src-web/components/GlobalHooks.tsx +++ b/src-web/components/GlobalHooks.tsx @@ -30,7 +30,7 @@ import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette'; import { workspacesAtom } from '../hooks/useWorkspaces'; import { useZoom } from '../hooks/useZoom'; import { extractKeyValue } from '../lib/keyValueStore'; -import { modelsEq } from '../lib/models'; +import { modelsEq } from '../lib/model_util'; import { catppuccinMacchiato } from '../lib/theme/themes/catppuccin'; import { githubLight } from '../lib/theme/themes/github'; import { hotdogStandDefault } from '../lib/theme/themes/hotdog-stand'; @@ -79,16 +79,16 @@ export function GlobalHooks() { model.model === 'http_response' ? httpResponsesQueryKey(model) : model.model === 'folder' - ? foldersQueryKey(model) - : model.model === 'grpc_connection' - ? grpcConnectionsQueryKey(model) - : model.model === 'grpc_event' - ? grpcEventsQueryKey(model) - : model.model === 'key_value' - ? keyValueQueryKey(model) - : model.model === 'cookie_jar' - ? cookieJarsQueryKey(model) - : null; + ? foldersQueryKey(model) + : model.model === 'grpc_connection' + ? grpcConnectionsQueryKey(model) + : model.model === 'grpc_event' + ? grpcEventsQueryKey(model) + : model.model === 'key_value' + ? keyValueQueryKey(model) + : model.model === 'cookie_jar' + ? cookieJarsQueryKey(model) + : null; if (model.model === 'http_request' && windowLabel !== getCurrentWebviewWindow().label) { wasUpdatedExternally(model.id); diff --git a/src-web/components/GrpcConnectionMessagesPane.tsx b/src-web/components/GrpcConnectionMessagesPane.tsx index 6b9e5dec..d22f1937 100644 --- a/src-web/components/GrpcConnectionMessagesPane.tsx +++ b/src-web/components/GrpcConnectionMessagesPane.tsx @@ -6,7 +6,7 @@ import { useGrpcEvents } from '../hooks/useGrpcEvents'; import { usePinnedGrpcConnection } from '../hooks/usePinnedGrpcConnection'; import { useStateWithDeps } from '../hooks/useStateWithDeps'; import type { GrpcEvent, GrpcRequest } from '@yaakapp/api'; -import { isResponseLoading } from '../lib/models'; +import { isResponseLoading } from '../lib/model_util'; import { Banner } from './core/Banner'; import { Button } from './core/Button'; import { Icon } from './core/Icon'; @@ -197,34 +197,34 @@ function EventRow({ eventType === 'server_message' ? 'text-info' : eventType === 'client_message' - ? 'text-primary' - : eventType === 'error' || (status != null && status > 0) - ? 'text-danger' - : eventType === 'connection_end' - ? 'text-success' - : 'text-text-subtle' + ? 'text-primary' + : eventType === 'error' || (status != null && status > 0) + ? 'text-danger' + : eventType === 'connection_end' + ? 'text-success' + : 'text-text-subtle' } title={ eventType === 'server_message' ? 'Server message' : eventType === 'client_message' - ? 'Client message' - : eventType === 'error' || (status != null && status > 0) - ? 'Error' - : eventType === 'connection_end' - ? 'Connection response' - : undefined + ? 'Client message' + : eventType === 'error' || (status != null && status > 0) + ? 'Error' + : eventType === 'connection_end' + ? 'Connection response' + : undefined } icon={ eventType === 'server_message' - ? 'arrowBigDownDash' + ? 'arrow_big_down_dash' : eventType === 'client_message' - ? 'arrowBigUpDash' - : eventType === 'error' || (status != null && status > 0) - ? 'alert' - : eventType === 'connection_end' - ? 'check' - : 'info' + ? 'arrow_big_up_dash' + : eventType === 'error' || (status != null && status > 0) + ? 'alert_triangle' + : eventType === 'connection_end' + ? 'check' + : 'info' } />
diff --git a/src-web/components/GrpcConnectionSetupPane.tsx b/src-web/components/GrpcConnectionSetupPane.tsx index 3de1e114..25b13903 100644 --- a/src-web/components/GrpcConnectionSetupPane.tsx +++ b/src-web/components/GrpcConnectionSetupPane.tsx @@ -7,7 +7,7 @@ import type { ReflectResponseService } from '../hooks/useGrpc'; import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey'; import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest'; import type { GrpcMetadataEntry, GrpcRequest } from '@yaakapp/api'; -import { AUTH_TYPE_BASIC, AUTH_TYPE_BEARER, AUTH_TYPE_NONE } from '../lib/models'; +import { AUTH_TYPE_BASIC, AUTH_TYPE_BEARER, AUTH_TYPE_NONE } from '../lib/model_util'; import { BasicAuth } from './BasicAuth'; import { BearerAuth } from './BearerAuth'; import { Button } from './core/Button'; @@ -218,7 +218,7 @@ export function GrpcConnectionSetupPane({ ); }); diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx index 1dbeedba..1bf45ea1 100644 --- a/src-web/components/core/Dropdown.tsx +++ b/src-web/components/core/Dropdown.tsx @@ -191,7 +191,7 @@ export const ContextMenu = forwardRef(function Co return ( , MenuPro }>(() => { if (triggerShape == null) return { containerStyles: {}, triangleStyles: null }; + const menuMarginY = 5; const docRect = document.documentElement.getBoundingClientRect(); const width = triggerShape.right - triggerShape.left; const heightAbove = triggerShape.top; const heightBelow = docRect.height - triggerShape.bottom; - const hSpaceRemaining = docRect.width - triggerShape.left; - const top = triggerShape.bottom + 5; - const onRight = hSpaceRemaining < 200; - const upsideDown = heightAbove > heightBelow && heightBelow < 200; + const horizontalSpaceRemaining = docRect.width - triggerShape.left; + const top = triggerShape.bottom; + const onRight = horizontalSpaceRemaining < 200; + const upsideDown = heightBelow < heightAbove && heightBelow < items.length * 25 + 20 + 200; const triggerWidth = triggerShape.right - triggerShape.left; const containerStyles = { - top: !upsideDown ? top : undefined, - bottom: upsideDown ? docRect.height - top : undefined, + top: !upsideDown ? top + menuMarginY : undefined, + bottom: upsideDown + ? docRect.height - top - (triggerShape.top - triggerShape.bottom) + menuMarginY + : undefined, right: onRight ? docRect.width - triggerShape.right : undefined, left: !onRight ? triggerShape.left : undefined, minWidth: fullWidth ? triggerWidth : undefined, maxWidth: '40rem', }; - const size = { top: '-0.2rem', width: '0.4rem', height: '0.4rem' }; - const triangleStyles = onRight - ? { right: width / 2, marginRight: '-0.2rem', ...size } - : { left: width / 2, marginLeft: '-0.2rem', ...size }; + const triangleStyles: CSSProperties = { + width: '0.4rem', + height: '0.4rem', + ...(onRight + ? { right: width / 2, marginRight: '-0.2rem' } + : { left: width / 2, marginLeft: '-0.2rem' }), + ...(upsideDown + ? { bottom: '-0.2rem', rotate: '225deg' } + : { top: '-0.2rem', rotate: '45deg' }), + }; return { containerStyles, triangleStyles }; - }, [fullWidth, triggerShape]); + }, [fullWidth, items.length, triggerShape]); const filteredItems = useMemo( () => items.filter((i) => getNodeText(i.label).toLowerCase().includes(filter.toLowerCase())), @@ -415,7 +424,7 @@ const Menu = forwardRef, MenuPro ), )} {isOpen && ( - +
, MenuPro )} {containerStyles && ( @@ -443,7 +452,7 @@ const Menu = forwardRef, MenuPro className={classNames( className, 'h-auto bg-surface rounded-md shadow-lg py-1.5 border', - 'border-border-subtle overflow-auto mb-1 mx-0.5', + 'border-border-subtle overflow-auto mx-0.5', )} > {filter && ( diff --git a/src-web/components/core/Editor/Editor.tsx b/src-web/components/core/Editor/Editor.tsx index f8cf7315..42aa9a5f 100644 --- a/src-web/components/core/Editor/Editor.tsx +++ b/src-web/components/core/Editor/Editor.tsx @@ -346,7 +346,7 @@ export const Editor = forwardRef(function E key="format" size="sm" title="Reformat contents" - icon="magicWand" + icon="magic_wand" variant="border" className={classNames(actionClassName)} onClick={() => { diff --git a/src-web/components/core/Icon.tsx b/src-web/components/core/Icon.tsx index 2e7b63ce..a37f15f6 100644 --- a/src-web/components/core/Icon.tsx +++ b/src-web/components/core/Icon.tsx @@ -4,62 +4,69 @@ import type { HTMLAttributes } from 'react'; import { memo } from 'react'; const icons = { - alert: lucide.AlertTriangleIcon, + alert_triangle: lucide.AlertTriangleIcon, archive: lucide.ArchiveIcon, - arrowBigDownDash: lucide.ArrowBigDownDashIcon, - arrowRightCircle: lucide.ArrowRightCircleIcon, - arrowBigLeftDash: lucide.ArrowBigLeftDashIcon, - arrowBigRight: lucide.ArrowBigRightIcon, - arrowBigRightDash: lucide.ArrowBigRightDashIcon, - arrowBigUpDash: lucide.ArrowBigUpDashIcon, - arrowDown: lucide.ArrowDownIcon, - arrowDownToDot: lucide.ArrowDownToDotIcon, - arrowUp: lucide.ArrowUpIcon, - arrowUpDown: lucide.ArrowUpDownIcon, - arrowUpFromDot: lucide.ArrowUpFromDotIcon, + arrow_big_down_dash: lucide.ArrowBigDownDashIcon, + arrow_right_circle: lucide.ArrowRightCircleIcon, + arrow_big_left_dash: lucide.ArrowBigLeftDashIcon, + arrow_big_right: lucide.ArrowBigRightIcon, + arrow_big_right_dash: lucide.ArrowBigRightDashIcon, + arrow_big_up_dash: lucide.ArrowBigUpDashIcon, + arrow_down: lucide.ArrowDownIcon, + arrow_down_to_dot: lucide.ArrowDownToDotIcon, + arrow_up: lucide.ArrowUpIcon, + arrow_up_down: lucide.ArrowUpDownIcon, + arrow_up_from_dot: lucide.ArrowUpFromDotIcon, + badge_check: lucide.BadgeCheckIcon, box: lucide.BoxIcon, cake: lucide.CakeIcon, chat: lucide.MessageSquare, check: lucide.CheckIcon, - checkCircle: lucide.CheckCircleIcon, - chevronDown: lucide.ChevronDownIcon, - chevronRight: lucide.ChevronRightIcon, + check_circle: lucide.CheckCircleIcon, + chevron_down: lucide.ChevronDownIcon, + chevron_right: lucide.ChevronRightIcon, + circle_alert: lucide.CircleAlertIcon, + cloud: lucide.CloudIcon, code: lucide.CodeIcon, cookie: lucide.CookieIcon, copy: lucide.CopyIcon, - copyCheck: lucide.CopyCheck, + copy_check: lucide.CopyCheck, download: lucide.DownloadIcon, - externalLink: lucide.ExternalLinkIcon, + external_link: lucide.ExternalLinkIcon, eye: lucide.EyeIcon, - eyeClosed: lucide.EyeOffIcon, - fileCode: lucide.FileCodeIcon, + eye_closed: lucide.EyeOffIcon, + file_code: lucide.FileCodeIcon, filter: lucide.FilterIcon, flask: lucide.FlaskConicalIcon, - folderInput: lucide.FolderInputIcon, - folderOutput: lucide.FolderOutputIcon, - gripVertical: lucide.GripVerticalIcon, + folder_input: lucide.FolderInputIcon, + folder_output: lucide.FolderOutputIcon, + git_branch: lucide.GitBranchIcon, + git_commit: lucide.GitCommitIcon, + git_commit_vertical: lucide.GitCommitVerticalIcon, + git_pull_request: lucide.GitPullRequestIcon, + git_fork: lucide.GitForkIcon, + grip_vertical: lucide.GripVerticalIcon, hand: lucide.HandIcon, help: lucide.CircleHelpIcon, house: lucide.HomeIcon, info: lucide.InfoIcon, keyboard: lucide.KeyboardIcon, - leftPanelHidden: lucide.PanelLeftOpenIcon, - leftPanelVisible: lucide.PanelLeftCloseIcon, - magicWand: lucide.Wand2Icon, + left_panel_hidden: lucide.PanelLeftOpenIcon, + left_panel_visible: lucide.PanelLeftCloseIcon, + magic_wand: lucide.Wand2Icon, minus: lucide.MinusIcon, moon: lucide.MoonIcon, - moreVertical: lucide.MoreVerticalIcon, + more_vertical: lucide.MoreVerticalIcon, paste: lucide.ClipboardPasteIcon, pencil: lucide.PencilIcon, pin: lucide.PinIcon, plug: lucide.Plug, plus: lucide.PlusIcon, - plusCircle: lucide.PlusCircleIcon, + plus_circle: lucide.PlusCircleIcon, refresh: lucide.RefreshCwIcon, save: lucide.SaveIcon, search: lucide.SearchIcon, - sendHorizontal: lucide.SendHorizonalIcon, - settings2: lucide.Settings2Icon, + send_horizontal: lucide.SendHorizonalIcon, settings: lucide.SettingsIcon, sparkles: lucide.SparklesIcon, sun: lucide.SunIcon, diff --git a/src-web/components/core/Input.tsx b/src-web/components/core/Input.tsx index 06cdc923..4a44ef9b 100644 --- a/src-web/components/core/Input.tsx +++ b/src-web/components/core/Input.tsx @@ -193,7 +193,7 @@ export const Input = forwardRef(function Inp className="mr-0.5 group/obscure !h-auto my-0.5" iconClassName="text-text-subtle group-hover/obscure:text" iconSize="sm" - icon={obscured ? 'eye' : 'eyeClosed'} + icon={obscured ? 'eye' : 'eye_closed'} onClick={() => setObscured((o) => !o)} /> )} diff --git a/src-web/components/core/JsonAttributeTree.tsx b/src-web/components/core/JsonAttributeTree.tsx index fea404a5..a0c715a7 100644 --- a/src-web/components/core/JsonAttributeTree.tsx +++ b/src-web/components/core/JsonAttributeTree.tsx @@ -101,7 +101,7 @@ export const JsonAttributeTree = ({
) : ( @@ -545,7 +545,7 @@ function PairEditorRow({ @@ -563,7 +563,7 @@ function PairEditorRow({ diff --git a/src-web/components/core/PairOrBulkEditor.tsx b/src-web/components/core/PairOrBulkEditor.tsx index 57c15b83..065cecbf 100644 --- a/src-web/components/core/PairOrBulkEditor.tsx +++ b/src-web/components/core/PairOrBulkEditor.tsx @@ -33,7 +33,7 @@ export const PairOrBulkEditor = forwardRef(function PairOr 'bg-surface text-text-subtle hover:text group-hover/wrapper:opacity-100', )} onClick={() => setUseBulk((b) => !b)} - icon={useBulk ? 'table' : 'fileCode'} + icon={useBulk ? 'table' : 'file_code'} />
diff --git a/src-web/components/core/PlainInput.tsx b/src-web/components/core/PlainInput.tsx index d60dd908..c2b37b92 100644 --- a/src-web/components/core/PlainInput.tsx +++ b/src-web/components/core/PlainInput.tsx @@ -143,7 +143,7 @@ export const PlainInput = forwardRef(function className="mr-0.5 group/obscure !h-auto my-0.5" iconClassName="text-text-subtle group-hover/obscure:text" iconSize="sm" - icon={obscured ? 'eye' : 'eyeClosed'} + icon={obscured ? 'eye' : 'eye_closed'} onClick={() => setObscured((o) => !o)} /> )} diff --git a/src-web/components/core/Tabs/Tabs.tsx b/src-web/components/core/Tabs/Tabs.tsx index b26b8051..6e73086d 100644 --- a/src-web/components/core/Tabs/Tabs.tsx +++ b/src-web/components/core/Tabs/Tabs.tsx @@ -100,10 +100,10 @@ export function Tabs({ > {option && 'shortLabel' in option ? option.shortLabel - : option?.label ?? 'Unknown'} + : (option?.label ?? 'Unknown')} diff --git a/src-web/components/core/Toast.tsx b/src-web/components/core/Toast.tsx index 888f74f7..f14557f9 100644 --- a/src-web/components/core/Toast.tsx +++ b/src-web/components/core/Toast.tsx @@ -1,3 +1,4 @@ +import type { ShowToastRequest } from '@yaakapp/api'; import classNames from 'classnames'; import { motion } from 'framer-motion'; import type { ReactNode } from 'react'; @@ -15,27 +16,23 @@ export interface ToastProps { className?: string; timeout: number | null; action?: ReactNode; - variant?: 'custom' | 'copied' | 'success' | 'info' | 'warning' | 'error'; + icon?: ShowToastRequest['icon']; + color?: ShowToastRequest['color']; } -const ICONS: Record, IconProps['icon'] | null> = { +const ICONS: Record, IconProps['icon'] | null> = { custom: null, - copied: 'copyCheck', - warning: 'alert', - error: 'alert', + default: 'info', + danger: 'alert_triangle', info: 'info', - success: 'checkCircle', + notice: 'alert_triangle', + primary: 'info', + secondary: 'info', + success: 'check_circle', + warning: 'alert_triangle', }; -export function Toast({ - children, - className, - open, - onClose, - timeout, - action, - variant = 'info', -}: ToastProps) { +export function Toast({ children, open, onClose, timeout, action, icon, color }: ToastProps) { useKey( 'Escape', () => { @@ -45,8 +42,9 @@ export function Toast({ {}, [open], ); + color = color ?? 'default'; - const icon = variant in ICONS && ICONS[variant]; + const toastIcon = icon ?? (color in ICONS && ICONS[color]); return ( -
- {icon && ( - +
-
{children}
- {action} - -
- - - - {timeout != null && ( -
- + > +
+ {toastIcon && } + +
{children}
+ {action} +
- )} + + + + {timeout != null && ( +
+ +
+ )} +
); } diff --git a/src-web/components/responseViewers/BinaryViewer.tsx b/src-web/components/responseViewers/BinaryViewer.tsx index 6079c960..4a561b47 100644 --- a/src-web/components/responseViewers/BinaryViewer.tsx +++ b/src-web/components/responseViewers/BinaryViewer.tsx @@ -1,6 +1,6 @@ import { useSaveResponse } from '../../hooks/useSaveResponse'; import type { HttpResponse } from '@yaakapp/api'; -import { getContentTypeHeader } from '../../lib/models'; +import { getContentTypeHeader } from '../../lib/model_util'; import { Banner } from '../core/Banner'; import { Button } from '../core/Button'; import { InlineCode } from '../core/InlineCode'; diff --git a/src-web/hooks/useCopy.ts b/src-web/hooks/useCopy.ts index 71ee8998..bdde5f71 100644 --- a/src-web/hooks/useCopy.ts +++ b/src-web/hooks/useCopy.ts @@ -15,7 +15,8 @@ export function useCopy({ disableToast }: { disableToast?: boolean } = {}) { if (text != '' && !disableToast) { toast.show({ id: 'copied', - variant: 'copied', + color: 'secondary', + icon: 'copy', message: 'Copied to clipboard', }); } diff --git a/src-web/hooks/useCreateDropdownItems.tsx b/src-web/hooks/useCreateDropdownItems.tsx index 498e1d80..68f985bb 100644 --- a/src-web/hooks/useCreateDropdownItems.tsx +++ b/src-web/hooks/useCreateDropdownItems.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import type { DropdownItem } from '../components/core/Dropdown'; import { Icon } from '../components/core/Icon'; -import { BODY_TYPE_GRAPHQL } from '../lib/models'; +import { BODY_TYPE_GRAPHQL } from '../lib/model_util'; import { useCreateFolder } from './useCreateFolder'; import { useCreateGrpcRequest } from './useCreateGrpcRequest'; import { useCreateHttpRequest } from './useCreateHttpRequest'; diff --git a/src-web/hooks/useExportData.tsx b/src-web/hooks/useExportData.tsx index cb552015..b1d4f294 100644 --- a/src-web/hooks/useExportData.tsx +++ b/src-web/hooks/useExportData.tsx @@ -33,7 +33,7 @@ export function useExportData() { activeWorkspace={activeWorkspace} onSuccess={() => { toast.show({ - variant: 'success', + color: 'success', message: 'Data export successful', }); }} diff --git a/src-web/hooks/useImportCurl.ts b/src-web/hooks/useImportCurl.ts index 17e339f0..48e46215 100644 --- a/src-web/hooks/useImportCurl.ts +++ b/src-web/hooks/useImportCurl.ts @@ -39,7 +39,7 @@ export function useImportCurl() { } toast.show({ - variant: 'success', + color: 'success', message: `${verb} request from Curl`, }); }, diff --git a/src-web/hooks/useImportQuerystring.ts b/src-web/hooks/useImportQuerystring.ts index 86ebd7b6..d95a20d4 100644 --- a/src-web/hooks/useImportQuerystring.ts +++ b/src-web/hooks/useImportQuerystring.ts @@ -51,7 +51,7 @@ export function useImportQuerystring(requestId: string) { if (additionalUrlParameters.length > 0) { toast.show({ id: 'querystring-imported', - variant: 'info', + color: 'info', message: `Imported ${additionalUrlParameters.length} ${pluralize('param', additionalUrlParameters.length)} from URL`, }); } diff --git a/src-web/hooks/useIsResponseLoading.ts b/src-web/hooks/useIsResponseLoading.ts index 4fd86abf..884a539e 100644 --- a/src-web/hooks/useIsResponseLoading.ts +++ b/src-web/hooks/useIsResponseLoading.ts @@ -1,4 +1,4 @@ -import { isResponseLoading } from '../lib/models'; +import { isResponseLoading } from '../lib/model_util'; import { useLatestHttpResponse } from './useLatestHttpResponse'; export function useIsResponseLoading(requestId: string | null): boolean { diff --git a/src-web/hooks/useNotificationToast.tsx b/src-web/hooks/useNotificationToast.tsx index 4ebc735e..9598c038 100644 --- a/src-web/hooks/useNotificationToast.tsx +++ b/src-web/hooks/useNotificationToast.tsx @@ -27,7 +27,7 @@ export function useNotificationToast() { id: payload.id, timeout: null, message: payload.message, - variant: 'custom', + color: 'custom', onClose: () => markRead(payload.id), action: actionLabel && actionUrl ? ( diff --git a/src-web/hooks/useSaveResponse.tsx b/src-web/hooks/useSaveResponse.tsx index 10a5d6dc..6122cdb0 100644 --- a/src-web/hooks/useSaveResponse.tsx +++ b/src-web/hooks/useSaveResponse.tsx @@ -5,7 +5,7 @@ import slugify from 'slugify'; import { InlineCode } from '../components/core/InlineCode'; import { useToast } from '../components/ToastContext'; import type { HttpResponse } from '@yaakapp/api'; -import { getContentTypeHeader } from '../lib/models'; +import { getContentTypeHeader } from '../lib/model_util'; import { getHttpRequest } from '../lib/store'; import { invokeCmd } from '../lib/tauri'; diff --git a/src-web/lib/models.ts b/src-web/lib/model_util.ts similarity index 100% rename from src-web/lib/models.ts rename to src-web/lib/model_util.ts diff --git a/src-web/lib/responseBody.ts b/src-web/lib/responseBody.ts index 52267e7d..234e2f46 100644 --- a/src-web/lib/responseBody.ts +++ b/src-web/lib/responseBody.ts @@ -1,6 +1,6 @@ import { readFile } from '@tauri-apps/plugin-fs'; import type { HttpResponse } from '@yaakapp/api'; -import { getCharsetFromContentType } from './models'; +import { getCharsetFromContentType } from './model_util'; export async function getResponseBodyText(response: HttpResponse): Promise { if (response.bodyPath) { diff --git a/src-web/lib/theme/window.ts b/src-web/lib/theme/window.ts index c1926d22..e22e076b 100644 --- a/src-web/lib/theme/window.ts +++ b/src-web/lib/theme/window.ts @@ -98,14 +98,23 @@ function templateTagColorVariables(color: YaakColor): Partial { }; } +function toastColorVariables(color: YaakColor): Partial { + return { + text: color.lift(0.8), + textSubtle: color, + surface: color.translucify(0.9), + surfaceHighlight: color.translucify(0.8), + border: color.lift(0.3).translucify(0.6), + }; +} + function bannerColorVariables(color: YaakColor): Partial { return { text: color.lift(0.8), textSubtle: color.translucify(0.3), textSubtlest: color, - surface: color, + surface: color.translucify(0.9), border: color.lift(0.3).translucify(0.4), - surfaceHighlight: color.translucify(0.9), }; } @@ -201,6 +210,15 @@ function bannerCSS(color: YaakColorKey, colors?: Partial): string | ); } +function toastCSS(color: YaakColorKey, colors?: Partial): string | null { + const yaakColor = colors?.[color]; + if (yaakColor == null) { + return null; + } + + return [variablesToCSS(`.x-theme-toast--${color}`, toastColorVariables(yaakColor))].join('\n\n'); +} + function templateTagCSS(color: YaakColorKey, colors?: Partial): string | null { const yaakColor = colors?.[color]; if (yaakColor == null) { @@ -253,6 +271,9 @@ export function getThemeCSS(theme: YaakTheme): string { ...Object.keys(colors ?? {}).map((key) => bannerCSS(key as YaakColorKey, theme.components?.banner ?? colors), ), + ...Object.keys(colors ?? {}).map((key) => + toastCSS(key as YaakColorKey, theme.components?.banner ?? colors), + ), ...Object.keys(colors ?? {}).map((key) => templateTagCSS(key as YaakColorKey, theme.components?.templateTag ?? colors), ),