feat(files_sharing): use the unified sharing dialog in the files sidebar

Replace the legacy inline sharing inputs and per-share menus with the new
unified sharing dialog (@nextcloud/sharing/dialog):

- a single "Share" button opens the create dialog
- share entries expose dedicated edit + delete actions, delete asking for
  confirmation before removing the share
- the quick-share permission dropdown and the link "customize" entry route
  through the new dialog

The dialog is a Vue 3 component while files_sharing is still a Vue 2
frontend, so it is registered on the global OCA.Sharing namespace by a small
Vue 3 bridge entry point (build/frontend) and triggered from the Vue 2
sidebar through that namespace. This keeps Vue 3 out of the legacy bundle;
once files_sharing is migrated to Vue 3 the bridge can be dropped and the
library imported directly.

The legacy inline UI is kept as an automatic fallback, shown whenever the
server does not advertise the unified sharing API (empty sharing capability).

Assisted-by: ClaudeCode:claude-opus-4-8
Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

apps/files_sharing/lib/Listener/LoadSidebarListener.php

@@ -38,6 +38,10 @@ public function handle(Event $event): void {
 			return;
 		}
 		Util::addScript(Application::APP_ID, 'files_sharing_tab', 'files');
+		// Vue 3 bridge exposing the unified sharing dialog on OCA.Sharing for the
+		// (Vue 2) sidebar to trigger without bundling Vue 3.
+		Util::addStyle(Application::APP_ID, 'sharing-dialog');
+		Util::addScript(Application::APP_ID, 'sharing-dialog', 'files');
 
 		$appConfig = Server::get(IAppConfig::class);
 		$gsConfig = Server::get(IConfig::class);

apps/files_sharing/src/components/SharingEntry.vue

@@ -28,13 +28,14 @@
 				</span>
 			</component>
 			<SharingEntryQuickShareSelect
+				v-if="!config.sharingDialogEnabled"
 				:share="share"
 				:file-info="fileInfo"
 				@open-sharing-details="openShareDetailsForCustomSettings(share)" />
 		</div>
 		<ShareExpiryTime v-if="share && share.expireDate" :share="share" />
 		<NcButton
-			v-if="share.canEdit"
+			v-if="share.canEdit && !config.sharingDialogEnabled"
 			class="sharing-entry__action"
 			data-cy-files-sharing-share-actions
 			:aria-label="t('files_sharing', 'Open Sharing Details')"
@@ -44,27 +45,57 @@
 				<DotsHorizontalIcon :size="20" />
 			</template>
 		</NcButton>
+		<!-- Unified dialog: edit + delete as a simple dual button -->
+		<template v-else-if="config.sharingDialogEnabled">
+			<NcButton
+				v-if="share.canEdit"
+				class="sharing-entry__action"
+				:aria-label="t('files_sharing', 'Edit share')"
+				variant="tertiary"
+				@click="openEditDialog">
+				<template #icon>
+					<PencilIcon :size="20" />
+				</template>
+			</NcButton>
+			<NcButton
+				v-if="share.canDelete"
+				class="sharing-entry__action"
+				:aria-label="t('files_sharing', 'Delete share')"
+				variant="tertiary"
+				@click="confirmDelete">
+				<template #icon>
+					<DeleteIcon :size="20" />
+				</template>
+			</NcButton>
+		</template>
 	</li>
 </template>
 
 <script>
+import { DialogBuilder } from '@nextcloud/dialogs'
 import { ShareType } from '@nextcloud/sharing'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 import ShareExpiryTime from './ShareExpiryTime.vue'
 import SharingEntryQuickShareSelect from './SharingEntryQuickShareSelect.vue'
 import ShareDetails from '../mixins/ShareDetails.js'
 import SharesMixin from '../mixins/SharesMixin.js'
+import logger from '../services/logger.ts'
+import { openShareEditDialog } from '../services/SharingDialog.ts'
 
 export default {
 	name: 'SharingEntry',
 
 	components: {
 		NcButton,
 		NcAvatar,
+		DeleteIcon,
 		DotsHorizontalIcon,
+		PencilIcon,
 		NcSelect,
 		ShareExpiryTime,
 		SharingEntryQuickShareSelect,
@@ -128,6 +159,54 @@ export default {
 			return (typeof this.share.status === 'object' && !Array.isArray(this.share.status))
 		},
 	},
+
+	methods: {
+		/**
+		 * Open the unified sharing dialog to edit this share.
+		 */
+		async openEditDialog() {
+			try {
+				await openShareEditDialog(this.share.id, this.fileInfo.node)
+			} catch (error) {
+				logger.error('Failed to open the sharing dialog', { error })
+			}
+		},
+
+		/**
+		 * Ask for confirmation before deleting the share.
+		 */
+		async confirmDelete() {
+			let confirmed = false
+			const dialog = (new DialogBuilder())
+				.setName(t('files_sharing', 'Delete share'))
+				.setText(t('files_sharing', 'Are you sure you want to delete this share? This operation cannot be undone.'))
+				.setButtons([
+					{
+						label: t('files_sharing', 'Cancel'),
+						variant: 'secondary',
+						callback: () => {},
+					},
+					{
+						label: t('files_sharing', 'Delete'),
+						variant: 'error',
+						callback: () => {
+							confirmed = true
+						},
+					},
+				])
+				.build()
+
+			try {
+				await dialog.show()
+			} catch (error) {
+				logger.debug('Delete confirmation dialog closed', { error })
+			}
+
+			if (confirmed) {
+				this.onDelete()
+			}
+		},
+	},
 }
 </script>
 

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -21,7 +21,7 @@
 					{{ subtitle }}
 				</p>
 				<SharingEntryQuickShareSelect
-					v-if="share && share.permissions !== undefined"
+					v-if="share && share.permissions !== undefined && !config.sharingDialogEnabled"
 					:share="share"
 					:file-info="fileInfo"
 					@open-sharing-details="openShareDetailsForCustomSettings(share)" />
@@ -151,6 +151,7 @@
 			<template v-if="share">
 				<template v-if="share.canEdit && canReshare">
 					<NcActionButton
+						v-if="!config.sharingDialogEnabled"
 						:disabled="saving"
 						:close-after-click="true"
 						@click.prevent="openSharingDetails">
@@ -159,6 +160,16 @@
 						</template>
 						{{ t('files_sharing', 'Customize link') }}
 					</NcActionButton>
+					<NcActionButton
+						v-else
+						:disabled="saving"
+						:close-after-click="true"
+						@click.prevent="openEditDialog">
+						<template #icon>
+							<Tune :size="20" />
+						</template>
+						{{ t('files_sharing', 'Customize link') }}
+					</NcActionButton>
 				</template>
 
 				<NcActionButton
@@ -279,6 +290,7 @@ import ShareDetails from '../mixins/ShareDetails.js'
 import SharesMixin from '../mixins/SharesMixin.js'
 import Share from '../models/Share.ts'
 import logger from '../services/logger.ts'
+import { openShareEditDialog } from '../services/SharingDialog.ts'
 import GeneratePassword from '../utils/GeneratePassword.ts'
 
 export default {
@@ -599,6 +611,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Open the unified sharing dialog to edit this link share.
+		 */
+		async openEditDialog() {
+			try {
+				await openShareEditDialog(this.share.id, this.fileInfo.node)
+			} catch (error) {
+				logger.error('Failed to open the sharing dialog', { error })
+			}
+		},
+
 		/**
 		 * Check if the share requires review
 		 *
@@ -866,6 +889,7 @@ export default {
 		justify-content: space-between;
 		flex: 1 0;
 		min-width: 0;
+		align-items: center;
 	}
 
 		&__desc {

apps/files_sharing/src/services/ConfigService.ts

@@ -4,6 +4,7 @@
  */
 import { getCapabilities } from '@nextcloud/capabilities'
 import { loadState } from '@nextcloud/initial-state'
+import { isSharingDialogAvailable } from './SharingDialog.ts'
 
 type PasswordPolicySettings = {
 	enforceNonCommonPassword: boolean
@@ -354,4 +355,13 @@ export default class Config {
 	get showExternalSharing(): boolean {
 		return loadState('files_sharing', 'showExternalSharing', true)
 	}
+
+	/**
+	 * Whether the new unified sharing dialog replaces the legacy inline sharing UI.
+	 * Derived from the server capabilities: when the unified sharing API is not
+	 * advertised (capability empty), the legacy inputs and menus are used instead.
+	 */
+	get sharingDialogEnabled(): boolean {
+		return isSharingDialogAvailable()
+	}
 }

apps/files_sharing/src/services/SharingDialog.ts

@@ -0,0 +1,63 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Node } from '@nextcloud/files'
+
+import { getCapabilities } from '@nextcloud/capabilities'
+
+/**
+ * The unified sharing dialog is a Vue 3 component. It is registered on the
+ * global `OCA.Sharing` namespace by the Vue 3 bridge entry point
+ * (`sharing-dialog-bridge.ts`), so this Vue 2 frontend can trigger it without
+ * pulling Vue 3 into its bundle.
+ */
+type SharingDialogApi = {
+	openSharingDialog(node: Node): Promise<unknown>
+	openShareEditDialog(shareId: string | number, node?: Node): Promise<unknown>
+}
+
+/**
+ * Get the sharing dialog API registered by the Vue 3 bridge, if loaded.
+ */
+function sharingDialogApi(): SharingDialogApi | undefined {
+	return (window.OCA?.Sharing as Partial<SharingDialogApi> | undefined) as SharingDialogApi | undefined
+}
+
+/**
+ * Whether the server provides the unified sharing API this dialog talks to.
+ * Mirrors the library check so the sidebar can gate on it without importing
+ * the Vue 3 code.
+ */
+export function isSharingDialogAvailable(): boolean {
+	const capabilities = getCapabilities() as { sharing?: { api_versions?: unknown[] } }
+	return (capabilities.sharing?.api_versions?.length ?? 0) > 0
+}
+
+/**
+ * Open the unified sharing dialog to create a new share for a node.
+ *
+ * @param node The file or folder to share
+ */
+export function openShareCreateDialog(node: Node): Promise<unknown> {
+	const api = sharingDialogApi()
+	if (!api?.openSharingDialog) {
+		return Promise.reject(new Error('The unified sharing dialog is not available'))
+	}
+	return api.openSharingDialog(node)
+}
+
+/**
+ * Open the unified sharing dialog to edit an existing share.
+ *
+ * @param shareId The share id (mapped to the unified API by the legacy bridge)
+ * @param node The backing node, used for the dialog title
+ */
+export function openShareEditDialog(shareId: string | number, node?: Node): Promise<unknown> {
+	const api = sharingDialogApi()
+	if (!api?.openShareEditDialog) {
+		return Promise.reject(new Error('The unified sharing dialog is not available'))
+	}
+	return api.openShareEditDialog(shareId, node)
+}

apps/files_sharing/src/sharing-dialog-bridge.ts

@@ -0,0 +1,39 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Node } from '@nextcloud/files'
+
+import { getShare, isSharingDialogAvailable, openSharingDialog } from '@nextcloud/sharing/dialog'
+
+/**
+ * Bridge the Vue 3 unified sharing dialog into the global `OCA.Sharing`
+ * namespace so the (still Vue 2) files_sharing sidebar can trigger it without
+ * importing Vue 3 code into its bundle. The dialog spawns its own Vue 3 app,
+ * so it must be registered from this Vue 3 entry point where `vue` and
+ * `@nextcloud/vue` resolve to their Vue 3 versions.
+ *
+ * Once files_sharing is migrated to Vue 3 this bridge can be dropped and the
+ * library imported directly.
+ */
+
+window.OCA ??= {}
+window.OCA.Sharing ??= {}
+
+Object.assign(window.OCA.Sharing, {
+	openSharingDialog,
+
+	/**
+	 * Open the unified sharing dialog to edit an existing share.
+	 *
+	 * @param shareId The share id (mapped to the unified API by the legacy bridge)
+	 * @param node The backing node, used for the dialog title
+	 */
+	async openShareEditDialog(shareId: string | number, node?: Node): Promise<unknown> {
+		const share = await getShare(String(shareId))
+		return share.showDialog(node)
+	},
+
+	isSharingDialogAvailable,
+})