feat: added option to add the channel name above discord messages (#520)

* feat: added option to add the channel name above discord messages * feat: requested changes * refactor: use `when` and drop extra div * refactor: change property names and use `text` for text channels --------- Co-authored-by: Jeroen Claassens <[email protected]>
skyra-project · Jan 4, 2025 · 716f72e · 716f72e
1 parent 0453ac0
commit 716f72e
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 2 deletions.
diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
@@ -53,7 +53,7 @@ <h2>Explanation</h2>
 
 			<main id="demo">
 				<h3 class="title">A normal conversation</h3>
-				<discord-messages>
+				<discord-messages channel-name="General" channel-type="text">
 					<discord-message author="Alyx Vargas"> Hey guys, I'm new here! Glad to be able to join you all! </discord-message>
 					<discord-message
 						author="Fenton Smart"

diff --git a/packages/core/src/components/discord-messages/DiscordMessages.ts b/packages/core/src/components/discord-messages/DiscordMessages.ts
@@ -1,8 +1,14 @@
 import { createContext, provide } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
 import { defaultBackground, defaultMode, defaultTheme } from '../../config.js';
 import type { LightTheme } from '../../types.js';
+import ChannelForum from '../svgs/ChannelForum.js';
+import ChannelIcon from '../svgs/ChannelIcon.js';
+import ChannelThread from '../svgs/ChannelThread.js';
+import LockedVoiceChannel from '../svgs/LockedVoiceChannel.js';
+import VoiceChannel from '../svgs/VoiceChannel.js';
 
 export const messagesLightTheme = createContext<boolean>('light-theme');
 export const messagesCompactMode = createContext<boolean>('compact-mode');
@@ -55,6 +61,35 @@ export class DiscordMessages extends LitElement implements LightTheme {
 			margin-bottom: 0.5rem;
 			border-bottom-width: 0;
 		}
+
+		:host .discord-channel-header {
+			display: flex;
+			align-items: center;
+			padding: 0.5rem 1rem;
+			box-shadow:
+				0 2px 0 0 rgba(0, 0, 0, 0.05),
+				0 1.5px 0 0 rgba(0, 0, 0, 0.05),
+				0 1px 0 0 rgba(0, 0, 0, 0.16);
+		}
+
+		:host .discord-channel-icon {
+			height: 24px;
+			width: auto;
+			margin: 0 8px;
+			position: relative;
+			flex: 0 0 auto;
+			color: #80848e;
+		}
+
+		:host([light-theme]) .discord-channel-icon {
+			color: #6d6f78;
+		}
+
+		:host .discord-channel-name {
+			margin: 0 8px 0 0;
+			flex: 0 0 auto;
+			min-width: auto;
+		}
 	`;
 
 	/**
@@ -78,6 +113,20 @@ export class DiscordMessages extends LitElement implements LightTheme {
 	@property({ type: Boolean, reflect: true, attribute: 'compact-mode' })
 	public accessor compactMode = false;
 
+	/**
+	 * The type of channel this should be, this will be displayed above the message and only applies if {@link DiscordMessages.channelName} is set.
+	 * Valid values are: `text`, `forum`, `locked`, `thread`, and `voice`.
+	 */
+	@property({ reflect: true, attribute: 'channel-type' })
+	public accessor channelType: 'forum' | 'locked' | 'text' | 'thread' | 'voice';
+
+	/**
+	 * The name of the channel, this will be displayed above the message and only applies if {@link DiscordMessages.channelType} is set.
+	 */
+
+	@property({ reflect: true, attribute: 'channel-name' })
+	public accessor channelName: string;
+
 	public override connectedCallback(): void {
 		super.connectedCallback();
 
@@ -95,7 +144,36 @@ export class DiscordMessages extends LitElement implements LightTheme {
 	}
 
 	protected override render() {
-		return html`<slot></slot>`;
+		let channelIcon: ReturnType<typeof html>;
+		switch (this.channelType) {
+			case 'text':
+				channelIcon = html`${ChannelIcon()}`;
+				break;
+			case 'voice':
+				channelIcon = html`${VoiceChannel()}`;
+				break;
+			case 'locked':
+				channelIcon = html`${LockedVoiceChannel()}`;
+				break;
+			case 'thread':
+				channelIcon = html`${ChannelThread()}`;
+				break;
+			case 'forum':
+				channelIcon = html`${ChannelForum()}`;
+				break;
+		}
+
+		return html`
+			${when(
+				this.channelType && this.channelName,
+				() =>
+					html`<div class="discord-channel-header">
+						<div class="discord-channel-icon">${channelIcon}</div>
+						<div class="discord-channel-name">${this.channelName}</div>
+					</div>`
+			)}
+			<slot></slot>
+		`;
 	}
 }