~emersion/gamja

57ca2c44adef8e8bf1a3714ef0c186e01a4a3f35 — Simon Ser 4 months ago 0b03f9d
Add unread message separator

Closes: https://todo.sr.ht/~emersion/gamja/4
3 files changed, 41 insertions(+), 10 deletions(-)

M components/app.js
M components/buffer.js
M style.css
M components/app.js => components/app.js +8 -2
@@ 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 };
		});
	}


M components/buffer.js => components/buffer.js +16 -5
@@ 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}/>
			`);
		});


M style.css => style.css +17 -3
@@ 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 {