feat: Disable AI and Page Settings editing in Content Mode (#4504)

## Description

ref #3994


https://discord.com/channels/955905230107738152/1313579337940996096/1313591871926308914

## 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: istarkov

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -76,6 +76,7 @@ import {
   $publishedOrigin,
   $project,
   $userPlanFeatures,
+  $isDesignMode,
 } from "~/shared/nano-states";
 import {
   BindingControl,
@@ -1661,12 +1662,13 @@ const PageSettingsView = ({
   onClose: () => void;
   children: JSX.Element;
 }) => {
+  const isDesignMode = useStore($isDesignMode);
   return (
     <>
       <PanelTitle
         suffix={
           <>
-            {onDelete && (
+            {isDesignMode && onDelete && (
               <Tooltip content="Delete page" side="bottom">
                 <Button
                   color="ghost"
@@ -1677,15 +1679,18 @@ const PageSettingsView = ({
                 />
               </Tooltip>
             )}
-            <Tooltip content="Duplicate page" side="bottom">
-              <Button
-                color="ghost"
-                prefix={<CopyIcon />}
-                onClick={onDuplicate}
-                aria-label="Duplicate page"
-                tabIndex={2}
-              />
-            </Tooltip>
+            {isDesignMode && (
+              <Tooltip content="Duplicate page" side="bottom">
+                <Button
+                  color="ghost"
+                  prefix={<CopyIcon />}
+                  onClick={onDuplicate}
+                  aria-label="Duplicate page"
+                  tabIndex={2}
+                />
+              </Tooltip>
+            )}
+
             <Tooltip content="Close page settings" side="bottom">
               <Button
                 color="ghost"
@@ -1701,7 +1706,11 @@ const PageSettingsView = ({
         Page Settings
       </PanelTitle>
       <Separator />
-      <Form onSubmit={onClose}>{children}</Form>
+      <Form onSubmit={onClose}>
+        <fieldset style={{ display: "contents" }} disabled={!isDesignMode}>
+          {children}
+        </fieldset>
+      </Form>
     </>
   );
 };

apps/builder/app/builder/features/pages/pages.tsx

@@ -27,7 +27,12 @@ import {
 } from "@webstudio-is/icons";
 import { ExtendedPanel } from "../../shared/extended-sidebar-panel";
 import { NewPageSettings, PageSettings } from "./page-settings";
-import { $editingPageId, $isContentMode, $pages } from "~/shared/nano-states";
+import {
+  $editingPageId,
+  $isContentMode,
+  $isDesignMode,
+  $pages,
+} from "~/shared/nano-states";
 import {
   getAllChildrenAndSelf,
   reparentOrphansMutable,
@@ -511,6 +516,7 @@ export const PagesPanel = ({ onClose }: { onClose: () => void }) => {
   const currentPage = useStore($selectedPage);
   const editingItemId = useStore($editingPageId);
   const pages = useStore($pages);
+  const isDesignMode = useStore($isDesignMode);
 
   if (currentPage === undefined || pages === undefined) {
     return;
@@ -521,30 +527,34 @@ export const PagesPanel = ({ onClose }: { onClose: () => void }) => {
       <PanelTitle
         suffix={
           <>
-            <Tooltip content="New folder" side="bottom">
-              <Button
-                onClick={() => {
-                  $editingPageId.set(
-                    editingItemId === newFolderId ? undefined : newFolderId
-                  );
-                }}
-                aria-label="New folder"
-                prefix={<NewFolderIcon />}
-                color="ghost"
-              />
-            </Tooltip>
-            <Tooltip content="New page" side="bottom">
-              <Button
-                onClick={() => {
-                  $editingPageId.set(
-                    editingItemId === newPageId ? undefined : newPageId
-                  );
-                }}
-                aria-label="New page"
-                prefix={<NewPageIcon />}
-                color="ghost"
-              />
-            </Tooltip>
+            {isDesignMode && (
+              <>
+                <Tooltip content="New folder" side="bottom">
+                  <Button
+                    onClick={() => {
+                      $editingPageId.set(
+                        editingItemId === newFolderId ? undefined : newFolderId
+                      );
+                    }}
+                    aria-label="New folder"
+                    prefix={<NewFolderIcon />}
+                    color="ghost"
+                  />
+                </Tooltip>
+                <Tooltip content="New page" side="bottom">
+                  <Button
+                    onClick={() => {
+                      $editingPageId.set(
+                        editingItemId === newPageId ? undefined : newPageId
+                      );
+                    }}
+                    aria-label="New page"
+                    prefix={<NewPageIcon />}
+                    color="ghost"
+                  />
+                </Tooltip>
+              </>
+            )}
             <Tooltip content="Close panel" side="bottom">
               <Button
                 color="ghost"

apps/builder/app/builder/sidebar-left/sidebar-left.tsx

@@ -4,6 +4,7 @@ import { useSubscribe, type Publish } from "~/shared/pubsub";
 import {
   $dragAndDropState,
   $isContentMode,
+  $isDesignMode,
   $isPreviewMode,
 } from "~/shared/nano-states";
 import { Flex } from "@webstudio-is/design-system";
@@ -173,6 +174,7 @@ type SidebarLeftProps = {
 };
 
 export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
+  const isDesignMode = useStore($isDesignMode);
   const activePanel = useStore($activeSidebarPanel);
   const dragAndDropState = useStore($dragAndDropState);
   const { Panel } = panels.find((item) => item.name === activePanel) ?? none;
@@ -262,7 +264,8 @@ export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
                 })}
             </SidebarTabsList>
           </div>
-          <AiTabTrigger />
+          {isDesignMode && <AiTabTrigger />}
+
           <HelpTabTrigger />
         </Flex>
       )}