From a7c1ed76c07d9f2e5eb660a1a206fa2a2116ad08 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 9 Oct 2023 12:51:32 +0200
Subject: [PATCH] chore(deps): fix NcListItem

rename *title => *name props, adjust tests, remove deep styles

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationsList/Conversation.spec.js    |  8 +--
 .../ConversationsList/Conversation.vue        | 10 +--
 .../LeftSidebar/LeftSidebar.spec.js           | 20 +++---
 src/components/LeftSidebar/LeftSidebar.vue    | 69 ++++++++++---------
 src/test-helpers.js                           |  4 +-
 5 files changed, 54 insertions(+), 57 deletions(-)

diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
index 5ae85985c655..aa9d108fab56 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
@@ -101,7 +101,7 @@ describe('Conversation.vue', () => {
 
 		const el = wrapper.findComponent({ name: 'NcListItem' })
 		expect(el.exists()).toBe(true)
-		expect(el.props('title')).toBe('conversation one')
+		expect(el.props('name')).toBe('conversation one')
 
 		const icon = el.findComponent({ name: 'ConversationIcon' })
 		expect(icon.props('item')).toStrictEqual(item)
@@ -109,10 +109,10 @@ describe('Conversation.vue', () => {
 		expect(icon.props('hideCall')).toStrictEqual(false)
 	})
 
-	describe('displayed subtitle', () => {
+	describe('displayed subname', () => {
 		/**
 		 * @param {object} item Conversation data
-		 * @param {string} expectedText Expected subtitle of the conversation item
+		 * @param {string} expectedText Expected subname of the conversation item
 		 * @param {boolean} isSearchResult Whether or not the item is a search result (has no … menu)
 		 */
 		function testConversationLabel(item, expectedText, isSearchResult = false) {
@@ -129,7 +129,7 @@ describe('Conversation.vue', () => {
 			})
 
 			const el = wrapper.findComponent({ name: 'NcListItem' })
-			expect(el.vm.$slots.subtitle[0].text.trim()).toBe(expectedText)
+			expect(el.vm.$slots.subname[0].text.trim()).toBe(expectedText)
 		}
 
 		test('display joining conversation message when not joined yet', () => {
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 89cc2ee294cb..a624e5febe17 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<NcListItem ref="listItem"
-		:title="item.displayName"
+		:name="item.displayName"
 		class="conversation-item"
 		:class="{'unread-mention-conversation': item.unreadMention}"
 		:data-nav-id="`conversation_${item.token}`"
@@ -34,7 +34,7 @@
 		<template #icon>
 			<ConversationIcon :item="item" :hide-favorite="false" :hide-call="false" />
 		</template>
-		<template #subtitle>
+		<template #subname>
 			<strong v-if="item.unreadMessages"
 				class="subtitle">
 				{{ conversationInformation }}
@@ -333,7 +333,7 @@ export default {
 			immediate: true,
 			handler(value) {
 				this.$nextTick().then(() => {
-					const titleSpan = this.$refs.listItem?.$el?.querySelector('.line-one__title')
+					const titleSpan = this.$refs.listItem?.$el?.querySelector('.line-one__name')
 
 					if (titleSpan && titleSpan.offsetWidth < titleSpan.scrollWidth) {
 						titleSpan.setAttribute('title', value)
@@ -450,10 +450,6 @@ export default {
 	font-weight: bold;
 }
 
-:deep(.action-text__title) {
-	margin-left: 12px;
-}
-
 .critical {
 	:deep(.action-button) {
 		color: var(--color-error) !important;
diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index a0ba79c36017..c23204106f2e 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -343,7 +343,7 @@ describe('LeftSidebar.vue', () => {
 				expect(captionListItems.exists()).toBeTruthy()
 				expect(captionListItems).toHaveLength(captionList.length)
 				captionList.forEach((caption, index) => {
-					expect(captionListItems.at(index).props('title')).toStrictEqual(caption)
+					expect(captionListItems.at(index).props('name')).toStrictEqual(caption)
 				})
 
 				// Check all conversations
@@ -363,7 +363,7 @@ describe('LeftSidebar.vue', () => {
 				expect(resultsListItems.exists()).toBeTruthy()
 				expect(resultsListItems).toHaveLength(resultsList.length)
 				resultsList.forEach((result, index) => {
-					expect(resultsListItems.at(index).props('title')).toStrictEqual(result)
+					expect(resultsListItems.at(index).props('name')).toStrictEqual(result)
 				})
 			})
 
@@ -384,7 +384,7 @@ describe('LeftSidebar.vue', () => {
 				expect(captionListItems.exists()).toBeTruthy()
 				expect(captionListItems).toHaveLength(captionList.length)
 				captionList.forEach((caption, index) => {
-					expect(captionListItems.at(index).props('title')).toStrictEqual(caption)
+					expect(captionListItems.at(index).props('name')).toStrictEqual(caption)
 				})
 
 				// Check all conversations
@@ -404,7 +404,7 @@ describe('LeftSidebar.vue', () => {
 				expect(resultsListItems.exists()).toBeTruthy()
 				expect(resultsListItems).toHaveLength(resultsList.length)
 				resultsList.forEach((result, index) => {
-					expect(resultsListItems.at(index).props('title')).toStrictEqual(result)
+					expect(resultsListItems.at(index).props('name')).toStrictEqual(result)
 				})
 			})
 
@@ -425,7 +425,7 @@ describe('LeftSidebar.vue', () => {
 				expect(captionListItems.exists()).toBeTruthy()
 				expect(captionListItems).toHaveLength(captionList.length)
 				captionList.forEach((caption, index) => {
-					expect(captionListItems.at(index).props('title')).toStrictEqual(caption)
+					expect(captionListItems.at(index).props('name')).toStrictEqual(caption)
 				})
 
 				// Check all conversations
@@ -445,7 +445,7 @@ describe('LeftSidebar.vue', () => {
 				expect(resultsListItems.exists()).toBeTruthy()
 				expect(resultsListItems).toHaveLength(resultsList.length)
 				resultsList.forEach((result, index) => {
-					expect(resultsListItems.at(index).props('title')).toStrictEqual(result)
+					expect(resultsListItems.at(index).props('name')).toStrictEqual(result)
 				})
 			})
 		})
@@ -472,14 +472,14 @@ describe('LeftSidebar.vue', () => {
 				expect(captionsEls.exists()).toBeTruthy()
 				if (listedResults.length > 0) {
 					expect(captionsEls.length).toBeGreaterThan(2)
-					expect(captionsEls.at(0).props('title')).toBe('Conversations')
-					expect(captionsEls.at(1).props('title')).toBe('Open conversations')
+					expect(captionsEls.at(0).props('name')).toBe('Conversations')
+					expect(captionsEls.at(1).props('name')).toBe('Open conversations')
 				} else {
 					expect(captionsEls.length).toBeGreaterThan(1)
-					expect(captionsEls.at(0).props('title')).toBe('Conversations')
+					expect(captionsEls.at(0).props('name')).toBe('Conversations')
 				}
 				// last dynamic caption for "No search results"
-				expect(captionsEls.at(-1).props('title')).toBe(expectedCaption)
+				expect(captionsEls.at(-1).props('name')).toBe(expectedCaption)
 
 				return wrapper
 			}
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index f99728546356..f7c54e11bb2d 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -48,7 +48,7 @@
 						<template #icon>
 							<AtIcon :size="20" />
 						</template>
-						{{ t('spreed','Filter unread mentions') }}
+						{{ t('spreed', 'Filter unread mentions') }}
 					</NcActionButton>
 
 					<NcActionButton close-after-click
@@ -58,7 +58,7 @@
 						<template #icon>
 							<MessageBadge :size="20" />
 						</template>
-						{{ t('spreed','Filter unread messages') }}
+						{{ t('spreed', 'Filter unread messages') }}
 					</NcActionButton>
 
 					<NcActionButton v-if="isFiltered"
@@ -87,7 +87,7 @@
 						<template #icon>
 							<Plus :size="20" />
 						</template>
-						{{ t('spreed','Create a new conversation') }}
+						{{ t('spreed', 'Create a new conversation') }}
 					</NcActionButton>
 
 					<NcActionButton v-if="!hasNoteToSelf"
@@ -96,7 +96,7 @@
 						<template #icon>
 							<Note :size="20" />
 						</template>
-						{{ t('spreed','New personal note') }}
+						{{ t('spreed', 'New personal note') }}
 					</NcActionButton>
 
 					<NcActionButton close-after-click
@@ -104,7 +104,7 @@
 						<template #icon>
 							<List :size="20" />
 						</template>
-						{{ t('spreed','Join open conversations') }}
+						{{ t('spreed', 'Join open conversations') }}
 					</NcActionButton>
 				</NcActions>
 			</TransitionWrapper>
@@ -118,17 +118,18 @@
 
 		<template #list>
 			<li ref="container" class="left-sidebar__list">
-				<ul class="scroller h-100">
+				<ul class="h-100" :class="{'scroller': isSearching}">
 					<!-- Conversations List -->
 					<template v-if="!isSearching">
 						<li class="h-100">
 							<ConversationsListVirtual ref="scroller"
 								:conversations="filteredConversationsList"
 								:loading="!initialisedConversations"
-								class="h-100"
+								class="scroller h-100"
 								@scroll.native="debounceHandleScroll" />
 						</li>
-						<Hint v-if="initialisedConversations && filteredConversationsList.length === 0" :hint="t('spreed', 'No matches found')" />
+						<Hint v-if="initialisedConversations && filteredConversationsList.length === 0"
+							:hint="t('spreed', 'No matches found')" />
 
 						<NcButton v-if="!preventFindingUnread && lastUnreadMentionBelowViewportIndex !== null"
 							class="unread-mention-button"
@@ -142,12 +143,13 @@
 					<template v-else-if="isSearching">
 						<!-- Create a new conversation -->
 						<NcListItem v-if="searchResultsConversationList.length === 0 && canStartConversations"
-							:title="t('spreed', 'Create a new conversation')"
+							:name="t('spreed', 'Create a new conversation')"
+							data-nav-id="conversation_create_new"
 							@click="createConversation(searchText)">
 							<template #icon>
 								<ChatPlus :size="30" />
 							</template>
-							<template #subtitle>
+							<template #subname>
 								{{ searchText }}
 							</template>
 						</NcListItem>
@@ -177,7 +179,7 @@
 							<NcListItem v-for="item of searchResultsUsers"
 								:key="`user_${item.id}`"
 								:data-nav-id="`user_${item.id}`"
-								:title="item.label"
+								:name="item.label"
 								@click="createAndJoinConversation(item)">
 								<template #icon>
 									<ConversationIcon :item="iconData(item)" />
@@ -193,7 +195,7 @@
 								<NcListItem v-for="item of searchResultsGroups"
 									:key="`group_${item.id}`"
 									:data-nav-id="`group_${item.id}`"
-									:title="item.label"
+									:name="item.label"
 									@click="createAndJoinConversation(item)">
 									<template #icon>
 										<ConversationIcon :item="iconData(item)" />
@@ -207,7 +209,7 @@
 								<NcListItem v-for="item of searchResultsCircles"
 									:key="`circle_${item.id}`"
 									:data-nav-id="`circle_${item.id}`"
-									:title="item.label"
+									:name="item.label"
 									@click="createAndJoinConversation(item)">
 									<template #icon>
 										<ConversationIcon :item="iconData(item)" />
@@ -846,7 +848,7 @@ export default {
 
 <style lang="scss" scoped>
 .scroller {
-	padding: 0 4px 0 6px;
+	padding: 0 4px;
 }
 
 .h-100 {
@@ -865,7 +867,7 @@ export default {
 
 	.filters {
 		position: absolute;
-		top : 8px;
+		top: 8px;
 		right: 56px;
 	}
 
@@ -895,25 +897,30 @@ export default {
 }
 
 .conversations-search {
-	padding: 4px 0;
+	padding: 3px 0;
 	transition: all 0.15s ease;
 	z-index: 1;
 	// New conversation button width : 52 px
 	// Filters button width : 44 px
 	// Spacing : 3px + 1px
 	// Total : 100 px
-	width : calc(100% - 100px);
-	display : flex;
+	width: calc(100% - 100px);
+	display: flex;
+
 	&--expanded {
-		width : calc(100% - 8px);
+		width: calc(100% - 8px);
 	}
 
+	:deep(.input-field) {
+		margin-block-start: 0;
+	}
 }
 
 .filter-actions__button--active {
 	background-color: var(--color-primary-element-light);
 	border-radius: 6px;
-	:deep(.action-button__longtext){
+
+	:deep(.action-button__longtext) {
 		font-weight: bold;
 	}
 
@@ -923,23 +930,17 @@ export default {
 	justify-content: flex-start !important;
 }
 
-:deep(.app-navigation ul) {
-	padding: 0 !important;
-}
-
-:deep(.app-navigation-toggle) {
-	top: 8px !important;
-	right: -6px !important;
-}
-
 :deep(.app-navigation__list) {
 	padding: 0 !important;
 }
 
-:deep(.list-item:focus, .list-item:focus-visible) {
-	z-index: 1;
-	border: 2px solid var(--color-primary-element);
-	padding : 6px;
-	outline: none; // Remove the default outline
+// FIXME upstream https://github.com/nextcloud-libraries/nextcloud-vue/issues/4625
+:deep(.list-item__wrapper--active) {
+	.list-item:hover,
+	.list-item:focus,
+	.list-item:focus-visible,
+	.list-item:active {
+		background-color: var(--color-primary-element-hover);
+	}
 }
 </style>
diff --git a/src/test-helpers.js b/src/test-helpers.js
index ac2981072b5c..71e8b17c3d3f 100644
--- a/src/test-helpers.js
+++ b/src/test-helpers.js
@@ -70,8 +70,8 @@ function findNcButton(wrapper, text) {
 function findNcListItems(wrapper, text) {
 	const listItems = wrapper.findAllComponents(NcListItem)
 	return (Array.isArray(text))
-		? listItems.filter(listItem => text.includes(listItem.vm.title))
-		: listItems.filter(listItem => listItem.vm.title === text)
+		? listItems.filter(listItem => text.includes(listItem.vm.name))
+		: listItems.filter(listItem => listItem.vm.name === text)
 }
 
 /**