[web] Simplify pages

web-src/src/components/ListDirectories.vue

@@ -20,22 +20,14 @@
       <slot name="actions" />
     </div>
   </div>
-  <template v-for="item in items" :key="item.path">
+  <list-item
-    <div
+    v-for="item in items"
-      class="media is-align-items-center is-clickable mb-0"
+    :key="item.path"
-      @click="open(item)"
+    icon="folder"
-    >
+    :lines="[item.name]"
-      <mdicon class="media-left icon" name="folder" />
+    @open="open(item)"
-      <div class="media-content">
+    @open-details="openDetails(item)"
-        <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
+  />
-      </div>
-      <div class="media-right">
-        <a @click.prevent.stop="openDetails(item)">
-          <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
-        </a>
-      </div>
-    </div>
-  </template>
   <modal-dialog-directory
     :item="selectedItem"
     :show="showDetailsModal"
@@ -44,17 +36,16 @@
 </template>
 
 <script>
+import ListItem from '@/components/ListItem.vue'
 import ModalDialogDirectory from '@/components/ModalDialogDirectory.vue'
 
 export default {
   name: 'ListDirectories',
-  components: { ModalDialogDirectory },
+  components: { ListItem, ModalDialogDirectory },
   props: { items: { required: true, type: Array } },
-
   data() {
     return { selectedItem: '', showDetailsModal: false }
   },
-
   computed: {
     directories() {
       const directories = []
@@ -69,7 +60,6 @@ export default {
       return directories
     }
   },
-
   methods: {
     open(item) {
       const route = { name: 'files' }

web-src/src/pages/PageAbout.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="{ title: $t('page.about.library') }" />
@@ -79,7 +78,6 @@
       </i18n-t>
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageAlbum.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-hero>
     <template #heading>
       <heading-hero :content="heading" />
@@ -14,15 +13,14 @@
     </template>
     <template #content>
       <list-tracks :items="tracks" :uris="album.uri" />
+    </template>
+  </content-with-hero>
   <modal-dialog-album
     :item="album"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-hero>
-  </div>
-</template>
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'

web-src/src/pages/PageAlbumSpotify.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-hero>
     <template #heading>
       <heading-hero :content="heading" />
@@ -14,15 +13,14 @@
     </template>
     <template #content>
       <list-tracks-spotify :items="tracks" :context_uri="album.uri" />
+    </template>
+  </content-with-hero>
   <modal-dialog-album-spotify
     :item="album"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-hero>
-  </div>
-</template>
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'

web-src/src/pages/PageAlbums.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #options>
@@ -41,7 +40,6 @@
       <list-albums :items="albums" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageArtist.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #options>
       <list-options>
@@ -37,15 +36,14 @@
     </template>
     <template #content>
       <list-albums :items="albums" />
+    </template>
+  </content-with-heading>
   <modal-dialog-artist
     :item="artist"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageArtistSpotify.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="heading" />
@@ -29,15 +28,14 @@
           <br />
         </template>
       </vue-eternal-loading>
+    </template>
+  </content-with-heading>
   <modal-dialog-artist-spotify
     :item="artist"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageArtistTracks.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #options>
       <index-button-list :indices="tracks.indices" />
@@ -38,15 +37,14 @@
     </template>
     <template #content>
       <list-tracks :items="tracks" :uris="trackUris" />
+    </template>
+  </content-with-heading>
   <modal-dialog-artist
     :item="artist"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageArtists.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #options>
@@ -41,7 +40,6 @@
       <list-artists :items="artists" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-hero>
     <template #heading>
       <heading-hero :content="heading" />
@@ -14,6 +13,8 @@
     </template>
     <template #content>
       <list-tracks :items="tracks" :show-progress="true" :uris="album.uri" />
+    </template>
+  </content-with-hero>
   <modal-dialog-album
     :item="album"
     :show="showDetailsModal"
@@ -21,9 +22,6 @@
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-hero>
-  </div>
-</template>
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'

web-src/src/pages/PageAudiobooksAlbums.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-audiobooks />
   <content-with-heading>
     <template #options>
@@ -12,7 +11,6 @@
       <list-albums :items="albums" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageAudiobooksArtist.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="heading" />
@@ -14,15 +13,14 @@
     </template>
     <template #content>
       <list-albums :items="albums" />
+    </template>
+  </content-with-heading>
   <modal-dialog-artist
     :item="artist"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageAudiobooksArtists.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-audiobooks />
   <content-with-heading>
     <template #options>
@@ -12,7 +11,6 @@
       <list-artists :items="artists" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageAudiobooksGenres.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-audiobooks />
   <content-with-heading>
     <template #options>
@@ -12,7 +11,6 @@
       <list-genres :items="genres" :media_kind="'audiobook'" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageComposerAlbums.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="heading" />
@@ -14,15 +13,14 @@
     </template>
     <template #content>
       <list-albums :items="albums" />
+    </template>
+  </content-with-heading>
   <modal-dialog-composer
     :item="composer"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageComposerTracks.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #options>
       <index-button-list :indices="tracks.indices" />
@@ -25,15 +24,14 @@
     </template>
     <template #content>
       <list-tracks :items="tracks" :expression="expression" />
+    </template>
+  </content-with-heading>
   <modal-dialog-composer
     :item="composer"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageComposers.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #options>
@@ -12,7 +11,6 @@
       <list-composers :items="composers" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageFiles.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="{ title: name }" />
@@ -15,14 +14,9 @@
     <template #content>
       <list-directories :items="directories" />
       <list-playlists :items="playlists" />
-        <list-tracks
+      <list-tracks :items="tracks" icon="file-music-outline" />
-          :expression="expression"
-          :items="tracks"
-          icon="file-music-outline"
-        />
     </template>
   </content-with-heading>
-  </div>
   <modal-dialog-playable
     :item="playable"
     :show="showDetailsModal"
@@ -109,9 +103,6 @@ export default {
     current() {
       return this.$route.query?.directory || '/'
     },
-    expression() {
-      return `path starts with "${this.current}" order by path asc`
-    },
     name() {
       if (this.current !== '/') {
         return this.current?.slice(this.current.lastIndexOf('/') + 1)

web-src/src/pages/PageGenreAlbums.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #options>
       <index-button-list :indices="albums.indices" />
@@ -17,6 +16,8 @@
     </template>
     <template #content>
       <list-albums :items="albums" />
+    </template>
+  </content-with-heading>
   <modal-dialog-genre
     :item="genre"
     :media_kind="media_kind"
@@ -24,9 +25,6 @@
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageGenreTracks.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #options>
       <index-button-list :indices="tracks.indices" />
@@ -25,6 +24,8 @@
     </template>
     <template #content>
       <list-tracks :items="tracks" :expression="expression" />
+    </template>
+  </content-with-heading>
   <modal-dialog-genre
     :item="genre"
     :media_kind="media_kind"
@@ -32,9 +33,6 @@
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageGenres.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #options>
@@ -12,7 +11,6 @@
       <list-genres :items="genres" :media_kind="'music'" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageMusic.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #heading>
@@ -37,7 +36,6 @@
       </router-link>
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageMusicRecentlyAdded.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #heading>
@@ -11,7 +10,6 @@
       <list-albums :items="albums" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageMusicRecentlyPlayed.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #heading>
@@ -11,7 +10,6 @@
       <list-tracks :items="tracks" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageMusicSpotify.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #heading>
@@ -37,7 +36,6 @@
       </router-link>
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #heading>
@@ -9,7 +8,6 @@
       <list-playlists-spotify :items="playlists" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageMusicSpotifyNewReleases.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-music />
   <content-with-heading>
     <template #heading>
@@ -9,7 +8,6 @@
       <list-albums-spotify :items="albums" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PagePlaylistFolder.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="heading" />
@@ -8,7 +7,6 @@
       <list-playlists :items="playlists" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PagePlaylistTracks.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="heading" />
@@ -19,6 +18,8 @@
     </template>
     <template #content>
       <list-tracks :items="tracks" :uris="uris" />
+    </template>
+  </content-with-heading>
   <modal-dialog-playlist
     :item="playlist"
     :show="showDetailsModal"
@@ -26,9 +27,6 @@
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PagePlaylistTracksSpotify.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="heading" />
@@ -31,15 +30,14 @@
           <br />
         </template>
       </vue-eternal-loading>
+    </template>
+  </content-with-heading>
   <modal-dialog-playlist-spotify
     :item="playlist"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PagePodcast.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-hero>
     <template #heading>
       <heading-hero :content="heading" />
@@ -46,7 +45,6 @@
       </modal-dialog>
     </template>
   </content-with-hero>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PagePodcasts.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading v-if="tracks.items.length > 0">
     <template #heading>
       <heading-title :content="{ title: $t('page.podcasts.new-episodes') }" />
@@ -48,15 +47,14 @@
         @play-count-changed="reloadNewEpisodes()"
         @podcast-deleted="reloadPodcasts()"
       />
+    </template>
+  </content-with-heading>
   <modal-dialog-add-rss
     :show="showAddPodcastModal"
     @close="showAddPodcastModal = false"
     @podcast-added="reloadPodcasts()"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageQueue.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="heading" />
@@ -75,6 +74,8 @@
           </list-item-queue-item>
         </template>
       </draggable>
+    </template>
+  </content-with-heading>
   <modal-dialog-queue-item
     :show="showDetailsModal"
     :item="selectedItem"
@@ -90,9 +91,6 @@
     @close="showSaveModal = false"
   />
 </template>
-    </content-with-heading>
-  </div>
-</template>
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'

web-src/src/pages/PageRadioStreams.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <content-with-heading>
     <template #heading>
       <heading-title :content="heading" />
@@ -8,7 +7,6 @@
       <list-tracks :items="tracks" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageSettingsArtwork.vue

@@ -1,17 +1,11 @@
 <template>
-  <div>
   <tabs-settings />
   <content-with-heading>
     <template #heading>
-        <heading-title
+      <heading-title :content="{ title: $t('page.settings.artwork.title') }" />
-          :content="{ title: $t('page.settings.artwork.title') }"
-        />
     </template>
     <template #content>
-        <div
+      <div class="content" v-text="$t('page.settings.artwork.explanation-1')" />
-          class="content"
-          v-text="$t('page.settings.artwork.explanation-1')"
-        />
       <div class="content">
         <control-setting-switch category="artwork" name="streamurl_ignore">
           <template #label>
@@ -27,10 +21,7 @@
           </template>
         </control-setting-switch>
       </div>
-        <div
+      <div class="content" v-text="$t('page.settings.artwork.explanation-2')" />
-          class="content"
-          v-text="$t('page.settings.artwork.explanation-2')"
-        />
       <div class="content">
         <control-setting-switch
           v-if="servicesStore.spotify_logged_in"
@@ -75,7 +66,6 @@
       </div>
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageSettingsOnlineServices.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-settings />
   <content-with-heading>
     <template #heading>
@@ -79,10 +78,7 @@
                   type="text"
                   :placeholder="$t('page.settings.services.username')"
                 />
-                  <div
+                <div class="help is-danger" v-text="lastfm_login.errors.user" />
-                    class="help is-danger"
-                    v-text="lastfm_login.errors.user"
-                  />
               </div>
               <div class="control">
                 <input
@@ -118,7 +114,6 @@
       <div v-else v-text="$t('page.settings.services.lastfm.no-support')" />
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageSettingsRemotesOutputs.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-settings />
   <content-with-heading>
     <template #heading>
@@ -84,7 +83,6 @@
       </div>
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>

web-src/src/pages/PageSettingsWebinterface.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <tabs-settings />
   <content-with-heading>
     <template #heading>
@@ -147,14 +146,11 @@
         name="recently_added_limit"
       >
         <template #label>
-            <span
+          <span v-text="$t('page.settings.general.recently-added-page-info')" />
-              v-text="$t('page.settings.general.recently-added-page-info')"
-            />
         </template>
       </control-setting-integer-field>
     </template>
   </content-with-heading>
-  </div>
 </template>
 
 <script>