refactor(client): extract useClientPagination hook and clean up Select prop

- Replace duplicated page/rowsPerPage state in Team, Notifications and Status Pages tables with a shared useClientPagination hook
- Drop unused placeholderColor prop from Select; placeholder always uses secondary text
- Restore LAYOUT.MD constant for the account menu item gap

client/src/Pages/Notifications/components/NotificationsTable.tsx

@@ -1,11 +1,10 @@
 import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import type { Header } from "@/Components/design-elements/Table";
 import { Table } from "@/Components/design-elements";
 import { Pagination } from "@/Components/design-elements/Table";
+import { useClientPagination } from "@/Hooks/useClientPagination";
 
-import { useState } from "react";
 import type { Notification } from "@/Types/Notification";
 import { useNavigate } from "react-router";
 import { useTranslation } from "react-i18next";
@@ -23,8 +22,7 @@ export const NotificationsTable = ({
 	const navigate = useNavigate();
 	const { t } = useTranslation();
 	const theme = useTheme();
-	const [page, setPage] = useState(0);
-	const [rowsPerPage, setRowsPerPage] = useState(10);
+	const { pagedRows, paginationProps } = useClientPagination(notifications);
 
 	const getActions = (channel: Notification): ActionMenuItem[] => {
 		return [
@@ -87,47 +85,16 @@ export const NotificationsTable = ({
 		return headers;
 	};
 
-	const headers = getHeaders();
-
-	const handlePageChange = (
-		_e: React.MouseEvent<HTMLButtonElement> | null,
-		newPage: number
-	) => {
-		setPage(newPage);
-	};
-
-	const handleRowsPerPageChange = (
-		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
-	) => {
-		setPage(0);
-		setRowsPerPage(Number(e.target.value));
-	};
-
-	const pagedNotifications = notifications.slice(
-		page * rowsPerPage,
-		page * rowsPerPage + rowsPerPage
-	);
-
 	return (
-		<Box>
+		<>
 			<Table
-				headers={headers}
-				data={pagedNotifications}
+				headers={getHeaders()}
+				data={pagedRows}
 				onRowClick={(row) => {
 					navigate(`/notifications/configure/${row.id}`);
 				}}
 			/>
-			{notifications.length > 0 && (
-				<Pagination
-					component="div"
-					count={notifications.length}
-					page={page}
-					rowsPerPage={rowsPerPage}
-					onPageChange={handlePageChange}
-					onRowsPerPageChange={handleRowsPerPageChange}
-					itemsOnPage={pagedNotifications.length}
-				/>
-			)}
-		</Box>
+			{notifications.length > 0 && <Pagination {...paginationProps} />}
+		</>
 	);
 };