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}) => {
-				setShowSearch(true)
+				if (items.length) {
+					setShowSearch(true)
+				}
 			},
 		},
 	)
@@ -81,32 +84,42 @@ export default function ReservedAliasesRoute(): ReactElement {
 			}
 		>
 			<QueryResult<PaginationResult<ReservedAlias>, AxiosError> query={query}>
-				{({items: aliases}) => (
+				{({items: aliases}) => {
-					<List>
+					if (aliases.length === 0) {
-						{aliases.map(alias => (
+						if (searchValue === "") {
-							<ListItemButton
+							return <EmptyStateScreen />
-								to={`/admin/reserved-aliases/${alias.id}`}
+						} else {
-								component={Link}
+							return <NoSearchResults />
-								key={alias.id}
+						}
-							>
+					}
-								<ListItemText
+
-									primary={
+					return (
-										<>
+						<List>
-											<span>{alias.local}</span>
+							{aliases.map(alias => (
-											<span style={{opacity: 0.4}}>@{alias.domain}</span>
+								<ListItemButton
-										</>
+									to={`/admin/reserved-aliases/${alias.id}`}
-									}
+									component={Link}
-									secondary={t("routes.ReservedAliasesRoute.userAmount", {
+									key={alias.id}
-										count: alias.users.length,
+								>
-									})}
+									<ListItemText
-								/>
+										primary={
-								<ListItemSecondaryAction>
+											<>
-									<Switch checked={alias.isActive} />
+												<span>{alias.local}</span>
-								</ListItemSecondaryAction>
+												<span style={{opacity: 0.4}}>@{alias.domain}</span>
-							</ListItemButton>
+											</>
-						))}
+										}
-					</List>
+										secondary={t("routes.ReservedAliasesRoute.userAmount", {
-				)}
+											count: alias.users.length,
+										})}
+									/>
+									<ListItemSecondaryAction>
+										<Switch checked={alias.isActive} />
+									</ListItemSecondaryAction>
+								</ListItemButton>
+							))}
+						</List>
+					)
+				}}
 			</QueryResult>
 		</SimplePage>
 	)