solve merge conflictskush/experimental-thread

3 files changed, 45 insertions, 15 deletions

diff --git a/apps/web/app/(dash)/header/autoBreadCrumbs.tsx b/apps/web/app/(dash)/header/autoBreadCrumbs.tsx
index a823671c..671464ff 100644
--- a/apps/web/app/(dash)/header/autoBreadCrumbs.tsx
+++ b/apps/web/app/(dash)/header/autoBreadCrumbs.tsx
@@ -13,8 +13,6 @@ import React from "react";
 function AutoBreadCrumbs() {
 	const pathname = usePathname();
 
-	console.log(pathname.split("/").filter(Boolean));
-
 	return (
 		<Breadcrumb className="hidden md:block">
 			<BreadcrumbList>
@@ -31,7 +29,7 @@ function AutoBreadCrumbs() {
 					.filter(Boolean)
 					.map((path, idx, paths) => (
 						<>
-							<BreadcrumbItem key={path}>
+							<BreadcrumbItem key={path + idx}>
 								<BreadcrumbLink href={`/${paths.slice(0, idx + 1).join("/")}`}>
 									{path.charAt(0).toUpperCase() + path.slice(1)}
 								</BreadcrumbLink>
diff --git a/apps/web/app/(dash)/header/header.tsx b/apps/web/app/(dash)/header/header.tsx
index b9d400c9..eaade258 100644
--- a/apps/web/app/(dash)/header/header.tsx
+++ b/apps/web/app/(dash)/header/header.tsx
@@ -6,6 +6,14 @@ import Logo from "../../../public/logo.svg";
 import { getChatHistory } from "../../actions/fetchers";
 import NewChatButton from "./newChatButton";
 import AutoBreadCrumbs from "./autoBreadCrumbs";
+import SignOutButton from "./signOutButton";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@repo/ui/shadcn/dropdown-menu";
+import { CaretDownIcon } from "@radix-ui/react-icons";
 
 async function Header() {
 	const chatThreads = await getChatHistory();
@@ -32,26 +40,28 @@ async function Header() {
 				<div className="flex items-center gap-2">
 					<NewChatButton />
 
-					<div className="relative group">
-						<button className="flex duration-200 items-center text-[#7D8994] hover:bg-[#1F2429] text-[13px] gap-2 px-3 py-2 rounded-xl">
+					<DropdownMenu>
+						<DropdownMenuTrigger className="inline-flex flex-row flex-nowrap items-center text-muted-foreground hover:text-foreground">
 							History
-						</button>
-
-						<div className="absolute p-4 hidden group-hover:block right-0 w-full md:w-[400px] max-h-[70vh] overflow-auto">
-							<div className="bg-[#1F2429] rounded-xl p-2 flex flex-col shadow-lg">
-								{chatThreads.data.map((thread) => (
+							<CaretDownIcon />
+						</DropdownMenuTrigger>
+						<DropdownMenuContent className="p-4 w-full md:w-[400px] max-h-[70vh] overflow-auto border-none">
+							{chatThreads.data.map((thread) => (
+								<DropdownMenuItem asChild>
 									<Link
 										prefetch={false}
 										href={`/chat/${thread.id}`}
 										key={thread.id}
-										className="p-2 rounded-md hover:bg-secondary"
+										className="p-2 rounded-md cursor-pointer focus:bg-secondary focus:text-current"
 									>
 										{thread.firstMessage}
 									</Link>
-								))}
-							</div>
-						</div>
-					</div>
+								</DropdownMenuItem>
+							))}
+						</DropdownMenuContent>
+					</DropdownMenu>
+
+					<SignOutButton />
 				</div>
 			</div>
 		</div>
diff --git a/apps/web/app/(dash)/header/signOutButton.tsx b/apps/web/app/(dash)/header/signOutButton.tsx
new file mode 100644
index 00000000..4c61c74d
--- /dev/null
+++ b/apps/web/app/(dash)/header/signOutButton.tsx
@@ -0,0 +1,22 @@
+import { signOut } from "@/server/auth";
+import { Button } from "@repo/ui/shadcn/button";
+
+export default function SignOutButton() {
+	return (
+		<form
+			action={async () => {
+				"use server";
+				await signOut();
+			}}
+		>
+			<Button
+				variant="ghost"
+				size="sm"
+				type="submit"
+				className="text-[#7D8994]"
+			>
+				Sign Out
+			</Button>
+		</form>
+	);
+}