From 71f81cae20046c7e51a3ffa49affddadb562bfbf Mon Sep 17 00:00:00 2001
From: Saatvik Arya <aryasaatvik@gmail.com>
Date: Tue, 23 Jul 2024 01:05:22 -0700
Subject: [PATCH 1/2] history dropdown

---
 apps/web/app/(dash)/header/header.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/web/app/(dash)/header/header.tsx b/apps/web/app/(dash)/header/header.tsx
index b9d400c9..686d8cac 100644
--- a/apps/web/app/(dash)/header/header.tsx
+++ b/apps/web/app/(dash)/header/header.tsx
@@ -6,6 +6,7 @@ import Logo from "../../../public/logo.svg";
 import { getChatHistory } from "../../actions/fetchers";
 import NewChatButton from "./newChatButton";
 import AutoBreadCrumbs from "./autoBreadCrumbs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@repo/ui/shadcn/dropdown-menu";
 
 async function Header() {
 	const chatThreads = await getChatHistory();
@@ -32,26 +33,23 @@ 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">
-							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) => (
+					<DropdownMenu>
+						<DropdownMenuTrigger>History</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>
 				</div>
 			</div>
 		</div>

From 304913a3b1f56a7a7392f5720029513e75795127 Mon Sep 17 00:00:00 2001
From: Saatvik Arya <aryasaatvik@gmail.com>
Date: Tue, 23 Jul 2024 08:40:15 -0700
Subject: [PATCH 2/2] a11y support

---
 apps/web/app/(dash)/header/header.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/(dash)/header/header.tsx b/apps/web/app/(dash)/header/header.tsx
index 686d8cac..9c225bc6 100644
--- a/apps/web/app/(dash)/header/header.tsx
+++ b/apps/web/app/(dash)/header/header.tsx
@@ -7,6 +7,7 @@ import { getChatHistory } from "../../actions/fetchers";
 import NewChatButton from "./newChatButton";
 import AutoBreadCrumbs from "./autoBreadCrumbs";
 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();
@@ -34,7 +35,10 @@ async function Header() {
 					<NewChatButton />
 
 					<DropdownMenu>
-						<DropdownMenuTrigger>History</DropdownMenuTrigger>
+						<DropdownMenuTrigger className="inline-flex flex-row flex-nowrap items-center text-muted-foreground hover:text-foreground">
+              History
+              <CaretDownIcon />
+            </DropdownMenuTrigger>
 						<DropdownMenuContent className="p-4 w-full md:w-[400px] max-h-[70vh] overflow-auto border-none">
 							{chatThreads.data.map((thread) => (
 								<DropdownMenuItem asChild>