update and some fixes

RiskyMH · Jan 23, 2025 · 7fbee67 · 7fbee67
1 parent c62fb68
commit 7fbee67
Show file tree

Hide file tree

Showing 16 changed files with 341 additions and 320 deletions.
diff --git a/apps/web/app/(auth)/login/form.client.tsx b/apps/web/app/(auth)/login/form.client.tsx
@@ -21,6 +21,7 @@ import { type FormEvent, useState, useTransition } from "react";
 import { toast } from "sonner";
 import signIn, { resetPassword } from "./action";
 import PasskeysLogin from "./passkeys.client";
+import catchRedirectError from "@/utils/no-throw-on-redirect.client";
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -35,7 +36,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
         setLoading(true);
         startTransition(async () => {
             const formData = new FormData(event.target as HTMLFormElement);
-            const signInResult = await signIn(formData);
+            const signInResult = await signIn(formData).catch(catchRedirectError);
 
             if (signInResult?.error) {
                 // @ts-expect-error yay types
@@ -118,7 +119,7 @@ function ResetPasswordDiag({ username }: { username: string }) {
 
     const resetPasswordAction = async () => {
         startTransition(async () => {
-            const res = await resetPassword(username);
+            const res = await resetPassword(username).catch(catchRedirectError);
             if (res?.error) {
                 toast.error(res.error);
             } else {

diff --git a/apps/web/app/(auth)/login/passkeys.client.tsx b/apps/web/app/(auth)/login/passkeys.client.tsx
@@ -8,6 +8,7 @@ import { useRouter } from "next/navigation";
 import { type TransitionStartFunction, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { signInPasskey } from "./action";
+import catchRedirectError from "@/utils/no-throw-on-redirect.client";
 
 export default function PasskeysLogin({
     transition,
@@ -51,7 +52,7 @@ export default function PasskeysLogin({
                     return void toast.error("No passkey");
                 }
 
-                const signInResult = await signInPasskey(credential);
+                const signInResult = await signInPasskey(credential).catch(catchRedirectError);
 
                 if (signInResult?.error) {
                     setLoading(false);

diff --git a/apps/web/app/(auth)/login/reset/form.client.tsx b/apps/web/app/(auth)/login/reset/form.client.tsx
@@ -9,6 +9,7 @@ import { Loader2 } from "lucide-react";
 import { useTransition } from "react";
 import { toast } from "sonner";
 import { resetPasswordWithToken } from "../action";
+import catchRedirectError from "@/utils/no-throw-on-redirect.client";
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {
     username: string;
@@ -20,7 +21,7 @@ export function UserAuthForm({ className, username, token, ...props }: UserAuthF
 
     async function onSubmit(data: FormData) {
         startTransition(async () => {
-            const signInResult = await resetPasswordWithToken(token, data.get("password") as string);
+            const signInResult = await resetPasswordWithToken(token, data.get("password") as string).catch(catchRedirectError);
 
             if (signInResult?.error) {
                 return void toast.error(signInResult.error);

diff --git a/apps/web/app/(auth)/register/form.client.tsx b/apps/web/app/(auth)/register/form.client.tsx
@@ -9,6 +9,7 @@ import { useRouter } from "next/navigation";
 import { type FormEvent, useTransition } from "react";
 import { toast } from "sonner";
 import signUp from "./action";
+import catchRedirectError from "@/utils/no-throw-on-redirect.client";
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -20,7 +21,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
         event.preventDefault();
         startTransition(async () => {
             const formData = new FormData(event.target as HTMLFormElement);
-            const signUpResult = await signUp(formData);
+            const signUpResult = await signUp(formData).catch(catchRedirectError);
 
             if (signUpResult?.error) {
                 if ("link" in signUpResult && signUpResult.link)

diff --git a/apps/web/app/(email)/mail/[mailbox]/(email-list)/loading.tsx b/apps/web/app/(email)/mail/[mailbox]/(email-list)/loading.tsx
@@ -17,7 +17,7 @@ export default function Loading() {
             {Array.from({ length: 25 }).map((_, i) => (
                 <div
                     key={i}
-                    className="//bg-card flex h-12 w-full animate-pulse gap-3 rounded-md px-4 py-1.5 shadow-sm"
+                    className="//bg-card flex h-12 w-full animate-pulse gap-3 rounded-md px-4 py-1.5"
                 >
                     <span
                         className="m-2 mx-auto inline-block size-4 shrink-0 self-center rounded-full"

diff --git a/apps/web/app/(email)/mail/[mailbox]/components.client.tsx b/apps/web/app/(email)/mail/[mailbox]/components.client.tsx
@@ -19,6 +19,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import type { MouseEvent, PropsWithChildren } from "react";
 import { useEffect, useTransition } from "react";
+import { toast } from "sonner";
 
 export function ClientStar({
     action,
@@ -63,7 +64,7 @@ function EmptyIcon(props: any) {
 const iconMap: Record<string, LucideIcon> = {
     StarIcon: StarIcon,
     BellDotIcon: BellDotIcon,
-    MailUnreadIcon: MailUnreadIcon,
+    MailUnreadIcon: MailUnreadIcon as any,
     Trash2Icon: Trash2Icon,
     ArchiveRestoreIcon: ArchiveRestoreIcon,
     MailOpenIcon: MailOpenIcon,
@@ -165,7 +166,7 @@ export function RefreshButton({ className }: { className?: string }) {
             }}
             className={cn(className, "-m-2 rounded-full p-2 text-muted-foreground hover:text-foreground ")}
         >
-            <RotateCcwIcon className={cn(isPending && "animate-reverse-spin", "size-5 text-muted-foreground")} />
+            <RotateCcwIcon className={cn(isPending && "animate-spin animate-direction-reverse", "size-5 text-muted-foreground")} />
         </Button>
     );
 }

diff --git a/apps/web/app/(email)/mail/[mailbox]/config/components.client.tsx b/apps/web/app/(email)/mail/[mailbox]/config/components.client.tsx
@@ -122,12 +122,20 @@ export function AddCustomDomainForm({
                         <Input className="border-none bg-secondary" value="TXT" id="type" readOnly />
 
                         <Label htmlFor="value">Value</Label>
-                        <Input
-                            className="border-none bg-secondary"
-                            value={`mailbox=${mailboxId}`}
-                            id="value"
-                            readOnly
-                        />
+                        <div className="flex items-center gap-2">
+                            <Input
+                                className="border-none bg-secondary"
+                                value={`mailbox=${mailboxId}`}
+                                id="value"
+                                readOnly
+                            />
+                            <Button size="sm" className="px-3" asChild>
+                                <CopyButton text={`mailbox=${mailboxId}`}>
+                                    <span className="sr-only">Copy</span>
+                                    <CopyIcon className="size-4" />
+                                </CopyButton>
+                            </Button>
+                        </div>
                     </div>
 
                     <div className="flex gap-2 sm:gap-4">

diff --git a/apps/web/app/(email)/mail/[mailbox]/draft/[draft]/editor.client.tsx b/apps/web/app/(email)/mail/[mailbox]/draft/[draft]/editor.client.tsx
@@ -88,6 +88,7 @@ import {
     SmartDrawerTitle,
     SmartDrawerTrigger,
 } from "@/components/ui/smart-drawer";
+import catchRedirectError from "@/utils/no-throw-on-redirect.client";
 
 function getJSON(data?: string) {
     if (!data) return;
@@ -572,7 +573,7 @@ export function SendButton({ sendAction }: { sendAction: (data: FormData) => Pro
         startTransition(async () => {
             const t = toast.loading("Sending your email...");
             const data = new FormData(e.currentTarget?.parentElement?.parentElement as HTMLFormElement);
-            const res = await sendAction(data);
+            const res = await sendAction(data).catch(catchRedirectError);
 
             if (res?.error) {
                 // if (res.link) return void toast.error(res.error + "nooo", { id: t, action: { label: "Learn More 🔗", onClick: () => window.open(res.link, "_blank") } });
@@ -931,7 +932,7 @@ function RecipientPill({
         <div
             className={cn(
                 "flex items-center gap-1 break-all rounded bg-tertiary px-2 py-1 text-sm",
-                mx === null && "outline outline-2 outline-destructive",
+                mx === null && "outline-2 outline-destructive",
             )}
         >
             {/* {mx === null && <span className='bg-destructive rounded-full size-4 flex items-center justify-center text-center text-xs' title="Cant't find email record for domain from DNS">!</span>} */}

diff --git a/apps/web/app/(user)/onboarding/welcome/components.client.tsx b/apps/web/app/(user)/onboarding/welcome/components.client.tsx
@@ -4,6 +4,7 @@ import type { changeBackupEmail } from "@/(user)/actions";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import catchRedirectError from "@/utils/no-throw-on-redirect.client";
 import { cn } from "@/utils/tw";
 import { ChevronRight, Github, Loader2 } from "lucide-react";
 import Link from "next/link";
@@ -27,7 +28,7 @@ export function Page({ githubStars, action }: WelcomePageProps) {
 
     async function actionn(data: FormData) {
         startTransition(async () => {
-            const res = await action(null, data, true);
+            const res = await action(null, data, true).catch(catchRedirectError);
 
             if (res?.error) {
                 return void toast.error(res.error);

diff --git a/apps/web/app/components/icons/mail-unread.tsx b/apps/web/app/components/icons/mail-unread.tsx
@@ -1,55 +1,57 @@
 /** Lucide inspired icon combining "mail" and "monitor-dot" (its dot) */
 
-import { createLucideIcon } from "lucide-react";
+import { cn } from "@/utils/tw";
 
-export const MailUnreadIcon = createLucideIcon("MailUnread", [
-    [
-        "path",
-        {
-            d: "M10.97 12.7 2 7",
-        },
-    ],
-    [
-        "path",
-        {
-            d: "M13 12.713a1.94 1.94 0 0 1-2.06 0",
-        },
-    ],
-    [
-        "path",
-        {
-            d: "m15.5 11-2.47 1.7",
-        },
-    ],
-    [
-        "path",
-        {
-            d: "M22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9.5",
-        },
-    ],
-    [
-        "circle",
-        {
-            cx: "20",
-            cy: "6",
-            r: "3",
-            // fill="currentColor"
-        },
-    ],
-]);
+// import { createLucideIcon } from "lucide-react";
 
-export { MailUnreadIcon as default };
+// export const MailUnreadIcon = createLucideIcon("MailUnreadNew", [
+//     [
+//         "path",
+//         {
+//             d: "M10.97 12.7 2 7",
+//         },
+//     ],
+//     [
+//         "path",
+//         {
+//             d: "M13 12.713a1.94 1.94 0 0 1-2.06 0",
+//         },
+//     ],
+//     [
+//         "path",
+//         {
+//             d: "m15.5 11-2.47 1.7",
+//         },
+//     ],
+//     [
+//         "path",
+//         {
+//             d: "M22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9.5",
+//         },
+//     ],
+//     [
+//         "circle",
+//         {
+//             cx: "20",
+//             cy: "6",
+//             r: "3",
+//             // fill="currentColor"
+//         },
+//     ],
+// ]);
 
-// export default function MailUnreadIcon(props: any) {
-//     return (
-//         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" className={cn("lucide lucide-mail-dot", props.className)}>
-//             <title>Mail Unread</title>
-//             <path d="M10.97 12.7 2 7" />
-//             <path d="M13 12.713a1.94 1.94 0 0 1-2.06 0" />
-//             <path d="m15.5 11-2.47 1.7" />
-//             <path d="M22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9.5" />
-//             {/* <circle cx="20" cy="5.5" r="3" fill="currentColor" /> */}
-//             <circle cx="20" cy="5.5" r="3" />
-//         </svg>
-//     );
-// }
+// export { MailUnreadIcon as default };
+
+export default function MailUnreadIcon(props: any) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="24" height="24" className={cn("lucide lucide-mail-dot", props.className)}>
+            <title>Mail Unread</title>
+            <path d="M10.97 12.7 2 7" />
+            <path d="M13 12.713a1.94 1.94 0 0 1-2.06 0" />
+            <path d="m15.5 11-2.47 1.7" />
+            <path d="M22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9.5" />
+            {/* <circle cx="20" cy="5.5" r="3" fill="currentColor" /> */}
+            <circle cx="20" cy="5.5" r="3" />
+        </svg>
+    );
+}
diff --git a/apps/web/app/components/ui/sonner.tsx b/apps/web/app/components/ui/sonner.tsx
@@ -11,11 +11,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
             className="toaster group"
             toastOptions={{
                 classNames: {
-                    toast: "group toast group-[.toaster]:bg-tertiary group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-                    description: "group-[.toast]:text-muted-foreground",
-                    actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-                    cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-                    error: "!bg-destructive !text-destructive-foreground !border-red-500",
+                    toast: "group toast bg-tertiary group-[.toaster]:bg-tertiary group-[.toaster]:text-foreground group-[.toaster]:border-border! group-[.toaster]:shadow-lg!",
+                    description: "group-[.toast]:text-muted-foreground!",
+                    actionButton: "group-[.toast]:bg-primary! group-[.toast]:text-primary-foreground!",
+                    cancelButton: "group-[.toast]:bg-muted! group-[.toast]:text-muted-foreground!",
+                    error: "bg-destructive! text-destructive-foreground! border-red-500!",
                 },
             }}
             {...props}

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -109,6 +109,14 @@
 	max-width: 1400px;
 }
 
+@utility animate-direction-reverse {
+	animation-direction: reverse;
+}
+
+.toaster {
+	--normal-bg: var(--tertiary) !important
+}
+
 @keyframes fadeIn {
 	0% {
 		opacity: 0;

diff --git a/apps/web/app/utils/no-throw-on-redirect.client.ts b/apps/web/app/utils/no-throw-on-redirect.client.ts
@@ -0,0 +1,7 @@
+import { isRedirectError } from "next/dist/client/components/redirect-error";
+
+
+export default function catchRedirectError(error: unknown) {
+    if (isRedirectError(error)) return
+    throw error
+}