fix(front): playlist modal

front/src/components/playlists/Form.vue

@@ -7,7 +7,6 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
-import $ from 'jquery'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useLogger from '~/composables/useLogger'
@@ -59,10 +58,6 @@ const privacyLevelChoices = {
 } as const satisfies Record<PrivacyLevel, string>;
 
 const el = useCurrentElement()
-onMounted(async () => {
-  await nextTick()
-  $(el.value).find('.dropdown').dropdown()
-})
 
 const isLoading = ref(false)
 const submit = async () => {
@@ -103,11 +98,11 @@ const submit = async () => {
   <Layout form
     @submit.prevent="submit()"
   >
-    <h4
+    <h3
       v-if="title"
     >
       {{ t('components.playlists.Form.header.createPlaylist') }}
-    </h4>
+    </h3>
     <Alert
       v-if="success"
       green
@@ -138,7 +133,6 @@ const submit = async () => {
         </li>
       </ul>
     </Alert>
-    <div class="three fields">
     <div class="field">
       <label for="playlist-name">{{ t('components.playlists.Form.label.name') }}</label>
       <Input
@@ -168,6 +162,5 @@ const submit = async () => {
         </template>
       </Button>
     </div>
-    </div>
   </Layout>
 </template>

front/src/components/playlists/PlaylistModal.vue

@@ -16,6 +16,7 @@ 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'
+import Spacer from '~/components/ui/Spacer.vue'
 
 const logger = useLogger()
 const store = useStore()
@@ -83,6 +84,9 @@ const addToPlaylist = async (playlistId: number, allowDuplicates: boolean) => {
 }
 
 store.dispatch('playlists/fetchOwn')
+watch(playlistNameFilter, () => console.log(playlistNameFilter.value))
+watch(sortedPlaylists, () => console.log(sortedPlaylists.value))
+watch(playlists, () => console.log(playlists.value))
 </script>
 
 <template>
@@ -91,30 +95,17 @@ store.dispatch('playlists/fetchOwn')
     :title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
     :cancel="t('components.playlists.PlaylistModal.button.cancel')"
   >
-    <h4 class="header">
     <template v-if="track">
-      // TODO: Check subheader
-        <h2 class="ui header">
+      <h3 class="ui header">
         {{ t('components.playlists.PlaylistModal.header.addToPlaylist') }}
         <div class="ui sub header">
           {{ t('components.playlists.PlaylistModal.header.track', {artist: trackCreditString, title: track.title}) }}
         </div>
-        </h2>
+      </h3>
     </template>
-      <span v-else>
-        {{ t('components.playlists.PlaylistModal.header.manage') }}
-      </span>
-    </h4>
-    <div class="scrolling content">
-      <playlist-form
-        :key="formKey"
-        :create="true"
-      />
-      <div class="ui divider" />
     <div v-if="playlists.length > 0">
       <Alert
         v-if="showDuplicateTrackAddConfirmation"
-          role="alert"
         yellow
       >
         <p>
@@ -147,22 +138,16 @@ store.dispatch('playlists/fetchOwn')
           </li>
         </ul>
       </Alert>
+
       <h4 class="ui header">
         {{ t('components.playlists.PlaylistModal.header.available') }}
       </h4>
-        <div class="ui form">
-          <div class="fields">
-            <div class="field">
-              <label for="playlist-name-filter">{{ t('components.playlists.PlaylistModal.label.filter') }}</label>
-              <Input
-                search
+      <!-- <Input
         id="playlist-name-filter"
         v-model="playlistNameFilter"
         :placeholder="labels.filterPlaylistField"
-              />
-            </div>
-          </div>
-        </div>
+        :label="t('components.playlists.PlaylistModal.label.filter')"
+      /> -->
       <table
         v-if="sortedPlaylists.length > 0"
         class="ui unstackable very basic table"
@@ -223,11 +208,12 @@ store.dispatch('playlists/fetchOwn')
         </tbody>
       </table>
       <template v-else>
-          <div class="ui small placeholder segment component-placeholder">
-            <h4 class="ui header">
+      <Spacer />
+        <Alert blue>
+          <span>
             {{ t('components.playlists.PlaylistModal.header.noResults') }}
-            </h4>
-          </div>
+          </span>
+        </Alert>
       </template>
     </div>
     <div
@@ -239,6 +225,12 @@ store.dispatch('playlists/fetchOwn')
         {{ t('components.playlists.PlaylistModal.empty.noPlaylists') }}
       </div>
     </div>
-    </div>
+
+    <Spacer />
+
+    <playlist-form
+      :key="formKey"
+      :create="true"
+    />
   </Modal>
 </template>