refactor(front): playlist detail and edit

front/src/components/playlists/Editor.vue

@@ -216,16 +216,23 @@ 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'"
+        green
+        align-content="center"
+      >
+        <span>
+          <i class="bi bi-check" />
           {{ t('components.playlists.Editor.message.sync') }}
-      </template>
+        </span>
+      </Alert>
+      <Layout flex>
         <Button
           :disabled="queueTracks.length === 0"
           primary
@@ -252,7 +259,7 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
             {{ t('components.playlists.Editor.button.clear') }}
           </template>
         </dangerous-button>
-      <div class="ui hidden divider" />
+      </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

@@ -248,17 +248,12 @@ const deletePlaylist = async () => {
         <Button
           primary
           icon="bi-pencil"
+          align-self="center"
           @click="edit = !edit"
         >
           {{ 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>