From d912fe7bab6659b479b7fd5cb2b63e029b0f9b9e Mon Sep 17 00:00:00 2001
From: Asel Peiris <peirisasel373@gmail.com>
Date: Sat, 12 Oct 2024 00:29:42 +0530
Subject: [PATCH 1/3] Refactor settings page to include catalyst components
 (#1108)

* Refactor settings page to include catalyst components

* Fixes requested by coderabbitai
---
 app/(app)/settings/_client.tsx      | 622 ++++++++++++++--------------
 components/ui-components/avatar.tsx |   2 +-
 2 files changed, 322 insertions(+), 302 deletions(-)

diff --git a/app/(app)/settings/_client.tsx b/app/(app)/settings/_client.tsx
index bafb4b1b..eb3dd37b 100644
--- a/app/(app)/settings/_client.tsx
+++ b/app/(app)/settings/_client.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Description, Field, Label, Switch } from "@headlessui/react";
+import { useEffect, useState, useRef } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -14,6 +13,16 @@ import { uploadFile } from "@/utils/s3helpers";
 import type { user } from "@/server/db/schema";
 import { Button } from "@/components/ui-components/button";
 import { CheckCheck, Loader2 } from "lucide-react";
+import { Heading } from "@/components/ui-components/heading";
+import { Avatar } from "@/components/ui-components/avatar";
+import { Input } from "@/components/ui-components/input";
+import {
+  ErrorMessage,
+  Field,
+  Label,
+} from "@/components/ui-components/fieldset";
+import { Textarea } from "@/components/ui-components/textarea";
+import { Switch } from "@/components/ui-components/switch";
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
@@ -43,6 +52,7 @@ const Settings = ({ profile }: { profile: User }) => {
     register,
     handleSubmit,
     watch,
+    reset,
     formState: { errors },
   } = useForm<saveSettingsInput>({
     resolver: zodResolver(saveSettingsSchema),
@@ -52,9 +62,6 @@ const Settings = ({ profile }: { profile: User }) => {
     },
   });
 
-  const bio = watch("bio");
-  const username = watch("username");
-
   const { emailNotifications: eNotifications, newsletter } = profile;
 
   const [emailNotifications, setEmailNotifications] = useState(eNotifications);
@@ -62,6 +69,7 @@ const Settings = ({ profile }: { profile: User }) => {
   const [newEmail, setNewEmail] = useState("");
   const [sendForVerification, setSendForVerification] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [emailError, setEmailError] = useState("");
 
   const [profilePhoto, setProfilePhoto] = useState<ProfilePhoto>({
     status: "idle",
@@ -75,6 +83,8 @@ const Settings = ({ profile }: { profile: User }) => {
     api.profile.updateProfilePhotoUrl.useMutation();
   const { mutate: updateEmail } = api.profile.updateEmail.useMutation();
 
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     if (isSuccess) {
       toast.success("Saved");
@@ -164,242 +174,292 @@ const Settings = ({ profile }: { profile: User }) => {
         <div className="text-neutral-700">
           <form onSubmit={handleSubmit(onSubmit)}>
             {/* Profile section */}
-            <div className="px-4 py-6 sm:p-6 lg:pb-8">
-              <div>
-                <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
-                  Profile Settings
-                </h2>
-                <p className="mt-1 text-neutral-600 dark:text-neutral-400">
-                  This information will be displayed publicly so be careful what
-                  you share.
-                </p>
-              </div>
-
+            <div className="flex flex-col px-4 py-6 sm:p-6 lg:pb-8">
               <div>
                 <div>
-                  <div className="mt-6 flex flex-col lg:flex-row">
-                    <div className="flex-grow space-y-6">
-                      <div>
-                        <label htmlFor="name">Full Name</label>
-                        <input
-                          type="text"
-                          {...register("name")}
-                          id="name"
-                          autoComplete="given-name"
+                  <Heading level={1}>Profile Information</Heading>
+                </div>
+
+                {/* Photo upload */}
+
+                <div className="mt-6 flex flex-col lg:flex-row">
+                  <Field className="flex w-full flex-row">
+                    {/* Container for Label and Subheading */}
+                    <div className="flex w-full flex-col">
+                      <Label>Profile picture</Label>
+                      <div className="text-xs text-gray-500">
+                        This will be displayed on your public profile
+                      </div>
+                    </div>
+
+                    <div className="flex-start flex w-full flex-row">
+                      <div className="h-16 w-16 lg:block">
+                        <Avatar
+                          square
+                          src={
+                            profilePhoto.status === "error" ||
+                            profilePhoto.status === "loading"
+                              ? undefined
+                              : `${profilePhoto.url}`
+                          }
+                          alt="Profile photo upload section"
+                          className="relative h-16 w-16 overflow-hidden rounded-lg"
                         />
-                        {errors.name && (
-                          <p className="mt-1 text-sm text-red-600">
-                            {`${errors.name.message || "Required"}`}
-                          </p>
-                        )}
                       </div>
 
-                      <div>
-                        <label htmlFor="username">Username</label>
-                        <div className="mt-1 flex shadow-sm">
-                          <span className="mt-1 flex items-center bg-neutral-800 px-3 text-sm font-semibold text-white dark:bg-white dark:text-black">
-                            codu.co/
-                          </span>
-                          <input
-                            type="text"
-                            {...register("username")}
-                            id="username"
-                            autoComplete="username"
-                          />
+                      <div className="ml-4 flex flex-col items-start justify-center">
+                        <Button
+                          color={"dark/white"}
+                          type="button"
+                          className="h-[30px] rounded-md text-xs"
+                          onClick={() => {
+                            fileInputRef.current?.click();
+                          }}
+                          aria-label="Change profile picture"
+                        >
+                          Change avatar
+                        </Button>
+
+                        <Input
+                          type="file"
+                          id="file-input"
+                          name="user-photo"
+                          accept="image/png, image/gif, image/jpeg"
+                          onChange={imageChange}
+                          className="hidden"
+                          ref={fileInputRef}
+                        />
+
+                        <div className="mt-1 text-xs text-gray-500">
+                          JPG, GIF or PNG. 1MB max.
                         </div>
-                        {errors.username && (
-                          <p className="mt-1 text-sm text-red-600">
-                            {`${errors.username.message || "Required"}`}
-                          </p>
-                        )}
                       </div>
                     </div>
 
-                    {/* Photo upload */}
+                    {/* Input field */}
+                  </Field>
+                </div>
 
-                    <div className="mt-6 flex-grow lg:ml-6 lg:mt-0 lg:flex-shrink-0 lg:flex-grow-0">
-                      <p
-                        className="text-sm font-medium text-white"
-                        aria-hidden="true"
-                      >
-                        Photo{" "}
-                      </p>
-                      <div className="mt-1 lg:hidden">
-                        <div className="flex items-center">
-                          <div
-                            className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-full"
-                            aria-hidden="true"
-                          >
-                            {profilePhoto.status === "error" ||
-                            profilePhoto.status === "loading" ? (
-                              <div className="h-full w-full rounded-full border-2 bg-black" />
-                            ) : (
-                              // TODO: review this
-                              // eslint-disable-next-line jsx-a11y/img-redundant-alt
-                              <img
-                                className="h-full w-full rounded-full border-2 border-white object-cover"
-                                src={`${
-                                  profilePhoto.url
-                                }?t=${new Date().getTime()}`}
-                                alt="Profile photo upload section"
-                              />
-                            )}
-                          </div>
-                          <div className="ml-5 rounded-md shadow-sm">
-                            <div className="group relative flex items-center justify-center border-2 border-white px-3 py-2 focus-within:ring-2 focus-within:ring-sky-500 focus-within:ring-offset-2 hover:bg-black">
-                              <label
-                                htmlFor="mobile-user-photo"
-                                className="relative text-sm font-medium leading-4 text-white"
-                              >
-                                <span>Change</span>
-                                <span className="sr-only">user photo</span>
-                              </label>
-                              <input
-                                id="mobile-user-photo"
-                                name="user-photo"
-                                type="file"
-                                accept="image/png, image/gif, image/jpeg, image/webp"
-                                onChange={imageChange}
-                                className="absolute h-full w-full cursor-pointer rounded-md border-neutral-300 opacity-0"
-                              />
-                            </div>
-                          </div>
-                        </div>
+                <div className="mt-6 flex flex-col lg:flex-row">
+                  <Field className="flex w-full flex-row">
+                    {/* Container for Label and Subheading */}
+                    <div className="flex w-full flex-col">
+                      <Label>Full Name</Label>
+                      <div className="text-xs text-gray-500">
+                        This will be displayed on your public profile
                       </div>
+                    </div>
 
-                      <div className="relative hidden h-32 w-32 overflow-hidden rounded-full lg:block">
-                        {profilePhoto.status === "error" ||
-                        profilePhoto.status === "loading" ? (
-                          <div className="h-100 w-100 h-full w-full rounded-full border-2 bg-black" />
-                        ) : (
-                          // TODO: review this
-                          // eslint-disable-next-line jsx-a11y/img-redundant-alt
-                          <img
-                            className="relative h-full w-full rounded-full border-2 border-white object-cover"
-                            src={`${
-                              profilePhoto.url
-                            }?t=${new Date().getTime()}`}
-                            alt="Profile photo upload section"
-                            sizes="(max-width: 768px) 10vw"
-                          />
-                        )}
-                        <label
-                          htmlFor="desktop-user-photo"
-                          className="absolute inset-0 flex h-full w-full items-center justify-center bg-black bg-opacity-75 text-sm font-medium text-white opacity-0 focus-within:opacity-100 hover:opacity-100"
-                        >
-                          <div className="text-center text-xs">
-                            Change Photo
-                          </div>
-                          <span className="sr-only"> user photo</span>
-                          <input
-                            type="file"
-                            id="desktop-user-photo"
-                            name="user-photo"
-                            onChange={imageChange}
-                            className="absolute inset-0 h-full w-full cursor-pointer rounded-md border-neutral-300 opacity-0"
-                          />
-                        </label>
+                    {/* Input field */}
+                    <div className="flex w-full flex-col">
+                      <Input
+                        id="name"
+                        type="text"
+                        autoComplete="given-name"
+                        className="mt-2 w-full"
+                        {...register("name")}
+                      />
+
+                      {/* Error message */}
+                      {errors?.name && (
+                        <ErrorMessage className="mt-1 text-red-500">
+                          {errors.name.message}
+                        </ErrorMessage>
+                      )}
+                    </div>
+                  </Field>
+                </div>
+
+                {/* User name */}
+                <div className="mt-6">
+                  <Field className="flex w-full flex-row">
+                    {/* Container for Label and Subheading */}
+                    <div className="flex w-full flex-col">
+                      <Label>Username</Label>
+                      <div className="text-xs text-gray-500">
+                        This will be how you share your profile
                       </div>
+                    </div>
+
+                    {/* Input field */}
+                    <div className="flex w-full flex-col">
+                      <Input
+                        id="username"
+                        type="text"
+                        autoComplete="given-name"
+                        className="mt-2 w-full"
+                        {...register("username")}
+                      />
 
-                      {/* Photo end  */}
+                      {/* Error message */}
+                      {errors?.username && (
+                        <ErrorMessage className="mt-1 text-red-500">
+                          {errors.username.message}
+                        </ErrorMessage>
+                      )}
                     </div>
-                    {/*  */}
-                  </div>
-                  <div className="mt-6">
-                    <label htmlFor="bio">Short bio</label>
-                    <div className="mt-1">
-                      <textarea
+                  </Field>
+                </div>
+
+                {/* Short Bio */}
+                <div className="mt-6">
+                  <Field className="flex w-full flex-row">
+                    {/* Container for Label and Subheading */}
+                    <div className="flex w-full flex-col">
+                      <Label>Bio</Label>
+                      <div className="pr-1 text-xs text-gray-500">
+                        This will be displayed on your public profile. Maximum
+                        200 characters.
+                      </div>
+                    </div>
+
+                    {/* Text Area Field */}
+                    <div className="flex w-full flex-col">
+                      <Textarea
                         {...register("bio")}
                         id="bio"
                         rows={2}
                         defaultValue={""}
                         maxLength={200}
+                        className="rounded-lg"
                       />
-                    </div>
-                    <div className="mt-2 flex justify-between text-sm text-neutral-600 dark:text-neutral-400">
-                      {errors.bio ? (
-                        <p className="mt-1 text-sm text-red-600">
-                          {`${errors.bio.message || "Required"}`}
-                        </p>
-                      ) : (
-                        <>
-                          <p>Brief description for your profile.</p>
-                          <span>{`${bio?.length || 0}/200`}</span>
-                        </>
+
+                      {/* Error message */}
+                      {errors?.bio && (
+                        <ErrorMessage className="mt-1 text-red-500">
+                          {errors.bio.message}
+                        </ErrorMessage>
                       )}
                     </div>
-                  </div>
-                  <div className="mt-6 grid grid-cols-12 gap-6">
-                    <div className="col-span-12 sm:col-span-9">
-                      <label htmlFor="location">Location</label>
-                      <input
-                        type="text"
-                        {...register("location")}
+                  </Field>
+                </div>
+
+                {/* Location */}
+                <div className="mt-6">
+                  <Field className="flex w-full flex-row">
+                    {/* Container for Label and Subheading */}
+                    <div className="flex w-full flex-col">
+                      <Label>Location</Label>
+                      <div className="text-xs text-gray-500">
+                        This is where you live
+                      </div>
+                    </div>
+
+                    {/* Input field */}
+                    <div className="flex w-full flex-col">
+                      <Input
                         id="location"
+                        type="text"
                         placeholder="The moon 🌙"
                         autoComplete="country-name"
+                        className="mt-2 w-full"
+                        {...register("location")}
                       />
-                      {errors.location && (
-                        <p className="mt-1 text-sm text-red-600">
-                          {`${
-                            errors.location.message ||
-                            "Something is wrong with the input"
-                          }`}
-                        </p>
+
+                      {/* Error message */}
+                      {errors?.location && (
+                        <ErrorMessage className="mt-1 text-red-500">
+                          {errors.location.message}
+                        </ErrorMessage>
                       )}
                     </div>
+                  </Field>
+                </div>
 
-                    <div className="col-span-12 sm:col-span-9">
-                      <label htmlFor="websiteUrl">Website URL</label>
-                      <input
-                        type="text"
-                        {...register("websiteUrl")}
+                {/* Website URL */}
+                <div className="mt-6">
+                  <Field className="flex w-full flex-row">
+                    {/* Container for Label and Subheading */}
+                    <div className="flex w-full flex-col">
+                      <Label>Website URL</Label>
+                      <div className="text-xs text-gray-500">
+                        A link to your website (optional)
+                      </div>
+                    </div>
+
+                    {/* Input field */}
+                    <div className="flex w-full flex-col">
+                      <Input
                         id="websiteUrl"
-                        autoComplete="url"
+                        type="text"
                         placeholder="https://codu.co/"
+                        autoComplete="url"
+                        className="mt-2 w-full"
+                        {...register("websiteUrl")}
                       />
-                      {errors.websiteUrl && (
-                        <p className="mt-1 text-sm text-red-600">
-                          {`${
-                            errors.websiteUrl.message ||
-                            "Something is wrong with the input"
-                          }`}
-                        </p>
+
+                      {/* Error message */}
+                      {errors?.websiteUrl && (
+                        <ErrorMessage className="mt-1 text-red-500">
+                          {errors.websiteUrl.message}
+                        </ErrorMessage>
                       )}
                     </div>
-                  </div>
+                  </Field>
                 </div>
-                <div className="mt-6 text-neutral-600 dark:text-neutral-400">
-                  <h2 className="text-xl font-bold tracking-tight text-neutral-800 dark:text-white">
-                    Update email
-                  </h2>
-                  <p className="mt-1 text-sm">Change your email here.</p>
-                  <div className="mt-2 flex flex-col gap-2">
-                    <div className="flex flex-col">
-                      <label htmlFor="currEmail">Current email</label>
-                      <div>
-                        <input
-                          type="email"
-                          id="currEmail"
-                          value={profile.email!}
-                          disabled
-                        />
+              </div>
+
+              {/* Email Section */}
+              <div className="pt-6">
+                <Heading level={1}>Email Settings</Heading>
+                <div className="mt-6">
+                  <Field className="flex w-full flex-row">
+                    <div className="flex w-full flex-col">
+                      <Label>Current Email</Label>
+                      <div className="text-xs text-gray-500">
+                        This is where we will send all communications
                       </div>
                     </div>
-                    <div className="flex flex-col">
-                      <label htmlFor="newEmail">Update email</label>
-                      <div>
-                        <input
+                    <div className="flex w-full flex-col">
+                      <Input
+                        type="text"
+                        className="mt-2 w-full"
+                        value={profile.email || ""}
+                        disabled
+                      />
+                    </div>
+                  </Field>
+                  <div className="mt-6">
+                    <Field className="flex w-full flex-row">
+                      <div className="flex w-full flex-col">
+                        <Label>Update Email</Label>
+                        <div className="text-xs text-gray-500">
+                          You can alter your email by verifying a new email
+                          address.
+                        </div>
+                      </div>
+                      <div className="flex w-full flex-col">
+                        <Input
                           type="email"
                           id="newEmail"
-                          onChange={(e) => setNewEmail(e.target.value)}
+                          onChange={(e) => {
+                            setNewEmail(e.target.value);
+                            if (
+                              e.target.value &&
+                              !/\S+@\S+\.\S+/.test(e.target.value)
+                            ) {
+                              setEmailError(
+                                "Please enter a valid email address",
+                              );
+                            } else {
+                              setEmailError("");
+                            }
+                          }}
                           value={newEmail}
+                          className="mt-2 w-full"
                         />
+                        {emailError && (
+                          <ErrorMessage className="mt-1 text-red-500">
+                            {emailError}
+                          </ErrorMessage>
+                        )}
                       </div>
-                    </div>
+                    </Field>
+                  </div>
+                  <div className="mt-2 flex justify-end py-4">
                     {!sendForVerification ? (
                       <Button
-                        className="w-[200px]"
+                        color="pink"
                         disabled={
                           !newEmail || newEmail === profile.email || loading
                         }
@@ -408,7 +468,7 @@ const Settings = ({ profile }: { profile: User }) => {
                         {loading && (
                           <Loader2 className="text-primary h-6 w-6 animate-spin" />
                         )}
-                        Send verification link
+                        Send Verification Email
                       </Button>
                     ) : (
                       <div className="mt-2 flex flex-row gap-2">
@@ -417,7 +477,7 @@ const Settings = ({ profile }: { profile: User }) => {
                           Verification link sent
                         </h2>
                         <Button
-                          className="w-[250px]"
+                          color="pink"
                           disabled={
                             !newEmail || newEmail === profile.email || loading
                           }
@@ -426,114 +486,74 @@ const Settings = ({ profile }: { profile: User }) => {
                           {loading && (
                             <Loader2 className="text-primary h-6 w-6 animate-spin" />
                           )}
-                          Resend verification link
+                          Resend Verification Email
                         </Button>
                       </div>
                     )}
                   </div>
                 </div>
-                <div className="divide-y divide-neutral-200 pt-6">
-                  <div>
-                    <div className="text-neutral-600 dark:text-neutral-400">
-                      <h2
-                        id="privacy-heading"
-                        className="text-xl font-bold tracking-tight text-neutral-800 dark:text-white"
-                      >
-                        Email Notifications
-                      </h2>
-                      <p className="mt-1 text-sm">
-                        Change your notification settings here.
-                      </p>
-                    </div>
-                    {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
-                    <ul
-                      role="list"
-                      aria-labelledby="privacy-heading"
-                      className="mt-2 divide-y divide-neutral-200"
-                    >
-                      <Field
-                        as="li"
-                        className="flex items-center justify-between py-4"
-                      >
-                        <div className="flex flex-col items-center">
-                          <Label as="p" className="sr-only" passive>
-                            Email notifications
-                          </Label>
-                          <Description className="text-sm text-neutral-600 dark:text-neutral-400">
-                            Occasional email notifications from the platform.
-                          </Description>
-                        </div>
-                        <Switch
-                          checked={emailNotifications}
-                          onChange={setEmailNotifications}
-                          className={classNames(
-                            emailNotifications
-                              ? "bg-green-600"
-                              : "bg-neutral-400",
-                            "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2",
-                          )}
-                        >
-                          <span
-                            aria-hidden="true"
-                            className={classNames(
-                              emailNotifications
-                                ? "translate-x-5"
-                                : "translate-x-0",
-                              "inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-                            )}
-                          />
-                        </Switch>
-                      </Field>
-                      <Field
-                        as="li"
-                        className="mt-2 flex items-center justify-between py-4"
-                      >
-                        <div className="flex flex-col">
-                          <Label as="p" className="sr-only" passive>
-                            Weekly newsletter
-                          </Label>
-                          <Description className="text-sm text-neutral-600 dark:text-neutral-400">
-                            Opt-in to our weekly newsletter.
-                          </Description>
-                        </div>
-                        <Switch
-                          checked={weeklyNewsletter}
-                          onChange={setWeeklyNewsletter}
-                          className={classNames(
-                            weeklyNewsletter
-                              ? "bg-green-600"
-                              : "bg-neutral-400",
-                            "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2",
-                          )}
-                        >
-                          <span
-                            aria-hidden="true"
-                            className={classNames(
-                              weeklyNewsletter
-                                ? "translate-x-5"
-                                : "translate-x-0",
-                              "inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-                            )}
-                          />
-                        </Switch>
-                      </Field>
-                    </ul>
-                  </div>
-                  <div className="mt-2 flex justify-end py-4">
-                    <button
-                      type="button"
-                      className="inline-flex justify-center border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 shadow-sm hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      disabled={isLoading}
-                      type="submit"
-                      className="ml-5 inline-flex w-20 justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:opacity-20"
-                    >
-                      Save
-                    </button>
-                  </div>
+              </div>
+
+              {/* Notifications Section */}
+              <div className="pt-6">
+                <div className="mt-6">
+                  <Heading level={1}>Notifications</Heading>
+                </div>
+                <div>
+                  <Field className="flex items-center justify-between py-4">
+                    <Label passive className="flex flex-col text-sm">
+                      <span className="block">
+                        Allow notifications from the platform
+                      </span>
+                      <span className="text-xs text-gray-500">
+                        Send an email when a user interacts with you on the
+                        platform
+                      </span>
+                    </Label>
+                    <Switch
+                      color="green"
+                      checked={emailNotifications}
+                      onChange={setEmailNotifications}
+                      className={classNames(
+                        emailNotifications ? "bg-green-600" : "bg-neutral-400",
+                      )}
+                      aria-label="Allow notifications from the platform"
+                    />
+                  </Field>
+                  <Field className="mt-2 flex items-center justify-between py-4">
+                    <Label passive className="flex flex-col text-sm">
+                      <span className="block">Weekly Newsletter</span>
+                      <span className="text-xs text-gray-500">
+                        Receive our weekly newsletter
+                      </span>
+                    </Label>
+                    <Switch
+                      color="green"
+                      checked={weeklyNewsletter}
+                      onChange={setWeeklyNewsletter}
+                      className={classNames(
+                        weeklyNewsletter ? "bg-green-600" : "bg-neutral-400",
+                      )}
+                      aria-label="Subscribe for weekly newsletter"
+                    />
+                  </Field>
+                </div>
+                <div className="mt-2 flex justify-end py-4">
+                  <Button
+                    color="dark/white"
+                    className="rounded-md"
+                    onClick={() => reset()}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    color="pink"
+                    className="ml-5 rounded-md"
+                    disabled={isLoading}
+                    type="submit"
+                  >
+                    Save Changes
+                  </Button>
                 </div>
               </div>
             </div>
diff --git a/components/ui-components/avatar.tsx b/components/ui-components/avatar.tsx
index ae73ff9f..e51e01df 100644
--- a/components/ui-components/avatar.tsx
+++ b/components/ui-components/avatar.tsx
@@ -27,7 +27,7 @@ export function Avatar({
       className={clsx(
         className,
         // Basic layout
-        "inline-grid shrink-0 align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1",
+        "inline-grid shrink-0 align-middle *:col-start-1 *:row-start-1",
         "outline outline-1 -outline-offset-1 outline-black/[--ring-opacity] dark:outline-white/[--ring-opacity]",
         // Add the correct border radius
         square

From 9f0b975c1e812cded3845f47e681581936ec5799 Mon Sep 17 00:00:00 2001
From: Praveen Kumar <pkspyder007@gmail.com>
Date: Sat, 12 Oct 2024 12:42:58 +0530
Subject: [PATCH 2/3] setup docker and docker compose for e2e action (#1086)

---
 .github/workflows/e2e-tests.yml | 64 +++++++++++++++++++++++++++++++++
 e2e/articles.spec.ts            |  2 +-
 package.json                    |  1 +
 playwright.config.ts            | 12 ++++---
 4 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 .github/workflows/e2e-tests.yml

diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
new file mode 100644
index 00000000..2e8b9cf3
--- /dev/null
+++ b/.github/workflows/e2e-tests.yml
@@ -0,0 +1,64 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    env:
+      DATABASE_URL: "postgresql://postgres:secret@localhost:5432/postgres"
+      NEXTAUTH_URL: http://localhost:3000/api/auth
+      GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
+      GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
+      NEXTAUTH_SECRET: "please_keep_this_secret"
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 'lts/*'
+
+    - name: Run docker-compose
+      uses: hoverkraft-tech/compose-action@v2.0.1
+      with:
+        compose-file: "./docker-compose.yml"
+        services: |
+          db
+
+    - name: Wait for DB to be ready
+      run: |
+        until nc -z localhost 5432; do
+          echo "Waiting for database connection..."
+          sleep 5
+        done
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Install Playwright browsers
+      run: npx playwright install --with-deps
+
+    - name: Seed database
+      run: |
+        npm run db:push
+        npm run db:seed
+
+    - name: Run Playwright tests
+      run: npx playwright test --reporter=html
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
\ No newline at end of file
diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
index c50edd6b..89143ffd 100644
--- a/e2e/articles.spec.ts
+++ b/e2e/articles.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from "playwright/test";
 
-test.describe("Articles", () => {
+test.skip("Articles", () => {
   test("Should load more articles when scrolling to the end of the page", async ({
     page,
   }) => {
diff --git a/package.json b/package.json
index 2a520e11..d49bd56c 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "dev:e2e": "ENV=E2E next dev",
     "build": "next build",
     "ci-build": "next build",
     "start": "next start",
diff --git a/playwright.config.ts b/playwright.config.ts
index 674b903d..85afad1d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -49,10 +49,10 @@ export default defineConfig({
     // },
 
     /* Test against mobile viewports. */
-    {
-      name: "Mobile Chrome",
-      use: { ...devices["Pixel 5"] },
-    },
+    // {
+    //   name: "Mobile Chrome",
+    //   use: { ...devices["Pixel 5"] },
+    // },
     // {
     //   name: 'Mobile Safari',
     //   use: { ...devices['iPhone 12'] },
@@ -69,9 +69,11 @@ export default defineConfig({
     // },
   ],
 
+  outputDir: "playwright-report",
+
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "npm run dev",
+    command: "npm run dev:e2e",
     url: "http://127.0.0.1:3000",
     reuseExistingServer: !process.env.CI,
   },

From 126ddf5a13c4dc804d3adafb6e3d1ac9a2140f3a Mon Sep 17 00:00:00 2001
From: Niall Maher <nialljoemaher@gmail.com>
Date: Sat, 12 Oct 2024 10:25:36 +0100
Subject: [PATCH 3/3] Settings screen update / Fix Drizzle Kit Studio (#1109)

* Makes settings screen responsive

* Also optimizes some indexes for fetching data and then also fixes schema to get drizzlekit working

* Update e2e tests action

* Update all actions node to lts and concurrency check
---
 .github/workflows/alt-text-bot.yml        |   13 +-
 .github/workflows/e2e-tests.yml           |   73 +-
 .github/workflows/greetings.yml           |   11 +-
 .github/workflows/pull-request.yml        |   26 +-
 app/(app)/settings/_client.tsx            |  679 ++++------
 app/api/verify-email/route.ts             |  102 +-
 drizzle/0010_email-tokens-and-indexes.sql |   39 +
 drizzle/meta/0010_snapshot.json           | 1402 +++++++++++++++++++++
 drizzle/meta/_journal.json                |    7 +
 package-lock.json                         |    2 +-
 server/api/router/profile.ts              |   89 +-
 server/db/schema.ts                       |  231 ++--
 utils/emailToken.ts                       |   66 +-
 13 files changed, 2114 insertions(+), 626 deletions(-)
 create mode 100644 drizzle/0010_email-tokens-and-indexes.sql
 create mode 100644 drizzle/meta/0010_snapshot.json

diff --git a/.github/workflows/alt-text-bot.yml b/.github/workflows/alt-text-bot.yml
index 3fe35936..edba0194 100644
--- a/.github/workflows/alt-text-bot.yml
+++ b/.github/workflows/alt-text-bot.yml
@@ -1,4 +1,5 @@
-name: Accessibility-alt-text-bot
+name: Accessibility Alt Text Bot
+
 on:
   issues:
     types: [opened, edited]
@@ -11,6 +12,10 @@ on:
   discussion_comment:
     types: [created, edited]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.issue.number || github.event.pull_request.number || github.event.discussion.number || github.ref }}
+  cancel-in-progress: true
+
 permissions:
   issues: write
   pull-requests: write
@@ -18,8 +23,8 @@ permissions:
 
 jobs:
   accessibility_alt_text_bot:
-    name: Check alt text is set on issue or pull requests
+    name: Check alt text on issues and pull requests
     runs-on: ubuntu-latest
     steps:
-      - name: Get action 'github/accessibility-alt-text-bot'
-        uses: github/accessibility-alt-text-bot@v1.4.0 # Set to latest
+      - name: Run Alt Text Bot
+        uses: github/accessibility-alt-text-bot@v1.4.0
diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
index 2e8b9cf3..4bbbcdd2 100644
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -4,49 +4,87 @@ on:
   push:
     branches:
       - develop
-  pull_request:
+  pull_request_target:
+    types: [opened, synchronize, reopened]
     branches:
       - develop
 
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
+  initial-checks:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.head.sha }}
+        fetch-depth: 0
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
   e2e:
+    needs: initial-checks
     runs-on: ubuntu-latest
+    environment: production
 
     env:
       DATABASE_URL: "postgresql://postgres:secret@localhost:5432/postgres"
       NEXTAUTH_URL: http://localhost:3000/api/auth
       GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
       GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
-      NEXTAUTH_SECRET: "please_keep_this_secret"
+      NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.head.sha }}
+        fetch-depth: 0
 
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: 'lts/*'
+        cache: 'npm'
+
+    - name: Cache Playwright browsers
+      uses: actions/cache@v3
+      with:
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-playwright-
 
     - name: Run docker-compose
-      uses: hoverkraft-tech/compose-action@v2.0.1
+      uses: isbang/compose-action@v1.5.1
       with:
         compose-file: "./docker-compose.yml"
+        down-flags: "--volumes"
         services: |
           db
 
     - name: Wait for DB to be ready
       run: |
-        until nc -z localhost 5432; do
-          echo "Waiting for database connection..."
-          sleep 5
-        done
+        timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+      shell: bash
 
     - name: Install dependencies
-      run: npm install
+      run: npm ci
 
     - name: Install Playwright browsers
       run: npx playwright install --with-deps
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
 
     - name: Seed database
       run: |
@@ -54,11 +92,18 @@ jobs:
         npm run db:seed
 
     - name: Run Playwright tests
-      run: npx playwright test --reporter=html
+      id: playwright-tests
+      run: npx playwright test
+      continue-on-error: true
 
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
+    - name: Upload Playwright report
+      uses: actions/upload-artifact@v4
+      if: always()
       with:
         name: playwright-report
         path: playwright-report/
-        retention-days: 30
\ No newline at end of file
+        retention-days: 30
+
+    - name: Check test results
+      if: steps.playwright-tests.outcome == 'failure'
+      run: exit 1
diff --git a/.github/workflows/greetings.yml b/.github/workflows/greetings.yml
index e404107c..0d52c26c 100644
--- a/.github/workflows/greetings.yml
+++ b/.github/workflows/greetings.yml
@@ -6,13 +6,20 @@ on:
   pull_request_target:
     types: [opened]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.issue.number || github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   welcome-new-contributor:
     runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
     steps:
       - name: 'Greet the contributor'
         uses: garg3133/welcome-new-contributors@v1.2
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          issue-message: 'Hello @contributor_name, thanks for opening your first issue! your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.'
-          pr-message: 'Hello @contributor_name, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!'
+          issue-message: 'Hello @{{ contributor }}, thanks for opening your first issue! Your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.'
+          pr-message: 'Hello @{{ contributor }}, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!'
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index f339ff8f..84df7d17 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -1,23 +1,39 @@
-name: Check the pull request
+name: Code Quality Checks
 
 on:
   pull_request:
     types: [opened, synchronize, reopened, edited]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
-  check-pull-request:
-    name: Check code styling and run tests
+  lint-and-format:
+    name: Run ESLint and Prettier
     runs-on: ubuntu-latest
     steps:
       - name: Checkout source code
         uses: actions/checkout@v4
-      - name: Use the correct Node.js version
+
+      - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20.17.0"
+          node-version: 'lts/*'
+          cache: 'npm'
+
       - name: Install dependencies
         run: npm ci
+
       - name: Run ESLint
         run: npm run lint
+
       - name: Run Prettier
         run: npm run prettier
+
+      - name: Check for uncommitted changes
+        run: |
+          git diff --exit-code || \
+          (echo "Detected uncommitted changes after build. See status below:" && \
+           git diff && \
+           exit 1)
diff --git a/app/(app)/settings/_client.tsx b/app/(app)/settings/_client.tsx
index eb3dd37b..04d02cce 100644
--- a/app/(app)/settings/_client.tsx
+++ b/app/(app)/settings/_client.tsx
@@ -12,8 +12,8 @@ import { saveSettingsSchema } from "@/schema/profile";
 import { uploadFile } from "@/utils/s3helpers";
 import type { user } from "@/server/db/schema";
 import { Button } from "@/components/ui-components/button";
-import { CheckCheck, Loader2 } from "lucide-react";
-import { Heading } from "@/components/ui-components/heading";
+import { Loader2 } from "lucide-react";
+import { Subheading, Heading } from "@/components/ui-components/heading";
 import { Avatar } from "@/components/ui-components/avatar";
 import { Input } from "@/components/ui-components/input";
 import {
@@ -23,10 +23,8 @@ import {
 } from "@/components/ui-components/fieldset";
 import { Textarea } from "@/components/ui-components/textarea";
 import { Switch } from "@/components/ui-components/switch";
-
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import { Divider } from "@/components/ui-components/divider";
+import { Text } from "@/components/ui-components/text";
 
 type User = Pick<
   typeof user.$inferSelect,
@@ -51,9 +49,8 @@ const Settings = ({ profile }: { profile: User }) => {
   const {
     register,
     handleSubmit,
-    watch,
     reset,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = useForm<saveSettingsInput>({
     resolver: zodResolver(saveSettingsSchema),
     defaultValues: {
@@ -70,14 +67,14 @@ const Settings = ({ profile }: { profile: User }) => {
   const [sendForVerification, setSendForVerification] = useState(false);
   const [loading, setLoading] = useState(false);
   const [emailError, setEmailError] = useState("");
+  const [cooldown, setCooldown] = useState(0);
 
   const [profilePhoto, setProfilePhoto] = useState<ProfilePhoto>({
     status: "idle",
     url: profile.image,
   });
 
-  const { mutate, isError, isSuccess, isLoading } =
-    api.profile.edit.useMutation();
+  const { mutate, isError, isSuccess } = api.profile.edit.useMutation();
   const { mutate: getUploadUrl } = api.profile.getUploadUrl.useMutation();
   const { mutate: updateUserPhotoUrl } =
     api.profile.updateProfilePhotoUrl.useMutation();
@@ -85,6 +82,8 @@ const Settings = ({ profile }: { profile: User }) => {
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const isValidEmail = (email: string) => /\S+@\S+\.\S+/.test(email);
+
   useEffect(() => {
     if (isSuccess) {
       toast.success("Saved");
@@ -94,6 +93,13 @@ const Settings = ({ profile }: { profile: User }) => {
     }
   }, [isError, isSuccess]);
 
+  useEffect(() => {
+    if (cooldown > 0) {
+      const timer = setTimeout(() => setCooldown(cooldown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [cooldown]);
+
   const onSubmit: SubmitHandler<saveSettingsInput> = (values) => {
     mutate({ ...values, newsletter: weeklyNewsletter, emailNotifications });
   };
@@ -148,6 +154,15 @@ const Settings = ({ profile }: { profile: User }) => {
   };
 
   const handleNewEmailUpdate = async () => {
+    if (cooldown > 0) {
+      return;
+    }
+
+    if (!isValidEmail(newEmail)) {
+      setEmailError("Please enter a valid email address");
+      return;
+    }
+
     setLoading(true);
     await updateEmail(
       { newEmail },
@@ -163,404 +178,270 @@ const Settings = ({ profile }: { profile: User }) => {
           setLoading(false);
           toast.success("Verification link sent to your email.");
           setSendForVerification(true);
+          setCooldown(120); // Set a 2 minute cooldown
+          setEmailError(""); // Clear any existing error
         },
       },
     );
   };
 
   return (
-    <div className="old-input py-8">
-      <div className="mx-auto flex w-full max-w-2xl flex-grow flex-col justify-center px-4 sm:px-6 lg:col-span-9">
-        <div className="text-neutral-700">
-          <form onSubmit={handleSubmit(onSubmit)}>
-            {/* Profile section */}
-            <div className="flex flex-col px-4 py-6 sm:p-6 lg:pb-8">
-              <div>
-                <div>
-                  <Heading level={1}>Profile Information</Heading>
-                </div>
-
-                {/* Photo upload */}
-
-                <div className="mt-6 flex flex-col lg:flex-row">
-                  <Field className="flex w-full flex-row">
-                    {/* Container for Label and Subheading */}
-                    <div className="flex w-full flex-col">
-                      <Label>Profile picture</Label>
-                      <div className="text-xs text-gray-500">
-                        This will be displayed on your public profile
-                      </div>
-                    </div>
-
-                    <div className="flex-start flex w-full flex-row">
-                      <div className="h-16 w-16 lg:block">
-                        <Avatar
-                          square
-                          src={
-                            profilePhoto.status === "error" ||
-                            profilePhoto.status === "loading"
-                              ? undefined
-                              : `${profilePhoto.url}`
-                          }
-                          alt="Profile photo upload section"
-                          className="relative h-16 w-16 overflow-hidden rounded-lg"
-                        />
-                      </div>
-
-                      <div className="ml-4 flex flex-col items-start justify-center">
-                        <Button
-                          color={"dark/white"}
-                          type="button"
-                          className="h-[30px] rounded-md text-xs"
-                          onClick={() => {
-                            fileInputRef.current?.click();
-                          }}
-                          aria-label="Change profile picture"
-                        >
-                          Change avatar
-                        </Button>
-
-                        <Input
-                          type="file"
-                          id="file-input"
-                          name="user-photo"
-                          accept="image/png, image/gif, image/jpeg"
-                          onChange={imageChange}
-                          className="hidden"
-                          ref={fileInputRef}
-                        />
-
-                        <div className="mt-1 text-xs text-gray-500">
-                          JPG, GIF or PNG. 1MB max.
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Input field */}
-                  </Field>
-                </div>
-
-                <div className="mt-6 flex flex-col lg:flex-row">
-                  <Field className="flex w-full flex-row">
-                    {/* Container for Label and Subheading */}
-                    <div className="flex w-full flex-col">
-                      <Label>Full Name</Label>
-                      <div className="text-xs text-gray-500">
-                        This will be displayed on your public profile
-                      </div>
-                    </div>
-
-                    {/* Input field */}
-                    <div className="flex w-full flex-col">
-                      <Input
-                        id="name"
-                        type="text"
-                        autoComplete="given-name"
-                        className="mt-2 w-full"
-                        {...register("name")}
-                      />
-
-                      {/* Error message */}
-                      {errors?.name && (
-                        <ErrorMessage className="mt-1 text-red-500">
-                          {errors.name.message}
-                        </ErrorMessage>
-                      )}
-                    </div>
-                  </Field>
-                </div>
-
-                {/* User name */}
-                <div className="mt-6">
-                  <Field className="flex w-full flex-row">
-                    {/* Container for Label and Subheading */}
-                    <div className="flex w-full flex-col">
-                      <Label>Username</Label>
-                      <div className="text-xs text-gray-500">
-                        This will be how you share your profile
-                      </div>
-                    </div>
-
-                    {/* Input field */}
-                    <div className="flex w-full flex-col">
-                      <Input
-                        id="username"
-                        type="text"
-                        autoComplete="given-name"
-                        className="mt-2 w-full"
-                        {...register("username")}
-                      />
-
-                      {/* Error message */}
-                      {errors?.username && (
-                        <ErrorMessage className="mt-1 text-red-500">
-                          {errors.username.message}
-                        </ErrorMessage>
-                      )}
-                    </div>
-                  </Field>
-                </div>
-
-                {/* Short Bio */}
-                <div className="mt-6">
-                  <Field className="flex w-full flex-row">
-                    {/* Container for Label and Subheading */}
-                    <div className="flex w-full flex-col">
-                      <Label>Bio</Label>
-                      <div className="pr-1 text-xs text-gray-500">
-                        This will be displayed on your public profile. Maximum
-                        200 characters.
-                      </div>
-                    </div>
-
-                    {/* Text Area Field */}
-                    <div className="flex w-full flex-col">
-                      <Textarea
-                        {...register("bio")}
-                        id="bio"
-                        rows={2}
-                        defaultValue={""}
-                        maxLength={200}
-                        className="rounded-lg"
-                      />
-
-                      {/* Error message */}
-                      {errors?.bio && (
-                        <ErrorMessage className="mt-1 text-red-500">
-                          {errors.bio.message}
-                        </ErrorMessage>
-                      )}
-                    </div>
-                  </Field>
-                </div>
-
-                {/* Location */}
-                <div className="mt-6">
-                  <Field className="flex w-full flex-row">
-                    {/* Container for Label and Subheading */}
-                    <div className="flex w-full flex-col">
-                      <Label>Location</Label>
-                      <div className="text-xs text-gray-500">
-                        This is where you live
-                      </div>
-                    </div>
-
-                    {/* Input field */}
-                    <div className="flex w-full flex-col">
-                      <Input
-                        id="location"
-                        type="text"
-                        placeholder="The moon 🌙"
-                        autoComplete="country-name"
-                        className="mt-2 w-full"
-                        {...register("location")}
-                      />
-
-                      {/* Error message */}
-                      {errors?.location && (
-                        <ErrorMessage className="mt-1 text-red-500">
-                          {errors.location.message}
-                        </ErrorMessage>
-                      )}
-                    </div>
-                  </Field>
-                </div>
-
-                {/* Website URL */}
-                <div className="mt-6">
-                  <Field className="flex w-full flex-row">
-                    {/* Container for Label and Subheading */}
-                    <div className="flex w-full flex-col">
-                      <Label>Website URL</Label>
-                      <div className="text-xs text-gray-500">
-                        A link to your website (optional)
-                      </div>
-                    </div>
-
-                    {/* Input field */}
-                    <div className="flex w-full flex-col">
-                      <Input
-                        id="websiteUrl"
-                        type="text"
-                        placeholder="https://codu.co/"
-                        autoComplete="url"
-                        className="mt-2 w-full"
-                        {...register("websiteUrl")}
-                      />
-
-                      {/* Error message */}
-                      {errors?.websiteUrl && (
-                        <ErrorMessage className="mt-1 text-red-500">
-                          {errors.websiteUrl.message}
-                        </ErrorMessage>
-                      )}
-                    </div>
-                  </Field>
-                </div>
-              </div>
-
-              {/* Email Section */}
-              <div className="pt-6">
-                <Heading level={1}>Email Settings</Heading>
-                <div className="mt-6">
-                  <Field className="flex w-full flex-row">
-                    <div className="flex w-full flex-col">
-                      <Label>Current Email</Label>
-                      <div className="text-xs text-gray-500">
-                        This is where we will send all communications
-                      </div>
-                    </div>
-                    <div className="flex w-full flex-col">
-                      <Input
-                        type="text"
-                        className="mt-2 w-full"
-                        value={profile.email || ""}
-                        disabled
-                      />
-                    </div>
-                  </Field>
-                  <div className="mt-6">
-                    <Field className="flex w-full flex-row">
-                      <div className="flex w-full flex-col">
-                        <Label>Update Email</Label>
-                        <div className="text-xs text-gray-500">
-                          You can alter your email by verifying a new email
-                          address.
-                        </div>
-                      </div>
-                      <div className="flex w-full flex-col">
-                        <Input
-                          type="email"
-                          id="newEmail"
-                          onChange={(e) => {
-                            setNewEmail(e.target.value);
-                            if (
-                              e.target.value &&
-                              !/\S+@\S+\.\S+/.test(e.target.value)
-                            ) {
-                              setEmailError(
-                                "Please enter a valid email address",
-                              );
-                            } else {
-                              setEmailError("");
-                            }
-                          }}
-                          value={newEmail}
-                          className="mt-2 w-full"
-                        />
-                        {emailError && (
-                          <ErrorMessage className="mt-1 text-red-500">
-                            {emailError}
-                          </ErrorMessage>
-                        )}
-                      </div>
-                    </Field>
-                  </div>
-                  <div className="mt-2 flex justify-end py-4">
-                    {!sendForVerification ? (
-                      <Button
-                        color="pink"
-                        disabled={
-                          !newEmail || newEmail === profile.email || loading
-                        }
-                        onClick={handleNewEmailUpdate}
-                      >
-                        {loading && (
-                          <Loader2 className="text-primary h-6 w-6 animate-spin" />
-                        )}
-                        Send Verification Email
-                      </Button>
-                    ) : (
-                      <div className="mt-2 flex flex-row gap-2">
-                        <h2 className="flex items-center gap-2 text-sm italic text-green-400">
-                          <CheckCheck />
-                          Verification link sent
-                        </h2>
-                        <Button
-                          color="pink"
-                          disabled={
-                            !newEmail || newEmail === profile.email || loading
-                          }
-                          onClick={handleNewEmailUpdate}
-                        >
-                          {loading && (
-                            <Loader2 className="text-primary h-6 w-6 animate-spin" />
-                          )}
-                          Resend Verification Email
-                        </Button>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-
-              {/* Notifications Section */}
-              <div className="pt-6">
-                <div className="mt-6">
-                  <Heading level={1}>Notifications</Heading>
-                </div>
-                <div>
-                  <Field className="flex items-center justify-between py-4">
-                    <Label passive className="flex flex-col text-sm">
-                      <span className="block">
-                        Allow notifications from the platform
-                      </span>
-                      <span className="text-xs text-gray-500">
-                        Send an email when a user interacts with you on the
-                        platform
-                      </span>
-                    </Label>
-                    <Switch
-                      color="green"
-                      checked={emailNotifications}
-                      onChange={setEmailNotifications}
-                      className={classNames(
-                        emailNotifications ? "bg-green-600" : "bg-neutral-400",
-                      )}
-                      aria-label="Allow notifications from the platform"
-                    />
-                  </Field>
-                  <Field className="mt-2 flex items-center justify-between py-4">
-                    <Label passive className="flex flex-col text-sm">
-                      <span className="block">Weekly Newsletter</span>
-                      <span className="text-xs text-gray-500">
-                        Receive our weekly newsletter
-                      </span>
-                    </Label>
-                    <Switch
-                      color="green"
-                      checked={weeklyNewsletter}
-                      onChange={setWeeklyNewsletter}
-                      className={classNames(
-                        weeklyNewsletter ? "bg-green-600" : "bg-neutral-400",
-                      )}
-                      aria-label="Subscribe for weekly newsletter"
-                    />
-                  </Field>
-                </div>
-                <div className="mt-2 flex justify-end py-4">
-                  <Button
-                    color="dark/white"
-                    className="rounded-md"
-                    onClick={() => reset()}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    color="pink"
-                    className="ml-5 rounded-md"
-                    disabled={isLoading}
-                    type="submit"
-                  >
-                    Save Changes
-                  </Button>
-                </div>
-              </div>
+    <form
+      className="mx-auto max-w-4xl p-3 pt-8 sm:px-4"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <Heading level={1}>Your Settings</Heading>
+      <Divider className="my-10 mt-6" />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Profile Picture</Subheading>
+          <Text>This will be displayed on your public profile</Text>
+        </div>
+        <Field>
+          <div className="flex items-center space-x-4">
+            <Avatar
+              square
+              src={
+                profilePhoto.status === "error" ||
+                profilePhoto.status === "loading"
+                  ? undefined
+                  : `${profilePhoto.url}`
+              }
+              alt="Profile photo upload section"
+              className="h-16 w-16 overflow-hidden rounded-full"
+            />
+            <div>
+              <Button
+                color="dark/white"
+                type="button"
+                className="h-[30px] rounded-md text-xs"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                Change avatar
+              </Button>
+              <Input
+                type="file"
+                id="file-input"
+                name="user-photo"
+                accept="image/png, image/gif, image/jpeg"
+                onChange={imageChange}
+                className="hidden"
+                ref={fileInputRef}
+              />
+              <Text className="mt-1 text-xs text-gray-500">
+                JPG, GIF or PNG. 1MB max.
+              </Text>
             </div>
-          </form>
+          </div>
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Full Name</Subheading>
+          <Text>This will be displayed on your public profile</Text>
+        </div>
+        <Field>
+          <Input
+            id="name"
+            type="text"
+            autoComplete="given-name"
+            invalid={!!errors?.name}
+            {...register("name")}
+          />
+          {errors?.name && <ErrorMessage>{errors.name.message}</ErrorMessage>}
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Username</Subheading>
+          <Text>This will be how you share your profile</Text>
+        </div>
+        <Field>
+          <Input
+            id="username"
+            type="text"
+            autoComplete="username"
+            invalid={!!errors?.username}
+            {...register("username")}
+          />
+          {errors?.username && (
+            <ErrorMessage>{errors.username.message}</ErrorMessage>
+          )}
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Bio</Subheading>
+          <Text>
+            This will be displayed on your public profile. Maximum 200
+            characters.
+          </Text>
+        </div>
+        <Field>
+          <Textarea
+            id="bio"
+            rows={3}
+            maxLength={200}
+            invalid={!!errors?.bio}
+            {...register("bio")}
+          />
+          {errors?.bio && <ErrorMessage>{errors.bio.message}</ErrorMessage>}
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Location</Subheading>
+          <Text>This is where you live</Text>
+        </div>
+        <Field>
+          <Input
+            id="location"
+            type="text"
+            placeholder="The moon 🌙"
+            autoComplete="country-name"
+            invalid={!!errors?.location}
+            {...register("location")}
+          />
+          {errors?.location && (
+            <ErrorMessage>{errors.location.message}</ErrorMessage>
+          )}
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Website URL</Subheading>
+          <Text>A link to your website (optional)</Text>
+        </div>
+        <Field>
+          <Input
+            id="websiteUrl"
+            type="text"
+            placeholder="https://example.com"
+            autoComplete="url"
+            invalid={!!errors?.websiteUrl}
+            {...register("websiteUrl")}
+          />
+          {errors?.websiteUrl && (
+            <ErrorMessage>{errors.websiteUrl.message}</ErrorMessage>
+          )}
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="mt-6 grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={3}>Current Email</Subheading>
+          <Text>This is where we will send all communications</Text>
+        </div>
+        <Field>
+          <Input type="text" value={profile.email || ""} disabled />
+        </Field>
+      </section>
+
+      <section className="mt-6 grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={3}>Update Email</Subheading>
+          <Text>
+            You can alter your email by verifying a new email address.
+          </Text>
         </div>
+        <Field>
+          <Input
+            type="email"
+            id="newEmail"
+            onChange={(e) => {
+              setNewEmail(e.target.value);
+              if (sendForVerification) {
+                setEmailError(""); // Clear error when user starts typing again
+              }
+            }}
+            value={newEmail}
+          />
+          {emailError && sendForVerification && (
+            <ErrorMessage>{emailError}</ErrorMessage>
+          )}
+          <div className="mt-2 flex justify-end">
+            <Button
+              color="pink"
+              disabled={
+                !isValidEmail(newEmail) ||
+                newEmail === profile.email ||
+                loading ||
+                cooldown > 0
+              }
+              onClick={handleNewEmailUpdate}
+            >
+              {loading && (
+                <Loader2 className="text-primary h-6 w-6 animate-spin" />
+              )}
+              {cooldown > 0 ? `Wait ${cooldown}s` : "Send Verification Email"}
+            </Button>
+          </div>
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="mt-6 space-y-4">
+        <Field className="flex items-center justify-between">
+          <Label passive className="flex flex-col">
+            <span>Allow notifications from the platform</span>
+            <Text className="text-xs text-gray-500">
+              Send an email when a user interacts with you on the platform
+            </Text>
+          </Label>
+
+          <Switch
+            color="pink"
+            checked={emailNotifications}
+            onChange={setEmailNotifications}
+          />
+        </Field>
+
+        <Field className="flex items-center justify-between">
+          <Label passive className="flex flex-col">
+            <span>Weekly Newsletter</span>
+            <Text className="text-xs text-gray-500">
+              Receive our weekly newsletter
+            </Text>
+          </Label>
+
+          <Switch
+            color="pink"
+            checked={weeklyNewsletter}
+            onChange={setWeeklyNewsletter}
+          />
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <div className="flex justify-end space-x-4">
+        <Button color="dark/white" onClick={() => reset()}>
+          Reset
+        </Button>
+        <Button color="pink" type="submit" disabled={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save Changes"}
+        </Button>
       </div>
-    </div>
+    </form>
   );
 };
 
diff --git a/app/api/verify-email/route.ts b/app/api/verify-email/route.ts
index b9cb26b2..b34f8a43 100644
--- a/app/api/verify-email/route.ts
+++ b/app/api/verify-email/route.ts
@@ -1,44 +1,96 @@
 import { getServerAuthSession } from "@/server/auth";
+import { db } from "@/server/db";
 import {
-  deleteTokenFromDb,
-  getTokenFromDb,
-  updateEmail,
-} from "@/utils/emailToken";
-import { NextRequest, NextResponse } from "next/server";
+  emailChangeRequest,
+  user,
+  emailChangeHistory,
+} from "@/server/db/schema";
+import { and, eq, gte } from "drizzle-orm";
+import { type NextRequest } from "next/server";
 
-export async function GET(req: NextRequest, res: NextResponse) {
+export async function GET(req: NextRequest) {
   try {
     const token = req.nextUrl.searchParams.get("token");
 
-    if (!token)
-      return NextResponse.json({ message: "Invalid request" }, { status: 400 });
+    if (!token) {
+      return new Response(JSON.stringify({ message: "Invalid request" }), {
+        status: 400,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
 
     const session = await getServerAuthSession();
 
-    if (!session || !session.user)
-      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    if (!session || !session.user) {
+      return new Response(JSON.stringify({ message: "Unauthorized" }), {
+        status: 401,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
 
-    const tokenFromDb = await getTokenFromDb(token, session.user.id);
+    const userId = session.user.id;
 
-    if (!tokenFromDb || !tokenFromDb.length)
-      return NextResponse.json({ message: "Invalid token" }, { status: 400 });
+    const request = await db.query.emailChangeRequest.findFirst({
+      where: and(
+        eq(emailChangeRequest.token, token),
+        eq(emailChangeRequest.userId, userId),
+        gte(emailChangeRequest.expiresAt, new Date()),
+      ),
+    });
 
-    const { userId, expiresAt, email } = tokenFromDb[0];
-    if (expiresAt < new Date())
-      return NextResponse.json({ message: "Token expired" }, { status: 400 });
+    if (!request) {
+      return new Response(
+        JSON.stringify({ message: "Invalid or expired token" }),
+        {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
 
-    await updateEmail(userId, email);
+    const currentUser = await db.query.user.findFirst({
+      where: eq(user.id, userId),
+    });
 
-    await deleteTokenFromDb(token);
+    if (!currentUser) {
+      return new Response(JSON.stringify({ message: "User not found" }), {
+        status: 404,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
 
-    return NextResponse.json(
-      { message: "Email successfully verified" },
-      { status: 200 },
+    await db
+      .update(user)
+      .set({
+        email: request.newEmail,
+        emailVerified: new Date().toISOString(),
+      })
+      .where(eq(user.id, userId));
+
+    await db.insert(emailChangeHistory).values({
+      userId,
+      oldEmail: currentUser.email ?? "",
+      newEmail: request.newEmail,
+      ipAddress: req.headers.get("x-forwarded-for")?.split(",")[0].trim() ?? "",
+      userAgent: req.headers.get("user-agent") ?? "",
+    });
+
+    await db
+      .delete(emailChangeRequest)
+      .where(eq(emailChangeRequest.id, request.id));
+
+    return new Response(
+      JSON.stringify({ message: "Email updated successfully" }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      },
     );
   } catch (error) {
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 },
-    );
+    console.error("Error verifying email:", error);
+    return new Response(JSON.stringify({ error: "Internal server error" }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
   }
 }
diff --git a/drizzle/0010_email-tokens-and-indexes.sql b/drizzle/0010_email-tokens-and-indexes.sql
new file mode 100644
index 00000000..652db8ed
--- /dev/null
+++ b/drizzle/0010_email-tokens-and-indexes.sql
@@ -0,0 +1,39 @@
+CREATE TABLE IF NOT EXISTS "EmailChangeHistory" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"userId" text NOT NULL,
+	"oldEmail" text NOT NULL,
+	"newEmail" text NOT NULL,
+	"changedAt" timestamp DEFAULT now() NOT NULL,
+	"ipAddress" text,
+	"userAgent" text
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "EmailChangeRequest" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"userId" text NOT NULL,
+	"newEmail" text NOT NULL,
+	"token" text NOT NULL,
+	"createdAt" timestamp DEFAULT now() NOT NULL,
+	"expiresAt" timestamp NOT NULL,
+	CONSTRAINT "EmailChangeRequest_token_unique" UNIQUE("token")
+);
+--> statement-breakpoint
+DROP TABLE "EmailVerificationToken";--> statement-breakpoint
+DROP TABLE "verificationToken";--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "EmailChangeHistory" ADD CONSTRAINT "EmailChangeHistory_userId_user_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "EmailChangeRequest" ADD CONSTRAINT "EmailChangeRequest_userId_user_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+CREATE INDEX IF NOT EXISTS "Comment_postId_index" ON "Comment" USING btree ("postId");--> statement-breakpoint
+CREATE INDEX IF NOT EXISTS "Notification_userId_index" ON "Notification" USING btree ("userId");--> statement-breakpoint
+CREATE INDEX IF NOT EXISTS "Post_slug_index" ON "Post" USING btree ("slug");--> statement-breakpoint
+CREATE INDEX IF NOT EXISTS "Post_userId_index" ON "Post" USING btree ("userId");--> statement-breakpoint
+CREATE INDEX IF NOT EXISTS "User_username_index" ON "user" USING btree ("username");
\ No newline at end of file
diff --git a/drizzle/meta/0010_snapshot.json b/drizzle/meta/0010_snapshot.json
new file mode 100644
index 00000000..e441dbdb
--- /dev/null
+++ b/drizzle/meta/0010_snapshot.json
@@ -0,0 +1,1402 @@
+{
+  "id": "6449498f-2807-4e06-904c-1bbaaa37855a",
+  "prevId": "66e28e9b-8506-48ef-86d3-c1946263d419",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_providerAccountId_pk": {
+          "name": "account_provider_providerAccountId_pk",
+          "columns": ["provider", "providerAccountId"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "public.BannedUsers": {
+      "name": "BannedUsers",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "bannedById": {
+          "name": "bannedById",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "note": {
+          "name": "note",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "BannedUsers_userId_key": {
+          "name": "BannedUsers_userId_key",
+          "columns": [
+            {
+              "expression": "userId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "BannedUsers_userId_user_id_fk": {
+          "name": "BannedUsers_userId_user_id_fk",
+          "tableFrom": "BannedUsers",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "BannedUsers_bannedById_user_id_fk": {
+          "name": "BannedUsers_bannedById_user_id_fk",
+          "tableFrom": "BannedUsers",
+          "tableTo": "user",
+          "columnsFrom": ["bannedById"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "BannedUsers_id_unique": {
+          "name": "BannedUsers_id_unique",
+          "nullsNotDistinct": false,
+          "columns": ["id"]
+        }
+      }
+    },
+    "public.Bookmark": {
+      "name": "Bookmark",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "postId": {
+          "name": "postId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "Bookmark_userId_postId_key": {
+          "name": "Bookmark_userId_postId_key",
+          "columns": [
+            {
+              "expression": "postId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "userId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "Bookmark_postId_Post_id_fk": {
+          "name": "Bookmark_postId_Post_id_fk",
+          "tableFrom": "Bookmark",
+          "tableTo": "Post",
+          "columnsFrom": ["postId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Bookmark_userId_user_id_fk": {
+          "name": "Bookmark_userId_user_id_fk",
+          "tableFrom": "Bookmark",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "Bookmark_id_unique": {
+          "name": "Bookmark_id_unique",
+          "nullsNotDistinct": false,
+          "columns": ["id"]
+        }
+      }
+    },
+    "public.Comment": {
+      "name": "Comment",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "body": {
+          "name": "body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "postId": {
+          "name": "postId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "parentId": {
+          "name": "parentId",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "Comment_postId_index": {
+          "name": "Comment_postId_index",
+          "columns": [
+            {
+              "expression": "postId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "Comment_postId_Post_id_fk": {
+          "name": "Comment_postId_Post_id_fk",
+          "tableFrom": "Comment",
+          "tableTo": "Post",
+          "columnsFrom": ["postId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Comment_userId_user_id_fk": {
+          "name": "Comment_userId_user_id_fk",
+          "tableFrom": "Comment",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Comment_parentId_fkey": {
+          "name": "Comment_parentId_fkey",
+          "tableFrom": "Comment",
+          "tableTo": "Comment",
+          "columnsFrom": ["parentId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "Comment_id_unique": {
+          "name": "Comment_id_unique",
+          "nullsNotDistinct": false,
+          "columns": ["id"]
+        }
+      }
+    },
+    "public.EmailChangeHistory": {
+      "name": "EmailChangeHistory",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "oldEmail": {
+          "name": "oldEmail",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "newEmail": {
+          "name": "newEmail",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "changedAt": {
+          "name": "changedAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "ipAddress": {
+          "name": "ipAddress",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "userAgent": {
+          "name": "userAgent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "EmailChangeHistory_userId_user_id_fk": {
+          "name": "EmailChangeHistory_userId_user_id_fk",
+          "tableFrom": "EmailChangeHistory",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.EmailChangeRequest": {
+      "name": "EmailChangeRequest",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "newEmail": {
+          "name": "newEmail",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "expiresAt": {
+          "name": "expiresAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "EmailChangeRequest_userId_user_id_fk": {
+          "name": "EmailChangeRequest_userId_user_id_fk",
+          "tableFrom": "EmailChangeRequest",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "EmailChangeRequest_token_unique": {
+          "name": "EmailChangeRequest_token_unique",
+          "nullsNotDistinct": false,
+          "columns": ["token"]
+        }
+      }
+    },
+    "public.Flagged": {
+      "name": "Flagged",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "notifierId": {
+          "name": "notifierId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "note": {
+          "name": "note",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "postId": {
+          "name": "postId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "commentId": {
+          "name": "commentId",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "Flagged_userId_user_id_fk": {
+          "name": "Flagged_userId_user_id_fk",
+          "tableFrom": "Flagged",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Flagged_notifierId_user_id_fk": {
+          "name": "Flagged_notifierId_user_id_fk",
+          "tableFrom": "Flagged",
+          "tableTo": "user",
+          "columnsFrom": ["notifierId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Flagged_postId_Post_id_fk": {
+          "name": "Flagged_postId_Post_id_fk",
+          "tableFrom": "Flagged",
+          "tableTo": "Post",
+          "columnsFrom": ["postId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Flagged_commentId_Comment_id_fk": {
+          "name": "Flagged_commentId_Comment_id_fk",
+          "tableFrom": "Flagged",
+          "tableTo": "Comment",
+          "columnsFrom": ["commentId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "Flagged_id_unique": {
+          "name": "Flagged_id_unique",
+          "nullsNotDistinct": false,
+          "columns": ["id"]
+        }
+      }
+    },
+    "public.Like": {
+      "name": "Like",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "postId": {
+          "name": "postId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "commentId": {
+          "name": "commentId",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "Like_userId_commentId_key": {
+          "name": "Like_userId_commentId_key",
+          "columns": [
+            {
+              "expression": "userId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "commentId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "Like_userId_postId_key": {
+          "name": "Like_userId_postId_key",
+          "columns": [
+            {
+              "expression": "userId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "postId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "Like_userId_user_id_fk": {
+          "name": "Like_userId_user_id_fk",
+          "tableFrom": "Like",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Like_postId_Post_id_fk": {
+          "name": "Like_postId_Post_id_fk",
+          "tableFrom": "Like",
+          "tableTo": "Post",
+          "columnsFrom": ["postId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Like_commentId_Comment_id_fk": {
+          "name": "Like_commentId_Comment_id_fk",
+          "tableFrom": "Like",
+          "tableTo": "Comment",
+          "columnsFrom": ["commentId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "Like_id_unique": {
+          "name": "Like_id_unique",
+          "nullsNotDistinct": false,
+          "columns": ["id"]
+        }
+      }
+    },
+    "public.Notification": {
+      "name": "Notification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "type": {
+          "name": "type",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "postId": {
+          "name": "postId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "commentId": {
+          "name": "commentId",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "notifierId": {
+          "name": "notifierId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "Notification_userId_index": {
+          "name": "Notification_userId_index",
+          "columns": [
+            {
+              "expression": "userId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "Notification_userId_user_id_fk": {
+          "name": "Notification_userId_user_id_fk",
+          "tableFrom": "Notification",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Notification_postId_Post_id_fk": {
+          "name": "Notification_postId_Post_id_fk",
+          "tableFrom": "Notification",
+          "tableTo": "Post",
+          "columnsFrom": ["postId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Notification_commentId_Comment_id_fk": {
+          "name": "Notification_commentId_Comment_id_fk",
+          "tableFrom": "Notification",
+          "tableTo": "Comment",
+          "columnsFrom": ["commentId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "Notification_notifierId_user_id_fk": {
+          "name": "Notification_notifierId_user_id_fk",
+          "tableFrom": "Notification",
+          "tableTo": "user",
+          "columnsFrom": ["notifierId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "Notification_id_unique": {
+          "name": "Notification_id_unique",
+          "nullsNotDistinct": false,
+          "columns": ["id"]
+        }
+      }
+    },
+    "public.Post": {
+      "name": "Post",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "canonicalUrl": {
+          "name": "canonicalUrl",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "coverImage": {
+          "name": "coverImage",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "approved": {
+          "name": "approved",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "body": {
+          "name": "body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "excerpt": {
+          "name": "excerpt",
+          "type": "varchar(156)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "readTimeMins": {
+          "name": "readTimeMins",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "published": {
+          "name": "published",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "showComments": {
+          "name": "showComments",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "likes": {
+          "name": "likes",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "Post_id_key": {
+          "name": "Post_id_key",
+          "columns": [
+            {
+              "expression": "id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "Post_slug_key": {
+          "name": "Post_slug_key",
+          "columns": [
+            {
+              "expression": "slug",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "Post_slug_index": {
+          "name": "Post_slug_index",
+          "columns": [
+            {
+              "expression": "slug",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "Post_userId_index": {
+          "name": "Post_userId_index",
+          "columns": [
+            {
+              "expression": "userId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "Post_userId_user_id_fk": {
+          "name": "Post_userId_user_id_fk",
+          "tableFrom": "Post",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "Post_id_unique": {
+          "name": "Post_id_unique",
+          "nullsNotDistinct": false,
+          "columns": ["id"]
+        }
+      }
+    },
+    "public.PostTag": {
+      "name": "PostTag",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "tagId": {
+          "name": "tagId",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "postId": {
+          "name": "postId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "PostTag_tagId_postId_key": {
+          "name": "PostTag_tagId_postId_key",
+          "columns": [
+            {
+              "expression": "tagId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "postId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "PostTag_tagId_Tag_id_fk": {
+          "name": "PostTag_tagId_Tag_id_fk",
+          "tableFrom": "PostTag",
+          "tableTo": "Tag",
+          "columnsFrom": ["tagId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "PostTag_postId_Post_id_fk": {
+          "name": "PostTag_postId_Post_id_fk",
+          "tableFrom": "PostTag",
+          "tableTo": "Post",
+          "columnsFrom": ["postId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.Tag": {
+      "name": "Tag",
+      "schema": "",
+      "columns": {
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "varchar(20)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "Tag_title_key": {
+          "name": "Tag_title_key",
+          "columns": [
+            {
+              "expression": "title",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "Tag_id_unique": {
+          "name": "Tag_id_unique",
+          "nullsNotDistinct": false,
+          "columns": ["id"]
+        }
+      }
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "username": {
+          "name": "username",
+          "type": "varchar(40)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'/images/person.png'"
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "bio": {
+          "name": "bio",
+          "type": "varchar(200)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "location": {
+          "name": "location",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "websiteUrl": {
+          "name": "websiteUrl",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "emailNotifications": {
+          "name": "emailNotifications",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "newsletter": {
+          "name": "newsletter",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "gender": {
+          "name": "gender",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "dateOfBirth": {
+          "name": "dateOfBirth",
+          "type": "timestamp(3) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "professionalOrStudent": {
+          "name": "professionalOrStudent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "workplace": {
+          "name": "workplace",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "jobTitle": {
+          "name": "jobTitle",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "levelOfStudy": {
+          "name": "levelOfStudy",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "course": {
+          "name": "course",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "role": {
+          "name": "role",
+          "type": "Role",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'USER'"
+        }
+      },
+      "indexes": {
+        "User_username_key": {
+          "name": "User_username_key",
+          "columns": [
+            {
+              "expression": "username",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "User_email_key": {
+          "name": "User_email_key",
+          "columns": [
+            {
+              "expression": "email",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "User_username_id_idx": {
+          "name": "User_username_id_idx",
+          "columns": [
+            {
+              "expression": "id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "username",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "User_username_index": {
+          "name": "User_username_index",
+          "columns": [
+            {
+              "expression": "username",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {
+    "public.Role": {
+      "name": "Role",
+      "schema": "public",
+      "values": ["MODERATOR", "ADMIN", "USER"]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index cbdf766d..bee95933 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -71,6 +71,13 @@
       "when": 1728461582872,
       "tag": "0009_email-verification",
       "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "7",
+      "when": 1728680482423,
+      "tag": "0010_email-tokens-and-indexes",
+      "breakpoints": true
     }
   ]
 }
diff --git a/package-lock.json b/package-lock.json
index b08b026f..8e5e2eff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19126,4 +19126,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/server/api/router/profile.ts b/server/api/router/profile.ts
index 4fe2c75c..6c274302 100644
--- a/server/api/router/profile.ts
+++ b/server/api/router/profile.ts
@@ -1,4 +1,4 @@
-import { user } from "@/server/db/schema";
+import { user, emailChangeHistory } from "@/server/db/schema";
 import {
   saveSettingsSchema,
   getProfileSchema,
@@ -15,15 +15,12 @@ import {
 } from "@/server/lib/newsletter";
 import { TRPCError } from "@trpc/server";
 import { nanoid } from "nanoid";
-import { eq } from "drizzle-orm";
+import { and, eq, gte } from "drizzle-orm";
 import { emailTokenReqSchema } from "@/schema/token";
-import {
-  checkIfEmailExists,
-  generateEmailToken,
-  sendVerificationEmail,
-  storeTokenInDb,
-} from "@/utils/emailToken";
+import { generateEmailToken, sendVerificationEmail } from "@/utils/emailToken";
 import { TOKEN_EXPIRATION_TIME } from "@/config/constants";
+import { emailChangeRequest } from "@/server/db/schema";
+import { z } from "zod";
 
 export const profileRouter = createTRPCRouter({
   edit: protectedProcedure
@@ -137,39 +134,67 @@ export const profileRouter = createTRPCRouter({
   updateEmail: protectedProcedure
     .input(emailTokenReqSchema)
     .mutation(async ({ input, ctx }) => {
-      try {
-        const { newEmail } = input;
+      const { newEmail } = input;
+      const userId = ctx.session.user.id;
 
-        if (!newEmail) {
-          throw new TRPCError({
-            code: "BAD_REQUEST",
-            message: "Invalid request",
-          });
-        }
+      if (!newEmail) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Invalid request",
+        });
+      }
 
-        const ifEmailExists = await checkIfEmailExists(newEmail);
+      // Check if the new email is already in use
+      const existingUser = await ctx.db.query.user.findFirst({
+        where: eq(user.email, newEmail),
+      });
 
-        if (ifEmailExists) {
-          throw new TRPCError({
-            code: "BAD_REQUEST",
-            message: "Email already exists",
-          });
-        }
+      if (existingUser) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Unable to process the request",
+        });
+      }
+
+      // Rate limiting: Check for recent requests
+      const twoMinutesAgo = new Date(Date.now() - 2 * 60 * 1000);
+      const recentRequest = await ctx.db.query.emailChangeRequest.findFirst({
+        where: and(
+          eq(emailChangeRequest.userId, userId),
+          gte(emailChangeRequest.createdAt, twoMinutesAgo), // 2 minutes
+        ),
+      });
+
+      if (recentRequest) {
+        throw new TRPCError({
+          code: "TOO_MANY_REQUESTS",
+          message: "Please wait before requesting another email change",
+        });
+      }
 
-        const userId = ctx.session.user.id;
+      // Generate a new token and expiration date
+      const token = generateEmailToken();
+      const expiresAt = new Date(Date.now() + TOKEN_EXPIRATION_TIME);
 
-        const token = generateEmailToken();
-        const expiresAt = new Date(Date.now() + TOKEN_EXPIRATION_TIME);
+      // Create a new email change request
+      await ctx.db.insert(emailChangeRequest).values({
+        userId,
+        newEmail,
+        token,
+        expiresAt,
+      });
 
-        await storeTokenInDb(userId, token, expiresAt, newEmail);
+      // Send verification email
+      try {
         await sendVerificationEmail(newEmail, token);
-
-        return { message: "Verification email sent" };
-      } catch (error: any) {
+      } catch (error) {
+        console.error("Failed to send verification email:", error);
         throw new TRPCError({
-          code: error.code || "INTERNAL_SERVER_ERROR",
-          message: error.message || "Internal server error",
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to send verification email",
         });
       }
+
+      return { message: "Verification email sent" };
     }),
 });
diff --git a/server/db/schema.ts b/server/db/schema.ts
index 2b276a77..864b20b3 100644
--- a/server/db/schema.ts
+++ b/server/db/schema.ts
@@ -28,6 +28,14 @@ export const session = pgTable("session", {
   expires: timestamp("expires", { mode: "date" }).notNull(),
 });
 
+// Add this new relation definition for the session table
+export const sessionRelations = relations(session, ({ one }) => ({
+  user: one(user, {
+    fields: [session.userId],
+    references: [user.id],
+  }),
+}));
+
 export const account = pgTable(
   "account",
   {
@@ -52,6 +60,10 @@ export const account = pgTable(
   }),
 );
 
+export const accountRelations = relations(account, ({ one }) => ({
+  user: one(user, { fields: [account.userId], references: [user.id] }),
+}));
+
 export const post_tag = pgTable(
   "PostTag",
   {
@@ -101,29 +113,6 @@ export const tagRelations = relations(tag, ({ one, many }) => ({
   PostTag: many(post_tag),
 }));
 
-export const verificationToken = pgTable(
-  "verificationToken",
-  {
-    identifier: text("identifier").notNull(),
-    token: text("token").notNull(),
-    expires: timestamp("expires", { mode: "date" }).notNull(),
-  },
-  (vt) => ({
-    compoundKey: primaryKey({ columns: [vt.identifier, vt.token] }),
-  }),
-);
-
-export const emailVerificationToken = pgTable("EmailVerificationToken", {
-  id: serial("id").primaryKey(),
-  token: text("token").unique().notNull(),
-  createdAt: timestamp("createdAt").defaultNow().notNull(),
-  expiresAt: timestamp("expiresAt").notNull(),
-  email: text("email").notNull().unique(),
-  userId: text("userId")
-    .notNull()
-    .references(() => user.id),
-});
-
 export const post = pgTable(
   "Post",
   {
@@ -166,6 +155,8 @@ export const post = pgTable(
     return {
       idKey: uniqueIndex("Post_id_key").on(table.id),
       slugKey: uniqueIndex("Post_slug_key").on(table.slug),
+      slugIndex: index("Post_slug_index").on(table.slug),
+      userIdIndex: index("Post_userId_index").on(table.userId), // Add this line
     };
   },
 );
@@ -233,27 +224,33 @@ export const user = pgTable(
       usernameKey: uniqueIndex("User_username_key").on(table.username),
       emailKey: uniqueIndex("User_email_key").on(table.email),
       usernameIdIdx: index("User_username_id_idx").on(table.id, table.username),
+      usernameIndex: index("User_username_index").on(table.username), // Add this line
     };
   },
 );
 
 export const userRelations = relations(user, ({ one, many }) => ({
-  accounts: many(account, { relationName: "account" }),
+  accounts: many(account),
   bans: many(banned_users, { relationName: "bans" }),
-  BannedUsers: one(banned_users, {
+  bannedUsers: one(banned_users, {
     fields: [user.id],
     references: [banned_users.userId],
-    relationName: "BannedUsers",
   }),
   bookmarks: many(bookmark),
   comments: many(comment),
-  flaggedNotifier: many(flagged),
-  Flagged: many(flagged),
+  flaggedByUser: many(flagged, { relationName: "flaggedByUser" }),
+  flaggedContent: many(flagged, { relationName: "flaggedContent" }),
   likes: many(like),
-  notfier: many(notification),
-  notification: many(notification),
+  notificationsCreated: many(notification, {
+    relationName: "notificationsCreated",
+  }),
+  notificationsReceived: many(notification, {
+    relationName: "notificationsReceived",
+  }),
   posts: many(post),
-  sessions: many(session),
+  sessions: many(session), // This should now be correctly inferred
+  emailChangeRequests: many(emailChangeRequest),
+  emailChangeHistory: many(emailChangeHistory),
 }));
 
 export const bookmark = pgTable(
@@ -319,6 +316,7 @@ export const comment = pgTable(
       })
         .onUpdate("cascade")
         .onDelete("cascade"),
+      postIdIndex: index("Comment_postId_index").on(table.postId), // Add this line
     };
   },
 );
@@ -414,21 +412,17 @@ export const banned_users = pgTable(
   },
 );
 
-export const banned_usersRelations = relations(
-  banned_users,
-  ({ one, many }) => ({
-    bannedBy: one(user, {
-      fields: [banned_users.bannedById],
-      references: [user.id],
-      relationName: "bannedBy",
-    }),
-    user: one(user, {
-      fields: [banned_users.userId],
-      references: [user.id],
-      relationName: "user",
-    }),
+export const banned_usersRelations = relations(banned_users, ({ one }) => ({
+  bannedBy: one(user, {
+    fields: [banned_users.bannedById],
+    references: [user.id],
+    relationName: "bans",
   }),
-);
+  user: one(user, {
+    fields: [banned_users.userId],
+    references: [user.id],
+  }),
+}));
 
 export const flagged = pgTable("Flagged", {
   id: serial("id").primaryKey().notNull().unique(),
@@ -464,63 +458,124 @@ export const flagged = pgTable("Flagged", {
   }),
 });
 
-export const flaggedRelations = relations(flagged, ({ one, many }) => ({
+export const flaggedRelations = relations(flagged, ({ one }) => ({
   comment: one(comment, {
     fields: [flagged.commentId],
     references: [comment.id],
   }),
-  notifier: one(user, { fields: [flagged.notifierId], references: [user.id] }),
+  notifier: one(user, {
+    fields: [flagged.notifierId],
+    references: [user.id],
+    relationName: "flaggedByUser",
+  }),
   post: one(post, { fields: [flagged.postId], references: [post.id] }),
-  user: one(user, { fields: [flagged.userId], references: [user.id] }),
+  user: one(user, {
+    fields: [flagged.userId],
+    references: [user.id],
+    relationName: "flaggedContent",
+  }),
 }));
 
-export const notification = pgTable("Notification", {
-  id: serial("id").primaryKey().notNull().unique(),
-  createdAt: timestamp("createdAt", {
-    precision: 3,
-    mode: "string",
-    withTimezone: true,
-  })
-    .default(sql`CURRENT_TIMESTAMP`)
-    .notNull(),
-  updatedAt: timestamp("updatedAt", {
-    precision: 3,
-    mode: "string",
-    withTimezone: true,
-  })
-    .notNull()
-    .$onUpdate(() => new Date().toISOString())
-    .default(sql`CURRENT_TIMESTAMP`),
-  type: integer("type").notNull(),
-  userId: text("userId")
-    .notNull()
-    .references(() => user.id, { onDelete: "cascade", onUpdate: "cascade" }),
-  postId: text("postId").references(() => post.id, {
-    onDelete: "cascade",
-    onUpdate: "cascade",
+export const notification = pgTable(
+  "Notification",
+  {
+    id: serial("id").primaryKey().notNull().unique(),
+    createdAt: timestamp("createdAt", {
+      precision: 3,
+      mode: "string",
+      withTimezone: true,
+    })
+      .default(sql`CURRENT_TIMESTAMP`)
+      .notNull(),
+    updatedAt: timestamp("updatedAt", {
+      precision: 3,
+      mode: "string",
+      withTimezone: true,
+    })
+      .notNull()
+      .$onUpdate(() => new Date().toISOString())
+      .default(sql`CURRENT_TIMESTAMP`),
+    type: integer("type").notNull(),
+    userId: text("userId")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade", onUpdate: "cascade" }),
+    postId: text("postId").references(() => post.id, {
+      onDelete: "cascade",
+      onUpdate: "cascade",
+    }),
+    commentId: integer("commentId").references(() => comment.id, {
+      onDelete: "cascade",
+      onUpdate: "cascade",
+    }),
+    notifierId: text("notifierId").references(() => user.id, {
+      onDelete: "cascade",
+      onUpdate: "cascade",
+    }),
+  },
+  (table) => {
+    return {
+      userIdIndex: index("Notification_userId_index").on(table.userId),
+    };
+  },
+);
+
+export const notificationRelations = relations(notification, ({ one }) => ({
+  comment: one(comment, {
+    fields: [notification.commentId],
+    references: [comment.id],
   }),
-  commentId: integer("commentId").references(() => comment.id, {
-    onDelete: "cascade",
-    onUpdate: "cascade",
+  notifier: one(user, {
+    fields: [notification.notifierId],
+    references: [user.id],
+    relationName: "notificationsCreated",
   }),
-  notifierId: text("notifierId").references(() => user.id, {
-    onDelete: "cascade",
-    onUpdate: "cascade",
+  post: one(post, { fields: [notification.postId], references: [post.id] }),
+  user: one(user, {
+    fields: [notification.userId],
+    references: [user.id],
+    relationName: "notificationsReceived",
   }),
+}));
+
+export const emailChangeRequest = pgTable("EmailChangeRequest", {
+  id: serial("id").primaryKey(),
+  userId: text("userId")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  newEmail: text("newEmail").notNull(),
+  token: text("token").notNull().unique(),
+  createdAt: timestamp("createdAt").defaultNow().notNull(),
+  expiresAt: timestamp("expiresAt").notNull(),
 });
 
-export const notificationRelations = relations(
-  notification,
-  ({ one, many }) => ({
-    comment: one(comment, {
-      fields: [notification.commentId],
-      references: [comment.id],
+export const emailChangeRequestRelations = relations(
+  emailChangeRequest,
+  ({ one }) => ({
+    user: one(user, {
+      fields: [emailChangeRequest.userId],
+      references: [user.id],
     }),
-    notifier: one(user, {
-      fields: [notification.notifierId],
+  }),
+);
+
+export const emailChangeHistory = pgTable("EmailChangeHistory", {
+  id: serial("id").primaryKey(),
+  userId: text("userId")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  oldEmail: text("oldEmail").notNull(),
+  newEmail: text("newEmail").notNull(),
+  changedAt: timestamp("changedAt").defaultNow().notNull(),
+  ipAddress: text("ipAddress"),
+  userAgent: text("userAgent"),
+});
+
+export const emailChangeHistoryRelations = relations(
+  emailChangeHistory,
+  ({ one }) => ({
+    user: one(user, {
+      fields: [emailChangeHistory.userId],
       references: [user.id],
     }),
-    post: one(post, { fields: [notification.postId], references: [post.id] }),
-    user: one(user, { fields: [notification.userId], references: [user.id] }),
   }),
 );
diff --git a/utils/emailToken.ts b/utils/emailToken.ts
index 0e6681e3..487d6c38 100644
--- a/utils/emailToken.ts
+++ b/utils/emailToken.ts
@@ -1,39 +1,22 @@
 import { db } from "@/server/db";
-import { emailVerificationToken, user } from "@/server/db/schema";
+import { user } from "@/server/db/schema";
 import crypto from "crypto";
 import sendEmail from "./sendEmail";
-import { and, eq } from "drizzle-orm";
+import { eq } from "drizzle-orm";
+
+function getBaseUrl() {
+  if (typeof window !== "undefined") return "";
+  const env = process.env.DOMAIN_NAME || process.env.VERCEL_URL;
+  if (env) return "https://" + env;
+  return "http://localhost:3000";
+}
 
 export const generateEmailToken = () => {
   return crypto.randomBytes(64).toString("hex");
 };
 
-export const storeTokenInDb = async (
-  userId: string,
-  token: string,
-  expiresAt: Date,
-  email: string,
-) => {
-  try {
-    const newToken = await db
-      .insert(emailVerificationToken)
-      .values({
-        userId,
-        token,
-        expiresAt,
-        email,
-      })
-      .returning();
-
-    return newToken[0];
-  } catch (error) {
-    console.error("Error storing token in database:", error);
-    throw new Error("Failed to store email verification token");
-  }
-};
-
 export const sendVerificationEmail = async (email: string, token: string) => {
-  const verificationLink = `${process.env.NEXT_PUBLIC_BACKEND_URL}/verify-email?token=${token}`;
+  const verificationLink = `${getBaseUrl()}/verify-email?token=${token}`;
   const subject = "Verify Your Email Address";
   const htmlMessage = `
     <!DOCTYPE html>
@@ -111,24 +94,6 @@ export const sendVerificationEmail = async (email: string, token: string) => {
   }
 };
 
-export const getTokenFromDb = async (token: string, userId: string) => {
-  try {
-    const tokenFromDb = await db
-      .select()
-      .from(emailVerificationToken)
-      .where(
-        and(
-          eq(emailVerificationToken.token, token),
-          eq(emailVerificationToken.userId, userId),
-        ),
-      );
-    return tokenFromDb;
-  } catch (error) {
-    console.error("Error fetching token from database:", error);
-    throw new Error("Failed to fetch email verification token");
-  }
-};
-
 export const updateEmail = async (userId: string, newEmail: string) => {
   try {
     await db.update(user).set({ email: newEmail }).where(eq(user.id, userId));
@@ -138,17 +103,6 @@ export const updateEmail = async (userId: string, newEmail: string) => {
   }
 };
 
-export const deleteTokenFromDb = async (token: string) => {
-  try {
-    await db
-      .delete(emailVerificationToken)
-      .where(eq(emailVerificationToken.token, token));
-  } catch (error) {
-    console.error("Error deleting token from database:", error);
-    throw new Error("Failed to delete email verification token");
-  }
-};
-
 export const checkIfEmailExists = async (email: string) => {
   try {
     const existingUser = await db.query.user.findFirst({