From b5a2fa8b5fead87b428cb500fb4e4f0856e7e642 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 23 Apr 2026 19:27:00 +0200
Subject: [PATCH 1/4] wip(navigation): regroup layout with top and buttom
 groups

Extract from further changes for simpler review

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/LeftSidebar/LeftSidebar.vue | 577 +++++++++++----------
 1 file changed, 297 insertions(+), 280 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 4883273bd00..ad435a8bdba 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -6,272 +6,277 @@
 <template>
 	<NcAppNavigation ref="leftSidebar" :aria-label="t('spreed', 'Conversation list')">
 		<template #search>
-			<div class="new-conversation">
-				<div
-					class="conversations-search"
-					:class="{ 'conversations-search--expanded': isSearching }">
-					<SearchBox
-						ref="searchBox"
-						v-model:value="searchText"
-						v-model:isFocused="isFocused"
-						:listRef="[scroller, searchResults]"
-						@input="debounceFetchSearchResults"
-						@abortSearch="abortSearch" />
-				</div>
-
-				<TransitionWrapper name="radial-reveal">
-					<!-- Filters -->
-					<NcActions
-						v-show="searchText === ''"
-						:variant="isFiltered ? 'secondary' : 'tertiary'"
-						class="filters"
-						:class="{ 'hidden-visually': isSearching }">
-						<template #icon>
-							<IconFilterCogOutline :size="20" />
-						</template>
-						<NcActionCaption :name="t('spreed', 'Filter conversations by')" />
-
-						<NcActionButton
-							closeAfterClick
-							type="checkbox"
-							:modelValue="filters.includes('mentions')"
-							@click="handleFilter('mentions')">
-							<template #icon>
-								<IconAt :size="20" />
-							</template>
-							{{ t('spreed', 'Unread mentions') }}
-						</NcActionButton>
-
-						<NcActionButton
-							closeAfterClick
-							type="checkbox"
-							:modelValue="filters.includes('unread')"
-							@click="handleFilter('unread')">
-							<template #icon>
-								<IconMessageBadgeOutline :size="20" />
-							</template>
-							{{ t('spreed', 'Unread messages') }}
-						</NcActionButton>
-
-						<NcActionButton
-							closeAfterClick
-							type="checkbox"
-							:modelValue="filters.includes('events')"
-							@click="handleFilter('events')">
-							<template #icon>
-								<IconCalendarBlankOutline :size="20" />
-							</template>
-							{{ t('spreed', 'Meeting conversations') }}
-						</NcActionButton>
-
-						<NcActionButton
-							v-if="isFiltered"
-							closeAfterClick
-							class="filter-actions__clearbutton"
-							@click="handleFilter(null)">
-							<template #icon>
-								<IconFilterRemoveOutline :size="20" />
-							</template>
-							{{ t('spreed', 'Clear filters') }}
-						</NcActionButton>
-
-						<template v-if="supportSortOrder">
-							<NcActionSeparator />
-
-							<NcActionCaption :name="SORT_LABELS.SORTBY_HEADER" />
-
-							<NcActionButton
-								closeAfterClick
-								type="radio"
-								:value="CONVERSATION.SORT_ORDER.ACTIVITY"
-								:modelValue="sortOrder"
-								@update:modelValue="handleSortOrder">
-								<template #icon>
-									<IconClockOutline :size="20" />
-								</template>
-								{{ SORT_LABELS.SORTBY_ACTIVITY }}
-							</NcActionButton>
-
-							<NcActionButton
-								closeAfterClick
-								type="radio"
-								:value="CONVERSATION.SORT_ORDER.ALPHABETICAL"
-								:modelValue="sortOrder"
-								@update:modelValue="handleSortOrder">
-								<template #icon>
-									<IconSortAlphabeticalAscending :size="20" />
-								</template>
-								{{ SORT_LABELS.SORTBY_ALPHABET }}
-							</NcActionButton>
-
-							<NcActionSeparator />
-
-							<NcActionButton
-								closeAfterClick
-								type="radio"
-								:value="CONVERSATION.GROUP_MODE.NONE"
-								:modelValue="groupMode"
-								@update:modelValue="handleGroupMode">
+			<div class="navigation-top">
+				<div class="navigation-buttons-container">
+					<div class="new-conversation">
+						<div
+							class="conversations-search"
+							:class="{ 'conversations-search--expanded': isSearching }">
+							<SearchBox
+								ref="searchBox"
+								v-model:value="searchText"
+								v-model:isFocused="isFocused"
+								:listRef="[scroller, searchResults]"
+								@input="debounceFetchSearchResults"
+								@abortSearch="abortSearch" />
+						</div>
+
+						<TransitionWrapper name="radial-reveal">
+							<!-- Filters -->
+							<NcActions
+								v-show="searchText === ''"
+								:variant="isFiltered ? 'secondary' : 'tertiary'"
+								class="filters"
+								:class="{ 'hidden-visually': isSearching }">
 								<template #icon>
-									<IconFormatListBulleted :size="20" />
+									<IconFilterCogOutline :size="20" />
 								</template>
-								{{ SORT_LABELS.GROUPBY_NONE }}
-							</NcActionButton>
-
-							<NcActionButton
-								closeAfterClick
-								type="radio"
-								:value="CONVERSATION.GROUP_MODE.PRIVATE_FIRST"
-								:modelValue="groupMode"
-								@update:modelValue="handleGroupMode">
-								<template #icon>
-									<IconAccountOutline :size="20" />
+								<NcActionCaption :name="t('spreed', 'Filter conversations by')" />
+
+								<NcActionButton
+									closeAfterClick
+									type="checkbox"
+									:modelValue="filters.includes('mentions')"
+									@click="handleFilter('mentions')">
+									<template #icon>
+										<IconAt :size="20" />
+									</template>
+									{{ t('spreed', 'Unread mentions') }}
+								</NcActionButton>
+
+								<NcActionButton
+									closeAfterClick
+									type="checkbox"
+									:modelValue="filters.includes('unread')"
+									@click="handleFilter('unread')">
+									<template #icon>
+										<IconMessageBadgeOutline :size="20" />
+									</template>
+									{{ t('spreed', 'Unread messages') }}
+								</NcActionButton>
+
+								<NcActionButton
+									closeAfterClick
+									type="checkbox"
+									:modelValue="filters.includes('events')"
+									@click="handleFilter('events')">
+									<template #icon>
+										<IconCalendarBlankOutline :size="20" />
+									</template>
+									{{ t('spreed', 'Meeting conversations') }}
+								</NcActionButton>
+
+								<NcActionButton
+									v-if="isFiltered"
+									closeAfterClick
+									class="filter-actions__clearbutton"
+									@click="handleFilter(null)">
+									<template #icon>
+										<IconFilterRemoveOutline :size="20" />
+									</template>
+									{{ t('spreed', 'Clear filters') }}
+								</NcActionButton>
+
+								<template v-if="supportSortOrder">
+									<NcActionSeparator />
+
+									<NcActionCaption :name="SORT_LABELS.SORTBY_HEADER" />
+
+									<NcActionButton
+										closeAfterClick
+										type="radio"
+										:value="CONVERSATION.SORT_ORDER.ACTIVITY"
+										:modelValue="sortOrder"
+										@update:modelValue="handleSortOrder">
+										<template #icon>
+											<IconClockOutline :size="20" />
+										</template>
+										{{ SORT_LABELS.SORTBY_ACTIVITY }}
+									</NcActionButton>
+
+									<NcActionButton
+										closeAfterClick
+										type="radio"
+										:value="CONVERSATION.SORT_ORDER.ALPHABETICAL"
+										:modelValue="sortOrder"
+										@update:modelValue="handleSortOrder">
+										<template #icon>
+											<IconSortAlphabeticalAscending :size="20" />
+										</template>
+										{{ SORT_LABELS.SORTBY_ALPHABET }}
+									</NcActionButton>
+
+									<NcActionSeparator />
+
+									<NcActionButton
+										closeAfterClick
+										type="radio"
+										:value="CONVERSATION.GROUP_MODE.NONE"
+										:modelValue="groupMode"
+										@update:modelValue="handleGroupMode">
+										<template #icon>
+											<IconFormatListBulleted :size="20" />
+										</template>
+										{{ SORT_LABELS.GROUPBY_NONE }}
+									</NcActionButton>
+
+									<NcActionButton
+										closeAfterClick
+										type="radio"
+										:value="CONVERSATION.GROUP_MODE.PRIVATE_FIRST"
+										:modelValue="groupMode"
+										@update:modelValue="handleGroupMode">
+										<template #icon>
+											<IconAccountOutline :size="20" />
+										</template>
+										{{ SORT_LABELS.GROUPBY_PRIVATE_FIRST }}
+									</NcActionButton>
+
+									<NcActionButton
+										closeAfterClick
+										type="radio"
+										:value="CONVERSATION.GROUP_MODE.GROUP_FIRST"
+										:modelValue="groupMode"
+										@update:modelValue="handleGroupMode">
+										<template #icon>
+											<IconAccountMultipleOutline :size="20" />
+										</template>
+										{{ SORT_LABELS.GROUPBY_GROUP_FIRST }}
+									</NcActionButton>
 								</template>
-								{{ SORT_LABELS.GROUPBY_PRIVATE_FIRST }}
-							</NcActionButton>
-
-							<NcActionButton
-								closeAfterClick
-								type="radio"
-								:value="CONVERSATION.GROUP_MODE.GROUP_FIRST"
-								:modelValue="groupMode"
-								@update:modelValue="handleGroupMode">
+							</NcActions>
+						</TransitionWrapper>
+
+						<!-- Actions -->
+						<TransitionWrapper name="radial-reveal">
+							<NcActions
+								v-show="searchText === ''"
+								class="actions"
+								:class="{ 'hidden-visually': isSearching }">
 								<template #icon>
-									<IconAccountMultipleOutline :size="20" />
+									<IconChatPlusOutline :size="20" />
 								</template>
-								{{ SORT_LABELS.GROUPBY_GROUP_FIRST }}
-							</NcActionButton>
-						</template>
-					</NcActions>
-				</TransitionWrapper>
-
-				<!-- Actions -->
-				<TransitionWrapper name="radial-reveal">
-					<NcActions
-						v-show="searchText === ''"
-						class="actions"
-						:class="{ 'hidden-visually': isSearching }">
+								<NcActionButton
+									v-if="canStartConversations"
+									closeAfterClick
+									@click="showModalNewConversation">
+									<template #icon>
+										<IconPlus :size="20" />
+									</template>
+									{{ t('spreed', 'Create a new conversation') }}
+								</NcActionButton>
+
+								<NcActionButton
+									v-if="canNoteToSelf && !hasNoteToSelf"
+									closeAfterClick
+									@click="restoreNoteToSelfConversation">
+									<template #icon>
+										<IconNoteEditOutline :size="20" />
+									</template>
+									{{ t('spreed', 'New personal note') }}
+								</NcActionButton>
+
+								<NcActionButton
+									closeAfterClick
+									@click="showModalListConversations">
+									<template #icon>
+										<IconFormatListBulleted :size="20" />
+									</template>
+									{{ t('spreed', 'Join open conversations') }}
+								</NcActionButton>
+
+								<NcActionButton
+									v-if="canModerateSipDialOut"
+									closeAfterClick
+									@click="showModalCallPhoneDialog">
+									<template #icon>
+										<IconPhoneOutline :size="20" />
+									</template>
+									{{ t('spreed', 'Call a phone number') }}
+								</NcActionButton>
+								<NcActionButton
+									v-else-if="hintSipDialOut"
+									disabled
+									:description="t('spreed', 'SIP backend is not installed')">
+									<template #icon>
+										<IconPhoneOutline :size="20" />
+									</template>
+									{{ t('spreed', 'Call a phone number') }}
+								</NcActionButton>
+							</NcActions>
+						</TransitionWrapper>
+
+						<!-- All open conversations list -->
+						<OpenConversationsList ref="openConversationsList" />
+
+						<!-- New Conversation dialog -->
+						<NewConversationDialog ref="newConversationDialog" :canModerateSipDialOut="canModerateSipDialOut" />
+
+						<!-- New phone (SIP dial-out) dialog -->
+						<CallPhoneDialog v-if="canModerateSipDialOut" ref="callPhoneDialog" />
+
+						<!-- New Pending Invitations dialog -->
+						<InvitationHandler v-if="pendingInvitationsCount" ref="invitationHandler" />
+					</div>
+					<TransitionWrapper
+						class="conversations__filters"
+						name="zoom"
+						tag="div"
+						group>
+						<NcChip
+							v-for="filter in filters"
+							:key="filter"
+							:text="FILTER_LABELS[filter]"
+							@close="handleFilter(filter)" />
+					</TransitionWrapper>
+				</div>
+
+				<div v-if="!isSearching" class="navigation-buttons-container">
+					<NcAppNavigationItem
+						class="navigation-item"
+						:to="{ name: 'root' }"
+						:name="HOME_BUTTON_LABEL"
+						@click="refreshTalkDashboard">
 						<template #icon>
-							<IconChatPlusOutline :size="20" />
+							<IconHomeOutline :size="20" />
 						</template>
-						<NcActionButton
-							v-if="canStartConversations"
-							closeAfterClick
-							@click="showModalNewConversation">
-							<template #icon>
-								<IconPlus :size="20" />
-							</template>
-							{{ t('spreed', 'Create a new conversation') }}
-						</NcActionButton>
-
-						<NcActionButton
-							v-if="canNoteToSelf && !hasNoteToSelf"
-							closeAfterClick
-							@click="restoreNoteToSelfConversation">
-							<template #icon>
-								<IconNoteEditOutline :size="20" />
-							</template>
-							{{ t('spreed', 'New personal note') }}
-						</NcActionButton>
-
-						<NcActionButton
-							closeAfterClick
-							@click="showModalListConversations">
-							<template #icon>
-								<IconFormatListBulleted :size="20" />
-							</template>
-							{{ t('spreed', 'Join open conversations') }}
-						</NcActionButton>
-
-						<NcActionButton
-							v-if="canModerateSipDialOut"
-							closeAfterClick
-							@click="showModalCallPhoneDialog">
-							<template #icon>
-								<IconPhoneOutline :size="20" />
-							</template>
-							{{ t('spreed', 'Call a phone number') }}
-						</NcActionButton>
-						<NcActionButton
-							v-else-if="hintSipDialOut"
-							disabled
-							:description="t('spreed', 'SIP backend is not installed')">
+					</NcAppNavigationItem>
+					<template v-if="showArchived || showThreadsList">
+						<NcAppNavigationItem
+							class="navigation-item"
+							:name="t('spreed', 'Back to conversations')"
+							@click.prevent="handleBackToConversations">
 							<template #icon>
-								<IconPhoneOutline :size="20" />
+								<IconArrowLeft class="bidirectional-icon" :size="20" />
 							</template>
-							{{ t('spreed', 'Call a phone number') }}
-						</NcActionButton>
-					</NcActions>
-				</TransitionWrapper>
-
-				<!-- All open conversations list -->
-				<OpenConversationsList ref="openConversationsList" />
-
-				<!-- New Conversation dialog -->
-				<NewConversationDialog ref="newConversationDialog" :canModerateSipDialOut="canModerateSipDialOut" />
-
-				<!-- New phone (SIP dial-out) dialog -->
-				<CallPhoneDialog v-if="canModerateSipDialOut" ref="callPhoneDialog" />
-
-				<!-- New Pending Invitations dialog -->
-				<InvitationHandler v-if="pendingInvitationsCount" ref="invitationHandler" />
-			</div>
-			<TransitionWrapper
-				class="conversations__filters"
-				name="zoom"
-				tag="div"
-				group>
-				<NcChip
-					v-for="filter in filters"
-					:key="filter"
-					:text="FILTER_LABELS[filter]"
-					@close="handleFilter(filter)" />
-			</TransitionWrapper>
-			<template v-if="!isSearching">
-				<NcAppNavigationItem
-					class="navigation-item"
-					:to="{ name: 'root' }"
-					:name="HOME_BUTTON_LABEL"
-					@click="refreshTalkDashboard">
-					<template #icon>
-						<IconHomeOutline :size="20" />
+						</NcAppNavigationItem>
+						<NcAppNavigationCaption
+							class="navigation-caption"
+							:name="showArchived ? t('spreed', 'Archived conversations') : t('spreed', 'Threads')" />
 					</template>
-				</NcAppNavigationItem>
-				<template v-if="showArchived || showThreadsList">
 					<NcAppNavigationItem
+						v-else-if="supportThreads && !showThreadsList && !isSearching && !isFiltered"
 						class="navigation-item"
-						:name="t('spreed', 'Back to conversations')"
-						@click.prevent="handleBackToConversations">
+						:name="t('spreed', 'Threads')"
+						@click.prevent="handleShowThreadsList">
 						<template #icon>
-							<IconArrowLeft class="bidirectional-icon" :size="20" />
+							<IconForumOutline :size="20" />
 						</template>
 					</NcAppNavigationItem>
-					<NcAppNavigationCaption
-						class="navigation-caption"
-						:name="showArchived ? t('spreed', 'Archived conversations') : t('spreed', 'Threads')" />
-				</template>
-				<NcAppNavigationItem
-					v-else-if="supportThreads && !showThreadsList && !isSearching && !isFiltered"
-					class="navigation-item"
-					:name="t('spreed', 'Threads')"
-					@click.prevent="handleShowThreadsList">
-					<template #icon>
-						<IconForumOutline :size="20" />
-					</template>
-				</NcAppNavigationItem>
-				<NcAppNavigationItem
-					v-if="pendingInvitationsCount && !isSearching && !showArchived && !showThreadsList"
-					class="navigation-item"
-					:name="t('spreed', 'Pending invitations')"
-					@click.prevent="showInvitationHandler">
-					<template #icon>
-						<IconAccountMultiplePlusOutline :size="20" />
-					</template>
-					<template #counter>
-						<NcCounterBubble type="highlighted" :count="pendingInvitationsCount" />
-					</template>
-				</NcAppNavigationItem>
-			</template>
+					<NcAppNavigationItem
+						v-if="pendingInvitationsCount && !isSearching && !showArchived && !showThreadsList"
+						class="navigation-item"
+						:name="t('spreed', 'Pending invitations')"
+						@click.prevent="showInvitationHandler">
+						<template #icon>
+							<IconAccountMultiplePlusOutline :size="20" />
+						</template>
+						<template #counter>
+							<NcCounterBubble type="highlighted" :count="pendingInvitationsCount" />
+						</template>
+					</NcAppNavigationItem>
+				</div>
+			</div>
 		</template>
 
 		<template #list>
@@ -349,27 +354,29 @@
 		</template>
 
 		<template #footer>
-			<div class="left-sidebar__settings-button-container">
-				<NcButton
-					v-if="supportsArchive && !isSearching && !showArchived && !showThreadsList && archivedConversationsList.length"
-					variant="tertiary"
-					wide
-					@click="showArchived = true; showThreadsList = false">
-					<template #icon>
-						<IconArchiveOutline :size="20" />
-					</template>
-					{{ t('spreed', 'Archived conversations') }}
-					<span v-if="showArchivedConversationsBubble" class="left-sidebar__settings-button-bubble">
-						⬤
-					</span>
-				</NcButton>
+			<div class="navigation-bottom">
+				<div class="navigation-buttons-container">
+					<NcButton
+						v-if="supportsArchive && !isSearching && !showArchived && !showThreadsList && archivedConversationsList.length"
+						variant="tertiary"
+						wide
+						@click="showArchived = true; showThreadsList = false">
+						<template #icon>
+							<IconArchiveOutline :size="20" />
+						</template>
+						{{ t('spreed', 'Archived conversations') }}
+						<span v-if="showArchivedConversationsBubble" class="left-sidebar__settings-button-bubble">
+							⬤
+						</span>
+					</NcButton>
 
-				<NcButton variant="tertiary" wide @click="showSettings">
-					<template #icon>
-						<IconCogOutline :size="20" />
-					</template>
-					{{ t('spreed', 'App settings') }}
-				</NcButton>
+					<NcButton variant="tertiary" wide @click="showSettings">
+						<template #icon>
+							<IconCogOutline :size="20" />
+						</template>
+						{{ t('spreed', 'App settings') }}
+					</NcButton>
+				</div>
 			</div>
 		</template>
 	</NcAppNavigation>
@@ -1250,10 +1257,28 @@ export default {
 	line-height: 20px;
 }
 
+.navigation-top {
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+	padding-block: calc(2 * var(--default-grid-baseline)) var(--default-grid-baseline);
+}
+
+.navigation-bottom {
+	padding-block: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
+}
+
+.navigation-buttons-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	// Inline with NcAppNavigation list
+	padding-inline: calc(2 * var(--default-grid-baseline));
+}
+
 .new-conversation {
 	position: relative;
 	display: flex;
-	margin: calc(var(--default-grid-baseline) * 2);
 	align-items: center;
 
 	.filters {
@@ -1334,14 +1359,6 @@ export default {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--default-grid-baseline);
-	margin: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);
-}
-
-.left-sidebar__settings-button-container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--default-grid-baseline);
-	padding: calc(2 * var(--default-grid-baseline));
 }
 
 .left-sidebar__settings-button-bubble {

From 34687130e247bbce8036c4fa64e78e73d1e36207 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 23 Apr 2026 19:30:44 +0200
Subject: [PATCH 2/4] wip(navigation): only render chips container when used

Prevent extra gap when there are no chips

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/LeftSidebar/LeftSidebar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index ad435a8bdba..526925d6223 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -219,6 +219,7 @@
 						<InvitationHandler v-if="pendingInvitationsCount" ref="invitationHandler" />
 					</div>
 					<TransitionWrapper
+						v-if="filters.length"
 						class="conversations__filters"
 						name="zoom"
 						tag="div"

From aa23acb84d153f67b1abcb304079b2d2731f2aae Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 23 Apr 2026 19:38:35 +0200
Subject: [PATCH 3/4] fix(navigation): align buttons and navigation

Also use real buttons as button instead of invalid list items and links

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/LeftSidebar/LeftSidebar.vue    | 97 +++++++------------
 .../LeftSidebar/LeftSidebarButton.vue         | 81 ++++++++++++++++
 2 files changed, 118 insertions(+), 60 deletions(-)
 create mode 100644 src/components/LeftSidebar/LeftSidebarButton.vue

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 526925d6223..d446f939302 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -233,49 +233,45 @@
 				</div>
 
 				<div v-if="!isSearching" class="navigation-buttons-container">
-					<NcAppNavigationItem
-						class="navigation-item"
+					<LeftSidebarButton
 						:to="{ name: 'root' }"
-						:name="HOME_BUTTON_LABEL"
+						:active="$route.name === 'root'"
 						@click="refreshTalkDashboard">
 						<template #icon>
 							<IconHomeOutline :size="20" />
 						</template>
-					</NcAppNavigationItem>
+						{{ HOME_BUTTON_LABEL }}
+					</LeftSidebarButton>
 					<template v-if="showArchived || showThreadsList">
-						<NcAppNavigationItem
-							class="navigation-item"
-							:name="t('spreed', 'Back to conversations')"
-							@click.prevent="handleBackToConversations">
+						<LeftSidebarButton @click="handleBackToConversations">
 							<template #icon>
 								<IconArrowLeft class="bidirectional-icon" :size="20" />
 							</template>
-						</NcAppNavigationItem>
+							{{ t('spreed', 'Back to conversations') }}
+						</LeftSidebarButton>
 						<NcAppNavigationCaption
 							class="navigation-caption"
 							:name="showArchived ? t('spreed', 'Archived conversations') : t('spreed', 'Threads')" />
 					</template>
-					<NcAppNavigationItem
+					<LeftSidebarButton
 						v-else-if="supportThreads && !showThreadsList && !isSearching && !isFiltered"
-						class="navigation-item"
-						:name="t('spreed', 'Threads')"
-						@click.prevent="handleShowThreadsList">
+						@click="handleShowThreadsList">
 						<template #icon>
 							<IconForumOutline :size="20" />
 						</template>
-					</NcAppNavigationItem>
-					<NcAppNavigationItem
+						{{ t('spreed', 'Threads') }}
+					</LeftSidebarButton>
+					<LeftSidebarButton
 						v-if="pendingInvitationsCount && !isSearching && !showArchived && !showThreadsList"
-						class="navigation-item"
-						:name="t('spreed', 'Pending invitations')"
-						@click.prevent="showInvitationHandler">
+						@click="showInvitationHandler">
 						<template #icon>
 							<IconAccountMultiplePlusOutline :size="20" />
 						</template>
-						<template #counter>
+						{{ t('spreed', 'Pending invitations') }}
+						<template #badge>
 							<NcCounterBubble type="highlighted" :count="pendingInvitationsCount" />
 						</template>
-					</NcAppNavigationItem>
+					</LeftSidebarButton>
 				</div>
 			</div>
 		</template>
@@ -310,16 +306,17 @@
 							v-for="thread of followedThreads"
 							:key="`thread_${thread.thread.id}`"
 							:thread="thread" />
-						<NcAppNavigationItem
-							v-if="!allFollowedThreadsReceived"
-							class="navigation-item"
-							:name="t('spreed', 'Show more threads')"
-							@click.prevent="loadMoreFollowedThreads">
+					</ul>
+					<div v-if="!allFollowedThreadsReceived" class="navigation-buttons-container">
+						<LeftSidebarButton
+							:compact="false /* ThreadItem-s are never compact */"
+							@click="loadMoreFollowedThreads">
 							<template #icon>
 								<IconForumOutline :size="20" />
 							</template>
-						</NcAppNavigationItem>
-					</ul>
+							{{ t('spreed', 'Show more threads') }}
+						</LeftSidebarButton>
+					</div>
 				</template>
 				<ConversationsListVirtual
 					v-else
@@ -357,26 +354,27 @@
 		<template #footer>
 			<div class="navigation-bottom">
 				<div class="navigation-buttons-container">
-					<NcButton
+					<LeftSidebarButton
 						v-if="supportsArchive && !isSearching && !showArchived && !showThreadsList && archivedConversationsList.length"
-						variant="tertiary"
-						wide
 						@click="showArchived = true; showThreadsList = false">
 						<template #icon>
 							<IconArchiveOutline :size="20" />
 						</template>
 						{{ t('spreed', 'Archived conversations') }}
-						<span v-if="showArchivedConversationsBubble" class="left-sidebar__settings-button-bubble">
-							⬤
-						</span>
-					</NcButton>
+						<template #badge>
+							<span v-if="showArchivedConversationsBubble" class="archived-conversations-bubble">
+								⬤
+							</span>
+						</template>
+					</LeftSidebarButton>
 
-					<NcButton variant="tertiary" wide @click="showSettings">
+					<LeftSidebarButton
+						@click="showSettings">
 						<template #icon>
 							<IconCogOutline :size="20" />
 						</template>
 						{{ t('spreed', 'App settings') }}
-					</NcButton>
+					</LeftSidebarButton>
 				</div>
 			</div>
 		</template>
@@ -432,6 +430,7 @@ import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 import CallPhoneDialog from './CallPhoneDialog/CallPhoneDialog.vue'
 import ConversationsListVirtual from './ConversationsList/ConversationsListVirtual.vue'
 import InvitationHandler from './InvitationHandler.vue'
+import LeftSidebarButton from './LeftSidebarButton.vue'
 import OpenConversationsList from './OpenConversationsList/OpenConversationsList.vue'
 import SearchConversationsResults from './SearchConversationsResults/SearchConversationsResults.vue'
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
@@ -508,7 +507,6 @@ export default {
 		InvitationHandler,
 		NcAppNavigation,
 		NcAppNavigationCaption,
-		NcAppNavigationItem,
 		NcButton,
 		NcCounterBubble,
 		NcChip,
@@ -523,6 +521,7 @@ export default {
 		TransitionWrapper,
 		ConversationsListVirtual,
 		SearchConversationsResults,
+		LeftSidebarButton,
 		// Icons
 		IconAccountMultiplePlusOutline,
 		IconAt,
@@ -1304,30 +1303,8 @@ export default {
 	}
 }
 
-.navigation-item {
-	padding-inline: calc(var(--default-grid-baseline) * 2);
-	margin-block: var(--default-grid-baseline);
-
-	:deep(.app-navigation-entry-link) {
-		padding-inline-start: var(--default-grid-baseline);
-	}
-
-	:deep(.app-navigation-entry-icon) {
-		flex: 0 0 40px !important; // AVATAR.SIZE.DEFAULT
-	}
-
-	:deep(.app-navigation-entry__name) {
-		padding-inline-start: calc(2 * var(--default-grid-baseline));
-		font-weight: 500;
-	}
-}
-
 .threads-tab__list {
 	padding-inline: var(--default-grid-baseline);
-
-	& > .navigation-item {
-		padding-inline: var(--default-grid-baseline);
-	}
 }
 
 .unread-mention-button {
@@ -1362,7 +1339,7 @@ export default {
 	gap: var(--default-grid-baseline);
 }
 
-.left-sidebar__settings-button-bubble {
+.archived-conversations-bubble {
 	margin-inline: var(--default-grid-baseline);
 	color: var(--color-primary-element);
 }
diff --git a/src/components/LeftSidebar/LeftSidebarButton.vue b/src/components/LeftSidebar/LeftSidebarButton.vue
new file mode 100644
index 00000000000..c9d158ed460
--- /dev/null
+++ b/src/components/LeftSidebar/LeftSidebarButton.vue
@@ -0,0 +1,81 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { Slot } from 'vue'
+
+import { computed } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import { AVATAR, CONVERSATION } from '../../constants.ts'
+import { useSettingsStore } from '../../stores/settings.ts'
+
+const { compact = undefined } = defineProps<{
+	compact?: boolean | undefined
+	active?: boolean
+}>()
+
+defineSlots<{
+	default?: Slot
+	icon?: Slot
+	badge?: Slot
+}>()
+
+const settingsStore = useSettingsStore()
+const isCompact = computed(() => compact ?? (settingsStore.conversationsListStyle === CONVERSATION.LIST_STYLE.COMPACT))
+
+const iconSize = computed(() => (isCompact.value ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT) + 'px')
+</script>
+
+<template>
+	<NcButton
+		class="left-sidebar-button"
+		:variant="active ? 'primary' : 'tertiary'"
+		alignment="start"
+		wide>
+		<template #icon>
+			<slot name="icon" />
+		</template>
+		<span class="left-sidebar-button__content">
+			<span class="left-sidebar-button__text">
+				<slot />
+			</span>
+			<slot name="badge" />
+		</span>
+	</NcButton>
+</template>
+
+<style lang="scss" scoped>
+.left-sidebar-button {
+	// Align the padding with navigation items and list items
+	// TODO: make it s public variable or add a way to customize content without having the pre-defined padding
+	--button-padding: calc(var(--default-grid-baseline) - 1px /* transparent border */);
+
+	// TODO: fix upstream - allow custom icon size
+	:deep(.button-vue__icon) {
+		width: v-bind(iconSize);
+		min-width: v-bind(iconSize);
+	}
+
+	// TODO: fix upstream - the text container is not stretched
+	:deep(.button-vue__text) {
+		flex: 1 0 auto;
+	}
+}
+
+.left-sidebar-button__content {
+	display: inline-flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: calc(2 * var(--default-grid-baseline));
+	padding-inline-start: calc(2 * var(--default-grid-baseline));
+	width: 100%;
+	// Reset NcButton's font-weight
+	font-weight: unset;
+}
+
+.left-sidebar-button__text {
+	font-weight: 500;
+}
+</style>

From 60e7f4c6a90685e3038220dd34fa3d2d14efc981 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 23 Apr 2026 19:50:16 +0200
Subject: [PATCH 4/4] fix(navigation): sub captions alignment and a11y

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../ConversationsListVirtual.vue              |  2 ++
 src/components/LeftSidebar/LeftSidebar.vue    | 36 ++++++++++++-------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
index f3b6df4e572..a46e43d8541 100644
--- a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
+++ b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
@@ -13,6 +13,7 @@ import ConversationItem from './ConversationItem.vue'
 import { AVATAR } from '../../../constants.ts'
 
 const props = defineProps<{
+	listAriaLabelledBy?: string
 	conversations: Conversation[]
 	loading?: boolean
 	compact?: boolean
@@ -120,6 +121,7 @@ defineExpose({
 		<LoadingPlaceholder v-if="loading" type="conversations" />
 		<ul
 			v-else
+			:aria-labelledby="listAriaLabelledBy"
 			:style="wrapperProps.style">
 			<ConversationItem
 				v-for="item in list"
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index d446f939302..d07362a9655 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -249,9 +249,6 @@
 							</template>
 							{{ t('spreed', 'Back to conversations') }}
 						</LeftSidebarButton>
-						<NcAppNavigationCaption
-							class="navigation-caption"
-							:name="showArchived ? t('spreed', 'Archived conversations') : t('spreed', 'Threads')" />
 					</template>
 					<LeftSidebarButton
 						v-else-if="supportThreads && !showThreadsList && !isSearching && !isFiltered"
@@ -273,6 +270,20 @@
 						</template>
 					</LeftSidebarButton>
 				</div>
+
+				<div v-if="!isSearching" class="navigation-buttons-container" :class="{ 'hidden-visually': !showArchived && !showThreadsList }">
+					<div
+						:id="LIST_HEADING_ID"
+						class="navigation-caption"
+						role="heading"
+						aria-level="3">
+						{{
+							showArchived && t('spreed', 'Archived conversations')
+								|| showThreadsList && t('spreed', 'Threads')
+								|| t('spreed', 'Conversations')
+						}}
+					</div>
+				</div>
 			</div>
 		</template>
 
@@ -301,7 +312,7 @@
 				</NcEmptyContent>
 				<template v-if="showThreadsList">
 					<LoadingPlaceholder v-if="!followedThreadsInitialised" type="conversations" />
-					<ul v-else class="threads-tab__list">
+					<ul v-else class="threads-tab__list" :aria-labelledby="LIST_HEADING_ID">
 						<ThreadItem
 							v-for="thread of followedThreads"
 							:key="`thread_${thread.thread.id}`"
@@ -322,6 +333,7 @@
 					v-else
 					v-show="sortedConversationsList.length > 0"
 					ref="scroller"
+					:listAriaLabelledBy="LIST_HEADING_ID"
 					:conversations="sortedConversationsList"
 					:loading="!conversationsInitialised"
 					:compact="isCompact"
@@ -395,7 +407,6 @@ import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
-import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
 import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcChip from '@nextcloud/vue/components/NcChip'
@@ -506,7 +517,6 @@ export default {
 		CallPhoneDialog,
 		InvitationHandler,
 		NcAppNavigation,
-		NcAppNavigationCaption,
 		NcButton,
 		NcCounterBubble,
 		NcChip,
@@ -561,6 +571,8 @@ export default {
 		const { initializeNavigation, resetNavigation } = useArrowNavigation(leftSidebar, searchBox)
 		const isMobile = useIsMobile()
 
+		const LIST_HEADING_ID = 'left-sidebar-list-heading'
+
 		return {
 			token: useGetToken(),
 			initializeNavigation,
@@ -585,6 +597,7 @@ export default {
 			HOME_BUTTON_LABEL,
 			FILTER_LABELS,
 			SORT_LABELS,
+			LIST_HEADING_ID,
 			actorStore: useActorStore(),
 			chatExtrasStore: useChatExtrasStore(),
 			tokenStore: useTokenStore(),
@@ -1295,12 +1308,11 @@ export default {
 }
 
 .navigation-caption {
-	margin-block: var(--default-grid-baseline) !important;
-	margin-inline-start: calc(var(--default-grid-baseline) * 2);
-
-	:deep(.app-navigation-caption__name) {
-		margin: 0;
-	}
+	display: flex;
+	align-items: center;
+	padding-inline: var(--default-grid-baseline);
+	height: var(--default-clickable-area);
+	font-weight: bold;
 }
 
 .threads-tab__list {