feat: add alt menus to append songs to queue

src/data/storeHelper.ts

@@ -16,6 +16,16 @@ import { get } from "svelte/store";
 import { remove } from "lodash-es";
 import type SmartQuery from "src/lib/smart-query/Query";
 
+export function appendToQueue(songs: Song[]) {
+    const newQueue = [...get(queue), ...songs];
+    const newDuration = songs.reduce((total, song) => {
+        return total + song.fileInfo.duration;
+    }, get(queueDuration));
+
+    queue.set(newQueue);
+    queueDuration.set(newDuration);
+}
+
 export function findQueueIndex({ id }: Song): number {
     return get(queue).findIndex((song) => song.id === id);
 }

src/lib/albums/AltAlbumMenu.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import Menu from "../ui/menu/Menu.svelte";
+    import MenuDivider from "../ui/menu/MenuDivider.svelte";
+    import MenuOption from "../ui/menu/MenuOption.svelte";
+    import type { Album, Song } from "../../App";
+    import { appendToQueue } from "../../data/storeHelper";
+
+    export let onClose: () => void;
+
+    let album: Album;
+    let position = { x: 0, y: 0 };
+    let showMenu = false;
+    let song: Song;
+    let songs: Song[];
+
+    export function open(
+        _album: Album,
+        _songs: Song[],
+        _position: { x: number; y: number },
+    ) {
+        album = _album;
+        song = _songs[0];
+        songs = _songs;
+        position = _position;
+
+        showMenu = true;
+    }
+
+    function close() {
+        showMenu = false;
+
+        onClose && onClose();
+    }
+
+    function append() {
+        appendToQueue(songs);
+
+        close();
+    }
+</script>
+
+{#if showMenu}
+    <Menu {...position} onClickOutside={close}>
+        <MenuOption
+            isDisabled={true}
+            text="{album.displayTitle ?? album.title} by {album.artist}"
+        />
+        <MenuDivider />
+        <MenuOption onClick={append} text="Append to queue" />
+    </Menu>
+{/if}

src/lib/library/AltTrackMenu.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { Song } from "../../App";
+    import Menu from "../ui/menu/Menu.svelte";
+    import MenuDivider from "../ui/menu/MenuDivider.svelte";
+    import MenuOption from "../ui/menu/MenuOption.svelte";
+    import { appendToQueue } from "../../data/storeHelper";
+
+    let position = { x: 0, y: 0 };
+    let showMenu = false;
+    let song: Song;
+    let songs: Song[];
+
+    export function close() {
+        showMenu = false;
+    }
+
+    export function isOpen() {
+        return showMenu;
+    }
+
+    export function open(
+        _songs: Song | Song[],
+        _position: { x: number; y: number },
+    ) {
+        position = _position;
+
+        if (Array.isArray(_songs)) {
+            song = null;
+            songs = _songs;
+        } else {
+            song = _songs;
+            songs = [];
+        }
+
+        showMenu = true;
+    }
+
+    function append() {
+        appendToQueue(songs.length ? songs : [song]);
+
+        close();
+    }
+</script>
+
+{#if showMenu}
+    <Menu {...position} onClickOutside={close} fixed>
+        <MenuOption
+            isDisabled={true}
+            text={song ? song.title : songs.length + " tracks"}
+        />
+        <MenuDivider />
+        <MenuOption onClick={append} text="Append to queue" />
+    </Menu>
+{/if}

src/lib/library/CanvasLibrary.svelte

@@ -88,6 +88,7 @@
     } from "../../data/storeHelper";
     import QueryResultsPlaceholder from "./QueryResultsPlaceholder.svelte";
     import ScrollTo from "../ui/ScrollTo.svelte";
+    import AltTrackMenu from "./AltTrackMenu.svelte";
 
     export let allSongs: Observable<Song[]> = null;
     export let columnOrder;
@@ -947,6 +948,7 @@
     let rangeEndSongIdx = null;
     let highlightedSongIdx = 0;
     let trackMenu: TrackMenu;
+    let altTrackMenu: AltTrackMenu;
     let currentSongInView = false;
     let currentSongScrollIdx = null;
 
@@ -990,19 +992,29 @@
             $rightClickedTrack = song;
         }
 
+        let position = null;
+
         // reposition menu if in a virtual-list
         const list = e.target.closest(".virtual-list-inner");
         if (list) {
             const rect = list.getBoundingClientRect();
 
-            trackMenu.open(
+            position = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        } else {
+            position = { x: e.clientX, y: e.clientY };
+        }
+
+        console.log(e);
+
+        if (($os === "macos" && e.metaKey) || e.ctrlKey) {
+            altTrackMenu.open(
                 songsHighlighted.length > 1 ? songsHighlighted : song,
-                { x: e.clientX - rect.left, y: e.clientY - rect.top },
+                position,
             );
         } else {
             trackMenu.open(
                 songsHighlighted.length > 1 ? songsHighlighted : song,
-                { x: e.clientX, y: e.clientY },
+                position,
             );
         }
     }
@@ -1737,6 +1749,7 @@
     bind:this={trackMenu}
     onUnselect={() => (songsHighlighted.length = 0)}
 />
+<AltTrackMenu bind:this={altTrackMenu} />
 <ColumnPicker
     bind:showMenu={showColumnPicker}
     bind:pos={columnPickerPos}

src/lib/views/AlbumsView.svelte

@@ -8,6 +8,7 @@
         compressionSelected,
         current,
         isPlaying,
+        os,
         query,
         queue,
         uiPreferences,
@@ -23,11 +24,13 @@
     import { debounce } from "lodash-es";
     import { getAlbumDetailsHeight } from "../albums/util";
     import ScrollTo from "../ui/ScrollTo.svelte";
+    import AltAlbumMenu from "../albums/AltAlbumMenu.svelte";
 
     const PADDING = 14;
 
     let activeAlbums: Album[] = [];
     let albumMenu: AlbumMenu;
+    let altAlbumMenu: AltAlbumMenu;
     let columnWidth = 0;
     let container: HTMLDivElement;
     let currentAlbum: Album;
@@ -249,7 +252,11 @@
             // sort by track number
             .sort((a, b) => a.trackNumber - b.trackNumber);
 
-        albumMenu.open(album, songs, { x: e.clientX, y: e.clientY });
+        if (($os === "macos" && e.metaKey) || e.ctrlKey) {
+            altAlbumMenu.open(album, songs, { x: e.clientX, y: e.clientY });
+        } else {
+            albumMenu.open(album, songs, { x: e.clientX, y: e.clientY });
+        }
     }
 
     async function onLeftClick(e, album, index) {
@@ -330,6 +337,12 @@
         highlightedAlbum = null;
     }}
 />
+<AltAlbumMenu
+    bind:this={altAlbumMenu}
+    onClose={() => {
+        highlightedAlbum = null;
+    }}
+/>
 
 <div class="albums-container" bind:this={container}>
     {#if isLoading}