web: move the language and theme selectors to the System section

The header carried the save button, the language selector and the theme
selector on every section, although the latter two are set once. They
now live in a Display card in the System section; the header keeps the
title, the unsaved-changes badge and Save to flash.

doc/support-multi-language.md

@@ -11,7 +11,7 @@ All translation logic lives at the top of `html/app.js`:
 - A `LANG` object with one sub-object per language (`en`, `ja`, `zh`)
 - Language auto-detection (browser language, overridden by the
   `rtl_lang` key in `localStorage`, which the language selector in the
-  page header writes)
+  System section writes)
 - `t(key, vars)` looks up a translated string; `{name}` placeholders in
   the string are replaced from `vars`, e.g. `t("v_del_q", {n: vid})`
 - `i18nApply()` applies the dictionary to the static markup once at load

html/app.js

@@ -6,7 +6,7 @@ nav_vlan:"VLANs",nav_l2:"MAC table",nav_mirror:"Mirroring",nav_lag:"LAG",nav_eee
 nav_bw:"Bandwidth",nav_system:"System",nav_fw:"Firmware",
 hdr_dirty:"unsaved changes",hdr_dirty_t:"Running config differs from startup config",
 hdr_save:"Save to flash",hdr_save_t:"Persist running configuration to flash",
-th_auto:"Theme: System",th_auto_sel:"Theme: System (Selenized)",th_light:"Light",th_dark:"Dark",
+th_auto:"System",th_auto_sel:"System (Selenized)",sy_display:"Display",sy_theme:"Theme",sy_display_note:"Stored in this browser only.",th_light:"Light",th_dark:"Dark",
 th_sel_light:"Selenized Light",th_sel_dark:"Selenized Dark",
 c_port:"Port",c_name:"Name",c_link:"Link",c_apply:"Apply",c_cancel:"Cancel",c_confirm:"Confirm",
 c_close:"Close",c_refresh:"Refresh",c_off:"off",c_offc:"Off",c_down:"down",c_on:"On",c_auto:"Auto",c_delete:"Delete",
@@ -117,7 +117,7 @@ nav_vlan:"VLAN",nav_l2:"MAC テーブル",nav_mirror:"ミラーリング",nav_la
 nav_bw:"帯域制限",nav_system:"システム",nav_fw:"ファームウェア",
 hdr_dirty:"未保存の変更",hdr_dirty_t:"実行中の設定が起動設定と異なります",
 hdr_save:"フラッシュに保存",hdr_save_t:"実行中の設定をフラッシュに書き込む",
-th_auto:"テーマ: システム",th_auto_sel:"テーマ: システム (Selenized)",th_light:"ライト",th_dark:"ダーク",
+th_auto:"システム",th_auto_sel:"システム (Selenized)",sy_display:"表示",sy_theme:"テーマ",sy_display_note:"このブラウザーにのみ保存されます。",th_light:"ライト",th_dark:"ダーク",
 th_sel_light:"Selenized ライト",th_sel_dark:"Selenized ダーク",
 c_port:"ポート",c_name:"名前",c_link:"リンク",c_apply:"適用",c_cancel:"キャンセル",c_confirm:"確認",
 c_close:"閉じる",c_refresh:"更新",c_off:"オフ",c_offc:"オフ",c_down:"リンクダウン",c_on:"オン",c_auto:"自動",c_delete:"削除",
@@ -228,7 +228,7 @@ nav_vlan:"VLAN",nav_l2:"MAC 表",nav_mirror:"端口镜像",nav_lag:"LAG",nav_eee
 nav_bw:"带宽限制",nav_system:"系统",nav_fw:"固件",
 hdr_dirty:"未保存的更改",hdr_dirty_t:"运行配置与启动配置不同",
 hdr_save:"保存到 Flash",hdr_save_t:"将运行配置写入 Flash",
-th_auto:"主题: 跟随系统",th_auto_sel:"主题: 跟随系统 (Selenized)",th_light:"浅色",th_dark:"深色",
+th_auto:"跟随系统",th_auto_sel:"跟随系统 (Selenized)",sy_display:"显示",sy_theme:"主题",sy_display_note:"仅保存在此浏览器中。",th_light:"浅色",th_dark:"深色",
 th_sel_light:"Selenized 浅色",th_sel_dark:"Selenized 深色",
 c_port:"端口",c_name:"名称",c_link:"链路",c_apply:"应用",c_cancel:"取消",c_confirm:"确认",
 c_close:"关闭",c_refresh:"刷新",c_off:"关",c_offc:"关",c_down:"未连接",c_on:"开",c_auto:"自动",c_delete:"删除",

html/index.html

@@ -181,7 +181,6 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
   main{padding:14px 12px 40px}
   #top{padding:8px 10px;gap:7px}
   #ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-  #themeSel{max-width:96px}
   #dirty{padding:2px 7px}
 }
 </style>
@@ -218,19 +217,6 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
     <span id="ttitle"></span>
     <span id="dirty" data-i18n="hdr_dirty" data-i18n-t="hdr_dirty_t">unsaved changes</span>
     <button class="ctl pri" id="saveBtn" data-i18n="hdr_save" data-i18n-t="hdr_save_t">Save to flash</button>
-    <select class="ctl" id="langSel" data-i18n-t="sy_lang">
-      <option value="en">English</option>
-      <option value="ja">日本語</option>
-      <option value="zh">中文</option>
-    </select>
-    <select class="ctl" id="themeSel">
-      <option value="auto" data-i18n="th_auto">Theme: System</option>
-      <option value="auto-sel" data-i18n="th_auto_sel">Theme: System (Selenized)</option>
-      <option value="light" data-i18n="th_light">Light</option>
-      <option value="dark" data-i18n="th_dark">Dark</option>
-      <option value="sel-light" data-i18n="th_sel_light">Selenized Light</option>
-      <option value="sel-dark" data-i18n="th_sel_dark">Selenized Dark</option>
-    </select>
   </header>
 
   <main>
@@ -404,6 +390,24 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
           </div>
           <pre class="cfg" id="sy-cout" style="margin-top:10px;min-height:70px;max-height:180px;overflow:auto"></pre>
         </div>
+        <div class="card"><h2 data-i18n="sy_display">Display</h2>
+          <label class="row"><span class="lb" data-i18n="sy_lang">Language</span>
+            <select class="in" id="langSel">
+              <option value="en">English</option>
+              <option value="ja">日本語</option>
+              <option value="zh">中文</option>
+            </select></label>
+          <label class="row"><span class="lb" data-i18n="sy_theme">Theme</span>
+            <select class="in" id="themeSel">
+              <option value="auto" data-i18n="th_auto">System</option>
+              <option value="auto-sel" data-i18n="th_auto_sel">System (Selenized)</option>
+              <option value="light" data-i18n="th_light">Light</option>
+              <option value="dark" data-i18n="th_dark">Dark</option>
+              <option value="sel-light" data-i18n="th_sel_light">Selenized Light</option>
+              <option value="sel-dark" data-i18n="th_sel_dark">Selenized Dark</option>
+            </select></label>
+          <p class="small mut" data-i18n="sy_display_note">Stored in this browser only.</p>
+        </div>
       </div>
       <div class="card" style="margin-top:16px"><h2><span data-i18n="sy_startup">Startup configuration</span>
         <span class="hint"><span id="cfgbytes"></span>, <span data-i18n="sy_replayed">replayed on every boot</span></span></h2>