feat: add official app (#493)

* fix: add component path * add officialApp in types profile * add officialApp in reply * add officialApp in message * add officialApp * Add messages with official app * Removing path accidental * Removing path accidental * Update index.html * docs: improve demo for official apps --------- Co-authored-by: Jeroen Claassens <support@favware.tech>
skyra-project · Oct 27, 2024 · c6baff1 · c6baff1
1 parent 7fffb03
commit c6baff1
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 13 deletions.
diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
@@ -360,8 +360,6 @@ <h3 class="title">System Messages</h3>
 					<discord-system-message type="thread">
 						<i style="color: #a155ab">Favna</i> started a thread: <i>Skyra Suggestion Thread</i>. See all <i>threads</i>.
 					</discord-system-message>
-				</discord-messages>
-				<discord-messages>
 					<discord-system-message type="join"> <i>Snazzah</i> added <i>Favna</i> to the group. </discord-system-message>
 					<discord-system-message type="call"> <i>Favna</i> started a call that lasted an hour. </discord-system-message>
 					<discord-system-message type="edit"> <i>Snazzah</i> changed the channel icon. </discord-system-message>
@@ -377,6 +375,27 @@ <h3 class="title">System Messages</h3>
 					<discord-system-message type="alert">Warning! Warning! This library is the coolest of them all!</discord-system-message>
 					<discord-system-message type="error">Error! Cool overload!.</discord-system-message>
 				</discord-messages>
+				<h3 class="title">Official Discord Community Updates</h3>
+				<p>
+					Note: The URL to the official Discord avatar for Community Updates is
+					<a class="link" href="https://cdn.discordapp.com/avatars/669627189624307712/a0389d52d24fdef878aca87e8d52cc2a.webp"
+						>https://cdn.discordapp.com/avatars/669627189624307712/a0389d52d24fdef878aca87e8d52cc2a.webp</a
+					>, you can use this URL to set up a profile for these messages.
+				</p>
+				<discord-messages>
+					<discord-message profile="communityupdates">
+						This channel has been set up to receive official Discord announcements for admins and moderators of Community servers. We'll
+						let you know about important updates, such as new moderation features or changes to your server's eligibility for Server
+						Discovery, here.
+						<br />
+						<br />
+						You can change which channel these messages are sent to at any time inside Server Settings. We recommend choosing your staff
+						channel, as some information may be sensitive to your server.
+						<br />
+						<br />
+						Thanks for choosing Discord as the place to build your community!
+					</discord-message>
+				</discord-messages>
 				<h3 class="title">Threads</h3>
 				<discord-messages>
 					<discord-system-message type="thread">
@@ -430,6 +449,12 @@ <h3 class="title">Replies</h3>
 						<discord-reply slot="reply" profile="dominik" edited attachment>Butterflies look beautiful!</discord-reply>
 						They do!
 					</discord-message>
+					<discord-message profile="marciel404">
+						<discord-reply slot="reply" author="Community Updates" official-app
+							>This channel has been set up to receive official Discord announcements...</discord-reply
+						>
+						Hey that's a community update!
+					</discord-message>
 				</discord-messages>
 				<h3 class="title">Replies in Compact Mode</h3>
 				<discord-messages compact-mode>
@@ -445,6 +470,12 @@ <h3 class="title">Replies in Compact Mode</h3>
 						<discord-reply slot="reply" profile="dominik" edited attachment>Butterflies look beautiful!</discord-reply>
 						They do!
 					</discord-message>
+					<discord-message profile="marciel404">
+						<discord-reply slot="reply" author="Community Updates" official-app
+							>This channel has been set up to receive official Discord announcements...</discord-reply
+						>
+						Hey that's a community update!
+					</discord-message>
 				</discord-messages>
 				<h3 class="title">Commands</h3>
 				<discord-messages>

diff --git a/packages/core/demo/index.js b/packages/core/demo/index.js
@@ -46,6 +46,11 @@ globalThis.$discordMessage = {
 			avatar: 'https://raw.githubusercontent.com/skyra-project/discord-components-implementations/main/shared/public/discordjs.png',
 			roleColor: '#ffffff',
 			server: true
+		},
+		communityupdates: {
+			author: 'Community Updates',
+			avatar: 'https://cdn.discordapp.com/avatars/669627189624307712/a0389d52d24fdef878aca87e8d52cc2a.webp',
+			officialApp: true
 		}
 	},
 	emojis: {

diff --git a/packages/core/src/components/discord-author-info/DiscordAuthorInfo.ts b/packages/core/src/components/discord-author-info/DiscordAuthorInfo.ts
@@ -8,6 +8,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 import { getClanIcon } from '../../util.js';
 import { messagesCompactMode, messagesLightTheme } from '../discord-messages/DiscordMessages.js';
+import VerifiedTick from '../svgs/VerifiedTick.js';
 
 @customElement('discord-author-info')
 export class DiscordAuthorInfo extends LitElement {
@@ -136,17 +137,23 @@ export class DiscordAuthorInfo extends LitElement {
 	public accessor author: string | undefined = undefined;
 
 	/**
-	 * Whether this author is a bot. Only works if `server` is `false` or `undefined`.
+	 * Whether this author is a bot. Only works if `server` and `officialApp` is `false` or `undefined`.
 	 */
 	@property({ type: Boolean })
 	public accessor bot = false;
 
 	/**
-	 * Whether this author is a `server` crosspost webhook. Only works if `bot` is `false` or `undefined`.
+	 * Whether this author is a `server` crosspost webhook. Only works if `bot` and `officialApp` is `false` or `undefined`.
 	 */
 	@property({ type: Boolean })
 	public accessor server = false;
 
+	/**
+	 * Whether this author is a `official app` crosspost webhook. Only works if `bot` and `server` is `false` or `undefined`.
+	 */
+	@property({ type: Boolean, attribute: 'official-app' })
+	public accessor officialApp = false;
+
 	/**
 	 * Whether this author is the original poster.
 	 */
@@ -221,8 +228,12 @@ export class DiscordAuthorInfo extends LitElement {
 					draggable="false"
 				/>`
 		)}
-		${when(this.bot && !this.server, () => html`<discord-verified-author-tag .verified=${this.verified}></discord-verified-author-tag>`)}
-		${when(this.server && !this.bot, () => html`<span class="discord-application-tag">Server</span>`)}
+		${when(
+			this.bot && !this.server && !this.officialApp,
+			() => html`<discord-verified-author-tag .verified=${this.verified}></discord-verified-author-tag>`
+		)}
+		${when(this.server && !this.bot && !this.officialApp, () => html`<span class="discord-application-tag">Server</span>`)}
+		${when(this.officialApp && !this.server && !this.bot, () => html`<span class="discord-application-tag">${VerifiedTick()}OFFICIAL</span>`)}
 		${when(this.op, () => html`<span class="discord-application-tag discord-application-tag-op">OP</span>`)}
 		${when(
 			this.compactMode,

diff --git a/packages/core/src/components/discord-message/DiscordMessage.ts b/packages/core/src/components/discord-message/DiscordMessage.ts
@@ -279,18 +279,25 @@ export class DiscordMessage extends LitElement implements LightTheme {
 
 	/**
 	 * Whether the message author is a bot or not.
-	 * Only works if `server` is `false` or `undefined`.
+	 * Only works if `server` and `officialApp` is `false` or `undefined`.
 	 */
 	@property({ type: Boolean })
 	public accessor bot = false;
 
 	/**
 	 * Whether the message author is a server crosspost webhook or not.
-	 * Only works if `bot` is `false` or `undefined`.
+	 * Only works if `bot` and `officialApp` is `false` or `undefined`.
 	 */
 	@property({ type: Boolean })
 	public accessor server = false;
 
+	/**
+	 * Whether the message author is official app.
+	 * Only works if `bot` and `server` is `falns`
+	 */
+	@property({ type: Boolean, attribute: 'official-app' })
+	public accessor officialApp = false;
+
 	/**
 	 * Whether the bot is verified or not.
 	 * Only works if `bot` is `true`
@@ -416,6 +423,7 @@ export class DiscordMessage extends LitElement implements LightTheme {
 		const defaultData: Profile = {
 			author: this.author,
 			bot: this.bot,
+			officialApp: this.officialApp,
 			verified: this.verified,
 			server: this.server,
 			op: this.op,
@@ -475,6 +483,7 @@ export class DiscordMessage extends LitElement implements LightTheme {
 								author=${profile.author ?? ''}
 								?bot=${profile.bot ?? false}
 								?server=${profile.server ?? false}
+								?official-app=${profile.officialApp ?? false}
 								?verified=${profile.verified ?? false}
 								?op=${profile.op ?? false}
 								role-color=${profile.roleColor ?? ''}
@@ -494,6 +503,7 @@ export class DiscordMessage extends LitElement implements LightTheme {
 									author=${profile.author ?? ''}
 									?bot=${profile.bot ?? false}
 									?server=${profile.server ?? false}
+									?official-app=${profile.officialApp ?? false}
 									?verified=${profile.verified ?? false}
 									?op=${profile.op ?? false}
 									role-color=${profile.roleColor ?? ''}

diff --git a/packages/core/src/components/discord-reply/DiscordReply.ts b/packages/core/src/components/discord-reply/DiscordReply.ts
@@ -264,18 +264,25 @@ export class DiscordReply extends LitElement implements LightTheme {
 
 	/**
 	 * Whether the message author is a bot or not.
-	 * Only works if `server` is `false` or `undefined`.
+	 * Only works if `server` and `officialApp` is `false` or `undefined`.
 	 */
 	@property({ type: Boolean })
 	public accessor bot = false;
 
 	/**
 	 * Whether the message author is a server crosspost webhook or not.
-	 * Only works if `bot` is `false` or `undefined`.
+	 * Only works if `bot` and `officialApp` is `false` or `undefined`.
 	 */
 	@property({ type: Boolean })
 	public accessor server = false;
 
+	/**
+	 * Whether the message author is a server crosspost webhook or not.
+	 * Only works if `bot` and `server` is `false` or `undefined`.
+	 */
+	@property({ type: Boolean, attribute: 'official-app' })
+	public accessor officialApp = false;
+
 	/**
 	 * Whether the author is the original poster.
 	 */
@@ -375,6 +382,7 @@ export class DiscordReply extends LitElement implements LightTheme {
 			author: this.author,
 			bot: this.bot,
 			verified: this.verified,
+			officialApp: this.officialApp,
 			op: this.op,
 			server: this.server,
 			roleColor: this.roleColor,
@@ -389,11 +397,14 @@ export class DiscordReply extends LitElement implements LightTheme {
 
 		const profileTag = html`
 			${when(
-				profile.bot && !profile.server,
+				profile.bot && !profile.server && !profile.officialApp,
 				() => html`<span class="discord-application-tag">${profile.verified ? VerifiedTick() : ''}App</span>`
 			)}
-			${when(profile.server && !profile.bot, () => html`<span class="discord-application-tag">Server</span>`)}
-			${when(profile.op, () => html`<span class="discord-application-tag discord-application-tag-op">OP</span>`)}
+			${when(profile.server && !profile.bot && !profile.officialApp, () => html`<span class="discord-application-tag">Server</span>`)}
+			${when(
+				profile.officialApp && !profile.server && !profile.bot,
+				() => html`<span class="discord-application-tag">${VerifiedTick()}OFFICIAL</span>`
+			)}
 		`;
 
 		return html`${when(

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -18,6 +18,7 @@ export interface Profile {
 	author?: string;
 	avatar?: string;
 	bot?: boolean;
+	officialApp?: boolean;
 	clanIcon?: string;
 	clanTag?: string;
 	op?: boolean;