Add Detailed Timer Icon Modes

src/localization/chinese-simplified.ts

@@ -572,6 +572,10 @@ export function resolveChineseSimplified(text: Label): string {
             return "对比区间时间";
         case Label.ColumnStartWithPossibleTimeSave:
             return "可节省时间";
+        case Label.IconDisplayModeBothRows:
+            return "两行";
+        case Label.IconDisplayModeFirstRow:
+            return "仅第一行";
         case Label.SubsplitDisplayModeFlat:
             return "平铺";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/dutch.ts

@@ -572,6 +572,10 @@ export function resolveDutch(text: Label): string {
             return "Vergelijking segmenttijd";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Mogelijke tijdswinst";
+        case Label.IconDisplayModeBothRows:
+            return "Beide rijen";
+        case Label.IconDisplayModeFirstRow:
+            return "Alleen de eerste rij";
         case Label.SubsplitDisplayModeFlat:
             return "Plat";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/english.ts

@@ -572,6 +572,10 @@ export function resolveEnglish(text: Label): string {
             return "Comparison Segment Time";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Possible Time Save";
+        case Label.IconDisplayModeBothRows:
+            return "Both Rows";
+        case Label.IconDisplayModeFirstRow:
+            return "First Row Only";
         case Label.SubsplitDisplayModeFlat:
             return "Flat";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/french.ts

@@ -572,6 +572,10 @@ export function resolveFrench(text: Label): string {
             return "Temps du segment de comparaison";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Gain de temps possible";
+        case Label.IconDisplayModeBothRows:
+            return "Les deux lignes";
+        case Label.IconDisplayModeFirstRow:
+            return "Première ligne uniquement";
         case Label.SubsplitDisplayModeFlat:
             return "À plat";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/german.ts

@@ -572,6 +572,10 @@ export function resolveGerman(text: Label): string {
             return "Vergleichs‑Segmentzeit";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Mögliche Zeitersparnis";
+        case Label.IconDisplayModeBothRows:
+            return "Beide Zeilen";
+        case Label.IconDisplayModeFirstRow:
+            return "Nur erste Zeile";
         case Label.SubsplitDisplayModeFlat:
             return "Flach";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/index.ts

@@ -301,6 +301,8 @@ export enum Label {
     ColumnStartWithComparisonSegmentTime,
     ColumnStartWithPossibleTimeSave,
     SubsplitDisplayModeFlat,
+    IconDisplayModeBothRows,
+    IconDisplayModeFirstRow,
     SubsplitDisplayModeCurrentGroupExpanded,
     SubsplitDisplayModeAllGroupsExpanded,
     ColumnUpdateWithDontUpdate,

src/localization/italian.ts

@@ -572,6 +572,10 @@ export function resolveItalian(text: Label): string {
             return "Tempo segmento di confronto";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Tempo risparmiabile";
+        case Label.IconDisplayModeBothRows:
+            return "Entrambe le righe";
+        case Label.IconDisplayModeFirstRow:
+            return "Solo la prima riga";
         case Label.SubsplitDisplayModeFlat:
             return "Elenco piatto";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/japanese.ts

@@ -572,6 +572,10 @@ export function resolveJapanese(text: Label): string {
             return "比較対象区間タイム";
         case Label.ColumnStartWithPossibleTimeSave:
             return "更新余地";
+        case Label.IconDisplayModeBothRows:
+            return "両方の行";
+        case Label.IconDisplayModeFirstRow:
+            return "最初の行のみ";
         case Label.SubsplitDisplayModeFlat:
             return "フラット";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/korean.ts

@@ -572,6 +572,10 @@ export function resolveKorean(text: Label): string {
             return "비교 세그먼트 시간";
         case Label.ColumnStartWithPossibleTimeSave:
             return "절약 가능한 시간";
+        case Label.IconDisplayModeBothRows:
+            return "두 행 모두";
+        case Label.IconDisplayModeFirstRow:
+            return "첫 번째 행만";
         case Label.SubsplitDisplayModeFlat:
             return "플랫";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/polish.ts

@@ -572,6 +572,10 @@ export function resolvePolish(text: Label): string {
             return "Czas segmentu porównania";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Możliwa oszczędność czasu";
+        case Label.IconDisplayModeBothRows:
+            return "Oba wiersze";
+        case Label.IconDisplayModeFirstRow:
+            return "Tylko pierwszy wiersz";
         case Label.SubsplitDisplayModeFlat:
             return "Płasko";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/portuguese-brazil.ts

@@ -572,6 +572,10 @@ export function resolveBrazilianPortuguese(text: Label): string {
             return "Tempo de segmento de comparação";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Tempo possível de economizar";
+        case Label.IconDisplayModeBothRows:
+            return "Ambas as linhas";
+        case Label.IconDisplayModeFirstRow:
+            return "Apenas a primeira linha";
         case Label.SubsplitDisplayModeFlat:
             return "Plano";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/portuguese.ts

@@ -572,6 +572,10 @@ export function resolvePortuguese(text: Label): string {
             return "Tempo de segmento de comparação";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Tempo possível de economizar";
+        case Label.IconDisplayModeBothRows:
+            return "Ambas as linhas";
+        case Label.IconDisplayModeFirstRow:
+            return "Apenas a primeira linha";
         case Label.SubsplitDisplayModeFlat:
             return "Plano";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/russian.ts

@@ -572,6 +572,10 @@ export function resolveRussian(text: Label): string {
             return "Время сегмента сравнения";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Возможная экономия времени";
+        case Label.IconDisplayModeBothRows:
+            return "Обе строки";
+        case Label.IconDisplayModeFirstRow:
+            return "Только первая строка";
         case Label.SubsplitDisplayModeFlat:
             return "Плоский список";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/localization/spanish.ts

@@ -572,6 +572,10 @@ export function resolveSpanish(text: Label): string {
             return "Tiempo de segmento de comparación";
         case Label.ColumnStartWithPossibleTimeSave:
             return "Tiempo posible de ahorrar";
+        case Label.IconDisplayModeBothRows:
+            return "Ambas filas";
+        case Label.IconDisplayModeFirstRow:
+            return "Solo la primera fila";
         case Label.SubsplitDisplayModeFlat:
             return "Plano";
         case Label.SubsplitDisplayModeCurrentGroupExpanded:

src/ui/components/Settings/IconDisplayMode.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { expect } from "../../../util/OptionUtil";
+import {
+    type IconDisplayMode as IconDisplayModeType,
+    type Language,
+} from "../../../livesplit-core";
+import { type SettingValueFactory } from ".";
+import { Label, resolve } from "../../../localization";
+
+import tableClasses from "../../../css/Table.module.css";
+
+// Core owns icon fitting and missing-image reclamation. The editor only
+// forwards the display mode, so previews and the running timer use the same
+// automatic layout rules without any additional frontend sizing settings.
+export function IconDisplayMode<T>({
+    value,
+    setValue,
+    factory,
+    lang,
+}: {
+    value: IconDisplayModeType;
+    setValue: (value: T) => void;
+    factory: SettingValueFactory<T>;
+    lang: Language | undefined;
+}) {
+    return (
+        <div className={tableClasses.settingsValueBox}>
+            <select
+                value={value}
+                onChange={(e) =>
+                    setValue(
+                        expect(
+                            factory.fromIconDisplayMode(e.target.value),
+                            "Unexpected Icon Display Mode",
+                            lang,
+                        ),
+                    )
+                }
+            >
+                <option value="Hidden">{resolve(Label.Hidden, lang)}</option>
+                <option value="BothRows">
+                    {resolve(Label.IconDisplayModeBothRows, lang)}
+                </option>
+                <option value="FirstRow">
+                    {resolve(Label.IconDisplayModeFirstRow, lang)}
+                </option>
+            </select>
+        </div>
+    );
+}

src/ui/components/Settings/index.tsx

@@ -21,6 +21,7 @@ import {
 } from "./Column";
 import { Alignment } from "./Alignment";
 import { SubsplitDisplayMode } from "./SubsplitDisplayMode";
+import { IconDisplayMode } from "./IconDisplayMode";
 import { OptionalTimingMethod } from "./TimingMethod";
 import { DeltaGradient, Gradient, ListGradient } from "./Gradient";
 import { Color, OptionalColor } from "./Color";
@@ -127,6 +128,7 @@ export interface SettingValueFactory<T> {
     fromColumnUpdateTrigger(value: string): T | null;
     fromLayoutDirection(value: string): T | null;
     fromSubsplitDisplayMode(value: string): T | null;
+    fromIconDisplayMode(value: string): T | null;
     fromFont(
         name: string,
         style: string,
@@ -250,6 +252,18 @@ export class JsonSettingValueFactory implements SettingValueFactory<ExtendedSett
     ): ExtendedSettingsDescriptionValueJson | null {
         throw new Error("Not implemented");
     }
+    public fromIconDisplayMode(
+        value: string,
+    ): ExtendedSettingsDescriptionValueJson | null {
+        if (
+            value === "Hidden" ||
+            value === "BothRows" ||
+            value === "FirstRow"
+        ) {
+            return { IconDisplayMode: value };
+        }
+        return null;
+    }
     public fromFont(
         _name: string,
         _style: string,
@@ -675,6 +689,17 @@ export class SettingsComponent<T> extends React.Component<Props<T>> {
                         lang={this.props.lang}
                     />
                 );
+            } else if ("IconDisplayMode" in value) {
+                component = (
+                    <IconDisplayMode
+                        value={value.IconDisplayMode}
+                        setValue={(value) =>
+                            this.props.setValue(valueIndex, value)
+                        }
+                        factory={this.props.factory}
+                        lang={this.props.lang}
+                    />
+                );
             } else if ("SubsplitDisplayMode" in value) {
                 component = (
                     <SubsplitDisplayMode