fix(regression): ensure compact-mode and message-body-only work well together

Author: favna

packages/core/demo/index.html

@@ -170,27 +170,28 @@ <h3 class="title">Compact mode</h3>
 				<h3 class="title">With subsequent messages</h3>
 				<discord-messages>
 					<discord-message profile="favna">I can send multiple messages with my avatar showing only once</discord-message>
-					<discord-message profile="favna" message-body-only message-body-only-time="12:39"
+					<discord-message profile="favna" message-body-only timestamp="12:39"
 						>That's how Discord handles multiple messages from the same author as well</discord-message
 					>
-					<discord-message profile="favna" message-body-only
+					<discord-message profile="favna" message-body-only timestamp="12:39"
 						>Just keep in mind that Discord does some funky stuff like with time between messages, this library doesn't automatically
 						change what is displayed!</discord-message
 					>
 				</discord-messages>
 
-				<h3 class="title">With subsequent messages in compact mode</h3>
+				<h3 class="title">With subsequent messages and compact mode</h3>
 				<discord-messages compact-mode>
-					<discord-message profile="favna">I can send multiple messages with my avatar showing only once</discord-message>
-					<discord-message profile="favna" message-body-only message-body-only-time="12:39"
+					<discord-message profile="favna" twenty-four timestamp="12:38"
+						>I can send multiple messages with my avatar showing only once</discord-message
+					>
+					<discord-message profile="favna" message-body-only timestamp="12:39"
 						>That's how Discord handles multiple messages from the same author as well</discord-message
 					>
-					<discord-message profile="favna" message-body-only
+					<discord-message profile="favna" message-body-only timestamp="12:40"
 						>Just keep in mind that Discord does some funky stuff like with time between messages, this library doesn't automatically
 						change what is displayed!</discord-message
 					>
 				</discord-messages>
-
 				<h3 class="title">Markdown Styling</h3>
 				<discord-messages>
 					<discord-message profile="favna">

packages/core/src/components/discord-message/DiscordMessage.ts

@@ -335,6 +335,8 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
 
 	/**
 	 * The timestamp to use for the message date.
+	 *
+	 * if {@link DiscordMessage.messageBodyOnly} is `true`, this will be shown in the gutter before the message on hover.
 	 */
 	@property({
 		type: String,
@@ -343,12 +345,6 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
 	})
 	public accessor timestamp: DiscordTimestamp = new Date();
 
-	/**
-	 * The timestamp to use for the message time if {@link DiscordMessage.messageBodyOnly} is `true`.
-	 */
-	@property({ type: String, attribute: 'message-body-only-time' })
-	public accessor messageBodyOnlyTime: DiscordTimestamp | null = null;
-
 	/**
 	 * Whether to use 24-hour format for the timestamp.
 	 */
@@ -386,8 +382,8 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
 	}
 
 	protected handleMessageEnter() {
-		if (this.messageBodyOnly && this.messageBodyOnlyTimeRef.value && this.messageBodyOnlyTime) {
-			const computedTimestamp = handleTimestamp(this.messageBodyOnlyTime, true, this.twentyFour);
+		if (this.messageBodyOnly && this.messageBodyOnlyTimeRef.value) {
+			const computedTimestamp = handleTimestamp(this.timestamp, true, this.twentyFour);
 			this.messageBodyOnlyTimeRef.value.textContent = computedTimestamp ?? '';
 		}
 	}
@@ -419,7 +415,7 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
 			<slot name="reply"></slot>
 			<div class="discord-message-inner" @mouseenter=${this.handleMessageEnter} @mouseleave=${this.handleMessageLeave}>
 				${when(
-					this.compactMode,
+					this.compactMode && !this.messageBodyOnly,
 					() => html`<time datetime="${ifDefined(computedTimestamp)}" class="discord-message-timestamp">${computedTimestamp}</time>`,
 					() => null
 				)}
@@ -433,6 +429,16 @@ export class DiscordMessage extends LitElement implements DiscordMessageProps, L
 						></time>`,
 					() => null
 				)}
+				${when(
+					this.compactMode && this.messageBodyOnly,
+					() =>
+						html`<time
+							${ref(this.messageBodyOnlyTimeRef)}
+							datetime="${ifDefined(computedTimestamp)}"
+							class="discord-message-timestamp"
+						></time>`,
+					() => null
+				)}
 				${when(
 					this.compactMode || this.messageBodyOnly,
 					() => null,