From b447daed47a9eb545f915b61ce584f13bdf4638e Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 8 Dec 2024 20:20:21 +0100
Subject: [PATCH] chore(ui): use `store` object instead of `$store` plugin

---
 front/src/components/About.vue                |  8 +--
 front/src/components/AboutPod.vue             | 12 ++---
 front/src/components/Sidebar.vue              | 50 +++++++++----------
 front/src/components/auth/LoginForm.vue       |  6 +--
 front/src/components/auth/SignupForm.vue      |  4 +-
 front/src/components/channels/UploadForm.vue  |  2 +-
 .../favorites/TrackFavoriteIcon.vue           |  4 +-
 front/src/components/library/Albums.vue       |  2 +-
 .../components/library/FileUploadWidget.vue   |  4 +-
 front/src/components/library/Podcasts.vue     |  4 +-
 front/src/components/library/Radios.vue       |  8 +--
 .../src/components/moderation/ReportModal.vue |  2 +-
 front/src/components/playlists/Editor.vue     |  2 +-
 .../components/playlists/PlaylistModal.vue    |  4 +-
 front/src/shims-vuex.d.ts                     |  2 +-
 front/src/views/auth/ProfileBase.vue          | 14 +++---
 front/src/views/channels/DetailBase.vue       | 14 +++---
 front/src/views/library/LibraryBase.vue       |  8 +--
 front/src/views/playlists/Detail.vue          |  4 +-
 19 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index 216099ecf..ca50bbaf7 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -80,7 +80,7 @@ const headerStyle = computed(() => {
           <div class="ui two stackable cards">
             <div class="ui card">
               <div
-                v-if="!$store.state.auth.authenticated"
+                v-if="!store.state.auth.authenticated"
                 class="signup-form content"
               >
                 <h3 class="header">
@@ -124,7 +124,7 @@ const headerStyle = computed(() => {
                       {{ t('components.About.message.loggedIn') }}
                     </div>
                     <p>
-                      {{ t('components.About.message.greeting', {username: $store.state.auth.username}) }}
+                      {{ t('components.About.message.greeting', {username: store.state.auth.username}) }}
                     </p>
                   </div>
                 </h3>
@@ -162,14 +162,14 @@ const headerStyle = computed(() => {
                     <div class="two column row">
                       <div class="column">
                         <span class="statistics-figure ui text">
-                          <span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
+                          <span class="ui big text"><strong>{{ stats.users.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
                           <br>
                           {{ t('components.About.stat.activeUsers', stats.users) }}
                         </span>
                       </div>
                       <div class="column">
                         <span class="statistics-figure ui text">
-                          <span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
+                          <span class="ui big text"><strong>{{ stats.hours.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
                           <br>
                           {{ t('components.About.stat.hoursOfMusic', stats.hours) }}
                         </span>
diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue
index df9ad7281..615b550b9 100644
--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -340,7 +340,7 @@ const headerStyle = computed(() => {
                     class="statistics-statistic"
                   >
                     <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.hours.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
+                      <span class="ui big text"><strong>{{ stats.hours.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       {{ t('components.AboutPod.stat.hoursOfMusic', stats.hours) }}
                     </span>
@@ -350,7 +350,7 @@ const headerStyle = computed(() => {
                     class="statistics-statistic"
                   >
                     <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.artists.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
+                      <span class="ui big text"><strong>{{ stats.artists.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       {{ t('components.AboutPod.stat.artistsCount', stats.artists) }}
                     </span>
@@ -360,7 +360,7 @@ const headerStyle = computed(() => {
                     class="statistics-statistic"
                   >
                     <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.albums.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
+                      <span class="ui big text"><strong>{{ stats.albums.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       {{ t('components.AboutPod.stat.albumsCount', stats.albums) }}
                     </span>
@@ -370,7 +370,7 @@ const headerStyle = computed(() => {
                     class="statistics-statistic"
                   >
                     <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
+                      <span class="ui big text"><strong>{{ stats.tracks.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       {{ t('components.AboutPod.stat.tracksCount', stats.tracks) }}
                     </span>
@@ -380,7 +380,7 @@ const headerStyle = computed(() => {
                     class="statistics-statistic"
                   >
                     <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
+                      <span class="ui big text"><strong>{{ stats.users.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       {{ t('components.AboutPod.stat.activeUsers', stats.users) }}
                     </span>
@@ -390,7 +390,7 @@ const headerStyle = computed(() => {
                     class="statistics-statistic"
                   >
                     <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
+                      <span class="ui big text"><strong>{{ stats.listenings.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
                       <br>
                       {{ t('components.AboutPod.stat.listeningsCount', stats.listenings) }}
                     </span>
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 0fd93b46d..1bc012488 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -138,7 +138,7 @@ onMounted(() => {
       <nav class="top ui compact right aligned inverted text menu">
         <div class="right menu">
           <div
-            v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
+            v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
             class="item"
             :title="labels.administration"
           >
@@ -156,42 +156,42 @@ onMounted(() => {
                 </h3>
                 <div class="divider" />
                 <router-link
-                  v-if="$store.state.auth.availablePermissions['library']"
+                  v-if="store.state.auth.availablePermissions['library']"
                   class="item"
                   :to="{name: 'manage.library.edits', query: {q: 'is_approved:null'}}"
                 >
                   <div
-                    v-if="$store.state.ui.notifications.pendingReviewEdits > 0"
+                    v-if="store.state.ui.notifications.pendingReviewEdits > 0"
                     :title="labels.pendingReviewEdits"
                     :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
                   >
-                    {{ $store.state.ui.notifications.pendingReviewEdits }}
+                    {{ store.state.ui.notifications.pendingReviewEdits }}
                   </div>
                   {{ t('components.Sidebar.link.library') }}
                 </router-link>
                 <router-link
-                  v-if="$store.state.auth.availablePermissions['moderation']"
+                  v-if="store.state.auth.availablePermissions['moderation']"
                   class="item"
                   :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
                 >
                   <div
-                    v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests > 0"
+                    v-if="store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests > 0"
                     :title="labels.pendingReviewReports"
                     :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
                   >
-                    {{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
+                    {{ store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests }}
                   </div>
                   {{ t('components.Sidebar.link.moderation') }}
                 </router-link>
                 <router-link
-                  v-if="$store.state.auth.availablePermissions['settings']"
+                  v-if="store.state.auth.availablePermissions['settings']"
                   class="item"
                   :to="{name: 'manage.users.users.list'}"
                 >
                   {{ t('components.Sidebar.link.users') }}
                 </router-link>
                 <router-link
-                  v-if="$store.state.auth.availablePermissions['settings']"
+                  v-if="store.state.auth.availablePermissions['settings']"
                   class="item"
                   :to="{path: '/manage/settings'}"
                 >
@@ -202,7 +202,7 @@ onMounted(() => {
           </div>
         </div>
         <router-link
-          v-if="$store.state.auth.authenticated"
+          v-if="store.state.auth.authenticated"
           class="item"
           :to="{name: 'content.index'}"
         >
@@ -213,24 +213,24 @@ onMounted(() => {
           <div class="item">
             <div class="ui user-dropdown dropdown">
               <img
-                v-if="$store.state.auth.authenticated && $store.state.auth.profile?.avatar && $store.state.auth.profile?.avatar.urls.medium_square_crop"
+                v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar && store.state.auth.profile?.avatar.urls.medium_square_crop"
                 class="ui avatar image"
                 alt=""
-                :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
+                :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
               >
               <actor-avatar
-                v-else-if="$store.state.auth.authenticated"
-                :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
+                v-else-if="store.state.auth.authenticated"
+                :actor="{preferred_username: store.state.auth.username, full_username: store.state.auth.username,}"
               />
               <i
                 v-else
                 class="cog icon"
               />
               <div
-                v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
+                v-if="store.state.ui.notifications.inbox + additionalNotifications > 0"
                 :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
               >
-                {{ $store.state.ui.notifications.inbox + additionalNotifications }}
+                {{ store.state.ui.notifications.inbox + additionalNotifications }}
               </div>
               <user-menu
                 v-bind="$attrs"
@@ -246,24 +246,24 @@ onMounted(() => {
             @click.prevent.exact="showUserModal = !showUserModal"
           >
             <img
-              v-if="$store.state.auth.authenticated && $store.state.auth.profile?.avatar?.urls.medium_square_crop"
+              v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
               class="ui avatar image"
               alt=""
-              :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
+              :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
             >
             <actor-avatar
-              v-else-if="$store.state.auth.authenticated"
-              :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
+              v-else-if="store.state.auth.authenticated"
+              :actor="{preferred_username: store.state.auth.username, full_username: store.state.auth.username,}"
             />
             <i
               v-else
               class="cog icon"
             />
             <div
-              v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
+              v-if="store.state.ui.notifications.inbox + additionalNotifications > 0"
               :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
             >
-              {{ $store.state.ui.notifications.inbox + additionalNotifications }}
+              {{ store.state.ui.notifications.inbox + additionalNotifications }}
             </div>
           </a>
         </template>
@@ -348,7 +348,7 @@ onMounted(() => {
       <search-bar @search="isCollapsed = false" />
     </div>
     <div
-      v-if="!$store.state.auth.authenticated"
+      v-if="!store.state.auth.authenticated"
       class="ui basic signup segment"
     >
       <router-link
@@ -454,7 +454,7 @@ onMounted(() => {
             </div>
           </div>
           <div
-            v-if="$store.state.auth.authenticated"
+            v-if="store.state.auth.authenticated"
             :class="[{ collapsed: expanded !== 'myLibrary' }, 'collapsible item']"
           >
             <h3
@@ -516,7 +516,7 @@ onMounted(() => {
             </div>
           </div>
           <router-link
-            v-if="$store.state.auth.authenticated"
+            v-if="store.state.auth.authenticated"
             class="header item"
             :to="{name: 'subscriptions'}"
           >
diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index 72ce25949..a8b09a5b1 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -91,7 +91,7 @@ const submit = async () => {
       </h4>
       <ul class="list">
         <li
-          v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value"
+          v-if="errors[0] == 'invalid_credentials' && store.state.instance.settings.moderation.signup_approval_enabled.value"
         >
           {{ t('components.auth.LoginForm.help.approvalRequired') }}
         </li>
@@ -103,7 +103,7 @@ const submit = async () => {
         </li>
       </ul>
     </div>
-    <template v-if="domain === $store.getters['instance/domain']">
+    <template v-if="domain === store.getters['instance/domain']">
       <div class="field">
         <label for="username-field">
           {{ t('components.auth.LoginForm.label.username') }}
@@ -145,7 +145,7 @@ const submit = async () => {
     </template>
     <template v-else>
       <p>
-        {{ t('components.auth.LoginForm.message.redirect', { domain: $store.getters['instance/domain'] }) }}
+        {{ t('components.auth.LoginForm.message.redirect', { domain: store.getters['instance/domain'] }) }}
       </p>
     </template>
     <button
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index 8cceed992..36461066f 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -108,7 +108,7 @@ fetchInstanceSettings()
     @submit.prevent="submit()"
   >
     <p
-      v-if="!$store.state.instance.settings.users.registration_enabled.value"
+      v-if="!store.state.instance.settings.users.registration_enabled.value"
       class="ui message"
     >
       {{ t('components.auth.SignupForm.message.registrationClosed') }}
@@ -177,7 +177,7 @@ fetchInstanceSettings()
       />
     </div>
     <div
-      v-if="!$store.state.instance.settings.users.registration_enabled.value"
+      v-if="!store.state.instance.settings.users.registration_enabled.value"
       class="required field"
     >
       <label for="invitation-code">{{ t('components.auth.SignupForm.label.invitation') }}</label>
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index e2f11a0ca..20c577f36 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@@ -604,7 +604,7 @@ defineExpose({
           <div class="content">
             <p>
               <i class="info icon" />
-              {{ t('components.channels.UploadForm.description.extensions', {extensions: $store.state.ui.supportedExtensions.join(', ')}) }}
+              {{ t('components.channels.UploadForm.description.extensions', {extensions: store.state.ui.supportedExtensions.join(', ')}) }}
             </p>
           </div>
         </div>
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index abfd0af37..6ebd199f0 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -32,7 +32,7 @@ const title = computed(() => isFavorite.value
   <button
     v-if="button"
     :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']"
-    @click.stop="$store.dispatch('favorites/toggle', track.id)"
+    @click.stop="store.dispatch('favorites/toggle', track.id)"
   >
     <i class="heart icon" />
     <span v-if="isFavorite">
@@ -47,7 +47,7 @@ const title = computed(() => isFavorite.value
     :class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
     :aria-label="title"
     :title="title"
-    @click.stop="$store.dispatch('favorites/toggle', track.id)"
+    @click.stop="store.dispatch('favorites/toggle', track.id)"
   >
     <i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']" />
   </button>
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 47b064624..19e7f236d 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -231,7 +231,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             {{ t('components.library.Albums.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/library/FileUploadWidget.vue b/front/src/components/library/FileUploadWidget.vue
index 06194454a..9a1a876ee 100644
--- a/front/src/components/library/FileUploadWidget.vue
+++ b/front/src/components/library/FileUploadWidget.vue
@@ -86,12 +86,12 @@ export default { inheritAttrs: false }
   <file-upload
     ref="upload"
     v-bind="$attrs"
-    :post-action="$store.getters['instance/absoluteUrl']('/api/v1/uploads/')"
+    :post-action="store.getters['instance/absoluteUrl']('/api/v1/uploads/')"
     :multiple="true"
     :thread="1"
     :custom-action="uploadAction"
     :headers="headers"
-    :extensions="$store.state.ui.supportedExtensions"
+    :extensions="store.state.ui.supportedExtensions"
     :drop="true"
     name="audio_file"
   >
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index e620add3d..395221be2 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -231,7 +231,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           {{ t('components.library.Podcasts.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"
         >
@@ -239,7 +239,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           {{ t('components.library.Podcasts.button.channel') }}
         </router-link>
         <h1
-          v-if="$store.state.auth.authenticated"
+          v-if="store.state.auth.authenticated"
           class="ui with-actions header"
         >
           <div class="actions">
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 499094d2f..cf63a3988 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -123,7 +123,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           <radio-card
             v-if="isAuthenticated"
             :type="'actor-content'"
-            :object-id="$store.state.auth.fullUsername"
+            :object-id="store.state.auth.fullUsername"
           />
           <radio-card
             v-if="isAuthenticated && hasFavorites"
@@ -139,11 +139,11 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           />
           <radio-card :type="'recently-added'" />
           <radio-card
-            v-if="$store.state.auth.authenticated && scope === 'all'"
+            v-if="store.state.auth.authenticated && scope === 'all'"
             :type="'less-listened'"
           />
           <radio-card
-            v-if="$store.state.auth.authenticated && scope === 'me'"
+            v-if="store.state.auth.authenticated && scope === 'me'"
             :type="'less-listened_library'"
           />
         </div>
@@ -244,7 +244,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           {{ t('components.library.Radios.empty.noResults') }}
         </div>
         <router-link
-          v-if="$store.state.auth.authenticated"
+          v-if="store.state.auth.authenticated"
           :to="{name: 'library.radios.build'}"
           class="ui success button labeled icon"
         >
diff --git a/front/src/components/moderation/ReportModal.vue b/front/src/components/moderation/ReportModal.vue
index 68ae98769..2460d4193 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -171,7 +171,7 @@ watchEffect(async () => {
             :label="true"
           />
           <div
-            v-if="!$store.state.auth.authenticated"
+            v-if="!store.state.auth.authenticated"
             class="ui eight wide required field"
           >
             <label for="report-submitter-email">
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index a518750dc..79046e791 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -278,7 +278,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
                   <td class="center aligned">
                     <img
                       v-if="plt.track.album && plt.track.album.cover && plt.track.album.cover.urls.original"
-                      v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)"
+                      v-lazy="store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)"
                       alt=""
                       class="ui mini image"
                     >
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 41341eaaf..4c9393d81 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -82,7 +82,7 @@ store.dispatch('playlists/fetchOwn')
 
 <template>
   <semantic-modal
-    v-model:show="$store.state.playlists.showModal"
+    v-model:show="store.state.playlists.showModal"
   >
     <h4 class="header">
       <template v-if="track">
@@ -197,7 +197,7 @@ store.dispatch('playlists/fetchOwn')
               <td>
                 <router-link
                   :to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
-                  @click="$store.state.playlists.showModal = false"
+                  @click="store.state.playlists.showModal = false"
                 >
                   {{ playlist.name }}
                 </router-link>
diff --git a/front/src/shims-vuex.d.ts b/front/src/shims-vuex.d.ts
index 9658d05c7..0af9d7fcf 100644
--- a/front/src/shims-vuex.d.ts
+++ b/front/src/shims-vuex.d.ts
@@ -3,6 +3,6 @@ import { RootState } from '~/store'
 
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
-    $store: Store<RootState>
+    store: Store<RootState>
   }
 }
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 74345bb4b..963f3b47d 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -94,7 +94,7 @@ watch(props, fetchData, { immediate: true })
             <i class="ellipsis vertical icon" />
             <div class="menu">
               <a
-                v-if="object.domain != $store.getters['instance/domain']"
+                v-if="object.domain != store.getters['instance/domain']"
                 :href="object.fid"
                 target="_blank"
                 class="basic item"
@@ -114,7 +114,7 @@ watch(props, fetchData, { immediate: true })
 
               <div class="divider" />
               <router-link
-                v-if="$store.state.auth.availablePermissions['moderation']"
+                v-if="store.state.auth.availablePermissions['moderation']"
                 class="basic item"
                 :to="{name: 'manage.moderation.accounts.detail', params: {id: object.full_username}}"
               >
@@ -134,7 +134,7 @@ watch(props, fetchData, { immediate: true })
             />
             <img
               v-else
-              v-lazy="$store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)"
+              v-lazy="store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)"
               alt=""
               class="ui big circular image"
             >
@@ -149,7 +149,7 @@ watch(props, fetchData, { immediate: true })
                 {{ object.full_username }}
               </div>
             </div>
-            <template v-if="object.full_username === $store.state.auth.fullUsername">
+            <template v-if="object.full_username === store.state.auth.fullUsername">
               <div class="ui very small hidden divider" />
               <div class="ui basic success label">
                 {{ t('views.auth.ProfileBase.label.self') }}
@@ -157,12 +157,12 @@ watch(props, fetchData, { immediate: true })
             </template>
           </h1>
           <div class="ui small hidden divider" />
-          <div v-if="$store.getters['ui/layoutVersion'] === 'large'">
+          <div v-if="store.getters['ui/layoutVersion'] === 'large'">
             <rendered-description
               :content="object.summary"
               :field-name="'summary'"
-              :update-url="`users/${$store.state.auth.username}/`"
-              :can-update="$store.state.auth.authenticated && object.full_username === $store.state.auth.fullUsername"
+              :update-url="`users/${store.state.auth.username}/`"
+              :can-update="store.state.auth.authenticated && object.full_username === store.state.auth.fullUsername"
               @updated="emit('updated', $event)"
             />
           </div>
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index 47c5b1305..056d0870b 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -151,7 +151,7 @@ const updateSubscriptionCount = (delta: number) => {
                   v-if="object.artist?.cover"
                   alt=""
                   class="huge channel-image"
-                  :src="$store.getters['instance/absoluteUrl'](object.artist.cover.urls.medium_square_crop)"
+                  :src="store.getters['instance/absoluteUrl'](object.artist.cover.urls.medium_square_crop)"
                 >
                 <i
                   v-else
@@ -182,7 +182,7 @@ const updateSubscriptionCount = (delta: number) => {
                     {{ t('views.channels.DetailBase.meta.tracks', totalTracks) }}
                   </span>
                 </template>
-                <template v-if="object.attributed_to.full_username === $store.state.auth.fullUsername || $store.getters['channels/isSubscribed'](object.uuid)">
+                <template v-if="object.attributed_to.full_username === store.state.auth.fullUsername || store.getters['channels/isSubscribed'](object.uuid)">
                   <br>
                   {{ t('views.channels.DetailBase.meta.subscribers', object?.subscriptions_count ?? 0) }}
                   <br>
@@ -204,7 +204,7 @@ const updateSubscriptionCount = (delta: number) => {
                   </h4>
                   <div class="scrollable content">
                     <div class="description">
-                      <template v-if="$store.state.auth.authenticated">
+                      <template v-if="store.state.auth.authenticated">
                         <h3>
                           <i class="user icon" />
                           {{ t('views.channels.DetailBase.modal.subscribe.funkwhale.header') }}
@@ -263,7 +263,7 @@ const updateSubscriptionCount = (delta: number) => {
                       {{ t('views.channels.DetailBase.button.embed') }}
                     </a>
                     <a
-                      v-if="object.actor && object.actor.domain != $store.getters['instance/domain']"
+                      v-if="object.actor && object.actor.domain != store.getters['instance/domain']"
                       :href="object.url"
                       target="_blank"
                       class="basic item"
@@ -318,7 +318,7 @@ const updateSubscriptionCount = (delta: number) => {
                         </template>
                       </dangerous-button>
                     </template>
-                    <template v-if="$store.state.auth.availablePermissions['library']">
+                    <template v-if="store.state.auth.availablePermissions['library']">
                       <div class="divider" />
                       <router-link
                         class="basic item"
@@ -368,7 +368,7 @@ const updateSubscriptionCount = (delta: number) => {
               >
                 <button
                   class="ui basic labeled icon button"
-                  @click.prevent.stop="$store.commit('channels/showUploadModal', {show: true, config: {channel: object}})"
+                  @click.prevent.stop="store.commit('channels/showUploadModal', {show: true, config: {channel: object}})"
                 >
                   <i class="upload icon" />
                   {{ t('views.channels.DetailBase.button.upload') }}
@@ -452,7 +452,7 @@ const updateSubscriptionCount = (delta: number) => {
                 </div>
               </semantic-modal>
             </div>
-            <div v-if="$store.getters['ui/layoutVersion'] === 'large'">
+            <div v-if="store.getters['ui/layoutVersion'] === 'large'">
               <rendered-description
                 :content="object.artist?.description"
                 :update-url="`channels/${object.uuid}/`"
diff --git a/front/src/views/library/LibraryBase.vue b/front/src/views/library/LibraryBase.vue
index aeb9119d8..387001172 100644
--- a/front/src/views/library/LibraryBase.vue
+++ b/front/src/views/library/LibraryBase.vue
@@ -105,7 +105,7 @@ const updateUploads = (count: number) => {
             <i class="ellipsis vertical icon" />
             <div class="menu">
               <a
-                v-if="object.actor.domain != $store.getters['instance/domain']"
+                v-if="object.actor.domain != store.getters['instance/domain']"
                 :href="object.fid"
                 target="_blank"
                 class="basic item"
@@ -125,7 +125,7 @@ const updateUploads = (count: number) => {
 
               <div class="divider" />
               <router-link
-                v-if="$store.state.auth.availablePermissions['moderation']"
+                v-if="store.state.auth.availablePermissions['moderation']"
                 class="basic item"
                 :to="{name: 'manage.library.libraries.detail', params: {id: object.uuid}}"
               >
@@ -200,13 +200,13 @@ const updateUploads = (count: number) => {
               class="ui small buttons"
             >
               <library-follow-button
-                v-if="$store.state.auth.authenticated"
+                v-if="store.state.auth.authenticated"
                 :library="object"
               />
             </div>
           </div>
 
-          <template v-if="$store.getters['ui/layoutVersion'] === 'large'">
+          <template v-if="store.getters['ui/layoutVersion'] === 'large'">
             <rendered-description
               :content="object.description ? {html: object.description} : null"
               :update-url="`channels/${object.uuid}/`"
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 851115734..c64eb167b 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -114,7 +114,7 @@ const deletePlaylist = async () => {
           </div>
           <div class="ui buttons">
             <button
-              v-if="$store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
+              v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
               class="ui icon labeled button"
               @click="edit = !edit"
             >
@@ -137,7 +137,7 @@ const deletePlaylist = async () => {
               {{ t('views.playlists.Detail.button.embed') }}
             </button>
             <dangerous-button
-              v-if="$store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
+              v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
               class="ui labeled danger icon button"
               :action="deletePlaylist"
             >