experimental: more advanced style panel feaures (#4890)

Ref #4816
Closes #4874

## Description

- [x] Memorizing recent properties by instance, so that when user
switches between instances and comes back they are still in-place
- [x] alt+shift+a for advanced mode shorthand


## 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/style-panel/sections/advanced/advanced.tsx

@@ -57,6 +57,7 @@ import { $advancedStyles } from "./stores";
 import { $settings } from "~/builder/shared/client-settings";
 import { AddStyleInput } from "./add-style-input";
 import { parseStyleInput } from "./parse-style-input";
+import { $selectedInstanceKey } from "~/shared/awareness";
 
 // Only here to keep the same section module interface
 export const properties = [];
@@ -354,7 +355,12 @@ const AdvancedProperty = memo(
 export const Section = () => {
   const [isAdding, setIsAdding] = useState(false);
   const advancedStyles = useStore($advancedStyles);
-  const [recentProperties, setRecentProperties] = useState<StyleProperty[]>([]);
+  const selectedInstanceKey = useStore($selectedInstanceKey);
+  // Memorizing recent properties by instance, so that when user switches between instances and comes back
+  // they are still in-place
+  const [recentPropertiesMap, setRecentPropertiesMap] = useState<
+    Map<string, Array<StyleProperty>>
+  >(new Map());
   const addPropertyInputRef = useRef<HTMLInputElement>(null);
   const recentValueInputRef = useRef<HTMLInputElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -369,19 +375,33 @@ export const Section = () => {
 
   const currentProperties = searchProperties ?? advancedProperties;
 
+  const recentProperties = selectedInstanceKey
+    ? (recentPropertiesMap.get(selectedInstanceKey) ?? [])
+    : [];
+
   const showRecentProperties =
     recentProperties.length > 0 && searchProperties === undefined;
 
   const memorizeMinHeight = () => {
     setMinHeight(containerRef.current?.getBoundingClientRect().height ?? 0);
   };
 
+  const updateRecentProperties = (properties: Array<StyleProperty>) => {
+    if (selectedInstanceKey === undefined) {
+      return;
+    }
+    const newRecentPropertiesMap = new Map(recentPropertiesMap);
+    newRecentPropertiesMap.set(
+      selectedInstanceKey,
+      Array.from(new Set([...recentProperties, ...properties]))
+    );
+    setRecentPropertiesMap(newRecentPropertiesMap);
+  };
+
   const handleInsertStyles = (cssText: string) => {
     const styles = insertStyles(cssText);
     const insertedProperties = styles.map(({ property }) => property);
-    setRecentProperties(
-      Array.from(new Set([...recentProperties, ...insertedProperties]))
-    );
+    updateRecentProperties(insertedProperties);
     return styles;
   };
 
@@ -445,7 +465,10 @@ export const Section = () => {
         properties={currentProperties}
       >
         <Flex gap="2" direction="column">
-          <Box css={{ paddingInline: theme.panel.paddingInline }}>
+          <Flex
+            direction="column"
+            css={{ paddingInline: theme.panel.paddingInline, gap: 2 }}
+          >
             {showRecentProperties &&
               recentProperties.map((property, index, properties) => {
                 const isLast = index === properties.length - 1;
@@ -461,11 +484,11 @@ export const Section = () => {
                       }
                     }}
                     onReset={() => {
-                      setRecentProperties((properties) => {
-                        return properties.filter(
+                      updateRecentProperties(
+                        recentProperties.filter(
                           (recentProperty) => recentProperty !== property
-                        );
-                      });
+                        )
+                      );
                     }}
                   />
                 );
@@ -499,10 +522,11 @@ export const Section = () => {
                 />
               </Box>
             )}
-          </Box>
+          </Flex>
           {showRecentProperties && <Separator />}
-          <Box
-            css={{ paddingInline: theme.panel.paddingInline }}
+          <Flex
+            direction="column"
+            css={{ paddingInline: theme.panel.paddingInline, gap: 2 }}
             style={{ minHeight }}
             ref={containerRef}
           >
@@ -513,7 +537,7 @@ export const Section = () => {
               .map((property) => (
                 <AdvancedProperty key={property} property={property} />
               ))}
-          </Box>
+          </Flex>
         </Flex>
       </CopyPasteMenu>
     </AdvancedStyleSection>

apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts

@@ -62,7 +62,11 @@ export const $advancedStyles = computed(
       const { property, value, listed } = style;
       // When property is listed, it was added from advanced panel.
       // If we are in advanced mode, we show them all.
-      if (listed || settings.stylePanelMode === "advanced") {
+      if (
+        visualProperties.has(property) === false ||
+        listed ||
+        settings.stylePanelMode === "advanced"
+      ) {
         advancedStyles.set(property, value);
       }
     }

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

@@ -60,7 +60,7 @@ export const ModeMenu = () => {
       </DropdownMenuTrigger>
       <DropdownMenuContent
         sideOffset={Number.parseFloat(rawTheme.spacing[5])}
-        css={{ width: theme.spacing[25] }}
+        css={{ width: theme.spacing[26] }}
       >
         <DropdownMenuRadioGroup
           value={value}
@@ -91,7 +91,10 @@ export const ModeMenu = () => {
               icon={<MenuCheckedIcon />}
               onFocus={() => setFocusedValue("advanced")}
             >
-              Advanced mode
+              <Flex justify="between" grow>
+                <Text variant="labelsTitleCase">Advanced mode</Text>
+                <Kbd value={["alt", "shift", "a"]} />
+              </Flex>
             </DropdownMenuRadioItem>
           )}
         </DropdownMenuRadioGroup>

apps/builder/app/builder/shared/commands.ts

@@ -362,6 +362,17 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       },
       disableOnInputLikeControls: true,
     },
+    {
+      name: "toggleStylePanelAdvancedMode",
+      defaultHotkeys: ["alt+shift+a"],
+      handler: () => {
+        setSetting(
+          "stylePanelMode",
+          getSetting("stylePanelMode") === "advanced" ? "default" : "advanced"
+        );
+      },
+      disableOnInputLikeControls: true,
+    },
     {
       name: "openSettingsPanel",
       defaultHotkeys: ["d"],