From c538f5dbb14e3a647be8da93eda28e6a2af054e3 Mon Sep 17 00:00:00 2001
From: Bruno Windels <274386+bwindels@users.noreply.github.com>
Date: Fri, 25 Nov 2022 16:31:44 +0100
Subject: [PATCH] make date header a bit more accessible

---
 .../session/room/timeline/tiles/DateTile.ts       | 15 ++++++++++++---
 src/platform/types/types.ts                       |  1 +
 src/platform/web/dom/TimeFormatter.ts             |  3 +++
 .../web/ui/css/themes/element/timeline.css        |  1 +
 .../ui/session/room/timeline/DateHeaderView.ts    |  2 +-
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/DateTile.ts b/src/domain/session/room/timeline/tiles/DateTile.ts
index d8dac808..590333b8 100644
--- a/src/domain/session/room/timeline/tiles/DateTile.ts
+++ b/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._emitUpdate?.(this, "date");
+        this._machineReadableString = undefined;
+        if (prevDateString && prevDateString !== this.relativeDate) {
+            this._emitUpdate?.(this, "relativeDate");
         }
     }
 
diff --git a/src/platform/types/types.ts b/src/platform/types/types.ts
index 5e982545..9147f6b8 100644
--- a/src/platform/types/types.ts
+++ b/src/platform/types/types.ts
@@ -46,4 +46,5 @@ export type File = {
 
 export interface ITimeFormatter {
     formatRelativeDate(date: Date): string;
+    formatMachineReadableDate(date: Date): string;
 }
\ No newline at end of file
diff --git a/src/platform/web/dom/TimeFormatter.ts b/src/platform/web/dom/TimeFormatter.ts
index ab9d454e..3f354713 100644
--- a/src/platform/web/dom/TimeFormatter.ts
+++ b/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);
diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css
index 87b3e8c7..16597a7b 100644
--- a/src/platform/web/ui/css/themes/element/timeline.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/platform/web/ui/session/room/timeline/DateHeaderView.ts b/src/platform/web/ui/session/room/timeline/DateHeaderView.ts
index f9159c5e..3d640568 100644
--- a/src/platform/web/ui/session/room/timeline/DateHeaderView.ts
+++ b/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 */