feat(LeftSidebar): add controls for conversations sort

- allow users to sort conversations by recent activity, alphabetical order, or put group/private chat first.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Rikdekker <rik@shalution.nl>
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: 3 people

src/components/LeftSidebar/LeftSidebar.vue

@@ -27,7 +27,7 @@
 						class="filters"
 						:class="{ 'hidden-visually': isSearching }">
 						<template #icon>
-							<IconFilterOutline :size="20" />
+							<IconFilterCogOutline :size="20" />
 						</template>
 						<NcActionCaption :name="t('spreed', 'Filter conversations by')" />
 
@@ -74,6 +74,62 @@
 							</template>
 							{{ t('spreed', 'Clear filters') }}
 						</NcActionButton>
+
+						<template v-if="supportSortOrder">
+							<NcActionSeparator />
+
+							<NcActionCaption :name="t('spreed', 'Sort conversations by')" />
+
+							<NcActionButton
+								closeAfterClick
+								type="radio"
+								:value="CONVERSATION.SORT_ORDER.ACTIVITY"
+								:modelValue="sortOrder"
+								@update:modelValue="handleSortOrder">
+								<template #icon>
+									<IconClockOutline :size="20" />
+								</template>
+								{{ t('spreed', 'Recent activity') }}
+							</NcActionButton>
+
+							<NcActionButton
+								closeAfterClick
+								type="radio"
+								:value="CONVERSATION.SORT_ORDER.ALPHABETICAL"
+								:modelValue="sortOrder"
+								@update:modelValue="handleSortOrder">
+								<template #icon>
+									<IconSortAlphabeticalAscending :size="20" />
+								</template>
+								{{ t('spreed', 'Alphabetical') }}
+							</NcActionButton>
+
+							<NcActionSeparator />
+
+							<NcActionCaption :name="t('spreed', 'Group conversations')" />
+
+							<NcActionButton
+								closeAfterClick
+								type="checkbox"
+								:modelValue="groupMode === CONVERSATION.GROUP_MODE.PRIVATE_FIRST"
+								@click="handleGroupMode(CONVERSATION.GROUP_MODE.PRIVATE_FIRST)">
+								<template #icon>
+									<IconAccountOutline :size="20" />
+								</template>
+								{{ t('spreed', 'Private first') }}
+							</NcActionButton>
+
+							<NcActionButton
+								closeAfterClick
+								type="checkbox"
+								:modelValue="groupMode === CONVERSATION.GROUP_MODE.GROUP_FIRST"
+								@click="handleGroupMode(CONVERSATION.GROUP_MODE.GROUP_FIRST)">
+								<template #icon>
+									<IconAccountMultipleOutline :size="20" />
+								</template>
+								{{ t('spreed', 'Groups first') }}
+							</NcActionButton>
+						</template>
 					</NcActions>
 				</TransitionWrapper>
 
@@ -310,21 +366,25 @@ import { START_LOCATION } from 'vue-router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 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'
 import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import IconAccountMultiplePlusOutline from 'vue-material-design-icons/AccountMultiplePlusOutline.vue'
+import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 import IconArchiveOutline from 'vue-material-design-icons/ArchiveOutline.vue'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import IconAt from 'vue-material-design-icons/At.vue'
 import IconCalendarBlankOutline from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import IconChatPlusOutline from 'vue-material-design-icons/ChatPlusOutline.vue'
+import IconClockOutline from 'vue-material-design-icons/ClockOutline.vue'
 import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
-import IconFilterOutline from 'vue-material-design-icons/FilterOutline.vue'
+import IconFilterCogOutline from 'vue-material-design-icons/FilterCogOutline.vue'
 import IconFilterRemoveOutline from 'vue-material-design-icons/FilterRemoveOutline.vue'
 import IconFormatListBulleted from 'vue-material-design-icons/FormatListBulleted.vue'
 import IconForumOutline from 'vue-material-design-icons/ForumOutline.vue'
@@ -334,6 +394,7 @@ import IconMessageOutline from 'vue-material-design-icons/MessageOutline.vue'
 import IconNoteEditOutline from 'vue-material-design-icons/NoteEditOutline.vue'
 import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
+import IconSortAlphabeticalAscending from 'vue-material-design-icons/SortAlphabeticalAscending.vue'
 import NewConversationDialog from '../NewConversationDialog/NewConversationDialog.vue'
 import ThreadItem from '../RightSidebar/Threads/ThreadItem.vue'
 import LoadingPlaceholder from '../UIShared/LoadingPlaceholder.vue'
@@ -375,6 +436,7 @@ const canModerateSipDialOut = hasTalkFeature('local', 'sip-support-dialout')
 const canNoteToSelf = hasTalkFeature('local', 'note-to-self')
 const supportsArchive = hasTalkFeature('local', 'archived-conversations-v2')
 const supportThreads = hasTalkFeature('local', 'threads')
+const supportSortOrder = getTalkConfig('local', 'conversations', 'sort-order') !== undefined
 
 // TRANSLATORS The main home view
 const HOME_BUTTON_LABEL = t('spreed', 'Home')
@@ -407,6 +469,8 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcActionCaption,
+		NcActionSeparator,
+		NcEmptyContent,
 		TransitionWrapper,
 		ConversationsListVirtual,
 		SearchConversationsResults,
@@ -415,7 +479,7 @@ export default {
 		IconAt,
 		IconMessageBadgeOutline,
 		IconMessageOutline,
-		IconFilterOutline,
+		IconFilterCogOutline,
 		IconFilterRemoveOutline,
 		IconArchiveOutline,
 		IconArrowLeft,
@@ -428,7 +492,10 @@ export default {
 		IconCogOutline,
 		IconFormatListBulleted,
 		IconNoteEditOutline,
-		NcEmptyContent,
+		IconSortAlphabeticalAscending,
+		IconClockOutline,
+		IconAccountMultipleOutline,
+		IconAccountOutline,
 	},
 
 	setup() {
@@ -461,9 +528,11 @@ export default {
 			canNoteToSelf,
 			supportsArchive,
 			supportThreads,
+			supportSortOrder,
 			showArchived,
 			showThreadsList,
 			settingsStore,
+			CONVERSATION,
 			HOME_BUTTON_LABEL,
 			FILTER_LABELS,
 			actorStore: useActorStore(),
@@ -502,16 +571,50 @@ export default {
 	},
 
 	computed: {
+		sortOrder() {
+			return this.settingsStore.sortOrder
+		},
+
+		groupMode() {
+			return this.settingsStore.groupMode
+		},
+
 		conversationsList() {
 			return this.$store.getters.conversationsList
 		},
 
 		sortedConversationsList() {
 			return this.filteredConversationsList.slice()
 				.sort((conversation1, conversation2) => {
+					// Favorites always first
 					if (conversation1.isFavorite !== conversation2.isFavorite) {
 						return conversation1.isFavorite ? -1 : 1
 					}
+
+					// Group mode: groups first
+					if (this.groupMode === CONVERSATION.GROUP_MODE.GROUPS_FIRST) {
+						const isGroup1 = conversation1.type === CONVERSATION.TYPE.GROUP || conversation1.type === CONVERSATION.TYPE.PUBLIC
+						const isGroup2 = conversation2.type === CONVERSATION.TYPE.GROUP || conversation2.type === CONVERSATION.TYPE.PUBLIC
+						if (isGroup1 !== isGroup2) {
+							return isGroup1 ? -1 : 1
+						}
+					}
+
+					// Group mode: private first
+					if (this.groupMode === CONVERSATION.GROUP_MODE.PRIVATE_FIRST) {
+						const isPrivate1 = conversation1.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation1.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER
+						const isPrivate2 = conversation2.type === CONVERSATION.TYPE.ONE_TO_ONE || conversation2.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER
+						if (isPrivate1 !== isPrivate2) {
+							return isPrivate1 ? -1 : 1
+						}
+					}
+
+					// Sort order
+					if (this.sortOrder === CONVERSATION.SORT_ORDER.ALPHABETICAL) {
+						return (conversation1.displayName || '').localeCompare(conversation2.displayName || '')
+					}
+
+					// Default: activity (most recent first)
 					return conversation2.lastActivity - conversation1.lastActivity
 				})
 		},
@@ -728,6 +831,19 @@ export default {
 			this.$refs.invitationHandler.showModal()
 		},
 
+		handleSortOrder(newValue) {
+			this.settingsStore.updateSortOrder(newValue)
+		},
+
+		handleGroupMode(newValue) {
+			if (newValue === this.groupMode) {
+				// Reset mode
+				this.settingsStore.updateGroupMode(CONVERSATION.GROUP_MODE.NONE)
+			} else {
+				this.settingsStore.updateGroupMode(newValue)
+			}
+		},
+
 		handleFilter(filter) {
 			// Store the active filter
 			if (filter === null) {