fix(ui): more '''s declared as 'store'

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"

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']">

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"
         >

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);
+    }
+  }
 }