add image column playback, revert to single song playback on song list click

The CommandPalette component was being rendered twice when in mobile view:
1. In ResponsiveLayout via LayoutHotkeys (which handles all layouts)
2. In MobileLayout directly

This caused two overlapping command menus to open when pressing Ctrl+K
in mobile view, with keyboard input going to the background menu.

The fix removes the duplicate CommandPalette from MobileLayout since
LayoutHotkeys already provides it for all layouts (both desktop and mobile).

Fixes #1666

Co-authored-by: Kai Gritun <kai@kaigritun.com>

.github/workflows/publish-alpha.yml

@@ -155,6 +155,17 @@ jobs:
                       pnpm run publish:win:alpha
                   on_retry_command: pnpm cache delete
 
+            - name: Build and Publish to R2 (Windows ARM64)
+              if: matrix.os == 'windows-latest'
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win-arm64:alpha
+                  on_retry_command: pnpm cache delete
+
             - name: Build and Publish to R2 (macOS)
               if: matrix.os == 'macos-latest'
               uses: nick-invision/retry@v2.8.2

.github/workflows/publish-beta.yml

@@ -155,6 +155,19 @@ jobs:
                       pnpm run publish:win:beta
                   on_retry_command: pnpm cache delete
 
+            - name: Build and Publish releases (Windows ARM64)
+              if: matrix.os == 'windows-latest'
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win-arm64:beta
+                  on_retry_command: pnpm cache delete
+
             - name: Build and Publish releases (macOS)
               if: matrix.os == 'macos-latest'
               env:

.github/workflows/publish-pr.yml

@@ -50,6 +50,16 @@ jobs:
                   command: |
                       pnpm run package:win:pr
 
+            - name: Build for Windows (ARM64)
+              if: ${{ matrix.os == 'windows-latest' }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run package:win-arm64:pr
+
             - name: Build for Linux
               if: ${{ matrix.os == 'ubuntu-latest' }}
               uses: nick-invision/retry@v2.8.2

.github/workflows/publish-windows.yml

@@ -33,3 +33,15 @@ jobs:
                   command: |
                       pnpm run publish:win
                   on_retry_command: pnpm cache delete
+
+            - name: Build and Publish releases (ARM64)
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win-arm64
+                  on_retry_command: pnpm cache delete

.github/workflows/publish-winget.yml

@@ -16,6 +16,5 @@ jobs:
       - uses: vedantmgoyal9/winget-releaser@main
         with:
           identifier: jeffvli.Feishin
-          installers-regex: 'Feishin-*-win-x64\.exe'
+          installers-regex: 'Feishin-*-win-(x64|arm64)\.exe'
           token: ${{ secrets.WINGET_ACC_TOKEN }}
-          

.github/workflows/publish.yml

@@ -35,6 +35,19 @@ jobs:
                       pnpm run publish:win
                   on_retry_command: pnpm cache delete
 
+            - name: Build and Publish releases (Windows ARM64)
+              if: matrix.os == 'windows-latest'
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      pnpm run publish:win-arm64
+                  on_retry_command: pnpm cache delete
+
             - name: Build and Publish releases (macOS)
               if: matrix.os == 'macos-latest'
               env:

package.json

@@ -44,6 +44,7 @@
         "package:mac": "pnpm run build && electron-builder --mac",
         "package:mac:pr": "pnpm run build && electron-builder --mac --publish never",
         "package:win": "pnpm run build && electron-builder --win",
+        "package:win-arm64:pr": "pnpm run build && electron-builder --win --arm64 --publish never",
         "package:win:pr": "pnpm run build && electron-builder --win --publish never",
         "publish:linux": "pnpm run build && electron-builder --publish always --linux",
         "publish:linux-arm64": "pnpm run build && electron-builder --publish always --linux --arm64",
@@ -55,6 +56,9 @@
         "publish:mac:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --mac",
         "publish:mac:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --mac",
         "publish:win": "pnpm run build && electron-builder --publish always --win",
+        "publish:win-arm64": "pnpm run build && electron-builder --publish always --win --arm64",
+        "publish:win-arm64:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --win --arm64",
+        "publish:win-arm64:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --win --arm64",
         "publish:win:alpha": "pnpm run build && electron-builder --config electron-builder-alpha.yml --publish always --win",
         "publish:win:beta": "pnpm run build && electron-builder --config electron-builder-beta.yml --publish always --win",
         "start": "electron-vite preview",
@@ -98,7 +102,6 @@
         "electron-log": "^5.4.3",
         "electron-store": "^8.2.0",
         "electron-updater": "^6.6.2",
-        "express": "^5.2.1",
         "fast-average-color": "^9.5.0",
         "fast-xml-parser": "^5.3.2",
         "format-duration": "^3.0.2",
@@ -112,7 +115,6 @@
         "md5": "^2.3.0",
         "motion": "^12.23.24",
         "mpris-service": "^2.1.2",
-        "musicbrainz-api": "^0.27.1",
         "nanoid": "^3.3.11",
         "node-mpv": "github:jeffvli/Node-MPV#32b4d64395289ad710c41d481d2707a7acfc228f",
         "nuqs": "^2.7.1",
@@ -136,7 +138,6 @@
         "string-to-color": "^2.2.2",
         "wavesurfer.js": "^7.11.1",
         "ws": "^8.18.2",
-        "ytmusic-api": "^5.3.0",
         "zod": "^3.22.3",
         "zustand": "^5.0.5"
     },

src/i18n/locales/en.json

@@ -79,7 +79,6 @@
         "dismiss": "dismiss",
         "doNotShowAgain": "do not show this again",
         "duration": "duration",
-        "external": "external",
         "view": "view",
         "edit": "edit",
         "enable": "enable",
@@ -153,7 +152,6 @@
         "trackPeak": "track peak",
         "translation": "translation",
         "unknown": "unknown",
-        "unavailable": "unavailable",
         "version": "version",
         "year": "year",
         "yes": "yes",
@@ -584,7 +582,6 @@
             "analytics": "analytics",
             "generalTab": "general",
             "hotkeysTab": "hotkeys",
-            "integrationsTab": "integrations",
             "playbackTab": "playback",
             "windowTab": "window",
             "updates": "update",
@@ -895,16 +892,6 @@
         "mpvExtraParameters_help": "one per line",
         "musicbrainz_description": "show links to MusicBrainz on artist/album pages, where MusicBrainz ID exists",
         "musicbrainz": "show MusicBrainz links",
-        "musicBrainzQueries": "enable MusicBrainz integration",
-        "musicBrainzQueries_description": "the integration will query MusicBrainz for missing artist releases and other miscellaneous data",
-        "musicbrainzExcludeReleaseTypes": "MusicBrainz release type exclusion",
-        "musicbrainzExcludeReleaseTypes_description": "release types to exclude when loading MusicBrainz artist releases",
-        "musicbrainzPrioritizeCountries": "MusicBrainz country priority",
-        "musicbrainzPrioritizeCountries_description": "countries to prioritize when ordering MusicBrainz releases (first in list has highest priority)",
-        "musicbrainzAutoCountryPriority": "automatic country priority",
-        "musicbrainzAutoCountryPriority_description": "derive country priority from the artist's MusicBrainz releases (countries with more releases are ranked higher)",
-        "youtube": "enable YouTube playback",
-        "youtube_description": "external songs will attempt to use YouTube to resolve stream URLs (desktop only)",
         "neteaseTranslation_description": "When enabled, fetches and displays translated lyrics from NetEase if available",
         "neteaseTranslation": "Enable NetEase translations",
         "notify": "enable song notifications",
@@ -1158,6 +1145,7 @@
                 "year": "$t(common.year)"
             },
             "view": {
+                "detail": "detail",
                 "grid": "grid",
                 "list": "list",
                 "table": "table"

src/main/features/core/autodiscover/index.ts

@@ -1,8 +1,7 @@
 import { createSocket } from 'dgram';
 import { ipcMain } from 'electron';
 
-import { ServerType } from '/@/shared/types/domain-types';
-import { DiscoveredServerItem } from '/@/shared/types/types';
+import { DiscoveredServerItem, ServerType } from '/@/shared/types/types';
 
 type JellyfinResponse = {
     Address: string;

src/main/features/core/index.ts

@@ -4,4 +4,3 @@ import './player';
 import './remote';
 import './settings';
 import './discord-rpc';
-import './youtube';

src/main/features/core/settings/index.ts

@@ -38,7 +38,6 @@ export const store = new Store<any>({
         lyrics: ['NetEase', 'lrclib.net'],
         mediaSession: false,
         playbackType: 'web',
-        renderer_server_port: 38472,
         should_prompt_accessibility: true,
         shown_accessibility_warning: false,
         window_enable_tray: true,

src/main/features/core/youtube/index.ts

@@ -1,18 +0,0 @@
-import { ipcMain } from 'electron';
-import YTMusic from 'ytmusic-api';
-
-let youtubeApi: InstanceType<typeof YTMusic> | null = null;
-
-const getYoutubeApi = async (): Promise<InstanceType<typeof YTMusic>> => {
-    if (!youtubeApi) {
-        youtubeApi = new YTMusic();
-        await youtubeApi.initialize();
-    }
-    return youtubeApi;
-};
-
-ipcMain.handle('youtube-search', async (_event, query: string) => {
-    const api = await getYoutubeApi();
-    const results = await api.search(query);
-    return results;
-});

src/main/index.ts

@@ -19,7 +19,6 @@ import {
 import electronLocalShortcut from 'electron-localshortcut';
 import log from 'electron-log/main';
 import { AppImageUpdater, autoUpdater, MacUpdater, NsisUpdater } from 'electron-updater';
-import express from 'express';
 import { access, constants } from 'fs';
 import path, { join } from 'path';
 
@@ -219,37 +218,6 @@ const getAssetPath = (...paths: string[]): string => {
     return path.join(RESOURCES_PATH, ...paths);
 };
 
-const DEFAULT_RENDERER_SERVER_PORT = 38472;
-
-const getRendererServerPort = (): number => {
-    const port = Number(store.get('renderer_server_port', DEFAULT_RENDERER_SERVER_PORT));
-    if (!Number.isInteger(port) || port < 1024 || port > 65535) {
-        return DEFAULT_RENDERER_SERVER_PORT;
-    }
-    return port;
-};
-
-let rendererServerUrl: null | string = null;
-let rendererHttpServer: null | ReturnType<express.Application['listen']> = null;
-
-const startRendererServer = (): Promise<string> => {
-    return new Promise((resolve, reject) => {
-        if (rendererServerUrl) {
-            resolve(rendererServerUrl);
-            return;
-        }
-        const port = getRendererServerPort();
-        const rendererPath = join(__dirname, '../renderer');
-        const app = express();
-        app.use(express.static(rendererPath));
-        rendererHttpServer = app.listen(port, () => {
-            rendererServerUrl = `http://localhost:${port}`;
-            resolve(rendererServerUrl);
-        });
-        rendererHttpServer.on('error', reject);
-    });
-};
-
 export const getMainWindow = () => {
     return mainWindow;
 };
@@ -612,11 +580,12 @@ async function createWindow(first = true): Promise<void> {
         return { action: 'deny' };
     });
 
-    // HMR for renderer: use Vite dev server URL in development, otherwise the local HTTP server.
+    // HMR for renderer base on electron-vite cli.
+    // Load the remote URL for development or the local html file for production.
     if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
         mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']);
     } else {
-        mainWindow.loadURL(rendererServerUrl!);
+        mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
     }
 }
 
@@ -770,14 +739,6 @@ app.on('window-all-closed', () => {
     }
 });
 
-app.on('before-quit', () => {
-    if (rendererHttpServer) {
-        rendererHttpServer.close();
-        rendererHttpServer = null;
-        rendererServerUrl = null;
-    }
-});
-
 const FONT_HEADERS = [
     'font/collection',
     'font/otf',
@@ -805,7 +766,7 @@ if (!singleInstance) {
     });
 
     app.whenReady()
-        .then(async () => {
+        .then(() => {
             protocol.handle('feishin', async (request) => {
                 const filePath = `file://${request.url.slice('feishin://'.length)}`;
                 const response = await net.fetch(filePath);
@@ -823,10 +784,6 @@ if (!singleInstance) {
                 return response;
             });
 
-            if (!(is.dev && process.env['ELECTRON_RENDERER_URL'])) {
-                await startRendererServer();
-            }
-
             createWindow();
             if (store.get('window_enable_tray', true)) {
                 createTray();

src/main/menu.ts

@@ -21,6 +21,14 @@ export default class MenuBuilder {
                     selector: 'orderFrontStandardAboutPanel:',
                 },
                 { type: 'separator' },
+                {
+                    accelerator: 'Command+,',
+                    click: () => {
+                        this.mainWindow.webContents.send('renderer-open-settings');
+                    },
+                    label: 'Settings',
+                },
+                { type: 'separator' },
                 { label: 'Services', submenu: [] },
                 { type: 'separator' },
                 {
@@ -151,8 +159,8 @@ export default class MenuBuilder {
         return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
     }
 
-    buildDefaultTemplate() {
-        const templateDefault = [
+    buildDefaultTemplate(): MenuItemConstructorOptions[] {
+        const templateDefault: MenuItemConstructorOptions[] = [
             {
                 label: '&File',
                 submenu: [
@@ -160,6 +168,14 @@ export default class MenuBuilder {
                         accelerator: 'Ctrl+O',
                         label: '&Open',
                     },
+                    {
+                        accelerator: 'Ctrl+,',
+                        click: () => {
+                            this.mainWindow.webContents.send('renderer-open-settings');
+                        },
+                        label: '&Settings...',
+                    },
+                    { type: 'separator' },
                     {
                         accelerator: 'Ctrl+W',
                         click: () => {

src/preload/index.ts

@@ -11,7 +11,6 @@ import { mpris } from './mpris';
 import { mpvPlayer, mpvPlayerListener } from './mpv-player';
 import { remote } from './remote';
 import { utils } from './utils';
-import { youtube } from './youtube';
 
 // Custom APIs for renderer
 const api = {
@@ -26,7 +25,6 @@ const api = {
     mpvPlayerListener,
     remote,
     utils,
-    youtube,
 };
 
 export type PreloadApi = typeof api;

src/preload/utils.ts

@@ -61,6 +61,10 @@ const forceGarbageCollection = (): boolean => {
     }
 };
 
+const rendererOpenSettings = (cb: (event: IpcRendererEvent) => void) => {
+    ipcRenderer.on('renderer-open-settings', cb);
+};
+
 export const utils = {
     checkForUpdates,
     disableAutoUpdates,
@@ -74,6 +78,7 @@ export const utils = {
     openApplicationDirectory,
     openItem,
     playerErrorListener,
+    rendererOpenSettings,
 };
 
 export type Utils = typeof utils;

src/preload/youtube.ts

@@ -1,11 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-const search = (query: string) => {
-    return ipcRenderer.invoke('youtube-search', query);
-};
-
-export const youtube = {
-    search,
-};
-
-export type Youtube = typeof youtube;

src/renderer/api/jellyfin/jellyfin-controller.ts

@@ -57,7 +57,7 @@ const JF_FIELDS = {
     ALBUM_ARTIST_DETAIL: 'Genres, Overview, SortName, ProviderIds',
     ALBUM_ARTIST_LIST: 'Genres, DateCreated, ExternalUrls, Overview, SortName, ProviderIds',
     ALBUM_DETAIL: 'Genres, DateCreated, ChildCount, People, Tags, ProviderIds',
-    ALBUM_LIST: 'People, Tags, Studios, SortName, UserData, ProviderIds',
+    ALBUM_LIST: 'People, Tags, Studios, SortName, UserData, ProviderIds, ChildCount',
     FOLDER: 'Genres, DateCreated, MediaSources, UserData, ParentId',
     GENRE: 'ItemCounts',
     PLAYLIST_DETAIL: 'Genres, DateCreated, MediaSources, ChildCount, ParentId, SortName',
@@ -242,7 +242,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                     userId: apiClientProps.server?.userId,
                 },
                 query: {
-                    Fields: 'Genres, Overview, SortName, ProviderIds',
+                    Fields: JF_FIELDS.ALBUM_ARTIST_DETAIL,
                 },
             }),
             jfApiClient(apiClientProps).getSimilarArtistList({
@@ -269,7 +269,7 @@ export const JellyfinController: InternalControllerEndpoint = {
 
         const res = await jfApiClient(apiClientProps).getAlbumArtistList({
             query: {
-                Fields: 'Genres, DateCreated, ExternalUrls, Overview, SortName, ProviderIds',
+                Fields: JF_FIELDS.ALBUM_ARTIST_LIST,
                 ImageTypeLimit: 1,
                 Limit: query.limit,
                 ParentId: getLibraryId(query.musicFolderId),
@@ -321,7 +321,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 userId: apiClientProps.server.userId,
             },
             query: {
-                Fields: 'Genres, DateCreated, MediaSources, ParentId, People, Tags, SortName, ProviderIds',
+                Fields: JF_FIELDS.SONG,
                 IncludeItemTypes: 'Audio',
                 ParentId: query.id,
                 SortBy: 'ParentIndexNumber,IndexNumber,SortName',
@@ -1112,7 +1112,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                         GenreIds: query.genreIds?.join(','),
                         IncludeItemTypes: 'Audio',
                         IsFavorite: query.favorite,
-                        Limit: query.limit,
+                        Limit: query.limit === -1 ? undefined : query.limit,
                         ParentId: getLibraryId(query.musicFolderId),
                         Recursive: true,
                         SearchTerm: query.searchTerm,
@@ -1147,7 +1147,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                     GenreIds: query.genreIds?.join(','),
                     IncludeItemTypes: 'Audio',
                     IsFavorite: query.favorite,
-                    Limit: query.limit,
+                    Limit: query.limit === -1 ? undefined : query.limit,
                     ParentId: getLibraryId(query.musicFolderId),
                     Recursive: true,
                     SearchTerm: query.searchTerm,

src/renderer/api/query-keys.ts

@@ -270,32 +270,6 @@ export const queryKeys: Record<
         },
         root: (serverId: string) => [serverId, 'genres'] as const,
     },
-    musicbrainz: {
-        artist: (
-            limit: number | undefined,
-            mbzArtistId: string,
-            config?: {
-                autoCountryPriority: boolean;
-                excludeReleaseTypes: string[];
-                prioritizeCountries: string[];
-            },
-        ) =>
-            [
-                'musicbrainz',
-                'artist',
-                mbzArtistId,
-                limit,
-                config
-                    ? [
-                          String(config.autoCountryPriority),
-                          [...config.excludeReleaseTypes].sort().join(','),
-                          [...config.prioritizeCountries].sort().join(','),
-                      ]
-                    : null,
-            ] as const,
-        release: (releaseId: string) => ['musicbrainz', 'release', releaseId] as const,
-        root: () => ['musicbrainz'] as const,
-    },
     musicFolders: {
         list: (serverId: string) => [serverId, 'musicFolders', 'list'] as const,
     },

src/renderer/app.tsx

@@ -10,6 +10,7 @@ import isElectron from 'is-electron';
 import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 
 import i18n from '/@/i18n/i18n';
+import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
 import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
 import { useCheckForUpdates } from '/@/renderer/hooks/use-check-for-updates';
 import { useSyncSettingsToMain } from '/@/renderer/hooks/use-sync-settings-to-main';
@@ -79,6 +80,19 @@ export const App = () => {
         }
     }, [language]);
 
+    useEffect(() => {
+        if (isElectron()) {
+            window.api.utils.rendererOpenSettings(() => {
+                openSettingsModal();
+            });
+
+            return () => {
+                ipc?.removeAllListeners('renderer-open-settings');
+            };
+        }
+        return undefined;
+    }, []);
+
     const notificationStyles = useMemo(
         () => ({
             root: {

src/renderer/components/drag-preview/drag-preview.tsx

@@ -32,10 +32,8 @@ export const DragPreview = memo(({ data }: DragPreviewProps) => {
     const itemName = firstItem ? getItemName(firstItem) : 'Item';
 
     const itemImage = useItemImageUrl({
-        id: (firstItem as { imageId?: string })?.imageId,
-        imageUrl: (firstItem as { imageUrl?: string })?.imageUrl,
+        id: (firstItem as { imageId: string })?.imageId,
         itemType: data.itemType || LibraryItem.SONG,
-        serverId: (firstItem as { _serverId?: string })?._serverId,
         type: 'table',
     });
 

src/renderer/components/item-card/item-card.module.css

@@ -59,33 +59,12 @@
     }
 }
 
-.image-container.external {
-    img {
-        opacity: 0.5;
-        transition: all 0.2s ease-in-out;
-    }
-
-    &:hover {
-        img {
-            opacity: 1;
-        }
-    }
-}
-
 .image-container.is-round {
     &::before {
         border-radius: 50%;
     }
 }
 
-.image-container.no-hover-overlay {
-    &:hover {
-        &::before {
-            opacity: 0 !important;
-        }
-    }
-}
-
 .favorite-badge {
     position: absolute;
     top: -50px;
@@ -121,19 +100,9 @@
     transition: opacity 0.2s ease-in-out;
 }
 
-.external-badge {
-    position: absolute;
-    bottom: var(--theme-spacing-sm);
-    left: var(--theme-spacing-sm);
-    z-index: 5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
-    pointer-events: none;
-    background-color: alpha(var(--theme-colors-state-error), 0.85);
-    border-radius: var(--theme-radius-md);
-    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+.image-container:hover .favorite-badge,
+.image-container:hover .rating-badge {
+    opacity: 0;
 }
 
 .image {

src/renderer/components/item-card/item-card.tsx

@@ -19,7 +19,7 @@ import { ItemControls } from '/@/renderer/components/item-list/types';
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useIntegrationsSettings, useShowRatings } from '/@/renderer/store';
+import { useShowRatings } from '/@/renderer/store';
 import {
     formatDateAbsolute,
     formatDateAbsoluteUTC,
@@ -29,7 +29,6 @@ import {
 } from '/@/renderer/utils/format';
 import { SEPARATOR_STRING } from '/@/shared/api/utils';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
-import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Separator } from '/@/shared/components/separator/separator';
@@ -43,7 +42,6 @@ import {
     Genre,
     LibraryItem,
     Playlist,
-    ServerType,
     Song,
 } from '/@/shared/types/domain-types';
 import { DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';
@@ -180,7 +178,6 @@ const CompactItemCard = ({
     showRating,
     withControls,
 }: ItemCardDerivativeProps) => {
-    const { youtube: youtubeIntegrationEnabled } = useIntegrationsSettings();
     const [showControls, setShowControls] = useState(false);
     const itemRowId =
         data && internalState && typeof data === 'object' && 'id' in data
@@ -342,15 +339,9 @@ const CompactItemCard = ({
                 ? (data as { userRating: null | number }).userRating
                 : null;
         const hasRating = showRating && userRating !== null && userRating > 0;
-        const isExternal = data._serverType === ServerType.EXTERNAL;
-
-        const showItemCardControls =
-            withControls && showControls && data && (!isExternal || youtubeIntegrationEnabled);
 
         const imageContainerClassName = clsx(styles.imageContainer, {
-            [styles.external]: isExternal,
             [styles.isRound]: isRound,
-            [styles.noHoverOverlay]: isExternal && !showItemCardControls,
         });
 
         const imageContainerContent = (
@@ -382,13 +373,8 @@ const CompactItemCard = ({
                 )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
-                {isExternal && (
-                    <div className={styles.externalBadge} title={i18n.t('common.external')}>
-                        <ExternalSongIndicator isExternal size="sm" withSpace={false} />
-                    </div>
-                )}
                 <AnimatePresence>
-                    {showItemCardControls && (
+                    {withControls && showControls && data && (
                         <ItemCardControls
                             controls={controls}
                             enableExpansion={enableExpansion}
@@ -423,7 +409,6 @@ const CompactItemCard = ({
             <div
                 className={clsx(styles.container, styles.compact, {
                     [styles.dragging]: isDragging,
-                    [styles.external]: isExternal,
                     [styles.selected]: isSelected,
                 })}
                 ref={ref}
@@ -497,7 +482,6 @@ const DefaultItemCard = ({
     showRating,
     withControls,
 }: ItemCardDerivativeProps) => {
-    const { youtube: youtubeIntegrationEnabled } = useIntegrationsSettings();
     const [showControls, setShowControls] = useState(false);
     const itemRowId =
         data && internalState && typeof data === 'object' && 'id' in data
@@ -586,6 +570,10 @@ const DefaultItemCard = ({
             e.stopPropagation();
         };
 
+        const imageContainerClassName = clsx(styles.imageContainer, {
+            [styles.isRound]: isRound,
+        });
+
         const isFavorite =
             'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
         const userRating =
@@ -594,16 +582,6 @@ const DefaultItemCard = ({
                 ? (data as { userRating: null | number }).userRating
                 : null;
         const hasRating = showRating && userRating !== null && userRating > 0;
-        const isExternal = data._serverType === ServerType.EXTERNAL;
-
-        const showItemCardControls =
-            withControls && showControls && data && (!isExternal || youtubeIntegrationEnabled);
-
-        const imageContainerClassName = clsx(styles.imageContainer, {
-            [styles.external]: isExternal,
-            [styles.isRound]: isRound,
-            [styles.noHoverOverlay]: isExternal && !showItemCardControls,
-        });
 
         const imageContainerContent = (
             <>
@@ -632,13 +610,8 @@ const DefaultItemCard = ({
                 )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
-                {isExternal && (
-                    <div className={styles.externalBadge} title={i18n.t('common.external')}>
-                        <ExternalSongIndicator isExternal size="sm" withSpace={false} />
-                    </div>
-                )}
                 <AnimatePresence>
-                    {showItemCardControls && (
+                    {withControls && showControls && (
                         <ItemCardControls
                             controls={controls}
                             enableExpansion={enableExpansion}
@@ -655,7 +628,6 @@ const DefaultItemCard = ({
         return (
             <div
                 className={clsx(styles.container, {
-                    [styles.external]: isExternal,
                     [styles.selected]: isSelected,
                 })}
             >
@@ -745,7 +717,6 @@ const PosterItemCard = ({
     showRating,
     withControls,
 }: ItemCardDerivativeProps) => {
-    const { youtube: youtubeIntegrationEnabled } = useIntegrationsSettings();
     const [showControls, setShowControls] = useState(false);
     const itemRowId =
         data && internalState && typeof data === 'object' && 'id' in data
@@ -899,6 +870,10 @@ const PosterItemCard = ({
             e.stopPropagation();
         };
 
+        const imageContainerClassName = clsx(styles.imageContainer, {
+            [styles.isRound]: isRound,
+        });
+
         const isFavorite =
             'userFavorite' in data && (data as { userFavorite: boolean }).userFavorite;
         const userRating =
@@ -907,16 +882,6 @@ const PosterItemCard = ({
                 ? (data as { userRating: null | number }).userRating
                 : null;
         const hasRating = showRating && userRating !== null && userRating > 0;
-        const isExternal = data._serverType === ServerType.EXTERNAL;
-
-        const showItemCardControls =
-            withControls && showControls && data && (!isExternal || youtubeIntegrationEnabled);
-
-        const imageContainerClassName = clsx(styles.imageContainer, {
-            [styles.external]: isExternal,
-            [styles.isRound]: isRound,
-            [styles.noHoverOverlay]: isExternal && !showItemCardControls,
-        });
 
         const imageContainerContent = (
             <>
@@ -945,13 +910,8 @@ const PosterItemCard = ({
                 )}
                 {isFavorite && <div className={styles.favoriteBadge} />}
                 {hasRating && <div className={styles.ratingBadge}>{userRating}</div>}
-                {isExternal && (
-                    <div className={styles.externalBadge}>
-                        <ExternalSongIndicator isExternal size="xl" withSpace={false} />
-                    </div>
-                )}
                 <AnimatePresence>
-                    {showItemCardControls && (
+                    {withControls && showControls && data && (
                         <ItemCardControls
                             controls={controls}
                             enableExpansion={enableExpansion}
@@ -970,7 +930,6 @@ const PosterItemCard = ({
             <div
                 className={clsx(styles.container, styles.poster, {
                     [styles.dragging]: isDragging,
-                    [styles.external]: isExternal,
                     [styles.selected]: isSelected,
                 })}
                 ref={ref}
@@ -1066,20 +1025,18 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
                     if ('id' in data && data.id) {
                         if ('_itemType' in data) {
                             switch (data._itemType) {
-                                case LibraryItem.ALBUM: {
-                                    const albumPath = getTitlePath(LibraryItem.ALBUM, data.id);
-                                    return albumPath ? (
-                                        <Link state={{ item: data }} to={albumPath}>
+                                case LibraryItem.ALBUM:
+                                    return (
+                                        <Link
+                                            state={{ item: data }}
+                                            to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
+                                                albumId: data.id,
+                                            })}
+                                        >
                                             <ExplicitIndicator explicitStatus={explicitStatus} />
                                             {data.name}
                                         </Link>
-                                    ) : (
-                                        <>
-                                            <ExplicitIndicator explicitStatus={explicitStatus} />
-                                            {data.name}
-                                        </>
                                     );
-                                }
                                 case LibraryItem.ALBUM_ARTIST:
                                     return (
                                         <Link
@@ -1376,6 +1333,7 @@ const getItemNavigationPath = (
     }
 
     const effectiveItemType = '_itemType' in data && data._itemType ? data._itemType : itemType;
+
     return getTitlePath(effectiveItemType, data.id);
 };
 

src/renderer/components/item-detail/item-detail.module.css

@@ -1,84 +0,0 @@
-.container {
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: auto minmax(0, 1fr);
-    gap: var(--theme-spacing-sm);
-    width: 100%;
-    height: 100%;
-    padding: var(--theme-spacing-sm);
-    container-type: inline-size;
-    background: var(--theme-colors-surface);
-    border-radius: var(--theme-radius-md);
-
-    @container (min-width: 500px) {
-        grid-template-columns: minmax(0, 1fr);
-    }
-}
-
-.image-container {
-    position: relative;
-    display: none;
-    height: 100%;
-    min-height: 0;
-    aspect-ratio: 1/1;
-
-    &::before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        content: '';
-        background-color: rgb(0 0 0);
-        opacity: 0;
-        transition: all 0.2s ease-in-out;
-    }
-
-    &:hover {
-        &::before {
-            opacity: 0.6;
-        }
-    }
-
-    @container (min-width: 500px) {
-        display: block;
-    }
-}
-
-.image {
-    aspect-ratio: 1/1;
-}
-
-.metadata-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--theme-spacing-sm);
-    width: 100%;
-    height: 100%;
-    padding: var(--theme-spacing-xs) 0;
-    overflow: hidden;
-}
-
-.metadata-container .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-weight: 600;
-    line-height: 1.2;
-}
-
-.metadata-container .header .title {
-    max-width: 70%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.metadata-container .content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--theme-spacing-xs);
-}
-
-.metadata-container .content .tags {
-}

src/renderer/components/item-detail/item-detail.tsx

@@ -1,146 +0,0 @@
-// import { AnimatePresence } from 'motion/react';
-// import { MouseEvent, useMemo, useState } from 'react';
-// import { Link } from 'react-router';
-
-// import styles from './item-detail.module.css';
-
-// import { ItemCardControls } from '/@/renderer/components/item-card/item-card-controls';
-// import { useFastAverageColor } from '/@/renderer/hooks';
-// import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
-// import { Badge } from '/@/shared/components/badge/badge';
-// import { Divider } from '/@/shared/components/divider/divider';
-// import { Group } from '/@/shared/components/group/group';
-// import { Image } from '/@/shared/components/image/image';
-// import { Rating } from '/@/shared/components/rating/rating';
-// import { Text } from '/@/shared/components/text/text';
-// import {
-//     Album,
-//     AlbumArtist,
-//     Artist,
-//     LibraryItem,
-//     Playlist,
-//     Song,
-// } from '/@/shared/types/domain-types';
-// import { stringToColor } from '/@/shared/utils/string-to-color';
-
-// interface ItemDetailProps {
-//     data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
-//     itemHeight: number;
-//     itemType: LibraryItem;
-//     onClick?: (e: MouseEvent<HTMLDivElement>, item: unknown, itemType: LibraryItem) => void;
-//     withControls?: boolean;
-// }
-
-// export const ItemDetail = ({ data, itemType, onClick, withControls }: ItemDetailProps) => {
-//     const imageUrl = getImageUrl(data);
-
-//     const [showControls, setShowControls] = useState(false);
-
-//     const { background } = useFastAverageColor({
-//         algorithm: 'simple',
-//         src: imageUrl,
-//         srcLoaded: false,
-//     });
-
-//     // const tags = [...(data?.genres ?? [])];
-
-//     const tags = useMemo(() => {
-//         if (!data) {
-//             return [];
-//         }
-
-//         const items: {
-//             color?: string;
-//             id: string;
-//             isLight?: boolean;
-//             itemType: LibraryItem;
-//             name: string;
-//         }[] = [];
-
-//         if ('albumArtists' in data && Array.isArray(data.albumArtists)) {
-//             data.albumArtists?.forEach((tag: { id: string; name: string }) => {
-//                 items.push({ id: tag.id, itemType: LibraryItem.ALBUM_ARTIST, name: tag.name });
-//             });
-//         }
-
-//         if ('genres' in data && Array.isArray(data.genres)) {
-//             data.genres?.forEach((tag: { id: string; itemType: LibraryItem; name: string }) => {
-//                 const { color, isLight } = stringToColor(tag.name);
-//                 items.push({ ...tag, color, isLight });
-//             });
-//         }
-
-//         // if ('tags' in data && typeof data.tags === 'object') {
-//         //     console.log('data.tags :>> ', data.tags);
-//         //     Object.entries(data.tags).forEach(([key, value]) => {
-//         //         items.push({ id: key, itemType: LibraryItem.TAG, name: value });
-//         //     });
-//         // }
-
-//         return items;
-//     }, [data]);
-
-//     return (
-//         <div
-//             className={styles.container}
-//             onClick={(e) => onClick?.(e, data, itemType)}
-//             style={{ backgroundColor: background }}
-//         >
-//             <div
-//                 className={styles.imageContainer}
-//                 onMouseEnter={() => withControls && setShowControls(true)}
-//                 onMouseLeave={() => withControls && setShowControls(false)}
-//             >
-//                 <Image alt={data?.name} src={imageUrl} />
-//                 <AnimatePresence>
-//                     {withControls && showControls && <ItemCardControls type="compact" />}
-//                 </AnimatePresence>
-//             </div>
-//             <div className={styles.metadataContainer}>
-//                 <div className={styles.header}>
-//                     <Text className={styles.title} component={Link} isLink size="lg" weight={500}>
-//                         {data?.name}
-//                     </Text>
-//                     <Group>
-//                         {data && 'userRating' in data && (
-//                             <Rating size="xs" value={data?.userRating ?? 0} />
-//                         )}
-//                         {data && 'userFavorite' in data && (
-//                             <ActionIcon
-//                                 icon="favorite"
-//                                 iconProps={{
-//                                     fill: data?.userFavorite ? 'primary' : 'default',
-//                                 }}
-//                                 size="xs"
-//                             />
-//                         )}
-//                     </Group>
-//                 </div>
-//                 <Divider />
-//                 <div className={styles.content}>
-//                     <Group className={styles.tags} gap="xs">
-//                         {tags.map((tag) => (
-//                             <Badge
-//                                 key={tag.id}
-//                                 style={{
-//                                     backgroundColor: tag.color,
-//                                     color: tag.isLight ? 'black' : 'white',
-//                                 }}
-//                             >
-//                                 {tag.name}
-//                             </Badge>
-//                         ))}
-//                     </Group>
-//                 </div>
-//             </div>
-//         </div>
-//     );
-// };
-
-// const getImageUrl = (data: Album | AlbumArtist | Artist | Playlist | Song | undefined) => {
-//     if (data && 'imageUrl' in data) {
-//         return data.imageUrl || undefined;
-//     }
-
-//     return undefined;
-// };

src/renderer/components/item-list/helpers/item-list-controls.ts

@@ -8,7 +8,7 @@ import { ContextMenuController } from '/@/renderer/features/context-menu/context
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { useSetFavorite } from '/@/renderer/features/shared/hooks/use-set-favorite';
 import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
-import { LibraryItem, QueueSong, ServerType, Song } from '/@/shared/types/domain-types';
+import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import { Play, TableColumn } from '/@/shared/types/types';
 
 interface UseDefaultItemListControlsArgs {
@@ -192,9 +192,10 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                 onColumnReordered?.(columnIdFrom, columnIdTo, edge);
             },
 
-            onColumnResized: ({ columnId, width }: { columnId: TableColumn; width: number }) => {
-                onColumnResized?.(columnId, width);
-            },
+            onColumnResized: onColumnResized
+                ? ({ columnId, width }: { columnId: TableColumn; width: number }) =>
+                      onColumnResized(columnId, width)
+                : undefined,
 
             onDoubleClick: ({ internalState, item, itemType, meta }: DefaultItemControlProps) => {
                 if (!item || !internalState) {
@@ -241,11 +242,13 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                     }
 
                     const playType = (meta?.playType as Play) || Play.NOW;
+                    const singleSongOnly = meta?.singleSongOnly === true;
 
-                    // For NEXT, LAST, NEXT_SHUFFLE, and LAST_SHUFFLE, only add the clicked song
-                    // For NOW and SHUFFLE, add a range of songs around the clicked song
+                    // For single-song actions (e.g. image play button), or NEXT/LAST/..., only add the clicked song
+                    // For row double-click with NOW/SHUFFLE, add a range of songs around the clicked song
                     let songsToAdd: Song[];
                     if (
+                        singleSongOnly ||
                         playType === Play.NEXT ||
                         playType === Play.LAST ||
                         playType === Play.NEXT_SHUFFLE ||
@@ -384,15 +387,6 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                     return;
                 }
 
-                const isExternal =
-                    (item as Song & { _serverType?: ServerType })._serverType ===
-                    ServerType.EXTERNAL;
-
-                if (isExternal && itemType === LibraryItem.SONG) {
-                    player.addToQueueByData([item as Song], playType, item.id);
-                    return;
-                }
-
                 player.addToQueueByFetch(item._serverId, [item.id], itemType, playType);
             },
 
@@ -426,9 +420,9 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
         };
     }, [
         enableMultiSelect,
+        overrides,
         onColumnReordered,
         onColumnResized,
-        overrides,
         player,
         setFavorite,
         setRating,

src/renderer/components/item-list/helpers/use-item-list-column-reorder.ts

@@ -7,14 +7,19 @@ import { ItemListKey, TableColumn } from '/@/shared/types/types';
 
 interface UseItemListColumnReorderProps {
     itemListKey: ItemListKey;
+    tableKey?: 'detail' | 'main';
 }
 
-export const useItemListColumnReorder = ({ itemListKey }: UseItemListColumnReorderProps) => {
+export const useItemListColumnReorder = ({
+    itemListKey,
+    tableKey = 'main',
+}: UseItemListColumnReorderProps) => {
     const { setList } = useSettingsStoreActions();
 
     const handleColumnReordered = useCallback(
         (columnIdFrom: TableColumn, columnIdTo: TableColumn, edge: Edge | null) => {
-            const columns = useSettingsStore.getState().lists[itemListKey]?.table.columns;
+            const list = useSettingsStore.getState().lists[itemListKey];
+            const columns = tableKey === 'detail' ? list?.detail?.columns : list?.table?.columns;
 
             if (!columns) {
                 return;
@@ -83,13 +88,20 @@ export const useItemListColumnReorder = ({ itemListKey }: UseItemListColumnReord
             // Insert the column at the new position
             newColumns.splice(newIndex, 0, updatedMovedColumn);
 
-            setList(itemListKey, {
-                table: {
-                    columns: newColumns,
-                },
-            });
+            if (tableKey === 'detail') {
+                type SetListData = Parameters<
+                    ReturnType<typeof useSettingsStoreActions>['setList']
+                >[1];
+                setList(itemListKey, { detail: { columns: newColumns } } as SetListData);
+            } else {
+                setList(itemListKey, {
+                    table: {
+                        columns: newColumns,
+                    },
+                });
+            }
         },
-        [itemListKey, setList],
+        [itemListKey, setList, tableKey],
     );
 
     return { handleColumnReordered };

src/renderer/components/item-list/helpers/use-item-list-column-resize.ts

@@ -5,11 +5,18 @@ import { ItemListKey, TableColumn } from '/@/shared/types/types';
 
 interface UseItemListColumnResizeProps {
     itemListKey: ItemListKey;
+    tableKey?: 'detail' | 'main';
 }
 
-export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResizeProps) => {
+export const useItemListColumnResize = ({
+    itemListKey,
+    tableKey = 'main',
+}: UseItemListColumnResizeProps) => {
     const { setList } = useSettingsStoreActions();
-    const columns = useSettingsStore((state) => state.lists[itemListKey]?.table.columns);
+    const columns = useSettingsStore((state) => {
+        const list = state.lists[itemListKey];
+        return tableKey === 'detail' ? list?.detail?.columns : list?.table?.columns;
+    });
 
     const handleColumnResized = useCallback(
         (columnId: TableColumn, width: number) => {
@@ -19,13 +26,20 @@ export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResize
                 column.id === columnId ? { ...column, width } : column,
             );
 
-            setList(itemListKey, {
-                table: {
-                    columns: updatedColumns,
-                },
-            });
+            if (tableKey === 'detail') {
+                type SetListData = Parameters<
+                    ReturnType<typeof useSettingsStoreActions>['setList']
+                >[1];
+                setList(itemListKey, { detail: { columns: updatedColumns } } as SetListData);
+            } else {
+                setList(itemListKey, {
+                    table: {
+                        columns: updatedColumns,
+                    },
+                });
+            }
         },
-        [columns, itemListKey, setList],
+        [columns, itemListKey, setList, tableKey],
     );
 
     return { handleColumnResized };

src/renderer/components/item-list/helpers/use-item-list-scroll-persist.ts

@@ -1,26 +1,29 @@
 import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
+import { useLocation, useNavigationType } from 'react-router';
 
-import { parseIntParam, setSearchParam } from '/@/renderer/utils/query-params';
+import { useScrollStore } from '/@/renderer/store/scroll.store';
 
 interface UseItemListScrollPersistProps {
     enabled: boolean;
 }
 
 export const useItemListScrollPersist = ({ enabled }: UseItemListScrollPersistProps) => {
-    const [searchParams, setSearchParams] = useSearchParams();
+    const location = useLocation();
+    const navigationType = useNavigationType();
+    const setOffset = useScrollStore((s) => s.setOffset);
+    const getOffset = useScrollStore((s) => s.getOffset);
 
-    const scrollOffset = useMemo(() => parseIntParam(searchParams, 'scrollOffset'), [searchParams]);
+    const scrollOffset = useMemo(() => {
+        if (navigationType !== 'POP') return undefined;
+        return getOffset(location.key);
+    }, [getOffset, location.key, navigationType]);
 
     const handleOnScrollEnd = useCallback(
         (offset: number) => {
             if (!enabled) return;
-
-            setSearchParams((prev) => setSearchParam(prev, 'scrollOffset', offset), {
-                replace: true,
-            });
+            setOffset(location.key, offset);
         },
-        [enabled, setSearchParams],
+        [enabled, location.key, setOffset],
     );
 
     return { handleOnScrollEnd, scrollOffset };

src/renderer/components/item-list/item-detail-list/columns/actions-column.tsx

@@ -0,0 +1,38 @@
+import { ItemDetailListCellProps } from './types';
+
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const ActionsColumn = ({ controls, internalState, song }: ItemDetailListCellProps) => {
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const index = internalState?.findItemIndex(song.id) ?? -1;
+        controls?.onMore?.({
+            event,
+            index,
+            internalState: internalState ?? undefined,
+            item: song,
+            itemType: LibraryItem.SONG,
+        });
+    };
+
+    const handleDoubleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+
+    return (
+        <ActionIcon
+            icon="ellipsisHorizontal"
+            iconProps={{
+                color: 'muted',
+                size: 'xs',
+            }}
+            onClick={handleClick}
+            onDoubleClick={handleDoubleClick}
+            size="xs"
+            variant="subtle"
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx

@@ -0,0 +1,23 @@
+import { ItemDetailListCellProps } from './types';
+
+import {
+    JOINED_ARTISTS_MUTED_PROPS,
+    JoinedArtists,
+} from '/@/renderer/features/albums/components/joined-artists';
+
+export const AlbumArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const name = song.albumArtistName?.trim() ?? '';
+    const hasArtists = name.length > 0 || (song.albumArtists?.length ?? 0) > 0;
+
+    if (!hasArtists) return <>&nbsp;</>;
+
+    return (
+        <JoinedArtists
+            artistName={song.albumArtistName ?? ''}
+            artists={song.albumArtists ?? []}
+            linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps}
+            readOnly={!isRowHovered}
+            rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps}
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/album-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const AlbumColumn = ({ song }: ItemDetailListCellProps) => song.album ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx

@@ -0,0 +1,23 @@
+import { ItemDetailListCellProps } from './types';
+
+import {
+    JOINED_ARTISTS_MUTED_PROPS,
+    JoinedArtists,
+} from '/@/renderer/features/albums/components/joined-artists';
+
+export const ArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const name = song.artistName?.trim() ?? '';
+    const hasArtists = name.length > 0 || (song.artists?.length ?? 0) > 0;
+
+    if (!hasArtists) return <>&nbsp;</>;
+
+    return (
+        <JoinedArtists
+            artistName={song.artistName ?? ''}
+            artists={song.artists ?? []}
+            linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps}
+            readOnly={!isRowHovered}
+            rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps}
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/bit-depth-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const BitDepthColumn = ({ song }: ItemDetailListCellProps) => song.bitDepth;

src/renderer/components/item-list/item-detail-list/columns/bit-rate-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const BitRateColumn = ({ song }: ItemDetailListCellProps) =>
+    song.bitRate != null ? `${song.bitRate} kbps` : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/bpm-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const BpmColumn = ({ song }: ItemDetailListCellProps) => song.bpm ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/channels-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const ChannelsColumn = ({ song }: ItemDetailListCellProps) =>
+    song.channels != null ? String(song.channels) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/codec-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const CodecColumn = ({ song }: ItemDetailListCellProps) => song.container ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/comment-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const CommentColumn = ({ song }: ItemDetailListCellProps) => song.comment ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/composer-column.tsx

@@ -0,0 +1,7 @@
+import { ItemDetailListCellProps } from './types';
+
+export const ComposerColumn = ({ song }: ItemDetailListCellProps) => {
+    const composers = song.participants?.composer;
+    if (!composers?.length) return <>&nbsp;</>;
+    return composers.map((a) => a.name).join(', ');
+};

src/renderer/components/item-list/item-detail-list/columns/date-added-column.tsx

@@ -0,0 +1,6 @@
+import { ItemDetailListCellProps } from './types';
+
+import { formatDateAbsolute } from '/@/renderer/utils/format';
+
+export const DateAddedColumn = ({ song }: ItemDetailListCellProps) =>
+    song.createdAt ? formatDateAbsolute(song.createdAt) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/default-column.tsx

@@ -0,0 +1,11 @@
+import { ItemDetailListCellProps } from './types';
+
+interface DefaultColumnProps extends ItemDetailListCellProps {
+    columnId: string;
+}
+
+export const DefaultColumn = ({ columnId, song }: DefaultColumnProps) => {
+    const raw = (song as Record<string, unknown>)[columnId];
+    if (raw === undefined || raw === null || typeof raw === 'object') return <>&nbsp;</>;
+    return String(raw);
+};

src/renderer/components/item-list/item-detail-list/columns/disc-number-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const DiscNumberColumn = ({ song }: ItemDetailListCellProps) => String(song.discNumber ?? 1);

src/renderer/components/item-list/item-detail-list/columns/duration-column.tsx

@@ -0,0 +1,5 @@
+import formatDuration from 'format-duration';
+
+import { ItemDetailListCellProps } from './types';
+
+export const DurationColumn = ({ song }: ItemDetailListCellProps) => formatDuration(song.duration);

src/renderer/components/item-list/item-detail-list/columns/favorite-column.tsx

@@ -0,0 +1,54 @@
+import { ItemDetailListCellProps } from './types';
+
+import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
+import { useIsMutatingDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const FavoriteColumn = ({
+    controls,
+    internalState,
+    isMutatingFavorite,
+    onFavoriteClick,
+    song,
+}: ItemDetailListCellProps) => {
+    const isMutatingCreateFavorite = useIsMutatingCreateFavorite();
+    const isMutatingDeleteFavorite = useIsMutatingDeleteFavorite();
+    const isMutating = isMutatingFavorite ?? (isMutatingCreateFavorite || isMutatingDeleteFavorite);
+    const isFavorite = song.userFavorite ?? false;
+
+    return (
+        <ActionIcon
+            disabled={isMutating}
+            icon="favorite"
+            iconProps={{
+                color: isFavorite ? 'primary' : 'muted',
+                fill: isFavorite ? 'primary' : undefined,
+                size: 'xs',
+            }}
+            onClick={(event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                const index = internalState?.findItemIndex(song.id) ?? -1;
+                if (controls?.onFavorite) {
+                    controls.onFavorite({
+                        event,
+                        favorite: !isFavorite,
+                        index,
+                        internalState: internalState ?? undefined,
+                        item: song,
+                        itemType: LibraryItem.SONG,
+                    });
+                } else {
+                    onFavoriteClick?.(song);
+                }
+            }}
+            onDoubleClick={(event) => {
+                event.stopPropagation();
+                event.preventDefault();
+            }}
+            size="xs"
+            variant="subtle"
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/genre-badge-column.module.css

@@ -0,0 +1,12 @@
+.group {
+    flex-wrap: nowrap;
+    gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
+    min-width: 0;
+    padding: var(--theme-spacing-xs) 0;
+    overflow: hidden;
+}
+
+.group a {
+    cursor: pointer;
+    user-select: none;
+}

src/renderer/components/item-list/item-detail-list/columns/genre-badge-column.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { generatePath, Link } from 'react-router';
+
+import styles from './genre-badge-column.module.css';
+import { ItemDetailListCellProps } from './types';
+
+import { AppRoute } from '/@/renderer/router/routes';
+import { Badge } from '/@/shared/components/badge/badge';
+import { Group } from '/@/shared/components/group/group';
+import { stringToColor } from '/@/shared/utils/string-to-color';
+
+const MAX_GENRES = 4;
+
+export const GenreBadgeColumn = ({ song }: ItemDetailListCellProps) => {
+    const genres = song.genres;
+
+    const genresWithStyle = useMemo(() => {
+        if (!genres) return [];
+        return genres.slice(0, MAX_GENRES).map((genre) => {
+            const { color, isLight } = stringToColor(genre.name);
+            const path = generatePath(AppRoute.LIBRARY_GENRES_DETAIL, { genreId: genre.id });
+            return { ...genre, color, isLight, path };
+        });
+    }, [genres]);
+
+    if (!genresWithStyle.length) return <>&nbsp;</>;
+
+    return (
+        <Group className={styles.group} wrap="nowrap">
+            {genresWithStyle.map((genre) => (
+                <Badge
+                    component={Link}
+                    key={genre.id}
+                    state={{ item: genre }}
+                    style={{
+                        backgroundColor: genre.color,
+                        color: genre.isLight ? 'black' : 'white',
+                    }}
+                    to={genre.path}
+                >
+                    {genre.name}
+                </Badge>
+            ))}
+        </Group>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/genre-column.tsx

@@ -0,0 +1,40 @@
+import { Fragment } from 'react';
+import { generatePath, Link } from 'react-router';
+
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Text } from '/@/shared/components/text/text';
+
+const TEXT_PROPS = { isMuted: true, isNoSelect: true, size: 'sm' as const } as const;
+
+export const GenreColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const genres = song.genres ?? [];
+    if (!genres.length) return <>&nbsp;</>;
+
+    return (
+        <>
+            {genres.map((genre, index) => (
+                <Fragment key={genre.id}>
+                    {isRowHovered ? (
+                        <Text
+                            component={Link}
+                            isLink
+                            state={{ item: genre }}
+                            to={generatePath(AppRoute.LIBRARY_GENRES_DETAIL, {
+                                genreId: genre.id,
+                            })}
+                            {...TEXT_PROPS}
+                        >
+                            {genre.name}
+                        </Text>
+                    ) : (
+                        <Text component="span" {...TEXT_PROPS}>
+                            {genre.name}
+                        </Text>
+                    )}
+                    {index < genres.length - 1 && ', '}
+                </Fragment>
+            ))}
+        </>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/image-column.module.css

@@ -0,0 +1,50 @@
+.image-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.compact-container {
+    flex: 1 1 0;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+    max-height: 100%;
+    aspect-ratio: unset;
+    padding-top: var(--theme-spacing-xs);
+    padding-bottom: var(--theme-spacing-xs);
+    overflow: hidden;
+    border-radius: var(--theme-radius-md);
+}
+
+.play-button-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 10;
+    opacity: 0.6;
+    transform: translate(-50%, -50%);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.play-button-overlay:hover {
+    opacity: 1;
+}
+
+.play-button-overlay button {
+    width: 24px;
+    height: 24px;
+}
+
+.compact-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: var(--theme-radius-md);
+}

src/renderer/components/item-list/item-detail-list/columns/image-column.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+
+import styles from './image-column.module.css';
+import { ItemDetailListCellProps } from './types';
+
+import { ItemImage } from '/@/renderer/components/item-image/item-image';
+import { PlayButton } from '/@/renderer/features/shared/components/play-button';
+import {
+    LONG_PRESS_PLAY_BEHAVIOR,
+    PlayTooltip,
+} from '/@/renderer/features/shared/components/play-button-group';
+import { usePlayButtonBehavior } from '/@/renderer/store';
+import { LibraryItem } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
+
+export const ImageColumn = ({
+    controls,
+    internalState,
+    rowIndex = 0,
+    song,
+}: ItemDetailListCellProps) => {
+    const playButtonBehavior = usePlayButtonBehavior();
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handlePlay = (playType: Play) => {
+        if (!song || !controls?.onDoubleClick) {
+            return;
+        }
+
+        controls.onDoubleClick({
+            event: null,
+            index: rowIndex,
+            internalState,
+            item: song,
+            itemType: LibraryItem.SONG,
+            meta: { playType, singleSongOnly: true },
+        });
+    };
+
+    return (
+        <div
+            className={styles.imageContainer}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            <ItemImage
+                className={styles.compactImage}
+                containerClassName={styles.compactContainer}
+                explicitStatus={song.explicitStatus}
+                id={song.imageId}
+                itemType={LibraryItem.SONG}
+                serverId={song._serverId}
+                type="table"
+            />
+            {isHovered && (
+                <div className={clsx(styles.playButtonOverlay)}>
+                    <PlayTooltip disabled={false} type={playButtonBehavior}>
+                        <PlayButton
+                            fill
+                            onClick={() => handlePlay(playButtonBehavior)}
+                            onLongPress={() =>
+                                handlePlay(LONG_PRESS_PLAY_BEHAVIOR[playButtonBehavior])
+                            }
+                        />
+                    </PlayTooltip>
+                </div>
+            )}
+        </div>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/index.ts

@@ -0,0 +1,127 @@
+import React, { type ReactNode } from 'react';
+
+import type { ItemDetailListCellProps } from './types';
+
+import { ActionsColumn } from './actions-column';
+import { AlbumArtistColumn } from './album-artist-column';
+import { AlbumColumn } from './album-column';
+import { ArtistColumn } from './artist-column';
+import { BitDepthColumn } from './bit-depth-column';
+import { BitRateColumn } from './bit-rate-column';
+import { BpmColumn } from './bpm-column';
+import { ChannelsColumn } from './channels-column';
+import { CodecColumn } from './codec-column';
+import { CommentColumn } from './comment-column';
+import { ComposerColumn } from './composer-column';
+import { DateAddedColumn } from './date-added-column';
+import { DefaultColumn } from './default-column';
+import { DiscNumberColumn } from './disc-number-column';
+import { DurationColumn } from './duration-column';
+import { FavoriteColumn } from './favorite-column';
+import { GenreBadgeColumn } from './genre-badge-column';
+import { GenreColumn } from './genre-column';
+import { ImageColumn } from './image-column';
+import { LastPlayedColumn } from './last-played-column';
+import { PathColumn } from './path-column';
+import { PlayCountColumn } from './play-count-column';
+import { RatingColumn } from './rating-column';
+import { ReleaseDateColumn } from './release-date-column';
+import { RowIndexColumn } from './row-index-column';
+import { SampleRateColumn } from './sample-rate-column';
+import { SizeColumn } from './size-column';
+import { TitleArtistColumn } from './title-artist-column';
+import { TitleColumn } from './title-column';
+import { TitleCombinedColumn } from './title-combined-column';
+import { TrackNumberColumn } from './track-number-column';
+import { YearColumn } from './year-column';
+
+import { TableColumn } from '/@/shared/types/types';
+
+type CellComponent = (props: ItemDetailListCellProps) => ReactNode;
+
+const COLUMN_MAP: Partial<Record<TableColumn, CellComponent>> = {
+    [TableColumn.ACTIONS]: ActionsColumn,
+    [TableColumn.ALBUM]: AlbumColumn,
+    [TableColumn.ALBUM_ARTIST]: AlbumArtistColumn,
+    [TableColumn.ARTIST]: ArtistColumn,
+    [TableColumn.BIT_DEPTH]: BitDepthColumn,
+    [TableColumn.BIT_RATE]: BitRateColumn,
+    [TableColumn.BPM]: BpmColumn,
+    [TableColumn.CHANNELS]: ChannelsColumn,
+    [TableColumn.CODEC]: CodecColumn,
+    [TableColumn.COMMENT]: CommentColumn,
+    [TableColumn.COMPOSER]: ComposerColumn,
+    [TableColumn.DATE_ADDED]: DateAddedColumn,
+    [TableColumn.DISC_NUMBER]: DiscNumberColumn,
+    [TableColumn.DURATION]: DurationColumn,
+    [TableColumn.GENRE]: GenreColumn,
+    [TableColumn.GENRE_BADGE]: GenreBadgeColumn,
+    [TableColumn.IMAGE]: ImageColumn,
+    [TableColumn.LAST_PLAYED]: LastPlayedColumn,
+    [TableColumn.PATH]: PathColumn,
+    [TableColumn.PLAY_COUNT]: PlayCountColumn,
+    [TableColumn.RELEASE_DATE]: ReleaseDateColumn,
+    [TableColumn.ROW_INDEX]: RowIndexColumn,
+    [TableColumn.SAMPLE_RATE]: SampleRateColumn,
+    [TableColumn.SIZE]: SizeColumn,
+    [TableColumn.TITLE]: TitleColumn,
+    [TableColumn.TITLE_ARTIST]: TitleArtistColumn,
+    [TableColumn.TITLE_COMBINED]: TitleCombinedColumn,
+    [TableColumn.TRACK_NUMBER]: TrackNumberColumn,
+    [TableColumn.USER_FAVORITE]: FavoriteColumn,
+    [TableColumn.USER_RATING]: RatingColumn,
+    [TableColumn.YEAR]: YearColumn,
+};
+
+export type DetailListCellComponentProps = ItemDetailListCellProps & { columnId?: string };
+
+export function getDetailListCellComponent(
+    columnId: string | TableColumn,
+): (props: DetailListCellComponentProps) => ReactNode {
+    const Component = COLUMN_MAP[columnId as TableColumn];
+    if (Component) {
+        return Component as (props: DetailListCellComponentProps) => ReactNode;
+    }
+    return (props: DetailListCellComponentProps) =>
+        React.createElement(DefaultColumn, {
+            columnId: props.columnId ?? (columnId as string),
+            song: props.song,
+        });
+}
+
+export type { ItemDetailListCellProps } from './types';
+
+export {
+    ActionsColumn,
+    AlbumArtistColumn,
+    AlbumColumn,
+    ArtistColumn,
+    BitDepthColumn,
+    BitRateColumn,
+    BpmColumn,
+    ChannelsColumn,
+    CodecColumn,
+    CommentColumn,
+    ComposerColumn,
+    DateAddedColumn,
+    DefaultColumn,
+    DiscNumberColumn,
+    DurationColumn,
+    FavoriteColumn,
+    GenreBadgeColumn,
+    GenreColumn,
+    ImageColumn,
+    LastPlayedColumn,
+    PathColumn,
+    PlayCountColumn,
+    RatingColumn,
+    ReleaseDateColumn,
+    RowIndexColumn,
+    SampleRateColumn,
+    SizeColumn,
+    TitleArtistColumn,
+    TitleColumn,
+    TitleCombinedColumn,
+    TrackNumberColumn,
+    YearColumn,
+};

src/renderer/components/item-list/item-detail-list/columns/last-played-column.tsx

@@ -0,0 +1,6 @@
+import { ItemDetailListCellProps } from './types';
+
+import { formatDateRelative } from '/@/renderer/utils/format';
+
+export const LastPlayedColumn = ({ song }: ItemDetailListCellProps) =>
+    song.lastPlayedAt ? formatDateRelative(song.lastPlayedAt) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/path-column.tsx

@@ -0,0 +1,3 @@
+import { ItemDetailListCellProps } from './types';
+
+export const PathColumn = ({ song }: ItemDetailListCellProps) => song.path ?? <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/play-count-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const PlayCountColumn = ({ song }: ItemDetailListCellProps) =>
+    song.playCount ? String(song.playCount) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/rating-column.tsx

@@ -0,0 +1,29 @@
+import { ItemDetailListCellProps } from './types';
+
+import { useIsMutatingRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
+import { Rating } from '/@/shared/components/rating/rating';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const RatingColumn = ({ controls, internalState, song }: ItemDetailListCellProps) => {
+    const isMutatingRating = useIsMutatingRating();
+    const value = song.userRating ?? 0;
+
+    return (
+        <Rating
+            onChange={(rating) => {
+                const index = internalState?.findItemIndex(song.id) ?? -1;
+                controls?.onRating?.({
+                    event: null,
+                    index,
+                    internalState: internalState ?? undefined,
+                    item: song,
+                    itemType: LibraryItem.SONG,
+                    rating,
+                });
+            }}
+            readOnly={isMutatingRating}
+            size="xs"
+            value={value}
+        />
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/release-date-column.tsx

@@ -0,0 +1,6 @@
+import { ItemDetailListCellProps } from './types';
+
+import { formatDateAbsoluteUTC } from '/@/renderer/utils/format';
+
+export const ReleaseDateColumn = ({ song }: ItemDetailListCellProps) =>
+    song.releaseDate ? formatDateAbsoluteUTC(song.releaseDate) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/row-index-column.module.css

@@ -0,0 +1,5 @@
+.icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/renderer/components/item-list/item-detail-list/columns/row-index-column.tsx

@@ -0,0 +1,23 @@
+import styles from './row-index-column.module.css';
+import { ItemDetailListCellProps } from './types';
+
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { usePlayerStatus } from '/@/renderer/store';
+import { Icon } from '/@/shared/components/icon/icon';
+import { PlayerStatus } from '/@/shared/types/types';
+
+export const RowIndexColumn = ({ rowIndex, song }: ItemDetailListCellProps) => {
+    const status = usePlayerStatus();
+    const { isActive } = useIsCurrentSong(song);
+    const isPlaying = isActive && status === PlayerStatus.PLAYING;
+
+    if (isActive) {
+        return (
+            <div className={styles.iconWrapper}>
+                <Icon fill="primary" icon={isPlaying ? 'mediaPlay' : 'mediaPause'} />
+            </div>
+        );
+    }
+
+    return <>{String((rowIndex ?? 0) + 1)}</>;
+};

src/renderer/components/item-list/item-detail-list/columns/sample-rate-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const SampleRateColumn = ({ song }: ItemDetailListCellProps) =>
+    song.sampleRate ? `${song.sampleRate} Hz` : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/size-column.tsx

@@ -0,0 +1,6 @@
+import { ItemDetailListCellProps } from './types';
+
+import { formatSizeString } from '/@/renderer/utils/format';
+
+export const SizeColumn = ({ song }: ItemDetailListCellProps) =>
+    song.size ? formatSizeString(song.size) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/columns/title-artist-column.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+import styles from './title-column.module.css';
+
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+
+export const TitleArtistColumn = ({ song }: ItemDetailListCellProps) => {
+    const { isActive } = useIsCurrentSong(song);
+
+    return (
+        <span className={clsx({ [styles.active]: isActive })}>
+            <ExplicitIndicator explicitStatus={song.explicitStatus} />
+            {[song.name, song.artistName].filter(Boolean).join(' — ') ?? <>&nbsp;</>}
+        </span>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/title-column.module.css

@@ -0,0 +1,3 @@
+.active {
+    color: var(--theme-colors-primary);
+}

src/renderer/components/item-list/item-detail-list/columns/title-column.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+import styles from './title-column.module.css';
+
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+
+export const TitleColumn = ({ song }: ItemDetailListCellProps) => {
+    const { isActive } = useIsCurrentSong(song);
+
+    return (
+        <span className={clsx({ [styles.active]: isActive })}>
+            <ExplicitIndicator explicitStatus={song.explicitStatus} />
+            {song.name ?? <>&nbsp;</>}
+        </span>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/title-combined-column.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+import styles from './title-column.module.css';
+
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
+
+export const TitleCombinedColumn = ({ song }: ItemDetailListCellProps) => {
+    const { isActive } = useIsCurrentSong(song);
+
+    return (
+        <span className={clsx({ [styles.active]: isActive })}>
+            <ExplicitIndicator explicitStatus={song.explicitStatus} />
+            {[song.name, song.artistName].filter(Boolean).join(' — ') ?? <>&nbsp;</>}
+        </span>
+    );
+};

src/renderer/components/item-list/item-detail-list/columns/track-number-column.tsx

@@ -0,0 +1,7 @@
+import { ItemDetailListCellProps } from './types';
+
+export const TrackNumberColumn = ({ song }: ItemDetailListCellProps) => {
+    const disc = song.discNumber ?? 1;
+    const track = song.trackNumber.toString().padStart(2, '0');
+    return `${disc}-${track}`;
+};

src/renderer/components/item-list/item-detail-list/columns/types.ts

@@ -0,0 +1,14 @@
+import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { ItemControls } from '/@/renderer/components/item-list/types';
+import { Song } from '/@/shared/types/domain-types';
+
+export interface ItemDetailListCellProps {
+    controls?: ItemControls;
+    internalState?: ItemListStateActions;
+    isMutatingFavorite?: boolean;
+    isRowHovered?: boolean;
+    onFavoriteClick?: (song: Song) => void;
+    rowIndex?: number;
+    size?: 'compact' | 'default' | 'large';
+    song: Song;
+}

src/renderer/components/item-list/item-detail-list/columns/year-column.tsx

@@ -0,0 +1,4 @@
+import { ItemDetailListCellProps } from './types';
+
+export const YearColumn = ({ song }: ItemDetailListCellProps) =>
+    song.releaseYear ? String(song.releaseYear) : <>&nbsp;</>;

src/renderer/components/item-list/item-detail-list/item-detail-list.module.css

@@ -0,0 +1,556 @@
+.container {
+    position: relative;
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 0;
+    overflow: auto;
+}
+
+.placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+.detail-list-header {
+    display: grid;
+    flex-shrink: 0;
+    grid-template-columns: 240px 1fr;
+    gap: var(--theme-spacing-md);
+    padding: 0 var(--theme-spacing-md);
+    font-size: var(--theme-font-size-sm);
+    user-select: none;
+    background-color: var(--theme-colors-background);
+    border-bottom: 1px solid var(--theme-colors-border);
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.header-left-album-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--theme-font-size-sm);
+    font-weight: 500;
+    color: var(--theme-colors-foreground);
+    white-space: nowrap;
+}
+
+.header-right {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.tracks-table-header {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+}
+
+.tracks-table-header-size-compact {
+    height: 32px;
+    min-height: 32px;
+}
+
+.tracks-table-header-size-default {
+    height: 40px;
+    min-height: 40px;
+}
+
+.tracks-table-header-size-large {
+    height: 48px;
+    min-height: 48px;
+}
+
+.track-header-cell {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    min-height: 60%;
+    padding-right: var(--theme-spacing-sm);
+    padding-left: var(--theme-spacing-sm);
+    overflow: visible;
+}
+
+.track-header-cell-no-h-padding {
+    padding-right: 0;
+    padding-left: 0;
+}
+
+.track-header-cell-with-vertical-border {
+    border-right: 1px solid var(--theme-colors-border);
+}
+
+.track-header-cell-dragging {
+    cursor: grabbing;
+    opacity: 0.5;
+}
+
+.track-header-cell-dragged-over-left::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    width: 3px;
+    content: '';
+    background-color: var(--theme-colors-primary);
+}
+
+.track-header-cell-dragged-over-right::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    width: 3px;
+    content: '';
+    background-color: var(--theme-colors-primary);
+}
+
+.track-header-cell:hover .resize-handle {
+    opacity: 1;
+}
+
+.track-header-cell:hover .resize-handle::before {
+    background-color: var(--theme-colors-border);
+}
+
+.resize-handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    width: 2px;
+    margin-right: -4px;
+    cursor: col-resize;
+    background: var(--theme-colors-border);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+/* .resize-handle::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 2px;
+    content: '';
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+} */
+
+.resize-handle-left {
+    left: 0;
+    margin-right: 0;
+    margin-left: -4px;
+}
+
+.resize-handle-left::before {
+    right: auto;
+    left: 0;
+}
+
+.resize-handle-right {
+    right: 0;
+    margin-right: 0;
+}
+
+.resize-handle-dragging {
+    opacity: 1;
+}
+
+.resize-handle:hover {
+    opacity: 1;
+}
+
+.row {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    gap: var(--theme-spacing-md);
+    padding: var(--theme-spacing-md);
+    border-bottom: 1px solid var(--theme-colors-border);
+}
+
+.skeleton-column-wrapper {
+    box-sizing: border-box;
+    min-width: 0;
+}
+
+.image-wrapper {
+    position: relative;
+    display: block;
+    width: 100%;
+    aspect-ratio: 1;
+    overflow: hidden;
+    color: inherit;
+    text-decoration: none;
+    border-radius: var(--theme-radius-md);
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        content: '';
+        background-color: rgb(0 0 0);
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover {
+        @mixin dark {
+            &::before {
+                opacity: 0.7;
+            }
+        }
+
+        @mixin light {
+            &::before {
+                opacity: 0.5;
+            }
+        }
+    }
+
+    &:hover .favorite-badge,
+    &:hover .rating-badge {
+        opacity: 0;
+    }
+}
+
+.favorite-badge {
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    z-index: 1;
+    width: 80px;
+    height: 80px;
+    pointer-events: none;
+    background-color: var(--theme-colors-primary);
+    box-shadow: 0 0 10px 8px rgb(0 0 0 / 80%);
+    opacity: 1;
+    transform: rotate(-45deg);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.rating-badge {
+    position: absolute;
+    top: var(--theme-spacing-sm);
+    right: var(--theme-spacing-sm);
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--theme-spacing-xs) var(--theme-spacing-sm);
+    font-size: var(--theme-font-size-md);
+    font-weight: 600;
+    color: var(--theme-colors-foreground);
+    text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
+    pointer-events: none;
+    background-color: var(--theme-colors-primary);
+    border-radius: var(--theme-radius-md);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 50%);
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+}
+
+.row .image {
+    object-fit: var(--theme-image-fit);
+    border-radius: var(--theme-radius-md);
+}
+
+.row .metadata {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-xs);
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--theme-font-size-md);
+    text-align: center;
+}
+
+.row .title {
+    font-weight: 500;
+    color: inherit;
+    text-decoration: none;
+}
+
+.row .title:hover {
+    text-decoration: underline;
+}
+
+.row .artist {
+    font-size: var(--theme-font-size-sm);
+    color: var(--theme-colors-foreground-muted);
+    text-decoration: none;
+}
+
+.row .artist-plain-text:hover {
+    text-decoration: underline;
+}
+
+.row .metadata-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+.row .metadata-link:hover {
+    color: var(--theme-colors-foreground);
+    text-decoration: underline;
+}
+
+.row .metadata-extra {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-xs);
+    align-items: center;
+    width: 100%;
+    font-size: var(--theme-font-size-sm);
+    color: var(--theme-colors-foreground-muted);
+    text-align: center;
+}
+
+.row .metadata-line {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap-style: balance;
+    white-space: nowrap;
+}
+
+.row .metadata-line-clamp-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+
+.row .right {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.row .tracks-table {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-size: var(--theme-font-size-sm);
+}
+
+.row .track-row {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.row .track-header-cell {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.row .track-cell {
+    min-width: 0;
+    padding-right: var(--theme-spacing-sm);
+    padding-left: var(--theme-spacing-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.row .track-row-size-compact {
+    height: 32px;
+    min-height: 32px;
+    max-height: 32px;
+}
+
+.row .track-row-size-default {
+    height: 40px;
+    min-height: 40px;
+    max-height: 40px;
+}
+
+.row .track-row-size-large {
+    height: 48px;
+    min-height: 48px;
+    max-height: 48px;
+}
+
+.row .track-cell-muted {
+    color: var(--theme-colors-foreground-muted);
+}
+
+.row .track-cell-with-vertical-border {
+    border-right: 1px solid transparent;
+}
+
+.row .track-cell-vertical-border-visible {
+    border-right-color: var(--theme-colors-border);
+}
+
+.row .track-cell-image {
+    display: flex;
+    align-self: stretch;
+    min-height: 0;
+    max-height: 100%;
+    padding-right: var(--theme-spacing-sm);
+    padding-left: var(--theme-spacing-sm);
+    overflow: hidden;
+}
+
+.row .track-cell-no-h-padding {
+    padding-right: 0;
+    padding-left: 0;
+}
+
+.track-row-dragging {
+    opacity: 0.5;
+}
+
+.track-row.track-row-alternate-even {
+    background-color: var(--theme-colors-background);
+}
+
+.track-row.track-row-alternate-odd {
+    @mixin dark {
+        background-color: darken(var(--theme-colors-background), 30%);
+    }
+
+    @mixin light {
+        background-color: darken(var(--theme-colors-background), 2%);
+    }
+}
+
+.track-row.track-row-selected {
+    @mixin dark {
+        background-color: lighten(var(--theme-colors-surface), 5%);
+    }
+
+    @mixin light {
+        background-color: darken(var(--theme-colors-surface), 5%);
+    }
+}
+
+.track-row.track-row-with-horizontal-border {
+    border-top: 1px solid transparent;
+}
+
+.track-row.track-row-horizontal-border-visible {
+    border-top-color: var(--theme-colors-border);
+}
+
+.track-row.track-row-hover-highlight-enabled {
+    position: relative;
+}
+
+.track-row.track-row-hover-highlight-enabled .track-cell {
+    position: relative;
+    z-index: 2;
+}
+
+.track-row.track-row-hover-highlight-enabled:hover::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background-color: var(--theme-colors-surface);
+    opacity: 0.7;
+}
+
+.skeleton-image-container {
+    justify-content: center;
+}
+
+.skeleton-image {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: var(--theme-radius-md);
+}
+
+.skeleton-title-container {
+    justify-content: center;
+}
+
+.skeleton-title {
+    width: 75%;
+    height: 1.25rem;
+}
+
+.skeleton-artist-container {
+    justify-content: center;
+}
+
+.skeleton-artist {
+    width: 50%;
+    height: 1rem;
+}
+
+.skeleton-tracks {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.skeleton-track-row {
+    display: grid;
+    grid-template-columns: 40px 1fr 8rem;
+    gap: var(--theme-spacing-sm);
+    align-items: center;
+    padding-right: var(--theme-spacing-sm);
+    padding-left: var(--theme-spacing-sm);
+}
+
+.skeleton-tracks-size-compact .skeleton-track-row {
+    height: 32px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.skeleton-tracks-size-default .skeleton-track-row {
+    height: 40px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.skeleton-tracks-size-large .skeleton-track-row {
+    height: 48px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.skeleton-track-cell {
+    width: 100%;
+    height: 1rem;
+}
+
+.skeleton-track-cell-title {
+    width: 100%;
+    min-width: 0;
+    height: 1rem;
+}

src/renderer/components/item-list/item-detail-list/utils.ts

@@ -0,0 +1,65 @@
+import { TableColumn } from '/@/shared/types/types';
+
+const FIXED_TRACK_COLUMN_WIDTHS: Partial<Record<TableColumn, number>> = {
+    [TableColumn.ACTIONS]: 32,
+    [TableColumn.BIT_DEPTH]: 80,
+    [TableColumn.BIT_RATE]: 80,
+    [TableColumn.BPM]: 56,
+    [TableColumn.CHANNELS]: 80,
+    [TableColumn.CODEC]: 80,
+    [TableColumn.DATE_ADDED]: 128,
+    [TableColumn.DISC_NUMBER]: 36,
+    [TableColumn.DURATION]: 72,
+    [TableColumn.RELEASE_DATE]: 128,
+    [TableColumn.SAMPLE_RATE]: 90,
+    [TableColumn.TRACK_NUMBER]: 56,
+    [TableColumn.USER_FAVORITE]: 32,
+    [TableColumn.USER_RATING]: 64,
+    [TableColumn.YEAR]: 56,
+};
+
+const HOVER_ONLY_COLUMNS: TableColumn[] = [
+    TableColumn.ACTIONS,
+    TableColumn.USER_FAVORITE,
+    TableColumn.USER_RATING,
+];
+
+const NO_HORIZONTAL_PADDING_COLUMNS: TableColumn[] = [
+    TableColumn.ACTIONS,
+    TableColumn.USER_FAVORITE,
+    TableColumn.USER_RATING,
+];
+
+export function getTrackColumnFixed(columnId: TableColumn): {
+    fixedWidth: number;
+    isFixedColumn: boolean;
+} {
+    const width = FIXED_TRACK_COLUMN_WIDTHS[columnId];
+    return width !== undefined
+        ? { fixedWidth: width, isFixedColumn: true }
+        : { fixedWidth: 0, isFixedColumn: false };
+}
+
+export function isNoHorizontalPaddingColumn(columnId: TableColumn): boolean {
+    return NO_HORIZONTAL_PADDING_COLUMNS.includes(columnId);
+}
+
+export function isTrackColumnHoverOnly(columnId: TableColumn): boolean {
+    return HOVER_ONLY_COLUMNS.includes(columnId);
+}
+
+export function shouldShowHoverOnlyColumnContent(
+    columnId: TableColumn,
+    isRowHovered: boolean,
+    song: { userFavorite?: boolean | null; userRating?: null | number },
+): boolean {
+    if (!HOVER_ONLY_COLUMNS.includes(columnId)) {
+        return true;
+    }
+
+    return (
+        isRowHovered ||
+        (columnId === TableColumn.USER_FAVORITE && song.userFavorite !== false) ||
+        (columnId === TableColumn.USER_RATING && song.userRating != null)
+    );
+}

src/renderer/components/item-list/item-table-list/columns/image-column.tsx

@@ -54,6 +54,7 @@ const ImageColumnBase = (props: ItemTableListInnerColumn) => {
                 itemType: props.itemType,
                 meta: {
                     playType,
+                    singleSongOnly: true,
                 },
             });
             return;

src/renderer/components/item-list/item-table-list/columns/title-artist-column.module.css

@@ -5,6 +5,8 @@
     height: 100%;
 }
 
+
+
 .text-container {
     display: grid;
     grid-template-rows: 1fr 1fr;
@@ -41,6 +43,7 @@ a.title {
     width: auto;
 }
 
+
 .artists {
     display: block;
     width: 100%;
@@ -62,4 +65,3 @@ a.title {
 .active {
     color: var(--theme-colors-primary);
 }
-

src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx

@@ -14,10 +14,9 @@ import {
 import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
-import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
-import { Folder, LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
+import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 
 export const DefaultTitleArtistColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
@@ -55,10 +54,6 @@ export const DefaultTitleArtistColumn = (props: ItemTableListInnerColumn) => {
                 >
                     <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
                         <ExplicitIndicator explicitStatus={item?.explicitStatus} />
-                        <ExternalSongIndicator
-                            isExternal={item?._serverType === ServerType.EXTERNAL}
-                            size="sm"
-                        />
                         {item.name as string}
                     </Text>
                     <div className={styles.artists}>
@@ -128,10 +123,6 @@ export const QueueSongTitleArtistColumn = (props: ItemTableListInnerColumn) => {
                         {...titleLinkProps}
                     >
                         <ExplicitIndicator explicitStatus={song?.explicitStatus} />
-                        <ExternalSongIndicator
-                            isExternal={song?._serverType === ServerType.EXTERNAL}
-                            size="sm"
-                        />
                         {row.name as string}
                         {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                             <Text

src/renderer/components/item-list/item-table-list/columns/title-column.module.css

@@ -23,4 +23,3 @@ a.name-container {
 .active {
     color: var(--theme-colors-primary);
 }
-

src/renderer/components/item-list/item-table-list/columns/title-column.tsx

@@ -12,9 +12,8 @@ import {
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list/item-table-list-context';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
-import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
 import { Text } from '/@/shared/components/text/text';
-import { LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
+import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 
 const TitleColumnBase = (props: ItemTableListInnerColumn) => {
     const { itemType } = props;
@@ -61,10 +60,6 @@ function DefaultTitleColumn(props: ItemTableListInnerColumn) {
                     {...titleLinkProps}
                 >
                     <ExplicitIndicator explicitStatus={item?.explicitStatus} />
-                    <ExternalSongIndicator
-                        isExternal={item?._serverType === ServerType.EXTERNAL}
-                        size="sm"
-                    />
                     {row}
                 </Text>
             </TableColumnContainer>
@@ -111,7 +106,6 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
                     {...titleLinkProps}
                 >
                     <ExplicitIndicator explicitStatus={song?.explicitStatus} />
-                    <ExternalSongIndicator isExternal={song?._serverType === ServerType.EXTERNAL} />
                     {row}
                     {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                         <Text

src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css

@@ -42,6 +42,7 @@ a.title {
     width: auto;
 }
 
+
 .artists {
     display: block;
     width: 100%;
@@ -93,4 +94,3 @@ a.title {
 .active {
     color: var(--theme-colors-primary);
 }
-

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -21,10 +21,9 @@ import {
 } from '/@/renderer/features/shared/components/play-button-group';
 import { usePlayButtonBehavior } from '/@/renderer/store';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
-import { ExternalSongIndicator } from '/@/shared/components/external-song-indicator/external-song-indicator';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
-import { Folder, LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
+import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
@@ -59,6 +58,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                 itemType: props.itemType,
                 meta: {
                     playType,
+                    singleSongOnly: true,
                 },
             });
             return;
@@ -144,10 +144,6 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                 >
                     <Text className={styles.title} isNoSelect size="md" {...titleLinkProps}>
                         <ExplicitIndicator explicitStatus={item?.explicitStatus} />
-                        <ExternalSongIndicator
-                            isExternal={item?._serverType === ServerType.EXTERNAL}
-                            size="sm"
-                        />
                         {item.name as string}
                     </Text>
                     <div className={styles.artists}>
@@ -205,6 +201,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                 itemType: props.itemType,
                 meta: {
                     playType,
+                    singleSongOnly: true,
                 },
             });
             return;
@@ -299,10 +296,6 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                         {...titleLinkProps}
                     >
                         <ExplicitIndicator explicitStatus={song?.explicitStatus} />
-                        <ExternalSongIndicator
-                            isExternal={song?._serverType === ServerType.EXTERNAL}
-                            size="sm"
-                        />
                         {row.name as string}
                         {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
                             <Text

src/renderer/components/item-list/item-table-list/hooks/use-item-drag-drop-state.tsx

@@ -7,8 +7,8 @@ import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { Folder, LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import { DragOperation, DragTarget, DragTargetMap } from '/@/shared/types/drag-and-drop';
 
-interface DragDropState {
-    dragRef: null | React.Ref<HTMLDivElement>;
+interface DragDropState<TElement extends HTMLElement = HTMLDivElement> {
+    dragRef: null | React.Ref<TElement>;
     isDraggedOver: 'bottom' | 'top' | null;
     isDragging: boolean;
 }
@@ -23,7 +23,7 @@ interface UseItemDragDropStateProps {
     playlistId?: string;
 }
 
-export const useItemDragDropState = ({
+export const useItemDragDropState = <TElement extends HTMLElement = HTMLDivElement>({
     enableDrag,
     internalState,
     isDataRow,
@@ -31,14 +31,14 @@ export const useItemDragDropState = ({
     itemType,
     playerContext,
     playlistId,
-}: UseItemDragDropStateProps): DragDropState => {
+}: UseItemDragDropStateProps): DragDropState<TElement> => {
     const shouldEnableDrag = enableDrag && isDataRow && !!item;
 
     const {
         isDraggedOver,
         isDragging: isDraggingLocal,
         ref: dragRef,
-    } = useDragDrop<HTMLDivElement>({
+    } = useDragDrop<TElement>({
         drag: {
             getId: () => {
                 if (!item || !isDataRow) {

src/renderer/components/item-list/item-table-list/item-table-list-column.module.css

@@ -26,6 +26,11 @@
     padding: var(--theme-spacing-xs) var(--theme-spacing-xl);
 }
 
+.container.no-horizontal-padding {
+    padding-right: 0;
+    padding-left: 0;
+}
+
 .container.center {
     align-items: center;
     text-align: center;
@@ -205,6 +210,11 @@
     padding: 0 var(--theme-spacing-xl);
 }
 
+.header-container.no-horizontal-padding {
+    padding-right: 0;
+    padding-left: 0;
+}
+
 .header-dragging {
     cursor: grabbing;
     opacity: 0.5;

src/renderer/components/item-list/item-table-list/item-table-list-column.tsx

@@ -26,6 +26,7 @@ import styles from './item-table-list-column.module.css';
 
 import i18n from '/@/i18n/i18n';
 import { useItemSelectionState } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { isNoHorizontalPaddingColumn } from '/@/renderer/components/item-list/item-detail-list/utils';
 import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
 import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
 import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column';
@@ -479,6 +480,7 @@ export const TableColumnTextContainer = (
                 [styles.dragging]: isDataRow && isDragging,
                 [styles.large]: props.size === 'large',
                 [styles.left]: props.columns[props.columnIndex].align === 'start',
+                [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
                 [styles.paddingLg]: props.cellPadding === 'lg',
                 [styles.paddingMd]: props.cellPadding === 'md',
                 [styles.paddingSm]: props.cellPadding === 'sm',
@@ -632,6 +634,7 @@ export const TableColumnContainer = (
                 [styles.dragging]: isDataRow && isDragging,
                 [styles.large]: props.size === 'large',
                 [styles.left]: props.columns[props.columnIndex].align === 'start',
+                [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
                 [styles.paddingLg]: props.cellPadding === 'lg',
                 [styles.paddingMd]: props.cellPadding === 'md',
                 [styles.paddingSm]: props.cellPadding === 'sm',
@@ -850,6 +853,7 @@ export const TableColumnHeaderContainer = (
                 [styles.headerDraggedOverLeft]: isDraggedOver === 'left',
                 [styles.headerDraggedOverRight]: isDraggedOver === 'right',
                 [styles.headerDragging]: isDragging,
+                [styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
                 [styles.paddingLg]: props.cellPadding === 'lg',
                 [styles.paddingMd]: props.cellPadding === 'md',
                 [styles.paddingSm]: props.cellPadding === 'sm',
@@ -881,7 +885,7 @@ export const TableColumnHeaderContainer = (
     );
 };
 
-const columnLabelMap: Record<TableColumn, ReactNode | string> = {
+export const columnLabelMap: Record<TableColumn, ReactNode | string> = {
     [TableColumn.ACTIONS]: (
         <Flex className={styles.headerIconWrapper}>
             <Icon fill="default" icon="ellipsisHorizontal" />

src/renderer/components/item-list/types.ts

@@ -98,7 +98,7 @@ export interface ItemListTableComponentProps<TQuery> extends ItemListComponentPr
     enableRowHoverHighlight?: boolean;
     enableSelection?: boolean;
     enableVerticalBorders?: boolean;
-    size?: 'compact' | 'default';
+    size?: 'compact' | 'default' | 'large';
 }
 
 export interface ItemTableListColumnConfig {

src/renderer/features/albums/api/album-api.ts

@@ -4,21 +4,13 @@ import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { getOptimizedListCount } from '/@/renderer/api/utils-list-count';
-import { fetchMbzReleaseAsAlbum } from '/@/renderer/features/musicbrainz/api/musicbrainz-api';
-import { getMbzReleaseIdFromAlbumId } from '/@/renderer/features/musicbrainz/utils';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 import { AlbumDetailQuery, AlbumListQuery, ListCountQuery } from '/@/shared/types/domain-types';
 
 export const albumQueries = {
     detail: (args: QueryHookArgs<AlbumDetailQuery>) => {
         return queryOptions({
-            queryFn: async ({ signal }) => {
-                const mbzReleaseId = getMbzReleaseIdFromAlbumId(args.query.id);
-
-                if (mbzReleaseId !== null) {
-                    return fetchMbzReleaseAsAlbum(mbzReleaseId);
-                }
-
+            queryFn: ({ signal }) => {
                 return api.controller.getAlbumDetail({
                     apiClientProps: { serverId: args.serverId, signal },
                     query: args.query,

src/renderer/features/albums/components/album-detail-content.tsx

@@ -20,7 +20,6 @@ import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table
 import { ItemControls } from '/@/renderer/components/item-list/types';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumInfiniteCarousel } from '/@/renderer/features/albums/components/album-infinite-carousel';
-import { isMbzAlbumId } from '/@/renderer/features/musicbrainz/utils';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import {
@@ -30,7 +29,7 @@ import {
 import { ListSortOrderToggleButtonControlled } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
 import { FILTER_KEYS, searchLibraryItems } from '/@/renderer/features/shared/utils';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServerId, usePlayerSong } from '/@/renderer/store';
+import { useCurrentServer, usePlayerSong } from '/@/renderer/store';
 import { useExternalLinks, useSettingsStore } from '/@/renderer/store/settings.store';
 import { sentenceCase, titleCase } from '/@/renderer/utils';
 import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
@@ -120,13 +119,6 @@ const AlbumMetadataTags = ({ album }: AlbumMetadataTagsProps) => {
 
         const items: Array<{ id: string; value: ReactNode | string | undefined }> = [];
 
-        if (album._serverType === ServerType.EXTERNAL) {
-            items.push({
-                id: 'unavailable',
-                value: t('common.unavailable', { postProcess: 'sentenceCase' }),
-            });
-        }
-
         items.push(
             ...releaseTypes,
             {
@@ -370,14 +362,9 @@ const AlbumMetadataExternalLinks = ({
 
 export const AlbumDetailContent = () => {
     const { albumId } = useParams() as { albumId: string };
-    const serverId = useCurrentServerId();
-    const isMbz = isMbzAlbumId(albumId);
-
+    const server = useCurrentServer();
     const detailQuery = useSuspenseQuery(
-        albumQueries.detail({
-            query: { id: albumId },
-            serverId: isMbz ? 'musicbrainz' : serverId,
-        }),
+        albumQueries.detail({ query: { id: albumId }, serverId: server.id }),
     );
 
     const { externalLinks, lastFM, musicBrainz } = useExternalLinks();

src/renderer/features/albums/components/album-detail-header.tsx

@@ -8,7 +8,6 @@ import styles from './album-detail-header.module.css';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
-import { isMbzAlbumId } from '/@/renderer/features/musicbrainz/utils';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import {
     LibraryHeader,
@@ -17,7 +16,7 @@ import {
 import { useSetFavorite } from '/@/renderer/features/shared/hooks/use-set-favorite';
 import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServerId, useIntegrationsSettings, useShowRatings } from '/@/renderer/store';
+import { useCurrentServer, useShowRatings } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { formatDateAbsoluteUTC, formatDurationString } from '/@/renderer/utils';
 import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
@@ -31,22 +30,13 @@ import { Play } from '/@/shared/types/types';
 export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
     const { albumId } = useParams() as { albumId: string };
     const { t } = useTranslation();
-    const serverId = useCurrentServerId();
+    const server = useCurrentServer();
     const showRatings = useShowRatings();
-
-    const isMbz = isMbzAlbumId(albumId);
     const detailQuery = useQuery(
-        albumQueries.detail({
-            query: { id: albumId },
-            serverId: isMbz ? 'musicbrainz' : serverId,
-        }),
+        albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
     );
 
-    const isExternal = detailQuery?.data?._serverType === ServerType.EXTERNAL;
-    const { youtube: youtubeEnabled } = useIntegrationsSettings();
-
     const showRating =
-        !isExternal &&
         showRatings &&
         (detailQuery?.data?._serverType === ServerType.NAVIDROME ||
             detailQuery?.data?._serverType === ServerType.SUBSONIC);
@@ -90,8 +80,8 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
         : undefined;
 
     const handlePlay = (type?: Play) => {
-        if (isExternal || !serverId || !albumId) return;
-        addToQueueByFetch(serverId, [albumId], LibraryItem.ALBUM, type || playButtonBehavior);
+        if (!server?.id || !albumId) return;
+        addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, type || playButtonBehavior);
     };
 
     const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -243,8 +233,8 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
                         {metadataItems.map((item, index) => (
                             <Fragment key={item.id}>
                                 {index > 0 && (
-                                    <Text fw={400} isMuted isNoSelect>
-                                        •
+                                    <Text isMuted isNoSelect>
+                                        <Separator />
                                     </Text>
                                 )}
                                 <Text fw={400}>{item.value}</Text>
@@ -258,7 +248,6 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
                         />
                     </Group>
                     <LibraryHeaderMenu
-                        disabled={isExternal && !youtubeEnabled}
                         favorite={detailQuery?.data?.userFavorite}
                         onFavorite={handleFavorite}
                         onMore={handleMoreOptions}

src/renderer/features/albums/components/album-list-content.tsx

@@ -36,6 +36,18 @@ const AlbumListPaginatedTable = lazy(() =>
     })),
 );
 
+const AlbumListInfiniteDetail = lazy(() =>
+    import('/@/renderer/features/albums/components/album-list-infinite-detail').then((module) => ({
+        default: module.AlbumListInfiniteDetail,
+    })),
+);
+
+const AlbumListPaginatedDetail = lazy(() =>
+    import('/@/renderer/features/albums/components/album-list-paginated-detail').then((module) => ({
+        default: module.AlbumListPaginatedDetail,
+    })),
+);
+
 const AlbumListFilters = () => {
     return (
         <ListWithSidebarContainer.SidebarPortal>
@@ -62,13 +74,16 @@ export const AlbumListContent = () => {
 };
 
 const AlbumListSuspenseContainer = () => {
-    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
+    const { detail, display, grid, itemsPerPage, pagination, table } = useListSettings(
+        ItemListKey.ALBUM,
+    );
 
     const { customFilters } = useListContext();
 
     return (
         <Suspense fallback={<Spinner container />}>
             <AlbumListView
+                detail={detail}
                 display={display}
                 grid={grid}
                 itemsPerPage={itemsPerPage}
@@ -83,13 +98,17 @@ const AlbumListSuspenseContainer = () => {
 export type OverrideAlbumListQuery = Omit<Partial<AlbumListQuery>, 'limit' | 'startIndex'>;
 
 export const AlbumListView = ({
+    detail,
     display,
     grid,
     itemsPerPage,
     overrideQuery,
     pagination,
     table,
-}: ItemListSettings & { overrideQuery?: OverrideAlbumListQuery }) => {
+}: ItemListSettings & {
+    detail?: ItemListSettings['detail'];
+    overrideQuery?: OverrideAlbumListQuery;
+}) => {
     const server = useCurrentServer();
     const { pageKey } = useListContext();
 
@@ -179,6 +198,32 @@ export const AlbumListView = ({
                     return null;
             }
         }
+        case ListDisplayType.DETAIL: {
+            switch (pagination) {
+                case ListPaginationType.INFINITE: {
+                    return (
+                        <AlbumListInfiniteDetail
+                            enableHeader={detail?.enableHeader}
+                            itemsPerPage={itemsPerPage}
+                            query={mergedQuery}
+                            serverId={server.id}
+                        />
+                    );
+                }
+                case ListPaginationType.PAGINATED: {
+                    return (
+                        <AlbumListPaginatedDetail
+                            enableHeader={detail?.enableHeader}
+                            itemsPerPage={itemsPerPage}
+                            query={mergedQuery}
+                            serverId={server.id}
+                        />
+                    );
+                }
+                default:
+                    return null;
+            }
+        }
     }
 
     return null;

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
+import {
+    ALBUM_TABLE_COLUMNS,
+    SONG_TABLE_COLUMNS,
+} from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
@@ -92,8 +95,15 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
                 <ListRefreshButton listKey={pageKey as ItemListKey} />
             </Group>
             <Group gap="sm" wrap="nowrap">
-                <ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM} />
+                <ListDisplayTypeToggleButton enableDetail listKey={ItemListKey.ALBUM} />
                 <ListConfigMenu
+                    detailConfig={{
+                        optionsConfig: {
+                            autoFitColumns: { hidden: true },
+                        },
+                        tableColumnsData: SONG_TABLE_COLUMNS,
+                        tableKey: 'detail',
+                    }}
                     listKey={ItemListKey.ALBUM}
                     tableColumnsData={ALBUM_TABLE_COLUMNS}
                 />

src/renderer/features/albums/components/album-list-infinite-detail.tsx

@@ -0,0 +1,69 @@
+import { UseSuspenseQueryOptions } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
+import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
+import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
+import { ItemDetailList } from '/@/renderer/components/item-list/item-detail-list/item-detail-list';
+import { ItemListComponentProps } from '/@/renderer/components/item-list/types';
+import { albumQueries } from '/@/renderer/features/albums/api/album-api';
+import {
+    AlbumListQuery,
+    AlbumListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
+
+interface AlbumListInfiniteDetailProps extends ItemListComponentProps<AlbumListQuery> {
+    enableHeader?: boolean;
+}
+
+export const AlbumListInfiniteDetail = ({
+    enableHeader = true,
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    },
+    serverId,
+}: AlbumListInfiniteDetailProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM,
+        tableKey: 'detail',
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM,
+        tableKey: 'detail',
+    });
+
+    const { getItem, itemCount, loadedItems, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    return (
+        <ItemDetailList
+            data={loadedItems}
+            enableHeader={enableHeader}
+            getItem={getItem}
+            itemCount={itemCount}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+        />
+    );
+};

src/renderer/features/albums/components/album-list-paginated-detail.tsx

@@ -0,0 +1,80 @@
+import { UseSuspenseQueryOptions } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
+import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
+import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
+import { ItemDetailList } from '/@/renderer/components/item-list/item-detail-list/item-detail-list';
+import { ItemListWithPagination } from '/@/renderer/components/item-list/item-list-pagination/item-list-pagination';
+import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
+import { ItemListComponentProps } from '/@/renderer/components/item-list/types';
+import { albumQueries } from '/@/renderer/features/albums/api/album-api';
+import {
+    AlbumListQuery,
+    AlbumListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
+
+interface AlbumListPaginatedDetailProps extends ItemListComponentProps<AlbumListQuery> {
+    enableHeader?: boolean;
+}
+
+export const AlbumListPaginatedDetail = ({
+    enableHeader = true,
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    },
+    serverId,
+}: AlbumListPaginatedDetailProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM,
+        tableKey: 'detail',
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM,
+        tableKey: 'detail',
+    });
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemDetailList
+                currentPage={currentPage}
+                enableHeader={enableHeader}
+                items={data || []}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+            />
+        </ItemListWithPagination>
+    );
+};

src/renderer/features/albums/components/joined-artists.tsx

@@ -1,21 +1,28 @@
-import { Fragment } from 'react';
+import { Fragment, memo } from 'react';
 import { generatePath, Link } from 'react-router';
 
 import { AppRoute } from '/@/renderer/router/routes';
 import { Text, TextProps } from '/@/shared/components/text/text';
 import { AlbumArtist, RelatedAlbumArtist, RelatedArtist } from '/@/shared/types/domain-types';
 
+export const JOINED_ARTISTS_MUTED_PROPS = {
+    linkProps: { fw: 400, isMuted: true },
+    rootTextProps: { fw: 400, isMuted: true, size: 'sm' as const },
+} as const;
+
 interface JoinedArtistsProps {
     artistName: string;
     artists: AlbumArtist[] | RelatedAlbumArtist[] | RelatedArtist[];
     linkProps?: Partial<Omit<TextProps, 'children' | 'component' | 'to'>>;
+    readOnly?: boolean;
     rootTextProps?: Partial<Omit<TextProps, 'children' | 'component'>>;
 }
 
-export const JoinedArtists = ({
+const JoinedArtistsComponent = ({
     artistName,
     artists,
     linkProps,
+    readOnly = false,
     rootTextProps,
 }: JoinedArtistsProps) => {
     const parts: (
@@ -111,7 +118,7 @@ export const JoinedArtists = ({
                 {artists.map((artist, index) => (
                     <Fragment key={artist.id || `artist-${index}`}>
                         {index > 0 && ', '}
-                        {artist.id ? (
+                        {artist.id && !readOnly ? (
                             <Text
                                 component={Link}
                                 fw={500}
@@ -124,7 +131,7 @@ export const JoinedArtists = ({
                                 {artist.name}
                             </Text>
                         ) : (
-                            <Text fw={500} {...linkProps}>
+                            <Text component="span" fw={500} {...linkProps}>
                                 {artist.name}
                             </Text>
                         )}
@@ -152,7 +159,7 @@ export const JoinedArtists = ({
 
                 const { artist, text } = part;
 
-                if (artist.id) {
+                if (artist.id && !readOnly) {
                     return (
                         <Text
                             component={Link}
@@ -169,7 +176,7 @@ export const JoinedArtists = ({
                     );
                 }
                 return (
-                    <Text fw={500} key={`${artist.name}-${index}`} {...linkProps}>
+                    <Text component="span" fw={500} key={`${artist.name}-${index}`} {...linkProps}>
                         {text}
                     </Text>
                 );
@@ -180,7 +187,7 @@ export const JoinedArtists = ({
                     {unmatchedArtists.map((artist, index) => (
                         <Fragment key={artist.id}>
                             {index > 0 && ', '}
-                            {artist.id ? (
+                            {artist.id && !readOnly ? (
                                 <Text
                                     component={Link}
                                     fw={500}
@@ -192,6 +199,10 @@ export const JoinedArtists = ({
                                 >
                                     {artist.name}
                                 </Text>
+                            ) : artist.id ? (
+                                <Text component="span" fw={500} {...linkProps}>
+                                    {artist.name}
+                                </Text>
                             ) : (
                                 <Text component="span" isMuted>
                                     {artist.name}
@@ -205,6 +216,8 @@ export const JoinedArtists = ({
     );
 };
 
+export const JoinedArtists = memo(JoinedArtistsComponent);
+
 function escapeRegex(str: string): string {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -7,7 +7,6 @@ import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/nati
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
 import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
-import { isMbzAlbumId } from '/@/renderer/features/musicbrainz/utils';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import {
     LibraryBackgroundImage,
@@ -17,9 +16,9 @@ import { LibraryContainer } from '/@/renderer/features/shared/components/library
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { useFastAverageColor } from '/@/renderer/hooks';
-import { useAlbumBackground, useCurrentServerId, useIntegrationsSettings } from '/@/renderer/store';
+import { useAlbumBackground, useCurrentServer } from '/@/renderer/store';
 import { Spinner } from '/@/shared/components/spinner/spinner';
-import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
+import { LibraryItem } from '/@/shared/types/domain-types';
 
 const AlbumDetailRoute = () => {
     const scrollAreaRef = useRef<HTMLDivElement>(null);
@@ -27,24 +26,18 @@ const AlbumDetailRoute = () => {
     const { albumBackground, albumBackgroundBlur } = useAlbumBackground();
 
     const { albumId } = useParams() as { albumId: string };
-    const serverId = useCurrentServerId();
-    const { youtube: youtubeEnabled } = useIntegrationsSettings();
-    const isMbz = isMbzAlbumId(albumId);
+    const server = useCurrentServer();
 
     const location = useLocation();
 
     const detailQuery = useQuery({
-        ...albumQueries.detail({
-            query: { id: albumId },
-            serverId: isMbz ? 'musicbrainz' : serverId,
-        }),
+        ...albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
         placeholderData: location.state?.item,
     });
 
     const imageUrl =
         useItemImageUrl({
             id: detailQuery?.data?.imageId || undefined,
-            imageUrl: detailQuery?.data?.imageUrl || undefined,
             itemType: LibraryItem.ALBUM,
             type: 'itemCard',
         }) || '';
@@ -59,12 +52,10 @@ const AlbumDetailRoute = () => {
 
     const showBlurredImage = albumBackground;
 
-    if (isColorLoading || (detailQuery.isLoading && !detailQuery.data)) {
+    if (isColorLoading) {
         return <Spinner container />;
     }
 
-    const isExternal = detailQuery?.data?._serverType === ServerType.EXTERNAL;
-
     return (
         <AnimatedPage key={`album-detail-${albumId}`}>
             <NativeScrollArea
@@ -73,7 +64,6 @@ const AlbumDetailRoute = () => {
                     children: (
                         <LibraryHeaderBar>
                             <LibraryHeaderBar.PlayButton
-                                disabled={isExternal && !youtubeEnabled}
                                 ids={[albumId]}
                                 itemType={LibraryItem.ALBUM}
                                 variant="default"

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -24,7 +24,6 @@ import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table
 import { ItemControls } from '/@/renderer/components/item-list/types';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistGridCarousel } from '/@/renderer/features/artists/components/album-artist-grid-carousel';
-import { musicbrainzQueries } from '/@/renderer/features/musicbrainz/api/musicbrainz-api';
 import { useIsPlayerFetching, usePlayer } from '/@/renderer/features/player/context/player-context';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import {
@@ -1070,46 +1069,21 @@ const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumS
     const { t } = useTranslation();
 
     const itemsPerRow = getItemsPerRow(cq);
+    const albumCount = albums.length;
     const [showAll, setShowAll] = useState(false);
     const player = usePlayer();
     const serverId = useCurrentServerId();
 
-    const { albumCountBadge, nonExternalAlbums } = useMemo(() => {
-        const { external, nonExternal } = albums.reduce<{
-            external: typeof albums;
-            nonExternal: typeof albums;
-        }>(
-            (acc, album) => {
-                if (album._serverType === ServerType.EXTERNAL) {
-                    acc.external.push(album);
-                } else {
-                    acc.nonExternal.push(album);
-                }
-                return acc;
-            },
-            { external: [], nonExternal: [] },
-        );
-
-        const originalCount = nonExternal.length;
-        const externalCount = external.length;
-
-        return {
-            albumCountBadge:
-                externalCount > 0 ? `${originalCount} + ${externalCount}` : String(originalCount),
-            nonExternalAlbums: nonExternal,
-        };
-    }, [albums]);
-
     const displayedAlbums = showAll ? albums : albums.slice(0, MAX_SECTION_CARDS);
     const hasMoreAlbums = albums.length > MAX_SECTION_CARDS;
 
     const handlePlay = useCallback(
         (playType: Play) => {
-            if (nonExternalAlbums.length === 0) return;
-            const albumIds = nonExternalAlbums.map((album) => album.id);
+            if (albums.length === 0) return;
+            const albumIds = albums.map((album) => album.id);
             player.addToQueueByFetch(serverId, albumIds, LibraryItem.ALBUM, playType);
         },
-        [nonExternalAlbums, player, serverId],
+        [albums, player, serverId],
     );
 
     const handlePlayNext = usePlayButtonClick({
@@ -1146,11 +1120,11 @@ const AlbumSection = ({ albums, controls, cq, releaseType, rows, title }: AlbumS
                     <TextTitle fw={700} order={3}>
                         {title}
                     </TextTitle>
-                    <Badge variant="default">{albumCountBadge}</Badge>
+                    <Badge variant="default">{albumCount}</Badge>
                 </Group>
                 <div className={styles.albumSectionDividerContainer}>
                     <div className={styles.albumSectionDivider} />
-                    {nonExternalAlbums.length > 0 && (
+                    {albumCount > 0 && (
                         <ActionIconGroup>
                             <PlayTooltip type={Play.NOW}>
                                 <ActionIcon
@@ -1378,15 +1352,6 @@ interface ArtistAlbumsProps {
 const ArtistAlbums = ({ albumsQuery }: ArtistAlbumsProps) => {
     const { t } = useTranslation();
     const artistReleaseTypeItems = useArtistReleaseTypeItems();
-    const musicBrainzExcludeReleaseTypes = useSettingsStore(
-        (state) => state.integrations.musicBrainzExcludeReleaseTypes,
-    );
-    const musicbrainzAutoCountryPriority = useSettingsStore(
-        (state) => state.integrations.musicbrainzAutoCountryPriority,
-    );
-    const musicBrainzPrioritizeCountries = useSettingsStore(
-        (state) => state.integrations.musicBrainzPrioritizeCountries,
-    );
     const [searchTerm, setSearchTerm] = useState('');
     const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
     const albumArtistDetailSort = useAppStore((state) => state.albumArtistDetailSort);
@@ -1399,55 +1364,16 @@ const ArtistAlbums = ({ albumsQuery }: ArtistAlbumsProps) => {
         albumArtistId?: string;
         artistId?: string;
     };
-
-    const serverId = useCurrentServerId();
     const routeId = (artistId || albumArtistId) as string;
 
-    const detailQuery = useSuspenseQuery(
-        artistsQueries.albumArtistDetail({
-            query: { id: routeId },
-            serverId: serverId,
-        }),
-    );
-
-    const musicBrainzEnabled = useSettingsStore((state) => state.integrations.musicBrainz);
-    const musicbrainzArtistQuery = useQuery({
-        ...musicbrainzQueries.artist({
-            autoCountryPriority: musicbrainzAutoCountryPriority,
-            excludeReleaseTypes: musicBrainzExcludeReleaseTypes,
-            mbzArtistId: detailQuery.data?.mbz as string,
-            prioritizeCountries: musicBrainzPrioritizeCountries,
-        }),
-        enabled: Boolean(musicBrainzEnabled && detailQuery.data?.mbz),
-        meta: {
-            albumArtist: detailQuery.data,
-            albums: albumsQuery.data?.items || [],
-            autoCountryPriority: musicbrainzAutoCountryPriority,
-            excludeReleaseTypes: musicBrainzExcludeReleaseTypes,
-            prioritizeCountries: musicBrainzPrioritizeCountries,
-        },
-    });
-
-    const musicbrainzAlbums = useMemo(() => {
-        return musicbrainzArtistQuery.data || [];
-    }, [musicbrainzArtistQuery.data]);
-
     const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
     const controls = useDefaultItemListControls();
 
     const filteredAndSortedAlbums = useMemo(() => {
-        const existingReleaseIds = new Set(
-            albumsQuery.data?.items?.map((item) => item.mbzId) || [],
-        );
-
-        const newMusicbrainzAlbums = musicbrainzAlbums.filter(
-            (album) => !existingReleaseIds.has(album.mbzId),
-        );
-
-        const albums = [...(albumsQuery.data?.items || []), ...newMusicbrainzAlbums];
+        const albums = albumsQuery.data?.items || [];
         const searched = searchLibraryItems(albums, debouncedSearchTerm, LibraryItem.ALBUM);
         return sortAlbumList(searched, sortBy, sortOrder);
-    }, [albumsQuery.data?.items, debouncedSearchTerm, musicbrainzAlbums, sortBy, sortOrder]);
+    }, [albumsQuery.data?.items, debouncedSearchTerm, sortBy, sortOrder]);
 
     const albumsByReleaseType = useMemo(() => {
         return groupAlbumsByReleaseType(filteredAndSortedAlbums, routeId, groupingType);

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -19,6 +19,7 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useShowRatings } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { formatDurationString } from '/@/renderer/utils';
+import { SEPARATOR_STRING } from '/@/shared/api/utils';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
@@ -160,7 +161,11 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
                         .filter((i) => i.enabled)
                         .map((item, index) => (
                             <Fragment key={`item-${item.id}-${index}`}>
-                                {index > 0 && <Text isNoSelect>•</Text>}
+                                {index > 0 && (
+                                    <Text isMuted isNoSelect>
+                                        {SEPARATOR_STRING}
+                                    </Text>
+                                )}
                                 <Text isMuted={item.secondary}>{item.value}</Text>
                             </Fragment>
                         ))}

src/renderer/features/context-menu/actions/set-rating-action.tsx

@@ -5,7 +5,8 @@ import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
 import { useCurrentServer, useCurrentServerId, useShowRatings } from '/@/renderer/store';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
 import { Rating } from '/@/shared/components/rating/rating';
-import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
+import { LibraryItem } from '/@/shared/types/domain-types';
+import { ServerType } from '/@/shared/types/types';
 
 interface SetRatingActionProps {
     ids: string[];

src/renderer/features/context-menu/components/context-menu-preview.tsx

@@ -24,16 +24,29 @@ const getItemName = (item: unknown): string => {
     return 'Item';
 };
 
+const getItemImage = (item: unknown): null | string => {
+    if (item && typeof item === 'object') {
+        if ('imageId' in item && typeof item.imageId === 'string') {
+            return item.imageId;
+        }
+
+        if ('imageUrl' in item && typeof item.imageUrl === 'string') {
+            return item.imageUrl;
+        }
+    }
+    return null;
+};
+
 export const ContextMenuPreview = ({ items, itemType }: ContextMenuPreviewProps) => {
     const { t } = useTranslation();
     const itemCount = items.length;
     const firstItem = items[0];
     const itemName = firstItem ? getItemName(firstItem) : 'Item';
+    const itemImage = firstItem ? getItemImage(firstItem) : null;
     const isMultiple = itemCount > 1;
 
     const imageUrl = useItemImageUrl({
         id: (firstItem as { imageId?: string })?.imageId,
-        imageUrl: (firstItem as { imageUrl?: string })?.imageUrl,
         itemType: itemType || LibraryItem.SONG,
         serverId: (firstItem as { _serverId?: string })?._serverId,
         type: 'table',
@@ -48,7 +61,7 @@ export const ContextMenuPreview = ({ items, itemType }: ContextMenuPreviewProps)
             <div className={styles.divider} />
             <div className={styles.preview}>
                 <div className={styles.content}>
-                    {imageUrl ? (
+                    {itemImage ? (
                         <div className={styles.imageContainer}>
                             <img alt={itemName} className={styles.image} src={imageUrl} />
                             <div className={styles.imageOverlay} />

src/renderer/features/login/routes/login-route.tsx

@@ -29,22 +29,18 @@ import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
 import { useForm } from '/@/shared/hooks/use-form';
-import {
-    AuthenticationResponse,
-    ServerListItemWithCredential,
-    ServerType,
-} from '/@/shared/types/domain-types';
-import { toServerType } from '/@/shared/types/types';
+import { AuthenticationResponse, ServerListItemWithCredential } from '/@/shared/types/domain-types';
+import { ServerType, toServerType } from '/@/shared/types/types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 
-const SERVER_ICONS: Record<Exclude<ServerType, ServerType.EXTERNAL>, string> = {
+const SERVER_ICONS: Record<ServerType, string> = {
     [ServerType.JELLYFIN]: JellyfinIcon,
     [ServerType.NAVIDROME]: NavidromeIcon,
     [ServerType.SUBSONIC]: SubsonicIcon,
 };
 
-const SERVER_NAMES: Record<Exclude<ServerType, ServerType.EXTERNAL>, string> = {
+const SERVER_NAMES: Record<ServerType, string> = {
     [ServerType.JELLYFIN]: 'Jellyfin',
     [ServerType.NAVIDROME]: 'Navidrome',
     [ServerType.SUBSONIC]: 'OpenSubsonic',

src/renderer/features/musicbrainz/api/musicbrainz-api.ts

@@ -1,434 +0,0 @@
-import { queryOptions } from '@tanstack/react-query';
-import memoize from 'lodash/memoize';
-import {
-    IArtist,
-    IBrowseReleasesResult,
-    IRelation,
-    IRelease,
-    IReleaseGroup,
-    IWork,
-    MusicBrainzApi,
-} from 'musicbrainz-api';
-
-import packageJson from '../../../../../package.json';
-
-import { queryKeys } from '/@/renderer/api/query-keys';
-import {
-    collectWorksFromRelease,
-    getImageUrlByReleaseGroupId,
-    normalizeReleaseToAlbum,
-} from '/@/renderer/features/musicbrainz/utils';
-import { logFn } from '/@/renderer/utils/logger';
-import {
-    Album,
-    AlbumArtist,
-    LibraryItem,
-    RelatedArtist,
-    ServerType,
-} from '/@/shared/types/domain-types';
-
-export const musicbrainzApi = new MusicBrainzApi({
-    appContactInfo: packageJson.homepage,
-    appName: packageJson.name,
-    appVersion: packageJson.version,
-});
-
-const CACHE_TIME = 1000 * 60 * 5;
-
-export type IRelationWithWork = IRelation & { work?: IWork };
-
-export type MusicBrainzArtistSelectMeta = {
-    albumArtist: AlbumArtist;
-    albums?: Album[];
-    autoCountryPriority?: boolean;
-    excludeReleaseTypes?: string[];
-    prioritizeCountries?: string[];
-};
-
-const artistSelect = memoize(
-    ({
-        data,
-        meta,
-    }: {
-        data: {
-            artist: IArtist;
-            releases: IBrowseReleasesResult;
-        };
-        meta: MusicBrainzArtistSelectMeta;
-    }) => {
-        const albumArtist: RelatedArtist = {
-            id: meta.albumArtist.id,
-            imageId: meta.albumArtist.imageId,
-            imageUrl: meta.albumArtist.imageUrl,
-            name: meta.albumArtist.name,
-            userFavorite: meta.albumArtist.userFavorite,
-            userRating: meta.albumArtist.userRating,
-        };
-
-        const ownedMbzReleaseGroupIds = new Set<string>();
-        const ownedMbzReleaseIds = new Set<string>();
-
-        const counts = {
-            existingMbzReleaseGroupIds: 0,
-            existingMbzReleaseIds: 0,
-        };
-
-        for (const album of meta.albums || []) {
-            if (album.mbzReleaseGroupId) {
-                ownedMbzReleaseGroupIds.add(album.mbzReleaseGroupId);
-                counts.existingMbzReleaseGroupIds++;
-            }
-
-            if (album.mbzId) {
-                ownedMbzReleaseIds.add(album.mbzId);
-                counts.existingMbzReleaseIds++;
-            }
-        }
-
-        const albumArtistName = meta.albumArtist.name;
-
-        const existingReleaseGroups = new Map<string, IRelease>();
-        const existingReleases = new Map<string, IRelease>();
-        const unownedReleases = new Map<string, IRelease>();
-        const unownedReleaseGroups = new Map<string, IReleaseGroup>();
-
-        for (const release of data.releases.releases) {
-            const releaseGroup = release['release-group'];
-            const hasReleaseGroup = releaseGroup?.id !== undefined;
-
-            if (hasReleaseGroup && ownedMbzReleaseGroupIds.has(releaseGroup.id)) {
-                existingReleaseGroups.set(releaseGroup.id, release);
-            }
-
-            if (ownedMbzReleaseIds.has(release.id)) {
-                existingReleases.set(release.id, release);
-            }
-        }
-
-        for (const release of data.releases.releases) {
-            const releaseGroupId = release['release-group']?.id;
-            if (
-                releaseGroupId &&
-                !ownedMbzReleaseIds.has(release.id) &&
-                !ownedMbzReleaseGroupIds.has(releaseGroupId)
-            ) {
-                unownedReleases.set(release.id, release);
-                if (releaseGroupId && release['release-group']) {
-                    unownedReleaseGroups.set(releaseGroupId, release['release-group']);
-                }
-            } else if (!releaseGroupId && !ownedMbzReleaseIds.has(release.id)) {
-                console.log('adding unowned release by release id', release.id);
-                unownedReleases.set(release.id, release);
-            }
-        }
-
-        const excludeReleaseTypes = (meta.excludeReleaseTypes ?? []).map((t) => t.toLowerCase());
-        const excludeSet = new Set(excludeReleaseTypes);
-
-        let prioritizeCountries: string[];
-        if (meta.autoCountryPriority) {
-            const countryCounts = new Map<string, number>();
-            for (const release of data.releases.releases) {
-                const country = release.country?.toUpperCase();
-                if (country) {
-                    countryCounts.set(country, (countryCounts.get(country) ?? 0) + 1);
-                }
-            }
-            prioritizeCountries = [...countryCounts.entries()]
-                .sort(([, a], [, b]) => b - a)
-                .map(([code]) => code);
-        } else {
-            prioritizeCountries = (meta.prioritizeCountries ?? []).map((c) => c.toUpperCase());
-        }
-
-        const releaseEntries = Array.from(unownedReleases.entries())
-            .filter(([, release]) => {
-                if (excludeSet.size === 0) return true;
-                const releaseGroup = release['release-group'];
-                const primary = releaseGroup?.['primary-type']?.toLowerCase();
-                const secondary =
-                    releaseGroup?.['secondary-types']?.map((t) => t.toLowerCase()) ?? [];
-                const types = [primary, ...secondary].filter(Boolean) as string[];
-                return !types.some((t) => excludeSet.has(t));
-            })
-            .sort(([, a], [, b]) => {
-                if (prioritizeCountries.length === 0) return 0;
-                const indexA = a.country
-                    ? prioritizeCountries.indexOf(a.country.toUpperCase())
-                    : -1;
-                const indexB = b.country
-                    ? prioritizeCountries.indexOf(b.country.toUpperCase())
-                    : -1;
-                const posA = indexA === -1 ? Number.MAX_SAFE_INTEGER : indexA;
-                const posB = indexB === -1 ? Number.MAX_SAFE_INTEGER : indexB;
-                return posA - posB;
-            });
-
-        const seenReleaseGroupIds = new Set<string>();
-        const releaseEntriesUniqueByGroup = releaseEntries.filter(([, release]) => {
-            const releaseGroupId = release['release-group']?.id;
-            if (releaseGroupId == null) return true;
-            if (seenReleaseGroupIds.has(releaseGroupId)) return false;
-            seenReleaseGroupIds.add(releaseGroupId);
-            return true;
-        });
-
-        const albums: Album[] = releaseEntriesUniqueByGroup
-            .map(([, release]) => {
-                const releaseGroup = release['release-group'];
-                const hasArtwork = releaseGroup;
-
-                const primaryReleaseType = releaseGroup?.['primary-type']?.toLowerCase() || null;
-                const secondaryReleaseTypes =
-                    releaseGroup?.['secondary-types']?.map((type) => type.toLowerCase()) || [];
-                const releaseTypes = [primaryReleaseType, ...secondaryReleaseTypes].filter(
-                    (type) => type !== null,
-                ) as string[];
-                const isCompilation = releaseTypes.includes('compilation');
-                const originalDate = releaseGroup?.['first-release-date'] || null;
-                const originalYear = originalDate ? Number(originalDate.split('-')[0]) : null;
-                const releaseDate = release.date ? release.date : null;
-                const releaseYear = release.date ? Number(release.date.split('-')[0]) : null;
-                const imageUrl = hasArtwork ? getImageUrlByReleaseGroupId(releaseGroup.id) : null;
-
-                const album: Album = {
-                    _itemType: LibraryItem.ALBUM,
-                    _serverId: 'musicbrainz',
-                    _serverType: ServerType.EXTERNAL,
-                    albumArtistName: albumArtistName,
-                    albumArtists: [albumArtist],
-                    artists: [],
-                    comment: null,
-                    createdAt: '',
-                    duration: null,
-                    explicitStatus: null,
-                    genres: [],
-                    id: `musicbrainz-${release.id}`,
-                    imageId: null,
-                    imageUrl: imageUrl,
-                    isCompilation: isCompilation,
-                    lastPlayedAt: null,
-                    mbzId: release.id,
-                    mbzReleaseGroupId: releaseGroup?.id || null,
-                    name: release.title,
-                    originalDate: originalDate,
-                    originalYear: originalYear,
-                    participants: {},
-                    playCount: null,
-                    recordLabels: [],
-                    releaseDate: releaseDate,
-                    releaseType: primaryReleaseType,
-                    releaseTypes: releaseTypes,
-                    releaseYear: releaseYear,
-                    size: null,
-                    songCount: null,
-                    sortName: release.title,
-                    tags: {},
-                    updatedAt: '',
-                    userFavorite: false,
-                    userRating: null,
-                    version: null,
-                };
-
-                return album;
-            })
-            .filter((album): album is Album => album !== null);
-
-        return albums;
-    },
-);
-
-async function fetchMbzReleasesByArtistId(mbzArtistId: string): Promise<IBrowseReleasesResult> {
-    const PAGE_SIZE = 100;
-    const includes: Array<'media' | 'release-groups'> = ['media', 'release-groups'];
-
-    // Fetch first page to get total count
-    const firstPage = (await musicbrainzApi.browse(
-        'release',
-        {
-            artist: mbzArtistId,
-            limit: PAGE_SIZE,
-            offset: 0,
-        },
-        includes,
-    )) as unknown as IBrowseReleasesResult;
-
-    const totalCount = firstPage['release-count'];
-    const allReleases = [...firstPage.releases];
-
-    if (allReleases.length >= totalCount) {
-        return firstPage;
-    }
-
-    const remainingCount = totalCount - allReleases.length;
-    const numberOfPages = Math.ceil(remainingCount / PAGE_SIZE);
-
-    const pagePromises = Array.from({ length: numberOfPages }, (_, i) => {
-        const offset = (i + 1) * PAGE_SIZE;
-        return musicbrainzApi.browse(
-            'release',
-            {
-                artist: mbzArtistId,
-                limit: PAGE_SIZE,
-                offset: offset,
-            },
-            includes,
-        ) as unknown as Promise<IBrowseReleasesResult>;
-    });
-
-    const remainingPages = await Promise.all(pagePromises);
-
-    for (const page of remainingPages) {
-        allReleases.push(...page.releases);
-    }
-
-    return {
-        'release-count': totalCount,
-        'release-offset': 0,
-        releases: allReleases,
-    };
-}
-
-const RELEASE_INCLUDES: Array<
-    | 'artist-credits'
-    | 'artists'
-    | 'media'
-    | 'recording-level-rels'
-    | 'recordings'
-    | 'release-groups'
-> = ['artist-credits', 'artists', 'media', 'recording-level-rels', 'recordings', 'release-groups'];
-
-const EMPTY_BROWSE_RELEASES: IBrowseReleasesResult = {
-    'release-count': 0,
-    'release-offset': 0,
-    releases: [],
-};
-
-export const musicbrainzQueries = {
-    artist: (args: {
-        autoCountryPriority?: boolean;
-        excludeReleaseTypes?: string[];
-        mbzArtistId: string;
-        prioritizeCountries?: string[];
-    }) => {
-        const config = {
-            autoCountryPriority: args.autoCountryPriority ?? false,
-            excludeReleaseTypes: args.excludeReleaseTypes ?? [],
-            prioritizeCountries: args.prioritizeCountries ?? [],
-        };
-
-        return queryOptions({
-            gcTime: CACHE_TIME,
-            queryFn: async ({ meta }) => {
-                try {
-                    const artist = await musicbrainzApi.lookup('artist', args.mbzArtistId);
-                    const releases = await fetchMbzReleasesByArtistId(args.mbzArtistId);
-
-                    logFn.debug('MusicBrainz artist lookup API queried', {
-                        meta: { artistId: args.mbzArtistId, releases },
-                    });
-
-                    return {
-                        data: { artist, releases },
-                        meta: meta as MusicBrainzArtistSelectMeta,
-                    };
-                } catch (error) {
-                    logFn.warn('MusicBrainz artist lookup failed', {
-                        meta: { artistId: args.mbzArtistId, error },
-                    });
-                    return {
-                        data: {
-                            artist: {} as IArtist,
-                            releases: EMPTY_BROWSE_RELEASES,
-                        },
-                        meta: meta as MusicBrainzArtistSelectMeta,
-                    };
-                }
-            },
-            queryKey: queryKeys.musicbrainz.artist(undefined, args.mbzArtistId, config),
-            select: artistSelect,
-            staleTime: CACHE_TIME,
-        });
-    },
-    release: (args: { releaseId: string }) =>
-        queryOptions({
-            gcTime: CACHE_TIME,
-            queryFn: async () => {
-                try {
-                    const mbzRelease = await musicbrainzApi.lookup(
-                        'release',
-                        args.releaseId,
-                        RELEASE_INCLUDES,
-                    );
-                    const release = normalizeReleaseToAlbum(mbzRelease);
-                    const works = collectWorksFromRelease(mbzRelease);
-
-                    logFn.debug('MusicBrainz release lookup API queried', {
-                        meta: { release, releaseId: args.releaseId },
-                    });
-
-                    return { release, works };
-                } catch (error) {
-                    logFn.warn('MusicBrainz release lookup failed', {
-                        meta: { error, releaseId: args.releaseId },
-                    });
-                    return { release: null, works: [] };
-                }
-            },
-            queryKey: queryKeys.musicbrainz.release(args.releaseId),
-            staleTime: CACHE_TIME,
-        }),
-};
-
-export const MUSICBRAINZ_ID_PREFIX = 'musicbrainz-';
-
-export async function fetchMbzReleaseAsAlbum(releaseId: string): Promise<Album> {
-    try {
-        const mbzRelease = await musicbrainzApi.lookup('release', releaseId, RELEASE_INCLUDES);
-        return normalizeReleaseToAlbum(mbzRelease);
-    } catch (error) {
-        logFn.warn('MusicBrainz release fetch failed', { meta: { error, releaseId } });
-        return createEmptyMbzAlbum(releaseId);
-    }
-}
-
-function createEmptyMbzAlbum(releaseId: string): Album {
-    return {
-        _itemType: LibraryItem.ALBUM,
-        _serverId: 'musicbrainz',
-        _serverType: ServerType.EXTERNAL,
-        albumArtistName: '',
-        albumArtists: [],
-        artists: [],
-        comment: null,
-        createdAt: '',
-        duration: null,
-        explicitStatus: null,
-        genres: [],
-        id: `musicbrainz-${releaseId}`,
-        imageId: null,
-        imageUrl: null,
-        isCompilation: null,
-        lastPlayedAt: null,
-        mbzId: releaseId,
-        mbzReleaseGroupId: null,
-        name: '',
-        originalDate: null,
-        originalYear: null,
-        participants: {},
-        playCount: null,
-        recordLabels: [],
-        releaseDate: null,
-        releaseType: null,
-        releaseTypes: [],
-        releaseYear: null,
-        size: null,
-        songCount: null,
-        sortName: '',
-        tags: {},
-        updatedAt: '',
-        userFavorite: false,
-        userRating: null,
-        version: null,
-    };
-}

src/renderer/features/musicbrainz/api/youtube-api.ts

@@ -1,25 +0,0 @@
-import { queryOptions } from '@tanstack/react-query';
-
-import { logFn } from '/@/renderer/utils/logger';
-
-async function searchYoutube(query: string): Promise<Array<{ type: string; videoId?: string }>> {
-    if (typeof window !== 'undefined' && window.api?.youtube) {
-        return window.api.youtube.search(query);
-    }
-    return [];
-}
-
-export const youtubeQueries = {
-    search: (args: { query: string }) => {
-        return queryOptions({
-            gcTime: 1000 * 60 * 5,
-            queryFn: async () => {
-                const results = await searchYoutube(args.query);
-                logFn.debug('Youtube API queried', { meta: { query: args.query, results } });
-                return results;
-            },
-            queryKey: ['youtube', 'search', args.query],
-            staleTime: 1000 * 60 * 5,
-        });
-    },
-};

src/renderer/features/musicbrainz/utils.ts

@@ -1,224 +0,0 @@
-import { IArtist, IMedium, IRelease, ITrack, IWork } from 'musicbrainz-api';
-
-import {
-    IRelationWithWork,
-    MUSICBRAINZ_ID_PREFIX,
-} from '/@/renderer/features/musicbrainz/api/musicbrainz-api';
-import { Album, LibraryItem, RelatedArtist, ServerType, Song } from '/@/shared/types/domain-types';
-
-export function collectWorksFromRelease(release: IRelease): IWork[] {
-    const works: IWork[] = [];
-    const seenIds = new Set<string>();
-
-    for (const medium of release.media ?? []) {
-        for (const track of medium.tracks ?? []) {
-            const recording = track.recording;
-            const relations = (recording as { relations?: IRelationWithWork[] })?.relations ?? [];
-            for (const rel of relations) {
-                const work = (rel as IRelationWithWork).work;
-                if (work?.id && !seenIds.has(work.id)) {
-                    seenIds.add(work.id);
-                    works.push(work);
-                }
-            }
-        }
-    }
-
-    return works;
-}
-
-export function getImageUrl(releaseId: string): string {
-    return `https://coverartarchive.org/release/${releaseId}/front-250.jpg`;
-}
-
-export function getImageUrlByReleaseGroupId(releaseGroupId: string): string {
-    return `https://coverartarchive.org/release-group/${releaseGroupId}/front-250.jpg`;
-}
-
-export function getMbzReleaseIdFromAlbumId(albumId: string): null | string {
-    if (!albumId.startsWith(MUSICBRAINZ_ID_PREFIX)) return null;
-    return albumId.slice(MUSICBRAINZ_ID_PREFIX.length);
-}
-
-export function isMbzAlbumId(albumId: string): boolean {
-    return albumId.startsWith(MUSICBRAINZ_ID_PREFIX);
-}
-export function normalizeReleaseToAlbum(release: IRelease): Album {
-    const releaseGroup = release['release-group'];
-    const artistCredit = release['artist-credit'] ?? releaseGroup?.['artist-credit'] ?? [];
-    const albumArtistName = artistCredit
-        .map((entry) => `${entry.name}${entry.joinphrase ?? ''}`)
-        .join(' ');
-    const albumArtists: RelatedArtist[] = (artistCredit as { artist: IArtist; name: string }[]).map(
-        (ac) => ({
-            id: `musicbrainz-${ac.artist.id}`,
-            imageId: null,
-            imageUrl: null,
-            name: ac.name || ac.artist.name,
-            userFavorite: false,
-            userRating: null,
-        }),
-    );
-
-    const hasArtwork = releaseGroup;
-    const primaryReleaseType = releaseGroup?.['primary-type']?.toLowerCase() || null;
-    const secondaryReleaseTypes =
-        releaseGroup?.['secondary-types']?.map((type) => type.toLowerCase()) || [];
-    const releaseTypes = [primaryReleaseType, ...secondaryReleaseTypes].filter(
-        (type) => type !== null,
-    ) as string[];
-    const isCompilation = releaseTypes.includes('compilation');
-    const originalDate = releaseGroup?.['first-release-date'] || null;
-    const originalYear = originalDate ? Number(originalDate.split('-')[0]) : null;
-    const releaseDate = release.date ? release.date : null;
-    const releaseYear = release.date ? Number(release.date.split('-')[0]) : null;
-    const imageUrl = hasArtwork ? getImageUrlByReleaseGroupId(releaseGroup.id) : null;
-    const albumId = `musicbrainz-${release.id}`;
-
-    const songs: Song[] = [];
-    for (const medium of release.media ?? []) {
-        for (const track of medium.tracks ?? []) {
-            songs.push(
-                normalizeRecordingToSong(
-                    release,
-                    medium,
-                    track,
-                    albumArtistName,
-                    albumArtists,
-                    albumId,
-                    imageUrl,
-                    releaseDate,
-                    releaseYear,
-                ),
-            );
-        }
-    }
-
-    const totalDuration = songs.reduce((sum, s) => sum + s.duration, 0);
-
-    return {
-        _itemType: LibraryItem.ALBUM,
-        _serverId: 'musicbrainz',
-        _serverType: ServerType.EXTERNAL,
-        albumArtistName,
-        albumArtists,
-        artists: [],
-        comment: null,
-        createdAt: '',
-        duration: totalDuration || null,
-        explicitStatus: null,
-        genres: [],
-        id: albumId,
-        imageId: null,
-        imageUrl,
-        isCompilation,
-        lastPlayedAt: null,
-        mbzId: release.id,
-        mbzReleaseGroupId: releaseGroup?.id || null,
-        name: release.title,
-        originalDate,
-        originalYear,
-        participants: {},
-        playCount: null,
-        recordLabels: [],
-        releaseDate,
-        releaseType: primaryReleaseType,
-        releaseTypes,
-        releaseYear,
-        size: null,
-        songCount: songs.length,
-        songs,
-        sortName: release.title,
-        tags: {},
-        updatedAt: '',
-        userFavorite: false,
-        userRating: null,
-        version: null,
-    };
-}
-function normalizeArtistCreditToRelatedArtists(
-    artistCredit: Array<{ artist: IArtist; name: string }>,
-): RelatedArtist[] {
-    return artistCredit.map((ac) => ({
-        id: `musicbrainz-${ac.artist.id}`,
-        imageId: null,
-        imageUrl: null,
-        name: ac.name || ac.artist.name,
-        userFavorite: false,
-        userRating: null,
-    }));
-}
-function normalizeRecordingToSong(
-    release: IRelease,
-    medium: IMedium,
-    track: ITrack,
-    albumArtistName: string,
-    albumArtists: RelatedArtist[],
-    albumId: string,
-    imageUrl: null | string,
-    releaseDate: null | string,
-    releaseYear: null | number,
-): Song {
-    const recording = track.recording;
-    const trackArtistCredit = track['artist-credit'] ?? recording['artist-credit'] ?? [];
-
-    const artistName = trackArtistCredit
-        .map((entry) => `${entry.name}${entry.joinphrase ?? ''}`)
-        .join(' ');
-
-    const artists = normalizeArtistCreditToRelatedArtists(
-        trackArtistCredit as Array<{ artist: IArtist; name: string }>,
-    );
-
-    const durationMilliseconds = track.length || recording.length || 0;
-    const trackNumber = track.position || parseInt(track.number, 10) || 0;
-
-    return {
-        _itemType: LibraryItem.SONG,
-        _serverId: 'musicbrainz',
-        _serverType: ServerType.EXTERNAL,
-        album: release.title,
-        albumArtistName,
-        albumArtists,
-        albumId,
-        artistName,
-        artists,
-        bitDepth: null,
-        bitRate: 0,
-        bpm: null,
-        channels: null,
-        comment: null,
-        compilation: null,
-        container: null,
-        createdAt: '',
-        discNumber: medium.position || 1,
-        discSubtitle: medium.title || null,
-        duration: durationMilliseconds,
-        explicitStatus: null,
-        gain: null,
-        genres: [],
-        id: `musicbrainz-${release.id}-${recording.id}-${track.position}-${track.number}`,
-        imageId: null,
-        imageUrl,
-        lastPlayedAt: null,
-        lyrics: null,
-        mbzRecordingId: recording.id,
-        mbzTrackId: track.id,
-        name: track.title || recording.title,
-        participants: {},
-        path: null,
-        peak: null,
-        playCount: 0,
-        releaseDate,
-        releaseYear,
-        sampleRate: null,
-        size: 0,
-        sortName: track.title || recording.title,
-        tags: null,
-        trackNumber,
-        trackSubtitle: null,
-        updatedAt: '',
-        userFavorite: false,
-        userRating: null,
-    };
-}

src/renderer/features/now-playing/components/play-queue.tsx

@@ -237,6 +237,7 @@ const EmptyQueueDropZone = () => {
                     const sourceServerId = (
                         args.source.item?.[0] as unknown as { _serverId: string }
                     )?._serverId;
+
                     const sourceItemType = args.source.itemType as LibraryItem;
 
                     switch (args.source.type) {
@@ -296,7 +297,7 @@ const EmptyQueueDropZone = () => {
                             const folderIds = folders.map((folder) => folder.id);
 
                             // Handle folders: fetch and add to queue
-                            if (folderIds.length > 0 && sourceServerId) {
+                            if (folderIds.length > 0) {
                                 playerContext.addToQueueByFetch(
                                     sourceServerId,
                                     folderIds,