Add ability to deactivate license

src-web/components/LicenseBadge.tsx

@@ -27,13 +27,26 @@ const details: Record<
   commercial_use: null,
   invalid_license: { label: 'License Error', color: 'danger' },
   personal_use: { label: 'Personal Use', color: 'success' },
-  trialing: { label: 'Active Trial', color: 'success' },
+  trialing: { label: 'Personal Use', color: 'success' },
 };
 
 export function LicenseBadge() {
   const { check } = useLicense();
   const [licenseDetails, setLicenseDetails] = useLicenseConfirmation();
 
+  if (check.error) {
+    return (
+      <LicenseBadgeButton
+        color="danger"
+        onClick={() => {
+          openSettings.mutate(SettingsTab.License);
+        }}
+      >
+        License Error
+      </LicenseBadgeButton>
+    );
+  }
+
   // Hasn't loaded yet
   if (licenseDetails == null || check.data == null) {
     return null;
@@ -56,10 +69,7 @@ export function LicenseBadge() {
   }
 
   return (
-    <Button
-      size="2xs"
-      variant="border"
-      className="!rounded-full mx-1"
+    <LicenseBadgeButton
       color={detail.color}
       onClick={async () => {
         if (check.data.type === 'trialing') {
@@ -72,6 +82,10 @@ export function LicenseBadge() {
       }}
     >
       {detail.label}
-    </Button>
+    </LicenseBadgeButton>
   );
 }
+
+function LicenseBadgeButton({ ...props }: ButtonProps) {
+  return <Button size="2xs" variant="border" className="!rounded-full mx-1" {...props} />;
+}

src-web/components/Settings/SettingsLicense.tsx

@@ -14,7 +14,7 @@ import { PlainInput } from '../core/PlainInput';
 import { HStack, VStack } from '../core/Stacks';
 
 export function SettingsLicense() {
-  const { check, activate } = useLicense();
+  const { check, activate, deactivate } = useLicense();
   const [key, setKey] = useState<string>('');
   const [activateFormVisible, toggleActivateFormVisible] = useToggle(false);
   const [licenseDetails, setLicenseDetails] = useLicenseConfirmation();
@@ -37,8 +37,8 @@ export function SettingsLicense() {
             <strong>
               {pluralizeCount('day', differenceInDays(check.data.end, new Date()))} remaining
             </strong>{' '}
-            on your commercial use trial. Once the trial ends, Yaak will be limited to personal use
-            until a license is activated.
+            on your commercial use trial. Once the trial ends you agree to only use Yaak for
+            personal use until a license is activated.
           </p>
         </Banner>
       ) : check.data?.type == 'personal_use' && !licenseDetails?.confirmedPersonalUse ? (
@@ -81,8 +81,10 @@ export function SettingsLicense() {
 
       {check.data?.type === 'commercial_use' ? (
         <HStack space={2}>
-          <Button variant="border" color="secondary" size="sm" onClick={toggleActivateFormVisible}>
-            Activate Another License
+          <Button variant="border" color="secondary" size="sm" onClick={() => {
+            deactivate.mutate();
+          }}>
+            Deactivate License
           </Button>
           <Button
             color="secondary"