feat(desktop): give page links their own click tiers in Files & Editor

apps/desktop/src/renderer/components/MarkdownEditor/MarkdownEditor.tsx

@@ -40,7 +40,7 @@ import { BubbleMenu } from "@tiptap/react/menus";
 import { common, createLowlight } from "lowlight";
 import { type MutableRefObject, useEffect, useRef } from "react";
 import { BubbleMenuToolbar } from "renderer/components/MarkdownRenderer/components/TipTapMarkdownRenderer/components/BubbleMenuToolbar";
-import { useInlineUrlPolicy } from "renderer/lib/clickPolicy";
+import { useUrlLinkAction } from "renderer/lib/clickPolicy";
 import {
 	SafeLink,
 	verbatimStringAttributes,
@@ -271,7 +271,7 @@ export function MarkdownEditor({
 	onEnterSubmitRef.current = onEnterSubmit;
 	const editorRef = useRef<Editor | null>(null);
 
-	const urlPolicy = useInlineUrlPolicy();
+	const getUrlAction = useUrlLinkAction("2-tier");
 
 	const editor = useEditor({
 		editable,
@@ -474,7 +474,7 @@ export function MarkdownEditor({
 				// No pane context here, so "pane" and "external" both route to the
 				// system browser. Null means do nothing — fall through to ProseMirror
 				// so the user can still click into the link to place a cursor.
-				if (urlPolicy.getAction(event) === null) return false;
+				if (getUrlAction(event, href) === null) return false;
 				event.preventDefault();
 				electronTrpcClient.external.openUrl.mutate(href).catch((error) => {
 					console.error("[MarkdownEditor] Failed to open URL:", href, error);

apps/desktop/src/renderer/components/MarkdownRenderer/components/TipTapMarkdownRenderer/TipTapMarkdownRenderer.tsx

@@ -6,11 +6,7 @@ import { EditorState } from "@tiptap/pm/state";
 import { type Editor, EditorContent, useEditor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { type MutableRefObject, useEffect, useRef } from "react";
-import {
-	type LinkAction,
-	useInlineUrlPolicy,
-	useTerminalUrlPolicy,
-} from "renderer/lib/clickPolicy";
+import { type LinkAction, useUrlLinkAction } from "renderer/lib/clickPolicy";
 import { electronTrpcClient } from "renderer/lib/trpc-client";
 import { useMarkdownStyle } from "renderer/stores";
 import { defaultConfig } from "../../styles/default/config";
@@ -154,18 +150,18 @@ export function TipTapMarkdownRenderer({
 	const onSaveRef = useRef(onSave);
 	const sourceTrackingRef = useRef<SourceTracking | null>(null);
 
-	const paneUrlPolicy = useTerminalUrlPolicy();
-	const inlineUrlPolicy = useInlineUrlPolicy();
+	const getPaneUrlAction = useUrlLinkAction("4-tier");
+	const getInlineUrlAction = useUrlLinkAction("2-tier");
 	const linkClickRef = useRef({
-		getAction: inlineUrlPolicy.getAction,
+		getAction: getInlineUrlAction,
 		onOpenUrl,
 		onUnboundLinkClick,
 	});
 
 	onChangeRef.current = onChange;
 	onSaveRef.current = onSave;
 	linkClickRef.current = {
-		getAction: (onOpenUrl ? paneUrlPolicy : inlineUrlPolicy).getAction,
+		getAction: onOpenUrl ? getPaneUrlAction : getInlineUrlAction,
 		onOpenUrl,
 		onUnboundLinkClick,
 	};

apps/desktop/src/renderer/components/MarkdownRenderer/components/TipTapMarkdownRenderer/resolveLinkClick.ts

@@ -1,7 +1,7 @@
 import type {
-	ClickPolicy,
 	LinkAction,
 	ModifierEvent,
+	UrlLinkAction,
 } from "renderer/lib/clickPolicy";
 
 export interface LinkClickEvent extends ModifierEvent {
@@ -18,13 +18,13 @@ const WEB_URL = /^https?:\/\//i;
 
 export function resolveLinkClick(
 	event: LinkClickEvent,
-	getAction: ClickPolicy["getAction"],
+	getAction: UrlLinkAction,
 ): ResolvedLinkClick {
 	if (event.button !== 0) return { kind: "none" };
 	const target = event.target as HTMLElement | null;
 	const href = target?.closest?.("a")?.getAttribute("href");
 	if (!href || !WEB_URL.test(href)) return { kind: "none" };
-	const action = getAction(event);
+	const action = getAction(event, href);
 	if (action === null) return { kind: "unbound" };
 	return { kind: "open", url: href, action };
 }

apps/desktop/src/renderer/hooks/useV2UserPreferences/useV2UserPreferences.ts

@@ -20,7 +20,7 @@ export interface V2UserPreferencesApi {
 	setSidebarFileLinks: (next: LinkTierMap) => void;
 	setFolderLinks: (next: FolderTierMap) => void;
 	setPortOpenAction: (next: LinkAction) => void;
-	setPageOpenAction: (next: LinkAction) => void;
+	setPageLinks: (next: LinkTierMap) => void;
 	setRightSidebarOpen: (next: boolean | ((prev: boolean) => boolean)) => void;
 	setRightSidebarWidth: (next: number) => void;
 	setDeleteLocalBranch: (next: boolean) => void;
@@ -47,7 +47,10 @@ export function useV2UserPreferences(): V2UserPreferencesApi {
 	const preferences = rows[0] ?? DEFAULT_V2_USER_PREFERENCES;
 
 	const upsertTierMap = useCallback(
-		(key: "fileLinks" | "urlLinks" | "sidebarFileLinks", next: LinkTierMap) => {
+		(
+			key: "fileLinks" | "urlLinks" | "sidebarFileLinks" | "pageLinks",
+			next: LinkTierMap,
+		) => {
 			const existing = collections.v2UserPreferences.get(
 				V2_USER_PREFERENCES_ID,
 			);
@@ -118,23 +121,9 @@ export function useV2UserPreferences(): V2UserPreferencesApi {
 		[collections],
 	);
 
-	const setPageOpenAction = useCallback(
-		(next: LinkAction) => {
-			const existing = collections.v2UserPreferences.get(
-				V2_USER_PREFERENCES_ID,
-			);
-			if (!existing) {
-				collections.v2UserPreferences.insert({
-					...DEFAULT_V2_USER_PREFERENCES,
-					pageOpenAction: next,
-				});
-				return;
-			}
-			collections.v2UserPreferences.update(V2_USER_PREFERENCES_ID, (draft) => {
-				draft.pageOpenAction = next;
-			});
-		},
-		[collections],
+	const setPageLinks = useCallback(
+		(next: LinkTierMap) => upsertTierMap("pageLinks", next),
+		[upsertTierMap],
 	);
 
 	const setRightSidebarOpen = useCallback(
@@ -335,7 +324,7 @@ export function useV2UserPreferences(): V2UserPreferencesApi {
 		setSidebarFileLinks,
 		setFolderLinks,
 		setPortOpenAction,
-		setPageOpenAction,
+		setPageLinks,
 		setRightSidebarOpen,
 		setRightSidebarWidth,
 		setDeleteLocalBranch,

apps/desktop/src/renderer/lib/clickPolicy/index.ts

@@ -25,14 +25,17 @@ export {
 export type { ClickPolicy } from "./policies/policy";
 export { useChangesSidebarFilePolicy } from "./policies/useChangesSidebarFilePolicy";
 export { useInlineFilePolicy } from "./policies/useInlineFilePolicy";
-export { useInlineUrlPolicy } from "./policies/useInlineUrlPolicy";
+export { usePagePolicy } from "./policies/usePagePolicy";
 export { useSidebarFilePolicy } from "./policies/useSidebarFilePolicy";
 export { useTerminalFilePolicy } from "./policies/useTerminalFilePolicy";
 export {
 	type FolderClickPolicy,
 	useTerminalFolderPolicy,
 } from "./policies/useTerminalFolderPolicy";
-export { useTerminalUrlPolicy } from "./policies/useTerminalUrlPolicy";
+export {
+	type UrlLinkAction,
+	useUrlLinkAction,
+} from "./policies/useUrlLinkAction";
 export { tierFor } from "./tiers";
 export type {
 	LinkAction,

apps/desktop/src/renderer/lib/clickPolicy/policies/policy.ts

@@ -59,7 +59,7 @@ export function buildPolicy(
 	};
 }
 
-type MapKey = "fileLinks" | "urlLinks" | "sidebarFileLinks";
+type MapKey = "fileLinks" | "urlLinks" | "sidebarFileLinks" | "pageLinks";
 
 export function usePolicy(
 	key: MapKey,

apps/desktop/src/renderer/lib/clickPolicy/policies/usePagePolicy.ts

@@ -0,0 +1,6 @@
+import type { TierMode } from "../types";
+import { type ClickPolicy, usePolicy } from "./policy";
+
+export function usePagePolicy(mode: TierMode): ClickPolicy {
+	return usePolicy("pageLinks", "url", mode);
+}

apps/desktop/src/renderer/lib/clickPolicy/policies/useUrlLinkAction.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import { env } from "renderer/env.renderer";
+import { parseSupersetPageUrl } from "renderer/lib/parseSupersetPageUrl";
+import type { LinkAction, ModifierEvent, TierMode } from "../types";
+import { usePolicy } from "./policy";
+
+export type UrlLinkAction = (
+	event: ModifierEvent,
+	url: string,
+) => LinkAction | null;
+
+export function useUrlLinkAction(mode: TierMode): UrlLinkAction {
+	const { getAction: getUrlAction } = usePolicy("urlLinks", "url", mode);
+	const { getAction: getPageAction } = usePolicy("pageLinks", "url", mode);
+	return useCallback(
+		(event, url) =>
+			parseSupersetPageUrl(url, env.NEXT_PUBLIC_WEB_URL) === null
+				? getUrlAction(event)
+				: getPageAction(event),
+		[getUrlAction, getPageAction],
+	);
+}

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

@@ -5,9 +5,11 @@ import { cn } from "@superset/ui/utils";
 import { useNavigate } from "@tanstack/react-router";
 import { ArrowLeft, FileText, LayoutGrid, Plus } from "lucide-react";
 import { type MouseEvent, useCallback, useMemo, useState } from "react";
+import { env } from "renderer/env.renderer";
 import { useWorkspaceEvent } from "renderer/hooks/host-service/useWorkspaceEvent";
-import { useV2UserPreferences } from "renderer/hooks/useV2UserPreferences";
+import { usePagePolicy } from "renderer/lib/clickPolicy";
 import { cloudTrpc } from "renderer/lib/cloud-trpc";
+import { electronTrpcClient } from "renderer/lib/trpc-client";
 import { usePageFavorites } from "renderer/routes/_authenticated/_dashboard/hooks/usePageFavorites";
 import { usePagesList } from "renderer/routes/_authenticated/_dashboard/hooks/usePagesList";
 import { pagesListInput } from "renderer/routes/_authenticated/_dashboard/utils/pagesListInput";
@@ -25,7 +27,7 @@ const MENU_PAGE_LIMIT = 200;
 
 interface WorkspacePagesMenuProps {
 	workspaceId: string;
-	onOpenPage: (page: PagePaneData) => void;
+	onOpenPage: (page: PagePaneData, placement: "split" | "tab") => void;
 	onCreateNewAgentSession: CreateNewAgentSession;
 	onFocusAgentTerminal: (terminalId: string) => void;
 }
@@ -38,7 +40,7 @@ export function WorkspacePagesMenu({
 }: WorkspacePagesMenuProps) {
 	const { t } = useLingui();
 	const navigate = useNavigate();
-	const { preferences } = useV2UserPreferences();
+	const pagePolicy = usePagePolicy("4-tier");
 	const utils = cloudTrpc.useUtils();
 	const { favoritePageIds } = usePageFavorites();
 	const seenAt = usePagesMenuSeenAt(workspaceId);
@@ -105,15 +107,21 @@ export function WorkspacePagesMenu({
 
 	const handleOpenPage = (page: MenuPage, event: MouseEvent) => {
 		handleOpenChange(false);
-		const inPane =
-			event.metaKey ||
-			event.ctrlKey ||
-			preferences.pageOpenAction !== "external";
-		if (inPane) {
-			onOpenPage({ pageId: page.id, slug: page.slug, title: page.title });
+		const action = pagePolicy.getAction(event) ?? "pane";
+		if (action === "external") {
+			const url = new URL(
+				`/page/${encodeURIComponent(page.slug)}`,
+				env.NEXT_PUBLIC_WEB_URL,
+			).toString();
+			electronTrpcClient.external.openUrl.mutate(url).catch((error) => {
+				console.error("[WorkspacePagesMenu] Failed to open page:", url, error);
+			});
 			return;
 		}
-		void navigate({ to: "/pages/$slug", params: { slug: page.slug } });
+		onOpenPage(
+			{ pageId: page.id, slug: page.slug, title: page.title },
+			action === "newTab" ? "tab" : "split",
+		);
 	};
 
 	return (

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

@@ -1,6 +1,6 @@
 import type { RendererContext } from "@superset/panes";
 import { useCallback, useRef } from "react";
-import { useTerminalUrlPolicy } from "renderer/lib/clickPolicy";
+import { useUrlLinkAction } from "renderer/lib/clickPolicy";
 import { PageViewer } from "renderer/routes/_authenticated/_dashboard/components/PageViewer";
 import type { PagePaneData, PaneViewerData } from "../../../../types";
 import { usePagePaneUi } from "../../hooks/usePagePaneUi";
@@ -26,7 +26,7 @@ export function PagePane({
 	onDataChange,
 	onFocus,
 }: PagePaneProps) {
-	const urlPolicy = useTerminalUrlPolicy();
+	const getUrlAction = useUrlLinkAction("4-tier");
 	const {
 		commentsEnabled,
 		setCommentsEnabled,
@@ -62,7 +62,7 @@ export function PagePane({
 			onLinkClick={(click) => {
 				const action = /^(mailto:|tel:)/i.test(click.url)
 					? "external"
-					: (urlPolicy.getAction(click) ??
+					: (getUrlAction(click, click.url) ??
 						(!click.metaKey && !click.ctrlKey && !click.shiftKey
 							? "pane"
 							: null));

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

@@ -21,9 +21,10 @@ import {
 	type FolderClickPolicy,
 	folderIntentLabel,
 	LinkHoverHint,
+	type UrlLinkAction,
 	useTerminalFilePolicy,
 	useTerminalFolderPolicy,
-	useTerminalUrlPolicy,
+	useUrlLinkAction,
 } from "renderer/lib/clickPolicy";
 import {
 	type ConnectionState,
@@ -79,7 +80,7 @@ export function TerminalPane({
 }: TerminalPaneProps) {
 	const { t } = useLingui();
 	const filePolicy = useTerminalFilePolicy();
-	const urlPolicy = useTerminalUrlPolicy();
+	const getUrlAction = useUrlLinkAction("4-tier");
 	const folderPolicy = useTerminalFolderPolicy();
 	const {
 		hoveredLink,
@@ -340,7 +341,7 @@ export function TerminalPane({
 					);
 				},
 				onUrlClick: (event, url) => {
-					const action = urlPolicy.getAction(event);
+					const action = getUrlAction(event, url);
 					if (action === null) {
 						showHint(event.clientX, event.clientY);
 						return;
@@ -361,7 +362,7 @@ export function TerminalPane({
 		onLinkLeave,
 		showHint,
 		filePolicy,
-		urlPolicy,
+		getUrlAction,
 		folderPolicy,
 	]);
 
@@ -651,7 +652,7 @@ export function TerminalPane({
 				hoverLabel={resolveHoverLabel(
 					hoveredLink,
 					filePolicy,
-					urlPolicy,
+					getUrlAction,
 					folderPolicy,
 					worktreePath,
 				)}
@@ -670,7 +671,7 @@ export function TerminalPane({
 function resolveHoverLabel(
 	hovered: HoveredLink | null,
 	filePolicy: ReturnType<typeof useTerminalFilePolicy>,
-	urlPolicy: ReturnType<typeof useTerminalUrlPolicy>,
+	getUrlAction: UrlLinkAction,
 	folderPolicy: FolderClickPolicy,
 	worktreePath: string | undefined,
 ): string | null {
@@ -681,7 +682,7 @@ function resolveHoverLabel(
 		shiftKey: hovered.shift,
 	};
 	if (hovered.info.kind === "url") {
-		const action = urlPolicy.getAction(event);
+		const action = getUrlAction(event, hovered.info.url);
 		return action ? actionLabel(action, "url") : null;
 	}
 	if (hovered.info.isDirectory) {