feat(conversations): add user toggle for compact list

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Dec 13, 2024 · c335ce4 · c335ce4
1 parent b13b586
commit c335ce4
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 1 deletion.
diff --git a/src/__mocks__/capabilities.ts b/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: [

diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/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

diff --git a/src/constants.js b/src/constants.js
@@ -104,6 +104,11 @@ export const CONVERSATION = {
 		DEFAULT: '',
 	},
 
+	APPEARANCE: {
+		DEFAULT: 0,
+		COMPACT: 1,
+	},
+
 	MAX_NAME_LENGTH: 255,
 	MAX_DESCRIPTION_LENGTH: 500,
 }

diff --git a/src/services/settingsService.ts b/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,

diff --git a/src/stores/settings.js b/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
+		},
 	},
 })