From 1dedc93a5629678a7e74b5a4ea0db3acdcbc5e92 Mon Sep 17 00:00:00 2001
From: Jared Vu <jaredvu@gmail.com>
Date: Tue, 21 Nov 2023 19:24:19 -0800
Subject: [PATCH] Mobile friendly Toast: Collapse/Close (#159)

---
 src/components/ComboboxMenu.tsx       | 14 +++++---------
 src/components/Toast.tsx              |  6 ++++++
 src/layout/NotificationsToastArea.tsx |  7 +++++--
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/ComboboxMenu.tsx b/src/components/ComboboxMenu.tsx
index af25aea..8927397 100644
--- a/src/components/ComboboxMenu.tsx
+++ b/src/components/ComboboxMenu.tsx
@@ -44,13 +44,6 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
 }: ComboboxMenuProps<MenuItemValue, MenuGroupValue>) => {
   const [highlightedCommand, setHighlightedCommand] = useState<MenuItemValue>();
   const [searchValue, setSearchValue] = useState('');
-  // const inputRef = useRef<HTMLInputElement | null>(null);
-
-  // console.log({ commandValue: highlightedCommand });
-
-  // useEffect(() => {
-  //   inputRef?.current?.focus();
-  // }, []);
 
   return (
     <Styled.Command
@@ -67,11 +60,14 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
       {withSearch && (
         <Styled.Header $withStickyLayout={withStickyLayout}>
           <Styled.Input
-            // ref={inputRef}
+            /**
+             * Mobile Issue: Search Input will always trigger mobile keyboard drawer. There is no fix.
+             * https://github.com/pacocoursey/cmdk/issues/127
+             */
+            autoFocus
             type="search"
             value={searchValue}
             onValueChange={setSearchValue}
-            autoFocus
             placeholder={inputPlaceholder}
           />
         </Styled.Header>
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 6a2f3da..94dfe80 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -4,6 +4,7 @@ import { Root, Action, Close } from '@radix-ui/react-toast';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { popoverMixins } from '@/styles/popoverMixins';
+import { breakpoints } from '@/styles';
 
 import { Notification, type NotificationProps } from '@/components/Notification';
 
@@ -254,6 +255,11 @@ const $CloseButton = styled(IconButton)`
     display: block;
     z-index: 2;
   }
+
+  @media ${breakpoints.mobile} {
+    display: block;
+    z-index: 2;
+  }
 `;
 
 const $Action = styled(Action)`
diff --git a/src/layout/NotificationsToastArea.tsx b/src/layout/NotificationsToastArea.tsx
index 93b18f3..db4e37e 100644
--- a/src/layout/NotificationsToastArea.tsx
+++ b/src/layout/NotificationsToastArea.tsx
@@ -75,7 +75,7 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
       {notificationMap.map(({ notification, key, displayData }, idx) => (
         <StyledToast
           key={key}
-          isStacked={!isMobile && shouldStackNotifications}
+          isStacked={shouldStackNotifications}
           isOpen={notification.status < NotificationStatus.Unseen}
           layer={notificationMap.length - 1 - idx}
           notification={notification}
@@ -167,6 +167,9 @@ const StyledToggleButton = styled(ToggleButton)<{ isPressed: boolean }>`
   }
 
   @media ${breakpoints.mobile} {
-    display: none;
+    display: flex;
+    left: calc(50% - 2rem);
+    --button-width: 4rem;
+    --button-height: 2rem;
   }
 `;