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",

src/i18n/locales/en.json

@@ -1145,6 +1145,7 @@
                 "year": "$t(common.year)"
             },
             "view": {
+                "detail": "detail",
                 "grid": "grid",
                 "list": "list",
                 "table": "table"

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/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/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',
@@ -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/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/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

@@ -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 ||

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-combined-column.tsx

@@ -58,6 +58,7 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                 itemType: props.itemType,
                 meta: {
                     playType,
+                    singleSongOnly: true,
                 },
             });
             return;
@@ -200,6 +201,7 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                 itemType: props.itemType,
                 meta: {
                     playType,
+                    singleSongOnly: true,
                 },
             });
             return;

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/components/album-detail-header.tsx

@@ -233,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>

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/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/player/hooks/use-is-current-song.ts

@@ -1,14 +1,20 @@
 import { useMemo } from 'react';
 
 import { usePlayerSong } from '/@/renderer/store';
-import { QueueSong } from '/@/shared/types/domain-types';
+import { QueueSong, Song } from '/@/shared/types/domain-types';
 
-export const useIsCurrentSong = (song: QueueSong) => {
+export const useIsCurrentSong = (song: QueueSong | Song) => {
     const currentSong = usePlayerSong();
 
     const isActive = useMemo(() => {
-        return song._uniqueId === currentSong?._uniqueId;
-    }, [song._uniqueId, currentSong?._uniqueId]);
+        const queueSong = song as QueueSong;
+
+        if (queueSong._uniqueId != null && queueSong._uniqueId !== '') {
+            return queueSong._uniqueId === currentSong?._uniqueId;
+        }
+
+        return song.id === currentSong?.id;
+    }, [song, currentSong?.id, currentSong?._uniqueId]);
 
     return { isActive };
 };

src/renderer/features/player/hooks/use-scrobble.ts

@@ -407,6 +407,47 @@ export const useScrobble = () => {
         [isScrobbleEnabled, isPrivateModeEnabled, sendScrobble],
     );
 
+    const handleScrobbleFromRepeat = useCallback(() => {
+        if (!isScrobbleEnabled || isPrivateModeEnabled) {
+            return;
+        }
+
+        const currentSong = usePlayerStore.getState().getCurrentSong();
+        const currentStatus = usePlayerStore.getState().player.status;
+
+        if (currentStatus !== PlayerStatus.PLAYING || !currentSong?.id) {
+            return;
+        }
+
+        setIsCurrentSongScrobbled(false);
+        lastProgressEventRef.current = 0;
+        previousTimestampRef.current = 0;
+
+        sendScrobble.mutate(
+            {
+                apiClientProps: { serverId: currentSong._serverId || '' },
+                query: {
+                    albumId: currentSong.albumId,
+                    event: 'start',
+                    id: currentSong.id,
+                    position: 0,
+                    submission: false,
+                },
+            },
+            {
+                onSuccess: () => {
+                    logFn.debug(logMsg[LogCategory.SCROBBLE].scrobbledStart, {
+                        category: LogCategory.SCROBBLE,
+                        meta: {
+                            id: currentSong.id,
+                            reason: 'from repeat',
+                        },
+                    });
+                },
+            },
+        );
+    }, [isScrobbleEnabled, isPrivateModeEnabled, sendScrobble]);
+
     // Update previous timestamp on progress for use in status change handler
     const handleProgressUpdate = useCallback(
         (properties: { timestamp: number }, prev: { timestamp: number }) => {
@@ -420,10 +461,17 @@ export const useScrobble = () => {
         {
             onCurrentSongChange: handleScrobbleFromSongChange,
             onPlayerProgress: handleProgressUpdate,
+            onPlayerRepeated: handleScrobbleFromRepeat,
             onPlayerSeekToTimestamp: handleScrobbleFromSeek,
             onPlayerStatus: handleScrobbleFromStatus,
         },
-        [handleScrobbleFromSongChange, handleProgressUpdate, handleScrobbleFromSeek],
+        [
+            handleScrobbleFromSongChange,
+            handleProgressUpdate,
+            handleScrobbleFromRepeat,
+            handleScrobbleFromSeek,
+            handleScrobbleFromStatus,
+        ],
     );
 };
 

src/renderer/features/shared/components/display-type-toggle-button.tsx

@@ -16,10 +16,11 @@ export const DisplayTypeToggleButton = ({
 }: DisplayTypeToggleButtonProps) => {
     const { t } = useTranslation();
     const isGrid = displayType === ListDisplayType.GRID;
+    const isDetail = displayType === ListDisplayType.DETAIL;
 
     return (
         <ActionIcon
-            icon={isGrid ? 'layoutGrid' : 'layoutTable'}
+            icon={isGrid ? 'layoutGrid' : isDetail ? 'layoutDetail' : 'layoutTable'}
             iconProps={{
                 size: 'lg',
             }}
@@ -27,7 +28,9 @@ export const DisplayTypeToggleButton = ({
             tooltip={{
                 label: isGrid
                     ? t('table.config.view.grid', { postProcess: 'sentenceCase' })
-                    : t('table.config.view.table', { postProcess: 'sentenceCase' }),
+                    : isDetail
+                      ? t('table.config.view.detail', { postProcess: 'sentenceCase' })
+                      : t('table.config.view.table', { postProcess: 'sentenceCase' }),
             }}
             variant="subtle"
             {...buttonProps}

src/renderer/features/shared/components/list-config-menu.tsx

@@ -37,6 +37,15 @@ const DISPLAY_TYPES = [
         ),
         value: ListDisplayType.GRID,
     },
+    {
+        label: (
+            <Group align="center" justify="center" p="sm">
+                <Icon icon="layoutDetail" size="lg" />
+                {i18n.t('table.config.view.detail', { postProcess: 'sentenceCase' }) as string}
+            </Group>
+        ),
+        value: ListDisplayType.DETAIL,
+    },
     // {
     //     disabled: true,
     //     label: (
@@ -63,6 +72,12 @@ export const ListConfigBooleanControl = ({
     );
 };
 
+export interface ListConfigMenuDetailConfig {
+    optionsConfig?: ListConfigMenuOptionsConfig['detail'];
+    tableColumnsData: { label: string; value: string }[];
+    tableKey: 'detail';
+}
+
 export interface ListConfigMenuDisplayTypeConfig {
     disabled?: boolean;
     hidden?: boolean;
@@ -75,6 +90,9 @@ export interface ListConfigMenuOptionConfig {
 }
 
 export interface ListConfigMenuOptionsConfig {
+    detail?: {
+        [key: string]: ListConfigMenuOptionConfig;
+    };
     grid?: {
         [key: string]: ListConfigMenuOptionConfig;
     };
@@ -85,6 +103,7 @@ export interface ListConfigMenuOptionsConfig {
 
 interface ListConfigMenuProps {
     buttonProps?: ActionIconProps;
+    detailConfig?: ListConfigMenuDetailConfig;
     displayTypes?: ListConfigMenuDisplayTypeConfig[];
     listKey: ItemListKey;
     optionsConfig?: ListConfigMenuOptionsConfig;
@@ -172,6 +191,20 @@ const Config = ({
     ...props
 }: ListConfigMenuProps & { displayType: ListDisplayType }) => {
     switch (displayType) {
+        case ListDisplayType.DETAIL:
+            if (props.detailConfig) {
+                return (
+                    <TableConfig
+                        enablePinColumnButtons={false}
+                        listKey={props.listKey}
+                        optionsConfig={props.detailConfig.optionsConfig}
+                        tableColumnsData={props.detailConfig.tableColumnsData}
+                        tableKey="detail"
+                    />
+                );
+            }
+            return null;
+
         case ListDisplayType.GRID:
             return (
                 <GridConfig

src/renderer/features/shared/components/list-display-type-toggle-button.tsx

@@ -3,21 +3,47 @@ import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
 interface ListDisplayTypeToggleButtonProps {
+    enableDetail?: boolean;
     listKey: ItemListKey;
 }
 
-export const ListDisplayTypeToggleButton = ({ listKey }: ListDisplayTypeToggleButtonProps) => {
+export const ListDisplayTypeToggleButton = ({
+    enableDetail = false,
+    listKey,
+}: ListDisplayTypeToggleButtonProps) => {
     const displayType = useSettingsStore(
         (state) => state.lists[listKey]?.display,
     ) as ListDisplayType;
     const { setList } = useSettingsStoreActions();
 
     const handleToggleDisplayType = () => {
-        const newDisplayType =
-            displayType === ListDisplayType.GRID ? ListDisplayType.TABLE : ListDisplayType.GRID;
+        let newDisplayType: ListDisplayType;
+
+        if (enableDetail) {
+            if (displayType === ListDisplayType.DETAIL) {
+                newDisplayType = ListDisplayType.TABLE;
+            } else if (displayType === ListDisplayType.TABLE) {
+                newDisplayType = ListDisplayType.GRID;
+            } else if (displayType === ListDisplayType.GRID) {
+                newDisplayType = ListDisplayType.DETAIL;
+            } else {
+                newDisplayType = ListDisplayType.GRID;
+            }
+        } else {
+            if (displayType === ListDisplayType.GRID) {
+                newDisplayType = ListDisplayType.TABLE;
+            } else if (displayType === ListDisplayType.TABLE) {
+                newDisplayType = ListDisplayType.GRID;
+            } else {
+                newDisplayType = ListDisplayType.GRID;
+            }
+        }
+
         setList(listKey, {
             display: newDisplayType,
         });
+
+        return;
     };
 
     return <DisplayTypeToggleButton displayType={displayType} onToggle={handleToggleDisplayType} />;

src/renderer/features/shared/components/table-config.tsx

@@ -21,7 +21,12 @@ import {
     ListConfigBooleanControl,
     ListConfigTable,
 } from '/@/renderer/features/shared/components/list-config-menu';
-import { ItemListSettings, useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
+import {
+    type DataTableProps,
+    ItemListSettings,
+    useSettingsStore,
+    useSettingsStoreActions,
+} from '/@/renderer/store';
 import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -39,6 +44,7 @@ import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/d
 import { ItemListKey, ListPaginationType } from '/@/shared/types/types';
 
 interface TableConfigProps {
+    enablePinColumnButtons?: boolean;
     extraOptions?: {
         component: React.ReactNode;
         id: string;
@@ -52,19 +58,37 @@ interface TableConfigProps {
         };
     };
     tableColumnsData: { label: string; value: string }[];
+    tableKey?: 'detail' | 'main';
 }
 
 export const TableConfig = ({
+    enablePinColumnButtons = true,
     extraOptions,
     listKey,
     optionsConfig,
     tableColumnsData,
+    tableKey = 'main',
 }: TableConfigProps) => {
     const { t } = useTranslation();
 
     const list = useSettingsStore((state) => state.lists[listKey]) as ItemListSettings;
     const { setList } = useSettingsStoreActions();
 
+    const table = tableKey === 'detail' ? (list?.detail ?? list?.table) : list?.table;
+
+    const setTableUpdate = useCallback(
+        (patch: Partial<DataTableProps>) => {
+            if (tableKey === 'detail') {
+                setList(listKey, { detail: patch } as Parameters<
+                    ReturnType<typeof useSettingsStoreActions>['setList']
+                >[1]);
+            } else {
+                setList(listKey, { table: patch });
+            }
+        },
+        [listKey, setList, tableKey],
+    );
+
     const advancedSettings = useMemo(() => {
         const allOptions = [
             {
@@ -152,12 +176,12 @@ export const TableConfig = ({
                             },
                         ]}
                         onChange={(value) =>
-                            setList(listKey, {
-                                table: { size: value as 'compact' | 'default' },
+                            setTableUpdate({
+                                size: value as 'compact' | 'default' | 'large',
                             })
                         }
                         size="sm"
-                        value={list.table.size}
+                        value={table?.size ?? 'default'}
                         w="100%"
                     />
                 ),
@@ -169,8 +193,8 @@ export const TableConfig = ({
             {
                 component: (
                     <ListConfigBooleanControl
-                        onChange={(e) => setList(listKey, { table: { enableHeader: e } })}
-                        value={list.table.enableHeader}
+                        onChange={(e) => setTableUpdate({ enableHeader: e })}
+                        value={table.enableHeader}
                     />
                 ),
                 id: 'enableHeader',
@@ -181,10 +205,8 @@ export const TableConfig = ({
             {
                 component: (
                     <ListConfigBooleanControl
-                        onChange={(e) =>
-                            setList(listKey, { table: { enableRowHoverHighlight: e } })
-                        }
-                        value={list.table.enableRowHoverHighlight}
+                        onChange={(e) => setTableUpdate({ enableRowHoverHighlight: e })}
+                        value={table.enableRowHoverHighlight}
                     />
                 ),
                 id: 'enableRowHoverHighlight',
@@ -195,10 +217,8 @@ export const TableConfig = ({
             {
                 component: (
                     <ListConfigBooleanControl
-                        onChange={(e) =>
-                            setList(listKey, { table: { enableAlternateRowColors: e } })
-                        }
-                        value={list.table.enableAlternateRowColors}
+                        onChange={(e) => setTableUpdate({ enableAlternateRowColors: e })}
+                        value={table.enableAlternateRowColors}
                     />
                 ),
                 id: 'enableAlternateRowColors',
@@ -209,10 +229,8 @@ export const TableConfig = ({
             {
                 component: (
                     <ListConfigBooleanControl
-                        onChange={(e) =>
-                            setList(listKey, { table: { enableHorizontalBorders: e } })
-                        }
-                        value={list.table.enableHorizontalBorders}
+                        onChange={(e) => setTableUpdate({ enableHorizontalBorders: e })}
+                        value={table.enableHorizontalBorders}
                     />
                 ),
                 id: 'enableHorizontalBorders',
@@ -223,8 +241,8 @@ export const TableConfig = ({
             {
                 component: (
                     <ListConfigBooleanControl
-                        onChange={(e) => setList(listKey, { table: { enableVerticalBorders: e } })}
-                        value={list.table.enableVerticalBorders}
+                        onChange={(e) => setTableUpdate({ enableVerticalBorders: e })}
+                        value={table.enableVerticalBorders}
                     />
                 ),
                 id: 'enableVerticalBorders',
@@ -235,8 +253,10 @@ export const TableConfig = ({
             {
                 component: (
                     <ListConfigBooleanControl
-                        onChange={(e) => setList(listKey, { table: { autoFitColumns: e } })}
-                        value={list.table.autoFitColumns}
+                        onChange={(e) => setTableUpdate({ autoFitColumns: e })}
+                        value={
+                            tableKey === 'main' ? (table as DataTableProps).autoFitColumns : false
+                        }
                     />
                 ),
                 id: 'autoFitColumns',
@@ -256,7 +276,18 @@ export const TableConfig = ({
                 return option;
             })
             .filter((option): option is NonNullable<typeof option> => option !== null);
-    }, [extraOptions, listKey, optionsConfig, setList, t, list]);
+    }, [
+        t,
+        list.pagination,
+        list.itemsPerPage,
+        table,
+        tableKey,
+        extraOptions,
+        setList,
+        listKey,
+        setTableUpdate,
+        optionsConfig,
+    ]);
 
     return (
         <>
@@ -264,8 +295,9 @@ export const TableConfig = ({
             <Divider />
             <TableColumnConfig
                 data={tableColumnsData}
-                onChange={(columns) => setList(listKey, { table: { columns } })}
-                value={list.table.columns}
+                enablePinColumnButtons={enablePinColumnButtons}
+                onChange={(columns) => setTableUpdate({ columns })}
+                value={table.columns}
             />
         </>
     );
@@ -273,10 +305,12 @@ export const TableConfig = ({
 
 const TableColumnConfig = ({
     data,
+    enablePinColumnButtons,
     onChange,
     value,
 }: {
     data: { label: string; value: string }[];
+    enablePinColumnButtons: boolean;
     onChange: (value: ItemTableListColumnConfig[]) => void;
     value: ItemTableListColumnConfig[];
 }) => {
@@ -473,6 +507,7 @@ const TableColumnConfig = ({
             <div style={{ userSelect: 'none' }}>
                 {filteredColumns.map(({ item, matches }) => (
                     <TableColumnItem
+                        enablePinColumnButtons={enablePinColumnButtons}
                         handleAlignCenter={handleAlignCenter}
                         handleAlignLeft={handleAlignLeft}
                         handleAlignRight={handleAlignRight}
@@ -516,6 +551,7 @@ const DragHandle = ({
 
 const TableColumnItem = memo(
     ({
+        enablePinColumnButtons,
         handleAlignCenter,
         handleAlignLeft,
         handleAlignRight,
@@ -531,6 +567,7 @@ const TableColumnItem = memo(
         label,
         matches,
     }: {
+        enablePinColumnButtons: boolean;
         handleAlignCenter: (item: ItemTableListColumnConfig) => void;
         handleAlignLeft: (item: ItemTableListColumnConfig) => void;
         handleAlignRight: (item: ItemTableListColumnConfig) => void;
@@ -667,32 +704,34 @@ const TableColumnItem = memo(
                             variant="subtle"
                         />
                     </ActionIconGroup>
-                    <ActionIconGroup className={styles.group}>
-                        <ActionIcon
-                            icon="arrowLeftToLine"
-                            iconProps={{ size: 'md' }}
-                            onClick={() => handlePinToLeft(item)}
-                            size="xs"
-                            tooltip={{
-                                label: t('table.config.general.pinToLeft', {
-                                    postProcess: 'sentenceCase',
-                                }),
-                            }}
-                            variant={item.pinned === 'left' ? 'filled' : 'subtle'}
-                        />
-                        <ActionIcon
-                            icon="arrowRightToLine"
-                            iconProps={{ size: 'md' }}
-                            onClick={() => handlePinToRight(item)}
-                            size="xs"
-                            tooltip={{
-                                label: t('table.config.general.pinToRight', {
-                                    postProcess: 'sentenceCase',
-                                }),
-                            }}
-                            variant={item.pinned === 'right' ? 'filled' : 'subtle'}
-                        />
-                    </ActionIconGroup>
+                    {enablePinColumnButtons && (
+                        <ActionIconGroup className={styles.group}>
+                            <ActionIcon
+                                icon="arrowLeftToLine"
+                                iconProps={{ size: 'md' }}
+                                onClick={() => handlePinToLeft(item)}
+                                size="xs"
+                                tooltip={{
+                                    label: t('table.config.general.pinToLeft', {
+                                        postProcess: 'sentenceCase',
+                                    }),
+                                }}
+                                variant={item.pinned === 'left' ? 'filled' : 'subtle'}
+                            />
+                            <ActionIcon
+                                icon="arrowRightToLine"
+                                iconProps={{ size: 'md' }}
+                                onClick={() => handlePinToRight(item)}
+                                size="xs"
+                                tooltip={{
+                                    label: t('table.config.general.pinToRight', {
+                                        postProcess: 'sentenceCase',
+                                    }),
+                                }}
+                                variant={item.pinned === 'right' ? 'filled' : 'subtle'}
+                            />
+                        </ActionIconGroup>
+                    )}
                     <ActionIconGroup className={styles.group}>
                         <ActionIcon
                             icon="alignLeft"
@@ -772,6 +811,7 @@ const TableColumnItem = memo(
     (prevProps, nextProps) => {
         // Custom comparison function for better memoization
         return (
+            prevProps.enablePinColumnButtons === nextProps.enablePinColumnButtons &&
             prevProps.item.id === nextProps.item.id &&
             prevProps.item.isEnabled === nextProps.item.isEnabled &&
             prevProps.item.autoSize === nextProps.item.autoSize &&

src/renderer/features/shared/mutations/favorite-optimistic-updates.ts

@@ -520,6 +520,28 @@ export const applyFavoriteOptimisticUpdates = (
                 }
             });
 
+            const songListQueryKey = queryKeys.songs.list(variables.apiClientProps.serverId);
+            const songListQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: songListQueryKey,
+            });
+
+            songListQueries.forEach(([queryKey, data]) => {
+                if (data) {
+                    pendingUpdates.push({
+                        previousData: data,
+                        queryKey,
+                        updater: (prev: undefined | { items: Song[] }) => {
+                            if (!prev) return prev;
+                            const updatedItems = updateItemInArray(prev.items, itemIdSet, (item) =>
+                                createFavoriteUpdater<Song>(item),
+                            );
+                            return updatedItems ? { ...prev, items: updatedItems } : prev;
+                        },
+                    });
+                }
+            });
+
             const topSongsQueryKey = queryKeys.albumArtists.topSongs(
                 variables.apiClientProps.serverId,
             );
@@ -679,6 +701,7 @@ export const applyFavoriteOptimisticUpdatesDeferred = (
                 queryKeys.playlists.songList(variables.apiClientProps.serverId),
                 'playlist-song-list',
             );
+            collectQueries(queryKeys.songs.list(variables.apiClientProps.serverId), 'song-list');
             collectQueries(
                 queryKeys.albumArtists.topSongs(variables.apiClientProps.serverId),
                 'top-songs',
@@ -742,6 +765,7 @@ export const applyFavoriteOptimisticUpdatesDeferred = (
                     case 'album-list':
                     case 'artist-list':
                     case 'playlist-song-list':
+                    case 'song-list':
                     case 'top-songs': {
                         const updatedItems = updateItemInArray(
                             prev.items || [],

src/renderer/features/shared/mutations/rating-optimistic-updates.ts

@@ -519,6 +519,28 @@ export const applyRatingOptimisticUpdates = (
                 }
             });
 
+            const songListQueryKey = queryKeys.songs.list(variables.apiClientProps.serverId);
+            const songListQueries = queryClient.getQueriesData({
+                exact: false,
+                queryKey: songListQueryKey,
+            });
+
+            songListQueries.forEach(([queryKey, data]) => {
+                if (data) {
+                    pendingUpdates.push({
+                        previousData: data,
+                        queryKey,
+                        updater: (prev: undefined | { items: Song[] }) => {
+                            if (!prev) return prev;
+                            const updatedItems = updateItemInArray(prev.items, itemIdSet, (item) =>
+                                createRatingUpdater<Song>(item),
+                            );
+                            return updatedItems ? { ...prev, items: updatedItems } : prev;
+                        },
+                    });
+                }
+            });
+
             const topSongsQueryKey = queryKeys.albumArtists.topSongs(
                 variables.apiClientProps.serverId,
             );
@@ -652,6 +674,7 @@ export const applyRatingOptimisticUpdatesDeferred = (
                 queryKeys.songs.detail(variables.apiClientProps.serverId),
                 'song-detail',
             );
+            collectQueries(queryKeys.songs.list(variables.apiClientProps.serverId), 'song-list');
             collectQueries(
                 queryKeys.albumArtists.topSongs(variables.apiClientProps.serverId),
                 'top-songs',
@@ -712,6 +735,7 @@ export const applyRatingOptimisticUpdatesDeferred = (
                     case 'album-artist-list':
                     case 'album-list':
                     case 'artist-list':
+                    case 'song-list':
                     case 'top-songs': {
                         const updatedItems = updateItemInArray(
                             prev.items || [],

src/renderer/layouts/mobile-layout/mobile-layout.tsx

@@ -8,11 +8,10 @@ import styles from './mobile-layout.module.css';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { FullScreenVisualizer } from '/@/renderer/features/player/components/full-screen-visualizer';
 import { MobileFullscreenPlayer } from '/@/renderer/features/player/components/mobile-fullscreen-player';
-import { CommandPalette } from '/@/renderer/features/search/components/command-palette';
 import { MobileSidebar } from '/@/renderer/features/sidebar/components/mobile-sidebar';
 import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
 import { useFullScreenPlayerStore } from '/@/renderer/store';
-import { useCommandPalette, useWindowSettings } from '/@/renderer/store';
+import { useWindowSettings } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Drawer } from '/@/shared/components/drawer/drawer';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
@@ -29,7 +28,6 @@ interface MobileLayoutProps {
 }
 
 export const MobileLayout = ({ shell }: MobileLayoutProps) => {
-    const { opened, ...handlers } = useCommandPalette();
     const [sidebarOpened, { close: closeSidebar, open: openSidebar }] = useDisclosure(false);
     const {
         expanded: isFullScreenPlayerExpanded,
@@ -93,7 +91,6 @@ export const MobileLayout = ({ shell }: MobileLayoutProps) => {
                     </div>
                 )}
             </AnimatePresence>
-            <CommandPalette modalProps={{ handlers, opened }} />
             <ContextMenuController.Root />
         </>
     );

src/renderer/store/index.ts

@@ -2,5 +2,6 @@ export * from './app.store';
 export * from './auth.store';
 export * from './full-screen-player.store';
 export * from './player.store';
+export * from './scroll.store';
 export * from './settings.store';
 export * from './timestamp.store';

src/renderer/store/scroll.store.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+type ScrollState = {
+    getOffset: (key: string) => number | undefined;
+    offsets: Record<string, number>;
+    setOffset: (key: string, offset: number) => void;
+};
+
+export const useScrollStore = create<ScrollState>((set, get) => ({
+    getOffset: (key) => get().offsets[key],
+    offsets: {},
+    setOffset: (key, offset) =>
+        set((s) => ({
+            offsets: { ...s.offsets, [key]: offset },
+        })),
+}));

src/renderer/store/settings.store.ts

@@ -203,10 +203,21 @@ const ItemTableListPropsSchema = z.object({
     enableHorizontalBorders: z.boolean(),
     enableRowHoverHighlight: z.boolean(),
     enableVerticalBorders: z.boolean(),
-    size: z.enum(['compact', 'default']),
+    size: z.enum(['compact', 'default', 'large']),
+});
+
+const ItemDetailListPropsSchema = z.object({
+    columns: z.array(ItemTableListColumnConfigSchema),
+    enableAlternateRowColors: z.boolean(),
+    enableHeader: z.boolean(),
+    enableHorizontalBorders: z.boolean(),
+    enableRowHoverHighlight: z.boolean(),
+    enableVerticalBorders: z.boolean(),
+    size: z.enum(['compact', 'default', 'large']),
 });
 
 const ItemListConfigSchema = z.object({
+    detail: ItemDetailListPropsSchema.optional(),
     display: z.nativeEnum(ListDisplayType),
     grid: z.object({
         itemGap: z.enum(['lg', 'md', 'sm', 'xl', 'xs']),
@@ -790,7 +801,9 @@ export type DataGridProps = {
 };
 
 export type DataTableProps = z.infer<typeof ItemTableListPropsSchema>;
+export type ItemDetailListProps = z.infer<typeof ItemDetailListPropsSchema>;
 export type ItemListSettings = {
+    detail?: ItemDetailListProps;
     display: ListDisplayType;
     grid: DataGridProps;
     itemsPerPage: number;
@@ -1163,6 +1176,32 @@ const initialState: SettingsState = {
             },
         },
         [LibraryItem.ALBUM]: {
+            detail: {
+                columns: pickTableColumns({
+                    autoSizeColumns: [],
+                    columns: SONG_TABLE_COLUMNS,
+                    columnWidths: {
+                        [TableColumn.ACTIONS]: 60,
+                        [TableColumn.DURATION]: 100,
+                        [TableColumn.TITLE]: 400,
+                        [TableColumn.TRACK_NUMBER]: 50,
+                        [TableColumn.USER_FAVORITE]: 60,
+                    },
+                    enabledColumns: [
+                        TableColumn.TRACK_NUMBER,
+                        TableColumn.TITLE,
+                        TableColumn.DURATION,
+                        TableColumn.USER_FAVORITE,
+                        TableColumn.ACTIONS,
+                    ],
+                }),
+                enableAlternateRowColors: false,
+                enableHeader: true,
+                enableHorizontalBorders: false,
+                enableRowHoverHighlight: true,
+                enableVerticalBorders: false,
+                size: 'compact',
+            },
             display: ListDisplayType.GRID,
             grid: {
                 itemGap: 'sm',
@@ -1737,6 +1776,23 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
                                     delete data.table;
                                 }
 
+                                if (listState && data.detail) {
+                                    if (!listState.detail) {
+                                        const t = listState.table;
+                                        listState.detail = {
+                                            columns: t.columns,
+                                            enableAlternateRowColors: false,
+                                            enableHeader: t.enableHeader,
+                                            enableHorizontalBorders: t.enableHorizontalBorders,
+                                            enableRowHoverHighlight: t.enableRowHoverHighlight,
+                                            enableVerticalBorders: t.enableVerticalBorders,
+                                            size: t.size,
+                                        };
+                                    }
+                                    Object.assign(listState.detail, data.detail);
+                                    delete data.detail;
+                                }
+
                                 if (listState && data.grid) {
                                     Object.assign(listState.grid, data.grid);
                                     delete data.grid;
@@ -2092,7 +2148,7 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
                 return persistedState;
             },
             name: 'store_settings',
-            version: 24,
+            version: 25,
         },
     ),
 );

src/renderer/utils/format.tsx

@@ -104,24 +104,23 @@ export const formatDurationString = (duration: number) => {
         return part.replace(/^0/, '');
     });
 
-    let string: string = '';
+    const parts: string[] = [];
+    const len = rawDuration.length;
 
-    switch (rawDuration.length) {
-        case 1:
-            string = `${formattedDuration[0]}${i18n.t('datetime.secondShort')}`;
-            break;
-        case 2:
-            string = `${formattedDuration[0]}${i18n.t('datetime.minuteShort')} ${formattedDuration[1]}${i18n.t('datetime.secondShort')}`;
-            break;
-        case 3:
-            string = `${formattedDuration[0]}${i18n.t('datetime.hourShort')} ${formattedDuration[1]}${i18n.t('datetime.minuteShort')} ${formattedDuration[2]}${i18n.t('datetime.secondShort')}`;
-            break;
-        case 4:
-            string = `${formattedDuration[0]}${i18n.t('datetime.dayShort')} ${formattedDuration[1]}${i18n.t('datetime.hourShort')} ${formattedDuration[2]}${i18n.t('datetime.minuteShort')} ${formattedDuration[3]}${i18n.t('datetime.secondShort')}`;
-            break;
+    if (len >= 1 && formattedDuration[len - 1] !== undefined) {
+        parts.push(`${formattedDuration[len - 1]}${i18n.t('datetime.secondShort')}`);
+    }
+    if (len >= 2 && formattedDuration[len - 2]) {
+        parts.unshift(`${formattedDuration[len - 2]}${i18n.t('datetime.minuteShort')}`);
+    }
+    if (len >= 3 && formattedDuration[len - 3]) {
+        parts.unshift(`${formattedDuration[len - 3]}${i18n.t('datetime.hourShort')}`);
+    }
+    if (len >= 4 && formattedDuration[len - 4]) {
+        parts.unshift(`${formattedDuration[len - 4]}${i18n.t('datetime.dayShort')}`);
     }
 
-    return string;
+    return parts.join(' ');
 };
 
 export const formatDurationStringShort = (duration: number) => {

src/shared/api/subsonic/subsonic-normalize.ts

@@ -137,14 +137,19 @@ const normalizeSong = (
     discTitleMap?: Map<number, string>,
 ): Song => {
     const participants = getParticipants(item);
+    const albumArtistsList = getArtistList(item.albumArtists, item.artistId, item.artist);
+    const albumArtistName =
+        item.albumArtists?.length > 0
+            ? item.albumArtists.map((a) => a.name).join(', ')
+            : item.artist || '';
 
     return {
         _itemType: LibraryItem.SONG,
         _serverId: server?.id || 'unknown',
         _serverType: ServerType.SUBSONIC,
         album: item.album || '',
-        albumArtistName: item.artist || '',
-        albumArtists: getArtistList(item.albumArtists, item.artistId, item.artist),
+        albumArtistName,
+        albumArtists: albumArtistsList,
         albumId: item.albumId?.toString() || '',
         artistName: item.artist || '',
         artists: getArtistList(item.artists, item.artistId, item.artist, participants),

src/shared/api/utils.ts

@@ -139,7 +139,7 @@ export const getClientType = (): string => {
     }
 };
 
-export const SEPARATOR_STRING = ' · ';
+export const SEPARATOR_STRING = ' • ';
 
 export const sortSongList = (songs: Song[], sortBy: SongListSort, sortOrder: SortOrder) => {
     let results: Song[] = songs;

src/shared/components/icon/icon.tsx

@@ -58,6 +58,7 @@ import {
     LuInfo,
     LuKeyboard,
     LuLayoutGrid,
+    LuLayoutList,
     LuLibrary,
     LuList,
     LuListFilter,
@@ -186,6 +187,7 @@ export const AppIcon = {
     itemSong: LuMusic,
     keyboard: LuKeyboard,
     lastPlayed: LuHeadphones,
+    layoutDetail: LuLayoutList,
     layoutGrid: LuLayoutGrid,
     layoutList: LuList,
     layoutTable: LuTable,

src/shared/components/read-only-rating/read-only-rating.module.css

@@ -0,0 +1,31 @@
+.root {
+    display: inline-flex;
+    gap: 0.125rem;
+    align-items: center;
+    line-height: 1;
+}
+
+.root.interactive {
+    cursor: pointer;
+}
+
+.root.xs {
+    font-size: var(--theme-font-size-xs);
+}
+
+.root.sm {
+    font-size: var(--theme-font-size-sm);
+}
+
+.root.md {
+    font-size: var(--theme-font-size-md);
+}
+
+.filled {
+    color: var(--theme-colors-primary);
+}
+
+.empty {
+    color: var(--theme-colors-foreground-muted);
+    opacity: 0.6;
+}

src/shared/components/read-only-rating/read-only-rating.tsx

@@ -0,0 +1,81 @@
+import clsx from 'clsx';
+import { memo, useCallback, useState } from 'react';
+
+import styles from './read-only-rating.module.css';
+
+const MAX_STARS = 5;
+
+interface ReadOnlyRatingProps {
+    className?: string;
+    onChange?: (value: number) => void;
+    size?: 'md' | 'sm' | 'xs';
+    value?: null | number;
+}
+
+function ReadOnlyRatingComponent({ className, onChange, size = 'sm', value }: ReadOnlyRatingProps) {
+    const [hoverIndex, setHoverIndex] = useState<null | number>(null);
+    const rating = Math.min(MAX_STARS, Math.max(0, value ?? 0));
+    const displayCount = hoverIndex !== null ? hoverIndex : Math.floor(rating);
+
+    const handlePointerMove = useCallback(
+        (e: React.PointerEvent) => {
+            if (!onChange) return;
+            const el = e.currentTarget;
+            const width = (el as HTMLElement).offsetWidth;
+            if (width <= 0) return;
+            const x = e.clientX - el.getBoundingClientRect().left;
+            const segment = Math.floor((x / width) * MAX_STARS);
+            const filled = segment < 0 ? 0 : Math.min(MAX_STARS, segment + 1);
+            setHoverIndex(filled);
+        },
+        [onChange],
+    );
+
+    const handlePointerLeave = useCallback(() => {
+        setHoverIndex(null);
+    }, []);
+
+    const handleClick = useCallback(
+        (e: React.MouseEvent) => {
+            if (!onChange) return;
+            e.preventDefault();
+            e.stopPropagation();
+            const el = e.currentTarget;
+            const width = (el as HTMLElement).offsetWidth;
+            if (width <= 0) return;
+            const x = e.clientX - el.getBoundingClientRect().left;
+            const segment = Math.floor((x / width) * MAX_STARS);
+            const clicked = segment < 0 ? 0 : Math.min(MAX_STARS, segment + 1);
+            onChange(clicked === rating ? 0 : clicked);
+        },
+        [onChange, rating],
+    );
+
+    const isInteractive = typeof onChange === 'function';
+
+    return (
+        <span
+            aria-label={isInteractive ? undefined : `${rating} out of ${MAX_STARS} stars`}
+            className={clsx(
+                styles.root,
+                size && styles[size],
+                isInteractive && styles.interactive,
+                className,
+            )}
+            onClick={isInteractive ? handleClick : undefined}
+            onPointerLeave={isInteractive ? handlePointerLeave : undefined}
+            onPointerMove={isInteractive ? handlePointerMove : undefined}
+            role={isInteractive ? undefined : 'img'}
+        >
+            {Array.from({ length: MAX_STARS }, (_, i) => (
+                <span className={i < displayCount ? styles.filled : styles.empty} key={i}>
+                    ★
+                </span>
+            ))}
+        </span>
+    );
+}
+
+export const ReadOnlyRating = memo(ReadOnlyRatingComponent);
+
+ReadOnlyRating.displayName = 'ReadOnlyRating';

src/shared/types/types.ts

@@ -34,6 +34,7 @@ export enum ItemListKey {
 }
 
 export enum ListDisplayType {
+    DETAIL = 'detail',
     GRID = 'poster',
     LIST = 'list',
     TABLE = 'table',

web.vite.config.ts

@@ -41,7 +41,7 @@ export default defineConfig({
             '@atlaskit/pragmatic-drag-and-drop',
             '@atlaskit/pragmatic-drag-and-drop-auto-scroll',
             '@atlaskit/pragmatic-drag-and-drop-hitbox',
-            '@tanstack_react-query-persist-client',
+            '@tanstack/react-query-persist-client',
             'idb-keyval',
         ],
     },