Merge pull request '(fix): a few mobile related bugs' (#17) from dev into main

Reviewed-on: #17

apps/web/src/components/navbar.tsx

@@ -1,13 +1,11 @@
-import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
 import {
-  ArrowLeft,
-  ChevronDown,
-  ChevronUp,
-  House,
-  Phone,
-  Settings,
-  User,
-} from "lucide-react";
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useIsMobile,
+} from "@tensamin/ui";
+import { ArrowLeft, House, Phone, Settings, 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";
@@ -33,6 +31,8 @@ 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,8 +72,10 @@ 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={
@@ -85,7 +87,6 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                         }}
                       >
                         <p className="font-medium text-md">{user?.display}</p>
-                        {userInfoOpen ? <ChevronUp /> : <ChevronDown />}
                       </Button>
                     }
                   />
@@ -93,8 +94,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.7",
+  "version": "0.0.8",
   "private": true,
   "workspaces": [
     "packages/*",

packages/chat/src/components/messageContextMenu.tsx

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