timestamps

src/components/Spoiler.tsx

@@ -9,12 +9,12 @@ const Container = styled.div`
 	transition: background-color 0.1s ease;
 
 	&:hover {
-		background-color: hsl(var(--background-tertiary-hsl) / 0.5);
+		background-color: hsl(var(--background-tertiary-hsl) / 0.3);
 		cursor: pointer;
 	}
 
 	&.visible {
-		background-color: hsl(var(--background-tertiary-hsl) / 0.5);
+		background-color: hsl(var(--background-tertiary-hsl) / 0.3);
 		cursor: pointer;
 
 		// target child span
@@ -30,17 +30,17 @@ const Text = styled.span`
 `;
 
 interface Props {
-	content: string;
+	children: React.ReactNode;
 }
 
-function Spoiler({ content }: Props) {
+function Spoiler({ children }: Props) {
 	const [shown, setShown] = React.useState(false);
 
 	const show = () => setShown(true);
 
 	return (
 		<Container className={shown ? "visible" : undefined}>
-			<Text onClick={show}>{content}</Text>
+			<Text onClick={show}>{children}</Text>
 		</Container>
 	);
 }

src/components/markdown/MarkdownRenderer.tsx

@@ -8,6 +8,7 @@ import CodeBlock from "../Codeblock";
 import Link from "../Link";
 import Spoiler from "../Spoiler";
 import { MarkdownProps } from "./Markdown";
+import Timestamp from "./Timestamp";
 
 const Container = styled.div`
 	// remove the excessive left padding, and margin in lists
@@ -129,11 +130,13 @@ const customRenderer: Partial<ReactRenderer> = {
 		if (spoilerRe.test(text)) {
 			// get content inside spoiler tags
 			const spoilerContent = text.match(spoilerRe)![0].slice(2, -2);
-			return <Spoiler content={spoilerContent} />;
+			return <Spoiler children={spoilerContent} />;
 		}
 
-		if (FormattingPatterns.Timestamp.test(text)) {
-			return "timestamp baaaaby";
+		const match = text.match(FormattingPatterns.Timestamp);
+		if (match) {
+			const { timestamp, style } = match.groups || {};
+			return <Timestamp timestamp={timestamp} style={style} />;
 		}
 
 		return text;

src/components/markdown/Timestamp.tsx

@@ -0,0 +1,53 @@
+import dayjs from "dayjs";
+import { memo } from "react";
+import styled from "styled-components";
+import Tooltip from "../Tooltip";
+
+const Container = styled.div`
+	background-color: hsl(var(--background-tertiary-hsl) / 0.3);
+	padding: 2px;
+	border-radius: 4px;
+	width: fit-content;
+`;
+
+interface Props {
+	timestamp: string;
+	style: string;
+}
+
+function Timestamp({ timestamp, style }: Props) {
+	const date = dayjs.unix(Number(timestamp));
+
+	let value = "";
+	switch (style) {
+		case "t":
+			value = date.format("hh:mm");
+			break;
+		case "T":
+			value = date.format("hh:mm:ss");
+			break;
+		case "R":
+			value = date.fromNow();
+			break;
+		case "D":
+			value = date.format("DD MMMM YYYY");
+			break;
+		case "F":
+			value = date.format("dddd, DD MMMM YYYY hh:mm");
+			break;
+		case "f":
+		default:
+			value = date.format("DD MMMM YYYY hh:mm");
+			break;
+	}
+
+	return (
+		<Container>
+			<Tooltip title={date.format("dddd, MMMM MM, h:mm A")} placement="top">
+				<span>{value}</span>
+			</Tooltip>
+		</Container>
+	);
+}
+
+export default memo(Timestamp);

src/components/messaging/MessageBase.tsx

@@ -94,13 +94,16 @@ export const MessageDetails = observer(({ message, position }: { message: Messag
 		if (message instanceof Message && message.edited_timestamp) {
 			return (
 				<div className="messageTimestampWrapper">
-					<Tooltip title={dayjs(message.timestamp).format("dddd, MMMM MM, h:mm A")}>
+					<Tooltip title={dayjs(message.timestamp).format("dddd, MMMM MM, h:mm A")} placement="top">
 						<time className="copyTime" dateTime={message.edited_timestamp.toISOString()}>
 							{dayjs(message.edited_timestamp).format("h:mm A")}
 						</time>
 					</Tooltip>
 					<span className="edited">
-						<Tooltip title={dayjs(message.edited_timestamp).format("dddd, MMMM MM, h:mm A")}>
+						<Tooltip
+							title={dayjs(message.edited_timestamp).format("dddd, MMMM MM, h:mm A")}
+							placement="top"
+						>
 							<span>(edited)</span>
 						</Tooltip>
 					</span>