From 3fe32a18eed12f6aef1af7ab9cbe750b97bef32a Mon Sep 17 00:00:00 2001
From: tabarra <1808295+tabarra@users.noreply.github.com>
Date: Sat, 16 Mar 2024 01:06:23 -0300
Subject: [PATCH] wip(web/players): separated and optimized components

---
 docs/dev_notes.md                             |   9 +
 panel/src/layout/MainRouter.tsx               |  10 +-
 panel/src/pages/Players/PlayersPage.tsx       |  85 ++++
 panel/src/pages/Players/PlayersSearchBox.tsx  | 246 +++++++++
 panel/src/pages/Players/PlayersTable.tsx      | 274 ++++++++++
 panel/src/pages/TestingPage/TestingPage.tsx   |   5 +-
 panel/src/pages/TestingPage/TmpTestTables.tsx | 469 ------------------
 panel/src/pages/TestingPage/mockPlayersApi.ts | 112 +++++
 shared/playerApiTypes.ts                      |  26 +
 9 files changed, 763 insertions(+), 473 deletions(-)
 create mode 100644 panel/src/pages/Players/PlayersPage.tsx
 create mode 100644 panel/src/pages/Players/PlayersSearchBox.tsx
 create mode 100644 panel/src/pages/Players/PlayersTable.tsx
 delete mode 100644 panel/src/pages/TestingPage/TmpTestTables.tsx
 create mode 100644 panel/src/pages/TestingPage/mockPlayersApi.ts

diff --git a/docs/dev_notes.md b/docs/dev_notes.md
index 15b4e873d..3aa4c6d96 100644
--- a/docs/dev_notes.md
+++ b/docs/dev_notes.md
@@ -23,6 +23,7 @@ seems like it just refreshes the page
     - fix disallowed intents message
 
 - rtl issue
+- [ ] `2xl:mx-8` for all pages? (change on MainShell)
 - [ ] fix all imgur links
 - [ ] build: generate fxmanifest files list dynamically
 - [ ] easter egg with some old music? https://www.youtube.com/watch?v=nNoaXej0Jeg
@@ -59,6 +60,14 @@ Players:
     - prune players (from master actions -> clean database)
     - bulk remove HWIDs
 
+Don't forget:
+- [ ] before search, parse the ids to `xxx` -> `type:xxx`, except if array
+- [ ] code button to wipe the filter
+- [ ] code the hotkey
+- [ ] search box state in url
+- [ ] Write `estimateSize` function to calculate size dynamically?
+
+
 History:
 - list of warns/bans in a table
 - search by id OR identifiers or reason
diff --git a/panel/src/layout/MainRouter.tsx b/panel/src/layout/MainRouter.tsx
index 4e9e3e2e6..fc90c4a1d 100644
--- a/panel/src/layout/MainRouter.tsx
+++ b/panel/src/layout/MainRouter.tsx
@@ -9,6 +9,7 @@ import Iframe from "@/pages/Iframe";
 import NotFound from "@/pages/NotFound";
 import TestingPage from "@/pages/TestingPage/TestingPage";
 import LiveConsole from "@/pages/LiveConsole/LiveConsole";
+import PlayersPage from "@/pages/Players/PlayersPage";
 
 
 type RouteType = {
@@ -20,10 +21,16 @@ type RouteType = {
 const allRoutes: RouteType[] = [
     //Global Routes
     {
-        path: '/players',
+        //FIXME: deprecate
+        path: '/players/old',
         title: 'Players',
         children: <Iframe legacyUrl="players" />
     },
+    {
+        path: '/players',
+        title: 'Players',
+        children: <PlayersPage />
+    },
     // {
     //     path: '/history',
     //     title: 'History',
@@ -87,6 +94,7 @@ const allRoutes: RouteType[] = [
         children: <LiveConsole />
     },
     {
+        //FIXME: deprecate
         path: '/server/console/old',
         title: 'Old Live Console',
         children: <Iframe legacyUrl="console" />
diff --git a/panel/src/pages/Players/PlayersPage.tsx b/panel/src/pages/Players/PlayersPage.tsx
new file mode 100644
index 000000000..5f9cf4368
--- /dev/null
+++ b/panel/src/pages/Players/PlayersPage.tsx
@@ -0,0 +1,85 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { createRandomHslColor } from '@/lib/utils';
+import { UsersIcon, UserRoundPlusIcon, CalendarPlusIcon } from 'lucide-react';
+import PageCalloutRow, { PageCalloutProps } from '@/components/PageCalloutRow';
+import { PlayerSearchBox, PlayersSearchBoxReturnStateType } from './PlayersSearchBox';
+import PlayersTable from './PlayersTable';
+import { PlayersTableFiltersType, PlayersTableSearchType } from '@shared/playerApiTypes';
+
+
+
+
+const callouts: PageCalloutProps[] = [
+    {
+        label: 'Total Players',
+        value: 123456,
+        icon: <UsersIcon />,
+        prefix: ''
+    },
+    {
+        label: 'Players Today',
+        value: 1234,
+        icon: <CalendarPlusIcon />,
+        prefix: ''
+    },
+    {
+        label: 'New Players Today',
+        value: 1234,
+        icon: <UserRoundPlusIcon />,
+        prefix: '+'
+    },
+    {
+        label: 'New Players This Week',
+        value: 12345,
+        icon: <UserRoundPlusIcon />,
+        prefix: '+'
+    }
+]
+
+
+const PlayerSearchBoxMemo = memo(PlayerSearchBox);
+const PlayersTableMemo = memo(PlayersTable);
+const PageCalloutRowMemo = memo(PageCalloutRow);
+
+
+export default function PlayersPage() {
+    const [searchBoxReturn, setSearchBoxReturn] = useState<PlayersSearchBoxReturnStateType>({
+        search: null,
+        filters: [],
+    });
+
+    //PlayerSearchBox handlers
+    const doSearch = useCallback((search: PlayersTableSearchType, filters: PlayersTableFiltersType) => {
+        setSearchBoxReturn({ search, filters });
+    }, []);
+    const initialState = useMemo(() => {
+        return {
+            search: null,
+            filters: [],
+        } satisfies PlayersSearchBoxReturnStateType;
+    }, []);
+
+
+    return (<div
+        className='flex flex-col min-w-96'
+        style={{ height: 'calc(100vh - 3.5rem - 1px - 2rem)' }}
+    >
+        {/* <div
+            //DEBUG component state
+            className='w-full bg-black p-2'
+            style={{ color: createRandomHslColor() }}
+        >{JSON.stringify(searchBoxReturn)}</div> */}
+
+        <PageCalloutRowMemo
+            callouts={callouts}
+        />
+        <PlayerSearchBoxMemo
+            doSearch={doSearch}
+            initialState={initialState}
+        />
+        <PlayersTableMemo
+            search={searchBoxReturn.search}
+            filters={searchBoxReturn.filters}
+        />
+    </div>);
+}
diff --git a/panel/src/pages/Players/PlayersSearchBox.tsx b/panel/src/pages/Players/PlayersSearchBox.tsx
new file mode 100644
index 000000000..b1e2bdc60
--- /dev/null
+++ b/panel/src/pages/Players/PlayersSearchBox.tsx
@@ -0,0 +1,246 @@
+import { throttle } from "throttle-debounce";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { createRandomHslColor } from '@/lib/utils';
+import { ChevronsUpDownIcon, FilterXIcon, XIcon, ChevronDownIcon } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator, DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import InlineCode from '@/components/InlineCode';
+import { PlayersTableFiltersType, PlayersTableSearchType } from "@shared/playerApiTypes";
+
+
+/**
+ * Helpers
+ */
+const availableSearchTypes = [
+    {
+        value: 'playerName',
+        label: 'Name',
+        placeholder: 'Enter a player name',
+        description: 'Search players by their last display name.'
+    },
+    {
+        value: 'playerNotes',
+        label: 'Notes',
+        placeholder: 'Enter part of the note to search for',
+        description: 'Search players by their profile notes contents.'
+    },
+    {
+        value: 'playerIds',
+        label: 'Identifiers',
+        placeholder: 'License, Discord, Steam, etc.',
+        description: 'Search players by their IDs separated by a comma.'
+    },
+] as const;
+
+const availableFilters = [
+    { label: 'Is Admin', value: 'isAdmin' },
+    { label: 'Is Online', value: 'isOnline' },
+    { label: 'Is Banned', value: 'isBanned' },
+    { label: 'Has Previous Ban', value: 'hasPreviousBan' },
+    { label: 'Has Whitelisted ID', value: 'isWhitelisted' },
+    { label: 'Has Profile Notes', value: 'hasNote' },
+] as const;
+
+//FIXME: this doesn't require exporting, but HMR doesn't work without it
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, react-refresh/only-export-components
+export const throttleFunc = throttle(1250, (func: any) => {
+    func();
+}, { noLeading: true });
+
+
+export type PlayersSearchBoxReturnStateType = {
+    search: PlayersTableSearchType;
+    filters: PlayersTableFiltersType;
+}
+
+/**
+ * Component
+ */
+type PlayerSearchBoxProps = {
+    doSearch: (search: PlayersTableSearchType, filters: PlayersTableFiltersType) => void;
+    initialState: PlayersSearchBoxReturnStateType;
+};
+
+export function PlayerSearchBox({ doSearch, initialState }: PlayerSearchBoxProps) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [isSearchTypeDropdownOpen, setSearchTypeDropdownOpen] = useState(false);
+    const [isFilterDropdownOpen, setFilterDropdownOpen] = useState(false);
+    const [currSearchType, setCurrSearchType] = useState<string>(initialState.search?.type || 'playerName');
+    const [selectedFilters, setSelectedFilters] = useState<string[]>(initialState.filters);
+    const [hasSearchText, setHasSearchText] = useState(!!initialState.search?.value);
+
+    const updateSearch = () => {
+        if (!inputRef.current) return;
+        const searchValue = inputRef.current.value.trim();
+        if(searchValue.length){
+            doSearch({value: searchValue, type: currSearchType}, selectedFilters);
+        } else {
+            doSearch(null, selectedFilters);
+        }
+    }
+
+    //Call onSearch when params change
+    useEffect(() => {
+        updateSearch();
+    }, [inputRef, currSearchType, selectedFilters]);
+
+    //Input handlers
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            throttleFunc.cancel({ upcomingOnly: true });
+            updateSearch();
+        } else if (e.key === 'Escape') {
+            inputRef.current!.value = '';
+            throttleFunc(updateSearch);
+            setHasSearchText(false);
+        } else {
+            throttleFunc(updateSearch);
+            setHasSearchText(true);
+        }
+    };
+
+    const clearSearchBtn = () => {
+        inputRef.current!.value = '';
+        throttleFunc.cancel({ upcomingOnly: true });
+        updateSearch();
+        setHasSearchText(false);
+    };
+
+    const filterSelectChange = (filter: string, checked: boolean) => {
+        if (checked) {
+            setSelectedFilters((prev) => [...prev, filter]);
+        } else {
+            setSelectedFilters((prev) => prev.filter((f) => f !== filter));
+        }
+    }
+
+    const selectedSearchType = availableSearchTypes.find((type) => type.value === currSearchType);
+    if (!selectedSearchType) throw new Error(`Invalid search type: ${currSearchType}`);
+    const filterBtnMessage = selectedFilters.length ? `${selectedFilters.length} Filters` : 'No filters';
+    return (
+        <div className="p-4 mb-2 md:mb-4 md:rounded-xl border border-border bg-card text-card-foreground shadow-sm">
+            <div className="flex flex-wrap-reverse gap-2">
+                <div className='relative min-w-44 grow'>
+                    <Input
+                        type="text"
+                        autoFocus
+                        autoCapitalize='off'
+                        autoCorrect='off'
+                        ref={inputRef}
+                        placeholder={selectedSearchType.placeholder}
+                        onKeyDown={handleKeyDown}
+                    />
+                    {hasSearchText ? (
+                        <button
+                            className="absolute right-2 inset-y-0 text-zinc-500 dark:text-zinc-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg"
+                            onClick={clearSearchBtn}
+                        >
+                            <XIcon />
+                        </button>
+                    ) : (
+                        <div className="absolute right-2 inset-y-0 flex items-center text-zinc-500 dark:text-zinc-400 select-none pointer-events-none">
+                            <InlineCode className="text-xs tracking-wide">ctrl+f</InlineCode>
+                        </div>
+                    )}
+                </div>
+
+                <div className="grow flex justify-between">
+                    <div className='space-x-2 flex-nowrap'>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    role="combobox"
+                                    aria-expanded={isSearchTypeDropdownOpen}
+                                    onClick={() => setSearchTypeDropdownOpen(!isSearchTypeDropdownOpen)}
+                                    className="grow xs:w-36 justify-between border-input bg-black/5 dark:bg-black/30 hover:dark:bg-primary"
+                                >
+                                    {selectedSearchType.label}
+                                    <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent className='w-36'>
+                                <DropdownMenuLabel>Search Type</DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuRadioGroup value={currSearchType} onValueChange={setCurrSearchType}>
+                                    {availableSearchTypes.map((searchType) => (
+                                        <DropdownMenuRadioItem
+                                            key={searchType.value}
+                                            value={searchType.value}
+                                            className='cursor-pointer'
+                                        >
+                                            {searchType.label}
+                                        </DropdownMenuRadioItem>
+                                    ))}
+                                </DropdownMenuRadioGroup>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    role="combobox"
+                                    aria-expanded={isFilterDropdownOpen}
+                                    onClick={() => setFilterDropdownOpen(!isFilterDropdownOpen)}
+                                    className="grow xs:w-44 justify-between border-input bg-black/5 dark:bg-black/30 hover:dark:bg-primary"
+                                >
+                                    {filterBtnMessage}
+                                    <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent className='w-44'>
+                                <DropdownMenuLabel>Search Filters</DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                {availableFilters.map((filter) => (
+                                    <DropdownMenuCheckboxItem
+                                        key={filter.value}
+                                        checked={selectedFilters.includes(filter.value)}
+                                        className="cursor-pointer"
+                                        onCheckedChange={(checked) => {
+                                            filterSelectChange(filter.value, checked);
+                                        }}
+
+                                    >
+                                        {filter.label}
+                                    </DropdownMenuCheckboxItem>
+                                ))}
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                    className="cursor-pointer"
+                                    onClick={() => setSelectedFilters([])}
+                                >
+                                    <FilterXIcon className="mr-2 h-4 w-4" />
+                                    Clear Filters
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+
+                    <div>
+                        <Button
+                            variant="outline"
+                            className="flex-grow"
+                        >
+                            More
+                            <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+            <div className="text-xs text-muted-foreground mt-1 px-1">
+                {selectedSearchType.description}
+            </div>
+        </div>
+    )
+}
diff --git a/panel/src/pages/Players/PlayersTable.tsx b/panel/src/pages/Players/PlayersTable.tsx
new file mode 100644
index 000000000..cdd2deb20
--- /dev/null
+++ b/panel/src/pages/Players/PlayersTable.tsx
@@ -0,0 +1,274 @@
+import { useEffect, useRef, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import TxAnchor from '@/components/TxAnchor';
+import { PlayerType, mockBackendApi } from '../TestingPage/mockPlayersApi';
+import { cn, createRandomHslColor, msToShortDuration, tsToLocaleDateTime } from '@/lib/utils';
+import { TableBody, TableCell, TableHeader, TableRow } from "@/components/ui/table";
+import { Loader2Icon } from 'lucide-react';
+import { useOpenPlayerModal } from "@/hooks/playerModal";
+import { PlayersTableFiltersType, PlayersTableSearchType, PlayersTableSortingType } from '@shared/playerApiTypes';
+
+
+/**
+ * Player row
+ */
+type PlayerRowProps = {
+    rowData: PlayerType;
+    modalOpener: ReturnType<typeof useOpenPlayerModal>;
+}
+
+function PlayerRow({ rowData, modalOpener }: PlayerRowProps) {
+    const openModal = () => {
+        modalOpener({ license: rowData.license });
+    }
+    //border-r whitespace-nowrap text-ellipsis overflow-hidden
+    return (
+        <TableRow onClick={openModal} className='cursor-pointer'>
+            <TableCell className='px-4 py-2 border-r'>{rowData.displayName}</TableCell>
+            <TableCell className='px-4 py-2 border-r'>{msToShortDuration(rowData.playTime * 60_000)}</TableCell>
+            <TableCell className='px-4 py-2 border-r'>{tsToLocaleDateTime(rowData.tsJoined / 1000)}</TableCell>
+            <TableCell className='px-4 py-2'>{tsToLocaleDateTime(rowData.tsLastConnection / 1000)}</TableCell>
+        </TableRow>
+    )
+}
+
+/**
+ * Last row
+ */
+type LastRowProps = {
+    hasReachedEnd: boolean;
+    loadError: string | null;
+    isFetching: boolean;
+    retryFetch: (_reset?: boolean) => Promise<void>;
+}
+
+function LastRow({ hasReachedEnd, isFetching, loadError, retryFetch }: LastRowProps) {
+    let content: React.ReactNode;
+    if (hasReachedEnd) {
+        content = <span className='font-bold text-muted-foreground'>You have reached the end of the list.</span>
+    } else if (isFetching) {
+        content = <Loader2Icon className="mx-auto animate-spin" />
+    } else if (loadError) {
+        content = <span>Error: {loadError}. <button onClick={() => retryFetch()}>Try again?</button></span>
+    } else {
+        content = <span>
+            You've found the end of the rainbow, but there's no pot of gold here. <br />
+            <i>(this is a bug, please report it in <TxAnchor href="https://discord.gg/txAdmin" target="_blank" rel="noopener noreferrer">discord.gg/txAdmin</TxAnchor>)</i>
+        </span>
+    }
+
+    return (
+        <TableRow>
+            <TableCell colSpan={4} className='px-4 py-2 text-center'>
+                {content}
+            </TableCell>
+        </TableRow>
+    )
+}
+
+
+/**
+ * Sortable table header
+ */
+type SortableTableHeaderProps = {
+    label: string;
+    sortKey: 'playTime' | 'tsJoined' | 'tsLastConnection';
+    sortingState: PlayersTableSortingType;
+    setSorting: (newState: PlayersTableSortingType) => void;
+}
+
+function SortableTableHeader({ label, sortKey, sortingState, setSorting }: SortableTableHeaderProps) {
+    const isSorted = sortingState.key === sortKey;
+    const isDesc = sortingState.desc;
+    const sortIcon = isSorted ? (isDesc ? '▼' : '▲') : <></>;
+    const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        e.preventDefault();
+        setSorting({
+            key: sortKey,
+            desc: isSorted ? (!isDesc) : true
+        });
+    }
+    return (
+        <th
+            onClick={onClick}
+            className={cn(
+                'py-2 px-4 text-left font-light tracking-wider cursor-pointer hover:font-medium hover:dark:bg-zinc-600',
+                isSorted && 'font-medium dark:bg-zinc-700',
+            )}
+        >
+            {label}
+            <div className='ml-1 min-w-[2ch] inline-block'>{sortIcon}</div>
+        </th>
+    )
+}
+
+
+/**
+ * Players table
+ */
+type PlayersTableProps = {
+    search: PlayersTableSearchType;
+    filters: PlayersTableFiltersType;
+}
+
+export default function PlayersTable({ search, filters }: PlayersTableProps) {
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const [players, setPlayers] = useState<PlayerType[]>([]);
+    const [hasReachedEnd, setHasReachedEnd] = useState(false);
+    const [isFetching, setIsFetching] = useState(true);
+    const [loadError, setLoadError] = useState<string | null>(null);
+    const [sorting, setSorting] = useState<PlayersTableSortingType>({ key: 'tsJoined', desc: true });
+    const [dbPlayerCount, setDbPlayerCount] = useState(0);
+    const [isResetting, setIsResetting] = useState(false);
+    const openPlayerModal = useOpenPlayerModal();
+
+    const fetchNextPage = async (reset?: boolean) => {
+        setIsFetching(true);
+        setLoadError(null);
+        if (reset) {
+            setIsResetting(true);
+        }
+        try {
+            const offset = !reset && players.length ? {
+                param: players[players.length - 1][sorting.key],
+                license: players[players.length - 1].license
+            } : undefined;
+            const {
+                players: newPlayers,
+                hasReachedEnd,
+                dbPlayerCount
+            } = await mockBackendApi({
+                offset,
+                search,
+                filters,
+                sorting: {
+                    key: sorting.key,
+                    desc: sorting.desc
+                },
+            });
+            setDbPlayerCount(dbPlayerCount);
+            setHasReachedEnd(hasReachedEnd);
+            setIsResetting(false);
+            if (newPlayers.length) {
+                setPlayers((prev) => reset ? newPlayers : [...prev, ...newPlayers]);
+            } else {
+                setPlayers([]);
+            }
+        } catch (error) {
+            setLoadError(`Failed to fetch more data: ${(error as Error).message}`);
+        } finally {
+            setIsFetching(false);
+        }
+    };
+
+    // The virtualizer
+    const rowVirtualizer = useVirtualizer({
+        scrollingDelay: 0,
+        count: players.length + 1,
+        getScrollElement: () => (scrollRef.current as HTMLDivElement)?.getElementsByTagName('div')[0],
+        estimateSize: () => 38, // border-b
+        overscan: 10,
+    });
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const virtualizerTotalSize = rowVirtualizer.getTotalSize();
+
+    //NOTE: This is required due to how css works on tables
+    //ref: https://github.com/TanStack/virtual/issues/585
+    let TopRowPad: React.ReactNode = null;
+    let BottomRowPad: React.ReactNode = null;
+    if (virtualItems.length > 0) {
+        const padStart = virtualItems[0].start - rowVirtualizer.options.scrollMargin;
+        if (padStart > 0) {
+            TopRowPad = <tr><td colSpan={3} style={{ height: padStart }} /></tr>;
+        }
+        const padEnd = virtualizerTotalSize - virtualItems[virtualItems.length - 1].end;
+        if (padEnd > 0) {
+            BottomRowPad = <tr><td colSpan={3} style={{ height: padEnd }} /></tr>;
+        }
+    }
+
+    // Automagically fetch next page when reaching the end
+    useEffect(() => {
+        if (!players.length || !virtualItems.length) return;
+        const lastVirtualItemIndex = virtualItems[virtualItems.length - 1].index;
+        if (players.length <= lastVirtualItemIndex && !hasReachedEnd && !isFetching) {
+            fetchNextPage()
+        }
+    }, [players, virtualItems, hasReachedEnd, isFetching]);
+
+    //fetch the first page automatically
+    useEffect(() => {
+        if (!players.length) fetchNextPage(true);
+    }, []);
+
+    //on sorting change, reset the list
+    useEffect(() => {
+        rowVirtualizer.scrollToIndex(0);
+        fetchNextPage(true);
+    }, [search, filters, sorting]);
+
+
+    return (
+        <div
+            className="w-full max-h-full min-h-96 overflow-auto border md:rounded-lg"
+            style={{ overflowAnchor: "none" }}
+        >
+            {/* <div
+                className='w-full bg-black p-2'
+                style={{ color: createRandomHslColor() }}
+            >{JSON.stringify({ search, filters, sorting })}</div> */}
+            <ScrollArea className="h-full" ref={scrollRef}>
+                <table className='w-full caption-bottom text-sm table-fixed select-none'>
+                    <TableHeader>
+                        <tr className='sticky top-0 z-10 bg-zinc-200 dark:bg-muted text-secondary-foreground text-base shadow-md transition-colors'>
+                            <th className='w-[50%]x py-2 px-4 font-light tracking-wider text-left text-muted-foreground'>
+                                Display Name
+                            </th>
+                            <SortableTableHeader
+                                label='Play Time'
+                                sortKey='playTime'
+                                sortingState={sorting}
+                                setSorting={setSorting}
+                            />
+                            <SortableTableHeader
+                                label='First Joined'
+                                sortKey='tsJoined'
+                                sortingState={sorting}
+                                setSorting={setSorting}
+                            />
+                            <SortableTableHeader
+                                label='Last Connection'
+                                sortKey='tsLastConnection'
+                                sortingState={sorting}
+                                setSorting={setSorting}
+                            />
+                        </tr>
+                    </TableHeader>
+                    <TableBody className={cn(isResetting && 'opacity-25')}>
+                        {TopRowPad}
+                        {virtualItems.map((virtualItem) => {
+                            const isLastRow = virtualItem.index > players.length - 1;
+                            return isLastRow ? (
+                                <LastRow
+                                    key={virtualItem.key}
+                                    hasReachedEnd={hasReachedEnd}
+                                    loadError={loadError}
+                                    isFetching={isFetching}
+                                    retryFetch={fetchNextPage}
+                                />
+                            ) : (
+                                <PlayerRow
+                                    key={virtualItem.key}
+                                    rowData={players[virtualItem.index]}
+                                    modalOpener={openPlayerModal}
+                                />
+                            )
+                        })}
+                        {BottomRowPad}
+                    </TableBody>
+                </table>
+            </ScrollArea>
+        </div>
+    );
+}
diff --git a/panel/src/pages/TestingPage/TestingPage.tsx b/panel/src/pages/TestingPage/TestingPage.tsx
index b232bbc4d..e6a428ddc 100644
--- a/panel/src/pages/TestingPage/TestingPage.tsx
+++ b/panel/src/pages/TestingPage/TestingPage.tsx
@@ -7,7 +7,6 @@ import TmpSocket from "./TmpSocket";
 import TmpToasts from "./TmpToasts";
 import TmpApi from "./TmpApi";
 import TmpFiller from "./TmpFiller";
-import TmpTestTables from "./TmpTestTables";
 
 
 export default function TestingPage() {
@@ -15,7 +14,7 @@ export default function TestingPage() {
     setPageTitle();
 
     return <div className="flex flex-col gap-4 w-full">
-        <TmpTestTables />
+        {/* <TmpTestTables /> */}
         {/* <TmpFiller /> */}
         {/* <TmpApi /> */}
         {/* <TmpToasts /> */}
@@ -23,6 +22,6 @@ export default function TestingPage() {
         {/* <TmpWarningBarState /> */}
         {/* <TmpAuthState /> */}
         {/* <TmpMarkdown /> */}
-        {/* <TmpColors /> */}
+        <TmpColors />
     </div>;
 }
diff --git a/panel/src/pages/TestingPage/TmpTestTables.tsx b/panel/src/pages/TestingPage/TmpTestTables.tsx
deleted file mode 100644
index 442ae0b35..000000000
--- a/panel/src/pages/TestingPage/TmpTestTables.tsx
+++ /dev/null
@@ -1,469 +0,0 @@
-import { memo, useEffect, useRef, useState } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Button } from '@/components/ui/button';
-import TxAnchor from '@/components/TxAnchor';
-import { PlayerSortingStateType, PlayerType, mockBackendApi } from './mockPlayersApi';
-import { cn, msToShortDuration, tsToLocaleDateTime } from '@/lib/utils';
-import { TableBody, TableCell, TableHeader, TableRow } from "@/components/ui/table";
-
-import { Loader2Icon, ChevronsUpDownIcon, FilterXIcon, XIcon, ChevronDownIcon, UsersIcon, UserRoundPlusIcon, CalendarPlusIcon } from 'lucide-react';
-import { Input } from '@/components/ui/input';
-
-import {
-    DropdownMenu,
-    DropdownMenuCheckboxItem,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuRadioGroup,
-    DropdownMenuRadioItem,
-    DropdownMenuSeparator, DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu";
-import InlineCode from '@/components/InlineCode';
-import PageCalloutRow, { PageCalloutProps } from '@/components/PageCalloutRow';
-
-
-
-type PlayerRowProps = {
-    rowData: PlayerType;
-}
-
-function PlayerRow({ rowData }: PlayerRowProps) {
-    //border-r whitespace-nowrap text-ellipsis overflow-hidden
-    return (<>
-        <TableCell className='px-4 py-2 border-r'>{rowData.displayName}</TableCell>
-        <TableCell className='px-4 py-2 border-r'>{msToShortDuration(rowData.playTime * 60_000)}</TableCell>
-        <TableCell className='px-4 py-2 border-r'>{tsToLocaleDateTime(rowData.tsJoined / 1000)}</TableCell>
-        <TableCell className='px-4 py-2'>{tsToLocaleDateTime(rowData.tsLastConnection / 1000)}</TableCell>
-    </>)
-}
-
-type LastRowProps = {
-    hasReachedEnd: boolean;
-    loadError: string | null;
-    isFetching: boolean;
-    retryFetch: (_reset?: boolean) => Promise<void>;
-}
-
-function LastRow({ hasReachedEnd, isFetching, loadError, retryFetch }: LastRowProps) {
-    let content: React.ReactNode;
-    if (hasReachedEnd) {
-        content = <span className='font-bold text-muted-foreground'>You have reached the end of the list.</span>
-    } else if (isFetching) {
-        content = <Loader2Icon className="mx-auto animate-spin" />
-    } else if (loadError) {
-        content = <span>Error: {loadError}. <button onClick={() => retryFetch()}>Try again?</button></span>
-    } else {
-        content = <span>
-            You've found the end of the rainbow, but there's no pot of gold here. <br />
-            <i>(this is a bug, please report it in <TxAnchor href="https://discord.gg/txAdmin" target="_blank" rel="noopener noreferrer">discord.gg/txAdmin</TxAnchor>)</i>
-        </span>
-    }
-
-    return (
-        <TableCell colSpan={4} className='px-4 py-2 text-center'>
-            {content}
-        </TableCell>
-    )
-}
-
-
-function SortableTableHeader({ label, sortKey, sorting, setSorting }: {
-    label: string;
-    sortKey: 'playTime' | 'tsJoined' | 'tsLastConnection';
-    sorting: PlayerSortingStateType;
-    setSorting: (newState: PlayerSortingStateType) => void;
-}) {
-    const isSorted = sorting.sortKey === sortKey;
-    const isDesc = sorting.sortDesc;
-    const sortIcon = isSorted ? (isDesc ? '▼' : '▲') : <></>;
-    const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-        e.preventDefault();
-        setSorting({
-            sortKey,
-            sortDesc: isSorted ? (!isDesc) : true
-        });
-    }
-    return (
-        <th
-            onClick={onClick}
-            className={cn(
-                'py-2 px-4 text-left font-light tracking-wider cursor-pointer hover:font-medium hover:dark:bg-zinc-600',
-                isSorted && 'font-medium dark:bg-zinc-700',
-            )}
-        >
-            {label}
-            <div className='ml-1 min-w-[2ch] inline-block'>{sortIcon}</div>
-        </th>
-    )
-}
-
-
-const availableSearchTypes = [
-    {
-        value: 'playerName',
-        label: 'Name',
-        placeholder: 'Enter a player name',
-        description: 'Search players by their last display name.'
-    },
-    {
-        value: 'playerNotes',
-        label: 'Notes',
-        placeholder: 'Enter part of the note to search for',
-        description: 'Search players by their profile notes contents.'
-    },
-    {
-        value: 'playerIds',
-        label: 'Identifiers',
-        placeholder: 'License, Discord, Steam, etc.',
-        description: 'Search players by their IDs separated by a comma.'
-    },
-] as const;
-
-const availableFilters = [
-    { label: 'Is Admin', value: 'isAdmin' },
-    { label: 'Is Online', value: 'isOnline' },
-    { label: 'Is Banned', value: 'isBanned' },
-    { label: 'Has Previous Ban', value: 'hasPreviousBan' },
-    { label: 'Has Whitelisted ID', value: 'isWhitelisted' },
-    { label: 'Has Profile Notes', value: 'hasNote' },
-] as const;
-
-function PlayerSearchBox() {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const [isSearchTypeDropdownOpen, setSearchTypeDropdownOpen] = useState(false);
-    const [currSearchType, setCurrSearchType] = useState<string>('playerName');
-    const [isFilterDropdownOpen, setFilterDropdownOpen] = useState(false);
-    const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
-
-    const selectedSearchType = availableSearchTypes.find((type) => type.value === currSearchType);
-    if (!selectedSearchType) throw new Error(`Invalid search type: ${currSearchType}`);
-
-    const filterBtnMessage = selectedFilters.length ? `${selectedFilters.length} Filters` : 'No filters';
-    return (
-        <div className="p-4 mb-2 md:mb-4 md:rounded-xl border border-border bg-card text-card-foreground shadow-sm" >
-            <div className=''>
-                <div className="flex flex-wrap-reverse gap-2">
-                    <div className='relative min-w-44 grow'>
-                        <Input
-                            type="text"
-                            autoFocus
-                            autoCapitalize='off'
-                            autoCorrect='off'
-                            ref={inputRef}
-                            placeholder={selectedSearchType.placeholder}
-                        />
-                        {false ? (
-                            <button
-                                className="absolute right-2 inset-y-0 text-zinc-500 dark:text-zinc-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg"
-                            // onClick={() => setFilterString('')}
-                            >
-                                <XIcon />
-                            </button>
-                        ) : (
-                            <div className="absolute right-2 inset-y-0 flex items-center text-zinc-500 dark:text-zinc-400 select-none pointer-events-none">
-                                <InlineCode className="text-xs tracking-wide">ctrl+f</InlineCode>
-                            </div>
-                        )}
-                    </div>
-
-                    <div className="grow flex justify-between">
-                        <div className='space-x-2 flex-nowrap'>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button
-                                        variant="outline"
-                                        role="combobox"
-                                        aria-expanded={isSearchTypeDropdownOpen}
-                                        onClick={() => setSearchTypeDropdownOpen(!isSearchTypeDropdownOpen)}
-                                        className="grow xs:w-36 justify-between border-input bg-black/5 dark:bg-black/30 hover:dark:bg-primary"
-                                    >
-                                        {selectedSearchType.label}
-                                        <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent className='w-36'>
-                                    <DropdownMenuLabel>Search Type</DropdownMenuLabel>
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuRadioGroup value={currSearchType} onValueChange={setCurrSearchType}>
-                                        {availableSearchTypes.map((searchType) => (
-                                            <DropdownMenuRadioItem key={searchType.value} value={searchType.value} className='cursor-pointer'>
-                                                {searchType.label}
-                                            </DropdownMenuRadioItem>
-                                        ))}
-                                    </DropdownMenuRadioGroup>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button
-                                        variant="outline"
-                                        role="combobox"
-                                        aria-expanded={isFilterDropdownOpen}
-                                        onClick={() => setFilterDropdownOpen(!isFilterDropdownOpen)}
-                                        className="grow xs:w-44 justify-between border-input bg-black/5 dark:bg-black/30 hover:dark:bg-primary"
-                                    >
-                                        {filterBtnMessage}
-                                        <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent className='w-44'>
-                                    <DropdownMenuLabel>Search Filters</DropdownMenuLabel>
-                                    <DropdownMenuSeparator />
-                                    {availableFilters.map((filter) => (
-                                        <DropdownMenuCheckboxItem
-                                            key={filter.value}
-                                            checked={selectedFilters.includes(filter.value)}
-                                            onCheckedChange={(checked) => {
-                                                setSelectedFilters((prev) => {
-                                                    if (checked) {
-                                                        return [...prev, filter.value];
-                                                    } else {
-                                                        return prev.filter((f) => f !== filter.value);
-                                                    }
-                                                });
-                                            }}
-                                            // className="cursor-pointer hover:!bg-secondary hover:!text-current focus:!bg-secondary focus:!text-current"
-                                            className="cursor-pointer"
-                                        >
-                                            {filter.label}
-                                        </DropdownMenuCheckboxItem>
-                                    ))}
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuItem
-                                        onClick={() => setSelectedFilters([])}
-                                        className="cursor-pointer"
-                                    >
-                                        <FilterXIcon className="mr-2 h-4 w-4" />
-                                        Clear Filters
-                                    </DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </div>
-
-                        <div>
-                            <Button
-                                variant="outline"
-                                className="flex-grow"
-                            >
-                                More
-                                <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-                <div className="text-xs text-muted-foreground mt-1 px-1">
-                    {selectedSearchType.description}
-                </div>
-
-
-            </div>
-        </div>
-    )
-}
-
-const PlayerSearchBoxMemo = memo(PlayerSearchBox);
-
-
-const callouts: PageCalloutProps[] = [
-    {
-        label: 'Total Players',
-        value: 123456,
-        // value: false,
-        icon: <UsersIcon />,
-        prefix: ''
-    },
-    {
-        label: 'Players Today',
-        value: 1234,
-        icon: <CalendarPlusIcon />,
-        prefix: ''
-    },
-    {
-        label: 'New Players Today',
-        value: 1234,
-        icon: <UserRoundPlusIcon />,
-        prefix: '+'
-    },
-    {
-        label: 'New Players This Week',
-        value: 12345,
-        icon: <UserRoundPlusIcon />,
-        prefix: '+'
-    }
-]
-
-function PlayerStats() {
-    return (
-        <PageCalloutRow callouts={callouts} />
-    )
-}
-
-const PlayerStatsMemo = memo(PlayerStats);
-
-
-export default function TmpTestTables() {
-    const scrollRef = useRef<HTMLDivElement>(null);
-    const [players, setPlayers] = useState<PlayerType[]>([]);
-    const [hasReachedEnd, setHasReachedEnd] = useState(false);
-    const [isFetching, setIsFetching] = useState(true);
-    const [loadError, setLoadError] = useState<string | null>(null);
-    const [sorting, setSorting] = useState<PlayerSortingStateType>({ sortKey: 'tsJoined', sortDesc: true });
-    const [dbPlayerCount, setDbPlayerCount] = useState(0);
-    const [isResetting, setIsResetting] = useState(false);
-
-    const fetchNextPage = async (reset?: boolean) => {
-        console.log('fetchNextPage', players.length);
-        setIsFetching(true);
-        setLoadError(null);
-        if (reset) {
-            setIsResetting(true);
-        }
-        try {
-            const offset = !reset && players.length ? {
-                param: players[players.length - 1][sorting.sortKey],
-                license: players[players.length - 1].license
-            } : undefined;
-            const {
-                players: newPlayers,
-                hasReachedEnd,
-                dbPlayerCount
-            } = await mockBackendApi({
-                sortKey: sorting.sortKey,
-                sortDesc: sorting.sortDesc,
-                offset
-            });
-            setDbPlayerCount(dbPlayerCount);
-            setHasReachedEnd(hasReachedEnd);
-            setIsResetting(false);
-            if (newPlayers.length) {
-                // setPlayers((prev) => reset ? newPlayers : [...prev, ...newPlayers]);
-                setPlayers((prev) => {
-                    const newValue = reset ? newPlayers : [...prev, ...newPlayers];
-                    console.log(`fetchNextPage ${prev.length} + ${newPlayers.length} = ${newValue.length}`);
-                    return newValue;
-                });
-            } else {
-                setPlayers([]);
-            }
-        } catch (error) {
-            setLoadError(`Failed to fetch more data: ${(error as Error).message}`);
-        } finally {
-            setIsFetching(false);
-        }
-    };
-
-    // The virtualizer
-    const rowVirtualizer = useVirtualizer({
-        scrollingDelay: 0,
-        count: players.length + 1,
-        getScrollElement: () => (scrollRef.current as HTMLDivElement)?.getElementsByTagName('div')[0],
-        estimateSize: () => 38, // border-b
-        overscan: 10,
-    });
-    const virtualItems = rowVirtualizer.getVirtualItems();
-    const virtualizerTotalSize = rowVirtualizer.getTotalSize();
-
-    //NOTE: This is required due to how css works on tables
-    //ref: https://github.com/TanStack/virtual/issues/585
-    let TopRowPad: React.ReactNode = null;
-    let BottomRowPad: React.ReactNode = null;
-    if (virtualItems.length > 0) {
-        const padStart = virtualItems[0].start - rowVirtualizer.options.scrollMargin;
-        if (padStart > 0) {
-            TopRowPad = <tr><td colSpan={3} style={{ height: padStart }} /></tr>;
-        }
-        const padEnd = virtualizerTotalSize - virtualItems[virtualItems.length - 1].end;
-        if (padEnd > 0) {
-            BottomRowPad = <tr><td colSpan={3} style={{ height: padEnd }} /></tr>;
-        }
-    }
-
-    // Automagically fetch next page when reaching the end
-    useEffect(() => {
-        if (!players.length || !virtualItems.length) return;
-        const lastVirtualItemIndex = virtualItems[virtualItems.length - 1].index;
-        if (players.length <= lastVirtualItemIndex && !hasReachedEnd && !isFetching) {
-            fetchNextPage()
-        }
-    }, [players, virtualItems, hasReachedEnd, isFetching]);
-
-    //fetch the first page automatically
-    useEffect(() => {
-        if (!players.length) fetchNextPage(true);
-    }, []);
-
-    //on sorting change, reset the list
-    useEffect(() => {
-        // setPlayers([]);
-        rowVirtualizer.scrollToIndex(0);
-        fetchNextPage(true);
-    }, [sorting]);
-
-
-    return (<div
-        className='flex flex-col min-w-96 2xl:mx-8'
-        style={{ height: 'calc(100vh - 3.5rem - 1px - 2rem)' }}
-    >
-        <PlayerStatsMemo />
-
-        <PlayerSearchBoxMemo />
-        <div
-            className="w-full max-h-full min-h-96 overflow-auto border md:rounded-lg"
-            style={{ overflowAnchor: "none" }}
-        >
-            <ScrollArea className="h-full" ref={scrollRef}>
-                <table className='w-full caption-bottom text-sm table-fixed'>
-                    <TableHeader>
-                        <tr className='sticky top-0 z-10 bg-zinc-200 dark:bg-muted text-secondary-foreground text-base select-none shadow-md transition-colors'>
-                            <th className='w-[50%]x py-2 px-4 font-light tracking-wider text-left text-muted-foreground'>
-                                Display Name
-                            </th>
-                            <SortableTableHeader
-                                label='Play Time'
-                                sortKey='playTime'
-                                sorting={sorting}
-                                setSorting={setSorting}
-                            />
-                            <SortableTableHeader
-                                label='First Joined'
-                                sortKey='tsJoined'
-                                sorting={sorting}
-                                setSorting={setSorting}
-                            />
-                            <SortableTableHeader
-                                label='Last Connection'
-                                sortKey='tsLastConnection'
-                                sorting={sorting}
-                                setSorting={setSorting}
-                            />
-                        </tr>
-                    </TableHeader>
-                    <TableBody className={cn(isResetting && 'opacity-25')}>
-                        {TopRowPad}
-                        {virtualItems.map((virtualItem) => {
-                            const isLastRow = virtualItem.index > players.length - 1;
-                            return (
-                                <TableRow key={virtualItem.key}>
-                                    {isLastRow ? (
-                                        <LastRow
-                                            hasReachedEnd={hasReachedEnd}
-                                            loadError={loadError}
-                                            isFetching={isFetching}
-                                            retryFetch={fetchNextPage}
-                                        />
-                                    ) : (
-                                        <PlayerRow rowData={players[virtualItem.index]} />
-                                    )}
-                                </TableRow>
-                            )
-                        })}
-                        {BottomRowPad}
-                    </TableBody>
-                </table>
-            </ScrollArea>
-        </div>
-    </div>);
-}
diff --git a/panel/src/pages/TestingPage/mockPlayersApi.ts b/panel/src/pages/TestingPage/mockPlayersApi.ts
new file mode 100644
index 000000000..44650a798
--- /dev/null
+++ b/panel/src/pages/TestingPage/mockPlayersApi.ts
@@ -0,0 +1,112 @@
+import { faker } from '@faker-js/faker'
+import { PlayersTableReqType } from '@shared/playerApiTypes';
+
+export type PlayerType = {
+    license: string;
+    displayName: string;
+    playTime: number;
+    tsJoined: number;
+    tsLastConnection: number;
+    notes?: string;
+}
+
+export type PlayersApiResp = {
+    players: PlayerType[];
+    hasReachedEnd: boolean;
+    dbPlayerCount: number;
+}
+
+let personCounter = 0;
+const newPerson = (isNew?: boolean): PlayerType => {
+    personCounter++;
+    return {
+        license: faker.string.uuid(),
+        // displayName: (personCounter).toString().padStart(3, '_'),
+        // displayName: `${personCounter} ${faker.person.firstName()} ${faker.animal.type()}`,
+        displayName: `${faker.person.firstName()} ${faker.animal.type()}`,
+        playTime: faker.number.int(1500),
+        tsJoined: !isNew ? faker.date.recent({ days: 30 }).getTime() : Math.floor(Date.now() / 1000),
+        tsLastConnection: faker.date.recent({ days: 5 }).getTime(),
+        notes: Math.random() < 0.1 ? faker.lorem.sentence() : undefined,
+    }
+}
+
+const initialSize = 100;
+const dbData: PlayerType[] = [];
+for (let i = 0; i < initialSize; i++) {
+    dbData.push(newPerson());
+}
+dbData.sort((a, b) => a.tsJoined - b.tsJoined);
+
+
+// setInterval(() => {
+//     dbData.push(newPerson(true));
+//     console.log('added person', dbData.length);
+// }, 1000);
+
+
+
+const limit = 40;
+//simulates a backend api
+export const mockBackendApi = async ({
+    search, filters, sorting, offset
+}: PlayersTableReqType): Promise<PlayersApiResp> => {
+    let dbCopy = [...dbData];
+
+    //search
+    if (search) {
+        const searchVal = search.value.toLocaleLowerCase();
+        let filterFunc; //playerName, playerNotes, playerIds
+        if (search.type === 'playerName') {
+            filterFunc = (player: PlayerType) => player.displayName.toLocaleLowerCase().includes(searchVal)
+        } else if (search.type === 'playerNotes') {
+            filterFunc = (player: PlayerType) => player.notes && player.notes.toLocaleLowerCase().includes(searchVal)
+        } else if (search.type === 'playerIds') {
+            filterFunc = (player: PlayerType) => player.license.toLocaleLowerCase().includes(searchVal)
+        } else {
+            throw new Error('Invalid search type');
+        }
+
+        dbCopy = dbCopy.filter(filterFunc);
+    }
+
+    //filters
+    //FIXME: implement filters
+
+    //sorting
+    dbCopy.sort((a, b) => {
+        if (sorting.desc) {
+            return b[sorting.key] - a[sorting.key]
+        } else {
+            return a[sorting.key] - b[sorting.key]
+        }
+    });
+
+    //offset
+    let startIndex = 0;
+    if (offset) {
+        const refIndex = dbCopy.findIndex(player => {
+            return player.license !== offset.license && sorting.desc
+                ? player[sorting.key] <= offset.param
+                : player[sorting.key] >= offset.param
+        });
+        if (refIndex === -1) {
+            return {
+                players: [],
+                hasReachedEnd: true,
+                dbPlayerCount: dbCopy.length,
+            }
+        }
+        startIndex = refIndex + 1;
+    }
+    const endIndex = startIndex + limit;
+
+
+    // await new Promise(resolve => setTimeout(resolve, 1250));
+    await new Promise(resolve => setTimeout(resolve, 250));
+    return {
+        players: dbCopy.slice(startIndex, endIndex),
+        hasReachedEnd: endIndex >= dbCopy.length,
+        dbPlayerCount: dbCopy.length,
+    };
+}
diff --git a/shared/playerApiTypes.ts b/shared/playerApiTypes.ts
index e079d1d1d..b30110fbb 100644
--- a/shared/playerApiTypes.ts
+++ b/shared/playerApiTypes.ts
@@ -43,3 +43,29 @@ export type PlayerModalSuccess = {
     player: PlayerModalPlayerData;
 }
 export type PlayerModalResp = PlayerModalSuccess | GenericApiErrorResp;
+
+
+/**
+ * Used in the players page
+ */
+export type PlayersTableSearchType = null | {
+    value: string;
+    type: string;
+}
+export type PlayersTableFiltersType = string[];
+export type PlayersTableSortingType = {
+    key: 'playTime' | 'tsJoined' | 'tsLastConnection';
+    desc: boolean;
+};
+
+export type PlayersTableReqType = {
+    search: PlayersTableSearchType;
+    filters: PlayersTableFiltersType;
+    sorting: PlayersTableSortingType;
+    //NOTE: the query needs to be prevOffset inclusive, but ignore prevLicense
+    // therefore, optimistically always limit to x + 1
+    offset?: {
+        param: number;
+        license: string;
+    }
+};