Add optionsGroup

src/types/preferences.d.ts

@@ -1,5 +1,6 @@
 export type PreferenceSetting = {
     default: any;
+    optionsGroup?: string;
     options?: {[index: string]: string};
     multipleOptions?: {[index: string]: string};
     unsupported?: string | boolean;

src/utils/preferences.ts

@@ -130,6 +130,7 @@ export class Preferences {
             label: t('bypass-region-restriction'),
             note: '⚠️ ' + t('use-this-at-your-own-risk'),
             default: 'off',
+            optionsGroup: t('region'),
             options: Object.assign({
                 'off': t('off'),
             }, BypassServers),

src/utils/settings.ts

@@ -30,11 +30,20 @@ export class SettingElement {
                 // title: setting.label,
                 tabindex: 0,
             }) as HTMLSelectElement;
+
+        let $parent: HTMLElement;
+        if (setting.optionsGroup) {
+            $parent = CE('optgroup', {'label': setting.optionsGroup});
+            $control.appendChild($parent);
+        } else {
+            $parent = $control;
+        }
+
         for (let value in setting.options) {
             const label = setting.options[value];
 
             const $option = CE<HTMLOptionElement>('option', {value: value}, label);
-            $control.appendChild($option);
+            $parent.appendChild($option);
         }
 
         $control.value = currentValue;