add date seperator

src/webpage/message.ts

@@ -307,9 +307,15 @@ class Message extends SnowFlake {
 			this.channel.idToPrev.delete(next);
 		}
 		if (prev) {
-			const prevmessage = this.channel.messages.get(prev);
+			const prevMessage = this.channel.messages.get(prev);
-			if (prevmessage) {
+			if (prevMessage) {
-				prevmessage.generateMessage();
+				prevMessage.generateMessage();
+			}
+		}
+		if (next) {
+			const nextMessage = this.channel.messages.get(next);
+			if (nextMessage) {
+				nextMessage.generateMessage();
 			}
 		}
 		if (this.channel.lastmessage === this || this.channel.lastmessageid === this.id) {
@@ -368,6 +374,28 @@ class Message extends SnowFlake {
 		const build = document.createElement("div");
 
 		build.classList.add("flexltr", "message");
+		if (premessage && !dupe) {
+			const thisTime = new Date(this.getUnixTime());
+			const prevTime = new Date(premessage.getUnixTime());
+			const datelineNeeded =
+				thisTime.getDay() !== prevTime.getDay() ||
+				thisTime.getMonth() !== prevTime.getMonth() ||
+				thisTime.getFullYear() !== prevTime.getFullYear();
+			if (datelineNeeded) {
+				const dateline = document.createElement("div");
+				dateline.classList.add("flexltr", "dateline");
+				dateline.append(document.createElement("hr"));
+				const span = document.createElement("span");
+				span.innerText = Intl.DateTimeFormat(I18n.lang, {
+					year: "numeric",
+					month: "long",
+					day: "2-digit",
+				}).format(thisTime);
+				dateline.append(span);
+				dateline.append(document.createElement("hr"));
+				div.append(dateline);
+			}
+		}
 		div.classList.remove("zeroheight");
 		if (this.author.relationshipType === 2) {
 			if (ignoredblock) {

src/webpage/style.css

@@ -118,6 +118,17 @@ video {
 	max-height: 50svh;
 	max-width: 100%;
 }
+.dateline {
+	hr {
+		width: 100%;
+		height: 1px;
+		margin: 0.05in;
+	}
+	span {
+		flex-shrink: 0;
+	}
+	align-items: center;
+}
 iframe {
 	/* max-height: 50svh; */
 	max-width: 100%;
@@ -1388,8 +1399,8 @@ img.embedimg {
 }
 img.authorEmbedImg {
 	max-width: 20px;
-	padding-right:4px;
+	padding-right: 4px;
-	border-radius:1in;
+	border-radius: 1in;
 }
 img.bigembedimg {
 	height: auto !important;
@@ -1590,15 +1601,15 @@ img.bigembedimg {
 	width: 100%;
 	object-fit: cover;
 }
-.badge{
+.badge {
-	display:inline-flex;
+	display: inline-flex;
-	padding:2px;
+	padding: 2px;
-	border:solid 2px var(--black);
+	border: solid 2px var(--black);
-	border-radius:8px;
+	border-radius: 8px;
-	img{
+	img {
 		object-fit: contain;
-		width:18px;
+		width: 18px;
-		height:18px;
+		height: 18px;
 	}
 }
 .infosection {
@@ -1626,7 +1637,7 @@ img.bigembedimg {
 }
 .tag {
 	margin: 4px 0;
-	font-size: 0.9em !important;!i;!;
+	font-size: 0.9em !important;
 	color: var(--secondary-text);
 }
 .pronouns {