feat(conversations): add user toggle for compact list

Signed-off-by: Maksim Sukharev <[email protected]>

src/__mocks__/capabilities.ts

@@ -134,6 +134,7 @@ export const mockedCapabilities: Capabilities = {
 			conversations: {
 				'can-create': true,
 				'force-passwords': false,
+				'compact-list': 0,
 			},
 			federation: {
 				enabled: false,
@@ -167,6 +168,7 @@ export const mockedCapabilities: Capabilities = {
 			],
 			conversations: [
 				'can-create',
+				'compact-list',
 			],
 			federation: [],
 			previews: [

src/components/SettingsDialog/SettingsDialog.vue

@@ -56,6 +56,19 @@
 					@close="showFilePicker = false" />
 			</div>
 		</NcAppSettingsSection>
+		<NcAppSettingsSection v-if="!isGuest && supportConversationsListStyle"
+			id="talk_appearance"
+			:name="t('spreed', 'Appearance')"
+			class="app-settings-section">
+			<NcCheckboxRadioSwitch id="conversations_compact_list"
+				:model-value="conversationsListStyle"
+				:disabled="appearanceLoading"
+				type="switch"
+				class="checkbox"
+				@update:modelValue="toggleConversationsListStyle">
+				{{ t('spreed', 'Show my conversations list in compact mode') }}
+			</NcCheckboxRadioSwitch>
+		</NcAppSettingsSection>
 		<NcAppSettingsSection v-if="!isGuest"
 			id="privacy"
 			:name="t('spreed', 'Privacy')"
@@ -212,7 +225,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 
 import MediaDevicesPreview from './MediaDevicesPreview.vue'
 
-import { PRIVACY } from '../../constants.js'
+import { CONVERSATION, PRIVACY } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { useCustomSettings } from '../../services/SettingsAPI.ts'
@@ -230,6 +243,8 @@ const isBackgroundBlurredState = serverSupportsBackgroundBlurred
 	: BrowserStorage.getItem('background-blurred') // 'true', 'false', null
 const supportTypingStatus = getTalkConfig('local', 'chat', 'typing-privacy') !== undefined
 const supportStartWithoutMedia = getTalkConfig('local', 'call', 'start-without-media') !== undefined
+const supportConversationsListStyle = getTalkConfig('local', 'conversations', 'compact-list') !== undefined
+
 export default {
 	name: 'SettingsDialog',
 
@@ -258,6 +273,7 @@ export default {
 			serverSupportsBackgroundBlurred,
 			customSettingsSections,
 			supportStartWithoutMedia,
+			supportConversationsListStyle,
 		}
 	},
 
@@ -266,6 +282,7 @@ export default {
 			showSettings: false,
 			showFilePicker: false,
 			attachmentFolderLoading: true,
+			appearanceLoading: false,
 			privacyLoading: false,
 			playSoundsLoading: false,
 			mediaLoading: false,
@@ -301,6 +318,10 @@ export default {
 			return this.settingsStore.startWithoutMedia
 		},
 
+		conversationsListStyle() {
+			return this.settingsStore.conversationsListStyle !== CONVERSATION.APPEARANCE.DEFAULT
+		},
+
 		settingsUrl() {
 			return generateUrl('/settings/user/notifications')
 		},
@@ -390,6 +411,19 @@ export default {
 			this.privacyLoading = false
 		},
 
+		async toggleConversationsListStyle(value) {
+			this.appearanceLoading = true
+			try {
+				await this.settingsStore.setConversationsListStyle(
+					value ? CONVERSATION.APPEARANCE.COMPACT : CONVERSATION.APPEARANCE.DEFAULT
+				)
+				showSuccess(t('spreed', 'Your personal setting has been saved'))
+			} catch (exception) {
+				showError(t('spreed', 'Error while setting personal setting'))
+			}
+			this.appearanceLoading = false
+		},
+
 		/**
 		 * Fallback method for versions before v29.0.4
 		 * @param {boolean} value whether background should be blurred

src/constants.js

@@ -104,6 +104,11 @@ export const CONVERSATION = {
 		DEFAULT: '',
 	},
 
+	APPEARANCE: {
+		DEFAULT: 0,
+		COMPACT: 1,
+	},
+
 	MAX_NAME_LENGTH: 255,
 	MAX_DESCRIPTION_LENGTH: 500,
 }

src/services/settingsService.ts

@@ -86,6 +86,10 @@ const setBlurVirtualBackground = async function(value: boolean) {
 	return setUserConfig('spreed', 'blur_virtual_background', value ? 'yes' : 'no')
 }
 
+const setConversationsListStyle = async function(value: number) {
+	return setUserConfig('spreed', 'conversations_compact_list', value.toString())
+}
+
 /**
  * Set user config using provisioning API
  *
@@ -102,6 +106,7 @@ const setUserConfig = async function(appId: string, configKey: string, configVal
 export {
 	setAttachmentFolder,
 	setBlurVirtualBackground,
+	setConversationsListStyle,
 	setReadStatusPrivacy,
 	setTypingStatusPrivacy,
 	setSIPSettings,

src/stores/__tests__/settings.spec.js

@@ -59,6 +59,8 @@ describe('settingsStore', () => {
 	})
 
 	describe('media settings dialog', () => {
+		// FIXME: BrowserStorage.getItem('cachedConversations') is always called whenever capabilitiesManager.ts is imported
+		const EXTRA_CALLS = 3
 		it('shows correct stored values for conversations', () => {
 			// Arrange
 			settingsStore.showMediaSettings['token-1'] = true
@@ -70,10 +72,7 @@ describe('settingsStore', () => {
 
 			// Assert
 			expect(results).toEqual([true, false])
-			// It's always called at least once : BrowserStorage.getItem('cachedConversations')
-			// Whenever capabilitiesManager.ts is imported
-			// +2
-			expect(BrowserStorage.getItem).toHaveBeenCalledTimes(2)
+			expect(BrowserStorage.getItem).toHaveBeenCalledTimes(EXTRA_CALLS)
 		})
 
 		it('shows correct values received from BrowserStorage', () => {
@@ -90,11 +89,10 @@ describe('settingsStore', () => {
 
 			// Assert
 			expect(results).toEqual([true, true, false])
-			// It's always called at least once : BrowserStorage.getItem('cachedConversations') (+2)
-			expect(BrowserStorage.getItem).toHaveBeenCalledTimes(5) // 2 + 3
-			expect(BrowserStorage.getItem).toHaveBeenNthCalledWith(3, 'showMediaSettings_token-1')
-			expect(BrowserStorage.getItem).toHaveBeenNthCalledWith(4, 'showMediaSettings_token-2')
-			expect(BrowserStorage.getItem).toHaveBeenNthCalledWith(5, 'showMediaSettings_token-3')
+			expect(BrowserStorage.getItem).toHaveBeenCalledTimes(EXTRA_CALLS + 3)
+			expect(BrowserStorage.getItem).toHaveBeenNthCalledWith(EXTRA_CALLS + 1, 'showMediaSettings_token-1')
+			expect(BrowserStorage.getItem).toHaveBeenNthCalledWith(EXTRA_CALLS + 2, 'showMediaSettings_token-2')
+			expect(BrowserStorage.getItem).toHaveBeenNthCalledWith(EXTRA_CALLS + 3, 'showMediaSettings_token-3')
 		})
 
 		it('updates values correctly', async () => {
@@ -110,8 +108,7 @@ describe('settingsStore', () => {
 
 			// Assert
 			expect(results).toEqual([false, true])
-			// It's always called at least once : BrowserStorage.getItem('cachedConversations') (+2)
-			expect(BrowserStorage.getItem).toHaveBeenCalledTimes(2)
+			expect(BrowserStorage.getItem).toHaveBeenCalledTimes(EXTRA_CALLS)
 			expect(BrowserStorage.setItem).toHaveBeenCalledTimes(2)
 			expect(BrowserStorage.setItem).toHaveBeenNthCalledWith(1, 'showMediaSettings_token-1', 'false')
 			expect(BrowserStorage.setItem).toHaveBeenNthCalledWith(2, 'showMediaSettings_token-2', 'true')

src/stores/settings.js

@@ -16,6 +16,7 @@ import {
 	setTypingStatusPrivacy,
 	setStartWithoutMedia,
 	setBlurVirtualBackground,
+	setConversationsListStyle,
 } from '../services/settingsService.ts'
 
 /**
@@ -42,6 +43,7 @@ export const useSettingsStore = defineStore('settings', {
 		showMediaSettings: {},
 		startWithoutMedia: getTalkConfig('local', 'call', 'start-without-media'),
 		blurVirtualBackgroundEnabled: getTalkConfig('local', 'call', 'blur-virtual-background'),
+		conversationsListStyle: getTalkConfig('local', 'conversations', 'compact-list'),
 	}),
 
 	getters: {
@@ -114,5 +116,10 @@ export const useSettingsStore = defineStore('settings', {
 			await setStartWithoutMedia(value)
 			this.startWithoutMedia = value
 		},
+
+		async setConversationsListStyle(value) {
+			await setConversationsListStyle(value)
+			this.conversationsListStyle = value
+		},
 	},
 })