From 26b325a7816d9805e62448e08a9b8caa4c3bcab3 Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Tue, 18 Jun 2024 15:19:16 +0530
Subject: [PATCH] feat: user profile dropdown & settings

---
 next.config.js            | 19 +++++++++++------
 src/app/actions.ts        | 12 +++++++----
 src/app/setup/page.tsx    |  1 -
 src/components/topnav.tsx | 45 ++++++++++++++++++++++++++++++++++++++-
 4 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/next.config.js b/next.config.js
index 41cc5e8..07d270c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -6,12 +6,19 @@ await import("./src/env.js");
 
 /** @type {import("next").NextConfig} */
 const config = {
-    typescript: {
-        ignoreBuildErrors: true,
-    },
-    eslint: {
-        ignoreDuringBuilds: true,
-    },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        hostname: "img.clerk.com",
+      },
+    ],
+  },
 };
 
 export default config;
diff --git a/src/app/actions.ts b/src/app/actions.ts
index 4323746..6a31c59 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -2,6 +2,7 @@
 
 import { db } from "@/server/db";
 import { users } from "@/server/db/schema";
+import { currentUser } from "@clerk/nextjs/server";
 
 export async function setFullUserName(name: string, userId: string) {
   try {
@@ -22,7 +23,7 @@ export async function setPaperlessURL(url: string, userId: string) {
       .onConflictDoUpdate({ target: users.userId, set: { paperlessURL: url } });
   } catch {
     throw new Error("Database error");
-  } 
+  }
 }
 
 export async function setPaperlessToken(token: string, userId: string) {
@@ -30,8 +31,11 @@ export async function setPaperlessToken(token: string, userId: string) {
     await db
       .insert(users)
       .values({ paperlessToken: token, userId: userId })
-      .onConflictDoUpdate({ target: users.userId, set: { paperlessToken: token } });
+      .onConflictDoUpdate({
+        target: users.userId,
+        set: { paperlessToken: token },
+      });
   } catch {
     throw new Error("Database error");
-  } 
-}
\ No newline at end of file
+  }
+}
diff --git a/src/app/setup/page.tsx b/src/app/setup/page.tsx
index 7ef733c..c4d174d 100644
--- a/src/app/setup/page.tsx
+++ b/src/app/setup/page.tsx
@@ -25,7 +25,6 @@ import {
 } from "../actions";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
-import { Check } from "lucide-react";
 
 function FullName({
   setActiveTab,
diff --git a/src/components/topnav.tsx b/src/components/topnav.tsx
index d13f416..98664d1 100644
--- a/src/components/topnav.tsx
+++ b/src/components/topnav.tsx
@@ -6,6 +6,49 @@ import { Button, buttonVariants } from "@/components/ui/button";
 import Tooltip from "@/components/tooltip";
 import { ModeToggle } from "@/components/mode-toggle";
 import { Separator } from "@/components/ui/separator";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import Image from "next/image";
+import { useUser } from "@clerk/nextjs";
+
+function UserProfile() {
+
+  const { user } = useUser();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8 overflow-hidden rounded-full"
+        >
+          <Image
+          src={user?.imageUrl}
+          width={32}
+          height={32}
+          alt="Avatar"
+          className="overflow-hidden rounded-full"
+        />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Logout</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
 
 export function TopNav() {
   return (
@@ -46,7 +89,7 @@ export function TopNav() {
                 <SignInButton />
               </SignedOut>
               <SignedIn>
-                <UserButton />
+                  <UserProfile />
               </SignedIn>
             </div>
           </div>