Better insight into settings updates

src-web/components/Settings/SettingsAppearance.tsx

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

src-web/components/Settings/SettingsGeneral.tsx

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

src-web/components/Settings/SettingsLicense.tsx

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

src-web/components/Settings/SettingsPlugins.tsx

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

src-web/components/Settings/SettingsProxy.tsx

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