refactor(settings): rename the danger zone page to account

The page now holds account-level actions rather than only destructive ones, so
it is reachable at /dashboard/settings/account and presented with a neutral
icon in the sidebar and command palette.

apps/web/src/features/command-palette/pages/navigation.tsx

@@ -11,7 +11,7 @@ import {
 	ReadCvLogoIcon,
 	ShieldCheckIcon,
 	UserCircleIcon,
-	WarningIcon,
+	UserGearIcon,
 } from "@phosphor-icons/react";
 import { useNavigate, useRouteContext } from "@tanstack/react-router";
 import { CommandItem } from "@reactive-resume/ui/components/command";
@@ -148,12 +148,12 @@ export function NavigationCommandGroup() {
 				</CommandItem>
 
 				<CommandItem
-					keywords={[t`Danger Zone`]}
-					value="navigation.settings.danger-zone"
-					onSelect={() => onNavigate("/dashboard/settings/danger-zone")}
+					keywords={[t`Account`, t`Export Data`, t`Delete Account`]}
+					value="navigation.settings.account"
+					onSelect={() => onNavigate("/dashboard/settings/account")}
 				>
-					<WarningIcon />
-					<Trans>Danger Zone</Trans>
+					<UserGearIcon />
+					<Trans>Account</Trans>
 				</CommandItem>
 			</BaseCommandGroup>
 		</>

apps/web/src/features/settings/pages/account.tsx

@@ -5,9 +5,9 @@ import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { m } from "motion/react";
 import { useState } from "react";
-import { toast } from "sonner";
 import { Button } from "@reactive-resume/ui/components/button";
 import { Input } from "@reactive-resume/ui/components/input";
+import { toast } from "@reactive-resume/ui/components/toast";
 import { downloadWithAnchor, generateFilename } from "@reactive-resume/utils/file";
 import { useConfirm } from "@/hooks/use-confirm";
 import { authClient } from "@/libs/auth/client";
@@ -16,7 +16,7 @@ import { orpc } from "@/libs/orpc/client";
 
 const CONFIRMATION_TEXT = "delete";
 
-export function DangerZoneSettingsPage() {
+export function AccountSettingsPage() {
 	const confirm = useConfirm();
 	const navigate = useNavigate();
 	const [confirmationText, setConfirmationText] = useState("");
@@ -29,18 +29,19 @@ export function DangerZoneSettingsPage() {
 			onSuccess: (data) => {
 				const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
 				downloadWithAnchor(blob, generateFilename("reactive-resume-export", "json"));
-				toast.success(t`Your data has been exported successfully.`);
+				toast.add({ type: "success", description: t`Your data has been exported successfully.` });
 			},
 			onError: (error) => {
-				toast.error(
-					getReadableErrorMessage(
+				toast.add({
+					type: "error",
+					description: getReadableErrorMessage(
 						error,
 						t({
 							comment: "Fallback toast when data export fails",
 							message: "Failed to export your data. Please try again.",
 						}),
 					),
-				);
+				});
 			},
 		}),
 	);
@@ -49,36 +50,37 @@ export function DangerZoneSettingsPage() {
 		const confirmed = await confirm(t`Are you sure you want to delete your account?`, {
 			description: t`This action cannot be undone. All your data will be permanently deleted.`,
 			confirmText: t({
-				comment: "Account deletion confirmation dialog confirm action in danger zone",
+				comment: "Account deletion confirmation dialog confirm action in account settings",
 				message: "Confirm",
 			}),
 			cancelText: t({
-				comment: "Account deletion confirmation dialog cancel action in danger zone",
+				comment: "Account deletion confirmation dialog cancel action in account settings",
 				message: "Cancel",
 			}),
 		});
 
 		if (!confirmed) return;
 
-		const toastId = toast.loading(t`Deleting your account...`);
+		const toastId = toast.add({ type: "loading", description: t`Deleting your account...` });
 
 		deleteAccount(undefined, {
 			onSuccess: async () => {
-				toast.success(t`Your account has been deleted successfully.`, { id: toastId });
+				toast.add({ type: "success", description: t`Your account has been deleted successfully.`, id: toastId });
 				await authClient.signOut();
 				void navigate({ to: "/" });
 			},
 			onError: (error) => {
-				toast.error(
-					getReadableErrorMessage(
+				toast.add({
+					type: "error",
+					description: getReadableErrorMessage(
 						error,
 						t({
 							comment: "Fallback toast when account deletion fails",
 							message: "Failed to delete your account. Please try again.",
 						}),
 					),
-					{ id: toastId },
-				);
+					id: toastId,
+				});
 			},
 		});
 	};

apps/web/src/routeTree.gen.ts

@@ -32,8 +32,8 @@ import { Route as TemplatesSplatRouteImport } from "./routes/templates/$";
 import { Route as BuilderResumeIdIndexRouteImport } from "./routes/builder/$resumeId/index";
 import { Route as DashboardApplicationsIndexRouteImport } from "./routes/dashboard/applications/index";
 import { Route as DashboardResumesIndexRouteImport } from "./routes/dashboard/resumes/index";
+import { Route as DashboardSettingsAccountRouteImport } from "./routes/dashboard/settings/account";
 import { Route as DashboardSettingsApiKeysRouteImport } from "./routes/dashboard/settings/api-keys";
-import { Route as DashboardSettingsDangerZoneRouteImport } from "./routes/dashboard/settings/danger-zone";
 import { Route as DashboardSettingsIntegrationsRouteRouteImport } from "./routes/dashboard/settings/integrations/route";
 import { Route as DashboardSettingsJobSearchRouteImport } from "./routes/dashboard/settings/job-search";
 import { Route as DashboardSettingsPreferencesRouteImport } from "./routes/dashboard/settings/preferences";
@@ -155,18 +155,18 @@ const DashboardResumesIndexRoute = DashboardResumesIndexRouteImport.update({
   path: "/resumes/",
   getParentRoute: () => DashboardRouteRoute,
 } as any);
+const DashboardSettingsAccountRoute =
+  DashboardSettingsAccountRouteImport.update({
+    id: "/settings/account",
+    path: "/settings/account",
+    getParentRoute: () => DashboardRouteRoute,
+  } as any);
 const DashboardSettingsApiKeysRoute =
   DashboardSettingsApiKeysRouteImport.update({
     id: "/settings/api-keys",
     path: "/settings/api-keys",
     getParentRoute: () => DashboardRouteRoute,
   } as any);
-const DashboardSettingsDangerZoneRoute =
-  DashboardSettingsDangerZoneRouteImport.update({
-    id: "/settings/danger-zone",
-    path: "/settings/danger-zone",
-    getParentRoute: () => DashboardRouteRoute,
-  } as any);
 const DashboardSettingsIntegrationsRouteRoute =
   DashboardSettingsIntegrationsRouteRouteImport.update({
     id: "/settings/integrations",
@@ -219,8 +219,8 @@ export interface FileRoutesByFullPath {
   "/auth/": typeof AuthIndexRoute;
   "/dashboard/": typeof DashboardIndexRoute;
   "/dashboard/settings/integrations": typeof DashboardSettingsIntegrationsRouteRoute;
+  "/dashboard/settings/account": typeof DashboardSettingsAccountRoute;
   "/dashboard/settings/api-keys": typeof DashboardSettingsApiKeysRoute;
-  "/dashboard/settings/danger-zone": typeof DashboardSettingsDangerZoneRoute;
   "/dashboard/settings/job-search": typeof DashboardSettingsJobSearchRoute;
   "/dashboard/settings/preferences": typeof DashboardSettingsPreferencesRoute;
   "/dashboard/settings/profile": typeof DashboardSettingsProfileRoute;
@@ -246,8 +246,8 @@ export interface FileRoutesByTo {
   "/auth": typeof AuthIndexRoute;
   "/dashboard": typeof DashboardIndexRoute;
   "/dashboard/settings/integrations": typeof DashboardSettingsIntegrationsRouteRoute;
+  "/dashboard/settings/account": typeof DashboardSettingsAccountRoute;
   "/dashboard/settings/api-keys": typeof DashboardSettingsApiKeysRoute;
-  "/dashboard/settings/danger-zone": typeof DashboardSettingsDangerZoneRoute;
   "/dashboard/settings/job-search": typeof DashboardSettingsJobSearchRoute;
   "/dashboard/settings/preferences": typeof DashboardSettingsPreferencesRoute;
   "/dashboard/settings/profile": typeof DashboardSettingsProfileRoute;
@@ -279,8 +279,8 @@ export interface FileRoutesById {
   "/auth/": typeof AuthIndexRoute;
   "/dashboard/": typeof DashboardIndexRoute;
   "/dashboard/settings/integrations": typeof DashboardSettingsIntegrationsRouteRoute;
+  "/dashboard/settings/account": typeof DashboardSettingsAccountRoute;
   "/dashboard/settings/api-keys": typeof DashboardSettingsApiKeysRoute;
-  "/dashboard/settings/danger-zone": typeof DashboardSettingsDangerZoneRoute;
   "/dashboard/settings/job-search": typeof DashboardSettingsJobSearchRoute;
   "/dashboard/settings/preferences": typeof DashboardSettingsPreferencesRoute;
   "/dashboard/settings/profile": typeof DashboardSettingsProfileRoute;
@@ -312,8 +312,8 @@ export interface FileRouteTypes {
     | "/auth/"
     | "/dashboard/"
     | "/dashboard/settings/integrations"
+    | "/dashboard/settings/account"
     | "/dashboard/settings/api-keys"
-    | "/dashboard/settings/danger-zone"
     | "/dashboard/settings/job-search"
     | "/dashboard/settings/preferences"
     | "/dashboard/settings/profile"
@@ -339,8 +339,8 @@ export interface FileRouteTypes {
     | "/auth"
     | "/dashboard"
     | "/dashboard/settings/integrations"
+    | "/dashboard/settings/account"
     | "/dashboard/settings/api-keys"
-    | "/dashboard/settings/danger-zone"
     | "/dashboard/settings/job-search"
     | "/dashboard/settings/preferences"
     | "/dashboard/settings/profile"
@@ -371,8 +371,8 @@ export interface FileRouteTypes {
     | "/auth/"
     | "/dashboard/"
     | "/dashboard/settings/integrations"
+    | "/dashboard/settings/account"
     | "/dashboard/settings/api-keys"
-    | "/dashboard/settings/danger-zone"
     | "/dashboard/settings/job-search"
     | "/dashboard/settings/preferences"
     | "/dashboard/settings/profile"
@@ -555,6 +555,13 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof DashboardResumesIndexRouteImport;
       parentRoute: typeof DashboardRouteRoute;
     };
+    "/dashboard/settings/account": {
+      id: "/dashboard/settings/account";
+      path: "/settings/account";
+      fullPath: "/dashboard/settings/account";
+      preLoaderRoute: typeof DashboardSettingsAccountRouteImport;
+      parentRoute: typeof DashboardRouteRoute;
+    };
     "/dashboard/settings/api-keys": {
       id: "/dashboard/settings/api-keys";
       path: "/settings/api-keys";
@@ -562,13 +569,6 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof DashboardSettingsApiKeysRouteImport;
       parentRoute: typeof DashboardRouteRoute;
     };
-    "/dashboard/settings/danger-zone": {
-      id: "/dashboard/settings/danger-zone";
-      path: "/settings/danger-zone";
-      fullPath: "/dashboard/settings/danger-zone";
-      preLoaderRoute: typeof DashboardSettingsDangerZoneRouteImport;
-      parentRoute: typeof DashboardRouteRoute;
-    };
     "/dashboard/settings/integrations": {
       id: "/dashboard/settings/integrations";
       path: "/settings/integrations";
@@ -664,8 +664,8 @@ const AuthRouteRouteWithChildren = AuthRouteRoute._addFileChildren(
 interface DashboardRouteRouteChildren {
   DashboardIndexRoute: typeof DashboardIndexRoute;
   DashboardSettingsIntegrationsRouteRoute: typeof DashboardSettingsIntegrationsRouteRoute;
+  DashboardSettingsAccountRoute: typeof DashboardSettingsAccountRoute;
   DashboardSettingsApiKeysRoute: typeof DashboardSettingsApiKeysRoute;
-  DashboardSettingsDangerZoneRoute: typeof DashboardSettingsDangerZoneRoute;
   DashboardSettingsJobSearchRoute: typeof DashboardSettingsJobSearchRoute;
   DashboardSettingsPreferencesRoute: typeof DashboardSettingsPreferencesRoute;
   DashboardSettingsProfileRoute: typeof DashboardSettingsProfileRoute;
@@ -678,8 +678,8 @@ const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
   DashboardIndexRoute: DashboardIndexRoute,
   DashboardSettingsIntegrationsRouteRoute:
     DashboardSettingsIntegrationsRouteRoute,
+  DashboardSettingsAccountRoute: DashboardSettingsAccountRoute,
   DashboardSettingsApiKeysRoute: DashboardSettingsApiKeysRoute,
-  DashboardSettingsDangerZoneRoute: DashboardSettingsDangerZoneRoute,
   DashboardSettingsJobSearchRoute: DashboardSettingsJobSearchRoute,
   DashboardSettingsPreferencesRoute: DashboardSettingsPreferencesRoute,
   DashboardSettingsProfileRoute: DashboardSettingsProfileRoute,

apps/web/src/routes/dashboard/-components/sidebar.tsx

@@ -12,7 +12,7 @@ import {
 	ReadCvLogoIcon,
 	ShieldCheckIcon,
 	UserCircleIcon,
-	WarningIcon,
+	UserGearIcon,
 } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
 import { AnimatePresence, m } from "motion/react";
@@ -90,9 +90,9 @@ const settingsSidebarItems = [
 		href: "/dashboard/settings/integrations",
 	},
 	{
-		icon: <WarningIcon />,
-		label: msg`Danger Zone`,
-		href: "/dashboard/settings/danger-zone",
+		icon: <UserGearIcon />,
+		label: msg`Account`,
+		href: "/dashboard/settings/account",
 	},
 ] as const satisfies SidebarItem[];
 

apps/web/src/routes/dashboard/settings/account.tsx

@@ -1,22 +1,22 @@
 import { t } from "@lingui/core/macro";
-import { WarningIcon } from "@phosphor-icons/react";
+import { UserGearIcon } from "@phosphor-icons/react";
 import { createFileRoute } from "@tanstack/react-router";
 import { Separator } from "@reactive-resume/ui/components/separator";
-import { DangerZoneSettingsPage } from "@/features/settings/pages/danger-zone";
+import { AccountSettingsPage } from "@/features/settings/pages/account";
 import { DashboardHeader } from "../-components/header";
 
-export const Route = createFileRoute("/dashboard/settings/danger-zone")({
+export const Route = createFileRoute("/dashboard/settings/account")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
 	return (
 		<div className="space-y-4">
-			<DashboardHeader icon={WarningIcon} title={t`Danger Zone`} />
+			<DashboardHeader icon={UserGearIcon} title={t`Account`} />
 
 			<Separator />
 
-			<DangerZoneSettingsPage />
+			<AccountSettingsPage />
 		</div>
 	);
 }