From 52973225be80fdbe0cb3f893c26f1b21cd579ff7 Mon Sep 17 00:00:00 2001
From: DXCanas <9877852+DXCanas@users.noreply.github.com>
Date: Sun, 12 Apr 2026 15:29:56 +0000
Subject: [PATCH 01/10] Add grid configuration to app state

- Add GridOrientationConfig and GridConfig types to store/types.ts
- Add gridConfig defaults (landscape: 4x2, portrait: 2x4) to appState.ts
- Update test fixtures to include the new gridConfig property

Co-authored-by: Abasz <32517724+Abasz@users.noreply.github.com>
---
 app/client/components/DashboardToolbar.test.ts |  6 +++++-
 app/client/components/SettingsDialog.test.ts   |  6 +++++-
 app/client/store/appState.ts                   |  6 +++++-
 app/client/store/types.ts                      | 13 ++++++++++++-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/app/client/components/DashboardToolbar.test.ts b/app/client/components/DashboardToolbar.test.ts
index a266ba5f85..b86b9aa599 100644
--- a/app/client/components/DashboardToolbar.test.ts
+++ b/app/client/components/DashboardToolbar.test.ts
@@ -20,7 +20,11 @@ function createToolbar (config: Partial<AppConfig> = {}): DashboardToolbar {
       showIcons: true,
       maxNumberOfTiles: 8,
       trueBlackTheme: false,
-      forceCurveDivisionMode: 0
+      forceCurveDivisionMode: 0,
+      gridConfig: {
+        landscape: { columns: 4, rows: 2 },
+        portrait: { columns: 2, rows: 4 }
+      }
     },
     ...config
   }
diff --git a/app/client/components/SettingsDialog.test.ts b/app/client/components/SettingsDialog.test.ts
index c9ed7db505..46e9971827 100644
--- a/app/client/components/SettingsDialog.test.ts
+++ b/app/client/components/SettingsDialog.test.ts
@@ -14,7 +14,11 @@ function createSettingsDialog (): SettingsDialog {
     showIcons: true,
     maxNumberOfTiles: 8,
     trueBlackTheme: false,
-    forceCurveDivisionMode: 0
+    forceCurveDivisionMode: 0,
+    gridConfig: {
+      landscape: { columns: 4, rows: 2 },
+      portrait: { columns: 2, rows: 4 }
+    }
   }
   return dialog
 }
diff --git a/app/client/store/appState.ts b/app/client/store/appState.ts
index 9e10a43652..be0aa37de2 100644
--- a/app/client/store/appState.ts
+++ b/app/client/store/appState.ts
@@ -53,7 +53,11 @@ export const APP_STATE: AppState = {
       showIcons: true,
       maxNumberOfTiles: 8,
       trueBlackTheme: false,
-      forceCurveDivisionMode: 0
+      forceCurveDivisionMode: 0,
+      gridConfig: {
+        landscape: { columns: 4, rows: 2 },
+        portrait: { columns: 2, rows: 4 }
+      }
     }
   }
 }
diff --git a/app/client/store/types.ts b/app/client/store/types.ts
index 09a79fcdc2..bdd540529e 100644
--- a/app/client/store/types.ts
+++ b/app/client/store/types.ts
@@ -105,12 +105,23 @@ export interface RowingMetrics {
   workout?: IntervalData
 }
 
+export interface GridOrientationConfig {
+  columns: number
+  rows: number
+}
+
+export interface GridConfig {
+  landscape: GridOrientationConfig
+  portrait: GridOrientationConfig
+}
+
 export interface GuiConfig {
   dashboardMetrics: string[]
   showIcons: boolean
   maxNumberOfTiles: number
   trueBlackTheme: boolean
   forceCurveDivisionMode: number
+  gridConfig: GridConfig
 }
 
 export interface AppConfig {
@@ -130,5 +141,5 @@ export interface AppState {
 export interface DashboardMetricDefinition {
   displayName: string
   size: number
-  template: (metrics: RowingMetrics, config?: AppConfig, onWorkoutOpen?: (type: string) => void) => TemplateResult
+  template: (metrics: RowingMetrics, config?: AppConfig, onWorkoutOpen?: (type: string) => void, slotContent?: TemplateResult | string) => TemplateResult
 }

From e74810b08564b3ff24504028c930120a47e3c5f0 Mon Sep 17 00:00:00 2001
From: DXCanas <9877852+DXCanas@users.noreply.github.com>
Date: Sun, 12 Apr 2026 15:31:20 +0000
Subject: [PATCH 02/10] Add slot support to dashboard metrics

Add slotContent parameter to all metric template functions in
dashboardMetrics.ts and the simpleMetricFactory helper. Restructure
DashboardMetric render to use CSS classes (with-icon) instead of inline
styles, and move slot inside the icon/label div.
Add :host positioning to BatteryIcon.
Add :host grid-column span and slot support to DashboardForceCurve.
Update DashboardMetric tests for new class-based rendering.

Co-authored-by: Abasz <32517724+Abasz@users.noreply.github.com>
---
 app/client/components/BatteryIcon.ts          |  6 ++
 app/client/components/DashboardForceCurve.ts  |  8 ++-
 app/client/components/DashboardMetric.test.ts | 14 ++---
 app/client/components/DashboardMetric.ts      | 21 ++++---
 app/client/store/dashboardMetrics.ts          | 63 +++++++++++--------
 5 files changed, 67 insertions(+), 45 deletions(-)

diff --git a/app/client/components/BatteryIcon.ts b/app/client/components/BatteryIcon.ts
index b129816551..1953df3055 100644
--- a/app/client/components/BatteryIcon.ts
+++ b/app/client/components/BatteryIcon.ts
@@ -10,6 +10,12 @@ import { customElement, property } from 'lit/decorators.js'
 @customElement('battery-icon')
 export class DashboardMetric extends AppElement {
   static styles = css`
+    :host {
+      right: 0.2em;
+      bottom: 0;
+      position: absolute;
+    }
+
     .icon {
       height: 1.2em;
     }
diff --git a/app/client/components/DashboardForceCurve.ts b/app/client/components/DashboardForceCurve.ts
index 6833d6b5f4..9337e73176 100644
--- a/app/client/components/DashboardForceCurve.ts
+++ b/app/client/components/DashboardForceCurve.ts
@@ -39,6 +39,7 @@ export class DashboardForceCurve extends AppElement {
     :host {
       display: block;
       position: relative;
+      grid-column: span 2;
     }
 
     .title {
@@ -181,7 +182,12 @@ export class DashboardForceCurve extends AppElement {
     return html`
       ${this._chart?.data.datasets[0].data.length ?
         '' :
-        html`<div class="title"> Force Curve </div>`
+        html`
+          <div class="title"> 
+            Force Curve 
+            <slot></slot>
+          </div>
+        `
       }
       <canvas @click="${this._handleClick}" id="chart"></canvas>
     `
diff --git a/app/client/components/DashboardMetric.test.ts b/app/client/components/DashboardMetric.test.ts
index a98e9a8ba1..f8d9ce9c51 100644
--- a/app/client/components/DashboardMetric.test.ts
+++ b/app/client/components/DashboardMetric.test.ts
@@ -24,21 +24,21 @@ describe('value display', () => {
 })
 
 describe('icon rendering', () => {
-  test('should use empty class strings when no icon is provided', () => {
+  test('should use label class when no icon is provided', () => {
     const el = new DashboardMetric()
     el.icon = ''
     const result = (el as any).render()
-    // When icon is '', the class is '' and font-size style is 200%
-    expect(result.values).toContain('font-size: 200%;')
+    // When icon is '', hasIcon is false, so the div class is 'label'
+    expect(result.values).toContain('label')
   })
 
-  test('should use label/icon classes when an icon is provided', () => {
+  test('should use icon class when an icon is provided', () => {
     const el = new DashboardMetric()
     el.icon = 'some-icon'
     const result = (el as any).render()
-    expect(result.values).toContain('label')
+    // When icon is not '', hasIcon is true, so the div class is 'icon'
     expect(result.values).toContain('icon')
-    // When icon is not '', there's no inline font-size override
-    expect(result.values).not.toContain('font-size: 200%;')
+    // metric-value gets 'with-icon' added via template interpolation
+    expect(result.values).toContain('with-icon')
   })
 })
diff --git a/app/client/components/DashboardMetric.ts b/app/client/components/DashboardMetric.ts
index ed3157e9c9..0131ac9958 100644
--- a/app/client/components/DashboardMetric.ts
+++ b/app/client/components/DashboardMetric.ts
@@ -22,14 +22,12 @@ export class DashboardMetric extends AppElement {
         font-size: 150%;
     }
 
-    .metric-unit {
-        font-size: 80%;
+    .metric-value.with-icon {
+        font-size: 200%;
     }
 
-    ::slotted(*) {
-      right: 0.2em;
-      bottom: 0;
-      position: absolute;
+    .metric-unit {
+        font-size: 80%;
     }
   `
 
@@ -43,15 +41,18 @@ export class DashboardMetric extends AppElement {
   value: string | number | undefined
 
   render () {
+    const hasIcon = this.icon !== ''
     return html`
-      <div class="${this.icon === '' ? '' : 'label'}">
-        <div class=${this.icon === '' ? '' : 'icon'}>${this.icon}</div>
+      <div class="${hasIcon ? 'icon' : 'label'}">
+        ${this.icon}
+        <slot></slot>
       </div>
       <div class="content">
-        <span class="metric-value" style="${this.icon === '' ? 'font-size: 200%;' : ''}">${this.value !== undefined ? this.value : '--'}</span>
+        <span class="metric-value ${hasIcon ? 'with-icon' : ''}">
+          ${this.value !== undefined ? this.value : '--'}
+        </span>
         <span class="metric-unit">${this.unit}</span>
       </div>
-      <slot></slot>
     `
   }
 }
diff --git a/app/client/store/dashboardMetrics.ts b/app/client/store/dashboardMetrics.ts
index f2a4204986..ef741f76ef 100644
--- a/app/client/store/dashboardMetrics.ts
+++ b/app/client/store/dashboardMetrics.ts
@@ -14,7 +14,7 @@ export const DASHBOARD_METRICS: Record<string, DashboardMetricDefinition> = {
   distance: {
     displayName: 'Distance',
     size: 1,
-    template: (metrics, config, onWorkoutOpen) => {
+    template: (metrics, config, onWorkoutOpen, slotContent = '') => {
       let distance
       switch (true) {
         case (metrics?.interval?.type === 'rest' && metrics?.pauseCountdownTime > 0):
@@ -34,31 +34,34 @@ export const DASHBOARD_METRICS: Record<string, DashboardMetricDefinition> = {
         .icon=${config?.guiConfigs?.showIcons ? iconRoute : ''}
         .unit=${linearDistance.unit}
         .value=${linearDistance.distance}
-      ></dashboard-metric>`
+      >
+        ${slotContent}
+      </dashboard-metric>`
     }
   },
 
-  pace: { displayName: 'Pace/500', size: 1, template: (metrics, config) => simpleMetricFactory(secondsToTimeString(metrics?.cyclePace), '/500m', config?.guiConfigs?.showIcons ? iconStopwatch : '') },
+  pace: { displayName: 'Pace/500', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(secondsToTimeString(metrics?.cyclePace), '/500m', config?.guiConfigs?.showIcons ? iconStopwatch : '', slotContent) },
 
-  power: { displayName: 'Power', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cyclePower), 'watt', config?.guiConfigs?.showIcons ? iconBolt : '') },
+  power: { displayName: 'Power', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(formatNumber(metrics?.cyclePower), 'watt', config?.guiConfigs?.showIcons ? iconBolt : '', slotContent) },
 
-  stkRate: { displayName: 'Stroke rate', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cycleStrokeRate), '/min', config?.guiConfigs?.showIcons ? iconPaddle : '') },
+  stkRate: { displayName: 'Stroke rate', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(formatNumber(metrics?.cycleStrokeRate), '/min', config?.guiConfigs?.showIcons ? iconPaddle : '', slotContent) },
   heartRate: {
     displayName: 'Heart rate',
     size: 1,
-    template: (metrics, config) => html`<dashboard-metric .icon=${config?.guiConfigs?.showIcons ? iconHeartbeat : ''} unit="bpm" .value=${formatNumber(metrics?.heartrate)}>
+    template: (metrics, config, _onWorkoutOpen, slotContent = '') => html`<dashboard-metric .icon=${config?.guiConfigs?.showIcons ? iconHeartbeat : ''} unit="bpm" .value=${formatNumber(metrics?.heartrate)}>
       ${(metrics?.heartRateBatteryLevel ?? 0) > 0 ?
         html`<battery-icon .batteryLevel=${metrics?.heartRateBatteryLevel}></battery-icon>` :
         ''}
+      ${slotContent}
     </dashboard-metric>`
   },
 
-  totalStk: { displayName: 'Total strokes', size: 1, template: (metrics, config) => simpleMetricFactory(metrics?.interval?.numberOfStrokes, 'stk', config?.guiConfigs?.showIcons ? iconPaddle : '') },
+  totalStk: { displayName: 'Total strokes', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(metrics?.interval?.numberOfStrokes, 'stk', config?.guiConfigs?.showIcons ? iconPaddle : '', slotContent) },
 
   calories: {
     displayName: 'Calories',
     size: 1,
-    template: (metrics, config, onWorkoutOpen) => {
+    template: (metrics, config, onWorkoutOpen, slotContent = '') => {
       const calories = metrics?.interval?.type === 'calories' ? Math.max(metrics?.interval?.calories?.toEnd ?? 0, 0) : Math.max(metrics?.interval?.calories?.sinceStart ?? 0, 0)
 
       return html`<dashboard-metric
@@ -67,14 +70,16 @@ export const DASHBOARD_METRICS: Record<string, DashboardMetricDefinition> = {
         .icon=${config?.guiConfigs?.showIcons ? iconFire : ''}
         .unit=${'kcal'}
         .value=${formatNumber(calories ?? 0)}
-      ></dashboard-metric>`
+      >
+        ${slotContent}
+      </dashboard-metric>`
     }
   },
 
   timer: {
     displayName: 'Timer',
     size: 1,
-    template: (metrics, config, onWorkoutOpen) => {
+    template: (metrics, config, onWorkoutOpen, slotContent = '') => {
       let time
       let icon
       switch (true) {
@@ -97,35 +102,38 @@ export const DASHBOARD_METRICS: Record<string, DashboardMetricDefinition> = {
         .icon=${config?.guiConfigs?.showIcons ? icon : ''}
         .unit=${''}
         .value=${secondsToTimeString(time ?? 0)}
-      ></dashboard-metric>`
+      >
+        ${slotContent}
+      </dashboard-metric>`
     }
   },
 
-  distancePerStk: { displayName: 'Dist per Stroke', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.cycleDistance, 1), 'm', config?.guiConfigs?.showIcons ? rowerIcon : '') },
+  distancePerStk: { displayName: 'Dist per Stroke', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(formatNumber(metrics?.cycleDistance, 1), 'm', config?.guiConfigs?.showIcons ? rowerIcon : '', slotContent) },
 
-  dragFactor: { displayName: 'Drag factor', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.dragFactor), '', config?.guiConfigs?.showIcons ? 'Drag' : '') },
+  dragFactor: { displayName: 'Drag factor', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(formatNumber(metrics?.dragFactor), '', config?.guiConfigs?.showIcons ? 'Drag' : '', slotContent) },
 
-  driveLength: { displayName: 'Drive length', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.driveLength, 2), 'm', config?.guiConfigs?.showIcons ? 'Drive' : '') },
+  driveLength: { displayName: 'Drive length', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(formatNumber(metrics?.driveLength, 2), 'm', config?.guiConfigs?.showIcons ? 'Drive' : '', slotContent) },
 
-  driveDuration: { displayName: 'Drive duration', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.driveDuration, 2), 'sec', config?.guiConfigs?.showIcons ? 'Drive' : '') },
+  driveDuration: { displayName: 'Drive duration', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(formatNumber(metrics?.driveDuration, 2), 'sec', config?.guiConfigs?.showIcons ? 'Drive' : '', slotContent) },
 
-  recoveryDuration: { displayName: 'Recovery duration', size: 1, template: (metrics, config) => simpleMetricFactory(formatNumber(metrics?.recoveryDuration, 2), 'sec', config?.guiConfigs?.showIcons ? 'Recovery' : '') },
+  recoveryDuration: { displayName: 'Recovery duration', size: 1, template: (metrics, config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(formatNumber(metrics?.recoveryDuration, 2), 'sec', config?.guiConfigs?.showIcons ? 'Recovery' : '', slotContent) },
 
-  forceCurve: { displayName: 'Force curve', size: 2, template: (metrics, config) => html`
+  forceCurve: { displayName: 'Force curve', size: 2, template: (metrics, config, _onWorkoutOpen, slotContent = '') => html`
     <dashboard-force-curve
       .updateForceCurve=${metrics.metricsContext?.isRecoveryStart}
       .value=${metrics?.driveHandleForceCurve}
       .divisionMode=${config?.guiConfigs?.forceCurveDivisionMode ?? 0}
-      style="grid-column: span 2"
-    ></dashboard-force-curve>
+    >
+      ${slotContent}
+    </dashboard-force-curve>
   ` },
 
-  peakForce: { displayName: 'Peak Force', size: 1, template: (metrics) => simpleMetricFactory(formatNumber(metrics?.drivePeakHandleForce), 'N', 'Peak Force') },
+  peakForce: { displayName: 'Peak Force', size: 1, template: (metrics, _config, _onWorkoutOpen, slotContent = '') => simpleMetricFactory(formatNumber(metrics?.drivePeakHandleForce), 'N', 'Peak Force', slotContent) },
 
   strokeRatio: {
     displayName: 'Stroke Ratio',
     size: 1,
-    template: (metrics) => {
+    template: (metrics, _config, _onWorkoutOpen, slotContent = '') => {
       // Check to make sure both values are truthy
       // no 0, null, or undefined
       const driveDuration = metrics?.driveDuration
@@ -138,17 +146,18 @@ export const DASHBOARD_METRICS: Record<string, DashboardMetricDefinition> = {
         ratio = undefined
       }
 
-      return simpleMetricFactory(ratio, '', 'Ratio')
+      return simpleMetricFactory(ratio, '', 'Ratio', slotContent)
     }
   }
 }
 
 /**
   * Helper function to create a simple metric tile
-  * @param {string | number} value The metric to show
-  * @param {string} unit The unit of the metric.
-  * @param {string | import('lit').TemplateResult<2>} icon The number of decimal places to round to (default: 0).
+  * @param value The metric to show
+  * @param unit The unit of the metric.
+  * @param icon The icon or label to display.
+  * @param slotContent Optional content to render inside the metric slot (e.g. retile controls).
 */
-function simpleMetricFactory (value: string | number | undefined = '--', unit = '', icon: string | TemplateResult = '') {
-  return html`<dashboard-metric .icon=${icon} .unit=${unit} .value=${value}></dashboard-metric>`
+function simpleMetricFactory (value: string | number | undefined = '--', unit = '', icon: string | TemplateResult = '', slotContent: TemplateResult | string = '') {
+  return html`<dashboard-metric .icon=${icon} .unit=${unit} .value=${value}>${slotContent}</dashboard-metric>`
 }

From 762324d52ed15eda22b0b864242d36269f147b3a Mon Sep 17 00:00:00 2001
From: DXCanas <9877852+DXCanas@users.noreply.github.com>
Date: Sun, 12 Apr 2026 15:32:37 +0000
Subject: [PATCH 03/10] Add retile mode to toolbar

- Add retile/submit toggle button with active state styling.
- Add reset-to-default button (visible only in retile mode).
- Move settings dialog ownership to parent via open-settings event.
- Add toggleRetileMode and resetToDefault methods that dispatch
  custom events for PerformanceDashboard to handle.

Co-authored-by: Abasz <32517724+Abasz@users.noreply.github.com>
---
 app/client/components/DashboardToolbar.ts | 42 ++++++++++++++++++++---
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/app/client/components/DashboardToolbar.ts b/app/client/components/DashboardToolbar.ts
index 04087ae30a..d8e30d90db 100644
--- a/app/client/components/DashboardToolbar.ts
+++ b/app/client/components/DashboardToolbar.ts
@@ -7,7 +7,6 @@
 import { AppElement, html, css, TemplateResult } from './AppElement'
 import { customElement, property, state } from 'lit/decorators.js'
 import { iconSettings, iconUndo, iconExpand, iconCompress, iconPoweroff, iconBluetooth, iconUpload, iconHeartbeat, iconAntplus } from '../lib/icons'
-import './SettingsDialog'
 import './AppDialog'
 import type { AppConfig } from '../store/types'
 
@@ -51,6 +50,11 @@ export class DashboardToolbar extends AppElement {
       filter: brightness(150%);
     }
 
+    button.active {
+      background: var(--theme-accent-color, #4a9eff);
+      filter: brightness(120%);
+    }
+
     button .text {
       position: absolute;
       left: 2px;
@@ -91,12 +95,25 @@ export class DashboardToolbar extends AppElement {
   @state()
   _dialog?: TemplateResult
 
+  @state()
+  _retileMode = false
+
   render () {
     return html`
       <div class="button-group">
         <button @click=${this.openSettings} title="Settings">
           ${iconSettings}
         </button>
+        <button @click=${this.toggleRetileMode} title="Retile Dashboard" class="${this._retileMode ? 'active' : ''}">
+          ${this._retileMode ? 'Submit' : 'Retile'}
+        </button>
+        ${this._retileMode
+          ? html`
+          <button @click=${this.resetToDefault} title="Reset to Default">
+            Reset
+          </button>
+        `
+          : ''}
         <button @click=${this.reset} title="Reset">
           ${iconUndo}
         </button>
@@ -179,9 +196,10 @@ export class DashboardToolbar extends AppElement {
   }
 
   openSettings () {
-    this._dialog = html`<settings-dialog .config=${this.config.guiConfigs} @close=${() => {
-      this._dialog = undefined
-    }}></settings-dialog>`
+    this.dispatchEvent(new CustomEvent('open-settings', {
+      bubbles: true,
+      composed: true
+    }))
   }
 
   toggleFullscreen () {
@@ -199,6 +217,22 @@ export class DashboardToolbar extends AppElement {
     this.sendEvent('triggerAction', { command: 'reset' })
   }
 
+  toggleRetileMode () {
+    this._retileMode = !this._retileMode
+    this.dispatchEvent(new CustomEvent('retile-mode-changed', {
+      bubbles: true,
+      composed: true,
+      detail: { active: this._retileMode }
+    }))
+  }
+
+  resetToDefault () {
+    this.dispatchEvent(new CustomEvent('reset-layout-to-default', {
+      bubbles: true,
+      composed: true
+    }))
+  }
+
   switchBlePeripheralMode () {
     this.sendEvent('triggerAction', { command: 'switchBlePeripheralMode' })
   }

From 56a55a5cebb407e0a5b36550668ee96f6fdc4cdd Mon Sep 17 00:00:00 2001
From: DXCanas <9877852+DXCanas@users.noreply.github.com>
Date: Sun, 12 Apr 2026 15:35:29 +0000
Subject: [PATCH 04/10] Implement retile mode in PerformanceDashboard

- Replace fixed grid layout with CSS custom properties (--grid-columns,
  --grid-rows) driven by gridConfig from app state.
- Add retile mode state management: local metrics copy on enter,
  save via changeGuiSetting on submit, reset-to-default support.
- Add metric controls (remove/replace dropdown) rendered as slot content.
- Add 'add tile' panel with available metrics filtered by remaining slots.
- Handle settings dialog and workout dialog from PerformanceDashboard.
- Use component factory pattern returning (slotContent) => TemplateResult
  to support both retile controls and normal rendering.

Co-authored-by: Abasz <32517724+Abasz@users.noreply.github.com>
---
 app/client/components/PerformanceDashboard.ts | 304 ++++++++++++++++--
 1 file changed, 278 insertions(+), 26 deletions(-)

diff --git a/app/client/components/PerformanceDashboard.ts b/app/client/components/PerformanceDashboard.ts
index 5abab45909..b4dbc85dc5 100644
--- a/app/client/components/PerformanceDashboard.ts
+++ b/app/client/components/PerformanceDashboard.ts
@@ -7,9 +7,11 @@
 import { AppElement, html, css, TemplateResult } from './AppElement'
 import { customElement, property, state } from 'lit/decorators.js'
 import './DashboardToolbar'
+import './SettingsDialog'
 import './WorkoutDialog'
 import { DASHBOARD_METRICS } from '../store/dashboardMetrics'
-import type { AppState } from '../store/types'
+import { APP_STATE } from '../store/appState'
+import type { AppState, GridOrientationConfig } from '../store/types'
 
 @customElement('performance-dashboard')
 export class PerformanceDashboard extends AppElement {
@@ -33,26 +35,11 @@ export class PerformanceDashboard extends AppElement {
       grid-area: metrics;
       display: grid;
       gap: 1vw;
-      grid-template-columns: repeat(4, 1fr);
-      grid-template-rows: repeat(2, 1fr);
+      grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
+      grid-template-rows: repeat(var(--grid-rows, 2), 1fr);
       min-height: 0; /* prevent grid blowout */
     }
 
-    .metrics-grid.rows-3 {
-      grid-template-rows: repeat(3, 1fr);
-    }
-
-    @media (orientation: portrait) {
-      .metrics-grid {
-        grid-template-columns: repeat(2, 1fr);
-        grid-template-rows: repeat(4, 1fr);
-      }
-
-      .metrics-grid.rows-3 {
-        grid-template-rows: repeat(6, 1fr);
-      }
-    }
-
     /* This should be defined within the component */
     dashboard-metric,
     dashboard-force-curve {
@@ -63,29 +50,279 @@ export class PerformanceDashboard extends AppElement {
       position: relative;
       min-height: 0; /* prevent grid blowout */
     }
+
+    .retile-controls {
+      display: flex;
+    }
+
+    .retile-select {
+      font-size: 0.4em;
+      background: var(--theme-button-color);
+      color: var(--theme-font-color);
+      cursor: pointer;
+      border: none;
+      border-radius: var(--theme-border-radius);
+    }
+
+    .add-tile {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      background: var(--theme-widget-color);
+      border: 2px dashed var(--theme-font-color);
+      border-radius: var(--theme-border-radius);
+      padding: 8px;
+      min-height: 80px;
+      max-height: 100%;
+      overflow-y: auto;
+    }
+
+    .add-tile.empty {
+      justify-content: center;
+      align-items: center;
+    }
+
+    .add-tile-message {
+      font-size: 0.6em;
+      color: var(--theme-font-color);
+      opacity: 0.7;
+    }
+
+    .add-tile-option {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-bottom: 4px;
+      width: 100%;
+    }
+
+    .add-tile-option input[type="radio"] {
+      cursor: pointer;
+      width: 1em;
+      height: 1em;
+      flex-shrink: 0;
+    }
+
+    .add-tile-option label {
+      cursor: pointer;
+      font-size: 0.5em;
+      -webkit-user-select: none;
+      user-select: none;
+      flex: 1;
+    }
   `
   @property({ type: Object })
   declare appState: AppState
 
   @state()
-  _dialog?: TemplateResult
+  _retileMode = false
+
+  @state()
+  _localMetrics: string[] | null = null
+
+  @state()
+  _dialog: TemplateResult | null = null
+
+  @state()
+  _columns = 4
+
+  @state()
+  _rows = 2
+
+  @state()
+  _maxGridSlots = 8
+
+  connectedCallback () {
+    super.connectedCallback()
+    this.addEventListener('retile-mode-changed', this._handleRetileModeChanged as EventListener)
+    this.addEventListener('reset-layout-to-default', this._handleResetToDefault)
+    this.addEventListener('open-settings', this._handleOpenSettings)
+  }
+
+  willUpdate (changedProperties: Map<string, unknown>) {
+    super.willUpdate(changedProperties)
+
+    if (changedProperties.has('appState')) {
+      const oldAppState = changedProperties.get('appState') as AppState | undefined
+      const oldGridConfig = oldAppState?.config?.guiConfigs?.gridConfig
+      const newGridConfig = this.appState?.config?.guiConfigs?.gridConfig
+
+      if (oldGridConfig !== newGridConfig) {
+        this._computeGridConfig()
+      }
+    }
+
+    if (changedProperties.has('_localMetrics') && this._localMetrics) {
+      let currentSlots = this._localMetrics.reduce((sum, key) => sum + (DASHBOARD_METRICS[key]?.size || 1), 0)
+
+      if (currentSlots > this._maxGridSlots) {
+        const newMetrics = [...this._localMetrics]
+        while (currentSlots > this._maxGridSlots && newMetrics.length > 0) {
+          const removed = newMetrics.pop()!
+          currentSlots -= (DASHBOARD_METRICS[removed]?.size || 1)
+        }
+        this._localMetrics = newMetrics
+      }
+    }
+  }
+
+  _computeGridConfig () {
+    const gridConfig = this.appState?.config?.guiConfigs?.gridConfig ?? APP_STATE.config.guiConfigs.gridConfig
+    const isPortrait = window.matchMedia('(orientation: portrait)').matches
+    const orientationConfig: GridOrientationConfig = isPortrait ? gridConfig.portrait : gridConfig.landscape
+
+    this._columns = orientationConfig.columns
+    this._rows = orientationConfig.rows
+    this._maxGridSlots = this._columns * this._rows
+  }
+
+  disconnectedCallback () {
+    super.disconnectedCallback()
+    this.removeEventListener('retile-mode-changed', this._handleRetileModeChanged as EventListener)
+    this.removeEventListener('reset-layout-to-default', this._handleResetToDefault)
+    this.removeEventListener('open-settings', this._handleOpenSettings)
+  }
+
+  _handleOpenSettings = () => {
+    this._dialog = html`
+      <settings-dialog
+        .config=${this.appState.config.guiConfigs}
+        .dashboardMetrics=${this.appState.config.guiConfigs.dashboardMetrics}
+        @close=${() => { this._dialog = null }}
+      ></settings-dialog>
+    `
+  }
 
   _handleWorkoutOpen = (type: string) => {
     this.sendEvent('workout-open', type)
     this._dialog = html`
       <workout-dialog
         .type=${type}
-        @close=${() => { this._dialog = undefined }}
+        @close=${() => { this._dialog = null }}
       ></workout-dialog>
     `
   }
 
+  _handleRetileModeChanged = (event: CustomEvent<{ active: boolean }>) => {
+    const wasActive = this._retileMode
+    this._retileMode = event.detail.active
+
+    if (this._retileMode && !wasActive) {
+      this._localMetrics = [...this.appState.config.guiConfigs.dashboardMetrics]
+    } else if (!this._retileMode && wasActive) {
+      if (this._localMetrics) {
+        this.sendEvent('changeGuiSetting', {
+          dashboardMetrics: this._localMetrics
+        })
+      }
+      this._localMetrics = null
+    }
+  }
+
+  _removeMetric = (index: number) => {
+    if (!this._localMetrics) { return }
+    const newMetrics = [...this._localMetrics]
+    newMetrics.splice(index, 1)
+    this._localMetrics = newMetrics
+  }
+
+  _handleResetToDefault = () => {
+    if (this._retileMode) {
+      this._localMetrics = [...APP_STATE.config.guiConfigs.dashboardMetrics]
+    }
+  }
+
+  _getAvailableMetrics (availableSlots = Infinity): string[] {
+    const currentSet = new Set(this._localMetrics ?? [])
+    return Object.keys(DASHBOARD_METRICS).filter((key) => {
+      if (currentSet.has(key)) { return false }
+      const metricSize = DASHBOARD_METRICS[key]?.size || 1
+      return metricSize <= availableSlots
+    })
+  }
+
+  _handleMetricAction = (index: number, value: string) => {
+    if (value === 'remove') {
+      this._removeMetric(index)
+    } else if (value) {
+      this._replaceMetricDirect(index, value)
+    }
+  }
+
+  _renderMetricWithControls (componentFactory: (slotContent?: TemplateResult | string) => TemplateResult, index: number, metricName: string, availableSlots: number): TemplateResult {
+    const currentMetricSize = DASHBOARD_METRICS[metricName]?.size || 1
+    const slotsIfReplaced = availableSlots + currentMetricSize
+    const availableMetrics = this._getAvailableMetrics(slotsIfReplaced)
+
+    const controls = html`
+      <div class="retile-controls">
+        <select
+          class="retile-select"
+          @change=${(e: Event) => this._handleMetricAction(index, (e.target as HTMLSelectElement).value)}
+          title="Tile Actions"
+        >
+          <option value="" disabled selected>Tile Actions</option>
+          <option value="remove">Remove</option>
+          <optgroup label="Replace With...">
+            ${availableMetrics.map((key) => html`
+              <option value=${key}>${DASHBOARD_METRICS[key].displayName}</option>
+            `)}
+          </optgroup>
+        </select>
+      </div>
+    `
+
+    return componentFactory(controls)
+  }
+
+  _renderAddTile (availableSlots: number): TemplateResult {
+    const availableMetrics = this._getAvailableMetrics(availableSlots)
+
+    if (availableMetrics.length === 0) {
+      return html`
+        <div class="add-tile empty">
+          <span class="add-tile-message">All metrics in use or won't fit</span>
+        </div>
+      `
+    }
+
+    return html`
+      <div class="add-tile">
+        ${availableMetrics.map((key) => html`
+          <div class="add-tile-option">
+            <input
+              type="radio"
+              name="add-metric"
+              id=${`add-${key}`}
+              value=${key}
+              @change=${() => this._addMetricDirect(key)}
+            />
+            <label for=${`add-${key}`}>${DASHBOARD_METRICS[key].displayName}</label>
+          </div>
+        `)}
+      </div>
+    `
+  }
+
+  _addMetricDirect = (metricKey: string) => {
+    if (!this._localMetrics || !metricKey) { return }
+    this._localMetrics = [...this._localMetrics, metricKey]
+  }
+
+  _replaceMetricDirect = (index: number, metricKey: string) => {
+    if (!this._localMetrics || !metricKey) { return }
+    const newMetrics = [...this._localMetrics]
+    newMetrics[index] = metricKey
+    this._localMetrics = newMetrics
+  }
+
   dashboardMetricComponentsFactory = (appState: AppState) => {
     const metrics = appState.metrics
     const configs = appState.config
 
-    const dashboardMetricComponents: Record<string, TemplateResult> = Object.keys(DASHBOARD_METRICS).reduce((dashboardMetrics: Record<string, TemplateResult>, key) => {
-      dashboardMetrics[key] = DASHBOARD_METRICS[key].template(metrics, configs, this._handleWorkoutOpen)
+    const dashboardMetricComponents: Record<string, (slotContent?: TemplateResult | string) => TemplateResult> = Object.keys(DASHBOARD_METRICS).reduce((dashboardMetrics: Record<string, (slotContent?: TemplateResult | string) => TemplateResult>, key) => {
+      dashboardMetrics[key] = (slotContent?: TemplateResult | string) => DASHBOARD_METRICS[key].template(metrics, configs, this._handleWorkoutOpen, slotContent)
 
       return dashboardMetrics
     }, {})
@@ -94,16 +331,31 @@ export class PerformanceDashboard extends AppElement {
   }
 
   render () {
-    const metricConfig = [...new Set(this.appState.config.guiConfigs.dashboardMetrics)].reduce((prev: TemplateResult[], metricName) => {
-      prev.push(this.dashboardMetricComponentsFactory(this.appState)[metricName])
+    const metrics = this._localMetrics ?? this.appState?.config?.guiConfigs?.dashboardMetrics ?? []
+    const uniqueMetrics = [...new Set(metrics)]
+    const currentGridSlots = uniqueMetrics.reduce((sum, key) => sum + (DASHBOARD_METRICS[key]?.size || 1), 0)
+    const availableSlots = this._maxGridSlots - currentGridSlots
+
+    const metricConfig = uniqueMetrics.reduce((prev: TemplateResult[], metricName, index) => {
+      const componentFactory = this.dashboardMetricComponentsFactory(this.appState)[metricName]
+      if (this._retileMode) {
+        prev.push(this._renderMetricWithControls(componentFactory, index, metricName, availableSlots))
+      } else {
+        prev.push(componentFactory())
+      }
       return prev
     }, [])
 
-    const gridClass = this.appState.config.guiConfigs.maxNumberOfTiles === 12 ? 'rows-3' : ''
+    if (this._retileMode && currentGridSlots < this._maxGridSlots) {
+      metricConfig.push(this._renderAddTile(availableSlots))
+    }
 
     return html`
       <dashboard-toolbar .config=${this.appState.config}></dashboard-toolbar>
-      <section class="metrics-grid ${gridClass}">${metricConfig}</section>
+      <section
+        class="metrics-grid"
+        style="--grid-columns: ${this._columns}; --grid-rows: ${this._rows};"
+      >${metricConfig}</section>
       ${this._dialog ? this._dialog : ''}
     `
   }

From 8afeba28e10ac79b978d7dce8f05bdc3ca87253c Mon Sep 17 00:00:00 2001
From: Abasz <32517724+Abasz@users.noreply.github.com>
Date: Sun, 12 Apr 2026 15:56:50 +0000
Subject: [PATCH 05/10] Fix retile dropdown cursor and click area

- Make cursor:pointer and @click on distance/calories/timer tiles
  conditional on onWorkoutOpen being defined (not shown in retile mode)
- Add stopPropagation to retile controls to prevent parent click handler
  from intercepting dropdown interactions
- Increase retile select padding and min-width for larger click area
- Add z-index to retile controls for reliable click targeting
---
 app/client/components/PerformanceDashboard.ts | 10 ++++++++--
 app/client/store/dashboardMetrics.ts          | 12 ++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/client/components/PerformanceDashboard.ts b/app/client/components/PerformanceDashboard.ts
index b4dbc85dc5..9c7b8b5b85 100644
--- a/app/client/components/PerformanceDashboard.ts
+++ b/app/client/components/PerformanceDashboard.ts
@@ -53,10 +53,14 @@ export class PerformanceDashboard extends AppElement {
 
     .retile-controls {
       display: flex;
+      position: relative;
+      z-index: 10;
     }
 
     .retile-select {
       font-size: 0.4em;
+      padding: 4px 8px;
+      min-width: 80px;
       background: var(--theme-button-color);
       color: var(--theme-font-color);
       cursor: pointer;
@@ -256,9 +260,10 @@ export class PerformanceDashboard extends AppElement {
     const availableMetrics = this._getAvailableMetrics(slotsIfReplaced)
 
     const controls = html`
-      <div class="retile-controls">
+      <div class="retile-controls" @click=${(e: Event) => e.stopPropagation()}>
         <select
           class="retile-select"
+          @click=${(e: Event) => e.stopPropagation()}
           @change=${(e: Event) => this._handleMetricAction(index, (e.target as HTMLSelectElement).value)}
           title="Tile Actions"
         >
@@ -320,9 +325,10 @@ export class PerformanceDashboard extends AppElement {
   dashboardMetricComponentsFactory = (appState: AppState) => {
     const metrics = appState.metrics
     const configs = appState.config
+    const workoutHandler = this._retileMode ? undefined : this._handleWorkoutOpen
 
     const dashboardMetricComponents: Record<string, (slotContent?: TemplateResult | string) => TemplateResult> = Object.keys(DASHBOARD_METRICS).reduce((dashboardMetrics: Record<string, (slotContent?: TemplateResult | string) => TemplateResult>, key) => {
-      dashboardMetrics[key] = (slotContent?: TemplateResult | string) => DASHBOARD_METRICS[key].template(metrics, configs, this._handleWorkoutOpen, slotContent)
+      dashboardMetrics[key] = (slotContent?: TemplateResult | string) => DASHBOARD_METRICS[key].template(metrics, configs, workoutHandler, slotContent)
 
       return dashboardMetrics
     }, {})
diff --git a/app/client/store/dashboardMetrics.ts b/app/client/store/dashboardMetrics.ts
index ef741f76ef..edd1003975 100644
--- a/app/client/store/dashboardMetrics.ts
+++ b/app/client/store/dashboardMetrics.ts
@@ -29,8 +29,8 @@ export const DASHBOARD_METRICS: Record<string, DashboardMetricDefinition> = {
       const linearDistance = formatDistance(distance ?? 0)
 
       return html`<dashboard-metric
-        style="cursor:pointer"
-        @click=${() => onWorkoutOpen?.('distance')}
+        style="${onWorkoutOpen ? 'cursor:pointer' : ''}"
+        @click=${onWorkoutOpen ? () => onWorkoutOpen('distance') : undefined}
         .icon=${config?.guiConfigs?.showIcons ? iconRoute : ''}
         .unit=${linearDistance.unit}
         .value=${linearDistance.distance}
@@ -65,8 +65,8 @@ export const DASHBOARD_METRICS: Record<string, DashboardMetricDefinition> = {
       const calories = metrics?.interval?.type === 'calories' ? Math.max(metrics?.interval?.calories?.toEnd ?? 0, 0) : Math.max(metrics?.interval?.calories?.sinceStart ?? 0, 0)
 
       return html`<dashboard-metric
-        style="cursor:pointer"
-        @click=${() => onWorkoutOpen?.('calories')}
+        style="${onWorkoutOpen ? 'cursor:pointer' : ''}"
+        @click=${onWorkoutOpen ? () => onWorkoutOpen('calories') : undefined}
         .icon=${config?.guiConfigs?.showIcons ? iconFire : ''}
         .unit=${'kcal'}
         .value=${formatNumber(calories ?? 0)}
@@ -97,8 +97,8 @@ export const DASHBOARD_METRICS: Record<string, DashboardMetricDefinition> = {
       }
 
       return html`<dashboard-metric
-        style="cursor:pointer"
-        @click=${() => onWorkoutOpen?.('time')}
+        style="${onWorkoutOpen ? 'cursor:pointer' : ''}"
+        @click=${onWorkoutOpen ? () => onWorkoutOpen('time') : undefined}
         .icon=${config?.guiConfigs?.showIcons ? icon : ''}
         .unit=${''}
         .value=${secondsToTimeString(time ?? 0)}

From 9b24948ca2d620d01e64a1f96c942ddf62a346ae Mon Sep 17 00:00:00 2001
From: Abasz <32517724+Abasz@users.noreply.github.com>
Date: Wed, 20 May 2026 08:36:14 +0000
Subject: [PATCH 06/10] Normalize retile button sizing in toolbar

The Retile/Submit and Reset text buttons were visually wider than the
square icon buttons, breaking visual consistency.

Key changes:
- Add button.label-button CSS variant with auto width and padding
- Apply label-button class to Retile/Submit and Reset buttons
- Remove permanent active/highlight class from Submit button
- Add unit tests for the changes
---
 .../components/DashboardToolbar.test.ts       | 45 +++++++++++++++++++
 app/client/components/DashboardToolbar.ts     | 17 ++++---
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/app/client/components/DashboardToolbar.test.ts b/app/client/components/DashboardToolbar.test.ts
index b86b9aa599..d73d3df816 100644
--- a/app/client/components/DashboardToolbar.test.ts
+++ b/app/client/components/DashboardToolbar.test.ts
@@ -96,3 +96,48 @@ describe('renderOptionalButtons', () => {
     expect(buttonsWithoutFullscreen.length).toBe(0)
   })
 })
+
+describe('retile button style', () => {
+  test('should default _retileMode to false', () => {
+    const toolbar = createToolbar()
+    expect(toolbar._retileMode).toBe(false)
+  })
+
+  test('should include label-button class on the retile toggle button', () => {
+    const toolbar = createToolbar()
+
+    const result = toolbar.render()
+
+    const staticParts = (result as unknown as { strings: readonly string[] }).strings.join('')
+    expect(staticParts).toContain('label-button')
+  })
+
+  test('should include label-button class on the submit button in retile mode', () => {
+    const toolbar = createToolbar()
+    toolbar._retileMode = true
+
+    const result = toolbar.render()
+
+    const staticParts = (result as unknown as { strings: readonly string[] }).strings.join('')
+    expect(staticParts).toContain('label-button')
+  })
+
+  test('should not include active class on the retile button in normal mode', () => {
+    const toolbar = createToolbar()
+
+    const result = toolbar.render()
+
+    const staticParts = (result as unknown as { strings: readonly string[] }).strings.join('')
+    expect(staticParts).not.toContain('active')
+  })
+
+  test('should not include active class on the submit button in retile mode', () => {
+    const toolbar = createToolbar()
+    toolbar._retileMode = true
+
+    const result = toolbar.render()
+
+    const staticParts = (result as unknown as { strings: readonly string[] }).strings.join('')
+    expect(staticParts).not.toContain('active')
+  })
+})
diff --git a/app/client/components/DashboardToolbar.ts b/app/client/components/DashboardToolbar.ts
index d8e30d90db..8f55511a05 100644
--- a/app/client/components/DashboardToolbar.ts
+++ b/app/client/components/DashboardToolbar.ts
@@ -55,6 +55,11 @@ export class DashboardToolbar extends AppElement {
       filter: brightness(120%);
     }
 
+    button.label-button {
+      width: auto;
+      padding: 0 0.6em;
+    }
+
     button .text {
       position: absolute;
       left: 2px;
@@ -104,16 +109,16 @@ export class DashboardToolbar extends AppElement {
         <button @click=${this.openSettings} title="Settings">
           ${iconSettings}
         </button>
-        <button @click=${this.toggleRetileMode} title="Retile Dashboard" class="${this._retileMode ? 'active' : ''}">
+        <button @click=${this.toggleRetileMode} title="Retile Dashboard" class="label-button">
           ${this._retileMode ? 'Submit' : 'Retile'}
         </button>
-        ${this._retileMode
-          ? html`
-          <button @click=${this.resetToDefault} title="Reset to Default">
+        ${this._retileMode ?
+          html`
+          <button @click=${this.resetToDefault} title="Reset to Default" class="label-button">
             Reset
           </button>
-        `
-          : ''}
+        ` :
+          ''}
         <button @click=${this.reset} title="Reset">
           ${iconUndo}
         </button>

From eaa8d0aacc2027e79933be73fe2940dfe16181ec Mon Sep 17 00:00:00 2001
From: Abasz <32517724+Abasz@users.noreply.github.com>
Date: Wed, 20 May 2026 09:33:52 +0000
Subject: [PATCH 07/10] Extract PerformanceDashboard styles

The component's inline css\` template was growing large and pushing the
file toward the 300-line lint limit. Moving styles to a dedicated module
keeps the component file concise and the styles easy to locate.

Key changes:
- Add PerformanceDashboard.styles.ts with performanceDashboardStyles
- Import and assign performanceDashboardStyles as static styles
- Remove css named import from AppElement in PerformanceDashboard.ts
---
 .../components/PerformanceDashboard.styles.ts | 109 ++++++++++++++++++
 app/client/components/PerformanceDashboard.ts | 104 +----------------
 2 files changed, 112 insertions(+), 101 deletions(-)
 create mode 100644 app/client/components/PerformanceDashboard.styles.ts

diff --git a/app/client/components/PerformanceDashboard.styles.ts b/app/client/components/PerformanceDashboard.styles.ts
new file mode 100644
index 0000000000..e5bbed2aec
--- /dev/null
+++ b/app/client/components/PerformanceDashboard.styles.ts
@@ -0,0 +1,109 @@
+/*
+  Open Rowing Monitor, https://github.com/JaapvanEkris/openrowingmonitor
+
+  Styles for the PerformanceDashboard component
+*/
+
+import { css } from './AppElement'
+
+export const performanceDashboardStyles = css`
+  :host {
+    display: grid;
+    grid-template:
+      "toolbar" auto
+      "metrics" 1fr
+      / 1fr;
+    height: 100vh;
+    gap: 1vw;
+    box-sizing: border-box;
+  }
+
+  dashboard-toolbar {
+    grid-area: toolbar;
+  }
+
+  .metrics-grid {
+    grid-area: metrics;
+    display: grid;
+    gap: 1vw;
+    grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
+    grid-template-rows: repeat(var(--grid-rows, 2), 1fr);
+    min-height: 0; /* prevent grid blowout */
+  }
+
+  /* This should be defined within the component */
+  dashboard-metric,
+  dashboard-force-curve {
+    background: var(--theme-widget-color);
+    text-align: center;
+    padding: 0.2em;
+    border-radius: var(--theme-border-radius);
+    position: relative;
+    min-height: 0; /* prevent grid blowout */
+  }
+
+  .retile-controls {
+    display: flex;
+    position: relative;
+    z-index: 10;
+  }
+
+  .retile-select {
+    font-size: 0.4em;
+    padding: 4px 8px;
+    min-width: 80px;
+    background: var(--theme-button-color);
+    color: var(--theme-font-color);
+    cursor: pointer;
+    border: none;
+    border-radius: var(--theme-border-radius);
+  }
+
+  .add-tile {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    background: var(--theme-widget-color);
+    border: 2px dashed var(--theme-font-color);
+    border-radius: var(--theme-border-radius);
+    padding: 8px;
+    min-height: 80px;
+    max-height: 100%;
+    overflow-y: auto;
+  }
+
+  .add-tile.empty {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .add-tile-message {
+    font-size: 0.6em;
+    color: var(--theme-font-color);
+    opacity: 0.7;
+  }
+
+  .add-tile-option {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 4px;
+    width: 100%;
+  }
+
+  .add-tile-option input[type="radio"] {
+    cursor: pointer;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+
+  .add-tile-option label {
+    cursor: pointer;
+    font-size: 0.5em;
+    -webkit-user-select: none;
+    user-select: none;
+    flex: 1;
+  }
+`
diff --git a/app/client/components/PerformanceDashboard.ts b/app/client/components/PerformanceDashboard.ts
index 9c7b8b5b85..944550514d 100644
--- a/app/client/components/PerformanceDashboard.ts
+++ b/app/client/components/PerformanceDashboard.ts
@@ -4,7 +4,8 @@
   Component that renders the dashboard
 */
 
-import { AppElement, html, css, TemplateResult } from './AppElement'
+import { AppElement, html, TemplateResult } from './AppElement'
+import { performanceDashboardStyles } from './PerformanceDashboard.styles'
 import { customElement, property, state } from 'lit/decorators.js'
 import './DashboardToolbar'
 import './SettingsDialog'
@@ -15,107 +16,8 @@ import type { AppState, GridOrientationConfig } from '../store/types'
 
 @customElement('performance-dashboard')
 export class PerformanceDashboard extends AppElement {
-  static styles = css`
-    :host {
-      display: grid;
-      grid-template:
-        "toolbar" auto
-        "metrics" 1fr
-        / 1fr;
-      height: 100vh;
-      gap: 1vw;
-      box-sizing: border-box;
-    }
-
-    dashboard-toolbar {
-      grid-area: toolbar;
-    }
-
-    .metrics-grid {
-      grid-area: metrics;
-      display: grid;
-      gap: 1vw;
-      grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
-      grid-template-rows: repeat(var(--grid-rows, 2), 1fr);
-      min-height: 0; /* prevent grid blowout */
-    }
-
-    /* This should be defined within the component */
-    dashboard-metric,
-    dashboard-force-curve {
-      background: var(--theme-widget-color);
-      text-align: center;
-      padding: 0.2em;
-      border-radius: var(--theme-border-radius);
-      position: relative;
-      min-height: 0; /* prevent grid blowout */
-    }
-
-    .retile-controls {
-      display: flex;
-      position: relative;
-      z-index: 10;
-    }
-
-    .retile-select {
-      font-size: 0.4em;
-      padding: 4px 8px;
-      min-width: 80px;
-      background: var(--theme-button-color);
-      color: var(--theme-font-color);
-      cursor: pointer;
-      border: none;
-      border-radius: var(--theme-border-radius);
-    }
+  static styles = performanceDashboardStyles
 
-    .add-tile {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      background: var(--theme-widget-color);
-      border: 2px dashed var(--theme-font-color);
-      border-radius: var(--theme-border-radius);
-      padding: 8px;
-      min-height: 80px;
-      max-height: 100%;
-      overflow-y: auto;
-    }
-
-    .add-tile.empty {
-      justify-content: center;
-      align-items: center;
-    }
-
-    .add-tile-message {
-      font-size: 0.6em;
-      color: var(--theme-font-color);
-      opacity: 0.7;
-    }
-
-    .add-tile-option {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      margin-bottom: 4px;
-      width: 100%;
-    }
-
-    .add-tile-option input[type="radio"] {
-      cursor: pointer;
-      width: 1em;
-      height: 1em;
-      flex-shrink: 0;
-    }
-
-    .add-tile-option label {
-      cursor: pointer;
-      font-size: 0.5em;
-      -webkit-user-select: none;
-      user-select: none;
-      flex: 1;
-    }
-  `
   @property({ type: Object })
   declare appState: AppState
 

From d9c353b52fd98db50382e20fe9e8e4d1175fb9cd Mon Sep 17 00:00:00 2001
From: Abasz <32517724+Abasz@users.noreply.github.com>
Date: Wed, 20 May 2026 09:35:54 +0000
Subject: [PATCH 08/10] Add per-orientation dashboard metric layouts

The dashboard now keeps independent tile layouts for landscape and
portrait orientations. Rotating the device loads the saved layout for
that orientation rather than sharing a single list.

Key changes:
- Rename dashboardMetrics to landscapeDashboardMetrics for symmetry
- Add portraitDashboardMetrics field to GuiConfig and app state defaults
- Migrate old dashboardMetrics key on first load and remove legacy key
- Seed portraitDashboardMetrics from landscape when never saved before
- Add _getOrientationMetrics() to pick the active orientation array
- Add orientation change listener to recompute grid and reload metrics
- Reload _localMetrics from the new orientation on rotation in retile
- Save to the correct orientation slot on Submit
- Simplify _getAvailableMetrics to slot-count-only filtering
---
 .../components/DashboardToolbar.test.ts       |   3 +-
 .../components/PerformanceDashboard.test.ts   | 100 +++++++++++++++++-
 app/client/components/PerformanceDashboard.ts |  47 ++++----
 app/client/components/SettingsDialog.test.ts  |   5 +-
 app/client/components/SettingsDialog.ts       |   4 +-
 app/client/index.test.ts                      |   2 +-
 app/client/index.ts                           |  25 ++++-
 app/client/store/appState.ts                  |   3 +-
 app/client/store/types.ts                     |   3 +-
 9 files changed, 158 insertions(+), 34 deletions(-)

diff --git a/app/client/components/DashboardToolbar.test.ts b/app/client/components/DashboardToolbar.test.ts
index d73d3df816..f9a6ff9684 100644
--- a/app/client/components/DashboardToolbar.test.ts
+++ b/app/client/components/DashboardToolbar.test.ts
@@ -16,7 +16,8 @@ function createToolbar (config: Partial<AppConfig> = {}): DashboardToolbar {
     uploadEnabled: false,
     shutdownEnabled: false,
     guiConfigs: {
-      dashboardMetrics: [],
+      landscapeDashboardMetrics: [],
+      portraitDashboardMetrics: [],
       showIcons: true,
       maxNumberOfTiles: 8,
       trueBlackTheme: false,
diff --git a/app/client/components/PerformanceDashboard.test.ts b/app/client/components/PerformanceDashboard.test.ts
index 1bc41f08cd..7f4f31cf1e 100644
--- a/app/client/components/PerformanceDashboard.test.ts
+++ b/app/client/components/PerformanceDashboard.test.ts
@@ -2,7 +2,7 @@
   Open Rowing Monitor, https://github.com/JaapvanEkris/openrowingmonitor
 */
 // @vitest-environment happy-dom
-import { test, expect, describe } from 'vitest'
+import { test, expect, describe, vi, beforeEach, afterEach } from 'vitest'
 
 import { PerformanceDashboard } from './PerformanceDashboard'
 import { DASHBOARD_METRICS } from '../store/dashboardMetrics'
@@ -39,3 +39,101 @@ describe('grid class', () => {
     expect(gridClass).toBe('')
   })
 })
+
+describe('_computeGridConfig', () => {
+  function mockMatchMedia (isPortrait: boolean) {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: isPortrait,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    } as unknown as MediaQueryList)
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('should set columns and rows from landscape config when not in portrait', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard.appState.config.guiConfigs.gridConfig = {
+      landscape: { columns: 5, rows: 3 },
+      portrait: { columns: 2, rows: 6 }
+    }
+    dashboard._computeGridConfig()
+    expect(dashboard._columns).toBe(5)
+    expect(dashboard._rows).toBe(3)
+    expect(dashboard._maxGridSlots).toBe(15)
+  })
+
+  test('should set columns and rows from portrait config when in portrait', () => {
+    mockMatchMedia(true)
+    const dashboard = createDashboard()
+    dashboard.appState.config.guiConfigs.gridConfig = {
+      landscape: { columns: 5, rows: 3 },
+      portrait: { columns: 2, rows: 6 }
+    }
+    dashboard._computeGridConfig()
+    expect(dashboard._columns).toBe(2)
+    expect(dashboard._rows).toBe(6)
+    expect(dashboard._maxGridSlots).toBe(12)
+  })
+})
+
+describe('orientation change listener', () => {
+  let addListenerSpy: ReturnType<typeof vi.fn>
+  let removeListenerSpy: ReturnType<typeof vi.fn>
+  let mockMql: MediaQueryList
+
+  beforeEach(() => {
+    addListenerSpy = vi.fn()
+    removeListenerSpy = vi.fn()
+    mockMql = {
+      matches: false,
+      addEventListener: addListenerSpy,
+      removeEventListener: removeListenerSpy
+    } as unknown as MediaQueryList
+    vi.spyOn(window, 'matchMedia').mockReturnValue(mockMql)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('should register an orientation change listener on connectedCallback', () => {
+    const dashboard = createDashboard()
+    dashboard.connectedCallback()
+    expect(addListenerSpy).toHaveBeenCalledWith('change', dashboard._handleOrientationChange)
+  })
+
+  test('should remove the orientation change listener on disconnectedCallback', () => {
+    const dashboard = createDashboard()
+    dashboard.connectedCallback()
+    dashboard.disconnectedCallback()
+    expect(removeListenerSpy).toHaveBeenCalledWith('change', dashboard._handleOrientationChange)
+  })
+})
+
+describe('_getAvailableMetrics', () => {
+  test('should exclude metrics already in the list', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = ['distance']
+    const result = dashboard._getAvailableMetrics()
+    expect(result).not.toContain('distance')
+  })
+
+  test('should exclude metrics whose size exceeds available slots', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = ['distance']
+    // availableSlots = 1, forceCurve has size 2 → should be excluded
+    const result = dashboard._getAvailableMetrics(1)
+    expect(result).not.toContain('forceCurve')
+  })
+
+  test('should include size-2 metrics when enough slots are available', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = ['distance', 'timer']
+    const result = dashboard._getAvailableMetrics(2)
+    expect(result).toContain('forceCurve')
+  })
+})
diff --git a/app/client/components/PerformanceDashboard.ts b/app/client/components/PerformanceDashboard.ts
index 944550514d..5ced58c310 100644
--- a/app/client/components/PerformanceDashboard.ts
+++ b/app/client/components/PerformanceDashboard.ts
@@ -39,11 +39,21 @@ export class PerformanceDashboard extends AppElement {
   @state()
   _maxGridSlots = 8
 
+  _orientationMediaQuery: MediaQueryList | null = null
+  _handleOrientationChange = () => {
+    this._computeGridConfig()
+    if (this._retileMode) {
+      this._localMetrics = this._getOrientationMetrics()
+    }
+  }
+
   connectedCallback () {
     super.connectedCallback()
     this.addEventListener('retile-mode-changed', this._handleRetileModeChanged as EventListener)
     this.addEventListener('reset-layout-to-default', this._handleResetToDefault)
     this.addEventListener('open-settings', this._handleOpenSettings)
+    this._orientationMediaQuery = window.matchMedia('(orientation: portrait)')
+    this._orientationMediaQuery.addEventListener('change', this._handleOrientationChange)
   }
 
   willUpdate (changedProperties: Map<string, unknown>) {
@@ -58,19 +68,6 @@ export class PerformanceDashboard extends AppElement {
         this._computeGridConfig()
       }
     }
-
-    if (changedProperties.has('_localMetrics') && this._localMetrics) {
-      let currentSlots = this._localMetrics.reduce((sum, key) => sum + (DASHBOARD_METRICS[key]?.size || 1), 0)
-
-      if (currentSlots > this._maxGridSlots) {
-        const newMetrics = [...this._localMetrics]
-        while (currentSlots > this._maxGridSlots && newMetrics.length > 0) {
-          const removed = newMetrics.pop()!
-          currentSlots -= (DASHBOARD_METRICS[removed]?.size || 1)
-        }
-        this._localMetrics = newMetrics
-      }
-    }
   }
 
   _computeGridConfig () {
@@ -83,18 +80,24 @@ export class PerformanceDashboard extends AppElement {
     this._maxGridSlots = this._columns * this._rows
   }
 
+  _getOrientationMetrics (): string[] {
+    const isPortrait = window.matchMedia('(orientation: portrait)').matches
+    const guiConfigs = this.appState?.config?.guiConfigs ?? APP_STATE.config.guiConfigs
+    return isPortrait ? guiConfigs.portraitDashboardMetrics : guiConfigs.landscapeDashboardMetrics
+  }
+
   disconnectedCallback () {
     super.disconnectedCallback()
     this.removeEventListener('retile-mode-changed', this._handleRetileModeChanged as EventListener)
     this.removeEventListener('reset-layout-to-default', this._handleResetToDefault)
     this.removeEventListener('open-settings', this._handleOpenSettings)
+    this._orientationMediaQuery?.removeEventListener('change', this._handleOrientationChange)
   }
 
   _handleOpenSettings = () => {
     this._dialog = html`
       <settings-dialog
         .config=${this.appState.config.guiConfigs}
-        .dashboardMetrics=${this.appState.config.guiConfigs.dashboardMetrics}
         @close=${() => { this._dialog = null }}
       ></settings-dialog>
     `
@@ -115,12 +118,12 @@ export class PerformanceDashboard extends AppElement {
     this._retileMode = event.detail.active
 
     if (this._retileMode && !wasActive) {
-      this._localMetrics = [...this.appState.config.guiConfigs.dashboardMetrics]
+      this._localMetrics = [...this._getOrientationMetrics()]
     } else if (!this._retileMode && wasActive) {
       if (this._localMetrics) {
-        this.sendEvent('changeGuiSetting', {
-          dashboardMetrics: this._localMetrics
-        })
+        const isPortrait = window.matchMedia('(orientation: portrait)').matches
+        const metricsKey = isPortrait ? 'portraitDashboardMetrics' : 'landscapeDashboardMetrics'
+        this.sendEvent('changeGuiSetting', { [metricsKey]: this._localMetrics })
       }
       this._localMetrics = null
     }
@@ -135,7 +138,11 @@ export class PerformanceDashboard extends AppElement {
 
   _handleResetToDefault = () => {
     if (this._retileMode) {
-      this._localMetrics = [...APP_STATE.config.guiConfigs.dashboardMetrics]
+      const isPortrait = window.matchMedia('(orientation: portrait)').matches
+      const defaultMetrics = APP_STATE.config.guiConfigs
+      this._localMetrics = isPortrait ?
+        [...defaultMetrics.portraitDashboardMetrics] :
+        [...defaultMetrics.landscapeDashboardMetrics]
     }
   }
 
@@ -239,7 +246,7 @@ export class PerformanceDashboard extends AppElement {
   }
 
   render () {
-    const metrics = this._localMetrics ?? this.appState?.config?.guiConfigs?.dashboardMetrics ?? []
+    const metrics = this._localMetrics ?? this._getOrientationMetrics()
     const uniqueMetrics = [...new Set(metrics)]
     const currentGridSlots = uniqueMetrics.reduce((sum, key) => sum + (DASHBOARD_METRICS[key]?.size || 1), 0)
     const availableSlots = this._maxGridSlots - currentGridSlots
diff --git a/app/client/components/SettingsDialog.test.ts b/app/client/components/SettingsDialog.test.ts
index 46e9971827..f2d0fcd41e 100644
--- a/app/client/components/SettingsDialog.test.ts
+++ b/app/client/components/SettingsDialog.test.ts
@@ -10,7 +10,8 @@ import { DashboardActions as SettingsDialog } from './SettingsDialog'
 function createSettingsDialog (): SettingsDialog {
   const dialog = new SettingsDialog()
   dialog.config = {
-    dashboardMetrics: [],
+    landscapeDashboardMetrics: [],
+    portraitDashboardMetrics: [],
     showIcons: true,
     maxNumberOfTiles: 8,
     trueBlackTheme: false,
@@ -85,7 +86,7 @@ describe('close', () => {
 
     expect(received).toBeDefined()
     expect(received!.detail).toEqual({
-      dashboardMetrics: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
+      landscapeDashboardMetrics: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
       showIcons: false,
       maxNumberOfTiles: 8,
       trueBlackTheme: true
diff --git a/app/client/components/SettingsDialog.ts b/app/client/components/SettingsDialog.ts
index 4dd9f0ef18..734eba6c4b 100644
--- a/app/client/components/SettingsDialog.ts
+++ b/app/client/components/SettingsDialog.ts
@@ -167,7 +167,7 @@ export class DashboardActions extends AppElement {
   }
 
   firstUpdated () {
-    this._selectedMetrics = [...this.config.dashboardMetrics]
+    this._selectedMetrics = [...this.config.landscapeDashboardMetrics]
     this._sumSelectedSlots = this._selectedMetrics.length
     this._showIcons = this.config.showIcons
     this._maxNumberOfTiles = this.config.maxNumberOfTiles
@@ -262,7 +262,7 @@ export class DashboardActions extends AppElement {
     this.dispatchEvent(new CustomEvent('close'))
     if (event.detail === 'confirm') {
       this.sendEvent('changeGuiSetting', {
-        dashboardMetrics: this._selectedMetrics,
+        landscapeDashboardMetrics: this._selectedMetrics,
         showIcons: this._showIcons,
         maxNumberOfTiles: this._maxNumberOfTiles,
         trueBlackTheme: this._trueBlackTheme
diff --git a/app/client/index.test.ts b/app/client/index.test.ts
index 66e27579d5..a23a0920c1 100644
--- a/app/client/index.test.ts
+++ b/app/client/index.test.ts
@@ -57,7 +57,7 @@ describe('dashboard metrics validation', () => {
     const state = app.getState()
     // unknownMetric and 'another' should be filtered out if they're not in DASHBOARD_METRICS
     // 'validPace' is also not a real key, so all should be filtered
-    const metrics = state.config.guiConfigs.dashboardMetrics
+    const metrics = state.config.guiConfigs.landscapeDashboardMetrics
     metrics.forEach((metric: string) => {
       // All remaining metrics should be valid (exist in DASHBOARD_METRICS)
       // rather than the invalid ones we injected
diff --git a/app/client/index.ts b/app/client/index.ts
index 57abf23269..0a3b28c735 100644
--- a/app/client/index.ts
+++ b/app/client/index.ts
@@ -34,19 +34,31 @@ export class App extends LitElement {
       // todo: we also want a mechanism here to get notified of state changes
     })
 
+    // Migrate old 'dashboardMetrics' localStorage key to 'landscapeDashboardMetrics'
+    const legacyLandscape = localStorage.getItem('dashboardMetrics')
+    if (legacyLandscape && !localStorage.getItem('landscapeDashboardMetrics')) {
+      localStorage.setItem('landscapeDashboardMetrics', legacyLandscape)
+      localStorage.removeItem('dashboardMetrics')
+    }
+
     const config = this._appState.config.guiConfigs
     const configKey = Object.keys(config) as (keyof GuiConfig)[]
     configKey.forEach((key) => {
       let savedValue = JSON.parse(localStorage.getItem(key) ?? 'null') as GuiConfig[typeof key] | undefined
 
-      // Validate dashboardMetrics against known valid keys
-      if (key === 'dashboardMetrics' && Array.isArray(savedValue)) {
+      // Validate metrics arrays against known valid keys
+      if ((key === 'landscapeDashboardMetrics' || key === 'portraitDashboardMetrics') && Array.isArray(savedValue)) {
         savedValue = savedValue.filter((metric: string) => DASHBOARD_METRICS[metric] !== undefined)
       }
 
       (config[key] as GuiConfig[typeof key]) = savedValue ?? config[key]
     })
 
+    // If portrait metrics have never been saved, seed them from the landscape layout
+    if (!localStorage.getItem('portraitDashboardMetrics')) {
+      config.portraitDashboardMetrics = [...config.landscapeDashboardMetrics]
+    }
+
     // apply theme based on saved preference
     this.applyTheme(config.trueBlackTheme)
 
@@ -66,9 +78,12 @@ export class App extends LitElement {
     this.addEventListener('changeGuiSetting', (event) => {
       const detail = { ...(event as CustomEvent).detail }
 
-      // Validate dashboardMetrics against known valid keys before saving
-      if (Array.isArray(detail.dashboardMetrics)) {
-        detail.dashboardMetrics = detail.dashboardMetrics.filter((metric: string) => DASHBOARD_METRICS[metric] !== undefined)
+      // Validate metrics arrays against known valid keys before saving
+      if (Array.isArray(detail.landscapeDashboardMetrics)) {
+        detail.landscapeDashboardMetrics = detail.landscapeDashboardMetrics.filter((metric: string) => DASHBOARD_METRICS[metric] !== undefined)
+      }
+      if (Array.isArray(detail.portraitDashboardMetrics)) {
+        detail.portraitDashboardMetrics = detail.portraitDashboardMetrics.filter((metric: string) => DASHBOARD_METRICS[metric] !== undefined)
       }
 
       Object.keys(detail).forEach((key) => {
diff --git a/app/client/store/appState.ts b/app/client/store/appState.ts
index be0aa37de2..1e7c40a360 100644
--- a/app/client/store/appState.ts
+++ b/app/client/store/appState.ts
@@ -49,7 +49,8 @@ export const APP_STATE: AppState = {
     // true if remote device shutdown is enabled
     shutdownEnabled: false,
     guiConfigs: {
-      dashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories'],
+      landscapeDashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories'],
+      portraitDashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories'],
       showIcons: true,
       maxNumberOfTiles: 8,
       trueBlackTheme: false,
diff --git a/app/client/store/types.ts b/app/client/store/types.ts
index bdd540529e..4e77426171 100644
--- a/app/client/store/types.ts
+++ b/app/client/store/types.ts
@@ -116,7 +116,8 @@ export interface GridConfig {
 }
 
 export interface GuiConfig {
-  dashboardMetrics: string[]
+  landscapeDashboardMetrics: string[]
+  portraitDashboardMetrics: string[]
   showIcons: boolean
   maxNumberOfTiles: number
   trueBlackTheme: boolean

From 7e96ad0f12c3bacfe60b6c42a01200eaa8314000 Mon Sep 17 00:00:00 2001
From: Abasz <32517724+Abasz@users.noreply.github.com>
Date: Wed, 20 May 2026 13:51:01 +0000
Subject: [PATCH 09/10] Refactor Settings dialog to single grid slider

Replace the dual landscape/portrait fieldsets and the metric selector UI
with one fieldset and a single slider pair. Portrait is always the
transpose of landscape (columns swap with rows).

Key changes:
- Remove maxNumberOfTiles from GuiConfig, appState and consumers
- Replace dual-fieldset grid UI with one orientation-aware fieldset
- Legend shows current orientation (landscape or portrait)
- Sliders show the active orientation's values and correct max limits
- Rotating while the dialog is open swaps columns/rows live
- close() derives the other orientation as the transpose
- Update SettingsDialog tests for orientation-aware behaviour
---
 .../components/DashboardToolbar.test.ts       |   1 -
 .../components/PerformanceDashboard.test.ts   |  16 --
 app/client/components/SettingsDialog.test.ts  | 184 ++++++++++---
 app/client/components/SettingsDialog.ts       | 244 +++++++-----------
 app/client/store/appState.ts                  |   1 -
 app/client/store/types.ts                     |   1 -
 6 files changed, 236 insertions(+), 211 deletions(-)

diff --git a/app/client/components/DashboardToolbar.test.ts b/app/client/components/DashboardToolbar.test.ts
index f9a6ff9684..780c9a9d2d 100644
--- a/app/client/components/DashboardToolbar.test.ts
+++ b/app/client/components/DashboardToolbar.test.ts
@@ -19,7 +19,6 @@ function createToolbar (config: Partial<AppConfig> = {}): DashboardToolbar {
       landscapeDashboardMetrics: [],
       portraitDashboardMetrics: [],
       showIcons: true,
-      maxNumberOfTiles: 8,
       trueBlackTheme: false,
       forceCurveDivisionMode: 0,
       gridConfig: {
diff --git a/app/client/components/PerformanceDashboard.test.ts b/app/client/components/PerformanceDashboard.test.ts
index 7f4f31cf1e..6b9c814298 100644
--- a/app/client/components/PerformanceDashboard.test.ts
+++ b/app/client/components/PerformanceDashboard.test.ts
@@ -24,22 +24,6 @@ describe('dashboardMetricComponentsFactory', () => {
   })
 })
 
-describe('grid class', () => {
-  test('should return "rows-3" when maxNumberOfTiles is 12', () => {
-    const dashboard = createDashboard()
-    dashboard.appState.config.guiConfigs.maxNumberOfTiles = 12
-    const gridClass = dashboard.appState.config.guiConfigs.maxNumberOfTiles === 12 ? 'rows-3' : ''
-    expect(gridClass).toBe('rows-3')
-  })
-
-  test('should return empty string when maxNumberOfTiles is 8', () => {
-    const dashboard = createDashboard()
-    dashboard.appState.config.guiConfigs.maxNumberOfTiles = 8
-    const gridClass = dashboard.appState.config.guiConfigs.maxNumberOfTiles === 12 ? 'rows-3' : ''
-    expect(gridClass).toBe('')
-  })
-})
-
 describe('_computeGridConfig', () => {
   function mockMatchMedia (isPortrait: boolean) {
     vi.spyOn(window, 'matchMedia').mockReturnValue({
diff --git a/app/client/components/SettingsDialog.test.ts b/app/client/components/SettingsDialog.test.ts
index f2d0fcd41e..f9b39551b9 100644
--- a/app/client/components/SettingsDialog.test.ts
+++ b/app/client/components/SettingsDialog.test.ts
@@ -2,18 +2,25 @@
   Open Rowing Monitor, https://github.com/JaapvanEkris/openrowingmonitor
 */
 // @vitest-environment happy-dom
-import { test, expect, describe } from 'vitest'
+import { test, expect, describe, vi, afterEach } from 'vitest'
 
 // The class is exported as DashboardActions (naming bug in source)
 import { DashboardActions as SettingsDialog } from './SettingsDialog'
 
+function mockMatchMedia (isPortrait: boolean) {
+  vi.spyOn(window, 'matchMedia').mockReturnValue({
+    matches: isPortrait,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  } as unknown as MediaQueryList)
+}
+
 function createSettingsDialog (): SettingsDialog {
   const dialog = new SettingsDialog()
   dialog.config = {
     landscapeDashboardMetrics: [],
     portraitDashboardMetrics: [],
     showIcons: true,
-    maxNumberOfTiles: 8,
     trueBlackTheme: false,
     forceCurveDivisionMode: 0,
     gridConfig: {
@@ -24,59 +31,53 @@ function createSettingsDialog (): SettingsDialog {
   return dialog
 }
 
-describe('isFormValid', () => {
-  test('should return true when slot count equals maxNumberOfTiles and no adjacent duplicates', () => {
-    const dialog = createSettingsDialog()
-    dialog._maxNumberOfTiles = 8
-    dialog._sumSelectedSlots = 8
-    dialog._selectedMetrics = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
-
-    expect(dialog.isFormValid()).toBe(true)
-  })
+afterEach(() => {
+  vi.restoreAllMocks()
+})
 
-  test('should return false when slot count does not equal maxNumberOfTiles', () => {
+describe('grid sliders', () => {
+  test('should initialise _columns and _rows from landscape config when in landscape', () => {
+    mockMatchMedia(false)
     const dialog = createSettingsDialog()
-    dialog._maxNumberOfTiles = 8
-    dialog._sumSelectedSlots = 6
-    dialog._selectedMetrics = ['a', 'b', 'c', 'd', 'e', 'f']
-
-    expect(dialog.isFormValid()).toBe(false)
+    dialog._columns = 4
+    dialog._rows = 2
+    expect(dialog._columns).toBe(4)
+    expect(dialog._rows).toBe(2)
   })
 
-  test('should return false when metrics at positions 3 and 4 are identical', () => {
+  test('should initialise _columns and _rows from portrait config when in portrait', () => {
+    mockMatchMedia(true)
     const dialog = createSettingsDialog()
-    dialog._maxNumberOfTiles = 8
-    dialog._sumSelectedSlots = 8
-    dialog._selectedMetrics = ['a', 'b', 'c', 'same', 'same', 'f', 'g', 'h']
-
-    expect(dialog.isFormValid()).toBe(false)
+    dialog._columns = 2
+    dialog._rows = 4
+    expect(dialog._columns).toBe(2)
+    expect(dialog._rows).toBe(4)
   })
 
-  test('should return false when metrics at positions 7 and 8 are identical', () => {
+  test('should swap _columns and _rows and update _isPortrait on orientation change', () => {
     const dialog = createSettingsDialog()
-    dialog._maxNumberOfTiles = 12
-    dialog._sumSelectedSlots = 12
-    dialog._selectedMetrics = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'same', 'same', 'j', 'k', 'l']
-
-    expect(dialog.isFormValid()).toBe(false)
-  })
+    dialog._columns = 4
+    dialog._rows = 2
+    dialog._isPortrait = false
 
-  test('should return true for 12 tiles with no adjacent duplicates at row boundaries', () => {
-    const dialog = createSettingsDialog()
-    dialog._maxNumberOfTiles = 12
-    dialog._sumSelectedSlots = 12
-    dialog._selectedMetrics = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l']
+    const event = new Event('change') as unknown as MediaQueryListEvent
+    Object.defineProperty(event, 'matches', { value: true })
+    dialog._handleOrientationChange(event)
 
-    expect(dialog.isFormValid()).toBe(true)
+    expect(dialog._columns).toBe(2)
+    expect(dialog._rows).toBe(4)
+    expect(dialog._isPortrait).toBe(true)
   })
 })
 
 describe('close', () => {
-  test('should dispatch changeGuiSetting with selected settings when confirmed', () => {
+  test('should save landscape and transposed portrait when confirmed in landscape', () => {
+    mockMatchMedia(false)
     const dialog = createSettingsDialog()
-    dialog._selectedMetrics = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
+    dialog._isPortrait = false
+    dialog._columns = 3
+    dialog._rows = 5
     dialog._showIcons = false
-    dialog._maxNumberOfTiles = 8
     dialog._trueBlackTheme = true
 
     let received: CustomEvent | undefined
@@ -84,16 +85,42 @@ describe('close', () => {
 
     dialog.close(new CustomEvent('close', { detail: 'confirm' }))
 
-    expect(received).toBeDefined()
     expect(received!.detail).toEqual({
-      landscapeDashboardMetrics: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
+      gridConfig: {
+        landscape: { columns: 3, rows: 5 },
+        portrait: { columns: 5, rows: 3 }
+      },
       showIcons: false,
-      maxNumberOfTiles: 8,
       trueBlackTheme: true
     })
   })
 
+  test('should save portrait and transposed landscape when confirmed in portrait', () => {
+    mockMatchMedia(true)
+    const dialog = createSettingsDialog()
+    dialog._isPortrait = true
+    dialog._columns = 2
+    dialog._rows = 4
+    dialog._showIcons = true
+    dialog._trueBlackTheme = false
+
+    let received: CustomEvent | undefined
+    dialog.addEventListener('changeGuiSetting', (e) => { received = e as CustomEvent })
+
+    dialog.close(new CustomEvent('close', { detail: 'confirm' }))
+
+    expect(received!.detail).toEqual({
+      gridConfig: {
+        landscape: { columns: 4, rows: 2 },
+        portrait: { columns: 2, rows: 4 }
+      },
+      showIcons: true,
+      trueBlackTheme: false
+    })
+  })
+
   test('should not dispatch changeGuiSetting when cancelled', () => {
+    mockMatchMedia(false)
     const dialog = createSettingsDialog()
     let received: CustomEvent | undefined
     dialog.addEventListener('changeGuiSetting', (e) => { received = e as CustomEvent })
@@ -103,3 +130,76 @@ describe('close', () => {
     expect(received).toBeUndefined()
   })
 })
+
+describe('toggleIcons', () => {
+  test('should set _showIcons to the checkbox checked state', () => {
+    const dialog = createSettingsDialog()
+    dialog._showIcons = true
+    const event = new Event('change')
+    Object.defineProperty(event, 'target', { value: { checked: false } })
+    dialog.toggleIcons(event)
+    expect(dialog._showIcons).toBe(false)
+  })
+})
+
+describe('toggleTrueBlackTheme', () => {
+  test('should set _trueBlackTheme to the checkbox checked state', () => {
+    const dialog = createSettingsDialog()
+    dialog._trueBlackTheme = false
+    const event = new Event('change')
+    Object.defineProperty(event, 'target', { value: { checked: true } })
+    dialog.toggleTrueBlackTheme(event)
+    expect(dialog._trueBlackTheme).toBe(true)
+  })
+})
+
+describe('render', () => {
+  test('should show landscape in legend when _isPortrait is false', () => {
+    const dialog = createSettingsDialog()
+    dialog._isPortrait = false
+    const result = dialog.render()
+    expect(result.values[3]).toBe('landscape')
+  })
+
+  test('should show portrait in legend when _isPortrait is true', () => {
+    const dialog = createSettingsDialog()
+    dialog._isPortrait = true
+    const result = dialog.render()
+    expect(result.values[3]).toBe('portrait')
+  })
+
+  test('should set columns max to 8 and rows max to 4 in landscape', () => {
+    const dialog = createSettingsDialog()
+    dialog._isPortrait = false
+    const result = dialog.render()
+    expect(result.values[5]).toBe('8')
+    expect(result.values[9]).toBe('4')
+  })
+
+  test('should set columns max to 4 and rows max to 8 in portrait', () => {
+    const dialog = createSettingsDialog()
+    dialog._isPortrait = true
+    const result = dialog.render()
+    expect(result.values[5]).toBe('4')
+    expect(result.values[9]).toBe('8')
+  })
+})
+
+describe('orientation change listener', () => {
+  test('should register orientation change listener in connectedCallback', () => {
+    mockMatchMedia(false)
+    const dialog = createSettingsDialog()
+    const mqList = window.matchMedia('(orientation: portrait)')
+    dialog.connectedCallback()
+    expect(mqList.addEventListener).toHaveBeenCalledWith('change', dialog._handleOrientationChange)
+  })
+
+  test('should remove orientation change listener in disconnectedCallback', () => {
+    mockMatchMedia(false)
+    const dialog = createSettingsDialog()
+    dialog.connectedCallback()
+    const mqList = window.matchMedia('(orientation: portrait)')
+    dialog.disconnectedCallback()
+    expect(mqList.removeEventListener).toHaveBeenCalledWith('change', dialog._handleOrientationChange)
+  })
+})
diff --git a/app/client/components/SettingsDialog.ts b/app/client/components/SettingsDialog.ts
index 734eba6c4b..91b1996c06 100644
--- a/app/client/components/SettingsDialog.ts
+++ b/app/client/components/SettingsDialog.ts
@@ -5,54 +5,57 @@
 */
 
 import { AppElement, html, css } from './AppElement'
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { iconSettings } from '../lib/icons'
 import './AppDialog'
-import { DASHBOARD_METRICS } from '../store/dashboardMetrics'
 import type { GuiConfig } from '../store/types'
 
 @customElement('settings-dialog')
 export class DashboardActions extends AppElement {
   static styles = css`
-    .metric-selector-feedback{
-      font-size: 0.5em;
-      padding-top: 8px;
-    }
-
-    .settings-dialog>div.metric-selector{
-      display: grid;
-      grid-template-columns: repeat(3,max-content);
-      gap: 8px;
+    .settings-dialog {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
     }
 
-    .experimental-settings {
+    .grid-config {
       display: flex;
       flex-direction: column;
+      gap: 4px;
     }
 
-    .experimental-settings label {
-      width: fit-content;
-      margin-top: 8px;
-      font-size: 0.7em;
+    .grid-config fieldset {
+      border: 1px solid var(--theme-font-color);
+      border-radius: var(--theme-border-radius);
+      padding: 6px 10px;
     }
 
-    .experimental-settings label>input {
-      font-size: 0.7em;
+    .grid-config legend {
+      font-size: 0.6em;
+      text-align: left;
     }
 
-    .settings-dialog>div>label{
+    .grid-config label {
+      display: flex;
+      flex-direction: column;
       font-size: 0.6em;
-      width: fit-content;
+      margin-top: 6px;
+    }
+
+    .grid-config input[type="range"] {
+      width: 100%;
+      cursor: pointer;
     }
 
-    input[type="checkbox"]{
+    input[type="checkbox"] {
       cursor: pointer;
       align-self: center;
       width: 1.5em;
       height: 1.5em;
     }
 
-    label>span {
+    label > span {
       cursor: pointer;
       -webkit-user-select: none;
       user-select: none;
@@ -62,35 +65,24 @@ export class DashboardActions extends AppElement {
       height: 1.6em;
     }
 
-    legend{
+    .dialog-title {
       text-align: center;
     }
 
-    table {
-      min-height: 70px;
-      margin-top: 8px;
-      width: 100%;
-    }
-
-    table, th, td {
-      font-size: 0.9em;
-      border: 1px solid white;
-      border-collapse: collapse;
-    }
-
-    tr {
-      height: 50%;
+    .show-icons-selector {
+      display: flex;
+      gap: 8px;
     }
 
-    th, td {
-      padding: 8px;
-      text-align: center;
-      background-color: var(--theme-widget-color);
+    .experimental-settings {
+      display: flex;
+      flex-direction: column;
     }
 
-    .show-icons-selector {
-      display: flex;
-      gap: 8px;
+    .experimental-settings label {
+      width: fit-content;
+      margin-top: 8px;
+      font-size: 0.7em;
     }
 
     app-dialog > *:last-child {
@@ -101,50 +93,71 @@ export class DashboardActions extends AppElement {
   @property({ type: Object })
    config!: GuiConfig
 
-  @queryAll('.metric-selector input')
-  _inputs!: NodeListOf<HTMLInputElement>
-
   @query('input[name="showIcons"]')
   _showIconInput!: HTMLInputElement
 
-  @query('input[name="maxNumberOfTiles"]')
-  _maxNumberOfTilesInput!: HTMLInputElement
-
   @query('input[name="trueBlackTheme"]')
   _trueBlackThemeInput!: HTMLInputElement
 
   @state()
-  _selectedMetrics: string[] = []
+  _columns = 4
 
   @state()
-  _sumSelectedSlots = 0
+  _rows = 2
 
   @state()
-  _isValid = false
+  _isPortrait = false
 
   @state()
   _showIcons = true
 
-  @state()
-  _maxNumberOfTiles = 8
-
   @state()
   _trueBlackTheme = false
 
+  _orientationMediaQuery: MediaQueryList | null = null
+  _handleOrientationChange = (e: MediaQueryListEvent) => {
+    ;[this._columns, this._rows] = [this._rows, this._columns]
+    this._isPortrait = e.matches
+  }
+
+  connectedCallback () {
+    super.connectedCallback()
+    this._orientationMediaQuery = window.matchMedia('(orientation: portrait)')
+    this._orientationMediaQuery.addEventListener('change', this._handleOrientationChange)
+  }
+
+  disconnectedCallback () {
+    super.disconnectedCallback()
+    this._orientationMediaQuery?.removeEventListener('change', this._handleOrientationChange)
+  }
+
   render () {
     return html`
-    <app-dialog class="settings-dialog" .isValid=${this._isValid} @close=${this.close}>
-    <legend>${iconSettings}<br/>Settings</legend>
-
-    <p>Select metrics to be shown:</p>
-    <div class="metric-selector">
-      ${this.renderAvailableMetricList()}
-    </div>
-    <div class="metric-selector-feedback">Slots remaining:  ${this._maxNumberOfTiles - this._sumSelectedSlots}
-      <table>
-        ${this.renderSelectedMetrics()}
-      </table>
+    <app-dialog class="settings-dialog" .isValid=${true} @close=${this.close}>
+    <p class="dialog-title">${iconSettings}<br/>Settings</p>
+
+    <div class="grid-config">
+      <fieldset>
+        <legend>Grid layout (${this._isPortrait ? 'portrait' : 'landscape'})</legend>
+        <label>
+          <span>Columns: ${this._columns}</span>
+          <input
+            type="range" min="1" .max=${this._isPortrait ? '4' : '8'}
+            .value=${String(this._columns)}
+            @input=${(e: Event) => { this._columns = parseInt((e.target as HTMLInputElement).value, 10) }}
+          />
+        </label>
+        <label>
+          <span>Rows: ${this._rows}</span>
+          <input
+            type="range" min="1" .max=${this._isPortrait ? '8' : '4'}
+            .value=${String(this._rows)}
+            @input=${(e: Event) => { this._rows = parseInt((e.target as HTMLInputElement).value, 10) }}
+          />
+        </label>
+      </fieldset>
     </div>
+
     <p class="show-icons-selector">
       <label>
         <span>Show icons</span>
@@ -153,10 +166,6 @@ export class DashboardActions extends AppElement {
     </p>
     <p class="experimental-settings">
       Experimental settings:
-      <label>
-        <span>Use 12 cell grid</span>
-        <input @change=${this.toggleMaxTiles} name="maxNumberOfTiles" type="checkbox" />
-      </label>
       <label>
         <span>True Black theme (OLED/AMOLED)</span>
         <input @change=${this.toggleTrueBlackTheme} name="trueBlackTheme" type="checkbox" />
@@ -167,104 +176,39 @@ export class DashboardActions extends AppElement {
   }
 
   firstUpdated () {
-    this._selectedMetrics = [...this.config.landscapeDashboardMetrics]
-    this._sumSelectedSlots = this._selectedMetrics.length
+    this._isPortrait = window.matchMedia('(orientation: portrait)').matches
+    const orientConfig = this._isPortrait ? this.config.gridConfig.portrait : this.config.gridConfig.landscape
+    this._columns = orientConfig.columns
+    this._rows = orientConfig.rows
     this._showIcons = this.config.showIcons
-    this._maxNumberOfTiles = this.config.maxNumberOfTiles
     this._trueBlackTheme = this.config.trueBlackTheme ?? false
-    if (this._sumSelectedSlots === this._maxNumberOfTiles) {
-      this._isValid = true
-    } else {
-      this._isValid = false
-    }
-    [...this._inputs].forEach((input) => {
-      input.checked = this._selectedMetrics.find((metric) => metric === input.name) !== undefined
-    })
     this._showIconInput.checked = this._showIcons
-    this._maxNumberOfTilesInput.checked = this._maxNumberOfTiles === 12
     this._trueBlackThemeInput.checked = this._trueBlackTheme
   }
 
-  renderAvailableMetricList () {
-    return Object.keys(DASHBOARD_METRICS).map((key) => html`
-      <label>
-        <input @change=${this.toggleCheck} name=${key} size=${DASHBOARD_METRICS[key].size} type="checkbox" />
-      <span>${DASHBOARD_METRICS[key].displayName}</span></label>
-    `)
-  }
-
-  renderSelectedMetrics () {
-    const selectedMetrics = [html`<tr>${[0, 1, 2, 3].map((index: number) => html`<td style="${this._selectedMetrics[3] === this._selectedMetrics[4] && index === 3 ? 'color: red' : ''}">${this._selectedMetrics[index]}</td>`)}</tr>`]
-    selectedMetrics.push(html`<tr>${[4, 5, 6, 7].map((index: number) => html`<td  style="${
-      (index === 4 && this._selectedMetrics[3] === this._selectedMetrics[4]) ||
-      (index === 7 && this._selectedMetrics[7] === this._selectedMetrics[8]) ?
-        'color: red' :
-        ''
-      }">${this._selectedMetrics[index]}</td>`)}</tr>`)
-    if (this._maxNumberOfTiles === 12) {
-      selectedMetrics.push(html`<tr>${[8, 9, 10, 11].map((index: number) => html`<td  style="${
-
-        (index === 8 && this._selectedMetrics[7] === this._selectedMetrics[8]) ||
-        (index === 11 && this._selectedMetrics.length > 12) ?
-          'color: red' :
-          ''
-        }">${this._selectedMetrics[index]}</td>`)}</tr>`)
-    }
-
-    return selectedMetrics
-  }
-
-  toggleCheck (e: Event) {
-    const target = e.target as HTMLInputElement & { size: number }
-    if (target.checked && ((this._selectedMetrics.length % 4 === 3 && target.size > 1) || (this._sumSelectedSlots + target.size > this._maxNumberOfTiles))) {
-      this._isValid = this.isFormValid()
-      target.checked = false
-      return
-    }
-
-    if (target.checked) {
-      for (let index = 0; index < target.size; index++) {
-        this._selectedMetrics = [...this._selectedMetrics, target.name]
-      }
-    } else {
-      for (let index = 0; index < target.size; index++) {
-        this._selectedMetrics.splice(this._selectedMetrics.findIndex((metric) => metric === target.name), 1)
-        this._selectedMetrics = [...this._selectedMetrics]
-      }
-    }
-
-    this._sumSelectedSlots = this._selectedMetrics.length
-    if (this.isFormValid()) {
-      this._isValid = true
-    } else {
-      this._isValid = false
-    }
-  }
-
   toggleIcons (e: Event) {
     this._showIcons = (e.target as HTMLInputElement).checked
   }
 
-  toggleMaxTiles (e: Event) {
-    this._maxNumberOfTiles = (e.target as HTMLInputElement).checked ? 12 : 8
-    this._isValid = this.isFormValid()
-  }
-
   toggleTrueBlackTheme (e: Event) {
     this._trueBlackTheme = (e.target as HTMLInputElement).checked
   }
 
-  isFormValid () {
-    return this._sumSelectedSlots === this._maxNumberOfTiles && this._selectedMetrics[3] !== this._selectedMetrics[4] && this._selectedMetrics[7] !== this._selectedMetrics?.[8]
-  }
-
   close (event: CustomEvent) {
     this.dispatchEvent(new CustomEvent('close'))
     if (event.detail === 'confirm') {
+      const gridConfig = this._isPortrait ?
+        {
+          landscape: { columns: this._rows, rows: this._columns },
+          portrait: { columns: this._columns, rows: this._rows }
+        } :
+        {
+          landscape: { columns: this._columns, rows: this._rows },
+          portrait: { columns: this._rows, rows: this._columns }
+        }
       this.sendEvent('changeGuiSetting', {
-        landscapeDashboardMetrics: this._selectedMetrics,
+        gridConfig,
         showIcons: this._showIcons,
-        maxNumberOfTiles: this._maxNumberOfTiles,
         trueBlackTheme: this._trueBlackTheme
       })
     }
diff --git a/app/client/store/appState.ts b/app/client/store/appState.ts
index 1e7c40a360..6b3eb47c15 100644
--- a/app/client/store/appState.ts
+++ b/app/client/store/appState.ts
@@ -52,7 +52,6 @@ export const APP_STATE: AppState = {
       landscapeDashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories'],
       portraitDashboardMetrics: ['distance', 'timer', 'pace', 'power', 'stkRate', 'totalStk', 'calories'],
       showIcons: true,
-      maxNumberOfTiles: 8,
       trueBlackTheme: false,
       forceCurveDivisionMode: 0,
       gridConfig: {
diff --git a/app/client/store/types.ts b/app/client/store/types.ts
index 4e77426171..0cdade69cb 100644
--- a/app/client/store/types.ts
+++ b/app/client/store/types.ts
@@ -119,7 +119,6 @@ export interface GuiConfig {
   landscapeDashboardMetrics: string[]
   portraitDashboardMetrics: string[]
   showIcons: boolean
-  maxNumberOfTiles: number
   trueBlackTheme: boolean
   forceCurveDivisionMode: number
   gridConfig: GridConfig

From 3a36c495e02d040dfcc7476778f168bd7ce39f9f Mon Sep 17 00:00:00 2001
From: Abasz <32517724+Abasz@users.noreply.github.com>
Date: Wed, 20 May 2026 14:31:11 +0000
Subject: [PATCH 10/10] Add unit tests for retile logic and rendering

Cover the previously untested retile methods and the render output of
PerformanceDashboard including orientation-specific behaviour.

Key changes:
- Add _getOrientationMetrics tests for landscape and portrait selection
- Add _handleRetileModeChanged tests for activate and deactivate state
- Add _handleResetToDefault tests for orientations and inactive state
- Add _removeMetric, _addMetricDirect and _replaceMetricDirect tests
- Add template tests verifying layout in html template
---
 .../components/PerformanceDashboard.test.ts   | 282 ++++++++++++++++++
 1 file changed, 282 insertions(+)

diff --git a/app/client/components/PerformanceDashboard.test.ts b/app/client/components/PerformanceDashboard.test.ts
index 6b9c814298..108d676710 100644
--- a/app/client/components/PerformanceDashboard.test.ts
+++ b/app/client/components/PerformanceDashboard.test.ts
@@ -4,6 +4,7 @@
 // @vitest-environment happy-dom
 import { test, expect, describe, vi, beforeEach, afterEach } from 'vitest'
 
+import type { TemplateResult } from 'lit'
 import { PerformanceDashboard } from './PerformanceDashboard'
 import { DASHBOARD_METRICS } from '../store/dashboardMetrics'
 import { APP_STATE } from '../store/appState'
@@ -121,3 +122,284 @@ describe('_getAvailableMetrics', () => {
     expect(result).toContain('forceCurve')
   })
 })
+
+describe('_getOrientationMetrics', () => {
+  function mockMatchMedia (isPortrait: boolean) {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: isPortrait,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    } as unknown as MediaQueryList)
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('should return landscapeDashboardMetrics when in landscape', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard.appState.config.guiConfigs.landscapeDashboardMetrics = ['distance', 'pace']
+    dashboard.appState.config.guiConfigs.portraitDashboardMetrics = ['timer', 'power']
+    expect(dashboard._getOrientationMetrics()).toEqual(['distance', 'pace'])
+  })
+
+  test('should return portraitDashboardMetrics when in portrait', () => {
+    mockMatchMedia(true)
+    const dashboard = createDashboard()
+    dashboard.appState.config.guiConfigs.landscapeDashboardMetrics = ['distance', 'pace']
+    dashboard.appState.config.guiConfigs.portraitDashboardMetrics = ['timer', 'power']
+    expect(dashboard._getOrientationMetrics()).toEqual(['timer', 'power'])
+  })
+})
+
+describe('_handleRetileModeChanged', () => {
+  function mockMatchMedia (isPortrait: boolean) {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: isPortrait,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    } as unknown as MediaQueryList)
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('should copy orientation metrics into _localMetrics when activated', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard.appState.config.guiConfigs.landscapeDashboardMetrics = ['distance', 'pace']
+    dashboard._retileMode = false
+    dashboard._handleRetileModeChanged(new CustomEvent('retile-mode-changed', { detail: { active: true } }))
+    expect(dashboard._localMetrics).toEqual(['distance', 'pace'])
+  })
+
+  test('should dispatch changeGuiSetting with landscapeDashboardMetrics key when deactivated in landscape', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._retileMode = true
+    dashboard._localMetrics = ['distance', 'timer', 'pace']
+
+    let received: CustomEvent | undefined
+    dashboard.addEventListener('changeGuiSetting', (e) => { received = e as CustomEvent })
+
+    dashboard._handleRetileModeChanged(new CustomEvent('retile-mode-changed', { detail: { active: false } }))
+
+    expect(received!.detail).toEqual({ landscapeDashboardMetrics: ['distance', 'timer', 'pace'] })
+    expect(dashboard._localMetrics).toBeNull()
+  })
+
+  test('should dispatch changeGuiSetting with portraitDashboardMetrics key when deactivated in portrait', () => {
+    mockMatchMedia(true)
+    const dashboard = createDashboard()
+    dashboard._retileMode = true
+    dashboard._localMetrics = ['timer', 'power']
+
+    let received: CustomEvent | undefined
+    dashboard.addEventListener('changeGuiSetting', (e) => { received = e as CustomEvent })
+
+    dashboard._handleRetileModeChanged(new CustomEvent('retile-mode-changed', { detail: { active: false } }))
+
+    expect(received!.detail).toEqual({ portraitDashboardMetrics: ['timer', 'power'] })
+    expect(dashboard._localMetrics).toBeNull()
+  })
+})
+
+describe('_handleResetToDefault', () => {
+  function mockMatchMedia (isPortrait: boolean) {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: isPortrait,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    } as unknown as MediaQueryList)
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('should reset _localMetrics to landscape defaults when in landscape', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._retileMode = true
+    dashboard._localMetrics = ['distance']
+    dashboard._handleResetToDefault()
+    expect(dashboard._localMetrics).toEqual(APP_STATE.config.guiConfigs.landscapeDashboardMetrics)
+  })
+
+  test('should reset _localMetrics to portrait defaults when in portrait', () => {
+    mockMatchMedia(true)
+    const dashboard = createDashboard()
+    dashboard._retileMode = true
+    dashboard._localMetrics = ['distance']
+    dashboard._handleResetToDefault()
+    expect(dashboard._localMetrics).toEqual(APP_STATE.config.guiConfigs.portraitDashboardMetrics)
+  })
+
+  test('should not modify _localMetrics when retile mode is not active', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._retileMode = false
+    dashboard._localMetrics = ['distance']
+    dashboard._handleResetToDefault()
+    expect(dashboard._localMetrics).toEqual(['distance'])
+  })
+})
+
+describe('_removeMetric', () => {
+  test('should remove the metric at the given index', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = ['distance', 'timer', 'pace']
+    dashboard._removeMetric(1)
+    expect(dashboard._localMetrics).toEqual(['distance', 'pace'])
+  })
+
+  test('should not modify state when _localMetrics is null', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = null
+    dashboard._removeMetric(0)
+    expect(dashboard._localMetrics).toBeNull()
+  })
+})
+
+describe('_addMetricDirect', () => {
+  test('should append the metric to _localMetrics', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = ['distance']
+    dashboard._addMetricDirect('timer')
+    expect(dashboard._localMetrics).toEqual(['distance', 'timer'])
+  })
+
+  test('should not modify state when _localMetrics is null', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = null
+    dashboard._addMetricDirect('timer')
+    expect(dashboard._localMetrics).toBeNull()
+  })
+})
+
+describe('_replaceMetricDirect', () => {
+  test('should replace the metric at the given index', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = ['distance', 'timer', 'pace']
+    dashboard._replaceMetricDirect(1, 'power')
+    expect(dashboard._localMetrics).toEqual(['distance', 'power', 'pace'])
+  })
+
+  test('should not modify state when _localMetrics is null', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = null
+    dashboard._replaceMetricDirect(0, 'timer')
+    expect(dashboard._localMetrics).toBeNull()
+  })
+})
+
+describe('render', () => {
+  function mockMatchMedia (isPortrait: boolean) {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: isPortrait,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    } as unknown as MediaQueryList)
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('should apply --grid-columns and --grid-rows CSS variables from _columns and _rows', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._columns = 3
+    dashboard._rows = 5
+    dashboard._localMetrics = []
+    const result = dashboard.render()
+    expect(result.values).toContain(3)
+    expect(result.values).toContain(5)
+  })
+
+  test('should render a tile for each metric in _localMetrics when set', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._retileMode = false
+    dashboard._localMetrics = ['distance', 'timer', 'pace']
+    const result = dashboard.render()
+    const metricConfig = result.values[3] as TemplateResult[]
+    expect(metricConfig).toHaveLength(3)
+  })
+
+  test('should render tiles from orientation metrics when _localMetrics is null', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._retileMode = false
+    dashboard._localMetrics = null
+    const orientationMetrics = dashboard._getOrientationMetrics()
+    const result = dashboard.render()
+    const metricConfig = result.values[3] as TemplateResult[]
+    expect(metricConfig).toHaveLength(orientationMetrics.length)
+  })
+
+  test('should append add-tile when in retile mode and grid has available slots', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._retileMode = true
+    dashboard._localMetrics = ['distance']
+    dashboard._maxGridSlots = 8
+    const result = dashboard.render()
+    const metricConfig = result.values[3] as TemplateResult[]
+    // 1 metric tile wrapped with controls + 1 add-tile
+    expect(metricConfig).toHaveLength(2)
+  })
+
+  test('should not append add-tile when retile mode is off', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._retileMode = false
+    dashboard._localMetrics = ['distance']
+    dashboard._maxGridSlots = 8
+    const result = dashboard.render()
+    const metricConfig = result.values[3] as TemplateResult[]
+    expect(metricConfig).toHaveLength(1)
+  })
+
+  test('should not append add-tile when the grid is full', () => {
+    mockMatchMedia(false)
+    const dashboard = createDashboard()
+    dashboard._retileMode = true
+    dashboard._localMetrics = ['distance', 'timer', 'pace']
+    dashboard._maxGridSlots = 3
+    const result = dashboard.render()
+    const metricConfig = result.values[3] as TemplateResult[]
+    expect(metricConfig).toHaveLength(3)
+  })
+})
+
+describe('_renderAddTile', () => {
+  test('should render empty message when no metrics fit in available slots', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = []
+    const result = dashboard._renderAddTile(0)
+    expect(result.values).toHaveLength(0)
+    expect([...result.strings].join('')).toContain('All metrics in use or won\'t fit')
+  })
+
+  test('should render one option per available metric', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = []
+    const result = dashboard._renderAddTile(Infinity)
+    const options = result.values[0] as TemplateResult[]
+    expect(options).toHaveLength(Object.keys(DASHBOARD_METRICS).length)
+  })
+})
+
+describe('_renderMetricWithControls', () => {
+  test('should pass controls slot content to the component factory', () => {
+    const dashboard = createDashboard()
+    dashboard._localMetrics = ['distance']
+    const factory = vi.fn() as unknown as (slotContent?: TemplateResult | string) => TemplateResult
+    dashboard._renderMetricWithControls(factory, 0, 'distance', 5)
+    expect(vi.mocked(factory)).toHaveBeenCalledOnce()
+    expect(vi.mocked(factory).mock.calls[0][0]).toBeDefined()
+  })
+})