feat: expose blacklist errors in UI

src/common/ui/setting-text.vue

@@ -106,7 +106,7 @@ export default {
       if (!this.hasSave && this.canSave) this.onSave();
     },
     onSave() {
-      options.set(this.name, this.parsedData.value);
+      options.set(this.name, this.parsedData.value).catch(this.bgError);
       this.$emit('save');
     },
     onReset() {
@@ -116,7 +116,7 @@ export default {
       el.focus();
       if (!this.hasSave) {
         // No save button = something rather trivial e.g. the export file name
-        options.set(this.name, this.defaultValue);
+        options.set(this.name, this.defaultValue).catch(this.bgError);
       } else {
         // Save button exists = let the user undo the input
         el.select();
@@ -125,6 +125,9 @@ export default {
         }
       }
     },
+    bgError(err) {
+      this.$emit('bg-error', err);
+    },
   },
 };
 </script>

src/options/views/tab-settings/vm-blacklist.vue

@@ -5,12 +5,18 @@
       {{i18n('descBlacklist')}}
       <a href="https://violentmonkey.github.io/posts/smart-rules-for-blacklist/#blacklist-patterns" target="_blank" rel="noopener noreferrer" v-text="i18n('learnBlacklist')"></a>
     </p>
-    <setting-text name="blacklist" @save="onSave"/>
+    <div class="flex flex-wrap">
+      <setting-text name="blacklist" class="flex-1" @save="onSave" @bgError="errors = $event"/>
+      <ol v-if="errors" class="text-red">
+        <li v-for="e in errors" :key="e" v-text="e"/>
+      </ol>
+    </div>
   </section>
 </template>
 
 <script>
-import { sendCmd } from '@/common';
+import { sendCmdDirectly } from '@/common';
+import { BLACKLIST_ERRORS } from '@/common/consts';
 import { showMessage } from '@/common/ui';
 import SettingText from '@/common/ui/setting-text';
 
@@ -18,11 +24,18 @@ export default {
   components: {
     SettingText,
   },
+  data() {
+    return {
+      errors: null,
+    };
+  },
   methods: {
     onSave() {
       showMessage({ text: this.i18n('msgSavedBlacklist') });
-      sendCmd('BlacklistReset');
     },
   },
+  async mounted() {
+    this.errors = await sendCmdDirectly('Storage', ['base', 'getOne', BLACKLIST_ERRORS]);
+  },
 };
 </script>