From c6328b1029a6ebe98e87f84662d69b6071634403 Mon Sep 17 00:00:00 2001
From: Wolfgang Haupt <wolfgang@seadev-studios.com>
Date: Wed, 23 Sep 2026 17:36:18 +0200
Subject: [PATCH] feat(usergroup): show the avatar menu for users in a user
 column

Renders users in a user column with NcAvatar and its built-in menu
next to the display name, so the profile of a referenced user can be
viewed without leaving the table. A click on an avatar with a menu
opens the menu instead of starting inline editing, the current user is
highlighted as before, and the menu is disabled on public shares.
Groups and teams keep the user bubble.

Assisted-by: ClaudeCode:claude-fable-5-1
Signed-off-by: Wolfgang Haupt <wolfgang@seadev-studios.com>
---
 playwright/e2e/column-usergroup.spec.ts       | 12 ++---
 .../ncTable/partials/TableCellUsergroup.vue   | 49 +++++++++++++++++--
 src/shared/mixins/searchUserGroup.js          |  2 +-
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/playwright/e2e/column-usergroup.spec.ts b/playwright/e2e/column-usergroup.spec.ts
index 61057286c0..ae9eb846da 100644
--- a/playwright/e2e/column-usergroup.spec.ts
+++ b/playwright/e2e/column-usergroup.spec.ts
@@ -33,8 +33,8 @@ test.describe('Test column ' + columnTitle, () => {
 		await page.locator('[data-cy="createRowSaveButton"]').waitFor({ state: 'visible' })
 		await page.locator('[data-cy="createRowSaveButton"]').click()
 
-		await expect(page.locator('[data-cy="ncTable"] table tr td .user-bubble__name').filter({ hasText: user.userId }).first()).toBeVisible()
-		await expect(page.locator('[data-cy="ncTable"] table tr td .user-bubble__name').filter({ hasText: nonLocalUser.userId }).first()).toBeVisible()
+		await expect(page.locator('[data-cy="ncTable"] table tr td .usergroup-entry').filter({ hasText: user.userId }).first()).toBeVisible()
+		await expect(page.locator('[data-cy="ncTable"] table tr td .usergroup-entry').filter({ hasText: nonLocalUser.userId }).first()).toBeVisible()
 	})
 
 	test('Create column and rows without default values', async ({ userPage: { page }, request }) => {
@@ -51,7 +51,7 @@ test.describe('Test column ' + columnTitle, () => {
 		await page.locator('.vs__dropdown-menu li').filter({ hasText: nonLocalUser.userId }).first().click()
 		await page.locator('[data-cy="createRowSaveButton"]').click()
 
-		await expect(page.locator('[data-cy="ncTable"] table tr td .user-bubble__name').filter({ hasText: nonLocalUser.userId }).first()).toBeVisible()
+		await expect(page.locator('[data-cy="ncTable"] table tr td .usergroup-entry').filter({ hasText: nonLocalUser.userId }).first()).toBeVisible()
 	})
 
 	test('Create and edit rows', async ({ userPage: { page, user }, request }) => {
@@ -65,7 +65,7 @@ test.describe('Test column ' + columnTitle, () => {
 
 		await page.locator('button').filter({ hasText: 'Create row' }).click()
 		await page.locator('[data-cy="createRowSaveButton"]').click()
-		await expect(page.locator('[data-cy="ncTable"] table tr td .user-bubble__name').filter({ hasText: user.userId }).first()).toBeVisible()
+		await expect(page.locator('[data-cy="ncTable"] table tr td .usergroup-entry').filter({ hasText: user.userId }).first()).toBeVisible()
 
 		const firstRow = page.locator('[data-cy="ncTable"] [data-cy="customTableRow"]').first()
 		await openRowActionMenu(page, firstRow)
@@ -85,7 +85,7 @@ test.describe('Test column ' + columnTitle, () => {
 
 		await saveEditRow(page)
 
-		await expect(page.locator('[data-cy="ncTable"] table tr td .user-bubble__name', { hasText: user.userId })).toBeHidden()
-		await expect(page.locator('[data-cy="ncTable"] table tr td .user-bubble__name').filter({ hasText: nonLocalUser.userId }).first()).toBeVisible()
+		await expect(page.locator('[data-cy="ncTable"] table tr td .usergroup-entry', { hasText: user.userId })).toBeHidden()
+		await expect(page.locator('[data-cy="ncTable"] table tr td .usergroup-entry').filter({ hasText: nonLocalUser.userId }).first()).toBeVisible()
 	})
 })
diff --git a/src/shared/components/ncTable/partials/TableCellUsergroup.vue b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
index 514bd08645..4c4b1f6093 100644
--- a/src/shared/components/ncTable/partials/TableCellUsergroup.vue
+++ b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
@@ -7,7 +7,16 @@
 		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
 			<div v-if="value" class="table-cell-usergroup">
 				<div v-for="item in value" :key="item.id" class="inline usergroup-entry">
-					<NcUserBubble :user="item.id" :avatar-image="getAvatarImage(item)" :is-no-user="!isUser(item)" :display-name="item.displayName ?? item.id" :show-user-status="isUser(item) && column.showUserStatus" :size="column.showUserStatus ? 34 : 20" :primary="isCurrentUser(item)" />
+					<span v-if="isUser(item)"
+						class="usergroup-user"
+						:class="{ 'usergroup-user--current': isCurrentUser(item) }"
+						@click="stopClickOnAvatarMenu">
+						<span class="usergroup-user__avatar">
+							<NcAvatar :user="item.id" :display-name="item.displayName ?? item.id" :size="column.showUserStatus ? 30 : 20" :hide-status="!column.showUserStatus" :disable-menu="isPublicShare" :disable-tooltip="true" />
+						</span>
+						{{ item.displayName ?? item.id }}
+					</span>
+					<NcUserBubble v-else :user="item.id" :avatar-image="getAvatarImage(item)" :is-no-user="true" :display-name="item.displayName ?? item.id" :size="column.showUserStatus ? 34 : 20" />
 				</div>
 			</div>
 		</div>
@@ -45,7 +54,8 @@
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
-import { NcUserBubble, NcSelect } from '@nextcloud/vue'
+import { NcAvatar, NcSelect, NcUserBubble } from '@nextcloud/vue'
+import { useDataStore } from '../../../../store/data.js'
 import { USERGROUP_TYPE } from '../../../constants.ts'
 import cellEditMixin from '../mixins/cellEditMixin.js'
 import searchUserGroup from '../../../mixins/searchUserGroup.js'
@@ -58,8 +68,9 @@ export default {
 	name: 'TableCellUsergroup',
 
 	components: {
-		NcUserBubble,
+		NcAvatar,
 		NcSelect,
+		NcUserBubble,
 	},
 
 	mixins: [
@@ -97,6 +108,9 @@ export default {
 		isCurrentUser() {
 			return (item) => this.isUser(item) && item.id === currentUser?.uid
 		},
+		isPublicShare() {
+			return !!useDataStore().publicToken
+		},
 		isUser() {
 			return (item) => item.type === USERGROUP_TYPE.USER
 		},
@@ -133,6 +147,17 @@ export default {
 			event.stopPropagation()
 		},
 
+		/**
+		 * Let a click on an avatar open its menu instead of starting to edit the cell
+		 *
+		 * @param {MouseEvent} event the click event
+		 */
+		stopClickOnAvatarMenu(event) {
+			if (event.target.closest('.avatardiv--with-menu')) {
+				event.stopPropagation()
+			}
+		},
+
 		getAvatarImage(item) {
 			if (item.type === USERGROUP_TYPE.GROUP) {
 				return 'icon-group'
@@ -217,6 +242,24 @@ export default {
 	padding-inline-end: 10px;
 }
 
+.usergroup-user {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	padding: 2px 8px 2px 2px;
+	border-radius: var(--border-radius-pill);
+	background-color: var(--color-background-dark);
+
+	&--current {
+		background-color: var(--color-primary-element);
+		color: var(--color-primary-element-text);
+	}
+
+	&__avatar {
+		display: flex;
+	}
+}
+
 .edit-mode {
 	padding: 10px 0;
 
diff --git a/src/shared/mixins/searchUserGroup.js b/src/shared/mixins/searchUserGroup.js
index bde69d654f..7b32e679b1 100644
--- a/src/shared/mixins/searchUserGroup.js
+++ b/src/shared/mixins/searchUserGroup.js
@@ -21,7 +21,7 @@ export default {
 			maxAutocompleteResults: 20,
 			suggestions: [],
 			recommendations: [],
-			currentUserId: getCurrentUser().uid,
+			currentUserId: getCurrentUser()?.uid ?? null,
 		}
 	},
 	computed: {