From 66401c6c5f45de4a565cbe82fde54a45cc055e14 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 27 Feb 2025 21:05:29 +0600
Subject: [PATCH] web/UpdateNotification: replace animation with a springy
 transition

so cute :3
---
 .../components/misc/UpdateNotification.svelte | 40 +++++++++----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/web/src/components/misc/UpdateNotification.svelte b/web/src/components/misc/UpdateNotification.svelte
index 390d17d3..ba0c7cf4 100644
--- a/web/src/components/misc/UpdateNotification.svelte
+++ b/web/src/components/misc/UpdateNotification.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
-
     import IconComet from "@tabler/icons-svelte/IconComet.svelte";
+
+    let dismissed = false;
 </script>
 
 <div id="update-notification" role="alert" aria-atomic="true">
-    <button class="button update-button" on:click={() => window.location.reload()}>
+    <button
+        class="button update-button"
+        class:visible={!dismissed}
+        on:click={() => {
+            dismissed = true;
+            window.location.reload()
+        }}
+    >
         <div class="update-icon">
             <IconComet />
         </div>
@@ -38,7 +46,13 @@
             var(--button-box-shadow),
             0 0 10px 0px var(--button-elevated-hover);
         border-radius: 14px;
-        animation: slide-in-top 0.4s;
+
+        transform: translateY(-150px);
+        transition: transform 0.4s cubic-bezier(0.53, 0.05, 0.23, 1.15);
+    }
+
+    .update-button.visible {
+        transform: none;
     }
 
     .update-icon {
@@ -75,33 +89,15 @@
         line-height: 1.2;
     }
 
-    @keyframes slide-in-top {
-        from {
-            transform: translateY(-150px);
-        }
-        100% {
-            transform: none;
-        }
-    }
-
     @media screen and (max-width: 535px) {
         #update-notification {
             bottom: calc(var(--sidebar-height-mobile) + 5px);
             justify-content: center;
-            animation: slide-in-bottom 0.4s;
         }
 
         .update-button {
+            transform: translateY(300px);
             margin-right: var(--padding);
         }
-
-        @keyframes slide-in-bottom {
-            from {
-                transform: translateY(300px);
-            }
-            100% {
-                transform: none;
-            }
-        }
     }
 </style>