make date header a bit more accessible

src/domain/session/room/timeline/tiles/DateTile.ts

@@ -17,6 +17,7 @@ import type {Options} from "../../../../ViewModel";
 export class DateTile extends ViewModel implements ITile<BaseEventEntry> {
     private _emitUpdate?: EmitUpdateFn;
     private _dateString?: string;
+    private _machineReadableString?: string;
     
     constructor(private _firstTileInDay: ITile<BaseEventEntry>, options: Options) {
         super(options);
@@ -46,13 +47,20 @@ export class DateTile extends ViewModel implements ITile<BaseEventEntry> {
         return this.compareEntry(tile.upperEntry);
     }
 
-    get date(): string {
+    get relativeDate(): string {
         if (!this._dateString) {
             this._dateString = this.timeFormatter.formatRelativeDate(new Date(this.refEntry.timestamp));
         }
         return this._dateString;
     }
 
+    get machineReadableDate(): string {
+        if (!this._machineReadableString) {
+            this._machineReadableString =  this.timeFormatter.formatMachineReadableDate(new Date(this.refEntry.timestamp));
+        }
+        return this._machineReadableString;
+    }
+
     get shape(): TileShape {
         return TileShape.DateHeader;
     }
@@ -131,8 +139,9 @@ export class DateTile extends ViewModel implements ITile<BaseEventEntry> {
         this._firstTileInDay = next;
         const prevDateString = this._dateString;
         this._dateString = undefined;
-        if (prevDateString && prevDateString !== this.date) {
+        this._machineReadableString = undefined;
-            this._emitUpdate?.(this, "date");
+        if (prevDateString && prevDateString !== this.relativeDate) {
+            this._emitUpdate?.(this, "relativeDate");
         }
     }
 

src/platform/types/types.ts

@@ -46,4 +46,5 @@ export type File = {
 
 export interface ITimeFormatter {
     formatRelativeDate(date: Date): string;
+    formatMachineReadableDate(date: Date): string;
 }

src/platform/web/dom/TimeFormatter.ts

@@ -48,6 +48,9 @@ export class TimeFormatter implements ITimeFormatter {
             day: 'numeric'
         });
     }
+    formatMachineReadableDate(date: Date): string {
+        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;    
+    }
 
     formatRelativeDate(date: Date): string {
         let daysDiff = Math.floor((date.getTime() - this.todayMidnight.getTime()) / TimeScope.Day);

src/platform/web/ui/css/themes/element/timeline.css

@@ -428,4 +428,5 @@ only loads when the top comes into view*/
     font-weight: bold;
     padding: 12px 4px;
     text-align: center;
+    font-size: 1.5rem;
 }

src/platform/web/ui/session/room/timeline/DateHeaderView.ts

@@ -25,7 +25,7 @@ export class DateHeaderView extends TemplateView<DateTile> {
     }
 
     render(t, vm) {
-        return t.div({className: "DateHeader"}, t.time(vm.date));
+        return t.h2({className: "DateHeader"}, t.time({dateTime: vm.machineReadableDate}, vm.relativeDate));
     }
 
     /* This is called by the parent ListView, which just has 1 listener for the whole list */