Integrated update experience (#259)

src-web/components/LicenseBadge.tsx

@@ -4,7 +4,6 @@ import { settingsAtom } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import type { ReactNode } from 'react';
 import { openSettings } from '../commands/openSettings';
-import { appInfo } from '../lib/appInfo';
 import { CargoFeature } from './CargoFeature';
 import { BadgeButton } from './core/BadgeButton';
 import type { ButtonProps } from './core/Button';
@@ -31,10 +30,6 @@ function LicenseBadgeCmp() {
   const { check } = useLicense();
   const settings = useAtomValue(settingsAtom);
 
-  if (appInfo.isDev) {
-    return null;
-  }
-
   if (check.error) {
     // Failed to check for license. Probably a network or server error so just don't
     // show anything.

src-web/components/Settings/SettingsGeneral.tsx

@@ -65,6 +65,17 @@ export function SettingsGeneral() {
             { label: 'Manual', value: 'manual' },
           ]}
         />
+        <Checkbox
+          className="pl-2 mt-1 ml-[14rem]"
+          checked={settings.autoDownloadUpdates}
+          disabled={!settings.autoupdate}
+          help="Automatically download Yaak updates (!50MB) in the background, so they will be immediately ready to install."
+          title="Automatically download updates"
+          onChange={(autoDownloadUpdates) =>
+            patchModel(workspace, { autoDownloadUpdates })
+          }
+        />
+        <Separator className="my-4" />
       </CargoFeature>
 
       <Select

src-web/components/Settings/SettingsInterface.tsx

@@ -1,13 +1,14 @@
 import { type } from '@tauri-apps/plugin-os';
 import { useFonts } from '@yaakapp-internal/fonts';
 import { useLicense } from '@yaakapp-internal/license';
-import type { EditorKeymap } from '@yaakapp-internal/models';
+import type { EditorKeymap, Settings } from '@yaakapp-internal/models';
 import { patchModel, settingsAtom } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
 import React from 'react';
 import { activeWorkspaceAtom } from '../../hooks/useActiveWorkspace';
 import { clamp } from '../../lib/clamp';
 import { showConfirm } from '../../lib/confirm';
+import { CargoFeature } from '../CargoFeature';
 import { Checkbox } from '../core/Checkbox';
 import { Icon } from '../core/Icon';
 import { Link } from '../core/Link';
@@ -31,7 +32,6 @@ export function SettingsInterface() {
   const workspace = useAtomValue(activeWorkspaceAtom);
   const settings = useAtomValue(settingsAtom);
   const fonts = useFonts();
-  const license = useLicense();
 
   if (settings == null || workspace == null) {
     return null;
@@ -127,31 +127,9 @@ export function SettingsInterface() {
         title="Colorize Request Methods"
         onChange={(coloredMethods) => patchModel(settings, { coloredMethods })}
       />
-      {license.check.data?.type === 'personal_use' && (
-        <Checkbox
-          checked={!settings.licenseBadge}
-          title="Hide personal use badge"
-          onChange={async (hide) => {
-            if (hide) {
-              const confirmed = await showConfirm({
-                id: 'hide-license-badge',
-                title: 'Hide License Badge',
-                confirmText: 'Hide Badge',
-                description: (
-                  <>
-                    Only proceed if you’re using Yaak for personal projects only. If you’re using it
-                    at work, please <Link href="https://yaak.app/">Purchase a License</Link>.
-                  </>
-                ),
-                requireTyping: 'Personal Use',
-                color: 'notice',
-              });
-              if (!confirmed) return;
-            }
-            await patchModel(settings, { licenseBadge: !hide });
-          }}
-        />
-      )}
+      <CargoFeature feature="license">
+        <LicenseSettings settings={settings} />
+      </CargoFeature>
 
       {type() !== 'macos' && (
         <Checkbox
@@ -164,3 +142,44 @@ export function SettingsInterface() {
     </VStack>
   );
 }
+function LicenseSettings({ settings }: { settings: Settings }) {
+  const license = useLicense();
+  if (license.check.data?.type !== 'personal_use') {
+    return null;
+  }
+
+  return (
+    <Checkbox
+      checked={settings.hideLicenseBadge}
+      title="Hide personal use badge"
+      onChange={async (hideLicenseBadge) => {
+        if (hideLicenseBadge) {
+          const confirmed = await showConfirm({
+            id: 'hide-license-badge',
+            title: 'Confirm Personal Use',
+            confirmText: 'Confirm',
+            description: (
+              <VStack space={3}>
+                <p>Hey there 👋🏼</p>
+                <p>
+                  Yaak is free for personal projects and learning.{' '}
+                  <strong>If you’re using Yaak at work, a license is required.</strong>
+                </p>
+                <p>
+                  Licenses help keep Yaak independent and sustainable.{' '}
+                  <Link href="https://yaak.app/pricing?s=badge">Purchase a License →</Link>
+                </p>
+              </VStack>
+            ),
+            requireTyping: 'Personal Use',
+            color: 'info',
+          });
+          if (!confirmed) {
+            return; // Cancel
+          }
+        }
+        await patchModel(settings, { hideLicenseBadge });
+      }}
+    />
+  );
+}

src-web/components/Settings/SettingsLicense.tsx

@@ -62,7 +62,7 @@ function SettingsLicenseCmp() {
             <p>
               <Link
                 noUnderline
-                href="https://yaak.app/pricing"
+                href="https://yaak.app/pricing?s=learn"
                 className="text-sm text-notice opacity-80 hover:opacity-100"
               >
                 Learn More
@@ -90,7 +90,7 @@ function SettingsLicenseCmp() {
           <Button
             color="secondary"
             size="sm"
-            onClick={() => openUrl('https://yaak.app/dashboard')}
+            onClick={() => openUrl('https://yaak.app/dashboard?s=support')}
             rightSlot={<Icon icon="external_link" />}
           >
             Direct Support
@@ -104,7 +104,7 @@ function SettingsLicenseCmp() {
           <Button
             color="secondary"
             size="sm"
-            onClick={() => openUrl('https://yaak.app/pricing?ref=app.yaak.desktop')}
+            onClick={() => openUrl('https://yaak.app/pricing?s=purchase&ref=app.yaak.desktop')}
             rightSlot={<Icon icon="external_link" />}
           >
             Purchase

src-web/components/core/ButtonInfiniteLoading.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+
+export function ButtonInfiniteLoading({
+  onClick,
+  isLoading,
+  loadingChildren,
+  children,
+  ...props
+}: ButtonProps & { loadingChildren?: string }) {
+  const [localIsLoading, setLocalIsLoading] = useState<boolean>(false);
+  return (
+    <Button
+      isLoading={localIsLoading || isLoading}
+      onClick={(e) => {
+        setLocalIsLoading(true);
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {localIsLoading ? (loadingChildren ?? children) : children}
+    </Button>
+  );
+}

src-web/components/core/Checkbox.tsx

@@ -40,7 +40,7 @@ export function Checkbox({
           className={classNames(
             'appearance-none w-4 h-4 flex-shrink-0 border border-border',
             'rounded outline-none ring-0',
-            !disabled && 'hocus:border-border-focus hocus:bg-focus/[5%] ',
+            !disabled && 'hocus:border-border-focus hocus:bg-focus/[5%]',
             disabled && 'border-dotted',
           )}
           type="checkbox"
@@ -58,7 +58,7 @@ export function Checkbox({
         </div>
       </div>
       {!hideLabel && (
-        <div className={classNames(fullWidth && 'w-full', disabled && 'opacity-disabled')}>
+        <div className={classNames('text-sm', fullWidth && 'w-full', disabled && 'opacity-disabled')}>
           {title}
         </div>
       )}

src-web/components/core/Toast.tsx

@@ -16,7 +16,7 @@ export interface ToastProps {
   className?: string;
   timeout: number | null;
   action?: (args: { hide: () => void }) => ReactNode;
-  icon?: ShowToastRequest['icon'];
+  icon?: ShowToastRequest['icon'] | null;
   color?: ShowToastRequest['color'];
 }
 
@@ -42,7 +42,7 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
     [open],
   );
 
-  const toastIcon = icon ?? (color && color in ICONS && ICONS[color]);
+  const toastIcon = icon === null ? null : icon ?? (color && color in ICONS && ICONS[color]);
 
   return (
     <m.div