feat: shrink & reword the button on the front, and put it at the bottom when they scroll down

src/views/HomeView.vue

@@ -111,7 +111,21 @@ Raymer * @version 1.0.0 */
           <!-- Record Quick-Action -->
           <div class="mb-6">
             <div class="flex gap-2 items-center mb-2">
-              <h2 class="font-bold">Record something given by:</h2>
+              <button
+                type="button"
+                :class="[
+                  'text-center text-base uppercase bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white flex items-center justify-center gap-2 transition-all duration-300 rounded-full',
+                  isScrolled
+                    ? 'fixed bottom-10 left-6 p-4 w-14 h-14 z-50'
+                    : 'px-4 py-3',
+                ]"
+                @click="openPersonDialog()"
+              >
+                <font-awesome icon="plus" />
+                <span v-if="!isScrolled" class="transition-opacity duration-300"
+                  >Thanks!</span
+                >
+              </button>
               <button
                 class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
                 @click="openGiftedPrompts()"
@@ -122,15 +136,6 @@ Raymer * @version 1.0.0 */
                 />
               </button>
             </div>
-
-            <button
-              type="button"
-              class="text-center text-base uppercase bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-3 rounded-lg flex items-center justify-center gap-2"
-              @click="openPersonDialog()"
-            >
-              <font-awesome icon="plus" />
-              Record something given
-            </button>
           </div>
         </div>
       </div>
@@ -436,6 +441,8 @@ export default class HomeView extends Vue {
   userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
   selectedImage = "";
   isImageViewerOpen = false;
+  isScrolled = false;
+  scrollHandler?: () => void;
 
   /**
    * CRITICAL VUE REACTIVITY BUG WORKAROUND
@@ -536,11 +543,44 @@ export default class HomeView extends Vue {
             this.numNewOffersToUser + this.numNewOffersToUserProjects > 0,
         },
       });
+
+      // Add scroll listener for button collapse
+      // Note: Scrolling happens on #app element, not window (see tailwind.css)
+      const appElement = document.getElementById("app");
+      const scrollElement = appElement || window;
+
+      this.scrollHandler = () => {
+        const scrollTop = appElement
+          ? appElement.scrollTop
+          : window.pageYOffset || document.documentElement.scrollTop || 0;
+        const shouldBeScrolled = scrollTop > 100;
+        if (this.isScrolled !== shouldBeScrolled) {
+          this.isScrolled = shouldBeScrolled;
+        }
+      };
+
+      // Set initial state
+      this.scrollHandler();
+      // Listen on scroll element (prefer #app, fallback to window)
+      scrollElement.addEventListener("scroll", this.scrollHandler, {
+        passive: true,
+      });
     } catch (err: unknown) {
       this.handleError(err);
     }
   }
 
+  /**
+   * Cleanup scroll listener on component unmount
+   */
+  beforeUnmount() {
+    if (this.scrollHandler) {
+      const appElement = document.getElementById("app");
+      const scrollElement = appElement || window;
+      scrollElement.removeEventListener("scroll", this.scrollHandler);
+    }
+  }
+
   /**
    * Watch for changes in the current activeDid
    * Reload settings when user switches identities