feat(desktop): add OCA.Talk.Settings API to customize and manage settings

package.json

@@ -75,6 +75,7 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
+    "@jest/globals": "^29.7.0",
     "@nextcloud/babel-config": "^1.2.0",
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/eslint-config": "^8.4.1",

src/components/SettingsDialog/SettingsDialog.vue

@@ -7,8 +7,16 @@
 	<NcAppSettingsDialog :open.sync="showSettings"
 		:name="t('spreed', 'Talk settings')"
 		:show-navigation="true"
-		first-selected-section="keyboard shortcuts"
 		:container="container">
+		<!-- Custom settings sections registered via OCA.Talk.Settings -->
+		<NcAppSettingsSection v-for="{ id, name, element } in customSettingsSections"
+			:id="id"
+			:key="id"
+			:name="name"
+			class="app-settings-section">
+			<component :is="element" />
+		</NcAppSettingsSection>
+
 		<NcAppSettingsSection id="devices"
 			:name="t('spreed', 'Choose devices')"
 			class="app-settings-section">
@@ -188,6 +196,7 @@ import MediaDevicesPreview from './MediaDevicesPreview.vue'
 import { PRIVACY } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
+import { useCustomSettings } from '../../services/SettingsAPI.ts'
 import { useSettingsStore } from '../../stores/settings.js'
 
 const isBackgroundBlurred = loadState('spreed', 'force_enable_blur_filter', '')
@@ -207,11 +216,13 @@ export default {
 
 	setup() {
 		const settingsStore = useSettingsStore()
+		const { customSettingsSections } = useCustomSettings()
 
 		return {
 			settingsStore,
 			supportTypingStatus,
 			isBackgroundBlurred,
+			customSettingsSections,
 		}
 	},
 

src/main.js

@@ -18,6 +18,7 @@ import App from './App.vue'
 
 import './init.js'
 import router from './router/router.js'
+import { SettingsAPI } from './services/SettingsAPI.ts'
 import store from './store/index.js'
 
 // Leaflet icon patch
@@ -81,7 +82,7 @@ const Sidebar = function() {
 			if (!sidebarShown) {
 				this.state.file = ''
 			}
-		}
+		},
 	)
 }
 
@@ -153,5 +154,6 @@ if (!window.OCA.Talk) {
 	window.OCA.Talk = {}
 }
 OCA.Talk.instance = instance
+OCA.Talk.Settings = SettingsAPI
 
 export default instance

src/services/SettingsAPI.ts

@@ -0,0 +1,66 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { readonly, shallowReactive } from 'vue'
+
+import { emit } from '@nextcloud/event-bus'
+
+type TalkSettingsSection = {
+	/**
+	 * Section internal ID
+	 */
+	id: string
+	/**
+	 * Section visible name
+	 */
+	name: string
+	/**
+	 * WebComponent's (custom element's) tag name to render as the section content
+	 */
+	element: string
+}
+
+const customSettingsSections: TalkSettingsSection[] = shallowReactive([])
+
+/**
+ * Register a custom settings section
+ * @param section - Settings section
+ */
+function registerSection(section: TalkSettingsSection) {
+	customSettingsSections.push(section)
+}
+
+/**
+ * Unregister a custom settings section
+ * @param id - Section ID
+ */
+function unregisterSection(id: string) {
+	const index = customSettingsSections.findIndex((section) => section.id === id)
+	if (index !== -1) {
+		customSettingsSections.splice(index, 1)
+	}
+}
+
+/**
+ * Open settings dialog
+ */
+function open() {
+	emit('show-settings', undefined)
+}
+
+export const SettingsAPI = {
+	open,
+	registerSection,
+	unregisterSection,
+}
+
+/**
+ * Composable to use custom settings in Talk
+ */
+export function useCustomSettings() {
+	return {
+		customSettingsSections: readonly(customSettingsSections),
+	}
+}

src/services/__tests__/SettingsAPI.spec.js

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { jest, describe, it, expect } from '@jest/globals'
+
+import { emit } from '@nextcloud/event-bus'
+
+import { SettingsAPI, useCustomSettings } from '../SettingsAPI.ts'
+
+jest.mock('@nextcloud/event-bus')
+
+describe('SettingsAPI', () => {
+	it('should have open method to open settings', () => {
+		expect(SettingsAPI.open).toBeDefined()
+		SettingsAPI.open()
+		// Currently, a global event is used to open the settings
+		expect(emit).toHaveBeenCalledWith('show-settings', undefined)
+	})
+
+	it('should have registerSection method to register settings sections', () => {
+		const { customSettingsSections } = useCustomSettings()
+		expect(customSettingsSections).toEqual([])
+		expect(SettingsAPI.registerSection).toBeDefined()
+		SettingsAPI.registerSection({
+			id: 'test',
+			name: 'Test',
+			element: 'test-element',
+		})
+		SettingsAPI.registerSection({
+			id: 'test2',
+			name: 'Test 2',
+			element: 'test-element-two',
+		})
+		expect(customSettingsSections).toEqual([{
+			id: 'test',
+			name: 'Test',
+			element: 'test-element',
+		}, {
+			id: 'test2',
+			name: 'Test 2',
+			element: 'test-element-two',
+		}])
+	})
+
+	it('should have unregisterSection method to unregister settings sections', () => {
+		const { customSettingsSections } = useCustomSettings()
+		expect(customSettingsSections).toEqual([{
+			id: 'test',
+			name: 'Test',
+			element: 'test-element',
+		}, {
+			id: 'test2',
+			name: 'Test 2',
+			element: 'test-element-two',
+		}])
+		expect(SettingsAPI.unregisterSection).toBeDefined()
+		SettingsAPI.unregisterSection('test')
+		expect(customSettingsSections).toEqual([{
+			id: 'test2',
+			name: 'Test 2',
+			element: 'test-element-two',
+		}])
+	})
+})