feat: Add delete button to reserved aliases

public/locales/en-US/translation.json

@@ -412,6 +412,15 @@
                     "title": "Global settings are disabled",
                     "description": "Global settings have been disabled. You can enable them in the configuration file."
                 }
+            },
+            "reservedAlias": {
+                "actions": {
+                    "delete": {
+                        "label": "Delete Reserved Alias",
+                        "description": "Are you sure you want to delete this reserved alias?",
+                        "continueAction": "Delete Reserved Alias"
+                    }
+                }
             }
         }
     },

src/apis/delete-reserved-alias.ts

@@ -0,0 +1,13 @@
+import {client} from "~/constants/axios-client"
+import {SimpleDetailResponse} from "~/server-types"
+
+export default async function deleteReservedAlias(id: string): Promise<SimpleDetailResponse> {
+	const {data} = await client.delete(
+		`${import.meta.env.VITE_SERVER_BASE_URL}/v1/reserved-alias/${id}`,
+		{
+			withCredentials: true,
+		},
+	)
+
+	return data
+}

src/apis/index.ts

@@ -54,3 +54,5 @@ export * from "./update-admin-settings"
 export {default as updateAdminSettings} from "./update-admin-settings"
 export * from "./delete-alias"
 export {default as deleteAlias} from "./delete-alias"
+export * from "./delete-reserved-alias"
+export {default as deleteReservedAlias} from "./delete-reserved-alias"

src/routes/ReservedAliasDetailRoute.tsx

@@ -6,9 +6,9 @@ import {AxiosError} from "axios"
 import {useQuery} from "@tanstack/react-query"
 import {Grid} from "@mui/material"
 
-import {QueryResult, SimplePage, SimplePageBuilder} from "~/components"
+import {DeleteButton, QueryResult, SimplePage, SimplePageBuilder} from "~/components"
 import {ReservedAlias} from "~/server-types"
-import {getReservedAlias} from "~/apis"
+import {deleteReservedAlias, getReservedAlias} from "~/apis"
 import AliasActivationSwitch from "~/route-widgets/ReservedAliasDetailRoute/AliasActivationSwitch"
 import AliasAddress from "~/route-widgets/AliasDetailRoute/AliasAddress"
 import AliasUsersList from "~/route-widgets/ReservedAliasDetailRoute/AliasUsersList"
@@ -21,7 +21,25 @@ export default function ReservedAliasDetailRoute(): ReactElement {
 	const query = useQuery<ReservedAlias, AxiosError>(queryKey, () => getReservedAlias(params.id!))
 
 	return (
-		<SimplePage title={t("routes.ReservedAliasDetailRoute.title")}>
+		<SimplePage
+			title={t("routes.ReservedAliasDetailRoute.title")}
+			actions={
+				query.data && (
+					<DeleteButton
+						onDelete={() => deleteReservedAlias(params.id!)}
+						label={t("routes.AdminRoute.reservedAlias.actions.delete.label")}
+						description={t(
+							"routes.adminRoute.reservedAlias.actions.delete.description",
+						)}
+						continueLabel={t(
+							"routes.AdminRoute.reservedAlias.actions.delete.continueAction",
+						)}
+						navigateTo="/admin/reserved-aliases"
+						successMessage={t("relations.alias.mutations.success.aliasDeleted")}
+					/>
+				)
+			}
+		>
 			<QueryResult<ReservedAlias, AxiosError> query={query}>
 				{alias => (
 					<SimplePageBuilder.MultipleSections>