session list: minor visual improvements

Signed-off-by: chandi Langecker <git@chandi.it>

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) {

src/components/SessionList.vue

@@ -20,31 +20,30 @@
  * -->
 
 <template>
-	<div class="session-list">
-		<button slot="trigger"
-			v-tooltip.bottom="t('text', 'Active people')"
+	<div v-tooltip.bottom="t('text', 'Currently present people')"
 		class="avatar-list">
 		<div v-for="session in sessionsVisible"
-				:key="session"
+			:key="session.uid"
 			class="avatar-wrapper"
 			:style="sessionAvatarStyle">
-				<Avatar :user="session"
+			<NcAvatar :user="session.uid"
+				:display-name="session.displayname"
 				:disable-menu="true"
 				:show-user-status="false"
 				:disable-tooltip="true"
 				:size="size" />
 		</div>
-		</button>
 	</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;