feat: Open the page settings in one click or key press from the top bar (#4126)

## Description

I noticed people are annoyed by the need to click the pages first, then
find the right page and click settings in webflow
https://x.com/thepixelgeek/status/1833583918756597875

While this is an advanced need and bloating the UI is not very good,
there must be a way to do this, so I added a modifier.

Now you can hold alt/option modifier + click or enter on page button in
the top bar and its going to open the navigator and

Demo: https://share.descript.com/view/mzqZLue17q7

Todo

- [ ] add this shortcut to shortcuts doc

## 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:
5de6)
- [ ] 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/sidebar-left/panels/pages/page-utils.test.ts

@@ -16,13 +16,13 @@ import {
   toTreeData,
   filterSelfAndChildren,
   getExistingRoutePaths,
-  $editingPagesItemId,
   $pageRootScope,
   isPathAvailable,
 } from "./page-utils";
 import {
   $dataSourceVariables,
   $dataSources,
+  $editingPageId,
   $pages,
   $resourceValues,
   $selectedPageId,
@@ -585,7 +585,7 @@ test("page root scope should rely on editing page", () => {
   });
   $pages.set(pages);
   $selectedPageId.set("homePageId");
-  $editingPagesItemId.set("pageId");
+  $editingPageId.set("pageId");
   $dataSources.set(
     toMap([
       {
@@ -619,7 +619,7 @@ test("page root scope should use variable and resource values", () => {
       systemDataSourceId: "system",
     })
   );
-  $editingPagesItemId.set("homePageId");
+  $editingPageId.set("homePageId");
   $dataSources.set(
     toMap([
       {
@@ -666,7 +666,7 @@ test("page root scope should prefill default system variable value", () => {
       systemDataSourceId: "systemId",
     })
   );
-  $editingPagesItemId.set("homePageId");
+  $editingPageId.set("homePageId");
   $dataSources.set(
     toMap([
       {

apps/builder/app/builder/features/sidebar-left/panels/pages/page-utils.ts

@@ -1,4 +1,4 @@
-import { atom, computed } from "nanostores";
+import { computed } from "nanostores";
 import { createRootFolder } from "@webstudio-is/project-build";
 import {
   type Page,
@@ -21,6 +21,7 @@ import {
 import {
   $dataSourceVariables,
   $dataSources,
+  $editingPageId,
   $pages,
   $publishedOrigin,
   $resourceValues,
@@ -328,15 +329,13 @@ export const getExistingRoutePaths = (pages?: Pages): Set<string> => {
   return paths;
 };
 
-export const $editingPagesItemId = atom<undefined | Page["id"]>();
-
 const $editingPage = computed(
-  [$editingPagesItemId, $pages],
-  (editingPagesItemId, pages) => {
-    if (editingPagesItemId === undefined || pages === undefined) {
+  [$editingPageId, $pages],
+  (editingPageId, pages) => {
+    if (editingPageId === undefined || pages === undefined) {
       return;
     }
-    return findPageByIdOrPath(editingPagesItemId, pages);
+    return findPageByIdOrPath(editingPageId, pages);
   }
 );
 

apps/builder/app/builder/features/sidebar-left/panels/pages/pages.tsx

@@ -25,10 +25,9 @@ import type { TabContentProps } from "../../types";
 import { CloseButton, Header, Root } from "../../shared/panel";
 import { ExtendedPanel } from "../../shared/extended-panel";
 import { NewPageSettings, PageSettings } from "./page-settings";
-import { $pages, $selectedPageId } from "~/shared/nano-states";
+import { $editingPageId, $pages, $selectedPageId } from "~/shared/nano-states";
 import { switchPage } from "~/shared/pages";
 import {
-  $editingPagesItemId,
   getAllChildrenAndSelf,
   reparentOrphansMutable,
   toTreeData,
@@ -364,7 +363,7 @@ const FolderEditor = ({
 
 export const TabContent = ({ onSetActiveTab }: TabContentProps) => {
   const currentPageId = useStore($selectedPageId);
-  const editingItemId = useStore($editingPagesItemId);
+  const editingItemId = useStore($editingPageId);
   const pages = useStore($pages);
 
   if (currentPageId === undefined || pages === undefined) {
@@ -376,12 +375,12 @@ export const TabContent = ({ onSetActiveTab }: TabContentProps) => {
       <PagesPanel
         onClose={() => onSetActiveTab("none")}
         onCreateNewFolder={() => {
-          $editingPagesItemId.set(
+          $editingPageId.set(
             editingItemId === newFolderId ? undefined : newFolderId
           );
         }}
         onCreateNewPage={() =>
-          $editingPagesItemId.set(
+          $editingPageId.set(
             editingItemId === newPageId ? undefined : newPageId
           )
         }
@@ -393,7 +392,7 @@ export const TabContent = ({ onSetActiveTab }: TabContentProps) => {
           onSetActiveTab("none");
         }}
         selectedPageId={currentPageId}
-        onEdit={$editingPagesItemId.set}
+        onEdit={$editingPageId.set}
         editingItemId={editingItemId}
       />
 
@@ -403,12 +402,12 @@ export const TabContent = ({ onSetActiveTab }: TabContentProps) => {
             {isFolder(editingItemId, pages.folders) ? (
               <FolderEditor
                 editingFolderId={editingItemId}
-                setEditingFolderId={$editingPagesItemId.set}
+                setEditingFolderId={$editingPageId.set}
               />
             ) : (
               <PageEditor
                 editingPageId={editingItemId}
-                setEditingPageId={$editingPagesItemId.set}
+                setEditingPageId={$editingPageId.set}
               />
             )}
           </>

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -157,7 +157,7 @@ export const PropertyInfo = ({
               <ResetIcon />
             </Flex>
           }
-          suffix={<Kbd value={["option", "click"]} />}
+          suffix={<Kbd value={["option", "click"]} color="moreSubtle" />}
           css={{ gridTemplateColumns: "2fr 3fr 1fr" }}
           onClick={onReset}
         >

apps/builder/app/builder/features/style-panel/shared/property-name.tsx

@@ -274,7 +274,7 @@ export const TooltipContent = ({
                 <ResetIcon />
               </Flex>
             }
-            suffix={<Kbd value={["option", "click"]} />}
+            suffix={<Kbd value={["option", "click"]} color="moreSubtle" />}
             css={{ gridTemplateColumns: "2fr 3fr 1fr" }}
             onClick={onReset}
           >

apps/builder/app/builder/features/topbar/topbar.tsx

@@ -8,9 +8,11 @@ import {
   ToolbarButton,
   Text,
   type CSS,
+  Tooltip,
+  Kbd,
 } from "@webstudio-is/design-system";
 import type { Project } from "@webstudio-is/project";
-import { $pages, $selectedPage } from "~/shared/nano-states";
+import { $editingPageId, $pages, $selectedPage } from "~/shared/nano-states";
 import { PreviewButton } from "./preview";
 import { ShareButton } from "./share";
 import { PublishButton } from "./publish";
@@ -33,19 +35,29 @@ const PagesButton = () => {
   }
 
   return (
-    <ToolbarButton
-      css={{
-        px: theme.spacing[9],
-        maxWidth: theme.spacing[24],
-      }}
-      aria-label="Toggle Pages"
-      onClick={() => {
-        toggleActiveSidebarPanel("pages");
-      }}
-      tabIndex={0}
+    <Tooltip
+      content={
+        <Text>
+          {"Pages or page settings "}
+          <Kbd value={["option", "click"]} color="moreSubtle" />
+        </Text>
+      }
     >
-      <Text truncate>{page.name}</Text>
-    </ToolbarButton>
+      <ToolbarButton
+        css={{
+          px: theme.spacing[9],
+          maxWidth: theme.spacing[24],
+        }}
+        aria-label="Toggle Pages"
+        onClick={(event) => {
+          $editingPageId.set(event.altKey ? page.id : undefined);
+          toggleActiveSidebarPanel("pages");
+        }}
+        tabIndex={0}
+      >
+        <Text truncate>{page.name}</Text>
+      </ToolbarButton>
+    </Tooltip>
   );
 };
 

apps/builder/app/shared/nano-states/pages.ts

@@ -15,3 +15,5 @@ export const $selectedPage = computed(
     return findPageByIdOrPath(selectedPageId, pages);
   }
 );
+
+export const $editingPageId = atom<undefined | Page["id"]>();