refactor: remove Compact view mode — keep Auto + Fit only

muxplex/frontend/app.js

@@ -143,7 +143,7 @@ const DISPLAY_DEFAULTS = {
   viewMode: 'auto',
 };
 
-var VIEW_MODES = ['auto', 'fit', 'compact'];
+var VIEW_MODES = ['auto', 'fit'];
 const NEW_SESSION_DEFAULT_TEMPLATE = 'tmux new-session -d -s {name}';
 const DELETE_SESSION_DEFAULT_TEMPLATE = 'tmux kill-session -t {name}';
 
@@ -653,9 +653,6 @@ function renderGrid(sessions) {
   if (currentMode === 'fit' && grid) {
     grid.classList.add('session-grid--fit');
     applyFitLayout(grid);
-  } else if (currentMode === 'compact' && grid) {
-    grid.classList.add('session-grid--compact');
-    grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(200px, 1fr))';
   }
 
 }
@@ -1137,7 +1134,7 @@ function applyFitLayout(grid) {
 }
 
 /**
- * Cycle the dashboard view mode: auto → fit → compact → auto.
+ * Cycle the dashboard view mode: auto → fit → auto.
  * Persists to localStorage and reapplies display settings.
  */
 function cycleViewMode() {
@@ -1176,7 +1173,7 @@ function applyDisplaySettings(ds) {
   var mode = ds.viewMode || 'auto';
 
   // Remove all mode classes
-  grid.classList.remove('session-grid--fit', 'session-grid--compact');
+  grid.classList.remove('session-grid--fit');
 
   // Reset any inline styles from previous fit calculation
   grid.style.removeProperty('grid-template-rows');
@@ -1195,11 +1192,6 @@ function applyDisplaySettings(ds) {
   } else if (mode === 'fit') {
     grid.classList.add('session-grid--fit');
     applyFitLayout(grid);
-
-  } else if (mode === 'compact') {
-    grid.classList.add('session-grid--compact');
-    // Use auto-fill but with smaller minmax for higher density
-    grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(200px, 1fr))';
   }
 }
 

muxplex/frontend/style.css

@@ -1372,18 +1372,9 @@ body {
 }
 
 /* ============================================================
-   Dashboard view modes — Compact and Fit
+   Dashboard view modes — Fit
    ============================================================ */
 
-/* Compact view — small tiles, high density */
-.session-grid--compact .session-tile {
-  height: 80px;
-}
-
-.session-grid--compact .tile-body {
-  height: 40px;
-}
-
 /* Fit view — tiles fill viewport, no scroll */
 .session-grid--fit {
   overflow: hidden;

muxplex/frontend/tests/test_app.mjs

@@ -2121,12 +2121,15 @@ test('bindStaticEventListeners wires delete template reset button', () => {
 
 // --- View mode cycling (Auto / Fit / Compact) ---
 
-test('app.js has VIEW_MODES array with auto, fit, compact', () => {
+test('app.js has VIEW_MODES array with auto and fit only (no compact)', () => {
   const source = fs.readFileSync(new URL('../app.js', import.meta.url), 'utf8');
   assert.ok(source.includes("'auto'"), "must include 'auto' mode");
   assert.ok(source.includes("'fit'"), "must include 'fit' mode");
-  assert.ok(source.includes("'compact'"), "must include 'compact' mode");
   assert.ok(source.includes('VIEW_MODES'), 'must define VIEW_MODES');
+  // Compact mode was removed — VIEW_MODES must only have two entries
+  const viewModesMatch = source.match(/var VIEW_MODES\s*=\s*\[([^\]]+)\]/);
+  assert.ok(viewModesMatch, 'VIEW_MODES array must be defined');
+  assert.ok(!viewModesMatch[1].includes("'compact'"), "VIEW_MODES must NOT include 'compact'");
 });
 
 test('app.js exports cycleViewMode function', () => {
@@ -2161,19 +2164,19 @@ test('applyDisplaySettings handles fit mode by adding session-grid--fit class',
   );
 });
 
-test('applyDisplaySettings handles compact mode by adding session-grid--compact class', () => {
+test('applyDisplaySettings does NOT handle compact mode (compact was removed)', () => {
   const source = fs.readFileSync(new URL('../app.js', import.meta.url), 'utf8');
   const fnStart = source.indexOf('function applyDisplaySettings(');
   assert.ok(fnStart !== -1, 'applyDisplaySettings must exist');
   const fnEnd = source.indexOf('\nfunction ', fnStart + 1);
   const fnBody = source.substring(fnStart, fnEnd > fnStart ? fnEnd : fnStart + 2000);
   assert.ok(
-    fnBody.includes('session-grid--compact'),
-    'applyDisplaySettings must apply session-grid--compact class for compact mode'
+    !fnBody.includes("'compact'"),
+    "applyDisplaySettings must NOT reference 'compact' mode — compact was removed"
   );
 });
 
-test('cycleViewMode cycles through auto -> fit -> compact -> auto', () => {
+test('cycleViewMode cycles through auto -> fit -> auto (two modes, compact removed)', () => {
   // Reset display settings to auto
   const ds = app.loadDisplaySettings();
   ds.viewMode = 'auto';
@@ -2184,15 +2187,10 @@ test('cycleViewMode cycles through auto -> fit -> compact -> auto', () => {
   const ds1 = app.loadDisplaySettings();
   assert.strictEqual(ds1.viewMode, 'fit', 'first cycle should go auto -> fit');
 
-  // Second cycle: fit -> compact
+  // Second cycle: fit -> auto (wraps, compact is gone)
   app.cycleViewMode();
   const ds2 = app.loadDisplaySettings();
-  assert.strictEqual(ds2.viewMode, 'compact', 'second cycle should go fit -> compact');
-
-  // Third cycle: compact -> auto
-  app.cycleViewMode();
-  const ds3 = app.loadDisplaySettings();
-  assert.strictEqual(ds3.viewMode, 'auto', 'third cycle should wrap compact -> auto');
+  assert.strictEqual(ds2.viewMode, 'auto', 'second cycle should wrap fit -> auto (only two modes)');
 });
 
 test('bindStaticEventListeners wires view-mode-btn click to cycleViewMode', () => {