diff options
| author | Dhravya Shah <[email protected]> | 2024-07-23 15:31:38 -0500 |
|---|---|---|
| committer | GitHub <[email protected]> | 2024-07-23 15:31:38 -0500 |
| commit | deb86ecd07df681c72828c3ae01414959d09eb23 (patch) | |
| tree | dd0106e5712cf0009474ad20d9508a16ce8db5c7 | |
| parent | Merge pull request #139 from alankritkhatri/fix-memory-blur (diff) | |
| parent | a11y support (diff) | |
| download | supermemory-deb86ecd07df681c72828c3ae01414959d09eb23.tar.xz supermemory-deb86ecd07df681c72828c3ae01414959d09eb23.zip | |
Merge pull request #147 from aryasaatvik/history
fix(web): history a11y and mobile issues
| -rw-r--r-- | apps/web/app/(dash)/header/header.tsx | 28 |
1 files changed, 15 insertions, 13 deletions
diff --git a/apps/web/app/(dash)/header/header.tsx b/apps/web/app/(dash)/header/header.tsx index b9d400c9..9c225bc6 100644 --- 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> |