From 647a3d733224967a0f9a38f4ac8402311813d246 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Thu, 6 Oct 2022 03:55:57 +0800
Subject: [PATCH 1/5] fix: settings textarea zoom experience optimization

---
 src/page/Components/Settings.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/page/Components/Settings.svelte b/src/page/Components/Settings.svelte
index 98f47dec..05f5ed9d 100644
--- a/src/page/Components/Settings.svelte
+++ b/src/page/Components/Settings.svelte
@@ -280,6 +280,7 @@
         opacity: 0.75;
         padding: 0.5rem;
         width: 100%;
+        min-width: 100%;
     }
 
     textarea:focus {

From 0391f1e0ac1fa8e1d2c8f71cf0ca5a082ffb326d Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Thu, 6 Oct 2022 06:47:37 +0800
Subject: [PATCH 2/5] feat: settings textarea add error indication

---
 src/page/Components/Settings.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/page/Components/Settings.svelte b/src/page/Components/Settings.svelte
index 05f5ed9d..71217740 100644
--- a/src/page/Components/Settings.svelte
+++ b/src/page/Components/Settings.svelte
@@ -11,6 +11,8 @@
     let blacklist;
     // indicates that a blacklist save has initiated
     let blacklistSaving = false;
+    // indicates that a blacklist value has error
+    let blacklist_error = false;
 
     // the saved blacklisted domain patterns
     $: blacklisted = $settings.blacklist.join(", ");
@@ -19,6 +21,16 @@
         // get the comma separated values from blacklist input
         const val = blacklist.value.split(",").map(item => item.trim()).filter(n => n);
 
+        // check if val matches `match patterns`, if not, return a warning
+        const re = /^(http:|https:|\*:)\/\/((?:\*\.)?(?:[a-z0-9-]+\.)+(?:[a-z0-9]+)|\*\.[a-z]+|\*|[a-z0-9]+)(\/[^\s]*)$/;
+        for (const v of val) {
+            if (re.exec(v) === null) {
+                blacklist_error = true;
+                return console.warn("Global blacklist has wrong pattern:", v);
+            }
+        }
+        blacklist_error = false;
+
         // compare blacklist input to saved blacklist
         if ([...val].sort().toString() !== [...$settings.blacklist].sort().toString()) {
             settings.updateSingleSetting("blacklist", val);
@@ -152,6 +164,7 @@
                     { #if blacklistSaving}{@html iconLoader}{/if}
                 </div>
                 <textarea
+                    class:error={blacklist_error}
                     placeholder="Comma separated list of @match patterns"
                     spellcheck="false"
                     bind:this={blacklist}
@@ -283,6 +296,10 @@
         min-width: 100%;
     }
 
+    textarea.error {
+        border: 1px solid red;
+    }
+
     textarea:focus {
         opacity: 1;
     }

From f08a900d86a79699746aca37d354b706ec69418c Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Thu, 6 Oct 2022 06:54:13 +0800
Subject: [PATCH 3/5] feat: settings textarea auto remove duplicates

---
 src/page/Components/Settings.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/Components/Settings.svelte b/src/page/Components/Settings.svelte
index 71217740..8292d4ad 100644
--- a/src/page/Components/Settings.svelte
+++ b/src/page/Components/Settings.svelte
@@ -19,7 +19,7 @@
 
     function saveBlacklist() {
         // get the comma separated values from blacklist input
-        const val = blacklist.value.split(",").map(item => item.trim()).filter(n => n);
+        const val = [...new Set(blacklist.value.split(",").map(item => item.trim()).filter(n => n))];
 
         // check if val matches `match patterns`, if not, return a warning
         const re = /^(http:|https:|\*:)\/\/((?:\*\.)?(?:[a-z0-9-]+\.)+(?:[a-z0-9]+)|\*\.[a-z]+|\*|[a-z0-9]+)(\/[^\s]*)$/;

From d135bbe8955c048904c08afceb633e4c9f4dbe44 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Fri, 7 Oct 2022 06:32:14 +0800
Subject: [PATCH 4/5] feat: settings blacklist add error indication

---
 src/page/Components/Settings.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/page/Components/Settings.svelte b/src/page/Components/Settings.svelte
index 8292d4ad..1972097d 100644
--- a/src/page/Components/Settings.svelte
+++ b/src/page/Components/Settings.svelte
@@ -12,7 +12,7 @@
     // indicates that a blacklist save has initiated
     let blacklistSaving = false;
     // indicates that a blacklist value has error
-    let blacklist_error = false;
+    let blacklistError = false;
 
     // the saved blacklisted domain patterns
     $: blacklisted = $settings.blacklist.join(", ");
@@ -25,11 +25,11 @@
         const re = /^(http:|https:|\*:)\/\/((?:\*\.)?(?:[a-z0-9-]+\.)+(?:[a-z0-9]+)|\*\.[a-z]+|\*|[a-z0-9]+)(\/[^\s]*)$/;
         for (const v of val) {
             if (re.exec(v) === null) {
-                blacklist_error = true;
+                blacklistError = true;
                 return console.warn("Global blacklist has wrong pattern:", v);
             }
         }
-        blacklist_error = false;
+        blacklistError = false;
 
         // compare blacklist input to saved blacklist
         if ([...val].sort().toString() !== [...$settings.blacklist].sort().toString()) {
@@ -159,12 +159,12 @@
                 />
             </div>
             <div class="modal__row modal__row--wrap">
-                <div class="blacklist">
+                <div class="blacklist" class:red={blacklistError}>
                     <span>Global Blacklist</span>
                     { #if blacklistSaving}{@html iconLoader}{/if}
                 </div>
                 <textarea
-                    class:error={blacklist_error}
+                    class:error={blacklistError}
                     placeholder="Comma separated list of @match patterns"
                     spellcheck="false"
                     bind:this={blacklist}
@@ -297,7 +297,7 @@
     }
 
     textarea.error {
-        border: 1px solid red;
+        border: 1px solid var(--color-red);
     }
 
     textarea:focus {

From 3bcc08a3ca9c0557632aaf485f38bf37741ec34c Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Mon, 10 Oct 2022 10:24:34 +0800
Subject: [PATCH 5/5] fix: optimize click-to-close area

Co-authored-by: quoid <justin@emlxl.com>
---
 src/page/Components/Settings.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/Components/Settings.svelte b/src/page/Components/Settings.svelte
index 1972097d..b6b4d499 100644
--- a/src/page/Components/Settings.svelte
+++ b/src/page/Components/Settings.svelte
@@ -68,7 +68,7 @@
 
 <div
     class="settings"
-    on:click|self={() => state.remove("settings")}
+    on:mousedown|self={() => state.remove("settings")}
     in:fade={{duration: 150}}
     out:fade={{duration: 150, delay: 75}}
 >