Support style source deletion (#1343)

Ref https://github.com/webstudio-is/webstudio-builder/issues/807

Added "delete" item to style source menu and select last style source by
default in input.

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

@@ -110,6 +110,28 @@ const removeStyleSourceFromInstance = (styleSourceId: StyleSource["id"]) => {
   );
 };
 
+const deleteStyleSource = (styleSourceId: StyleSource["id"]) => {
+  store.createTransaction(
+    [styleSourcesStore, styleSourceSelectionsStore, stylesStore],
+    (styleSources, styleSourceSelections, styles) => {
+      styleSources.delete(styleSourceId);
+      for (const styleSourceSelection of styleSourceSelections.values()) {
+        if (styleSourceSelection.values.includes(styleSourceId)) {
+          removeByMutable(
+            styleSourceSelection.values,
+            (item) => item === styleSourceId
+          );
+        }
+      }
+      for (const [styleDeclKey, styleDecl] of styles) {
+        if (styleDecl.styleSourceId === styleSourceId) {
+          styles.delete(styleDeclKey);
+        }
+      }
+    }
+  );
+};
+
 const duplicateStyleSource = (styleSourceId: StyleSource["id"]) => {
   const selectedInstanceSelector = selectedInstanceSelectorStore.get();
   if (selectedInstanceSelector === undefined) {
@@ -284,9 +306,6 @@ export const StyleSourcesSection = () => {
         onSelectAutocompleteItem={({ id }) => {
           addStyleSourceToInstace(id);
         }}
-        onRemoveItem={(id) => {
-          removeStyleSourceFromInstance(id);
-        }}
         onDuplicateItem={(id) => {
           const newId = duplicateStyleSource(id);
           if (newId !== undefined) {
@@ -297,6 +316,12 @@ export const StyleSourcesSection = () => {
           convertLocalStyleSourceToToken(id);
           setEditingItemId(id);
         }}
+        onRemoveItem={(id) => {
+          removeStyleSourceFromInstance(id);
+        }}
+        onDeleteItem={(id) => {
+          deleteStyleSource(id);
+        }}
         onSort={(items) => {
           reorderStyleSources(items.map((item) => item.id));
         }}

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

@@ -173,6 +173,7 @@ type StyleSourceInputProps<Item extends IntermediateItem> = {
   editingItemId?: Item["id"];
   onSelectAutocompleteItem?: (item: Item) => void;
   onRemoveItem?: (id: Item["id"]) => void;
+  onDeleteItem?: (id: Item["id"]) => void;
   onDuplicateItem?: (id: Item["id"]) => void;
   onConvertToToken?: (id: Item["id"]) => void;
   onCreateItem?: (label: string) => void;
@@ -234,6 +235,7 @@ const renderMenuItems = (props: {
   onDisable?: (itemId: IntermediateItem["id"]) => void;
   onEnable?: (itemId: IntermediateItem["id"]) => void;
   onRemove?: (itemId: IntermediateItem["id"]) => void;
+  onDelete?: (itemId: IntermediateItem["id"]) => void;
 }) => (
   <>
     {props.source !== "local" && (
@@ -266,6 +268,14 @@ const renderMenuItems = (props: {
         Remove
       </DropdownMenuItem>
     )}
+    {props.source !== "local" && (
+      <DropdownMenuItem
+        destructive={true}
+        onSelect={() => props.onDelete?.(props.itemId)}
+      >
+        Delete
+      </DropdownMenuItem>
+    )}
   </>
 );
 
@@ -338,10 +348,11 @@ export const StyleSourceInput = (
                 state: item.state,
                 onDuplicate: props.onDuplicateItem,
                 onConvertToToken: props.onConvertToToken,
-                onRemove: props.onRemoveItem,
                 onEnable: props.onEnableItem,
                 onDisable: props.onDisableItem,
                 onEdit: props.onEditItem,
+                onRemove: props.onRemoveItem,
+                onDelete: props.onDeleteItem,
               })
             }
             onChangeItem={props.onChangeItem}

apps/builder/app/shared/nano-states/nano-states.ts

@@ -375,14 +375,14 @@ export const selectedInstanceStyleSourcesStore = computed(
 
 /**
  * Provide selected style source with fallback
- * to local style source of selected instance
+ * to the last style source of selected instance
  */
 export const selectedStyleSourceStore = computed(
   [selectedInstanceStyleSourcesStore, selectedStyleSourceIdStore],
   (styleSources, selectedStyleSourceId) => {
     return (
       styleSources.find((item) => item.id === selectedStyleSourceId) ??
-      styleSources.find((item) => item.type === "local")
+      styleSources.at(-1)
     );
   }
 );