Squashed commit of the following:

commit b2b0470a1d9267d042ec0ac66523c6635bf5b199
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 13:13:38 2026 +0200

    chore: update .gitignore to include .vite-hooks and modify pnpm-lock.yaml for dependencies

commit d28fadb5cd8706c874e616102878b4a394ec84c1
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 13:08:04 2026 +0200

    fix: remove timestamp conflict guard

commit c6998d9dbab19d09d3c8054feef1d2e4117555eb
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 12:11:51 2026 +0200

    chore(release): v5.1.5

commit f33d168711804880e1f12e88d24290aae16cc258
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 11:58:35 2026 +0200

    revert: compose.yml

commit d961e6535811a10c335525fb33a08d03e737278d
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 11:58:08 2026 +0200

    refactor(agent): replace 'revert' terminology with 'restore' for clarity, resolves #3086

commit 17f351171be218e33f01c469d95e4164d4c8dc57
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 11:10:41 2026 +0200

    refactor(pdf): simplify sidebar section filtering and update summary feature logic

commit d55179b9d76879e3204de185e8b53fadd0a107ed
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 09:53:37 2026 +0200

    chore: update pnpm-lock.yaml and turbo.json

commit 7cade6980e1a04352536bd44ef773f338c4ef599
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 09:38:30 2026 +0200

    fix(polyfill): add tested polyfill for Map Upsert methods

commit 26d175bb9c53d93225d1e907678445252c13d660
Merge: 1cf33dc6c 5b1297fa2
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 09:23:29 2026 +0200

    Merge remote-tracking branch 'origin/main' into feat/explore-hono-orpc-migration

    # Conflicts:
    #	packages/api/src/services/agent-url.ts
    #	packages/runtime-externals/package.json

commit 1cf33dc6c9d81735730ad656e16dab6501c6d6a1
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Tue May 19 09:22:12 2026 +0200

    chore: preserve branch changes before main sync

commit b380a4b00fdbcdd81ff4f8ef72b330fd027ccda5
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Mon May 18 07:50:28 2026 +0200

    chore: lot of fixes for monorepo migration

commit 8fcf0ec64e1c29572ebaff494338368bfcf75760
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 13:57:17 2026 +0200

    chore: update knip version and refine web app routing with new SEO endpoints

commit 234e68086ff15610a93877354c98e2c020364533
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 12:10:06 2026 +0200

    refactor(auth): update OAuth routes to include API prefix and remove unused schema endpoint

commit 91c84b9a8496b0ce21d71cae9f8b2a027638c9ac
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 11:54:29 2026 +0200

    chore: update dependencies and enhance PWA metadata in web app

commit 150117d4a5a9dd6cd92c64891aad8cae90f6a7af
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 11:12:35 2026 +0200

    docs: revise manifest-only pwa testing scope

commit 6b939a55661aec9dd8122b184e4b60a5c7325fb5
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 11:11:33 2026 +0200

    docs: add manifest-only pwa design

commit 1422e1fc96c400948b273210a1067251087d15d4
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 11:05:04 2026 +0200

    chore(dev): simplify server proxy config

commit bc2ff5a9f6fda41e6c40333c8f163aa23a6c5e48
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 11:04:50 2026 +0200

    docs: add unsafe oauth redirect plan

commit 445359ebe9b96c1515bf1c4c3f73ba8a8448ec12
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 11:04:34 2026 +0200

    feat(auth): add unsafe oauth redirect flag

commit 73fffdd24598e56b2793f7657919bc794835892e
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 10:55:02 2026 +0200

    docs: design unsafe oauth redirect flag

commit c0066aa19c15fc8a4c8e5179ed49889c117519f4
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 10:22:04 2026 +0200

    chore: update translation source paths

commit 9033da082418d252aafd6c2eed72f71f014be3d9
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 10:09:25 2026 +0200

    refactor(arch): react spa + hono migration

commit 6f27936c11bda895977dc63ee550c3346d4ce24b
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Fri May 15 01:10:47 2026 +0200

    docs: add docker nightly tagging design

commit ecc1fd9a88a0ee1dca2f1977dfc17f74527fe1da
Author: Amruth Pillai <im.amruth@gmail.com>
Date:   Thu May 14 20:05:44 2026 +0200

    feat: migrate to hono spa server

apps/web/src/features/settings/authentication/components/hooks.tsx

@@ -0,0 +1,166 @@
+import type { AuthProvider } from "@reactive-resume/auth/types";
+import type { ReactNode } from "react";
+import { t } from "@lingui/core/macro";
+import {
+	FingerprintIcon,
+	GithubLogoIcon,
+	GoogleLogoIcon,
+	LinkedinLogoIcon,
+	PasswordIcon,
+	VaultIcon,
+} from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { toast } from "sonner";
+import { match } from "ts-pattern";
+import { authClient } from "@/libs/auth/client";
+import { getReadableErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+
+/**
+ * Get the display name for a social provider
+ */
+export function getProviderName(providerId: AuthProvider): string {
+	return match(providerId)
+		.with("credential", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "Password",
+			}),
+		)
+		.with("passkey", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "Passkey",
+			}),
+		)
+		.with("google", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "Google",
+			}),
+		)
+		.with("github", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "GitHub",
+			}),
+		)
+		.with("linkedin", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "LinkedIn",
+			}),
+		)
+		.with("custom", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "Custom OAuth",
+			}),
+		)
+		.exhaustive();
+}
+
+/**
+ * Get the icon component for a social provider
+ */
+export function getProviderIcon(providerId: AuthProvider): ReactNode {
+	return match(providerId)
+		.with("credential", () => <PasswordIcon />)
+		.with("passkey", () => <FingerprintIcon />)
+		.with("google", () => <GoogleLogoIcon />)
+		.with("github", () => <GithubLogoIcon />)
+		.with("linkedin", () => <LinkedinLogoIcon />)
+		.with("custom", () => <VaultIcon />)
+		.exhaustive();
+}
+
+/**
+ * Hook to fetch and manage authentication accounts
+ */
+export function useAuthAccounts() {
+	const { data: accounts } = useQuery({
+		queryKey: ["auth", "accounts"],
+		queryFn: () => authClient.listAccounts(),
+		select: ({ data }) => data ?? [],
+	});
+
+	const getAccountByProviderId = useCallback(
+		(providerId: string) => accounts?.find((account) => account.providerId === providerId),
+		[accounts],
+	);
+
+	const hasAccount = useCallback(
+		(providerId: string) => !!getAccountByProviderId(providerId),
+		[getAccountByProviderId],
+	);
+
+	return {
+		accounts,
+		hasAccount,
+		getAccountByProviderId,
+	};
+}
+
+/**
+ * Hook to manage authentication provider linking/unlinking
+ */
+export function useAuthProviderActions() {
+	const link = useCallback(async (provider: AuthProvider) => {
+		const providerName = getProviderName(provider);
+		const toastId = toast.loading(t`Linking your ${providerName} account...`);
+
+		const { error } = await authClient.linkSocial({ provider, callbackURL: "/dashboard/settings/authentication" });
+
+		if (error) {
+			toast.error(
+				getReadableErrorMessage(
+					error,
+					t({
+						comment: "Fallback toast when linking a social authentication provider fails",
+						message: "Failed to link provider. Please try again.",
+					}),
+				),
+				{ id: toastId },
+			);
+			return;
+		}
+
+		toast.dismiss(toastId);
+	}, []);
+
+	const unlink = useCallback(async (provider: AuthProvider, accountId: string) => {
+		const providerName = getProviderName(provider);
+		const toastId = toast.loading(t`Unlinking your ${providerName} account...`);
+
+		const { error } = await authClient.unlinkAccount({ providerId: provider, accountId });
+
+		if (error) {
+			toast.error(
+				getReadableErrorMessage(
+					error,
+					t({
+						comment: "Fallback toast when unlinking a social authentication provider fails",
+						message: "Failed to unlink provider. Please try again.",
+					}),
+				),
+				{ id: toastId },
+			);
+			return;
+		}
+
+		toast.dismiss(toastId);
+	}, []);
+
+	return { link, unlink };
+}
+
+/**
+ * Hook to get enabled social providers for the current user
+ * Possible values: "credential", "google", "github", "linkedin", "custom"
+ */
+export function useEnabledProviders() {
+	const { data: enabledProviders = [] } = useQuery(orpc.auth.providers.list.queryOptions());
+
+	return { enabledProviders };
+}

apps/web/src/features/settings/authentication/components/passkeys.tsx

@@ -0,0 +1,172 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { KeyIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { motion } from "motion/react";
+import { toast } from "sonner";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { usePrompt } from "@/hooks/use-prompt";
+import { authClient } from "@/libs/auth/client";
+import { getReadableErrorMessage } from "@/libs/error-message";
+
+export function PasskeysSection() {
+	const queryClient = useQueryClient();
+	const prompt = usePrompt();
+
+	const { data: passkeys = [] } = useQuery({
+		queryKey: ["auth", "passkeys"],
+		queryFn: () => authClient.passkey.listUserPasskeys(),
+		select: ({ data }) => data ?? [],
+	});
+
+	const registerPasskeyMutation = useMutation({
+		mutationFn: async () => {
+			return await authClient.passkey.addPasskey();
+		},
+		onSuccess: async ({ data, error }) => {
+			if (error) {
+				toast.error(
+					getReadableErrorMessage(
+						error,
+						t({
+							comment: "Fallback toast when passkey registration fails",
+							message: "Failed to register passkey. Please try again.",
+						}),
+					),
+				);
+				return;
+			}
+
+			toast.success(t`Passkey registered successfully.`);
+			await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+
+			const name = await prompt(t`Enter a name for your passkey.`, {
+				description: t`This will help you identify it later, if you plan to have multiple passkeys.`,
+				defaultValue: "",
+				confirmText: t({
+					comment: "Passkey rename prompt confirm action in authentication settings",
+					message: "Save",
+				}),
+			});
+			if (name === null) return;
+
+			const passkeyId = typeof data?.id === "string" ? data.id : null;
+			const passkeyName = name.trim();
+			if (!passkeyId || passkeyName.length === 0) return;
+
+			const { error: renameError } = await authClient.passkey.updatePasskey({ id: passkeyId, name: passkeyName });
+			if (renameError) {
+				toast.error(
+					getReadableErrorMessage(
+						renameError,
+						t({
+							comment: "Fallback toast when renaming a passkey fails",
+							message: "Failed to rename passkey. Please try again.",
+						}),
+					),
+				);
+				return;
+			}
+
+			await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+		},
+		onError: () => {
+			toast.error(t`Failed to register passkey. Please try again.`);
+		},
+	});
+
+	const deletePasskeyMutation = useMutation({
+		mutationFn: async (id: string) => {
+			return await authClient.passkey.deletePasskey({ id });
+		},
+		onSuccess: async ({ error }) => {
+			if (error) {
+				toast.error(
+					getReadableErrorMessage(
+						error,
+						t({
+							comment: "Fallback toast when deleting a passkey fails",
+							message: "Failed to delete passkey. Please try again.",
+						}),
+					),
+				);
+				return;
+			}
+
+			toast.success(t`Passkey deleted successfully.`);
+			await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+		},
+		onError: () => {
+			toast.error(t`Failed to delete passkey. Please try again.`);
+		},
+	});
+
+	const handleRegisterPasskey = () => {
+		if (registerPasskeyMutation.isPending) return;
+		registerPasskeyMutation.mutate();
+	};
+
+	const handleDeletePasskey = (id: string) => {
+		if (deletePasskeyMutation.isPending) return;
+		deletePasskeyMutation.mutate(id);
+	};
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: 0.3, ease: "easeOut" }}
+			className="will-change-[transform,opacity]"
+		>
+			<Separator />
+
+			<div className="mt-4 grid gap-3">
+				<div className="flex flex-wrap items-center justify-between gap-3">
+					<h2 className="flex items-center gap-x-3 font-medium text-base">
+						<KeyIcon />
+						<Trans>Passkeys</Trans>
+					</h2>
+
+					<Button variant="outline" onClick={handleRegisterPasskey} disabled={registerPasskeyMutation.isPending}>
+						<PlusIcon />
+						<Trans>Register New Device</Trans>
+					</Button>
+				</div>
+
+				{passkeys.length === 0 && (
+					<p className="text-muted-foreground text-sm">
+						<Trans>No passkeys registered yet.</Trans>
+					</p>
+				)}
+
+				{passkeys.length > 0 && (
+					<div className="grid gap-2">
+						{passkeys.map((passkey) => {
+							return (
+								<div
+									key={passkey.id}
+									className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/40 px-3 py-2"
+								>
+									<p className="truncate font-medium text-sm">{passkey.name ?? t`Unnamed passkey`}</p>
+
+									<div className="flex items-center gap-2">
+										<Button
+											variant="destructive"
+											size="sm"
+											onClick={() => handleDeletePasskey(passkey.id)}
+											disabled={deletePasskeyMutation.isPending}
+										>
+											<TrashIcon />
+											<Trans comment="Passkey row action to remove the selected passkey">Delete</Trans>
+										</Button>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		</motion.div>
+	);
+}

apps/web/src/features/settings/authentication/components/password.tsx

@@ -0,0 +1,73 @@
+import { Trans } from "@lingui/react/macro";
+import { PasswordIcon, PencilSimpleLineIcon } from "@phosphor-icons/react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { motion } from "motion/react";
+import { useCallback, useMemo } from "react";
+import { match } from "ts-pattern";
+import { Button } from "@reactive-resume/ui/components/button";
+import { useDialogStore } from "@/dialogs/store";
+import { useAuthAccounts } from "./hooks";
+
+export function PasswordSection() {
+	const navigate = useNavigate();
+	const { openDialog } = useDialogStore();
+	const { hasAccount } = useAuthAccounts();
+
+	const hasPassword = useMemo(() => hasAccount("credential"), [hasAccount]);
+
+	const handleUpdatePassword = useCallback(() => {
+		if (hasPassword) {
+			openDialog("auth.change-password", undefined);
+		} else {
+			void navigate({ to: "/auth/forgot-password" });
+		}
+	}, [hasPassword, navigate, openDialog]);
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: 0.1, ease: "easeOut" }}
+			className="flex items-center justify-between gap-x-4 will-change-[transform,opacity]"
+		>
+			<h2 className="flex items-center gap-x-3 font-medium text-base">
+				<PasswordIcon />
+				<Trans>Password</Trans>
+			</h2>
+
+			{match(hasPassword)
+				.with(true, () => (
+					<motion.div
+						className="will-change-transform"
+						whileHover={{ y: -1, scale: 1.01 }}
+						whileTap={{ scale: 0.99 }}
+						transition={{ duration: 0.14, ease: "easeOut" }}
+					>
+						<Button variant="outline" onClick={handleUpdatePassword}>
+							<PencilSimpleLineIcon />
+							<Trans>Update Password</Trans>
+						</Button>
+					</motion.div>
+				))
+				.with(false, () => (
+					<motion.div
+						className="will-change-transform"
+						whileHover={{ y: -1, scale: 1.01 }}
+						whileTap={{ scale: 0.99 }}
+						transition={{ duration: 0.14, ease: "easeOut" }}
+					>
+						<Button
+							variant="outline"
+							nativeButton={false}
+							render={
+								<Link to="/auth/forgot-password">
+									<Trans>Set Password</Trans>
+								</Link>
+							}
+						/>
+					</motion.div>
+				))
+				.exhaustive()}
+		</motion.div>
+	);
+}

apps/web/src/features/settings/authentication/components/social-provider.tsx

@@ -0,0 +1,84 @@
+import type { AuthProvider } from "@reactive-resume/auth/types";
+import { Trans } from "@lingui/react/macro";
+import { LinkBreakIcon, LinkIcon } from "@phosphor-icons/react";
+import { motion } from "motion/react";
+import { useCallback, useMemo } from "react";
+import { match } from "ts-pattern";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { getProviderIcon, getProviderName, useAuthAccounts, useAuthProviderActions } from "./hooks";
+
+type SocialProviderSectionProps = {
+	provider: AuthProvider;
+	name?: string;
+	animationDelay?: number;
+};
+
+export function SocialProviderSection({ provider, name, animationDelay = 0 }: SocialProviderSectionProps) {
+	const { link, unlink } = useAuthProviderActions();
+	const { hasAccount, getAccountByProviderId } = useAuthAccounts();
+
+	const providerName = useMemo(() => name ?? getProviderName(provider), [name, provider]);
+	const providerIcon = useMemo(() => getProviderIcon(provider), [provider]);
+
+	const account = useMemo(() => getAccountByProviderId(provider), [getAccountByProviderId, provider]);
+	const isConnected = useMemo(() => hasAccount(provider), [hasAccount, provider]);
+
+	const handleLink = useCallback(async () => {
+		await link(provider);
+	}, [link, provider]);
+
+	const handleUnlink = useCallback(async () => {
+		if (!account?.accountId) return;
+		await unlink(provider, account.accountId);
+	}, [account, unlink, provider]);
+
+	return (
+		<motion.div
+			className="will-change-[transform,opacity]"
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: animationDelay, ease: "easeOut" }}
+		>
+			<Separator />
+
+			<div className="mt-4 flex items-center justify-between gap-x-4">
+				<h2 className="flex items-center gap-x-3 font-medium text-base">
+					{providerIcon}
+					{providerName}
+				</h2>
+
+				{match(isConnected)
+					.with(true, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleUnlink}>
+								<LinkBreakIcon />
+								<Trans comment="Authentication settings action to unlink a connected social login provider">
+									Disconnect
+								</Trans>
+							</Button>
+						</motion.div>
+					))
+					.with(false, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleLink}>
+								<LinkIcon />
+								<Trans comment="Authentication settings action to link a social login provider">Connect</Trans>
+							</Button>
+						</motion.div>
+					))
+					.exhaustive()}
+			</div>
+		</motion.div>
+	);
+}

apps/web/src/features/settings/authentication/components/two-factor.tsx

@@ -0,0 +1,76 @@
+import { Trans } from "@lingui/react/macro";
+import { KeyIcon, LockOpenIcon, ToggleLeftIcon, ToggleRightIcon } from "@phosphor-icons/react";
+import { motion } from "motion/react";
+import { useCallback, useMemo } from "react";
+import { match } from "ts-pattern";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { useDialogStore } from "@/dialogs/store";
+import { authClient } from "@/libs/auth/client";
+import { useAuthAccounts } from "./hooks";
+
+export function TwoFactorSection() {
+	const { openDialog } = useDialogStore();
+	const { hasAccount } = useAuthAccounts();
+	const { data: session } = authClient.useSession();
+
+	const hasPassword = useMemo(() => hasAccount("credential"), [hasAccount]);
+	const hasTwoFactor = useMemo(() => session?.user.twoFactorEnabled ?? false, [session]);
+
+	const handleTwoFactorAction = useCallback(() => {
+		if (hasTwoFactor) {
+			openDialog("auth.two-factor.disable", undefined);
+		} else {
+			openDialog("auth.two-factor.enable", undefined);
+		}
+	}, [hasTwoFactor, openDialog]);
+
+	if (!hasPassword) return null;
+
+	return (
+		<motion.div
+			className="will-change-[transform,opacity]"
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: 0.2, ease: "easeOut" }}
+		>
+			<Separator />
+
+			<div className="mt-4 flex items-center justify-between gap-x-4">
+				<h2 className="flex items-center gap-x-3 font-medium text-base">
+					{hasTwoFactor ? <LockOpenIcon /> : <KeyIcon />}
+					<Trans>Two-Factor Authentication</Trans>
+				</h2>
+
+				{match(hasTwoFactor)
+					.with(true, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleTwoFactorAction}>
+								<ToggleLeftIcon />
+								<Trans>Disable 2FA</Trans>
+							</Button>
+						</motion.div>
+					))
+					.with(false, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleTwoFactorAction}>
+								<ToggleRightIcon />
+								<Trans>Enable 2FA</Trans>
+							</Button>
+						</motion.div>
+					))
+					.exhaustive()}
+			</div>
+		</motion.div>
+	);
+}