From 3125abe1d03b80d86316a5779cf370e76cb1a329 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 28 Jan 2025 18:09:05 +0100
Subject: [PATCH 1/2] fix(LeftSidebar): define size property for groups and
 teams

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 55fad015a4f..2268375d7f2 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -229,7 +229,7 @@
 							:compact="isCompact"
 							@click="createAndJoinConversation(item)">
 							<template #icon>
-								<ConversationIcon :item="iconData(item)" />
+								<ConversationIcon :item="iconData(item)" :size="isCompact ? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
 							</template>
 							<template v-if="!isCompact" #subname>
 								{{ t('spreed', 'New group conversation') }}
@@ -247,7 +247,7 @@
 							:compact="isCompact"
 							@click="createAndJoinConversation(item)">
 							<template #icon>
-								<ConversationIcon :item="iconData(item)" />
+								<ConversationIcon :item="iconData(item)" :size="isCompact ? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
 							</template>
 							<template v-if="!isCompact" #subname>
 								{{ t('spreed', 'New group conversation') }}

From 97d8cdb5a5190b56fa4c6b0f614ddd3a55d3ebd3 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 28 Jan 2025 18:04:19 +0100
Subject: [PATCH 2/2] fix(team): support team mentions on frontend

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 css/icons.css                                  | 18 ++++++++++++++++++
 .../Message/MessagePart/Mention.vue            | 15 +++++++++++++--
 src/composables/useChatMentions.ts             |  4 ++++
 src/constants.ts                               |  3 +++
 src/utils/textParse.ts                         |  3 +++
 5 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/css/icons.css b/css/icons.css
index 3530810f198..e149ff6fc0a 100644
--- a/css/icons.css
+++ b/css/icons.css
@@ -106,12 +106,15 @@
  * "forced-white" needs to be included in the class name as the Avatar does
  * not accept several classes. */
 .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
+.user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
 .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
 .user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
 .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+.autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
 .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
 .autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
 .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
+.mention-bubble .icon-team-forced-white.mention-bubble__icon--,
 .mention-bubble .icon-user-forced-white.mention-bubble__icon--,
 .mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
 	background-color: #6B6B6B;
@@ -120,12 +123,15 @@
 /* System default: dark theme */
 @media (prefers-color-scheme: dark) {
 	body[data-theme-default] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
+	body[data-theme-default] .user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
 	body[data-theme-default] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
 	body[data-theme-default] .user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
 	body[data-theme-default] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+	body[data-theme-default] .autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
 	body[data-theme-default] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
 	body[data-theme-default] .autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
 	body[data-theme-default] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
+	body[data-theme-default] .mention-bubble .icon-team-forced-white.mention-bubble__icon--,
 	body[data-theme-default] .mention-bubble .icon-user-forced-white.mention-bubble__icon--,
 	body[data-theme-default] .mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
 		background-color: #3B3B3B;
@@ -134,12 +140,15 @@
 
 /* Manually set dark theme */
 body[data-theme-dark] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
+body[data-theme-dark] .user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
 body[data-theme-dark] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
 body[data-theme-dark] .user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
 body[data-theme-dark] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+body[data-theme-dark] .autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
 body[data-theme-dark] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
 body[data-theme-dark] .autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
 body[data-theme-dark] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
+body[data-theme-dark] .mention-bubble .icon-team-forced-white.mention-bubble__icon--,
 body[data-theme-dark] .mention-bubble .icon-user-forced-white.mention-bubble__icon--,
 body[data-theme-dark] .mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
 	background-color: #3B3B3B;
@@ -151,15 +160,18 @@ body[dir="rtl"] .bidirectional-icon {
 }
 
 .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
+.user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
 .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
 .user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
 .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
+.mention-bubble .icon-team-forced-white.mention-bubble__icon--,
 .mention-bubble .icon-user-forced-white.mention-bubble__icon--,
 .mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
 	background-size: 75%;
 }
 
 .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+.autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
 .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
 .autocomplete-result .icon-mail-forced-white.autocomplete-result__icon-- {
 	background-size: 50% !important;
@@ -183,6 +195,12 @@ body[dir="rtl"] .bidirectional-icon {
 	background-image: url(../img/icon-contacts-white.svg);
 }
 
+.user-bubble__avatar .icon-team-forced-white,
+.autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
+.mention-bubble .icon-team-forced-white.mention-bubble__icon-- {
+	background-image: url(../img/icon-team-white.svg);
+}
+
 /* Needed to use white color also in dark mode. */
 .app-files .app-sidebar__close.forced-white {
 	color: #ffffff;
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
index 3d79fe7811c..b5595d199df 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
@@ -75,6 +75,9 @@ export default {
 		isGroupMention() {
 			return [MENTION.TYPE.USERGROUP, MENTION.TYPE.GROUP].includes(this.type)
 		},
+		isTeamMention() {
+			return [MENTION.TYPE.CIRCLE, MENTION.TYPE.TEAM].includes(this.type)
+		},
 		isMentionToGuest() {
 			return this.type === MENTION.TYPE.GUEST || this.type === MENTION.TYPE.EMAIL
 		},
@@ -105,9 +108,15 @@ export default {
 			return this.isGroupMention
 				&& loadState('spreed', 'user_group_ids', []).includes(this.id)
 		},
+		isCurrentUserTeam() {
+			// FIXME need backend support here
+			return this.isTeamMention && false
+		},
 		primary() {
-			return this.isMentionToAll || this.isCurrentUser
-				|| (this.isGroupMention && this.isCurrentUserGroup)
+			return this.isMentionToAll
+				|| this.isCurrentUser
+				|| this.isCurrentUserGroup
+				|| this.isCurrentUserTeam
 				|| (this.isMentionToGuest && this.isCurrentGuest)
 		},
 		avatarUrl() {
@@ -117,6 +126,8 @@ export default {
 					: 'icon-user-forced-white'
 			} else if (this.isGroupMention) {
 				return 'icon-group-forced-white'
+			} else if (this.isTeamMention) {
+				return 'icon-team-forced-white'
 			} else if (this.isMentionToGuest) {
 				return 'icon-user-forced-white'
 			} else if (!this.isMentionToAll) {
diff --git a/src/composables/useChatMentions.ts b/src/composables/useChatMentions.ts
index 7f9d56af391..6568f1e99f4 100644
--- a/src/composables/useChatMentions.ts
+++ b/src/composables/useChatMentions.ts
@@ -66,6 +66,10 @@ export function useChatMentions(token: Ref<string>): ReturnType {
 		} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.GROUPS) {
 			chatMention.icon = 'icon-group-forced-white'
 			chatMention.subline = t('spreed', 'Group')
+		} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.CIRCLES
+			|| possibleMention.source === ATTENDEE.ACTOR_TYPE.TEAMS) {
+			chatMention.icon = 'icon-team-forced-white'
+			chatMention.subline = t('spreed', 'Team')
 		} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.GUESTS) {
 			chatMention.icon = 'icon-user-forced-white'
 			chatMention.subline = t('spreed', 'Guest')
diff --git a/src/constants.ts b/src/constants.ts
index bf18953c48d..5a49ac025df 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -119,6 +119,7 @@ export const ATTENDEE = {
 		EMAILS: 'emails',
 		GROUPS: 'groups',
 		CIRCLES: 'circles',
+		TEAMS: 'teams',
 		BOTS: 'bots',
 		BRIDGED: 'bridged',
 		FEDERATED_USERS: 'federated_users',
@@ -325,9 +326,11 @@ export const MENTION = {
 		GUEST: 'guest',
 		EMAIL: 'email',
 		USERGROUP: 'user-group',
+		CIRCLE: 'circle',
 		// Parsed to another types
 		FEDERATED_USER: 'federated_user',
 		GROUP: 'group',
+		TEAM: 'team',
 	},
 }
 
diff --git a/src/utils/textParse.ts b/src/utils/textParse.ts
index 428da494dd2..badc9060b20 100644
--- a/src/utils/textParse.ts
+++ b/src/utils/textParse.ts
@@ -28,6 +28,9 @@ function parseMentions(text: string, parameters: ChatMessage['messageParameters'
 		} else if (key.startsWith('mention-group')
 			&& [MENTION.TYPE.USERGROUP, MENTION.TYPE.GROUP].includes(value.type)) {
 			mention = `@"group/${value.id}"`
+		} else if (key.startsWith('mention-team')
+			&& [MENTION.TYPE.CIRCLE, MENTION.TYPE.TEAM].includes(value.type)) {
+			mention = `@"team/${value.id}"`
 		} else if (key.startsWith('mention-guest') && value.type === MENTION.TYPE.GUEST) {
 			mention = `@"${value.id}"`
 		} else if (key.startsWith('mention-email') && value.type === MENTION.TYPE.EMAIL) {