Merge pull request #54474 from nextcloud/leftybournes/feat/contactsmenu_register_actions

feat: provide api to register actions in contacts menu

Author: leftybournes

core/src/components/ContactsMenu.js

@@ -6,13 +6,16 @@
 import Vue from 'vue'
 
 import ContactsMenu from '../views/ContactsMenu.vue'
+import ContactsMenuService from '../services/ContactsMenuService.ts'
 
 /**
  * @todo move to contacts menu code https://github.com/orgs/nextcloud/projects/31#card-21213129
  */
 export const setUp = () => {
 	const mountPoint = document.getElementById('contactsmenu')
+
 	if (mountPoint) {
+		window.OC.ContactsMenu = new ContactsMenuService()
 		// eslint-disable-next-line no-new
 		new Vue({
 			name: 'ContactsMenuRoot',

core/src/services/ContactsMenuService.ts

@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { IContactsMenuAction } from '../types/contactsMenuAction.ts'
+
+export default class ContactsMenuService {
+
+	private _actions: IContactsMenuAction[]
+
+	constructor() {
+		this._actions = []
+	}
+
+	get actions(): IContactsMenuAction[] {
+		return this._actions
+	}
+
+	/*
+	 * Register an action for the contacts menu
+	 * Actions use NcButton
+	 */
+	addAction(action: IContactsMenuAction): void {
+		this._actions.push(action)
+	}
+
+}

core/src/types/contactsMenuAction.d.ts

@@ -0,0 +1,11 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export interface IContactsMenuAction {
+	id: string
+	icon: string
+	label: string
+	onClick: () => void | Promise<void>
+}

core/src/views/ContactsMenu.vue

@@ -12,18 +12,31 @@
 			<NcIconSvgWrapper class="contactsmenu__trigger-icon" :path="mdiContacts" />
 		</template>
 		<div class="contactsmenu__menu">
-			<div class="contactsmenu__menu__input-wrapper">
-				<NcTextField id="contactsmenu__menu__search"
-					ref="contactsMenuInput"
-					:value.sync="searchTerm"
-					trailing-button-icon="close"
-					:label="t('core', 'Search contacts')"
-					:trailing-button-label="t('core','Reset search')"
-					:show-trailing-button="searchTerm !== ''"
-					:placeholder="t('core', 'Search contacts …')"
-					class="contactsmenu__menu__search"
-					@input="onInputDebounced"
-					@trailing-button-click="onReset" />
+			<div class="contactsmenu__menu__search-container">
+				<div class="contactsmenu__menu__input-wrapper">
+					<NcTextField id="contactsmenu__menu__search"
+						ref="contactsMenuInput"
+						v-model="searchTerm"
+						trailing-button-icon="close"
+						:label="t('core', 'Search contacts')"
+						:trailing-button-label="t('core','Reset search')"
+						:show-trailing-button="searchTerm !== ''"
+						:placeholder="t('core', 'Search contacts …')"
+						class="contactsmenu__menu__search"
+						@input="onInputDebounced"
+						@trailing-button-click="onReset" />
+				</div>
+				<NcButton v-for="action in actions"
+					:key="action.id"
+					:aria-label="action.label"
+					:title="action.label"
+					class="contactsmenu__menu__action"
+					variant="tertiary-no-background"
+					@click="action.onClick">
+					<template #icon>
+						<NcIconSvgWrapper :svg="action.icon" />
+					</template>
+				</NcButton>
 			</div>
 			<NcEmptyContent v-if="error" :name="t('core', 'Could not load your contacts')">
 				<template #icon>
@@ -105,6 +118,7 @@ export default {
 	data() {
 		const user = getCurrentUser()
 		return {
+			actions: window.OC?.ContactsMenu?.actions || [],
 			contactsAppEnabled: false,
 			contactsAppURL: generateUrl('/apps/contacts'),
 			contactsAppMgmtURL: generateUrl('/settings/apps/social/contacts'),
@@ -195,10 +209,16 @@ export default {
 			margin-inline-start: 13px;
 		}
 
+		&__search-container {
+			display: flex;
+			flex: row nowrap;
+		}
+
 		&__input-wrapper {
 			padding: 10px;
 			z-index: 2;
 			top: 0;
+			flex-grow: 1;
 		}
 
 		&__search {