feat(epg): compact timeline toolbar with icon-only Now and cycling zoom (#1557)

* feat(epg): compact timeline toolbar with icon-only Now and cycling zoom

Replace the 96px zoom range slider with a single icon button that cycles
day overview → by hour → detailed, make the Now button icon-only (label in
tooltip + aria-label), and add Ctrl/⌘ + wheel zoom around the cursor on the
ribbon (preventDefault keeps Chromium from page-zooming the same gesture).
Zoom math moves into TimelineZoomController so the component stays under
the max-lines limit. The channel/programme heading no longer carries a 60%
width cap and takes the space the controls free up.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(epg): coalesce wheel-zoom anchoring and make the e2e zoom reset deterministic

- TimelineZoomController keeps a logical pending scrollLeft across a burst
  of wheel/pinch events and applies it in one animation frame, so every
  event anchors on the same minute instead of the stale DOM position
- the e2e settles on the detail preset from whichever band the wheel
  landed in (contrast checks need the block's time line, hidden at
  narrower tiers)
- zoom tooltip advertises ⌘/Ctrl per the repo's shortcut convention

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

libs/ui/epg/src/lib/epg-timeline/epg-timeline-render.util.ts

@@ -11,10 +11,30 @@ import { TIMELINE_MINUTE_MS, TimelineBlock } from './epg-timeline.utils';
 export const TIMELINE_MIN_BLOCK_WIDTH_PX = 40;
 /** Gap subtracted from each block so neighbours don't touch. */
 export const TIMELINE_BLOCK_GAP_PX = 4;
-/** Zoom (px/min) slider bounds. */
+/** Zoom (px/min) bounds for the Ctrl/⌘ + wheel fine-tune gesture. */
 export const TIMELINE_ZOOM_MIN = 0.8;
 export const TIMELINE_ZOOM_MAX = 6;
-export const TIMELINE_ZOOM_STEP = 0.1;
+/**
+ * Multiplicative zoom per wheel pixel: one mouse notch (~100px) is about
+ * ×1.22, and a trackpad pinch (a few px per event) stays smooth.
+ */
+export const TIMELINE_WHEEL_ZOOM_RATE = 0.002;
+
+export type TimelineZoomLevel = 'day' | 'hours' | 'detail';
+
+/**
+ * The three zoom presets the toolbar button cycles through. `hours` is the
+ * default scale; `detail` matches the zoom a group chip expands to, so the
+ * cycle keeps reading consistently after an expand.
+ */
+export const TIMELINE_ZOOM_LEVELS: readonly {
+    readonly level: TimelineZoomLevel;
+    readonly scale: number;
+}[] = [
+    { level: 'day', scale: 1 },
+    { level: 'hours', scale: 1.75 },
+    { level: 'detail', scale: 3.4 },
+];
 /** Below this zoom, dense runs of short programmes collapse into a group chip. */
 export const TIMELINE_GROUP_ZOOM_MAX = 1.3;
 /** Zoom applied when a group chip is expanded. */
@@ -69,6 +89,24 @@ export function tierFor(widthPx: number): TimelineTier {
     return 'micro';
 }
 
+/** Which preset band a (possibly wheel-tuned) scale falls into. */
+export function timelineZoomLevelForScale(scale: number): TimelineZoomLevel {
+    if (scale < TIMELINE_GROUP_ZOOM_MAX) return 'day';
+    if (scale < 3) return 'hours';
+    return 'detail';
+}
+
+/** The preset after the current band, wrapping detail → day. */
+export function nextTimelineZoomScale(scale: number): number {
+    const current = timelineZoomLevelForScale(scale);
+    const index = TIMELINE_ZOOM_LEVELS.findIndex(
+        (entry) => entry.level === current
+    );
+    const next =
+        TIMELINE_ZOOM_LEVELS[(index + 1) % TIMELINE_ZOOM_LEVELS.length];
+    return next.scale;
+}
+
 /** Adaptive tick spacing (minutes) — denser as the user zooms in. */
 export function timelineTickStepForScale(scale: number): number {
     if (scale < 2.2) return 120;
@@ -151,7 +189,8 @@ export function buildTimelineRenderItems(
         if (run.length >= TIMELINE_GROUP_MIN_RUN) {
             const first = run[0];
             const last = run[run.length - 1];
-            const spanPx = ((last.stopMs - first.startMs) / TIMELINE_MINUTE_MS) * scale;
+            const spanPx =
+                ((last.stopMs - first.startMs) / TIMELINE_MINUTE_MS) * scale;
             items.push({
                 kind: 'group',
                 key: `group-${first.key}-${last.key}`,

libs/ui/epg/src/lib/epg-timeline/epg-timeline-zoom.controller.spec.ts

@@ -0,0 +1,125 @@
+import { TimelineZoomController } from './epg-timeline-zoom.controller';
+import {
+    TIMELINE_ZOOM_MAX,
+    TIMELINE_ZOOM_MIN,
+} from './epg-timeline-render.util';
+
+function fakeScroller(clientWidth: number, scrollLeft: number): HTMLElement {
+    return {
+        clientWidth,
+        scrollLeft,
+        getBoundingClientRect: () => ({ left: 100 }),
+    } as unknown as HTMLElement;
+}
+
+describe('TimelineZoomController', () => {
+    let scale: number;
+    let scroller: HTMLElement | undefined;
+    let controller: TimelineZoomController;
+    let rafCallbacks: FrameRequestCallback[];
+
+    beforeEach(() => {
+        scale = 2;
+        scroller = fakeScroller(600, 1200);
+        rafCallbacks = [];
+        jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+            rafCallbacks.push(cb);
+            return rafCallbacks.length;
+        });
+        controller = new TimelineZoomController({
+            ribbon: () => scroller,
+            scale: () => scale,
+            setScale: (next) => (scale = next),
+        });
+    });
+
+    afterEach(() => jest.restoreAllMocks());
+
+    function flushFrames(): void {
+        for (const cb of rafCallbacks.splice(0)) cb(0);
+    }
+
+    it('keeps the viewport centre minute fixed on a programmatic zoom', () => {
+        // centre = (1200 + 300) / 2 px/min = 750 min
+        controller.zoomTo(4);
+        flushFrames();
+        expect(scale).toBe(4);
+        expect(scroller?.scrollLeft).toBe(750 * 4 - 300);
+    });
+
+    it('clamps to the zoom bounds and ignores non-finite input', () => {
+        controller.zoomTo(99);
+        expect(scale).toBe(TIMELINE_ZOOM_MAX);
+        controller.zoomTo(-1);
+        expect(scale).toBe(TIMELINE_ZOOM_MIN);
+        controller.zoomTo(Number.NaN);
+        expect(scale).toBe(TIMELINE_ZOOM_MIN);
+    });
+
+    it('does nothing when the clamped scale is unchanged', () => {
+        controller.zoomTo(2);
+        expect(rafCallbacks).toHaveLength(0);
+    });
+
+    it('zooms around the cursor on Ctrl + wheel', () => {
+        // cursor 150px into the 600px viewport → anchor 0.25
+        const event = new WheelEvent('wheel', {
+            deltaY: -100,
+            ctrlKey: true,
+            clientX: 250,
+            cancelable: true,
+        });
+        controller.onWheel(event);
+        flushFrames();
+        expect(event.defaultPrevented).toBe(true);
+        expect(scale).toBeCloseTo(2 * Math.exp(0.2), 6);
+        // minute under the cursor before: (1200 + 150) / 2 = 675
+        expect(scroller?.scrollLeft).toBeCloseTo(675 * scale - 150, 6);
+    });
+
+    it('keeps the cursor minute anchored across a burst of wheel events', () => {
+        const burst = () =>
+            new WheelEvent('wheel', {
+                deltaY: -50,
+                ctrlKey: true,
+                clientX: 250,
+                cancelable: true,
+            });
+        // Three events before any frame runs: the DOM scrollLeft is stale for
+        // the 2nd and 3rd, so the anchor must come from the logical position.
+        controller.onWheel(burst());
+        controller.onWheel(burst());
+        controller.onWheel(burst());
+        expect(rafCallbacks).toHaveLength(1); // coalesced into one frame
+        flushFrames();
+        // minute under the cursor before the burst: (1200 + 150) / 2 = 675
+        expect(scale).toBeCloseTo(2 * Math.exp(0.3), 6);
+        expect(scroller?.scrollLeft).toBeCloseTo(675 * scale - 150, 6);
+    });
+
+    it('re-anchors on the DOM position once a frame has flushed', () => {
+        controller.zoomTo(4);
+        flushFrames();
+        expect(scroller?.scrollLeft).toBe(750 * 4 - 300);
+        controller.zoomTo(2);
+        flushFrames();
+        expect(scroller?.scrollLeft).toBe(750 * 2 - 300);
+    });
+
+    it('leaves plain wheel events alone', () => {
+        const event = new WheelEvent('wheel', {
+            deltaY: -100,
+            cancelable: true,
+        });
+        controller.onWheel(event);
+        expect(event.defaultPrevented).toBe(false);
+        expect(scale).toBe(2);
+    });
+
+    it('zooms without a rendered ribbon', () => {
+        scroller = undefined;
+        controller.cycle();
+        expect(scale).toBe(3.4);
+        expect(rafCallbacks).toHaveLength(0);
+    });
+});

libs/ui/epg/src/lib/epg-timeline/epg-timeline-zoom.controller.ts

@@ -0,0 +1,102 @@
+import {
+    nextTimelineZoomScale,
+    TIMELINE_WHEEL_ZOOM_RATE,
+    TIMELINE_ZOOM_MAX,
+    TIMELINE_ZOOM_MIN,
+} from './epg-timeline-render.util';
+
+export interface TimelineZoomContext {
+    /** The horizontal scroller hosting the track (undefined until rendered). */
+    readonly ribbon: () => HTMLElement | undefined;
+    readonly scale: () => number;
+    readonly setScale: (scale: number) => void;
+}
+
+/**
+ * Ribbon zoom (px per minute) owned by the toolbar button and the
+ * Ctrl/⌘ + wheel gesture. Every change keeps one ribbon minute anchored on
+ * screen: the viewport centre for button/programmatic zooms, the cursor for
+ * wheel zooms.
+ */
+export class TimelineZoomController {
+    /**
+     * Scroll position the next animation frame will apply. Rapid wheel/pinch
+     * events arrive faster than frames, so the DOM `scrollLeft` still reflects
+     * the previous scale by the time the next event computes its anchor; the
+     * logical position keeps every event anchored on the same minute.
+     */
+    private pendingScrollLeft: number | null = null;
+    private frame = 0;
+
+    constructor(private readonly ctx: TimelineZoomContext) {}
+
+    /** Clamp + apply a scale, keeping the viewport centre stable. */
+    zoomTo(value: number): void {
+        this.applyScale(value, 0.5);
+    }
+
+    /** Toolbar zoom button: step to the next preset (day → hours → detail). */
+    cycle(): void {
+        this.applyScale(nextTimelineZoomScale(this.ctx.scale()), 0.5);
+    }
+
+    /**
+     * Ctrl/⌘ + wheel (and trackpad pinch, which Chromium reports the same
+     * way) zooms around the cursor. Plain wheel keeps scrolling.
+     * `preventDefault` also stops Chromium's page zoom for the same gesture.
+     */
+    onWheel(event: WheelEvent): void {
+        if (!event.ctrlKey && !event.metaKey) {
+            return;
+        }
+        event.preventDefault();
+        const scroller = this.ctx.ribbon();
+        const anchor = scroller
+            ? (event.clientX - scroller.getBoundingClientRect().left) /
+              scroller.clientWidth
+            : 0.5;
+        const factor = Math.exp(-event.deltaY * TIMELINE_WHEEL_ZOOM_RATE);
+        this.applyScale(this.ctx.scale() * factor, anchor);
+    }
+
+    /**
+     * Set the scale so the ribbon minute under `anchorFrac` (0 = left edge,
+     * 1 = right edge of the viewport) stays put.
+     */
+    private applyScale(value: number, anchorFrac: number): void {
+        const requested = Number(value);
+        const prev = this.ctx.scale();
+        const next = Number.isFinite(requested)
+            ? Math.min(
+                  TIMELINE_ZOOM_MAX,
+                  Math.max(TIMELINE_ZOOM_MIN, requested)
+              )
+            : prev;
+        if (next === prev) {
+            return;
+        }
+        const scroller = this.ctx.ribbon();
+        this.ctx.setScale(next);
+        if (!scroller) {
+            return;
+        }
+        const anchorPx = scroller.clientWidth * anchorFrac;
+        const currentLeft = this.pendingScrollLeft ?? scroller.scrollLeft;
+        const anchorMin = (currentLeft + anchorPx) / prev;
+        this.pendingScrollLeft = anchorMin * next - anchorPx;
+        if (this.frame === 0) {
+            this.frame = requestAnimationFrame(() => this.flushScroll());
+        }
+    }
+
+    /** One frame applies the last coalesced position for a burst of events. */
+    private flushScroll(): void {
+        this.frame = 0;
+        const left = this.pendingScrollLeft;
+        this.pendingScrollLeft = null;
+        const scroller = this.ctx.ribbon();
+        if (scroller && left !== null) {
+            scroller.scrollLeft = left;
+        }
+    }
+}

libs/ui/epg/src/lib/epg-timeline/epg-timeline.component.html

@@ -55,7 +55,10 @@
                         summary()?.title
                     }}</span>
                     @if (progress() !== null) {
-                        <span class="epg-timeline__summary-bar" aria-hidden="true">
+                        <span
+                            class="epg-timeline__summary-bar"
+                            aria-hidden="true"
+                        >
                             <i [style.width.%]="progress()"></i>
                         </span>
                     }
@@ -99,29 +102,26 @@
             @if (showRibbonControls()) {
                 <button
                     type="button"
-                    class="epg-timeline__jump"
+                    class="epg-timeline__iconbtn epg-timeline__jump"
                     (click)="jumpToNow()"
                     [matTooltip]="'EPG.TIMELINE.JUMP_NOW' | translate"
+                    [attr.aria-label]="'EPG.TIMELINE.JUMP_NOW' | translate"
                 >
                     <mat-icon>my_location</mat-icon>
-                    {{ 'EPG.TIMELINE.NOW' | translate }}
                 </button>
-                <label
-                    class="epg-timeline__zoom"
-                    [matTooltip]="zoomLabelKey() | translate"
+                @let zoomTooltip =
+                    'EPG.TIMELINE.ZOOM_TOOLTIP'
+                        | translate: { level: (zoomLabelKey() | translate) };
+                <button
+                    type="button"
+                    class="epg-timeline__iconbtn epg-timeline__zoom"
+                    [attr.data-zoom-level]="zoomLevel()"
+                    (click)="cycleZoom()"
+                    [matTooltip]="zoomTooltip"
+                    [attr.aria-label]="zoomTooltip"
                 >
-                    <mat-icon>zoom_in</mat-icon>
-                    <input
-                        #zoomInput
-                        type="range"
-                        [min]="zoomMin"
-                        [max]="zoomMax"
-                        [step]="zoomStep"
-                        [value]="scale()"
-                        (input)="onZoom(zoomInput.valueAsNumber)"
-                        [attr.aria-label]="'EPG.TIMELINE.ZOOM' | translate"
-                    />
-                </label>
+                    <mat-icon>{{ zoomIcon() }}</mat-icon>
+                </button>
             }
             @if (showDateStepper()) {
                 <div class="epg-timeline__stepper">
@@ -145,7 +145,8 @@
                             }
                         </span>
                         <small>{{
-                            viewDate() | date: 'EEE, d MMM' : '' : currentLocale()
+                            viewDate()
+                                | date: 'EEE, d MMM' : '' : currentLocale()
                         }}</small>
                     </div>
                     <button
@@ -166,13 +167,17 @@
         @if (state === 'ribbon' && !archivePlaybackAvailable()) {
             <div class="epg-timeline__notice" role="note">
                 <mat-icon>info</mat-icon>
-                <span>{{ 'EPG.TIMELINE.SCHEDULE_ONLY_NOTICE' | translate }}</span>
+                <span>{{
+                    'EPG.TIMELINE.SCHEDULE_ONLY_NOTICE' | translate
+                }}</span>
             </div>
         }
 
         @switch (state) {
             @case ('loading') {
-                <div class="epg-timeline__ribbon epg-timeline__ribbon--skeleton">
+                <div
+                    class="epg-timeline__ribbon epg-timeline__ribbon--skeleton"
+                >
                     @for (width of skeletonWidths; track $index) {
                         <div
                             class="epg-timeline__sk"
@@ -186,6 +191,7 @@
                     #ribbon
                     class="epg-timeline__ribbon app-scrollbar"
                     (scroll)="onRibbonScroll()"
+                    (wheel)="onRibbonWheel($event)"
                 >
                     <app-epg-timeline-track
                         [items]="renderItems()"

libs/ui/epg/src/lib/epg-timeline/epg-timeline.component.scss

@@ -53,8 +53,10 @@
     padding: 4px 6px;
     border-radius: 7px;
     font: inherit;
+    /* Shrinks only when the toolbar overflows: the channel + programme title
+       take every pixel the fixed-width controls leave (no hard width cap). */
+    flex: 0 1 auto;
     min-width: 0;
-    max-width: 60%;
 
     &:hover {
         background: $surface-2;
@@ -161,32 +163,40 @@
     }
 }
 
-.epg-timeline__jump {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
+/* icon-only toolbar buttons: "Now" + zoom level (label lives in the tooltip
+   and aria-label, so the channel/programme title keeps the toolbar width) */
+.epg-timeline__iconbtn {
+    display: inline-grid;
+    place-items: center;
+    width: 34px;
     height: 34px;
-    padding: 0 13px;
+    padding: 0;
     border-radius: 999px;
     background: $surface-2;
     border: 1px solid $line-strong;
     color: $text-secondary;
-    font: inherit;
-    font-size: 12.5px;
-    font-weight: 600;
     cursor: pointer;
     flex: 0 0 auto;
 
     mat-icon {
-        font-size: 14px;
-        width: 14px;
-        height: 14px;
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
     }
 
     &:hover {
         color: $text-primary;
         border-color: $accent-blue;
     }
+
+    &:focus-visible {
+        outline: 2px solid $accent-blue;
+        outline-offset: 1px;
+    }
+}
+
+.epg-timeline__zoom[data-zoom-level='detail'] {
+    color: $accent-text;
 }
 
 .epg-timeline__stepper {
@@ -339,32 +349,6 @@
     }
 }
 
-/* ── zoom slider ── */
-.epg-timeline__zoom {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    height: 34px;
-    padding: 0 12px;
-    border-radius: 999px;
-    background: $surface-2;
-    border: 1px solid $line;
-    color: $text-tertiary;
-    flex: 0 0 auto;
-
-    mat-icon {
-        font-size: 16px;
-        width: 16px;
-        height: 16px;
-    }
-
-    input[type='range'] {
-        width: 96px;
-        accent-color: $accent-text;
-        cursor: pointer;
-    }
-}
-
 /* ── ribbon ── */
 .epg-timeline__ribbon {
     flex: 1 1 auto;

libs/ui/epg/src/lib/epg-timeline/epg-timeline.component.spec.ts

@@ -40,7 +40,9 @@ describe('EpgTimelineComponent', () => {
             providers: [
                 {
                     provide: MatDialog,
-                    useValue: { open: () => ({ afterClosed: () => of(undefined) }) },
+                    useValue: {
+                        open: () => ({ afterClosed: () => of(undefined) }),
+                    },
                 },
                 {
                     provide: TranslateService,
@@ -225,6 +227,60 @@ describe('EpgTimelineComponent', () => {
         expect(component.renderItems().length).toBe(before);
     });
 
+    it('cycles the zoom button through day → hours → detail → day', () => {
+        setInputs({ programs: [programAt(-60, 120, 'Wide')] });
+        expect(component.zoomLevel()).toBe('hours'); // default scale
+
+        component.cycleZoom();
+        expect(component.zoomLevel()).toBe('detail');
+        expect(component.zoomIcon()).toBe('zoom_in');
+
+        component.cycleZoom();
+        expect(component.zoomLevel()).toBe('day');
+        expect(component.zoomIcon()).toBe('zoom_out');
+
+        component.cycleZoom();
+        expect(component.zoomLevel()).toBe('hours');
+        expect(component.zoomLabelKey()).toBe('EPG.TIMELINE.ZOOM_HOURS');
+    });
+
+    it('snaps a wheel-tuned scale to the next preset band when cycling', () => {
+        setInputs({ programs: [programAt(-60, 120, 'Wide')] });
+        component.onZoom(2.6); // still "hours" band, but off-preset
+        expect(component.zoomLevel()).toBe('hours');
+        component.cycleZoom();
+        expect(component.zoomLevel()).toBe('detail');
+        expect(component.scale()).toBe(3.4);
+    });
+
+    function wheel(init: WheelEventInit): WheelEvent {
+        return new WheelEvent('wheel', { cancelable: true, ...init });
+    }
+
+    it('zooms the ribbon with Ctrl/⌘ + wheel and blocks page zoom', () => {
+        setInputs({ programs: [programAt(-60, 120, 'Wide')] });
+        const before = component.scale();
+
+        const zoomIn = wheel({ deltaY: -100, ctrlKey: true });
+        component.onRibbonWheel(zoomIn);
+        expect(zoomIn.defaultPrevented).toBe(true);
+        expect(component.scale()).toBeGreaterThan(before);
+
+        const zoomOut = wheel({ deltaY: 300, metaKey: true });
+        component.onRibbonWheel(zoomOut);
+        expect(component.scale()).toBeLessThan(before);
+        expect(component.scale()).toBeGreaterThanOrEqual(component.zoomMin);
+    });
+
+    it('leaves a plain wheel to native scrolling', () => {
+        setInputs({ programs: [programAt(-60, 120, 'Wide')] });
+        const before = component.scale();
+        const plain = wheel({ deltaY: -100 });
+        component.onRibbonWheel(plain);
+        expect(plain.defaultPrevented).toBe(false);
+        expect(component.scale()).toBe(before);
+    });
+
     it('expands a group chip by zooming in', () => {
         setInputs({ programs: [programAt(-60, 120, 'Wide')] });
         component.onGroupExpand({

libs/ui/epg/src/lib/epg-timeline/epg-timeline.component.ts

@@ -44,6 +44,7 @@ import {
     EpgTimelineEmptyStateComponent,
 } from './epg-timeline-empty-state.component';
 import { TimelineScrollController } from './epg-timeline-scroll.controller';
+import { TimelineZoomController } from './epg-timeline-zoom.controller';
 import { EpgTimelineTrackComponent } from './epg-timeline-track.component';
 import {
     buildTimelineAxis,
@@ -59,10 +60,10 @@ import {
     TIMELINE_MINUTE_MS,
     TIMELINE_ZOOM_MAX,
     TIMELINE_ZOOM_MIN,
-    TIMELINE_ZOOM_STEP,
     TimelineBlock,
     TimelineRenderGroup,
     timelineTickStepForScale,
+    timelineZoomLevelForScale,
 } from './epg-timeline.utils';
 
 type RenderState = 'loading' | 'ribbon' | EpgTimelineEmptyReason;
@@ -115,7 +116,6 @@ export class EpgTimelineComponent {
     readonly scale = signal(TIMELINE_DEFAULT_SCALE);
     readonly zoomMin = TIMELINE_ZOOM_MIN;
     readonly zoomMax = TIMELINE_ZOOM_MAX;
-    readonly zoomStep = TIMELINE_ZOOM_STEP;
     readonly skeletonWidths = [120, 170, 150, 200, 140, 180];
 
     private readonly nowMs = signal(Date.now());
@@ -127,6 +127,13 @@ export class EpgTimelineComponent {
         return key ? key : getTodayEpgDateKey();
     });
 
+    /** Zoom button + Ctrl/⌘ wheel, anchored so a ribbon minute stays put. */
+    private readonly zoom = new TimelineZoomController({
+        ribbon: () => this.ribbon()?.nativeElement,
+        scale: () => this.scale(),
+        setScale: (scale) => this.scale.set(scale),
+    });
+
     /** Ribbon scrolling + channel-select auto-focus, extracted from the view. */
     private readonly scroll = new TimelineScrollController({
         ribbon: () => this.ribbon()?.nativeElement,
@@ -196,12 +203,23 @@ export class EpgTimelineComponent {
             ((this.nowMs() - axis.startMs) / TIMELINE_MINUTE_MS) * this.scale()
         );
     });
+    readonly zoomLevel = computed(() =>
+        timelineZoomLevelForScale(this.scale())
+    );
     readonly zoomLabelKey = computed(() => {
-        const scale = this.scale();
-        if (scale < TIMELINE_GROUP_ZOOM_MAX) return 'EPG.TIMELINE.ZOOM_DAY';
-        if (scale < 3) return 'EPG.TIMELINE.ZOOM_HOURS';
-        return 'EPG.TIMELINE.ZOOM_DETAIL';
+        switch (this.zoomLevel()) {
+            case 'day':
+                return 'EPG.TIMELINE.ZOOM_DAY';
+            case 'hours':
+                return 'EPG.TIMELINE.ZOOM_HOURS';
+            default:
+                return 'EPG.TIMELINE.ZOOM_DETAIL';
+        }
     });
+    /** `zoom_out` reads as "overview"; both finer bands share `zoom_in`. */
+    readonly zoomIcon = computed(() =>
+        this.zoomLevel() === 'day' ? 'zoom_out' : 'zoom_in'
+    );
     readonly nowLabel = computed(() => formatClockTime(this.nowMs()));
 
     readonly viewDate = computed(() => parseEpgDateKey(this.viewDayKey()));
@@ -301,24 +319,19 @@ export class EpgTimelineComponent {
         this.collapsedChange.emit(!this.collapsed());
     }
 
+    /** Clamp + apply a scale, keeping the viewport centre stable. */
     onZoom(value: number): void {
-        const requested = Number(value);
-        const next = Number.isFinite(requested)
-            ? Math.min(this.zoomMax, Math.max(this.zoomMin, requested))
-            : this.scale();
-        // Keep the viewport centre stable across a zoom change.
-        const scroller = this.ribbon()?.nativeElement;
-        const prev = this.scale();
-        const centreMin = scroller
-            ? (scroller.scrollLeft + scroller.clientWidth / 2) / prev
-            : null;
-        this.scale.set(next);
-        if (scroller && centreMin !== null) {
-            requestAnimationFrame(() => {
-                scroller.scrollLeft =
-                    centreMin * next - scroller.clientWidth / 2;
-            });
-        }
+        this.zoom.zoomTo(value);
+    }
+
+    /** Toolbar zoom button: next preset (day → hours → detail → day). */
+    cycleZoom(): void {
+        this.zoom.cycle();
+    }
+
+    /** Ctrl/⌘ + wheel over the ribbon zooms around the cursor. */
+    onRibbonWheel(event: WheelEvent): void {
+        this.zoom.onWheel(event);
     }
 
     onGroupExpand(group: TimelineRenderGroup): void {

libs/ui/epg/src/lib/epg-timeline/epg-timeline.utils.spec.ts

@@ -9,12 +9,16 @@ import {
     dayKeyAtOffset,
     hasProgramsForDateKey,
     nearestDateKeyWithPrograms,
+    nextTimelineZoomScale,
+    TIMELINE_GROUP_EXPAND_ZOOM,
     TIMELINE_MINUTE_MS,
     TIMELINE_MIN_BLOCK_WIDTH_PX,
+    TIMELINE_ZOOM_LEVELS,
     TimelineRenderBlock,
     TimelineRenderGroup,
     tierFor,
     timelineTickStepForScale,
+    timelineZoomLevelForScale,
 } from './epg-timeline.utils';
 
 function localIso(
@@ -66,15 +70,15 @@ describe('epg-timeline.utils', () => {
 
     describe('classifyTimelineWhen', () => {
         it('classifies past, now and future relative to now', () => {
-            expect(classifyTimelineWhen(NOW - 7200000, NOW - 3600000, NOW)).toBe(
-                'past'
-            );
+            expect(
+                classifyTimelineWhen(NOW - 7200000, NOW - 3600000, NOW)
+            ).toBe('past');
             expect(classifyTimelineWhen(NOW - 60000, NOW + 60000, NOW)).toBe(
                 'now'
             );
-            expect(classifyTimelineWhen(NOW + 3600000, NOW + 7200000, NOW)).toBe(
-                'future'
-            );
+            expect(
+                classifyTimelineWhen(NOW + 3600000, NOW + 7200000, NOW)
+            ).toBe('future');
         });
     });
 
@@ -91,18 +95,30 @@ describe('epg-timeline.utils', () => {
             const block = blocks[0];
             expect(block.when).toBe('now');
             expect(block.durationMin).toBe(120);
-            const expectedOffset = (block.startMs - axis.startMs) / TIMELINE_MINUTE_MS;
+            const expectedOffset =
+                (block.startMs - axis.startMs) / TIMELINE_MINUTE_MS;
             expect(block.offsetMin).toBeCloseTo(expectedOffset, 5);
         });
 
         it('sorts blocks chronologically', () => {
             const programs = [
-                program(localIso(2026, 6, 28, 18), localIso(2026, 6, 28, 19), 'late'),
-                program(localIso(2026, 6, 28, 8), localIso(2026, 6, 28, 9), 'early'),
+                program(
+                    localIso(2026, 6, 28, 18),
+                    localIso(2026, 6, 28, 19),
+                    'late'
+                ),
+                program(
+                    localIso(2026, 6, 28, 8),
+                    localIso(2026, 6, 28, 9),
+                    'early'
+                ),
             ];
             const axis = buildTimelineAxis(programs, NOW);
             const blocks = buildTimelineBlocks(programs, axis, NOW);
-            expect(blocks.map((b) => b.program.title)).toEqual(['early', 'late']);
+            expect(blocks.map((b) => b.program.title)).toEqual([
+                'early',
+                'late',
+            ]);
         });
     });
 
@@ -167,7 +183,8 @@ describe('epg-timeline.utils', () => {
                 [program(localIso(2026, 6, 28, 10), localIso(2026, 6, 28, 11))],
                 NOW
             );
-            const offsetForNoon = (12 * 60 * TIMELINE_MINUTE_MS) / TIMELINE_MINUTE_MS;
+            const offsetForNoon =
+                (12 * 60 * TIMELINE_MINUTE_MS) / TIMELINE_MINUTE_MS;
             expect(dayKeyAtOffset(axis, offsetForNoon)).toBe('2026-06-28');
         });
 
@@ -177,7 +194,9 @@ describe('epg-timeline.utils', () => {
                 program(localIso(2026, 6, 30, 10), localIso(2026, 6, 30, 11)),
             ];
             // Jun 30 10:00 (~1d22h away) is closer to Jun 28 12:00 than Jun 25.
-            expect(nearestDateKeyWithPrograms(programs, NOW)).toBe('2026-06-30');
+            expect(nearestDateKeyWithPrograms(programs, NOW)).toBe(
+                '2026-06-30'
+            );
         });
 
         it('keys, positions and picks days in display time when an offset is set', () => {
@@ -189,8 +208,12 @@ describe('epg-timeline.utils', () => {
                     'Late'
                 ),
             ];
-            expect(hasProgramsForDateKey(programs, '2026-06-29', 60)).toBe(false);
-            expect(hasProgramsForDateKey(programs, '2026-06-30', 60)).toBe(true);
+            expect(hasProgramsForDateKey(programs, '2026-06-29', 60)).toBe(
+                false
+            );
+            expect(hasProgramsForDateKey(programs, '2026-06-30', 60)).toBe(
+                true
+            );
             expect(nearestDateKeyWithPrograms(programs, NOW, 60)).toBe(
                 '2026-06-30'
             );
@@ -205,6 +228,35 @@ describe('epg-timeline.utils', () => {
         });
     });
 
+    describe('zoom presets', () => {
+        it('maps every preset scale back to its own level', () => {
+            for (const { level, scale } of TIMELINE_ZOOM_LEVELS) {
+                expect(timelineZoomLevelForScale(scale)).toBe(level);
+            }
+        });
+
+        it('classifies off-preset scales by band', () => {
+            expect(timelineZoomLevelForScale(0.8)).toBe('day');
+            expect(timelineZoomLevelForScale(1.29)).toBe('day');
+            expect(timelineZoomLevelForScale(1.3)).toBe('hours');
+            expect(timelineZoomLevelForScale(2.99)).toBe('hours');
+            expect(timelineZoomLevelForScale(3)).toBe('detail');
+            expect(timelineZoomLevelForScale(6)).toBe('detail');
+        });
+
+        it('cycles to the next preset and wraps from detail to day', () => {
+            expect(nextTimelineZoomScale(1)).toBe(1.75);
+            expect(nextTimelineZoomScale(1.75)).toBe(3.4);
+            expect(nextTimelineZoomScale(3.4)).toBe(1);
+            // an expanded group chip sits on the detail preset, so the cycle
+            // continues from there instead of re-entering "detail"
+            expect(nextTimelineZoomScale(TIMELINE_GROUP_EXPAND_ZOOM)).toBe(1);
+            // wheel-tuned values snap to the band's successor
+            expect(nextTimelineZoomScale(2.6)).toBe(3.4);
+            expect(nextTimelineZoomScale(5)).toBe(1);
+        });
+    });
+
     describe('short-programme strategy', () => {
         it('classifies content tiers by rendered width', () => {
             expect(tierFor(200)).toBe('wide');
@@ -220,11 +272,19 @@ describe('epg-timeline.utils', () => {
             expect(timelineTickStepForScale(6)).toBe(15);
         });
 
-        function blocksFor(durations: number[]): ReturnType<typeof buildTimelineBlocks> {
+        function blocksFor(
+            durations: number[]
+        ): ReturnType<typeof buildTimelineBlocks> {
             let startMin = 6 * 60; // 06:00
             const programs = durations.map((dur) => {
                 const p = program(
-                    localIso(2026, 6, 28, Math.floor(startMin / 60), startMin % 60),
+                    localIso(
+                        2026,
+                        6,
+                        28,
+                        Math.floor(startMin / 60),
+                        startMin % 60
+                    ),
                     localIso(
                         2026,
                         6,
@@ -278,7 +338,10 @@ describe('epg-timeline.utils', () => {
                 eh: number,
                 em: number
             ): ReturnType<typeof program> =>
-                program(localIso(2026, 6, 28, sh, sm), localIso(2026, 6, 28, eh, em));
+                program(
+                    localIso(2026, 6, 28, sh, sm),
+                    localIso(2026, 6, 28, eh, em)
+                );
             const programs = [
                 mk(11, 38, 11, 43),
                 mk(11, 43, 11, 48),