From b5eb2b6e9514de2d10b195a632ad72033f4f1f98 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 4 Jun 2025 11:19:13 +0800
Subject: [PATCH] transitions

---
 .../src/components/app/drawer/menu/Server.vue | 39 ++++++++++++-------
 tsugini/src/styles/transitions/_fab.scss      | 13 +++++++
 tsugini/src/styles/transitions/_fade.scss     | 11 ++++++
 3 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 tsugini/src/styles/transitions/_fab.scss
 create mode 100644 tsugini/src/styles/transitions/_fade.scss

diff --git a/tsugini/src/components/app/drawer/menu/Server.vue b/tsugini/src/components/app/drawer/menu/Server.vue
index 4e6509dd..68e47321 100644
--- a/tsugini/src/components/app/drawer/menu/Server.vue
+++ b/tsugini/src/components/app/drawer/menu/Server.vue
@@ -1,5 +1,6 @@
 <template>
   <q-expansion-item
+    v-model="expanded"
     icon="mdi-cog"
     :label="
       $formatMessage({
@@ -12,12 +13,14 @@
     <template #header>
       <q-item-section avatar>
         <q-icon name="mdi-cog">
-          <q-badge
-            v-if="unreadCount > 0"
-            color="info"
-            rounded
-            floating
-          />
+          <Transition name="fab">
+            <q-badge
+              v-if="!expanded && unreadCount > 0"
+              color="info"
+              rounded
+              floating
+            />
+          </Transition>
         </q-icon>
       </q-item-section>
       <q-item-section>
@@ -73,15 +76,15 @@
           }}
         </q-item-label>
       </q-item-section>
-      <q-item-section
-        side
-        v-if="unreadCount > 0"
-      >
-        <q-badge
-          color="info"
-          rounded
-          >{{ unreadCount }}</q-badge
-        >
+      <q-item-section side>
+        <Transition name="fab">
+          <q-badge
+            v-if="unreadCount > 0"
+            color="info"
+            rounded
+            >{{ unreadCount }}</q-badge
+          >
+        </Transition>
       </q-item-section>
     </q-item>
 
@@ -167,4 +170,10 @@
 import { useAnnouncements } from 'colada/queries/announcements'
 
 const { unreadCount } = useAnnouncements()
+
+const expanded = ref<boolean>(false)
 </script>
+
+<style scoped lang="scss">
+@use 'styles/transitions/fab';
+</style>
diff --git a/tsugini/src/styles/transitions/_fab.scss b/tsugini/src/styles/transitions/_fab.scss
new file mode 100644
index 00000000..c3fad8f7
--- /dev/null
+++ b/tsugini/src/styles/transitions/_fab.scss
@@ -0,0 +1,13 @@
+.fab {
+    &-enter-active,
+    &-leave-active {
+        transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
+
+    &-enter-from,
+    &-leave-to {
+        opacity: 0;
+        transform: rotate(180deg) scale(0.2) skew(20deg);
+        filter: hue-rotate(90deg);
+    }
+}
diff --git a/tsugini/src/styles/transitions/_fade.scss b/tsugini/src/styles/transitions/_fade.scss
new file mode 100644
index 00000000..3f45ec73
--- /dev/null
+++ b/tsugini/src/styles/transitions/_fade.scss
@@ -0,0 +1,11 @@
+.fade {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity 0.5s ease;
+    }
+
+    &-enter-from,
+    &-leave-to {
+        opacity: 0;
+    }
+}