feat(mobile): read and comment on pages from the phone

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

@@ -31,7 +31,18 @@ export default function HomeLayout() {
 				}}
 			/>
 			<Stack.Screen
-				name="organizations"
+				name="organizations/index"
+				options={{
+					presentation: "formSheet",
+					sheetAllowedDetents: [0.5],
+					sheetGrabberVisible: true,
+					title: t({
+						message: "Organization",
+					}),
+				}}
+			/>
+			<Stack.Screen
+				name="organizations/switch"
 				options={{
 					presentation: "formSheet",
 					sheetAllowedDetents: [0.5],

apps/mobile/app/(authenticated)/(home)/organizations/switch.tsx

@@ -0,0 +1,3 @@
+import { OrganizationSwitchSheet } from "@/screens/(authenticated)/(home)/organizations/switch";
+
+export default OrganizationSwitchSheet;

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

@@ -4,10 +4,14 @@ import { Redirect, Stack, usePathname } from "expo-router";
 import { usePrimeRelayUrl } from "@/hooks/usePrimeRelayUrl";
 import { useSession } from "@/lib/auth/client";
 
-const settingsScreenOptions = (title: string) => ({
+const pageScreenOptions = {
 	headerShown: true,
 	headerBackButtonDisplayMode: "minimal" as const,
 	headerShadowVisible: false,
+};
+
+const settingsScreenOptions = (title: string) => ({
+	...pageScreenOptions,
 	title,
 });
 
@@ -39,7 +43,7 @@ export default function AuthenticatedLayout() {
 	if (
 		unpaid &&
 		pathname !== "/" &&
-		pathname !== "/organizations" &&
+		!pathname.startsWith("/organizations") &&
 		!pathname.startsWith("/settings")
 	) {
 		return <Redirect href="/(authenticated)/(home)" />;
@@ -51,6 +55,88 @@ export default function AuthenticatedLayout() {
 			    back-button long-press menus (otherwise raw route names leak,
 			    e.g. "(home)"). */}
 			<Stack.Screen name="(home)" options={{ title: t({ message: "Home" }) }} />
+			<Stack.Screen
+				name="pages/index"
+				options={{ ...pageScreenOptions, title: t({ message: "Pages" }) }}
+			/>
+			<Stack.Screen
+				name="pages/filter"
+				options={{
+					presentation: "formSheet",
+					title: t({ message: "Filter" }),
+					sheetAllowedDetents: [0.4],
+					sheetGrabberVisible: true,
+					...glassHeaderOptions,
+				}}
+			/>
+			<Stack.Screen
+				name="pages/[slug]/index"
+				options={{
+					...pageScreenOptions,
+					title: "",
+					headerBackTitle: t({ message: "Pages" }),
+				}}
+			/>
+			<Stack.Screen
+				name="pages/[slug]/preview"
+				options={{
+					presentation: "formSheet",
+					title: "",
+					sheetAllowedDetents: [0.6, 1.0],
+					sheetGrabberVisible: true,
+					...glassHeaderOptions,
+				}}
+			/>
+			<Stack.Screen
+				name="pages/[slug]/compose"
+				options={{
+					presentation: "formSheet",
+					title: t({ message: "Write a comment" }),
+					sheetAllowedDetents: [0.5],
+					sheetGrabberVisible: true,
+					...glassHeaderOptions,
+				}}
+			/>
+			<Stack.Screen
+				name="pages/[slug]/quick"
+				options={{
+					presentation: "formSheet",
+					title: t({ message: "Quick feedback" }),
+					sheetAllowedDetents: [0.6],
+					sheetGrabberVisible: true,
+					...glassHeaderOptions,
+				}}
+			/>
+			<Stack.Screen
+				name="pages/[slug]/thread"
+				options={{
+					presentation: "formSheet",
+					title: t({ message: "Comment" }),
+					sheetAllowedDetents: [0.7],
+					sheetGrabberVisible: true,
+					...glassHeaderOptions,
+				}}
+			/>
+			<Stack.Screen
+				name="pages/[slug]/comments"
+				options={{
+					presentation: "formSheet",
+					title: t({ message: "All comments" }),
+					sheetAllowedDetents: [1.0],
+					sheetGrabberVisible: true,
+					...glassHeaderOptions,
+				}}
+			/>
+			<Stack.Screen
+				name="pages/[slug]/share"
+				options={{
+					presentation: "formSheet",
+					title: t({ message: "Share page" }),
+					sheetAllowedDetents: [0.75],
+					sheetGrabberVisible: true,
+					...glassHeaderOptions,
+				}}
+			/>
 			<Stack.Screen
 				name="settings/index"
 				options={settingsScreenOptions(t({ message: "Settings" }))}

apps/mobile/app/(authenticated)/pages/[slug]/comments.tsx

@@ -0,0 +1,3 @@
+import { AllCommentsSheet } from "@/screens/(authenticated)/pages/[slug]/comments";
+
+export default AllCommentsSheet;

apps/mobile/app/(authenticated)/pages/[slug]/compose.tsx

@@ -0,0 +1,3 @@
+import { ComposeCommentSheet } from "@/screens/(authenticated)/pages/[slug]/compose";
+
+export default ComposeCommentSheet;

apps/mobile/app/(authenticated)/pages/[slug]/index.tsx

@@ -0,0 +1,3 @@
+import { PageDetailScreen } from "@/screens/(authenticated)/pages/[slug]";
+
+export default PageDetailScreen;

apps/mobile/app/(authenticated)/pages/[slug]/preview.tsx

@@ -0,0 +1,3 @@
+import { PagePreviewSheet } from "@/screens/(authenticated)/pages/[slug]/preview";
+
+export default PagePreviewSheet;

apps/mobile/app/(authenticated)/pages/[slug]/quick.tsx

@@ -0,0 +1,3 @@
+import { QuickFeedbackSheet } from "@/screens/(authenticated)/pages/[slug]/quick";
+
+export default QuickFeedbackSheet;

apps/mobile/app/(authenticated)/pages/[slug]/share.tsx

@@ -0,0 +1,3 @@
+import { PageShareSheet } from "@/screens/(authenticated)/pages/[slug]/share";
+
+export default PageShareSheet;

apps/mobile/app/(authenticated)/pages/[slug]/thread.tsx

@@ -0,0 +1,3 @@
+import { CommentThreadSheet } from "@/screens/(authenticated)/pages/[slug]/thread";
+
+export default CommentThreadSheet;

apps/mobile/app/(authenticated)/pages/filter.tsx

@@ -0,0 +1,3 @@
+import { PagesFilterSheet } from "@/screens/(authenticated)/pages/filter";
+
+export default PagesFilterSheet;

apps/mobile/app/(authenticated)/pages/index.tsx

@@ -0,0 +1,3 @@
+import { PagesScreen } from "@/screens/(authenticated)/pages";
+
+export default PagesScreen;

apps/mobile/hooks/useOpenLink/index.ts

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

apps/mobile/hooks/useOpenLink/useOpenLink.ts

@@ -0,0 +1,24 @@
+import { useRouter } from "expo-router";
+import { useCallback } from "react";
+import { env } from "@/lib/env";
+import { openUrl } from "@/lib/open-url";
+import { pageSlugFromUrl } from "@/lib/page-links";
+
+export function useOpenLink(): (url: string) => void {
+	const router = useRouter();
+
+	return useCallback(
+		(url: string) => {
+			const slug = pageSlugFromUrl(url, env.EXPO_PUBLIC_WEB_URL);
+			if (slug === null) {
+				openUrl(url);
+				return;
+			}
+			router.push({
+				pathname: "/(authenticated)/pages/[slug]/preview",
+				params: { slug },
+			});
+		},
+		[router],
+	);
+}

apps/mobile/lib/open-url.ts

@@ -8,7 +8,20 @@ import { Alert, Linking } from "react-native";
  * leaving an unhandled rejection and a tap that looks dead.
  */
 export function openUrl(url: string) {
+	if (!isWebUrl(url)) {
+		Alert.alert(i18n._(msg({ message: "Could not open link" })), url);
+		return;
+	}
 	Linking.openURL(url).catch(() => {
 		Alert.alert(i18n._(msg({ message: "Could not open link" })), url);
 	});
 }
+
+function isWebUrl(url: string): boolean {
+	try {
+		const { protocol } = new URL(url);
+		return protocol === "http:" || protocol === "https:";
+	} catch {
+		return false;
+	}
+}

apps/mobile/lib/page-links/index.ts

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

apps/mobile/lib/page-links/pageLinks.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from "bun:test";
+import { pageSlugFromUrl } from "./pageLinks";
+
+const WEB = "https://app.superset.sh";
+
+describe("pageSlugFromUrl", () => {
+	test("reads the slug from a page link", () => {
+		expect(pageSlugFromUrl(`${WEB}/page/one-plugin-surface-q7x`, WEB)).toBe(
+			"one-plugin-surface-q7x",
+		);
+	});
+
+	test("ignores a trailing slash, query and fragment", () => {
+		expect(pageSlugFromUrl(`${WEB}/page/deploy-notes/`, WEB)).toBe(
+			"deploy-notes",
+		);
+		expect(pageSlugFromUrl(`${WEB}/page/deploy-notes?v=3#top`, WEB)).toBe(
+			"deploy-notes",
+		);
+	});
+
+	test("tolerates a configured web url with a trailing slash", () => {
+		expect(pageSlugFromUrl(`${WEB}/page/deploy-notes`, `${WEB}/`)).toBe(
+			"deploy-notes",
+		);
+	});
+
+	test("refuses another origin, however similar", () => {
+		expect(pageSlugFromUrl("https://superset.sh/page/deploy-notes", WEB)).toBe(
+			null,
+		);
+		expect(
+			pageSlugFromUrl("https://app.superset.sh.evil.example/page/x", WEB),
+		).toBe(null);
+		expect(pageSlugFromUrl(`http://app.superset.sh/page/x`, WEB)).toBe(null);
+	});
+
+	test("refuses paths that are not a single page", () => {
+		expect(pageSlugFromUrl(`${WEB}/pages/deploy-notes`, WEB)).toBe(null);
+		expect(pageSlugFromUrl(`${WEB}/page`, WEB)).toBe(null);
+		expect(pageSlugFromUrl(`${WEB}/page/`, WEB)).toBe(null);
+		expect(pageSlugFromUrl(`${WEB}/page/deploy-notes/versions`, WEB)).toBe(
+			null,
+		);
+	});
+
+	test("refuses anything that is not a url", () => {
+		expect(pageSlugFromUrl("not a url", WEB)).toBe(null);
+		expect(pageSlugFromUrl("", WEB)).toBe(null);
+	});
+});

apps/mobile/lib/page-links/pageLinks.ts

@@ -0,0 +1,15 @@
+export function pageSlugFromUrl(url: string, webUrl: string): string | null {
+	let target: URL;
+	let web: URL;
+	try {
+		target = new URL(url);
+		web = new URL(webUrl);
+	} catch {
+		return null;
+	}
+	if (target.origin !== web.origin) return null;
+
+	const segments = target.pathname.split("/").filter(Boolean);
+	if (segments.length !== 2 || segments[0] !== "page") return null;
+	return segments[1] ?? null;
+}