ADD: Save button reveal

src/renderer/src/components/navbar/Navbar.vue

@@ -132,7 +132,8 @@
         </MenubarMenu>
       </div>
       <div class="grow" />
-      <div class="flex items-center gap-2 px-2">
+      <Transition name="fade">
+        <div v-if="store.connected" class="flex items-center gap-2 px-2">
           <div v-if="numberOfChanges" class="text-sm">
             <PenLine class="inline-block h-4" />{{ numberOfChanges }} Changes
           </div>
@@ -148,6 +149,7 @@
             Save
           </MenubarButton>
         </div>
+      </Transition>
       <MenubarButton
         v-if="showDisconnectButton"
         class="app-titlebar-button border-2"
@@ -240,4 +242,16 @@ onMounted(() => {
 .app-titlebar-button {
   -webkit-app-region: no-drag;
 }
+.fade-enter-active {
+  transition: transform 500ms ease;
+  transition-delay: 1000ms;
+}
+.fade-leave-active {
+  transition: transform 250ms ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  transform: translateY(-3.5rem);
+}
 </style>