feat: show headset mic for voice channel mentions

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";

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;
+}

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()}
               >
-                <Symbol>tag</Symbol>
+                <Symbol>{getChannelIcon(channel(), "mention")}</Symbol>
                 {channel()!.name}
                 {params.exactMessage && (
                   <>

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 = "tag";
+    icon.innerText = getChannelIcon(this.channel, "mention");
     icon.classList.add("material-symbols-outlined");
     mention.appendChild(icon);
 

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) {
           }
         >
           <HeaderIcon>
-            <Symbol>grid_3x3</Symbol>
+            <Symbol>{getChannelIcon(props.channel)}</Symbol>
           </HeaderIcon>
           <NonBreakingText
             class={typography({ class: "title", size: "medium" })}

packages/client/src/interface/navigation/channels/ServerSidebar.tsx

@@ -35,6 +35,7 @@ import {
 import { VoiceChannelPreview } from "@revolt/ui/components/features/voice/VoiceChannelPreview";
 import { createDragHandle } from "@revolt/ui/components/utils/Draggable";
 import { Symbol } from "@revolt/ui/components/utils/Symbol";
+import { getChannelIcon } from "@revolt/common";
 
 import MdChevronRight from "@material-design-icons/svg/filled/chevron_right.svg?component-solid";
 
@@ -492,15 +493,15 @@ function Entry(
           attention={attentionState()}
           icon={
             <>
-              <Switch fallback={<Symbol>grid_3x3</Symbol>}>
-                <Match when={props.channel.isVoice}>
-                  <Symbol
-                    color={inCall() ? "var(--md-sys-color-primary)" : undefined}
-                  >
-                    headset_mic
-                  </Symbol>
-                </Match>
-              </Switch>
+              <Symbol
+                color={
+                  props.channel.isVoice && inCall()
+                    ? "var(--md-sys-color-primary)"
+                    : undefined
+                }
+              >
+                {getChannelIcon(props.channel)}
+              </Symbol>
               <Show when={props.channel.icon}>
                 <ChannelIcon
                   src={props.channel.iconURL}