feat(mobile): page viewer and ContentImage (SUPER-2079)

apps/mobile/app/(authenticated)/_layout.tsx

@@ -104,6 +104,10 @@ export default function AuthenticatedLayout() {
 				name="workspace/[id]/file"
 				options={{ ...glassHeaderOptions, title: "" }}
 			/>
+			<Stack.Screen
+				name="page/[id]"
+				options={{ ...glassHeaderOptions, title: "" }}
+			/>
 			<Stack.Screen
 				name="workspace/[id]/commits"
 				options={{

apps/mobile/app/(authenticated)/page/[id].tsx

@@ -0,0 +1,3 @@
+import { PageViewerScreen } from "@/screens/(authenticated)/page/[id]";
+
+export default PageViewerScreen;

apps/mobile/hooks/useSignOut/useSignOut.ts

@@ -1,4 +1,5 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { Image } from "expo-image";
 import { useRouter } from "expo-router";
 import { useCallback, useState } from "react";
 import { signOut } from "@/lib/auth/client";
@@ -13,6 +14,7 @@ export function useSignOut() {
 		try {
 			await signOut();
 			queryClient.clear();
+			await Image.clearDiskCache().catch(() => {});
 			router.replace("/(auth)/sign-in");
 		} catch (error) {
 			console.error("[auth/signOut] Failed to sign out:", error);

apps/mobile/screens/(authenticated)/components/ContentImage/ContentImage.tsx

@@ -0,0 +1,34 @@
+import { Image as ExpoImage, type ImageProps } from "expo-image";
+import { withUniwind } from "uniwind";
+
+const StyledImage = withUniwind(ExpoImage);
+
+interface ContentImageProps extends Omit<ImageProps, "source"> {
+	url: string | null | undefined;
+	/**
+	 * The server's storage key for the bytes, when it names one
+	 * (`Superset-Storage-Key`, `storageKey` in API responses). It becomes the
+	 * disk-cache key, so a rotated ticket in the URL is never a fresh
+	 * download.
+	 */
+	storageKey?: string | null;
+	className?: string;
+}
+
+/** Every remote image the app renders goes through here, cached by identity, not URL. */
+export function ContentImage({
+	url,
+	storageKey,
+	className,
+	...props
+}: ContentImageProps) {
+	if (!url) return null;
+	return (
+		<StyledImage
+			className={className}
+			source={{ uri: url, ...(storageKey ? { cacheKey: storageKey } : {}) }}
+			cachePolicy="disk"
+			{...props}
+		/>
+	);
+}

apps/mobile/screens/(authenticated)/components/ContentImage/index.ts

@@ -0,0 +1 @@
+export { ContentImage } from "./ContentImage";

apps/mobile/screens/(authenticated)/components/OrganizationAvatar/OrganizationAvatar.tsx

@@ -1,7 +1,7 @@
-import { Image } from "expo-image";
 import { View } from "react-native";
 import { Text } from "@/components/ui/text";
 import { useTheme } from "@/hooks/useTheme";
+import { ContentImage } from "../ContentImage";
 
 export function OrganizationAvatar({
 	name,
@@ -20,10 +20,7 @@ export function OrganizationAvatar({
 				className="overflow-hidden rounded-md border border-foreground/10 bg-muted"
 				style={{ width: size, height: size }}
 			>
-				<Image
-					source={{ uri: logo }}
-					style={{ width: "100%", height: "100%" }}
-				/>
+				<ContentImage url={logo} style={{ width: "100%", height: "100%" }} />
 			</View>
 		);
 	}

apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx

@@ -0,0 +1,81 @@
+import { useLingui } from "@lingui/react/macro";
+import { useQuery } from "@tanstack/react-query";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { ActivityIndicator, Linking, View } from "react-native";
+import { WebView } from "react-native-webview";
+import { withUniwind } from "uniwind";
+import { Text } from "@/components/ui/text";
+import { apiClient } from "@/lib/trpc/client";
+
+const StyledWebView = withUniwind(WebView);
+
+// A ticket is stable within its window (an hour for the served alias), so
+// reopening the page inside it reuses the URL — and WebKit's cache — instead
+// of minting a fresh one.
+const VIEW_URL_STALE_MS = 55 * 60 * 1000;
+
+/**
+ * A published page, loaded top-level from its own origin: its storage, CSP
+ * and video playback work exactly as on the web, cached by WebKit. The
+ * ticket rides the URL's path, so the WebView needs no headers and no
+ * cookies. Navigation stays on the page's origin; anything else opens in
+ * the browser.
+ */
+export function PageViewerScreen() {
+	const { t } = useLingui();
+	const { id } = useLocalSearchParams<{ id: string }>();
+
+	const page = useQuery({
+		queryKey: ["cloud", "page", "get", id],
+		enabled: !!id,
+		staleTime: VIEW_URL_STALE_MS,
+		networkMode: "always",
+		queryFn: () => apiClient.page.get.query({ id: id as string }),
+	});
+
+	const viewUrl = page.data?.viewUrl;
+	const pageOrigin = viewUrl ? new URL(viewUrl).origin : null;
+
+	return (
+		<View className="flex-1 bg-background">
+			<Stack.Screen options={{ title: page.data?.title ?? "" }} />
+			{page.isError ? (
+				<View className="flex-1 items-center justify-center gap-2 px-8">
+					<Text className="text-center font-medium">
+						{t({
+							id: "dashboard.pageViewer.pageOpenFailedTitle",
+							message: "This page could not be opened",
+						})}
+					</Text>
+					<Text className="text-center text-muted-foreground text-sm">
+						{t({
+							id: "dashboard.pageViewer.pageMissingDescription",
+							message:
+								"It may have been deleted, or it belongs to another organization.",
+						})}
+					</Text>
+				</View>
+			) : viewUrl ? (
+				<StyledWebView
+					ph-no-capture
+					className="flex-1 bg-background"
+					source={{ uri: viewUrl }}
+					allowsInlineMediaPlayback
+					mediaPlaybackRequiresUserAction={false}
+					setSupportMultipleWindows={false}
+					onShouldStartLoadWithRequest={(request) => {
+						if (pageOrigin && request.url.startsWith(pageOrigin)) return true;
+						if (request.url.startsWith("about:")) return true;
+						void Linking.openURL(request.url).catch(() => {});
+						return false;
+					}}
+					webviewDebuggingEnabled={__DEV__}
+				/>
+			) : (
+				<View className="flex-1 items-center justify-center">
+					<ActivityIndicator />
+				</View>
+			)}
+		</View>
+	);
+}

apps/mobile/screens/(authenticated)/page/[id]/index.ts

@@ -0,0 +1 @@
+export { PageViewerScreen } from "./PageViewerScreen";

apps/mobile/screens/RootLayout/RootLayout.tsx

@@ -6,6 +6,7 @@ import {
 	QueryClient,
 	QueryClientProvider,
 } from "@tanstack/react-query";
+import { Image } from "expo-image";
 import { getLocales } from "expo-localization";
 import { Stack } from "expo-router";
 import { ThemeProvider } from "expo-router/react-navigation";
@@ -17,6 +18,11 @@ import { NAV_THEME } from "@/lib/theme";
 
 Uniwind.setTheme("dark");
 
+// Bound the image disk cache (default is unlimited) so page thumbnails and
+// attachments cannot grow without limit; ContentImage keys entries by
+// storage key, so rotated ticket URLs never duplicate bytes.
+void Image.configureCache({ maxDiskSize: 512 * 1024 * 1024 });
+
 import { PostHogUserIdentifier } from "./components/PostHogUserIdentifier";
 import { PostHogProvider } from "./providers/PostHogProvider";
 

packages/i18n/locales/cs/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Stránky"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Mohla být smazána nebo patří jiné organizaci."
 
@@ -6156,6 +6157,7 @@ msgstr "Tato stránka už neexistuje"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Tuto stránku se nepodařilo otevřít"
 

packages/i18n/locales/de/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Seiten"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Sie wurde möglicherweise gelöscht oder gehört zu einer anderen Organisation."
 
@@ -6156,6 +6157,7 @@ msgstr "Diese Seite existiert nicht mehr"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Diese Seite konnte nicht geöffnet werden"
 

packages/i18n/locales/en/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Pages"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "It may have been deleted, or it belongs to another organization."
 
@@ -6156,6 +6157,7 @@ msgstr "This page no longer exists"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "This page could not be opened"
 

packages/i18n/locales/es/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Páginas"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Puede que se haya eliminado o que pertenezca a otra organización."
 
@@ -6156,6 +6157,7 @@ msgstr "Esta página ya no existe"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "No se pudo abrir esta página"
 

packages/i18n/locales/fr/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Pages"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Elle a peut-être été supprimée, ou elle appartient à une autre organisation."
 
@@ -6156,6 +6157,7 @@ msgstr "Cette page n'existe plus"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Impossible d'ouvrir cette page"
 

packages/i18n/locales/id/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Halaman"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Mungkin sudah dihapus, atau milik organisasi lain."
 
@@ -6156,6 +6157,7 @@ msgstr "Halaman ini sudah tidak ada"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Halaman ini tidak bisa dibuka"
 

packages/i18n/locales/it/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Pagine"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Potrebbe essere stata eliminata oppure appartiene a un'altra organizzazione."
 
@@ -6156,6 +6157,7 @@ msgstr "Questa pagina non esiste più"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Impossibile aprire questa pagina"
 

packages/i18n/locales/ja/messages.po

@@ -6146,6 +6146,7 @@ msgstr "ページ"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "削除されたか、別の組織に属している可能性があります。"
 
@@ -6156,6 +6157,7 @@ msgstr "このページは存在しません"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "このページを開けませんでした"
 

packages/i18n/locales/ko/messages.po

@@ -6146,6 +6146,7 @@ msgstr "페이지"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "삭제되었거나 다른 조직에 속한 페이지일 수 있습니다."
 
@@ -6156,6 +6157,7 @@ msgstr "이 페이지는 더 이상 존재하지 않습니다"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "이 페이지를 열 수 없습니다"
 

packages/i18n/locales/nl/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Pagina's"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Mogelijk is die verwijderd, of hoort die bij een andere organisatie."
 
@@ -6156,6 +6157,7 @@ msgstr "Deze pagina bestaat niet meer"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Deze pagina kon niet worden geopend"
 

packages/i18n/locales/pl/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Strony"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Mogła zostać usunięta lub należy do innej organizacji."
 
@@ -6156,6 +6157,7 @@ msgstr "Ta strona już nie istnieje"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Nie udało się otworzyć tej strony"
 

packages/i18n/locales/pt-BR/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Páginas"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Ela pode ter sido excluída ou pertence a outra organização."
 
@@ -6156,6 +6157,7 @@ msgstr "Esta página não existe mais"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Não foi possível abrir esta página"
 

packages/i18n/locales/ru/messages.po

@@ -6146,6 +6146,7 @@ msgstr "Страницы"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageMissingDescription"
 msgstr "Возможно, она удалена или принадлежит другой организации."
 
@@ -6156,6 +6157,7 @@ msgstr "Этой страницы больше нет"
 
 #. js-lingui-explicit-id
 #: ../../apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx
+#: ../../apps/mobile/screens/(authenticated)/page/[id]/PageViewerScreen.tsx
 msgid "dashboard.pageViewer.pageOpenFailedTitle"
 msgstr "Не удалось открыть эту страницу"