chore: bump version to 4.11.121 [skip ci]

overlay/src/app/components/AnimatedOutlet.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
-import { useCompactNav } from '../hooks/useCompactNav';
+import { useCompactNav, useIsCompactListRoute } from '../hooks/useCompactNav';
 import { MobileSwipeGestureHost } from './mobile/MobileSwipeGestureHost';
 
 /**
- * Wrapper for Outlet that adds route-based animation
- * Forces remount on route change by using location as key
+ * Outlet wrapper for route remounts + compact swipe-back chrome.
+ *
+ * On compact list routes the parent PageRoot already omits children. If this
+ * outlet is still mounted (stale stack / empty SpaceIndexRedirect), render
+ * nothing so an empty swipe shell cannot sit above the channel list and eat taps.
  */
 export function AnimatedOutlet() {
   const location = useLocation();
   const compact = useCompactNav();
+  const isListRoute = useIsCompactListRoute();
+
+  if (compact && isListRoute) {
+    return null;
+  }
 
   return (
     <MobileSwipeGestureHost>

overlay/src/app/components/editor/Editor.css.ts

@@ -0,0 +1,79 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, DefaultReset, toRem } from 'folds';
+
+export const Editor = style([
+  DefaultReset,
+  {
+    backgroundColor: color.SurfaceVariant.Container,
+    color: color.SurfaceVariant.OnContainer,
+    boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
+    borderRadius: config.radii.R400,
+    overflow: 'hidden',
+    selectors: {
+      // Keyboard-flush dock: only a top edge so the input can sit on the IME.
+      '[data-composer-flush="true"] &': {
+        borderRadius: 0,
+        boxShadow: `inset 0 ${config.borderWidth.B300} 0 0 ${color.SurfaceVariant.ContainerLine}`,
+      },
+    },
+  },
+]);
+
+export const EditorOptions = style([
+  DefaultReset,
+  {
+    padding: config.space.S200,
+  },
+]);
+
+export const EditorTextareaScroll = style({});
+
+export const EditorTextarea = style([
+  DefaultReset,
+  {
+    flexGrow: 1,
+    height: '100%',
+    padding: `${toRem(13)} ${toRem(1)}`,
+    selectors: {
+      [`${EditorTextareaScroll}:first-child &`]: {
+        paddingLeft: toRem(13),
+      },
+      [`${EditorTextareaScroll}:last-child &`]: {
+        paddingRight: toRem(13),
+      },
+      '&:focus': {
+        outline: 'none',
+      },
+    },
+  },
+]);
+
+export const EditorPlaceholderContainer = style([
+  DefaultReset,
+  {
+    opacity: config.opacity.Placeholder,
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+]);
+
+export const EditorPlaceholderTextVisual = style([
+  DefaultReset,
+  {
+    display: 'block',
+    paddingTop: toRem(13),
+    paddingLeft: toRem(1),
+  },
+]);
+
+export const EditorToolbarBase = style({
+  padding: `0 ${config.borderWidth.B300}`,
+});
+
+export const EditorToolbar = style({
+  padding: config.space.S100,
+});
+
+export const MarkdownBtnBox = style({
+  paddingRight: config.space.S100,
+});

overlay/src/app/components/mobile/MobileSwipeGestureHost.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useCompactNav } from '../../hooks/useCompactNav';
 import { useBackRoute } from '../../hooks/useBackRoute';
 import { startReplyToEvent } from '../../features/room/replyToMessage';
@@ -93,6 +94,7 @@ const resetElementTransform = (el: HTMLElement | null) => {
 
 export function MobileSwipeGestureHost({ children }: MobileSwipeGestureHostProps) {
   const compact = useCompactNav();
+  const { pathname } = useLocation();
   const { canGoBack, goBack } = useBackRoute();
   const backEnabled = compact && canGoBack;
   const replyEnabled = compact;
@@ -350,7 +352,7 @@ export function MobileSwipeGestureHost({ children }: MobileSwipeGestureHostProps
 
   useEffect(() => {
     resetGesture();
-  }, [canGoBack, resetGesture]);
+  }, [canGoBack, pathname, resetGesture]);
 
   if (!compact) {
     return <>{children}</>;

overlay/src/app/components/mobile/mobile-gestures.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
 export const SwipeBackRoot = style({
@@ -36,7 +36,10 @@ export const CompactNavUnderlay = style({
   display: 'flex',
   flexDirection: 'column',
   zIndex: 0,
-  pointerEvents: 'none',
+  // Keep underlay tappable if the detail layer is empty/transparent
+  // (e.g. space index after leaving DMs). Opaque detail content still
+  // sits above and receives taps first.
+  pointerEvents: 'auto',
 });
 
 export const CompactDetailLayer = style({
@@ -45,6 +48,19 @@ export const CompactDetailLayer = style({
   minWidth: 0,
   display: 'flex',
   flexDirection: 'column',
+  // Pass through taps when outlet content is null/empty; real pages
+  // re-enable pointer events on their root via the child rule below.
+  pointerEvents: 'none',
+});
+
+globalStyle(`${CompactDetailLayer} > *`, {
+  pointerEvents: 'auto',
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: color.Background.Container,
 });
 
 export const SwipeToReplyLayer = style({

overlay/src/app/components/page/Page.tsx

@@ -18,6 +18,9 @@ export function PageRoot({ nav, children }: PageRootProps) {
   const showCompactMaster = useShowCompactMasterView();
   const compact = screenSize === ScreenSize.Mobile;
 
+  // Master list routes: only the channel/space list is interactive.
+  // Never mount the detail/underlay stack here — an empty detail layer would
+  // sit above the list with pointer-events and freeze taps (DM → space bug).
   if (compact && showCompactMaster) {
     return (
       <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>

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, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
+import { RoomViewFollowing } from './RoomViewFollowing';
 import { Page } from '../../components/page';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useKeyDown } from '../../hooks/useKeyDown';
@@ -26,6 +26,8 @@ import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { activeThreadIdAtomFamily } from '../../state/activeThread';
 import { ThreadView } from './ThreadView';
 import { MobileSwipeToReplyLayer } from '../../components/mobile/MobileSwipeToReplyLayer';
+import { useMobileKeyboardLayout } from '../../hooks/useMobileKeyboardLayout';
+import * as composerCss from './room-composer-mobile.css';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -63,6 +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 { roomId } = room;
   const editor = useEditor();
@@ -101,9 +104,13 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     )
   );
 
+  const flushComposer = keyboardOpen || isLandscape;
+  const composerPadding = flushComposer ? '0' : `0 ${config.space.S400}`;
+  const showHeader = !keyboardOpen;
+
   return (
     <Page ref={roomViewRef}>
-      <RoomViewHeader />
+      {showHeader && <RoomViewHeader />}
       {activeThreadId ? (
         <ThreadView room={room} threadRootId={activeThreadId} />
       ) : (
@@ -120,8 +127,21 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
               <RoomViewTyping room={room} />
             </Box>
           </MobileSwipeToReplyLayer>
-          <Box shrink="No" direction="Column" data-disable-swipe-back="true">
-            <div style={{ padding: `0 ${config.space.S400}` }}>
+          <Box
+            shrink="No"
+            direction="Column"
+            data-disable-swipe-back="true"
+            data-composer-flush={flushComposer ? 'true' : undefined}
+            className={composerCss.ComposerDock}
+          >
+            {!hideActivity && (
+              <div className={composerCss.FollowingFloat}>
+                <div className={composerCss.FollowingFloatHit}>
+                  <RoomViewFollowing room={room} />
+                </div>
+              </div>
+            )}
+            <div style={{ padding: composerPadding }}>
               {tombstoneEvent ? (
                 <RoomTombstone
                   roomId={roomId}
@@ -151,7 +171,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
                 </>
               )}
             </div>
-            {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
           </Box>
         </>
       )}

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

@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { DefaultReset, color, config } from 'folds';
+
+export const RoomViewFollowingPlaceholder = style([
+  DefaultReset,
+  {
+    display: 'none',
+    height: 0,
+  },
+]);
+
+export const RoomViewFollowing = recipe({
+  base: [
+    DefaultReset,
+    {
+      minHeight: 0,
+      padding: `${config.space.S100} ${config.space.S200}`,
+      width: 'auto',
+      maxWidth: '100%',
+      backgroundColor: 'transparent',
+      color: color.Surface.OnContainer,
+      outline: 'none',
+    },
+  ],
+  variants: {
+    clickable: {
+      true: {
+        cursor: 'pointer',
+        selectors: {
+          '&:hover, &:focus-visible': {
+            color: color.Primary.Main,
+          },
+          '&:active': {
+            color: color.Primary.Main,
+          },
+        },
+      },
+    },
+  },
+});

overlay/src/app/features/room/room-composer-mobile.css.ts

@@ -0,0 +1,63 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { DefaultReset, color, config } from 'folds';
+
+export const ComposerDock = style({
+  position: 'relative',
+});
+
+/** Read receipts float above the input so they don't reserve layout height. */
+export const FollowingFloat = style({
+  position: 'absolute',
+  bottom: '100%',
+  left: 0,
+  right: 0,
+  zIndex: 2,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  pointerEvents: 'none',
+  padding: `0 ${config.space.S200}`,
+});
+
+export const FollowingFloatHit = style({
+  pointerEvents: 'auto',
+  maxWidth: '100%',
+});
+
+export const RoomViewFollowingPlaceholder = style([
+  DefaultReset,
+  {
+    display: 'none',
+    height: 0,
+  },
+]);
+
+export const RoomViewFollowing = recipe({
+  base: [
+    DefaultReset,
+    {
+      minHeight: 0,
+      padding: `${config.space.S100} ${config.space.S200}`,
+      width: 'auto',
+      maxWidth: '100%',
+      backgroundColor: 'transparent',
+      color: color.Surface.OnContainer,
+      outline: 'none',
+    },
+  ],
+  variants: {
+    clickable: {
+      true: {
+        cursor: 'pointer',
+        selectors: {
+          '&:hover, &:focus-visible': {
+            color: color.Primary.Main,
+          },
+          '&:active': {
+            color: color.Primary.Main,
+          },
+        },
+      },
+    },
+  },
+});

overlay/src/app/hooks/useCompactNav.ts

@@ -0,0 +1,30 @@
+import { matchPath, useLocation } from 'react-router-dom';
+import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
+import { ScreenSize, useScreenSizeContext } from './useScreenSize';
+
+/** Skinny window layout (≤750px): master-detail instead of 3-column desktop. */
+export const useCompactNav = (): boolean => {
+  const screenSize = useScreenSizeContext();
+  return screenSize === ScreenSize.Mobile;
+};
+
+const LIST_ROUTE_PATHS = [HOME_PATH, DIRECT_PATH, SPACE_PATH, EXPLORE_PATH, INBOX_PATH] as const;
+
+/**
+ * Routes where sidebar + channel list are shown together (no room/content pane).
+ * Uses matchPath on the current pathname so trailing-slash / encoding quirks
+ * after DM → space navigations still count as master list routes.
+ */
+export const useIsCompactListRoute = (): boolean => {
+  const { pathname } = useLocation();
+
+  return LIST_ROUTE_PATHS.some(
+    (path) => matchPath({ path, caseSensitive: true, end: true }, pathname) != null
+  );
+};
+
+export const useShowCompactMasterView = (): boolean => {
+  const compact = useCompactNav();
+  const isListRoute = useIsCompactListRoute();
+  return compact && isListRoute;
+};

overlay/src/app/hooks/useMobileKeyboardLayout.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+
+const KEYBOARD_HEIGHT_THRESHOLD_PX = 120;
+
+const getIsLandscape = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  if (window.matchMedia?.('(orientation: landscape)').matches) return true;
+  return window.innerWidth > window.innerHeight;
+};
+
+const getKeyboardOpen = (): boolean => {
+  if (typeof window === 'undefined') return false;
+
+  const viewport = window.visualViewport;
+  if (viewport) {
+    const obscured = window.innerHeight - viewport.height - viewport.offsetTop;
+    if (obscured > KEYBOARD_HEIGHT_THRESHOLD_PX) return true;
+  }
+
+  const active = document.activeElement;
+  if (!(active instanceof HTMLElement)) return false;
+  if (active.isContentEditable) return true;
+  const tag = active.tagName;
+  return tag === 'INPUT' || tag === 'TEXTAREA';
+};
+
+export type MobileKeyboardLayout = {
+  isLandscape: boolean;
+  keyboardOpen: boolean;
+};
+
+/**
+ * Landscape + soft-keyboard layout signals for compact room chrome.
+ * Uses visualViewport when available (Capacitor/Android WebView).
+ */
+export const useMobileKeyboardLayout = (): MobileKeyboardLayout => {
+  const [isLandscape, setIsLandscape] = useState(getIsLandscape);
+  const [keyboardOpen, setKeyboardOpen] = useState(getKeyboardOpen);
+
+  useEffect(() => {
+    const sync = () => {
+      setIsLandscape(getIsLandscape());
+      setKeyboardOpen(getKeyboardOpen());
+    };
+
+    sync();
+
+    const orientationQuery = window.matchMedia?.('(orientation: landscape)');
+    orientationQuery?.addEventListener?.('change', sync);
+    window.addEventListener('resize', sync);
+    window.visualViewport?.addEventListener('resize', sync);
+    window.visualViewport?.addEventListener('scroll', sync);
+    window.addEventListener('focusin', sync);
+    window.addEventListener('focusout', sync);
+
+    return () => {
+      orientationQuery?.removeEventListener?.('change', sync);
+      window.removeEventListener('resize', sync);
+      window.visualViewport?.removeEventListener('resize', sync);
+      window.visualViewport?.removeEventListener('scroll', sync);
+      window.removeEventListener('focusin', sync);
+      window.removeEventListener('focusout', sync);
+    };
+  }, []);
+
+  return { isLandscape, keyboardOpen };
+};

overlay/src/app/hooks/useViewTransitions.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect } from 'react';
+import { useLocation, useNavigate, NavigateOptions } from 'react-router-dom';
+import { supportsViewTransitions, withViewTransition } from '../utils/viewTransitions';
+
+export const useViewTransitions = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!supportsViewTransitions()) {
+      return;
+    }
+
+    document.documentElement.classList.add('view-transitions-enabled');
+
+    return () => {
+      document.documentElement.classList.remove('view-transitions-enabled');
+    };
+  }, []);
+
+  useEffect(() => {
+    // Route changed
+  }, [location]);
+
+  return {
+    supportsViewTransitions: supportsViewTransitions(),
+  };
+};
+
+/**
+ * Navigate helper. On Capacitor / coarse-pointer, View Transitions are disabled
+ * so DM ↔ space switches cannot leave a stuck hit-blocking overlay.
+ */
+export const useNavigateWithTransition = () => {
+  const navigate = useNavigate();
+
+  return useCallback(
+    (to: string | number, options?: NavigateOptions) => {
+      if (!supportsViewTransitions()) {
+        if (typeof to === 'number') {
+          navigate(to);
+        } else {
+          navigate(to, options);
+        }
+        return;
+      }
+
+      withViewTransition(() => {
+        if (typeof to === 'number') {
+          navigate(to);
+        } else {
+          navigate(to, options);
+        }
+      });
+    },
+    [navigate]
+  );
+};

overlay/src/app/pages/client/ClientLayout.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { Box } from 'folds';
+import { DockedCallPanel } from '../../features/call/DockedCallPanel';
+import { useMobileKeyboardLayout } from '../../hooks/useMobileKeyboardLayout';
+
+type ClientLayoutProps = {
+  nav: ReactNode;
+  children: ReactNode;
+};
+
+export function ClientLayout({ nav, children }: ClientLayoutProps) {
+  const { keyboardOpen } = useMobileKeyboardLayout();
+
+  return (
+    <Box grow="Yes">
+      {!keyboardOpen && <Box shrink="No">{nav}</Box>}
+      <Box grow="Yes">{children}</Box>
+      <DockedCallPanel />
+    </Box>
+  );
+}

overlay/src/app/utils/viewTransitions.ts

@@ -0,0 +1,81 @@
+import { isCapacitorNative } from './tauri';
+
+/**
+ * View Transitions can leave an invisible hit-blocking overlay on Android
+ * WebView after DM ↔ space navigations. Keep them off for native/touch shells.
+ */
+const shouldDisableViewTransitions = (): boolean => {
+  if (typeof window === 'undefined') return true;
+  if (isCapacitorNative()) return true;
+  if (window.matchMedia?.('(pointer: coarse)').matches) return true;
+  return false;
+};
+
+export const supportsViewTransitions = (): boolean => {
+  if (shouldDisableViewTransitions()) return false;
+  return 'startViewTransition' in document;
+};
+
+export const withViewTransition = async (callback: () => void | Promise<void>): Promise<void> => {
+  if (!supportsViewTransitions()) {
+    await callback();
+    return;
+  }
+
+  const doc = document as Document & {
+    startViewTransition: (callback: () => void | Promise<void>) => {
+      finished: Promise<void>;
+      updateCallbackDone: Promise<void>;
+      ready: Promise<void>;
+    };
+  };
+
+  try {
+    const transition = doc.startViewTransition(async () => {
+      await callback();
+    });
+
+    await transition.finished;
+  } catch {
+    await callback();
+  }
+};
+
+/**
+ * Global link interception for View Transitions. No-op on Capacitor / touch.
+ * Also fights hash-router navigations — leave disabled on mobile.
+ */
+export const enableViewTransitionsForNavigation = (): void => {
+  if (!supportsViewTransitions()) {
+    return;
+  }
+
+  const handleLinkClick = (event: MouseEvent) => {
+    const target = (event.target as HTMLElement).closest('a');
+
+    if (!target) return;
+    if (target.target === '_blank') return;
+    if (target.origin !== window.location.origin) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+
+    const url = new URL(target.href);
+
+    if (url.origin === window.location.origin) {
+      event.preventDefault();
+
+      withViewTransition(() => {
+        window.history.pushState({}, '', target.href);
+        window.dispatchEvent(new PopStateEvent('popstate'));
+      });
+    }
+  };
+
+  const handlePopState = () => {
+    withViewTransition(() => {
+      // URL already changed
+    });
+  };
+
+  window.addEventListener('click', handleLinkClick);
+  window.addEventListener('popstate', handlePopState);
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paarrot",
-  "version": "4.11.118",
+  "version": "4.11.121",
   "description": "Paarrot - A Matrix client based on Cinny",
   "engines": {
     "node": ">=18.0.0"