open a specific section when opening the project settings

apps/builder/app/builder/features/project-settings/project-settings.stories.tsx

@@ -1,13 +1,11 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { $isProjectSettingsOpen } from "~/shared/nano-states/seo";
 import { ProjectSettingsView } from "./project-settings";
 import { $pages } from "~/shared/nano-states";
 
 export default {
   component: ProjectSettingsView,
 };
 
-$isProjectSettingsOpen.set(true);
 const createRouter = (element: JSX.Element) =>
   createBrowserRouter([
     {
@@ -18,9 +16,7 @@ const createRouter = (element: JSX.Element) =>
   ]);
 
 export const General = () => {
-  const router = createRouter(
-    <ProjectSettingsView currentSection="General" isOpen />
-  );
+  const router = createRouter(<ProjectSettingsView currentSection="general" />);
   return <RouterProvider router={router} />;
 };
 
@@ -49,7 +45,7 @@ export const Redirects = () => {
   });
 
   const router = createRouter(
-    <ProjectSettingsView currentSection="Redirects" isOpen />
+    <ProjectSettingsView currentSection="redirects" />
   );
   return <RouterProvider router={router} />;
 };

apps/builder/app/builder/features/project-settings/project-settings.tsx

@@ -11,31 +11,34 @@ import {
   ListItem,
   Text,
 } from "@webstudio-is/design-system";
-import { $isProjectSettingsOpen } from "~/shared/nano-states/seo";
+import { $openProjectSettings } from "~/shared/nano-states/project-settings";
 import { SectionGeneral } from "./section-general";
 import { SectionRedirects } from "./section-redirects";
 import { SectionPublish } from "./section-publish";
-import { useState } from "react";
 import { SectionMarketplace } from "./section-marketplace";
 import { leftPanelWidth, rightPanelWidth } from "./utils";
+import type { FunctionComponent } from "react";
 
-const sectionNames = ["General", "Redirects", "Publish", "Marketplace"];
+type SectionName = "general" | "redirects" | "publish" | "marketplace";
 
-type SectionName = (typeof sectionNames)[number];
+const sections = new Map<SectionName, FunctionComponent>([
+  ["general", SectionGeneral],
+  ["redirects", SectionRedirects],
+  ["publish", SectionPublish],
+  ["marketplace", SectionMarketplace],
+] as const);
 
 export const ProjectSettingsView = ({
   currentSection,
   onSectionChange,
-  isOpen,
   onOpenChange,
 }: {
-  currentSection: SectionName;
+  currentSection?: SectionName;
   onSectionChange?: (section: SectionName) => void;
-  isOpen: boolean;
   onOpenChange?: (isOpen: boolean) => void;
 }) => {
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+    <Dialog open={sections.has(currentSection!)} onOpenChange={onOpenChange}>
       <DialogContent
         css={{
           width: `calc(${leftPanelWidth} + ${rightPanelWidth})`,
@@ -53,7 +56,7 @@ export const ProjectSettingsView = ({
                 borderRight: `1px solid  ${theme.colors.borderMain}`,
               }}
             >
-              {sectionNames.map((name, index) => {
+              {Array.from(sections.keys()).map((name, index) => {
                 return (
                   <ListItem
                     current={currentSection === name}
@@ -80,7 +83,7 @@ export const ProjectSettingsView = ({
                       }}
                       align="center"
                     >
-                      <Text variant="labelsSentenceCase" truncate>
+                      <Text variant="labelsTitleCase" truncate>
                         {name}
                       </Text>
                     </Flex>
@@ -91,10 +94,10 @@ export const ProjectSettingsView = ({
           </List>
           <ScrollArea>
             <Grid gap={2} css={{ my: theme.spacing[5] }}>
-              {currentSection === "General" && <SectionGeneral />}
-              {currentSection === "Redirects" && <SectionRedirects />}
-              {currentSection === "Publish" && <SectionPublish />}
-              {currentSection === "Marketplace" && <SectionMarketplace />}
+              {currentSection === "general" && <SectionGeneral />}
+              {currentSection === "redirects" && <SectionRedirects />}
+              {currentSection === "publish" && <SectionPublish />}
+              {currentSection === "marketplace" && <SectionMarketplace />}
               <div />
             </Grid>
           </ScrollArea>
@@ -109,17 +112,15 @@ export const ProjectSettingsView = ({
 };
 
 export const ProjectSettings = () => {
-  const isOpen = useStore($isProjectSettingsOpen);
-  const [currentSection, setCurrentSection] = useState<SectionName>(
-    sectionNames[0]
-  );
+  const currentSection = useStore($openProjectSettings);
 
   return (
     <ProjectSettingsView
-      isOpen={isOpen}
       currentSection={currentSection}
-      onSectionChange={setCurrentSection}
-      onOpenChange={$isProjectSettingsOpen.set}
+      onSectionChange={$openProjectSettings.set}
+      onOpenChange={(open) => {
+        $openProjectSettings.set(open ? "general" : undefined);
+      }}
     />
   );
 };

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

@@ -1,7 +1,5 @@
 import { $pages } from "~/shared/nano-states/pages";
 import { PageSettings } from "./page-settings";
-
-import { $isProjectSettingsOpen } from "~/shared/nano-states/seo";
 import { Grid, theme } from "@webstudio-is/design-system";
 import { $assets, $project } from "~/shared/nano-states";
 import { createDefaultPages } from "@webstudio-is/project-build";
@@ -17,8 +15,6 @@ export default {
   },
 };
 
-$isProjectSettingsOpen.set(true);
-
 $assets.set(
   new Map([
     [

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

@@ -29,7 +29,7 @@ import {
 } from "~/shared/nano-states";
 import { emitCommand } from "~/builder/shared/commands";
 import { MenuButton } from "./menu-button";
-import { $isProjectSettingsOpen } from "~/shared/nano-states/seo";
+import { $openProjectSettings } from "~/shared/nano-states/project-settings";
 import { UpgradeIcon } from "@webstudio-is/icons";
 import { getSetting, setSetting } from "~/builder/shared/client-settings";
 
@@ -95,7 +95,7 @@ export const Menu = () => {
           <Tooltip side="right" content={undefined}>
             <DropdownMenuItem
               onSelect={() => {
-                $isProjectSettingsOpen.set(true);
+                $openProjectSettings.set("general");
               }}
             >
               Project Settings

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

@@ -48,6 +48,7 @@ import {
   ExternalLinkIcon,
   AlertIcon,
   CopyIcon,
+  GearIcon,
 } from "@webstudio-is/icons";
 import { AddDomain } from "./add-domain";
 import { humanizeString } from "~/shared/string-utils";
@@ -57,6 +58,7 @@ import type { Templates } from "@webstudio-is/sdk";
 import { formatDistance } from "date-fns/formatDistance";
 import DomainCheckbox, { domainToPublishName } from "./domain-checkbox";
 import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard";
+import { $openProjectSettings } from "~/shared/nano-states/project-settings";
 
 type ChangeProjectDomainProps = {
   project: Project;
@@ -914,7 +916,19 @@ export const PublishButton = ({ projectId }: PublishProps) => {
 
         {dialogContentType === "publish" && (
           <>
-            <FloatingPanelPopoverTitle>Publish</FloatingPanelPopoverTitle>
+            <FloatingPanelPopoverTitle
+              actions={
+                <IconButton
+                  onClick={() => {
+                    $openProjectSettings.set("publish");
+                  }}
+                >
+                  <GearIcon />
+                </IconButton>
+              }
+            >
+              Publish
+            </FloatingPanelPopoverTitle>
             <Content projectId={projectId} onExportClick={handleExportClick} />
           </>
         )}

apps/builder/app/shared/nano-states/project-settings.ts

@@ -0,0 +1,5 @@
+import { atom } from "nanostores";
+
+export const $openProjectSettings = atom<
+  "general" | "redirects" | "publish" | "marketplace" | undefined
+>();