For now..

src/modules/WireguardConfigurationInfo.py

@@ -12,6 +12,7 @@ class PeerGroupsClass(BaseModel):
     GroupName: str = ''
     Description: str = ''
     BackgroundColor: str = ''
+    Icon: str = ''
     Peers: list[str] = []
 
 class WireguardConfigurationInfo(BaseModel):

src/static/app/package-lock.json

@@ -17,6 +17,7 @@
         "bootstrap": "^5.3.2",
         "bootstrap-icons": "^1.11.3",
         "cidr-tools": "^11.0.3",
+        "css-color-converter": "^2.0.0",
         "dayjs": "^1.11.12",
         "electron-builder": "^26.0.12",
         "fuse.js": "^7.0.0",
@@ -2950,6 +2951,28 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-color-converter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/css-color-converter/-/css-color-converter-2.0.0.tgz",
+      "integrity": "sha512-oLIG2soZz3wcC3aAl/7Us5RS8Hvvc6I8G8LniF/qfMmrm7fIKQ8RIDDRZeKyGL2SrWfNqYspuLShbnjBMVWm8g==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^0.5.2",
+        "color-name": "^1.1.4",
+        "css-unit-converter": "^1.1.2"
+      }
+    },
+    "node_modules/css-color-converter/node_modules/color-convert": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-0.5.3.tgz",
+      "integrity": "sha512-RwBeO/B/vZR3dfKL1ye/vx8MHZ40ugzpyfeVG5GsiuGnrlMWe2o8wxBbLCpw9CsxV+wHuzYlCiWnybrIA0ling=="
+    },
+    "node_modules/css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",

src/static/app/package.json

@@ -21,6 +21,7 @@
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.3",
     "cidr-tools": "^11.0.3",
+    "css-color-converter": "^2.0.0",
     "dayjs": "^1.11.12",
     "electron-builder": "^26.0.12",
     "fuse.js": "^7.0.0",

src/static/app/src/components/configurationComponents/peer.vue

@@ -6,11 +6,14 @@ import PeerSettingsDropdown from "@/components/configurationComponents/peerSetti
 import LocaleText from "@/components/text/localeText.vue";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import {GetLocale} from "@/utilities/locale.js";
+import PeerTagBadge from "@/components/configurationComponents/peerTagBadge.vue";
 
 export default {
 	name: "peer",
 	methods: {GetLocale},
-	components: {LocaleText, PeerSettingsDropdown},
+	components: {
+		PeerTagBadge, LocaleText, PeerSettingsDropdown
+	},
 	props: {
 		Peer: Object
 	},
@@ -100,7 +103,10 @@ export default {
 						<samp>{{Peer.allowed_ip}}</samp>
 					</small>
 				</div>
-				<div class="d-flex align-items-end ms-auto">
+				<div class="d-flex align-items-center gap-1"
+					:class="{'ms-auto': dashboardStore.Configuration.Server.dashboard_peer_list_display === 'list'}"
+				>
+					<PeerTagBadge BackgroundColor="#ff3838" GroupName="IDK" Icon="bi-pencil"></PeerTagBadge>
 					<div class="ms-auto px-2 rounded-3 subMenuBtn"
 					     :class="{active: this.subMenuOpened}"
 					>

src/static/app/src/components/configurationComponents/peerSearch.vue

@@ -4,11 +4,12 @@ import {fetchGet, fetchPost} from "@/utilities/fetch.js";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import LocaleText from "@/components/text/localeText.vue";
 import {GetLocale} from "@/utilities/locale.js";
+import PeerTag from "@/components/configurationComponents/peerTag.vue";
 
 
 export default {
 	name: "peerSearch",
-	components: {LocaleText},
+	components: {PeerTag, LocaleText},
 	setup(){
 		const store = DashboardConfigurationStore();
 		const wireguardConfigurationStore = WireguardConfigurationsStore()
@@ -156,6 +157,14 @@ export default {
 					</li>
 				</ul>
 			</div>
+			<div class="position-relative">
+				<button
+					class="btn btn-sm w-100 text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle  position-relative">
+					<i class="bi me-2 bi-hash"></i>
+					<LocaleText t="Tags"></LocaleText>
+				</button>
+				<PeerTag :configuration="configuration"></PeerTag>
+			</div>
 			
 			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle ms-lg-auto"
 			        @click="this.$emit('search')">

src/static/app/src/components/configurationComponents/peerTag.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import {reactive, ref} from "vue";
+import LocaleText from "@/components/text/localeText.vue";
+
+const predefinedColors = {
+	"blue-100": "#cfe2ff",
+	"blue-200": "#9ec5fe",
+	"blue-300": "#6ea8fe",
+	"blue-400": "#3d8bfd",
+	"blue-500": "#0d6efd",
+	"blue-600": "#0a58ca",
+	"blue-700": "#084298",
+	"blue-800": "#052c65",
+	"blue-900": "#031633",
+	"indigo-100": "#e0cffc",
+	"indigo-200": "#c29ffa",
+	"indigo-300": "#a370f7",
+	"indigo-400": "#8540f5",
+	"indigo-500": "#6610f2",
+	"indigo-600": "#520dc2",
+	"indigo-700": "#3d0a91",
+	"indigo-800": "#290661",
+	"indigo-900": "#140330",
+	"purple-100": "#e2d9f3",
+	"purple-200": "#c5b3e6",
+	"purple-300": "#a98eda",
+	"purple-400": "#8c68cd",
+	"purple-500": "#6f42c1",
+	"purple-600": "#59359a",
+	"purple-700": "#432874",
+	"purple-800": "#2c1a4d",
+	"purple-900": "#160d27",
+	"pink-100": "#f7d6e6",
+	"pink-200": "#efadce",
+	"pink-300": "#e685b5",
+	"pink-400": "#de5c9d",
+	"pink-500": "#d63384",
+	"pink-600": "#ab296a",
+	"pink-700": "#801f4f",
+	"pink-800": "#561435",
+	"pink-900": "#2b0a1a",
+	"red-100": "#f8d7da",
+	"red-200": "#f1aeb5",
+	"red-300": "#ea868f",
+	"red-400": "#e35d6a",
+	"red-500": "#dc3545",
+	"red-600": "#b02a37",
+	"red-700": "#842029",
+	"red-800": "#58151c",
+	"red-900": "#2c0b0e",
+	"orange-100": "#ffe5d0",
+	"orange-200": "#fecba1",
+	"orange-300": "#feb272",
+	"orange-400": "#fd9843",
+	"orange-500": "#fd7e14",
+	"orange-600": "#ca6510",
+	"orange-700": "#984c0c",
+	"orange-800": "#653208",
+	"orange-900": "#331904",
+	"yellow-100": "#fff3cd",
+	"yellow-200": "#ffe69c",
+	"yellow-300": "#ffda6a",
+	"yellow-400": "#ffcd39",
+	"yellow-500": "#ffc107",
+	"yellow-600": "#cc9a06",
+	"yellow-700": "#997404",
+	"yellow-800": "#664d03",
+	"yellow-900": "#332701",
+	"green-100": "#d1e7dd",
+	"green-200": "#a3cfbb",
+	"green-300": "#75b798",
+	"green-400": "#479f76",
+	"green-500": "#198754",
+	"green-600": "#146c43",
+	"green-700": "#0f5132",
+	"green-800": "#0a3622",
+	"green-900": "#051b11",
+	"teal-100": "#d2f4ea",
+	"teal-200": "#a6e9d5",
+	"teal-300": "#79dfc1",
+	"teal-400": "#4dd4ac",
+	"teal-500": "#20c997",
+	"teal-600": "#1aa179",
+	"teal-700": "#13795b",
+	"teal-800": "#0d503c",
+	"teal-900": "#06281e",
+	"cyan-100": "#cff4fc",
+	"cyan-200": "#9eeaf9",
+	"cyan-300": "#6edff6",
+	"cyan-400": "#3dd5f3",
+	"cyan-500": "#0dcaf0",
+	"cyan-600": "#0aa2c0",
+	"cyan-700": "#087990",
+	"cyan-800": "#055160",
+	"cyan-900": "#032830",
+	"gray-100": "#f8f9fa",
+	"gray-200": "#e9ecef",
+	"gray-300": "#dee2e6",
+	"gray-400": "#ced4da",
+	"gray-500": "#adb5bd",
+	"gray-600": "#6c757d",
+	"gray-700": "#495057",
+	"gray-800": "#343a40",
+	"gray-900": "#212529",
+	"white": "#fff",
+	"black": "#000",
+}
+const props = defineProps(['configuration'])
+const groups = reactive({...props.configuration.Info.PeerGroups})
+import { v4 } from "uuid"
+import PeerTagSetting from "@/components/configurationComponents/peerTagComponents/peerTagSetting.vue";
+
+const addGroup = () => {
+	groups[v4().toString()] = {
+		GroupName: "",
+		Description: "",
+		BackgroundColor: randomColor(),
+		Icon: "",
+		Peers: []
+	}
+}
+
+const randomColor = () => {
+	const keys = Object.keys(predefinedColors);
+	const n = Math.floor(Math.random() * keys.length) + 1
+	return predefinedColors[keys[n]]
+}
+</script>
+
+<template>
+<div class="card shadow" id="peerTag">
+	<div class="card-body" >
+		<small v-if="Object.keys(groups).length === 0">
+			<LocaleText t="No tag"></LocaleText>
+		</small>
+		<div class="d-flex flex-column gap-2" v-else>
+			<PeerTagSetting v-for="group in groups" :group="group">
+
+			</PeerTagSetting>
+		</div>
+	</div>
+	<div class="card-footer btn" @click="addGroup()">
+		<small><i class="bi bi-plus-lg me-2"></i><LocaleText t="Tag"></LocaleText></small>
+	</div>
+</div>
+</template>
+
+<style scoped>
+#peerTag{
+	width: 300px;
+	position: absolute;
+	right: 0;
+	z-index: 9999;
+	margin-top: 2px;
+}
+</style>

src/static/app/src/components/configurationComponents/peerTagBadge.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { fromString } from 'css-color-converter';
+import {computed} from "vue";
+
+const props = defineProps(["BackgroundColor", "GroupName", "Icon"])
+
+const color = computed(() => {
+	if (props.BackgroundColor){
+		const cssColor = fromString(props.BackgroundColor)
+		if (cssColor) {
+			const rgb = cssColor.toRgbaArray()
+			return +((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 255000).toFixed(2)
+		}
+	}
+	return 0
+})
+</script>
+
+<template>
+<span
+	class="badge rounded-3 shadow"
+	:style="{'background-color': BackgroundColor, 'color': color > 0.69 ? '#000':'#fff' }"
+>
+	<i class="bi me-1" :class="Icon" v-if="Icon"></i>#{{ GroupName }}
+</span>
+</template>
+
+<style scoped>
+
+</style>

src/static/app/src/components/configurationComponents/peerTagComponents/peerTagSetting.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import { fromString } from 'css-color-converter';
+
+const props = defineProps(['group'])
+
+const color = computed(() => {
+	if (props.group.BackgroundColor){
+		const cssColor = fromString(props.group.BackgroundColor)
+		if (cssColor) {
+			const rgb = cssColor.toRgbaArray()
+			return +((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 255000).toFixed(2) > 0.69 ? "#000":"#fff"
+		}
+	}
+	return "#ffffff"
+})
+console.log(color)
+</script>
+
+<template>
+<div :style="{'background-color': group.BackgroundColor }"
+	 class="badge rounded-3 d-flex align-items-center overflow-scroll">
+	<div
+		aria-label="Pick icon button"
+		style="height: 30px;"
+		class="d-flex align-items-center border rounded-2 p-2 btn btn-sm">
+		<i class="bi bi-pencil-fill"  :style="{color: color}"></i>
+	</div>
+	<div contenteditable="true" class="flex-grow-1 text-start d-flex align-items-center rounded-2"
+		 :style="{color: color}"
+		 style="height: 30px">
+		Tag Name
+	</div>
+	<div style="height: 30px;"
+		 aria-label="Pick color button"
+		 class="d-flex align-items-center border-0 rounded-2 p-2 btn btn-sm">
+		<i class="bi bi-palette-fill" :style="{color: color}"></i>
+	</div>
+	<div style="height: 30px;"
+		 aria-label="Pick color button"
+		 class="d-flex align-items-center border-0 rounded-2 p-2 btn btn-sm">
+		<i class="bi bi-trash-fill" :style="{color: color}"></i>
+	</div>
+</div>
+</template>
+
+<style scoped>
+
+</style>