Add commercial use upsell banners

apps/yaak-client/components/Settings/SettingsCertificates.tsx

@@ -4,6 +4,7 @@ import { Heading, HStack, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
 import { useRef } from "react";
 import { showConfirmDelete } from "../../lib/confirm";
+import { CommercialUseBanner } from "../CommercialUseBanner";
 import { Button } from "../core/Button";
 import { Checkbox } from "../core/Checkbox";
 import { DetailsBanner } from "../core/DetailsBanner";
@@ -232,6 +233,10 @@ export function SettingsCertificates() {
         </HStack>
       </div>
 
+      <CommercialUseBanner source="client-certificates" title="Using certificates for work?">
+        A Yaak license is required for commercial use and helps support features like this.
+      </CommercialUseBanner>
+
       {certificates.length > 0 && (
         <VStack space={3}>
           {certificates.map((cert, index) => (

apps/yaak-client/components/Settings/SettingsGeneral.tsx

@@ -14,6 +14,7 @@ import {
 } from "../../lib/requestSettings";
 import { revealInFinderText } from "../../lib/reveal";
 import { CargoFeature } from "../CargoFeature";
+import { CommercialUseBanner } from "../CommercialUseBanner";
 import { IconButton } from "../core/IconButton";
 import {
   ModelSettingRowBoolean,
@@ -38,10 +39,15 @@ export function SettingsGeneral() {
 
   return (
     <VStack space={1.5} className="mb-4">
-      <div className="mb-4">
+      <div>
         <Heading>General</Heading>
         <p className="text-text-subtle">Configure general settings for update behavior and more.</p>
       </div>
+      <div className="mt-3 mb-5">
+        <CommercialUseBanner source="settings-general" title="Using Yaak for work?">
+          A Yaak license is required for commercial use and helps support future development.
+        </CommercialUseBanner>
+      </div>
       <SettingsList className="space-y-8">
         <CargoFeature feature="updater">
           <SettingsSection title="Updates">

apps/yaak-client/components/Settings/SettingsProxy.tsx

@@ -2,6 +2,7 @@ import { patchModel, settingsAtom } from "@yaakapp-internal/models";
 import type { ProxySetting } from "@yaakapp-internal/models";
 import { Heading, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { useAtomValue } from "jotai";
+import { CommercialUseBanner } from "../CommercialUseBanner";
 import {
   SettingRowBoolean,
   SettingRowSelect,
@@ -33,6 +34,9 @@ export function SettingsProxy() {
           traffic, or routing through specific infrastructure.
         </p>
       </div>
+      <CommercialUseBanner source="proxy-settings" title="Using a proxy for work?">
+        A Yaak license is required for commercial use and helps support features like this.
+      </CommercialUseBanner>
       <SettingsList className="space-y-8">
         <SettingsSection title="Proxy">
           <SettingRowSelect