feat: Open current page in the publish dialog (#5277)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

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 ?? []

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();
               }}
             >

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);