Display the latest "Buy Me A Coffee" donation within the intro view

Author: robertpiosik

packages/ui/src/components/editor/BuyMeACoffee/BuyMeACoffee.module.scss

@@ -1,3 +1,42 @@
+.donations {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-8px);
+
+  &__donation {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-4px);
+    user-select: text;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 2px;
+      height: 100%;
+      background-color: #ffdd00;
+      left: 0;
+      transform: translateX(-12px);
+      border-top-right-radius: 1px;
+      border-bottom-right-radius: 1px;
+    }
+
+    &__header {
+      font-size: var(--font-size-12px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__note {
+      background-color: var(--vscode-list-hoverBackground);
+      padding: var(--padding-8px);
+      border-radius: var(--border-radius-8px);
+    }
+  }
+}
+
 .button {
   display: flex;
   align-items: center;
@@ -11,7 +50,6 @@
 
   &:hover {
     color: black;
-    background-color: #ffe331;
   }
 
   > svg {

packages/ui/src/components/editor/BuyMeACoffee/BuyMeACoffee.stories.tsx

@@ -2,19 +2,54 @@ import React from 'react'
 import styles from './BuyMeACoffee.module.scss'
 import { Icon } from '../Icon'
 
-type Props = {
+export type BuyMeACoffeeProps = {
   username: string
+  supporter_name?: string
+  support_coffees?: number
+  support_note?: string
 }
 
-export const BuyMeACoffee: React.FC<Props> = (props) => {
+export const BuyMeACoffee: React.FC<BuyMeACoffeeProps> = (props) => {
+  if (props.supporter_name && props.support_coffees) {
+    return (
+      <div className={styles.donations}>
+        <a
+          href={`https://buymeacoffee.com/${props.username}`}
+          className={styles.button}
+          title="Buy me a coffee"
+        >
+          <Icon variant="BUY_ME_A_COFFEE_WITH_TEXT" />
+          <span className="codicon codicon-link-external" />
+        </a>
+        <div className={styles.donations__donation}>
+          <div
+            className={styles.donations__donation__header}
+            title={`${props.supporter_name} bought ${
+              props.support_coffees
+            } coffee${props.support_coffees > 1 ? 's' : ''}`}
+          >
+            <strong>{props.supporter_name}</strong> bought{' '}
+            {props.support_coffees} coffee
+            {props.support_coffees > 1 && 's'}
+          </div>
+          {props.support_note && (
+            <div className={styles.donations__donation__note}>
+              "{props.support_note}"
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <a
       href={`https://buymeacoffee.com/${props.username}`}
       className={styles.button}
       title="Buy me a coffee"
     >
       <Icon variant="BUY_ME_A_COFFEE_WITH_TEXT" />
-      <span className="codicon codicon-link-external"/>
+      <span className="codicon codicon-link-external" />
     </a>
   )
 }

packages/ui/src/components/editor/BuyMeACoffee/BuyMeACoffee.tsx

@@ -13,6 +13,7 @@ import { ApiMode, WebMode } from '@shared/types/modes'
 import { post_message } from './utils/post_message'
 import { FileInReview } from '@shared/types/file-in-review'
 import { CodeReview as UiCodeReview } from '@ui/components/editor/CodeReview'
+import { use_latest_donation } from './hooks/lastest-donation-hook'
 
 const vscode = acquireVsCodeApi()
 
@@ -48,6 +49,8 @@ export const View = () => {
   const [chat_input_focus_and_select_key, set_chat_input_focus_and_select_key] =
     useState(0)
 
+  const latest_donation = use_latest_donation(active_view == 'intro')
+
   const handle_mouse_enter = () => {
     post_message(vscode, {
       command: 'CHECK_CLIPBOARD_FOR_APPLY'
@@ -368,6 +371,7 @@ export const View = () => {
             set_chat_input_focus_and_select_key((k) => k + 1)
           }}
           version={version}
+          latest_donation={latest_donation}
         />
       </div>
     </div>

packages/vscode/src/view/frontend/View.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react'
+import axios from 'axios'
+
+type Donation = {
+  supporter_name: string
+  support_coffees: number
+  support_note: string
+}
+
+export const use_latest_donation = (is_active: boolean) => {
+  const [donation, set_donation] = useState<Donation | null>(null)
+  const last_fetched_at = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (!is_active) {
+      return
+    }
+
+    const fetch_donation = async () => {
+      if (
+        last_fetched_at.current &&
+        Date.now() - last_fetched_at.current < 5000
+      ) {
+        return
+      }
+      try {
+        const response = await axios.get(
+          'https://app.buymeacoffee.com/api/creators/slug/robertpiosik/coffees?web=1&page=1&per_page=10'
+        )
+        last_fetched_at.current = Date.now()
+        if (response.data?.data && response.data.data.length > 0) {
+          const raw = response.data.data[0]
+          set_donation({
+            supporter_name: raw.supporter_name,
+            support_coffees: raw.support_coffees,
+            support_note: raw.support_note ?? ''
+          })
+        }
+      } catch (error) {
+        console.error('Failed to fetch latest donation', error)
+      }
+    }
+    fetch_donation()
+  }, [is_active])
+
+  return donation
+}

packages/vscode/src/view/frontend/hooks/lastest-donation-hook.ts

@@ -5,10 +5,17 @@ import { BuyMeACoffee } from '@ui/components/editor/BuyMeACoffee'
 import { Icon } from '@ui/components/editor/Icon'
 import cn from 'classnames'
 
+type Donation = {
+  supporter_name: string
+  support_coffees: number
+  support_note: string
+}
+
 type Props = {
   on_new_chat: () => void
   on_api_call: () => void
   version: string
+  latest_donation: Donation | null
 }
 
 export const Intro: React.FC<Props> = (props) => {
@@ -28,7 +35,12 @@ export const Intro: React.FC<Props> = (props) => {
                 description="Send prompt with an API provider"
                 on_click={props.on_api_call}
               />
-              <BuyMeACoffee username="robertpiosik" />
+              <BuyMeACoffee
+                username="robertpiosik"
+                supporter_name={props.latest_donation?.supporter_name}
+                support_coffees={props.latest_donation?.support_coffees}
+                support_note={props.latest_donation?.support_note}
+              />
             </div>
           </div>
           <div className={styles.bottom}>