fix(front): consistent header on track detail

front/src/components/library/TrackBase.vue

@@ -18,6 +18,7 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
 import HumanDuration from '~/components/common/HumanDuration.vue'
 import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Modal from '~/components/ui/Modal.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
@@ -153,16 +154,24 @@ watch(showDeleteModal, (newValue) => {
 </script>
 
 <template>
-  <Layout
-    stack
-    main
-  >
   <Loader
     v-if="isLoading"
     v-title="labels.title"
   />
-    <template v-if="track">
+  <Header
-      <Layout flex>
+    v-if="track"
+    :h1="track.title"
+    :action="{
+      text: labels.download,
+      to: downloadUrl,
+      solid: true,
+      primary: true,
+      icon: 'bi-download',
+      lowHeight: true
+    }"
+    page-heading
+  >
+    <template #image>
       <img
         v-if="track.cover"
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.large_square_crop)"
@@ -181,32 +190,7 @@ watch(showDeleteModal, (newValue) => {
         class="channel-image"
         src="../../assets/audio/default-cover.png"
       >
-
+    </template>
-        <Layout
-          stack
-          style="flex: 1; gap: 8px;"
-        >
-          <Layout
-            flex
-            no-gap
-            style="align-items: baseline;"
-          >
-            <h1 style="margin-top: 64px; margin-bottom: 8px;">
-              {{ track.title }}
-            </h1>
-            <Spacer grow />
-            <Button
-              v-if="upload"
-              :aria-label="labels.download"
-              :to="downloadUrl"
-              target="_blank"
-              primary
-              icon="bi-download"
-              :title="labels.download"
-            >
-              {{ labels.download }}
-            </Button>
-          </Layout>
     <artist-credit-label
       :artist-credit="track.artist_credit"
     />
@@ -230,6 +214,7 @@ watch(showDeleteModal, (newValue) => {
         class="vibrant"
         split
         :track="track"
+        low-height
       />
 
       <Spacer
@@ -240,14 +225,19 @@ watch(showDeleteModal, (newValue) => {
       <TrackFavoriteIcon
         v-if="store.state.auth.authenticated"
         :track="track"
+        square-small
       />
       <TrackPlaylistIcon
         v-if="store.state.auth.authenticated"
         :track="track"
+        square-small
       />
       <Popover v-model="open">
         <template #default="{ toggleOpen }">
-                <OptionsButton @click="toggleOpen" />
+          <OptionsButton
+            is-square-small
+            @click="toggleOpen"
+          />
         </template>
         <template #items>
           <PopoverItem
@@ -341,34 +331,32 @@ watch(showDeleteModal, (newValue) => {
         </template>
       </Popover>
     </Layout>
-        </Layout>
+  </Header>
-      </Layout>
-
   <hr>
   <Layout
     flex
     gap-8
   >
-        <span v-if="track.attributed_to">
+    <span v-if="track?.attributed_to">
       {{ t('components.library.TrackBase.subtitle.with-uploader') }}
     </span>
     <span v-else>
       {{ t('components.library.TrackBase.subtitle.without-uploader') }}
     </span>
     <ActorLink
-          v-if="track.attributed_to"
+      v-if="track?.attributed_to"
-          :actor="track.attributed_to"
+      :actor="track?.attributed_to"
       :avatar="false"
     />
 
     <time
-          :title="track.creation_date"
+      :title="track?.creation_date"
-          :datetime="track.creation_date"
+      :datetime="track?.creation_date"
     >
-          {{ momentFormat(new Date(track.creation_date), 'LL') }}
+      {{ track?.creation_date ? momentFormat(new Date(track.creation_date), 'LL') : '' }}
     </time>
   </Layout>
-      <Spacer :size="16" />
+  <Spacer :size="64" />
 
   <Modal
     v-if="isEmbedable"
@@ -376,7 +364,7 @@ watch(showDeleteModal, (newValue) => {
     :title="t('components.library.TrackBase.modal.embed.header')"
   >
     <embed-wizard
-          :id="track.id"
+      :id="track?.id || undefined"
       type="track"
     />
 
@@ -425,11 +413,16 @@ watch(showDeleteModal, (newValue) => {
     @libraries-loaded="libraries = $event"
   />
 </template>
-  </Layout>
-</template>
 
-<style scoped>
+<style lang="scss" scoped>
   .meta {
-  line-height: 48px;
+    font-size: 15px;
+    line-height: 32px;
+    @include light-theme {
+      color: var(--fw-gray-700);
+    }
+    @include dark-theme {
+      color: var(--fw-gray-500);
+    }
   }
 </style>

front/src/components/library/TrackDetail.vue

@@ -147,7 +147,6 @@ const trackDetails: {
       flex
       style="gap: 24px;"
     >
-      <Spacer />
       <Layout
         stack
         style="flex: 1; gap: 0;"