From 0f2d1c3e7175e4b767b146602fd42f283679d87a Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Thu, 13 Aug 2020 19:00:56 +0200
Subject: [PATCH] Add date separators to buffer

Closes: https://todo.sr.ht/~emersion/gamja/5
---
 components/buffer.js | 49 ++++++++++++++++++++++++++++++++++++++------
 style.css            | 11 ++++++++++
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/components/buffer.js b/components/buffer.js
index 1924e5f..30422e3 100644
--- a/components/buffer.js
+++ b/components/buffer.js
@@ -161,6 +161,33 @@ class NotificationNagger extends Component {
 	}
 }
 
+class DateSeparator extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+	shouldComponentUpdate(nextProps) {
+		return this.props.date.getTime() !== nextProps.date.getTime();
+	}
+
+	render() {
+		var date = this.props.date;
+		var YYYY = date.getFullYear().toString().padStart(4, "0");
+		var MM = (date.getMonth() + 1).toString().padStart(2, "0");
+		var DD = date.getDate().toString().padStart(2, "0");
+		var text = `${YYYY}-${MM}-${DD}`;
+		return html`
+			<div class="date-separator">
+				${text}
+			</div>
+		`;
+	}
+}
+
+function sameDate(d1, d2) {
+	return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+}
+
 export default class Buffer extends Component {
 	shouldComponentUpdate(nextProps) {
 		return this.props.buffer !== nextProps.buffer;
@@ -171,17 +198,27 @@ export default class Buffer extends Component {
 			return null;
 		}
 
-		var notifNagger = null;
+		var children = [];
 		if (this.props.buffer.type == BufferType.SERVER) {
-			notifNagger = html`<${NotificationNagger}/>`;
+			children.push(html`<${NotificationNagger}/>`);
 		}
 
+		var prevDate = new Date();
+		this.props.buffer.messages.forEach((msg) => {
+			var date = new Date(msg.tags.time);
+			if (!sameDate(prevDate, date)) {
+				children.push(html`<${DateSeparator} key=${"date-" + date} date=${date}/>`);
+			}
+			prevDate = date;
+
+			children.push(html`
+				<${LogLine} key=${"msg-" + msg.key} message=${msg} buffer=${this.props.buffer} onNickClick=${this.props.onNickClick}/>
+			`);
+		});
+
 		return html`
 			<div class="logline-list">
-				${notifNagger}
-				${this.props.buffer.messages.map((msg) => html`
-					<${LogLine} key=${msg.key} message=${msg} buffer=${this.props.buffer} onNickClick=${this.props.onNickClick}/>
-				`)}
+				${children}
 			</div>
 		`;
 	}
diff --git a/style.css b/style.css
index 624a922..24ca439 100644
--- a/style.css
+++ b/style.css
@@ -239,6 +239,17 @@ details summary {
 	color: #ec273e;
 }
 
+#buffer .date-separator {
+	display: flex;
+	align-items: center;
+	text-align: center;
+}
+#buffer .date-separator::before, #buffer .date-separator::after {
+	content: "";
+	flex: 1;
+	border-bottom: 1px solid #ddd;
+}
+
 #error-msg {
 	color: white;
 	background-color: red;