Merge pull request #147 from aryasaatvik/history

fix(web): history a11y and mobile issues
supermemoryai · Jul 23, 2024 · deb86ec · deb86ec
2 parents bd32692 + 304913a
commit deb86ec
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/apps/web/app/(dash)/header/header.tsx b/apps/web/app/(dash)/header/header.tsx
@@ -6,6 +6,8 @@ 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";
+import { CaretDownIcon } from "@radix-ui/react-icons";
 
 async function Header() {
 	const chatThreads = await getChatHistory();
@@ -32,26 +34,26 @@ 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 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>
 									<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>