Add donation links and about section to the donations panel

Author: robertpiosik

packages/ui/src/components/editor/panel/Donations/Donations.module.scss

@@ -5,10 +5,56 @@
   gap: 8px;
 }
 
+.about {
+  padding: 3px 12px 0 12px;
+  font-size: 12px;
+  color: var(--cwc-text-color-dimmed);
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    cursor: default;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    & > strong {
+      align-self: flex-start;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &__url {
+      font-size: 11px;
+      color: var(--cwc-text-color-dimmed);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}
+
 .wallets {
   display: flex;
   flex-direction: column;
-  margin: 0 12px;
+  padding: 0 12px;
 
   &__wallet {
     display: flex;
@@ -19,7 +65,7 @@
     &__right {
       display: flex;
       align-items: center;
-      gap: 2px;
+      gap: 4px;
       min-width: 0;
       flex: 1;
       justify-content: flex-end;

packages/ui/src/components/editor/panel/Donations/Donations.tsx

@@ -85,6 +85,7 @@ export type DonationsProps = {
 export const Donations: React.FC<DonationsProps> = (props) => {
   const observer_target = useRef<HTMLDivElement>(null)
   const [is_wallets_collapsed, set_wallets_collapsed] = useState(true)
+  const [is_links_collapsed, set_links_collapsed] = useState(true)
 
   useEffect(() => {
     if (!observer_target.current) return
@@ -104,6 +105,11 @@ export const Donations: React.FC<DonationsProps> = (props) => {
     return () => observer.unobserve(target)
   }, [props.on_fetch_next_page])
 
+  const links = [
+    { label: 'Buy Me A Coffee', url: 'https://buymeacoffee.com/robertpiosik' },
+    { label: 'PayPal', url: 'https://www.paypal.com/paypalme/robertpiosik' }
+  ]
+
   const wallets = [
     {
       name: 'Bitcoin',
@@ -120,14 +126,48 @@ export const Donations: React.FC<DonationsProps> = (props) => {
     }
   ]
 
+  const format_url_for_display = (url: string) => {
+    return url.replace(/^(https?:\/\/)/, '').replace(/^www\./, '')
+  }
+
   return (
     <>
       <Scrollable>
         <div className={styles.container}>
+          <div className={styles.about}>
+            Hi there! By donating to Code Web Chat, you’re supporting my mission
+            to independently build the world’s best free and open-source AI coding tools.
+            <br />
+            Thank you for your support!
+          </div>
+          <div className={styles.links}>
+            <Fieldset
+              is_collapsed={is_links_collapsed}
+              label="Links"
+              on_toggle_collapsed={() =>
+                set_links_collapsed(!is_links_collapsed)
+              }
+            >
+              <div className={styles.links__content}>
+                {links.map((link) => (
+                  <a
+                    href={link.url}
+                    className={styles.links__item}
+                    key={link.url}
+                  >
+                    <strong>{link.label}</strong>
+                    <span className={styles.links__item__url}>
+                      {format_url_for_display(link.url)}
+                    </span>
+                  </a>
+                ))}
+              </div>
+            </Fieldset>
+          </div>
           <div className={styles.wallets}>
             <Fieldset
               is_collapsed={is_wallets_collapsed}
-              label="Crypto wallets"
+              label="Wallets"
               on_toggle_collapsed={() =>
                 set_wallets_collapsed(!is_wallets_collapsed)
               }
@@ -143,7 +183,7 @@ export const Donations: React.FC<DonationsProps> = (props) => {
                       is_small
                       on_click={() => props.on_show_qr_code(wallet)}
                     >
-                      Show QR
+                      Scan QR
                     </Button>
                   </div>
                 </div>

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -22,7 +22,7 @@ import { ResponseHistoryItem } from '@shared/types/response-history-item'
 import { Layout } from './components/Layout/Layout'
 import { ResponsePreviewFooter as UiResponsePreviewFooter } from '@ui/components/editor/panel/ResponsePreviewFooter'
 import { EditPresetFormFooter } from './components/edit-preset-form/EditPresetFormFooter'
-import { Donations } from '@ui/components/editor/panel/Donations/Donations'
+import { Donations as UiDonations } from '@ui/components/editor/panel/Donations/Donations'
 import { use_latest_donations } from './hooks/latest-donations'
 import { DonationsFooter } from './components/donations/DonationsFooter'
 
@@ -398,7 +398,7 @@ export const Panel = () => {
                 />
               }
             >
-              <Donations
+              <UiDonations
                 donations={donations_state.donations}
                 is_fetching={donations_state.is_fetching}
                 is_revalidating={donations_state.is_revalidating}