1 files changed, 120 insertions, 0 deletions
diff --git a/apps/theming/src/components/admin/AppMenuSection.vue b/apps/theming/src/components/admin/AppMenuSection.vue
new file mode 100644
index 00000000000..bed170504c9
--- /dev/null
+++ b/apps/theming/src/components/admin/AppMenuSection.vue
@@ -0,0 +1,120 @@
+<template>
+	<NcSettingsSection :name="t('theming', 'Navigation bar settings')">
+		<h3>{{ t('theming', 'Default app') }}</h3>
+		<p class="info-note">
+			{{ t('theming', 'The default app is the app that is e.g. opened after login or when the logo in the menu is clicked.') }}
+		</p>
+
+		<NcCheckboxRadioSwitch :checked.sync="hasCustomDefaultApp" type="switch" data-cy-switch-default-app="">
+			{{ t('theming', 'Use custom default app') }}
+		</NcCheckboxRadioSwitch>
+
+		<template v-if="hasCustomDefaultApp">
+			<h4>{{ t('theming', 'Global default app') }}</h4>
+			<NcSelect v-model="selectedApps"
+				:close-on-select="false"
+				:placeholder="t('theming', 'Global default apps')"
+				:options="allApps"
+				:multiple="true" />
+			<h5>{{ t('theming', 'Default app priority') }}</h5>
+			<p class="info-note">
+				{{ t('theming', 'If an app is not enabled for a user, the next app with lower priority is used.') }}
+			</p>
+			<AppOrderSelector :value.sync="selectedApps" />
+		</template>
+	</NcSettingsSection>
+</template>
+
+<script lang="ts">
+import { showError } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
+import { translate as t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import { computed, defineComponent } from 'vue'
+
+import axios from '@nextcloud/axios'
+
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import AppOrderSelector from '../AppOrderSelector.vue'
+
+export default defineComponent({
+	name: 'AppMenuSection',
+	components: {
+		AppOrderSelector,
+		NcCheckboxRadioSwitch,
+		NcSelect,
+		NcSettingsSection,
+	},
+	props: {
+		defaultApps: {
+			type: Array,
+			required: true,
+		},
+	},
+	emits: {
+		'update:defaultApps': (value: string[]) => Array.isArray(value) && value.every((id) => typeof id === 'string'),
+	},
+	setup(props, { emit }) {
+		const hasCustomDefaultApp = computed({
+			get: () => props.defaultApps.length > 0,
+			set: (checked: boolean) => {
+				if (checked) {
+					emit('update:defaultApps', ['dashboard', 'files'])
+				} else {
+					selectedApps.value = []
+				}
+			},
+		})
+
+		/**
+		 * All enabled apps which can be navigated
+		 */
+		const allApps = Object.values(
+			loadState<Record<string, { id: string, name?: string, icon: string }>>('core', 'apps'),
+		).map(({ id, name, icon }) => ({ label: name, id, icon }))
+
+		/**
+		 * Currently selected app, wrapps the setter
+		 */
+		const selectedApps = computed({
+			get: () => props.defaultApps.map((id) => allApps.filter(app => app.id === id)[0]),
+			set(value) {
+				saveSetting('defaultApps', value.map(app => app.id))
+					.then(() => emit('update:defaultApps', value.map(app => app.id)))
+					.catch(() => showError(t('theming', 'Could not set global default apps')))
+			},
+		})
+
+		const saveSetting = async (key: string, value: unknown) => {
+			const url = generateUrl('/apps/theming/ajax/updateAppMenu')
+			return await axios.put(url, {
+				setting: key,
+				value,
+			})
+		}
+
+		return {
+			allApps,
+			selectedApps,
+			hasCustomDefaultApp,
+
+			t,
+		}
+	},
+})
+</script>
+
+<style scoped lang="scss">
+h3, h4 {
+	font-weight: bold;
+}
+h4, h5 {
+	margin-block-start: 12px;
+}
+
+.info-note {
+	color: var(--color-text-maxcontrast);
+}
+</style>