From 2647b89d5d4e8c90a7e4babcf956e8103e8c366b Mon Sep 17 00:00:00 2001
From: Dorra Jaouad <dorra.jaoued7@gmail.com>
Date: Fri, 10 Jan 2025 14:35:35 +0100
Subject: [PATCH] feat: add UI changes for compact mode

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
---
 .../AvatarWrapper/AvatarWrapper.vue           |  7 +-
 src/components/ConversationIcon.vue           | 11 +++-
 .../ConversationsList/Conversation.vue        | 66 +++++++++++++++++--
 .../ConversationsListVirtual.vue              | 33 ++++++----
 src/components/LeftSidebar/LeftSidebar.vue    | 43 +++++++++---
 src/constants.js                              |  1 +
 6 files changed, 129 insertions(+), 32 deletions(-)

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index c013f599fd7..2cba5b2f483 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -31,7 +31,7 @@
 			:preloaded-user-status="preloadedUserStatus"
 			:size="size" />
 		<!-- Override user status for federated users -->
-		<span v-if="showUserStatus && isFederatedUser"
+		<span v-if="showUserStatus && isFederatedUser && !compact"
 			class="avatar-wrapper__user-status"
 			role="img"
 			aria-hidden="false"
@@ -132,6 +132,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		compact: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 7cae60052cd..ee7096645b4 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -19,7 +19,7 @@
 				:height="size"
 				:alt="item.displayName"
 				class="avatar icon">
-			<span v-if="!hideUserStatus && conversationType"
+			<span v-if="!hideUserStatus && conversationType && !compact"
 				class="conversation-icon__type"
 				role="img"
 				aria-hidden="false"
@@ -131,6 +131,11 @@ export default {
 			type: Number,
 			default: AVATAR.SIZE.DEFAULT,
 		},
+
+		compact: {
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	setup() {
@@ -143,11 +148,11 @@ export default {
 
 	computed: {
 		showCall() {
-			return !this.hideCall && this.item.hasCall
+			return !this.hideCall && this.item.hasCall && !this.compact
 		},
 
 		showFavorite() {
-			return !this.hideFavorite && this.item.isFavorite
+			return !this.hideFavorite && this.item.isFavorite && !this.compact
 		},
 
 		preloadedUserStatus() {
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 2c5ecb2f3d9..6e765c6509c 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -9,18 +9,36 @@
 		:name="item.displayName"
 		:title="item.displayName"
 		:data-nav-id="`conversation_${item.token}`"
-		:class="['conversation', { 'conversation--active': isActive }]"
+		class="conversation"
+		:class="{
+			'conversation--active': isActive,
+			'conversation--compact': compact,
+			'conversation--compact__read': compact && !item.unreadMessages
+		}"
 		:actions-aria-label="t('spreed', 'Conversation actions')"
 		:to="to"
 		:bold="!!item.unreadMessages"
 		:counter-number="item.unreadMessages"
 		:counter-type="counterType"
 		force-menu
+		:compact="compact"
 		@click="onClick">
+		<template #name>
+			<template v-if="compact && iconType">
+				<component :is="iconType.component" :size="15" :fill-color="iconType.color" />
+				<span class="hidden-visually">{{ iconType.text }}</span>
+			</template>
+			<span>{{ item.displayName }}</span>
+		</template>
 		<template #icon>
-			<ConversationIcon :item="item" :hide-favorite="false" :hide-call="false" />
+			<ConversationIcon :item="item"
+				:hide-favorite="false"
+				:hide-call="false"
+				:compact="compact"
+				:show-user-online-status="compact"
+				:size="compact? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
 		</template>
-		<template #subname>
+		<template v-if="!compact" #subname>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<span v-html="conversationInformation" />
 		</template>
@@ -210,6 +228,7 @@ import IconEye from 'vue-material-design-icons/Eye.vue'
 import IconEyeOff from 'vue-material-design-icons/EyeOff.vue'
 import IconPhoneRing from 'vue-material-design-icons/PhoneRing.vue'
 import IconStar from 'vue-material-design-icons/Star.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue'
 import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
 import IconVolumeOff from 'vue-material-design-icons/VolumeOff.vue'
 
@@ -226,7 +245,7 @@ import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import ConversationIcon from './../../ConversationIcon.vue'
 
 import { useConversationInfo } from '../../../composables/useConversationInfo.js'
-import { PARTICIPANT } from '../../../constants.js'
+import { PARTICIPANT, AVATAR } from '../../../constants.js'
 import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
 
@@ -259,6 +278,7 @@ export default {
 		IconStar,
 		IconVolumeHigh,
 		IconVolumeOff,
+		IconVideo,
 		NcActionButton,
 		NcActionSeparator,
 		NcButton,
@@ -288,9 +308,15 @@ export default {
 					notificationCalls: PARTICIPANT.NOTIFY_CALLS.ON,
 					canDeleteConversation: false,
 					canLeaveConversation: false,
+					hasCall: false,
 				}
 			},
 		},
+
+		compact: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['click'],
@@ -303,6 +329,7 @@ export default {
 		const { counterType, conversationInformation } = useConversationInfo({ item, isSearchResult })
 
 		return {
+			AVATAR,
 			supportsArchive,
 			submenu,
 			isLeaveDialogOpen,
@@ -363,6 +390,23 @@ export default {
 		notificationCalls() {
 			return this.item.notificationCalls === PARTICIPANT.NOTIFY_CALLS.ON
 		},
+
+		iconType() {
+			if (this.item.hasCall) {
+				return {
+					component: 'IconVideo',
+					color: '#E9322D',
+					text: t('spreed', 'Call in progress')
+				}
+			} else if (this.item.isFavorite) {
+				return {
+					component: 'IconStar',
+					color: '#FFCC00',
+					text: t('spreed', 'Favorite')
+				}
+			}
+			return null
+		},
 	},
 
 	methods: {
@@ -510,6 +554,20 @@ export default {
 			border-color: var(--color-primary-element-hover);
 		}
 	}
+
+	&--compact {
+		padding-block: 2px !important; // Overwrite list-item 4px padding
+		&:deep(.list-item-content__name) {
+			display: flex;
+			gap: calc(var(--default-grid-baseline) / 2);
+		}
+		&__read {
+			&:deep(.list-item-content__name) {
+				font-weight: 400;
+			}
+		}
+
+	}
 }
 
 :deep(.dialog) {
diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
index dca83c88c4d..1292e3c1f6a 100644
--- a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
+++ b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
@@ -10,7 +10,7 @@
 		:item-size="CONVERSATION_ITEM_SIZE"
 		key-field="token">
 		<template #default="{ item }">
-			<Conversation :item="item" />
+			<Conversation :item="item" :compact="compact" />
 		</template>
 		<template #after>
 			<LoadingPlaceholder v-if="loading" type="conversations" />
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import { RecycleScroller } from 'vue-virtual-scroller'
 
 import Conversation from './Conversation.vue'
@@ -28,13 +29,6 @@ import { AVATAR } from '../../../constants.js'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-/* Consider:
- * avatar size (and two lines of text)
- * list-item padding
- * list-item__wrapper padding
- */
-const CONVERSATION_ITEM_SIZE = AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2
-
 export default {
 	name: 'ConversationsListVirtual',
 
@@ -54,9 +48,20 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		compact: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
-	setup() {
+	setup(props) {
+		/* Consider:
+		* avatar size (and two lines of text) or compact mode (34px)
+		* list-item padding
+		* list-item__wrapper padding
+		*/
+		const CONVERSATION_ITEM_SIZE = computed(() => props.compact ? 34 + 2 * 2 + 0 * 2 : AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2)
 		return {
 			CONVERSATION_ITEM_SIZE,
 		}
@@ -71,7 +76,7 @@ export default {
 		 */
 		getFirstItemInViewportIndex() {
 			// (ceil to include partially) of (absolute number of items above viewport) + 1 (next item is in viewport) - 1 (index starts from 0)
-			return Math.ceil(this.$refs.scroller.$el.scrollTop / CONVERSATION_ITEM_SIZE)
+			return Math.ceil(this.$refs.scroller.$el.scrollTop / this.CONVERSATION_ITEM_SIZE)
 		},
 
 		/**
@@ -82,7 +87,7 @@ export default {
 		 */
 		getLastItemInViewportIndex() {
 			// (floor to include only fully visible) of (absolute number of items below and in viewport) - 1 (index starts from 0)
-			return Math.floor((this.$refs.scroller.$el.scrollTop + this.$refs.scroller.$el.clientHeight) / CONVERSATION_ITEM_SIZE) - 1
+			return Math.floor((this.$refs.scroller.$el.scrollTop + this.$refs.scroller.$el.clientHeight) / this.CONVERSATION_ITEM_SIZE) - 1
 		},
 
 		/**
@@ -106,7 +111,7 @@ export default {
 			 */
 			const doScroll = (to) => {
 				const ITEMS_TO_BORDER_AFTER_SCROLL = 1
-				const padding = ITEMS_TO_BORDER_AFTER_SCROLL * CONVERSATION_ITEM_SIZE
+				const padding = ITEMS_TO_BORDER_AFTER_SCROLL * this.CONVERSATION_ITEM_SIZE
 				const from = this.$refs.scroller.$el.scrollTop
 				const direction = from < to ? 1 : -1
 
@@ -123,10 +128,10 @@ export default {
 			}
 
 			if (index < firstItemIndex) { // Item is above
-				await doScroll(index * CONVERSATION_ITEM_SIZE)
+				await doScroll(index * this.CONVERSATION_ITEM_SIZE)
 			} else if (index > lastItemIndex) { // Item is below
 				// Position of item + item's height and move to bottom
-				await doScroll((index + 1) * CONVERSATION_ITEM_SIZE - viewportHeight)
+				await doScroll((index + 1) * this.CONVERSATION_ITEM_SIZE - viewportHeight)
 			}
 		},
 
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 42297eee655..fd754dd192b 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -152,6 +152,7 @@
 					ref="scroller"
 					:conversations="filteredConversationsList"
 					:loading="!initialisedConversations"
+					:compact="isCompact"
 					class="scroller"
 					@scroll.native="debounceHandleScroll" />
 				<NcButton v-if="!preventFindingUnread && lastUnreadMentionBelowViewportIndex !== null"
@@ -170,18 +171,20 @@
 					:key="`conversation_${item.id}`"
 					:ref="`conversation-${item.token}`"
 					:item="item"
+					:compact="isCompact"
 					@click="abortSearch" />
 				<Hint v-if="searchResultsConversationList.length === 0" :hint="t('spreed', 'No matches found')" />
 
 				<!-- Create a new conversation -->
 				<NcListItem v-if="canStartConversations"
 					:name="searchText"
+					:compact="isCompact"
 					data-nav-id="conversation_create_new"
 					@click="createConversation(searchText)">
 					<template #icon>
-						<ChatPlus :size="AVATAR.SIZE.DEFAULT" />
+						<ChatPlus :size="isCompact? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
 					</template>
-					<template #subname>
+					<template v-if="!isCompact" #subname>
 						{{ t('spreed', 'New group conversation') }}
 					</template>
 				</NcListItem>
@@ -193,6 +196,7 @@
 						:key="`open-conversation_${item.id}`"
 						:item="item"
 						is-search-result
+						:compact="isCompact"
 						@click="abortSearch" />
 				</template>
 
@@ -203,11 +207,12 @@
 						:key="`user_${item.id}`"
 						:data-nav-id="`user_${item.id}`"
 						:name="item.label"
+						:compact="isCompact"
 						@click="createAndJoinConversation(item)">
 						<template #icon>
 							<AvatarWrapper v-bind="iconData(item)" />
 						</template>
-						<template #subname>
+						<template v-if="!isCompact" #subname>
 							{{ t('spreed', 'New private conversation') }}
 						</template>
 					</NcListItem>
@@ -222,11 +227,12 @@
 							:key="`group_${item.id}`"
 							:data-nav-id="`group_${item.id}`"
 							:name="item.label"
+							: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 #subname>
+							<template v-if="!isCompact" #subname>
 								{{ t('spreed', 'New group conversation') }}
 							</template>
 						</NcListItem>
@@ -239,11 +245,12 @@
 							:key="`circle_${item.id}`"
 							:data-nav-id="`circle_${item.id}`"
 							:name="item.label"
+							: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 #subname>
+							<template v-if="!isCompact" #subname>
 								{{ t('spreed', 'New group conversation') }}
 							</template>
 						</NcListItem>
@@ -256,11 +263,12 @@
 							:key="`federated_${item.id}`"
 							:data-nav-id="`federated_${item.id}`"
 							:name="item.label"
+							:compact="isCompact"
 							@click="createAndJoinConversation(item)">
 							<template #icon>
 								<AvatarWrapper v-bind="iconData(item)" />
 							</template>
-							<template #subname>
+							<template v-if="!isCompact" #subname>
 								{{ t('spreed', 'New group conversation') }}
 							</template>
 						</NcListItem>
@@ -371,6 +379,7 @@ import { autocompleteQuery } from '../../services/coreService.ts'
 import { EventBus } from '../../services/EventBus.ts'
 import { talkBroadcastChannel } from '../../services/talkBroadcastChannel.js'
 import { useFederationStore } from '../../stores/federation.ts'
+import { useSettingsStore } from '../../stores/settings.js'
 import { useTalkHashStore } from '../../stores/talkHash.js'
 import CancelableRequest from '../../utils/cancelableRequest.js'
 import { hasUnreadMentions, hasCall, filterConversation, shouldIncludeArchived } from '../../utils/conversation.js'
@@ -434,6 +443,7 @@ export default {
 
 		const federationStore = useFederationStore()
 		const talkHashStore = useTalkHashStore()
+		const settingsStore = useSettingsStore()
 		const { initializeNavigation, resetNavigation } = useArrowNavigation(leftSidebar, searchBox)
 		const isMobile = useIsMobile()
 
@@ -451,6 +461,7 @@ export default {
 			canNoteToSelf,
 			supportsArchive,
 			showArchived,
+			settingsStore,
 		}
 	},
 
@@ -610,6 +621,10 @@ export default {
 				}
 			}
 		},
+
+		isCompact() {
+			return this.settingsStore.conversationsListStyle === CONVERSATION.LIST_STYLE.COMPACT
+		},
 	},
 
 	watch: {
@@ -1030,11 +1045,14 @@ export default {
 					disableMenu: true,
 					token: 'new',
 					showUserStatus: true,
+					size: this.isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT,
+					compact: this.isCompact,
 				}
 			}
 			return {
 				type: CONVERSATION.TYPE.GROUP,
 				objectType: item.source,
+				compact: this.isCompact,
 			}
 		},
 	},
@@ -1146,10 +1164,15 @@ export default {
 	.avatardiv .avatardiv__user-status {
 		right: -2px !important;
 		bottom: -2px !important;
-		min-height: 14px !important;
-		min-width: 14px !important;
+		min-height: 11px !important;
+		min-width: 11px !important;
 		line-height: 1 !important;
 		font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
 	}
 }
+
+// Overwrite NcListItem styles: remove padding in compact view
+:deep(.list-item--compact) {
+	padding-block: 0 !important;
+}
 </style>
diff --git a/src/constants.js b/src/constants.js
index 9124cdc16e8..47bac3424ea 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -300,6 +300,7 @@ export const BOT = {
 
 export const AVATAR = {
 	SIZE: {
+		COMPACT: 20,
 		EXTRA_SMALL: 22,
 		SMALL: 32,
 		DEFAULT: 40,