initial progress on item detail list

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>
@@ -179,6 +191,30 @@ export const AlbumListView = ({
                     return null;
             }
         }
+        case ListDisplayType.DETAIL: {
+            switch (pagination) {
+                case ListPaginationType.INFINITE: {
+                    return (
+                        <AlbumListInfiniteDetail
+                            itemsPerPage={itemsPerPage}
+                            query={mergedQuery}
+                            serverId={server.id}
+                        />
+                    );
+                }
+                case ListPaginationType.PAGINATED: {
+                    return (
+                        <AlbumListPaginatedDetail
+                            itemsPerPage={itemsPerPage}
+                            query={mergedQuery}
+                            serverId={server.id}
+                        />
+                    );
+                }
+                default:
+                    return null;
+            }
+        }
     }
 
     return null;

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

@@ -0,0 +1,59 @@
+import { UseSuspenseQueryOptions } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { ItemDetailList } from '/@/renderer/components/item-detail/item-detail';
+import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
+import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpers/use-item-list-scroll-persist';
+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> {}
+
+export const AlbumListInfiniteDetail = ({
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    },
+    saveScrollOffset = true,
+    serverId,
+}: AlbumListInfiniteDetailProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { dataVersion, getItem, itemCount, loadedItems, onRangeChanged } =
+        useItemListInfiniteLoader({
+            eventKey: ItemListKey.ALBUM,
+            itemsPerPage,
+            itemType: LibraryItem.ALBUM,
+            listCountQuery,
+            listQueryFn,
+            query,
+            serverId,
+        });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    return (
+        <ItemDetailList
+            data={loadedItems}
+            dataVersion={dataVersion}
+            getItem={getItem}
+            itemCount={itemCount}
+            onRangeChanged={onRangeChanged}
+        />
+    );
+};

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

@@ -0,0 +1,65 @@
+import { UseSuspenseQueryOptions } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { ItemDetailList } from '/@/renderer/components/item-detail/item-detail';
+import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
+import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpers/use-item-list-scroll-persist';
+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> {}
+
+export const AlbumListPaginatedDetail = ({
+    itemsPerPage = 100,
+    query = {
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    },
+    saveScrollOffset = true,
+    serverId,
+}: AlbumListPaginatedDetailProps) => {
+    const listCountQuery = albumQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getAlbumList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.ALBUM,
+        itemsPerPage,
+        itemType: LibraryItem.ALBUM,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemDetailList currentPage={currentPage} items={data || []} />
+        </ItemListWithPagination>
+    );
+};

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="layoutList" size="lg" />
+                {i18n.t('table.config.view.detail', { postProcess: 'sentenceCase' }) as string}
+            </Group>
+        ),
+        value: ListDisplayType.DETAIL,
+    },
     // {
     //     disabled: true,
     //     label: (
@@ -190,6 +199,10 @@ const Config = ({
                 />
             );
 
+        case ListDisplayType.DETAIL:
+            // Detail view doesn't have specific configuration options
+            return null;
+
         default:
             return null;
     }