From 6a2e7c2ab802cd8ff00242e0060ae20aecd9eadb Mon Sep 17 00:00:00 2001
From: snowfudge <150321282+snowfudge@users.noreply.github.com>
Date: Wed, 7 Feb 2024 13:47:03 +0700
Subject: [PATCH 1/6] feat: add username modes

This adds username modes on both the chat message and the user list for to allow css styling.
---
 client/components/Username.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/components/Username.vue b/client/components/Username.vue
index 0f0fe937..ba39ce38 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -1,6 +1,11 @@
 <template>
 	<span
-		:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
+		:class="[
+			'user ',
+			{[nickColor]: store.state.settings.coloredNicks},
+			{active: active},
+			[mode ? userModes[mode] : ''],
+		]"
 		:data-name="user.nick"
 		role="button"
 		v-on="onHover ? {mouseenter: hover} : {}"
@@ -72,7 +77,18 @@ export default defineComponent({
 
 		const store = useStore();
 
+		const userModes = {
+			"~": "owner",
+			"&": "admin",
+			"!": "admin",
+			"@": "op",
+			"%": "half-op",
+			"+": "voice",
+			"": "normal",
+		};
+
 		return {
+			userModes,
 			mode,
 			nickColor,
 			hover,

From c08da6f89cc55547672ca1de85e6654857f56044 Mon Sep 17 00:00:00 2001
From: snowfudge <150321282+snowfudge@users.noreply.github.com>
Date: Wed, 7 Feb 2024 17:46:46 +0700
Subject: [PATCH 2/6] move standard user modes to constants

---
 client/components/ChatUserList.vue | 11 ++---------
 client/components/Username.vue     | 13 +++----------
 client/js/constants.ts             |  9 +++++++++
 client/js/helpers/contextMenu.ts   | 15 ++++-----------
 4 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/client/components/ChatUserList.vue b/client/components/ChatUserList.vue
index ec3c971b..f8f484bc 100644
--- a/client/components/ChatUserList.vue
+++ b/client/components/ChatUserList.vue
@@ -62,16 +62,9 @@ import {computed, defineComponent, nextTick, PropType, ref} from "vue";
 import type {UserInMessage} from "../../server/models/msg";
 import type {ClientChan, ClientUser} from "../js/types";
 import Username from "./Username.vue";
+import constants from "../js/constants";
 
-const modes = {
-	"~": "owner",
-	"&": "admin",
-	"!": "admin",
-	"@": "op",
-	"%": "half-op",
-	"+": "voice",
-	"": "normal",
-};
+const modes = constants.modeCharToName;
 
 export default defineComponent({
 	name: "ChatUserList",
diff --git a/client/components/Username.vue b/client/components/Username.vue
index ba39ce38..30de51e7 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -22,6 +22,7 @@ import eventbus from "../js/eventbus";
 import colorClass from "../js/helpers/colorClass";
 import type {ClientChan, ClientNetwork, ClientUser} from "../js/types";
 import {useStore} from "../js/store";
+import constants from "../js/constants";
 
 type UsernameUser = Partial<UserInMessage> & {
 	mode?: string;
@@ -77,18 +78,10 @@ export default defineComponent({
 
 		const store = useStore();
 
-		const userModes = {
-			"~": "owner",
-			"&": "admin",
-			"!": "admin",
-			"@": "op",
-			"%": "half-op",
-			"+": "voice",
-			"": "normal",
-		};
+		const modeName = constants.modeCharToName;
 
 		return {
-			userModes,
+			modeName,
 			mode,
 			nickColor,
 			hover,
diff --git a/client/js/constants.ts b/client/js/constants.ts
index 725224bd..59dded72 100644
--- a/client/js/constants.ts
+++ b/client/js/constants.ts
@@ -24,10 +24,19 @@ const timeFormats = {
 	msg12hWithSeconds: "hh:mm:ss A",
 };
 
+const modeCharToName = {
+	"~": "owner",
+	"&": "admin",
+	"@": "operator",
+	"%": "half-op",
+	"+": "voice",
+};
+
 export default {
 	colorCodeMap,
 	commands: [] as string[],
 	timeFormats,
+	modeCharToName,
 	// Same value as media query in CSS that forces sidebars to become overlays
 	mobileViewportPixels: 768,
 };
diff --git a/client/js/helpers/contextMenu.ts b/client/js/helpers/contextMenu.ts
index 66ce5d2b..c97111c4 100644
--- a/client/js/helpers/contextMenu.ts
+++ b/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 "";

From 234dccaa5c465af08caee2b3ca9b5f0e72667bd6 Mon Sep 17 00:00:00 2001
From: snowfudge <150321282+snowfudge@users.noreply.github.com>
Date: Wed, 7 Feb 2024 17:47:15 +0700
Subject: [PATCH 3/6] change user mode from class to data attribute

---
 client/components/Username.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/components/Username.vue b/client/components/Username.vue
index 30de51e7..fd5a8c89 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -1,11 +1,7 @@
 <template>
 	<span
-		:class="[
-			'user ',
-			{[nickColor]: store.state.settings.coloredNicks},
-			{active: active},
-			[mode ? userModes[mode] : ''],
-		]"
+		:class="['user ', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
+		:data-mode="mode ? modeName[mode] : null"
 		:data-name="user.nick"
 		role="button"
 		v-on="onHover ? {mouseenter: hover} : {}"

From e506c236c9f732e3a2e0a875914ef24828aac174 Mon Sep 17 00:00:00 2001
From: snowfudge <150321282+snowfudge@users.noreply.github.com>
Date: Tue, 20 Feb 2024 05:51:25 +0700
Subject: [PATCH 4/6] remove unused spacing in class name

---
 client/components/Username.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/Username.vue b/client/components/Username.vue
index fd5a8c89..1125db17 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -1,6 +1,6 @@
 <template>
 	<span
-		:class="['user ', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
+		:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
 		:data-mode="mode ? modeName[mode] : null"
 		:data-name="user.nick"
 		role="button"

From bdf730b5c28c031be97840547c03cb1e8956f89b Mon Sep 17 00:00:00 2001
From: snowfudge <150321282+snowfudge@users.noreply.github.com>
Date: Tue, 20 Feb 2024 11:59:50 +0700
Subject: [PATCH 5/6] fix consistency in possible user modes

- Also added back "!" based on PR #354 for the "odd network" that uses it (by omnicons)
---
 client/js/constants.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/js/constants.ts b/client/js/constants.ts
index 59dded72..047bfd84 100644
--- a/client/js/constants.ts
+++ b/client/js/constants.ts
@@ -27,9 +27,11 @@ const timeFormats = {
 const modeCharToName = {
 	"~": "owner",
 	"&": "admin",
-	"@": "operator",
+	"!": "admin",
+	"@": "op",
 	"%": "half-op",
 	"+": "voice",
+	"": "normal",
 };
 
 export default {

From c426de9e7e18ad0393b1356575e2b0701321158f Mon Sep 17 00:00:00 2001
From: snowfudge <150321282+snowfudge@users.noreply.github.com>
Date: Tue, 20 Feb 2024 12:01:34 +0700
Subject: [PATCH 6/6] fix the mapping variable name for user modes

---
 client/components/Username.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/components/Username.vue b/client/components/Username.vue
index 1125db17..5980ec72 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -1,7 +1,7 @@
 <template>
 	<span
 		:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
-		:data-mode="mode ? modeName[mode] : null"
+		:data-mode="mode ? modeCharToName[mode] : null"
 		:data-name="user.nick"
 		role="button"
 		v-on="onHover ? {mouseenter: hover} : {}"
@@ -74,10 +74,8 @@ export default defineComponent({
 
 		const store = useStore();
 
-		const modeName = constants.modeCharToName;
-
 		return {
-			modeName,
+			modeCharToName: constants.modeCharToName,
 			mode,
 			nickColor,
 			hover,