chore(eslint): apply automatic fixes to format front/src

front/src/App.vue

@@ -4,8 +4,8 @@ import { watchEffect, computed, onMounted, nextTick } from 'vue'
 import { type QueueTrack, useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
 import useLogger from '~/composables/useLogger'
-import { useStyleTag, useIntervalFn} from '@vueuse/core'
+import { useStyleTag, useIntervalFn } from '@vueuse/core'
-import { color } from '~/composables/color';
+import { color } from '~/composables/color'
 
 import { generateTrackCreditStringFromQueue } from '~/utils/utils'
 
@@ -80,8 +80,15 @@ store.dispatch('auth/fetchUser')
 <template>
   <div class="funkwhale responsive">
     <Sidebar />
-    <RouterView v-bind="color({}, ['default', 'solid'])()" v-slot="{ Component }">
+    <RouterView
-      <Transition v-if="Component" name="main" mode="out-in">
+      v-slot="{ Component }"
+      v-bind="color({}, ['default', 'solid'])()"
+    >
+      <Transition
+        v-if="Component"
+        name="main"
+        mode="out-in"
+      >
         <KeepAlive :max="10">
           <Suspense>
             <component :is="Component" />

front/src/LegacyLayout.vue

@@ -6,7 +6,6 @@ import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
-
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 
 const { t } = useI18n()

front/src/components/About.vue

@@ -24,7 +24,7 @@ const labels = computed(() => ({
   title: t('components.About.title')
 }))
 
-const podName = computed(() => (n => n === "" ? "No name" : n ?? 'Funkwhale')(get(nodeinfo.value, 'metadata.nodeName')))
+const podName = computed(() => (n => n === '' ? 'No name' : n ?? 'Funkwhale')(get(nodeinfo.value, 'metadata.nodeName')))
 
 const banner = computed(() => get(nodeinfo.value, 'metadata.banner'))
 const shortDescription = computed(() => get(nodeinfo.value, 'metadata.shortDescription'))
@@ -84,14 +84,21 @@ const federationEnabled = computed(() => {
 </script>
 
 <template>
-  <Layout stack main
+  <Layout
     v-title="labels.title"
+    stack
+    main
     style="align-items: center;"
   >
     <!-- About funkwhale -->
 
-    <Link to="/" width="full" alignText="stretch" style="width:min(480px, 100%)">
+    <Link
-      <logo-text/>
+      to="/"
+      width="full"
+      align-text="stretch"
+      style="width:min(480px, 100%)"
+    >
+      <logo-text />
     </Link>
 
     <h2 class="header">
@@ -102,13 +109,15 @@ const federationEnabled = computed(() => {
       {{ t('components.About.description.funkwhale') }}
     </p>
 
-    <Layout flex style="justify-content: center;">
+    <Layout
-
+      flex
-      <Card :title="t('components.About.header.signup')"
+      style="justify-content: center;"
+    >
+      <Card
         v-if="!store.state.auth.authenticated"
+        :title="t('components.About.header.signup')"
         width="256px"
       >
-
         <template v-if="openRegistrations">
           <p>
             {{ t('components.About.description.signup') }}
@@ -155,23 +164,27 @@ const federationEnabled = computed(() => {
         </div>
       </Card>
 
-      <Card :title="t('components.About.message.greeting', {username: store.state.auth.username})"
+      <Card
         v-else
-        width= "256px"
+        :title="t('components.About.message.greeting', {username: store.state.auth.username})"
+        width="256px"
       >
-
         <p v-if="defaultUploadQuota">
           {{ t('components.About.description.quota', {quota: defaultUploadQuota}) }}
         </p>
 
         <template #action>
-          <Button full disabled>
+          <Button
+            full
+            disabled
+          >
             {{ t('components.About.message.loggedIn') }}
           </Button>
         </template>
       </Card>
 
-      <Card :title="podName"
+      <Card
+        :title="podName"
         width="256px"
       >
         <section
@@ -222,20 +235,22 @@ const federationEnabled = computed(() => {
         </div>
 
         <template #action>
-          <Link alignText="center"
+          <Link
+            align-text="center"
             to="/about/pod"
           >
             {{ t('components.About.link.learnMore') }}
           </Link>
         </template>
       </Card>
-
     </Layout>
 
-
+    <Layout
-    <Layout flex style="justify-content: center;">
+      flex
-
+      style="justify-content: center;"
-      <Card width="256px"
+    >
+      <Card
+        width="256px"
         to="/"
         :title="t('components.About.header.publicContent')"
         icon="bi-box-arrow-up-right"
@@ -244,7 +259,8 @@ const federationEnabled = computed(() => {
         {{ t('components.About.description.publicContent') }}
       </Card>
 
-      <Card width="256px"
+      <Card
+        width="256px"
         :title="t('components.About.link.findOtherPod')"
         to="https://funkwhale.audio/#get-started"
         icon="bi-box-arrow-up-right"
@@ -252,18 +268,16 @@ const federationEnabled = computed(() => {
         {{ t('components.About.description.publicContent') }}
       </Card>
 
-      <Card width="256px"
+      <Card
+        width="256px"
         :title="t('components.About.header.findApp')"
         to="https://funkwhale.audio/apps"
         icon="bi-box-arrow-up-right"
       >
         {{ t('components.About.description.findApp') }}
       </Card>
-
-
     </Layout>
 
-
     <section
       :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
       :style="headerStyle"
@@ -274,7 +288,6 @@ const federationEnabled = computed(() => {
       </h1>
     </section>
 
-
     <!-- About Pod -->
     <div class="about-pod-info-container">
       <div class="about-pod-info-toc">

front/src/components/Queue.vue

@@ -246,8 +246,8 @@ if (!isWebGLSupported) {
                     @click="enter"
                   />
                   <Button
-                    secondary
                     v-else
+                    secondary
                     :aria-label="labels.exitFullscreen"
                     :title="labels.exitFullscreen"
                     icon="bi-fullscreen-exit"
@@ -305,7 +305,10 @@ if (!isWebGLSupported) {
                 @click.stop.prevent=""
               >
                 <Pill>
-                  <template #image v-if="ac.artist.cover">
+                  <template
+                    v-if="ac.artist.cover"
+                    #image
+                  >
                     <img v-lazy="ac.artist.cover?.urls.medium_square_crop">
                   </template>
                   {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
@@ -341,8 +344,14 @@ if (!isWebGLSupported) {
               <i class="loading spinner icon" />
             </p>
           </div>
-          <Spacer :size="16" class="desktop-and-below" />
+          <Spacer
-          <Layout flex class="additional-controls desktop-and-below">
+            :size="16"
+            class="desktop-and-below"
+          />
+          <Layout
+            flex
+            class="additional-controls desktop-and-below"
+          >
             <track-favorite-icon
               v-if="store.state.auth.authenticated"
               :track="currentTrack"
@@ -428,7 +437,10 @@ if (!isWebGLSupported) {
                     </template>
                   </i18n-t>
                   <span class="middle pipe symbol" />
-                  <span style="margin-right: 8px;" v-t="'components.Queue.meta.end'" />
+                  <span
+                    v-t="'components.Queue.meta.end'"
+                    style="margin-right: 8px;"
+                  />
                   <span :title="labels.duration">
                     {{ endsIn }}
                   </span>

front/src/components/RemoteSearchForm.vue

@@ -170,8 +170,9 @@ watch(() => props.initialId, () => {
 </script>
 
 <template>
-  <Layout stack
+  <Layout
     v-if="type === 'both'"
+    stack
   >
     <Button
       secondary
@@ -188,18 +189,23 @@ watch(() => props.initialId, () => {
       {{ t('components.RemoteSearchForm.button.rss') }}
     </Button>
   </Layout>
-  <Layout form
+  <Layout
     v-else
     id="remote-search"
+    form
     :class="['ui', {loading: isLoading}, 'form']"
     @submit.stop.prevent="submit"
   >
-    <Alert red
+    <Alert
       v-if="errors.length > 0"
+      red
       role="alert"
       title="t('components.RemoteSearchForm.header.fetchFailed')"
     >
-      <ul class="list" v-if="errors.length > 1">
+      <ul
+        v-if="errors.length > 1"
+        class="list"
+      >
         <li
           v-for="(error, key) in errors"
           :key="key"
@@ -207,7 +213,9 @@ watch(() => props.initialId, () => {
           {{ error }}
         </li>
       </ul>
-      <p v-else>{{ errors[0] }}</p>
+      <p v-else>
+        {{ errors[0] }}
+      </p>
     </Alert>
     <p v-if="type === 'rss'">
       {{ t('components.RemoteSearchForm.description.rss') }}
@@ -216,7 +224,6 @@ watch(() => props.initialId, () => {
       {{ t('components.RemoteSearchForm.description.fediverse') }}
     </p>
 
-
     <Input
       id="object-id"
       v-model="id"
@@ -237,8 +244,9 @@ watch(() => props.initialId, () => {
       {{ t('components.RemoteSearchForm.button.search') }}
     </Button>
   </Layout>
-  <Alert red
+  <Alert
     v-if="!isLoading && obj?.status === 'finished' && !redirectRoute"
+    red
   >
     {{ t('components.RemoteSearchForm.warning.unsupported') }}
   </Alert>

front/src/components/SetInstanceModal.vue

@@ -65,8 +65,9 @@ const checkAndSwitch = async (url: string) => {
 </script>
 
 <template>
-  <Modal :title="t('views.ChooseInstance.header.chooseInstance')"
+  <Modal
     v-model="show"
+    :title="t('views.ChooseInstance.header.chooseInstance')"
     @update="isError = false"
   >
     <h3 class="header">

front/src/components/Sidebar.vue

@@ -273,9 +273,9 @@ onMounted(() => {
           @show-language-modal-event="isLanguageModalOpen=true"
         />
         <Modal
-          :title="labels.language"
           ref="languageModal"
           v-model="isLanguageModalOpen"
+          :title="labels.language"
           :fullscreen="false"
         >
           <!-- TODO: Is this actually a popover menu, not a modal? -->
@@ -306,9 +306,9 @@ onMounted(() => {
           </div>
         </Modal>
         <Modal
-          :title="labels.theme"
           ref="themeModal"
           v-model:show="isThemeModalOpen"
+          :title="labels.theme"
           :fullscreen="false"
         >
           <i

front/src/components/admin/SignupFormBuilder.vue

@@ -192,8 +192,8 @@ const move = (idx: number, increment: number) => {
         </table>
         <div class="ui hidden divider" />
         <Button
-          color = "primary"
           v-if="value.fields?.length < maxFields"
+          color="primary"
           @click.stop.prevent="addField"
         >
           {{ t('components.admin.SignupFormBuilder.button.add') }}

front/src/components/album/Card.vue

@@ -51,8 +51,9 @@ const imageUrl = computed(() => props.album.cover?.urls.original
       />
     </template>
 
-    <template #default
+    <template
       v-for="ac in album.artist_credit"
+      #default
       :key="ac.artist.id"
     >
       <Link
@@ -68,11 +69,14 @@ const imageUrl = computed(() => props.album.cover?.urls.original
       <span v-if="album.release_date">
         {{ momentFormat(new Date(album.release_date), 'Y') }}
       </span>
-      <i class="bi bi-dot"/>
+      <i class="bi bi-dot" />
       <span>
         {{ t('components.audio.album.Card.meta.tracks', album.tracks_count) }}
       </span>
-      <Spacer h grow />
+      <Spacer
+        h
+        grow
+      />
       <PlayButton
         :dropdown-only="true"
         discrete

front/src/components/album/Widget.vue

@@ -14,7 +14,6 @@ import Section from '~/components/ui/Section.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
-
 interface Props {
   filters: Record<string, string | boolean>
   showCount?: boolean
@@ -82,8 +81,8 @@ watch(
   >
     <inline-search-bar
       v-if="search"
-      style="grid-column: 1 / -1;"
       v-model="query"
+      style="grid-column: 1 / -1;"
       @search="performSearch"
     />
     <Loader v-if="isLoading" />
@@ -100,8 +99,8 @@ watch(
     >
       <empty-state
         :refresh="true"
-        @refresh="fetchData"
         style="grid-column: 1 / -1;"
+        @refresh="fetchData"
       />
     </slot>
     <Pagination

front/src/components/artist/Card.vue

@@ -67,7 +67,7 @@ const cover = computed(() => {
         v-lazy="cover.urls.medium_square_crop"
         :alt="artist.name"
         class="channel-image"
-      />
+      >
     </template>
 
     <template #footer>
@@ -85,7 +85,6 @@ const cover = computed(() => {
         discrete
       />
     </template>
-
   </Card>
 </template>
 

front/src/components/artist/Widget.vue

@@ -4,7 +4,6 @@ import type { Artist } from '~/types'
 import { reactive, ref, watch, onMounted } from 'vue'
 import { useStore } from '~/store'
 
-
 import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -14,7 +13,6 @@ import ArtistCard from '~/components/artist/Card.vue'
 import Section from '~/components/ui/Section.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
-
 interface Props {
   filters: Record<string, string | boolean>
   search?: boolean
@@ -97,8 +95,8 @@ watch(
     <inline-search-bar
       v-if="!isLoading && search"
       v-model="query"
-      @search="performSearch"
       style="grid-column: 1 / -1;"
+      @search="performSearch"
     />
     <artist-card
       v-for="artist in artists"

front/src/components/audio/ArtistCreditLabel.vue

@@ -28,7 +28,11 @@ const getRoute = (ac: ArtistCredit) => {
       v-for="ac in props.artistCredit"
       :key="ac.artist.id"
     >
-      <Link solid secondary round min-content
+      <Link
+        solid
+        secondary
+        round
+        min-content
         :to="getRoute(ac)"
       >
         <img

front/src/components/audio/ChannelCard.vue

@@ -66,11 +66,11 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
         v-lazy="imageUrl"
         :alt="object.artist?.name"
         class="channel-image"
-      />
+      >
     </template>
 
     <template #default>
-      <Spacer :size="8"/>
+      <Spacer :size="8" />
     </template>
 
     <template #footer>
@@ -89,7 +89,10 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
       <span v-else>
         {{ t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
       </span>
-      <Spacer h grow />
+      <Spacer
+        h
+        grow
+      />
       <PlayButton
         :dropdown-only="true"
         :is-playable="true"

front/src/components/audio/ChannelEntries.vue

@@ -9,7 +9,7 @@ import axios from 'axios'
 import PodcastTable from '~/components/audio/podcast/Table.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 
-import Loader from'~/components/ui/Loader.vue'
+import Loader from '~/components/ui/Loader.vue'
 
 interface Events {
   (e: 'fetched', data: BackendResponse<Track[]>): void

front/src/components/audio/ChannelEntryCard.vue

@@ -8,7 +8,6 @@ import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
 import { useRouter } from 'vue-router'
 
-
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
 

front/src/components/audio/ChannelForm.vue

@@ -164,7 +164,8 @@ defineExpose({
 </script>
 
 <template>
-  <Layout form
+  <Layout
+    form
     class="ui form"
     @submit.prevent.stop="submit"
   >

front/src/components/audio/ChannelSeries.vue

@@ -76,8 +76,8 @@ fetchData()
     </template>
     <template v-if="nextPage">
       <Button
-        secondary
         v-if="nextPage"
+        secondary
         @click="fetchData(nextPage)"
       >
         {{ t('components.audio.ChannelSeries.button.showMore') }}

front/src/components/audio/ChannelsWidget.vue

@@ -26,7 +26,7 @@ interface Props {
 
 const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
-  limit: 5,
+  limit: 5
 })
 
 const result = ref<PaginatedChannelList>()
@@ -43,7 +43,7 @@ const fetchData = async (url = 'channels/') => {
   const params: operations['get_channels_2']['parameters']['query'] = {
     ...clone(props.filters),
     page: page.value,
-    page_size: props.limit,
+    page_size: props.limit
   }
 
   try {
@@ -75,14 +75,17 @@ watch([() => props.filters, page],
     small-items
     :h2="title || undefined"
   >
-    <Loader v-if="isLoading" style="grid-column: 1 / -1;" />
+    <Loader
+      v-if="isLoading"
+      style="grid-column: 1 / -1;"
+    />
     <template
       v-if="!isLoading && result?.count === 0"
     >
       <empty-state
         :refresh="true"
-        @refresh="fetchData('channels/')"
         style="grid-column: 1 / -1;"
+        @refresh="fetchData('channels/')"
       />
     </template>
     <Pagination

front/src/components/audio/PlayButton.vue

@@ -14,7 +14,6 @@ import OptionsButton from '~/components/ui/button/Options.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 
-
 interface Props extends PlayOptionsProps {
   split?: boolean
   dropdownIconClasses?: string[]
@@ -110,8 +109,8 @@ const isOpen = ref(false)
     <OptionsButton
       v-if="dropdownOnly"
       v-bind="$attrs"
+      :is-ghost="discrete"
       @click="isOpen = !isOpen"
-      :isGhost="discrete"
     />
     <Button
       v-else
@@ -124,7 +123,7 @@ const isOpen = ref(false)
       :aria-label="labels.replacePlay"
       :class="[...buttonClasses, 'play-button']"
       :isloading="isLoading"
-      :dropdownOnly="dropdownOnly"
+      :dropdown-only="dropdownOnly"
       @click.stop.prevent="replacePlay()"
       @split-click="isOpen = !isOpen"
     >
@@ -137,7 +136,9 @@ const isOpen = ref(false)
           v-else
           :class="['bi', playIconClass]"
         />
-        <template v-if="!discrete && !iconOnly">&nbsp;<slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot></template>
+        <template v-if="!discrete && !iconOnly">
+          &nbsp;<slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot>
+        </template>
       </template>
     </Button>
 
@@ -200,7 +201,7 @@ const isOpen = ref(false)
         </span>
       </PopoverItem>
 
-      <hr v-if="filterableArtists || Object.keys(getReportableObjects({track, album, artist, playlist, account, channel})).length > 0" />
+      <hr v-if="filterableArtists || Object.keys(getReportableObjects({track, album, artist, playlist, account, channel})).length > 0">
 
       <PopoverItem
         v-if="filterableArtists"

front/src/components/audio/Player.vue

@@ -51,8 +51,10 @@ const { t } = useI18n()
 /** Toggle between null and player */
 const togglePlayer = () => {
   store.commit('ui/queueFocused',
-    store.state.ui.queueFocused === 'queue' ? null
+    store.state.ui.queueFocused === 'queue'
-    : store.state.ui.queueFocused === 'player' ? null
+      ? null
+      : store.state.ui.queueFocused === 'player'
+        ? null
         : 'player'
   )
 }
@@ -169,8 +171,8 @@ const hideArtist = () => {
             <!-- TODO: Use smaller covers -->
             <img
               ref="cover"
-              alt=""
               v-lazy="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
+              alt=""
             >
           </div>
           <div
@@ -220,8 +222,8 @@ const hideArtist = () => {
             <!-- TODO: Use smaller covers -->
             <img
               ref="cover"
-              alt=""
               v-lazy="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
+              alt=""
             >
           </div>
           <div class="middle aligned content ellipsis">
@@ -358,8 +360,7 @@ const hideArtist = () => {
               class="close-control desktop-and-below"
               icon="bi-x"
               @click.stop="store.commit('ui/queueFocused', null)"
-            >
+            />
-            </Button>
           </div>
         </div>
       </div>

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

@@ -9,7 +9,6 @@ import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
 
-
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'

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

@@ -93,9 +93,9 @@ const labels = computed(() => ({
 
 <template>
   <Modal
-    :title="track.title"
     ref="modal"
     v-model="show"
+    :title="track.title"
     :scrolling="true"
     class="scrolling-track-options"
   >

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

@@ -9,7 +9,6 @@ import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
 
-
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'

front/src/components/audio/track/Modal.vue

@@ -93,9 +93,10 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <Modal :title="track.title"
+  <Modal
     ref="modal"
     v-model="show"
+    :title="track.title"
     :scrolling="true"
     class="scrolling-track-options"
   >

front/src/components/audio/track/Row.vue

@@ -13,7 +13,6 @@ import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
 
-
 const store = useStore()
 
 interface Props extends PlayOptionsProps {
@@ -65,10 +64,10 @@ const hover = ref(false)
 <template>
   <div
     :class="[{ active }, 'track-row row', $style.row]"
+    style="display: contents;"
     @dblclick="activateTrack(track, index)"
     @mousemove="hover = true"
     @mouseout="hover = false"
-    style="display: contents;"
   >
     <!-- 1. column: Play button or track position -->
 
@@ -182,8 +181,8 @@ const hover = ref(false)
       class="content ellipsis column"
     >
       <template
-          v-if="showArtist"
         v-for="ac in track.artist_credit"
+        v-if="showArtist"
         :key="ac.artist.id"
       >
         <router-link
@@ -199,7 +198,6 @@ const hover = ref(false)
       </template>
     </div>
 
-
     <!-- 6. column: favorite icon -->
     <div
       class="meta column"

front/src/components/audio/track/Table.vue

@@ -2,11 +2,9 @@
 import type { Track } from '~/types'
 
 import { useI18n } from 'vue-i18n'
-import { clone, uniqBy } from 'lodash-es'
+import { clone, uniqBy, sortedUniq } from 'lodash-es'
 import { ref, computed } from 'vue'
 import { useStore } from '~/store'
-import { sortedUniq } from 'lodash-es'
-
 
 import axios from 'axios'
 
@@ -151,15 +149,15 @@ const updatePage = (page: number) => {
 
 <template>
   <div>
-
     <!-- Show the search bar if search is true -->
 
-    <Input search
+    <Input
       v-if="search"
       v-model="query"
-      @search="performSearch"
+      search
       autofocus
       :placeholder="labels.searchPlaceholder"
+      @search="performSearch"
     />
     <Spacer v-if="search" />
 
@@ -206,7 +204,10 @@ const updatePage = (page: number) => {
           </label>
           <label />
           <label>
-            <i v-if="showDuration" class="bi bi-clock" />
+            <i
+              v-if="showDuration"
+              class="bi bi-clock"
+            />
           </label>
           <label />
         </template>
@@ -225,7 +226,6 @@ const updatePage = (page: number) => {
           :show-duration="showDuration"
           :is-podcast="isPodcast"
         />
-
       </Table>
 
       <!-- Pagination -->

front/src/components/audio/track/Widget.vue

@@ -22,7 +22,6 @@ import Pagination from '~/components/ui/Pagination.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
-
 interface Events {
   (e: 'count', count: number): void
 }
@@ -97,19 +96,19 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       // Handle WebSocket events for "Listen"
 
       // Add the event to `objects` reactively
-      objects.unshift(event as Listening);
+      objects.unshift(event as Listening)
 
       // Keep the array size within limits (e.g., remove the last item if needed)
       if (objects.length > props.limit) {
-        objects.pop();
+        objects.pop()
       }
 
       // Recompute coverUrl for the updated `objects`
-      console.log('WebSocket event received:', event);
+      console.log('WebSocket event received:', event)
-      console.log('Updated cover URL:', coverUrl.value);
+      console.log('Updated cover URL:', coverUrl.value)
-    });
+    })
   }
-}, { immediate: true });
+}, { immediate: true })
 </script>
 
 <template>
@@ -118,7 +117,8 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     medium-items
     align-left
   >
-    <Loader v-if="isLoading"
+    <Loader
+      v-if="isLoading"
       style="grid-column: 1 / -1;"
     />
     <Alert
@@ -133,11 +133,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       </h4>
     </Alert>
     <!-- TODO: Use activity.vue -->
-    <div class="funkwhale activity"
+    <div
-      v-if="count > 0"
       v-for="object in objects"
+      v-if="count > 0"
       :key="object.id"
-      :class="['item', itemClasses]">
+      class="funkwhale activity"
+      :class="['item', itemClasses]"
+    >
       <div class="activity-image">
         <img
           v-if="object.track.album && object.track.album.cover"
@@ -165,9 +167,12 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
           class="funkwhale link artist"
           :to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
         >
-            <Heading :h3="object.track.title" title />
+          <Heading
+            :h3="object.track.title"
+            title
+          />
         </router-link>
-          <Spacer :size="2"/>
+        <Spacer :size="2" />
         <div
           v-if="object.track.artist_credit"
           class="funkwhale link artist"
@@ -192,7 +197,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
           :show-more="false"
           :tags="object.track.tags"
         />
-        <Spacer :size="4"/>
+        <Spacer :size="4" />
         <div
           v-if="isActivity"
           class="extra"
@@ -222,7 +227,6 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
   </Section>
 </template>
 
-
 <style lang="scss" scoped>
 .funkwhale {
   &.activity {

front/src/components/auth/Authorize.vue

@@ -114,8 +114,9 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
 </script>
 
 <template>
-  <layout main
+  <layout
     v-title="labels.title"
+    main
     class="main"
   >
     <section class="ui vertical stripe segment">
@@ -123,8 +124,9 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
         <h2>
           <i class="bi bi-unlock-fill" />{{ t('components.auth.Authorize.header.authorize') }}
         </h2>
-        <Alert red
+        <Alert
           v-if="errors.length > 0"
+          red
           role="alert"
         >
           <h4

front/src/components/auth/LoginForm.vue

@@ -75,27 +75,39 @@ const submit = async () => {
 </script>
 
 <template>
-  <Layout form stack
+  <Layout
+    form
+    stack
     style="max-width: 600px"
     @submit.prevent="submit()"
   >
-    <Alert red
+    <Alert
       v-if="errors.length > 0"
+      red
     >
       <h4 class="header">
         {{ t('components.auth.LoginForm.header.loginFailure') }}
       </h4>
-      <component :is="errors.length>1 ? 'ul' : 'div'" class="list">
+      <component
-        <component :is="errors.length>1 ? 'li' : 'div'"
+        :is="errors.length>1 ? 'ul' : 'div'"
+        class="list"
+      >
+        <component
+          :is="errors.length>1 ? 'li' : 'div'"
           v-if="errors[0] == 'invalid_credentials' && store.state.instance.settings.moderation.signup_approval_enabled.value"
         >
           {{ t('components.auth.LoginForm.help.approvalRequired') }}
         </component>
-        <component :is="errors.length>1 ? 'li' : 'div'"
+        <component
-          v-else-if="errors[0] == 'invalid_credentials'">
+          :is="errors.length>1 ? 'li' : 'div'"
+          v-else-if="errors[0] == 'invalid_credentials'"
+        >
           {{ t('components.auth.LoginForm.help.invalidCredentials') }}
         </component>
-        <component :is="errors.length>1 ? 'li' : 'div'" v-else>
+        <component
+          :is="errors.length>1 ? 'li' : 'div'"
+          v-else
+        >
           {{ errors[0] }}
         </component>
       </component>
@@ -105,8 +117,8 @@ const submit = async () => {
       <Input
         id="username-field"
         ref="username"
-          autocomplete="username"
         v-model="credentials.username"
+        autocomplete="username"
         required
         name="username"
         type="text"
@@ -123,10 +135,11 @@ const submit = async () => {
           </template>
         </template>
       </Input>
-        <Input password
+      <Input
+        v-model="credentials.password"
+        password
         name="password-field"
         autocomplete="current-password"
-          v-model="credentials.password"
         field-id="password-field"
         required
       >

front/src/components/auth/Logout.vue

@@ -40,8 +40,9 @@ const labels = computed(() => ({
         {{ t('components.auth.Logout.button.logout') }}
       </Button>
     </div>
-    <Alert yellow
+    <Alert
       v-else
+      yellow
     >
       <h2>
         {{ t('components.auth.Logout.header.unauthenticated') }}
@@ -49,7 +50,7 @@ const labels = computed(() => ({
       <Link
         solid
         secondary
-        buttonWidth
+        button-width
         to="/login"
       >
         {{ t('components.auth.Logout.link.login') }}

front/src/components/auth/Settings.vue

@@ -272,23 +272,27 @@ fetchOwnedApps()
 </script>
 
 <template>
-  <Layout main stack
+  <Layout
     v-title="labels.title"
+    main
+    stack
   >
-    <Header :h1="t('components.auth.Settings.header.accountSettings')">
+    <Header :h1="t('components.auth.Settings.header.accountSettings')" />
-    </Header>
+    <Layout
-    <Layout form
+      form
       @submit.prevent="submitSettings()"
     >
-      <Alert green
+      <Alert
         v-if="settings.success"
+        green
       >
         <h4 class="header">
           {{ t('components.auth.Settings.header.settingsUpdated') }}
         </h4>
       </Alert>
-      <Alert red
+      <Alert
         v-if="settings.errors.length > 0"
+        red
         role="alert"
       >
         <h4 class="header">
@@ -345,8 +349,9 @@ fetchOwnedApps()
         {{ t('components.auth.Settings.header.avatar') }}
       </h2>
       <Layout form>
-          <Alert red
+        <Alert
           v-if="avatarErrors.length > 0"
+          red
           role="alert"
         >
           <h4 class="header">
@@ -379,7 +384,8 @@ fetchOwnedApps()
       <div class="ui message">
         {{ t('components.auth.Settings.description.changePassword.paragraph1') }}&nbsp;{{ t('components.auth.Settings.description.changePassword.paragraph2') }}
       </div>
-        <Layout form
+      <Layout
+        form
         @submit.prevent="submitPassword()"
       >
         <Alert
@@ -555,8 +561,8 @@ fetchOwnedApps()
             <td>
               <dangerous-button
                 :class="['ui', 'tiny', 'danger', { loading: isRevoking.has(app.client_id) }, 'button']"
-                  @confirm="revokeApp(app.client_id)"
                 :title="t('components.auth.Settings.modal.revokeApp.header', {app: app.name})"
+                @confirm="revokeApp(app.client_id)"
               >
                 {{ t('components.auth.Settings.button.revoke') }}
                 <template #modal-content>
@@ -641,8 +647,8 @@ fetchOwnedApps()
               <DangerousButton
                 :is-loading="isDeleting.has(app.client_id)"
                 class="tiny"
-                  @confirm="deleteApp(app.client_id)"
                 :title="t('components.auth.Settings.modal.deleteApp.header', {app: app.name})"
+                @confirm="deleteApp(app.client_id)"
               >
                 {{ t('components.auth.Settings.button.remove') }}
                 <template #modal-content>
@@ -699,11 +705,13 @@ fetchOwnedApps()
       <p>
         {{ t('components.auth.Settings.message.currentEmail', { email: store.state.auth.profile?.email }) }}
       </p>
-        <Layout form
+      <Layout
+        form
         @submit.prevent="changeEmail"
       >
-          <Alert red
+        <Alert
           v-if="changeEmailErrors.length > 0"
+          red
           role="alert"
         >
           <h4 class="header">
@@ -754,14 +762,16 @@ fetchOwnedApps()
       <p>
         {{ t('components.auth.Settings.description.deleteAccount') }}
       </p>
-        <Alert yellow
+      <Alert
+        yellow
         role="alert"
       >
         {{ t('components.auth.Settings.warning.deleteAccount') }}
       </Alert>
       <Layout form>
-          <Alert red
+        <Alert
           v-if="accountDeleteErrors.length > 0"
+          red
           role="alert"
         >
           <h4 class="header">

front/src/components/auth/SignupForm.vue

@@ -92,10 +92,16 @@ fetchInstanceSettings()
 
 <template>
   <div v-if="submitted">
-    <Alert yellow v-if="signupRequiresApproval">
+    <Alert
+      v-if="signupRequiresApproval"
+      yellow
+    >
       {{ t('components.auth.SignupForm.message.awaitingReview') }}
     </Alert>
-    <Alert green v-else>
+    <Alert
+      v-else
+      green
+    >
       {{ t('components.auth.SignupForm.message.accountCreated') }}
     </Alert>
     <h2>
@@ -107,18 +113,22 @@ fetchInstanceSettings()
       :show-signup="false"
     />
   </div>
-  <Layout form stack
+  <Layout
     v-else
+    form
+    stack
     style="max-width: 600px"
     @submit.prevent="submit()"
   >
-    <Alert red
+    <Alert
       v-if="!store.state.instance.settings.users.registration_enabled.value"
+      red
     >
       {{ t('components.auth.SignupForm.message.registrationClosed') }}
     </Alert>
-    <Alert yellow
+    <Alert
       v-else-if="signupRequiresApproval"
+      yellow
     >
       {{ t('components.auth.SignupForm.message.requiresReview') }}
     </Alert>
@@ -129,8 +139,9 @@ fetchInstanceSettings()
         :permissive="true"
       />
     </template>
-    <Alert red
+    <Alert
       v-if="errors.length > 0"
+      red
     >
       <h4 class="header">
         {{ t('components.auth.SignupForm.header.signupFailure') }}
@@ -146,9 +157,9 @@ fetchInstanceSettings()
     </Alert>
     <Input
       id="username-field"
-        :label = "t('components.auth.SignupForm.label.username')"
       ref="username"
       v-model="payload.username"
+      :label="t('components.auth.SignupForm.label.username')"
       name="username"
       required
       type="text"
@@ -156,49 +167,52 @@ fetchInstanceSettings()
       :placeholder="labels.usernamePlaceholder"
     />
     <Input
-        :label="t('components.auth.SignupForm.label.email')"
       id="email-field"
-        autocomplete="email"
       ref="email"
       v-model="payload.email"
+      :label="t('components.auth.SignupForm.label.email')"
+      autocomplete="email"
       name="email"
       required
       type="email"
       :placeholder="labels.emailPlaceholder"
     />
-      <Input password
+    <Input
+      v-model="payload.password1"
+      password
       autocomplete="new-password"
       :label="t('components.auth.SignupForm.label.password')"
-        v-model="payload.password1"
       field-id="password-field"
     />
-      <Input v-if="!store.state.instance.settings.users.registration_enabled.value"
+    <Input
-        :label="t('components.auth.SignupForm.label.invitation')"
+      v-if="!store.state.instance.settings.users.registration_enabled.value"
       id="invitation-code"
       v-model="payload.invitation"
+      :label="t('components.auth.SignupForm.label.invitation')"
       required
       type="text"
       name="invitation"
       :placeholder="labels.placeholder"
     />
-      <div v-if="signupRequiresApproval && (formCustomization?.fields.length ?? 0) > 0"
+    <div
       v-for="(field, idx) in formCustomization?.fields"
+      v-if="signupRequiresApproval && (formCustomization?.fields.length ?? 0) > 0"
       :key="idx"
       :class="[{required: field.required}, 'field']"
     >
       <Textarea
-          :label="field.label"
         v-if="field.input_type === 'long_text'"
         :id="`custom-field-${idx}`"
         v-model="payload.request_fields[field.label]"
+        :label="field.label"
         :required="field.required"
         rows="5"
       />
       <Input
         v-else
         :id="`custom-field-${idx}`"
-          :label="field.label"
         v-model="payload.request_fields[field.label]"
+        :label="field.label"
         type="text"
         :required="field.required"
       />

front/src/components/auth/SubsonicTokenForm.vue

@@ -108,15 +108,17 @@ fetchToken()
         {{ t('components.auth.SubsonicTokenForm.link.apps') }}
       </a>
     </p>
-    <Alert green
+    <Alert
       v-if="success"
+      green
     >
       <h4 class="header">
         {{ successMessage }}
       </h4>
     </Alert>
-    <Alert red
+    <Alert
       v-if="subsonicEnabled && errors.length > 0"
+      red
       role="alert"
     >
       <h4 class="header">
@@ -164,8 +166,8 @@ fetchToken()
         </template>
       </DangerousButton>
       <Button
-        primary
         v-else
+        primary
         :is-loading="isLoading"
         @click="requestNewToken"
       >

front/src/components/channels/AlbumForm.vue

@@ -15,7 +15,7 @@ interface Events {
   (e: 'created'): void
 }
 
-const channel = defineModel<Channel>({required: true})
+const channel = defineModel<Channel>({ required: true })
 
 const { t } = useI18n()
 
@@ -53,7 +53,8 @@ defineExpose({
 </script>
 
 <template>
-  <Layout form
+  <Layout
+    form
     :class="['ui', {loading: isLoading}, 'form']"
     @submit.stop.prevent
   >

front/src/components/channels/AlbumModal.vue

@@ -14,7 +14,7 @@ import Input from '~/components/ui/Input.vue'
 
 const { t } = useI18n()
 
-const channel = defineModel<Channel>({required: true})
+const channel = defineModel<Channel>({ required: true })
 defineEmits(['created'])
 const newAlbumTitle = ref<string>('')
 
@@ -22,7 +22,7 @@ const isLoading = ref(false)
 const submittable = ref(false)
 const errors = ref<string[]>([])
 
-const {isOpen:show} = useModal('album')
+const { isOpen: show } = useModal('album')
 
 watch(show, () => {
   isLoading.value = false
@@ -56,8 +56,9 @@ const submit = async () => {
 </script>
 
 <template>
-  <Modal :title="t(channel?.artist?.content_category === 'podcast' ? 'components.channels.AlbumModal.header.newSeries' : 'components.channels.AlbumModal.header.newAlbum')"
+  <Modal
     v-model="show"
+    :title="t(channel?.artist?.content_category === 'podcast' ? 'components.channels.AlbumModal.header.newSeries' : 'components.channels.AlbumModal.header.newAlbum')"
     class="small"
     :cancel="t('components.channels.AlbumModal.button.cancel')"
   >
@@ -80,7 +81,8 @@ const submit = async () => {
       </Alert>
     </template>
 
-    <Layout form
+    <Layout
+      form
       :class="['ui', {loading: isLoading}, 'form']"
       @submit.stop.prevent
     >

front/src/components/channels/AlbumSelect.vue

@@ -27,15 +27,14 @@ const fetchAlbums = async () => {
     }
   })
 
-  console.log("I found another album with artist", model.value.channel.artist.name, ":", response.data.results)
+  console.log('I found another album with artist', model.value.channel.artist.name, ':', response.data.results)
   albums.value = response.data.results
   isLoading.value = false
 }
 
 watch(() => model.value.channel, fetchAlbums, { immediate: true })
 watch(albums, (value) => {
-  if (value.length === 1)
+  if (value.length === 1) { selectedAlbumId.value = albums.value[0].id }
-      selectedAlbumId.value = albums.value[0].id
 })
 </script>
 

front/src/components/channels/SubscribeButton.vue

@@ -6,11 +6,11 @@ import { computed, ref } from 'vue'
 import { useStore } from '~/store'
 import { useRoute } from 'vue-router'
 
-const route = useRoute()
-
 import LoginModal from '~/components/common/LoginModal.vue'
 import Button from '~/components/ui/Button.vue'
 
+const route = useRoute()
+
 interface Events {
   (e: 'unsubscribed'): void
   (e: 'subscribed'): void

front/src/components/channels/UploadForm.vue

@@ -27,7 +27,6 @@ import Link from '~/components/ui/Link.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 
-
 interface Events {
   (e: 'status', status: UploadStatus): void
 }
@@ -106,11 +105,14 @@ albums
 const channelDropdownId = ref<Channel['artist']['id'] | null>(null)
 const isLoading = ref(false)
 
-const selectedChannel = computed(()=>
+const selectedChannel = computed(() =>
-  props.channel ? props.channel
+  props.channel
-  : availableChannels.value.length===0 ? (createEmptyChannel(), null)
+    ? props.channel
-  : availableChannels.value.length===1 ? availableChannels.value[0]
+    : availableChannels.value.length === 0
-  : availableChannels.value.find(({artist}) => artist.id === channelDropdownId.value)
+      ? (createEmptyChannel(), null)
+      : availableChannels.value.length === 1
+        ? availableChannels.value[0]
+        : availableChannels.value.find(({ artist }) => artist.id === channelDropdownId.value)
 )
 
 const emptyChannelCreateRequest:components['schemas']['ChannelCreateRequest'] = {
@@ -118,7 +120,7 @@ const emptyChannelCreateRequest:components['schemas']['ChannelCreateRequest'] =
   username: store.state.auth.username,
   description: null,
   tags: [],
-  content_category: 'music',
+  content_category: 'music'
 }
 
 const createEmptyChannel = async () => {
@@ -127,10 +129,10 @@ const createEmptyChannel = async () => {
       'channels/',
       (emptyChannelCreateRequest satisfies operations['create_channel_2']['requestBody']['content']['application/json'])
     )
-    console.log("Created Channel: ", response.data)
+    console.log('Created Channel: ', response.data)
   } catch (error) {
     errors.value = (error as BackendError).backendErrors
-    console.log("Error:", error)
+    console.log('Error:', error)
   }
 }
 
@@ -150,12 +152,13 @@ const fetchChannels = async () => {
 const albumSelection = ref<{channel: Channel, albumId: Album['id'] | '', albums: Album[]}>
 
 watch(selectedChannel, (channel) =>
-    albumSelection.value =
+  albumSelection.value
-      { channel: channel,
+      = {
+      channel,
       albumId: '',
       albums: []
     }
-  )
+)
 
 const channelChange = async (channelId) => {
   selectedChannel.value = channelId
@@ -409,7 +412,7 @@ const labels = computed(() => ({
 }))
 
 const publish = async () => {
-  console.log("starting publish...")
+  console.log('starting publish...')
   isLoading.value = true
 
   errors.value = []
@@ -432,8 +435,7 @@ const publish = async () => {
     //   headers: { 'Authorization': `Bearer ${store.state.auth.oauth}` }
     // })
 
-
+    console.log('Channels Store Before: ', store.state.channels)
-    console.log("Channels Store Before: ", store.state.channels)
 
     // Tell the store that the uploaded files are pending import
     store.commit('channels/publish', {
@@ -441,17 +443,16 @@ const publish = async () => {
       channel: selectedChannel.value
     })
 
-    console.log("Channels Store After: ", store.state.channels)
+    console.log('Channels Store After: ', store.state.channels)
-
   } catch (error) {
     // TODO: Use inferred error type instead of typecasting
     errors.value = (error as BackendError).backendErrors
-    console.log("Error:", error)
+    console.log('Error:', error)
   }
 
   isLoading.value = false
 
-  console.log("...finished publish")
+  console.log('...finished publish')
 }
 
 defineExpose({
@@ -520,7 +521,6 @@ ChannelCreateRequest: {
 */
 </script>
 
-
 <template>
   <Layout
     form
@@ -548,19 +548,28 @@ ChannelCreateRequest: {
     <!-- Select Album and License -->
 
     <div :class="['ui', 'required', 'field']">
-      <label v-if="availableChannels.length === 1" for="channel-dropdown">
+      <label
+        v-if="availableChannels.length === 1"
+        for="channel-dropdown"
+      >
         {{ t('components.channels.UploadForm.label.channel') }}: {{ selectedChannel?.artist.name }}
       </label>
-      <label v-else for="channel-dropdown">
+      <label
+        v-else
+        for="channel-dropdown"
+      >
         {{ t('components.channels.UploadForm.label.channel') }}
       </label>
       <select
         v-if="availableChannels.length > 1"
-        v-model="channelDropdownId"
         id="channel-dropdown"
+        v-model="channelDropdownId"
         class="dropdown"
       >
-        <option  v-for="channel in availableChannels" :value="channel.artist.id">
+        <option
+          v-for="channel in availableChannels"
+          :value="channel.artist.id"
+        >
           {{ channel.artist.name }}
         </option>
       </select>
@@ -690,10 +699,14 @@ ChannelCreateRequest: {
       v-model:values="uploadImportData[selectedUploadId]"
       :upload="selectedUpload"
     />
-    <Alert blue
+    <Alert
+      blue
       class="ui message"
     >
-      <Layout flex gap-8>
+      <Layout
+        flex
+        gap-8
+      >
         <i class="bi bi-info-circle-fill" />
         {{ t('components.channels.UploadForm.description.extensions', {extensions: store.state.ui.supportedExtensions.join(', ')}) }}
       </Layout>
@@ -710,10 +723,16 @@ ChannelCreateRequest: {
         {{ t('components.channels.UploadForm.message.dragAndDrop') }}
       </div>
       <div class="ui very small divider" />
-      <Button primary icon="bi-folder2-open">
+      <Button
+        primary
+        icon="bi-folder2-open"
+      >
         {{ t('components.channels.UploadForm.label.openBrowser') }}
       </Button>
-      <Spacer class="divider" :size="32" />
+      <Spacer
+        class="divider"
+        :size="32"
+      />
     </file-upload-widget>
   </Layout>
 </template>

front/src/components/channels/UploadModal.vue

@@ -54,8 +54,8 @@ const open = ref(false)
 
 <template>
   <Modal
-    :title="t(`components.channels.UploadModal.header.${['', 'publish', 'uploadFiles', 'uploadDetails', 'processing'][step]}`)"
     v-model="store.state.channels.showUploadModal"
+    :title="t(`components.channels.UploadModal.header.${['', 'publish', 'uploadFiles', 'uploadDetails', 'processing'][step]}`)"
     class="small"
   >
     <div class="scrolling content">

front/src/components/common/ActionTable.vue

@@ -206,11 +206,11 @@ const launchAction = async () => {
                   <dangerous-button
                     v-if="selectAll || currentAction?.isDangerous"
                     :disabled="checked.length === 0 || undefined"
-                    :isLoading="isLoading"
+                    :is-loading="isLoading"
                     :confirm-color="currentAction?.confirmColor ?? 'success'"
                     :aria-label="labels.performAction"
-                    @confirm="launchAction"
                     :title="t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount)"
+                    @confirm="launchAction"
                   >
                     {{ t('components.common.ActionTable.button.go') }}
                     <template #modal-content>

front/src/components/common/ActorAvatar.vue

@@ -5,7 +5,7 @@ import { hashCode, intToRGB } from '~/utils/color'
 import { computed } from 'vue'
 
 interface Props {
-  actor: { full_username : string; preferred_username?:string; icon?:Actor["icon"] }
+  actor: { full_username : string; preferred_username?:string; icon?:Actor['icon'] }
 }
 
 const props = defineProps<Props>()

front/src/components/common/AttachmentInput.vue

@@ -107,8 +107,9 @@ const getAttachmentUrl = (uuid: string) => {
 
 <template>
   <div class="ui form">
-    <Alert red
+    <Alert
       v-if="errors.length > 0"
+      red
       role="alert"
     >
       <h4 class="header">
@@ -160,7 +161,7 @@ const getAttachmentUrl = (uuid: string) => {
               type="file"
               accept="image/png,image/jpeg"
               @change="submit"
-            />
+            >
           </div>
           <div class="ui very small hidden divider" />
           <p>

front/src/components/common/ContentForm.vue

@@ -55,7 +55,7 @@ const remainingChars = computed(() => props.charLimit - props.modelValue.length)
     v-model="value"
     :required="required || undefined"
     :placeholder="labels.placeholder"
-    :autofocus = "autofocus || undefined"
+    :autofocus="autofocus || undefined"
   />
   <span
     v-if="charLimit"

front/src/components/common/DangerousButton.vue

@@ -13,7 +13,7 @@ interface Events {
 // Note that properties such as [disabled] and 'destructive' | 'primary' are inherited.
 const props = defineProps<{
   title?: string
-  action?: () => void,
+  action?:() => void,
   confirmColor?:'success' | 'danger',
   popoverItem?: boolean
 }>()
@@ -32,16 +32,17 @@ const confirm = () => {
 </script>
 
 <template>
-  <component :is="props.popoverItem ? PopoverItem : Button"
+  <component
+    :is="props.popoverItem ? PopoverItem : Button"
     destructive
-    @click.prevent.stop="showModal = true"
     v-bind="$attrs"
+    @click.prevent.stop="showModal = true"
   >
     <slot />
 
     <Modal
-      destructive
       v-model="showModal"
+      destructive
       :title="title || t('components.common.DangerousButton.header.confirm')"
       :cancel="t('components.common.DangerousButton.button.cancel')"
     >

front/src/components/common/EmptyState.vue

@@ -22,7 +22,10 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <Alert blue align-items="center">
+  <Alert
+    blue
+    align-items="center"
+  >
     <h4 class="ui header">
       <div class="content">
         <slot name="title">
@@ -33,10 +36,10 @@ withDefaults(defineProps<Props>(), {
     </h4>
     <div class="inline center aligned text">
       <slot />
-      <Spacer :size="16"/>
+      <Spacer :size="16" />
       <Button
-        primary
         v-if="refresh"
+        primary
         @click="emit('refresh')"
       >
         {{ t('components.common.EmptyState.button.refresh') }}

front/src/components/common/InlineSearchBar.vue

@@ -36,7 +36,8 @@ const search = () => {
 </script>
 
 <template>
-  <Layout form
+  <Layout
+    form
     @submit.stop.prevent="emit('search', value)"
   >
     <div :class="['ui', 'action', {icon: value}, 'input']">

front/src/components/common/LoginModal.vue

@@ -32,7 +32,10 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <Modal v-model="show" :title="labels.header">
+  <Modal
+    v-model="show"
+    :title="labels.header"
+  >
     <div
       v-if="cover"
       class="image content"

front/src/components/common/RenderedDescription.vue

@@ -119,8 +119,9 @@ const submit = async () => {
       v-if="isUpdating"
       @submit.prevent="submit()"
     >
-      <Alert red
+      <Alert
         v-if="errors.length > 0"
+        red
         title="{{ t('components.common.RenderedDescription.header.failure') }}"
         role="alert"
       >
@@ -139,9 +140,9 @@ const submit = async () => {
       />
       <Button
         class="left floated"
-        @click.prevent="isUpdating = false"
         solid
         secondary
+        @click.prevent="isUpdating = false"
       >
         {{ t('components.common.RenderedDescription.button.cancel') }}
       </Button>

front/src/components/favorites/List.vue

@@ -107,8 +107,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 </script>
 
 <template>
-  <Layout main stack no-gap align-left
+  <Layout
     v-title="labels.title"
+    main
+    stack
+    no-gap
+    align-left
   >
     <Header :h1="labels.title">
       <template #action>
@@ -119,7 +123,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       </template>
     </Header>
 
-    <Loader v-if="isLoading"/>
+    <Loader v-if="isLoading" />
     <Layout
       v-if="store.state.favorites.count > 0"
       form
@@ -127,8 +131,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       :class="['ui', { 'loading': isLoading }, 'form']"
     >
       <Spacer :size="16" />
-    <Layout flex style="justify-content: flex-end;">
+      <Layout
-      <Layout stack noGap label for="favorites-ordering">
+        flex
+        style="justify-content: flex-end;"
+      >
+        <Layout
+          stack
+          no-gap
+          label
+          for="favorites-ordering"
+        >
           <span class="label">
             {{ t('components.favorites.List.ordering.label') }}
           </span>
@@ -146,7 +158,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </option>
           </select>
         </Layout>
-      <Layout stack noGap label for="favorites-ordering-direction">
+        <Layout
+          stack
+          no-gap
+          label
+          for="favorites-ordering-direction"
+        >
           <span class="label">
             {{ t('components.favorites.List.ordering.direction.label') }}
           </span>
@@ -163,7 +180,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </option>
           </select>
         </Layout>
-      <Layout stack noGap label for="favorites-results">
+        <Layout
+          stack
+          no-gap
+          label
+          for="favorites-results"
+        >
           <span class="label">
             {{ t('components.favorites.List.pagination.results') }}
           </span>
@@ -190,13 +212,18 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         :tracks="results"
       />
     </Layout>
-    <Alert blue align-items="center"
+    <Alert
       v-else
+      blue
+      align-items="center"
     >
-      <i class="bi bi-heartbreak-fill" style="font-size: 100px;" />
+      <i
+        class="bi bi-heartbreak-fill"
+        style="font-size: 100px;"
+      />
       <Spacer />
       {{ t('components.favorites.List.empty.noFavorites') }}
-      <Spacer :size="32"/>
+      <Spacer :size="32" />
       <Link
         to="/library"
         solid

front/src/components/favorites/TrackFavoriteIcon.vue

@@ -55,6 +55,5 @@ const title = computed(() => isFavorite.value
     :aria-label="title"
     :title="title"
     @click.stop="store.dispatch('favorites/toggle', track.id)"
-  >
+  />
-  </Button>
 </template>

front/src/components/federation/FetchButton.vue

@@ -80,8 +80,9 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
     <div>
       <slot />
     </div>
-    <Modal :title="t('components.federation.FetchButton.header.refresh')"
+    <Modal
       v-model="showModal"
+      :title="t('components.federation.FetchButton.header.refresh')"
       class="small"
       :cancel="t('components.federation.FetchButton.button.close')"
     >

front/src/components/federation/LibraryWidget.vue

@@ -69,9 +69,13 @@ watch(() => props.url, () => {
     align-left
     small-items
   >
-    <Loader v-if="isLoading" style="grid-column: 1 / -1;" />
+    <Loader
-    <Alert blue
+      v-if="isLoading"
+      style="grid-column: 1 / -1;"
+    />
+    <Alert
       v-if="!isLoading && libraries.length === 0"
+      blue
       style="grid-column: 1 / -1;"
     >
       {{ t('components.federation.LibraryWidget.empty.noMatch') }}

front/src/components/forms/PasswordInput.vue

@@ -45,9 +45,10 @@ const copyPassword = () => {
 
 <template>
   <div>
-    <Input password
+    <Input
       :id="fieldId"
       v-model="value"
+      password
       required
     >
       <template #input-right>

front/src/components/library/AlbumBase.vue

@@ -69,7 +69,7 @@ const labels = computed(() => ({
 
 const {
   isShuffled,
-  shuffle,
+  shuffle
 } = useQueue()
 
 const isLoading = ref(false)
@@ -150,7 +150,10 @@ const remove = async () => {
 </script>
 
 <template>
-  <Layout stack main>
+  <Layout
+    stack
+    main
+  >
     <Loader
       v-if="isLoading"
       v-title="labels.title"
@@ -162,22 +165,25 @@ const remove = async () => {
           v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.large_square_crop)"
           :alt="object.title"
           class="channel-image"
-        />
+        >
         <img
           v-else-if="object.artist_credit && object.artist_credit[0] && object.artist_credit[0].artist.cover"
+          v-lazy="object.artist_credit[0].artist.cover.urls.large_square_crop"
           :alt="object.artist_credit[0].artist.name"
           class="channel-image"
-          v-lazy="object.artist_credit[0].artist.cover.urls.large_square_crop"
+        >
-          />
         <img
           v-else
           alt=""
           class="channel-image"
           src="../../assets/audio/default-cover.png"
-        />
+        >
         <!-- ({target}) => target -->
         <!-- Header (TODO: Put into Header component) Hint: Header is heavier fontweight than h1! -->
-          <Layout stack style="flex: 1; gap: 8px;">
+        <Layout
+          stack
+          style="flex: 1; gap: 8px;"
+        >
           <h1>{{ object.title }}</h1>
           <!-- <Header :h1="object.title" /> -->
           <artist-credit-label
@@ -198,7 +204,10 @@ const remove = async () => {
                 {{ t('components.library.AlbumBase.meta.tracks', totalTracks) }}
               </span>
             </template>
-              <i v-if="totalDuration > 0" class="bi bi-dot" />
+            <i
+              v-if="totalDuration > 0"
+              class="bi bi-dot"
+            />
             <human-duration
               v-if="totalDuration > 0"
               :duration="totalDuration"
@@ -233,14 +242,23 @@ const remove = async () => {
                 artistCredit[0].artist.channel &&
                 artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
               :is-loading="isLoading"
-                @confirm="remove()"
               icon="bi-trash"
+              @confirm="remove()"
             >
               {{ t('components.library.AlbumDropdown.button.delete') }}
             </DangerousButton>
-              <Spacer h grow />
+            <Spacer
-              <TrackFavoriteIcon v-if="store.state.auth.authenticated" :album="object" />
+              h
-              <TrackPlaylistIcon v-if="store.state.auth.authenticated" :album="object" />
+              grow
+            />
+            <TrackFavoriteIcon
+              v-if="store.state.auth.authenticated"
+              :album="object"
+            />
+            <TrackPlaylistIcon
+              v-if="store.state.auth.authenticated"
+              :album="object"
+            />
             <!-- TODO: Share Button -->
             <album-dropdown
               :object="object"

front/src/components/library/AlbumDetail.vue

@@ -139,8 +139,8 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
       <Spacer />
       <library-widget
         :url="'albums/' + object.id + '/libraries/'"
-        @loaded="emit('libraries-loaded', $event)"
         :title="t('components.library.AlbumDetail.header.libraries')"
+        @loaded="emit('libraries-loaded', $event)"
       >
         {{ t('components.library.AlbumDetail.description.libraries') }}
       </library-widget>

front/src/components/library/AlbumDropdown.vue

@@ -16,7 +16,7 @@ import Button from '~/components/ui/Button.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 import DangerousButton from '~/components/common/DangerousButton.vue'
-import OptionsButton from "~/components/ui/button/Options.vue"
+import OptionsButton from '~/components/ui/button/Options.vue'
 
 interface Events {
   (e: 'remove'): void
@@ -60,9 +60,10 @@ const open = ref(false)
 
 <template>
   <span>
-    <Modal :title="t('components.library.AlbumDropdown.modal.embed.header')"
+    <Modal
       v-if="isEmbedable"
       v-model="showEmbedModal"
+      :title="t('components.library.AlbumDropdown.modal.embed.header')"
       :cancel="t('components.library.AlbumDropdown.button.cancel')"
     >
       <div class="scrolling content">
@@ -78,7 +79,7 @@ const open = ref(false)
       <template #default="{ toggleOpen }">
         <OptionsButton
           :title="labels.more"
-          isSquare
+          is-square
           @click="toggleOpen()"
         />
       </template>
@@ -95,8 +96,8 @@ const open = ref(false)
 
         <PopoverItem
           v-if="isEmbedable"
-          @click="showEmbedModal = !showEmbedModal"
           icon="bi-code"
+          @click="showEmbedModal = !showEmbedModal"
         >
           {{ t('components.library.AlbumDropdown.button.embed') }}
         </PopoverItem>
@@ -137,8 +138,8 @@ const open = ref(false)
         >
           <DangerousButton
             :is-loading="isLoading"
-            @confirm="remove()"
             icon="bi-trash"
+            @confirm="remove()"
           >
             {{ t('components.library.AlbumDropdown.button.delete') }}
           </DangerousButton>
@@ -152,8 +153,8 @@ const open = ref(false)
             channel: artistCredit[0]?.artist.channel
           })"
           :key="obj.target.type + obj.target.id"
-          @click="report(obj)"
           icon="bi-flag"
+          @click="report(obj)"
         >
           {{ obj.label }}
         </PopoverItem>

front/src/components/library/Albums.vue

@@ -131,27 +131,38 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
 </script>
 
 <template>
-  <Layout stack main v-title="labels.title">
+  <Layout
+    v-title="labels.title"
+    stack
+    main
+  >
     <Header :h1="t('components.library.Albums.header.browse')" />
-    <Layout form flex
+    <Layout
+      form
+      flex
       :class="['ui', {'loading': isLoading}, 'form']"
       @submit.prevent="search"
     >
-      <Input search
+      <Input
         id="album-search"
         v-model="query"
+        search
         name="search"
         :label="t('components.library.Albums.label.search')"
         autofocus
         :placeholder="labels.searchPlaceholder"
-      >
+      />
-      </Input>
       <Pills
         v-model="tagList"
         :label="t('components.library.Albums.label.tags')"
         style="max-width: 150px;"
       />
-      <Layout stack noGap label for="album-ordering">
+      <Layout
+        stack
+        no-gap
+        label
+        for="album-ordering"
+      >
         <span class="label">
           {{ t('components.library.Albums.ordering.label') }}
         </span>
@@ -169,7 +180,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           </option>
         </select>
       </Layout>
-      <Layout stack noGap label for="album-ordering-direction">
+      <Layout
+        stack
+        no-gap
+        label
+        for="album-ordering-direction"
+      >
         <span class="label">
           {{ t('components.library.Albums.ordering.direction.label') }}
         </span>
@@ -186,7 +202,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           </option>
         </select>
       </Layout>
-      <Layout stack noGap label for="album-results">
+      <Layout
+        stack
+        no-gap
+        label
+        for="album-results"
+      >
         <span class="label">
           {{ t('components.library.Albums.pagination.results') }}
         </span>
@@ -205,14 +226,15 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         </select>
       </Layout>
     </Layout>
-    <Loader v-if="isLoading"/>
+    <Loader v-if="isLoading" />
     <Pagination
       v-if="result && result.count > paginateBy"
       v-model:page="page"
       :pages="Math.ceil((result.count || 0)/paginateBy)"
     />
-    <Layout grid
+    <Layout
       v-if="result && result.results.length > 0"
+      grid
       style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
     >
       <AlbumCard
@@ -222,8 +244,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       />
     </Layout>
     <Layout
-      stack
       v-else-if="result && result.results.length === 0"
+      stack
     >
       <Alert blue>
         <i class="bi bi-disc" />
@@ -239,7 +261,10 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         :to="useModal('upload').to"
       >
         <template #image>
-          <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
+          <i
+            class="bi bi-upload"
+            style="font-size: 100px; position: relative; top: 50px;"
+          />
         </template>
       </Card>
     </Layout>

front/src/components/library/ArtistBase.vue

@@ -25,7 +25,6 @@ import Layout from '~/components/ui/Layout.vue'
 import Modal from '~/components/ui/Modal.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 
-
 interface Props {
   id: number
 }
@@ -56,7 +55,6 @@ const musicbrainzUrl = computed(() => object.value?.mbid ? `https://musicbrainz.
 const discogsUrl = computed(() => `https://discogs.com/search/?type=artist&title=${encodeURI(object.value?.name ?? '')}`)
 const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
 
-
 const cover = computed(() => {
   const artistCover: Cover | undefined = object.value?.cover
 
@@ -122,7 +120,11 @@ watch(() => props.id, fetchData, { immediate: true })
 </script>
 
 <template>
-  <Layout stack main v-title="labels.title">
+  <Layout
+    v-title="labels.title"
+    stack
+    main
+  >
     <Loader v-if="isLoading" />
     <template v-if="object && !isLoading">
       <Layout flex>
@@ -131,9 +133,16 @@ watch(() => props.id, fetchData, { immediate: true })
           :alt="object.name"
           class="channel-image"
         >
-        <Layout stack style="flex: 1; gap: 8px;">
+        <Layout
+          stack
+          style="flex: 1; gap: 8px;"
+        >
           <h1>{{ object.name }}</h1>
-          <Layout flex class="meta" style="gap: 0;">
+          <Layout
+            flex
+            class="meta"
+            style="gap: 0;"
+          >
             <div
               v-if="albums"
             >
@@ -181,8 +190,8 @@ watch(() => props.id, fetchData, { immediate: true })
 
                 <PopoverItem
                   v-if="publicLibraries.length > 0"
-                  @click="showEmbedModal = true"
                   icon="bi-code-square"
+                  @click="showEmbedModal = true"
                 >
                   {{ t('components.library.ArtistBase.button.embed') }}
                 </PopoverItem>

front/src/components/library/ArtistDetail.vue

@@ -6,7 +6,6 @@ import { ref, computed, reactive } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
-
 import axios from 'axios'
 
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
@@ -14,7 +13,7 @@ import TrackTable from '~/components/audio/track/Table.vue'
 import TagsList from '~/components/tags/List.vue'
 import AlbumCard from '~/components/album/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Heading from "~/components/ui/Heading.vue";
+import Heading from '~/components/ui/Heading.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Link from '~/components/ui/Link.vue'
 import Spacer from '~/components/ui/Spacer.vue'
@@ -69,14 +68,18 @@ const loadMoreAlbums = async () => {
 </script>
 
 <template>
-  <Layout stack v-if="object">
+  <Layout
+    v-if="object"
+    stack
+  >
     <TagsList
       v-if="object.tags && object.tags.length > 0"
       style="margin-top: -16px;"
       :tags="object.tags"
     />
-    <Alert blue
+    <Alert
       v-if="contentFilter"
+      blue
     >
       <p>
         {{ t('components.library.ArtistDetail.message.filter') }}
@@ -96,7 +99,10 @@ const loadMoreAlbums = async () => {
     </Alert>
     <Loader v-if="isLoadingAlbums" />
     <template v-else-if="albums && albums.length > 0">
-      <Heading h2 section-heading>
+      <Heading
+        h2
+        section-heading
+      >
         {{ t('components.library.ArtistDetail.header.album') }}
       </Heading>
       <Layout flex>
@@ -105,7 +111,10 @@ const loadMoreAlbums = async () => {
           :key="album.id"
           :album="album"
         />
-        <Spacer h grow />
+        <Spacer
+          h
+          grow
+        />
         <Button
           v-if="loadMoreAlbumsUrl !== null"
           primary
@@ -117,7 +126,10 @@ const loadMoreAlbums = async () => {
       </Layout>
     </template>
     <template v-if="tracks.length > 0">
-      <Heading h2 section-heading>
+      <Heading
+        h2
+        section-heading
+      >
         {{ t('components.library.ArtistDetail.header.track') }}
       </Heading>
       <TrackTable
@@ -127,7 +139,10 @@ const loadMoreAlbums = async () => {
         :tracks="tracks.slice(0,5)"
       />
     </template>
-    <Heading h2 section-heading>
+    <Heading
+      h2
+      section-heading
+    >
       {{ t('components.library.ArtistDetail.header.library') }}
     </Heading>
     <LibraryWidget

front/src/components/library/ArtistEdit.vue

@@ -26,16 +26,19 @@ const canEdit = store.state.auth.availablePermissions.library
 </script>
 
 <template>
-<Layout stack>
+  <Layout stack>
     <Spacer />
-  <Section no-items alignLeft
+    <Section
+      no-items
+      align-left
       :h2="canEdit
         ? t('components.library.ArtistEdit.header.edit')
         : t('components.library.ArtistEdit.header.suggest')
       "
     />
-  <Alert yellow
+    <Alert
       v-if="!object.is_local"
+      yellow
     >
       {{ t('components.library.ArtistEdit.message.remote') }}
     </Alert>
@@ -44,5 +47,5 @@ const canEdit = store.state.auth.availablePermissions.library
       :object-type="objectType"
       :object="object"
     />
-</Layout>
+  </Layout>
 </template>

front/src/components/library/Artists.vue

@@ -130,27 +130,38 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
 </script>
 
 <template>
-  <Layout stack main v-title="labels.title">
+  <Layout
+    v-title="labels.title"
+    stack
+    main
+  >
     <Header :h1="t('components.library.Artists.header.browse')" />
-    <Layout form flex
+    <Layout
+      form
+      flex
       :class="['ui', {'loading': isLoading}, 'form']"
       @submit.prevent="search"
     >
-      <Input search
+      <Input
         id="artist-search"
         v-model="query"
+        search
         name="search"
         :label="t('components.library.Artists.label.search')"
         autofocus
         :placeholder="labels.searchPlaceholder"
-      >
+      />
-      </Input>
       <Pills
         v-model="tagList"
         :label="t('components.library.Artists.label.tags')"
         style="max-width: 150px;"
       />
-      <Layout stack noGap label for="artist-ordering">
+      <Layout
+        stack
+        no-gap
+        label
+        for="artist-ordering"
+      >
         <span class="label">
           {{ t('components.library.Artists.ordering.label') }}
         </span>
@@ -168,7 +179,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           </option>
         </select>
       </Layout>
-      <Layout stack noGap label for="artist-ordering-direction">
+      <Layout
+        stack
+        no-gap
+        label
+        for="artist-ordering-direction"
+      >
         <span class="label">
           {{ t('components.library.Artists.ordering.direction.label') }}
         </span>
@@ -185,7 +201,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           </option>
         </select>
       </Layout>
-      <Layout stack noGap label for="artist-results">
+      <Layout
+        stack
+        no-gap
+        label
+        for="artist-results"
+      >
         <span class="label">
           {{ t('components.library.Artists.pagination.results') }}
         </span>
@@ -204,22 +225,23 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         </select>
       </Layout>
       <Toggle
-        :label="t('components.library.Artists.label.excludeCompilation')"
         id="exclude-compilation"
         v-model="excludeCompilation"
+        :label="t('components.library.Artists.label.excludeCompilation')"
         true-value="true"
         false-value="null"
         type="checkbox"
       />
     </Layout>
-    <Loader v-if="isLoading"/>
+    <Loader v-if="isLoading" />
     <Pagination
       v-if="result && result.count > paginateBy"
       v-model:page="page"
       :pages="Math.ceil(result.count / paginateBy)"
     />
-    <Layout grid
+    <Layout
       v-if="result && result.results.length > 0"
+      grid
       style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
     >
       <ArtistCard
@@ -229,8 +251,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       />
     </Layout>
     <Layout
-      stack
       v-else-if="result && result.results.length === 0"
+      stack
     >
       <Alert yellow>
         <i class="compact disc icon" />
@@ -246,7 +268,10 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         :to="useModal('upload').to"
       >
         <template #image>
-          <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
+          <i
+            class="bi bi-upload"
+            style="font-size: 100px; position: relative; top: 50px;"
+          />
         </template>
       </Card>
     </Layout>

front/src/components/library/EditCard.vue

@@ -169,7 +169,7 @@ const alertProps = computed(() => {
 
 <template>
   <Card
-    :alertProps="alertProps"
+    :alert-props="alertProps"
     :to="detailUrl"
     :title="t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)})"
   >
@@ -183,7 +183,6 @@ const alertProps = computed(() => {
           <i class="bi bi-file-music-fill" />
           {{ t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}
         </router-link>
-
       </div>
     </div>
     <div
@@ -196,7 +195,7 @@ const alertProps = computed(() => {
     <template #alert>
       <span class="right floated">
         <span v-if="obj.is_approved && obj.is_applied">
-            <i class="green bi bi-check"/>
+          <i class="green bi bi-check" />
           {{ t('components.library.EditCard.status.applied') }}
         </span>
         <span v-else-if="obj.is_approved">
@@ -302,7 +301,7 @@ const alertProps = computed(() => {
       v-if="obj.created_by"
       class="extra content"
     >
-      <Spacer :size="8"/>
+      <Spacer :size="8" />
       <actor-link :actor="obj.created_by" />
     </div>
 
@@ -313,13 +312,14 @@ const alertProps = computed(() => {
       />
     </template>
 
-    <template #action
+    <template
       v-if="canDelete || canApprove"
+      #action
     >
       <Button
         v-if="canApprove && obj.is_approved !== true"
         primary
-        :isLoading="isLoading"
+        :is-loading="isLoading"
         @click="approve(true)"
       >
         {{ t('components.library.EditCard.button.approve') }}
@@ -327,7 +327,7 @@ const alertProps = computed(() => {
       <Button
         v-if="canApprove && obj.is_approved === null"
         destructive
-        :isLoading="isLoading"
+        :is-loading="isLoading"
         @click="approve(false)"
       >
         {{ t('components.library.EditCard.button.reject') }}
@@ -335,7 +335,7 @@ const alertProps = computed(() => {
       <!--TODO: Make Dangerous Button hand through isLoading prop -->
       <dangerous-button
         v-if="canDelete"
-        :isLoading="isLoading"
+        :is-loading="isLoading"
         :action="remove"
         :title="t('components.library.EditCard.modal.delete.header')"
       >

front/src/components/library/EditForm.vue

@@ -13,9 +13,9 @@ import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
-import Textarea from "~/components/ui/Textarea.vue"
+import Textarea from '~/components/ui/Textarea.vue'
-import Pills from "~/components/ui/Pills.vue"
+import Pills from '~/components/ui/Pills.vue'
-import Alert from "~/components/ui/Alert.vue"
+import Alert from '~/components/ui/Alert.vue'
 
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
 import useEditConfigs from '~/composables/moderation/useEditConfigs'
@@ -137,7 +137,10 @@ const resetField = (fieldId: string) => {
 </script>
 
 <template>
-  <Alert green v-if="submittedMutation">
+  <Alert
+    v-if="submittedMutation"
+    green
+  >
     <h4 class="header">
       {{ t('components.library.EditForm.header.success') }}
     </h4>
@@ -146,14 +149,17 @@ const resetField = (fieldId: string) => {
       :current-state="currentState"
     />
     <Button
-      solid primary
+      solid
+      primary
       @click.prevent="submittedMutation = null"
     >
       {{ t('components.library.EditForm.button.new') }}
     </Button>
   </Alert>
-  <Layout gap-32 v-else>
+  <Layout
-
+    v-else
+    gap-32
+  >
     <!-- Previous edits -->
 
     <edit-list
@@ -196,11 +202,14 @@ const resetField = (fieldId: string) => {
 
     <!-- Add new edits -->
 
-    <form class="ui form" style="display: contents;"
+    <form
+      class="ui form"
+      style="display: contents;"
       @submit.prevent="submit()"
     >
-      <Alert red
+      <Alert
         v-if="errors.length > 0"
+        red
         role="alert"
       >
         <h4 class="header">
@@ -215,15 +224,18 @@ const resetField = (fieldId: string) => {
           </li>
         </ul>
       </Alert>
-      <Alert red
+      <Alert
         v-if="!canEdit"
+        red
       >
         {{ t('components.library.EditForm.message.noPermission') }}
       </Alert>
-      <Layout stack gap-8
+      <Layout
-        v-if="values"
         v-for="fieldConfig in config.fields"
+        v-if="values"
         :key="fieldConfig.id"
+        stack
+        gap-8
         class="ui field"
       >
         <template v-if="fieldConfig.type === 'text'">
@@ -259,10 +271,10 @@ const resetField = (fieldId: string) => {
         </template>
         <template v-else-if="fieldConfig.type === 'content'">
           <Textarea
-            :label="fieldConfig.label"
             v-model="values[fieldConfig.id].text"
+            :label="fieldConfig.label"
             :field-id="fieldConfig.id"
-            initialLines="3"
+            initial-lines="3"
           />
         </template>
         <!-- TODO: Style Attachment Input -->
@@ -281,9 +293,9 @@ const resetField = (fieldId: string) => {
         <template v-else-if="fieldConfig.type === 'tags'">
           <Pills
             :id="fieldConfig.id"
-            :label="fieldConfig.label"
             ref="tags"
             v-model="values[fieldConfig.id]"
+            :label="fieldConfig.label"
             required="fieldConfig.required"
           >
             <Button
@@ -298,7 +310,7 @@ const resetField = (fieldId: string) => {
         <Button
           low-height
           secondary
-          alignSelf="end"
+          align-self="end"
           icon="bi-arrow-counterclockwise"
           form="noop"
           :disabled="fieldValuesChanged(fieldConfig.id) ? undefined : true"
@@ -307,12 +319,12 @@ const resetField = (fieldId: string) => {
           {{ t('components.library.EditForm.button.reset') }}
         </Button>
       </Layout>
-      <Spacer/>
+      <Spacer />
       <Textarea
         id="change-summary"
         v-model="summary"
         name="change-summary"
-        initialLines="3"
+        initial-lines="3"
         :label="t('components.library.EditForm.label.summary')"
         :placeholder="labels.summaryPlaceholder"
       >
@@ -327,7 +339,7 @@ const resetField = (fieldId: string) => {
         </Button>
       </Textarea>
       <Button
-        :isLoading="isLoading"
+        :is-loading="isLoading"
         primary
         :disabled="isLoading || !mutationPayload"
       >

front/src/components/library/EditList.vue

@@ -61,11 +61,10 @@ watchEffect(() => fetchData())
       :disabled="!previousPage"
       primary
       round
-      alignSelf="center"
+      align-self="center"
       icon="bi-chevron-left"
       @click="fetchData(previousPage)"
-    >
+    />
-    </Button>
     <Loader v-if="isLoading" />
     <edit-card
       v-for="obj in objects"
@@ -78,12 +77,11 @@ watchEffect(() => fetchData())
     <Button
       v-if="nextPage || previousPage"
       :disabled="!nextPage"
-      alignSelf="center"
+      align-self="center"
       primary
       round
       icon="bi-chevron-right"
       @click="fetchData(nextPage)"
-    >
+    />
-    </Button>
   </Layout>
 </template>

front/src/components/library/FileUpload.vue

@@ -97,7 +97,8 @@ const library = ref<Library>()
 
 // Old implementation:
 
-watch(privacyLevel, async(newValue) => { try {
+watch(privacyLevel, async (newValue) => {
+  try {
     const response = await axios.get<paths['/api/v2/libraries/']['get']['responses']['200']['content']['application/json']>('libraries/', {
       params: {
         privacy_level: privacyLevel.value,
@@ -105,11 +106,11 @@ watch(privacyLevel, async(newValue) => { try {
       }
     })
 
-  library.value = response.data.results.find(({name})=>name===privacyLevel.value)
+    library.value = response.data.results.find(({ name }) => name === privacyLevel.value)
-} catch (error) {
+  } catch (error) {
     useErrorHandler(error as Error)
-}}, { immediate: true })
+  }
-
+}, { immediate: true })
 
 //
 // File counts
@@ -355,14 +356,21 @@ useEventListener(window, 'beforeunload', (event) => {
       </div>
     </div>
   </div>
-  <Slider :options="options" v-model="privacyLevel" :label="t('components.manage.library.UploadsTable.label.visibility')" />
+  <Slider
+    v-model="privacyLevel"
+    :options="options"
+    :label="t('components.manage.library.UploadsTable.label.visibility')"
+  />
   <file-upload-widget
     ref="upload"
     v-model="files"
     :data="uploadData"
     @input-file="inputFile"
   >
-    <Button primary icon="bi bi-upload" >
+    <Button
+      primary
+      icon="bi bi-upload"
+    >
       {{ t('components.library.FileUpload.label.uploadWidget') }}
     </Button>
     <p>
@@ -602,11 +610,10 @@ useEventListener(window, 'beforeunload', (event) => {
             <template v-else-if="!file.success">
               <Button
                 tiny
-                @click.prevent="upload.remove(file)"
                 style="float: right;"
                 icon="bi-trash-fill"
-              >
+                @click.prevent="upload.remove(file)"
-              </Button>
+              />
             </template>
           </td>
         </tr>

front/src/components/library/FsBrowser.vue

@@ -9,7 +9,6 @@ import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 
-
 interface Events {
   (e: 'update:modelValue', value: string[]): void
   (e: 'import'): void
@@ -37,7 +36,7 @@ const handleClick = (entry: FSEntry) => {
 
   value.value.push(entry.name)
 }
-const path = computed (() => props.data.root + '/' + value.value.join('/'))
+const path = computed(() => props.data.root + '/' + value.value.join('/'))
 </script>
 
 <template>

front/src/components/library/FsLogs.vue

@@ -2,7 +2,6 @@
 import type { FSLogs } from '~/types'
 import { useI18n } from 'vue-i18n'
 
-
 interface Props {
   data: FSLogs
 }

front/src/components/library/Home.vue

@@ -62,9 +62,11 @@ fetchData()
 </script>
 
 <template>
-  <Layout main stack
+  <Layout
     :key="route?.name ?? undefined"
     v-title="labels.title"
+    main
+    stack
   >
     <Header :h1="t('components.Sidebar.header.explore')" />
     <playlist-widget

front/src/components/library/ImportStatusModal.vue

@@ -76,8 +76,9 @@ const getErrorData = (upload: Upload) => {
 </script>
 
 <template>
-  <Modal :title="t('components.library.ImportStatusModal.header.importDetail')"
+  <Modal
     v-model="show"
+    :title="t('components.library.ImportStatusModal.header.importDetail')"
     :cancel="t('components.library.ImportStatusModal.button.close')"
   >
     <div

front/src/components/library/Podcasts.vue

@@ -128,34 +128,44 @@ const labels = computed(() => ({
 
 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
 
-const { isOpen:subscribeIsOpen, to:subscribe } = useModal('subscribe')
+const { isOpen: subscribeIsOpen, to: subscribe } = useModal('subscribe')
-const { to:upload } = useModal('upload')
+const { to: upload } = useModal('upload')
 </script>
 
 <template>
-  <Layout stack main>
+  <Layout
+    stack
+    main
+  >
     <Header
       :h1="t('components.library.Podcasts.header.browse')"
     />
-    <Layout form flex
+    <Layout
+      form
+      flex
       :class="['ui', {'loading': isLoading}, 'form']"
       @submit.prevent="search"
     >
-      <Input search
+      <Input
         id="artist-search"
         v-model="query"
+        search
         name="search"
         :label="t('components.library.Podcasts.label.search')"
         autofocus
         :placeholder="labels.searchPlaceholder"
-      >
+      />
-      </Input>
       <Pills
         v-model="tagList"
         :label="t('components.library.Podcasts.label.tags')"
         style="max-width: 150px;"
       />
-      <Layout stack noGap label for="artist-ordering">
+      <Layout
+        stack
+        no-gap
+        label
+        for="artist-ordering"
+      >
         <span class="label">
           {{ t('components.library.Podcasts.ordering.label') }}
         </span>
@@ -173,7 +183,12 @@ const { to:upload } = useModal('upload')
           </option>
         </select>
       </Layout>
-      <Layout stack noGap label for="artist-ordering-direction">
+      <Layout
+        stack
+        no-gap
+        label
+        for="artist-ordering-direction"
+      >
         <span class="label">
           {{ t('components.library.Podcasts.ordering.direction.label') }}
         </span>
@@ -190,7 +205,12 @@ const { to:upload } = useModal('upload')
           </option>
         </select>
       </Layout>
-      <Layout stack noGap label for="artist-results">
+      <Layout
+        stack
+        no-gap
+        label
+        for="artist-results"
+      >
         <span class="label">
           {{ t('components.library.Podcasts.pagination.results') }}
         </span>
@@ -209,11 +229,12 @@ const { to:upload } = useModal('upload')
         </select>
       </Layout>
     </Layout>
-    <Layout grid
+    <Layout
       v-if="result && result.results.length > 0"
+      grid
       style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
     >
-    <Loader v-if="isLoading"/>
+      <Loader v-if="isLoading" />
       <artist-card
         v-for="artist in result.results"
         :key="artist.id"
@@ -221,8 +242,8 @@ const { to:upload } = useModal('upload')
       />
     </Layout>
     <Layout
-      stack
       v-else-if="result && result.results.length === 0"
+      stack
     >
       <Alert yellow>
         {{ t('components.library.Podcasts.empty.noResults') }}
@@ -238,7 +259,10 @@ const { to:upload } = useModal('upload')
           :to="subscribe"
         >
           <template #image>
-            <i class="bi bi-plus" style="font-size: 100px; position: relative; top: 50px;" />
+            <i
+              class="bi bi-plus"
+              style="font-size: 100px; position: relative; top: 50px;"
+            />
           </template>
         </Card>
         <Card
@@ -251,7 +275,10 @@ const { to:upload } = useModal('upload')
           :to="upload"
         >
           <template #image>
-            <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
+            <i
+              class="bi bi-upload"
+              style="font-size: 100px; position: relative; top: 50px;"
+            />
           </template>
         </Card>
       </Layout>
@@ -290,7 +317,5 @@ const { to:upload } = useModal('upload')
         </Button>
       </template>
     </Modal>
-
   </Layout>
-
 </template>

front/src/components/library/Radios.vue

@@ -114,9 +114,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 </script>
 
 <template>
-  <Layout main stack gap-64>
+  <Layout
+    main
+    stack
+    gap-64
+  >
     <Header :h1="t('components.library.Radios.header.browse')" />
-    <Section alignLeft :h2="t('components.library.Radios.header.instance')">
+    <Section
+      align-left
+      :h2="t('components.library.Radios.header.instance')"
+    >
       <radio-card
         v-if="isAuthenticated"
         :type="'actor-content'"
@@ -157,18 +164,26 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         {{ t('components.library.Radios.button.create') }}
       </Link>
     </h2>
-    <Layout flex form
+    <Layout
+      flex
+      form
       :class="['ui', {'loading': isLoading}, 'form']"
       @submit.prevent="search"
     >
-      <Input search
+      <Input
         id="radios-search"
         v-model="query"
+        search
         name="search"
         :label="t('components.library.Radios.label.search')"
         :placeholder="labels.searchPlaceholder"
       />
-      <Layout stack noGap label for="radios-ordering">
+      <Layout
+        stack
+        no-gap
+        label
+        for="radios-ordering"
+      >
         <span class="label">
           {{ t('components.library.Radios.ordering.label') }}
         </span>
@@ -186,7 +201,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </option>
         </select>
       </Layout>
-      <Layout stack noGap label for="radios-ordering-direction">
+      <Layout
+        stack
+        no-gap
+        label
+        for="radios-ordering-direction"
+      >
         <span class="label">
           {{ t('components.library.Radios.ordering.direction.label') }}
         </span>
@@ -203,7 +223,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </option>
         </select>
       </Layout>
-      <Layout stack noGap label for="radios-results">
+      <Layout
+        stack
+        no-gap
+        label
+        for="radios-results"
+      >
         <span class="label">
           {{ t('components.library.Radios.pagination.results') }}
         </span>
@@ -223,11 +248,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       </Layout>
     </Layout>
     <Alert
+      v-if="result && result.results.length === 0"
       blue
       style="align-items: center;"
-      v-if="result && result.results.length === 0"
     >
-      <i class="bi bi-broadcast-pin" style="font-size: 80px" />
+      <i
+        class="bi bi-broadcast-pin"
+        style="font-size: 80px"
+      />
       <Spacer />
       {{ t('components.library.Radios.empty.noResults') }}
       <Spacer />
@@ -241,8 +269,9 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         {{ t('components.library.Radios.button.add') }}
       </Button>
     </Alert>
-    <Layout flex
+    <Layout
       v-if="result && result.results.length > 0"
+      flex
     >
       <Pagination
         v-if="result && result.count > paginateBy"

front/src/components/library/TagDetail.vue

@@ -27,7 +27,11 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <Layout main stack v-title="labels.title">
+  <Layout
+    v-title="labels.title"
+    main
+    stack
+  >
     <h1 class="ui header">
       <span class="funkwhale solid raised secondary pill">
         <span class="pill-content">
@@ -35,7 +39,10 @@ const labels = computed(() => ({
         </span>
       </span>
     </h1>
-    <Layout flex class="buttons">
+    <Layout
+      flex
+      class="buttons"
+    >
       <radio-button
         type="tag"
         :object-id="id"

front/src/components/library/TrackBase.vue

@@ -126,7 +126,10 @@ watch(showDeleteModal, (newValue) => {
 </script>
 
 <template>
-<Layout stack main>
+  <Layout
+    stack
+    main
+  >
     <Loader
       v-if="isLoading"
       v-title="labels.title"
@@ -152,8 +155,15 @@ watch(showDeleteModal, (newValue) => {
           src="../../assets/audio/default-cover.png"
         >
 
-      <Layout stack style="flex: 1; gap: 8px;">
+        <Layout
-        <Layout flex no-gap style="align-items: baseline; margin-bottom: 24px;">
+          stack
+          style="flex: 1; gap: 8px;"
+        >
+          <Layout
+            flex
+            no-gap
+            style="align-items: baseline; margin-bottom: 24px;"
+          >
             <h1>{{ track.title }}</h1>
             <Spacer grow />
             <Button
@@ -172,7 +182,10 @@ watch(showDeleteModal, (newValue) => {
             <span>{{ t('components.library.TrackBase.title') }}</span>
             <i class="bi bi-dot" />
             <span>{{ track.album.title }}</span>
-            <i v-if="totalDuration > 0" class="bi bi-dot" />
+            <i
+              v-if="totalDuration > 0"
+              class="bi bi-dot"
+            />
             <human-duration
               v-if="totalDuration > 0"
               :duration="totalDuration"
@@ -187,10 +200,19 @@ watch(showDeleteModal, (newValue) => {
               :track="track"
             />
 
-          <Spacer h grow />
+            <Spacer
+              h
+              grow
+            />
 
-          <TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
+            <TrackFavoriteIcon
-          <TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
+              v-if="store.state.auth.authenticated"
+              :track="track"
+            />
+            <TrackPlaylistIcon
+              v-if="store.state.auth.authenticated"
+              :track="track"
+            />
             <Popover v-model:open="open">
               <template #default="{ toggleOpen }">
                 <OptionsButton @click="toggleOpen" />
@@ -207,8 +229,8 @@ watch(showDeleteModal, (newValue) => {
 
                 <PopoverItem
                   v-if="isEmbedable"
-                @click="showEmbedModal = !showEmbedModal"
                   icon="bi-code-slash"
+                  @click="showEmbedModal = !showEmbedModal"
                 >
                   {{ t('components.library.TrackBase.button.embed') }}
                 </PopoverItem>
@@ -245,8 +267,8 @@ watch(showDeleteModal, (newValue) => {
                     store.state.auth.authenticated &&
                     artist.channel &&
                     artist.attributed_to.full_username === store.state.auth.fullUsername"
-                @click="showDeleteModal = true"
                   icon="bi-trash"
+                  @click="showDeleteModal = true"
                 >
                   {{ t('components.library.TrackBase.button.delete') }}
                 </PopoverItem>
@@ -256,8 +278,8 @@ watch(showDeleteModal, (newValue) => {
                 <PopoverItem
                   v-for="obj in getReportableObjects({ track })"
                   :key="obj.target.type + obj.target.id"
-                @click="report(obj)"
                   icon="bi-flag"
+                  @click="report(obj)"
                 >
                   {{ obj.label }}
                 </PopoverItem>
@@ -369,7 +391,6 @@ watch(showDeleteModal, (newValue) => {
         @libraries-loaded="libraries = $event"
       />
     </template>
-
   </Layout>
 </template>
 

front/src/components/library/TrackDetail.vue

@@ -98,7 +98,7 @@ const release_details: {
   },
   {
     label: t('components.library.TrackDetail.table.release.license'),
-    release_value: license?.name || t('components.library.TrackDetail.notApplicable'),
+    release_value: license.value?.name || t('components.library.TrackDetail.notApplicable')
   }
 ]
 
@@ -124,7 +124,7 @@ const track_details: {
     label:
     t('components.library.TrackDetail.table.track.bitrate.label'),
     track_value: upload?.value.bitrate
-      ? t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.value.bitrate)})
+      ? t('components.library.TrackDetail.table.track.bitrate.value', { bitrate: humanSize(upload.value.bitrate) })
       : t('components.library.TrackDetail.notApplicable')
   },
   {
@@ -135,17 +135,26 @@ const track_details: {
 </script>
 
 <template>
-  <Layout stack v-if="track">
+  <Layout
+    v-if="track"
+    stack
+  >
     <TagsList
       v-if="track.tags && track.tags.length > 0"
       style="margin-top: -16px;"
       :tags="track.tags"
     />
 
-    <Layout flex style="gap: 24px;">
+    <Layout
-      <Layout stack style="flex: 1; gap: 0;">
+      flex
+      style="gap: 24px;"
+    >
+      <Layout
+        stack
+        style="flex: 1; gap: 0;"
+      >
         <Section
-          alignLeft
+          align-left
           h2="Release Details"
           :action="{
             text:'View on MusicBrainz',
@@ -153,28 +162,63 @@ const track_details: {
           }"
           icon="bi-box-arrow-up-right"
         />
-        <Layout flex class="details" v-for="item in release_details" key="label"
+        <Layout
+          v-for="item in release_details"
+          key="label"
+          flex
+          class="details"
           style="min-width: 120px;"
         >
           <span class="label">{{ item.label }}</span>
-          <Spacer h grow />
+          <Spacer
-          <Link v-if="item.link" class="value" :to="item.link">{{ item.release_value }}</Link>
+            h
-          <span v-else class="value">{{ item.release_value }}</span>
+            grow
+          />
+          <Link
+            v-if="item.link"
+            class="value"
+            :to="item.link"
+          >
+            {{ item.release_value }}
+          </Link>
+          <span
+            v-else
+            class="value"
+          >{{ item.release_value }}</span>
         </Layout>
       </Layout>
 
-      <Layout stack style="flex: 1; gap: 0;">
+      <Layout
+        stack
+        style="flex: 1; gap: 0;"
+      >
         <Section
-          alignLeft
+          align-left
           h2="Track Details"
         />
-        <Layout flex class="details" v-for="item in track_details" key="label"
+        <Layout
+          v-for="item in track_details"
+          key="label"
+          flex
+          class="details"
           style="min-width: 120px;"
         >
           <span class="label">{{ item.label }}</span>
-          <Spacer h grow />
+          <Spacer
-          <Link v-if="item.link" class="value" :to="item.link">{{ item.track_value }}</Link>
+            h
-          <span v-else class="value">{{ item.track_value }}</span>
+            grow
+          />
+          <Link
+            v-if="item.link"
+            class="value"
+            :to="item.link"
+          >
+            {{ item.track_value }}
+          </Link>
+          <span
+            v-else
+            class="value"
+          >{{ item.track_value }}</span>
         </Layout>
       </Layout>
     </Layout>

front/src/components/library/TrackEdit.vue

@@ -5,7 +5,6 @@ import type { Library } from '~/types'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-
 import store from '~/store'
 import axios from 'axios'
 
@@ -50,8 +49,9 @@ fetchLicenses()
 
 <template>
   <Header :h2="canEdit ? t('components.library.TrackEdit.header.edit') : t('components.library.TrackEdit.header.suggest')" />
-  <Alert yellow
+  <Alert
     v-if="!object.is_local"
+    yellow
   >
     {{ t('components.library.TrackEdit.message.remote') }}
   </Alert>

front/src/components/library/radios/Builder.vue

@@ -195,9 +195,9 @@ const save = async () => {
 
 <template>
   <Layout
+    v-title="labels.title"
     stack
     main
-    v-title="labels.title"
   >
     <section>
       <h1>

front/src/components/library/radios/Filter.vue

@@ -186,9 +186,10 @@ fetchCandidates()
       >
         {{ t('components.library.radios.Filter.matchingTracks', checkResult.candidates.count) }}
       </a>
-      <Modal :title="t('components.library.radios.Filter.matchingTracksModalHeader')"
+      <Modal
         v-if="checkResult"
         v-model:show="showCandidadesModal"
+        :title="t('components.library.radios.Filter.matchingTracksModalHeader')"
       >
         <div class="content">
           <div class="description">

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

@@ -340,8 +340,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
               icon="bi-question-circle"
               :title="sharedLabels.fields.import_status.label"
               @click="detailedUpload = scope.obj; showUploadDetailModal = true"
-            >
+            />
-            </Button>
           </td>
           <td>
             <span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>

front/src/components/manage/moderation/InstancePolicyForm.vue

@@ -241,8 +241,8 @@ const remove = async () => {
     <dangerous-button
       v-if="object"
       style="float: right;"
-      @confirm="remove"
       :title="t('components.manage.moderation.InstancePolicyForm.modal.delete.header')"
+      @confirm="remove"
     >
       {{ t('components.manage.moderation.InstancePolicyForm.button.delete') }}
       <template #modal-content>

front/src/components/manage/moderation/InstancePolicyModal.vue

@@ -30,7 +30,7 @@ const obj = computed(() => result.value?.results[0] ?? null)
 
 const isLoading = ref(false)
 
-watch (show, (newValue) => {
+watch(show, (newValue) => {
   if (newValue) fetchData()
 })
 
@@ -72,8 +72,9 @@ const fetchData = async () => {
     <slot>
       {{ t('components.manage.moderation.InstancePolicyModal.button.show') }}
     </slot>
-    <Modal :title="t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target})"
+    <Modal
       v-model="show"
+      :title="t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target})"
       :cancel="t('components.manage.moderation.InstancePolicyModal.button.close')"
     >
       <div class="content">

front/src/components/manage/moderation/NotesThread.vue

@@ -67,9 +67,9 @@ const remove = async (note: Note) => {
           <dangerous-button
             :is-loading="isLoading"
             low-height
-            @confirm="remove(note)"
             icon="bi-trash"
             :title="t('components.manage.moderation.NotesThread.modal.delete.header')"
+            @confirm="remove(note)"
           >
             {{ t('components.manage.moderation.NotesThread.button.delete') }}
 

front/src/components/manage/moderation/UserRequestCard.vue

@@ -5,7 +5,6 @@ import { useStore } from '~/store'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-
 import axios from 'axios'
 
 import NotesThread from '~/components/manage/moderation/NotesThread.vue'

front/src/components/moderation/FilterModal.vue

@@ -60,14 +60,16 @@ const hide = async () => {
 </script>
 
 <template>
-  <Modal v-model="show"
+  <Modal
+    v-model="show"
     :title="type==='artist' ? t('components.moderation.FilterModal.header.modal', {name: target?.name}) : errors.length > 0 ? t('components.moderation.FilterModal.header.failure') : ''"
     :cancel="t('components.moderation.FilterModal.button.cancel')"
   >
     <div class="scrolling content">
       <div class="description">
-        <Alert red
+        <Alert
           v-if="errors.length > 0"
+          red
         >
           <ul class="list">
             <li

front/src/components/moderation/ReportModal.vue

@@ -125,8 +125,9 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <Modal :title="target ? t('components.moderation.ReportModal.header.modal') : errors.length > 0 ? t('components.moderation.ReportModal.header.submissionFailure') : ''"
+  <Modal
     v-model="show"
+    :title="target ? t('components.moderation.ReportModal.header.modal') : errors.length > 0 ? t('components.moderation.ReportModal.header.submissionFailure') : ''"
     :cancel="t('components.moderation.ReportModal.button.cancel')"
   >
     <h2
@@ -141,8 +142,9 @@ watchEffect(async () => {
     </h2>
     <div class="scrolling content">
       <div class="description">
-        <Alert red
+        <Alert
           v-if="errors.length > 0"
+          red
         >
           <ul class="list">
             <li
@@ -241,8 +243,9 @@ watchEffect(async () => {
       </div>
     </div>
     <template #actions>
-      <Button destructive
+      <Button
         v-if="canSubmit"
+        destructive
         :is-loading="isLoading"
         type="submit"
         form="report-form"

front/src/components/playlist/Card.vue

@@ -11,7 +11,7 @@ import type { Playlist } from '~/types'
 const { t } = useI18n()
 
 const play = defineEmit<[playlist: Playlist]>()
-const {playlist} = defineProps<{playlist: Playlist}>()
+const { playlist } = defineProps<{playlist: Playlist}>()
 
 const covers = computed(() => playlist.album_covers
   .filter((src, index, array) => array.indexOf(src) === index)
@@ -36,15 +36,15 @@ if (import.meta.env.PROD) {
 <template>
   <Card
     :title="playlist.name"
-    @click="navigate('playlist')"
     class="playlist-card"
+    @click="navigate('playlist')"
   >
     <template #image>
       <img
         v-for="src in covers"
         :key="src"
         :src="src"
-      />
+      >
       <div
         v-for="i in Math.max(0, 4 - covers.length)"
         :key="i"
@@ -54,8 +54,8 @@ if (import.meta.env.PROD) {
     <PlayButton @play="play(playlist)" />
 
     <a
-      @click.stop="navigate('user')"
       class="funkwhale link"
+      @click.stop="navigate('user')"
     >
       {{ t('vui.by-user', playlist.actor.full_username) }}
     </a>

front/src/components/playlists/Card.vue

@@ -45,16 +45,16 @@ const bgcolors = ref([
   '#292525',
   '#403a3b',
   '#322f2f'
-]);
+])
 
-function shuffleArray(array: string[]): string[] {
+function shuffleArray (array: string[]): string[] {
-  return [...array].sort(() => Math.random() - 0.5);
+  return [...array].sort(() => Math.random() - 0.5)
 }
 
-const randomizedColors = computed(() => shuffleArray(bgcolors.value));
+const randomizedColors = computed(() => shuffleArray(bgcolors.value))
 
 const goToPlaylist = () => {
-  router.push({name: 'library.playlists.detail', params: {id: props.playlist.id}})
+  router.push({ name: 'library.playlists.detail', params: { id: props.playlist.id } })
 }
 
 const updatedTitle = computed(() => {
@@ -72,7 +72,7 @@ const updatedAgo = computed(() => moment(props.playlist.modification_date).fromN
   >
     <template #topright>
       <PlayButton
-        iconOnly
+        icon-only
         :is-playable="playlist.is_playable"
         :playlist="playlist"
       />
@@ -86,7 +86,7 @@ const updatedAgo = computed(() => moment(props.playlist.modification_date).fromN
           v-lazy="url"
           :alt="playlist.name"
           :style="{ backgroundColor: randomizedColors[idx % randomizedColors.length] }"
-        />
+        >
       </div>
     </template>
 

front/src/components/playlists/CardList.vue

@@ -12,7 +12,10 @@ defineProps<Props>()
 </script>
 
 <template>
-  <Layout grid v-if="playlists.length > 0">
+  <Layout
+    v-if="playlists.length > 0"
+    grid
+  >
     <PlaylistsCard
       v-for="playlist in playlists"
       :key="playlist.id"

front/src/components/playlists/Editor.vue

@@ -184,8 +184,8 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
       <i class="dangerclose icon" />
       {{ t('components.playlists.Editor.error.sync') }}
       <Alert
-          red
         v-if="errors.length > 0"
+        red
         role="alert"
       >
         <ul class="list">
@@ -199,8 +199,8 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
       </Alert>
     </template>
     <Alert
-        red
       v-else-if="status === 'confirmDuplicateAdd'"
+      red
       role="alert"
     >
       <p>

front/src/components/playlists/Form.vue

@@ -55,7 +55,7 @@ const privacyLevelChoices = {
   me: sharedLabels.fields.privacy_level.choices.me,
   instance: sharedLabels.fields.privacy_level.choices.instance,
   everyone: sharedLabels.fields.privacy_level.choices.everyone
-} as const satisfies Record<PrivacyLevel, string>;
+} as const satisfies Record<PrivacyLevel, string>
 
 const el = useCurrentElement()
 
@@ -95,7 +95,8 @@ const submit = async () => {
 </script>
 
 <template>
-  <Layout form
+  <Layout
+    form
     @submit.prevent="submit()"
   >
     <h3
@@ -145,7 +146,11 @@ const submit = async () => {
       />
     </div>
     <div class="field">
-    <Slider :options="privacyLevelChoices" v-model="privacyLevel" :label="t('components.playlists.Form.label.visibility')" />
+      <Slider
+        v-model="privacyLevel"
+        :options="privacyLevelChoices"
+        :label="t('components.playlists.Form.label.visibility')"
+      />
     </div>
     <div class="field">
       <span id="updatePlaylistLabel" />

front/src/components/playlists/PlaylistDropdown.vue

@@ -114,8 +114,9 @@ const showDeleteModal = ref(false)
         >
           {{ t('views.playlists.Detail.button.embed') }}
         </PopoverItem>
-      <PopoverItem destructive
+        <PopoverItem
           v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
+          destructive
           icon="bi-trash"
           :action="deletePlaylist"
           @click="showDeleteModal = !showDeleteModal"
@@ -192,5 +193,4 @@ const showDeleteModal = ref(false)
       </Button>
     </template>
   </Modal>
-
 </template>

front/src/components/playlists/PlaylistModal.vue

@@ -91,7 +91,7 @@ store.dispatch('playlists/fetchOwn')
     v-model="store.state.playlists.showModal"
     :title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
     :cancel="t('components.playlists.PlaylistModal.button.cancel')"
-    overPopover
+    over-popover
   >
     <template v-if="track">
       <h3 class="ui header">

front/src/components/playlists/TrackPlaylistIcon.vue

@@ -45,6 +45,5 @@ const labels = computed(() => ({
     :aria-label="labels.addToPlaylist"
     :title="labels.addToPlaylist"
     @click.stop="store.commit('playlists/chooseTrack', track)"
-  >
+  />
-  </Button>
 </template>

front/src/components/playlists/Widget.vue

@@ -5,7 +5,6 @@ import { ref, reactive, watch } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
-
 import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -74,7 +73,10 @@ watch(
     small-items
     :h2="title"
   >
-    <Loader v-if="isLoading" style="grid-column: 1 / -1;" />
+    <Loader
+      v-if="isLoading"
+      style="grid-column: 1 / -1;"
+    />
     <Alert
       v-if="!isLoading && objects.length === 0"
       style="grid-column: 1 / -1;"

front/src/components/podcast/Card.vue

@@ -15,12 +15,12 @@ const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Dat
   <Card
     :title="podcast.uuid"
     :image="podcast.artist?.cover?.urls.original"
-    @click="navigate"
     class="podcast-card"
+    @click="navigate"
   >
     <a
-      @click.stop="navigate"
       class="funkwhale link"
+      @click.stop="navigate"
     >
       {{ podcast.artist?.name }}
     </a>

front/src/components/radio/Card.vue

@@ -23,8 +23,8 @@ const pastel = usePastel(() => props.color)
   <fw-card
     :title="radio.name"
     :class="pastel"
-    @click="navigate"
     class="radio-card"
+    @click="navigate"
   >
     <template #image>
       <div class="cover-name">

front/src/components/radios/Button.vue

@@ -88,6 +88,8 @@ const toggleRadio = () => {
     :square="store.state.auth.authenticated && type === 'custom'"
     @click="toggleRadio"
   >
-    <div v-if="!playOnly">{{ buttonLabel }}</div>
+    <div v-if="!playOnly">
+      {{ buttonLabel }}
+    </div>
   </Button>
 </template>

front/src/components/radios/Card.vue

@@ -48,7 +48,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
         :type="type"
         :custom-radio-id="customRadioId"
         :object-id="objectId"
-        playOnly
+        play-only
       />
     </template>
 
@@ -89,7 +89,6 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
     icon="bi-boombox-fill"
     :title="radio.name"
   >
-
     <template #default>
       <user-link
         v-if="radio.user"
@@ -125,7 +124,6 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
   </Card>
 </template>
 
-
 <style lang="scss" scoped>
 .play-button.is-icon-only {
   top: 16px;

front/src/components/tags/List.vue

@@ -36,7 +36,11 @@ const tags = computed(() => {
 </script>
 
 <template>
-  <Layout flex gap-8 class="component-tags-list">
+  <Layout
+    flex
+    gap-8
+    class="component-tags-list"
+  >
     <router-link
       v-for="tag in tags"
       :key="tag"

front/src/components/ui/Activity.vue

@@ -8,7 +8,6 @@ import { type Track, type User } from '~/types'
 import OptionsButton from '~/components/ui/button/Options.vue'
 import PlayButton from '~/components/ui/button/Play.vue'
 
-
 const { t } = useI18n()
 
 const emit = defineEmits<{ play: [track: Track] }>()
@@ -25,17 +24,32 @@ const profileParams = computed(() => {
 </script>
 
 <template>
-  <div class="funkwhale activity" @click="navigate('track')">
+  <div
+    class="funkwhale activity"
+    @click="navigate('track')"
+  >
     <div class="activity-image">
-      <img :src="track.cover?.urls.original" />
+      <img :src="track.cover?.urls.original">
-      <PlayButton @play="emit('play', track)" :round="false" :shadow="false" />
+      <PlayButton
+        :round="false"
+        :shadow="false"
+        @play="emit('play', track)"
+      />
     </div>
     <div class="activity-content">
-      <div class="track-title">{{ track.title }}</div>
+      <div class="track-title">
-      <a @click.stop="navigate('artist')" class="funkwhale link artist">
+        {{ track.title }}
+      </div>
+      <a
+        class="funkwhale link artist"
+        @click.stop="navigate('artist')"
+      >
         {{ firstArtist?.name /* TODO: Multi-Artist! */ }}
       </a>
-      <a @click.stop="navigate('user')" class="funkwhale link user">
+      <a
+        class="funkwhale link user"
+        @click.stop="navigate('user')"
+      >
         {{ t('vui.by-user', { username: user.username }) }}
       </a>
     </div>