From 34ed89c378a998f1249d6b8696daf85d4f4adc07 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sat, 7 Dec 2024 16:50:28 +0100
Subject: [PATCH] fix(ui): more '''s declared as 'store'

---
 front/src/components/channels/UploadModal.vue |  4 ++--
 front/src/components/favorites/List.vue       |  6 +++---
 front/src/components/library/Artists.vue      |  2 +-
 front/src/components/ui/alert.scss            | 21 +++++++++++++++++++
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/front/src/components/channels/UploadModal.vue b/front/src/components/channels/UploadModal.vue
index cbb391a52..1bc1f1d59 100644
--- a/front/src/components/channels/UploadModal.vue
+++ b/front/src/components/channels/UploadModal.vue
@@ -54,7 +54,7 @@ const open = ref(false)
 
 <template>
   <semantic-modal
-    v-model:show="$store.state.channels.showUploadModal"
+    v-model:show="store.state.channels.showUploadModal"
     class="small"
   >
     <h4 class="header">
@@ -74,7 +74,7 @@ const open = ref(false)
     <div class="scrolling content">
       <channel-upload-form
         ref="uploadForm"
-        :channel="$store.state.channels.uploadModalConfig.channel ?? null"
+        :channel="store.state.channels.uploadModalConfig.channel ?? null"
         @step="step = $event"
         @loading="isLoading = $event"
         @status="statusData = $event"
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 4c62d8396..95a04a0f0 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -120,15 +120,15 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         class="ui center aligned icon header"
       >
         <i class="circular inverted heart pink icon" />
-        {{ t('components.favorites.List.header.favorites', $store.state.favorites.count) }}
+        {{ t('components.favorites.List.header.favorites', store.state.favorites.count) }}
       </h2>
       <radio-button
-        v-if="$store.state.favorites.count > 0"
+        v-if="store.state.favorites.count > 0"
         type="favorites"
       />
     </section>
     <section
-      v-if="$store.state.favorites.count > 0"
+      v-if="store.state.favorites.count > 0"
       class="ui vertical stripe segment"
     >
       <div :class="['ui', { 'loading': isLoading }, 'form']">
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index d84ca5b24..407ba6eaa 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -250,7 +250,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           {{ t('components.library.Artists.empty.noResults') }}
         </div>
         <router-link
-          v-if="$store.state.auth.authenticated"
+          v-if="store.state.auth.authenticated"
           :to="{name: 'content.index'}"
           class="ui success button labeled icon"
         >
diff --git a/front/src/components/ui/alert.scss b/front/src/components/ui/alert.scss
index 30edc2556..e49d415db 100644
--- a/front/src/components/ui/alert.scss
+++ b/front/src/components/ui/alert.scss
@@ -41,4 +41,25 @@
   > .actions {
     margin-left: auto;
   }
+
+  // Add styles for when alert is used as a notification
+  &.is-notification {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 1000;
+    min-width: 200px;
+    max-width: 400px;
+
+    &.fade-enter-active,
+    &.fade-leave-active {
+      transition: all 0.3s ease;
+    }
+
+    &.fade-enter-from,
+    &.fade-leave-to {
+      opacity: 0;
+      transform: translateY(1rem);
+    }
+  }
 }