From c2f351ea6bcdb058111db8b5472ee7fbe989ba3c Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sat, 26 Nov 2022 23:16:46 +0000
Subject: [PATCH] Cleanup HTML templates

---
 .../components/admin/SignupFormBuilder.vue    |  2 +-
 front/src/components/audio/ChannelCard.vue    |  4 +--
 .../components/audio/LibraryFollowButton.vue  | 12 ++-----
 front/src/components/audio/PlayButton.vue     | 12 +++----
 front/src/components/audio/artist/Card.vue    |  8 ++---
 front/src/components/auth/ApplicationForm.vue |  8 ++---
 front/src/components/auth/Settings.vue        |  5 +--
 front/src/components/channels/AlbumModal.vue  |  8 ++---
 front/src/components/channels/AlbumSelect.vue | 12 +++----
 front/src/components/channels/UploadForm.vue  | 16 +++------
 front/src/components/channels/UploadModal.vue | 16 +++------
 front/src/components/common/ActionTable.vue   | 26 +++++---------
 front/src/components/common/CollapseLink.vue  |  8 ++---
 front/src/components/common/Duration.vue      | 12 +++----
 front/src/components/common/ExpandableDiv.vue | 12 +++----
 .../favorites/TrackFavoriteIcon.vue           |  8 ++---
 .../src/components/federation/FetchButton.vue | 32 +++++------------
 front/src/components/library/AlbumBase.vue    | 16 +++------
 front/src/components/library/AlbumDetail.vue  |  3 --
 front/src/components/library/AlbumEdit.vue    |  8 ++---
 front/src/components/library/ArtistBase.vue   |  4 +--
 front/src/components/library/ArtistEdit.vue   |  8 ++---
 front/src/components/library/EditForm.vue     |  8 ++---
 front/src/components/library/FileUpload.vue   | 15 ++++----
 front/src/components/library/TrackDetail.vue  | 36 +++++--------------
 front/src/components/library/TrackEdit.vue    |  8 ++---
 .../src/components/library/radios/Builder.vue |  4 +--
 .../components/manage/library/AlbumsTable.vue |  4 +--
 .../components/manage/library/TracksTable.vue |  4 +--
 .../manage/library/UploadsTable.vue           |  8 ++---
 .../manage/moderation/InstancePolicyForm.vue  | 20 +++++------
 .../manage/moderation/ReportCard.vue          |  8 ++---
 .../manage/moderation/UserRequestCard.vue     |  8 ++---
 .../components/playlists/PlaylistModal.vue    |  8 ++---
 34 files changed, 113 insertions(+), 258 deletions(-)

diff --git a/front/src/components/admin/SignupFormBuilder.vue b/front/src/components/admin/SignupFormBuilder.vue
index 617ff4b8c..febddd3ee 100644
--- a/front/src/components/admin/SignupFormBuilder.vue
+++ b/front/src/components/admin/SignupFormBuilder.vue
@@ -45,7 +45,7 @@ if (!value.value?.fields) {
 
 const addField = () => {
   value.value.fields.push({
-    label: t('components.admin.SignupFormBuilder.label.additionalField') + ' ' + (value.value.fields.length + 1),
+    label: t('components.admin.SignupFormBuilder.label.additionalField', { fieldNumber: value.value.fields.length + 1 }),
     required: true,
     input_type: 'short_text'
   })
diff --git a/front/src/components/audio/ChannelCard.vue b/front/src/components/audio/ChannelCard.vue
index 391ca0837..ecc4b98b9 100644
--- a/front/src/components/audio/ChannelCard.vue
+++ b/front/src/components/audio/ChannelCard.vue
@@ -70,9 +70,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
         >
           {{ $t('components.audio.ChannelCard.meta.episodes', {episode_count: object.artist.tracks_count}) }}
         </span>
-        <span
-          v-else
-        >
+        <span v-else>
           {{ $t('components.audio.ChannelCard.meta.tracks', {tracks_count: object.artist?.tracks_count}) }}
         </span>
         <tags-list
diff --git a/front/src/components/audio/LibraryFollowButton.vue b/front/src/components/audio/LibraryFollowButton.vue
index 1c21b939c..94cf69c5c 100644
--- a/front/src/components/audio/LibraryFollowButton.vue
+++ b/front/src/components/audio/LibraryFollowButton.vue
@@ -38,19 +38,13 @@ const toggle = () => {
     @click.stop="toggle"
   >
     <i class="heart icon" />
-    <span
-      v-if="isApproved"
-    >
+    <span v-if="isApproved">
       {{ $t('components.audio.LibraryFollowButton.button.unfollow') }}
     </span>
-    <span
-      v-else-if="isPending"
-    >
+    <span v-else-if="isPending">
       {{ $t('components.audio.LibraryFollowButton.button.cancel') }}
     </span>
-    <span
-      v-else
-    >
+    <spanv-else>
       {{ $t('components.audio.LibraryFollowButton.button.follow') }}
     </span>
   </button>
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index c7395b51f..860639184 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -198,12 +198,12 @@ const openMenu = () => {
           @click.stop.prevent="$router.push(`/library/tracks/${track?.id}/`)"
         >
           <i class="info icon" />
-          <span
-            v-if="track.artist?.content_category === 'podcast'"
-          >{{ $t('components.audio.PlayButton.button.episodeDetails') }}</span>
-          <span
-            v-else
-          >{{ $t('components.audio.PlayButton.button.trackDetails') }}</span>
+          <span v-if="track.artist?.content_category === 'podcast'">
+            {{ $t('components.audio.PlayButton.button.episodeDetails') }}
+          </span>
+          <span v-else>
+            {{ $t('components.audio.PlayButton.button.trackDetails') }}
+          </span>
         </button>
         <div class="divider" />
         <button
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index a9dbf51d9..cb5ec705a 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -62,14 +62,10 @@ const imageUrl = computed(() => cover.value?.urls.original
       />
     </div>
     <div class="extra content">
-      <span
-        v-if="artist.content_category === 'music'"
-      >
+      <span v-if="artist.content_category === 'music'">
         {{ $t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
       </span>
-      <span
-        v-else
-      >
+      <span v-else>
         {{ $t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
       </span>
       <play-button
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
index c7b6d9680..ceb59ab49 100644
--- a/front/src/components/auth/ApplicationForm.vue
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -202,14 +202,10 @@ const allScopes = computed(() => {
       :class="['ui', {'loading': isLoading}, 'success', 'button']"
       type="submit"
     >
-      <span
-        v-if="app !== null"
-      >
+      <span v-if="app !== null">
         {{ $t('components.auth.ApplicationForm.button.update') }}
       </span>
-      <span
-        v-else
-      >
+      <span v-else>
         {{ $t('components.auth.ApplicationForm.button.create') }}
       </span>
     </button>
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index bc1689ed9..1f6aca182 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -665,8 +665,9 @@ fetchOwnedApps()
                 >
                   {{ $t('components.auth.Settings.button.remove') }}
                   <template #modal-header>
-                    <p />
-                    {{ $t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
+                    <p>
+                      {{ $t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
+                    </p>
                   </template>
                   <template #modal-content>
                     <p>
diff --git a/front/src/components/channels/AlbumModal.vue b/front/src/components/channels/AlbumModal.vue
index b8064aa0f..387d7dbd8 100644
--- a/front/src/components/channels/AlbumModal.vue
+++ b/front/src/components/channels/AlbumModal.vue
@@ -33,14 +33,10 @@ const albumForm = ref()
     class="small"
   >
     <h4 class="header">
-      <span
-        v-if="channel.content_category === 'podcast'"
-      >
+      <span v-if="channel.content_category === 'podcast'">
         {{ $t('components.channels.AlbumModal.header.newSeries') }}
       </span>
-      <span
-        v-else
-      >
+      <span v-else>
         {{ $t('components.channels.AlbumModal.header.newAlbum') }}
       </span>
     </h4>
diff --git a/front/src/components/channels/AlbumSelect.vue b/front/src/components/channels/AlbumSelect.vue
index eb037101a..bc0746463 100644
--- a/front/src/components/channels/AlbumSelect.vue
+++ b/front/src/components/channels/AlbumSelect.vue
@@ -47,12 +47,12 @@ watch(() => props.channel, fetchData, { immediate: true })
 <template>
   <div>
     <label for="album-dropdown">
-      <span
-        v-if="channel && channel.artist && channel.artist.content_category === 'podcast'"
-      >{{ $t('components.channels.AlbumSelect.label.series') }}</span>
-      <span
-        v-else
-      >{{ $t('components.channels.AlbumSelect.label.album') }}</span>
+      <span v-if="channel && channel.artist && channel.artist.content_category === 'podcast'">
+        {{ $t('components.channels.AlbumSelect.label.series') }}
+      </span>
+      <span v-else>
+        {{ $t('components.channels.AlbumSelect.label.album') }}
+      </span>
     </label>
     <select
       id="album-dropdown"
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index e98ba6330..d8a05c013 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@@ -530,25 +530,17 @@ const labels = computed(() => ({
                   {{ humanSize(file.size ?? 0) }}
                   <template v-if="file.response.duration">
                     <span class="middle middledot symbol" />
-                    <human-duration
-                      :duration="file.response.duration"
-                    />
+                    <human-duration :duration="file.response.duration" />
                   </template>
                 </template>
                 <template v-else>
-                  <span
-                    v-if="file.active"
-                  >
+                  <span v-if="file.active">
                     {{ $t('components.channels.UploadForm.status.uploading') }}
                   </span>
-                  <span
-                    v-else-if="file.error"
-                  >
+                  <span v-else-if="file.error">
                     {{ $t('components.channels.UploadForm.status.errored') }}
                   </span>
-                  <span
-                    v-else
-                  >
+                  <span v-else>
                     {{ $t('components.channels.UploadForm.status.pending') }}
                   </span>
                   <span class="middle middledot symbol" />
diff --git a/front/src/components/channels/UploadModal.vue b/front/src/components/channels/UploadModal.vue
index 87d4232e1..0fa1346c5 100644
--- a/front/src/components/channels/UploadModal.vue
+++ b/front/src/components/channels/UploadModal.vue
@@ -54,24 +54,16 @@ const isLoading = ref(false)
     class="small"
   >
     <h4 class="header">
-      <span
-        v-if="step === 1"
-      >
+      <span v-if="step === 1">
         {{ $t('components.channels.UploadModal.header.publish') }}
       </span>
-      <span
-        v-else-if="step === 2"
-      >
+      <span v-else-if="step === 2">
         {{ $t('components.channels.UploadModal.header.uploadFiles') }}
       </span>
-      <span
-        v-else-if="step === 3"
-      >
+      <span v-else-if="step === 3">
         {{ $t('components.channels.UploadModal.header.uploadDetails') }}
       </span>
-      <span
-        v-else-if="step === 4"
-      >
+      <span v-else-if="step === 4">
         {{ $t('components.channels.UploadModal.header.processing') }}
       </span>
     </h4>
diff --git a/front/src/components/common/ActionTable.vue b/front/src/components/common/ActionTable.vue
index 7d870813a..a47375a5a 100644
--- a/front/src/components/common/ActionTable.vue
+++ b/front/src/components/common/ActionTable.vue
@@ -211,9 +211,7 @@ const launchAction = async () => {
                     {{ $t('components.common.ActionTable.button.go') }}
                     <template #modal-header>
                       <p>
-                        <span
-                          key="1"
-                        >
+                        <span key="1">
                           {{ $t('components.common.ActionTable.modal.performAction.header', {action: currentActionName, count: affectedObjectsCount} ) }}
                         </span>
                       </p>
@@ -223,9 +221,7 @@ const launchAction = async () => {
                         <template v-if="currentAction?.confirmationMessage">
                           {{ currentAction?.confirmationMessage }}
                         </template>
-                        <span
-                          v-else
-                        >
+                        <span v-else>
                           {{ $t('components.common.ActionTable.modal.performAction.content.warning') }}
                         </span>
                       </p>
@@ -247,14 +243,10 @@ const launchAction = async () => {
                   </button>
                 </div>
                 <div class="count field">
-                  <span
-                    v-if="selectAll"
-                  >
+                  <span v-if="selectAll">
                     {{ $t('components.common.ActionTable.button.allSelected', {count: objectsData.count}) }}
                   </span>
-                  <span
-                    v-else
-                  >
+                  <span v-else>
                     {{ $t('components.common.ActionTable.button.selected', {count: checked.length, total: objectsData.count}) }}
                   </span>
                   <template v-if="currentAction?.allowAll && checkable.length > 0 && checkable.length === checked.length">
@@ -263,9 +255,7 @@ const launchAction = async () => {
                       href=""
                       @click.prevent="selectAll = true"
                     >
-                      <span
-                        key="3"
-                      >
+                      <span key="3">
                         {{ $t('components.common.ActionTable.button.selectElement', {total: objectsData.count}) }}
                       </span>
                     </a>
@@ -274,9 +264,9 @@ const launchAction = async () => {
                       href=""
                       @click.prevent="selectAll = false"
                     >
-                      <span
-                        key="4"
-                      >{{ $t('components.common.ActionTable.button.selectCurrentPage') }}</span>
+                      <span key="4">
+                        {{ $t('components.common.ActionTable.button.selectCurrentPage') }}
+                      </span>
                     </a>
                   </template>
                 </div>
diff --git a/front/src/components/common/CollapseLink.vue b/front/src/components/common/CollapseLink.vue
index 98df6f642..2c42bf16f 100644
--- a/front/src/components/common/CollapseLink.vue
+++ b/front/src/components/common/CollapseLink.vue
@@ -20,14 +20,10 @@ const value = useVModel(props, 'modelValue', emit)
     class="collapse link"
     @click.prevent="value = !value"
   >
-    <span
-      v-if="value"
-    >
+    <span v-if="value">
       {{ $t('components.common.CollapseLink.button.expand') }}
     </span>
-    <span
-      v-else
-    >
+    <span v-else>
       {{ $t('components.common.CollapseLink.button.collapse') }}
     </span>
     <i :class="[{ down: !value, right: value }, 'angle', 'icon']" />
diff --git a/front/src/components/common/Duration.vue b/front/src/components/common/Duration.vue
index c7a417bda..943d21e87 100644
--- a/front/src/components/common/Duration.vue
+++ b/front/src/components/common/Duration.vue
@@ -18,11 +18,11 @@ const duration = computed(() => {
 
 <template>
   <span>
-    <span
-      v-if="duration.hours > 0"
-    >{{ $t('components.common.Duration.meta.hours', {hours: duration.hours, minutes: duration.minutes}) }}</span>
-    <span
-      v-else
-    >{{ $t('components.common.Duration.meta.minutes', {minutes: duration.minutes}) }}</span>
+    <span v-if="duration.hours > 0">
+      {{ $t('components.common.Duration.meta.hours', duration) }}
+    </span>
+    <span v-else>
+      {{ $t('components.common.Duration.meta.minutes', duration) }}
+    </span>
   </span>
 </template>
diff --git a/front/src/components/common/ExpandableDiv.vue b/front/src/components/common/ExpandableDiv.vue
index 19ad0f545..a47b8db69 100644
--- a/front/src/components/common/ExpandableDiv.vue
+++ b/front/src/components/common/ExpandableDiv.vue
@@ -26,12 +26,12 @@ const truncated = computed(() => props.content.slice(0, props.length))
       @click.prevent="toggleExpanded()"
     >
       <br>
-      <span
-        v-if="expanded"
-      >{{ $t('components.common.ExpandableDiv.button.less') }}</span>
-      <span
-        v-else
-      >{{ $t('components.common.ExpandableDiv.button.more') }}</span>
+      <span v-if="expanded">
+        {{ $t('components.common.ExpandableDiv.button.less') }}
+      </span>
+      <span v-else>
+        {{ $t('components.common.ExpandableDiv.button.more') }}
+      </span>
     </a>
   </div>
 </template>
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index c2ca0d9ef..3116f9ee4 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -35,14 +35,10 @@ const title = computed(() => isFavorite.value
     @click.stop="$store.dispatch('favorites/toggle', track.id)"
   >
     <i class="heart icon" />
-    <span
-      v-if="isFavorite"
-    >
+    <span v-if="isFavorite">
       {{ $t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
     </span>
-    <span
-      v-else
-    >
+    <span v-else>
       {{ $t('components.favorites.TrackFavoriteIcon.button.add') }}
     </span>
   </button>
diff --git a/front/src/components/federation/FetchButton.vue b/front/src/components/federation/FetchButton.vue
index 531551a6a..401b6f455 100644
--- a/front/src/components/federation/FetchButton.vue
+++ b/front/src/components/federation/FetchButton.vue
@@ -131,44 +131,28 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
                     {{ $t('components.federation.FetchButton.table.error.label.detail') }}
                   </td>
                   <td>
-                    <span
-                      v-if="data.detail.error_code === 'http' && data.detail.status_code"
-                    >
+                    <span v-if="data.detail.error_code === 'http' && data.detail.status_code">
                       {{ $t('components.federation.FetchButton.table.error.value.httpStatus', {status: data.detail.status_code}) }}
                     </span>
-                    <span
-                      v-else-if="['http', 'request'].indexOf(data.detail.error_code) > -1"
-                    >
+                    <span v-else-if="['http', 'request'].includes(data.detail.error_code)">
                       {{ $t('components.federation.FetchButton.table.error.value.httpError') }}
                     </span>
-                    <span
-                      v-else-if="data.detail.error_code === 'timeout'"
-                    >
+                    <span v-else-if="data.detail.error_code === 'timeout'">
                       {{ $t('components.federation.FetchButton.table.error.value.timeoutError') }}
                     </span>
-                    <span
-                      v-else-if="data.detail.error_code === 'connection'"
-                    >
+                    <span v-else-if="data.detail.error_code === 'connection'">
                       {{ $t('components.federation.FetchButton.table.error.value.connectionError') }}
                     </span>
-                    <span
-                      v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].indexOf(data.detail.error_code) > -1"
-                    >
+                    <span v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].includes(data.detail.error_code)">
                       {{ $t('components.federation.FetchButton.table.error.value.invalidJsonError') }}
                     </span>
-                    <span
-                      v-else-if="data.detail.error_code === 'validation'"
-                    >
+                    <span v-else-if="data.detail.error_code === 'validation'">
                       {{ $t('components.federation.FetchButton.table.error.value.invalidAttributesError') }}
                     </span>
-                    <span
-                      v-else-if="data.detail.error_code === 'unhandled'"
-                    >
+                    <span v-else-if="data.detail.error_code === 'unhandled'">
                       {{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
                     </span>
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
                     </span>
                   </td>
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index e85086dbc..a2b7759bc 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -177,14 +177,10 @@ const remove = async () => {
                   />
                   <template v-if="totalTracks > 0">
                     <div class="ui hidden very small divider" />
-                    <span
-                      v-if="isSerie"
-                    >
+                    <span v-if="isSerie">
                       {{ $t('components.library.AlbumBase.meta.episodes', {episode_count: totalTracks}) }}
                     </span>
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.library.AlbumBase.meta.tracks', {tracks_count: totalTracks}) }}
                     </span>
                   </template>
@@ -260,14 +256,10 @@ const remove = async () => {
                 <span class="middle middledot symbol" />
               </template>
               <template v-if="totalTracks > 0">
-                <span
-                  v-if="isSerie"
-                >
+                <span v-if="isSerie">
                   {{ $t('components.library.AlbumBase.meta.episodes', {episode_count: totalTracks}) }}
                 </span>
-                <span
-                  v-else
-                >
+                <span v-else>
                   {{ $t('components.library.AlbumBase.meta.tracks', {tracks_count: totalTracks}) }}
                 </span>
                 <span class="middle middledot symbol" />
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index 1e42c61bf..cb0bcd81c 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -56,9 +56,6 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
     v-if="isLoadingTracks"
     class="ui vertical segment"
   >
-    <div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
-  </div>
-  <div v-else-if="object">
     <h2 class="ui header">
       <span v-if="isSerie">
         {{ $t('components.library.AlbumDetail.header.episodes') }}
diff --git a/front/src/components/library/AlbumEdit.vue b/front/src/components/library/AlbumEdit.vue
index 11c309079..0d27fd3c8 100644
--- a/front/src/components/library/AlbumEdit.vue
+++ b/front/src/components/library/AlbumEdit.vue
@@ -22,14 +22,10 @@ const canEdit = store.state.auth.availablePermissions.library
   <section class="ui vertical stripe segment">
     <div class="ui text container">
       <h2>
-        <span
-          v-if="canEdit"
-        >
+        <span v-if="canEdit">
           {{ $t('components.library.AlbumEdit.header.edit') }}
         </span>
-        <span
-          v-else
-        >
+        <span v-else>
           {{ $t('components.library.AlbumEdit.header.suggest') }}
         </span>
       </h2>
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index a1371a195..a3d9b1fb1 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -117,9 +117,7 @@ watch(() => props.id, fetchData, { immediate: true })
                 v-if="albums"
                 class="sub header"
               >
-                <div>
-                  {{ $t('components.library.ArtistBase.meta.tracks', {count: totalTracks, albums: totalAlbums}) }}
-                </div>
+                {{ $t('components.library.ArtistBase.meta.tracks', {count: totalTracks, albums: totalAlbums}) }}
               </div>
             </div>
           </h2>
diff --git a/front/src/components/library/ArtistEdit.vue b/front/src/components/library/ArtistEdit.vue
index d047b9b6b..83acc7983 100644
--- a/front/src/components/library/ArtistEdit.vue
+++ b/front/src/components/library/ArtistEdit.vue
@@ -22,14 +22,10 @@ const canEdit = store.state.auth.availablePermissions.library
   <section class="ui vertical stripe segment">
     <div class="ui text container">
       <h2>
-        <span
-          v-if="canEdit"
-        >
+        <span v-if="canEdit">
           {{ $t('components.library.ArtistEdit.header.edit') }}
         </span>
-        <span
-          v-else
-        >
+        <span v-else>
           {{ $t('components.library.ArtistEdit.header.suggest') }}
         </span>
       </h2>
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index bff715d94..3312ac176 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -340,14 +340,10 @@ const resetField = (fieldId: string) => {
         type="submit"
         :disabled="isLoading || !mutationPayload"
       >
-        <span
-          v-if="canEdit"
-        >
+        <span v-if="canEdit">
           {{ $t('components.library.EditForm.button.submit') }}
         </span>
-        <span
-          v-else
-        >
+        <span v-else>
           {{ $t('components.library.EditForm.button.suggest') }}
         </span>
       </button>
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 797875cd6..9d1d501e7 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -462,28 +462,25 @@ useEventListener(window, 'beforeunload', (event) => {
                   v-else-if="file.success"
                   class="ui success label"
                 >
-                  <span
-                    key="1"
-                  >{{ $t('components.library.FileUpload.table.upload.status.uploaded') }}</span>
+                  <span key="1">
+                    {{ $t('components.library.FileUpload.table.upload.status.uploaded') }}
+                  </span>
                 </span>
                 <span
                   v-else-if="file.active"
                   class="ui warning label"
                 >
-                  <span
-                    key="2"
-                  >
+                  <span key="2">
                     {{ $t('components.library.FileUpload.table.upload.status.uploading') }}
                   </span>
+
                   {{ $t('components.library.FileUpload.table.upload.progress', {percent: parseFloat(file.progress ?? '0.00')}) }}
                 </span>
                 <span
                   v-else
                   class="ui label"
                 >
-                  <span
-                    key="3"
-                  >
+                  <span key="3">
                     {{ $t('components.library.FileUpload.table.upload.status.pending') }}
                   </span>
                 </span>
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index e6446bd3f..cbd9fe276 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -76,14 +76,10 @@ watchEffect(() => {
               class="ui fluid image track-cover-image"
             >
             <h3 class="ui header">
-              <span
-                v-if="track.artist?.content_category === 'music'"
-              >
+              <span v-if="track.artist?.content_category === 'music'">
                 {{ $t('components.library.TrackDetail.header.track') }}
               </span>
-              <span
-                v-else
-              >
+              <span v-else>
                 {{ $t('components.library.TrackDetail.header.episode') }}
               </span>
             </h3>
@@ -97,9 +93,7 @@ watchEffect(() => {
                     <template v-if="upload.duration">
                       {{ time.parse(upload.duration) }}
                     </template>
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.library.TrackDetail.notApplicable') }}
                     </span>
                   </td>
@@ -112,9 +106,7 @@ watchEffect(() => {
                     <template v-if="upload.size">
                       {{ humanSize(upload.size) }}
                     </template>
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.library.TrackDetail.notApplicable') }}
                     </span>
                   </td>
@@ -127,9 +119,7 @@ watchEffect(() => {
                     <template v-if="upload.extension">
                       {{ upload.extension }}
                     </template>
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.library.TrackDetail.notApplicable') }}
                     </span>
                   </td>
@@ -142,9 +132,7 @@ watchEffect(() => {
                     <template v-if="upload.bitrate">
                       {{ $t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}
                     </template>
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.library.TrackDetail.notApplicable') }}
                     </span>
                   </td>
@@ -188,14 +176,10 @@ watchEffect(() => {
               </tr>
               <tr v-if="track.album">
                 <td>
-                  <span
-                    v-if="track.album.artist.content_category === 'music'"
-                  >
+                  <span v-if="track.album.artist.content_category === 'music'">
                     {{ $t('components.library.TrackDetail.table.release.album') }}
                   </span>
-                  <span
-                    v-else
-                  >
+                  <span v-else>
                     {{ $t('components.library.TrackDetail.table.release.series') }}
                   </span>
                 </td>
@@ -243,9 +227,7 @@ watchEffect(() => {
                     target="_blank"
                     rel="noopener noreferrer"
                   >{{ license.name }}</a>
-                  <span
-                    v-else
-                  >
+                  <span v-else>
                     {{ $t('components.library.TrackDetail.notApplicable') }}
                   </span>
                 </td>
diff --git a/front/src/components/library/TrackEdit.vue b/front/src/components/library/TrackEdit.vue
index e29f2a93e..d8fa7b59c 100644
--- a/front/src/components/library/TrackEdit.vue
+++ b/front/src/components/library/TrackEdit.vue
@@ -44,14 +44,10 @@ fetchLicenses()
   <section class="ui vertical stripe segment">
     <div class="ui text container">
       <h2>
-        <span
-          v-if="canEdit"
-        >
+        <span v-if="canEdit">
           {{ $t('components.library.TrackEdit.header.edit') }}
         </span>
-        <span
-          key="2"
-        >
+        <span key="2">
           {{ $t('components.library.TrackEdit.header.suggest') }}
         </span>
       </h2>
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index b4e7695e4..81d251b34 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -334,9 +334,7 @@ onMounted(() => {
           </tbody>
         </table>
         <template v-if="checkResult && checkResult.candidates && checkResult.candidates.count">
-          <h3
-            class="ui header"
-          >
+          <h3 class="ui header">
             {{ $t('components.library.radios.Builder.header.matches', {count: checkResult.candidates.count}) }}
           </h3>
           <track-table
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index e12cfbc34..d6d5c500c 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -233,9 +233,7 @@ const labels = computed(() => ({
               v-if="scope.obj.release_date"
               :date="scope.obj.release_date"
             />
-            <span
-              v-else
-            >
+            <span v-else>
               {{ $t('components.manage.library.AlbumsTable.notApplicable') }}
             </span>
           </td>
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 3d4c52560..45b413a7b 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -243,9 +243,7 @@ const labels = computed(() => ({
               :title="scope.obj.license"
               @click.prevent="addSearchToken('license', scope.obj.license)"
             >{{ scope.obj.license }}</a>
-            <span
-              v-else
-            >
+            <span v-else>
               {{ $t('components.manage.library.TracksTable.notApplicable') }}
             </span>
           </td>
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index 843177d0a..5908d7cca 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -344,9 +344,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
           </td>
           <td>
             <span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>
-            <span
-              v-else
-            >
+            <span v-else>
               {{ $t('components.manage.library.UploadsTable.notApplicable') }}
             </span>
           </td>
@@ -358,9 +356,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
               v-if="scope.obj.accessed_date"
               :date="scope.obj.accessed_date"
             />
-            <span
-              v-else
-            >
+            <span v-else>
               {{ $t('components.manage.library.UploadsTable.notApplicable') }}
             </span>
           </td>
diff --git a/front/src/components/manage/moderation/InstancePolicyForm.vue b/front/src/components/manage/moderation/InstancePolicyForm.vue
index 0aaeb18d5..fd4294673 100644
--- a/front/src/components/manage/moderation/InstancePolicyForm.vue
+++ b/front/src/components/manage/moderation/InstancePolicyForm.vue
@@ -162,12 +162,12 @@ const remove = async () => {
           type="checkbox"
         >
         <label for="policy-is-active">
-          <span
-            v-if="current.isActive"
-          >{{ $t('components.manage.moderation.InstancePolicyForm.label.policyEnabled') }}</span>
-          <span
-            v-else
-          >{{ $t('components.manage.moderation.InstancePolicyForm.label.policyDisabled') }}</span>
+          <span v-if="current.isActive">
+            {{ $t('components.manage.moderation.InstancePolicyForm.label.policyEnabled') }}
+          </span>
+          <span v-else>
+            {{ $t('components.manage.moderation.InstancePolicyForm.label.policyDisabled') }}
+          </span>
           <tooltip :content="labels.isActiveHelp" />
         </label>
       </div>
@@ -229,14 +229,10 @@ const remove = async () => {
       :class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']"
       :disabled="isLoading"
     >
-      <span
-        v-if="object"
-      >
+      <span v-if="object">
         {{ $t('components.manage.moderation.InstancePolicyForm.button.update') }}
       </span>
-      <span
-        v-else
-      >
+      <span v-else>
         {{ $t('components.manage.moderation.InstancePolicyForm.button.create') }}
       </span>
     </button>
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index bc47a2168..8305710ab 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -227,9 +227,7 @@ const handleRemovedNote = (uuid: string) => {
                         :actor="obj.assigned_to"
                       />
                     </div>
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.manage.moderation.ReportCard.notApplicable') }}
                     </span>
                   </td>
@@ -244,9 +242,7 @@ const handleRemovedNote = (uuid: string) => {
                       :date="obj.handled_date"
                       :icon="true"
                     />
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.manage.moderation.ReportCard.notApplicable') }}
                     </span>
                   </td>
diff --git a/front/src/components/manage/moderation/UserRequestCard.vue b/front/src/components/manage/moderation/UserRequestCard.vue
index 32441c05d..996000619 100644
--- a/front/src/components/manage/moderation/UserRequestCard.vue
+++ b/front/src/components/manage/moderation/UserRequestCard.vue
@@ -155,9 +155,7 @@ const handleRemovedNote = (uuid: string) => {
                       :date="obj.handled_date"
                       :icon="true"
                     />
-                    <span
-                      v-else
-                    >
+                    <span v-else>
                       {{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
                     </span>
                   </td>
@@ -199,9 +197,7 @@ const handleRemovedNote = (uuid: string) => {
               <p v-if="value">
                 {{ value }}
               </p>
-              <span
-                v-else
-              >
+              <span v-else>
                 {{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
               </span>
               <div class="ui hidden divider" />
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index f249b4bd3..19c6a9ae1 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -86,16 +86,12 @@ store.dispatch('playlists/fetchOwn')
       <template v-if="track">
         <h2 class="ui header">
           {{ $t('components.playlists.PlaylistModal.header.addToPlaylist') }}
-          <div
-            class="ui sub header"
-          >
+          <div class="ui sub header">
             {{ $t('components.playlists.PlaylistModal.header.track', {artist: track.artist?.name, title: track.title}) }}
           </div>
         </h2>
       </template>
-      <span
-        v-else
-      >
+      <span v-else>
         {{ $t('components.playlists.PlaylistModal.header.manage') }}
       </span>
     </h4>