Add editor font size setting

Author: makermelissa-ai-assistant

js/common/settings.js

@@ -29,7 +29,7 @@ class SettingsDialog extends GenericModal {
             contentDiv.appendChild(label);
 
             const control = await this._createControl(setting);
-            control.value = settings[setting.key];
+            control.value = settings?.[setting.key] ?? setting.default;
             contentDiv.appendChild(control);
         }
 
@@ -40,7 +40,20 @@ class SettingsDialog extends GenericModal {
         let settings = {}
         for (const setting of this._settingsData) {
             const control = this._currentModal.querySelector(`#setting-${setting.key}`);
-            settings[setting.key] = control.value;
+            let value = control.value;
+            if (setting.type === 'number') {
+                value = Number.parseInt(value, 10);
+                if (Number.isNaN(value)) {
+                    value = setting.default;
+                }
+                if (setting.min !== undefined) {
+                    value = Math.max(value, setting.min);
+                }
+                if (setting.max !== undefined) {
+                    value = Math.min(value, setting.max);
+                }
+            }
+            settings[setting.key] = value;
         }
         this._returnValue(settings);
     }
@@ -56,6 +69,18 @@ class SettingsDialog extends GenericModal {
                 option.textContent = optionValue.charAt(0).toUpperCase() + optionValue.slice(1);
                 control.appendChild(option);
             }
+        } else if (settingData.type === 'number') {
+            control = document.createElement('input');
+            control.type = 'number';
+            if (settingData.min !== undefined) {
+                control.min = settingData.min;
+            }
+            if (settingData.max !== undefined) {
+                control.max = settingData.max;
+            }
+            if (settingData.step !== undefined) {
+                control.step = settingData.step;
+            }
         }
         control.id = `setting-${settingData.key}`;
 
@@ -70,7 +95,8 @@ class Settings {
     constructor() {
         // This will hold the layout/save data for the settings
         this._settingsData = [
-            { key: 'theme', type: 'select', label: 'Editor Theme', icon: 'palette', options: ['dark', 'light'], default: 'dark' }
+            { key: 'theme', type: 'select', label: 'Editor Theme', icon: 'palette', options: ['dark', 'light'], default: 'dark' },
+            { key: 'editorFontSize', type: 'number', label: 'Font Size', icon: 'text-height', min: 8, max: 48, step: 1, default: 16 }
         ];
         this._settings = {};
         this._loadSettings();
@@ -110,8 +136,9 @@ class Settings {
     }
 
     async showDialog() {
-        this._settings = await this._settingsDialog.open(this._settings);
-        if (this._settings) {
+        const updatedSettings = await this._settingsDialog.open(this._settings);
+        if (updatedSettings) {
+            this._settings = updatedSettings;
             this._saveSettings();
             return true;
         }

js/layout.js

@@ -151,7 +151,7 @@ function updatePageLayout(updateType) {
     }
 }
 
-function refitTerminal() {
+export function refitTerminal() {
     // Custom function to replace the terminal refit function as it was a bit buggy
 
     // Re-fitting the terminal requires a full re-layout of the DOM which can be tricky to time right.

js/script.js

@@ -29,7 +29,7 @@ import { Settings } from './common/settings.js';
 import { CONNTYPE } from './constants.js';
 import './layout.js'; // load for side effects only
 import { setupPlotterChart } from "./common/plotter.js";
-import { mainContent, showSerial } from './layout.js';
+import { mainContent, showSerial, refitTerminal } from './layout.js';
 import { registerPWA } from "./common/pwa.js";
 
 registerPWA();
@@ -68,6 +68,10 @@ const messageDialog = new MessageModal("message");
 const connectionType = new ButtonValueDialog("connection-type");
 const settings = new Settings();
 
+const DEFAULT_EDITOR_FONT_SIZE = 16;
+const MIN_EDITOR_FONT_SIZE = 8;
+const MAX_EDITOR_FONT_SIZE = 48;
+
 // localStorage key used to remember the most recently chosen backend
 // ("web" | "ble" | "usb"). When the user clicks Connect after a
 // disconnect, we prefer the last backend over re-prompting for one.
@@ -97,6 +101,23 @@ function rememberLastBackend(workflowType) {
 }
 
 const editorTheme = EditorView.theme({}, {dark: getCssVar('editor-theme-dark').trim() === '1'});
+const editorFontSizeCompartment = new Compartment();
+
+function getEditorFontSize() {
+    const fontSize = Number.parseInt(settings.getSetting('editorFontSize'), 10);
+    if (Number.isNaN(fontSize)) {
+        return DEFAULT_EDITOR_FONT_SIZE;
+    }
+    return Math.min(Math.max(fontSize, MIN_EDITOR_FONT_SIZE), MAX_EDITOR_FONT_SIZE);
+}
+
+function editorFontSizeTheme() {
+    return EditorView.theme({
+        "&": {
+            fontSize: `${getEditorFontSize()}px`,
+        },
+    });
+}
 
 // Map file extensions to a CodeMirror 6 language extension factory.
 // Anything not in this map falls back to plain text (no language plugin).
@@ -655,6 +676,7 @@ const baseEditorExtensions = [
     keymap.of(hotkeyMap),
     indentUnit.of("    "),
     editorTheme,
+    editorFontSizeCompartment.of(editorFontSizeTheme()),
     syntaxHighlighting(classHighlighter),
     EditorView.updateListener.of(onTextChange)
 ];
@@ -939,6 +961,7 @@ function getCssVar(varName) {
 
 async function setupXterm() {
     state.terminal = new Terminal({
+        fontSize: getEditorFontSize(),
         theme: {
             background: getCssVar('background-color'),
             foreground: getCssVar('terminal-text-color'),
@@ -999,13 +1022,18 @@ function applySettings() {
 
     // Apply to EditorView.theme dark parameter
     editor.darkTheme = getCssVar('editor-theme-dark').trim() === '1';
+    editor.dispatch({
+        effects: editorFontSizeCompartment.reconfigure(editorFontSizeTheme()),
+    });
 
     // Apply to xterm
     state.terminal.options.theme = {
         background: getCssVar('background-color'),
         foreground: getCssVar('terminal-text-color'),
         cursor: getCssVar('terminal-text-color'),
     };
+    state.terminal.options.fontSize = getEditorFontSize();
+    refitTerminal();
 
     debugMessageAnsi = null;
 

sass/layout/_layout.scss

@@ -155,15 +155,15 @@
     &.settings-dialog {
         #settings-content {
             padding-top: 10px;
-            display: flex;
-            justify-content: center;
+            display: grid;
+            grid-template-columns: max-content minmax(120px, 1fr);
+            gap: 12px 20px;
             align-items: center;
             min-width: 300px;
             label {
                 i {
                     margin-right: 3px;
                 }
-                margin-right: 20px;
                 white-space: nowrap;
             }
             input, select {