feat: apply settings effects — font size, grid columns, hidden sessions, sort order

- terminal.js createTerminal(): read fontSize from localStorage 'muxplex.display',
  default 14, apply Math.min(storedFontSize, 12) mobile cap
- app.js renderGrid(): filter hidden sessions via _serverSettings.hidden_sessions,
  create visible array, apply alphabetical sort via localeCompare when sort_order is
  'alphabetical'; 'recent'/'manual' use server-provided order
- app.js renderSidebar(): apply same hidden sessions filter, use visible array
- app.js DOMContentLoaded: call loadServerSettings() after startPolling() in restoreState().then()
- tests: 13 new tests in test_frontend_js.py covering all spec requirements

Co-authored-by: Amplifier <amplifier@example.com>

muxplex/frontend/app.js

@@ -461,12 +461,16 @@ function renderSidebar(sessions, currentSession) {
   const list = $('sidebar-list');
   if (!list) return;
 
-  if (!sessions || sessions.length === 0) {
+  // Filter hidden sessions
+  const hiddenSessions = (_serverSettings && _serverSettings.hidden_sessions) || [];
+  const visible = (sessions || []).filter((s) => !hiddenSessions.includes(s.name));
+
+  if (visible.length === 0) {
     list.innerHTML = '<div class="sidebar-empty">No sessions</div>';
     return;
   }
 
-  list.innerHTML = sessions.map((session) => buildSidebarHTML(session, currentSession)).join('');
+  list.innerHTML = visible.map((session) => buildSidebarHTML(session, currentSession)).join('');
 
   // Bind click handlers on each sidebar item
   if (typeof list.querySelectorAll === 'function') {
@@ -590,7 +594,11 @@ function renderGrid(sessions) {
   const grid = $('session-grid');
   const emptyState = $('empty-state');
 
-  if (!sessions || sessions.length === 0) {
+  // Filter hidden sessions
+  const hiddenSessions = (_serverSettings && _serverSettings.hidden_sessions) || [];
+  const visible = (sessions || []).filter((s) => !hiddenSessions.includes(s.name));
+
+  if (visible.length === 0) {
     if (grid) grid.innerHTML = '';
     if (emptyState) emptyState.classList.remove('hidden');
     return;
@@ -598,8 +606,16 @@ function renderGrid(sessions) {
 
   if (emptyState) emptyState.classList.add('hidden');
 
+  // Apply sort order from server settings
+  const sortOrder = _serverSettings && _serverSettings.sort_order;
   const mobile = isMobile();
-  const ordered = mobile ? sortByPriority(sessions) : sessions;
+  let ordered;
+  if (sortOrder === 'alphabetical') {
+    ordered = visible.slice().sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+  } else {
+    // 'recent', 'manual', and default use server-provided order; priority sort on mobile
+    ordered = mobile ? sortByPriority(visible) : visible;
+  }
   const html = ordered.map((session, index) => buildTileHTML(session, index, mobile)).join('');
   if (grid) grid.innerHTML = html;
 
@@ -1569,6 +1585,7 @@ document.addEventListener('DOMContentLoaded', () => {
   restoreState()
     .then(() => {
       startPolling();
+      loadServerSettings();
       startHeartbeat();
       requestNotificationPermission();
       bindStaticEventListeners();

muxplex/frontend/terminal.js

@@ -140,11 +140,22 @@ function createTerminal() {
     _fitAddon = null;
   }
 
+  // Read font size from display settings (localStorage key 'muxplex.display')
+  var storedFontSize = 14;
+  try {
+    var raw = localStorage.getItem('muxplex.display');
+    if (raw) {
+      var parsed = JSON.parse(raw);
+      if (parsed && parsed.fontSize) storedFontSize = parsed.fontSize;
+    }
+  } catch (_) { /* use default 14 */ }
+
   const mobile = window.innerWidth < 600;
+  const fontSize = mobile ? Math.min(storedFontSize, 12) : storedFontSize;
 
   _term = new window.Terminal({
     cursorBlink: true,
-    fontSize: mobile ? 12 : 14,
+    fontSize: fontSize,
     fontFamily: "'SF Mono', 'Fira Code', Consolas, monospace",
     theme: {
       background: '#000000',