Update donation description to clarify tooling is open-source and add empty state message for checkpoints

Author: robertpiosik

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

@@ -148,8 +148,8 @@ export const Donations: React.FC<DonationsProps> = (props) => {
         <div className={styles.container}>
           <div className={styles.about}>
             Hi there! Your donation supports my mission to help build a
-            sustainable future for AI coding, providing free, prompt caching
-            friendly tooling for everyone. Thank you.
+            sustainable future for AI coding, providing free and open-source,
+            prompt caching friendly tooling for everyone. Thank you.
           </div>
           <div className={styles.sponsors}>
             <Fieldset

packages/vscode/src/views/panel/frontend/Home/Home.module.scss

@@ -107,6 +107,11 @@
     }
   }
 
+  &__empty {
+    padding-left: 34px;
+    color: var(--cwc-text-color-dimmed);
+  }
+
   &__buttons {
     display: flex;
     flex-direction: column;

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

@@ -140,24 +140,29 @@ export const Home: React.FC<Props> = (props) => {
                 </>
               }
             />
-            {!is_timeline_collapsed && (
-              <Timeline
-                items={props.checkpoints.map((c) => ({
-                  id: c.timestamp,
-                  label: c.title,
-                  timestamp: c.timestamp,
-                  description: c.description,
-                  is_starred: c.is_starred,
-                  can_edit: c.title == 'Created by user'
-                }))}
-                on_toggle_starred={(id) =>
-                  props.on_toggle_checkpoint_starred(id)
-                }
-                on_item_click={(id) => props.on_restore_checkpoint(id)}
-                on_edit={props.on_edit_checkpoint_description}
-                on_delete={props.on_delete_checkpoint}
-              />
-            )}
+            {!is_timeline_collapsed &&
+              (props.checkpoints.length > 0 ? (
+                <Timeline
+                  items={props.checkpoints.map((c) => ({
+                    id: c.timestamp,
+                    label: c.title,
+                    timestamp: c.timestamp,
+                    description: c.description,
+                    is_starred: c.is_starred,
+                    can_edit: c.title == 'Created by user'
+                  }))}
+                  on_toggle_starred={(id) =>
+                    props.on_toggle_checkpoint_starred(id)
+                  }
+                  on_item_click={(id) => props.on_restore_checkpoint(id)}
+                  on_edit={props.on_edit_checkpoint_description}
+                  on_delete={props.on_delete_checkpoint}
+                />
+              ) : (
+                <div className={styles.inner__empty}>
+                  No checkpoints created yet.
+                </div>
+              ))}
           </div>
 
           <div className={styles.bottom}>