Add a setting for seconds in timestamps

components/app.js

@@ -17,7 +17,7 @@ import ScrollManager from "./scroll-manager.js";
 import Dialog from "./dialog.js";
 import { html, Component, createRef } from "../lib/index.js";
 import { strip as stripANSI } from "../lib/ansi.js";
-import { SERVER_BUFFER, BufferType, ReceiptType, ServerStatus, Unread, BufferEventsDisplayMode, State, getServerName, receiptFromMessage, isReceiptBefore, isMessageBeforeReceipt } from "../state.js";
+import { SERVER_BUFFER, BufferType, ReceiptType, ServerStatus, Unread, BufferEventsDisplayMode, State, getServerName, receiptFromMessage, isReceiptBefore, isMessageBeforeReceipt, SettingsContext } from "../state.js";
 import commands from "../commands.js";
 import { setup as setupKeybindings } from "../keybindings.js";
 import * as store from "../store.js";
@@ -1910,7 +1910,7 @@ export default class App extends Component {
 			commandOnly = true;
 		}
 
-		return html`
+		let app = html`
 			<section
 					id="buffer-list"
 					class=${this.state.openPanels.bufferList ? "expand" : ""}
@@ -1963,5 +1963,11 @@ export default class App extends Component {
 			${dialog}
 			${error}
 		`;
+
+		return html`
+			<${SettingsContext.Provider} value=${this.state.settings}>
+				${app}
+			</>
+		`;
 	}
 }

components/buffer.js

@@ -2,7 +2,7 @@ import { html, Component } from "../lib/index.js";
 import linkify from "../lib/linkify.js";
 import * as irc from "../lib/irc.js";
 import { strip as stripANSI } from "../lib/ansi.js";
-import { BufferType, ServerStatus, BufferEventsDisplayMode, getNickURL, getChannelURL, getMessageURL, isMessageBeforeReceipt } from "../state.js";
+import { BufferType, ServerStatus, BufferEventsDisplayMode, getNickURL, getChannelURL, getMessageURL, isMessageBeforeReceipt, SettingsContext } from "../state.js";
 import * as store from "../store.js";
 import Membership from "./membership.js";
 
@@ -27,15 +27,22 @@ function Nick(props) {
 	`;
 }
 
-function Timestamp({ date, url }) {
+function _Timestamp({ date, url, showSeconds }) {
 	if (!date) {
-		return html`<spam class="timestamp">--:--:--</span>`;
+		let timestamp = "--:--";
+		if (showSeconds) {
+			timestamp += ":--";
+		}
+		return html`<spam class="timestamp">${timestamp}</span>`;
 	}
 
 	let hh = date.getHours().toString().padStart(2, "0");
 	let mm = date.getMinutes().toString().padStart(2, "0");
+	let timestamp = `${hh}:${mm}`;
+	if (showSeconds) {
 		let ss = date.getSeconds().toString().padStart(2, "0");
-	let timestamp = `${hh}:${mm}:${ss}`;
+		timestamp += ":" + ss;
+	}
 	return html`
 		<a
 			href=${url}
@@ -48,6 +55,16 @@ function Timestamp({ date, url }) {
 	`;
 }
 
+function Timestamp(props) {
+	return html`
+		<${SettingsContext.Consumer}>
+			${(settings) => html`
+				<${_Timestamp} ...${props} showSeconds=${settings.secondsInTimestamps}/>
+			`}
+		</>
+	`;
+}
+
 /**
  * Check whether a message can be folded.
  *

components/settings-form.js

@@ -6,6 +6,7 @@ export default class SettingsForm extends Component {
 	constructor(props) {
 		super(props);
 
+		this.state.secondsInTimestamps = props.settings.secondsInTimestamps;
 		this.state.bufferEvents = props.settings.bufferEvents;
 
 		this.handleChange = this.handleChange.bind(this);
@@ -28,6 +29,16 @@ export default class SettingsForm extends Component {
 	render() {
 		return html`
 			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+				<label>
+					<input
+						type="checkbox"
+						name="secondsInTimestamps"
+						checked=${this.state.secondsInTimestamps}
+					/>
+					Show seconds in time indicator
+				</label>
+				<br/><br/>
+
 				<label>
 					<input
 						type="radio"

state.js

@@ -1,5 +1,6 @@
 import * as irc from "./lib/irc.js";
 import Client from "./lib/client.js";
+import { createContext } from "../lib/index.js";
 
 export const SERVER_BUFFER = "*";
 
@@ -40,6 +41,8 @@ export const BufferEventsDisplayMode = {
 	HIDE: "hide",
 };
 
+export const SettingsContext = createContext("settings");
+
 export function getNickURL(nick) {
 	return "irc:///" + encodeURIComponent(nick) + ",isuser";
 }
@@ -216,6 +219,7 @@ export const State = {
 			activeBuffer: null,
 			bouncerNetworks: new Map(),
 			settings: {
+				secondsInTimestamps: true,
 				bufferEvents: BufferEventsDisplayMode.FOLD,
 			},
 		};