Dashboard settings form QOL improvements

src/app/dashboard/settings/settings-form.tsx

@@ -187,15 +187,18 @@ export default function SettingsForm({
           )}
         />
 
-        <div>
+        <div className="inline-flex gap-x-4">
           <CancelConfirmModal
             setShow={setShowConfirmAlert}
             show={showConfirmAlert}
             reset={handleReset}
-            isDirty={formState.isDirty}
+            isDisabled={formState.isSubmitting || pending || !formState.isDirty}
           />
 
-          <Button type="submit" disabled={formState.isSubmitting || pending}>
+          <Button
+            type="submit"
+            disabled={formState.isSubmitting || pending || !formState.isDirty}
+          >
             {formState.isSubmitting || pending ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />

src/app/layout.tsx

@@ -8,7 +8,7 @@ import { Toaster } from "~/components/ui/toaster";
 import { siteConfig } from "~/config/site";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], display: "swap" });
 
 export const metadata: Metadata = {
   title: {

src/components/layout/cancel-confirm-modal.tsx

@@ -16,24 +16,19 @@ interface CancelConfirmModalProps {
   show: boolean;
   setShow: (show: boolean) => void;
   reset: () => void;
-  isDirty: boolean;
+  isDisabled: boolean;
 }
 
 export default function CancelConfirmModal({
   show,
   setShow,
   reset,
-  isDirty,
+  isDisabled,
 }: CancelConfirmModalProps) {
   return (
     <AlertDialog open={show} onOpenChange={setShow}>
       <AlertDialogTrigger asChild>
-        <Button
-          variant="outline"
-          className="mr-4 text-destructive hover:text-destructive"
-          type="reset"
-          disabled={!isDirty}
-        >
+        <Button variant="destructive" type="reset" disabled={isDisabled}>
           Cancel
         </Button>
       </AlertDialogTrigger>

src/components/layout/image-upload-modal.tsx

@@ -7,7 +7,6 @@ import type { FileWithPath } from "react-dropzone";
 import { useDropzone } from "react-dropzone";
 import { type ControllerRenderProps } from "react-hook-form";
 import { generateClientDropzoneAccept } from "uploadthing/client";
-import { type SettingsValues } from "~/types";
 import {
   Dialog,
   DialogContent,
@@ -18,6 +17,7 @@ import {
 } from "~/components/ui/dialog";
 import { useUploadThing } from "~/lib/uploadthing";
 import { hasFileNameSpaces } from "~/lib/utils";
+import { type SettingsValues } from "~/types";
 import Icons from "../shared/icons";
 import { Button } from "../ui/button";
 import { toast } from "../ui/use-toast";
@@ -99,6 +99,7 @@ export default function ImageUploadModal({
       <DialogTrigger asChild>
         <div className="absolute left-0 top-0 flex h-28 w-28 cursor-pointer items-center justify-center rounded-full bg-primary/40 text-white opacity-0 group-hover:opacity-100 dark:bg-secondary/40">
           <Button
+            type="button"
             size="sm"
             variant="ghost"
             className="text-xs hover:bg-transparent hover:text-white"
@@ -123,7 +124,7 @@ export default function ImageUploadModal({
                   loading="lazy"
                 />
               </div>
-              <div className=" mt-10">
+              <div className="mt-10">
                 <Button
                   disabled={isUploading}
                   onClick={handleCancel}

src/types/index.ts

@@ -11,7 +11,7 @@ export type CurrentUser = {
 export interface payload {
   name: string;
   email: string;
-  shortBio: string;
+  shortBio?: string;
   image?: string;
 }
 
@@ -28,16 +28,7 @@ export const settingsSchema = z.object({
       message: "Name must be at most 50 characters.",
     }),
   email: z.string().email(),
-  shortBio: z
-    .string({
-      required_error: "Please type a short bio.",
-    })
-    .max(150, {
-      message: "Short bio must be at most 150 characters.",
-    })
-    .min(10, {
-      message: "Short bio must be at least 10 characters.",
-    }),
+  shortBio: z.string().optional(),
 });
 
 export type SettingsValues = z.infer<typeof settingsSchema>;