Add unread message separator

Closes: https://todo.sr.ht/~emersion/gamja/4

components/app.js

@@ -223,8 +223,12 @@ export default class App extends Component {
 	}
 
 	switchBuffer(name) {
+		var lastReadReceipt = this.getReceipt(name, ReceiptType.READ);
 		// TODO: only mark as read if user scrolled at the bottom
-		this.setBufferState(name, { unread: Unread.NONE });
+		this.setBufferState(name, {
+			unread: Unread.NONE,
+			lastReadReceipt,
+		});
 		this.setState({ activeBuffer: name }, () => {
 			if (this.composer.current) {
 				this.composer.current.focus();
@@ -329,13 +333,15 @@ export default class App extends Component {
 		this.setBufferState(bufName, (buf, state) => {
 			// TODO: set unread if scrolled up
 			var unread = buf.unread;
+			var lastReadReceipt = buf.lastReadReceipt;
 			if (state.activeBuffer != buf.name) {
 				unread = Unread.union(unread, msgUnread);
 			} else {
 				this.setReceipt(bufName, ReceiptType.READ, msg);
+				lastReadReceipt = this.getReceipt(bufName, ReceiptType.READ);
 			}
 			var messages = insertMessage(buf.messages, msg);
-			return { messages, unread };
+			return { messages, unread, lastReadReceipt };
 		});
 	}
 

components/buffer.js

@@ -181,13 +181,17 @@ class DateSeparator extends Component {
 		var DD = date.getDate().toString().padStart(2, "0");
 		var text = `${YYYY}-${MM}-${DD}`;
 		return html`
-			<div class="date-separator">
+			<div class="separator date-separator">
 				${text}
 			</div>
 		`;
 	}
 }
 
+function UnreadSeparator(props) {
+	return html`<div class="separator unread-separator">New messages</div>`;
+}
+
 function sameDate(d1, d2) {
 	return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
 }
@@ -198,17 +202,24 @@ export default class Buffer extends Component {
 	}
 
 	render() {
-		if (!this.props.buffer) {
+		var buf = this.props.buffer;
+		if (!buf) {
 			return null;
 		}
 
 		var children = [];
-		if (this.props.buffer.type == BufferType.SERVER) {
+		if (buf.type == BufferType.SERVER) {
 			children.push(html`<${NotificationNagger}/>`);
 		}
 
+		var hasUnreadSeparator = false;
 		var prevDate = new Date();
-		this.props.buffer.messages.forEach((msg) => {
+		buf.messages.forEach((msg) => {
+			if (!hasUnreadSeparator && buf.type != BufferType.SERVER && buf.lastReadReceipt && msg.tags.time > buf.lastReadReceipt.time) {
+				children.push(html`<${UnreadSeparator} key="unread"/>`);
+				hasUnreadSeparator = true;
+			}
+
 			var date = new Date(msg.tags.time);
 			if (!sameDate(prevDate, date)) {
 				children.push(html`<${DateSeparator} key=${"date-" + date} date=${date}/>`);
@@ -216,7 +227,7 @@ export default class Buffer extends Component {
 			prevDate = date;
 
 			children.push(html`
-				<${LogLine} key=${"msg-" + msg.key} message=${msg} buffer=${this.props.buffer} onNickClick=${this.props.onNickClick}/>
+				<${LogLine} key=${"msg-" + msg.key} message=${msg} buffer=${buf} onNickClick=${this.props.onNickClick}/>
 			`);
 		});
 

style.css

@@ -239,15 +239,29 @@ details summary {
 	color: #ec273e;
 }
 
-#buffer .date-separator {
+#buffer .separator {
 	display: flex;
 	align-items: center;
 	text-align: center;
+	text-transform: lowercase;
+	font-variant: small-caps;
 }
-#buffer .date-separator::before, #buffer .date-separator::after {
+#buffer .separator::before, #buffer .separator::after {
 	content: "";
 	flex: 1;
-	border-bottom: 1px solid #ddd;
+	border-bottom: 1px solid transparent;
+}
+#buffer .date-separator {
+	color: #ddd;
+}
+#buffer .date-separator::before, #buffer .date-separator::after {
+	border-color: #ddd;
+}
+#buffer .unread-separator {
+	color: #ff3535;
+}
+#buffer .unread-separator::before, #buffer .unread-separator::after {
+	border-color: #ff3535;
 }
 
 #error-msg {