feat(mobile): render global modals as full-screen pages

.changeset/mobile-full-screen-pages.md

@@ -0,0 +1,5 @@
+---
+sable: patch
+---
+
+Render the global modals (search, create room, create space, bug report) as full-screen pages on mobile instead of centered modals.

package.json

@@ -37,6 +37,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
     "@choochmeque/tauri-plugin-notifications-api": "0.5.0-rc.11",
+    "@choochmeque/tauri-plugin-sharekit-api": "0.4.0-rc.5",
     "@fontsource-variable/nunito": "5.2.7",
     "@fontsource/space-mono": "5.2.9",
     "@noble/hashes": "^2.2.0",

src-tauri/Cargo.toml

@@ -101,6 +101,7 @@ tauri-plugin-notifications = { git = "https://github.com/SableClient/tauri-plugi
   "push-notifications",
 ] }
 tauri-plugin-edge-to-edge = { git = "https://github.com/SableClient/tauri-plugin-edge-to-edge.git", rev = "33c6116c27be28c06df5a9d02231ecc5fdeb93c5" }
+tauri-plugin-sharekit = { git = "https://github.com/Choochmeque/tauri-plugin-sharekit", rev = "9f2b4c5d8a4f0ab910d900ba234ed8bae0ab854b" }
 
 [target.'cfg(target_os = "ios")'.dependencies]
 objc2 = "0.6"

src-tauri/capabilities/mobile.json

@@ -8,6 +8,7 @@
     "core:window:allow-set-badge-count",
     "deep-link:default",
     "edge-to-edge:default",
-    "notifications:default"
+    "notifications:default",
+    "sharekit:default"
   ]
 }

src-tauri/src/lib.rs

@@ -260,7 +260,9 @@ pub fn run() {
         .plugin(tauri_plugin_dialog::init());
 
     #[cfg(mobile)]
-    let builder = builder.plugin(tauri_plugin_edge_to_edge::init());
+    let builder = builder
+        .plugin(tauri_plugin_edge_to_edge::init())
+        .plugin(tauri_plugin_sharekit::init());
 
     #[cfg(target_os = "android")]
     let builder = builder.plugin(tauri_plugin_android_fs::init());

src/app/components/Modal500.test.tsx

@@ -1,14 +1,17 @@
 import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
+import { ScreenSize, ScreenSizeProvider } from '$hooks/useScreenSize';
 import { Modal500 } from './Modal500';
 
 describe('Modal500', () => {
   it('does not throw when rendered without tabbable children', () => {
     expect(() =>
       render(
-        <Modal500 requestClose={vi.fn<() => void>()}>
-          <div>Empty modal content</div>
-        </Modal500>
+        <ScreenSizeProvider value={ScreenSize.Desktop}>
+          <Modal500 requestClose={vi.fn<() => void>()}>
+            <div>Empty modal content</div>
+          </Modal500>
+        </ScreenSizeProvider>
       )
     ).not.toThrow();
   });

src/app/components/Modal500.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { useRef } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
+import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { stopPropagation } from '$utils/keyboard';
 
 type Modal500Props = {
@@ -10,6 +11,29 @@ type Modal500Props = {
 };
 export function Modal500({ requestClose, children }: Modal500Props) {
   const modalRef = useRef<HTMLDivElement | null>(null);
+  const screenSize = useScreenSizeContext();
+
+  if (screenSize === ScreenSize.Mobile) {
+    return (
+      <Overlay open>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            escapeDeactivates: stopPropagation,
+            onDeactivate: requestClose,
+          }}
+        >
+          <div
+            ref={modalRef}
+            tabIndex={-1}
+            style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' }}
+          >
+            {children}
+          </div>
+        </FocusTrap>
+      </Overlay>
+    );
+  }
 
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>

src/app/components/page/Page.tsx

@@ -13,14 +13,15 @@ type PageRootProps = {
   rail?: ReactNode;
   bottomNav?: ReactNode;
   children: ReactNode;
+  mobileDrawer?: boolean;
 };
 
-export function PageRoot({ nav, rail, bottomNav, children }: PageRootProps) {
+export function PageRoot({ nav, rail, bottomNav, children, mobileDrawer = true }: PageRootProps) {
   const screenSize = useScreenSizeContext();
   const [mobileGestures] = useSetting(settingsAtom, 'mobileGestures');
   const isMobile = screenSize === ScreenSize.Mobile;
 
-  if (isMobile && mobileGestures) {
+  if (isMobile && mobileGestures && mobileDrawer) {
     return (
       <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
         <MobileNavDrawer nav={nav} rail={rail} bottomNav={bottomNav}>

src/app/components/page/SettingsSectionPage.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import { Box, IconButton, Text } from 'folds';
+import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
+import { ArrowLeft, composerIcon, X } from '$components/icons/phosphor';
+import { Page, PageHeader } from './Page';
+import { SettingsSectionBody, SettingsSectionHeader } from './style.css';
+
+type SettingsSectionPageProps = {
+  title: ReactNode;
+  requestBack?: () => void;
+  requestClose: () => void;
+  titleAs?: 'h1' | 'h2' | 'h3' | 'span' | 'div';
+  backLabel?: string;
+  actionLabel?: string;
+  children?: ReactNode;
+};
+
+export function SettingsSectionPage({
+  title,
+  requestBack,
+  requestClose,
+  titleAs,
+  backLabel,
+  actionLabel,
+  children,
+}: SettingsSectionPageProps) {
+  const screenSize = useScreenSizeContext();
+  const closeLabel = actionLabel ?? 'Close';
+  const showBack = screenSize === ScreenSize.Mobile && requestBack;
+
+  return (
+    <Page>
+      <PageHeader className={SettingsSectionHeader}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            {showBack && (
+              <IconButton aria-label={backLabel ?? 'Back'} onClick={requestBack} variant="Surface">
+                {composerIcon(ArrowLeft)}
+              </IconButton>
+            )}
+            <Text size="H4" as={titleAs} truncate>
+              {title}
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton aria-label={closeLabel} onClick={requestClose} variant="Surface">
+              {composerIcon(X)}
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes" className={SettingsSectionBody}>
+        {children}
+      </Box>
+    </Page>
+  );
+}

src/app/components/page/index.tsx

@@ -1 +1,2 @@
 export * from './Page';
+export * from './SettingsSectionPage';

src/app/components/page/style.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 import { recipe } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
@@ -123,3 +123,21 @@ export const PageContentCenter = style([
     margin: 'auto',
   },
 ]);
+
+export const SettingsSectionBody = style({
+  width: '100%',
+  maxWidth: toRem(800),
+  marginInline: 'auto',
+});
+
+globalStyle(`${SettingsSectionBody} *`, {
+  scrollbarWidth: 'none',
+});
+globalStyle(`${SettingsSectionBody} *::-webkit-scrollbar`, {
+  display: 'none',
+});
+
+export const SettingsSectionHeader = style({
+  paddingLeft: config.space.S300,
+  paddingRight: config.space.S200,
+});

src/app/components/user-profile/UserChips.tsx

@@ -35,6 +35,7 @@ import { getMxIdServer } from '$utils/mxIdHelper';
 import { useCloseUserRoomProfile } from '$state/hooks/userRoomProfile';
 import { stopPropagation } from '$utils/keyboard';
 import { copyToClipboard } from '$utils/dom';
+import { shareText } from '$utils/share';
 import { getExploreServerPath } from '$pages/pathUtils';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { factoryRoomIdByAtoZ } from '$utils/sort';
@@ -300,6 +301,26 @@ export function ShareChip({
                 >
                   <Text size="B300">Copy User Link</Text>
                 </MenuItem>
+                <MenuItem
+                  fill="None"
+                  size="300"
+                  radii="300"
+                  className={css.UserHeroMenuItem}
+                  style={heroMenuItemStyle(
+                    {
+                      backgroundColor: menuItemBg,
+                      color: textColor,
+                    },
+                    chipHoverBrightness
+                  )}
+                  onClick={async () => {
+                    const shared = await shareText(getMatrixToUser(userId));
+                    if (shared) setCopied();
+                    close();
+                  }}
+                >
+                  <Text size="B300">Share User Link</Text>
+                </MenuItem>
               </Box>
             </div>
           </Menu>