Fix linting issues

.vscode/settings.json

@@ -2,20 +2,13 @@
   "python.defaultInterpreterPath": "/workspace/funkwhale/api/.venv/bin/python",
   "python.testing.cwd": "/workspace/funkwhale/api",
   "python.envFile": "/workspace/funkwhale/.gitpod/.env",
-  "python.testing.pytestArgs": [
+  "python.testing.pytestArgs": ["--cov=funkwhale_api", "tests/"],
-      "--cov=funkwhale_api",
-      "tests/"
-  ],
   "python.testing.unittestEnabled": false,
   "python.testing.pytestEnabled": true,
   "vitest.enable": true,
   "vitest.commandLine": "yarn vitest",
-  "i18n-ally.localesPaths": [
+  "i18n-ally.localesPaths": ["front/src/locales"],
-    "front/src/locales"
-  ],
   "i18n-ally.pathMatcher": "*.json",
-  "i18n-ally.enabledFrameworks": [
+  "i18n-ally.enabledFrameworks": ["vue"],
-    "vue"
-  ],
   "i18n-ally.keystyle": "nested"
 }

front/src/components/Queue.vue

@@ -1,3 +1,11 @@
+<i18n>
+{
+  "en": {
+    "00:00": "00:00"
+  }
+}
+</i18n>
+
 <script setup lang="ts">
 import type { QueueItemSource } from '~/types'
 
@@ -56,7 +64,7 @@ const store = useStore()
 
 const labels = computed(() => ({
   queue: t('components.Queue.label.queue'),
-  populating: t('components.Queue.queue.label.populatingRadio'),
+  populating: t('components.Queue.label.populatingRadio'),
   duration: t('components.Queue.label.duration'),
   addArtistContentFilter: t('components.Queue.label.addArtistContentFilter'),
   restart: t('components.Queue.label.restart'),
@@ -129,8 +137,7 @@ const queueItems = computed(() => queue.value.map((track, index) => ({
     remove: t('components.Queue.label.remove'),
     selectTrack: t('components.Queue.label.selectTrack'),
     favorite: t('components.Queue.label.favorite')
-  },
+  }
-  duration: time.durationFormatted(track.uploads[0]?.duration ?? 0) ?? ''
 }) as QueueItemSource))
 
 const reorderTracks = async (from: number, to: number) => {
@@ -261,7 +268,11 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                   @click="loadRandomPreset()"
                 >
                   <h1>{{ currentTrack.title }}</h1>
-                  <h2>{{ currentTrack.artistName }} &mdash; {{ currentTrack.albumTitle }}</h2>
+                  <h2>
+                    {{ currentTrack.artistName }}
+                    <span class="symbol hyphen middle" />
+                    {{ currentTrack.albumTitle }}
+                  </h2>
                 </div>
               </Transition>
             </div>
@@ -313,14 +324,10 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
             class="ui small warning message"
           >
             <h3 class="header">
-              <translate translate-context="Sidebar/Player/No sources">
+              {{ $t('components.Queue.header.noSources') }}
-                The track has no available sources
-              </translate>
             </h3>
             <p v-if="hasNext && isPlaying">
-              <translate translate-context="Sidebar/Player/Error message.Paragraph">
+              {{ $t('components.Queue.message.automaticPlay') }}
-                The next track will play automatically in a few seconds…
-              </translate>
               <i class="loading spinner icon" />
             </p>
           </div>
@@ -388,8 +395,8 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                 <span class="right floated timer total">{{ time.parse(Math.round(duration)) }}</span>
               </template>
               <template v-else>
-                <span class="left floated timer">{{ durationFormatted(0) }}</span>
+                <span class="left floated timer">{{ $t('components.Queue.meta.startTime') }}</span>
-                <span class="right floated timer">{{ durationFormatted(0) }}</span>
+                <span class="right floated timer">{{ $t('components.Queue.meta.startTime') }}</span>
               </template>
             </div>
           </div>
@@ -470,7 +477,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                   class="ui basic primary button"
                   @click="$store.dispatch('radios/stop')"
                 >
-                  {{ $t('components.Queue.stopRadio') }}
+                  {{ $t('components.Queue.button.stopRadio') }}
                 </button>
               </div>
             </div>

front/src/components/Sidebar.vue

@@ -104,7 +104,7 @@ const moderationNotifications = computed(() =>
 const showLanguageModal = ref(false)
 const locale = ref(i18nLocale.value)
 watch(locale, (locale) => {
-  // setI18nLanguage(locale)
+  setI18nLanguage(locale)
 })
 
 const isProduction = import.meta.env.PROD

front/src/components/audio/LibraryFollowButton.vue

@@ -44,7 +44,7 @@ const toggle = () => {
     <span v-else-if="isPending">
       {{ $t('components.audio.LibraryFollowButton.button.cancel') }}
     </span>
-    <spanv-else>
+    <span v-else>
       {{ $t('components.audio.LibraryFollowButton.button.follow') }}
     </span>
   </button>

front/src/components/audio/Player.vue

@@ -103,10 +103,10 @@ initializeFirstTrack()
 const loopingTitle = computed(() => {
   const mode = looping.value
   return mode === LoopingMode.None
-    ? t('components.audio.Player.label.loopingDisabledLabel')
+    ? t('components.audio.Player.label.loopingDisabled')
     : mode === LoopingMode.LoopTrack
-      ? t('components.audio.Player.label.loopingSingleLabel')
+      ? t('components.audio.Player.label.loopingSingle')
-      : t('components.audio.Player.label.loopingWholeQueueLabel')
+      : t('components.audio.Player.label.loopingWholeQueue')
 })
 
 const hideArtist = () => {
@@ -276,8 +276,14 @@ const hideArtist = () => {
                   v-if="looping !== LoopingMode.None"
                   class="ui circular tiny vibrant label"
                 >
-                  <template v-if="looping === LoopingMode.LoopTrack">1</template>
+                  <span
-                  <span v-else-if="looping === LoopingMode.LoopQueue" class="infinity symbol" />
+                    v-if="looping === LoopingMode.LoopTrack"
+                    class="symbol single"
+                  />
+                  <span
+                    v-else-if="looping === LoopingMode.LoopQueue"
+                    class="infinity symbol"
+                  />
                 </span>
               </i>
             </button>

front/src/components/audio/PlayerControls.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useGettext } from 'vue3-gettext'
+import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
 import { usePlayer } from '~/composables/audio/player'
@@ -8,12 +8,12 @@ import { useQueue } from '~/composables/audio/queue'
 const { hasPrevious, playPrevious, hasNext, playNext, currentTrack } = useQueue()
 const { isPlaying } = usePlayer()
 
-const { $pgettext } = useGettext()
+const { t } = useI18n()
 const labels = computed(() => ({
-  previous: $pgettext('Sidebar/Player/Icon.Tooltip', 'Previous track'),
+  previous: t('components.audio.PlayerControls.labels.previous'),
-  play: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play'),
+  play: t('components.audio.PlayerControls.labels.play'),
-  pause: $pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause'),
+  pause: t('components.audio.PlayerControls.labels.pause'),
-  next: $pgettext('Sidebar/Player/Icon.Tooltip', 'Next track')
+  next: t('components.audio.PlayerControls.labels.next')
 }))
 </script>
 

front/src/components/audio/podcast/MobileRow.vue

@@ -116,7 +116,7 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
           class="really discrete"
           :date="track.creation_date"
         />
-        <span class="nospace middledot symbol" />
+        <span class="middledot symbol" />
         <human-duration
           v-if="track.uploads[0] && track.uploads[0].duration"
           :duration="track.uploads[0].duration"
@@ -127,7 +127,7 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
         class="track-meta mobile"
       >
         {{ track.artist?.name }}
-        <span class="nospace middledot symbol" />
+        <span class="middledot symbol" />
         <human-duration
           v-if="track.uploads[0] && track.uploads[0].duration"
           :duration="track.uploads[0].duration"

front/src/components/auth/ApplicationNew.vue

@@ -58,7 +58,7 @@ const created = (application: Application) => {
           {{ $t('components.auth.ApplicationNew.link.settings') }}
         </router-link>
         <h2 class="ui header">
-          {{ title }}
+          {{ labels.title }}
         </h2>
         <application-form
           :defaults="defaults"

front/src/components/auth/Settings.vue

@@ -725,7 +725,7 @@ fetchOwnedApps()
           {{ $t('components.auth.Settings.description.changeEmail') }}
         </p>
         <p>
-          {{ $t('components.auth.Settings.message.currentEmail', { email: email }) }}
+          {{ $t('components.auth.Settings.message.currentEmail', { email: $store.state.auth.profile?.email }) }}
         </p>
         <form
           class="ui form"

front/src/components/common/UserModal.vue

@@ -2,10 +2,13 @@
 import SemanticModal from '~/components/semantic/Modal.vue'
 import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
+
 import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { SUPPORTED_LOCALES } from '~/init/locale'
+
 interface Events {
   (e: 'update:show', value: boolean): void
   (e: 'showLanguageModalEvent'): void
@@ -94,7 +97,7 @@ const labels = computed(() => ({
               <span class="left colon symbol" />
             </span>
             <div class="right floated">
-              <span class="user-modal list-item">{{ $language.available[$language.current] }}</span>
+              <span class="user-modal list-item">{{ SUPPORTED_LOCALES[$i18n.locale] }}</span>
               <i class="action-hint chevron right icon" />
             </div>
           </div>

front/src/components/library/FileUpload.vue

@@ -306,7 +306,7 @@ useEventListener(window, 'beforeunload', (event) => {
           class="ui warning label"
         >
           {{ uploadedFilesCount + erroredFilesCount }}
-          <span class="nospace slash symbol" />
+          <span class="slash symbol" />
           {{ files.length }}
         </div>
         <div
@@ -314,7 +314,7 @@ useEventListener(window, 'beforeunload', (event) => {
           :class="['ui', {'success': erroredFilesCount === 0}, {'danger': erroredFilesCount > 0}, 'label']"
         >
           {{ uploadedFilesCount + erroredFilesCount }}
-          <span class="nospace slash symbol" />
+          <span class="slash symbol" />
           {{ files.length }}
         </div>
       </a>
@@ -335,7 +335,7 @@ useEventListener(window, 'beforeunload', (event) => {
           class="ui warning label"
         >
           {{ processedFilesCount }}
-          <span class="nospace slash symbol" />
+          <span class="slash symbol" />
           {{ processableFiles }}
         </div>
         <div
@@ -343,7 +343,7 @@ useEventListener(window, 'beforeunload', (event) => {
           :class="['ui', {'success': uploads.errored === 0}, {'danger': uploads.errored > 0}, 'label']"
         >
           {{ processedFilesCount }}
-          <span class="nospace slash symbol" />
+          <span class="slash symbol" />
           {{ processableFiles }}
         </div>
       </a>

front/src/components/library/Radios.vue

@@ -102,7 +102,7 @@ onMounted(() => $('.ui.dropdown').dropdown())
 const { t } = useI18n()
 const labels = computed(() => ({
   searchPlaceholder: t('components.library.Radios.placeholder.search'),
-  title: t('components.library.Podcasts.title')
+  title: t('components.library.Radios.title')
 }))
 
 const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value].sort((a, b) => a - b)))

front/src/components/manage/library/EditsCardList.vue

@@ -165,7 +165,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
-          <label for="search-edits">{{ $t('components.manage.library.EditsCardList.placeholder.search') }}</label>
+          <label for="search-edits">{{ $t('components.manage.library.EditsCardList.label.search') }}</label>
           <form @submit.prevent="query = search.value">
             <input
               id="search-edits"

front/src/components/vui/Pagination.vue

@@ -97,7 +97,7 @@ const labels = computed(() => ({
           href="#"
           class="item disabled"
         >
-          <span class="nospace ellipses symbol" />
+          <span class="ellipses symbol" />
         </a>
         <a
           v-else

front/src/composables/audio/queue.ts

@@ -1,19 +1,18 @@
 import type { Track, Upload } from '~/types'
 
 import { createGlobalState, useNow, useStorage, useTimeAgo, whenever } from '@vueuse/core'
-import { shuffle as shuffleArray, sum } from 'lodash-es'
 import { computed, ref, shallowReactive, watchEffect } from 'vue'
+import { shuffle as shuffleArray, sum } from 'lodash-es'
 import { useClamp } from '@vueuse/math'
-
+import { useI18n } from 'vue-i18n'
-import { delMany, getMany, setMany } from '~/composables/data/indexedDB'
-import { looping, LoopingMode, isPlaying } from '~/composables/audio/player'
 import { useStore } from '~/store'
 
+import { looping, LoopingMode, isPlaying } from '~/composables/audio/player'
+import { delMany, getMany, setMany } from '~/composables/data/indexedDB'
+import { setGain } from '~/composables/audio/audio-api'
 import { useTracks } from '~/composables/audio/tracks'
-import { gettext } from '~/init/locale'
 
 import axios from 'axios'
-import { setGain } from './audio-api'
 
 export interface QueueTrackSource {
   uuid: string
@@ -102,7 +101,7 @@ export const useQueue = createGlobalState(() => {
   const { currentSound } = useTracks()
 
   const createQueueTrack = async (track: Track): Promise<QueueTrack> => {
-    const { $pgettext } = gettext
+    const { t } = useI18n()
     const { default: store } = await import('~/store')
 
     if (track.uploads.length === 0) {
@@ -116,8 +115,8 @@ export const useQueue = createGlobalState(() => {
     return {
       id: track.id,
       title: track.title,
-      artistName: track.artist?.name ?? $pgettext('*/*/*', 'Unknown artist'),
+      artistName: track.artist?.name ?? t('composables.audio.queue.unknownArtist'),
-      albumTitle: track.album?.title ?? $pgettext('*/*/*', 'Unknown album'),
+      albumTitle: track.album?.title ?? t('composables.audio.queue.unknownAlbum'),
       position: track.position,
       artistId: track.artist?.id ?? -1,
       albumId: track.album?.id ?? -1,

front/src/locales/en_US.json

@@ -42,7 +42,7 @@
       "title": "About",
       "notApplicable": "N/A",
       "header": {
-                "about":"About this pod",
+        "about": "About this pod",
         "rules": "Rules",
         "terms": "Terms and privacy policy",
         "features": "Features",
@@ -92,7 +92,7 @@
       "title": "Home",
       "header": {
         "welcome": "Welcome to {podName}!",
-                "about":"About this Funkwhale pod",
+        "about": "About this Funkwhale pod",
         "statistics": "Statistics",
         "contact": "Contact",
         "aboutFunkwhale": "About Funkwhale",
@@ -155,6 +155,7 @@
     "Queue": {
       "label": {
         "queue": "Queue",
+        "populatingRadio": "Fetching radio track...",
         "duration": "Duration",
         "addArtistContentFilter": "Hide content from this artist…",
         "restart": "Restart track",
@@ -164,11 +165,16 @@
         "play": "Play",
         "remove": "Remove",
         "selectTrack": "Select track",
-                "favorite": "Favorite track"
+        "favorite": "Favorite track",
+        "enterFullscreen": "Enter fullscreen mode",
+        "exitFullscreen": "Exit fullscreen mode",
+        "showCoverArt": "Show Cover Art",
+        "showVisualizer": "Show MoonDrop visualizer"
       },
       "header": {
         "failure": "The track cannot be loaded",
-                "radio": "You have a radio playing"
+        "radio": "You have a radio playing",
+        "noSources": "The track has no available sources."
       },
       "message": {
         "automaticPlay": "The next track will play automatically in a few seconds…",
@@ -183,7 +189,8 @@
         "stopRadio": "Stop radio"
       },
       "meta": {
-                "queuePosition":"Track {index} of {length}"
+        "queuePosition": "Track {index} of {length}",
+        "startTime": "00:00"
       }
     },
     "RemoteSearchForm": {
@@ -263,7 +270,7 @@
           "seekBack30": "Seek backwards 30s",
           "seekForward30": "Seek forwards 30s",
           "playPrevious": "Play previous track",
-                    "playNext":"Play next track",
+          "playNext": "Play next track",
           "increaseVolume": "Increase volume",
           "decreaseVolume": "Decrease volume",
           "toggleMute": "Toggle mute",
@@ -581,7 +588,7 @@
         },
         "Widget": {
           "button": {
-                        "more":"Show more"
+            "more": "Show more"
           }
         }
       },
@@ -649,6 +656,14 @@
             "noResults": "Nothing found"
           }
         }
+      },
+      "PlayerControls": {
+        "labels": {
+          "previous": "Previous track",
+          "next": "Next track",
+          "pause": "Pause",
+          "play": "Play"
+        }
       }
     },
     "auth": {
@@ -659,7 +674,11 @@
         },
         "header": {
           "appDetails": "Application Details",
-                    "editApp": "Edit application"
+          "editApp": "Edit application",
+          "appSecretWarning": "Keep a copy of this token in a safe place."
+        },
+        "message": {
+          "appSecretWarning": "You won't be able to see it again once you leave this screen."
         },
         "help": {
           "appDetails": "Application ID and secret are really sensitive values and must be treated like passwords. Do not share those with anyone else."
@@ -722,7 +741,7 @@
           "unknownPermissions": "The application is also requesting the following unknown permissions:"
         },
         "button": {
-                    "authorize":"Authorize {app}"
+          "authorize": "Authorize {app}"
         },
         "help": {
           "copyCode": "You will be shown a code to copy-past in the application",
@@ -1285,12 +1304,10 @@
           "shortcuts": "Keyboard shortcuts"
         },
         "link": {
-                    "options": "Options",
           "profile": "Profile",
           "settings": "Settings",
           "logout": "Log out",
           "about": "About",
-                    "shortcuts": "Keyboard shortcuts",
           "support": "Help",
           "forum": "Forum",
           "docs": "Documentation",
@@ -1546,7 +1563,7 @@
           "suggest": "Suggest an edit on this artist"
         },
         "message": {
-                    "remote":"This object is managed by another server, you cannot edit it."
+          "remote": "This object is managed by another server, you cannot edit it."
         }
       },
       "Artists": {
@@ -1575,7 +1592,7 @@
           }
         },
         "pagination": {
-                    "results":"Results per page"
+          "results": "Results per page"
         },
         "empty": {
           "noResults": "No results matching your query"
@@ -1779,8 +1796,7 @@
         },
         "label": {
           "search": "Podcast title",
-                    "tags": "Tags",
+          "tags": "Tags"
-                    "excludeCompilation": "Exclude Compilation Artists"
         },
         "button": {
           "search": "Search",
@@ -1819,12 +1835,9 @@
           "instance": "Instance radios",
           "user": "User radios"
         },
-                "link": {
+        "link": {},
-
-                },
         "label": {
-                    "search": "Search",
+          "search": "Search"
-                    "tags": "Tags"
         },
         "button": {
           "search": "Search",
@@ -1874,10 +1887,9 @@
           "delete": "Delete"
         },
         "link": {
-                    "domain":"View on {domain}",
+          "domain": "View on {domain}",
-                    "wikipedia":"Search on Wikipedia",
+          "wikipedia": "Search on Wikipedia",
-                    "discogs":"Search on Discogs",
+          "discogs": "Search on Discogs",
-                    "musicbrainz":"View on MusicBrainz",
           "moderation": "Open in moderation interface",
           "django": "View in Django's admin"
         },
@@ -1936,7 +1948,7 @@
           "suggest": "Suggest an edit on this track"
         },
         "message": {
-                    "remote":" This object is managed by another server, you cannot edit it."
+          "remote": " This object is managed by another server, you cannot edit it."
         }
       },
       "radios": {
@@ -1982,7 +1994,7 @@
         },
         "Filter": {
           "excludeLabel": "Exclude",
-                    "matchingTracks":"{count} track matching combined filters | {count} tracks matching filter",
+          "matchingTracks": "{count} track matching combined filters | {count} tracks matching filter",
           "matchingTracksModalHeader": "Tracks matching filter",
           "cancelButton": "Cancel",
           "removeButton": "Remove"
@@ -2207,9 +2219,7 @@
               "descending": "Descending"
             }
           },
-                    "link": {
+          "link": {},
-                        "local": "Local"
-                    },
           "table": {
             "tag": {
               "header": {
@@ -2580,7 +2590,7 @@
               "refused": "Refused",
               "approved": "Approved",
               "assignedTo": "Assigned to",
-                            "resolutionDate":"Resolution date",
+              "resolutionDate": "Resolution date",
               "internalNotes": "Internal notes"
             }
           },
@@ -2650,8 +2660,9 @@
               "header": {
                 "owner": "Owner",
                 "status": "Status",
-                                "creationDate":"Creation date",
+                "creationDate": "Creation date",
                 "expirationDate": "Expiration date",
+                "user": "User",
                 "code": "Code"
               }
             }
@@ -2791,7 +2802,7 @@
     "playlists": {
       "Card": {
         "meta": {
-                    "tracks":"No tracks | {tracks_count} track | {tracks_count} tracks"
+          "tracks": "No tracks | {tracks_count} track | {tracks_count} tracks"
         }
       },
       "Editor": {
@@ -2859,7 +2870,7 @@
           "edit": "Edit"
         },
         "header": {
-                    "addToPlaylist":"Add to playlist",
+          "addToPlaylist": "Add to playlist",
           "track": "{title}, by {artist}",
           "manage": "Manage playlists",
           "addFailure": "The track can't be added to a playlist",
@@ -2907,6 +2918,8 @@
         "startTagsRadio": "Start tags radio",
         "stopArtistsRadio": "Stop artists radio",
         "startArtistsRadio": "Start artists radio",
+        "stopPlaylistsRadio": "Stop playlists radio",
+        "startPlaylistsRadio": "Start playlists radio",
         "stopRadio": "Stop radio",
         "startRadio": "Play radio"
       },
@@ -2947,8 +2960,9 @@
       "usePlayOptions": {
         "addToQueueMessage": "{count} tracks were added to your queue | {count} track was added to your queue | {count} tracks were added to your queue"
       },
-            "useQueue": {
+      "queue": {
-                "queueShuffled": "Queue shuffled!"
+        "unknownArtist": "Unknown Artist",
+        "unknownAlbum": "Unknown Album"
       }
     },
     "locale": {
@@ -3029,7 +3043,6 @@
           "albumTitle": "'Album name",
           "artistName": "'Artist name",
           "name": "'Name",
-                    "length": "'Duration",
           "itemsCount": "'Items",
           "size": "'Size",
           "bitrate": "'Bitrate",
@@ -3199,19 +3212,6 @@
       }
     }
   },
-    "embed": {
-        "EmbedFrame": {
-            "error": {
-                "badResource": "Widget improperly configured (bad resource type {type}).",
-                "missingResourceId": "Widget improperly configured (missing resource id).",
-                "trackNotFound": "Track not found.",
-                "unauthenticated": "You need to login to access this resource.",
-                "unknownServer": "An unknown error occurred while loading track data from server.",
-                "trackUnavailable": "This track is unavailable.",
-                "unknownTrack": "An unknown error occurred while loading track data."
-            }
-        }
-    },
   "init": {
     "axios": {
       "rateLimitDelay": "You sent too many requests and have been rate limited, please try again in {delay}",
@@ -3435,7 +3435,7 @@
         },
         "ArtistDetail": {
           "warning": {
-                        "stats":"Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object"
+            "stats": "Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object"
           },
           "header": {
             "local": "Local",
@@ -3554,7 +3554,6 @@
             "audioContent": {
               "cachedSize": "Cached size",
               "totalSize": "Total size"
-
             }
           }
         },
@@ -3580,7 +3579,6 @@
               "content": {
                 "warning": "The tag will be removed and unlinked from any existing entity. This action is irreversible."
               }
-
             }
           },
           "table": {
@@ -4203,7 +4201,7 @@
             "size": "Total size of the files in this library"
           },
           "meta": {
-                        "tracks":"No tracks | {count} track | {count} tracks"
+            "tracks": "No tracks | {count} track | {count} tracks"
           },
           "button": {
             "upload": "Upload"
@@ -4285,7 +4283,7 @@
           },
           "label": {
             "name": "Name",
-                        "description" :"Description",
+            "description": "Description",
             "visibility": "Visibility"
           },
           "button": {
@@ -4307,7 +4305,7 @@
           "loading": {
             "libraries": "Loading libraries…"
           },
-                    "header":{
+          "header": {
             "libraries": "My libraries"
           },
           "empty": {

front/src/style/globals/_utils.scss

@@ -127,70 +127,34 @@ span.diff.removed {
 }
 
 .symbol {
+  &.left::after {
+    padding-right: 0.25em;
+  }
+
+  &.right::after {
+    padding-left: 0.25em;
+  }
+
+  &.middle::after {
+    padding: 0 0.25em;
+  }
+
   &.at::after {
     content: "@";
   }
 
-  &.slash {
+  &.slash::after {
-    &.left::after {
-      padding-right: 0.25em;
     content: "/";
   }
 
-    &.right::after {
+  &.pipe::after {
-      padding-left: 0.25em;
-      content: "/";
-    }
-
-    &.middle::after {
-      padding: 0.25em;
-      content: "/";
-    }
-
-    &.nospace::after {
-      content: "/";
-    }
-  }
-
-  &.pipe {
-    &.left::after {
-      padding-right: 0.25em;
     content: "|";
   }
 
-    &.right::after {
+  &.middledot::after {
-      padding-left: 0.25em;
-      content: "|";
-    }
-
-    &.middle::after {
-      padding: 0.25em;
-      content: "|";
-    }
-  }
-
-  &.middledot {
-
-    &.left::before {
-      padding-right: 0.25em;
     content: "·";
   }
 
-    &.right::after {
-      padding-left: 0.25em;
-      content: "·";
-    }
-
-    &.middle::after {
-      padding: 0.25em;
-      content: "·";
-    }
-
-    &.nospace::after {
-      content: "·"; 
-    }
-  }
-
   &.infinity::after {
     content: "∞";
   }
@@ -203,58 +167,22 @@ span.diff.removed {
     content: "#";
   }
 
-  &.ellipses {
+  &.ellipses::after {
-
-    &.nospace::after {
     content: "…";
   }
 
-    &.middle::after {
-      padding: 0.25em;
-      content: "…";
-    }
-  }
-
   &.doubledot::after {
     content: "..";
   }
 
-  &.hyphen {
+  &.hyphen::after {
-
-    &.left::before {
-      padding-right: 0.25em;
     content: "-";
   }
 
-    &.right {
+  &.colon::after {
-      padding-left: 0.25em;
-      content: "-";
-    }
-
-    &.middle::after {
-      padding: 0.25em;
-      content: "-";
-    }
-  }
-
-  &.colon {
-
-    &.left::before {
-      padding-right: 0.25em;
     content: ":";
   }
 
-    &.right::after {
-      padding-left: 0.25em;
-      content: ":";
-    }
-
-    &.middle::after {
-      padding: 0.25em;
-      content: ":";
-    }
-  }
-
   &.percent::after {
     content: "%";
   }

front/src/views/playlists/Detail.vue

@@ -93,7 +93,7 @@ const deletePlaylist = async () => {
           <div class="content">
             {{ playlist.name }}
             <div class="sub header">
-              {{ $t('views.playlists.Detail.meta.tracks', {count: tracks_count, username: playlist.user.username}) }}
+              {{ $t('views.playlists.Detail.meta.tracks', {count: playlist.tracks_count, username: playlist.user.username}) }}
               <br>
               <duration :seconds="playlist.duration" />
             </div>

front/yarn.lock

@@ -3925,6 +3925,16 @@ json5@^2.1.3, json5@^2.2.0, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
+jsonc-eslint-parser@2.1.0, jsonc-eslint-parser@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-2.1.0.tgz#4c126b530aa583d85308d0b3041ff81ce402bbb2"
+  integrity sha512-qCRJWlbP2v6HbmKW7R3lFbeiVWHo+oMJ0j+MizwvauqnCV/EvtAeEeuCgoc/ErtsuoKgYB8U4Ih8AxJbXoE6/g==
+  dependencies:
+    acorn "^8.5.0"
+    eslint-visitor-keys "^3.0.0"
+    espree "^9.0.0"
+    semver "^7.3.5"
+
 jsonc-eslint-parser@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz#8cbe99f6f5199acbc5a823c4c0b6135411027fa6"
@@ -3936,16 +3946,6 @@ jsonc-eslint-parser@^1.0.1:
     espree "^6.0.0"
     semver "^6.3.0"
 
-jsonc-eslint-parser@^2.0.0, jsonc-eslint-parser@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-2.1.0.tgz#4c126b530aa583d85308d0b3041ff81ce402bbb2"
-  integrity sha512-qCRJWlbP2v6HbmKW7R3lFbeiVWHo+oMJ0j+MizwvauqnCV/EvtAeEeuCgoc/ErtsuoKgYB8U4Ih8AxJbXoE6/g==
-  dependencies:
-    acorn "^8.5.0"
-    eslint-visitor-keys "^3.0.0"
-    espree "^9.0.0"
-    semver "^7.3.5"
-
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"