[timestamp-tweaks] far better formatting options (fixes #5)

plugins/timezones/index.js

@@ -1,5 +1,8 @@
 import { injectLocalTime, preflightInjection } from "./tzInjection";
-import { injectAbsoluteTime, preflightAbsoluteTime } from "./absInjection";
+import {
+	injectStockFormat,
+	preflightStockFormat,
+} from "./stockFormatInjection";
 
 const {
 	plugin: { store },
@@ -10,23 +13,30 @@ const {
 
 store.tz ??= true;
 store.tzdb ??= true;
-store.abs ??= false;
-store.absUtc ??= false;
+store.sfmt ??= ""; // stock format override
+store.sutc ??= false; // show stock format in UTC
+store.rfmt ??= ""; // relative format override
 store.savedTzs ??= {};
 
+// migrations:
+if (store.abs) store.sfmt = "%Y-%m-%d %H:%M:%S";
+if (store.absUtc) store.sutc = true;
+delete store.abs;
+delete store.absUtc;
+
 async function injectTimestamp(el) {
 	const shouldInjectTz = store.tz && preflightInjection(el);
-	const shouldInjectAbs = store.abs && preflightAbsoluteTime(el);
+	const shouldInjectSFmt = store.sfmt && preflightStockFormat(el);
 
-	if (!shouldInjectTz && !shouldInjectAbs) return;
+	if (!shouldInjectTz && !shouldInjectSFmt) return;
 
 	const msg = reactFiberWalker(getFiber(el), "message", true)?.memoizedProps
 		?.message;
 
 	const date = msg?.timestamp;
 	if (!date) return;
 
-	if (shouldInjectAbs) injectAbsoluteTime(el, new Date(date));
+	if (shouldInjectSFmt) injectStockFormat(el, new Date(date));
 	if (shouldInjectTz) await injectLocalTime(msg, el, new Date(date));
 }
 

plugins/timezones/stockFormatInjection.js

@@ -0,0 +1,19 @@
+// changes the format of stock timestamps
+
+import { formatAsIs } from "./timezones";
+
+const {
+	plugin: { store },
+} = shelter;
+
+export const preflightStockFormat = (el) =>
+	el.dataset.fmttime !== el.childNodes[1].textContent;
+
+export function injectStockFormat(el, date) {
+	if (store.sutc) {
+		date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
+	}
+	const fmttime = formatAsIs(date, store.sfmt);
+	el.dataset.fmttime = fmttime;
+	el.childNodes[1].textContent = fmttime;
+}

plugins/timezones/tzInjection.jsx

@@ -67,10 +67,15 @@ export async function injectLocalTime(msg, el, date) {
 	if (!timezone) return;
 
 	const origFmt = formatAsIs(date, "%H:%M");
-	const tzFmt = formatInTimeZone(date, timezone, "%H:%M");
+	const tzFmtNormal = formatInTimeZone(date, timezone, "%H:%M");
 
 	// don't show local time for those in your own TZ
-	if (origFmt === tzFmt) return;
+	if (origFmt === tzFmtNormal) return;
+
+	// show in the user's preferred format
+	const tzFmt = !store.rfmt
+		? tzFmtNormal
+		: formatInTimeZone(date, timezone, store.rfmt);
 
 	el.parentElement.append(<time class="ys_tz"> (Theirs: {tzFmt})</time>);
 }

plugins/timezones/ui/index.jsx

@@ -2,35 +2,75 @@ import UserMan from "./UserMan";
 
 const {
 	plugin: { store },
-	ui: { SwitchItem, Button, LinkButton, openModal },
+	ui: {
+		SwitchItem,
+		Button,
+		LinkButton,
+		TextBox,
+		Header,
+		HeaderTags,
+		Divider,
+		Text,
+		openModal,
+	},
+	solid: { Show },
 } = shelter;
 
 export default () => (
 	<>
-		<SwitchItem value={store.tz} onChange={(v) => (store.tz = v)}>
+		<SwitchItem value={store.tz} onChange={(v) => (store.tz = v)} hideBorder>
 			Show users' local time (parses timezones from bios)
 		</SwitchItem>
+
 		<SwitchItem
 			disabled={!store.tz}
 			value={store.tzdb}
 			onChange={(v) => (store.tzdb = v)}
+			hideBorder
 		>
 			Prefer to query{" "}
 			<LinkButton href="https://timezonedb.catvibers.me/?client_mod=shelter">
 				TZDB
 			</LinkButton>
 		</SwitchItem>
-		<SwitchItem value={store.abs} onChange={(v) => (store.abs = v)}>
-			Show times in absolute ISO form (YYYY-MM-DD HH:MM:SS) every time, instead
-			of relative times
-		</SwitchItem>
-		<SwitchItem
-			disabled={!store.abs}
-			value={store.absUtc}
-			onChange={(v) => (store.absUtc = v)}
+
+		<Header tag={HeaderTags.H5}>
+			Override the <LinkButton href="//strftime.org">format</LinkButton> of all
+			message timestamps
+		</Header>
+		<TextBox
+			value={store.sfmt}
+			onInput={(v) => (store.sfmt = v)}
+			placeholder="(no override)"
+		/>
+		<Text style={{ color: "var(--header-secondary)", "font-size": "14px" }}>
+			Use <code>%Y-%m-%d %H:%M:%S</code> for ISO-ish.
+		</Text>
+
+		<Show
+			keyed
+			when={store.sfmt}
+			fallback={<div style="margin-bottom: 1rem" />}
 		>
-			Show absolute times in UTC, not local timezone
-		</SwitchItem>
+			<div style="margin-bottom: .5rem" />
+			<SwitchItem
+				value={store.sutc}
+				onChange={(v) => (store.sutc = v)}
+				hideBorder
+			>
+				Show timestamps in UTC, not <span style="font-style: italic">your</span>{" "}
+				timezone
+			</SwitchItem>
+		</Show>
+
+		<Header tag={HeaderTags.H5}>Custom format for relative timestamps</Header>
+		<TextBox
+			value={store.rfmt}
+			onInput={(v) => (store.rfmt = v)}
+			placeholder="%H:%M"
+		/>
+		<Divider mt mb />
+
 		<Button onClick={() => openModal(UserMan)} grow>
 			Manage manual user TZs
 		</Button>