feat(pages): public pages, and thumbnails in link unfurls

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/PageViewer/PageViewer.tsx

@@ -7,6 +7,7 @@ import {
 	CommentProvider,
 	CommentsPanel,
 	PageCommentsView,
+	PageVersionBanner,
 } from "@superset/ui/page-comments";
 import { toast } from "@superset/ui/sonner";
 import { Spinner } from "@superset/ui/spinner";
@@ -32,6 +33,8 @@ interface PageViewerProps {
 	onCommentsEnabledChange: (enabled: boolean) => void;
 	onResolved?: (page: ResolvedPage) => void;
 	onFramePointerDown?: () => void;
+	version?: number | null;
+	onExitPreview?: () => void;
 }
 
 export function PageViewer({
@@ -42,10 +45,15 @@ export function PageViewer({
 	onCommentsEnabledChange,
 	onResolved,
 	onFramePointerDown,
+	version,
+	onExitPreview,
 }: PageViewerProps) {
 	const { t } = useLingui();
 	const { data: session } = authClient.useSession();
-	const pull = cloudTrpc.page.pull.useQuery(pageId ? { id: pageId } : { slug });
+	const pull = cloudTrpc.page.pull.useQuery({
+		...(pageId ? { id: pageId } : { slug }),
+		...(version ? { version } : {}),
+	});
 	const resolvedPageId = pageId ?? pull.data?.id;
 	const resolvedTitle = title ?? pull.data?.title ?? slug;
 	const user = useMemo(
@@ -107,28 +115,40 @@ export function PageViewer({
 		);
 	}
 
+	const previewing =
+		pull.data.servedVersion !== null &&
+		pull.data.version !== pull.data.servedVersion;
+
 	return (
 		<CommentProvider
 			key={resolvedPageId}
 			store={store}
-			enabled={commentsEnabled}
+			enabled={commentsEnabled && !previewing}
 			onEnabledChange={onCommentsEnabledChange}
 			user={user}
 			pageOwnerId={pull.data?.createdByUserId}
 		>
-			<div className="relative flex h-full w-full">
-				<div className="min-h-0 min-w-0 flex-1">
-					<PageCommentsView
-						pinchZoomEnabled
-						src={pull.data.viewUrl}
-						title={resolvedTitle}
-						initialScrollY={scrollPositions.get(scrollKey) ?? 0}
-						onScrollYChange={(y) => scrollPositions.set(scrollKey, y)}
-						onFramePointerDown={onFramePointerDown}
+			<div className="flex h-full w-full flex-col">
+				{previewing && onExitPreview ? (
+					<PageVersionBanner
+						version={pull.data.version}
+						onExit={onExitPreview}
 					/>
+				) : null}
+				<div className="relative flex min-h-0 w-full flex-1">
+					<div className="min-h-0 min-w-0 flex-1">
+						<PageCommentsView
+							pinchZoomEnabled
+							src={pull.data.viewUrl}
+							title={resolvedTitle}
+							initialScrollY={scrollPositions.get(scrollKey) ?? 0}
+							onScrollYChange={(y) => scrollPositions.set(scrollKey, y)}
+							onFramePointerDown={onFramePointerDown}
+						/>
+					</div>
+					<AllCommentsButton />
+					<CommentsPanel servedVersion={pull.data?.version ?? null} />
 				</div>
-				<AllCommentsButton />
-				<CommentsPanel servedVersion={pull.data?.version ?? null} />
 			</div>
 		</CommentProvider>
 	);

apps/desktop/src/renderer/routes/_authenticated/_dashboard/hooks/usePageHeaderData/usePageHeaderData.ts

@@ -3,6 +3,7 @@ import type {
 	CommentThread,
 	PageHeaderPage,
 	PageHeaderVersion,
+	PageVisibility,
 } from "@superset/ui/page-comments";
 import { useCallback } from "react";
 import { authClient } from "renderer/lib/auth-client";
@@ -12,15 +13,18 @@ export interface PageHeaderTarget {
 	slug: string;
 	pageId?: string;
 	title?: string;
+	version?: number | null;
 }
 
 interface PageHeaderData {
 	page: PageHeaderPage | null;
 	versions: PageHeaderVersion[];
 	threads: CommentThread[];
 	currentUserId: string | undefined;
-	onSetVisibility: (visibility: "just_me" | "org") => Promise<void>;
+	onSetVisibility: (visibility: PageVisibility) => Promise<void>;
 	onSetSharedVersion: (version: number | null) => Promise<void>;
+	onRename: (title: string) => Promise<void>;
+	onRefresh: () => void;
 	onDelete: () => Promise<void>;
 }
 
@@ -35,7 +39,7 @@ export function usePageHeaderData(data: PageHeaderTarget): PageHeaderData {
 	const versions = cloudTrpc.page.versions.useQuery(ref, { enabled });
 	const access = cloudTrpc.page.access.useQuery(ref, { enabled });
 
-	const version = pull.data?.version ?? 0;
+	const version = data.version ?? pull.data?.version ?? 0;
 	const { threads } = usePageCommentThreads({
 		pageId: pageId ?? "",
 		version,
@@ -44,6 +48,7 @@ export function usePageHeaderData(data: PageHeaderTarget): PageHeaderData {
 	const utils = cloudTrpc.useUtils();
 	const setVisibility = cloudTrpc.page.setVisibility.useMutation();
 	const setSharedVersion = cloudTrpc.page.setSharedVersion.useMutation();
+	const updatePage = cloudTrpc.page.update.useMutation();
 	const deletePage = cloudTrpc.page.delete.useMutation();
 
 	const refresh = useCallback(async () => {
@@ -55,9 +60,9 @@ export function usePageHeaderData(data: PageHeaderTarget): PageHeaderData {
 		resolved && pageId
 			? {
 					id: pageId,
-					title: data.title ?? resolved.title ?? data.slug,
+					title: resolved.title ?? data.title ?? data.slug,
 					url: resolved.url,
-					visibility: resolved.visibility === "just_me" ? "just_me" : "org",
+					visibility: resolved.visibility,
 					createdByUserId: resolved.createdByUserId,
 					owner: access.data?.owner ?? null,
 					updatedAt: resolved.updatedAt,
@@ -87,6 +92,20 @@ export function usePageHeaderData(data: PageHeaderTarget): PageHeaderData {
 			await setSharedVersion.mutateAsync({ id: pageId, version });
 			await refresh();
 		},
+		onRename: async (title) => {
+			if (!pageId) return;
+			const updated = await updatePage.mutateAsync({ id: pageId, title });
+			utils.page.pull.setData(ref, (prev) =>
+				prev ? { ...prev, title: updated.title } : prev,
+			);
+			await Promise.all([
+				utils.page.pull.invalidate(),
+				utils.page.list.invalidate(),
+			]);
+		},
+		onRefresh: () => {
+			void refresh();
+		},
 		onDelete: async () => {
 			if (!pageId) return;
 			await deletePage.mutateAsync({ id: pageId });

apps/desktop/src/renderer/routes/_authenticated/_dashboard/pages/$slug/components/PageDetailView/PageDetailView.tsx

@@ -16,15 +16,18 @@ export function PageDetailView({ slug }: PageDetailViewProps) {
 	const { t } = useLingui();
 	const navigate = useNavigate();
 	const [commentsEnabled, setCommentsEnabled] = useState(false);
+	const [previewVersion, setPreviewVersion] = useState<number | null>(null);
 	const {
 		page,
 		versions,
 		threads,
 		currentUserId,
 		onSetVisibility,
 		onSetSharedVersion,
+		onRename,
+		onRefresh,
 		onDelete,
-	} = usePageHeaderData({ slug });
+	} = usePageHeaderData({ slug, version: previewVersion });
 
 	const goBack = () => navigate({ to: "/pages" });
 
@@ -61,6 +64,12 @@ export function PageDetailView({ slug }: PageDetailViewProps) {
 					}
 					onSetVisibility={onSetVisibility}
 					onSetSharedVersion={onSetSharedVersion}
+					onRename={onRename}
+					onRefresh={onRefresh}
+					onPreviewVersion={setPreviewVersion}
+					previewVersion={
+						previewVersion === page.servedVersion ? null : previewVersion
+					}
 					onDelete={async () => {
 						await onDelete();
 						goBack();
@@ -76,6 +85,7 @@ export function PageDetailView({ slug }: PageDetailViewProps) {
 				<PageViewer
 					key={slug}
 					slug={slug}
+					version={previewVersion}
 					commentsEnabled={commentsEnabled}
 					onCommentsEnabledChange={setCommentsEnabled}
 				/>

apps/desktop/src/renderer/routes/_authenticated/_dashboard/pages/$slug/page.tsx

@@ -15,5 +15,5 @@ function PageDetailPage() {
 	if (isEnabled === undefined) return null;
 	if (!isEnabled) return <Redirect to="/v2-workspaces" />;
 
-	return <PageDetailView slug={slug} />;
+	return <PageDetailView key={slug} slug={slug} />;
 }

apps/desktop/src/renderer/routes/_authenticated/_dashboard/pages/components/PagesGrid/components/PageCard/PageCard.tsx

@@ -11,6 +11,7 @@ import { DeletePageDialog } from "@superset/ui/page-comments";
 import { toast } from "@superset/ui/sonner";
 import { cn } from "@superset/ui/utils";
 import {
+	Building2,
 	Globe,
 	Link2,
 	Lock,
@@ -58,11 +59,15 @@ export function PageCard({
 
 	const { t } = useLingui();
 	const [deleteOpen, setDeleteOpen] = useState(false);
-	const isShared = page.visibility === "org";
 	const isOwner =
 		currentUserId !== undefined && currentUserId === page.createdByUserId;
 	const ownerName = isOwner ? null : page.ownerName;
-	const VisibilityIcon = isShared ? Globe : Lock;
+	const VisibilityIcon =
+		page.visibility === "everyone"
+			? Globe
+			: page.visibility === "org"
+				? Building2
+				: Lock;
 	const edited = new Date(page.updatedAt).getTime();
 	const created = new Date(page.createdAt).getTime();
 	const wasEdited = edited - created > 60_000;

apps/desktop/src/renderer/routes/_authenticated/_dashboard/pages/utils/filterPages/filterPages.test.ts

@@ -26,6 +26,7 @@ const page = (
 const team = page("1", "Q3 Metrics", "org", null, "user-a");
 const mine = page("2", "Ingest Runbook", "just_me", "hookdeck notes", "user-b");
 const other = page("3", "Warning Tokens", "org");
+const published = page("4", "Launch Notes", "everyone", null, "user-a");
 
 describe("isPageScope", () => {
 	it("accepts known scopes and rejects anything else", () => {
@@ -60,6 +61,11 @@ describe("matchesScope", () => {
 		expect(matchesScope(team, "mine", pinned)).toBe(false);
 	});
 
+	it("keeps a page shared with everyone in the team scope", () => {
+		expect(matchesScope(published, "team", pinned)).toBe(true);
+		expect(matchesScope(published, "mine", pinned)).toBe(false);
+	});
+
 	it("uses the pinned set rather than visibility for the pinned scope", () => {
 		expect(matchesScope(mine, "pinned", pinned)).toBe(true);
 		expect(matchesScope(team, "pinned", pinned)).toBe(false);

apps/desktop/src/renderer/routes/_authenticated/_dashboard/pages/utils/filterPages/filterPages.ts

@@ -32,7 +32,7 @@ export function matchesScope(
 		case "pinned":
 			return pinnedPageIds.has(page.id);
 		case "team":
-			return page.visibility === "org";
+			return page.visibility !== "just_me";
 		case "mine":
 			return page.visibility === "just_me";
 		default:

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/PagePane/PagePane.tsx

@@ -21,7 +21,12 @@ export function PagePane({
 	onDataChange,
 	onFocus,
 }: PagePaneProps) {
-	const { commentsEnabled, setCommentsEnabled } = usePagePaneUi(paneId);
+	const {
+		commentsEnabled,
+		setCommentsEnabled,
+		previewVersion,
+		setPreviewVersion,
+	} = usePagePaneUi(paneId);
 
 	const onDataChangeRef = useRef(onDataChange);
 	onDataChangeRef.current = onDataChange;
@@ -43,10 +48,12 @@ export function PagePane({
 			slug={data.slug}
 			pageId={data.pageId}
 			title={data.title}
+			version={previewVersion}
 			commentsEnabled={commentsEnabled}
 			onCommentsEnabledChange={setCommentsEnabled}
 			onResolved={handleResolved}
 			onFramePointerDown={onFocus}
+			onExitPreview={() => setPreviewVersion(null)}
 		/>
 	);
 }

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/PagePaneTitle/PagePaneTitle.tsx

@@ -1,4 +1,8 @@
-import { DeletePageDialog, PageTitleMenu } from "@superset/ui/page-comments";
+import {
+	DeletePageDialog,
+	PageTitleMenu,
+	RenamePageDialog,
+} from "@superset/ui/page-comments";
 import { FileText } from "lucide-react";
 import { useState } from "react";
 import { usePageHeaderData } from "renderer/routes/_authenticated/_dashboard/hooks/usePageHeaderData";
@@ -13,11 +17,13 @@ interface PagePaneTitleProps {
 }
 
 export function PagePaneTitle({ data, paneId, onClose }: PagePaneTitleProps) {
-	const { page, versions, currentUserId, onSetSharedVersion, onDelete } =
-		usePageHeaderData(data);
-	const { setShareOpen } = usePagePaneUi(paneId);
+	const { setShareOpen, previewVersion, setPreviewVersion } =
+		usePagePaneUi(paneId);
+	const { page, versions, currentUserId, onRename, onRefresh, onDelete } =
+		usePageHeaderData({ ...data, version: previewVersion });
 	const [menuOpen, setMenuOpen] = useState(false);
 	const [deleteOpen, setDeleteOpen] = useState(false);
+	const [renameOpen, setRenameOpen] = useState(false);
 
 	if (!page) {
 		return (
@@ -50,10 +56,12 @@ export function PagePaneTitle({ data, paneId, onClose }: PagePaneTitleProps) {
 					setDeleteOpen(true);
 				}}
 				compact
-				onPickVersion={(version) => {
+				onRename={() => {
 					setMenuOpen(false);
-					void onSetSharedVersion(version);
+					setRenameOpen(true);
 				}}
+				onRefresh={onRefresh}
+				onPreviewVersion={setPreviewVersion}
 			/>
 			<DeletePageDialog
 				open={deleteOpen}
@@ -65,6 +73,12 @@ export function PagePaneTitle({ data, paneId, onClose }: PagePaneTitleProps) {
 					onClose();
 				}}
 			/>
+			<RenamePageDialog
+				open={renameOpen}
+				onOpenChange={setRenameOpen}
+				title={page.title}
+				onRename={onRename}
+			/>
 		</span>
 	);
 }

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/hooks/usePagePaneUi/usePagePaneUi.ts

@@ -3,9 +3,14 @@ import { useCallback, useSyncExternalStore } from "react";
 interface PagePaneUiState {
 	commentsEnabled: boolean;
 	shareOpen: boolean;
+	previewVersion: number | null;
 }
 
-const EMPTY: PagePaneUiState = { commentsEnabled: false, shareOpen: false };
+const EMPTY: PagePaneUiState = {
+	commentsEnabled: false,
+	shareOpen: false,
+	previewVersion: null,
+};
 
 const states = new Map<string, PagePaneUiState>();
 const listeners = new Map<string, Set<() => void>>();
@@ -41,6 +46,7 @@ export function usePagePaneUi(paneId: string) {
 	return {
 		commentsEnabled: state.commentsEnabled,
 		shareOpen: state.shareOpen,
+		previewVersion: state.previewVersion,
 		setCommentsEnabled: useCallback(
 			(commentsEnabled: boolean) => patch(paneId, { commentsEnabled }),
 			[paneId],
@@ -49,5 +55,9 @@ export function usePagePaneUi(paneId: string) {
 			(shareOpen: boolean) => patch(paneId, { shareOpen }),
 			[paneId],
 		),
+		setPreviewVersion: useCallback(
+			(previewVersion: number | null) => patch(paneId, { previewVersion }),
+			[paneId],
+		),
 	};
 }

apps/mobile/screens/(authenticated)/pages/[slug]/hooks/usePageSharing/usePageSharing.ts

@@ -1,9 +1,10 @@
+import type { PageVisibility } from "@superset/shared/usercontent";
 import type { RouterOutputs } from "@superset/trpc";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { apiClient } from "@/lib/trpc/client";
 
-export type PageVisibility = "just_me" | "org";
+export type { PageVisibility } from "@superset/shared/usercontent";
 export type PageVersion = RouterOutputs["page"]["versions"][number];
 
 export function usePageAccessQuery(slug: string | undefined) {