experimental: Focus mode for style panel (#4827)

#4816

## Description

Still behind a flag, so on dev only, but now style panel is in accordion
mode. Switch will come next.

Testing:

In this mode only one section at a time will be open and Layout is the
initial one.

## 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/settings-panel/variables-section.tsx

@@ -315,10 +315,7 @@ const VariablesList = () => {
 
 export const VariablesSection = () => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [isOpen, setIsOpen] = useOpenState({
-    label: "variables",
-    isOpenDefault: true,
-  });
+  const [isOpen, setIsOpen] = useOpenState({ label: "variables" });
   return (
     <VariablePopoverProvider value={{ containerRef }}>
       <CollapsibleSectionRoot

apps/builder/app/builder/features/style-panel/shared/style-section.tsx

@@ -41,6 +41,8 @@ export const StyleSection = (props: {
   // @todo remove to keep sections consistent
   fullWidth?: boolean;
   children: ReactNode;
+  accordion?: string;
+  initialOpen?: string;
 }) => {
   const { label, children, properties, fullWidth } = props;
   const [isOpen, setIsOpen] = useOpenState(props);

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

@@ -14,6 +14,8 @@ import { sections } from "./sections";
 import { toValue } from "@webstudio-is/css-engine";
 import { $instanceTags, useParentComputedStyleDecl } from "./shared/model";
 import { $selectedInstance } from "~/shared/awareness";
+import { CollapsibleSectionContext } from "~/builder/shared/collapsible-section";
+import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 
 const $selectedInstanceTag = computed(
   [$selectedInstance, $instanceTags],
@@ -72,7 +74,16 @@ export const StylePanel = () => {
         <StyleSourcesSection />
       </Box>
       <Separator />
-      <ScrollArea>{all}</ScrollArea>
+      <ScrollArea>
+        <CollapsibleSectionContext.Provider
+          value={{
+            accordion: isFeatureEnabled("stylePanelModes"),
+            initialOpen: "Layout",
+          }}
+        >
+          {all}
+        </CollapsibleSectionContext.Provider>
+      </ScrollArea>
     </>
   );
 };

apps/builder/app/builder/shared/collapsible-section.tsx

@@ -9,30 +9,57 @@ import {
   Separator,
   theme,
 } from "@webstudio-is/design-system";
-import type { ComponentProps, ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
 import { PlusIcon } from "@webstudio-is/icons";
 import type { Simplify } from "type-fest";
 
+type Label = string;
+
 type UseOpenStateProps = {
-  label: string;
-  isOpenDefault?: boolean;
+  label: Label;
   isOpen?: boolean;
 };
 
-const stateContainer = atom<{ [label: string]: boolean }>({});
+export const CollapsibleSectionContext = createContext<{
+  accordion?: boolean;
+  initialOpen?: Label;
+}>({});
+
+const $stateContainer = atom<{
+  [label: string]: boolean;
+}>({});
 
 // Preserves the open/close state even when component gets unmounted
 export const useOpenState = ({
   label,
-  isOpenDefault = true,
   isOpen: isOpenForced,
 }: UseOpenStateProps): [boolean, (value: boolean) => void] => {
-  const state = useStore(stateContainer);
-  const isOpen = label in state ? state[label] : isOpenDefault;
+  const state = useStore($stateContainer);
+  const { accordion, initialOpen } = useContext(CollapsibleSectionContext);
   const setIsOpen = (isOpen: boolean) => {
-    stateContainer.set({ ...state, [label]: isOpen });
+    const update = { ...state };
+    if (isOpen && accordion) {
+      // In accordion mode we close everything else within that accordion.
+      for (const key in update) {
+        update[key] = false;
+      }
+    }
+    update[label] = isOpen;
+    $stateContainer.set(update);
   };
-  return [isOpenForced === undefined ? isOpen : isOpenForced, setIsOpen];
+
+  // Set initial value for accordion mode.
+  if (accordion && state[label] === undefined) {
+    state[label] = initialOpen === label;
+  }
+
+  const isOpenCurrent = state[label];
+  return [isOpenForced ?? isOpenCurrent ?? true, setIsOpen];
 };
 
 type CollapsibleSectionBaseProps = {

packages/feature-flags/src/flags.ts

@@ -9,3 +9,4 @@ export const staticExport = false;
 export const contentEditableMode = false;
 export const command = false;
 export const headSlotComponent = false;
+export const stylePanelModes = false;