From 26c4b7f336625c99902b229c09520236ea38c904 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 13 Jun 2025 18:09:22 +0100
Subject: [PATCH] open current page in the publish dialog

---
 .../app/builder/features/address-bar.tsx      | 22 ++-----------------
 .../app/builder/features/topbar/publish.tsx   | 18 ++++++++++++---
 apps/builder/app/shared/awareness.ts          | 19 ++++++++++++++++
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/apps/builder/app/builder/features/address-bar.tsx b/apps/builder/app/builder/features/address-bar.tsx
index f34c50838397..ce09ce720354 100644
--- a/apps/builder/app/builder/features/address-bar.tsx
+++ b/apps/builder/app/builder/features/address-bar.tsx
@@ -27,34 +27,16 @@ import {
   MenuList,
 } from "@webstudio-is/design-system";
 import { CheckMarkIcon, CopyIcon, DynamicPageIcon } from "@webstudio-is/icons";
-import {
-  findParentFolderByChildId,
-  ROOT_FOLDER_ID,
-  getPagePath,
-} from "@webstudio-is/sdk";
-import { $pages, $publishedOrigin } from "~/shared/nano-states";
+import { $publishedOrigin } from "~/shared/nano-states";
 import {
   compilePathnamePattern,
   isPathnamePattern,
   matchPathnamePattern,
   tokenizePathnamePattern,
 } from "~/builder/shared/url-pattern";
-import { $selectedPage } from "~/shared/awareness";
+import { $selectedPage, $selectedPagePath } from "~/shared/awareness";
 import { $currentSystem, updateCurrentSystem } from "~/shared/system";
 
-const $selectedPagePath = computed([$selectedPage, $pages], (page, pages) => {
-  if (pages === undefined || page === undefined) {
-    return "/";
-  }
-  const parentFolder = findParentFolderByChildId(page.id, pages.folders);
-  const parentFolderId = parentFolder?.id ?? ROOT_FOLDER_ID;
-  const foldersPath = getPagePath(parentFolderId, pages);
-  return [foldersPath, page?.path ?? ""]
-    .filter(Boolean)
-    .join("/")
-    .replace(/\/+/g, "/");
-});
-
 const $selectedPageHistory = computed(
   $selectedPage,
   (page) => page?.history ?? []
diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
index 4348a6fc386b..c6e129d2d2e5 100644
--- a/apps/builder/app/builder/features/topbar/publish.tsx
+++ b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -43,6 +43,7 @@ import {
 import { validateProjectDomain, type Project } from "@webstudio-is/project";
 import {
   $awareness,
+  $selectedPagePath,
   findAwarenessByInstanceId,
   type Awareness,
 } from "~/shared/awareness";
@@ -95,11 +96,15 @@ const ChangeProjectDomain = ({
 }: ChangeProjectDomainProps) => {
   const id = useId();
   const publishedOrigin = useStore($publishedOrigin);
+  const selectedPagePath = useStore($selectedPagePath);
 
   const [domain, setDomain] = useState(project.domain);
   const [error, setError] = useState<string>();
   const [isUpdateInProgress, setIsUpdateInProgress] = useOptimistic(false);
 
+  const pageUrl = new URL(publishedOrigin);
+  pageUrl.pathname = selectedPagePath;
+
   const updateProjectDomain = async () => {
     setIsUpdateInProgress(true);
     const validationResult = validateProjectDomain(domain);
@@ -138,7 +143,7 @@ const ChangeProjectDomain = ({
 
   return (
     <CollapsibleDomainSection
-      title={new URL(publishedOrigin).host}
+      title={pageUrl.host}
       prefix={
         <DomainCheckbox
           defaultChecked={project.latestBuildVirtual?.domain === domain}
@@ -171,11 +176,18 @@ const ChangeProjectDomain = ({
               )}
             </Flex>
           </Tooltip>
-          <Tooltip content={`Proceed to ${publishedOrigin}`}>
+          <Tooltip
+            content={
+              <Text css={{ wordBreak: "break-all" }}>
+                Proceed to ${pageUrl.toString()}
+              </Text>
+            }
+            variant="wrapped"
+          >
             <IconButton
               tabIndex={-1}
               onClick={(event) => {
-                window.open(publishedOrigin, "_blank");
+                window.open(pageUrl, "_blank");
                 event.preventDefault();
               }}
             >
diff --git a/apps/builder/app/shared/awareness.ts b/apps/builder/app/shared/awareness.ts
index 34351cc6e62a..7f9e02ef900b 100644
--- a/apps/builder/app/shared/awareness.ts
+++ b/apps/builder/app/shared/awareness.ts
@@ -7,6 +7,9 @@ import {
   type Page,
   rootComponent,
   Pages,
+  findParentFolderByChildId,
+  getPagePath,
+  ROOT_FOLDER_ID,
 } from "@webstudio-is/sdk";
 import { $pages } from "./nano-states/pages";
 import { $instances, $selectedInstanceSelector } from "./nano-states/instances";
@@ -33,6 +36,22 @@ export const $selectedPage = computed(
   }
 );
 
+export const $selectedPagePath = computed(
+  [$selectedPage, $pages],
+  (page, pages) => {
+    if (pages === undefined || page === undefined) {
+      return "/";
+    }
+    const parentFolder = findParentFolderByChildId(page.id, pages.folders);
+    const parentFolderId = parentFolder?.id ?? ROOT_FOLDER_ID;
+    const foldersPath = getPagePath(parentFolderId, pages);
+    return [foldersPath, page?.path ?? ""]
+      .filter(Boolean)
+      .join("/")
+      .replace(/\/+/g, "/");
+  }
+);
+
 export const $temporaryInstances = atom<Instances>(new Map());
 export const addTemporaryInstance = (instance: Instance) => {
   $temporaryInstances.get().set(instance.id, instance);