fix(ui): added indication for dropdown in prefences

src/formatters.nim

@@ -17,8 +17,7 @@ let
   imgurLinkRegex = re"""<a href="https://(i\.)?imgur.com([^"]+)">(i\.)?imgur\.com(\S+)</a>"""
   fandomRegex = re"(?<=(?<!\S)https:\/\/|(?<=\s))([a-z0-9-]+)\.fandom\.com"
   fandomLinkRegex = re"""<a href="https://([a-z0-9-]+)\.fandom\.com([^"]+)">([a-z0-9-]+)\.fandom\.com(\S+)</a>"""
-  soundcloudRegex = re"(?<=(?<!\S)https:\/\/|(?<=\s))(www\.)?soundcloud\.com"
+  soundcloudRegex = re"(?<=(?<!\S)https:\/\/|(?<=\s))(on\.|www\.)?soundcloud\.com"
-  soundcloudLinkRegex = re"""<a href="https://(www\.)?soundcloud\.com([^"]+)">(www\.)?soundcloud\.com(\S+)</a>"""
 
   ytRegex = re(r"([A-z.]+\.)?youtu(be\.com|\.be)", {reStudy, reIgnoreCase})
 
@@ -91,7 +90,9 @@ proc replaceUrls*(body: string; prefs: Prefs; absolute=""): string =
 
   if prefs.replaceSoundCloud.len > 0 and "soundcloud.com" in result:
     result = result.replace(soundcloudRegex, prefs.replaceSoundCloud)
-    result = result.replacef(soundcloudLinkRegex, a(
+    result = result.replacef(re"""<a href="https://on\.soundcloud\.com([^"]+)">on\.soundcloud\.com(\S+)</a>""", a(
+      prefs.replaceSoundCloud & "/on$2", href = https & prefs.replaceSoundCloud & "/on$1"))
+    result = result.replacef(re"""<a href="https://(www\.)?soundcloud\.com([^"]+)">(www\.)?soundcloud\.com(\S+)</a>""", a(
       prefs.replaceSoundCloud & "$4", href = https & prefs.replaceSoundCloud & "$2"))
 
   if prefs.replaceReddit.len > 0 and ("reddit.com" in result or "redd.it" in result):

src/prefs_impl.nim

@@ -54,6 +54,10 @@ genPrefs:
     theme(select, "Nitter"):
       "Theme"
 
+    verifiedBadge(select, "Show all"):
+      "Verified badges"
+      options: @["Show all", "Show official only", "Hide all"]
+
     infiniteScroll(checkbox, false):
       "Infinite scrolling (experimental, requires JavaScript)"
 

src/sass/index.scss

@@ -169,6 +169,14 @@ ul {
     }
 }
 
+body.hide-verified-all .verified-icon {
+    display: none !important;
+}
+
+body.hide-verified-blue .verified-icon.blue {
+    display: none !important;
+}
+
 @media(max-width: 600px) {
     .preferences-container {
         max-width: 95vw;

src/sass/inputs.scss

@@ -162,6 +162,18 @@ input::-webkit-datetime-edit-year-field:focus {
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
+        padding-right: 18px;
+    }
+
+    .pref-select:after {
+        content: '\e80b'; /* icon-down */
+        font-family: $font_icon;
+        font-size: 10px;
+        pointer-events: none;
+        position: absolute;
+        right: 4px;
+        top: 5px;
+        color: var(--fg_color);
     }
 
     input[type="text"] {

src/views/general.nim

@@ -130,7 +130,9 @@ proc renderMain*(body: VNode; req: Request; cfg: Config; prefs=defaultPrefs;
     renderHead(prefs, cfg, req, titleText, desc, video, images, banner, ogTitle,
                rss, canonical)
 
-    body:
+    body(class=if prefs.verifiedBadge == "Hide all": "hide-verified-all"
+               elif prefs.verifiedBadge == "Show official only": "hide-verified-blue"
+               else: ""):
       renderNavbar(cfg, req, rss, canonical)
 
       tdiv(class="container"):

src/views/renderutils.nim

@@ -77,7 +77,7 @@ proc genInput*(pref, label, state, placeholder: string; class=""; autofocus=true
     input(name=pref, `type`="text", placeholder=p, value=state, autofocus=(autofocus and state.len == 0))
 
 proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
-  buildHtml(tdiv(class="pref-group pref-input")):
+  buildHtml(tdiv(class="pref-group pref-input pref-select")):
     label(`for`=pref): text label
     select(name=pref):
       for opt in options: