From 0a319a9330d7f47eed05cdd3e418979e63488d6f Mon Sep 17 00:00:00 2001
From: jonathanzhu <jiasunzhu@gmail.com>
Date: Fri, 1 Aug 2025 01:50:44 -0400
Subject: [PATCH 1/5] feat: add rate limit by user

---
 app/auth/confirm/actions.ts | 14 +++++++++++---
 app/auth/confirm/page.tsx   | 12 ++++++++++--
 app/rateLimiter.ts          | 35 +++++++++++++++++++++++++++++++++++
 app/signin/Form.tsx         |  2 +-
 app/signin/actions.ts       |  1 +
 app/signup/Form.tsx         |  2 +-
 app/signup/actions.ts       |  2 +-
 package.json                |  3 +++
 supabase/config.toml        |  6 +++---
 9 files changed, 66 insertions(+), 11 deletions(-)
 create mode 100644 app/rateLimiter.ts

diff --git a/app/auth/confirm/actions.ts b/app/auth/confirm/actions.ts
index 9e5e8fc..d773a59 100644
--- a/app/auth/confirm/actions.ts
+++ b/app/auth/confirm/actions.ts
@@ -3,8 +3,9 @@
 import { createClient, createAdminClient } from "@/utils/supabase/server";
 import { redirect } from "next/navigation";
 import dayjs from "dayjs";
+import { queryRateLimit } from "@/app/rateLimiter";
 
-const ms_to_minute = 60 * 1000;
+const minutes_to_ms = 60 * 1000;
 
 export const verifyToken = async (email: string, token: string) => {
     // const token = formData.get("token")?.toString();
@@ -29,6 +30,11 @@ export const verifyToken = async (email: string, token: string) => {
 export const resendMagicLink = async (email: string) => {
     const supabase = await createClient();
 
+    const { error: RateLimitError } = await queryRateLimit(email);
+    if (RateLimitError) {
+        return { error: RateLimitError };
+    }
+
     const { error } = await supabase.auth.signInWithOtp({
         email,
         options: {
@@ -38,8 +44,10 @@ export const resendMagicLink = async (email: string) => {
     });
 
     if (error) {
-        console.error(error.code + " " + error.message);
+        return { error };
     }
+
+    return {};
 };
 
 // TODO: decide on how much time to allow users to be able to enter code for
@@ -67,7 +75,7 @@ export const canLoadPage = async (email: string) => {
     m_time.add(20, "minute"); //  change this to minutes later
     // console.log(dayjs());
     console.log("difference", dayjs().diff(m_time));
-    if (dayjs().diff(m_time) < 20 * ms_to_minute) {
+    if (dayjs().diff(m_time) < 20 * minutes_to_ms) {
         return true;
     }
 
diff --git a/app/auth/confirm/page.tsx b/app/auth/confirm/page.tsx
index 92eeecf..1c0cf99 100644
--- a/app/auth/confirm/page.tsx
+++ b/app/auth/confirm/page.tsx
@@ -25,6 +25,9 @@ export default function Confirm() {
     const [value, setValue] = useState("");
     const [disabled, setDisabled] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
+    const [rateLimitError, setRateLimitError] = useState<string | undefined>(
+        undefined
+    );
     const { focusRef, setFocus } = useInputFocus();
 
     useEffect(() => {
@@ -103,8 +106,13 @@ export default function Confirm() {
                     <div className="flex-1">
                         <Button
                             className="w-full"
-                            onClick={() => {
-                                resendMagicLink(email);
+                            onClick={async () => {
+                                const { error } = await resendMagicLink(email);
+                                console.log(
+                                    "error got when click resend: ",
+                                    error?.message
+                                );
+                                setError(error?.message);
                             }}
                         >
                             Resend
diff --git a/app/rateLimiter.ts b/app/rateLimiter.ts
new file mode 100644
index 0000000..b37dcd0
--- /dev/null
+++ b/app/rateLimiter.ts
@@ -0,0 +1,35 @@
+"use server";
+
+import { Ratelimit } from "@upstash/ratelimit"; // for deno: see above
+import { Redis } from "@upstash/redis";
+
+// Create a new ratelimiter, that allows 10 requests per 10 seconds
+const ratelimit = new Ratelimit({
+    redis: Redis.fromEnv(),
+    limiter: Ratelimit.slidingWindow(2, "20 m"), // 2 requests per 20 minutes
+    analytics: true,
+});
+
+const ms_to_seconds = 1 / 1000;
+
+// Query rate limit server side from redis cache
+export async function queryRateLimit(email: string) {
+    const { success, reset } = await ratelimit.limit(email);
+
+    // Rate limit resend
+    if (!success) {
+        const timeToTryAgain = (reset - Date.now()) * ms_to_seconds; // time to try again in seconds
+        const minutes = Math.floor(timeToTryAgain / 60);
+        const seconds = Math.floor(timeToTryAgain - minutes * 60);
+
+        return {
+            error: {
+                message: `Resend rate limit reached, try again in ${minutes.toString()}:${seconds
+                    .toString()
+                    .padStart(2, "0")}`,
+            },
+        };
+    }
+
+    return {};
+}
diff --git a/app/signin/Form.tsx b/app/signin/Form.tsx
index d35d7dc..069bf04 100644
--- a/app/signin/Form.tsx
+++ b/app/signin/Form.tsx
@@ -28,7 +28,7 @@ export default function SigninForm() {
                 console.log("Success");
                 const { error } = await signInAction(email);
                 if (error) {
-                    setEmailError("Email not registered");
+                    setEmailError(error?.message);
                 } else {
                     redirect(`/auth/confirm?email=${email}`);
                 }
diff --git a/app/signin/actions.ts b/app/signin/actions.ts
index 01b843f..2318248 100644
--- a/app/signin/actions.ts
+++ b/app/signin/actions.ts
@@ -12,6 +12,7 @@ export const signInAction = async (email: string) => {
         },
     });
 
+    // Catch user not registered error
     if (error) return { error };
 
     return {}; // return email in auth/confirm link as a search param
diff --git a/app/signup/Form.tsx b/app/signup/Form.tsx
index 9c3bb5b..0f9ebe0 100644
--- a/app/signup/Form.tsx
+++ b/app/signup/Form.tsx
@@ -34,7 +34,7 @@ export default function SignupForm() {
                 console.log("Success");
                 const { error } = await signUpAction(name, email);
                 if (error) {
-                    setEmailError("Email registered");
+                    setEmailError(error?.message);
                 } else {
                     redirect(`/auth/confirm?email=${email}`);
                 }
diff --git a/app/signup/actions.ts b/app/signup/actions.ts
index 9d80129..0d88b11 100644
--- a/app/signup/actions.ts
+++ b/app/signup/actions.ts
@@ -13,7 +13,7 @@ export const signUpAction = async (name: string, email: string) => {
 
     console.log("data found for user email on signup", data);
     if (data?.length) {
-        return { error: 1 };
+        return { error: { message: "Email Registered" } };
     }
 
     const { error } = await supabase.auth.signInWithOtp({
diff --git a/package.json b/package.json
index 7edec1e..d85c14f 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,13 @@
         "@supabase/ssr": "^0.6.1",
         "@supabase/supabase-js": "^2.49.4",
         "@types/three": "^0.176.0",
+        "@upstash/ratelimit": "^2.0.6",
+        "@upstash/redis": "^1.35.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "dayjs": "^1.11.13",
+        "dompurify": "^3.2.6",
         "dotenv": "^16.5.0",
         "eslint-plugin-unused-imports": "^4.1.4",
         "framer-motion": "^12.16.0",
diff --git a/supabase/config.toml b/supabase/config.toml
index a2edb7d..b3fd0b7 100644
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -129,7 +129,7 @@ password_requirements = ""
 
 [auth.rate_limit]
 # Number of emails that can be sent per hour. Requires auth.email.smtp to be enabled.
-email_sent = 2
+email_sent = 4000
 # Number of SMS messages that can be sent per hour. Requires auth.sms to be enabled.
 sms_sent = 30
 # Number of anonymous sign-ins that can be made per hour per IP address. Requires enable_anonymous_sign_ins = true.
@@ -158,11 +158,11 @@ enable_confirmations = true
 # If enabled, users will need to reauthenticate or have logged in recently to change their password.
 secure_password_change = false
 # Controls the minimum amount of time that must pass before sending another signup confirmation or password reset email.
-max_frequency = "1s"
+max_frequency = "0s"
 # Number of characters used in the email OTP.
 otp_length = 6
 # Number of seconds before the email OTP expires (defaults to 1 hour).
-otp_expiry = 3600
+otp_expiry = 1200
 
 # Use a production-ready SMTP server
 # [auth.email.smtp]

From 81358ff2a9a8d9d17ef53f2292c33961a09296d9 Mon Sep 17 00:00:00 2001
From: jonathanzhu <jiasunzhu@gmail.com>
Date: Fri, 1 Aug 2025 01:50:44 -0400
Subject: [PATCH 2/5] feat: add rate limit by user

---
 app/auth/confirm/actions.ts | 14 +++++++++++---
 app/auth/confirm/page.tsx   | 12 ++++++++++--
 app/rateLimiter.ts          | 35 +++++++++++++++++++++++++++++++++++
 app/signin/Form.tsx         |  2 +-
 app/signin/actions.ts       |  1 +
 app/signup/Form.tsx         |  2 +-
 app/signup/actions.ts       |  2 +-
 package.json                |  3 +++
 supabase/config.toml        |  6 +++---
 9 files changed, 66 insertions(+), 11 deletions(-)
 create mode 100644 app/rateLimiter.ts

diff --git a/app/auth/confirm/actions.ts b/app/auth/confirm/actions.ts
index 36aa71d..f9de227 100644
--- a/app/auth/confirm/actions.ts
+++ b/app/auth/confirm/actions.ts
@@ -3,8 +3,9 @@
 import { createClient, createAdminClient } from "@/utils/supabase/server";
 import { redirect } from "next/navigation";
 import dayjs from "dayjs";
+import { queryRateLimit } from "@/app/rateLimiter";
 
-const ms_to_minute = 60 * 1000;
+const minutes_to_ms = 60 * 1000;
 
 export const verifyToken = async (email: string, token: string) => {
     // const token = formData.get("token")?.toString();
@@ -27,6 +28,11 @@ export const verifyToken = async (email: string, token: string) => {
 export const resendMagicLink = async (email: string) => {
     const supabase = await createClient();
 
+    const { error: RateLimitError } = await queryRateLimit(email);
+    if (RateLimitError) {
+        return { error: RateLimitError };
+    }
+
     const { error } = await supabase.auth.signInWithOtp({
         email,
         options: {
@@ -36,8 +42,10 @@ export const resendMagicLink = async (email: string) => {
     });
 
     if (error) {
-        console.error(error.code + " " + error.message);
+        return { error };
     }
+
+    return {};
 };
 
 // TODO: decide on how much time to allow users to be able to enter code for
@@ -62,7 +70,7 @@ export const canLoadPage = async (email: string) => {
     m_time.add(20, "minute"); //  change this to minutes later
     // console.log(dayjs());
     console.log("difference", dayjs().diff(m_time));
-    if (dayjs().diff(m_time) < 20 * ms_to_minute) {
+    if (dayjs().diff(m_time) < 20 * minutes_to_ms) {
         return true;
     }
 
diff --git a/app/auth/confirm/page.tsx b/app/auth/confirm/page.tsx
index 5def1d2..cc8273e 100644
--- a/app/auth/confirm/page.tsx
+++ b/app/auth/confirm/page.tsx
@@ -21,6 +21,9 @@ export default function Confirm() {
     const [value, setValue] = useState("");
     const [disabled, setDisabled] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
+    const [rateLimitError, setRateLimitError] = useState<string | undefined>(
+        undefined
+    );
     const { focusRef, setFocus } = useInputFocus();
 
     useEffect(() => {
@@ -99,8 +102,13 @@ export default function Confirm() {
                     <div className="flex-1">
                         <Button
                             className="w-full"
-                            onClick={() => {
-                                resendMagicLink(email);
+                            onClick={async () => {
+                                const { error } = await resendMagicLink(email);
+                                console.log(
+                                    "error got when click resend: ",
+                                    error?.message
+                                );
+                                setError(error?.message);
                             }}
                         >
                             Resend
diff --git a/app/rateLimiter.ts b/app/rateLimiter.ts
new file mode 100644
index 0000000..b37dcd0
--- /dev/null
+++ b/app/rateLimiter.ts
@@ -0,0 +1,35 @@
+"use server";
+
+import { Ratelimit } from "@upstash/ratelimit"; // for deno: see above
+import { Redis } from "@upstash/redis";
+
+// Create a new ratelimiter, that allows 10 requests per 10 seconds
+const ratelimit = new Ratelimit({
+    redis: Redis.fromEnv(),
+    limiter: Ratelimit.slidingWindow(2, "20 m"), // 2 requests per 20 minutes
+    analytics: true,
+});
+
+const ms_to_seconds = 1 / 1000;
+
+// Query rate limit server side from redis cache
+export async function queryRateLimit(email: string) {
+    const { success, reset } = await ratelimit.limit(email);
+
+    // Rate limit resend
+    if (!success) {
+        const timeToTryAgain = (reset - Date.now()) * ms_to_seconds; // time to try again in seconds
+        const minutes = Math.floor(timeToTryAgain / 60);
+        const seconds = Math.floor(timeToTryAgain - minutes * 60);
+
+        return {
+            error: {
+                message: `Resend rate limit reached, try again in ${minutes.toString()}:${seconds
+                    .toString()
+                    .padStart(2, "0")}`,
+            },
+        };
+    }
+
+    return {};
+}
diff --git a/app/signin/Form.tsx b/app/signin/Form.tsx
index e3e07ef..e861256 100644
--- a/app/signin/Form.tsx
+++ b/app/signin/Form.tsx
@@ -28,7 +28,7 @@ export default function SigninForm() {
                 console.log("Success");
                 const { error } = await signInAction(email);
                 if (error) {
-                    setEmailError("Email not registered");
+                    setEmailError(error?.message);
                 } else {
                     redirect(`/auth/confirm?email=${email}`);
                 }
diff --git a/app/signin/actions.ts b/app/signin/actions.ts
index 01b843f..2318248 100644
--- a/app/signin/actions.ts
+++ b/app/signin/actions.ts
@@ -12,6 +12,7 @@ export const signInAction = async (email: string) => {
         },
     });
 
+    // Catch user not registered error
     if (error) return { error };
 
     return {}; // return email in auth/confirm link as a search param
diff --git a/app/signup/Form.tsx b/app/signup/Form.tsx
index e13800e..c0cf19a 100644
--- a/app/signup/Form.tsx
+++ b/app/signup/Form.tsx
@@ -34,7 +34,7 @@ export default function SignupForm() {
                 console.log("Success");
                 const { error } = await signUpAction(name, email);
                 if (error) {
-                    setEmailError("Email registered");
+                    setEmailError(error?.message);
                 } else {
                     redirect(`/auth/confirm?email=${email}`);
                 }
diff --git a/app/signup/actions.ts b/app/signup/actions.ts
index 5c5ef60..372ceea 100644
--- a/app/signup/actions.ts
+++ b/app/signup/actions.ts
@@ -10,7 +10,7 @@ export const signUpAction = async (name: string, email: string) => {
 
     console.log("data found for user email on signup", data);
     if (data?.length) {
-        return { error: 1 };
+        return { error: { message: "Email Registered" } };
     }
 
     const { error } = await supabase.auth.signInWithOtp({
diff --git a/package.json b/package.json
index 45056e0..ec97896 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,13 @@
         "@supabase/ssr": "^0.6.1",
         "@supabase/supabase-js": "^2.49.4",
         "@types/three": "^0.176.0",
+        "@upstash/ratelimit": "^2.0.6",
+        "@upstash/redis": "^1.35.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "dayjs": "^1.11.13",
+        "dompurify": "^3.2.6",
         "dotenv": "^16.5.0",
         "eslint-plugin-unused-imports": "^4.1.4",
         "framer-motion": "^12.16.0",
diff --git a/supabase/config.toml b/supabase/config.toml
index a2edb7d..b3fd0b7 100644
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -129,7 +129,7 @@ password_requirements = ""
 
 [auth.rate_limit]
 # Number of emails that can be sent per hour. Requires auth.email.smtp to be enabled.
-email_sent = 2
+email_sent = 4000
 # Number of SMS messages that can be sent per hour. Requires auth.sms to be enabled.
 sms_sent = 30
 # Number of anonymous sign-ins that can be made per hour per IP address. Requires enable_anonymous_sign_ins = true.
@@ -158,11 +158,11 @@ enable_confirmations = true
 # If enabled, users will need to reauthenticate or have logged in recently to change their password.
 secure_password_change = false
 # Controls the minimum amount of time that must pass before sending another signup confirmation or password reset email.
-max_frequency = "1s"
+max_frequency = "0s"
 # Number of characters used in the email OTP.
 otp_length = 6
 # Number of seconds before the email OTP expires (defaults to 1 hour).
-otp_expiry = 3600
+otp_expiry = 1200
 
 # Use a production-ready SMTP server
 # [auth.email.smtp]

From abcd69b72315f7a1ccaf773a2ded04b9886d288f Mon Sep 17 00:00:00 2001
From: jonathanzhu <jiasunzhu@gmail.com>
Date: Wed, 6 Aug 2025 22:21:08 -0400
Subject: [PATCH 3/5] fix: filter webring data

---
 app/page.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index f42dbea..7b54025 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,11 +24,14 @@ export default async function Home() {
     //     return redirect("/signup");
     // }
 
+    // Filter webring profile data
+    const filteredRingProfiles = ringProfiles.filter((profile) => profile.domain);
+
     return (
         <div className="min-h-screen bg-background flex flex-col">
             <Navbar user={userData} />
             <div className="overflow-clip">
-                <WebRing data={ringProfiles} />
+                <WebRing data={filteredRingProfiles} />
                 <div className="px-4">
                     <h2 className="max-w-[85rem] w-full mx-auto">Preview</h2>
                     <div className="max-w-[85rem] mx-auto overflow-clip">

From e919d659526052b2c0b88a7d91c2f5ab1eaaeb48 Mon Sep 17 00:00:00 2001
From: jonathanzhu <jiasunzhu@gmail.com>
Date: Thu, 7 Aug 2025 02:08:26 -0400
Subject: [PATCH 4/5] dropdown

---
 components/FallbackImage.tsx    |  4 +-
 components/Navbar.tsx           | 66 ++++++++++++++++++++++++---------
 components/ui/dropdown-menu.tsx |  2 +-
 3 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/components/FallbackImage.tsx b/components/FallbackImage.tsx
index 0949d74..0ac005f 100644
--- a/components/FallbackImage.tsx
+++ b/components/FallbackImage.tsx
@@ -54,14 +54,14 @@ export default function FallbackImage({
             height={height}
             src={avatar}
             alt="Avatar"
-            className={cn("object-cover", className)}
+            className={cn("object-cover bg-popover", className)}
         />
     ) : (
         <Image
             src={src}
             width={width}
             height={height}
-            className={cn("object-cover", className)}
+            className={cn("object-cover bg-popover", className)}
             alt={alt}
             onError={(err) => {
                 console.log("[FallbackImage] Profile Image error! Switching to fallback: ", err);
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 15c4ae3..6709bf6 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -12,6 +12,10 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import verifiedIcon from "@/icons/verified.svg";
+import { cn } from "@/lib/utils";
+import { House, LayoutDashboard, LogOut } from "lucide-react";
+import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
 
 export default function Navbar({
     user,
@@ -32,26 +36,54 @@ export default function Navbar({
             </Link>
             {user ? (
                 <DropdownMenu>
-                    <DropdownMenuTrigger className="outline-none focus:outline-none">
-                        <FallbackImage
-                            width={64}
-                            height={64}
-                            src={user.image_url}
-                            seed={user.ring_id}
-                            alt={user.name + "'s Profile picture"}
-                            className="rounded-full w-14 aspect-square border-4 border-card outline-2 outline-white"
-                        />
+                    <DropdownMenuTrigger
+                        className={cn(
+                            "outline-none focus:outline-none"
+                            // user.is_verified && "bg-popover rounded-t-full border-x"
+                        )}
+                    >
+                        <div className="w-14 aspect-square rounded-full relative">
+                            <FallbackImage
+                                src={user.image_url}
+                                seed={user.ring_id}
+                                alt={user.name + "'s Profile picture"}
+                                className={cn(
+                                    "rounded-full w-14 aspect-square object-cover pointer-events-none drag-none select-none",
+                                    user.is_verified && "border-1 border-white"
+                                )}
+                            />
+                            {user.is_verified && (
+                                <Image
+                                    src={verifiedIcon}
+                                    alt="Verified"
+                                    className="absolute right-0 bottom-0 size-4"
+                                />
+                            )}
+                        </div>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent className="text-md">
-                        <Link href="/">
-                            <DropdownMenuItem>Home</DropdownMenuItem>
+                    <DropdownMenuContent
+                        className="min-w-14 rounded-full border-t-0 py-2"
+                        align="center"
+                        sideOffset={10}
+                    >
+                        <Link href="/" className="flex mb-2" title="Home">
+                            <DropdownMenuItem className="mx-auto">
+                                <House className="size-6" />
+                            </DropdownMenuItem>
                         </Link>
-                        <DropdownMenuSeparator />
-                        <Link href="/dashboard">
-                            <DropdownMenuItem>Dashboard</DropdownMenuItem>
+
+                        <Link href="/dashboard" className="flex mb-2" title="Dashboard">
+                            <DropdownMenuItem className="mx-auto">
+                                <LayoutDashboard className="size-6" />
+                            </DropdownMenuItem>
                         </Link>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem onClick={signOutAction}>Sign out</DropdownMenuItem>
+
+                        <div className="flex" title="Sign out">
+                            <DropdownMenuItem className="mx-auto" onClick={signOutAction}>
+                                <LogOut className="size-6" />
+                            </DropdownMenuItem>
+                        </div>
+                        {/* <DropdownMenuArrow className="fill-popover" /> */}
                     </DropdownMenuContent>
                 </DropdownMenu>
             ) : (
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index ef3073f..7e87cb5 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -29,7 +29,7 @@ function DropdownMenuContent({
                 data-slot="dropdown-menu-content"
                 sideOffset={sideOffset}
                 className={cn(
-                    "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+                    "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md z-50",
                     className
                 )}
                 {...props}

From f70986f850345e09cd61165b20f7078a3c06de08 Mon Sep 17 00:00:00 2001
From: jonathanzhu <jiasunzhu@gmail.com>
Date: Thu, 7 Aug 2025 02:12:56 -0400
Subject: [PATCH 5/5] drop

---
 components/Navbar.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 6709bf6..de9e5b3 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -67,19 +67,22 @@ export default function Navbar({
                         sideOffset={10}
                     >
                         <Link href="/" className="flex mb-2" title="Home">
-                            <DropdownMenuItem className="mx-auto">
+                            <DropdownMenuItem className="mx-auto rounded-full aspect-square">
                                 <House className="size-6" />
                             </DropdownMenuItem>
                         </Link>
 
                         <Link href="/dashboard" className="flex mb-2" title="Dashboard">
-                            <DropdownMenuItem className="mx-auto">
+                            <DropdownMenuItem className="mx-auto rounded-full aspect-square">
                                 <LayoutDashboard className="size-6" />
                             </DropdownMenuItem>
                         </Link>
 
                         <div className="flex" title="Sign out">
-                            <DropdownMenuItem className="mx-auto" onClick={signOutAction}>
+                            <DropdownMenuItem
+                                className="mx-auto rounded-full aspect-square"
+                                onClick={signOutAction}
+                            >
                                 <LogOut className="size-6" />
                             </DropdownMenuItem>
                         </div>