From c82a5a122820c6e8c9305efaadd7406b490a7ba6 Mon Sep 17 00:00:00 2001
From: chandi Langecker <git@chandi.it>
Date: Mon, 26 Sep 2022 23:25:32 +0200
Subject: [PATCH] session list: minor visual improvements

Signed-off-by: chandi Langecker <git@chandi.it>
---
 src/components/Controls.vue    |  9 ++++++--
 src/components/SessionList.vue | 41 +++++++++++++++++-----------------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 23ec784ba..0ab662036 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -40,8 +40,8 @@
 			</p>
 		</div>
 		<div class="board-actions">
-			<SessionList v-if="isNotifyPushEnabled && board && board.activeSessions"
-				:sessions="board.activeSessions" />
+			<SessionList v-if="isNotifyPushEnabled && presentUsers.length"
+				:sessions="presentUsers" />
 			<div v-if="searchQuery || true" class="deck-search">
 				<input type="search"
 					class="icon-search"
@@ -292,6 +292,11 @@ export default {
 		labelsSorted() {
 			return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
+		presentUsers() {
+			if (!this.board) return []
+			// get user object including displayname from the list of all users with acces
+			return this.board.users.filter((user) => this.board.activeSessions.includes(user.uid))
+		},
 	},
 	watch: {
 		board(current, previous) {
diff --git a/src/components/SessionList.vue b/src/components/SessionList.vue
index c40853aaf..a5710034c 100644
--- a/src/components/SessionList.vue
+++ b/src/components/SessionList.vue
@@ -20,31 +20,30 @@
  * -->
 
 <template>
-	<div class="session-list">
-		<button slot="trigger"
-			v-tooltip.bottom="t('text', 'Active people')"
-			class="avatar-list">
-			<div v-for="session in sessionsVisible"
-				:key="session"
-				class="avatar-wrapper"
-				:style="sessionAvatarStyle">
-				<Avatar :user="session"
-					:disable-menu="true"
-					:show-user-status="false"
-					:disable-tooltip="true"
-					:size="size" />
-			</div>
-		</button>
+	<div v-tooltip.bottom="t('text', 'Currently present people')"
+		class="avatar-list">
+		<div v-for="session in sessionsVisible"
+			:key="session.uid"
+			class="avatar-wrapper"
+			:style="sessionAvatarStyle">
+			<NcAvatar :user="session.uid"
+				:display-name="session.displayname"
+				:disable-menu="true"
+				:show-user-status="false"
+				:disable-tooltip="true"
+				:size="size" />
+		</div>
 	</div>
 </template>
 
 <script>
-import { Avatar, Tooltip } from '@nextcloud/vue'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 export default {
 	name: 'SessionList',
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 	directives: {
 		tooltip: Tooltip,
@@ -75,14 +74,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.session-list {
+
+.avatar-list {
+	min-height: 44px;
+	align-items: center;
 	padding-left: 0.5em;
 	padding-right: 0.5em;
-}
-.avatar-list {
 	border: none;
 	background-color: var(--color-main-background);
-	padding: 0;
 	margin: 0;
 	padding-left: 6px;
 	display: inline-flex;