From c265600487ab6e871decbe7ff774835eae7ac9df Mon Sep 17 00:00:00 2001 From: AsrayeDev Date: Thu, 4 Jun 2026 04:17:26 +1000 Subject: [PATCH 1/3] feat: show headset mic for voice channel mentions Display the "headset_mic" icon for voice channel mentions, rather than the same "tag" - Makes it easier to distinguish channel types and provides a more friendly UI. Signed-off-by: AsrayeDev --- packages/client/components/markdown/plugins/anchors.tsx | 2 +- .../ui/components/features/texteditor/codeMirrorWidgets.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/components/markdown/plugins/anchors.tsx b/packages/client/components/markdown/plugins/anchors.tsx index 155793acf6..bef296edc0 100644 --- a/packages/client/components/markdown/plugins/anchors.tsx +++ b/packages/client/components/markdown/plugins/anchors.tsx @@ -130,7 +130,7 @@ export function RenderAnchor( disabled={localProps.disabled} href={internalUrl()} > - tag + {channel()!.isVoice ? "headset_mic" : "tag"} {channel()!.name} {params.exactMessage && ( <> diff --git a/packages/client/components/ui/components/features/texteditor/codeMirrorWidgets.ts b/packages/client/components/ui/components/features/texteditor/codeMirrorWidgets.ts index e255551147..ba1b515161 100644 --- a/packages/client/components/ui/components/features/texteditor/codeMirrorWidgets.ts +++ b/packages/client/components/ui/components/features/texteditor/codeMirrorWidgets.ts @@ -231,7 +231,7 @@ class ChannelMentionWidget extends WidgetType { mention.contentEditable = "false"; const icon = document.createElement("span"); - icon.innerText = "tag"; + icon.innerText = this.channel.isVoice ? "headset_mic" : "tag"; icon.classList.add("material-symbols-outlined"); mention.appendChild(icon); From b6965f49f1bbe72003152d524b24b47b3c1c9acc Mon Sep 17 00:00:00 2001 From: AsrayeDev Date: Fri, 5 Jun 2026 16:13:36 +1000 Subject: [PATCH 2/3] chore: add GetChannelIcon and update existing Signed-off-by: AsrayeDev --- packages/client/components/common/index.tsx | 1 + .../client/components/common/lib/channels.ts | 20 +++++++++++++++++++ .../components/markdown/plugins/anchors.tsx | 3 ++- .../features/texteditor/codeMirrorWidgets.ts | 3 ++- 4 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 packages/client/components/common/lib/channels.ts diff --git a/packages/client/components/common/index.tsx b/packages/client/components/common/index.tsx index 3d075fd66d..f301131e34 100644 --- a/packages/client/components/common/index.tsx +++ b/packages/client/components/common/index.tsx @@ -2,3 +2,4 @@ export * from "./Device"; export { debounce } from "./lib/debounce"; export { default as CONFIGURATION } from "./lib/env"; export { insecureUniqueId } from "./lib/unique"; +export { getChannelIcon } from "./lib/channels"; diff --git a/packages/client/components/common/lib/channels.ts b/packages/client/components/common/lib/channels.ts new file mode 100644 index 0000000000..bba01455bc --- /dev/null +++ b/packages/client/components/common/lib/channels.ts @@ -0,0 +1,20 @@ +export const CHANNEL_ICONS = { + TEXT_SIDEBAR: "grid_3x3", + TEXT_MENTION: "tag", + VOICE: "headset_mic", +} as const; + +/** + * Returns the icon for a given channel + * @param context - defaults to sidebar, use "mention" for _MENTION icon + */ +export function getChannelIcon( + channel: { isVoice: boolean }, + context: "sidebar" | "mention" = "sidebar", +): string { + if (channel?.isVoice) return CHANNEL_ICONS.VOICE; + + return context === "mention" + ? CHANNEL_ICONS.TEXT_MENTION + : CHANNEL_ICONS.TEXT_SIDEBAR; +} diff --git a/packages/client/components/markdown/plugins/anchors.tsx b/packages/client/components/markdown/plugins/anchors.tsx index bef296edc0..bfaa64866f 100644 --- a/packages/client/components/markdown/plugins/anchors.tsx +++ b/packages/client/components/markdown/plugins/anchors.tsx @@ -10,6 +10,7 @@ import { useState } from "@revolt/state"; import { Avatar, iconSize } from "@revolt/ui"; import { Invite } from "@revolt/ui/components/features/messaging/elements/Invite"; import { Symbol } from "@revolt/ui/components/utils/Symbol"; +import { getChannelIcon } from "@revolt/common"; import MdChat from "@material-design-icons/svg/outlined/chat.svg?component-solid"; import MdChevronRight from "@material-design-icons/svg/outlined/chevron_right.svg?component-solid"; @@ -130,7 +131,7 @@ export function RenderAnchor( disabled={localProps.disabled} href={internalUrl()} > - {channel()!.isVoice ? "headset_mic" : "tag"} + {getChannelIcon(channel(), "mention")} {channel()!.name} {params.exactMessage && ( <> diff --git a/packages/client/components/ui/components/features/texteditor/codeMirrorWidgets.ts b/packages/client/components/ui/components/features/texteditor/codeMirrorWidgets.ts index ba1b515161..ef98b6fad8 100644 --- a/packages/client/components/ui/components/features/texteditor/codeMirrorWidgets.ts +++ b/packages/client/components/ui/components/features/texteditor/codeMirrorWidgets.ts @@ -16,6 +16,7 @@ import { } from "@revolt/markdown/emoji/UnicodeEmoji"; import { userInformation } from "@revolt/markdown/users"; import { useSmartParams } from "@revolt/routing"; +import { getChannelIcon } from "@revolt/common"; import { parseUnicodeEmoji } from "@revolt/markdown/plugins/unicodeEmoji"; import { isInCodeBlock } from "./codeMirrorCommon"; @@ -231,7 +232,7 @@ class ChannelMentionWidget extends WidgetType { mention.contentEditable = "false"; const icon = document.createElement("span"); - icon.innerText = this.channel.isVoice ? "headset_mic" : "tag"; + icon.innerText = getChannelIcon(this.channel, "mention"); icon.classList.add("material-symbols-outlined"); mention.appendChild(icon); From 4d449b0d27023f31da9e72dc7729317f830e323a Mon Sep 17 00:00:00 2001 From: AsrayeDev Date: Fri, 5 Jun 2026 16:17:11 +1000 Subject: [PATCH 3/3] feat: integrate getChannelIcon into layout Signed-off-by: AsrayeDev --- .../src/interface/channels/ChannelHeader.tsx | 3 ++- .../navigation/channels/ServerSidebar.tsx | 19 ++++++++++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/client/src/interface/channels/ChannelHeader.tsx b/packages/client/src/interface/channels/ChannelHeader.tsx index d08c3c2aa2..8f354d4cf5 100644 --- a/packages/client/src/interface/channels/ChannelHeader.tsx +++ b/packages/client/src/interface/channels/ChannelHeader.tsx @@ -21,6 +21,7 @@ import { typography, } from "@revolt/ui"; import { Symbol } from "@revolt/ui/components/utils/Symbol"; +import { getChannelIcon } from "@revolt/common"; import MdGroup from "@material-design-icons/svg/outlined/group.svg?component-solid"; import MdPersonAdd from "@material-design-icons/svg/outlined/person_add.svg?component-solid"; @@ -79,7 +80,7 @@ export function ChannelHeader(props: Props) { } > - grid_3x3 + {getChannelIcon(props.channel)} - grid_3x3}> - - - headset_mic - - - + + {getChannelIcon(props.channel)} +