From 6ee0d81976b449af6a21e1214d23406828c9bd3e Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 16 Jan 2025 17:03:24 +0100
Subject: [PATCH] fix(front): use card template sections on library card

---
 front/src/views/content/remote/Card.vue | 219 +++++++++++++-----------
 1 file changed, 116 insertions(+), 103 deletions(-)

diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index c14abba6e..9917f834d 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -154,58 +154,44 @@ const isOpen = ref(false)
 <template>
   <Card
     :title="library.name"
+    :to="{name: 'library.detail', params: {id: library.uuid}}"
   >
-    <div class="content">
-      <h4 class="header">
-        <router-link :to="{name: 'library.detail', params: {id: library.uuid}}">
-          {{ library.name }}
-        </router-link>
+    <template #topright>
+      <span
+        v-if="library.privacy_level === 'me'"
+        :data-tooltip="labels.tooltips.me"
+      >
+        <i class="bi bi-lock-fill" />
+      </span>
+      <span
+        v-else-if="library.privacy_level === 'everyone'"
+        :data-tooltip="labels.tooltips.everyone"
+      >
+        <i class="bi bi-globe" />
+      </span>
+      <Popover v-model:open="isOpen">
+        <template #default="{ toggleOpen }">
+          <OptionsButton
+            @click="toggleOpen"
+          />
+        </template>
+        <template #items>
+          <PopoverItem
+            v-for="obj in getReportableObjects({library, account: library.actor})"
+            :key="obj.target.type + obj.target.id"
+            @click.stop.prevent="report(obj)"
+          >
+            <i class="bi bi-share" /> {{ obj.label }}
+          </PopoverItem>
+        </template>
+      </Popover>
+    </template>
 
-        <Popover v-model:open="isOpen">
-          <template #default="{ toggleOpen }">
-            <OptionsButton
-              @click="toggleOpen"
-            />
-          </template>
-          <template #items>
-            <PopoverItem
-              v-for="obj in getReportableObjects({library, account: library.actor})"
-              :key="obj.target.type + obj.target.id"
-              @click.stop.prevent="report(obj)"
-            >
-              <i class="bi bi-share" /> {{ obj.label }}
-            </PopoverItem>
-          </template>
-        </Popover>
-        <span
-          v-if="library.privacy_level === 'me'"
-          class="right floated"
-          :data-tooltip="labels.tooltips.me"
-        >
-          <i class="bi bi-lock" />
-        </span>
-        <span
-          v-else-if="library.privacy_level === 'everyone'"
-          class="right floated"
-          :data-tooltip="labels.tooltips.everyone"
-        >
-          <i class="bi bi-globe" />
-        </span>
-      </h4>
-      <div class="meta">
-        <span>
-          <i class="bi bi-clock" />
-          <human-date :date="library.creation_date" />
-        </span>
-      </div>
+    <div class="content">
       <div class="description">
         {{ library.description }}
       </div>
       <Spacer :size="8" />
-      <div class="meta">
-        <i class="bi bi-music-note" />
-        {{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
-      </div>
       <div
         v-if="displayScan && latestScan"
         class="meta"
@@ -289,63 +275,90 @@ const isOpen = ref(false)
         </div>
       </div>
     </div>
-    <div
-      v-if="displayFollow || radioPlayable"
-      :class="['ui', {two: displayFollow && radioPlayable}, 'bottom', 'attached', 'buttons']"
-    >
-      <radio-button
-        v-if="radioPlayable"
-        :type="'library'"
-        :object-id="library.uuid"
-      />
-      <template v-if="displayFollow">
-        <button
-          v-if="!library.follow"
-          :class="['ui', 'success', {'loading': isLoadingFollow}, 'button']"
-          @click="follow()"
-        >
-          {{ t('views.content.remote.Card.button.follow') }}
-        </button>
-        <template v-else-if="!library.follow.approved">
-          <button
-            class="ui disabled button"
-          >
-            <i class="hourglass icon" />
-            {{ t('views.content.remote.Card.button.pending') }}
-          </button>
-          <button
-            class="ui button"
-            @click="unfollow"
-          >
-            {{ t('views.content.remote.Card.button.cancel') }}
-          </button>
-        </template>
-        <template v-else-if="library.follow.approved">
-          <dangerous-button
-            :class="['ui', 'button']"
-            :action="unfollow"
-          >
-            {{ t('views.content.remote.Card.button.unfollow') }}
-            <template #modal-header>
-              <p>
-                {{ t('views.content.remote.Card.modal.unfollow.header') }}
-              </p>
-            </template>
-            <template #modal-content>
-              <div>
-                <p>
-                  {{ t('views.content.remote.Card.modal.unfollow.content.warning') }}
-                </p>
-              </div>
-            </template>
-            <template #modal-confirm>
-              <div>
-                {{ t('views.content.remote.Card.button.unfollow') }}
-              </div>
-            </template>
-          </dangerous-button>
-        </template>
+    <template #footer>
+      <div class="meta">
+        <span>
+          <i class="bi bi-clock" />
+          <human-date :date="library.creation_date" />
+        </span>
+        <span>
+          <i class="bi bi-music-note-list" />
+          {{ t('views.content.remote.Card.meta.tracks', library.uploads_count) }}
+        </span>
+      </div>
       </template>
-    </div>
+
+      <template #actions>
+      <div
+        v-if="displayFollow || radioPlayable"
+        :class="['ui', {two: displayFollow && radioPlayable}, 'bottom', 'attached', 'buttons']"
+      >
+        <radio-button
+          v-if="radioPlayable"
+          :type="'library'"
+          :object-id="library.uuid"
+        />
+        <template v-if="displayFollow">
+          <button
+            v-if="!library.follow"
+            :class="['ui', 'success', {'loading': isLoadingFollow}, 'button']"
+            @click="follow()"
+          >
+            {{ t('views.content.remote.Card.button.follow') }}
+          </button>
+          <template v-else-if="!library.follow.approved">
+            <button
+              class="ui disabled button"
+            >
+              <i class="hourglass icon" />
+              {{ t('views.content.remote.Card.button.pending') }}
+            </button>
+            <button
+              class="ui button"
+              @click="unfollow"
+            >
+              {{ t('views.content.remote.Card.button.cancel') }}
+            </button>
+          </template>
+          <template v-else-if="library.follow.approved">
+            <dangerous-button
+              :class="['ui', 'button']"
+              :action="unfollow"
+            >
+              {{ t('views.content.remote.Card.button.unfollow') }}
+              <template #modal-header>
+                <p>
+                  {{ t('views.content.remote.Card.modal.unfollow.header') }}
+                </p>
+              </template>
+              <template #modal-content>
+                <div>
+                  <p>
+                    {{ t('views.content.remote.Card.modal.unfollow.content.warning') }}
+                  </p>
+                </div>
+              </template>
+              <template #modal-confirm>
+                <div>
+                  {{ t('views.content.remote.Card.button.unfollow') }}
+                </div>
+              </template>
+            </dangerous-button>
+          </template>
+        </template>
+      </div>
+    </template>
   </Card>
 </template>
+
+<style scoped>
+  .meta {
+    padding-left: 8px;
+    > span {
+      margin-right: 16px;
+      > i {
+        margin-right: 4px;
+      }
+    }
+  }
+</style>