apps/web/src/components/navbar.tsx

@@ -1,11 +1,13 @@
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
 import {
-  Button,
+  ArrowLeft,
-  Popover,
+  ChevronDown,
-  PopoverContent,
+  ChevronUp,
-  PopoverTrigger,
+  House,
-  useIsMobile,
+  Phone,
-} from "@tensamin/ui";
+  Settings,
-import { ArrowLeft, House, Phone, Settings, User } from "lucide-react";
+  User,
+} from "lucide-react";
 import { useLocation, useNavigate, useSearch } from "@tanstack/react-router";
 import { joinCall, useCall } from "@tensamin/call/store";
 import Wrapper from "@tensamin/user/wrapper";
@@ -31,8 +33,6 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
     call.call_members.some((member) => member === id),
   );
 
-  const isMobile = useIsMobile();
-
   const [selectOpen, setSelectOpen] = useState(false);
 
   const [userInfoOpen, setUserInfoOpen] = useState(false);
@@ -72,10 +72,8 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
         {pathname === "/chat" && id && (
           <Wrapper
             userId={id}
-            component={(user) =>
+            component={(user) => (
-              isMobile ? (
+              <>
-                <p className="font-medium text-md">{user?.display}</p>
-              ) : (
                 <Popover open={userInfoOpen} onOpenChange={setUserInfoOpen}>
                   <PopoverTrigger
                     render={
@@ -87,6 +85,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                         }}
                       >
                         <p className="font-medium text-md">{user?.display}</p>
+                        {userInfoOpen ? <ChevronUp /> : <ChevronDown />}
                       </Button>
                     }
                   />
@@ -94,8 +93,8 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                     <Profile user={user} />
                   </PopoverContent>
                 </Popover>
-              )
+              </>
-            }
+            )}
             loading={<Skeleton className="ml-3 w-40 h-5" />}
           />
         )}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tensamin",
-  "version": "0.0.8",
+  "version": "0.0.7",
   "private": true,
   "workspaces": [
     "packages/*",

packages/chat/src/components/messageContextMenu.tsx

@@ -11,8 +11,6 @@ import {
   ContextMenuTrigger,
   Drawer,
   DrawerContent,
-  DrawerDescription,
-  DrawerTitle,
   DrawerTrigger,
   useIsMobile,
 } from "@tensamin/ui";
@@ -43,12 +41,6 @@ type MenuComponents = {
   SubContent: (props: { children: ReactNode }) => ReactElement;
 };
 
-function blurActiveElement() {
-  if (document.activeElement instanceof HTMLElement) {
-    document.activeElement.blur();
-  }
-}
-
 const desktopMenuComponents: MenuComponents = {
   Content: ContextMenuContent,
   Group: ContextMenuGroup,
@@ -59,20 +51,10 @@ const desktopMenuComponents: MenuComponents = {
   SubContent: ContextMenuSubContent,
 };
 
-function getMobileMenuComponents({
+function getMobileMenuComponents(onClose: () => void): MenuComponents {
-  description,
-  onClose,
-  title,
-}: {
-  description: string;
-  onClose: () => void;
-  title: string;
-}): MenuComponents {
   return {
     Content: ({ className, children }) => (
       <DrawerContent>
-        <DrawerTitle className="sr-only">{title}</DrawerTitle>
-        <DrawerDescription className="sr-only">{description}</DrawerDescription>
         <div className={cn("p-3!", className)}>{children}</div>
       </DrawerContent>
     ),
@@ -80,7 +62,6 @@ function getMobileMenuComponents({
     Item: ({ children, className, disabled, onClick, variant = "default" }) => {
       async function handleClick() {
         await onClick?.();
-        blurActiveElement();
         onClose();
       }
 
@@ -105,9 +86,8 @@ function getMobileMenuComponents({
     Sub: ({ children }) => <div>{children}</div>,
     SubTrigger: ({ children, onClick }) => {
       async function handleClick() {
-        blurActiveElement();
-        onClose();
         await onClick?.();
+        onClose();
       }
 
       return (
@@ -218,23 +198,11 @@ export default function MessageContextMenu({
   );
   const [mainDrawerOpen, setMainDrawerOpen] = useState(false);
   const [reactionDrawerOpen, setReactionDrawerOpen] = useState(false);
-  const mainDrawerComponents = useMemo(
+  const mainDrawerComponents = getMobileMenuComponents(() =>
-    () =>
+    setMainDrawerOpen(false),
-      getMobileMenuComponents({
-        description: "Actions available for this message.",
-        onClose: () => setMainDrawerOpen(false),
-        title: "Message actions",
-      }),
-    [],
   );
-  const reactionDrawerComponents = useMemo(
+  const reactionDrawerComponents = getMobileMenuComponents(() =>
-    () =>
+    setReactionDrawerOpen(false),
-      getMobileMenuComponents({
-        description: "Choose a reaction to add to this message.",
-        onClose: () => setReactionDrawerOpen(false),
-        title: "Add reaction",
-      }),
-    [],
   );
 
   if (isMobile) {
@@ -253,13 +221,7 @@ export default function MessageContextMenu({
         </Drawer>
         <Drawer open={reactionDrawerOpen} onOpenChange={setReactionDrawerOpen}>
           <DrawerContent>
-            <DrawerTitle className="sr-only">Add reaction</DrawerTitle>
+            <ReactionItems Item={reactionDrawerComponents.Item} />
-            <DrawerDescription className="sr-only">
-              Choose a reaction to add to this message.
-            </DrawerDescription>
-            <div className="p-3!">
-              <ReactionItems Item={reactionDrawerComponents.Item} />
-            </div>
           </DrawerContent>
         </Drawer>
       </>