From 51422e6579a38083e4ae246dfdaa0a2e0b17acbf Mon Sep 17 00:00:00 2001
From: Timo Giese <giese.timo@gmail.com>
Date: Wed, 6 May 2026 12:40:52 +0200
Subject: [PATCH 1/3] chore: prettier formatting cleanup

---
 .github/dependabot.yml                        |  4 +--
 .github/workflows/ci.yml                      |  1 -
 .github/workflows/deploy_plugin.yaml          |  2 +-
 src/map-engine/Spotmap.ts                     |  8 ++++--
 src/map-engine/globals.d.ts                   |  1 -
 src/map-engine/popup-templates.ts             |  4 +--
 .../components/FeedsToolbarGroup.jsx          |  4 +--
 .../components/ProviderSelector.jsx           |  7 ++++-
 src/spotmap-admin/tabs/EditPointsTab.jsx      |  9 +++----
 src/spotmap-admin/tabs/FeedsTab.jsx           |  4 ++-
 src/spotmap-admin/tabs/ShortcodeTab.jsx       |  9 +++++--
 src/spotmap/components/GpxManagerModal.jsx    | 27 +++++++------------
 src/spotmap/components/MapsToolbarGroup.jsx   | 10 ++++++-
 13 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 1473d3a..db401bf 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -12,8 +12,8 @@ updates:
           - version-update:semver-minor
           - version-update:semver-major
       # @wordpress/scripts@31.x requires @wordpress/env@^10.0.0; unblock when scripts supports v11
-      - dependency-name: "@wordpress/env"
-        versions: [">=11"]
+      - dependency-name: '@wordpress/env'
+        versions: ['>=11']
 
   - package-ecosystem: composer
     directory: /
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8b3e2e4..d0a988c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -145,4 +145,3 @@ jobs:
           SPOTMAP_TOKEN_LINZ: ${{ secrets.SPOTMAP_TOKEN_LINZ }}
           SPOTMAP_TOKEN_GEOPORTAIL: ${{ secrets.SPOTMAP_TOKEN_GEOPORTAIL }}
           SPOTMAP_TOKEN_OSDATAHUB: ${{ secrets.SPOTMAP_TOKEN_OSDATAHUB }}
-
diff --git a/.github/workflows/deploy_plugin.yaml b/.github/workflows/deploy_plugin.yaml
index 2387587..6c933cc 100644
--- a/.github/workflows/deploy_plugin.yaml
+++ b/.github/workflows/deploy_plugin.yaml
@@ -2,7 +2,7 @@ name: Release & Deploy
 
 on:
   workflow_run:
-    workflows: ["CI"]
+    workflows: ['CI']
     types: [completed]
     branches: [main]
   workflow_dispatch:
diff --git a/src/map-engine/Spotmap.ts b/src/map-engine/Spotmap.ts
index 75acd39..f8f18d9 100644
--- a/src/map-engine/Spotmap.ts
+++ b/src/map-engine/Spotmap.ts
@@ -225,7 +225,9 @@ export class Spotmap {
         // circle-dot markers render above polylines. Avoids theme CSS targeting
         // .leaflet-marker-pane which can set the SVG to 0×0.
         this.map.createPane( 'spotmapCirclePane' );
-        ( this.map.getPane( 'spotmapCirclePane' ) as HTMLElement ).style.zIndex = '450';
+        (
+            this.map.getPane( 'spotmapCirclePane' ) as HTMLElement
+         ).style.zIndex = '450';
         const canvasRenderer = L.svg( { pane: 'spotmapCirclePane' } );
         this.markerManager = new MarkerManager(
             this.map,
@@ -510,7 +512,9 @@ export class Spotmap {
             icon,
             zIndexOffset: Z_INDEX_LAST_POINT,
         } )
-            .bindPopup( MarkerManager.getPopupHtml( lp, this.options.feeds.length ) )
+            .bindPopup(
+                MarkerManager.getPopupHtml( lp, this.options.feeds.length )
+            )
             .addTo( feed.featureGroup );
     }
 
diff --git a/src/map-engine/globals.d.ts b/src/map-engine/globals.d.ts
index f7bb76e..1d3c83d 100644
--- a/src/map-engine/globals.d.ts
+++ b/src/map-engine/globals.d.ts
@@ -44,7 +44,6 @@ declare global {
             };
             polyline_options?: L.PolylineOptions;
         }
-
     }
 }
 
diff --git a/src/map-engine/popup-templates.ts b/src/map-engine/popup-templates.ts
index 3c7253c..816ee3a 100644
--- a/src/map-engine/popup-templates.ts
+++ b/src/map-engine/popup-templates.ts
@@ -64,9 +64,9 @@ export function buildView( entry: SpotPoint, feedCount = 1 ): PopupView {
     if ( entry.type === 'POST' ) {
         return {
             imageUrl: entry.image_url,
-            linkedTitle: entry.url ? ( entry.message ?? 'Post' ) : undefined,
+            linkedTitle: entry.url ? entry.message ?? 'Post' : undefined,
             url: entry.url,
-            plainTitle: entry.url ? undefined : ( entry.message ?? 'Post' ),
+            plainTitle: entry.url ? undefined : entry.message ?? 'Post',
             excerpt: entry.excerpt,
             date: entry.date,
         };
diff --git a/src/spotmap-admin/components/FeedsToolbarGroup.jsx b/src/spotmap-admin/components/FeedsToolbarGroup.jsx
index 3f04c56..ff3a9cd 100644
--- a/src/spotmap-admin/components/FeedsToolbarGroup.jsx
+++ b/src/spotmap-admin/components/FeedsToolbarGroup.jsx
@@ -72,9 +72,7 @@ export default function FeedsToolbarGroup( {
                                     { onStyle && (
                                         <Button
                                             icon={ brush }
-                                            label={
-                                                __( 'Style' ) + ' ' + feed
-                                            }
+                                            label={ __( 'Style' ) + ' ' + feed }
                                             size="small"
                                             variant="tertiary"
                                             style={ {
diff --git a/src/spotmap-admin/components/ProviderSelector.jsx b/src/spotmap-admin/components/ProviderSelector.jsx
index 98e523d..36ea72d 100644
--- a/src/spotmap-admin/components/ProviderSelector.jsx
+++ b/src/spotmap-admin/components/ProviderSelector.jsx
@@ -329,7 +329,12 @@ const PROVIDER_ICONS = {
 // Tile grid
 // ---------------------------------------------------------------------------
 
-export default function ProviderSelector( { providers, value, onChange, disabledTypes = [] } ) {
+export default function ProviderSelector( {
+    providers,
+    value,
+    onChange,
+    disabledTypes = [],
+} ) {
     const entries = Object.entries( providers );
 
     return (
diff --git a/src/spotmap-admin/tabs/EditPointsTab.jsx b/src/spotmap-admin/tabs/EditPointsTab.jsx
index 95502df..7d21243 100644
--- a/src/spotmap-admin/tabs/EditPointsTab.jsx
+++ b/src/spotmap-admin/tabs/EditPointsTab.jsx
@@ -1,9 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
-import {
-    Button,
-    Notice,
-    Toolbar,
-} from '@wordpress/components';
+import { Button, Notice, Toolbar } from '@wordpress/components';
 import { undo } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import MapsToolbarGroup from '../../spotmap/components/MapsToolbarGroup';
@@ -96,7 +92,8 @@ export default function EditPointsTab( { onNoticeChange } ) {
             return;
         }
         if ( typeof window.Spotmap === 'undefined' ) {
-            const missing = typeof window.L === 'undefined' ? 'Leaflet (L)' : 'Spotmap';
+            const missing =
+                typeof window.L === 'undefined' ? 'Leaflet (L)' : 'Spotmap';
             onNoticeChange( {
                 status: 'error',
                 text: `Map engine not loaded (${ missing } is undefined). Check the browser console for script errors — a JavaScript conflict or ad-blocker may be preventing one of the map scripts from loading.`,
diff --git a/src/spotmap-admin/tabs/FeedsTab.jsx b/src/spotmap-admin/tabs/FeedsTab.jsx
index 6d1a832..aac6661 100644
--- a/src/spotmap-admin/tabs/FeedsTab.jsx
+++ b/src/spotmap-admin/tabs/FeedsTab.jsx
@@ -184,7 +184,9 @@ export default function FeedsTab( {
                 status: 'success',
                 text:
                     count > 0
-                        ? `Fetched ${ count } new point${ count === 1 ? '' : 's' }.`
+                        ? `Fetched ${ count } new point${
+                              count === 1 ? '' : 's'
+                          }.`
                         : 'No new points found.',
             } );
         } catch ( err ) {
diff --git a/src/spotmap-admin/tabs/ShortcodeTab.jsx b/src/spotmap-admin/tabs/ShortcodeTab.jsx
index 362463c..8adb791 100644
--- a/src/spotmap-admin/tabs/ShortcodeTab.jsx
+++ b/src/spotmap-admin/tabs/ShortcodeTab.jsx
@@ -175,7 +175,9 @@ function buildShortcode( {
         parts.push( `gpx-name="${ gpx.map( ( t ) => t.name ).join( ',' ) }"` );
         parts.push( `gpx-url="${ gpx.map( ( t ) => t.url ).join( ',' ) }"` );
         parts.push(
-            `gpx-color="${ gpx.map( ( t ) => t.color || '#FFD700' ).join( ',' ) }"`
+            `gpx-color="${ gpx
+                .map( ( t ) => t.color || '#FFD700' )
+                .join( ',' ) }"`
         );
     }
     if ( debug ) {
@@ -310,7 +312,10 @@ export default function ShortcodeTab() {
     const updateStyle = ( feed, key, value ) => {
         setStyles( ( prev ) => ( {
             ...prev,
-            [ feed ]: { ...( prev[ feed ] ?? DEFAULT_FEED_STYLE ), [ key ]: value },
+            [ feed ]: {
+                ...( prev[ feed ] ?? DEFAULT_FEED_STYLE ),
+                [ key ]: value,
+            },
         } ) );
     };
 
diff --git a/src/spotmap/components/GpxManagerModal.jsx b/src/spotmap/components/GpxManagerModal.jsx
index d92b1c6..9b66ef4 100644
--- a/src/spotmap/components/GpxManagerModal.jsx
+++ b/src/spotmap/components/GpxManagerModal.jsx
@@ -56,10 +56,7 @@ export default function GpxManagerModal( { gpx, onChange, onClose } ) {
             button: { text: __( 'Select' ) },
         } );
         frame.on( 'select', () => {
-            const selection = frame
-                .state()
-                .get( 'selection' )
-                .toJSON();
+            const selection = frame.state().get( 'selection' ).toJSON();
             mergeTracks(
                 selection.map( ( t ) => ( {
                     id: t.id,
@@ -90,11 +87,7 @@ export default function GpxManagerModal( { gpx, onChange, onClose } ) {
                     valid.map( ( t ) => ( {
                         id: t.id,
                         url: t.url,
-                        name:
-                            t.title ||
-                            t.filename ||
-                            t.slug ||
-                            String( t.id ),
+                        name: t.title || t.filename || t.slug || String( t.id ),
                         color: gpx[ 0 ]?.color || '#FFD700',
                         visible: true,
                         download: false,
@@ -182,9 +175,7 @@ export default function GpxManagerModal( { gpx, onChange, onClose } ) {
                         <ColorPalette
                             colors={ COLORS }
                             value={ styleTrack?.color || '#FFD700' }
-                            onChange={ ( v ) =>
-                                v && updateProp( 'color', v )
-                            }
+                            onChange={ ( v ) => v && updateProp( 'color', v ) }
                             disableCustomColors={ false }
                             clearable={ false }
                         />
@@ -265,7 +256,10 @@ export default function GpxManagerModal( { gpx, onChange, onClose } ) {
                         >
                             { __( 'Upload' ) }
                         </Button>
-                        <Button variant="secondary" onClick={ openMediaLibrary }>
+                        <Button
+                            variant="secondary"
+                            onClick={ openMediaLibrary }
+                        >
                             { __( 'Media Library' ) }
                         </Button>
                         <input
@@ -306,8 +300,7 @@ export default function GpxManagerModal( { gpx, onChange, onClose } ) {
                             >
                                 <tbody>
                                     { pageTracks.map( ( track, localIdx ) => {
-                                        const globalIdx =
-                                            pageStart + localIdx;
+                                        const globalIdx = pageStart + localIdx;
                                         return (
                                             <tr
                                                 key={
@@ -435,9 +428,7 @@ export default function GpxManagerModal( { gpx, onChange, onClose } ) {
                                     </span>
                                     <Button
                                         variant="secondary"
-                                        disabled={
-                                            safePage >= totalPages - 1
-                                        }
+                                        disabled={ safePage >= totalPages - 1 }
                                         onClick={ () =>
                                             setPage( safePage + 1 )
                                         }
diff --git a/src/spotmap/components/MapsToolbarGroup.jsx b/src/spotmap/components/MapsToolbarGroup.jsx
index 2742962..db3a60b 100644
--- a/src/spotmap/components/MapsToolbarGroup.jsx
+++ b/src/spotmap/components/MapsToolbarGroup.jsx
@@ -13,7 +13,15 @@ import { __ } from '@wordpress/i18n';
  * A single row in the base-layer list. Shows a permanent "● active" badge for the
  * primary map, and a hover-only "set active" link for other checked layers.
  */
-function MapRowItem( { mapKey, label, isChecked, isActive, isDisabled, onToggle, onSetActive } ) {
+function MapRowItem( {
+    mapKey,
+    label,
+    isChecked,
+    isActive,
+    isDisabled,
+    onToggle,
+    onSetActive,
+} ) {
     const [ hovered, setHovered ] = useState( false );
     return (
         <div

From 7ba71bab26e49358f2a2b30a11fda6eb2f491dbb Mon Sep 17 00:00:00 2001
From: Timo Giese <giese.timo@gmail.com>
Date: Wed, 6 May 2026 12:40:57 +0200
Subject: [PATCH 2/3] fix(markers): inject popup nav when images fail to load

---
 src/map-engine/MarkerManager.ts               | 36 ++++++++++++-------
 .../__tests__/MarkerManager.test.ts           |  4 +--
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/map-engine/MarkerManager.ts b/src/map-engine/MarkerManager.ts
index b930137..c9f6def 100644
--- a/src/map-engine/MarkerManager.ts
+++ b/src/map-engine/MarkerManager.ts
@@ -150,7 +150,11 @@ export class MarkerManager {
                 const content = container.querySelector(
                     '.leaflet-popup-content'
                 );
-                if ( ! content || content.querySelector( '.spotmap-popup-nav' ) ) return;
+                if (
+                    ! content ||
+                    content.querySelector( '.spotmap-popup-nav' )
+                )
+                    return;
                 const nav = document.createElement( 'div' );
                 nav.className = 'spotmap-popup-nav';
                 nav.style.cssText =
@@ -210,9 +214,9 @@ export class MarkerManager {
                 }
             };
 
-            const imgs = Array.from( container.querySelectorAll( 'img' ) ).filter(
-                ( img ) => ! img.complete
-            );
+            const imgs = Array.from(
+                container.querySelectorAll( 'img' )
+            ).filter( ( img ) => ! img.complete );
             if ( imgs.length === 0 ) {
                 injectNav();
                 requestAnimationFrame( doPan );
@@ -226,20 +230,28 @@ export class MarkerManager {
                             if ( loaded === imgs.length ) {
                                 // Reposition the tip without replacing content
                                 // (popup.update() would wipe our injected nav).
-                                ( popup as unknown as { _updatePosition?: () => void } )._updatePosition?.();
+                                (
+                                    popup as unknown as {
+                                        _updatePosition?: () => void;
+                                    }
+                                 )._updatePosition?.();
+                                injectNav();
+                                requestAnimationFrame( doPan );
+                            }
+                        },
+                        { once: true }
+                    );
+                    img.addEventListener(
+                        'error',
+                        () => {
+                            loaded++;
+                            if ( loaded === imgs.length ) {
                                 injectNav();
                                 requestAnimationFrame( doPan );
                             }
                         },
                         { once: true }
                     );
-                    img.addEventListener( 'error', () => {
-                        loaded++;
-                        if ( loaded === imgs.length ) {
-                            injectNav();
-                            requestAnimationFrame( doPan );
-                        }
-                    }, { once: true } );
                 } );
             }
         } );
diff --git a/src/map-engine/__tests__/MarkerManager.test.ts b/src/map-engine/__tests__/MarkerManager.test.ts
index 8c80bf3..84648e3 100644
--- a/src/map-engine/__tests__/MarkerManager.test.ts
+++ b/src/map-engine/__tests__/MarkerManager.test.ts
@@ -54,7 +54,7 @@ describe( 'MarkerManager.getPopupHtml', () => {
         expect( html ).not.toContain( '<img' );
     } );
 
-it( 'shows battery warning when status is LOW', () => {
+    it( 'shows battery warning when status is LOW', () => {
         const html = MarkerManager.getPopupHtml(
             makePoint( { battery_status: 'LOW' } )
         );
@@ -174,7 +174,7 @@ describe( 'MarkerManager instance', () => {
             markerMock.marker.mock.results[ 0 ].value as {
                 bindPopup: jest.Mock;
             }
-        ).bindPopup.mock.calls[ 0 ][ 0 ] as string;
+         ).bindPopup.mock.calls[ 0 ][ 0 ] as string;
         expect( bindPopupCall ).toContain( 'OK' );
     } );
 } );

From ed565571f217c812581bc1b02f18a5b6f8f73ab3 Mon Sep 17 00:00:00 2001
From: Timo Giese <giese.timo@gmail.com>
Date: Wed, 6 May 2026 12:41:07 +0200
Subject: [PATCH 3/3] feat(time-filter): redesign modal with segmented toggle
 and advanced options

- Replace RadioControl with ToggleGroupControl (Single Day / Date Range)
- Remove 'No filter' radio; add per-endpoint Reset button instead
- Hide relative option on 'to' endpoint behind Advanced disclosure
- Scope radio size reset CSS to fix WP admin stylesheet interference
---
 src/spotmap/components/TimeToolbarGroup.jsx | 161 +++++++++++++-------
 1 file changed, 105 insertions(+), 56 deletions(-)

diff --git a/src/spotmap/components/TimeToolbarGroup.jsx b/src/spotmap/components/TimeToolbarGroup.jsx
index e765c7c..4569ff7 100644
--- a/src/spotmap/components/TimeToolbarGroup.jsx
+++ b/src/spotmap/components/TimeToolbarGroup.jsx
@@ -5,9 +5,10 @@ import {
     DateTimePicker,
     Modal,
     Notice,
-    RadioControl,
     ToolbarButton,
     ToolbarGroup,
+    __experimentalToggleGroupControl as ToggleGroupControl,
+    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
     __experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 import { calendar } from '@wordpress/icons';
@@ -165,48 +166,44 @@ const UNIT_CONTROL_STYLES = `
     width: 40px !important;
     min-width: 40px !important;
 }
+.spotmap-time-filter input[type="radio"] {
+    width: 16px !important;
+    height: 16px !important;
+    min-width: 16px !important;
+    margin: 0 !important;
+    flex-shrink: 0;
+}
 `;
 
 // ─── Sub-components ─────────────────────────────────────────────────────────
 
-function EndpointSection( { label, state, onChange } ) {
+/**
+ * One endpoint (from/to) inside the date-range section.
+ *
+ * When advancedRelative is true the "relative" option is hidden behind an
+ * "Advanced" disclosure (used for the "to" endpoint, which is a rare case).
+ *
+ * @param {Object}   props
+ * @param {string}   props.label            Section heading.
+ * @param {Object}   props.state            Endpoint state.
+ * @param {Function} props.onChange         Called with updated state.
+ * @param {boolean}  [props.advancedRelative=false]
+ */
+function EndpointSection( {
+    label,
+    state,
+    onChange,
+    advancedRelative = false,
+} ) {
+    const [ showAdvanced, setShowAdvanced ] = useState(
+        () => advancedRelative && state.type === 'relative'
+    );
     const idPrefix = label.toLowerCase().replace( /\s+/g, '-' );
     const set = ( type ) => onChange( { ...state, type } );
-    return (
-        <fieldset style={ { border: 'none', margin: 0, padding: 0 } }>
-            <legend
-                style={ {
-                    fontWeight: 600,
-                    fontSize: '11px',
-                    textTransform: 'uppercase',
-                    letterSpacing: '0.04em',
-                    marginBottom: '8px',
-                } }
-            >
-                { label }
-            </legend>
-
-            { /* No filter */ }
-            <label
-                htmlFor={ `${ idPrefix }-none` }
-                style={ {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '8px',
-                    marginBottom: '6px',
-                    cursor: 'pointer',
-                } }
-            >
-                <input
-                    id={ `${ idPrefix }-none` }
-                    type="radio"
-                    checked={ state.type === 'none' }
-                    onChange={ () => set( 'none' ) }
-                />
-                { __( 'No filter' ) }
-            </label>
+    const clear = () => onChange( { ...state, type: 'none' } );
 
-            { /* Relative */ }
+    const relativeOption = (
+        <>
             <label
                 htmlFor={ `${ idPrefix }-relative` }
                 style={ {
@@ -223,7 +220,9 @@ function EndpointSection( { label, state, onChange } ) {
                     checked={ state.type === 'relative' }
                     onChange={ () => set( 'relative' ) }
                 />
-                { __( 'Relative (last N…)' ) }
+                { advancedRelative
+                    ? __( 'Relative to now — exclude the last N…' )
+                    : __( 'Relative (last N…)' ) }
             </label>
             { state.type === 'relative' && (
                 <div
@@ -248,8 +247,38 @@ function EndpointSection( { label, state, onChange } ) {
                     />
                 </div>
             ) }
+        </>
+    );
+
+    return (
+        <div>
+            <div
+                style={ {
+                    display: 'flex',
+                    alignItems: 'baseline',
+                    justifyContent: 'space-between',
+                    marginBottom: '8px',
+                } }
+            >
+                <span
+                    style={ {
+                        fontWeight: 600,
+                        fontSize: '11px',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.04em',
+                    } }
+                >
+                    { label }
+                </span>
+                { state.type !== 'none' && (
+                    <Button isSmall variant="tertiary" onClick={ clear }>
+                        { __( 'Reset' ) }
+                    </Button>
+                ) }
+            </div>
+
+            { ! advancedRelative && relativeOption }
 
-            { /* Specific */ }
             <label
                 htmlFor={ `${ idPrefix }-specific` }
                 style={ {
@@ -280,7 +309,26 @@ function EndpointSection( { label, state, onChange } ) {
                     />
                 </div>
             ) }
-        </fieldset>
+
+            { advancedRelative && (
+                <div style={ { marginTop: '8px' } }>
+                    <Button
+                        variant="link"
+                        onClick={ () => setShowAdvanced( ! showAdvanced ) }
+                        style={ { fontSize: '12px' } }
+                    >
+                        { showAdvanced
+                            ? __( '▾ Advanced' )
+                            : __( '▸ Advanced' ) }
+                    </Button>
+                    { showAdvanced && (
+                        <div style={ { marginTop: '8px' } }>
+                            { relativeOption }
+                        </div>
+                    ) }
+                </div>
+            ) }
+        </div>
     );
 }
 
@@ -395,8 +443,6 @@ export default function TimeToolbarGroup( { dateRange, onChangeDateRange } ) {
         setIsOpen( false );
     };
 
-    const hasFilter = !! ( from || to );
-
     return (
         <ToolbarGroup>
             <ToolbarButton
@@ -416,32 +462,34 @@ export default function TimeToolbarGroup( { dateRange, onChangeDateRange } ) {
                 >
                     <style>{ UNIT_CONTROL_STYLES }</style>
                     <div
+                        className="spotmap-time-filter"
                         style={ {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: '20px',
                         } }
                     >
-                        <RadioControl
+                        { /* Mode toggle */ }
+                        <ToggleGroupControl
+                            __nextHasNoMarginBottom
+                            hideLabelFromVision
+                            isBlock
                             label={ __( 'Filter mode' ) }
-                            selected={ localMode }
-                            options={ [
-                                {
-                                    label: __(
-                                        'Date range (start and end separately)'
-                                    ),
-                                    value: 'range',
-                                },
-                                {
-                                    label: __( 'Single day' ),
-                                    value: 'single-day',
-                                },
-                            ] }
+                            value={ localMode }
                             onChange={ ( mode ) => {
                                 setLocalMode( mode );
                                 setShowErrors( false );
                             } }
-                        />
+                        >
+                            <ToggleGroupControlOption
+                                value="single-day"
+                                label={ __( 'Single Day' ) }
+                            />
+                            <ToggleGroupControlOption
+                                value="range"
+                                label={ __( 'Date Range' ) }
+                            />
+                        </ToggleGroupControl>
 
                         { localMode === 'single-day' && (
                             <div>
@@ -490,6 +538,7 @@ export default function TimeToolbarGroup( { dateRange, onChangeDateRange } ) {
                                         setToState( s );
                                         setShowErrors( false );
                                     } }
+                                    advancedRelative
                                 />
                             </>
                         ) }