feat(appearance): font size setting with Small/Default/Large toggle (closes #833)

* feat(appearance): font size setting with Small/Default/Large toggle Add a font size preference to the Appearance settings pane. Three options (12px/14px/16px) follow the same three-button visual pattern as the Theme picker. Closes #833. - static/style.css: :root[data-font-size=small|large] CSS overrides - static/index.html: boot script applies from localStorage before CSS renders (no FOUC); fontSizePickerGrid HTML in Appearance pane - static/boot.js: _applyFontSize(), _pickFontSize(), _syncFontSizePicker() - static/panels.js: loadSettingsPanel syncs picker on open; _revertSettingsPreview restores on discard - static/i18n.js: settings_label_font_size + font_size_{small,default,large} keys in all 6 locales (en, ru, es, de, zh, zh-Hant) - tests/test_font_size_setting.py: 14 new tests * fix(ui): remove duplicate font-size picker + correct CHANGELOG issue ref Two small fixes on the font size feature: 1. Duplicate HTML IDs — the picker block was injected into BOTH settingsPaneAppearance (correct, next to Theme/Skin) AND settingsPanePreferences (accidental copy-paste). Duplicate IDs #fontSizePickerGrid and #settingsFontSize violate HTML spec and break the _syncFontSizePicker visual sync which reads via document.querySelectorAll('#fontSizePickerGrid .font-size-pick-btn') — only the first grid would update its highlight, leaving the second stale. $('settingsFontSize') via getElementById also always returns the first match, so the second hidden input never reflected the user's choice. Removed the Preferences-pane copy. The Appearance-pane copy is the one the PR description describes and is the correct home for it (next to Theme and Skin). 2. CHANGELOG trailer said `Closes #830.` but #830 is the session-search autocomplete PR — this feature closes #833. Fixed. Added two regression tests: - test_font_size_picker_not_duplicated: asserts each ID appears exactly once in index.html. - test_font_size_picker_lives_in_appearance_pane: asserts the picker sits inside settingsPaneAppearance and not any other pane. Full suite: 1754 passed, 0 failures. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: nesquena-hermes <nesquena-hermes@users.noreply.github.com> Co-authored-by: Nathan Esquenazi <nesquena@gmail.com> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 22:52:45 -07:00
parent 1239129ae2
commit 24fc9d4155
7 changed files with 270 additions and 0 deletions
--- a/static/boot.js
+++ b/static/boot.js
@@ -721,6 +721,31 @@ function _syncSkinPicker(active){
  });
 }

+function _applyFontSize(size){
+  if(size&&size!=='default'){
+    document.documentElement.dataset.fontSize=size;
+  } else {
+    delete document.documentElement.dataset.fontSize;
+  }
+}
+
+function _pickFontSize(size){
+  localStorage.setItem('hermes-font-size',size);
+  _applyFontSize(size);
+  _syncFontSizePicker(size);
+  if(typeof _markSettingsDirty==='function') _markSettingsDirty();
+  const hidden=$('settingsFontSize');
+  if(hidden) hidden.value=size;
+}
+
+function _syncFontSizePicker(active){
+  document.querySelectorAll('#fontSizePickerGrid .font-size-pick-btn').forEach(btn=>{
+    const sel=btn.dataset.fontSizeVal===(active||'default');
+    btn.style.borderColor=sel?'var(--accent)':'var(--border2)';
+    btn.style.boxShadow=sel?'0 0 0 1px var(--accent-bg-strong)':'none';
+  });
+}
+
 function _buildSkinPicker(activeSkin){
  const grid=$('skinPickerGrid');
  if(!grid) return;
--- a/static/i18n.js
+++ b/static/i18n.js
@@ -192,6 +192,10 @@ const LOCALES = {
    settings_label_send_key: 'Send Key',
    settings_label_theme: 'Theme',
    settings_label_skin: 'Skin',
+    settings_label_font_size: 'Font size',
+    font_size_small: 'Small',
+    font_size_default: 'Default',
+    font_size_large: 'Large',
    settings_label_language: 'Language',
    settings_label_token_usage: 'Show token usage',
    settings_label_sidebar_density: 'Sidebar density',
@@ -575,6 +579,10 @@ const LOCALES = {
    model_search_placeholder: 'Поиск моделей…',
    reference_only_label: 'Только справка',
    settings_label_skin: 'Скин',
+    settings_label_font_size: 'Размер шрифта',
+    font_size_small: 'Маленький',
+    font_size_default: 'Стандарт',
+    font_size_large: 'Большой',
    workspace_empty_dir: 'Это рабочее пространство пусто.',
    workspace_empty_no_path: 'Рабочее пространство не выбрано. Настройте его в Настройки → Рабочее пространство.',
    available_personalities: 'Доступные личности:',
@@ -1084,6 +1092,10 @@ const LOCALES = {
    settings_label_send_key: 'Tecla de envío',
    settings_label_theme: 'Tema',
    settings_label_skin: 'Piel',
+    settings_label_font_size: 'Tamaño de fuente',
+    font_size_small: 'Pequeño',
+    font_size_default: 'Por defecto',
+    font_size_large: 'Grande',
    settings_label_language: 'Idioma',
    settings_label_token_usage: 'Mostrar uso de tokens',
    settings_label_sidebar_density: 'Densidad de la barra lateral',
@@ -1516,6 +1528,10 @@ const LOCALES = {
    settings_label_send_key: 'Sende-Taste',
    settings_label_theme: 'Theme',
    settings_label_skin: 'Skin',
+    settings_label_font_size: 'Font size',
+    font_size_small: 'Small',
+    font_size_default: 'Default',
+    font_size_large: 'Large',
    settings_label_language: 'Sprache',
    settings_label_token_usage: 'Token-Verbrauch anzeigen',
    settings_label_sidebar_density: 'Seitenleistendichte',
@@ -1749,6 +1765,10 @@ const LOCALES = {
    settings_label_send_key: '\u53d1\u9001\u5feb\u6377\u952e',
    settings_label_theme: '\u4e3b\u9898',
    settings_label_skin: '\u76ae\u80a4',
+    settings_label_font_size: '\u5b57\u4f53\u5927\u5c0f',
+    font_size_small: '\u5c0f',
+    font_size_default: '\u9ed8\u8ba4',
+    font_size_large: '\u5927',
    settings_label_language: '\u8bed\u8a00',
    settings_label_token_usage: '\u663e\u793a token \u7528\u91cf',
    settings_label_sidebar_density: '侧边栏密度',
@@ -2165,6 +2185,10 @@ const LOCALES = {
    settings_label_send_key: '\u767c\u9001\u5feb\u6377\u9375',
    settings_label_theme: '\u4e3b\u984c',
    settings_label_skin: '\u76ae\u819a',
+    settings_label_font_size: '\u5b57\u9ad4\u5927\u5c0f',
+    font_size_small: '\u5c0f',
+    font_size_default: '\u9810\u8a2d',
+    font_size_large: '\u5927',
    settings_label_language: '\u8a9d\u8a00',
    settings_label_token_usage: '\u986f\u793a token \u7528\u91cf',
    settings_label_sidebar_density: '側邊欄密度',
--- a/static/index.html
+++ b/static/index.html
@@ -10,6 +10,7 @@
 <!-- base href enables subpath mount support; all static paths must stay relative (no leading slash) -->
 <script>(function(){var p=location.pathname.endsWith('/')?location.pathname:(location.pathname.replace(/\/[^\/]*$/,'/')||'/');document.write('<base href="'+location.origin+p+'">');})()</script>
 <script>(function(){var themes={light:1,dark:1,system:1},skins={default:1,ares:1,mono:1,slate:1,poseidon:1,sisyphus:1,charizard:1},legacy={slate:['dark','slate'],solarized:['dark','poseidon'],monokai:['dark','sisyphus'],nord:['dark','slate'],oled:['dark','default']},t=(localStorage.getItem('hermes-theme')||'dark').toLowerCase(),s=(localStorage.getItem('hermes-skin')||'').toLowerCase(),m=legacy[t],theme=m?m[0]:(themes[t]?t:'dark'),skin=skins[s]?s:(m?m[1]:'default');localStorage.setItem('hermes-theme',theme);localStorage.setItem('hermes-skin',skin);if(theme==='system')theme=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';if(theme==='dark')document.documentElement.classList.add('dark');if(skin!=='default')document.documentElement.dataset.skin=skin;})()</script>
+<script>(function(){var fs=localStorage.getItem('hermes-font-size');if(fs&&fs!=='default')document.documentElement.dataset.fontSize=fs;})()</script>
 <script>(function(){try{document.documentElement.dataset.workspacePanel=localStorage.getItem('hermes-webui-workspace-panel')==='open'?'open':'closed';}catch(e){document.documentElement.dataset.workspacePanel='closed';}})()</script>
 <link rel="stylesheet" href="static/style.css">
  <!-- KaTeX math rendering CSS (loaded eagerly to prevent layout shift) -->
@@ -512,6 +513,30 @@
              <div id="skinPickerGrid" style="display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px">
              </div>
              <input type="hidden" id="settingsSkin" value="default">
+            </div>
+                        <div class="settings-field">
+              <label data-i18n="settings_label_font_size">Font size</label>
+              <div id="fontSizePickerGrid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px">
+                <button type="button" data-font-size-val="small" onclick="_pickFontSize('small')" class="font-size-pick-btn" style="border:1px solid var(--border2);border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;background:none;transition:all .15s">
+                  <div style="width:100%;height:40px;border-radius:6px;background:var(--surface);border:1px solid var(--border);margin-bottom:6px;display:flex;align-items:center;justify-content:center">
+                    <span style="font-size:10px;font-weight:600;color:var(--muted)">Aa</span>
+                  </div>
+                  <span style="font-size:12px;font-weight:500;color:var(--text)" data-i18n="font_size_small">Small</span>
+                </button>
+                <button type="button" data-font-size-val="default" onclick="_pickFontSize('default')" class="font-size-pick-btn" style="border:1px solid var(--border2);border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;background:none;transition:all .15s">
+                  <div style="width:100%;height:40px;border-radius:6px;background:var(--surface);border:1px solid var(--border);margin-bottom:6px;display:flex;align-items:center;justify-content:center">
+                    <span style="font-size:13px;font-weight:600;color:var(--muted)">Aa</span>
+                  </div>
+                  <span style="font-size:12px;font-weight:500;color:var(--text)" data-i18n="font_size_default">Default</span>
+                </button>
+                <button type="button" data-font-size-val="large" onclick="_pickFontSize('large')" class="font-size-pick-btn" style="border:1px solid var(--border2);border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;background:none;transition:all .15s">
+                  <div style="width:100%;height:40px;border-radius:6px;background:var(--surface);border:1px solid var(--border);margin-bottom:6px;display:flex;align-items:center;justify-content:center">
+                    <span style="font-size:17px;font-weight:600;color:var(--muted)">Aa</span>
+                  </div>
+                  <span style="font-size:12px;font-weight:500;color:var(--text)" data-i18n="font_size_large">Large</span>
+                </button>
+              </div>
+              <input type="hidden" id="settingsFontSize" value="default">
            </div>
            <button class="sm-btn" onclick="saveSettings()" style="margin-top:12px;width:100%;padding:8px;font-weight:600" data-i18n="settings_save_btn">Save Settings</button>
          </div>
--- a/static/panels.js
+++ b/static/panels.js
@@ -1105,6 +1105,7 @@ document.addEventListener('drop',e=>{e.preventDefault();dragCounter=0;wrap.class
 let _settingsDirty = false;
 let _settingsThemeOnOpen = null; // track theme at open time for discard revert
 let _settingsSkinOnOpen = null; // track skin at open time for discard revert
+let _settingsFontSizeOnOpen = null; // track font size at open time for discard revert
 let _settingsHermesDefaultModelOnOpen = '';
 let _settingsSection = 'conversation';

@@ -1152,6 +1153,7 @@ function toggleSettings(){
    _settingsDirty = false;
    _settingsThemeOnOpen = localStorage.getItem('hermes-theme') || 'dark';
    _settingsSkinOnOpen = localStorage.getItem('hermes-skin') || 'default';
+    _settingsFontSizeOnOpen = localStorage.getItem('hermes-font-size') || 'default';
    _settingsSection = 'conversation';
    overlay.style.display='';
    loadSettingsPanel();
@@ -1196,6 +1198,10 @@ function _revertSettingsPreview(){
    localStorage.setItem('hermes-skin', _settingsSkinOnOpen);
    if(typeof _applySkin==='function') _applySkin(_settingsSkinOnOpen);
  }
+  if(_settingsFontSizeOnOpen){
+    localStorage.setItem('hermes-font-size', _settingsFontSizeOnOpen);
+    if(typeof _applyFontSize==='function') _applyFontSize(_settingsFontSizeOnOpen);
+  }
 }

 // Show the "Unsaved changes" bar inside the settings panel
@@ -1243,6 +1249,10 @@ async function loadSettingsPanel(){
    const skinSel=$('settingsSkin');
    if(skinSel) skinSel.value=skinVal;
    if(typeof _buildSkinPicker==='function') _buildSkinPicker(skinVal);
+    const fontSizeVal=localStorage.getItem('hermes-font-size')||'default';
+    const fontSizeSel=$('settingsFontSize');
+    if(fontSizeSel) fontSizeSel.value=fontSizeVal;
+    if(typeof _syncFontSizePicker==='function') _syncFontSizePicker(fontSizeVal);
    const resolvedLanguage=(typeof resolvePreferredLocale==='function')
      ? resolvePreferredLocale(settings.language, localStorage.getItem('hermes-lang'))
      : (settings.language || localStorage.getItem('hermes-lang') || 'en');
--- a/static/style.css
+++ b/static/style.css
@@ -11,6 +11,9 @@
    --error:#C62828;--success:#3D8B40;--warning:#E68A00;--info:#0288A8;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6;
  }
+  /* ── Font size modifiers ── */
+  :root[data-font-size="small"]{font-size:12px;}
+  :root[data-font-size="large"]{font-size:16px;}
  /* ── Dark mode — navy-black + gold accent matching Hermes terminal ── */
  :root.dark {
    --bg:#0D0D1A;--sidebar:#141425;--border:#2A2A45;--border2:rgba(255,255,255,0.14);