.gitignore

@@ -5,5 +5,4 @@ build/
 version.go
 notes
 docs/*
-config-payload.json
 !docs/go.mod

api.go

@@ -1072,14 +1072,13 @@ func (app *appContext) ApplySettings(gc *gin.Context) {
 
 // @Summary Get jfa-go configuration.
 // @Produce json
-// @Success 200 {object} settings "Uses the same format as config-base.json"
+// @Success 200 {object} configDTO "Uses the same format as config-base.json"
 // @Router /config [get]
 // @Security Bearer
 // @tags Configuration
 func (app *appContext) GetConfig(gc *gin.Context) {
 	app.info.Println("Config requested")
-	resp := app.configBase
-	// Load language options
+	resp := map[string]interface{}{}
 	langPath := filepath.Join(app.localPath, "lang", "form")
 	app.lang.langFiles, _ = ioutil.ReadDir(langPath)
 	app.lang.langOptions = make([]string, len(app.lang.langFiles))
@@ -1096,25 +1095,37 @@ func (app *appContext) GetConfig(gc *gin.Context) {
 			app.lang.langOptions[i] = meta.(map[string]interface{})["name"].(string)
 		}
 	}
-	s := resp.Sections["ui"].Settings["language"]
-	s.Options = app.lang.langOptions
-	s.Value = app.lang.langOptions[app.lang.chosenIndex]
-	resp.Sections["ui"].Settings["language"] = s
-	for sectName, section := range resp.Sections {
-		for settingName, setting := range section.Settings {
-			val := app.config.Section(sectName).Key(settingName)
-			s := resp.Sections[sectName].Settings[settingName]
-			switch setting.Type {
-			case "text", "email", "select":
-				s.Value = val.MustString("")
-			case "number":
-				s.Value = val.MustInt(0)
-			case "bool":
-				s.Value = val.MustBool(false)
+	for section, settings := range app.configBase {
+		if section == "order" {
+			resp[section] = settings.([]interface{})
+		} else {
+			resp[section] = make(map[string]interface{})
+			for key, values := range settings.(map[string]interface{}) {
+				if key == "order" {
+					resp[section].(map[string]interface{})[key] = values.([]interface{})
+				} else {
+					resp[section].(map[string]interface{})[key] = values.(map[string]interface{})
+					if key != "meta" {
+						dataType := resp[section].(map[string]interface{})[key].(map[string]interface{})["type"].(string)
+						configKey := app.config.Section(section).Key(key)
+						if dataType == "number" {
+							if val, err := configKey.Int(); err == nil {
+								resp[section].(map[string]interface{})[key].(map[string]interface{})["value"] = val
+							}
+						} else if dataType == "bool" {
+							resp[section].(map[string]interface{})[key].(map[string]interface{})["value"] = configKey.MustBool(false)
+						} else if dataType == "select" && key == "language" {
+							resp[section].(map[string]interface{})[key].(map[string]interface{})["options"] = app.lang.langOptions
+							resp[section].(map[string]interface{})[key].(map[string]interface{})["value"] = app.lang.langOptions[app.lang.chosenIndex]
+						} else {
+							resp[section].(map[string]interface{})[key].(map[string]interface{})["value"] = configKey.String()
+						}
+					}
+				}
 			}
-			resp.Sections[sectName].Settings[settingName] = s
 		}
 	}
+	// resp["jellyfin"].(map[string]interface{})["language"].(map[string]interface{})["options"].([]string)
 	gc.JSON(200, resp)
 }
 

config/fixconfig.py

@@ -9,17 +9,17 @@ args = parser.parse_args()
 with open(args.input, 'r') as f:
     config = json.load(f)
 
-newconfig = {"sections": {}, "order": []}
+newconfig = {"order": []}
 
-for sect in config["sections"]:
+for sect in config:
     newconfig["order"].append(sect)
-    newconfig["sections"][sect] = {}
-    newconfig["sections"][sect]["order"] = []
-    newconfig["sections"][sect]["meta"] = config["sections"][sect]["meta"]
-    newconfig["sections"][sect]["settings"] = {}
-    for setting in config["sections"][sect]["settings"]:
-        newconfig["sections"][sect]["order"].append(setting)
-        newconfig["sections"][sect]["settings"][setting] = config["sections"][sect]["settings"][setting]
+    newconfig[sect] = {}
+    newconfig[sect]["order"] = []
+    newconfig[sect]["meta"] = config[sect]["meta"]
+    for setting in config[sect]:
+        if setting != "meta":
+            newconfig[sect]["order"].append(setting)
+            newconfig[sect][setting] = config[sect][setting]
 
 with open(args.output, 'w') as f:
     f.write(json.dumps(newconfig, indent=4))

config/generate_ini.py

@@ -14,19 +14,18 @@ def generate_ini(base_file, ini_file):
 
     ini = configparser.RawConfigParser(allow_no_value=True)
 
-    for section in config_base["sections"]:
+    for section in config_base:
         ini.add_section(section)
-        if "meta" in config_base["sections"][section]:
-            ini.set(section, "; " + config_base["sections"][section]["meta"]["description"])
-        for entry in config_base["sections"][section]["settings"]:
-            if "description" in config_base["sections"][section]["settings"][entry]:
-                ini.set(section, "; " + config_base["sections"][section]["settings"][entry]["description"])
-            value = config_base["sections"][section]["settings"][entry]["value"]
-            if isinstance(value, bool):
-                value = str(value).lower()
-            else:
-                value = str(value)
-            ini.set(section, entry, value)
+        for entry in config_base[section]:
+            if "description" in config_base[section][entry]:
+                ini.set(section, "; " + config_base[section][entry]["description"])
+            if entry != "meta":
+                value = config_base[section][entry]["value"]
+                if isinstance(value, bool):
+                    value = str(value).lower()
+                else:
+                    value = str(value)
+                ini.set(section, entry, value)
 
     with open(Path(ini_file), "w") as config_file:
         ini.write(config_file)

css/base.css

@@ -196,11 +196,6 @@ sup.\~critical, .text-critical {
     align-items: center;
 }
 
-.inv-empty .inv-codearea {
-    justify-content: start;
-}
-
-
 .invite-link {
     text-overflow: ellipsis;
     overflow: hidden;

html/admin.html

@@ -236,11 +236,40 @@
                         <span class="button ~neutral !normal" id="accounts-add-user">Save</span>
                     </div>
                     <div class="row">
-                        <div class="card ~neutral !normal col" id="settings-sidebar">
+                        <div class="card ~neutral !normal col">
                             <aside class="aside sm ~info mb-half">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~critical">R</span> indicates changes require a restart.</aside> 
                             <span class="button ~neutral !low settings-section-button mb-half" id="setting-about">About</span>
+                            <span class="button ~neutral !low settings-section-button mb-half selected">User Profiles</span>
+                        </div>
+                        <div class="card ~neutral !normal col">
+                            <div class="settings-section">
+                                <p class="support lg mb-half">Settings section description.</p>
+                                <div class="setting">
+                                    <label class="label" for="settings-select">Select <span class="badge ~critical">R</span></label>
+                                    <div class="select ~neutral !normal mt-half">
+                                        <select id="settings-select">
+                                            <option>Option 1</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="setting">
+                                    <label class="label" for="settings-input">
+                                        Input <span class="badge ~critical">*</span>
+                                        <div class="tooltip right">
+                                            <i class="icon ri-information-line"></i>
+                                            <span class="content sm">An example tooltip.</span>
+                                        </div>
+                                    </label>
+                                    <input type="text" class="input ~neutral !normal mt-half" placeholder="Value">
+                                </div>
+                                <div class="setting">
+                                    <label class="switch settings">
+                                        <input type="checkbox" id="settings-check">
+                                        <span>Checkbox <span class="badge ~critical">R</span></span>
+                                    </label>
+                                </div>
+                            </div>
                         </div>
-                        <div class="card ~neutral !normal col" id="settings-panel"></div>
                     </div>
                 </div>
             </div>

main.go

@@ -48,7 +48,7 @@ type appContext struct {
 	config           *ini.File
 	configPath       string
 	configBasePath   string
-	configBase       settings
+	configBase       map[string]interface{}
 	dataPath         string
 	localPath        string
 	cssFile          string

models.go

@@ -127,32 +127,3 @@ type errorListDTO map[string]map[string]string
 
 type configDTO map[string]interface{}
 
-// Below are for sending config
-
-type meta struct {
-	Name        string `json:"name"`
-	Description string `json:"description"`
-}
-
-type setting struct {
-	Name            string      `json:"name"`
-	Description     string      `json:"description"`
-	Required        bool        `json:"required"`
-	RequiresRestart bool        `json:"requires_restart"`
-	Type            string      `json:"type"` // Type (string, number, bool, etc.)
-	Value           interface{} `json:"value"`
-	Options         []string    `json:"options,omitempty"`
-	DependsTrue     string      `json:"depends_true,omitempty"`  // If specified, this field is enabled when the specified bool setting is enabled.
-	DependsFalse    string      `json:"depends_false,omitempty"` // If specified, opposite behaviour of DependsTrue.
-}
-
-type section struct {
-	Meta     meta               `json:"meta"`
-	Order    []string           `json:"order"`
-	Settings map[string]setting `json:"settings"`
-}
-
-type settings struct {
-	Order    []string           `json:"order"`
-	Sections map[string]section `json:"sections"`
-}

ts/admin.ts

@@ -3,7 +3,6 @@ import { Modal } from "./modules/modal.js";
 import { Tabs } from "./modules/tabs.js";
 import { inviteList, createInvite } from "./modules/invites.js";
 import { accountsList } from "./modules/accounts.js";
-import { settingsList } from "./modules/settings.js";
 import { _post, notificationBox, whichAnimationEvent, toggleLoader } from "./modules/common.js";
 
 loadTheme();
@@ -43,8 +42,6 @@ var accounts = new accountsList();
 
 window.invites = new inviteList();
 
-var settings = new settingsList();
-
 window.notifications = new notificationBox(document.getElementById('notification-box') as HTMLDivElement, 5);
 
 /*const modifySettingsSource = function () {
@@ -62,9 +59,10 @@ window.notifications = new notificationBox(document.getElementById('notification
 
 // load tabs
 window.tabs = new Tabs();
-window.tabs.addTab("invitesTab");
+for (let tabID of ["invitesTab", "settingsTab"]) {
+    window.tabs.addTab(tabID);
+}
 window.tabs.addTab("accountsTab", null, accounts.reload);
-window.tabs.addTab("settingsTab", null, settings.reload);
 
 function login(username: string, password: string, run?: (state?: number) => void) {
     const req = new XMLHttpRequest();

ts/modules/settings.ts

@@ -1,478 +0,0 @@
-import { _get } from "../modules/common.js";
-
-interface settingsBoolEvent extends Event { 
-    detail: boolean;
-}
-
-interface Profile {
-    Admin: boolean;
-    LibraryAccess: string;
-    FromUser: string;
-}
-
-interface Meta {
-    name: string;
-    description: string;
-}
-
-interface Setting {
-    name: string;
-    description: string;
-    required: boolean;
-    requires_restart: boolean;
-    type: string;
-    value: string | boolean | number;
-    depends_true?: Setting;
-    depends_false?: Setting;
-
-    asElement: () => HTMLElement;
-    update: (s: Setting) => void;
-}
-
-class DOMInput {
-    protected _input: HTMLInputElement;
-    private _container: HTMLDivElement;
-    private _tooltip: HTMLDivElement;
-    private _required: HTMLSpanElement;
-    private _restart: HTMLSpanElement;
-
-    get name(): string { return this._container.querySelector("span.setting-label").textContent; }
-    set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
-
-    get description(): string { return this._tooltip.querySelector("span.content").textContent; } 
-    set description(d: string) {
-        const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
-        content.textContent = d;
-        if (d == "") {
-            this._tooltip.classList.add("unfocused");
-        } else {
-            this._tooltip.classList.remove("unfocused");
-        }
-    }
-
-    get required(): boolean { return this._required.classList.contains("badge"); }
-    set required(state: boolean) {
-        if (state) {
-            this._required.classList.add("badge", "~critical");
-            this._required.textContent = "*";
-        } else {
-            this._required.classList.remove("badge", "~critical");
-            this._required.textContent = "";
-        }
-    }
-    
-    get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
-    set requires_restart(state: boolean) {
-        if (state) {
-            this._restart.classList.add("badge", "~critical");
-            this._restart.textContent = "R";
-        } else {
-            this._restart.classList.remove("badge", "~critical");
-            this._restart.textContent = "";
-        }
-    }
-
-    constructor(inputType: string, setting: Setting, section: string) {
-        this._container = document.createElement("div");
-        this._container.classList.add("setting");
-        this._container.innerHTML = `
-        <label class="label">
-            <span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
-            <div class="setting-tooltip tooltip right unfocused">
-                <i class="icon ri-information-line"></i>
-                <span class="content sm"></span>
-            </div>
-            <input type="${inputType}" class="input ~neutral !normal mt-half">
-        </label>
-        `;
-        this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
-        this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
-        this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
-        this._input = this._container.querySelector("input[type=" + inputType + "]") as HTMLInputElement;
-        if (setting.depends_false || setting.depends_true) {
-            let dependant = setting.depends_true || setting.depends_false;
-            let state = true;
-            if (setting.depends_false) { state = false; }
-            document.addEventListener(`settings-${section}-${dependant}`, (event: settingsBoolEvent) => {
-                this._input.disabled = (event.detail !== state);
-            });
-        }
-        this.update(setting);
-    }
-
-    get value(): any { return this._input.value; }
-    set value(v: any) { this._input.value = v; }
-
-    update = (s: Setting) => {
-        this.name = s.name;
-        this.description = s.description;
-        this.required = s.required;
-        this.requires_restart = s.requires_restart;
-        this.value = s.value;
-    }
-    
-    asElement = (): HTMLDivElement => { return this._container; }
-}
-
-interface SText extends Setting {
-    value: string;
-}
-class DOMText extends DOMInput implements SText {
-    constructor(setting: Setting, section: string) { super("text", setting, section); }
-    type: string = "text";
-    get value(): string { return this._input.value }
-    set value(v: string) { this._input.value = v; }
-}
-
-interface SPassword extends Setting {
-    value: string;
-}
-class DOMPassword extends DOMInput implements SPassword {
-    constructor(setting: Setting, section: string) { super("password", setting, section); }
-    type: string = "password";
-    get value(): string { return this._input.value }
-    set value(v: string) { this._input.value = v; }
-}
-
-interface SEmail extends Setting {
-    value: string;
-}
-class DOMEmail extends DOMInput implements SEmail {
-    constructor(setting: Setting, section: string) { super("email", setting, section); }
-    type: string = "email";
-    get value(): string { return this._input.value }
-    set value(v: string) { this._input.value = v; }
-}
-
-interface SNumber extends Setting {
-    value: number;
-}
-class DOMNumber extends DOMInput implements SNumber {
-    constructor(setting: Setting, section: string) { super("number", setting, section); }
-    type: string = "number";
-    get value(): number { return +this._input.value; }
-    set value(v: number) { this._input.value = ""+v; }
-}
-
-interface SBool extends Setting {
-    value: boolean;
-}
-class DOMBool implements SBool {
-    protected _input: HTMLInputElement;
-    private _container: HTMLDivElement;
-    private _tooltip: HTMLDivElement;
-    private _required: HTMLSpanElement;
-    private _restart: HTMLSpanElement;
-    type: string = "bool";
-
-    get name(): string { return this._container.querySelector("span.setting-label").textContent; }
-    set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
-
-    get description(): string { return this._tooltip.querySelector("span.content").textContent; } 
-    set description(d: string) {
-        const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
-        content.textContent = d;
-        if (d == "") {
-            this._tooltip.classList.add("unfocused");
-        } else {
-            this._tooltip.classList.remove("unfocused");
-        }
-    }
-
-    get required(): boolean { return this._required.classList.contains("badge"); }
-    set required(state: boolean) {
-        if (state) {
-            this._required.classList.add("badge", "~critical");
-            this._required.textContent = "*";
-        } else {
-            this._required.classList.remove("badge", "~critical");
-            this._required.textContent = "";
-        }
-    }
-    
-    get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
-    set requires_restart(state: boolean) {
-        if (state) {
-            this._restart.classList.add("badge", "~critical");
-            this._restart.textContent = "R";
-        } else {
-            this._restart.classList.remove("badge", "~critical");
-            this._restart.textContent = "";
-        }
-    }
-    get value(): boolean { return this._input.checked; }
-    set value(state: boolean) { this._input.checked = state; }
-    constructor(setting: SBool, section: string, name: string) {
-        this._container = document.createElement("div");
-        this._container.classList.add("setting");
-        this._container.innerHTML = `
-        <label class="switch">
-            <input type="checkbox">
-            <span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
-            <div class="setting-tooltip tooltip right unfocused">
-                <i class="icon ri-information-line"></i>
-                <span class="content sm"></span>
-            </div>
-        </label>
-        `;
-        this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
-        this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
-        this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
-        this._input = this._container.querySelector("input[type=checkbox]") as HTMLInputElement;
-        const onValueChange = () => {
-            const event = new CustomEvent(`settings-${section}-${name}`, { "detail": this._input.checked })
-            document.dispatchEvent(event);
-        };
-        this._input.onchange = onValueChange;
-        document.addEventListener(`settings-loaded`, onValueChange);
-
-        if (setting.depends_false || setting.depends_true) {
-            let dependant = setting.depends_true || setting.depends_false;
-            let state = true;
-            if (setting.depends_false) { state = false; }
-            document.addEventListener(`settings-${section}-${dependant}`, (event: settingsBoolEvent) => {
-                this._input.disabled = (event.detail !== state);
-            });
-        }
-        this.update(setting);
-    }
-    update = (s: SBool) => {
-        this.name = s.name;
-        this.description = s.description;
-        this.required = s.required;
-        this.requires_restart = s.requires_restart;
-        this.value = s.value;
-    }
-    
-    asElement = (): HTMLDivElement => { return this._container; }
-}
-
-interface SSelect extends Setting {
-    options: string[];
-    value: string;
-}
-class DOMSelect implements SSelect {
-    protected _select: HTMLSelectElement;
-    private _container: HTMLDivElement;
-    private _tooltip: HTMLDivElement;
-    private _required: HTMLSpanElement;
-    private _restart: HTMLSpanElement;
-    private _options: string[];
-    type: string = "bool";
-
-    get name(): string { return this._container.querySelector("span.setting-label").textContent; }
-    set name(n: string) { this._container.querySelector("span.setting-label").textContent = n; }
-
-    get description(): string { return this._tooltip.querySelector("span.content").textContent; } 
-    set description(d: string) {
-        const content = this._tooltip.querySelector("span.content") as HTMLSpanElement;
-        content.textContent = d;
-        if (d == "") {
-            this._tooltip.classList.add("unfocused");
-        } else {
-            this._tooltip.classList.remove("unfocused");
-        }
-    }
-
-    get required(): boolean { return this._required.classList.contains("badge"); }
-    set required(state: boolean) {
-        if (state) {
-            this._required.classList.add("badge", "~critical");
-            this._required.textContent = "*";
-        } else {
-            this._required.classList.remove("badge", "~critical");
-            this._required.textContent = "";
-        }
-    }
-    
-    get requires_restart(): boolean { return this._restart.classList.contains("badge"); }
-    set requires_restart(state: boolean) {
-        if (state) {
-            this._restart.classList.add("badge", "~critical");
-            this._restart.textContent = "R";
-        } else {
-            this._restart.classList.remove("badge", "~critical");
-            this._restart.textContent = "";
-        }
-    }
-    get value(): string { return this._select.value; }
-    set value(v: string) { this._select.value = v; }
-
-    get options(): string[] { return this._options; }
-    set options(opt: string[]) {
-        this._options = opt;
-        let innerHTML = "";
-        for (let option of this._options) {
-            innerHTML += `<option value="${option}">${option}</option>`;
-        }
-        this._select.innerHTML = innerHTML;
-    }
-
-    constructor(setting: SSelect, section: string) {
-        this._options = [];
-        this._container = document.createElement("div");
-        this._container.classList.add("setting");
-        this._container.innerHTML = `
-        <label class="label">
-            <span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
-            <div class="setting-tooltip tooltip right unfocused">
-                <i class="icon ri-information-line"></i>
-                <span class="content sm"></span>
-            </div>
-            <div class="select ~neutral !normal mt-half">
-                <select class="settings-select"></select>
-            </div>
-        </label>
-        `;
-        this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
-        this._required = this._container.querySelector("span.setting-required") as HTMLSpanElement;
-        this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
-        this._select = this._container.querySelector("select.settings-select") as HTMLSelectElement;
-        if (setting.depends_false || setting.depends_true) {
-            let dependant = setting.depends_true || setting.depends_false;
-            let state = true;
-            if (setting.depends_false) { state = false; }
-            document.addEventListener(`settings-${section}-${dependant}`, (event: settingsBoolEvent) => {
-                this._input.disabled = (event.detail !== state);
-            });
-        }
-        this.update(setting);
-    }
-    update = (s: SSelect) => {
-        this.name = s.name;
-        this.description = s.description;
-        this.required = s.required;
-        this.requires_restart = s.requires_restart;
-        this.options = s.options;
-        this.value = s.value;
-    }
-
-    asElement = (): HTMLDivElement => { return this._container; }
-}
-
-interface Section {
-    meta: Meta;
-    order: string[];
-    settings: { [settingName: string]: Setting };
-}
-
-class sectionPanel {
-    private _section: HTMLDivElement;
-    private _settings: { [name: string]: Setting };
-    private _sectionName: string;
-
-    constructor(s: Section, sectionName: string) {
-        this._sectionName = sectionName;
-        this._settings = {};
-        this._section = document.createElement("div") as HTMLDivElement;
-        this._section.classList.add("settings-section", "unfocused");
-        this._section.innerHTML = `<p class="support lg mb-half">${s.meta.description}</p>`;
-        this.update(s);
-
-    }
-    update = (s: Section) => {
-        for (let name of s.order) {
-            let setting: Setting = s.settings[name];
-            if (name in this._settings) {
-                this._settings[name].update(setting);
-            } else {
-                switch (setting.type) {
-                    case "text":
-                        setting = new DOMText(setting, this._sectionName);
-                        break;
-                    case "password":
-                        setting = new DOMPassword(setting, this._sectionName);
-                        break;
-                    case "email":
-                        setting = new DOMEmail(setting, this._sectionName);
-                        break;
-                    case "number":
-                        setting = new DOMNumber(setting, this._sectionName);
-                        break;
-                    case "bool":
-                        setting = new DOMBool(setting as SBool, this._sectionName, name);
-                        break;
-                    case "select":
-                        setting = new DOMSelect(setting as SSelect, this._sectionName);
-                        break;
-                }
-                this._section.appendChild(setting.asElement());
-                this._settings[name] = setting;
-            }
-        }
-    }
-    
-    get visible(): boolean { return !this._section.classList.contains("unfocused"); }
-    set visible(s: boolean) {
-        if (s) {
-            this._section.classList.remove("unfocused");
-        } else {
-            this._section.classList.add("unfocused");
-        }
-    }
-
-    asElement = (): HTMLDivElement => { return this._section; }
-}
-
-        
-
-interface Settings {
-    order: string[];
-    sections: { [sectionName: string]: Section };
-}
-
-export class settingsList {
-    private _panel = document.getElementById("settings-panel") as HTMLDivElement;
-    private _sidebar = document.getElementById("settings-sidebar") as HTMLDivElement;
-    private _sections: { [name: string]: sectionPanel }
-    private _buttons: { [name: string]: HTMLSpanElement }
-
-    addSection = (name: string, s: Section) => {
-        const section = new sectionPanel(s, name);
-        this._sections[name] = section;
-        this._panel.appendChild(this._sections[name].asElement());
-        const button = document.createElement("span") as HTMLSpanElement;
-        button.classList.add("button", "~neutral", "!low", "settings-section-button", "mb-half");
-        button.textContent = s.meta.name;
-        button.onclick = () => { this._showPanel(name); };
-        this._buttons[name] = button;
-        this._sidebar.appendChild(this._buttons[name]);
-    }
-
-    private _showPanel = (name: string) => {
-        for (let n in this._sections) {
-            if (n == name) {
-                console.log("found", n);
-                this._sections[name].visible = true;
-                this._buttons[name].classList.add("selected");
-            } else {
-                this._sections[n].visible = false;
-                this._buttons[n].classList.remove("selected");
-            }
-        }
-    }
-
-    constructor() {
-        this._sections = {};
-        this._buttons = {};
-    }
-
-    reload = () => _get("/config", null, (req: XMLHttpRequest) => {
-        if (req.readyState == 4) {
-            if (req.status != 200) {
-                window.notifications.customError("settingsLoadError", "Failed to load settings.");
-                return;
-            }
-            let settings = req.response as Settings;
-            for (let name of settings.order) {
-                if (name in this._sections) {
-                    this._sections[name].update(settings.sections[name]);
-                } else {
-                    this.addSection(name, settings.sections[name]);
-                }
-            }
-            document.dispatchEvent(new CustomEvent("settings-loaded"));
-        }
-    })
-
-}