Merge c426de9e7e into da2572fe25

client/components/ChatUserList.vue

@@ -62,16 +62,9 @@ import {computed, defineComponent, nextTick, PropType, ref} from "vue";
 import type {UserInMessage} from "../../shared/types/msg";
 import type {ClientChan, ClientUser} from "../js/types";
 import Username from "./Username.vue";
+import constants from "../js/constants";
 
-const modes = {
+const modes = constants.modeCharToName;
-	"~": "owner",
-	"&": "admin",
-	"!": "admin",
-	"@": "op",
-	"%": "half-op",
-	"+": "voice",
-	"": "normal",
-};
 
 export default defineComponent({
 	name: "ChatUserList",

client/components/Username.vue

@@ -1,6 +1,7 @@
 <template>
 	<span
 		:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
+		:data-mode="mode ? modeCharToName[mode] : null"
 		:data-name="user.nick"
 		role="button"
 		v-on="onHover ? {mouseenter: hover} : {}"
@@ -17,6 +18,7 @@ import eventbus from "../js/eventbus";
 import colorClass from "../js/helpers/colorClass";
 import type {ClientChan, ClientNetwork} from "../js/types";
 import {useStore} from "../js/store";
+import constants from "../js/constants";
 
 type UsernameUser = Partial<UserInMessage> & {
 	mode?: string;
@@ -73,6 +75,7 @@ export default defineComponent({
 		const store = useStore();
 
 		return {
+			modeCharToName: constants.modeCharToName,
 			mode,
 			nickColor,
 			hover,

client/js/constants.ts

@@ -24,10 +24,21 @@ const timeFormats = {
 	msg12hWithSeconds: "hh:mm:ss A",
 };
 
+const modeCharToName = {
+	"~": "owner",
+	"&": "admin",
+	"!": "admin",
+	"@": "op",
+	"%": "half-op",
+	"+": "voice",
+	"": "normal",
+};
+
 export default {
 	colorCodeMap,
 	commands: [] as string[],
 	timeFormats,
+	modeCharToName,
 	// Same value as media query in CSS that forces sidebars to become overlays
 	mobileViewportPixels: 768,
 };

client/js/helpers/contextMenu.ts

@@ -4,6 +4,7 @@ import type {ClientChan, ClientNetwork, ClientUser} from "../types";
 import {switchToChannel} from "../router";
 import {TypedStore} from "../store";
 import useCloseChannel from "../hooks/use-close-channel";
+import constants from "../constants";
 
 type BaseContextMenuItem = {
 	label: string;
@@ -358,19 +359,11 @@ export function generateUserContextMenu(
 		return items;
 	}
 
-	// Names of the standard modes we are able to change
-	const modeCharToName = {
-		"~": "owner",
-		"&": "admin",
-		"@": "operator",
-		"%": "half-op",
-		"+": "voice",
-	};
-
 	// Labels for the mode changes.  For example .rev({mode: "a", symbol: "&"}) => 'Revoke admin (-a)'
+
 	const modeTextTemplate = {
 		revoke(m: {symbol: string; mode: string}) {
-			const name = modeCharToName[m.symbol];
+			const name = constants.modeCharToName[m.symbol];
 
 			if (typeof name !== "string") {
 				return "";
@@ -380,7 +373,7 @@ export function generateUserContextMenu(
 			return res;
 		},
 		give(m: {symbol: string; mode: string}) {
-			const name = modeCharToName[m.symbol];
+			const name = constants.modeCharToName[m.symbol];
 
 			if (typeof name !== "string") {
 				return "";