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

Better insight into settings updates

Browse Source
This commit is contained in:
Gregory Schier
2024-12-16 16:27:13 -08:00
parent 5ff5d6fb1d
commit cb6e3d4ac8
18 changed files with 145 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src-web/components/LicenseBadge.tsx
View File

@@ -10,9 +10,9 @@ const details: Record<
{ label: string; color: ButtonProps['color'] } | null
> = {
commercial_use: null,
invalid_license: { label: 'Invalid License', color: 'danger' },
personal_use: { label: 'Personal Use', color: 'success' },
trialing: { label: 'Personal Use', color: 'success' },
invalid_license: { label: 'License Error', color: 'danger' },
personal_use: { label: 'Personal Use', color: 'primary' },
trialing: { label: 'Personal Use', color: 'primary' },
};
export function LicenseBadge() {
@@ -35,6 +35,7 @@ export function LicenseBadge() {
className="!rounded-full mx-1"
onClick={() => openSettings.mutate()}
color={detail.color}
event={{ id: 'license-badge', status: check.data.type }}
>
{detail.label}
</Button>

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

@@ -4,7 +4,6 @@ import { useResolvedAppearance } from '../../hooks/useResolvedAppearance';
import { useResolvedTheme } from '../../hooks/useResolvedTheme';
import { useSettings } from '../../hooks/useSettings';
import { useUpdateSettings } from '../../hooks/useUpdateSettings';
import { trackEvent } from '../../lib/analytics';
import { clamp } from '../../lib/clamp';
import { getThemes } from '../../lib/theme/themes';
import { isThemeDark } from '../../lib/theme/window';
@@ -89,6 +88,7 @@ export function SettingsAppearance() {
value={`${settings.interfaceFontSize}`}
options={fontSizes}
onChange={(v) => updateSettings.mutate({ interfaceFontSize: parseInt(v) })}
event="font-size.interface"
/>
<Select
size="sm"
@@ -98,11 +98,13 @@ export function SettingsAppearance() {
value={`${settings.editorFontSize}`}
options={fontSizes}
onChange={(v) => updateSettings.mutate({ editorFontSize: clamp(parseInt(v) || 14, 8, 30) })}
event="font-size.editor"
/>
<Checkbox
checked={settings.editorSoftWrap}
title="Wrap Editor Lines"
onChange={(editorSoftWrap) => updateSettings.mutate({ editorSoftWrap })}
event="wrap-lines"
/>
<Separator className="my-4" />
@@ -113,10 +115,8 @@ export function SettingsAppearance() {
labelPosition="top"
size="sm"
value={settings.appearance}
onChange={(appearance) => {
trackEvent('appearance', 'update', { appearance });
updateSettings.mutateAsync({ appearance });
}}
onChange={(appearance) => updateSettings.mutate({ appearance })}
event="appearance"
options={[
{ label: 'Automatic', value: 'system' },
{ label: 'Light', value: 'light' },
@@ -134,10 +134,8 @@ export function SettingsAppearance() {
className="flex-1"
value={activeTheme.light.id}
options={lightThemes}
onChange={(themeLight) => {
trackEvent('theme', 'update', { theme: themeLight, appearance: 'light' });
updateSettings.mutateAsync({ ...settings, themeLight });
}}
event="theme.light"
onChange={(themeLight) => updateSettings.mutate({ ...settings, themeLight })}
/>
)}
{(settings.appearance === 'system' || settings.appearance === 'dark') && (
@@ -150,10 +148,8 @@ export function SettingsAppearance() {
size="sm"
value={activeTheme.dark.id}
options={darkThemes}
onChange={(themeDark) => {
trackEvent('theme', 'update', { theme: themeDark, appearance: 'dark' });
updateSettings.mutateAsync({ ...settings, themeDark });
}}
event="theme.dark"
onChange={(themeDark) => updateSettings.mutate({ ...settings, themeDark })}
/>
)}
</HStack>

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

@@ -37,6 +37,7 @@ export function SettingsGeneral() {
size="sm"
value={settings.updateChannel}
onChange={(updateChannel) => updateSettings.mutate({ updateChannel })}
event="update-channel"
options={[
{ label: 'Stable (less frequent)', value: 'stable' },
{ label: 'Beta (more frequent)', value: 'beta' },
@@ -57,6 +58,7 @@ export function SettingsGeneral() {
labelPosition="left"
labelClassName="w-[12rem]"
size="sm"
event="workspace-open"
value={
settings.openWorkspaceNewWindow === true
? 'new'
@@ -80,6 +82,7 @@ export function SettingsGeneral() {
className="mt-3"
checked={settings.telemetry}
title="Send Usage Statistics"
event="usage-statistics"
onChange={(telemetry) => updateSettings.mutate({ telemetry })}
/>
@@ -107,6 +110,7 @@ export function SettingsGeneral() {
<Checkbox
checked={workspace.settingValidateCertificates}
title="Validate TLS Certificates"
event="validate-certs"
onChange={(settingValidateCertificates) =>
updateWorkspace.mutate({ settingValidateCertificates })
}
@@ -115,6 +119,7 @@ export function SettingsGeneral() {
<Checkbox
checked={workspace.settingFollowRedirects}
title="Follow Redirects"
event="follow-redirects"
onChange={(settingFollowRedirects) => updateWorkspace.mutate({ settingFollowRedirects })}
/>
</VStack>

61
src-web/components/Settings/SettingsLicense.tsx
View File

@@ -21,29 +21,27 @@ export function SettingsLicense() {
return (
<div className="flex flex-col gap-6">
{check.data?.type === 'commercial_use' && (
{check.data?.type === 'commercial_use' ? (
<Banner color="success">
<strong>License active!</strong> Enjoy using Yaak for commercial use.
</Banner>
)}
{check.data?.type === 'trialing' && (
<Banner color="success">
<strong>Your trial ends in {formatDistanceToNow(check.data.end)}</strong>. If you&apos;re
using Yaak for commercial use, please purchase a commercial use license.
</Banner>
)}
{check.data?.type === 'personal_use' && (
) : (
<Banner color="primary" className="flex flex-col gap-2">
<h2 className="text-lg font-semibold">Commercial License</h2>
{check.data?.type === 'trialing' && (
<p>
<strong>Your trial ends in {formatDistanceToNow(check.data.end)}.</strong>
</p>
)}
<p>
A commercial license is required if you use Yaak within a for-profit organization of two
or more people.
</p>
<p>
<Link href="https://yaak.app/pricing" className="text-sm">
Learn More
</Link>
A commercial license is required if using Yaak within a for-profit organization of two
or more people. This helps support the ongoing development of Yaak and ensures continued
growth and improvement.
</p>
<p>If you&#39;re using Yaak for personal use, no action is needed.</p>
<p>~ Gregory</p>
<Link href="https://yaak.app/pricing" className="text-sm text-text-subtle">
Learn More
</Link>
</Banner>
)}
@@ -52,7 +50,13 @@ export function SettingsLicense() {
{check.data?.type === 'commercial_use' ? (
<HStack space={2}>
<Button variant="border" color="secondary" size="sm" onClick={toggleActivateFormVisible}>
<Button
variant="border"
color="secondary"
size="sm"
onClick={toggleActivateFormVisible}
event="license.another"
>
Activate Another License
</Button>
<Button
@@ -60,20 +64,27 @@ export function SettingsLicense() {
size="sm"
onClick={() => open('https://yaak.app/dashboard')}
rightSlot={<Icon icon="external_link" />}
event="license.support"
>
Direct Support
</Button>
</HStack>
) : (
<HStack space={2}>
<Button color="primary" size="sm" onClick={toggleActivateFormVisible}>
Activate License
<Button
color="primary"
size="sm"
onClick={toggleActivateFormVisible}
event="license.activate"
>
Activate
</Button>
<Button
color="secondary"
size="sm"
onClick={() => open('https://yaak.app/pricing')}
onClick={() => open('https://yaak.app/pricing?ref=app.yaak.desktop')}
rightSlot={<Icon icon="external_link" />}
event="license.purchase"
>
Purchase
</Button>
@@ -98,7 +109,13 @@ export function SettingsLicense() {
onChange={setKey}
placeholder="YK1-XXXXX-XXXXX-XXXXX-XXXXX"
/>
<Button type="submit" color="primary" size="sm" isLoading={activate.isPending}>
<Button
type="submit"
color="primary"
size="sm"
isLoading={activate.isPending}
event="license.submit"
>
Submit
</Button>
</VStack>

5
src-web/components/Settings/SettingsPlugins.tsx
View File

@@ -61,7 +61,7 @@ export function SettingsPlugins() {
/>
<HStack>
{directory && (
<Button size="xs" type="submit" color="primary" className="ml-auto">
<Button size="xs" type="submit" color="primary" className="ml-auto" event="plugin.add">
Add Plugin
</Button>
)}
@@ -70,12 +70,14 @@ export function SettingsPlugins() {
icon="refresh"
title="Reload plugins"
spin={refreshPlugins.isPending}
event="plugin.reload"
onClick={() => refreshPlugins.mutate()}
/>
<IconButton
size="sm"
icon="help"
title="View documentation"
event="plugin.docs"
onClick={() => open('https://feedback.yaak.app/help/articles/6911763-quick-start')}
/>
</HStack>
@@ -100,6 +102,7 @@ function PluginInfo({ plugin }: { plugin: Plugin }) {
icon="trash"
title="Uninstall plugin"
className="text-text-subtlest"
event="plugin.delete"
onClick={() => deletePlugin.mutate()}
/>
</td>

1
src-web/components/Settings/SettingsProxy.tsx
View File

@@ -19,6 +19,7 @@ export function SettingsProxy() {
hideLabel
size="sm"
value={settings.proxy?.type ?? 'automatic'}
event="proxy"
onChange={(v) => {
if (v === 'automatic') {
updateSettings.mutate({ proxy: undefined });

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

@@ -3,6 +3,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import type { HotkeyAction } from '../../hooks/useHotKey';
import { useFormattedHotkey, useHotKey } from '../../hooks/useHotKey';
import { trackEvent } from '../../lib/analytics';
import { Icon } from './Icon';
export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'onChange'> & {
@@ -28,6 +29,7 @@ export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'onC
leftSlot?: ReactNode;
rightSlot?: ReactNode;
hotkeyAction?: HotkeyAction;
event?: string | { id: string; [attr: string]: number | string };
};
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
@@ -48,6 +50,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
hotkeyAction,
title,
onClick,
event,
...props
}: ButtonProps,
ref,
@@ -107,7 +110,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
type={type}
className={classes}
disabled={disabled || isLoading}
onClick={onClick}
onClick={(e) => {
onClick?.(e);
if (event != null) {
trackEvent('button', 'click', typeof event === 'string' ? { id: event } : event);
}
}}
onDoubleClick={(e) => {
// Kind of a hack? This prevents double-clicks from going through buttons. For example, when
// double-clicking the workspace header to toggle window maximization

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

@@ -1,5 +1,6 @@
import classNames from 'classnames';
import type { ReactNode } from 'react';
import { trackEvent } from '../../lib/analytics';
import { Icon } from './Icon';
import { HStack } from './Stacks';
@@ -11,6 +12,7 @@ export interface CheckboxProps {
disabled?: boolean;
inputWrapperClassName?: string;
hideLabel?: boolean;
event?: string;
}
export function Checkbox({
@@ -21,6 +23,7 @@ export function Checkbox({
disabled,
title,
hideLabel,
event,
}: CheckboxProps) {
return (
<HStack
@@ -37,7 +40,12 @@ export function Checkbox({
)}
type="checkbox"
disabled={disabled}
onChange={() => onChange(checked === 'indeterminate' ? true : !checked)}
onChange={() => {
onChange(checked === 'indeterminate' ? true : !checked);
if (event != null) {
trackEvent('button', 'click', { id: event, checked: checked ? 'on' : 'off' });
}
}}
/>
<div className="absolute inset-0 flex items-center justify-center">
<Icon

10
src-web/components/core/Link.tsx
View File

@@ -1,13 +1,15 @@
import classNames from 'classnames';
import type { HTMLAttributes } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { trackEvent } from '../../lib/analytics';
import { Icon } from './Icon';
interface Props extends HTMLAttributes<HTMLAnchorElement> {
href: string;
event?: string;
}
export function Link({ href, children, className, ...other }: Props) {
export function Link({ href, children, className, event, ...other }: Props) {
const isExternal = href.match(/^https?:\/\//);
className = classNames(className, 'relative underline hover:text-violet-600');
@@ -19,6 +21,12 @@ export function Link({ href, children, className, ...other }: Props) {
target="_blank"
rel="noopener noreferrer"
className={classNames(className, 'pr-4 inline-flex items-center')}
onClick={(e) => {
e.preventDefault();
if (event != null) {
trackEvent('link', 'click', { id: event });
}
}}
{...other}
>
<span className="underline">{children}</span>

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

@@ -2,6 +2,7 @@ import classNames from 'classnames';
import type { CSSProperties, ReactNode } from 'react';
import { useState } from 'react';
import { useOsInfo } from '../../hooks/useOsInfo';
import { trackEvent } from '../../lib/analytics';
import type { ButtonProps } from './Button';
import { Button } from './Button';
import type { RadioDropdownItem } from './RadioDropdown';
@@ -20,6 +21,7 @@ export interface SelectProps<T extends string> {
onChange: (value: T) => void;
size?: ButtonProps['size'];
className?: string;
event?: string;
}
export function Select<T extends string>({
@@ -33,6 +35,7 @@ export function Select<T extends string>({
leftSlot,
onChange,
className,
event,
size = 'md',
}: SelectProps<T>) {
const osInfo = useOsInfo();
@@ -40,6 +43,13 @@ export function Select<T extends string>({
const id = `input-${name}`;
const isInvalidSelection = options.find((o) => 'value' in o && o.value === value) == null;
const handleChange = (value: T) => {
onChange?.(value);
if (event != null) {
trackEvent('select', 'click', { id: event, value });
}
};
return (
<div
className={classNames(
@@ -79,7 +89,7 @@ export function Select<T extends string>({
<select
value={value}
style={selectBackgroundStyles}
onChange={(e) => onChange(e.target.value as T)}
onChange={(e) => handleChange(e.target.value as T)}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
className={classNames('pr-7 w-full outline-none bg-transparent')}
@@ -98,7 +108,7 @@ export function Select<T extends string>({
) : (
// Use custom "select" component until Tauri can be configured to have select menus not always appear in
// light mode
<RadioDropdown value={value} onChange={onChange} items={options}>
<RadioDropdown value={value} onChange={handleChange} items={options}>
<Button
className="w-full text-sm font-mono"
justify="start"

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

@@ -1,6 +1,7 @@
import classNames from 'classnames';
import type { ReactNode } from 'react';
import { memo, useEffect, useRef } from 'react';
import { trackEvent } from '../../../lib/analytics';
import { Icon } from '../Icon';
import type { RadioDropdownProps } from '../RadioDropdown';
import { RadioDropdown } from '../RadioDropdown';
@@ -95,7 +96,14 @@ export function Tabs({
onChange={t.options.onChange}
>
<button
onClick={isActive ? undefined : () => onChangeValue(t.value)}
onClick={
isActive
? undefined
: () => {
trackEvent('tab', 'click', { label, tab: t.value });
onChangeValue(t.value);
}
}
className={btnClassName}
>
{option && 'shortLabel' in option
@@ -113,7 +121,14 @@ export function Tabs({
return (
<button
key={t.value}
onClick={() => onChangeValue(t.value)}
onClick={
isActive
? undefined
: () => {
trackEvent('tab', 'click', { label, tab: t.value });
onChangeValue(t.value);
}
}
className={btnClassName}
>
{t.label}