From ba66883dc2a703af5bb41fa8c1dfdf04a951e9d1 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Thu, 30 May 2024 11:00:50 -0700 Subject: [PATCH] Theme analytics and Moonlight --- src-tauri/src/analytics.rs | 12 ++-- src-web/components/BinaryFileEditor.tsx | 8 +-- src-web/components/Settings/Settings.tsx | 2 +- .../Settings/SettingsAppearance.tsx | 12 +++- src-web/components/core/Select.tsx | 2 +- src-web/lib/analytics.ts | 3 +- src-web/lib/theme/themes.ts | 4 +- src-web/lib/theme/themes/moonlight.ts | 72 +++++++++++++++++++ 8 files changed, 100 insertions(+), 15 deletions(-) create mode 100644 src-web/lib/theme/themes/moonlight.ts diff --git a/src-tauri/src/analytics.rs b/src-tauri/src/analytics.rs index 1d19741b..e944c3bd 100644 --- a/src-tauri/src/analytics.rs +++ b/src-tauri/src/analytics.rs @@ -1,6 +1,6 @@ use std::fmt::Display; -use log::warn; +use log::{debug, warn}; use serde::{Deserialize, Serialize}; use serde_json::json; use sqlx::types::JsonValue; @@ -19,6 +19,7 @@ const NUM_LAUNCHES_KEY: &str = "num_launches"; #[serde(rename_all = "snake_case")] pub enum AnalyticsResource { App, + Appearance, CookieJar, Dialog, Environment, @@ -29,9 +30,10 @@ pub enum AnalyticsResource { HttpRequest, HttpResponse, KeyValue, - Sidebar, - Workspace, Setting, + Sidebar, + Theme, + Workspace, } impl AnalyticsResource { @@ -187,7 +189,7 @@ pub async fn track_event( // Disable analytics actual sending in dev if is_dev() { - // debug!("track: {} {} {:?}", event, attributes_json, params); + debug!("track: {}", event); return; } @@ -247,4 +249,4 @@ async fn get_id(app_handle: &AppHandle) -> String { pub async fn get_num_launches(app: &AppHandle) -> i32 { get_key_value_int(app, NAMESPACE, NUM_LAUNCHES_KEY, 0).await -} \ No newline at end of file +} diff --git a/src-web/components/BinaryFileEditor.tsx b/src-web/components/BinaryFileEditor.tsx index 9153c662..1fa4107a 100644 --- a/src-web/components/BinaryFileEditor.tsx +++ b/src-web/components/BinaryFileEditor.tsx @@ -62,17 +62,17 @@ export function BinaryFileEditor({ {mimeType} for current request? + - )} diff --git a/src-web/components/Settings/Settings.tsx b/src-web/components/Settings/Settings.tsx index 794672ba..845ab894 100644 --- a/src-web/components/Settings/Settings.tsx +++ b/src-web/components/Settings/Settings.tsx @@ -24,7 +24,7 @@ export const Settings = () => { <>
Settings
diff --git a/src-web/components/Settings/SettingsAppearance.tsx b/src-web/components/Settings/SettingsAppearance.tsx index 67a376d9..d383820c 100644 --- a/src-web/components/Settings/SettingsAppearance.tsx +++ b/src-web/components/Settings/SettingsAppearance.tsx @@ -5,6 +5,7 @@ import { useResolvedTheme } from '../../hooks/useResolvedTheme'; 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'; @@ -112,6 +113,7 @@ export function SettingsAppearance() { size="sm" value={settings.appearance} onChange={(appearance) => { + trackEvent('appearance', 'update', { appearance }); updateSettings.mutateAsync({ appearance }); }} options={[ @@ -130,7 +132,10 @@ export function SettingsAppearance() { size="sm" value={activeTheme.light.id} options={lightThemes} - onChange={(themeLight) => updateSettings.mutateAsync({ ...settings, themeLight })} + onChange={(themeLight) => { + trackEvent('theme', 'update', { theme: themeLight, appearance: 'light' }); + updateSettings.mutateAsync({ ...settings, themeLight }); + }} /> )} {(settings.appearance === 'system' || settings.appearance === 'dark') && ( @@ -142,7 +147,10 @@ export function SettingsAppearance() { size="sm" value={activeTheme.dark.id} options={darkThemes} - onChange={(themeDark) => updateSettings.mutateAsync({ ...settings, themeDark })} + onChange={(themeDark) => { + trackEvent('theme', 'update', { theme: themeDark, appearance: 'dark' }); + updateSettings.mutateAsync({ ...settings, themeDark }); + }} /> )} diff --git a/src-web/components/core/Select.tsx b/src-web/components/core/Select.tsx index 50432f87..bd8605e0 100644 --- a/src-web/components/core/Select.tsx +++ b/src-web/components/core/Select.tsx @@ -60,7 +60,7 @@ export function Select({ className={classNames( 'w-full rounded-md text-fg text-sm font-mono', 'pl-2', - 'bg-background-highlight-secondary border', + 'border', focused ? 'border-border-focus' : 'border-background-highlight', size === 'xs' && 'h-xs', size === 'sm' && 'h-sm', diff --git a/src-web/lib/analytics.ts b/src-web/lib/analytics.ts index a3863f24..3c2b10ed 100644 --- a/src-web/lib/analytics.ts +++ b/src-web/lib/analytics.ts @@ -1,6 +1,7 @@ import { invoke } from '@tauri-apps/api/core'; export type TrackResource = + | 'appearance' | 'app' | 'cookie_jar' | 'dialog' @@ -14,7 +15,7 @@ export type TrackResource = | 'key_value' | 'setting' | 'sidebar' - | 'toast' + | 'theme' | 'workspace'; export type TrackAction = diff --git a/src-web/lib/theme/themes.ts b/src-web/lib/theme/themes.ts index 55c52f96..b7a8480e 100644 --- a/src-web/lib/theme/themes.ts +++ b/src-web/lib/theme/themes.ts @@ -2,6 +2,7 @@ import { catppuccin } from './themes/catppuccin'; import { github } from './themes/github'; import { hotdogStand } from './themes/hotdog-stand'; import { monokaiPro } from './themes/monokai-pro'; +import { moonlight } from './themes/moonlight'; import { rosePine } from './themes/rose-pine'; import { yaak, yaakDark, yaakLight } from './themes/yaak'; @@ -12,7 +13,8 @@ export const yaakThemes = [ ...yaak, ...catppuccin, ...rosePine, - ...github, ...monokaiPro, + ...github, + ...moonlight, ...hotdogStand, ]; diff --git a/src-web/lib/theme/themes/moonlight.ts b/src-web/lib/theme/themes/moonlight.ts new file mode 100644 index 00000000..eaa44f5e --- /dev/null +++ b/src-web/lib/theme/themes/moonlight.ts @@ -0,0 +1,72 @@ +import { Color } from '../color'; +import type { YaakTheme } from '../window'; + +export const colors = { + lightRed: '#ff98a4', + red: '#ff757f', + darkRed: '#ff5370', + lightOrange: '#f8b576', + orange: '#ff966c', + darkOrange: '#fc7b7b', + yellow: '#ffc777', + green: '#c3e88d', + lightTeal: '#7af8ca', + teal: '#3ad7c7', + lightCyan: '#b4f9f8', + cyan: '#78dbff', + sky: '#60bdff', + blue: '#7cafff', + darkBlue: '#3d6fe0', + darkestBlue: '#3b63cf', + indigo: '#af9fff', + purple: '#c4a2ff', + pink: '#fca7ea', + darkPink: '#fd8aca', + saturatedGray: '#7a88cf', + desaturatedGray: '#979bb6', + gray11: '#d5def8', + gray10: '#c8d3f5', + gray9: '#b4c2f0', + gray8: '#a9b8e8', + gray7: '#828bb8', + gray6: '#444a73', + gray5: '#2f334d', + gray4: '#222436', + gray3: '#1e2030', + gray2: '#191a2a', + gray1: '#131421', +} as const; + +const moonlightDefault: YaakTheme = { + id: 'moonlight', + name: 'Moonlight', + background: new Color(colors.gray4, 'dark'), + backgroundHighlight: new Color(colors.gray5, 'dark'), + backgroundHighlightSecondary: new Color(colors.gray5, 'dark'), + foreground: new Color(colors.gray11, 'dark'), + foregroundSubtle: new Color(colors.gray7, 'dark'), + foregroundSubtler: new Color(colors.gray6, 'dark'), + colors: { + primary: new Color(colors.purple, 'dark'), + secondary: new Color(colors.desaturatedGray, 'dark'), + info: new Color(colors.blue, 'dark'), + success: new Color(colors.teal, 'dark'), + notice: new Color(colors.yellow, 'dark'), + warning: new Color(colors.orange, 'dark'), + danger: new Color(colors.red, 'dark'), + }, + components: { + appHeader: { + background: new Color(colors.gray3, 'dark'), + backgroundHighlight: new Color(colors.gray5, 'dark'), + backgroundHighlightSecondary: new Color(colors.gray4, 'dark'), + }, + sidebar: { + background: new Color(colors.gray3, 'dark'), + backgroundHighlight: new Color(colors.gray5, 'dark'), + backgroundHighlightSecondary: new Color(colors.gray4, 'dark'), + }, + }, +}; + +export const moonlight = [moonlightDefault];