add additional list pagination helpers and components

src/renderer/components/item-list/helpers/item-list-paginated-loader.ts

@@ -4,15 +4,17 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { getServerById } from '/@/renderer/store';
 
 export interface PaginatedListProps<TQuery> {
+    initialPage?: number;
+    itemsPerPage?: number;
     query: Omit<TQuery, 'limit' | 'startIndex'>;
     serverId: string;
 }
 
 interface UseItemListPaginatedLoaderProps {
+    currentPage: number;
     itemsPerPage: number;
     listCountQuery: UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
     listQueryFn: (args: { apiClientProps: any; query: any }) => Promise<{ items: unknown[] }>;
-    pageIndex: number;
     query: Record<string, any>;
     serverId: string;
 }
@@ -22,28 +24,30 @@ function getInitialData(itemCount: number) {
 }
 
 export const useItemListPaginatedLoader = ({
+    currentPage,
     itemsPerPage = 100,
     listCountQuery,
     listQueryFn,
-    pageIndex,
     query = {},
     serverId,
 }: UseItemListPaginatedLoaderProps) => {
     const { data: totalItemCount } = useSuspenseQuery<number, any, number, any>(listCountQuery);
 
+    const pageCount = Math.ceil(totalItemCount / itemsPerPage);
+
+    const fetchRange = getFetchRange(currentPage, itemsPerPage);
+    const startIndex = fetchRange.startIndex;
+
+    const queryParams = {
+        limit: itemsPerPage,
+        startIndex: startIndex,
+        ...query,
+    };
+
     const { data } = useQuery({
         gcTime: 1000 * 15,
-        initialData: getInitialData(totalItemCount),
+        placeholderData: getInitialData(itemsPerPage),
         queryFn: async ({ signal }) => {
-            const fetchRange = getFetchRange(pageIndex, itemsPerPage);
-            const startIndex = fetchRange.startIndex;
-
-            const queryParams = {
-                limit: itemsPerPage,
-                startIndex: startIndex,
-                ...query,
-            };
-
             const result = await listQueryFn({
                 apiClientProps: { server: getServerById(serverId), signal },
                 query: queryParams,
@@ -51,11 +55,11 @@ export const useItemListPaginatedLoader = ({
 
             return result.items;
         },
-        queryKey: queryKeys.albums.list(serverId, query),
+        queryKey: queryKeys.albums.list(serverId, queryParams),
         staleTime: 1000 * 15,
     });
 
-    return { data };
+    return { data, pageCount, totalItemCount };
 };
 
 const getFetchRange = (pageIndex: number, itemsPerPage: number) => {

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

@@ -0,0 +1,9 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-md);
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    padding: var(--theme-spacing-md);
+}

src/renderer/components/item-list/item-list-pagination/item-list-pagination.tsx

@@ -0,0 +1,36 @@
+import { Fragment, ReactNode } from 'react';
+
+import styles from './item-list-pagination.module.css';
+
+import { Pagination } from '/@/shared/components/pagination/pagination';
+
+interface ItemListWithPaginationProps {
+    children: ReactNode;
+    currentPage: number;
+    itemsPerPage: number;
+    onChange: (e: number) => void;
+    pageCount: number;
+    totalItemCount: number;
+}
+
+export const ItemListWithPagination = ({
+    children,
+    currentPage,
+    itemsPerPage,
+    onChange,
+    pageCount,
+    totalItemCount,
+}: ItemListWithPaginationProps) => {
+    return (
+        <div className={styles.container}>
+            <Fragment key={currentPage}>{children}</Fragment>
+            <Pagination
+                itemsPerPage={itemsPerPage}
+                onChange={onChange}
+                total={pageCount}
+                totalItemCount={totalItemCount}
+                value={currentPage}
+            />
+        </div>
+    );
+};

src/renderer/components/item-list/item-list-pagination/use-item-list-pagination.ts

@@ -0,0 +1,23 @@
+import { useSearchParams } from 'react-router-dom';
+
+interface UseItemListPaginationProps {
+    initialPage?: number;
+}
+
+export const useItemListPagination = ({ initialPage }: UseItemListPaginationProps) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const currentPage = initialPage || Number(searchParams.get('currentPage')) || 0;
+
+    const onChange = (index: number) => {
+        setSearchParams(
+            (params) => {
+                params.set('currentPage', String(index));
+                return params;
+            },
+            { replace: true },
+        );
+    };
+
+    return { currentPage, onChange };
+};

src/shared/components/pagination/pagination.module.css

@@ -1,14 +1,18 @@
+.root {
+    justify-content: center;
+}
+
 .control {
-    color: var(--theme-btn-default-fg);
+    color: var(--theme-colors-foreground);
-    background-color: var(--theme-btn-default-bg);
+    background-color: var(--theme-colors-surface);
     border: none;
     transition:
         background 0.2s ease-in-out,
         color 0.2s ease-in-out;
 
     &[data-active] {
-        color: var(--theme-btn-primary-fg);
+        color: var(--theme-colors-primary-contrast);
-        background-color: var(--theme-btn-primary-bg);
+        background-color: var(--theme-colors-primary-filled);
     }
 
     &[data-dots] {
@@ -16,12 +20,10 @@
     }
 
     &:hover {
-        color: var(--theme-btn-default-fg-hover);
+        background-color: lighten(var(--theme-colors-surface), 10%);
-        background-color: var(--theme-btn-default-bg-hover);
 
         &[data-active] {
-            color: var(--theme-btn-primary-fg-hover);
+            background-color: darken(var(--theme-colors-primary-filled), 10%);
-            background-color: var(--theme-btn-primary-bg-hover);
         }
 
         &[data-dots] {
@@ -29,3 +31,9 @@
         }
     }
 }
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}

src/shared/components/pagination/pagination.tsx

@@ -2,23 +2,71 @@ import {
     Pagination as MantinePagination,
     PaginationProps as MantinePaginationProps,
 } from '@mantine/core';
+import clsx from 'clsx';
+import { useRef } from 'react';
 
 import styles from './pagination.module.css';
 
-interface PaginationProps extends MantinePaginationProps {}
+import { Icon } from '/@/shared/components/icon/icon';
+import { Text } from '/@/shared/components/text/text';
+import { useContainerQuery } from '/@/shared/hooks/use-container-query';
+
+interface PaginationProps extends MantinePaginationProps {
+    containerClassName?: string;
+    itemsPerPage: number;
+    totalItemCount: number;
+}
+
+export const Pagination = ({
+    classNames,
+    containerClassName,
+    itemsPerPage,
+    style,
+    totalItemCount,
+    ...props
+}: PaginationProps) => {
+    const { ref: containerRef, ...containerQuery } = useContainerQuery();
+
+    const paginationRef = useRef<HTMLDivElement>(null);
+
+    // !IMPORTANT: Mantine Pagination is 1-indexed
+    const currentPageIndex = props.value || 0;
+    const currentPageValue = currentPageIndex + 1;
+
+    const handleChange = (e: number) => {
+        props.onChange?.(e - 1);
+    };
+
+    const currentPageStartIndex = itemsPerPage * currentPageIndex + 1;
+    const currentPageEndIndex = Math.min(currentPageValue * itemsPerPage, totalItemCount);
 
-export const Pagination = ({ classNames, style, ...props }: PaginationProps) => {
     return (
-        <MantinePagination
+        <div className={clsx(styles.container, containerClassName)} ref={containerRef}>
-            classNames={{
+            <MantinePagination
-                control: styles.control,
+                boundaries={1}
-                ...classNames,
+                classNames={{
-            }}
+                    control: styles.control,
-            radius="xl"
+                    root: styles.root,
-            style={{
+                    ...classNames,
-                ...style,
+                }}
-            }}
+                nextIcon={() => <Icon icon="arrowRightS" />}
-            {...props}
+                previousIcon={() => <Icon icon="arrowLeftS" />}
-        />
+                radius="md"
+                ref={paginationRef}
+                siblings={containerQuery.isXl ? 3 : containerQuery.isMd ? 2 : 1}
+                size="md"
+                style={{
+                    ...style,
+                }}
+                {...props}
+                onChange={handleChange}
+                value={currentPageValue}
+            />
+            {containerQuery.isSm && totalItemCount && (
+                <Text isNoSelect weight={500}>
+                    {currentPageStartIndex} - {currentPageEndIndex} of {totalItemCount}
+                </Text>
+            )}
+        </div>
     );
 };

src/shared/hooks/use-container-query.ts

@@ -0,0 +1,25 @@
+import { useElementSize } from '@mantine/hooks';
+
+interface UseContainerQueryProps {
+    '2xl'?: number;
+    '3xl'?: number;
+    lg?: number;
+    md?: number;
+    sm?: number;
+    xl?: number;
+}
+
+export const useContainerQuery = (props?: UseContainerQueryProps) => {
+    const { '2xl': xxl, '3xl': xxxl, lg, md, sm, xl } = props || {};
+    const { height, ref, width } = useElementSize();
+
+    const isXs = width >= 0;
+    const isSm = width >= (sm || 600);
+    const isMd = width >= (md || 768);
+    const isLg = width >= (lg || 1200);
+    const isXl = width >= (xl || 1500);
+    const is2xl = width >= (xxl || 1920);
+    const is3xl = width >= (xxxl || 2560);
+
+    return { height, is2xl, is3xl, isLg, isMd, isSm, isXl, isXs, ref, width };
+};