From 05f3ce5d20c6b6eb714e032ba522713e9fa1e2aa Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Fri, 13 Jan 2023 20:34:52 -0600
Subject: [PATCH 1/4] Update UserMenu to use Chakra components and include
 score

---
 website/src/components/Header/UserMenu.tsx | 124 ++++++---------------
 1 file changed, 36 insertions(+), 88 deletions(-)

diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index b99d4a1f..9f225bb6 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -1,16 +1,10 @@
-import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
-import { Popover } from "@headlessui/react";
-import { AnimatePresence, motion } from "framer-motion";
-import Image from "next/image";
-import NextLink from "next/link";
+import { Avatar, Box, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Text } from "@chakra-ui/react";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
 import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
 export function UserMenu() {
   const { data: session } = useSession();
-  const backgroundColor = useColorModeValue("white", "gray.700");
-  const accentColor = useColorModeValue("gray.300", "gray.600");
 
   if (!session) {
     return <></>;
@@ -47,87 +41,41 @@ export function UserMenu() {
     }
 
     return (
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button aria-label="Toggle Account Options" className="flex">
-              <Box
-                borderWidth="1px"
-                borderColor={accentColor}
-                className="flex items-center gap-4 p-1 lg:pr-6 rounded-full transition-colors duration-300"
-              >
-                <Image
-                  src={session.user.image || "/images/temp-avatars/av1.jpg"}
-                  alt="Profile Picture"
-                  width="36"
-                  height="36"
-                  className="rounded-full"
-                ></Image>
-                <p data-cy="username" className="hidden lg:flex">
-                  {session.user.name || session.user.email}
-                </p>
-              </Box>
-            </Popover.Button>
-            <AnimatePresence initial={false}>
-              {open && (
-                <Box backgroundColor={backgroundColor}>
-                  <Popover.Panel
-                    static
-                    as={motion.div}
-                    initial={{ opacity: 0, y: -10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{
-                      opacity: 0,
-                      y: -10,
-                      transition: { duration: 0.2 },
-                    }}
-                  >
-                    <Box
-                      bg={backgroundColor}
-                      borderRadius="xl"
-                      shadow="base"
-                      className="absolute right-0 mt-3 w-screen max-w-xs p-4"
-                    >
-                      <Box className="flex flex-col gap-1">
-                        {accountOptions.map((item) => (
-                          <Link
-                            as={NextLink}
-                            key={item.name}
-                            href={item.href}
-                            aria-label={item.desc}
-                            className="flex items-center"
-                            bg={backgroundColor}
-                            _hover={{ textDecoration: "none" }}
-                          >
-                            <div className="p-4">
-                              <item.icon className="text-blue-500" aria-hidden="true" />
-                            </div>
-                            <div>
-                              <Text>{item.name}</Text>
-                            </div>
-                          </Link>
-                        ))}
-                        <Link
-                          className="flex items-center rounded-md cursor-pointer"
-                          _hover={{ textDecoration: "none" }}
-                          onClick={() => signOut({ callbackUrl: "/" })}
-                        >
-                          <div className="p-4">
-                            <FiLogOut className="text-blue-500" />
-                          </div>
-                          <div>
-                            <Text>Sign Out</Text>
-                          </div>
-                        </Link>
-                      </Box>
-                    </Box>
-                  </Popover.Panel>
-                </Box>
-              )}
-            </AnimatePresence>
-          </>
-        )}
-      </Popover>
+      <>
+        <Menu>
+          <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor="blackAlpha.300">
+            <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
+              <Avatar size="sm" bgImage={session.user.image}></Avatar>
+              <p data-cy="username" className="hidden lg:flex">
+                {session.user.name || session.user.email}
+              </p>
+            </Box>
+          </MenuButton>
+          <MenuList p="2" borderRadius="xl">
+            <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
+              <Text>Your Score</Text>
+              <Text color="blue.500" fontWeight="bold" fontSize="xl">
+                3,200
+              </Text>
+            </Box>
+            <MenuDivider></MenuDivider>
+            {accountOptions.map((item) => (
+              <Link key={item.name} href={item.href} _hover={{ textDecoration: "none" }}>
+                <MenuItem gap="3" borderRadius="md" p="4">
+                  <item.icon className="text-blue-500" aria-hidden="true" />
+                  <Text>{item.name}</Text>
+                </MenuItem>
+              </Link>
+            ))}
+
+            <MenuDivider></MenuDivider>
+            <MenuItem gap="3" borderRadius="md" p="4" onClick={() => signOut({ callbackUrl: "/" })}>
+              <FiLogOut className="text-blue-500" aria-hidden="true" />
+              <Text>Sign Out</Text>
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </>
     );
   }
 }

From f1ba1e550881a466eba079ef98a02f822759a0a4 Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Fri, 13 Jan 2023 21:08:16 -0600
Subject: [PATCH 2/4] grouped items, added FAQ to menu

---
 website/src/components/Header/UserMenu.tsx | 72 ++++++++++++++++------
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index 9f225bb6..ecd4febb 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -1,9 +1,23 @@
-import { Avatar, Box, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Text } from "@chakra-ui/react";
+import {
+  Avatar,
+  Box,
+  Link,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
-import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
+import { FiAlertTriangle, FiHelpCircle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
 export function UserMenu() {
+  const borderColor = useColorModeValue("gray.300", "gray.600");
+
   const { data: session } = useSession();
 
   if (!session) {
@@ -18,17 +32,25 @@ export function UserMenu() {
         icon: FiLayout,
       },
       {
-        name: "Account Settings",
+        name: "Settings",
         href: "/account",
         desc: "Account Settings",
         icon: FiSettings,
       },
+    ];
+    const helpOptions = [
       {
         name: "Report a Bug",
         href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
         desc: "Report a Bug",
         icon: FiAlertTriangle,
       },
+      {
+        name: "FAQ",
+        href: "/faq",
+        desc: "Report a Bug",
+        icon: FiHelpCircle,
+      },
     ];
 
     if (session.user.role === "admin") {
@@ -43,32 +65,44 @@ export function UserMenu() {
     return (
       <>
         <Menu>
-          <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor="blackAlpha.300">
+          <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
             <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
               <Avatar size="sm" bgImage={session.user.image}></Avatar>
-              <p data-cy="username" className="hidden lg:flex">
+              <Text data-cy="username" className="hidden lg:flex">
                 {session.user.name || session.user.email}
-              </p>
+              </Text>
             </Box>
           </MenuButton>
-          <MenuList p="2" borderRadius="xl">
+          <MenuList p="2" borderRadius="xl" shadow="none">
             <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
-              <Text>Your Score</Text>
+              <Text>{session.user.name}</Text>
               <Text color="blue.500" fontWeight="bold" fontSize="xl">
                 3,200
               </Text>
             </Box>
-            <MenuDivider></MenuDivider>
-            {accountOptions.map((item) => (
-              <Link key={item.name} href={item.href} _hover={{ textDecoration: "none" }}>
-                <MenuItem gap="3" borderRadius="md" p="4">
-                  <item.icon className="text-blue-500" aria-hidden="true" />
-                  <Text>{item.name}</Text>
-                </MenuItem>
-              </Link>
-            ))}
-
-            <MenuDivider></MenuDivider>
+            <MenuDivider />
+            <MenuGroup>
+              {accountOptions.map((item) => (
+                <Link key={item.name} href={item.href} _hover={{ textDecoration: "none" }}>
+                  <MenuItem gap="3" borderRadius="md" p="4">
+                    <item.icon className="text-blue-500" aria-hidden="true" />
+                    <Text>{item.name}</Text>
+                  </MenuItem>
+                </Link>
+              ))}
+            </MenuGroup>
+            <MenuDivider />
+            <MenuGroup>
+              {helpOptions.map((item) => (
+                <Link key={item.name} href={item.href} isExternal _hover={{ textDecoration: "none" }}>
+                  <MenuItem gap="3" borderRadius="md" p="4">
+                    <item.icon className="text-blue-500" aria-hidden="true" />
+                    <Text>{item.name}</Text>
+                  </MenuItem>
+                </Link>
+              ))}
+            </MenuGroup>
+            <MenuDivider />
             <MenuItem gap="3" borderRadius="md" p="4" onClick={() => signOut({ callbackUrl: "/" })}>
               <FiLogOut className="text-blue-500" aria-hidden="true" />
               <Text>Sign Out</Text>

From 22c1e79edc6bd15c388b259f66d6dfe18572658f Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Fri, 13 Jan 2023 21:09:59 -0600
Subject: [PATCH 3/4] forgot to change name for settings back

last commit
---
 website/src/components/Header/UserMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index ecd4febb..564d3a73 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -32,7 +32,7 @@ export function UserMenu() {
         icon: FiLayout,
       },
       {
-        name: "Settings",
+        name: "Account Settings",
         href: "/account",
         desc: "Account Settings",
         icon: FiSettings,

From b4d6d93da31aaecab733d2c9e3febde1f9ed2366 Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Sat, 14 Jan 2023 00:48:32 -0600
Subject: [PATCH 4/4] remove FAQ page

---
 website/src/components/Header/UserMenu.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index 564d3a73..8835c7c2 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -13,7 +13,7 @@ import {
 } from "@chakra-ui/react";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
-import { FiAlertTriangle, FiHelpCircle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
+import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
 export function UserMenu() {
   const borderColor = useColorModeValue("gray.300", "gray.600");
@@ -45,12 +45,6 @@ export function UserMenu() {
         desc: "Report a Bug",
         icon: FiAlertTriangle,
       },
-      {
-        name: "FAQ",
-        href: "/faq",
-        desc: "Report a Bug",
-        icon: FiHelpCircle,
-      },
     ];
 
     if (session.user.role === "admin") {