feat: Add EmptyStateScreen.tsx for reserved aliases

public/locales/en-US/translation.json

@@ -295,7 +295,11 @@
                 }
             },
             "userAmount_one": "Forwards to one user",
-            "userAmount_other": "Forwards to {{count}} users"
+            "userAmount_other": "Forwards to {{count}} users",
+            "emptyState": {
+                "title": "Create your first reserved alias",
+                "description": "Reserved aliases are aliases that will be forwarded to selected admin users. This is useful if you want to create aliases that are meant to be public, like contact@example.com or hello@example.com."
+            }
         },
         "ReservedAliasDetailRoute": {
             "title": "Reserved Alias Details",

src/route-widgets/ReservedAliasesRoute/EmptyStateScreen.tsx

@@ -0,0 +1,37 @@
+import {ReactElement} from "react"
+import {useTranslation} from "react-i18next"
+
+import {Container, Grid, Typography} from "@mui/material"
+import {BsStarFill} from "react-icons/bs"
+
+export default function EmptyStateScreen(): ReactElement {
+	const {t} = useTranslation()
+
+	return (
+		<Container maxWidth="xs">
+			<Grid
+				container
+				spacing={4}
+				direction="column"
+				alignItems="center"
+				maxWidth="80%"
+				alignSelf="center"
+				marginX="auto"
+			>
+				<Grid item>
+					<Typography variant="h6" component="h2">
+						{t("routes.ReservedAliasesRoute.emptyState.title")}
+					</Typography>
+				</Grid>
+				<Grid item>
+					<BsStarFill size={40} />
+				</Grid>
+				<Grid item>
+					<Typography variant="body1">
+						{t("routes.ReservedAliasesRoute.emptyState.description")}
+					</Typography>
+				</Grid>
+			</Grid>
+		</Container>
+	)
+}

src/routes/ReservedAliasesRoute.tsx

@@ -18,7 +18,8 @@ import {useQuery} from "@tanstack/react-query"
 
 import {PaginationResult, ReservedAlias} from "~/server-types"
 import {getReservedAliases} from "~/apis"
-import {QueryResult, SimplePage} from "~/components"
+import {NoSearchResults, QueryResult, SimplePage} from "~/components"
+import EmptyStateScreen from "~/route-widgets/ReservedAliasesRoute/EmptyStateScreen"
 
 export default function ReservedAliasesRoute(): ReactElement {
 	const {t} = useTranslation()
@@ -33,8 +34,10 @@ export default function ReservedAliasesRoute(): ReactElement {
 				query: queryValue,
 			}),
 		{
-			onSuccess: () => {
+			onSuccess: ({items}) => {
+				if (items.length) {
 					setShowSearch(true)
+				}
 			},
 		},
 	)
@@ -81,7 +84,16 @@ export default function ReservedAliasesRoute(): ReactElement {
 			}
 		>
 			<QueryResult<PaginationResult<ReservedAlias>, AxiosError> query={query}>
-				{({items: aliases}) => (
+				{({items: aliases}) => {
+					if (aliases.length === 0) {
+						if (searchValue === "") {
+							return <EmptyStateScreen />
+						} else {
+							return <NoSearchResults />
+						}
+					}
+
+					return (
 						<List>
 							{aliases.map(alias => (
 								<ListItemButton
@@ -106,7 +118,8 @@ export default function ReservedAliasesRoute(): ReactElement {
 								</ListItemButton>
 							))}
 						</List>
-				)}
+					)
+				}}
 			</QueryResult>
 		</SimplePage>
 	)