From 074df60f090914a7acf08f9ec9750ff38bbff311 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 8 Dec 2024 20:01:24 +0100
Subject: [PATCH] WIP: TrackBase.vue

---
 front/src/components/library/TrackBase.vue | 117 +++++++++------------
 1 file changed, 48 insertions(+), 69 deletions(-)

diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 263b42934..88d6f84a7 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -161,24 +161,10 @@ const open = ref(false)
               </span>
             </div>
             <div class="eight wide right aligned column button-group">
-              <play-button
-                class="vibrant"
-                :track="track"
-              >
-                {{ t('components.library.TrackBase.button.play') }}
-              </play-button>
-              &nbsp;
-              <track-favorite-icon
-                v-if="store.state.auth.authenticated"
-                :border="true"
-                :track="track"
-              />
-              <track-playlist-icon
-                v-if="store.state.auth.authenticated"
-                class="circular"
-                :border="true"
-                :track="track"
-              />
+            <PlayButton :track="track" />
+            <TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
+            <TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
+
               <a
                 v-if="upload"
                 role="button"
@@ -211,60 +197,53 @@ const open = ref(false)
                   </button>
                 </div>
               </semantic-modal>
-              <button
-                v-dropdown="{direction: 'downward'}"
-                class="ui floating dropdown circular icon basic button"
-                :title="labels.more"
-              >
-                <i class="ellipsis vertical icon" />
-                <div
-                  class="menu"
-                  style="right: 0; left: auto"
-                >
-                  <a
-                    v-if="domain != store.getters['instance/domain']"
-                    :href="track.fid"
-                    target="_blank"
-                    class="basic item"
-                  >
-                    <i class="external icon" />
-                    {{ t('components.library.TrackBase.link.domain', {domain: domain}) }}
-                  </a>
-                  <div
-                    v-if="isEmbedable"
-                    role="button"
-                    class="basic item"
-                    @click="showEmbedModal = !showEmbedModal"
-                  >
-                    <i class="code icon" />
-                    {{ t('components.library.TrackBase.button.embed') }}
-                  </div>
-                  <a
-                    :href="wikipediaUrl"
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    class="basic item"
-                  >
-                    <i class="wikipedia w icon" />
-                    {{ t('components.library.TrackBase.link.wikipedia') }}
-                  </a>
-                  <a
-                    v-if="discogsUrl"
-                    :href="discogsUrl"
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    class="basic item"
-                  >
-                    <i class="external icon" />
-                    {{ t('components.library.TrackBase.link.discogs') }}
-                  </a>
+              <Popover v-model:open="open">
+                <template #default="{ toggleOpen }">
+                  <OptionsButton @click="toggleOpen" />
+                </template>
+                <template #items>
+                  <PopoverItem>
+                    <Button v-if="domain != store.getters['instance/domain']" :href="track.fid" target="_blank" variant="outline" icon="bi-external-link">
+                      {{ t('components.library.TrackBase.link.domain', {domain: domain}) }}
+                    </Button>
+                  </PopoverItem>
+                  <PopoverItem>
+                    <Button v-if="isEmbedable" @click="showEmbedModal = !showEmbedModal" variant="outline" icon="bi-code">
+                      {{ t('components.library.TrackBase.button.embed') }}
+                    </Button>
+                  </PopoverItem>
+                  <PopoverItem>
+                    <Button
+                      :href="wikipediaUrl"
+                      target="_blank"
+                      rel="noreferrer noopener"
+                      variant="outline"
+                      icon="bi-wikipedia"
+                    >
+                      {{ t('components.library.TrackBase.link.wikipedia') }}
+                    </Button>
+                  </PopoverItem>
+                  <PopoverItem>
+                    <Button v-if="discogsUrl"
+                      :href="discogsUrl"
+                      target="_blank"
+                      rel="noreferrer noopener"
+                      variant="outline"
+                      icon="bi-box-arrow-up-right"
+                    >
+                      {{ t('components.library.TrackBase.link.discogs') }}
+                    </Button>
+                  </PopoverItem>
                   <router-link
                     v-if="track.is_local"
                     :to="{name: 'library.tracks.edit', params: {id: track.id }}"
                     class="basic item"
                   >
-                    <i class="edit icon" />
-                    {{ t('components.library.TrackBase.button.edit') }}
+                  <PopoverItem>
+                    <Button v-if="track.is_local" :to="{ name: 'library.tracks.edit', params: { id: track.id } }" tag="router-link" variant="outline" icon="bi-pencil">
+                      {{ t('components.library.TrackBase.button.edit') }}
+                    </Button>
+                  </PopoverItem>
                   </router-link>
                   <dangerous-button
                     v-if="artist && store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === store.state.auth.fullUsername"
@@ -321,8 +300,8 @@ const open = ref(false)
                     {{ t('components.library.TrackBase.link.django') }}
                   </a>
                 </div>
-              </button>
-            </div>
+              </template>
+            </Popover>
           </div>
         </div>
       </section>