experimental: Advanced panel sorting and grouping (#4842)

#4816

## Description

1. We want to group entries by origin
2. We want to sort by alphabet

## Steps for reproduction

1. click button
3. 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

@@ -260,8 +260,6 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
   const styleDecl = useComputedStyleDecl(property);
   const label = hyphenateProperty(property);
   const description = propertyDescriptions[property];
-  const color =
-    styleDecl.source.name === "default" ? "code" : styleDecl.source.name;
   const [isOpen, setIsOpen] = useState(false);
   return (
     <Tooltip
@@ -291,7 +289,13 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
         />
       }
     >
-      <Label color={color} text="mono">
+      <Label
+        color={styleDecl.source.name}
+        text="mono"
+        css={{
+          backgroundColor: "transparent",
+        }}
+      >
         {label}
       </Label>
     </Tooltip>
@@ -366,11 +370,11 @@ const AdvancedPropertyValue = ({
 };
 
 const initialProperties = new Set<StyleProperty>([
-  "userSelect",
-  "pointerEvents",
-  "mixBlendMode",
   "cursor",
+  "mixBlendMode",
   "opacity",
+  "pointerEvents",
+  "userSelect",
 ]);
 
 const $advancedProperties = computed(
@@ -409,7 +413,7 @@ const $advancedProperties = computed(
         baseProperties.add(property);
       }
     }
-    const advancedProperties = new Set<StyleProperty>(initialProperties);
+    const advancedProperties = new Set<StyleProperty>();
     for (const { property, listed } of definedStyles) {
       // In advanced mode we show all defined properties
       if (settings.stylePanelMode === "advanced") {
@@ -421,7 +425,14 @@ const $advancedProperties = computed(
         advancedProperties.add(property);
       }
     }
-    return Array.from(advancedProperties).reverse();
+    // In advanced mode we assume user knows the properties they need, so we don't need to show these.
+    // @todo we need to find a better place for them in any case
+    if (settings.stylePanelMode !== "advanced") {
+      for (const property of initialProperties) {
+        advancedProperties.add(property);
+      }
+    }
+    return Array.from(advancedProperties);
   }
 );
 

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

@@ -139,19 +139,22 @@ export const getDefinedStyles = ({
   styleSourceSelections: StyleSourceSelections;
   styles: Styles;
 }) => {
-  const definedStyles = new Set<{
-    property: StyleProperty;
-    listed?: boolean;
-  }>();
   const inheritedStyleSources = new Set();
   const instanceStyleSources = new Set();
   const matchingBreakpoints = new Set(matchingBreakpointsArray);
   const startingInstanceSelector = instancePath[0].instanceSelector;
+
+  type StyleDeclSubset = Pick<StyleDecl, "property" | "listed">;
+
+  const instanceStyles = new Set<StyleDeclSubset>();
+  const inheritedStyles = new Set<StyleDeclSubset>();
+  const presetStyles = new Set<StyleDeclSubset>();
+
   for (const { instance } of instancePath) {
     const meta = metas.get(instance.component);
-    for (const presetStyles of Object.values(meta?.presetStyle ?? {})) {
-      for (const styleDecl of presetStyles) {
-        definedStyles.add(styleDecl);
+    for (const preset of Object.values(meta?.presetStyle ?? {})) {
+      for (const styleDecl of preset) {
+        presetStyles.add(styleDecl);
       }
     }
     const styleSources = styleSourceSelections.get(instance.id)?.values;
@@ -170,7 +173,7 @@ export const getDefinedStyles = ({
       matchingBreakpoints.has(styleDecl.breakpointId) &&
       instanceStyleSources.has(styleDecl.styleSourceId)
     ) {
-      definedStyles.add(styleDecl);
+      instanceStyles.add(styleDecl);
     }
     const inherited =
       properties[styleDecl.property as keyof typeof properties]?.inherited ??
@@ -181,10 +184,20 @@ export const getDefinedStyles = ({
       inheritedStyleSources.has(styleDecl.styleSourceId) &&
       inherited
     ) {
-      definedStyles.add(styleDecl);
+      inheritedStyles.add(styleDecl);
     }
   }
-  return definedStyles;
+
+  // We are sorting by alphabet within each group.
+  const sortByProperty = (a: { property: string }, b: { property: string }) => {
+    return Intl.Collator().compare(a.property, b.property);
+  };
+
+  return new Set([
+    ...Array.from(instanceStyles).sort(sortByProperty),
+    ...Array.from(inheritedStyles).sort(sortByProperty),
+    ...Array.from(presetStyles).sort(sortByProperty),
+  ]);
 };
 
 export const $definedStyles = computed(

packages/design-system/src/components/label.tsx

@@ -15,7 +15,6 @@ export const labelColors = [
   "local",
   "overwritten",
   "remote",
-  "code",
   "inactive",
 ] as const;
 
@@ -34,7 +33,7 @@ const StyledLabel = styled(RadixLabel, {
   px: theme.spacing[2],
   border: "1px solid transparent",
   borderRadius: theme.borderRadius[3],
-  transition: "200ms color, 200ms background-color",
+  transition: "150ms color, 150ms background-color",
   color: theme.colors.foregroundMain,
 
   // https://github.com/webstudio-is/webstudio/issues/1271#issuecomment-1478436340
@@ -91,12 +90,6 @@ const StyledLabel = styled(RadixLabel, {
           backgroundColor: theme.colors.backgroundRemoteHover,
         },
       },
-      code: {
-        color: theme.colors.foregroundLocalMain,
-        "&:hover": {
-          backgroundColor: theme.colors.backgroundHover,
-        },
-      },
       // Example is collapsible section title label when section has no content.
       inactive: {
         color: theme.colors.foregroundTextSubtle,

packages/design-system/src/components/nested-icon-label.tsx

@@ -38,12 +38,6 @@ const colors = {
     backgroundHover: theme.colors.backgroundRemoteHover,
     icon: theme.colors.foregroundRemoteMain,
   },
-  code: {
-    border: "transparent",
-    background: "transparent",
-    backgroundHover: theme.colors.backgroundHover,
-    icon: theme.colors.foregroundIconMain,
-  },
   inactive: {
     border: "transparent",
     background: "transparent",
@@ -82,7 +76,6 @@ const style = css({
       local: perColorStyle("local"),
       overwritten: perColorStyle("overwritten"),
       remote: perColorStyle("remote"),
-      code: perColorStyle("code"),
       inactive: perColorStyle("inactive"),
     },
   },