From 349194e7e53d27962fbf7c563c69519dce714315 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 28 Jun 2026 22:32:19 -0400
Subject: [PATCH] fix(ui): folds primitives for RouteError + PiP fullscreen
 button (native-cinny audit 5/N)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- RouteError: raw <div>/<h2>/<p>/<button> (sans-serif, raw px) -> folds
  Box/Text/Button with config tokens.
- CallEmbedProvider PiP fullscreen control: raw <button> with ⊡/⛶ glyphs ->
  folds IconButton reusing the exported FullscreenIcon/ExitFullscreenIcon SVGs
  from Controls (consistent with the main fullscreen button). The intentional
  dark over-video scrim is kept.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/components/CallEmbedProvider.tsx | 21 +++++------
 src/app/features/call/Controls.tsx       |  4 +--
 src/app/pages/RouteError.tsx             | 44 +++++++++---------------
 3 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/src/app/components/CallEmbedProvider.tsx b/src/app/components/CallEmbedProvider.tsx
index a6ea82939..18e065afc 100644
--- a/src/app/components/CallEmbedProvider.tsx
+++ b/src/app/components/CallEmbedProvider.tsx
@@ -9,6 +9,7 @@ import {
   config,
   Dialog,
   Icon,
+  IconButton,
   Icons,
   Overlay,
   OverlayBackdrop,
@@ -51,6 +52,7 @@ import { mxcUrlToHttp, getMxIdLocalPart } from '../utils/matrix';
 import { RoomAvatar, RoomIcon } from './room-avatar';
 import { useRoomNavigate } from '../hooks/useRoomNavigate';
 import { getChatBg } from '../features/lotus/chatBackground';
+import { ExitFullscreenIcon, FullscreenIcon } from '../features/call/Controls';
 import { useTheme, ThemeKind } from '../hooks/useTheme';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
@@ -1095,10 +1097,13 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
             >
               <div style={{ display: 'flex', gap: config.space.S100, alignItems: 'center' }}>
                 {document.fullscreenEnabled && (
-                  <button
+                  <IconButton
                     type="button"
+                    size="300"
+                    radii="300"
+                    variant="Surface"
+                    fill="None"
                     aria-label={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
-                    title={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
                     onClick={(e) => {
                       e.stopPropagation();
                       handlePipFullscreen();
@@ -1107,19 +1112,11 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                       // Dark scrim is intentional for legibility over arbitrary video.
                       background: 'rgba(0,0,0,0.65)',
                       backdropFilter: 'blur(4px)',
-                      border: 'none',
-                      borderRadius: config.radii.R300,
-                      padding: `${config.space.S100} ${config.space.S200}`,
                       color: '#fff',
-                      fontSize: '13px',
-                      cursor: 'pointer',
-                      lineHeight: 1,
-                      display: 'flex',
-                      alignItems: 'center',
                     }}
                   >
-                    {pipIsFullscreen ? '⊡' : '⛶'}
-                  </button>
+                    {pipIsFullscreen ? <ExitFullscreenIcon /> : <FullscreenIcon />}
+                  </IconButton>
                 )}
                 <div
                   style={{
diff --git a/src/app/features/call/Controls.tsx b/src/app/features/call/Controls.tsx
index 0a7d3815e..3bf8ac7c2 100644
--- a/src/app/features/call/Controls.tsx
+++ b/src/app/features/call/Controls.tsx
@@ -166,13 +166,13 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
   );
 }
 
-const FullscreenIcon = () => (
+export const FullscreenIcon = () => (
   <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
     <path d="M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 4h-4v2h6v-6h-2v4z" />
   </svg>
 );
 
-const ExitFullscreenIcon = () => (
+export const ExitFullscreenIcon = () => (
   <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
     <path d="M9 3H7v4H3v2h6V3zm6 0v6h6V7h-4V3h-2zM3 13v2h4v4h2v-6H3zm14 4v-4h2v6h-6v-2h4z" />
   </svg>
diff --git a/src/app/pages/RouteError.tsx b/src/app/pages/RouteError.tsx
index 149711e55..360253c0a 100644
--- a/src/app/pages/RouteError.tsx
+++ b/src/app/pages/RouteError.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
+import { Box, Button, config, Text, toRem } from 'folds';
 
 export function RouteError() {
   const error = useRouteError();
@@ -11,33 +12,22 @@ export function RouteError() {
       : 'An unexpected error occurred.';
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100dvh',
-        gap: '16px',
-        padding: '32px',
-        fontFamily: 'sans-serif',
-      }}
+    <Box
+      direction="Column"
+      alignItems="Center"
+      justifyContent="Center"
+      gap="400"
+      style={{ height: '100dvh', padding: config.space.S700 }}
     >
-      <h2 style={{ margin: 0, fontSize: '1.25rem' }}>Something went wrong</h2>
-      <p style={{ margin: 0, opacity: 0.7, textAlign: 'center' }}>{message}</p>
-      <button
-        type="button"
-        onClick={() => window.location.reload()}
-        style={{
-          padding: '8px 20px',
-          borderRadius: '8px',
-          border: 'none',
-          cursor: 'pointer',
-          fontWeight: 600,
-        }}
-      >
-        Reload
-      </button>
-    </div>
+      <Text size="H3">Something went wrong</Text>
+      <Text size="T300" priority="300" style={{ textAlign: 'center', maxWidth: toRem(400) }}>
+        {message}
+      </Text>
+      <Button variant="Primary" onClick={() => window.location.reload()}>
+        <Text as="span" size="B400">
+          Reload
+        </Text>
+      </Button>
+    </Box>
   );
 }