feat(desktop): add talk settings frontend API

Signed-off-by: Grigorii K. Shartsev <[email protected]>

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">
@@ -185,6 +193,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 
 import MediaDevicesPreview from './MediaDevicesPreview.vue'
 
+import { useCustomSettings } from '../../services/SettingsAPI.ts'
 import { PRIVACY } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
@@ -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),
+	}
+}