feat(Settings): add option to switch between chat views

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>

src/__mocks__/capabilities.ts

@@ -159,7 +159,7 @@ export const mockedCapabilities: Capabilities = {
 				'has-translation-task-providers': true,
 				'typing-privacy': 0,
 				'summary-threshold': 100,
-				'style': 'split',
+				style: 'split',
 			},
 			conversations: {
 				'can-create': true,

src/components/SettingsDialog/SettingsDialog.vue

@@ -55,11 +55,20 @@
 			v-if="!isGuest && supportConversationsListStyle"
 			id="talk_appearance"
 			:name="t('spreed', 'Appearance & Sounds')">
-			<NcFormBoxSwitch
-				:model-value="conversationsListStyle"
-				:label="t('spreed', 'Compact conversations list')"
-				:disabled="appearanceLoading"
-				@update:model-value="toggleConversationsListStyle" />
+			<NcFormBox>
+				<NcFormBoxSwitch
+					:model-value="conversationsListStyle"
+					:label="t('spreed', 'Compact conversations list')"
+					:disabled="appearanceLoading"
+					@update:model-value="toggleConversationsListStyle" />
+				<!-- FIXME: remove v-if after implementing split view -->
+				<NcFormBoxSwitch
+					v-if="false"
+					:model-value="chatSplitViewEnabled"
+					:label="t('spreed', 'Show your chat in split view')"
+					:disabled="chatAppearanceLoading"
+					@update:model-value="toggleChatStyle" />
+			</NcFormBox>
 
 			<NcFormBox>
 				<NcFormBoxSwitch
@@ -167,7 +176,7 @@ import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
 import NcKbd from '@nextcloud/vue/components/NcKbd'
 import IconFolderOpenOutline from 'vue-material-design-icons/FolderOpenOutline.vue'
 import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
-import { CONVERSATION, PRIVACY } from '../../constants.ts'
+import { CHAT_STYLE, CONVERSATION, PRIVACY } from '../../constants.ts'
 import { getTalkConfig, getTalkVersion } from '../../services/CapabilitiesManager.ts'
 import { useCustomSettings } from '../../services/SettingsAPI.ts'
 import { useActorStore } from '../../stores/actor.ts'
@@ -228,6 +237,7 @@ export default {
 		return {
 			showSettings: false,
 			attachmentFolderLoading: true,
+			chatAppearanceLoading: false,
 			appearanceLoading: false,
 			privacyLoading: false,
 			playSoundsLoading: false,
@@ -267,6 +277,10 @@ export default {
 		hideMediaSettings() {
 			return !this.settingsStore.showMediaSettings
 		},
+
+		chatSplitViewEnabled() {
+			return this.settingsStore.chatStyle === CHAT_STYLE.SPLIT
+		},
 	},
 
 	mounted() {
@@ -350,6 +364,17 @@ export default {
 			this.appearanceLoading = false
 		},
 
+		async toggleChatStyle(value) {
+			this.chatAppearanceLoading = true
+			try {
+				await this.settingsStore.updateChatStyle(value ? CHAT_STYLE.SPLIT : CHAT_STYLE.UNIFIED)
+				showSuccess(t('spreed', 'Your personal setting has been saved'))
+			} catch (exception) {
+				showError(t('spreed', 'Error while setting personal setting'))
+			}
+			this.chatAppearanceLoading = false
+		},
+
 		async togglePlaySounds() {
 			this.playSoundsLoading = true
 			try {

src/constants.ts

@@ -47,6 +47,11 @@ export const CHAT = {
 	FETCH_NEW: 1,
 } as const
 
+export const CHAT_STYLE = {
+	SPLIT: 'split',
+	UNIFIED: 'unified',
+} as const
+
 export const CALL = {
 	RECORDING: {
 		OFF: 0,

src/services/settingsService.ts

@@ -108,6 +108,14 @@ async function setConversationsListStyle(value: string) {
 	return setUserConfig('spreed', 'conversations_list_style', value)
 }
 
+/**
+ *
+ * @param value
+ */
+async function setChatStyle(value: string) {
+	return setUserConfig('spreed', 'chat_style', value)
+}
+
 /**
  * Set user config using provisioning API
  *
@@ -124,6 +132,7 @@ async function setUserConfig(appId: string, configKey: string, configValue: stri
 export {
 	setAttachmentFolder,
 	setBlurVirtualBackground,
+	setChatStyle,
 	setConversationsListStyle,
 	setPlaySounds,
 	setReadStatusPrivacy,

src/stores/settings.ts

@@ -12,6 +12,7 @@ import { getTalkConfig } from '../services/CapabilitiesManager.ts'
 import {
 	setAttachmentFolder,
 	setBlurVirtualBackground,
+	setChatStyle,
 	setConversationsListStyle,
 	setReadStatusPrivacy,
 	setStartWithoutMedia,
@@ -20,6 +21,7 @@ import {
 
 type PRIVACY_KEYS = typeof PRIVACY[keyof typeof PRIVACY]
 type LIST_STYLE_OPTIONS = 'two-lines' | 'compact'
+type CHAT_STYLE_OPTIONS = 'split' | 'unified'
 
 /**
  * Store for shared items shown in RightSidebar
@@ -31,6 +33,7 @@ export const useSettingsStore = defineStore('settings', () => {
 	const startWithoutMedia = ref<boolean | undefined>(getTalkConfig('local', 'call', 'start-without-media'))
 	const blurVirtualBackgroundEnabled = ref<boolean | undefined>(getTalkConfig('local', 'call', 'blur-virtual-background'))
 	const conversationsListStyle = ref<LIST_STYLE_OPTIONS | undefined>(getTalkConfig('local', 'conversations', 'list-style'))
+	const chatStyle = ref<CHAT_STYLE_OPTIONS | undefined>(getTalkConfig('local', 'chat', 'style') ?? 'split')
 
 	const attachmentFolder = ref<string>(loadState('spreed', 'attachment_folder', ''))
 	const attachmentFolderFreeSpace = ref<number>(loadState('spreed', 'attachment_folder_free_space', 0))
@@ -105,6 +108,16 @@ export const useSettingsStore = defineStore('settings', () => {
 		attachmentFolder.value = value
 	}
 
+	/**
+	 * Update the conversations list style setting for the user
+	 *
+	 * @param value - new selected state
+	 */
+	async function updateChatStyle(value: CHAT_STYLE_OPTIONS) {
+		await setChatStyle(value)
+		chatStyle.value = value
+	}
+
 	return {
 		readStatusPrivacy,
 		typingStatusPrivacy,
@@ -114,6 +127,7 @@ export const useSettingsStore = defineStore('settings', () => {
 		conversationsListStyle,
 		attachmentFolder,
 		attachmentFolderFreeSpace,
+		chatStyle,
 
 		updateReadStatusPrivacy,
 		updateTypingStatusPrivacy,
@@ -122,5 +136,6 @@ export const useSettingsStore = defineStore('settings', () => {
 		updateStartWithoutMedia,
 		updateConversationsListStyle,
 		updateAttachmentFolder,
+		updateChatStyle,
 	}
 })