feat(style): person icon as fallback for artists and channels. fix channel detail layout.

front/src/components/artist/Card.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { type operations } from '~/generated/types.ts'
 
 import PlayButton from '~/components/audio/PlayButton.vue'
 import Card from '~/components/ui/Card.vue'
@@ -21,29 +22,6 @@ const props = defineProps<Props>()
 
 const { artist } = props
 
-const cover = computed(() => {
-  const artistCover = artist.cover ?? undefined
-
-  const albumCover = albums.value?.find(
-    (album: Album) => album.cover?.urls
-  )?.cover
-
-  const trackCover = tracks.value?.find(
-    (track: Track) => track.cover?.urls
-  )?.cover
-
-  const fallback: Cover = {
-    uuid: '',
-    urls: {
-      original: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
-      medium_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
-      large_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
-    }
-  }
-
-  return artistCover || albumCover || trackCover || fallback
-})
-
 </script>
 
 <template>
@@ -53,6 +31,7 @@ const cover = computed(() => {
     :tags="artist.tags"
     :to="{name: 'library.artists.detail', params: {id: artist.id}}"
     small
+    style="align-self: flex-start;"
   >
     <template #topright>
       <PlayButton
@@ -64,10 +43,16 @@ const cover = computed(() => {
 
     <template #image>
       <img
-        v-lazy="cover.urls.medium_square_crop"
+        v-if="artist.cover"
+        v-lazy="artist.cover.urls.medium_square_crop"
         :alt="artist.name"
         class="channel-image"
-      >
+      />
+      <i
+        v-else
+        class="bi bi-person-circle"
+        style="font-size: 167px; margin: 16px;"
+      />
     </template>
 
     <template #footer>
@@ -85,6 +70,7 @@ const cover = computed(() => {
         discrete
       />
     </template>
+
   </Card>
 </template>
 

front/src/components/audio/ChannelCard.vue

@@ -55,7 +55,6 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
     <template #topright>
       <PlayButton
         icon-only
-        :is-playable="object.artist?.is_playable"
         :artist="object.artist"
       />
     </template>
@@ -66,7 +65,12 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
         v-lazy="imageUrl"
         :alt="object.artist?.name"
         class="channel-image"
-      >
+      />
+      <i
+        v-else
+        class="bi bi-person-circle"
+        style="font-size: 167px; margin: 16px;"
+      />
     </template>
 
     <template #default>
@@ -89,10 +93,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
       <span v-else>
         {{ t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
       </span>
-      <Spacer
+      <Spacer h grow />
-        h
-        grow
-      />
       <PlayButton
         :dropdown-only="true"
         :is-playable="true"

front/src/views/channels/DetailBase.vue

@@ -150,10 +150,8 @@ const updateSubscriptionCount = (delta: number) => {
 </script>
 
 <template>
-  <Layout
+  <Layout stack main
     v-title="labels.title"
-    stack
-    main
   >
     <Loader v-if="isLoading" />
     <template v-if="object && !isLoading">
@@ -166,32 +164,18 @@ const updateSubscriptionCount = (delta: number) => {
             alt=""
             class="huge channel-image"
             :src="store.getters['instance/absoluteUrl'](object.artist.cover.urls.large_square_crop)"
-          >
+          />
           <i
             v-else
-            class="huge circular inverted bi bi-person-circle-fill violet"
+            class="bi bi-person-circle"
+            style="font-size: 300px; margin-top: -32px;"
           />
-          <Layout
+          <Layout stack style="flex: 1; gap: 16px;">
-            stack
+            <h1 style="margin-top: 64px; margin-bottom: 8px;">
-            no-gap
-            style="flex: 1;"
-          >
-            <h1>
-              <div
-                :title="object.artist?.name"
-              >
               {{ object.artist?.name }}
-              </div>
             </h1>
-            <Layout
+            <Layout stack class="meta" style="gap: 8px;">
-              stack
+              <Layout flex noGap>
-              class="meta"
-              style="gap: 0;"
-            >
-              <Layout
-                flex
-                no-gap
-              >
                 <template v-if="totalTracks > 0">
                   <span
                     v-if="object.artist?.content_category === 'podcast'"
@@ -219,13 +203,9 @@ const updateSubscriptionCount = (delta: number) => {
                   />
                 </div>
               </Layout>
-              <Layout
+              <Layout flex noGap>
-                flex
+                <template v-if="object.artist?.content_category === 'podcast'">
-                no-gap
+                  <span>
-              >
-                <span
-                  v-if="object.artist?.content_category === 'podcast'"
-                >
                     {{ t('views.channels.DetailBase.header.podcastChannel') }}
                   </span>
                   <span
@@ -241,19 +221,17 @@ const updateSubscriptionCount = (delta: number) => {
                       {{ t('views.channels.DetailBase.link.mirrored', {domain: externalDomain}) }}
                     </a>
                   </span>
-                <span
+                </template>
-                  v-else
+                <template v-else>
-                >
+                  <span>
                     {{ t('views.channels.DetailBase.header.artistChannel') }}
                   </span>
+                </template>
                 <span v-if="object.actor">
                   <i class="bi bi-dot" />
                   {{ t('views.library.LibraryBase.link.owner') }}
                 </span>
-                <Spacer
+                <Spacer h :size="4" />
-                  h
-                  :size="4"
-                />
                 <ActorLink
                   v-if="object.actor"
                   discrete
@@ -269,10 +247,7 @@ const updateSubscriptionCount = (delta: number) => {
                 :can-update="false"
                 @updated="object = $event"
               />
-            <Layout
+            <Layout flex class="header-buttons">
-              flex
-              class="header-buttons"
-            >
               <Link
                 v-if="isOwner"
                 solid
@@ -320,8 +295,8 @@ const updateSubscriptionCount = (delta: number) => {
                   <hr>
                   <PopoverItem
                     v-for="obj in getReportableObjects({account: object.attributed_to, channel: object})"
-                    :key="obj.target.type + obj.target.id"
                     icon="bi-share"
+                    :key="obj.target.type + obj.target.id"
                     @click.stop.prevent="report(obj)"
                   >
                     {{ obj.label }}
@@ -342,8 +317,7 @@ const updateSubscriptionCount = (delta: number) => {
                       :is-loading="isLoading"
                       icon="bi-trash"
                       @confirm="remove()"
-                    >
+                    > {{ t('views.channels.DetailBase.button.confirm') }}
-                      {{ t('views.channels.DetailBase.button.confirm') }}
                       <template #modal-content>
                         {{ t('views.channels.DetailBase.modal.delete.content.warning') }}
                       </template>
@@ -365,10 +339,7 @@ const updateSubscriptionCount = (delta: number) => {
                   </template>
                 </template>
               </Popover>
-              <Spacer
+              <Spacer h grow />
-                h
-                grow
-              />
               <subscribe-button
                 :channel="object"
                 @subscribed="updateSubscriptionCount(1)"
@@ -376,9 +347,9 @@ const updateSubscriptionCount = (delta: number) => {
               />
 
               <Modal
+                :title="t('views.channels.DetailBase.modal.embed.header')"
                 v-if="totalTracks > 0"
                 v-model="showEmbedModal"
-                :title="t('views.channels.DetailBase.modal.embed.header')"
                 :cancel="t('views.channels.DetailBase.button.cancel')"
               >
                 <div class="scrolling content">
@@ -396,11 +367,11 @@ const updateSubscriptionCount = (delta: number) => {
                 </template>
               </Modal>
               <Modal
-                v-if="isOwner"
-                v-model="showEditModal"
                 :title="t(`views.channels.DetailBase.header.${
                   object.artist?.content_category === 'podcast' ? 'podcastChannel' : 'artistChannel'
                 }`)"
+                v-if="isOwner"
+                v-model="showEditModal"
               >
                 <div class="scrolling content">
                   <channel-form
@@ -416,7 +387,7 @@ const updateSubscriptionCount = (delta: number) => {
                   <Button
                     primary
                     autofocus
-                    :is-loading="edit.loading"
+                    :isLoading="edit.loading"
                     :disabled="!edit.submittable"
                     @click.stop="editForm?.submit"
                   >
@@ -430,8 +401,8 @@ const updateSubscriptionCount = (delta: number) => {
                 @click.stop.prevent="showSubscribeModal = true"
               />
               <Modal
-                v-model:show="showSubscribeModal"
                 :title="t('views.channels.DetailBase.modal.subscribe.header')"
+                v-model:show="showSubscribeModal"
                 class="tiny"
                 :cancel="t('views.channels.DetailBase.button.cancel')"
               >
@@ -482,7 +453,7 @@ const updateSubscriptionCount = (delta: number) => {
           v-if="object.artist?.tags && object.artist?.tags.length > 0"
           :tags="object.artist.tags"
           :limit="5"
-          show-more="true"
+          showMore="true"
         />
         <Tabs>
           <Tab