Add recommended option badge

ext/src/_locales/en/messages.json

@@ -374,6 +374,11 @@
       , "description": "Mirroring app ID option description."
     }
 
+  , "optionsOptionRecommended": {
+        "message": "recommended"
+      , "description": "Badge next to option label indicating boolean option is recommended enabled."
+    }
+
   , "optionsReset": {
         "message": "Restore Defaults"
       , "description": "Restore default options button label."

ext/src/ui/options/index.tsx

@@ -380,6 +380,9 @@ class OptionsApp extends Component<{}, OptionsAppState> {
                             </div>
                             <div className="option__label">
                                 { _("optionsUserAgentWhitelistEnabled") }
+                                <span className="option__recommended">
+                                    { _("optionsOptionRecommended") }
+                                </span>
                             </div>
                         </label>
 

ext/src/ui/options/styles/index.css

@@ -294,6 +294,15 @@
     display: inline-block;
 }
 
+.option__recommended {
+    background-color: var(--blue-60);
+    border-radius: 2px;
+    color: white;
+    font-size: smaller;
+    margin-inline-start: 5px;
+    padding: 0 5px;
+}
+
 .option__description {
     color: var(--secondary-color);
     font-size: smaller;