that major settings update you'll like

src/css/common.scss

@@ -73,6 +73,9 @@ body {
     scrollbar-face-color: #888;
     scrollbar-track-color: rgba(255, 255, 255, 0.1);
 
+    // Firefox
+    scrollbar-color: #cdd0d4 rgba(#000, 0.05);
+
     overflow: hidden;
     @include Text;
 

src/css/states/changelog.scss

@@ -1,5 +1,6 @@
 #state_ChangelogState {
     .content {
+        @include S(max-width, 800px);
         display: flex;
         flex-direction: column;
     }

src/css/states/settings.scss

@@ -1,89 +1,138 @@
 #state_SettingsState {
-    .content {
+    $colorCategoryButton: #393747;
-        .versionbar {
+    $colorCategoryButtonSelected: #5c5872;
-            @include S(margin-top, 20px);
+
-            @include SuperSmallText;
+    .container .content {
-            display: grid;
+        display: flex;
-            align-items: center;
+        overflow-y: scroll;
-            grid-template-columns: 1fr auto;
+
-            .buildVersion {
+        .categoryContainer {
-                display: flex;
+            width: 100%;
-                flex-direction: column;
+
-                color: #aaadaf;
+            .category {
+                display: none;
+
+                &.active {
+                    display: block;
+                }
+
+                .setting {
+                    @include S(padding, 10px);
+                    background: #eeeff5;
+                    @include S(border-radius, $globalBorderRadius);
+                    @include S(margin-bottom, 5px);
+
+                    label {
+                        text-transform: uppercase;
+                        @include Text;
+                    }
+
+                    .desc {
+                        @include S(margin-top, 5px);
+                        @include SuperSmallText;
+                        color: #aaadb2;
+                    }
+
+                    > .row {
+                        display: grid;
+                        align-items: center;
+                        grid-template-columns: 1fr auto;
+                    }
+
+                    &.disabled {
+                        // opacity: 0.3;
+                        pointer-events: none;
+                        * {
+                            pointer-events: none !important;
+                            cursor: default !important;
+                        }
+                        position: relative;
+                        .standaloneOnlyHint {
+                            @include PlainText;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            right: 0;
+                            bottom: 0;
+                            pointer-events: all;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            background: rgba(#fff, 0.5);
+                            text-transform: uppercase;
+                            color: $colorRedBright;
+                        }
+                    }
+
+                    .value.enum {
+                        background: #fff;
+                        @include PlainText;
+                        display: flex;
+                        align-items: flex-start;
+                        pointer-events: all;
+                        cursor: pointer;
+                        justify-content: center;
+                        @include S(min-width, 100px);
+                        @include S(border-radius, $globalBorderRadius);
+                        @include S(padding, 4px);
+                        @include S(padding-right, 15px);
+
+                        background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
+                            calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
+
+                        transition: background-color 0.12s ease-in-out;
+                        &:hover {
+                            background-color: #fafafa;
+                        }
+                    }
+                }
             }
         }
 
-        button.about {
+        .sidebar {
-            background-color: $colorGreenBright;
+            display: flex;
-        }
+            flex-direction: column;
+            @include S(min-width, 210px);
+            @include S(max-width, 320px);
+            width: 30%;
+            height: 100%;
+            position: sticky;
+            top: 0;
+            @include S(margin-left, 20px);
+            @include S(margin-right, 32px);
 
-        .setting {
+            .other {
-            @include S(padding, 10px);
+                margin-top: auto;
-            background: #eeeff5;
-            @include S(border-radius, $globalBorderRadius);
-            @include S(margin-bottom, 5px);
-
-            label {
-                text-transform: uppercase;
-                @include Text;
             }
 
-            .desc {
+            button {
-                @include S(margin-top, 5px);
+                @include S(margin-top, 4px);
+                width: calc(100% - #{D(20px)});
+                text-align: start;
+            }
+
+            button.categoryButton {
+                background-color: $colorCategoryButton;
+
+                &.active {
+                    background-color: $colorCategoryButtonSelected;
+                }
+            }
+
+            button.about {
+                background-color: $colorGreenBright;
+            }
+
+            .versionbar {
+                @include S(margin-top, 20px);
                 @include SuperSmallText;
-                color: #aaadb2;
-            }
-
-            > .row {
                 display: grid;
                 align-items: center;
                 grid-template-columns: 1fr auto;
-            }
+                .buildVersion {
-
-            &.disabled {
-                // opacity: 0.3;
-                pointer-events: none;
-                * {
-                    pointer-events: none !important;
-                    cursor: default !important;
-                }
-                position: relative;
-                .standaloneOnlyHint {
-                    @include PlainText;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    pointer-events: all;
                     display: flex;
-                    align-items: center;
+                    flex-direction: column;
-                    justify-content: center;
+                    color: #aaadaf;
-                    background: rgba(#fff, 0.5);
-                    text-transform: uppercase;
-                    color: $colorRedBright;
-                }
-            }
-
-            .value.enum {
-                background: #fff;
-                @include PlainText;
-                display: flex;
-                align-items: flex-start;
-                pointer-events: all;
-                cursor: pointer;
-                justify-content: center;
-                @include S(min-width, 100px);
-                @include S(border-radius, $globalBorderRadius);
-                @include S(padding, 4px);
-                @include S(padding-right, 15px);
-
-                background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
-                    calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
-
-                transition: background-color 0.12s ease-in-out;
-                &:hover {
-                    background-color: #fafafa;
                 }
             }
         }

src/css/textual_game_state.scss

@@ -1,24 +1,18 @@
 .gameState.textualState {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-rows: auto 1fr;
-    justify-content: center;
+    box-sizing: border-box;
-    align-items: center;
+    @include S(padding, 32px);
-    $padding: 15px;
+    height: 100vh;
-
-    .headerBar,
-    > .container .content {
-        @include S(width, 500px);
-    }
 
     .headerBar {
         display: flex;
-        align-items: center;
-        justify-content: flex-start;
 
         h1 {
-            display: flex;
+            display: grid;
-            pointer-events: all;
+            grid-template-columns: auto 1fr;
             align-items: center;
+            pointer-events: all;
             cursor: pointer;
             @include SuperHeading;
             text-transform: uppercase;
@@ -39,11 +33,17 @@
     }
 
     > .container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        overflow-y: auto;
+
         > .content {
+            width: 100%;
             background: #fff;
             @include S(border-radius, $globalBorderRadius);
             @include S(padding, 10px);
-            height: calc(80vh - #{D(60px)});
+            height: 100%;
             overflow-y: auto;
             box-sizing: border-box;
             pointer-events: all;

src/js/profile/application_settings.js

@@ -13,8 +13,14 @@ import { LANGUAGES } from "../languages";
 
 const logger = createLogger("application_settings");
 
-const categoryGame = "game";
+/**
-const categoryApp = "app";
+ * @enum {string}
+ */
+export const enumCategories = {
+    general: "general",
+    userInterface: "userInterface",
+    advanced: "advanced",
+};
 
 export const uiScales = [
     {
@@ -122,7 +128,7 @@ export const allApplicationSettings = [
         options: Object.keys(LANGUAGES),
         valueGetter: key => key,
         textGetter: key => LANGUAGES[key].name,
-        category: categoryApp,
+        category: enumCategories.general,
         restartRequired: true,
         changeCb: (app, id) => null,
         magicValue: "auto-detect",
@@ -132,7 +138,7 @@ export const allApplicationSettings = [
         options: uiScales.sort((a, b) => a.size - b.size),
         valueGetter: scale => scale.id,
         textGetter: scale => T.settings.labels.uiScale.scales[scale.id],
-        category: categoryApp,
+        category: enumCategories.userInterface,
         restartRequired: false,
         changeCb:
             /**
@@ -143,7 +149,7 @@ export const allApplicationSettings = [
 
     new BoolSetting(
         "fullscreen",
-        categoryApp,
+        enumCategories.general,
         /**
          * @param {Application} app
          */
@@ -157,7 +163,7 @@ export const allApplicationSettings = [
 
     new BoolSetting(
         "soundsMuted",
-        categoryApp,
+        enumCategories.general,
         /**
          * @param {Application} app
          */
@@ -165,7 +171,7 @@ export const allApplicationSettings = [
     ),
     new BoolSetting(
         "musicMuted",
-        categoryApp,
+        enumCategories.general,
         /**
          * @param {Application} app
          */
@@ -174,7 +180,7 @@ export const allApplicationSettings = [
 
     new BoolSetting(
         "enableColorBlindHelper",
-        categoryApp,
+        enumCategories.general,
         /**
          * @param {Application} app
          */
@@ -182,13 +188,13 @@ export const allApplicationSettings = [
     ),
 
     // GAME
-    new BoolSetting("offerHints", categoryGame, (app, value) => {}),
+    new BoolSetting("offerHints", enumCategories.userInterface, (app, value) => {}),
 
     new EnumSetting("theme", {
         options: Object.keys(THEMES),
         valueGetter: theme => theme,
         textGetter: theme => T.settings.labels.theme.themes[theme],
-        category: categoryGame,
+        category: enumCategories.userInterface,
         restartRequired: false,
         changeCb:
             /**
@@ -205,7 +211,7 @@ export const allApplicationSettings = [
         options: autosaveIntervals,
         valueGetter: interval => interval.id,
         textGetter: interval => T.settings.labels.autosaveInterval.intervals[interval.id],
-        category: categoryGame,
+        category: enumCategories.advanced,
         restartRequired: false,
         changeCb:
             /**
@@ -218,7 +224,7 @@ export const allApplicationSettings = [
         options: ["60", "100", "120", "144", "165", "250", G_IS_DEV ? "10" : "500"],
         valueGetter: rate => rate,
         textGetter: rate => rate + " Hz",
-        category: categoryGame,
+        category: enumCategories.advanced,
         restartRequired: false,
         changeCb: (app, id) => {},
         enabled: !IS_DEMO,
@@ -228,7 +234,7 @@ export const allApplicationSettings = [
         options: scrollWheelSensitivities.sort((a, b) => a.scale - b.scale),
         valueGetter: scale => scale.id,
         textGetter: scale => T.settings.labels.scrollWheelSensitivity.sensitivity[scale.id],
-        category: categoryGame,
+        category: enumCategories.advanced,
         restartRequired: false,
         changeCb:
             /**
@@ -241,17 +247,17 @@ export const allApplicationSettings = [
         options: movementSpeeds.sort((a, b) => a.multiplier - b.multiplier),
         valueGetter: multiplier => multiplier.id,
         textGetter: multiplier => T.settings.labels.movementSpeed.speeds[multiplier.id],
-        category: categoryGame,
+        category: enumCategories.advanced,
         restartRequired: false,
         changeCb: (app, id) => {},
     }),
 
-    new BoolSetting("alwaysMultiplace", categoryGame, (app, value) => {}),
+    new BoolSetting("alwaysMultiplace", enumCategories.userInterface, (app, value) => {}),
-    new BoolSetting("enableTunnelSmartplace", categoryGame, (app, value) => {}),
+    new BoolSetting("enableTunnelSmartplace", enumCategories.advanced, (app, value) => {}),
-    new BoolSetting("vignette", categoryGame, (app, value) => {}),
+    new BoolSetting("vignette", enumCategories.userInterface, (app, value) => {}),
-    new BoolSetting("compactBuildingInfo", categoryGame, (app, value) => {}),
+    new BoolSetting("compactBuildingInfo", enumCategories.userInterface, (app, value) => {}),
-    new BoolSetting("disableCutDeleteWarnings", categoryGame, (app, value) => {}),
+    new BoolSetting("disableCutDeleteWarnings", enumCategories.advanced, (app, value) => {}),
-    new BoolSetting("rotationByBuilding", categoryGame, (app, value) => {}),
+    new BoolSetting("rotationByBuilding", enumCategories.advanced, (app, value) => {}),
 ];
 
 export function getApplicationSettingById(id) {

src/js/states/settings.js

@@ -1,6 +1,6 @@
 import { TextualGameState } from "../core/textual_game_state";
 import { formatSecondsToTimeAgo } from "../core/utils";
-import { allApplicationSettings } from "../profile/application_settings";
+import { allApplicationSettings, enumCategories } from "../profile/application_settings";
 import { T } from "../translations";
 
 export class SettingsState extends TextualGameState {
@@ -15,50 +15,62 @@ export class SettingsState extends TextualGameState {
     getMainContentHTML() {
         return `
 
-            <div class="upperLinks">
+        <div class="sidebar">
-            ${
+            ${this.getCategoryButtonsHtml()}
-                this.app.platformWrapper.getSupportsKeyboard()
-                    ? `
-                        <button class="styledButton editKeybindings">${T.keybindings.title}</button>
-            `
-                    : ""
-            }
-            <button class="styledButton about">${T.about.title}</button>
 
-         </div>
+            <div class="other">
+                ${
+                    this.app.platformWrapper.getSupportsKeyboard()
+                        ? `<button class="styledButton editKeybindings">${T.keybindings.title}</button>`
+                        : ""
+                }
 
+                <button class="styledButton about">${T.about.title}</button>
 
-            ${this.getSettingsHtml()}
+                <div class="versionbar">
-            <div class="versionbar">
+                    <div class="buildVersion">${T.global.loading} ...</div>
-                <div class="buildVersion">${T.global.loading} ...</div>
+                </div>
             </div>
+        </div>
 
+        <div class="categoryContainer">
+            ${this.getSettingsHtml()}
+        </div>
 
         `;
     }
 
+    getCategoryButtonsHtml() {
+        return Object.keys(enumCategories)
+            .map(key => enumCategories[key])
+            .map(
+                category =>
+                    `
+                    <button class="styledButton categoryButton" data-category-btn="${category}">
+                        ${T.settings.categories[category]}
+                    </button>
+                    `
+            )
+            .join("");
+    }
+
     getSettingsHtml() {
-        let lastCategory = null;
+        const categoriesHTML = {};
-        let html = "";
+
+        Object.keys(enumCategories).forEach(key => {
+            const catName = enumCategories[key];
+            categoriesHTML[catName] = `<div class="category" data-category="${catName}">`;
+        });
+
         for (let i = 0; i < allApplicationSettings.length; ++i) {
             const setting = allApplicationSettings[i];
 
-            if (setting.categoryId !== lastCategory) {
+            categoriesHTML[setting.categoryId] += setting.getHtml();
-                lastCategory = setting.categoryId;
-                if (i !== 0) {
-                    html += "</div>";
-                }
-                html += `<strong class="categoryLabel">${T.settings.categories[lastCategory]}</strong>`;
-                html += "<div class='settingsContainer'>";
-            }
-
-            html += setting.getHtml();
-        }
-        if (lastCategory) {
-            html += "</div>";
         }
 
-        return html;
+        return Object.keys(categoriesHTML)
+            .map(k => categoriesHTML[k] + "</div>")
+            .join("");
     }
 
     renderBuildText() {
@@ -90,6 +102,28 @@ export class SettingsState extends TextualGameState {
         }
 
         this.initSettings();
+        this.initCategoryButtons();
+
+        this.htmlElement.querySelector(".category").classList.add("active");
+        this.htmlElement.querySelector(".categoryButton").classList.add("active");
+    }
+
+    setActiveCategory(category) {
+        const previousCategory = this.htmlElement.querySelector(".category.active");
+        const previousCategoryButton = this.htmlElement.querySelector(".categoryButton.active");
+
+        if (previousCategory.getAttribute("data-category") == category) {
+            return;
+        }
+
+        previousCategory.classList.remove("active");
+        previousCategoryButton.classList.remove("active");
+
+        const newCategory = this.htmlElement.querySelector("[data-category='" + category + "']");
+        const newCategoryButton = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
+
+        newCategory.classList.add("active");
+        newCategoryButton.classList.add("active");
     }
 
     initSettings() {
@@ -107,6 +141,20 @@ export class SettingsState extends TextualGameState {
         });
     }
 
+    initCategoryButtons() {
+        Object.keys(enumCategories).forEach(key => {
+            const category = enumCategories[key];
+            const button = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
+            this.trackClicks(
+                button,
+                () => {
+                    this.setActiveCategory(category);
+                },
+                { preventDefault: false }
+            );
+        });
+    }
+
     onAboutClicked() {
         this.moveToStateAddGoBack("AboutState");
     }

translations/base-en.yaml

@@ -647,8 +647,9 @@ storyRewards:
 settings:
     title: Settings
     categories:
-        game: Game
+        general: General
-        app: Application
+        userInterface: User Interface
+        advanced: Advanced
 
     versionBadges:
         dev: Development