Code formatting, translation mistakes, and removal of useless libraries.

web-src/src/pages/PageAbout.vue

@@ -4,7 +4,6 @@
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths has-text-centered-mobile">
-            <p class="heading" v-html="$t('page.about.version', {version: config.version})" />
             <h1 class="title is-4" v-text="config.library_name" />
           </div>
         </div>
@@ -25,43 +24,78 @@
                 <!-- Right side -->
                 <div class="level-right">
                   <div v-if="library.updating">
-                    <a class="button is-small is-loading" v-text="$t('page.about.update')" />
+                    <a
+                      class="button is-small is-loading"
+                      v-text="$t('page.about.update')"
+                    />
                   </div>
                   <div v-else>
-                    <a class="button is-small" @click="showUpdateDialog()" v-text="$t('page.about.update')" />
+                    <a
+                      class="button is-small"
+                      @click="showUpdateDialog()"
+                      v-text="$t('page.about.update')"
+                    />
                   </div>
                 </div>
               </nav>
               <table class="table">
                 <tbody>
                   <tr>
-                    <th v-text="$t('page.about.artists')" />
-                    <td class="has-text-right" v-text="$filters.number(library.artists)" />
+                    <th class="has-text-left" v-text="$t('page.about.artists')" />
+                    <td
+                      class="has-text-right"
+                      v-text="$filters.number(library.artists)"
+                    />
                   </tr>
                   <tr>
-                    <th v-text="$t('page.about.albums')" />
-                    <td class="has-text-right" v-text="$filters.number(library.albums)" />
+                    <th class="has-text-left" v-text="$t('page.about.albums')" />
+                    <td
+                      class="has-text-right"
+                      v-text="$filters.number(library.albums)"
+                    />
                   </tr>
                   <tr>
-                    <th v-text="$t('page.about.tracks')" />
-                    <td class="has-text-right" v-text="$filters.number(library.songs)" />
+                    <th class="has-text-left" v-text="$t('page.about.tracks')" />
+                    <td
+                      class="has-text-right"
+                      v-text="$filters.number(library.songs)"
+                    />
                   </tr>
                   <tr>
-                    <th v-text="$t('page.about.total-playtime')" />
-                    <td class="has-text-right" v-text="$filters.durationInDays(library.db_playtime * 1000)" />
+                    <th class="has-text-left" v-text="$t('page.about.total-playtime')" />
+                    <td
+                      class="has-text-right"
+                      v-text="
+                        $filters.durationInDays(library.db_playtime * 1000)
+                      "
+                    />
                   </tr>
                   <tr>
-                    <th v-text="$t('page.about.updated')" />
+                    <th class="has-text-left" v-text="$t('page.about.updated')" />
                     <td class="has-text-right">
-                      <span v-text="$t('page.about.updated-on', { time: $filters.timeFromNow(library.updated_at) })" />
-                      (<span class="has-text-grey" v-text="$filters.datetime(library.updated_at)" />)
+                      <span
+                        v-text="
+                          $t('page.about.updated-on', {
+                            time: $filters.timeFromNow(library.updated_at)
+                          })
+                        "
+                      />
+                      (<span
+                        class="has-text-grey"
+                        v-text="$filters.datetime(library.updated_at)"
+                      />)
                     </td>
                   </tr>
                   <tr>
-                    <th v-text="$t('page.about.uptime')" />
+                    <th class="has-text-left" v-text="$t('page.about.uptime')" />
                     <td class="has-text-right">
-                      <span v-text="$filters.timeFromNow(library.started_at, true)" />
-                      (<span class="has-text-grey" v-text="$filters.datetime(library.started_at)" />)
+                      <span
+                        v-text="$filters.timeFromNow(library.started_at, true)"
+                      />
+                      (<span
+                        class="has-text-grey"
+                        v-text="$filters.datetime(library.started_at)"
+                      />)
                     </td>
                   </tr>
                 </tbody>
@@ -76,7 +110,15 @@
         <div class="columns is-centered">
           <div class="column is-four-fifths">
             <div class="content has-text-centered-mobile">
-              <p class="is-size-7" v-text="$t('page.about.compiled-with', { options: config.buildoptions.join(', ') })" />
+              <p class="is-size-7" v-text="$t('page.about.version', { version: config.version })" />
+              <p
+                class="is-size-7"
+                v-text="
+                  $t('page.about.compiled-with', {
+                    options: config.buildoptions.join(', ')
+                  })
+                "
+              />
               <p class="is-size-7" v-html="$t('page.about.built-with')" />
             </div>
           </div>

web-src/src/pages/PageAlbum.vue

@@ -10,20 +10,35 @@
           <mdicon class="icon" name="shuffle" size="16" />
           <span v-text="$t('page.album.shuffle')" />
         </a>
-        <a class="button is-small is-light is-rounded" @click="show_album_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_album_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
       </div>
     </template>
     <template #heading-right>
       <p class="image is-square fd-has-shadow fd-has-action">
-        <cover-artwork :artwork_url="album.artwork_url" :artist="album.artist" :album="album.name" @click="show_album_details_modal = true" />
+        <cover-artwork
+          :artwork_url="album.artwork_url"
+          :artist="album.artist"
+          :album="album.name"
+          @click="show_album_details_modal = true"
+        />
       </p>
     </template>
     <template #content>
-      <p class="heading is-7 has-text-centered-mobile fd-has-margin-top" v-text="$t('page.album.track-count', {count: album.track_count})" />
+      <p
+        class="heading is-7 has-text-centered-mobile fd-has-margin-top"
+        v-text="$t('page.album.track-count', { count: album.track_count })"
+      />
       <list-tracks :tracks="tracks" :uris="album.uri" />
-      <modal-dialog-album :show="show_album_details_modal" :album="album" @close="show_album_details_modal = false" />
+      <modal-dialog-album
+        :show="show_album_details_modal"
+        :album="album"
+        @close="show_album_details_modal = false"
+      />
     </template>
   </content-with-hero>
 </template>

web-src/src/pages/PageAlbums.vue

@@ -6,31 +6,63 @@
         <index-button-list :index="albums.indexList" />
         <div class="columns">
           <div class="column">
-            <p class="heading" style="margin-bottom: 24px" v-text="$t('page.albums.filter')" />
+            <p
+              class="heading"
+              style="margin-bottom: 24px"
+              v-text="$t('page.albums.filter')"
+            />
             <div class="field">
               <div class="control">
-                <input id="switchHideSingles" v-model="hide_singles" type="checkbox" name="switchHideSingles" class="switch" />
-                <label for="switchHideSingles" v-text="$t('page.albums.hide-singles')" />
+                <input
+                  id="switchHideSingles"
+                  v-model="hide_singles"
+                  type="checkbox"
+                  name="switchHideSingles"
+                  class="switch"
+                />
+                <label
+                  for="switchHideSingles"
+                  v-text="$t('page.albums.hide-singles')"
+                />
               </div>
               <p class="help" v-text="$t('page.albums.hide-singles-help')" />
             </div>
             <div v-if="spotify_enabled" class="field">
               <div class="control">
-                <input id="switchHideSpotify" v-model="hide_spotify" type="checkbox" name="switchHideSpotify" class="switch" />
-                <label for="switchHideSpotify" v-text="$t('page.albums.hide-spotify')" />
+                <input
+                  id="switchHideSpotify"
+                  v-model="hide_spotify"
+                  type="checkbox"
+                  name="switchHideSpotify"
+                  class="switch"
+                />
+                <label
+                  for="switchHideSpotify"
+                  v-text="$t('page.albums.hide-spotify')"
+                />
               </div>
               <p class="help" v-text="$t('page.albums.hide-spotify-help')" />
             </div>
           </div>
           <div class="column">
-            <p class="heading" style="margin-bottom: 24px" v-text="$t('page.albums.sort-by.title')" />
-            <dropdown-menu v-model="selected_groupby_option_id" :options="groupby_options" />
+            <p
+              class="heading"
+              style="margin-bottom: 24px"
+              v-text="$t('page.albums.sort-by.title')"
+            />
+            <dropdown-menu
+              v-model="selected_groupby_option_id"
+              :options="groupby_options"
+            />
           </div>
         </div>
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.albums.title')" />
-        <p class="heading" v-text="$t('page.albums.count', { count: albums.count })" />
+        <p
+          class="heading"
+          v-text="$t('page.albums.count', { count: albums.count })"
+        />
       </template>
       <template #heading-right />
       <template #content>

web-src/src/pages/PageArtist.vue

@@ -3,17 +3,27 @@
     <template #options>
       <div class="columns">
         <div class="column">
-          <p class="heading" style="margin-bottom: 24px" v-text="$t('page.artist.sort-by.title')" />
-          <dropdown-menu v-model="selected_groupby_option_id" :options="groupby_options"/>
+          <p
+            class="heading"
+            style="margin-bottom: 24px"
+            v-text="$t('page.artist.sort-by.title')"
+          />
+          <dropdown-menu
+            v-model="selected_groupby_option_id"
+            :options="groupby_options"
+          />
         </div>
       </div>
     </template>
     <template #heading-left>
-      <p class="title is-4"  v-text="artist.name" />
+      <p class="title is-4" v-text="artist.name" />
     </template>
     <template #heading-right>
       <div class="buttons is-centered">
-        <a class="button is-small is-light is-rounded" @click="show_artist_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_artist_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
@@ -24,11 +34,21 @@
     </template>
     <template #content>
       <p class="heading has-text-centered-mobile">
-        <span v-text="$t('page.artist.album-count', { count: artist.album_count })" />
-        <a class="has-text-link" @click="open_tracks" v-text="$t('page.artist.track-count', { count: artist.track_count })" />
+        <span
+          v-text="$t('page.artist.album-count', { count: artist.album_count })"
+        />
+        <a
+          class="has-text-link"
+          @click="open_tracks"
+          v-text="$t('page.artist.track-count', { count: artist.track_count })"
+        />
       </p>
       <list-albums :albums="albums" :hide_group_title="true" />
-      <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
+      <modal-dialog-artist
+        :show="show_artist_details_modal"
+        :artist="artist"
+        @close="show_artist_details_modal = false"
+      />
     </template>
   </content-with-heading>
 </template>

web-src/src/pages/PageArtistTracks.vue

@@ -9,7 +9,10 @@
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_artist_details_modal = true">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_artist_details_modal = true"
+          >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
@@ -20,10 +23,23 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          <a class="has-text-link" @click="open_artist" v-text="$t('page.artist.track-count', { albums: artist.album_count, tracks: artist.track_count})" />
+          <a
+            class="has-text-link"
+            @click="open_artist"
+            v-text="
+              $t('page.artist.track-count', {
+                albums: artist.album_count,
+                tracks: artist.track_count
+              })
+            "
+          />
         </p>
         <list-tracks :tracks="tracks.items" :uris="track_uris" />
-        <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
+        <modal-dialog-artist
+          :show="show_artist_details_modal"
+          :artist="artist"
+          @close="show_artist_details_modal = false"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PageArtists.vue

@@ -6,31 +6,63 @@
         <index-button-list :index="artists.indexList" />
         <div class="columns">
           <div class="column">
-            <p class="heading" style="margin-bottom: 24px" v-text="$t('page.artists.filter')" />
+            <p
+              class="heading"
+              style="margin-bottom: 24px"
+              v-text="$t('page.artists.filter')"
+            />
             <div class="field">
               <div class="control">
-                <input id="switchHideSingles" v-model="hide_singles" type="checkbox" name="switchHideSingles" class="switch" />
-                <label for="switchHideSingles" v-text="$t('page.artists.hide-singles')" />
+                <input
+                  id="switchHideSingles"
+                  v-model="hide_singles"
+                  type="checkbox"
+                  name="switchHideSingles"
+                  class="switch"
+                />
+                <label
+                  for="switchHideSingles"
+                  v-text="$t('page.artists.hide-singles')"
+                />
               </div>
               <p class="help" v-text="$t('page.artists.hide-singles-help')" />
             </div>
             <div v-if="spotify_enabled" class="field">
               <div class="control">
-                <input id="switchHideSpotify" v-model="hide_spotify" type="checkbox" name="switchHideSpotify" class="switch" />
-                <label for="switchHideSpotify" v-text="$t('page.artists.hide-spotify')" />
+                <input
+                  id="switchHideSpotify"
+                  v-model="hide_spotify"
+                  type="checkbox"
+                  name="switchHideSpotify"
+                  class="switch"
+                />
+                <label
+                  for="switchHideSpotify"
+                  v-text="$t('page.artists.hide-spotify')"
+                />
               </div>
               <p class="help" v-text="$t('page.artists.hide-spotify-help')" />
             </div>
           </div>
           <div class="column">
-            <p class="heading" style="margin-bottom: 24px" v-text="$t('page.artists.sort-by.title')" />
-            <dropdown-menu v-model="selected_groupby_option_id" :options="groupby_options" />
+            <p
+              class="heading"
+              style="margin-bottom: 24px"
+              v-text="$t('page.artists.sort-by.title')"
+            />
+            <dropdown-menu
+              v-model="selected_groupby_option_id"
+              :options="groupby_options"
+            />
           </div>
         </div>
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.artists.title')" />
-        <p class="heading" v-text="$t('page.artists.count', { count: artists.count })" />
+        <p
+          class="heading"
+          v-text="$t('page.artists.count', { count: artists.count })"
+        />
       </template>
       <template #heading-right />
       <template #content>

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -10,20 +10,38 @@
           <mdicon class="icon" name="play" size="16" />
           <span v-text="$t('page.audiobooks.album.play')" />
         </a>
-        <a class="button is-small is-light is-rounded" @click="show_album_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_album_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
       </div>
     </template>
     <template #heading-right>
       <p class="image is-square fd-has-shadow fd-has-action">
-        <cover-artwork :artwork_url="album.artwork_url" :artist="album.artist" :album="album.name" @click="show_album_details_modal = true" />
+        <cover-artwork
+          :artwork_url="album.artwork_url"
+          :artist="album.artist"
+          :album="album.name"
+          @click="show_album_details_modal = true"
+        />
       </p>
     </template>
     <template #content>
-      <p class="heading is-7 has-text-centered-mobile fd-has-margin-top" v-text="$t('page.audiobooks.album.track-count', { count: album.track_count })" />
+      <p
+        class="heading is-7 has-text-centered-mobile fd-has-margin-top"
+        v-text="
+          $t('page.audiobooks.album.track-count', { count: album.track_count })
+        "
+      />
       <list-tracks :tracks="tracks" :uris="album.uri" />
-      <modal-dialog-album :show="show_album_details_modal" :album="album" :media_kind="'audiobook'" @close="show_album_details_modal = false" />
+      <modal-dialog-album
+        :show="show_album_details_modal"
+        :album="album"
+        :media_kind="'audiobook'"
+        @close="show_album_details_modal = false"
+      />
     </template>
   </content-with-hero>
 </template>

web-src/src/pages/PageAudiobooksAlbums.vue

@@ -7,7 +7,10 @@
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.audiobooks.albums.title')" />
-        <p class="heading" v-text="$t('page.audiobooks.albums.count', { count: albums.count })" />
+        <p
+          class="heading"
+          v-text="$t('page.audiobooks.albums.count', { count: albums.count })"
+        />
       </template>
       <template #content>
         <list-albums :albums="albums" />

web-src/src/pages/PageAudiobooksArtist.vue

@@ -5,7 +5,10 @@
     </template>
     <template #heading-right>
       <div class="buttons is-centered">
-        <a class="button is-small is-light is-rounded" @click="show_artist_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_artist_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
@@ -15,9 +18,20 @@
       </div>
     </template>
     <template #content>
-      <p class="heading has-text-centered-mobile" v-text="$t('page.audiobooks.artist.album-count', { count: artist.album_count })" />
+      <p
+        class="heading has-text-centered-mobile"
+        v-text="
+          $t('page.audiobooks.artist.album-count', {
+            count: artist.album_count
+          })
+        "
+      />
       <list-albums :albums="albums" />
-      <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
+      <modal-dialog-artist
+        :show="show_artist_details_modal"
+        :artist="artist"
+        @close="show_artist_details_modal = false"
+      />
     </template>
   </content-with-heading>
 </template>

web-src/src/pages/PageAudiobooksArtists.vue

@@ -7,7 +7,10 @@
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
-        <p class="heading" v-text="$t('page.audiobooks.artists.count', { count: tists.count })" />
+        <p
+          class="heading"
+          v-text="$t('page.audiobooks.artists.count', { count: tists.count })"
+        />
       </template>
       <template #heading-right />
       <template #content>

web-src/src/pages/PageBrowse.vue

@@ -5,7 +5,7 @@
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.browse.recently-added.title')" />
-        <p class="heading" v-text="$t('page.browse.albums')"/>
+        <p class="heading" v-text="$t('page.browse.albums')" />
       </template>
       <template #content>
         <list-albums :albums="recently_added" />
@@ -13,7 +13,11 @@
       <template #footer>
         <nav class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_browse('recently_added')" v-text="$t('page.browse.show-more')" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_browse('recently_added')"
+              v-text="$t('page.browse.show-more')"
+            />
           </p>
         </nav>
       </template>
@@ -21,7 +25,10 @@
     <!-- Recently played -->
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.browse.recently-played.title')" />
+        <p
+          class="title is-4"
+          v-text="$t('page.browse.recently-played.title')"
+        />
         <p class="heading" v-text="$t('page.browse.tracks')" />
       </template>
       <template #content>
@@ -30,7 +37,11 @@
       <template #footer>
         <nav class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_browse('recently_played')" v-text="$t('page.browse.show-more')" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_browse('recently_played')"
+              v-text="$t('page.browse.show-more')"
+            />
           </p>
         </nav>
       </template>

web-src/src/pages/PageBrowseRecentlyAdded.vue

@@ -3,8 +3,8 @@
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.browse.recently.added.title')" />
-        <p class="heading" v-text="$t('page.browse.recently.added.albums')" />
+        <p class="title is-4" v-text="$t('page.browse.recently-added.title')" />
+        <p class="heading" v-text="$t('page.browse.recently-added.albums')" />
       </template>
       <template #content>
         <list-albums :albums="recently_added" />

web-src/src/pages/PageBrowseRecentlyPlayed.vue

@@ -3,7 +3,10 @@
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.browse.recently.played.title')" />
+        <p
+          class="title is-4"
+          v-text="$t('page.browse.recently.played.title')"
+        />
         <p class="heading" v-text="$t('page.browse.recently.played.tracks')" />
       </template>
       <template #content>

web-src/src/pages/PageComposer.vue

@@ -6,7 +6,10 @@
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_composer_details_modal = true">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_composer_details_modal = true"
+          >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
@@ -17,11 +20,25 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          <span v-text="$t('page.composer.album-count', { count: composer.album_count })" />
-          <a class="has-text-link" @click="open_tracks" v-text="$t('page.composer.track-count', { count: composer.track_count })" />
+          <span
+            v-text="
+              $t('page.composer.album-count', { count: composer.album_count })
+            "
+          />
+          <a
+            class="has-text-link"
+            @click="open_tracks"
+            v-text="
+              $t('page.composer.track-count', { count: composer.track_count })
+            "
+          />
         </p>
         <list-albums :albums="albums_list" :hide_group_title="true" />
-        <modal-dialog-composer :show="show_composer_details_modal" :composer="composer" @close="show_composer_details_modal = false" />
+        <modal-dialog-composer
+          :show="show_composer_details_modal"
+          :composer="composer"
+          @close="show_composer_details_modal = false"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PageComposerTracks.vue

@@ -6,7 +6,10 @@
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_composer_details_modal = true">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_composer_details_modal = true"
+          >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
@@ -17,11 +20,27 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          <a class="has-text-link" @click="open_albums" v-text="$t('page.composer.tracks.album-count', { count: composer.album_count })" />
-          <span v-text="$t('page.composer.track-count', {count: composer.track_count })" />
+          <a
+            class="has-text-link"
+            @click="open_albums"
+            v-text="
+              $t('page.composer.tracks.album-count', {
+                count: composer.album_count
+              })
+            "
+          />
+          <span
+            v-text="
+              $t('page.composer.track-count', { count: composer.track_count })
+            "
+          />
         </p>
         <list-tracks :tracks="tracks.items" :expression="play_expression" />
-        <modal-dialog-composer :show="show_composer_details_modal" :composer="composer" @close="show_composer_details_modal = false" />
+        <modal-dialog-composer
+          :show="show_composer_details_modal"
+          :composer="composer"
+          @close="show_composer_details_modal = false"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PageComposers.vue

@@ -7,7 +7,10 @@
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.composers.title')" />
-        <p class="heading" v-text="$t('page.composers.count', { count: composers.total })" />
+        <p
+          class="heading"
+          v-text="$t('page.composers.count', { count: composers.total })"
+        />
       </template>
       <template #content>
         <list-composers :composers="composers" />

web-src/src/pages/PageFiles.vue

@@ -7,8 +7,11 @@
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="open_directory_dialog({ path: current_directory })">
-            <mdicon class="icon" name="dots-horizontal" size="16"/>
+          <a
+            class="button is-small is-light is-rounded"
+            @click="open_directory_dialog({ path: current_directory })"
+          >
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
@@ -19,8 +22,16 @@
       <template #content>
         <list-directories :directories="files.directories" />
         <list-playlists :playlists="files.playlists.items" />
-        <list-tracks :tracks="files.tracks.items" :expression="play_expression" :show_icon="true" />
-        <modal-dialog-directory :show="show_directory_details_modal" :directory="selected_directory" @close="show_directory_details_modal = false" />
+        <list-tracks
+          :tracks="files.tracks.items"
+          :expression="play_expression"
+          :show_icon="true"
+        />
+        <modal-dialog-directory
+          :show="show_directory_details_modal"
+          :directory="selected_directory"
+          @close="show_directory_details_modal = false"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PageGenre.vue

@@ -9,8 +9,11 @@
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_genre_details_modal = true">
-            <mdicon class="icon" name="dots-horizontal" size="16"/>
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_genre_details_modal = true"
+          >
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="shuffle" size="16" />
@@ -20,11 +23,21 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          <span v-text="$t('page.genre.album-count', { count: genre.album_count })" />
-          <a class="has-text-link" @click="open_tracks" v-text="$t('page.genre.track-count', { count: genre.track_count })" />
+          <span
+            v-text="$t('page.genre.album-count', { count: genre.album_count })"
+          />
+          <a
+            class="has-text-link"
+            @click="open_tracks"
+            v-text="$t('page.genre.track-count', { count: genre.track_count })"
+          />
         </p>
         <list-albums :albums="albums_list" />
-        <modal-dialog-genre :show="show_genre_details_modal" :genre="genre" @close="show_genre_details_modal = false" />
+        <modal-dialog-genre
+          :show="show_genre_details_modal"
+          :genre="genre"
+          @close="show_genre_details_modal = false"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PageGenreTracks.vue

@@ -9,8 +9,11 @@
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_genre_details_modal = true">
-            <mdicon class="icon" name="dots-horizontal" size="16"/>
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_genre_details_modal = true"
+          >
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="shuffle" size="16" />
@@ -20,11 +23,23 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          <a class="has-text-link" @click="open_genre" v-text="$t('page.genre.tracks.album-count', { count: genre.album_count })" />
-          <span v-text="$t('page.genre.tracks.count', { count: genre.track_count })" />
+          <a
+            class="has-text-link"
+            @click="open_genre"
+            v-text="
+              $t('page.genre.tracks.album-count', { count: genre.album_count })
+            "
+          />
+          <span
+            v-text="$t('page.genre.tracks.count', { count: genre.track_count })"
+          />
         </p>
         <list-tracks :tracks="tracks.items" :expression="expression" />
-        <modal-dialog-genre :show="show_genre_details_modal" :genre="genre" @close="show_genre_details_modal = false" />
+        <modal-dialog-genre
+          :show="show_genre_details_modal"
+          :genre="genre"
+          @close="show_genre_details_modal = false"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PageGenres.vue

@@ -7,7 +7,10 @@
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.genres.title')" />
-        <p class="heading" v-text="$t('page.genres.count', { count: genres.total })" />
+        <p
+          class="heading"
+          v-text="$t('page.genres.count', { count: genres.total })"
+        />
       </template>
       <template #content>
         <list-genres :genres="genres" />

web-src/src/pages/PageNowPlaying.vue

@@ -2,15 +2,40 @@
   <section>
     <div v-if="now_playing.id > 0" class="fd-is-fullheight">
       <div class="fd-is-expanded">
-        <cover-artwork :artwork_url="now_playing.artwork_url" :artist="now_playing.artist" :album="now_playing.album" class="fd-cover-image fd-has-action" @click="open_dialog(now_playing)" />
+        <cover-artwork
+          :artwork_url="now_playing.artwork_url"
+          :artist="now_playing.artist"
+          :album="now_playing.album"
+          class="fd-cover-image fd-has-action"
+          @click="open_dialog(now_playing)"
+        />
       </div>
       <div class="fd-has-padding-left-right">
         <div class="container has-text-centered">
           <p class="control has-text-centered fd-progress-now-playing">
-            <Slider ref="slider" v-model="item_progress_ms" :min="0" :max="state.item_length_ms" :step="1000" :tooltips="false" :disabled="state.state === 'stop'" :classes="{ target: 'seek-slider' }" @change="seek" @start="start_dragging" @end="end_dragging" />
+            <Slider
+              ref="slider"
+              v-model="item_progress_ms"
+              :min="0"
+              :max="state.item_length_ms"
+              :step="1000"
+              :tooltips="false"
+              :disabled="state.state === 'stop'"
+              :classes="{ target: 'seek-slider' }"
+              @change="seek"
+              @start="start_dragging"
+              @end="end_dragging"
+            />
           </p>
           <p class="content">
-            <span v-text="[$filters.durationInHours(item_progress_ms), $filters.durationInHours(now_playing.length_ms)].join(' / ')" />
+            <span
+              v-text="
+                [
+                  $filters.durationInHours(item_progress_ms),
+                  $filters.durationInHours(now_playing.length_ms)
+                ].join(' / ')
+              "
+            />
           </p>
         </div>
       </div>
@@ -18,20 +43,31 @@
         <div class="container has-text-centered fd-has-margin-top">
           <h1 class="title is-5" v-text="now_playing.title" />
           <h2 class="title is-6" v-text="now_playing.artist" />
-          <h2 v-if="composer" class="subtitle is-6 has-text-grey has-text-weight-bold" v-text="composer" />
+          <h2
+            v-if="composer"
+            class="subtitle is-6 has-text-grey has-text-weight-bold"
+            v-text="composer"
+          />
           <h3 class="subtitle is-6" v-text="now_playing.album" />
         </div>
       </div>
     </div>
     <div v-else class="fd-is-fullheight">
-      <div class="fd-is-expanded fd-has-padding-left-right" style="flex-direction: column">
+      <div
+        class="fd-is-expanded fd-has-padding-left-right"
+        style="flex-direction: column"
+      >
         <div class="content has-text-centered">
           <h1 class="title is-5" v-text="$('page.now-playing.title')" />
           <p v-text="$('page.now-playing.info')" />
         </div>
       </div>
     </div>
-    <modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" />
+    <modal-dialog-queue-item
+      :show="show_details_modal"
+      :item="selected_item"
+      @close="show_details_modal = false"
+    />
   </section>
 </template>
 

web-src/src/pages/PagePlaylist.vue

@@ -5,7 +5,10 @@
     </template>
     <template #heading-right>
       <div class="buttons is-centered">
-        <a class="button is-small is-light is-rounded" @click="show_playlist_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_playlist_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
@@ -15,9 +18,17 @@
       </div>
     </template>
     <template #content>
-      <p class="heading has-text-centered-mobile" v-text="$t('page.playlist.length', { length: tracks.length })" />
+      <p
+        class="heading has-text-centered-mobile"
+        v-text="$t('page.playlist.length', { length: tracks.length })"
+      />
       <list-tracks :tracks="tracks" :uris="uris" />
-      <modal-dialog-playlist :show="show_playlist_details_modal" :playlist="playlist" :uris="uris" @close="show_playlist_details_modal = false" />
+      <modal-dialog-playlist
+        :show="show_playlist_details_modal"
+        :playlist="playlist"
+        :uris="uris"
+        @close="show_playlist_details_modal = false"
+      />
     </template>
   </content-with-heading>
 </template>

web-src/src/pages/PagePlaylists.vue

@@ -2,7 +2,10 @@
   <content-with-heading>
     <template #heading-left>
       <p class="title is-4" v-text="playlist.name" />
-      <p class="heading" v-text="$t('page.playlists.count', { count: playlists.count })" />
+      <p
+        class="heading"
+        v-text="$t('page.playlists.count', { count: playlists.count })"
+      />
     </template>
     <template #content>
       <list-playlists :playlists="playlists" />

web-src/src/pages/PagePodcast.vue

@@ -5,7 +5,10 @@
     </template>
     <template #heading-right>
       <div class="buttons is-centered">
-        <a class="button is-small is-light is-rounded" @click="show_album_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_album_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
@@ -15,10 +18,31 @@
       </div>
     </template>
     <template #content>
-      <p class="heading has-text-centered-mobile" v-text="$t('page.podcast.track-count', { count: album.track_count })" />
-      <list-tracks :tracks="tracks" :show_progress="true" @play-count-changed="reload_tracks" />
-      <modal-dialog-album :show="show_album_details_modal" :album="album" :media_kind="'podcast'" :new_tracks="new_tracks" @close="show_album_details_modal = false" @play-count-changed="reload_tracks" @remove-podcast="open_remove_podcast_dialog" />
-      <modal-dialog :show="show_remove_podcast_modal" title="Remove podcast" delete_action="Remove" @close="show_remove_podcast_modal = false" @delete="remove_podcast">
+      <p
+        class="heading has-text-centered-mobile"
+        v-text="$t('page.podcast.track-count', { count: album.track_count })"
+      />
+      <list-tracks
+        :tracks="tracks"
+        :show_progress="true"
+        @play-count-changed="reload_tracks"
+      />
+      <modal-dialog-album
+        :show="show_album_details_modal"
+        :album="album"
+        :media_kind="'podcast'"
+        :new_tracks="new_tracks"
+        @close="show_album_details_modal = false"
+        @play-count-changed="reload_tracks"
+        @remove-podcast="open_remove_podcast_dialog"
+      />
+      <modal-dialog
+        :show="show_remove_podcast_modal"
+        title="Remove podcast"
+        delete_action="Remove"
+        @close="show_remove_podcast_modal = false"
+        @delete="remove_podcast"
+      >
         <template #modal-content>
           <p v-text="$t('page.podcast.remove-info-1')" />
           <p class="is-size-7">

web-src/src/pages/PagePodcasts.vue

@@ -13,13 +13,20 @@
         </div>
       </template>
       <template #content>
-        <list-tracks :tracks="new_episodes.items" :show_progress="true" @play-count-changed="reload_new_episodes" />
+        <list-tracks
+          :tracks="new_episodes.items"
+          :show_progress="true"
+          @play-count-changed="reload_new_episodes"
+        />
       </template>
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.podcasts.title')" />
-        <p class="heading" v-text="$t('page.podcasts.count', { count: albums.total })" />
+        <p
+          class="heading"
+          v-text="$t('page.podcasts.count', { count: albums.total })"
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -34,8 +41,16 @@
         </div>
       </template>
       <template #content>
-        <list-albums :albums="albums" @play-count-changed="reload_new_episodes()" @podcast-deleted="reload_podcasts()" />
-        <modal-dialog-add-rss :show="show_url_modal" @close="show_url_modal = false" @podcast-added="reload_podcasts()" />
+        <list-albums
+          :albums="albums"
+          @play-count-changed="reload_new_episodes()"
+          @podcast-deleted="reload_podcasts()"
+        />
+        <modal-dialog-add-rss
+          :show="show_url_modal"
+          @close="show_url_modal = false"
+          @podcast-added="reload_podcasts()"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/PageQueue.vue

@@ -2,11 +2,18 @@
   <content-with-heading>
     <template #heading-left>
       <p class="title is-4" v-text="$t('page.queue.title')" />
-      <p class="heading" v-text="$t('page.queue.count', { count: queue.count })" />
+      <p
+        class="heading"
+        v-text="$t('page.queue.count', { count: queue.count })"
+      />
     </template>
     <template #heading-right>
       <div class="buttons is-centered">
-        <a class="button is-small" :class="{ 'is-info': show_only_next_items }" @click="update_show_next_items">
+        <a
+          class="button is-small"
+          :class="{ 'is-info': show_only_next_items }"
+          @click="update_show_next_items"
+        >
           <mdicon class="icon" name="arrow-collapse-down" size="16" />
           <span v-text="$t('page.queue.hide-previous')" />
         </a>
@@ -14,7 +21,11 @@
           <mdicon class="icon" name="web" size="16" />
           <span v-text="$t('page.queue.add-stream')" />
         </a>
-        <a class="button is-small" :class="{ 'is-info': edit_mode }" @click="edit_mode = !edit_mode">
+        <a
+          class="button is-small"
+          :class="{ 'is-info': edit_mode }"
+          @click="edit_mode = !edit_mode"
+        >
           <mdicon class="icon" name="pencil" size="16" />
           <span v-text="$t('page.queue.edit')" />
         </a>
@@ -22,30 +33,64 @@
           <mdicon class="icon" name="delete-empty" size="16" />
           <span v-text="$t('page.queue.clear')" />
         </a>
-        <a v-if="is_queue_save_allowed" class="button is-small" :disabled="queue_items.length === 0" @click="save_dialog">
+        <a
+          v-if="is_queue_save_allowed"
+          class="button is-small"
+          :disabled="queue_items.length === 0"
+          @click="save_dialog"
+        >
           <mdicon class="icon" name="content-save" size="16" />
           <span v-text="$t('page.queue.save')" />
         </a>
       </div>
     </template>
     <template #content>
-      <draggable v-model="queue_items" handle=".handle" item-key="id" @end="move_item">
+      <draggable
+        v-model="queue_items"
+        handle=".handle"
+        item-key="id"
+        @end="move_item"
+      >
         <template #item="{ element, index }">
-          <list-item-queue-item :item="element" :position="index" :current_position="current_position" :show_only_next_items="show_only_next_items" :edit_mode="edit_mode">
+          <list-item-queue-item
+            :item="element"
+            :position="index"
+            :current_position="current_position"
+            :show_only_next_items="show_only_next_items"
+            :edit_mode="edit_mode"
+          >
             <template #actions>
               <a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
-                <mdicon class="icon has-text-dark" name="dots-vertical" size="16"/>
+                <mdicon
+                  class="icon has-text-dark"
+                  name="dots-vertical"
+                  size="16"
+                />
               </a>
-              <a v-if="element.id !== state.item_id && edit_mode" @click.prevent.stop="remove(element)">
-                <mdicon class="icon has-text-grey" name="delete" size="18"/>
+              <a
+                v-if="element.id !== state.item_id && edit_mode"
+                @click.prevent.stop="remove(element)"
+              >
+                <mdicon class="icon has-text-grey" name="delete" size="18" />
               </a>
             </template>
           </list-item-queue-item>
         </template>
       </draggable>
-      <modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" />
-      <modal-dialog-add-url-stream :show="show_url_modal" @close="show_url_modal = false" />
-      <modal-dialog-playlist-save v-if="is_queue_save_allowed" :show="show_pls_save_modal" @close="show_pls_save_modal = false" />
+      <modal-dialog-queue-item
+        :show="show_details_modal"
+        :item="selected_item"
+        @close="show_details_modal = false"
+      />
+      <modal-dialog-add-url-stream
+        :show="show_url_modal"
+        @close="show_url_modal = false"
+      />
+      <modal-dialog-playlist-save
+        v-if="is_queue_save_allowed"
+        :show="show_pls_save_modal"
+        @close="show_pls_save_modal = false"
+      />
     </template>
   </content-with-heading>
 </template>

web-src/src/pages/PageRadioStreams.vue

@@ -5,7 +5,10 @@
         <p class="title is-4" v-text="$t('page.radio.title')" />
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile" v-text="$t('page.radio.count', { count: tracks.total })" />
+        <p
+          class="heading has-text-centered-mobile"
+          v-text="$t('page.radio.count', { count: tracks.total })"
+        />
         <list-tracks :tracks="tracks.items" />
       </template>
     </content-with-heading>

web-src/src/pages/PageSearch.vue

@@ -8,7 +8,14 @@
             <form @submit.prevent="new_search">
               <div class="field">
                 <p class="control is-expanded has-icons-left">
-                  <input ref="search_field" v-model="search_query" class="input is-rounded is-shadowless" type="text" placeholder="Search" autocomplete="off" />
+                  <input
+                    ref="search_field"
+                    v-model="search_query"
+                    class="input is-rounded is-shadowless"
+                    type="text"
+                    placeholder="Search"
+                    autocomplete="off"
+                  />
                   <mdicon class="icon is-left" name="magnify" size="16" />
                 </p>
                 <p class="help has-text-centered">
@@ -17,7 +24,13 @@
               </div>
             </form>
             <div class="tags" style="margin-top: 16px">
-              <a v-for="recent_search in recent_searches" :key="recent_search" class="tag" @click="open_recent_search(recent_search)" v-text="recent_search" />
+              <a
+                v-for="recent_search in recent_searches"
+                :key="recent_search"
+                class="tag"
+                @click="open_recent_search(recent_search)"
+                v-text="recent_search"
+              />
             </div>
           </div>
         </div>
@@ -35,7 +48,15 @@
       <template #footer>
         <nav v-if="show_all_tracks_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded"  @click="open_search_tracks" v-text="$t('page.search.show.tracks', { count: tracks.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_tracks"
+              v-text="
+                $t('page.search.show.tracks', {
+                  count: tracks.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -56,7 +77,15 @@
       <template #footer>
         <nav v-if="show_all_artists_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_artists" v-text="$t('page.search.show.artists', { count:artists.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_artists"
+              v-text="
+                $t('page.search.show.artists', {
+                  count: artists.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -77,7 +106,15 @@
       <template #footer>
         <nav v-if="show_all_albums_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_albums" v-text="$t('page.search.show-albums', { count: albums.total.toLocaleString()})" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_albums"
+              v-text="
+                $t('page.search.show-albums', {
+                  count: albums.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -98,7 +135,15 @@
       <template #footer>
         <nav v-if="show_all_composers_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_composers" v-text="$t('page.search.show.composers', { count: composers.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_composers"
+              v-text="
+                $t('page.search.show.composers', {
+                  count: composers.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -119,7 +164,15 @@
       <template #footer>
         <nav v-if="show_all_playlists_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_playlists" v-text="$t('page.search.show.playlists', { count: playlists.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_playlists"
+              v-text="
+                $t('page.search.show.playlists', {
+                  count: playlists.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -140,7 +193,15 @@
       <template #footer>
         <nav v-if="show_all_podcasts_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_podcasts" v-text="$t('page.search.show.podcasts', { count: podcasts.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_podcasts"
+              v-text="
+                $t('page.search.show.podcasts', {
+                  count: podcasts.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -162,7 +223,15 @@
       <template #footer>
         <nav v-if="show_all_audiobooks_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_audiobooks" v-text="$t('page.search.show.audiobooks', { count: audiobooks.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_audiobooks"
+              v-text="
+                $t('page.search.show.audiobooks', {
+                  count: audiobooks.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>

web-src/src/pages/SettingsPageArtwork.vue

@@ -6,9 +6,19 @@
         <div class="title is-4" v-text="$t('page.settings.artwork.artwork')" />
       </template>
       <template #content>
-        <div class="content" v-text="$t('page.settings.artwork.explanation-1')" />
-        <div class="content" v-text="$t('page.settings.artwork.explanation-2')" />
-        <settings-checkbox v-if="spotify.libspotify_logged_in" category_name="artwork" option_name="use_artwork_source_spotify">
+        <div
+          class="content"
+          v-text="$t('page.settings.artwork.explanation-1')"
+        />
+        <div
+          class="content"
+          v-text="$t('page.settings.artwork.explanation-2')"
+        />
+        <settings-checkbox
+          v-if="spotify.libspotify_logged_in"
+          category_name="artwork"
+          option_name="use_artwork_source_spotify"
+        >
           <template #label>
             <span v-text="$t('page.settings.artwork.spotify')" />
             <a href="https://www.spotify.com/" target="_blank">
@@ -16,7 +26,10 @@
             </a>
           </template>
         </settings-checkbox>
-        <settings-checkbox category_name="artwork" option_name="use_artwork_source_discogs">
+        <settings-checkbox
+          category_name="artwork"
+          option_name="use_artwork_source_discogs"
+        >
           <template #label>
             <span v-text="$t('page.settings.artwork.discogs')" />
             <a href="https://www.discogs.com/" target="_blank">
@@ -24,7 +37,10 @@
             </a>
           </template>
         </settings-checkbox>
-        <settings-checkbox category_name="artwork" option_name="use_artwork_source_coverartarchive">
+        <settings-checkbox
+          category_name="artwork"
+          option_name="use_artwork_source_coverartarchive"
+        >
           <template #label>
             <span v-text="$t('page.settings.artwork.coverartarchive')" />
             <a href="https://coverartarchive.org/" target="_blank">

web-src/src/pages/SettingsPageOnlineServices.vue

@@ -3,7 +3,10 @@
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.services.spotify.title')" />
+        <div
+          class="title is-4"
+          v-text="$t('page.settings.services.spotify.title')"
+        />
       </template>
       <template #content>
         <div v-if="!spotify.spotify_installed" class="notification is-size-7">
@@ -12,7 +15,10 @@
         <div v-if="spotify.spotify_installed">
           <div class="notification is-size-7">
             <b v-text="$t('page.settings.services.spotify.requirements')" />
-            <span v-if="use_libspotity" v-text="$t('page.settings.services.spotify.help')" />
+            <span
+              v-if="use_libspotity"
+              v-text="$t('page.settings.services.spotify.help')"
+            />
           </div>
           <div v-if="use_libspotity">
             <p class="content">
@@ -23,27 +29,55 @@
               <span v-text="$t('page.settings.services.spotify.logged-as')" />
               <b><code v-text="spotify.libspotify_user" /></b>
             </p>
-            <form v-if="spotify.spotify_installed && !spotify.libspotify_logged_in" @submit.prevent="login_libspotify">
+            <form
+              v-if="spotify.spotify_installed && !spotify.libspotify_logged_in"
+              @submit.prevent="login_libspotify"
+            >
               <div class="field is-grouped">
                 <div class="control is-expanded">
-                  <input v-model="libspotify.user" class="input" type="text" placeholder="Username" />
+                  <input
+                    v-model="libspotify.user"
+                    class="input"
+                    type="text"
+                    placeholder="Username"
+                  />
                   <p class="help is-danger" v-text="libspotify.errors.user" />
                 </div>
                 <div class="control is-expanded">
-                  <input v-model="libspotify.password" class="input" type="password" placeholder="Password" />
-                  <p class="help is-danger" v-text="libspotify.errors.password" />
+                  <input
+                    v-model="libspotify.password"
+                    class="input"
+                    type="password"
+                    placeholder="Password"
+                  />
+                  <p
+                    class="help is-danger"
+                    v-text="libspotify.errors.password"
+                  />
                 </div>
                 <div class="control">
-                  <button class="button is-info" v-text="$t('page.settings.services.login')" />
+                  <button
+                    class="button is-info"
+                    v-text="$t('page.settings.services.login')"
+                  />
                 </div>
               </div>
             </form>
             <p class="help is-danger" v-text="libspotify.errors.error" />
-            <p class="help" v-text="$t('page.settings.services.spotify.help-1')" />
-            <p class="help" v-text="$t('page.settings.services.spotify.help-2')" />
+            <p
+              class="help"
+              v-text="$t('page.settings.services.spotify.help-1')"
+            />
+            <p
+              class="help"
+              v-text="$t('page.settings.services.spotify.help-2')"
+            />
           </div>
           <div class="fd-has-margin-top">
-            <p class="content" v-html="$t('page.settings.services.spotify.grant-access')" />
+            <p
+              class="content"
+              v-html="$t('page.settings.services.spotify.grant-access')"
+            />
             <p v-if="spotify.webapi_token_valid">
               <span v-text="$t('page.settings.services.spotify.user')" />
               <code v-text="spotify.webapi_user" />
@@ -54,16 +88,32 @@
             </p>
             <div class="field fd-has-margin-top">
               <div class="control">
-                <a class="button" :class="{ 'is-info': !spotify.webapi_token_valid || spotify_missing_scope.length > 0 }" :href="spotify.oauth_uri" v-text="$t('page.settings.services.spotify.authorize')" />
+                <a
+                  class="button"
+                  :class="{
+                    'is-info':
+                      !spotify.webapi_token_valid ||
+                      spotify_missing_scope.length > 0
+                  }"
+                  :href="spotify.oauth_uri"
+                  v-text="$t('page.settings.services.spotify.authorize')"
+                />
               </div>
             </div>
             <p class="help">
               <span v-text="$t('page.settings.services.spotify.scopes')" />
               <code v-text="spotify_required_scope.join()" />
             </p>
-            <div v-if="spotify.webapi_token_valid" class="field fd-has-margin-top">
+            <div
+              v-if="spotify.webapi_token_valid"
+              class="field fd-has-margin-top"
+            >
               <div class="control">
-                <a class="button is-danger" @click="logout_spotify" v-text="$t('page.settings.services.logout')" />
+                <a
+                  class="button is-danger"
+                  @click="logout_spotify"
+                  v-text="$t('page.settings.services.logout')"
+                />
               </div>
             </div>
           </div>
@@ -72,34 +122,64 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.services.lastfm.title')" />
+        <div
+          class="title is-4"
+          v-text="$t('page.settings.services.lastfm.title')"
+        />
       </template>
       <template #content>
         <div v-if="!lastfm.enabled" class="notification is-size-7">
           <p v-text="$t('page.settings.services.lastfm.no-support')" />
         </div>
         <div v-if="lastfm.enabled">
-          <p class="content" v-html="$t('page.settings.services.lastfm.grant-access')" />
+          <p
+            class="content"
+            v-html="$t('page.settings.services.lastfm.grant-access')"
+          />
           <div v-if="lastfm.scrobbling_enabled">
-            <a class="button" @click="logoutLastfm" v-text="$t('page.settings.services.lastfm.stop-scrobbling')" />
+            <a
+              class="button"
+              @click="logoutLastfm"
+              v-text="$t('page.settings.services.lastfm.stop-scrobbling')"
+            />
           </div>
           <div v-if="!lastfm.scrobbling_enabled">
             <form @submit.prevent="login_lastfm">
               <div class="field is-grouped">
                 <div class="control is-expanded">
-                  <input v-model="lastfm_login.user" class="input" type="text" placeholder="Username" />
+                  <input
+                    v-model="lastfm_login.user"
+                    class="input"
+                    type="text"
+                    placeholder="Username"
+                  />
                   <p class="help is-danger" v-text="lastfm_login.errors.user" />
                 </div>
                 <div class="control is-expanded">
-                  <input v-model="lastfm_login.password" class="input" type="password" placeholder="Password" />
-                  <p class="help is-danger" v-text="lastfm_login.errors.password" />
+                  <input
+                    v-model="lastfm_login.password"
+                    class="input"
+                    type="password"
+                    placeholder="Password"
+                  />
+                  <p
+                    class="help is-danger"
+                    v-text="lastfm_login.errors.password"
+                  />
                 </div>
                 <div class="control">
-                  <button class="button is-info" type="submit" v-text="$t('page.settings.services.login')" />
+                  <button
+                    class="button is-info"
+                    type="submit"
+                    v-text="$t('page.settings.services.login')"
+                  />
                 </div>
               </div>
               <p class="help is-danger" v-text="lastfm_login.errors.error" />
-              <p class="help" v-text="$t('page.settings.services.lastfm.info')" />
+              <p
+                class="help"
+                v-text="$t('page.settings.services.lastfm.info')"
+              />
             </form>
           </div>
         </div>

web-src/src/pages/SettingsPageRemotesOutputs.vue

@@ -9,13 +9,25 @@
         <!-- Paring request active -->
         <div v-if="pairing.active" class="notification">
           <form @submit.prevent="kickoff_pairing">
-            <label class="label has-text-weight-normal" v-html="$t('page.settings.devices.pairing-request', { remote: pairing.remote})" />
+            <label class="label has-text-weight-normal">
+              <span v-text="$t('page.settings.devices.pairing-request')" />
+              <b v-text="pairing.remote" />
+            </label>
             <div class="field is-grouped">
               <div class="control">
-                <input v-model="pairing_req.pin" class="input" type="text" placeholder="Enter pairing code" />
+                <input
+                  v-model="pairing_req.pin"
+                  class="input"
+                  type="text"
+                  placeholder="Enter pairing code"
+                />
               </div>
               <div class="control">
-                <button class="button is-info" type="submit" v-text="$t('page.settings.devices.send')" />
+                <button
+                  class="button is-info"
+                  type="submit"
+                  v-text="$t('page.settings.devices.send')"
+                />
               </div>
             </div>
           </form>
@@ -28,26 +40,50 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.devices.speaker-pairing')" />
+        <div
+          class="title is-4"
+          v-text="$t('page.settings.devices.speaker-pairing')"
+        />
       </template>
       <template #content>
-        <p class="content" v-text="$t('page.settings.devices.speaker-pairing-info')" />
+        <p
+          class="content"
+          v-text="$t('page.settings.devices.speaker-pairing-info')"
+        />
         <div v-for="output in outputs" :key="output.id">
           <div class="field">
             <div class="control">
               <label class="checkbox">
-                <input v-model="output.selected" type="checkbox" style="margin-right: 5px" @change="output_toggle(output.id)"/>
+                <input
+                  v-model="output.selected"
+                  type="checkbox"
+                  style="margin-right: 5px"
+                  @change="output_toggle(output.id)"
+                />
                 <span v-text="output.name" />
               </label>
             </div>
           </div>
-          <form v-if="output.needs_auth_key" class="fd-has-margin-bottom" @submit.prevent="kickoff_verification(output.id)">
+          <form
+            v-if="output.needs_auth_key"
+            class="fd-has-margin-bottom"
+            @submit.prevent="kickoff_verification(output.id)"
+          >
             <div class="field is-grouped">
               <div class="control">
-                <input v-model="verification_req.pin" class="input" type="text" :placeholder="$t('page.settings.devices.verification-code')" />
+                <input
+                  v-model="verification_req.pin"
+                  class="input"
+                  type="text"
+                  :placeholder="$t('page.settings.devices.verification-code')"
+                />
               </div>
               <div class="control">
-                <button class="button is-info" type="submit" v-text="$t('page.settings.devices.verify')" />
+                <button
+                  class="button is-info"
+                  type="submit"
+                  v-text="$t('page.settings.devices.verify')"
+                />
               </div>
             </div>
           </form>

web-src/src/pages/SettingsPageWebinterface.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fd-page-with-tabs">
     <tabs-settings />
-      <content-with-heading>
+    <content-with-heading>
       <template #heading-left>
         <div class="title is-4" v-text="$t('page.settings.general.language')" />
       </template>
@@ -11,42 +11,72 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.general.navigation-items')" />
+        <div
+          class="title is-4"
+          v-text="$t('page.settings.general.navigation-items')"
+        />
       </template>
       <template #content>
-        <p class="content" v-text="$t('page.settings.general.navigation-item-selection')" />
-        <div class="notification is-size-7" v-text="$t('page.settings.general.navigation-item-selection-info')" />
-        <settings-checkbox category_name="webinterface" option_name="show_menu_item_playlists">
+        <p
+          class="content"
+          v-text="$t('page.settings.general.navigation-item-selection')"
+        />
+        <div
+          class="notification is-size-7"
+          v-text="$t('page.settings.general.navigation-item-selection-info')"
+        />
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_menu_item_playlists"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.playlists')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox category_name="webinterface" option_name="show_menu_item_music">
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_menu_item_music"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.music')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox category_name="webinterface" option_name="show_menu_item_podcasts">
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_menu_item_podcasts"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.podcasts')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox category_name="webinterface" option_name="show_menu_item_audiobooks">
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_menu_item_audiobooks"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.audiobooks')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox category_name="webinterface" option_name="show_menu_item_radio">
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_menu_item_radio"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.radio')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox category_name="webinterface" option_name="show_menu_item_files">
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_menu_item_files"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.files')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox category_name="webinterface" option_name="show_menu_item_search">
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_menu_item_search"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.search')" />
           </template>
@@ -55,10 +85,16 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.general.album-lists')" />
+        <div
+          class="title is-4"
+          v-text="$t('page.settings.general.album-lists')"
+        />
       </template>
       <template #content>
-        <settings-checkbox category_name="webinterface" option_name="show_cover_artwork_in_album_lists">
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_cover_artwork_in_album_lists"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.show-coverart')" />
           </template>
@@ -67,10 +103,16 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.general.now-playing-page')" />
+        <div
+          class="title is-4"
+          v-text="$t('page.settings.general.now-playing-page')"
+        />
       </template>
       <template #content>
-        <settings-checkbox category_name="webinterface" option_name="show_composer_now_playing">
+        <settings-checkbox
+          category_name="webinterface"
+          option_name="show_composer_now_playing"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.show-composer')" />
           </template>
@@ -78,26 +120,48 @@
             <span v-text="$t('page.settings.general.show-composer-info')" />
           </template>
         </settings-checkbox>
-        <settings-textfield category_name="webinterface" option_name="show_composer_for_genre" :disabled="!settings_option_show_composer_now_playing" placeholder="Genres">
+        <settings-textfield
+          category_name="webinterface"
+          option_name="show_composer_for_genre"
+          :disabled="!settings_option_show_composer_now_playing"
+          placeholder="Genres"
+        >
           <template #label>
             <span v-text="$t('page.settings.general.show-composer-genres')" />
           </template>
           <template #info>
-            <p class="help" v-text="$t('page.settings.general.show-composer-genres-info-1')" />
-            <p class="help" v-text="$t('page.settings.general.show-composer-genres-info-2')" />
-            <p class="help" v-text="$t('page.settings.general.show-composer-genres-info-3')" />
+            <p
+              class="help"
+              v-text="$t('page.settings.general.show-composer-genres-info-1')"
+            />
+            <p
+              class="help"
+              v-text="$t('page.settings.general.show-composer-genres-info-2')"
+            />
+            <p
+              class="help"
+              v-text="$t('page.settings.general.show-composer-genres-info-3')"
+            />
           </template>
         </settings-textfield>
       </template>
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.general.recently-added-page')" />
+        <div
+          class="title is-4"
+          v-text="$t('page.settings.general.recently-added-page')"
+        />
       </template>
       <template #content>
-        <settings-intfield category_name="webinterface" option_name="recently_added_limit">
+        <settings-intfield
+          category_name="webinterface"
+          option_name="recently_added_limit"
+        >
           <template #label>
-            <span v-text="$t('page.settings.general.recently-added-page-info')" />
+            <span
+              v-text="$t('page.settings.general.recently-added-page-info')"
+            />
           </template>
         </settings-intfield>
       </template>

web-src/src/pages/SpotifyPageAlbum.vue

@@ -3,34 +3,67 @@
     <template #heading-left>
       <h1 class="title is-5" v-text="album.name" />
       <h2 class="subtitle is-6 has-text-link has-text-weight-normal">
-        <a class="has-text-link" @click="open_artist" v-text="album.artists[0].name" />
+        <a
+          class="has-text-link"
+          @click="open_artist"
+          v-text="album.artists[0].name"
+        />
       </h2>
       <div class="buttons fd-is-centered-mobile fd-has-margin-top">
         <a class="button is-small is-dark is-rounded" @click="play">
           <mdicon class="icon" name="shuffle" size="16" />
           <span v-text="$t('page.spotify.album.shuffle')" />
         </a>
-        <a class="button is-small is-light is-rounded" @click="show_album_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_album_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
       </div>
     </template>
     <template #heading-right>
       <p class="image is-square fd-has-shadow fd-has-action">
-        <cover-artwork :artwork_url="artwork_url" :artist="album.artist" :album="album.name" @click="show_album_details_modal = true" />
+        <cover-artwork
+          :artwork_url="artwork_url"
+          :artist="album.artist"
+          :album="album.name"
+          @click="show_album_details_modal = true"
+        />
       </p>
     </template>
     <template #content>
-      <p class="heading is-7 has-text-centered-mobile fd-has-margin-top" v-text="$t('page.spotify.album.track-count', { count: album.tracks.total })" />
-      <spotify-list-item-track v-for="(track, index) in album.tracks.items" :key="track.id" :track="track" :position="index" :album="album" :context_uri="album.uri">
+      <p
+        class="heading is-7 has-text-centered-mobile fd-has-margin-top"
+        v-text="
+          $t('page.spotify.album.track-count', { count: album.tracks.total })
+        "
+      />
+      <spotify-list-item-track
+        v-for="(track, index) in album.tracks.items"
+        :key="track.id"
+        :track="track"
+        :position="index"
+        :album="album"
+        :context_uri="album.uri"
+      >
         <template #actions>
           <a @click.prevent.stop="open_track_dialog(track)">
             <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
           </a>
         </template>
       </spotify-list-item-track>
-      <spotify-modal-dialog-track :show="show_track_details_modal" :track="selected_track" :album="album" @close="show_track_details_modal = false" />
-      <spotify-modal-dialog-album :show="show_album_details_modal" :album="album" @close="show_album_details_modal = false" />
+      <spotify-modal-dialog-track
+        :show="show_track_details_modal"
+        :track="selected_track"
+        :album="album"
+        @close="show_track_details_modal = false"
+      />
+      <spotify-modal-dialog-album
+        :show="show_album_details_modal"
+        :album="album"
+        @close="show_album_details_modal = false"
+      />
     </template>
   </content-with-hero>
 </template>

web-src/src/pages/SpotifyPageArtist.vue

@@ -5,7 +5,10 @@
     </template>
     <template #heading-right>
       <div class="buttons is-centered">
-        <a class="button is-small is-light is-rounded" @click="show_artist_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_artist_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
@@ -15,11 +18,25 @@
       </div>
     </template>
     <template #content>
-      <p class="heading has-text-centered-mobile" v-text="$t('page.spotify.artist.album-count', { count: total })" />
-      <spotify-list-item-album v-for="album in albums" :key="album.id" :album="album" @click="open_album(album)">
+      <p
+        class="heading has-text-centered-mobile"
+        v-text="$t('page.spotify.artist.album-count', { count: total })"
+      />
+      <spotify-list-item-album
+        v-for="album in albums"
+        :key="album.id"
+        :album="album"
+        @click="open_album(album)"
+      >
         <template v-if="is_visible_artwork" #artwork>
           <p class="image is-64x64 fd-has-shadow fd-has-action">
-            <cover-artwork :artwork_url="artwork_url(album)" :artist="album.artist" :album="album.name" :maxwidth="64" :maxheight="64" />
+            <cover-artwork
+              :artwork_url="artwork_url(album)"
+              :artist="album.artist"
+              :album="album.name"
+              :maxwidth="64"
+              :maxheight="64"
+            />
           </p>
         </template>
         <template #actions>
@@ -31,8 +48,16 @@
       <VueEternalLoading v-if="offset < total" :load="load_next">
         <template #no-more> . </template>
       </VueEternalLoading>
-      <spotify-modal-dialog-album :show="show_details_modal" :album="selected_album" @close="show_details_modal = false" />
-      <spotify-modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
+      <spotify-modal-dialog-album
+        :show="show_details_modal"
+        :album="selected_album"
+        @close="show_details_modal = false"
+      />
+      <spotify-modal-dialog-artist
+        :show="show_artist_details_modal"
+        :artist="artist"
+        @close="show_artist_details_modal = false"
+      />
     </template>
   </content-with-heading>
 </template>

web-src/src/pages/SpotifyPageBrowse.vue

@@ -7,24 +7,47 @@
         <p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" />
       </template>
       <template #content>
-        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album" @click="open_album(album)">
+        <spotify-list-item-album
+          v-for="album in new_releases"
+          :key="album.id"
+          :album="album"
+          @click="open_album(album)"
+        >
           <template v-if="is_visible_artwork" #artwork>
             <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork :artwork_url="artwork_url(album)" :artist="album.artist" :album="album.name" :maxwidth="64" :maxheight="64" />
+              <cover-artwork
+                :artwork_url="artwork_url(album)"
+                :artist="album.artist"
+                :album="album.name"
+                :maxwidth="64"
+                :maxheight="64"
+              />
             </p>
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-album>
-        <spotify-modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
+        <spotify-modal-dialog-album
+          :show="show_album_details_modal"
+          :album="selected_album"
+          @close="show_album_details_modal = false"
+        />
       </template>
       <template #footer>
         <nav class="level">
           <p class="level-item">
-            <router-link to="/music/spotify/new-releases" class="button is-light is-small is-rounded" v-text="$t('page.spotify.browse.show-more')" />
+            <router-link
+              to="/music/spotify/new-releases"
+              class="button is-light is-small is-rounded"
+              v-text="$t('page.spotify.browse.show-more')"
+            />
           </p>
         </nav>
       </template>
@@ -32,22 +55,41 @@
     <!-- Featured Playlists -->
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.spotify.browse.featured-playlists')" />
+        <p
+          class="title is-4"
+          v-text="$t('page.spotify.browse.featured-playlists')"
+        />
       </template>
       <template #content>
-        <spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :playlist="playlist">
+        <spotify-list-item-playlist
+          v-for="playlist in featured_playlists"
+          :key="playlist.id"
+          :playlist="playlist"
+        >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-playlist>
-        <spotify-modal-dialog-playlist :show="show_playlist_details_modal" :playlist="selected_playlist" @close="show_playlist_details_modal = false" />
+        <spotify-modal-dialog-playlist
+          :show="show_playlist_details_modal"
+          :playlist="selected_playlist"
+          @close="show_playlist_details_modal = false"
+        />
       </template>
       <template #footer>
         <nav class="level">
           <p class="level-item">
-            <router-link to="/music/spotify/featured-playlists" class="button is-light is-small is-rounded" v-text="$t('page.spotify.browse.show-more')" />
+            <router-link
+              to="/music/spotify/featured-playlists"
+              class="button is-light is-small is-rounded"
+              v-text="$t('page.spotify.browse.show-more')"
+            />
           </p>
         </nav>
       </template>

web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue

@@ -6,14 +6,26 @@
         <p class="title is-4">Featured Playlists</p>
       </template>
       <template #content>
-        <spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :playlist="playlist">
+        <spotify-list-item-playlist
+          v-for="playlist in featured_playlists"
+          :key="playlist.id"
+          :playlist="playlist"
+        >
           <template #actions>
-            <a @click.prevent.stop="open_playlist_dialog(playlist)"> 
-              <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+            <a @click.prevent.stop="open_playlist_dialog(playlist)">
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-playlist>
-        <spotify-modal-dialog-playlist :show="show_playlist_details_modal" :playlist="selected_playlist" @close="show_playlist_details_modal = false" />
+        <spotify-modal-dialog-playlist
+          :show="show_playlist_details_modal"
+          :playlist="selected_playlist"
+          @close="show_playlist_details_modal = false"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@@ -6,19 +6,38 @@
         <p class="title is-4">New Releases</p>
       </template>
       <template #content>
-        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album" @click="open_album(album)">
+        <spotify-list-item-album
+          v-for="album in new_releases"
+          :key="album.id"
+          :album="album"
+          @click="open_album(album)"
+        >
           <template v-if="is_visible_artwork" #artwork>
             <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork :artwork_url="artwork_url(album)" :artist="album.artist" :album="album.name" :maxwidth="64" :maxheight="64" />
+              <cover-artwork
+                :artwork_url="artwork_url(album)"
+                :artist="album.artist"
+                :album="album.name"
+                :maxwidth="64"
+                :maxheight="64"
+              />
             </p>
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-album>
-        <spotify-modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
+        <spotify-modal-dialog-album
+          :show="show_album_details_modal"
+          :album="selected_album"
+          @close="show_album_details_modal = false"
+        />
       </template>
     </content-with-heading>
   </div>

web-src/src/pages/SpotifyPagePlaylist.vue

@@ -5,7 +5,10 @@
     </template>
     <template #heading-right>
       <div class="buttons is-centered">
-        <a class="button is-small is-light is-rounded" @click="show_playlist_details_modal = true">
+        <a
+          class="button is-small is-light is-rounded"
+          @click="show_playlist_details_modal = true"
+        >
           <mdicon class="icon" name="dots-horizontal" size="16" />
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
@@ -15,8 +18,20 @@
       </div>
     </template>
     <template #content>
-      <p class="heading has-text-centered-mobile" v-text="$t('page.spotify.playlist.count', {count: playlist.tracks.total})" />
-      <spotify-list-item-track v-for="(item, index) in tracks" :key="item.track.id" :track="item.track" :album="item.track.album" :position="index" :context_uri="playlist.uri">
+      <p
+        class="heading has-text-centered-mobile"
+        v-text="
+          $t('page.spotify.playlist.count', { count: playlist.tracks.total })
+        "
+      />
+      <spotify-list-item-track
+        v-for="(item, index) in tracks"
+        :key="item.track.id"
+        :track="item.track"
+        :album="item.track.album"
+        :position="index"
+        :context_uri="playlist.uri"
+      >
         <template #actions>
           <a @click.prevent.stop="open_track_dialog(item.track)">
             <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
@@ -26,8 +41,17 @@
       <VueEternalLoading v-if="offset < total" :load="load_next">
         <template #no-more> . </template>
       </VueEternalLoading>
-      <spotify-modal-dialog-track :show="show_track_details_modal" :track="selected_track" :album="selected_track.album" @close="show_track_details_modal = false" />
-      <spotify-modal-dialog-playlist :show="show_playlist_details_modal" :playlist="playlist" @close="show_playlist_details_modal = false" />
+      <spotify-modal-dialog-track
+        :show="show_track_details_modal"
+        :track="selected_track"
+        :album="selected_track.album"
+        @close="show_track_details_modal = false"
+      />
+      <spotify-modal-dialog-playlist
+        :show="show_playlist_details_modal"
+        :playlist="playlist"
+        @close="show_playlist_details_modal = false"
+      />
     </template>
   </content-with-heading>
 </template>

web-src/src/pages/SpotifyPageSearch.vue

@@ -8,13 +8,26 @@
             <form @submit.prevent="new_search">
               <div class="field">
                 <p class="control is-expanded has-icons-left">
-                  <input ref="search_field" v-model="search_query" class="input is-rounded is-shadowless" type="text" placeholder="Search" autocomplete="off" />
+                  <input
+                    ref="search_field"
+                    v-model="search_query"
+                    class="input is-rounded is-shadowless"
+                    type="text"
+                    placeholder="Search"
+                    autocomplete="off"
+                  />
                   <mdicon class="icon is-left" name="magnify" size="16" />
                 </p>
               </div>
             </form>
             <div class="tags" style="margin-top: 16px">
-              <a v-for="recent_search in recent_searches" :key="recent_search" class="tag" @click="open_recent_search(recent_search)" v-text="recent_search" />
+              <a
+                v-for="recent_search in recent_searches"
+                :key="recent_search"
+                class="tag"
+                @click="open_recent_search(recent_search)"
+                v-text="recent_search"
+              />
             </div>
           </div>
         </div>
@@ -27,22 +40,49 @@
         <p class="title is-4" v-text="$t('page.spotify.search.tracks')" />
       </template>
       <template #content>
-        <spotify-list-item-track v-for="track in tracks.items" :key="track.id" :track="track" :album="track.album" :position="0" :context_uri="track.uri">
+        <spotify-list-item-track
+          v-for="track in tracks.items"
+          :key="track.id"
+          :track="track"
+          :album="track.album"
+          :position="0"
+          :context_uri="track.uri"
+        >
           <template #actions>
             <a @click.prevent.stop="open_track_dialog(track)">
-              <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-track>
-        <VueEternalLoading v-if="query.type === 'track'" :load="search_tracks_next">
+        <VueEternalLoading
+          v-if="query.type === 'track'"
+          :load="search_tracks_next"
+        >
           <template #no-more> . </template>
         </VueEternalLoading>
-        <spotify-modal-dialog-track :show="show_track_details_modal" :track="selected_track" :album="selected_track.album" @close="show_track_details_modal = false" />
+        <spotify-modal-dialog-track
+          :show="show_track_details_modal"
+          :track="selected_track"
+          :album="selected_track.album"
+          @close="show_track_details_modal = false"
+        />
       </template>
       <template #footer>
         <nav v-if="show_all_tracks_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_tracks" v-text="$t('page.spotify.search.show-all-tracks', { count: tracks.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_tracks"
+              v-text="
+                $t('page.spotify.search.show-all-tracks', {
+                  count: tracks.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -58,22 +98,45 @@
         <p class="title is-4" v-text="$t('page.spotify.search.artists')" />
       </template>
       <template #content>
-        <spotify-list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist">
+        <spotify-list-item-artist
+          v-for="artist in artists.items"
+          :key="artist.id"
+          :artist="artist"
+        >
           <template #actions>
             <a @click.prevent.stop="open_artist_dialog(artist)">
-              <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-artist>
-        <VueEternalLoading v-if="query.type === 'artist'" :load="search_artists_next">
+        <VueEternalLoading
+          v-if="query.type === 'artist'"
+          :load="search_artists_next"
+        >
           <template #no-more> . </template>
         </VueEternalLoading>
-        <spotify-modal-dialog-artist :show="show_artist_details_modal" :artist="selected_artist" @close="show_artist_details_modal = false" />
+        <spotify-modal-dialog-artist
+          :show="show_artist_details_modal"
+          :artist="selected_artist"
+          @close="show_artist_details_modal = false"
+        />
       </template>
       <template #footer>
         <nav v-if="show_all_artists_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_artists" v-text="$t('page.spotify.search.show-all-artists', { count: artists.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_artists"
+              v-text="
+                $t('page.spotify.search.show-all-artists', {
+                  count: artists.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -89,27 +152,57 @@
         <p class="title is-4" v-text="$t('page.spotify.search.albums')" />
       </template>
       <template #content>
-        <spotify-list-item-album v-for="album in albums.items" :key="album.id" :album="album" @click="open_album(album)">
+        <spotify-list-item-album
+          v-for="album in albums.items"
+          :key="album.id"
+          :album="album"
+          @click="open_album(album)"
+        >
           <template v-if="is_visible_artwork" #artwork>
             <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork :artwork_url="artwork_url(album)" :artist="album.artist" :album="album.name" :maxwidth="64" :maxheight="64" />
+              <cover-artwork
+                :artwork_url="artwork_url(album)"
+                :artist="album.artist"
+                :album="album.name"
+                :maxwidth="64"
+                :maxheight="64"
+              />
             </p>
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-album>
-        <VueEternalLoading v-if="query.type === 'album'" :load="search_albums_next">
+        <VueEternalLoading
+          v-if="query.type === 'album'"
+          :load="search_albums_next"
+        >
           <template #no-more> . </template>
         </VueEternalLoading>
-        <spotify-modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
+        <spotify-modal-dialog-album
+          :show="show_album_details_modal"
+          :album="selected_album"
+          @close="show_album_details_modal = false"
+        />
       </template>
       <template #footer>
         <nav v-if="show_all_albums_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_albums" v-text="$t('page.spotify.search.show-all-albums', { count: albums.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_albums"
+              v-text="
+                $t('page.spotify.search.show-all-albums', {
+                  count: albums.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>
@@ -125,22 +218,45 @@
         <p class="title is-4" v-text="$t('page.spotify.search.playlists')" />
       </template>
       <template #content>
-        <spotify-list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist">
+        <spotify-list-item-playlist
+          v-for="playlist in playlists.items"
+          :key="playlist.id"
+          :playlist="playlist"
+        >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-playlist>
-        <VueEternalLoading v-if="query.type === 'playlist'" :load="search_playlists_next">
+        <VueEternalLoading
+          v-if="query.type === 'playlist'"
+          :load="search_playlists_next"
+        >
           <template #no-more> . </template>
         </VueEternalLoading>
-        <spotify-modal-dialog-playlist :show="show_playlist_details_modal" :playlist="selected_playlist" @close="show_playlist_details_modal = false" />
+        <spotify-modal-dialog-playlist
+          :show="show_playlist_details_modal"
+          :playlist="selected_playlist"
+          @close="show_playlist_details_modal = false"
+        />
       </template>
       <template #footer>
         <nav v-if="show_all_playlists_button" class="level">
           <p class="level-item">
-            <a class="button is-light is-small is-rounded" @click="open_search_playlists" v-text="$t('page.spotify.search.show-all-playlists', { count: playlists.total.toLocaleString() })" />
+            <a
+              class="button is-light is-small is-rounded"
+              @click="open_search_playlists"
+              v-text="
+                $t('page.spotify.search.show-all-playlists', {
+                  count: playlists.total.toLocaleString()
+                })
+              "
+            />
           </p>
         </nav>
       </template>