refactor: implement immersive mode for mobile keyboard layout and update related styles

overlay/src/app/features/room/RoomView.tsx

@@ -14,7 +14,7 @@ import { RoomTimeline } from './RoomTimeline';
 import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
-import { RoomViewFollowing } from './RoomViewFollowing';
+import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
 import { Page } from '../../components/page';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useKeyDown } from '../../hooks/useKeyDown';
@@ -65,7 +65,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const roomViewRef = useRef<HTMLDivElement>(null);
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const { isLandscape, keyboardOpen } = useMobileKeyboardLayout();
+  const { immersive } = useMobileKeyboardLayout();
 
   const { roomId } = room;
   const editor = useEditor();
@@ -104,9 +104,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     )
   );
 
-  const flushComposer = keyboardOpen || isLandscape;
+  const flushComposer = immersive;
   const composerPadding = flushComposer ? '0' : `0 ${config.space.S400}`;
-  const showHeader = !keyboardOpen;
+  const showHeader = !immersive;
 
   return (
     <Page ref={roomViewRef}>
@@ -134,7 +134,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
             data-composer-flush={flushComposer ? 'true' : undefined}
             className={composerCss.ComposerDock}
           >
-            {!hideActivity && (
+            {immersive && !hideActivity && (
               <div className={composerCss.FollowingFloat}>
                 <div className={composerCss.FollowingFloatHit}>
                   <RoomViewFollowing room={room} />
@@ -171,6 +171,12 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
                 </>
               )}
             </div>
+            {!immersive &&
+              (hideActivity ? (
+                <RoomViewFollowingPlaceholder />
+              ) : (
+                <RoomViewFollowing room={room} />
+              ))}
           </Box>
         </>
       )}

overlay/src/app/features/room/RoomViewFollowing.css.ts

@@ -1,12 +1,11 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { DefaultReset, color, config } from 'folds';
+import { DefaultReset, color, config, toRem } from 'folds';
 
 export const RoomViewFollowingPlaceholder = style([
   DefaultReset,
   {
-    display: 'none',
-    height: 0,
+    height: toRem(28),
   },
 ]);
 
@@ -14,13 +13,22 @@ export const RoomViewFollowing = recipe({
   base: [
     DefaultReset,
     {
-      minHeight: 0,
-      padding: `${config.space.S100} ${config.space.S200}`,
-      width: 'auto',
-      maxWidth: '100%',
-      backgroundColor: 'transparent',
+      minHeight: toRem(28),
+      padding: `0 ${config.space.S400}`,
+      width: '100%',
+      backgroundColor: color.Surface.Container,
       color: color.Surface.OnContainer,
       outline: 'none',
+      selectors: {
+        // Compact floating chip while the keyboard is open.
+        '[data-composer-flush="true"] &': {
+          minHeight: 0,
+          width: 'auto',
+          maxWidth: '100%',
+          padding: `${config.space.S100} ${config.space.S200}`,
+          backgroundColor: 'transparent',
+        },
+      },
     },
   ],
   variants: {