add servers & css for them

src/front/cobalt.css

@@ -1192,4 +1192,22 @@ button:active,
     .popup-title {
         line-height: inherit;
     }
+}
+
+.switches-vertical {
+    display: flex;
+    width: auto;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+}
+.switch-vertical.first {
+    border-top-left-radius: 5px 6px!important;
+    border-top-right-radius: 5px 6px!important;
+    border-bottom-left-radius: 0px;
+}
+.switch-vertical.last {
+    border-bottom-left-radius: 5px 6px!important;
+    border-bottom-right-radius: 5px 6px!important;
+    border-top-right-radius: 0px;
 }

src/localization/languages/en.json

@@ -41,6 +41,8 @@
         "SettingsThemeLight": "light",
         "SettingsThemeDark": "dark",
         "SettingsKeepDownloadButton": "keep >> visible",
+        "SettingsServerPicker": "server picker",
+        "SettingsServerPickerDescription": "choose which server to download from",
         "AccessibilityKeepDownloadButton": "keep the download button always visible",
         "SettingsEnableDownloadPopup": "ask how to save",
         "AccessibilityEnableDownloadPopup": "ask what to do with downloads",

src/modules/pageRender/elements.js

@@ -13,6 +13,13 @@ export function switcher(obj) {
     let items = ``;
     if (obj.name === "download") {
         items = obj.items;
+    } else if (obj.vertical) {
+        for (let i = 0; i < obj.items.length; i++) {
+            let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : [];
+            if (i === 0) classes.push("first");
+            if (i === (obj.items.length - 1)) classes.push("last");
+            items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch switch-vertical${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
+        }
     } else {
         for (let i = 0; i < obj.items.length; i++) {
             let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : [];
@@ -22,12 +29,25 @@ export function switcher(obj) {
         }
     }
 
-    if (obj.noParent) return `<div id="${obj.name}" class="switches">${items}</div>`;
+    if (obj.noParent && obj.vertical) {
-    return `<div id="${obj.name}-switcher" class="switch-container">
+        return `<div id="${obj.name}" class="switches switches-vertical">${items}</div>`
+    } else if (obj.noParent) {
+        return `<div id="${obj.name}" class="switches">${items}</div>`
+    }
+    
+    if (obj.vertical) {
+        return `<div id="${obj.name}-switcher" class="switch-container">
+            ${obj.subtitle ? `<div class="subtitle">${obj.subtitle}</div>` : ``}
+            <div class="switches switches-vertical">${items}</div>
+            ${obj.explanation ? `<div class="explanation">${obj.explanation}</div>` : ``}
+        </div>`
+    } else {
+        return `<div id="${obj.name}-switcher" class="switch-container">
             ${obj.subtitle ? `<div class="subtitle">${obj.subtitle}</div>` : ``}
             <div class="switches">${items}</div>
             ${obj.explanation ? `<div class="explanation">${obj.explanation}</div>` : ``}
         </div>`
+    }
 }
 export function checkbox(obj) {
     let paddings = ["bottom-margin", "top-margin", "no-margin", "top-margin-only"];

src/modules/pageRender/page.js

@@ -451,6 +451,37 @@ export default function(obj) {
                         aria: t("AccessibilityEnableDownloadPopup")
                     }])
                 })
+                + settingsCategory({
+                    name: "serverpicker",
+                    title: t('SettingsServerPicker'),
+                    explanation: t('SettingsServerPickerDescription'),
+                    body: switcher({
+                        name: "serverpicker",
+                        vertical: true,
+                        items: [{
+                            action: "co.wuk.sh",
+                            text: "co.wuk.sh"
+                        }, {
+                            action: "api.c0ba.lt",
+                            text: "api.c0ba.lt"
+                        }, {
+                            action: "co-api.blueb.me",
+                            text: "co-api.blueb.me"
+                        }, {
+                            action: "wukko.wolfdo.gg",
+                            text: "wukko.wolfdo.gg"
+                        }, {
+                            action: "api.co.749.city",
+                            text: "api.co.749.city"
+                        }, {
+                            action: "cobalt-api.fluffy.tools",
+                            text: "cobalt-api.fluffy.tools"
+                        }, {
+                            action: "capi.oak.li",
+                            text: "capi.oak.li"
+                        }]
+                    })
+                })
             }],
         })}
         ${popupWithBottomButtons({