feat(desktop): add talk settings frontend API

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

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