added EmptyStateScreen.tsx for Aliases; improvements

public/locales/en/translation.json

@@ -110,6 +110,10 @@
         },
         "AliasesRoute": {
             "title": "Aliases",
+            "emptyState": {
+                "title": "Welcome to your Aliases!",
+                "description": "Create your first Alias to get started."
+            },
             "pageActions": {
                 "search": {
                     "label": "Search",
@@ -214,7 +218,8 @@
             "forms": {
                 "aliasPreferences": {
                     "title": "Alias Preferences",
-                    "description": "Select the default behavior for your aliases. This will only affect aliases that do not have a custom behavior set."
+                    "description": "Select the default behavior for your aliases. This will only affect aliases that do not have a custom behavior set.",
+                    "saveAction": "Save preferences"
                 }
             }
         }

src/apis/create-alias.ts

@@ -1,9 +1,4 @@
-import {
-	Alias,
-	AliasType,
-	ImageProxyFormatType,
-	ProxyUserAgentType,
-} from "~/server-types"
+import {Alias, AliasType, ImageProxyFormatType, ProxyUserAgentType} from "~/server-types"
 import {client} from "~/constants/axios-client"
 
 interface CreateAliasDataOther {
@@ -32,20 +27,12 @@ interface CreateAliasDataCustomType extends CreateAliasDataBase {
 	local: string
 }
 
-export type CreateAliasData =
-	| CreateAliasDataRandomType
-	| CreateAliasDataCustomType
+export type CreateAliasData = CreateAliasDataRandomType | CreateAliasDataCustomType
 
-export default async function createAlias(
-	aliasData: CreateAliasData,
-): Promise<Alias> {
-	const {data} = await client.post(
-		`${import.meta.env.VITE_SERVER_BASE_URL}/alias`,
-		aliasData,
-		{
+export default async function createAlias(aliasData: CreateAliasData): Promise<Alias> {
+	const {data} = await client.post(`${import.meta.env.VITE_SERVER_BASE_URL}/alias`, aliasData, {
 		withCredentials: true,
-		},
-	)
+	})
 
 	return data
 }

src/components/SimpleForm.tsx

@@ -2,14 +2,7 @@ import {MdChevronRight} from "react-icons/md"
 import {TiCancel} from "react-icons/ti"
 import React, {ReactElement, useEffect, useState} from "react"
 
-import {
-	Alert,
-	Button,
-	Grid,
-	Snackbar,
-	Typography,
-	TypographyProps,
-} from "@mui/material"
+import {Alert, Button, Grid, Snackbar, Typography, TypographyProps} from "@mui/material"
 import {LoadingButton} from "@mui/lab"
 import {OverrideProps} from "@mui/types"
 
@@ -52,6 +45,7 @@ export default function SimpleForm({
 				spacing={4}
 				paddingX={2}
 				paddingY={4}
+				direction="column"
 				alignItems="center"
 				justifyContent="center"
 			>
@@ -85,12 +79,7 @@ export default function SimpleForm({
 					</Grid>
 				)}
 				<Grid item>
-					<Grid
-						container
-						justifyContent={
-							cancelActionLabel ? "space-between" : "center"
-						}
-					>
+					<Grid container justifyContent={cancelActionLabel ? "space-between" : "center"}>
 						{cancelActionLabel && (
 							<Grid item>
 								<Button

src/route-widgets/AliasesRoute/AliasesDetails.tsx

@@ -19,6 +19,7 @@ import {useUIState} from "~/hooks"
 import {useSnackbar} from "notistack"
 import {SUCCESS_SNACKBAR_SHOW_DURATION} from "~/constants/values"
 import CreateAliasButton from "~/route-widgets/AliasesRoute/CreateAliasButton"
+import EmptyStateScreen from "~/route-widgets/AliasesRoute/EmptyStateScreen"
 
 export interface AliasesDetailsProps {
 	aliases: AliasList[]
@@ -36,6 +37,7 @@ export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactEle
 	return (
 		<Grid container spacing={4} direction="column">
 			<Grid item>
+				{aliasesUIState.length > 0 ? (
 					<List>
 						{aliasesUIState.map(alias => (
 							<ListItemButton
@@ -72,6 +74,9 @@ export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactEle
 							</ListItemButton>
 						))}
 					</List>
+				) : (
+					<EmptyStateScreen />
+				)}
 			</Grid>
 			<Grid item>
 				<CreateAliasButton

src/route-widgets/AliasesRoute/CreateAliasButton.tsx

@@ -34,9 +34,7 @@ export default function CreateAliasButton({onCreated}: CreateAliasButtonProps):
 	const {showSuccess, showError} = useErrorSuccessSnacks()
 	const {_encryptUsingMasterPassword, encryptionStatus} = useContext(AuthContext)
 
-	const $errorSnackbarId = useRef<SnackbarKey | null>(null)
-
-	const {mutateAsync, isLoading, isSuccess} = useMutation<Alias, AxiosError, CreateAliasData>(
+	const {mutateAsync, isLoading} = useMutation<Alias, AxiosError, CreateAliasData>(
 		async values => {
 			if (encryptionStatus === EncryptionStatus.Available) {
 				values.encryptedNotes = await _encryptUsingMasterPassword(

src/route-widgets/AliasesRoute/EmptyStateScreen.tsx

@@ -0,0 +1,27 @@
+import {ReactElement} from "react"
+import {useTranslation} from "react-i18next"
+import {FaMask} from "react-icons/fa"
+
+import {Grid, Typography} from "@mui/material"
+
+export default function EmptyStateScreen(): ReactElement {
+	const {t} = useTranslation()
+
+	return (
+		<Grid container spacing={4} direction="column" alignItems="center">
+			<Grid item>
+				<Typography variant="h6" component="h2">
+					{t("routes.AliasesRoute.emptyState.title")}
+				</Typography>
+			</Grid>
+			<Grid item>
+				<FaMask size={40} />
+			</Grid>
+			<Grid item>
+				<Typography variant="body1">
+					{t("routes.AliasesRoute.emptyState.description")}
+				</Typography>
+			</Grid>
+		</Grid>
+	)
+}

src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx

@@ -322,7 +322,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 						type="submit"
 						startIcon={<MdCheckCircle />}
 					>
-						Save Preferences
+						{t("routes.SettingsRoute.forms.aliasPreferences.saveAction")}
 					</LoadingButton>
 				</Grid>
 			</Grid>

src/routes/AliasesRoute.tsx

@@ -9,6 +9,7 @@ import {InputAdornment, TextField} from "@mui/material"
 import {AliasList, PaginationResult} from "~/server-types"
 import {QueryResult, SimplePage} from "~/components"
 import AliasesDetails from "~/route-widgets/AliasesRoute/AliasesDetails"
+import EmptyStateScreen from "~/route-widgets/AliasesRoute/EmptyStateScreen"
 import getAliases from "~/apis/get-aliases"
 
 export default function AliasesRoute(): ReactElement {
@@ -30,6 +31,7 @@ export default function AliasesRoute(): ReactElement {
 		<SimplePage
 			title={t("routes.AliasesRoute.title")}
 			pageOptionsActions={
+				(query.data?.items?.length || 0) > 0 && (
 					<TextField
 						value={searchValue}
 						onChange={event => {
@@ -39,9 +41,7 @@ export default function AliasesRoute(): ReactElement {
 							})
 						}}
 						label={t("routes.AliasesRoute.pageActions.search.label")}
-					placeholder={t(
-						"routes.AliasesRoute.pageActions.search.placeholder",
-					)}
+						placeholder={t("routes.AliasesRoute.pageActions.search.placeholder")}
 						id="search"
 						InputProps={{
 							startAdornment: (
@@ -51,6 +51,7 @@ export default function AliasesRoute(): ReactElement {
 							),
 						}}
 					/>
+				)
 			}
 		>
 			<QueryResult<PaginationResult<AliasList>, AxiosError> query={query}>