Add album detail list view (#1681)

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 };