fix: pagination cleanup

apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.css.ts

@@ -17,10 +17,19 @@ export const item = style([
     display: 'inline-flex',
     flexDirection: 'column',
     selectors: {
+      ...withThemeMode({
+        dark: {backgroundColor: themeVars.dynamicColors.input.backgroundColor},
+        light: {
+          backgroundColor: themeVars.backgroundColor.white,
+          border: `1px solid ${themeVars.borderColor.default}`,
+          boxShadow: themeVars.boxShadow.default,
+        },
+      }),
+
       ...withThemeMode(
         {
           dark: {backgroundColor: darkGrayScale.gray2},
-          light: {backgroundColor: darkGrayScale.gray10},
+          light: {backgroundColor: darkGrayScale.gray12},
         },
         '&:hover',
       ),

apps/codeimage/src/pages/Dashboard/components/ProjectList/ProjectList.css.ts

@@ -41,11 +41,11 @@ export const fallbackContainer = style({
   selectors: {
     ...withThemeMode({
       light: {
-        backgroundColor: darkGrayScale.gray3,
+        backgroundColor: themeVars.backgroundColor.gray['200'],
         color: themeVars.dynamicColors.descriptionTextColor,
       },
       dark: {
-        backgroundColor: themeVars.backgroundColor.gray['200'],
+        backgroundColor: darkGrayScale.gray3,
         color: themeVars.dynamicColors.descriptionTextColor,
       },
     }),

apps/codeimage/src/pages/Dashboard/components/ProjectList/ProjectList.tsx

@@ -1,4 +1,4 @@
-import {getLastPage, Pagination} from '@codeimage/ui';
+import {Box, getLastPage, Pagination} from '@codeimage/ui';
 import {ErrorBoundary, For, Index, Show, Suspense, untrack} from 'solid-js';
 import {getDashboardState} from '../../dashboard.state';
 import {ProjectItem} from '../ProjectItem/ProjectItem';
@@ -9,6 +9,7 @@ import * as styles from './ProjectList.css';
 
 export function ProjectList() {
   const dashboard = getDashboardState()!;
+  const {paginationState} = dashboard;
 
   const listIsEmpty = () => {
     return !dashboard.data.error && dashboard.filteredData()?.length === 0;
@@ -24,8 +25,10 @@ export function ProjectList() {
     const list = Array.from({length: count || 5});
     return <Index each={list}>{() => <ProjectItemSkeleton />}</Index>;
   };
+
   const lastPage = () =>
-    getLastPage(dashboard.filteredData, () => dashboard.pageSize);
+    getLastPage(dashboard.filteredData, () => paginationState.pageSize);
+
   return (
     <ErrorBoundary
       fallback={(err, reset) => (
@@ -48,12 +51,14 @@ export function ProjectList() {
               {item => <ProjectItem item={item} />}
             </For>
           </ul>
-          <Show when={lastPage() !== 1}>
-            <Pagination
-              pageNumber={dashboard.page()}
-              onChange={dashboard.setPage}
-              lastPage={lastPage()}
-            />
+          <Show when={paginationState.hasOnePage} keyed={false}>
+            <Box display={'flex'} justifyContent={'center'}>
+              <Pagination
+                pageNumber={paginationState.page()}
+                onChange={paginationState.setPage}
+                lastPage={lastPage()}
+              />
+            </Box>
           </Show>
         </Show>
       </Suspense>

apps/codeimage/src/pages/Dashboard/dashboard.state.ts

@@ -7,8 +7,9 @@ import {getThemeStore} from '@codeimage/store/theme/theme.store';
 import {createPagedData} from '@codeimage/ui';
 import {appEnvironment} from '@core/configuration';
 import {createContextProvider} from '@solid-primitives/context';
-import {createResource, createSignal, createEffect} from 'solid-js';
+import {createEffect, createResource, createSignal} from 'solid-js';
 import {API} from '../../data-access/api';
+
 function makeDashboardState(authState = getAuth0State()) {
   const [data, {mutate, refetch}] = createResource(fetchWorkspaceContent, {
     initialValue: [],
@@ -27,22 +28,25 @@ function makeDashboardState(authState = getAuth0State()) {
       );
     return data();
   };
-  const [pagedData, {page, setPage}] = createPagedData(() => filteredData(), {
+
+  const [pagedData, paginationState] = createPagedData(filteredData, {
     pageSize,
     pageSelected: 1,
   });
 
   createEffect(() => {
     const searchValue = search();
-    if (searchValue.length > 2) setPage(1);
+    if (searchValue.length > 2) paginationState.setPage(1);
   });
+
   async function fetchWorkspaceContent(): Promise<
     ApiTypes.GetProjectByIdApi['response'][]
   > {
     const userId = authState.user()?.id;
     if (!userId) return [];
     return API.project.getWorkspaceContent();
   }
+
   async function createNewProject() {
     const theme = await getThemeStore().getThemeDef('vsCodeDarkTheme')?.load();
 
@@ -144,9 +148,14 @@ function makeDashboardState(authState = getAuth0State()) {
     updateSnippetName,
     cloneProject,
     pagedData,
-    page,
-    setPage,
-    pageSize,
+    paginationState: Object.assign(paginationState, {
+      get pageSize() {
+        return pageSize;
+      },
+      get hasOnePage() {
+        return pagedData().length <= pageSize;
+      },
+    }),
   };
 }
 

packages/ui/src/lib/primitives/Pagination/PageItem.css.ts

@@ -0,0 +1,5 @@
+import {style} from '@vanilla-extract/css';
+
+export const pageItemButton = style({
+  transition: 'none',
+});

packages/ui/src/lib/primitives/Pagination/page.tsx → packages/ui/src/lib/primitives/Pagination/PageItem.tsx

@@ -1,18 +1,20 @@
 import {ParentProps} from 'solid-js';
 import {IconButton} from '../IconButton';
-import {buttonPaginationProps} from './buttons';
+import {ButtonPaginationProps} from './createPaginationButtons';
+import * as styles from './PageItem.css';
 
-const Page = (props: ParentProps<buttonPaginationProps>) => {
+const PageItem = (props: ParentProps<ButtonPaginationProps>) => {
   return (
     <IconButton
       theme={props.selected ? 'primary' : 'secondary'}
       as="li"
       pill
+      class={styles.pageItemButton}
       onClick={() => props.onClick?.(props.value)}
     >
       {props.value}
     </IconButton>
   );
 };
 
-export default Page;
+export default PageItem;

packages/ui/src/lib/primitives/Pagination/Pagination.css.ts

@@ -0,0 +1,7 @@
+import {style} from '@vanilla-extract/css';
+import {themeVars} from '../../theme';
+
+export const pagination = style({
+  display: 'flex',
+  gap: themeVars.spacing[2],
+});

packages/ui/src/lib/primitives/Pagination/Pagination.tsx

@@ -1,54 +1,82 @@
 import {For, mergeProps, ParentProps, Setter} from 'solid-js';
-import {Box} from '../Box';
+import {SvgIcon, SvgIconProps} from '../Icon';
 import {IconButton} from '../IconButton';
-import {createPaginationButtons} from './buttons';
-import Page from './page';
+import {createPaginationButtons} from './createPaginationButtons';
+import PageItem from './PageItem';
+import * as styles from './Pagination.css';
 
 export interface PaginationProps {
   pageNumber?: number;
   onChange: Setter<number>;
   lastPage?: number;
 }
 
+function NextIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M8.25 4.5l7.5 7.5-7.5 7.5"
+      />
+    </SvgIcon>
+  );
+}
+
+function PrevIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.75 19.5L8.25 12l7.5-7.5"
+      />
+    </SvgIcon>
+  );
+}
+
 export const Pagination = (props: ParentProps<PaginationProps>) => {
   const merged = mergeProps(
     {pageNumber: 1, lastPage: 1} as Required<PaginationProps>,
     props,
   );
+
   const itemButtons = createPaginationButtons(
     () => merged.lastPage,
     () => merged.pageNumber,
     page => props.onChange(page),
     false,
   );
 
-  const handlerNextChange = () => {
-    merged.onChange(prev => prev + 1);
-  };
+  const isPrevDisabled = () => merged.pageNumber === 1;
+  const isNextDisabled = () => merged.pageNumber === merged.lastPage;
 
-  const handlerPrevChange = () => {
-    merged.onChange(prev => prev - 1);
-  };
+  const handlerNextChange = () => merged.onChange(prev => prev + 1);
+  const handlerPrevChange = () => merged.onChange(prev => prev - 1);
 
   return (
-    <Box display="flex" flexDirection="column" placeItems="center">
-      <Box display="flex" gap="2">
-        <IconButton
-          onClick={handlerNextChange}
-          pill
-          disabled={merged.pageNumber === 1}
-        >
-          {'<'}
-        </IconButton>
-        <For each={itemButtons()}>{page => <Page {...page} />}</For>
-        <IconButton
-          onclick={handlerPrevChange}
-          pill
-          disabled={merged.pageNumber === merged.lastPage}
-        >
-          {'>'}
-        </IconButton>
-      </Box>
-    </Box>
+    <div class={styles.pagination}>
+      <IconButton pill disabled={isPrevDisabled()} onClick={handlerPrevChange}>
+        <PrevIcon />
+      </IconButton>
+      <For each={itemButtons()}>
+        {pageItemProps => <PageItem {...pageItemProps} />}
+      </For>
+      <IconButton pill disabled={isNextDisabled()} onClick={handlerNextChange}>
+        <NextIcon />
+      </IconButton>
+    </div>
   );
 };

packages/ui/src/lib/primitives/Pagination/buttons.ts → packages/ui/src/lib/primitives/Pagination/createPaginationButtons.ts

@@ -1,3 +1,10 @@
+/**
+ * Portions of this file are based on code from @material-ui/react.
+ * MIT Licensed, Copyright (c) 2014 Call-Em-All.
+ *
+ * Credits to the Material UI team:
+ * https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
+ */
 import {Accessor, mapArray, Setter} from 'solid-js';
 import {arrayFomRange} from '../../hooks';
 
@@ -101,7 +108,7 @@ export const createPaginationButtons = (
   return items;
 };
 
-export type buttonPaginationProps = {
+export type ButtonPaginationProps = {
   onClick?: Setter<number | string>;
   value: number | string;
   selected: boolean;