From 4b167437c00925aa1f79ee8e17bd8c1fbf1088bd Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Fri, 17 Jan 2025 12:18:26 +0200
Subject: [PATCH] refactor(front): [WIP] implement new layout for Album base
 page

---
 front/src/components/library/AlbumBase.vue | 64 ++++++++++++++++++++++
 front/src/views/auth/ProfileBase.vue       |  2 +-
 2 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 83f79df54..685d0fdc4 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -17,6 +17,7 @@ import AlbumDropdown from './AlbumDropdown.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
+import Section from '~/components/ui/Section.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 import useLogger from '~/composables/useLogger'
@@ -145,6 +146,69 @@ const remove = async () => {
       v-title="labels.title"
     />
     <template v-if="object">
+      <!-- Image -->
+      <Layout flex>
+        <img
+          v-if="object.cover && object.cover.urls.original"
+          v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
+          alt=""
+          class="channel-image"
+        >
+        <img
+          v-else-if="object.artist_credit && object.artist_credit[0] && object.artist_credit[0].artist.cover"
+          alt=""
+          class="channel-image"
+          :src="object.artist_credit[0].artist.cover.urls.medium_square_crop"
+          />
+        <img
+          v-else
+          alt=""
+          class="channel-image"
+          src="../../assets/audio/default-cover.png"
+        >
+        <!-- ({target}) => target -->
+        <!-- Header (TODO: Put into Header component) -->
+        <Section no-items :h1="object.title" style="margin-top: 58px">
+          <Layout stack style="grid-column: 1 / -1">
+            <artist-credit-label
+              v-if="artistCredit"
+              :artist-credit="artistCredit"
+            />
+            <!-- Metadata: -->
+            <div>
+              <!-- EP -->
+                · 
+              <!-- 2022 -->
+                · 
+               <!-- 7 tracks -->
+            </div>
+            <Layout flex>
+              <!-- Pause -->
+               <!-- Shuffle -->
+                <Spacer h grow />
+                <!-- Herzchen -->
+                 <!-- Button mit Pfeilchen -->
+                  <!-- OptionsButton / -->
+            </Layout>
+          </Layout>
+        </Section>
+      </Layout>
+
+      <Layout flex>
+        <!-- Toolbar: -->
+         <!-- Organize in playlist -->
+          <!-- <Options... -->
+           <Spacer h grow />
+           <!-- 1 selected -->
+      </Layout>
+
+      <!-- hier die einzelnen Tracks -->
+
+
+
+
+
+      <!-- Reference: -->
       <section class="segment channel-serie">
         <Layout flex gap-64 style="align-content: stretch;">
           <div style="flex: 2;">
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 51e3b8306..1243726c6 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -208,7 +208,7 @@ watch(props, fetchData, { immediate: true })
       <Section no-items
         :h1="store.state.auth.username"
         :action="{ text:'Edit profile', to:'/settings' }"
-        style="flex-grow: 1; margin-top: 58px;"
+        style="margin-top: 58px;"
       >
         <span style="grid-column: 1 / -1">
           {{ object?.full_username }}