Message List: Scroll notch (#1129)

src/components/middle/MessageList.scss

@@ -5,7 +5,7 @@
   overflow: scroll;
   overflow-x: hidden;
   overflow-y: overlay;
-  margin-bottom: .3125rem;
+  margin-bottom: .5rem;
 
   .mask-image-enabled & {
     mask-image: linear-gradient(to top, transparent 0, #000 0.5rem);

src/components/middle/MessageList.tsx

@@ -66,7 +66,8 @@ type OwnProps = {
   threadId: number;
   type: MessageListType;
   canPost: boolean;
-  onFabToggle: (show: boolean) => void;
+  onFabToggle: (shouldShow: boolean) => void;
+  onNotchToggle: (shouldShow: boolean) => void;
   hasTools?: boolean;
 };
 
@@ -114,6 +115,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
   type,
   hasTools,
   onFabToggle,
+  onNotchToggle,
   isChatLoaded,
   isChannelChat,
   canPost,
@@ -540,6 +542,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
           isViewportNewest={isViewportNewest}
           firstUnreadId={firstUnreadId}
           onFabToggle={onFabToggle}
+          onNotchToggle={onNotchToggle}
         >
           {renderMessages(
             lang,

src/components/middle/MessageScroll.tsx

@@ -19,6 +19,7 @@ type OwnProps = {
   isViewportNewest?: boolean;
   firstUnreadId?: number;
   onFabToggle: AnyToVoidFunction;
+  onNotchToggle: AnyToVoidFunction;
   children: any;
 };
 
@@ -38,6 +39,7 @@ const MessageScroll: FC<OwnProps> = ({
   isViewportNewest,
   firstUnreadId,
   onFabToggle,
+  onNotchToggle,
   children,
 }) => {
   // eslint-disable-next-line no-null/no-null
@@ -54,11 +56,13 @@ const MessageScroll: FC<OwnProps> = ({
 
     if (!messageIds || !messageIds.length) {
       onFabToggle(false);
+      onNotchToggle(false);
       return;
     }
 
     if (!isViewportNewest) {
       onFabToggle(true);
+      onNotchToggle(true);
       return;
     }
 
@@ -68,7 +72,8 @@ const MessageScroll: FC<OwnProps> = ({
     const isAtBottom = scrollBottom === 0 || (IS_SAFARI && scrollBottom === 1);
 
     onFabToggle(firstUnreadId ? !isAtBottom : !isNearBottom);
-  }, [messageIds, isViewportNewest, containerRef, onFabToggle, firstUnreadId]);
+    onNotchToggle(!isAtBottom);
+  }, [messageIds, isViewportNewest, containerRef, onFabToggle, firstUnreadId, onNotchToggle]);
 
   const {
     observe: observeIntersection,
@@ -114,6 +119,16 @@ const MessageScroll: FC<OwnProps> = ({
 
   useOnIntersect(fabTriggerRef, observeIntersectionForFab);
 
+  const {
+    observe: observeIntersectionForNotch,
+  } = useIntersectionObserver({
+    rootRef: containerRef,
+  }, () => {
+    updateFabVisibility();
+  });
+
+  useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
+
   // Do not load more and show FAB when focusing
   useOnChange(() => {
     if (focusingId) {

src/components/middle/MiddleColumn.scss

@@ -255,6 +255,27 @@
         transform: translate3d(0, calc(-1 * (var(--symbol-menu-height) + var(--symbol-menu-footer-height))), 0);
       }
     }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -0.5rem;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0) 100%);
+      opacity: 0;
+      transition: opacity 200ms ease;
+
+      @media (max-width: 600px) {
+        left: -2%;
+        right: -2%;
+      }
+    }
+
+    &.with-notch::before {
+      opacity: 1;
+    }
   }
 }
 

src/components/middle/MiddleColumn.tsx

@@ -103,6 +103,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
 
   const [dropAreaState, setDropAreaState] = useState(DropAreaState.None);
   const [isFabShown, setIsFabShown] = useState<boolean | undefined>();
+  const [isNotchShown, setIsNotchShown] = useState<boolean | undefined>();
   const [isUnpinModalOpen, setIsUnpinModalOpen] = useState(false);
 
   const hasTools = hasPinnedOrAudioMessage && (
@@ -134,6 +135,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   useEffect(() => {
     setDropAreaState(DropAreaState.None);
     setIsFabShown(undefined);
+    setIsNotchShown(undefined);
   }, [chatId]);
 
   useEffect(() => {
@@ -198,6 +200,12 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
 
   const lang = useLang();
 
+  const footerClassName = buildClassName(
+    'middle-column-footer',
+    !renderingCanPost && 'no-composer',
+    renderingCanPost && isNotchShown && 'with-notch',
+  );
+
   return (
     <div
       id="MiddleColumn"
@@ -242,8 +250,9 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                     canPost={renderingCanPost}
                     hasTools={renderingHasTools}
                     onFabToggle={setIsFabShown}
+                    onNotchToggle={setIsNotchShown}
                   />
-                  <div className={buildClassName('middle-column-footer', !renderingCanPost && 'no-composer')}>
+                  <div className={footerClassName}>
                     {renderingCanPost && (
                       <Composer
                         chatId={renderingChatId}

src/components/middle/message/Message.scss

@@ -46,7 +46,7 @@
   }
 
   &.last-in-list {
-    margin-bottom: 0.375rem;
+    margin-bottom: 0rem;
   }
 
   &.is-in-selection-mode {