feat: Publish settings section in project settings (#4295)

Closes #4272

## Description

- I moved the only publish setting we have to a separate section, so we
can add more in the future.
- Added a settings button in publish dialog

<img width="625" alt="image"
src="https://github.com/user-attachments/assets/8c72028c-69e6-4fb6-849f-bdb9ee0594cc">
<img width="327" alt="image"
src="https://github.com/user-attachments/assets/70c892de-65ef-4962-a790-fb8c6e6b49e7">


## 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/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,30 +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 { useState } from "react";
+import { SectionPublish } from "./section-publish";
 import { SectionMarketplace } from "./section-marketplace";
 import { leftPanelWidth, rightPanelWidth } from "./utils";
+import type { FunctionComponent } from "react";
 
-const sectionNames = ["General", "Redirects", "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})`,
@@ -52,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}
@@ -79,7 +83,7 @@ export const ProjectSettingsView = ({
                       }}
                       align="center"
                     >
-                      <Text variant="labelsSentenceCase" truncate>
+                      <Text variant="labelsTitleCase" truncate>
                         {name}
                       </Text>
                     </Flex>
@@ -90,9 +94,10 @@ export const ProjectSettingsView = ({
           </List>
           <ScrollArea>
             <Grid gap={2} css={{ my: theme.spacing[5] }}>
-              {currentSection === "General" && <SectionGeneral />}
-              {currentSection === "Redirects" && <SectionRedirects />}
-              {currentSection === "Marketplace" && <SectionMarketplace />}
+              {currentSection === "general" && <SectionGeneral />}
+              {currentSection === "redirects" && <SectionRedirects />}
+              {currentSection === "publish" && <SectionPublish />}
+              {currentSection === "marketplace" && <SectionMarketplace />}
               <div />
             </Grid>
           </ScrollArea>
@@ -107,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/project-settings/section-general.tsx

@@ -9,8 +9,6 @@ import {
   Text,
   Separator,
   Button,
-  CheckboxAndLabel,
-  Checkbox,
   css,
   Flex,
   Tooltip,
@@ -20,9 +18,8 @@ import {
 import { InfoCircleIcon } from "@webstudio-is/icons";
 import { ImageControl } from "./image-control";
 import { Image } from "@webstudio-is/image";
-import type { ProjectMeta, CompilerSettings } from "@webstudio-is/sdk";
+import type { ProjectMeta } from "@webstudio-is/sdk";
 import { $assets, $imageLoader, $pages } from "~/shared/nano-states";
-import { useIds } from "~/shared/form-utils";
 import { serverSyncStore } from "~/shared/sync";
 import { sectionSpacing } from "./utils";
 import { CodeEditor } from "~/builder/shared/code-editor";
@@ -174,52 +171,6 @@ export const SectionGeneral = () => {
           onChange={handleSave("code")}
         />
       </Grid>
-
-      <Separator />
-
-      <CompilerSection />
-    </Grid>
-  );
-};
-
-const defaultCompilerSettings: CompilerSettings = {
-  atomicStyles: true,
-};
-
-const CompilerSection = () => {
-  const ids = useIds(["atomicStyles"]);
-  const [settings, setSettings] = useState(
-    () => $pages.get()?.compiler ?? defaultCompilerSettings
-  );
-
-  const handleSave = (settings: CompilerSettings) => {
-    serverSyncStore.createTransaction([$pages], (pages) => {
-      if (pages === undefined) {
-        return;
-      }
-      pages.compiler = settings;
-    });
-  };
-
-  return (
-    <Grid gap={2} css={sectionSpacing}>
-      <Label htmlFor={ids.atomicStyles}>Compiler</Label>
-      <CheckboxAndLabel>
-        <Checkbox
-          checked={settings.atomicStyles ?? true}
-          id={ids.atomicStyles}
-          onCheckedChange={(atomicStyles) => {
-            if (typeof atomicStyles === "boolean") {
-              const nextSettings = { ...settings, atomicStyles };
-              setSettings(nextSettings);
-              handleSave(nextSettings);
-            }
-          }}
-        />
-        <Label htmlFor={ids.atomicStyles}>
-          Generate atomic CSS when publishing
-        </Label>
-      </CheckboxAndLabel>
     </Grid>
   );
 };

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

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import {
+  Grid,
+  Label,
+  CheckboxAndLabel,
+  Checkbox,
+  Text,
+} from "@webstudio-is/design-system";
+import type { CompilerSettings } from "@webstudio-is/sdk";
+import { $pages } from "~/shared/nano-states";
+import { useIds } from "~/shared/form-utils";
+import { serverSyncStore } from "~/shared/sync";
+import { sectionSpacing } from "./utils";
+
+const defaultPublishSettings: CompilerSettings = {
+  atomicStyles: true,
+};
+
+export const SectionPublish = () => {
+  const ids = useIds(["atomicStyles"]);
+  const [settings, setSettings] = useState(
+    () => $pages.get()?.compiler ?? defaultPublishSettings
+  );
+
+  const handleSave = (settings: CompilerSettings) => {
+    serverSyncStore.createTransaction([$pages], (pages) => {
+      if (pages === undefined) {
+        return;
+      }
+      pages.compiler = settings;
+    });
+  };
+
+  return (
+    <Grid gap={2}>
+      <Text variant="titles" css={sectionSpacing}>
+        Publishing
+      </Text>
+      <Grid gap={2} css={sectionSpacing}>
+        <CheckboxAndLabel>
+          <Checkbox
+            checked={settings.atomicStyles ?? true}
+            id={ids.atomicStyles}
+            onCheckedChange={(atomicStyles) => {
+              if (typeof atomicStyles === "boolean") {
+                const nextSettings = { ...settings, atomicStyles };
+                setSettings(nextSettings);
+                handleSave(nextSettings);
+              }
+            }}
+          />
+          <Label htmlFor={ids.atomicStyles}>
+            Generate atomic CSS when publishing
+          </Label>
+        </CheckboxAndLabel>
+      </Grid>
+    </Grid>
+  );
+};

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