feat: icon view for smart playlists

src-tauri/src/metadata.rs

@@ -108,6 +108,7 @@ pub struct Song {
     pub title: String,
     pub artist: String,
     pub album: String,
+    album_id: Option<String>,
     album_artist: Option<String>,
     compilation: i32,
     year: i32,
@@ -789,6 +790,8 @@ fn process_directory(
                                     app,
                                 ) {
                                     // info!("Album: {:?}", album);
+                                    song.album_id = Some(album.id.clone());
+
                                     let existing_album =
                                         albums.lock().unwrap().get_mut(&album.id).cloned();
                                     let existing_album_subalbums =
@@ -1114,6 +1117,7 @@ pub fn extract_metadata(
                             title,
                             artist,
                             album,
+                            album_id: None,
                             album_artist,
                             compilation,
                             year,

src/App.d.ts

@@ -47,6 +47,7 @@ interface Song {
     title: string;
     artist: string;
     album: string;
+    albumId?: string;
     albumArtist?: string;
     year: number;
     genre: string[];
@@ -176,6 +177,7 @@ interface UserSettings {
     followSystemOutput: boolean;
     geniusApiKey?: string;
     discogsApiKey?: string;
+    preferredView: "album" | "track";
 }
 
 interface UIPreferences {
@@ -205,7 +207,8 @@ type Comparison =
 type UiView =
     | "library"
     | "favourites"
-    | "smart-query"
+    | "smart-query:icon"
+    | "smart-query:list"
     | "your-music"
     | "albums"
     | "playlists"

src/App.svelte

@@ -14,6 +14,7 @@
         isLyricsOpen,
         isMiniPlayer,
         isQueueOpen,
+        isQueueShowing,
         isSidebarFloating,
         isSidebarOpen,
         isSidebarShowing,
@@ -251,6 +252,7 @@
     }
 
     $: {
+        $isQueueShowing = showQueue;
         $isSidebarShowing = showSidebar;
 
         if (showSidebar) {
@@ -388,29 +390,31 @@
             {/if}
         </div>
 
-        <div class="header">
-            {#if $uiView === "playlists"}
-                <div class="content" data-tauri-drag-region>
-                    {#if $selectedPlaylistFile}
-                        <PlaylistHeader playlist={$selectedPlaylistFile} />
-                    {/if}
-                </div>
-            {:else if $uiView === "to-delete"}
-                <div class="content" data-tauri-drag-region>
-                    <ToDeleteHeader />
-                </div>
-            {:else if $uiView === "smart-query" || $uiView === "favourites"}
-                <div class="content" data-tauri-drag-region>
-                    {#await selectedQuery then query}
-                        <SmartPlaylistHeader selectedQuery={query} />
-                    {/await}
-                </div>
-            {:else if $uiView === "albums"}
-                <div class="content" data-tauri-drag-region>
-                    <AlbumsHeader />
-                </div>
-            {/if}
-        </div>
+        {#if showMainPanel}
+            <div class="header">
+                {#if $uiView === "playlists"}
+                    <div class="content" data-tauri-drag-region>
+                        {#if $selectedPlaylistFile}
+                            <PlaylistHeader playlist={$selectedPlaylistFile} />
+                        {/if}
+                    </div>
+                {:else if $uiView === "to-delete"}
+                    <div class="content" data-tauri-drag-region>
+                        <ToDeleteHeader />
+                    </div>
+                {:else if $uiView.startsWith("smart-query") || $uiView === "favourites"}
+                    <div class="content" data-tauri-drag-region>
+                        {#await selectedQuery then query}
+                            <SmartPlaylistHeader selectedQuery={query} />
+                        {/await}
+                    </div>
+                {:else if $uiView === "albums"}
+                    <div class="content" data-tauri-drag-region>
+                        <AlbumsHeader />
+                    </div>
+                {/if}
+            </div>
+        {/if}
 
         <div class="subheader">
             {#if $isTagCloudOpen}
@@ -424,7 +428,7 @@
                 >
                     <TagCloud />
                 </div>
-            {:else if $uiView.match(/^(smart-query)/)}
+            {:else if $uiView.startsWith("smart-query")}
                 {#if $isSmartQueryBuilderOpen}
                     <div
                         class="content"
@@ -442,11 +446,9 @@
 
         {#if showMainPanel}
             <div class="panel">
-                {#if $uiView === "library" || $uiView.match(/^(smart-query|favourites|to-delete)/)}
+                {#if $uiView === "library" || $uiView === "favourites" || $uiView === "playlists" || $uiView === "smart-query:list" || $uiView === "to-delete"}
                     <CanvasLibraryView />
-                {:else if $uiView === "playlists" || $uiView === "to-delete"}
-                    <CanvasLibraryView />
-                {:else if $uiView === "albums"}
+                {:else if $uiView === "albums" || $uiView === "smart-query:icon"}
                     <AlbumView />
                 {:else if $uiView === "your-music"}
                     <ArtistsToolkitView />

src/data/SmartQueries.ts

@@ -44,12 +44,12 @@ async function jazzFromThe50s() {
         .and((song) => song.year < 1960 && song.year > 1949);
 }
 
-async function favourites() {
-    return db.songs.filter((s) => s.isFavourite);
+async function favourites(): Promise<Song[]> {
+    return db.songs.filter((s) => s.isFavourite).toArray();
 }
 
-async function recentlyAdded() {
-    return db.songs.orderBy("dateAdded").reverse();
+async function recentlyAdded(): Promise<Song[]> {
+    return db.songs.orderBy("dateAdded").reverse().toArray();
 }
 
 async function whereGenreIs(genre: string) {

src/data/store.ts

@@ -253,6 +253,7 @@ const defaultSettings: UserSettings = {
     theme: "dark",
     outputDevice: null, // default system device,
     followSystemOutput: true,
+    preferredView: "track",
 };
 
 /**
@@ -345,6 +346,7 @@ export const currentSongLyrics: Writable<CurrentSongLyrics> = writable(null);
 // Queue
 export const isQueueOpen = persistentWritable(false, "isQueueOpen");
 export const isQueueCleared = writable(false);
+export const isQueueShowing = writable(false);
 
 // Wiki
 export const isWikiOpen = writable(false);
@@ -400,11 +402,17 @@ async function init() {
         );
     }
 
-    // Get user settings
-    userSettings.set({
+    const settings = {
         ...defaultSettings,
         ...fileSettings,
-    });
+    };
+
+    if (settings.preferredView === "album") {
+        uiView.set("albums");
+    }
+
+    // Get user settings
+    userSettings.set(settings);
 
     // Auto-persist settings
     userSettings.subscribe(async (val) => {