chore: release v2.1.0

inertia/components/common/dropdown/dropdown.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { ReactNode, useRef } from 'react';
+import { HtmlHTMLAttributes, ReactNode, useRef } from 'react';
 import DropdownContainer from '~/components/common/dropdown/dropdown_container';
 import DropdownLabel from '~/components/common/dropdown/dropdown_label';
 import useClickOutside from '~/hooks/use_click_outside';
@@ -34,8 +34,8 @@ export default function Dropdown({
   label,
   className,
   svgSize,
-}: {
+  onClick,
-  children: ReactNode;
+}: HtmlHTMLAttributes<HTMLDivElement> & {
   label: ReactNode | string;
   className?: string;
   svgSize?: number;
@@ -49,7 +49,10 @@ export default function Dropdown({
   return (
     <DropdownStyle
       opened={isShowing}
-      onClick={toggle}
+      onClick={(event) => {
+        onClick?.(event);
+        toggle();
+      }}
       ref={dropdownRef}
       className={className}
       svgSize={svgSize}

inertia/components/common/icon_button.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+const IconButton = styled.button(({ theme }) => ({
+  cursor: 'pointer',
+  height: '2rem',
+  width: '2rem',
+  fontSize: '1rem',
+  color: theme.colors.font,
+  backgroundColor: theme.colors.grey,
+  borderRadius: '50%',
+  border: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  '&:disabled': {
+    cursor: 'not-allowed',
+    opacity: 0.15,
+  },
+}));
+
+export default IconButton;

inertia/components/common/legend.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+const Legend = styled.span(({ theme }) => ({
+  fontSize: '13px',
+  color: theme.colors.grey,
+}));
+
+export default Legend;

inertia/components/common/table.tsx

@@ -0,0 +1,218 @@
+import styled from '@emotion/styled';
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { useState } from 'react';
+import IconButton from '~/components/common/icon_button';
+
+import {
+  MdKeyboardArrowLeft,
+  MdKeyboardArrowRight,
+  MdKeyboardDoubleArrowLeft,
+  MdKeyboardDoubleArrowRight,
+} from 'react-icons/md';
+import Input from '~/components/common/form/_input';
+
+const TablePageFooter = styled.div({
+  display: 'flex',
+  gap: '1em',
+  alignItems: 'center',
+});
+
+const Box = styled(TablePageFooter)({
+  gap: '0.35em',
+});
+
+const Resizer = styled.div<{ isResizing: boolean }>(
+  ({ theme, isResizing }) => ({
+    cursor: 'col-resize',
+    userSelect: 'none',
+    touchAction: 'none',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    height: '100%',
+    width: '5px',
+    opacity: !isResizing ? 0 : 1,
+    background: !isResizing ? theme.colors.white : theme.colors.primary,
+    '&:hover': {
+      opacity: 0.5,
+    },
+  })
+);
+
+type TableProps<T> = {
+  columns: ColumnDef<T>[];
+  data: T[];
+};
+
+export default function Table<T>({ columns, data }: TableProps<T>) {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const table = useReactTable({
+    data,
+    columns,
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange',
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    debugTable: true,
+  });
+
+  return (
+    <div css={{ fontSize: '0.9rem', paddingBlock: '1em' }}>
+      <div
+        css={{
+          maxWidth: '100%',
+          marginBottom: '1em',
+          display: 'block',
+          overflowX: 'auto',
+          overflowY: 'hidden',
+        }}
+      >
+        <table>
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    style={{
+                      width: header.getSize(),
+                    }}
+                    css={{
+                      position: 'relative',
+                      userSelect: 'none',
+                      // resizer
+                      '&:hover > div > div': {
+                        opacity: 0.5,
+                      },
+                    }}
+                    colSpan={header.colSpan}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <div
+                        css={{
+                          cursor: header.column.getCanSort()
+                            ? 'pointer'
+                            : 'default',
+                        }}
+                        onClick={header.column.getToggleSortingHandler()}
+                        title={
+                          header.column.getCanSort()
+                            ? header.column.getNextSortingOrder() === 'asc'
+                              ? 'Sort ascending'
+                              : header.column.getNextSortingOrder() === 'desc'
+                                ? 'Sort descending'
+                                : 'Clear sort'
+                            : undefined
+                        }
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                        {{
+                          asc: ' 🔼',
+                          desc: ' 🔽',
+                        }[header.column.getIsSorted() as string] ?? null}
+                        {header.column.getCanResize() && (
+                          <Resizer
+                            onMouseDown={header.getResizeHandler()}
+                            onTouchStart={header.getResizeHandler()}
+                            isResizing={header.column.getIsResizing()}
+                          />
+                        )}
+                      </div>
+                    )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table
+              .getRowModel()
+              .rows.slice(0, 10)
+              .map((row) => (
+                <tr key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <td key={cell.id} style={{ width: cell.column.getSize() }}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+      {table.getPageCount() > 1 && (
+        <TablePageFooter>
+          <Box>
+            <IconButton
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <MdKeyboardDoubleArrowLeft />
+            </IconButton>
+            <IconButton
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <MdKeyboardArrowLeft />
+            </IconButton>
+            <IconButton
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <MdKeyboardArrowRight />
+            </IconButton>
+            <IconButton
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <MdKeyboardDoubleArrowRight />
+            </IconButton>
+          </Box>
+          <Box>
+            <span>Page</span>
+            <strong>
+              {table.getState().pagination.pageIndex + 1} of{' '}
+              {table.getPageCount()}
+            </strong>
+          </Box>
+          <Box>
+            Go to page
+            <Input
+              type="number"
+              min="1"
+              max={table.getPageCount()}
+              defaultValue={table.getState().pagination.pageIndex + 1}
+              onChange={(e) => {
+                const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                table.setPageIndex(page);
+              }}
+            />
+          </Box>
+        </TablePageFooter>
+      )}
+    </div>
+  );
+}

inertia/components/dashboard/dashboard_provider.tsx

@@ -7,7 +7,7 @@ import FavoritesContext from '~/contexts/favorites_context';
 import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
 import useShortcut from '~/hooks/use_shortcut';
 import { appendCollectionId } from '~/lib/navigation';
-import { CollectionWithLinks, Link } from '~/types/app';
+import { CollectionWithLinks, LinkWithCollection } from '~/types/app';
 
 export default function DashboardProviders(
   props: Readonly<{
@@ -31,14 +31,18 @@ export default function DashboardProviders(
     router.visit(appendCollectionId(route('dashboard').url, collection.id));
   };
 
-  const favorites = useMemo<Link[]>(
+  // TODO: compute this in controller
+  const favorites = useMemo<LinkWithCollection[]>(
     () =>
       collections.reduce((acc, collection) => {
-        collection.links.forEach((link) =>
+        collection.links.forEach((link) => {
-          link.favorite ? acc.push(link) : null
+          if (link.favorite) {
-        );
+            const newLink: LinkWithCollection = { ...link, collection };
+            acc.push(newLink);
+          }
+        });
         return acc;
-      }, [] as Link[]),
+      }, [] as LinkWithCollection[]),
     [collections]
   );
 

inertia/components/dashboard/link/link_controls.tsx

@@ -1,71 +1,18 @@
 import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
 import { route } from '@izzyjs/route/client';
-import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
 import { IoTrashOutline } from 'react-icons/io5';
 import Dropdown from '~/components/common/dropdown/dropdown';
-import {
+import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
-  DropdownItemButton,
+import FavoriteDropdownItem from '~/components/dashboard/side_nav/favorite/favorite_dropdown_item';
-  DropdownItemLink,
-} from '~/components/common/dropdown/dropdown_item';
-import useActiveCollection from '~/hooks/use_active_collection';
-import useCollections from '~/hooks/use_collections';
 import { appendLinkId } from '~/lib/navigation';
-import { makeRequest } from '~/lib/request';
 import { Link } from '~/types/app';
 
-const StartItem = styled(DropdownItemButton)(({ theme }) => ({
-  color: theme.colors.yellow,
-}));
-
 export default function LinkControls({ link }: { link: Link }) {
   const theme = useTheme();
   const { t } = useTranslation('common');
-  const { collections, setCollections } = useCollections();
-  const { setActiveCollection } = useActiveCollection();
-
-  const toggleFavorite = useCallback(
-    (linkId: Link['id']) => {
-      let linkIndex = 0;
-      const collectionIndex = collections.findIndex(({ links }) => {
-        const lIndex = links.findIndex((l) => l.id === linkId);
-        if (lIndex !== -1) {
-          linkIndex = lIndex;
-        }
-        return lIndex !== -1;
-      });
-
-      const collectionLink = collections[collectionIndex].links[linkIndex];
-      const collectionsCopy = [...collections];
-      collectionsCopy[collectionIndex].links[linkIndex] = {
-        ...collectionLink,
-        favorite: !collectionLink.favorite,
-      };
-
-      setCollections(collectionsCopy);
-      setActiveCollection(collectionsCopy[collectionIndex]);
-    },
-    [collections, setCollections]
-  );
-
-  const onFavorite = () => {
-    const { url, method } = route('link.toggle-favorite', {
-      params: { id: link.id.toString() },
-    });
-    makeRequest({
-      url,
-      method,
-      body: {
-        favorite: !link.favorite,
-      },
-    })
-      .then(() => toggleFavorite(link.id))
-      .catch(console.error);
-  };
 
   return (
     <Dropdown
@@ -73,17 +20,7 @@ export default function LinkControls({ link }: { link: Link }) {
       css={{ backgroundColor: theme.colors.secondary }}
       svgSize={18}
     >
-      <StartItem onClick={onFavorite}>
+      <FavoriteDropdownItem link={link} />
-        {!link.favorite ? (
-          <>
-            <AiFillStar /> {t('add-favorite')}
-          </>
-        ) : (
-          <>
-            <AiOutlineStar /> {t('remove-favorite')}
-          </>
-        )}
-      </StartItem>
       <DropdownItemLink
         href={appendLinkId(route('link.edit-form').url, link.id)}
       >

inertia/components/dashboard/search/search_result_item.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { RefObject, useEffect, useRef, useState } from 'react';
 import { AiOutlineFolder } from 'react-icons/ai';
+import Legend from '~/components/common/legend';
 import TextEllipsis from '~/components/common/text_ellipsis';
 import LinkFavicon from '~/components/dashboard/link/link_favicon';
 import useCollections from '~/hooks/use_collections';
@@ -22,11 +23,6 @@ const SearchItemStyle = styled('li', {
   padding: '0.25em 0.35em !important',
 }));
 
-const ItemLegeng = styled.span(({ theme }) => ({
-  fontSize: '13px',
-  color: theme.colors.grey,
-}));
-
 interface CommonResultProps {
   innerRef: RefObject<HTMLLIElement>;
   isActive: boolean;
@@ -100,7 +96,7 @@ function ResultLink({
           __html: result.matched_part ?? result.name,
         }}
       />
-      <ItemLegeng>({collection.name})</ItemLegeng>
+      <Legend>({collection.name})</Legend>
     </SearchItemStyle>
   );
 }

inertia/components/dashboard/side_nav/favorite/favorite_dropdown_item.tsx

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
+import { DropdownItemButton } from '~/components/common/dropdown/dropdown_item';
+import useActiveCollection from '~/hooks/use_active_collection';
+import useCollections from '~/hooks/use_collections';
+import { onFavorite } from '~/lib/favorite';
+import { Link } from '~/types/app';
+
+const StarItem = styled(DropdownItemButton)(({ theme }) => ({
+  color: theme.colors.yellow,
+}));
+
+export default function FavoriteDropdownItem({ link }: { link: Link }) {
+  const { collections, setCollections } = useCollections();
+  const { setActiveCollection } = useActiveCollection();
+  const { t } = useTranslation();
+
+  const toggleFavorite = useCallback(
+    (linkId: Link['id']) => {
+      let linkIndex = 0;
+      const collectionIndex = collections.findIndex(({ links }) => {
+        const lIndex = links.findIndex((l) => l.id === linkId);
+        if (lIndex !== -1) {
+          linkIndex = lIndex;
+        }
+        return lIndex !== -1;
+      });
+
+      const collectionLink = collections[collectionIndex].links[linkIndex];
+      const collectionsCopy = [...collections];
+      collectionsCopy[collectionIndex].links[linkIndex] = {
+        ...collectionLink,
+        favorite: !collectionLink.favorite,
+      };
+
+      setCollections(collectionsCopy);
+      setActiveCollection(collectionsCopy[collectionIndex]);
+    },
+    [collections, setCollections]
+  );
+
+  const onFavoriteCallback = () => toggleFavorite(link.id);
+  return (
+    <StarItem
+      onClick={() => onFavorite(link.id, !link.favorite, onFavoriteCallback)}
+    >
+      {!link.favorite ? (
+        <>
+          <AiFillStar /> {t('add-favorite')}
+        </>
+      ) : (
+        <>
+          <AiOutlineStar /> {t('remove-favorite')}
+        </>
+      )}
+    </StarItem>
+  );
+}

inertia/components/dashboard/side_nav/favorite/favorite_item.tsx

@@ -1,8 +1,61 @@
 import styled from '@emotion/styled';
+import { route } from '@izzyjs/route/client';
+import { useTranslation } from 'react-i18next';
+import { BsThreeDotsVertical } from 'react-icons/bs';
+import { FaRegEye } from 'react-icons/fa';
+import { GoPencil } from 'react-icons/go';
+import { IoTrashOutline } from 'react-icons/io5';
+import Dropdown from '~/components/common/dropdown/dropdown';
+import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
+import Legend from '~/components/common/legend';
+import TextEllipsis from '~/components/common/text_ellipsis';
+import LinkFavicon from '~/components/dashboard/link/link_favicon';
+import FavoriteDropdownItem from '~/components/dashboard/side_nav/favorite/favorite_dropdown_item';
 import { ItemExternalLink } from '~/components/dashboard/side_nav/nav_item';
+import { appendCollectionId, appendLinkId } from '~/lib/navigation';
+import { LinkWithCollection } from '~/types/app';
 
-const FavoriteItem = styled(ItemExternalLink)(({ theme }) => ({
+const FavoriteItemStyle = styled(ItemExternalLink)(({ theme }) => ({
   backgroundColor: theme.colors.secondary,
 }));
 
-export default FavoriteItem;
+const FavoriteDropdown = styled(Dropdown)(({ theme }) => ({
+  backgroundColor: theme.colors.secondary,
+}));
+
+export default function FavoriteItem({ link }: { link: LinkWithCollection }) {
+  const { t } = useTranslation();
+  return (
+    <FavoriteItemStyle href={link.url}>
+      <LinkFavicon url={link.url} size={24} />
+      <TextEllipsis>{link.name}</TextEllipsis>
+      <Legend>({link.collection.name})</Legend>
+      <FavoriteDropdown
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        label={<BsThreeDotsVertical />}
+        svgSize={18}
+      >
+        <DropdownItemLink
+          href={appendCollectionId(route('dashboard').url, link.collection.id)}
+        >
+          <FaRegEye /> {t('go-to-collection')}
+        </DropdownItemLink>
+        <FavoriteDropdownItem link={link} />
+        <DropdownItemLink
+          href={appendLinkId(route('link.edit-form').url, link.id)}
+        >
+          <GoPencil /> {t('link.edit')}
+        </DropdownItemLink>
+        <DropdownItemLink
+          href={appendLinkId(route('link.delete-form').url, link.id)}
+          danger
+        >
+          <IoTrashOutline /> {t('link.delete')}
+        </DropdownItemLink>
+      </FavoriteDropdown>
+    </FavoriteItemStyle>
+  );
+}

inertia/components/dashboard/side_nav/favorite/favorite_list.tsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
 import FavoriteListContainer from '~/components/dashboard/side_nav/favorite/favorite_container';
 import FavoriteItem from '~/components/dashboard/side_nav/favorite/favorite_item';
 import useFavorites from '~/hooks/use_favorites';
@@ -44,11 +42,8 @@ export default function FavoriteList() {
         {t('favorite')} • {favorites.length}
       </FavoriteLabel>
       <FavoriteListStyle>
-        {favorites.map(({ id, name, url }) => (
+        {favorites.map((link) => (
-          <FavoriteItem href={url} key={id}>
+          <FavoriteItem link={link} key={link.id} />
-            <LinkFavicon url={url} size={24} />
-            <TextEllipsis>{name}</TextEllipsis>
-          </FavoriteItem>
         ))}
       </FavoriteListStyle>
     </FavoriteListContainer>

inertia/components/layouts/_theme_layout.tsx

@@ -131,7 +131,9 @@ function GlobalStyles() {
     },
 
     'th, td': {
-      whiteSpace: 'nowrap',
+      whiteSspace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
     },
 
     'tr:nth-of-type(even)': {

inertia/contexts/favorites_context.ts

@@ -1,12 +1,12 @@
 import { createContext } from 'react';
-import { Link } from '~/types/app';
+import { LinkWithCollection } from '~/types/app';
 
 type FavoritesContextType = {
-  favorites: Link[];
+  favorites: LinkWithCollection[];
 };
 
 const iFavoritesContextState = {
-  favorites: [] as Link[],
+  favorites: [] as LinkWithCollection[],
 };
 
 const FavoritesContext = createContext<FavoritesContextType>(

inertia/i18n/locales/en/common.json

@@ -32,6 +32,7 @@
   "add-favorite": "Add to favorites",
   "remove-favorite": "Remove from favorites",
   "favorites-appears-here": "Your favorites will appear here",
+  "go-to-collection": "Go to collection",
   "no-item-found": "No item found",
   "admin": "Administrator",
   "search": "Search",

inertia/i18n/locales/fr/common.json

@@ -32,6 +32,7 @@
   "add-favorite": "Ajouter aux favoris",
   "remove-favorite": "Retirer des favoris",
   "favorites-appears-here": "Vos favoris apparaîtront ici",
+  "go-to-collection": "Voir la collection",
   "no-item-found": "Aucun élément trouvé",
   "admin": "Administrateur",
   "search": "Rechercher",

inertia/lib/favorite.ts

@@ -0,0 +1,22 @@
+import { route } from '@izzyjs/route/client';
+import { makeRequest } from '~/lib/request';
+import { Link } from '~/types/app';
+
+export const onFavorite = (
+  linkId: Link['id'],
+  isFavorite: boolean,
+  cb: () => void
+) => {
+  const { url, method } = route('link.toggle-favorite', {
+    params: { id: linkId.toString() },
+  });
+  makeRequest({
+    url,
+    method,
+    body: {
+      favorite: isFavorite,
+    },
+  })
+    .then(() => cb())
+    .catch(console.error);
+};

inertia/pages/admin/dashboard.tsx

@@ -1,14 +1,13 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { ColumnDef } from '@tanstack/react-table';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { ReactNode } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import RoundedImage from '~/components/common/rounded_image';
+import Table from '~/components/common/table';
-import TextEllipsis from '~/components/common/text_ellipsis';
 import ContentLayout from '~/components/layouts/content_layout';
 import { DATE_FORMAT } from '~/constants';
-import { sortByCreationDate } from '~/lib/array';
 import { UserWithRelationCount } from '~/types/app';
 
 dayjs.extend(relativeTime);
@@ -19,15 +18,18 @@ interface AdminDashboardProps {
   totalLinks: number;
 }
 
-const Cell = styled.div<{ column?: boolean; fixed?: boolean }>(
+const CenteredCell = styled.div({
-  ({ column, fixed }) => ({
+  display: 'flex',
-    width: '100%',
+  alignItems: 'center',
-    display: 'flex',
+  justifyContent: 'center',
-    alignItems: 'center',
+  flexDirection: 'column',
-    justifyContent: fixed ? 'unset' : 'center',
+});
-    gap: column ? 0 : '0.35em',
+
-    flexDirection: column ? 'column' : 'row',
+const RenderDateCell = (info: any) => (
-  })
+  <CenteredCell>
+    <span>{dayjs(info.getValue().toString()).fromNow()}</span>
+    <span>{dayjs(info.getValue().toString()).format(DATE_FORMAT)}</span>
+  </CenteredCell>
 );
 
 const ThemeProvider = (props: AdminDashboardProps) => (
@@ -44,95 +46,76 @@ function AdminDashboard({
 }: AdminDashboardProps) {
   const { t } = useTranslation();
   const theme = useTheme();
-  return (
+  const columns = useMemo(
-    <div style={{ overflow: 'auto', marginTop: '1em' }}>
+    () =>
-      <table>
+      [
-        <thead>
+        {
-          <tr>
+          accessorKey: 'id',
-            <TableCell type="th">#</TableCell>
+          header: (
-            <TableCell type="th">{t('common:name')}</TableCell>
+            <>
-            <TableCell type="th">{t('common:email')}</TableCell>
+              # <span css={{ color: theme.colors.grey }}>({users.length})</span>
-            <TableCell type="th">
+            </>
+          ),
+          cell: (info) => info.getValue(),
+        },
+        {
+          accessorKey: 'fullname',
+          header: t('common:name'),
+          cell: (info) => info.getValue(),
+        },
+        {
+          accessorKey: 'email',
+          header: t('common:email'),
+          cell: (info) => info.getValue(),
+        },
+        {
+          accessorKey: 'count',
+          header: (
+            <>
               {t('common:collection.collections', { count: totalCollections })}{' '}
               <span css={{ color: theme.colors.grey }}>
                 ({totalCollections})
               </span>
-            </TableCell>
+            </>
-            <TableCell type="th">
+          ),
+          cell: (info) => (info.getValue() as any)?.collection,
+        },
+        {
+          accessorKey: 'count',
+          header: (
+            <>
               {t('common:link.links', { count: totalLinks })}{' '}
               <span css={{ color: theme.colors.grey }}>({totalLinks})</span>
-            </TableCell>
+            </>
-            <TableCell type="th">{t('admin:role')}</TableCell>
+          ),
-            <TableCell type="th">{t('admin:created_at')}</TableCell>
+          cell: (info: any) => info.getValue()?.link,
-            <TableCell type="th">{t('admin:updated_at')}</TableCell>
+        },
-          </tr>
+        {
-        </thead>
+          accessorKey: 'isAdmin',
-        <tbody>
+          header: t('admin:role'),
-          {users.length !== 0 &&
+          cell: (info) =>
-            sortByCreationDate(users).map((user) => (
+            info.getValue() ? (
-              <TableUserRow user={user} key={user.id} />
+              <span style={{ color: theme.colors.lightRed }}>
-            ))}
+                {t('admin:admin')}
-        </tbody>
+              </span>
-      </table>
+            ) : (
-    </div>
+              <span style={{ color: theme.colors.green }}>
+                {t('admin:user')}
+              </span>
+            ),
+        },
+        {
+          accessorKey: 'createdAt',
+          header: t('admin:created_at'),
+          cell: RenderDateCell,
+        },
+        {
+          accessorKey: 'updatedAt',
+          header: t('admin:updated_at'),
+          cell: RenderDateCell,
+        },
+      ] as ColumnDef<UserWithRelationCount>[],
+    []
   );
-}
+  return <Table columns={columns} data={users} />;
-
-function TableUserRow({ user }: { user: UserWithRelationCount }) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const { id, fullname, avatarUrl, email, isAdmin, createdAt, updatedAt } =
-    user;
-  return (
-    <tr>
-      <TableCell type="td">{id}</TableCell>
-      <TableCell type="td" fixed>
-        {avatarUrl && (
-          <RoundedImage
-            src={avatarUrl}
-            width={24}
-            height={24}
-            alt={fullname}
-            title={fullname}
-            referrerPolicy="no-referrer"
-          />
-        )}
-        <TextEllipsis>{fullname ?? '-'}</TextEllipsis>
-      </TableCell>
-      <TableCell type="td">
-        <TextEllipsis>{email}</TextEllipsis>
-      </TableCell>
-      <TableCell type="td">{user.count.collection}</TableCell>
-      <TableCell type="td">{user.count.link}</TableCell>
-      <TableCell type="td">
-        {isAdmin ? (
-          <span style={{ color: theme.colors.lightRed }}>
-            {t('admin:admin')}
-          </span>
-        ) : (
-          <span style={{ color: theme.colors.green }}>{t('admin:user')}</span>
-        )}
-      </TableCell>
-      <TableCell type="td" column>
-        <span>{dayjs(createdAt.toString()).fromNow()}</span>
-        <span>{dayjs(createdAt.toString()).format(DATE_FORMAT)}</span>
-      </TableCell>
-      <TableCell type="td" column>
-        <span>{dayjs(updatedAt.toString()).fromNow()}</span>
-        <span>{dayjs(updatedAt.toString()).format(DATE_FORMAT)}</span>
-      </TableCell>
-    </tr>
-  );
-}
-
-type TableItem = {
-  children: ReactNode;
-  type: 'td' | 'th';
-  fixed?: boolean;
-  column?: boolean;
-};
-
-function TableCell({ children, type, ...props }: TableItem) {
-  const child = <Cell {...props}>{children}</Cell>;
-  return type === 'td' ? <td>{child}</td> : <th>{child}</th>;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-links",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "type": "module",
   "license": "UNLICENSED",
   "scripts": {
@@ -39,29 +39,29 @@
     "@adonisjs/assembler": "^7.7.0",
     "@adonisjs/eslint-config": "^1.3.0",
     "@adonisjs/tsconfig": "^1.3.0",
-    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/babel-plugin": "^11.12.0",
     "@faker-js/faker": "^8.4.1",
     "@japa/assert": "^3.0.0",
     "@japa/plugin-adonisjs": "^3.0.1",
     "@japa/runner": "^3.1.4",
-    "@swc/core": "^1.6.13",
+    "@swc/core": "^1.7.22",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-toggle": "^4.0.5",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
     "hot-hook": "^0.2.6",
-    "husky": "^9.0.11",
+    "husky": "^9.1.5",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.9",
-    "pino-pretty": "^11.2.1",
+    "pino-pretty": "^11.2.2",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
-    "release-it": "^17.4.1",
+    "release-it": "^17.6.0",
     "ts-node": "^10.9.2",
-    "typescript": "~5.4.5",
+    "typescript": "~5.5.4",
-    "vite": "^5.3.3"
+    "vite": "^5.4.2"
   },
   "dependencies": {
     "@adonisjs/ally": "^5.0.2",
@@ -69,23 +69,24 @@
     "@adonisjs/core": "^6.12.1",
     "@adonisjs/cors": "^2.2.1",
     "@adonisjs/inertia": "^1.1.0",
-    "@adonisjs/lucid": "^21.1.0",
+    "@adonisjs/lucid": "^21.2.0",
     "@adonisjs/session": "^7.4.2",
     "@adonisjs/shield": "^8.1.1",
     "@adonisjs/static": "^1.1.1",
     "@adonisjs/vite": "^3.0.0",
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/styled": "^11.13.0",
     "@inertiajs/react": "^1.2.0",
     "@izzyjs/route": "^1.1.0-0",
+    "@tanstack/react-table": "^8.20.5",
     "@vinejs/vine": "^2.1.0",
     "bentocache": "^1.0.0-beta.9",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "edge.js": "^6.0.2",
     "hex-rgb": "^5.0.0",
-    "i18next": "^23.11.5",
+    "i18next": "^23.14.0",
     "knex": "^3.1.0",
-    "luxon": "^3.4.4",
+    "luxon": "^3.5.0",
     "node-html-parser": "^6.1.13",
     "pg": "^8.12.0",
     "react": "^18.3.1",
@@ -94,7 +95,7 @@
     "react-dom": "^18.3.1",
     "react-hotkeys-hook": "^4.5.0",
     "react-i18next": "^14.1.2",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-select": "^5.8.0",
     "react-swipeable": "^7.0.1",
     "react-toggle": "^4.1.3",