From 68d72f3492f04849abccfe7367079d3ab663492d Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Wed, 19 Nov 2025 13:49:20 +0100
Subject: [PATCH 1/3] refactor(ui): unify tag components

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 src/components/Envelope.vue       | 46 +++---------------------
 src/components/Tag.vue            | 58 +++++++++++++++++++++++++++++++
 src/components/ThreadEnvelope.vue | 27 ++------------
 3 files changed, 65 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Tag.vue

diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index 60ae0a6343..9edf143d47 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -386,19 +386,8 @@
 			</template>
 		</template>
 		<template #tags>
-			<div
-				v-for="tag in tags"
-				:key="tag.id"
-				class="tag-group">
-				<div
-					class="tag-group__bg"
-					:style="{ 'background-color': tag.color }" />
-				<span
-					class="tag-group__label"
-					:style="{ color: tag.color }">
-					{{ translateTagDisplayName(tag) }}
-				</span>
-			</div>
+			<Tag v-for="tag in tags" :tag="tag" />
+
 			<MoveModal
 				v-if="showMoveModal"
 				:account="account"
@@ -470,6 +459,7 @@ import EventModal from './EventModal.vue'
 import JunkIcon from './icons/JunkIcon.vue'
 import MoveModal from './MoveModal.vue'
 import Icon from './quickActions/Icon.vue'
+import Tag from './Tag.vue'
 import TagModal from './TagModal.vue'
 import TaskModal from './TaskModal.vue'
 import { isPgpText } from '../crypto/pgp.js'
@@ -483,7 +473,6 @@ import { FOLLOW_UP_TAG_LABEL } from '../store/constants.js'
 import useMainStore from '../store/mainStore.js'
 import { mailboxHasRights } from '../util/acl.js'
 import { messageDateTime, shortRelativeDatetime } from '../util/shortRelativeDatetime.js'
-import { translateTagDisplayName } from '../util/tag.js'
 import { hiddenTags } from './tags.js'
 
 export default {
@@ -530,6 +519,7 @@ export default {
 		CogIcon,
 		IconEmailFast,
 		Icon,
+		Tag,
 	},
 
 	directives: {
@@ -877,7 +867,6 @@ export default {
 	},
 
 	methods: {
-		translateTagDisplayName,
 		setSelected(value) {
 			if (this.selected !== value) {
 				this.$emit('update:selected', value)
@@ -1452,33 +1441,6 @@ export default {
 	}
 }
 
-.tag-group__label {
-	margin: 0 7px;
-	z-index: 2;
-	font-size: calc(var(--default-font-size) * 0.8);
-	font-weight: bold;
-	padding-inline: 2px;
-	white-space: nowrap;
-}
-
-.tag-group__bg {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	inset-inline-start: 0;
-	opacity: 15%;
-}
-
-.tag-group {
-	display: inline-block;
-	border-radius: var(--border-radius-pill);
-	position: relative;
-	margin-inline-end: 1px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
 .list-item__wrapper:deep() {
 	list-style: none;
 }
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
new file mode 100644
index 0000000000..aa86cb7ff1
--- /dev/null
+++ b/src/components/Tag.vue
@@ -0,0 +1,58 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup>
+import { defineProps } from 'vue'
+import { translateTagDisplayName } from '../util/tag.js'
+
+const props = defineProps({
+	tag: {
+		type: Object,
+		required: true,
+	},
+})
+</script>
+
+<template>
+	<div class="tag-group">
+		<div
+			class="tag-group__bg"
+			:style="{ 'background-color': tag.color }" />
+		<span
+			class="tag-group__label"
+			:style="{ color: tag.color }">
+			{{ translateTagDisplayName(tag) }}
+		</span>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.tag-group {
+	display: inline-block;
+	border-radius: var(--border-radius-pill);
+	position: relative;
+	margin-inline-end: 1px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+
+	&__label {
+		margin: 0 7px;
+		z-index: 2;
+		font-size: calc(var(--default-font-size) * 0.8);
+		font-weight: bold;
+		padding-inline: 2px;
+		white-space: nowrap;
+	}
+
+	&__bg {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		inset-inline-start: 0;
+		opacity: 15%;
+	}
+}
+</style>
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index b65838446b..378099f38b 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -75,19 +75,7 @@
 						</span>
 					</div>
 					<div class="tagline">
-						<div
-							v-for="tag in tags"
-							:key="tag.id"
-							class="tag-group">
-							<div
-								class="tag-group__bg"
-								:style="{ 'background-color': tag.color }" />
-							<span
-								class="tag-group__label"
-								:style="{ color: tag.color }">
-								{{ translateTagDisplayName(tag) }}
-							</span>
-						</div>
+						<Tag v-for="tag in tags" :tag="tag" />
 					</div>
 				</div>
 				<div class="envelope__header__left__unsubscribe">
@@ -365,9 +353,9 @@ import { FOLLOW_UP_TAG_LABEL } from '../store/constants.js'
 import useMainStore from '../store/mainStore.js'
 import useOutboxStore from '../store/outboxStore.js'
 import { mailboxHasRights } from '../util/acl.js'
-import { translateTagDisplayName } from '../util/tag.js'
 import { Text, toPlain } from '../util/text.js'
 import { hiddenTags } from './tags.js'
+import Tag from './Tag.vue'
 
 // Ternary loading state
 const Loading = Object.seal({
@@ -409,6 +397,7 @@ export default {
 		ReplyIcon,
 		ReplyAllIcon,
 		SourceModal,
+		Tag,
 	},
 
 	props: {
@@ -736,7 +725,6 @@ export default {
 	},
 
 	methods: {
-		translateTagDisplayName,
 		redrawMenuBar() {
 			this.$nextTick(() => {
 				this.recomputeMenuSize++
@@ -1303,15 +1291,6 @@ export default {
 		padding-inline: calc(var(--default-grid-baseline) * 0.5);
 	}
 
-	.tag-group__bg {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		inset-inline-start: 0;
-		opacity: 15%;
-	}
-
 	.tagline {
 		display: flex;
 		text-overflow: ellipsis;

From a8418eba116a77f2f05db4756a4fd1db6aa38d88 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Wed, 19 Nov 2025 16:53:46 +0100
Subject: [PATCH 2/3] fixup! refactor(ui): unify tag components

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 src/components/SearchMessages.vue | 39 ++-------------
 src/components/TagItem.vue        | 81 +++++++++++--------------------
 src/components/ThreadEnvelope.vue |  2 +-
 3 files changed, 32 insertions(+), 90 deletions(-)

diff --git a/src/components/SearchMessages.vue b/src/components/SearchMessages.vue
index 2f856792a0..6793e48c60 100644
--- a/src/components/SearchMessages.vue
+++ b/src/components/SearchMessages.vue
@@ -209,18 +209,7 @@
 								:auto-limit="false">
 								<template #selected-option="option">
 									<div class="tag-group__search">
-										<div
-											class="tag-group__bg"
-											:style="
-												'background-color:'
-													+ (option.color !== '#fff'
-														? option.color
-														: '#333')" />
-										<div
-											class="tag-group__label"
-											:style="'color:' + option.color">
-											{{ option.displayName }}
-										</div>
+										<Tag :tag="option" />
 									</div>
 								</template>
 								<template #option="option">
@@ -336,6 +325,7 @@ import FilterVariantIcon from 'vue-material-design-icons/FilterVariant.vue'
 import { findRecipient } from '../service/AutocompleteService.js'
 import useMainStore from '../store/mainStore.js'
 import { hiddenTags } from './tags.js'
+import Tag from './Tag.vue'
 
 const debouncedSearch = debouncePromise(findRecipient, 500)
 
@@ -349,6 +339,7 @@ export default {
 		NcCheckboxRadioSwitch,
 		FilterVariantIcon,
 		Close,
+		Tag,
 	},
 
 	props: {
@@ -682,30 +673,6 @@ export default {
 	margin: 0 !important;
 }
 
-.tag-group__search {
-	box-sizing: border-box;
-	position: relative;
-	margin: 3px 3px;
-	padding: 0 6px;
-}
-
-.tag-group__bg {
-	position: absolute;
-	inset-inline: 0;
-	bottom: 0;
-	top: 0;
-	opacity: 0.4;
-	border-radius: 14px;
-	z-index: 1;
-}
-
-.tag-group__label {
-	font-weight: bold;
-	font-size: 12px;
-	position: relative;
-	z-index: 2;
-}
-
 .search-modal {
 	.modal-inner--content {
 		padding: 16px 0 36px 0;
diff --git a/src/components/TagItem.vue b/src/components/TagItem.vue
index e495f4f1b3..b87f9cee55 100644
--- a/src/components/TagItem.vue
+++ b/src/components/TagItem.vue
@@ -3,14 +3,21 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="tag-group">
+	<div class="tag-item">
+		<div class="tag-item__tag">
+			<Tag :tag="tag" />
+		</div>
 		<button
-			class="tag-group__label"
-			:style="{
-				color: convertHex(tag.color, 1),
-				'background-color': convertHex(tag.color, 0.15),
-			}">
-			{{ translateTagDisplayName(tag) }}
+			v-if="!isSet(tag.imapLabel)"
+			class="tag-actions"
+			@click="addTag(tag.imapLabel)">
+			{{ t('mail', 'Set tag') }}
+		</button>
+		<button
+			v-else
+			class="tag-actions"
+			@click="removeTag(tag.imapLabel)">
+			{{ t('mail', 'Unset tag') }}
 		</button>
 		<Actions :force-menu="true">
 			<NcActionButton
@@ -47,18 +54,6 @@
 				{{ t('mail', 'Delete tag') }}
 			</NcActionButton>
 		</Actions>
-		<button
-			v-if="!isSet(tag.imapLabel)"
-			class="tag-actions"
-			@click="addTag(tag.imapLabel)">
-			{{ t('mail', 'Set tag') }}
-		</button>
-		<button
-			v-else
-			class="tag-actions"
-			@click="removeTag(tag.imapLabel)">
-			{{ t('mail', 'Unset tag') }}
-		</button>
 	</div>
 </template>
 
@@ -69,7 +64,7 @@ import { mapStores } from 'pinia'
 import IconEdit from 'vue-material-design-icons/PencilOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import useMainStore from '../store/mainStore.js'
-import { translateTagDisplayName } from '../util/tag.js'
+import Tag from './Tag.vue'
 
 export default {
 	name: 'TagItem',
@@ -82,6 +77,7 @@ export default {
 		IconLoading,
 		DeleteIcon,
 		IconEdit,
+		Tag,
 	},
 
 	props: {
@@ -114,7 +110,6 @@ export default {
 	},
 
 	methods: {
-		translateTagDisplayName,
 		deleteTag() {
 			this.$emit('delete-tag', this.tag)
 		},
@@ -165,20 +160,6 @@ export default {
 			}
 		},
 
-		convertHex(color, opacity) {
-			if (color.length === 4) {
-				const r = parseInt(color.substring(1, 2), 16)
-				const g = parseInt(color.substring(2, 3), 16)
-				const b = parseInt(color.substring(3, 4), 16)
-				return `rgba(${r}, ${g}, ${b}, ${opacity})`
-			} else {
-				const r = parseInt(color.substring(1, 3), 16)
-				const g = parseInt(color.substring(3, 5), 16)
-				const b = parseInt(color.substring(5, 7), 16)
-				return `rgba(${r}, ${g}, ${b}, ${opacity})`
-			}
-		},
-
 		isSet(imapLabel) {
 			return this.envelopes.some((envelope) => (
 				this.mainStore.getEnvelopeTags(envelope.databaseId).some((tag) => tag.imapLabel === imapLabel)
@@ -203,6 +184,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.tag-item {
+	display: flex;
+	align-items: center;
+	margin: 0 1px;
+
+	&__tag {
+		flex-grow: 1;
+		display: flex;
+		align-items: center;
+	}
+}
+
 .app-navigation-entry-bullet-wrapper {
 	width: 44px;
 	height: 44px;
@@ -223,13 +216,6 @@ export default {
 	}
 }
 
-.tag-group {
-	display: block;
-	position: relative;
-	margin: 0 1px;
-	overflow: hidden;
-}
-
 .tag-actions {
 	background-color: transparent;
 	border: none;
@@ -240,17 +226,6 @@ export default {
 	}
 }
 
-.tag-group__label {
-	z-index: 2;
-	font-weight: bold;
-	border: none;
-	background-color: transparent;
-	padding-inline: 10px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	max-width: 94px;
-}
-
 .action-item {
 	inset-inline-end: 8px;
 	float: inline-end;
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 378099f38b..ffa233c9de 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -338,6 +338,7 @@ import MessageLoadingSkeleton from './MessageLoadingSkeleton.vue'
 import Moment from './Moment.vue'
 import MoveModal from './MoveModal.vue'
 import SourceModal from './SourceModal.vue'
+import Tag from './Tag.vue'
 import TagModal from './TagModal.vue'
 import TaskModal from './TaskModal.vue'
 import TranslationModal from './TranslationModal.vue'
@@ -355,7 +356,6 @@ import useOutboxStore from '../store/outboxStore.js'
 import { mailboxHasRights } from '../util/acl.js'
 import { Text, toPlain } from '../util/text.js'
 import { hiddenTags } from './tags.js'
-import Tag from './Tag.vue'
 
 // Ternary loading state
 const Loading = Object.seal({

From 1b5400c20667197abbdf48c512fc07aa163dc9ad Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Wed, 19 Nov 2025 16:54:56 +0100
Subject: [PATCH 3/3] fix(ui): improve color contrast of tags

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 src/components/Tag.vue | 76 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 62 insertions(+), 14 deletions(-)

diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index aa86cb7ff1..16ec7fbd45 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -3,6 +3,18 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<template>
+	<div class="tag-group" :class="{ 'tag-group--dark': isDark, 'tag-group--bright': !isDark }">
+		<div
+			class="tag-group__bg"
+			:style="{ 'background-color': tag.color }" />
+		<span
+			class="tag-group__label">
+			{{ translateTagDisplayName(tag) }}
+		</span>
+	</div>
+</template>
+
 <script setup>
 import { defineProps } from 'vue'
 import { translateTagDisplayName } from '../util/tag.js'
@@ -13,20 +25,50 @@ const props = defineProps({
 		required: true,
 	},
 })
-</script>
 
-<template>
-	<div class="tag-group">
-		<div
-			class="tag-group__bg"
-			:style="{ 'background-color': tag.color }" />
-		<span
-			class="tag-group__label"
-			:style="{ color: tag.color }">
-			{{ translateTagDisplayName(tag) }}
-		</span>
-	</div>
-</template>
+// Source - https://stackoverflow.com/a
+// Posted by kirilloid, modified by community. See post 'Timeline' for change history
+// Retrieved 2025-11-19, License - CC BY-SA 4.0
+
+const RED = 0.2126;
+const GREEN = 0.7152;
+const BLUE = 0.0722;
+
+const GAMMA = 2.4;
+
+function luminance(r, g, b) {
+	const a = [r, g, b].map(function (v) {
+		v /= 255
+		return v <= 0.03928
+			? v / 12.92
+			: Math.pow((v + 0.055) / 1.055, GAMMA)
+	})
+	return a[0] * RED + a[1] * GREEN + a[2] * BLUE
+}
+
+function contrast(rgb1, rgb2) {
+	const lum1 = luminance(...rgb1)
+	const lum2 = luminance(...rgb2)
+	const brightest = Math.max(lum1, lum2)
+	const darkest = Math.min(lum1, lum2)
+	return (brightest + 0.05) / (darkest + 0.05)
+}
+
+const match = /^\#([\da-fA-F]{1,2})([\da-fA-F]{1,2})([\da-fA-F]{1,2})$/.exec(props.tag.color);
+if (!match) {
+	throw new Error('Could not parse tag colour: ' + props.tag.color)
+}
+const rgbColor = {
+	r: Number(match[1]),
+	g: Number(match[2]),
+	b: Number(match[3]),
+}
+
+const contrastWithWhite = contrast([255, 255, 255], [rgbColor.r, rgbColor.g, rgbColor.b]);
+const contrastWithBlack = contrast([0, 0, 0], [rgbColor.r, rgbColor.g, rgbColor.b]);
+
+const isDark = contrastWithBlack < contrastWithWhite
+</script>
 
 <style scoped lang="scss">
 .tag-group {
@@ -44,6 +86,13 @@ const props = defineProps({
 		font-weight: bold;
 		padding-inline: 2px;
 		white-space: nowrap;
+		filter: brightness(90%);
+	}
+	&--dark &__label {
+		color: white;
+	}
+	&--bright &__label {
+		color: black;
 	}
 
 	&__bg {
@@ -52,7 +101,6 @@ const props = defineProps({
 		height: 100%;
 		top: 0;
 		inset-inline-start: 0;
-		opacity: 15%;
 	}
 }
 </style>