refactor(front): playlist modal

front/src/components/playlists/Form.vue

@@ -160,6 +160,7 @@ const submit = async () => {
       </div>
       <div class="field">
         <label for="playlist-visibility">{{ t('components.playlists.Form.label.visibility') }}</label>
+        <!-- TODO: Replace with Slider.vue -->
         <select
           id="playlist-visibility"
           v-model="privacyLevel"

front/src/components/playlists/PlaylistModal.vue

@@ -12,6 +12,11 @@ import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { generateTrackCreditString } from '~/utils/utils'
 
+import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Input from '~/components/ui/Input.vue'
+
 const logger = useLogger()
 const store = useStore()
 
@@ -84,6 +89,7 @@ store.dispatch('playlists/fetchOwn')
   <Modal
     v-model="store.state.playlists.showModal"
     :title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
+    :cancel="t('components.playlists.PlaylistModal.button.cancel')"
   >
     <h4 class="header">
       <template v-if="track">
@@ -106,10 +112,10 @@ store.dispatch('playlists/fetchOwn')
       />
       <div class="ui divider" />
       <div v-if="playlists.length > 0">
-        <div
+        <Alert
           v-if="showDuplicateTrackAddConfirmation"
           role="alert"
-          class="ui warning message"
+          yellow
         >
           <p>
             <i18n-t keypath="components.playlists.PlaylistModal.warning.duplicate">
@@ -117,23 +123,17 @@ store.dispatch('playlists/fetchOwn')
               <strong>{{ duplicateTrackAddInfo.playlist_name }}</strong>
             </i18n-t>
           </p>
-          <button
+          <Button
-            class="ui small basic cancel button"
+            primary
-            @click="showDuplicateTrackAddConfirmation = false"
-          >
-            {{ t('components.playlists.PlaylistModal.button.cancel') }}
-          </button>
-          <button
-            class="ui small success button"
             @click="addToPlaylist(lastSelectedPlaylist, true)"
           >
             {{ t('components.playlists.PlaylistModal.button.addDuplicate') }}
-          </button>
+          </Button>
-        </div>
+        </Alert>
-        <div
+        <Alert
           v-if="errors.length > 0"
           role="alert"
-          class="ui negative message"
+          red
         >
           <h4 class="header">
             {{ t('components.playlists.PlaylistModal.header.addFailure') }}
@@ -146,7 +146,7 @@ store.dispatch('playlists/fetchOwn')
               {{ error }}
             </li>
           </ul>
-        </div>
+        </Alert>
         <h4 class="ui header">
           {{ t('components.playlists.PlaylistModal.header.available') }}
         </h4>
@@ -154,13 +154,12 @@ store.dispatch('playlists/fetchOwn')
           <div class="fields">
             <div class="field">
               <label for="playlist-name-filter">{{ t('components.playlists.PlaylistModal.label.filter') }}</label>
-              <input
+              <Input
+                search
                 id="playlist-name-filter"
                 v-model="playlistNameFilter"
-                type="text"
-                class="inline"
                 :placeholder="labels.filterPlaylistField"
-              >
+              />
             </div>
           </div>
         </div>
@@ -188,13 +187,15 @@ store.dispatch('playlists/fetchOwn')
               :key="key"
             >
               <td>
-                <router-link
+                <Link
-                  class="ui icon basic small button"
+                  solid
+                  secondary
+                  square-small
                   :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
+                  icon="bi-pencil-fill"
                 >
-                  <i class="ui pencil icon" />
                   <span class="visually-hidden">{{ t('components.playlists.PlaylistModal.button.edit') }}</span>
-                </router-link>
+                </Link>
               </td>
               <td>
                 <router-link
@@ -207,15 +208,16 @@ store.dispatch('playlists/fetchOwn')
               <td><human-date :date="playlist.modification_date" /></td>
               <td>{{ playlist.tracks_count }}</td>
               <td>
-                <button
+                <Button
                   v-if="track"
-                  class="ui success icon basic small right floated button"
+                  low-height
+                  secondary
                   :title="labels.addToPlaylist"
+                  icon="bi-plus"
                   @click.prevent="addToPlaylist(playlist.id, false)"
                 >
-                  <i class="plus icon" />
                   {{ t('components.playlists.PlaylistModal.button.addTrack') }}
-                </button>
+                </Button>
               </td>
             </tr>
           </tbody>
@@ -233,15 +235,10 @@ store.dispatch('playlists/fetchOwn')
         class="ui placeholder segment"
       >
         <div class="ui icon header">
-          <i class="list icon" />
+          <i class="bi bi-list" />
           {{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
         </div>
       </div>
     </div>
-    <div class="actions">
-      <button class="ui basic cancel button">
-        {{ t('components.playlists.PlaylistModal.button.cancel') }}
-      </button>
-    </div>
   </Modal>
 </template>