refactor(front): playlist detail and edit

front/src/components/playlists/Editor.vue

@@ -216,43 +216,50 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
           </li>
         </ul>
         <Button
-          primary
+          destructive
           @click="insertMany(queueTracks, true)"
         >
           {{ t('components.playlists.Editor.button.addDuplicate') }}
         </Button>
       </Alert>
-      <template v-else-if="status === 'saved'">
+      <Alert
-        <i class="success bi- bi-check" />
+        v-else-if="status === 'saved'"
-        {{ t('components.playlists.Editor.message.sync') }}
+        green
-      </template>
+        align-content="center"
-      <Button
-        :disabled="queueTracks.length === 0"
-        primary
-        :class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
-        :title="labels.copyTitle"
-        icon="bi-plus"
-        @click="insertMany(queueTracks, false)"
       >
-        {{ t('components.playlists.Editor.button.insertFromQueue', queueTracks.length) }}
+        <span>
-      </Button>
+          <i class="bi bi-check" />
+          {{ t('components.playlists.Editor.message.sync') }}
+        </span>
+      </Alert>
+      <Layout flex>
+        <Button
+          :disabled="queueTracks.length === 0"
+          primary
+          :class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
+          :title="labels.copyTitle"
+          icon="bi-plus"
+          @click="insertMany(queueTracks, false)"
+        >
+          {{ t('components.playlists.Editor.button.insertFromQueue', queueTracks.length) }}
+        </Button>
 
-      <dangerous-button
+        <dangerous-button
-        :disabled="tracks.length === 0"
+          :disabled="tracks.length === 0"
-        icon="bi-eraser-fill"
+          icon="bi-eraser-fill"
-        style="float: right;"
+          style="float: right;"
-        :action="clearPlaylist"
+          :action="clearPlaylist"
-        :title="t('components.playlists.Editor.modal.clearPlaylist.header', { playlist: playlist?.name })"
+          :title="t('components.playlists.Editor.modal.clearPlaylist.header', { playlist: playlist?.name })"
-      >
+        >
-        {{ t('components.playlists.Editor.button.clear') }}
-        <template #modal-content>
-          {{ t('components.playlists.Editor.modal.clearPlaylist.content.warning') }}
-        </template>
-        <template #modal-confirm>
           {{ t('components.playlists.Editor.button.clear') }}
-        </template>
+          <template #modal-content>
-      </dangerous-button>
+            {{ t('components.playlists.Editor.modal.clearPlaylist.content.warning') }}
-      <div class="ui hidden divider" />
+          </template>
+          <template #modal-confirm>
+            {{ t('components.playlists.Editor.button.clear') }}
+          </template>
+        </dangerous-button>
+      </Layout>
       <template v-if="tracks.length > 0">
         <p>
           {{ t('components.playlists.Editor.help.reorder') }}
@@ -276,12 +283,12 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
                       v-if="plt.track.album && plt.track.album.cover && plt.track.album.cover.urls.original"
                       v-lazy="store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)"
                       alt=""
-                      class="ui mini image"
+                      style="width: 40px;"
                     >
                     <img
                       v-else
                       alt=""
-                      class="ui mini image"
+                      style="width: 40px;"
                       src="../../assets/audio/default-cover.png"
                     >
                   </td>
@@ -290,14 +297,16 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
                     {{ generateTrackCreditString(plt.track) }}
                   </td>
                   <td class="right aligned">
-                    <button
+                    <Button
-                      class="ui circular danger basic icon button"
+                      square-small
+                      round
+                      destructive
                       @click.stop="removePlaylistTrack(index)"
                     >
                       <i
-                        class="trash icon"
+                        class="bi bi-trash"
                       />
-                    </button>
+                    </Button>
                   </td>
                 </tr>
               </template>

front/src/components/playlists/PlaylistDropdown.vue

@@ -107,18 +107,6 @@ const showDeleteModal = ref(false)
       <OptionsButton @click="toggleOpen" />
     </template>
     <template #items>
-      <PopoverItem
-        v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
-        @click="edit = !edit"
-        icon="bi-pencil"
-      >
-        <template v-if="edit">
-          {{ t('views.playlists.Detail.button.stopEdit') }}
-        </template>
-        <template v-else>
-          {{ t('views.playlists.Detail.button.edit') }}
-        </template>
-      </PopoverItem>
       <PopoverItem
         v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
         icon="bi-code-slash"

front/src/views/playlists/Detail.vue

@@ -240,25 +240,20 @@ const deletePlaylist = async () => {
         v-else
         align-items="center"
       >
-      <Layout flex :gap="8">
+        <Layout flex :gap="8">
-      <i class="bi bi-music-note-list" />
+        <i class="bi bi-music-note-list" />
-        {{ t('views.playlists.Detail.empty.noTracks') }}
+          {{ t('views.playlists.Detail.empty.noTracks') }}
-      </Layout>
+        </Layout>
-    <Spacer size-16 />
+        <Spacer size-16 />
-    <Button
+        <Button
-      primary
+          primary
-      icon="bi-pencil"
+          icon="bi-pencil"
-      @click="edit = !edit"
+          align-self="center"
-    >
+          @click="edit = !edit"
-      {{ t('views.playlists.Detail.button.edit') }}
+        >
-    </Button>
+          {{ t('views.playlists.Detail.button.edit') }}
+        </Button>
       </Alert>
-      <library-widget
-        :url="'playlists/' + playlist?.id + '/libraries/'"
-        @loaded="emit('libraries-loaded', $event)"
-      >
-        {{ t('components.library.AlbumDetail.description.libraries') }}
-      </library-widget>
     </Layout>
   </Layout>
 </template>