From 126960ba82ba00e9180bd886603e6b973034efab Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Wed, 28 Jun 2023 15:03:35 +0200
Subject: [PATCH] Properly remove user labels.

---
 .../content-scripts/features/user-labels.tsx  |  6 +++--
 source/options/user-label-editor.tsx          | 24 ++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/source/content-scripts/features/user-labels.tsx b/source/content-scripts/features/user-labels.tsx
index ee52935..ae52af6 100644
--- a/source/content-scripts/features/user-labels.tsx
+++ b/source/content-scripts/features/user-labels.tsx
@@ -312,8 +312,10 @@ export class UserLabelsFeature extends Component<Props, State> {
       value.remove();
     }
 
-    userLabels.splice(index, 1);
-    await saveUserLabels(userLabels);
+    for (const userLabel of userLabels.splice(index, 1)) {
+      await userLabel.remove();
+    }
+
     this.props.userLabels = userLabels;
     this.hide();
   };
diff --git a/source/options/user-label-editor.tsx b/source/options/user-label-editor.tsx
index 5c6cbc4..890a39b 100644
--- a/source/options/user-label-editor.tsx
+++ b/source/options/user-label-editor.tsx
@@ -30,6 +30,7 @@ type State = {
   hasUnsavedChanges: boolean;
   newLabelUsername: string;
   userLabels: UserLabelsData;
+  userLabelsToRemove: UserLabelsData;
 };
 
 class App extends Component<Props, State> {
@@ -40,6 +41,7 @@ class App extends Component<Props, State> {
       hasUnsavedChanges: false,
       newLabelUsername: "",
       userLabels: props.userLabels,
+      userLabelsToRemove: [],
     };
   }
 
@@ -99,20 +101,26 @@ class App extends Component<Props, State> {
     });
   };
 
-  removeUserLabel = (targetId: number) => {
-    const userLabels = this.state.userLabels.filter(
-      ({value: {id}}) => id !== targetId,
-    );
+  removeUserLabel = async (targetId: number) => {
+    const {userLabels, userLabelsToRemove} = this.state;
+    const index = userLabels.findIndex(({value}) => value.id === targetId);
+    userLabelsToRemove.push(...userLabels.splice(index, 1));
+
     this.setState({
       hasUnsavedChanges: true,
       userLabels,
+      userLabelsToRemove,
     });
   };
 
-  saveUserLabels = () => {
+  saveUserLabels = async () => {
+    for (const userLabel of this.state.userLabelsToRemove) {
+      await userLabel.remove();
+    }
+
     this.props.userLabels = this.state.userLabels;
     void saveUserLabels(this.props.userLabels);
-    this.setState({hasUnsavedChanges: false});
+    this.setState({hasUnsavedChanges: false, userLabelsToRemove: []});
   };
 
   render() {
@@ -155,8 +163,8 @@ class App extends Component<Props, State> {
           this.editUserLabel(event, label.id, "priority");
         };
 
-        const removeHandler = () => {
-          this.removeUserLabel(label.id);
+        const removeHandler = async () => {
+          await this.removeUserLabel(label.id);
         };
 
         userLabels.push(