From 2ea9f582a5b79fe57aff4d4605800313ac00f476 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Sun, 13 Nov 2022 16:18:24 +0100
Subject: [PATCH] feat: use Floating UI for "Add To" menu (#1584)

---
 .../assets/js/components/auth/LoginForm.vue   |  2 +-
 .../js/components/meta/AboutKoelModal.vue     |  2 +-
 .../playlist/CreateNewPlaylistContextMenu.vue |  2 -
 .../playlist/CreatePlaylistFolderForm.vue     |  3 +-
 .../playlist/CreatePlaylistForm.vue           |  3 +-
 .../playlist/EditPlaylistFolderForm.vue       |  3 +-
 .../components/playlist/EditPlaylistForm.vue  |  3 +-
 .../CreateSmartPlaylistForm.vue               |  2 +-
 .../smart-playlist/EditSmartPlaylistForm.vue  |  2 +-
 .../smart-playlist/SmartPlaylistRule.vue      |  7 +-
 .../smart-playlist/SmartPlaylistRuleGroup.vue |  2 +-
 .../smart-playlist/SmartPlaylistRuleInput.vue |  2 +-
 .../__snapshots__/AllSongsScreen.spec.ts.snap | 26 ++++---
 .../assets/js/components/song/AddToMenu.vue   | 37 ++--------
 .../js/components/song/EditSongForm.vue       |  2 +-
 .../assets/js/components/song/SongList.vue    |  9 ++-
 .../components/song/SongListControls.spec.ts  | 10 ---
 .../js/components/song/SongListControls.vue   | 74 +++++++++++--------
 .../js/components/song/SongListSorter.vue     |  3 +-
 .../song/__snapshots__/AddToMenu.spec.ts.snap |  2 +-
 .../js/components/ui/ArtistAlbumCard.vue      |  6 +-
 resources/assets/js/components/ui/Btn.vue     | 12 ++-
 .../assets/js/components/ui/BtnCloseModal.vue |  2 +-
 .../assets/js/components/ui/CheckBox.vue      |  2 +-
 .../assets/js/components/ui/Equalizer.vue     |  2 +-
 .../js/components/ui/ExtraPanelTabHeader.vue  |  2 +-
 .../assets/js/components/ui/Magnifier.vue     |  2 +-
 .../assets/js/components/ui/MessageToast.vue  |  2 +-
 .../js/components/ui/ScreenControlsToggle.vue |  2 +-
 .../js/components/ui/ViewModeSwitch.vue       |  3 +-
 .../js/components/ui/VirtualScroller.vue      |  5 +-
 .../assets/js/components/user/AddUserForm.vue |  3 +-
 .../js/components/user/EditUserForm.vue       |  3 +-
 resources/assets/sass/partials/_mixins.scss   | 20 ++---
 34 files changed, 129 insertions(+), 133 deletions(-)

diff --git a/resources/assets/js/components/auth/LoginForm.vue b/resources/assets/js/components/auth/LoginForm.vue
index 93f99134..9e523fd2 100644
--- a/resources/assets/js/components/auth/LoginForm.vue
+++ b/resources/assets/js/components/auth/LoginForm.vue
@@ -26,7 +26,7 @@ const email = ref(isDemo() ? DEMO_ACCOUNT.email : '')
 const password = ref(isDemo() ? DEMO_ACCOUNT.password : '')
 const failed = ref(false)
 
-const emit = defineEmits(['loggedin'])
+const emit = defineEmits<{ (e: 'loggedin'): void }>()
 
 const login = async () => {
   try {
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index 2dccb9ac..6b06f932 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -70,7 +70,7 @@ const {
   latestVersionReleaseUrl
 } = useNewVersionNotification()
 
-const emit = defineEmits(['close'])
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 onMounted(async () => {
diff --git a/resources/assets/js/components/playlist/CreateNewPlaylistContextMenu.vue b/resources/assets/js/components/playlist/CreateNewPlaylistContextMenu.vue
index dd0104c9..897ec97f 100644
--- a/resources/assets/js/components/playlist/CreateNewPlaylistContextMenu.vue
+++ b/resources/assets/js/components/playlist/CreateNewPlaylistContextMenu.vue
@@ -16,8 +16,6 @@ import { onMounted } from 'vue'
 
 const { base, ContextMenuBase, open, trigger } = useContextMenu()
 
-const emit = defineEmits(['itemClicked'])
-
 const actionToEventMap: Record<string, EventName> = {
   'new-playlist': 'MODAL_SHOW_CREATE_PLAYLIST_FORM',
   'new-smart-playlist': 'MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM',
diff --git a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
index 84ae05b6..1267a8ff 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
@@ -42,8 +42,7 @@ const dialog = requireInjection(DialogBoxKey)
 const loading = ref(false)
 const name = ref('')
 
-const emit = defineEmits(['close'])
-
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const submit = async () => {
diff --git a/resources/assets/js/components/playlist/CreatePlaylistForm.vue b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
index d24b4260..6fcde682 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
@@ -43,8 +43,7 @@ const dialog = requireInjection(DialogBoxKey)
 const loading = ref(false)
 const name = ref('')
 
-const emit = defineEmits(['close'])
-
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const submit = async () => {
diff --git a/resources/assets/js/components/playlist/EditPlaylistFolderForm.vue b/resources/assets/js/components/playlist/EditPlaylistFolderForm.vue
index 0ee122d2..5d09880c 100644
--- a/resources/assets/js/components/playlist/EditPlaylistFolderForm.vue
+++ b/resources/assets/js/components/playlist/EditPlaylistFolderForm.vue
@@ -60,8 +60,7 @@ const submit = async () => {
   }
 }
 
-const emit = defineEmits(['close'])
-
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const maybeClose = async () => {
diff --git a/resources/assets/js/components/playlist/EditPlaylistForm.vue b/resources/assets/js/components/playlist/EditPlaylistForm.vue
index 9b8c08e7..e32b9952 100644
--- a/resources/assets/js/components/playlist/EditPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/EditPlaylistForm.vue
@@ -60,8 +60,7 @@ const submit = async () => {
   }
 }
 
-const emit = defineEmits(['close'])
-
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const maybeClose = async () => {
diff --git a/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue b/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
index 544fbb7a..30512d5e 100644
--- a/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
@@ -60,7 +60,7 @@ const dialog = requireInjection(DialogBoxKey)
 const router = requireInjection(RouterKey)
 const name = ref('')
 
-const emit = defineEmits(['close'])
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const maybeClose = async () => {
diff --git a/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue b/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
index 95f296a7..54bb0185 100644
--- a/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
@@ -73,7 +73,7 @@ const {
   onGroupChanged
 } = useSmartPlaylistForm(mutablePlaylist.rules)
 
-const emit = defineEmits(['close'])
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const maybeClose = async () => {
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
index 106165f0..077c19bc 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
@@ -96,7 +96,10 @@ watch(availableOperators, () => {
 
 const valueSuffix = computed(() => selectedOperator.value?.unit || selectedModel.value?.unit)
 
-const emit = defineEmits(['input', 'remove'])
+const emit = defineEmits<{
+  (e: 'input', rule: SmartPlaylistRule): void,
+  (e: 'remove'): void
+}>()
 
 const onInput = () => {
   emit('input', {
@@ -104,7 +107,7 @@ const onInput = () => {
     model: selectedModel.value,
     operator: selectedOperator.value?.operator,
     value: availableInputs.value.map(input => input.value)
-  } as SmartPlaylistRule)
+  })
 }
 
 const removeRule = () => emit('remove')
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
index 1b757d4e..9aa07a15 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
@@ -37,7 +37,7 @@ const Rule = defineAsyncComponent(() => import('@/components/playlist/smart-play
 
 const mutatedGroup = reactive<SmartPlaylistRuleGroup>(JSON.parse(JSON.stringify(group.value)))
 
-const emit = defineEmits(['input'])
+const emit = defineEmits<{ (e: 'input', group: SmartPlaylistRuleGroup): void }>()
 
 const notifyParentForUpdate = () => emit('input', mutatedGroup)
 
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
index e96cf641..63d49c7b 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
@@ -9,7 +9,7 @@ import inputTypes from '@/config/smart-playlist/inputTypes'
 const props = withDefaults(defineProps<{ type?: keyof typeof inputTypes, value?: any }>(), { value: undefined })
 const { type } = toRefs(props)
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{ (e: 'update:modelValue', value: any): void }>()
 
 const value = computed({
   get: () => props.value,
diff --git a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
index 7d5ebdf2..c332aafd 100644
--- a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
@@ -14,18 +14,20 @@ exports[`renders 1`] = `
       </div>
       <div class="song-list-controls" data-testid="song-list-controls" data-v-d396e0d2="" data-v-5691beb5-s="">
         <div class="wrapper" data-v-d396e0d2=""><span class="btn-group" uppercased="" data-v-e884c19a="" data-v-d396e0d2=""><button type="button" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all songs" data-v-e368fe26="" data-v-d396e0d2=""><br data-testid="icon" icon="[object Object]" fixed-width="" data-v-d396e0d2=""> All </button><!--v-if--><!--v-if--><!--v-if--></span><span class="btn-group" data-v-e884c19a="" data-v-d396e0d2=""></span></div>
-        <div class="add-to" data-testid="add-to-menu" tabindex="0" data-v-42061e3e="" data-v-d396e0d2="" style="display: none;">
-          <section class="existing-playlists" data-v-42061e3e="">
-            <p data-v-42061e3e="">Add 0 songs to</p>
-            <ul data-v-42061e3e="">
-              <li data-testid="queue" tabindex="0" data-v-42061e3e="">Queue</li>
-              <li class="favorites" data-testid="add-to-favorites" tabindex="0" data-v-42061e3e=""> Favorites </li>
-            </ul>
-          </section>
-          <section class="new-playlist" data-testid="new-playlist" data-v-42061e3e="">
-            <p data-v-42061e3e="">or create a new playlist</p>
-            <form class="form-save form-simple form-new-playlist" data-v-42061e3e=""><input data-testid="new-playlist-name" placeholder="Playlist name" required="" type="text" data-v-42061e3e=""><button type="submit" title="Save" data-v-e368fe26="" data-v-42061e3e="">⏎</button></form>
-          </section>
+        <div class="menu-wrapper" data-v-d396e0d2="">
+          <div class="add-to" data-testid="add-to-menu" tabindex="0" data-v-42061e3e="" data-v-d396e0d2="">
+            <section class="existing-playlists" data-v-42061e3e="">
+              <p data-v-42061e3e="">Add 0 songs to</p>
+              <ul data-v-42061e3e="">
+                <li data-testid="queue" tabindex="0" data-v-42061e3e="">Queue</li>
+                <li class="favorites" data-testid="add-to-favorites" tabindex="0" data-v-42061e3e=""> Favorites </li>
+              </ul>
+            </section>
+            <section class="new-playlist" data-testid="new-playlist" data-v-42061e3e="">
+              <p data-v-42061e3e="">or create a new playlist</p>
+              <form class="form-save form-simple form-new-playlist" data-v-42061e3e=""><input data-testid="new-playlist-name" placeholder="Playlist name" required="" type="text" data-v-42061e3e=""><button type="submit" title="Save" data-v-e368fe26="" data-v-42061e3e="">⏎</button></form>
+            </section>
+          </div>
         </div>
       </div>
     </main>
diff --git a/resources/assets/js/components/song/AddToMenu.vue b/resources/assets/js/components/song/AddToMenu.vue
index ae0c8425..0ec3781d 100644
--- a/resources/assets/js/components/song/AddToMenu.vue
+++ b/resources/assets/js/components/song/AddToMenu.vue
@@ -1,13 +1,5 @@
 <template>
-  <div
-    v-show="showing"
-    v-koel-clickaway="close"
-    v-koel-focus
-    class="add-to"
-    data-testid="add-to-menu"
-    tabindex="0"
-    @keydown.esc="close"
-  >
+  <div class="add-to" data-testid="add-to-menu" tabindex="0">
     <section class="existing-playlists">
       <p>Add {{ pluralize(songs, 'song') }} to</p>
 
@@ -86,8 +78,8 @@ import Btn from '@/components/ui/Btn.vue'
 const toaster = requireInjection(MessageToasterKey)
 const router = requireInjection(RouterKey)
 
-const props = defineProps<{ songs: Song[], showing: Boolean, config: AddToMenuConfig }>()
-const { songs, showing, config } = toRefs(props)
+const props = defineProps<{ songs: Song[], config: AddToMenuConfig }>()
+const { songs, config } = toRefs(props)
 
 const newPlaylistName = ref('')
 const queue = toRef(queueStore.state, 'songs')
@@ -96,7 +88,7 @@ const currentSong = queueStore.current
 const allPlaylists = toRef(playlistStore.state, 'playlists')
 const playlists = computed(() => allPlaylists.value.filter(playlist => !playlist.is_smart))
 
-const emit = defineEmits(['closing'])
+const emit = defineEmits<{ (e: 'closing'): void }>()
 const close = () => emit('closing')
 
 const {
@@ -135,8 +127,6 @@ const createNewPlaylistFromSongs = async () => {
 
 <style lang="scss" scoped>
 .add-to {
-  @include context-menu();
-
   width: 100%;
   max-width: 225px;
   padding: .75rem;
@@ -181,34 +171,23 @@ const createNewPlaylistFromSongs = async () => {
     }
   }
 
-  &::before {
-    display: block;
-    content: " ";
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid var(--color-bg-primary);
-    position: absolute;
-    top: -7px;
-    left: calc(50% - 10px);
-  }
-
   form {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    border-radius: 3px;
+    overflow: hidden;
 
     input[type="text"] {
       width: 100%;
-      border-radius: 5px 0 0 5px;
       height: 28px;
+      border-radius: 0;
     }
 
     button[type="submit"] {
       margin-top: 0;
-      border-radius: 0 5px 5px 0 !important;
+      border-radius: 0;
       height: 28px;
       line-height: 28px;
       padding-top: 0;
diff --git a/resources/assets/js/components/song/EditSongForm.vue b/resources/assets/js/components/song/EditSongForm.vue
index f9046544..2338c78e 100644
--- a/resources/assets/js/components/song/EditSongForm.vue
+++ b/resources/assets/js/components/song/EditSongForm.vue
@@ -299,7 +299,7 @@ const open = async () => {
   Object.assign(initialFormData, formData)
 }
 
-const emit = defineEmits(['close'])
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const maybeClose = async () => {
diff --git a/resources/assets/js/components/song/SongList.vue b/resources/assets/js/components/song/SongList.vue
index eeb7b118..18a855db 100644
--- a/resources/assets/js/components/song/SongList.vue
+++ b/resources/assets/js/components/song/SongList.vue
@@ -104,7 +104,14 @@ import SongListSorter from '@/components/song/SongListSorter.vue'
 const { startDragging } = useDraggable('songs')
 const { getDroppedData, acceptsDrop } = useDroppable(['songs'])
 
-const emit = defineEmits(['press:enter', 'press:delete', 'reorder', 'sort', 'scroll-breakpoint', 'scrolled-to-end'])
+const emit = defineEmits<{
+  (e: 'press:enter', event: KeyboardEvent): void,
+  (e: 'press:delete'): void,
+  (e: 'reorder', song: Song): void,
+  (e: 'sort', field: SongListSortField, order: SortOrder): void,
+  (e: 'scroll-breakpoint', direction: 'up' | 'down'): void,
+  (e: 'scrolled-to-end'): void,
+}>()
 
 const [items] = requireInjection<[Ref<Song[]>]>(SongsKey)
 const [selectedSongs, setSelectedSongs] = requireInjection<[Ref<Song[]>, Closure]>(SelectedSongsKey)
diff --git a/resources/assets/js/components/song/SongListControls.spec.ts b/resources/assets/js/components/song/SongListControls.spec.ts
index b5e9cf64..aafa0271 100644
--- a/resources/assets/js/components/song/SongListControls.spec.ts
+++ b/resources/assets/js/components/song/SongListControls.spec.ts
@@ -59,16 +59,6 @@ new class extends UnitTestCase {
       expect(emitted().playSelected[0]).toEqual([false])
     })
 
-    it('toggles Add To menu', async () => {
-      const { getByTitle, getByTestId } = this.renderComponent()
-
-      await fireEvent.click(getByTitle('Add selected songs to…'))
-      expect(getByTestId('add-to-menu').style.display).toBe('')
-
-      await fireEvent.click(getByTitle('Cancel'))
-      expect(getByTestId('add-to-menu').style.display).toBe('none')
-    })
-
     it('clears queue', async () => {
       const { emitted, getByTitle } = this.renderComponent(0, { clearQueue: true })
 
diff --git a/resources/assets/js/components/song/SongListControls.vue b/resources/assets/js/components/song/SongListControls.vue
index 2cb32321..634dbba3 100644
--- a/resources/assets/js/components/song/SongListControls.vue
+++ b/resources/assets/js/components/song/SongListControls.vue
@@ -54,14 +54,7 @@
           </template>
         </template>
 
-        <Btn
-          v-if="selectedSongs.length"
-          :title="`${showingAddToMenu ? 'Cancel' : 'Add selected songs to…'}`"
-          class="btn-add-to"
-          data-testid="add-to-btn"
-          green
-          @click.prevent.stop="toggleAddToMenu"
-        >
+        <Btn v-if="showAddToButton" ref="addToButton" green @click.prevent.stop="toggleAddToMenu">
           {{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
         </Btn>
 
@@ -86,21 +79,18 @@
       </BtnGroup>
     </div>
 
-    <AddToMenu
-      v-koel-clickaway="closeAddToMenu"
-      :config="mergedConfig.addTo"
-      :showing="showingAddToMenu"
-      :songs="selectedSongs"
-      @closing="closeAddToMenu"
-    />
+    <div ref="addToMenu" v-koel-clickaway="closeAddToMenu" class="menu-wrapper">
+      <AddToMenu :config="mergedConfig.addTo" :songs="selectedSongs" @closing="closeAddToMenu"/>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { faPlay, faRandom, faRotateRight, faTrashCan } from '@fortawesome/free-solid-svg-icons'
-import { computed, nextTick, onMounted, onUnmounted, ref, toRefs } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, Ref, ref, toRefs, watch } from 'vue'
 import { SelectedSongsKey, SongsKey } from '@/symbols'
 import { requireInjection } from '@/utils'
+import { useFloatingUi } from '@/composables'
 
 import AddToMenu from '@/components/song/AddToMenu.vue'
 import Btn from '@/components/ui/Btn.vue'
@@ -109,10 +99,12 @@ import BtnGroup from '@/components/ui/BtnGroup.vue'
 const props = withDefaults(defineProps<{ config?: Partial<SongListControlsConfig> }>(), { config: () => ({}) })
 const { config } = toRefs(props)
 
-const [songs] = requireInjection(SongsKey)
+const [songs] = requireInjection<[Ref<Song[]>]>(SongsKey)
 const [selectedSongs] = requireInjection(SelectedSongsKey)
 
 const el = ref<HTMLElement>()
+const addToButton = ref<InstanceType<Btn>>()
+const addToMenu = ref<HTMLDivElement>()
 const showingAddToMenu = ref(false)
 const altPressed = ref(false)
 
@@ -130,10 +122,14 @@ const mergedConfig = computed((): SongListControlsConfig => Object.assign({
   }, config.value)
 )
 
+const showAddToButton = computed(() => Boolean(selectedSongs.value.length))
 const showClearQueueButton = computed(() => mergedConfig.value.clearQueue)
 const showDeletePlaylistButton = computed(() => mergedConfig.value.deletePlaylist)
 
-const emit = defineEmits(['playAll', 'playSelected', 'clearQueue', 'deletePlaylist', 'refresh'])
+const emit = defineEmits<{
+  (e: 'playAll' | 'playSelected', shuffle: boolean): void,
+  (e: 'clearQueue' | 'deletePlaylist' | 'refresh'): void,
+}>()
 
 const shuffle = () => emit('playAll', true)
 const shuffleSelected = () => emit('playSelected', true)
@@ -142,25 +138,30 @@ const playSelected = () => emit('playSelected', false)
 const clearQueue = () => emit('clearQueue')
 const deletePlaylist = () => emit('deletePlaylist')
 const refresh = () => emit('refresh')
-const closeAddToMenu = () => (showingAddToMenu.value = false)
 const registerKeydown = (event: KeyboardEvent) => event.key === 'Alt' && (altPressed.value = true)
 const registerKeyup = (event: KeyboardEvent) => event.key === 'Alt' && (altPressed.value = false)
 
-const toggleAddToMenu = async () => {
-  showingAddToMenu.value = !showingAddToMenu.value
-
-  if (!showingAddToMenu.value) {
-    return
-  }
+let usedFloatingUi: ReturnType<typeof useFloatingUi>
 
+watch(showAddToButton, async showingButton => {
   await nextTick()
 
-  const btnAddTo = el.value?.querySelector<HTMLButtonElement>('.btn-add-to')!
-  const { left: btnLeft, bottom: btnBottom, width: btnWidth } = btnAddTo.getBoundingClientRect()
-  const contextMenu = el.value?.querySelector<HTMLElement>('.add-to')!
-  const menuWidth = contextMenu.getBoundingClientRect().width
-  contextMenu.style.top = `${btnBottom + 10}px`
-  contextMenu.style.left = `${btnLeft + btnWidth / 2 - menuWidth / 2}px`
+  if (showingButton) {
+    usedFloatingUi = useFloatingUi(addToButton.value.button, addToMenu, { autoTrigger: false })
+    usedFloatingUi.setup()
+  } else {
+    usedFloatingUi?.teardown()
+  }
+}, { immediate: true })
+
+const closeAddToMenu = () => {
+  usedFloatingUi?.hide()
+  showingAddToMenu.value = false
+}
+
+const toggleAddToMenu = () => {
+  showingAddToMenu.value ? usedFloatingUi?.hide() : usedFloatingUi?.show()
+  showingAddToMenu.value = !showingAddToMenu.value
 }
 
 onMounted(() => {
@@ -168,9 +169,11 @@ onMounted(() => {
   window.addEventListener('keyup', registerKeyup)
 })
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   window.removeEventListener('keydown', registerKeydown)
   window.removeEventListener('keyup', registerKeyup)
+
+  usedFloatingUi?.teardown()
 })
 </script>
 
@@ -182,5 +185,12 @@ onUnmounted(() => {
     display: flex;
     gap: .5rem;
   }
+
+  .menu-wrapper {
+    @include context-menu();
+
+    padding: 0;
+    display: none;
+  }
 }
 </style>
diff --git a/resources/assets/js/components/song/SongListSorter.vue b/resources/assets/js/components/song/SongListSorter.vue
index cb863033..9c1f6b5d 100644
--- a/resources/assets/js/components/song/SongListSorter.vue
+++ b/resources/assets/js/components/song/SongListSorter.vue
@@ -23,7 +23,7 @@ import { useFloatingUi } from '@/composables'
 const props = defineProps<{ field?: SongListSortField, order?: SortOrder }>()
 const { field, order } = toRefs(props)
 
-const emit = defineEmits<{ (e: 'sort', payload: SongListSortField): void }>()
+const emit = defineEmits<{ (e: 'sort', field: SongListSortField): void }>()
 
 const button = ref<HTMLButtonElement>()
 const menu = ref<HTMLDivElement>()
@@ -76,7 +76,6 @@ button {
 }
 
 menu {
-  width: max-content;
   text-transform: none;
   letter-spacing: 0;
 
diff --git a/resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap b/resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap
index 508720ee..9a4fd0ca 100644
--- a/resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap
+++ b/resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<div class="add-to" data-testid="add-to-menu" tabindex="0" data-v-42061e3e="">
+<div class="add-to" data-testid="add-to-menu" tabindex="0" showing="true" data-v-42061e3e="">
   <section class="existing-playlists" data-v-42061e3e="">
     <p data-v-42061e3e="">Add 5 songs to</p>
     <ul data-v-42061e3e="">
diff --git a/resources/assets/js/components/ui/ArtistAlbumCard.vue b/resources/assets/js/components/ui/ArtistAlbumCard.vue
index 35876cfa..3ccab82a 100644
--- a/resources/assets/js/components/ui/ArtistAlbumCard.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumCard.vue
@@ -28,7 +28,11 @@ const props = withDefaults(
   { layout: 'full' }
 )
 
-const emit = defineEmits(['dblclick', 'contextmenu', 'dragstart'])
+const emit = defineEmits<{
+  (e: 'dblclick'): void,
+  (e: 'dragstart', event: DragEvent): void,
+  (e: 'contextmenu', event: MouseEvent): void
+}>()
 
 const onDblClick = () => emit('dblclick')
 const onDragStart = (e: DragEvent) => emit('dragstart', e)
diff --git a/resources/assets/js/components/ui/Btn.vue b/resources/assets/js/components/ui/Btn.vue
index 31487755..6f6af9d0 100644
--- a/resources/assets/js/components/ui/Btn.vue
+++ b/resources/assets/js/components/ui/Btn.vue
@@ -1,9 +1,19 @@
 <template>
-  <button type="button">
+  <button type="button" ref="button">
     <slot>Click me</slot>
   </button>
 </template>
 
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const button = ref<HTMLButtonElement>()
+
+defineExpose({
+  button
+})
+</script>
+
 <style lang="scss" scoped>
 button {
   background: var(--color-blue);
diff --git a/resources/assets/js/components/ui/BtnCloseModal.vue b/resources/assets/js/components/ui/BtnCloseModal.vue
index 71132127..c3502ab6 100644
--- a/resources/assets/js/components/ui/BtnCloseModal.vue
+++ b/resources/assets/js/components/ui/BtnCloseModal.vue
@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
-defineEmits(['click'])
+defineEmits<{ (e: 'click'): void }>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/resources/assets/js/components/ui/CheckBox.vue b/resources/assets/js/components/ui/CheckBox.vue
index ee3c37ad..4a584c2e 100644
--- a/resources/assets/js/components/ui/CheckBox.vue
+++ b/resources/assets/js/components/ui/CheckBox.vue
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<{ modelValue?: any }>(), {
 
 const checked = ref(props.modelValue)
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
 
 const onInput = (event: InputEvent) => {
   checked.value = (event.target as HTMLInputElement).checked
diff --git a/resources/assets/js/components/ui/Equalizer.vue b/resources/assets/js/components/ui/Equalizer.vue
index 51ed03ec..e31e40e1 100644
--- a/resources/assets/js/components/ui/Equalizer.vue
+++ b/resources/assets/js/components/ui/Equalizer.vue
@@ -46,7 +46,7 @@ import { equalizerPresets as presets } from '@/config'
 
 import Btn from '@/components/ui/Btn.vue'
 
-const emit = defineEmits(['close'])
+const emit = defineEmits<{ (e: 'close'): void }>()
 
 const bands = audioService.bands
 const root = ref<HTMLElement>()
diff --git a/resources/assets/js/components/ui/ExtraPanelTabHeader.vue b/resources/assets/js/components/ui/ExtraPanelTabHeader.vue
index 1f8d29d3..00291d6f 100644
--- a/resources/assets/js/components/ui/ExtraPanelTabHeader.vue
+++ b/resources/assets/js/components/ui/ExtraPanelTabHeader.vue
@@ -50,7 +50,7 @@ import { useThirdPartyServices } from '@/composables'
 
 const props = defineProps<{ modelValue?: ExtraPanelTab }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{ (e: 'update:modelValue', value: ExtraPanelTab): void }>()
 
 const { useYouTube } = useThirdPartyServices()
 
diff --git a/resources/assets/js/components/ui/Magnifier.vue b/resources/assets/js/components/ui/Magnifier.vue
index 031e04e3..d9c00138 100644
--- a/resources/assets/js/components/ui/Magnifier.vue
+++ b/resources/assets/js/components/ui/Magnifier.vue
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 import { faSearchMinus, faSearchPlus } from '@fortawesome/free-solid-svg-icons'
 
-const emit = defineEmits(['in', 'out'])
+const emit = defineEmits<{ (e: 'in' | 'out'): void }>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/resources/assets/js/components/ui/MessageToast.vue b/resources/assets/js/components/ui/MessageToast.vue
index 618abec0..49735f44 100644
--- a/resources/assets/js/components/ui/MessageToast.vue
+++ b/resources/assets/js/components/ui/MessageToast.vue
@@ -41,7 +41,7 @@ const typeIcon = computed(() => {
 
 let timeoutHandler: number
 
-const emit = defineEmits(['dismiss'])
+const emit = defineEmits<{ (e: 'dismiss', message: ToastMessage): void }>()
 
 const dismiss = () => {
   emit('dismiss', message.value)
diff --git a/resources/assets/js/components/ui/ScreenControlsToggle.vue b/resources/assets/js/components/ui/ScreenControlsToggle.vue
index 4e979f80..0816067c 100644
--- a/resources/assets/js/components/ui/ScreenControlsToggle.vue
+++ b/resources/assets/js/components/ui/ScreenControlsToggle.vue
@@ -13,7 +13,7 @@ import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{ modelValue?: boolean }>(), { modelValue: false })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
 
 const value = computed({
   get: () => props.modelValue,
diff --git a/resources/assets/js/components/ui/ViewModeSwitch.vue b/resources/assets/js/components/ui/ViewModeSwitch.vue
index 9c2f98d0..8e4b229f 100644
--- a/resources/assets/js/components/ui/ViewModeSwitch.vue
+++ b/resources/assets/js/components/ui/ViewModeSwitch.vue
@@ -32,7 +32,8 @@ import { faList } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{ modelValue?: ArtistAlbumViewMode }>(), { modelValue: 'thumbnails' })
-const emit = defineEmits(['update:modelValue'])
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: ArtistAlbumViewMode): void }>()
 
 const value = computed({
   get: () => props.modelValue,
diff --git a/resources/assets/js/components/ui/VirtualScroller.vue b/resources/assets/js/components/ui/VirtualScroller.vue
index be312a0d..e676a3f6 100644
--- a/resources/assets/js/components/ui/VirtualScroller.vue
+++ b/resources/assets/js/components/ui/VirtualScroller.vue
@@ -21,7 +21,10 @@ const scrollerHeight = ref(0)
 const renderAhead = 5
 const scrollTop = ref(0)
 
-const emit = defineEmits(['scrolled-to-end', 'scroll'])
+const emit = defineEmits<{
+  (e: 'scrolled-to-end'): void,
+  (e: 'scroll', event: MouseEvent): void
+}>()
 
 const totalHeight = computed(() => items.value.length * itemHeight.value)
 const startPosition = computed(() => Math.max(0, Math.floor(scrollTop.value / itemHeight.value) - renderAhead))
diff --git a/resources/assets/js/components/user/AddUserForm.vue b/resources/assets/js/components/user/AddUserForm.vue
index 65617ea9..16687b07 100644
--- a/resources/assets/js/components/user/AddUserForm.vue
+++ b/resources/assets/js/components/user/AddUserForm.vue
@@ -91,8 +91,7 @@ const submit = async () => {
   }
 }
 
-const emit = defineEmits(['close'])
-
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const maybeClose = async () => {
diff --git a/resources/assets/js/components/user/EditUserForm.vue b/resources/assets/js/components/user/EditUserForm.vue
index 506e7188..61bd47dc 100644
--- a/resources/assets/js/components/user/EditUserForm.vue
+++ b/resources/assets/js/components/user/EditUserForm.vue
@@ -96,8 +96,7 @@ const submit = async () => {
   }
 }
 
-const emit = defineEmits(['close'])
-
+const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 const maybeClose = async () => {
diff --git a/resources/assets/sass/partials/_mixins.scss b/resources/assets/sass/partials/_mixins.scss
index 4fc93eda..b98d604c 100644
--- a/resources/assets/sass/partials/_mixins.scss
+++ b/resources/assets/sass/partials/_mixins.scss
@@ -159,24 +159,20 @@
 
 @mixin context-menu() {
   padding: .4rem 0;
+  width: max-content;
   min-width: 144px;
   background-color: var(--color-bg-context-menu);
   position: fixed;
   border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
   z-index: 1001;
-  align-items: stretch;
-  text-align: left;
-  box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.3), 0 2px 15px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .5));
 
-  input[type="search"], input[type="text"], input[type="email"], input[type="url"] {
-    background: var(--color-text-primary);
-
-    &:focus {
-      background: var(--color-text-primary);
-    }
+  :deep(.arrow) {
+    background-color: var(--color-bg-context-menu);
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
   }
 }