chore(front): new layout for artist detail

front/src/components/library/ArtistBase.vue

@@ -4,6 +4,7 @@ import type { Track, Album, Artist, Library } from '~/types'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, useRoute } from 'vue-router'
+import { sum } from 'lodash-es'
 import { getDomain } from '~/utils'
 import { useStore } from '~/store'
 
@@ -11,8 +12,9 @@ import axios from 'axios'
 import useReport from '~/composables/moderation/useReport'
 import useLogger from '~/composables/useLogger'
 
+import HumanDuration from '~/components/common/HumanDuration.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Button from '~/components/ui/Button.vue'
 import OptionsButton from '~/components/ui/button/Options.vue'
@@ -21,6 +23,9 @@ import RadioButton from '~/components/radios/Button.vue'
 import Popover from '~/components/ui/Popover.vue'
 import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 import TagsList from '~/components/tags/List.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Modal from '~/components/ui/Modal.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 
 interface Props {
@@ -56,9 +61,10 @@ const cover = computed(() => object.value?.cover?.urls.original
   ? object.value.cover
   : object.value?.albums.find(album => album.cover?.urls.original)?.cover
 )
-const headerStyle = computed(() => cover.value?.urls.original
-  ? { backgroundImage: `url(${store.getters['instance/absoluteUrl'](cover.value.urls.original)})` }
-  : ''
+const imageUrl = computed(() => cover.value?.urls.original
+  ? store.getters['instance/absoluteUrl']
+    (cover.value.urls.original)
+  : `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
 )
 
 const { t } = useI18n()
@@ -95,75 +101,58 @@ const fetchData = async () => {
   isLoading.value = false
 }
 
+const totalDuration = computed(() => sum((tracks.value ?? []).map(track => track.uploads[0]?.duration ?? 0)))
+
 watch(() => props.id, fetchData, { immediate: true })
 </script>
 
 <template>
-  <main v-title="labels.title">
+  <Layout stack main>
     <Loader v-if="isLoading" />
     <template v-if="object && !isLoading">
-      <section
-        v-title="object.name"
-        :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned']"
-        :style="headerStyle"
-      >
-        <div class="segment-content">
-          <h2 class="ui center aligned icon header">
-            <i class="circular inverted users violet icon" />
-            <div class="content">
-              {{ object.name }}
-              <div
-                v-if="albums"
-                class="sub header"
-              >
-                {{ t('components.library.ArtistBase.meta.tracks', totalTracks) }}
-                {{ t('components.library.ArtistBase.meta.albums', totalAlbums) }}
-              </div>
+      <Layout flex>
+        <img
+          v-lazy="imageUrl"
+          :alt="object.name"
+          class="channel-image"
+        >
+        <Layout stack style="flex: 1; gap: 8px;">
+          <h1>{{ object.name }}</h1>
+          <Layout flex class="meta" style="gap: 0;">
+            <div
+              v-if="albums"
+            >
+              {{ t('components.library.ArtistBase.meta.tracks', totalTracks) }}
+              {{ t('components.library.ArtistBase.meta.albums', totalAlbums) }}
             </div>
-          </h2>
-          <TagsList
-            v-if="object.tags && object.tags.length > 0"
-            :tags="object.tags"
-          />
-          <div class="ui hidden divider" />
-          <div class="header-buttons">
-            <div class="ui buttons">
-              <radio-button
-                type="artist"
-                :object-id="object.id"
+            <div v-if="totalDuration > 0">
+              <i class="bi bi-dot" />
+              <human-duration
+                v-if="totalDuration > 0"
+                :duration="totalDuration"
               />
             </div>
-            <div class="ui buttons">
-              <PlayButton
-                :is-playable="isPlayable"
-                class="vibrant"
-                :artist="object"
-              >
-                {{ t('components.library.ArtistBase.button.play') }}
-              </PlayButton>
-            </div>
-
-            <semantic-modal
-              v-if="publicLibraries.length > 0"
-              v-model:show="showEmbedModal"
+            <TagsList
+              v-if="object.tags && object.tags.length > 0"
+              :tags="object.tags"
+            />
+          </Layout>
+          <Spacer />
+          <Layout flex>
+            <PlayButton
+              :is-playable="isPlayable"
+              split
+              class="vibrant"
+              :artist="object"
             >
-              <h4 class="header">
-                {{ t('components.library.ArtistBase.modal.embed.header') }}
-              </h4>
-              <div class="scrolling content">
-                <div class="description">
-                  <embed-wizard
-                    :id="object.id"
-                    type="artist"
-                  />
-                </div>
-              </div>
-              <div class="actions">
-                <Button color="secondary">
-                  {{ t('components.library.ArtistBase.button.cancel') }}
-                </Button>
-              </div>
-            </semantic-modal>
+              {{ t('components.library.ArtistBase.button.play') }}
+            </PlayButton>
+            <radio-button
+              type="artist"
+              :object-id="object.id"
+            />
+            <!-- TODO: Add artist to (Track)FavoriteIcon -->
+            <TrackFavoriteIcon v-if="store.state.auth.authenticated" :artist="object" />
             <Popover>
               <template #default="{ toggleOpen }">
                 <OptionsButton
@@ -184,7 +173,7 @@ watch(() => props.id, fetchData, { immediate: true })
 
                 <PopoverItem
                   v-if="publicLibraries.length > 0"
-                  @click="showEmbedModal = !showEmbedModal"
+                  @click="showEmbedModal = true"
                 >
                   <i class="bi bi-code-square" />
                   {{ t('components.library.ArtistBase.button.embed') }}
@@ -257,9 +246,26 @@ watch(() => props.id, fetchData, { immediate: true })
                 </PopoverItem>
               </template>
             </Popover>
-          </div>
-        </div>
-      </section>
+          </Layout>
+        </Layout>
+      </Layout>
+
+      <Modal
+        v-if="publicLibraries.length > 0"
+        v-model="showEmbedModal"
+        :title="t('components.library.ArtistBase.modal.embed.header')"
+      >
+        <embed-wizard
+          :id="object.id"
+          type="artist"
+        />
+        <template #actions>
+          <Button secondary>
+            {{ t('components.library.ArtistBase.button.cancel') }}
+          </Button>
+        </template>
+      </Modal>
+      <hr>
       <router-view
         :key="route.fullPath"
         :tracks="tracks"
@@ -272,5 +278,5 @@ watch(() => props.id, fetchData, { immediate: true })
         @libraries-loaded="libraries = $event"
       />
     </template>
-  </main>
+  </Layout>
 </template>

front/src/components/library/ArtistDetail.vue

@@ -11,8 +11,16 @@ import axios from 'axios'
 
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
+import TagsList from '~/components/tags/List.vue'
 import AlbumCard from '~/components/album/Card.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/Section.vue'
+import Heading from "~/components/ui/Heading.vue";
+import Loader from '~/components/ui/Loader.vue'
+import Link from '~/components/ui/Link.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -62,87 +70,71 @@ const loadMoreAlbums = async () => {
 </script>
 
 <template>
-  <div v-if="object">
-    <div
+  <Layout stack v-if="object">
+    <TagsList
+      v-if="object.tags && object.tags.length > 0"
+      :tags="object.tags"
+    />
+    <Alert blue
       v-if="contentFilter"
-      class="ui small text container"
     >
-      <div class="ui hidden divider" />
-      <div class="ui message">
-        <p>
-          {{ t('components.library.ArtistDetail.message.filter') }}
-        </p>
-        <router-link
-          class="right floated"
-          :to="{name: 'settings'}"
-        >
-          {{ t('components.library.ArtistDetail.link.filter') }}
-        </router-link>
-        <Button
-          class="tiny"
-          @click="store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
-        >
-          {{ t('components.library.ArtistDetail.button.filter') }}
-        </Button>
-      </div>
-    </div>
-    <section
-      v-if="isLoadingAlbums"
-      class="ui vertical stripe segment"
-    >
-      <div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
-    </section>
-    <section
-      v-else-if="albums && albums.length > 0"
-      class="ui vertical stripe segment"
-    >
-      <h2>
+      <p>
+        {{ t('components.library.ArtistDetail.message.filter') }}
+      </p>
+      <Link
+        class="right floated"
+        :to="{name: 'settings'}"
+      >
+        {{ t('components.library.ArtistDetail.link.filter') }}
+      </Link>
+      <Button
+        class="tiny"
+        @click="store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
+      >
+        {{ t('components.library.ArtistDetail.button.filter') }}
+      </Button>
+    </Alert>
+    <Loader v-if="isLoadingAlbums" />
+    <template v-else-if="albums && albums.length > 0">
+      <Heading h2 section-heading>
         {{ t('components.library.ArtistDetail.header.album') }}
-      </h2>
-      <div class="ui cards app-cards">
+      </Heading>
+      <Layout flex>
         <album-card
           v-for="album in allAlbums"
           :key="album.id"
           :album="album"
         />
-      </div>
-      <div class="ui hidden divider" />
-      <Button
-        v-if="loadMoreAlbumsUrl !== null"
-        :is-loading="isLoadingMoreAlbums"
-        @click="loadMoreAlbums()"
-      >
-        {{ t('components.library.ArtistDetail.button.more') }}
-      </Button>
-    </section>
-    <section
-      v-if="tracks.length > 0"
-      class="ui vertical stripe segment"
-    >
-      <track-table
+        <Spacer h grow />
+        <Button
+          v-if="loadMoreAlbumsUrl !== null"
+          primary
+          :is-loading="isLoadingMoreAlbums"
+          @click="loadMoreAlbums()"
+        >
+          {{ t('components.library.ArtistDetail.button.more') }}
+        </Button>
+      </Layout>
+    </template>
+    <template v-if="tracks.length > 0">
+      <Heading h2 section-heading>
+        {{ t('components.library.ArtistDetail.header.track') }}
+      </Heading>
+      <TrackTable
         :is-artist="true"
         :show-position="false"
         :track-only="true"
         :tracks="tracks.slice(0,5)"
-      >
-        <template #header>
-          <h2>
-            {{ t('components.library.ArtistDetail.header.track') }}
-          </h2>
-          <div class="ui hidden divider" />
-        </template>
-      </track-table>
-    </section>
-    <section class="ui vertical stripe segment">
-      <h2>
-        {{ t('components.library.ArtistDetail.header.library') }}
-      </h2>
-      <library-widget
-        :url="'artists/' + object.id + '/libraries/'"
-        @loaded="emit('libraries-loaded', $event)"
-      >
-        {{ t('components.library.ArtistDetail.description.library') }}
-      </library-widget>
-    </section>
-  </div>
+      />
+    </template>
+    <Heading h2 section-heading>
+      {{ t('components.library.ArtistDetail.header.library') }}
+    </Heading>
+    <LibraryWidget
+      :url="'artists/' + object.id + '/libraries/'"
+      @loaded="emit('libraries-loaded', $event)"
+    >
+      {{ t('components.library.ArtistDetail.description.library') }}
+    </LibraryWidget>
+  </Layout>
 </template>

front/src/components/library/Artists.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ArtistCard from '~/components/artist/Card.vue'
 import type { OrderingProps } from '~/composables/navigation/useOrdering'
 import type { Artist, BackendResponse } from '~/types'
 import type { RouteRecordName } from 'vue-router'
@@ -14,7 +13,9 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import ArtistCard from '~/components/artist/Card.vue'
 import Pagination from '~/components/ui/Pagination.vue'
+import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Input from '~/components/ui/Input.vue'
 import Toggle from '~/components/ui/Toggle.vue'
@@ -199,11 +200,11 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         type="checkbox"
       />
     </Layout>
+    <Loader v-if="isLoading"/>
     <Layout grid
       v-if="result && result.results.length > 0"
       style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
     >
-    <Loader v-if="isLoading"/>
       <ArtistCard
         v-for="artist in result.results"
         :key="artist.id"