From 7ef5889185eede4807cb784c6985e528ce8b37cc Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Thu, 18 Dec 2025 08:46:36 -0700
Subject: [PATCH] feat: make it so there's no jump when scrolling down on home
 feed, and the new "+" slowly appears

---
 src/views/HomeView.vue | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 033956ea..356a5d61 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -111,24 +111,34 @@ Raymer * @version 1.0.0 */
           <!-- Record Quick-Action -->
           <div class="mb-6">
             <div class="flex gap-2 items-center mb-2">
-              <!-- eslint-disable prettier/prettier max-len -->
+              <!-- Thank button - always visible and unchanged -->
               <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 p-4 w-14 h-14 z-50'
-                    : 'px-4 py-3',
-                ]"
-                :style="isScrolled ? getButtonPosition() : {}"
+                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 px-4 py-3 rounded-full"
                 @click="openPersonDialog()"
               >
                 <font-awesome icon="plus" />
-                <span v-if="!isScrolled" class="transition-opacity duration-300"
-                  >Thank</span
-                >
+                <span>Thank</span>
               </button>
-              <!-- eslint-enable prettier/prettier -->
+              <!-- Plus button - appears when scrolled, positioned over house-chimney icon -->
+              <transition
+                enter-active-class="transition-all duration-1000 ease-out"
+                leave-active-class="transition-all duration-1000 ease-in"
+                enter-from-class="scale-0"
+                enter-to-class="scale-100"
+                leave-from-class="scale-100"
+                leave-to-class="scale-0"
+              >
+                <button
+                  v-if="isScrolled"
+                  type="button"
+                  class="fixed bottom-10 p-4 w-14 h-14 z-50 text-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-full flex items-center justify-center"
+                  :style="getButtonPosition()"
+                  @click="openPersonDialog()"
+                >
+                  <font-awesome icon="plus" />
+                </button>
+              </transition>
               <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()"