feat(desktop): add talk settings frontend API

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

src/components/SettingsDialog/SettingsDialog.vue

@@ -7,8 +7,15 @@
 	<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 -->
+		<NcAppSettingsSection v-for="{ id, name, element } in additionalSettingsSections"
+			:id="id"
+			:key="id"
+			:name="name">
+			<component :is="element" />
+		</NcAppSettingsSection>
+
 		<NcAppSettingsSection id="devices"
 			:name="t('spreed', 'Choose devices')"
 			class="app-settings-section">
@@ -185,6 +192,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 
 import MediaDevicesPreview from './MediaDevicesPreview.vue'
 
+import { useSettingsDialog } from '../../composables/useSettingsDialog.ts'
 import { PRIVACY } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
@@ -207,8 +215,10 @@ export default {
 
 	setup() {
 		const settingsStore = useSettingsStore()
+		const { additionalSettingsSections } = useSettingsDialog()
 
 		return {
+			additionalSettingsSections,
 			settingsStore,
 			supportTypingStatus,
 			isBackgroundBlurred,

src/composables/useSettingsDialog.ts

@@ -0,0 +1,52 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { markRaw, ref } from 'vue'
+import type { Ref } from 'vue'
+
+type TalkSettingsSection = {
+	/**
+	 * Section ID
+	 */
+	id: string
+	/**
+	 * Section name, passed to NcAppSettingSection component
+	 */
+	name: string
+	/**
+	 * WebComponent (custom element) name to render as the section content
+	 */
+	element: string,
+}
+
+const additionalSettingsSections: Ref<TalkSettingsSection[]> = ref([])
+
+/**
+ * Register an additional settings section
+ * @param section - Settings section
+ */
+export function registerSettingsSection(section: TalkSettingsSection) {
+	additionalSettingsSections.value.push(markRaw(section))
+}
+
+/**
+ * Unregister an additional settings section
+ * @param id - Section ID
+ */
+export function unregisterSettingsSection(id: string) {
+	const index = additionalSettingsSections.value.findIndex((section) => section.id === id)
+	if (index !== -1) {
+		additionalSettingsSections.value.splice(index, 1)
+	}
+}
+
+/**
+ * Talk Settings Dialog composable
+ */
+export function useSettingsDialog() {
+	return {
+		additionalSettingsSections,
+	}
+}

src/main.js

@@ -17,6 +17,7 @@ import { options as TooltipOptions } from '@nextcloud/vue/dist/Directives/Toolti
 
 import App from './App.vue'
 
+import { registerSettingsSection, unregisterSettingsSection } from './composables/useSettingsDialog.ts'
 import './init.js'
 import router from './router/router.js'
 import store from './store/index.js'
@@ -155,5 +156,9 @@ if (!window.OCA.Talk) {
 	window.OCA.Talk = {}
 }
 OCA.Talk.instance = instance
+OCA.Talk.Settings = {
+	registerSettingsSection,
+	unregisterSettingsSection,
+}
 
 export default instance