fix: fixes issue where add button would not be visible at times on iOS (#2087)

* fix: fixes issue where add button would not be visible at times on iOS

* fix: fixes issue where screens could not be navigated with certain window sizes

packages/mobile/ios/Podfile.lock

@@ -583,7 +583,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 48289402952f4f7a4e235de70a9a590aa0b79ef4
   FBReactNativeSpec: dd1186fd05255e3457baa2f4ca65e94c2cd1e3ac
   Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
@@ -596,7 +596,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 2af7b7a59128f250adfd86f15aa1d5a2ecd39995
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -35,6 +35,8 @@ import { ListableContentItem } from './Types/ListableContentItem'
 import { FeatureName } from '@/Controllers/FeatureName'
 import { PanelResizedData } from '@/Types/PanelResizedData'
 import { useForwardedRef } from '@/Hooks/useForwardedRef'
+import { isMobileScreen } from '@/Utils'
+import FloatingAddButton from './FloatingAddButton'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -285,6 +287,9 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
         aria-label={'Notes & Files'}
         ref={innerRef}
       >
+        {isMobileScreen() && (
+          <FloatingAddButton onClick={addNewItem} label={addButtonLabel} style={dailyMode ? 'danger' : 'info'} />
+        )}
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
           <div id="items-title-bar-container">
             {selectedTag && (

packages/web/src/javascripts/Components/ContentListView/FloatingAddButton.tsx

@@ -0,0 +1,34 @@
+import { classNames } from '@standardnotes/snjs'
+import { ButtonStyle, getColorsForPrimaryVariant } from '../Button/Button'
+import Icon from '../Icon/Icon'
+
+type Props = {
+  label: string
+  style: ButtonStyle
+  onClick?: () => void
+}
+
+const PropertiesRequiredForFixedPositioningToWorkOnIOSSafari: React.CSSProperties = {
+  transform: 'translate3d(0, 0, 0)',
+}
+
+const FloatingAddButton = ({ label, style, onClick }: Props) => {
+  const buttonClasses = getColorsForPrimaryVariant(style)
+  return (
+    <button
+      className={classNames(
+        'fixed bottom-6 right-6 z-editor-title-bar ml-3 flex h-15 w-15 cursor-pointer items-center',
+        `justify-center rounded-full border border-solid border-transparent ${buttonClasses}`,
+        'hover:brightness-125',
+      )}
+      title={label}
+      aria-label={label}
+      onClick={onClick}
+      style={PropertiesRequiredForFixedPositioningToWorkOnIOSSafari}
+    >
+      <Icon type="add" size="custom" className="h-8 w-8" />
+    </button>
+  )
+}
+
+export default FloatingAddButton

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -86,17 +86,18 @@ const ContentListHeader = ({
     return (
       <button
         className={classNames(
-          'fixed bottom-6 right-6 z-editor-title-bar ml-3 flex h-15 w-15 cursor-pointer items-center',
+          'hidden md:flex',
+          'h-8 w-8 hover:brightness-125',
+          'z-editor-title-bar ml-3  cursor-pointer items-center',
           `justify-center rounded-full border border-solid border-transparent ${
             isDailyEntry ? 'bg-danger text-danger-contrast' : 'bg-info text-info-contrast'
           }`,
-          'hover:brightness-125 md:static md:h-8 md:w-8',
         )}
         title={addButtonLabel}
         aria-label={addButtonLabel}
         onClick={addNewItem}
       >
-        <Icon type="add" size="custom" className="h-8 w-8 md:h-5 md:w-5" />
+        <Icon type="add" size="custom" className="h-5 w-5" />
       </button>
     )
   }, [addButtonLabel, addNewItem, isDailyEntry])

packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx

@@ -22,7 +22,7 @@ export async function animatePaneEntranceTransitionFromOffscreenToTheRight(eleme
     {
       duration: ENTRANCE_DURATION,
       easing: 'ease-in-out',
-      fill: 'forwards',
+      fill: 'both',
     },
   )
 
@@ -50,7 +50,7 @@ export async function animatePaneExitTransitionOffscreenToTheRight(elementId: st
     {
       duration: EXIT_DURATION,
       easing: 'ease-in-out',
-      fill: 'forwards',
+      fill: 'both',
     },
   )
 

packages/web/src/javascripts/Hooks/useIsTabletOrMobileScreen.tsx

@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/Application'
 import { useApplication } from '@/Components/ApplicationProvider'
-import { isMobileScreen, isTabletOrMobileScreen, isTabletScreen } from '@/Utils'
+import { debounce, isMobileScreen, isTabletOrMobileScreen, isTabletScreen } from '@/Utils'
 import { useEffect, useState } from 'react'
 
 export function getIsTabletOrMobileScreen(application: WebApplication) {
@@ -9,6 +9,10 @@ export function getIsTabletOrMobileScreen(application: WebApplication) {
   const isTablet = isTabletScreen() || (isNativeMobile && !isMobileScreen())
   const isMobile = isMobileScreen() || (isNativeMobile && !isTablet)
 
+  if (isTablet && isMobile) {
+    throw Error('isTablet and isMobile cannot both be true')
+  }
+
   return {
     isTabletOrMobile,
     isTablet,
@@ -21,9 +25,9 @@ export default function useIsTabletOrMobileScreen() {
   const application = useApplication()
 
   useEffect(() => {
-    const handleResize = () => {
+    const handleResize = debounce(() => {
       setWindowSize(window.innerWidth)
-    }
+    }, 100)
 
     window.addEventListener('resize', handleResize)
     handleResize()

packages/web/src/javascripts/Hooks/useMediaQuery.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 
 // Follows https://tailwindcss.com/docs/responsive-design
 export const MediaQueryBreakpoints = {
-  sm: '(max-width: 640px)',
-  md: '(min-width: 768px)',
+  sm: '(min-width: 0px) and (max-width: 767px)',
+  md: '(min-width: 768px) and (max-width: 1024px)',
   lg: '(min-width: 1024px)',
   xl: '(min-width: 1280px)',
   '2xl': '(min-width:  1536px)',

packages/web/src/javascripts/Utils/Utils.ts

@@ -206,10 +206,12 @@ export const disableIosTextFieldZoom = () => {
   }
 }
 
-export const isMobileScreen = () => !window.matchMedia(MediaQueryBreakpoints.md).matches
+export const isMobileScreen = () => window.matchMedia(MediaQueryBreakpoints.sm).matches
 
 export const isTabletScreen = () =>
-  !window.matchMedia(MediaQueryBreakpoints.sm).matches && !window.matchMedia(MediaQueryBreakpoints.lg).matches
+  !isMobileScreen() &&
+  window.matchMedia(MediaQueryBreakpoints.md).matches &&
+  !window.matchMedia(MediaQueryBreakpoints.lg).matches
 
 export const isTabletOrMobileScreen = () => isMobileScreen() || isTabletScreen()