refactor(web): move toast call sites to the new component

Swaps sonner's toast.success/error/loading/dismiss for the new toast.add({ type,
description }) and toast.close across dialogs, auth pages, the builder, the
dashboard and the applications views. Behaviour is unchanged.
This commit is contained in:
Amruth Pillai
2026-08-17 22:32:32 +02:00
parent 170550ed59
commit 23ceee2148
51 changed files with 472 additions and 431 deletions
+19 -17
View File
@@ -6,7 +6,6 @@ import { useStore } from "@tanstack/react-form";
import { useRouter } from "@tanstack/react-router";
import { QRCodeSVG } from "qrcode.react";
import { useState } from "react";
import { toast } from "sonner";
import { match } from "ts-pattern";
import { useToggle } from "usehooks-ts";
import z from "zod";
@@ -20,6 +19,7 @@ import {
} from "@reactive-resume/ui/components/dialog";
import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
import { Input } from "@reactive-resume/ui/components/input";
import { toast } from "@reactive-resume/ui/components/toast";
import { useFormBlocker } from "@/hooks/use-form-blocker";
import { authClient } from "@/libs/auth/client";
import { getReadableErrorMessage } from "@/libs/error-message";
@@ -58,7 +58,7 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
defaultValues: { password: "" },
validators: { onSubmit: enableFormSchema },
onSubmit: async ({ value }) => {
const toastId = toast.loading(t`Enabling two-factor authentication…`);
const toastId = toast.add({ type: "loading", description: t`Enabling two-factor authentication…` });
const { data, error } = await authClient.twoFactor.enable({
password: value.password,
@@ -66,16 +66,17 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
});
if (error) {
toast.error(
getReadableErrorMessage(
toast.add({
type: "error",
description: getReadableErrorMessage(
error,
t({
comment: "Fallback toast when enabling two-factor authentication fails",
message: "Failed to enable two-factor authentication. Please try again.",
}),
),
{ id: toastId },
);
id: toastId,
});
return;
}
@@ -83,9 +84,9 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
setTotpUri(data.totpURI);
setBackupCodes(data.backupCodes);
setStep("verify");
toast.dismiss(toastId);
toast.close(toastId);
} else {
toast.error(t`Failed to setup two-factor authentication.`, { id: toastId });
toast.add({ type: "error", description: t`Failed to setup two-factor authentication.`, id: toastId });
}
},
});
@@ -94,25 +95,26 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
defaultValues: { code: "" },
validators: { onSubmit: verifyFormSchema },
onSubmit: async ({ value }) => {
const toastId = toast.loading(t`Verifying code…`);
const toastId = toast.add({ type: "loading", description: t`Verifying code…` });
const { error } = await authClient.twoFactor.verifyTotp({ code: value.code });
if (error) {
toast.error(
getReadableErrorMessage(
toast.add({
type: "error",
description: getReadableErrorMessage(
error,
t({
comment: "Fallback toast when verifying two-factor setup code fails",
message: "Failed to verify your code. Please try again.",
}),
),
{ id: toastId },
);
id: toastId,
});
return;
}
toast.dismiss(toastId);
toast.close(toastId);
setStep("backup");
},
});
@@ -131,7 +133,7 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
});
const onConfirmBackup = () => {
toast.success(t`Two-factor authentication has been setup successfully.`);
toast.add({ type: "success", description: t`Two-factor authentication has been setup successfully.` });
void router.invalidate();
closeDialog();
onReset();
@@ -150,13 +152,13 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
const secret = extractSecretFromTotpUri(totpUri);
if (!secret) return;
await navigator.clipboard.writeText(secret);
toast.success(t`Secret copied to clipboard.`);
toast.add({ type: "success", description: t`Secret copied to clipboard.` });
};
const handleCopyBackupCodes = async () => {
if (!backupCodes) return;
await navigator.clipboard.writeText(backupCodes.join("\n"));
toast.success(t`Backup codes copied to clipboard.`);
toast.add({ type: "success", description: t`Backup codes copied to clipboard.` });
};
const handleDownloadBackupCodes = () => {