From eff2afea69667c7c44f2f9a11cee3bd7a548691c Mon Sep 17 00:00:00 2001
From: fenn-cs <fenn25.fn@gmail.com>
Date: Wed, 19 Jul 2023 02:11:27 +0100
Subject: [PATCH] Improve sharing flow

Resolves: https://github.com/nextcloud/server/issues/26691

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
---
 .../src/components/SharingEntry.vue           | 240 +----
 .../src/components/SharingEntryLink.vue       | 202 +---
 .../SharingEntryQuickShareSelect.vue          | 184 ++++
 .../src/components/SharingEntrySimple.vue     |   4 +-
 .../src/components/SharingInput.vue           |  10 +-
 .../src/lib/SharePermissionsToolBox.js        |   1 +
 apps/files_sharing/src/mixins/ShareDetails.js |  23 +
 .../files_sharing/src/mixins/ShareRequests.js |  18 +-
 apps/files_sharing/src/mixins/SharesMixin.js  |  26 +-
 apps/files_sharing/src/utils/SharedWithMe.js  |  10 +-
 .../src/views/SharingDetailsTab.vue           | 938 ++++++++++++++++++
 .../src/views/SharingLinkList.vue             |   6 +-
 apps/files_sharing/src/views/SharingList.vue  |  22 +-
 apps/files_sharing/src/views/SharingTab.vue   |  47 +-
 14 files changed, 1325 insertions(+), 406 deletions(-)
 create mode 100644 apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
 create mode 100644 apps/files_sharing/src/mixins/ShareDetails.js
 create mode 100644 apps/files_sharing/src/views/SharingDetailsTab.vue

diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
index 46b65c695eede..8e73f530e0919 100644
--- a/apps/files_sharing/src/components/SharingEntry.vue
+++ b/apps/files_sharing/src/components/SharingEntry.vue
@@ -29,139 +29,62 @@
 			:menu-position="'left'"
 			:url="share.shareWithAvatar" />
 
-		<component :is="share.shareWithLink ? 'a' : 'div'"
-			:title="tooltip"
-			:aria-label="tooltip"
-			:href="share.shareWithLink"
-			class="sharing-entry__desc">
-			<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
-			<p v-if="hasStatus">
-				<span>{{ share.status.icon || '' }}</span>
-				<span>{{ share.status.message || '' }}</span>
-			</p>
-		</component>
-		<NcActions menu-align="right"
-			class="sharing-entry__actions"
-			@close="onMenuClose">
-			<template v-if="share.canEdit">
-				<!-- edit permission -->
-				<NcActionCheckbox ref="canEdit"
-					:checked.sync="canEdit"
-					:value="permissionsEdit"
-					:disabled="saving || !canSetEdit">
-					{{ t('files_sharing', 'Allow editing') }}
-				</NcActionCheckbox>
-
-				<!-- create permission -->
-				<NcActionCheckbox v-if="isFolder"
-					ref="canCreate"
-					:checked.sync="canCreate"
-					:value="permissionsCreate"
-					:disabled="saving || !canSetCreate">
-					{{ t('files_sharing', 'Allow creating') }}
-				</NcActionCheckbox>
-
-				<!-- delete permission -->
-				<NcActionCheckbox v-if="isFolder"
-					ref="canDelete"
-					:checked.sync="canDelete"
-					:value="permissionsDelete"
-					:disabled="saving || !canSetDelete">
-					{{ t('files_sharing', 'Allow deleting') }}
-				</NcActionCheckbox>
-
-				<!-- reshare permission -->
-				<NcActionCheckbox v-if="config.isResharingAllowed"
-					ref="canReshare"
-					:checked.sync="canReshare"
-					:value="permissionsShare"
-					:disabled="saving || !canSetReshare">
-					{{ t('files_sharing', 'Allow resharing') }}
-				</NcActionCheckbox>
-
-				<NcActionCheckbox v-if="isSetDownloadButtonVisible"
-					ref="canDownload"
-					:checked.sync="canDownload"
-					:disabled="saving || !canSetDownload">
-					{{ allowDownloadText }}
-				</NcActionCheckbox>
-
-				<!-- expiration date -->
-				<NcActionCheckbox :checked.sync="hasExpirationDate"
-					:disabled="config.isDefaultInternalExpireDateEnforced || saving"
-					@uncheck="onExpirationDisable">
-					{{ config.isDefaultInternalExpireDateEnforced
-						? t('files_sharing', 'Expiration date enforced')
-						: t('files_sharing', 'Set expiration date') }}
-				</NcActionCheckbox>
-				<NcActionInput v-if="hasExpirationDate"
-					ref="expireDate"
-					:is-native-picker="true"
-					:hide-label="true"
-					:class="{ error: errors.expireDate}"
-					:disabled="saving"
-					:value="new Date(share.expireDate)"
-					type="date"
-					:min="dateTomorrow"
-					:max="dateMaxEnforced"
-					@input="onExpirationChange">
-					{{ t('files_sharing', 'Enter a date') }}
-				</NcActionInput>
-
-				<!-- note -->
-				<template v-if="canHaveNote">
-					<NcActionCheckbox :checked.sync="hasNote"
-						:disabled="saving"
-						@uncheck="queueUpdate('note')">
-						{{ t('files_sharing', 'Note to recipient') }}
-					</NcActionCheckbox>
-					<NcActionTextEditable v-if="hasNote"
-						ref="note"
-						:class="{ error: errors.note}"
-						:disabled="saving"
-						:value="share.newNote || share.note"
-						icon="icon-edit"
-						@update:value="onNoteChange"
-						@submit="onNoteSubmit" />
-				</template>
+		<div class="sharing-entry__summary" @click.prevent="toggleQuickShareSelect">
+			<component :is="share.shareWithLink ? 'a' : 'div'"
+				:title="tooltip"
+				:aria-label="tooltip"
+				:href="share.shareWithLink"
+				class="sharing-entry__desc">
+				<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{
+					share.shareWithDisplayNameUnique }})</span></span>
+				<p v-if="hasStatus">
+					<span>{{ share.status.icon || '' }}</span>
+					<span>{{ share.status.message || '' }}</span>
+				</p>
+			</component>
+			<QuickShareSelect :share="share"
+				:file-info="fileInfo"
+				:toggle="showDropdown"
+				@open-sharing-details="openShareDetailsForCustomSettings(share)" />
+		</div>
+		<NcButton class="sharing-entry__action"
+			:aria-label="t('files_sharing', 'Open Sharing Details')"
+			type="tertiary-no-background"
+			@click="openSharingDetails(share)">
+			<template #icon>
+				<DotsHorizontalIcon :size="20" />
 			</template>
-
-			<NcActionButton v-if="share.canDelete"
-				icon="icon-close"
-				:disabled="saving"
-				@click.prevent="onDelete">
-				{{ t('files_sharing', 'Unshare') }}
-			</NcActionButton>
-		</NcActions>
+		</NcButton>
 	</li>
 </template>
 
 <script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+
+import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
 import SharesMixin from '../mixins/SharesMixin.js'
+import ShareDetails from '../mixins/ShareDetails.js'
 
 export default {
 	name: 'SharingEntry',
 
 	components: {
-		NcActions,
-		NcActionButton,
-		NcActionCheckbox,
-		NcActionInput,
-		NcActionTextEditable,
+		NcButton,
 		NcAvatar,
+		DotsHorizontalIcon,
+		NcSelect,
+		QuickShareSelect,
 	},
 
-	mixins: [SharesMixin],
+	mixins: [SharesMixin, ShareDetails],
 
 	data() {
 		return {
+			showDropdown: false,
 			permissionsEdit: OC.PERMISSION_UPDATE,
 			permissionsCreate: OC.PERMISSION_CREATE,
 			permissionsDelete: OC.PERMISSION_DELETE,
@@ -205,76 +128,6 @@ export default {
 			}
 			return null
 		},
-
-		canHaveNote() {
-			return !this.isRemote
-		},
-
-		isRemote() {
-			return this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE
-				|| this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP
-		},
-
-		/**
-		 * Can the sharer set whether the sharee can edit the file ?
-		 *
-		 * @return {boolean}
-		 */
-		canSetEdit() {
-			// If the owner revoked the permission after the resharer granted it
-			// the share still has the permission, and the resharer is still
-			// allowed to revoke it too (but not to grant it again).
-			return (this.fileInfo.sharePermissions & OC.PERMISSION_UPDATE) || this.canEdit
-		},
-
-		/**
-		 * Can the sharer set whether the sharee can create the file ?
-		 *
-		 * @return {boolean}
-		 */
-		canSetCreate() {
-			// If the owner revoked the permission after the resharer granted it
-			// the share still has the permission, and the resharer is still
-			// allowed to revoke it too (but not to grant it again).
-			return (this.fileInfo.sharePermissions & OC.PERMISSION_CREATE) || this.canCreate
-		},
-
-		/**
-		 * Can the sharer set whether the sharee can delete the file ?
-		 *
-		 * @return {boolean}
-		 */
-		canSetDelete() {
-			// If the owner revoked the permission after the resharer granted it
-			// the share still has the permission, and the resharer is still
-			// allowed to revoke it too (but not to grant it again).
-			return (this.fileInfo.sharePermissions & OC.PERMISSION_DELETE) || this.canDelete
-		},
-
-		/**
-		 * Can the sharer set whether the sharee can reshare the file ?
-		 *
-		 * @return {boolean}
-		 */
-		canSetReshare() {
-			// If the owner revoked the permission after the resharer granted it
-			// the share still has the permission, and the resharer is still
-			// allowed to revoke it too (but not to grant it again).
-			return (this.fileInfo.sharePermissions & OC.PERMISSION_SHARE) || this.canReshare
-		},
-
-		/**
-		 * Can the sharer set whether the sharee can download the file ?
-		 *
-		 * @return {boolean}
-		 */
-		canSetDownload() {
-			// If the owner revoked the permission after the resharer granted it
-			// the share still has the permission, and the resharer is still
-			// allowed to revoke it too (but not to grant it again).
-			return (this.fileInfo.canDownload() || this.canDownload)
-		},
-
 		/**
 		 * Can the sharee edit the shared file ?
 		 */
@@ -449,13 +302,15 @@ export default {
 			}
 			this.queueUpdate('permissions', 'attributes')
 		},
-
 		/**
 		 * Save potential changed data on menu close
 		 */
 		onMenuClose() {
 			this.onNoteSubmit()
 		},
+		toggleQuickShareSelect() {
+			this.showDropdown = !this.showDropdown
+		},
 	},
 }
 </script>
@@ -465,21 +320,34 @@ export default {
 	display: flex;
 	align-items: center;
 	height: 44px;
+
 	&__desc {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-		padding: 8px;
+		padding-bottom: 0;
 		line-height: 1.2em;
+
 		p {
 			color: var(--color-text-maxcontrast);
 		}
+
 		&-unique {
 			color: var(--color-text-maxcontrast);
 		}
 	}
+
 	&__actions {
 		margin-left: auto;
 	}
+
+	&__summary {
+		padding: 8px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		width: 100%;
+	}
+
 }
 </style>
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index 06c9cb708510f..62b6a2e54fa12 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -25,13 +25,18 @@
 		<NcAvatar :is-no-user="true"
 			:icon-class="isEmailShareType ? 'avatar-link-share icon-mail-white' : 'avatar-link-share icon-public-white'"
 			class="sharing-entry__avatar" />
-		<div class="sharing-entry__desc">
+		<div class="sharing-entry__desc" @click.prevent="toggleQuickShareSelect">
 			<span class="sharing-entry__title" :title="title">
 				{{ title }}
 			</span>
 			<p v-if="subtitle">
 				{{ subtitle }}
 			</p>
+			<QuickShareSelect v-if="share"
+				:share="share"
+				:file-info="fileInfo"
+				:toggle="showDropdown"
+				@open-sharing-details="openShareDetailsForCustomSettings(share)" />
 		</div>
 
 		<!-- clipboard -->
@@ -63,30 +68,6 @@
 				{{ t('files_sharing', 'Please enter the following required information before creating the share') }}
 			</NcActionText>
 
-			<!-- password -->
-			<NcActionText v-if="pendingEnforcedPassword" icon="icon-password">
-				{{ t('files_sharing', 'Password protection (enforced)') }}
-			</NcActionText>
-			<NcActionCheckbox v-else-if="pendingPassword"
-				:checked.sync="isPasswordProtected"
-				:disabled="config.enforcePasswordForPublicLink || saving"
-				class="share-link-password-checkbox"
-				@uncheck="onPasswordDisable">
-				{{ t('files_sharing', 'Password protection') }}
-			</NcActionCheckbox>
-
-			<NcActionInput v-if="pendingEnforcedPassword || share.password"
-				class="share-link-password"
-				:value.sync="share.password"
-				:disabled="saving"
-				:required="config.enableLinkPasswordByDefault || config.enforcePasswordForPublicLink"
-				:minlength="isPasswordPolicyEnabled && config.passwordPolicy.minLength"
-				icon=""
-				autocomplete="new-password"
-				@submit="onNewLinkShare">
-				{{ t('files_sharing', 'Enter a password') }}
-			</NcActionInput>
-
 			<!-- expiration date -->
 			<NcActionText v-if="pendingExpirationDate" icon="icon-calendar-dark">
 				{{ t('files_sharing', 'Expiration date (enforced)') }}
@@ -123,110 +104,13 @@
 			@close="onMenuClose">
 			<template v-if="share">
 				<template v-if="share.canEdit && canReshare">
-					<!-- Custom Label -->
-					<NcActionInput ref="label"
-						:class="{ error: errors.label }"
-						:disabled="saving"
-						:label="t('files_sharing', 'Share label')"
-						:value="share.newLabel !== undefined ? share.newLabel : share.label"
-						icon="icon-edit"
-						maxlength="255"
-						@update:value="onLabelChange"
-						@submit="onLabelSubmit" />
-
-					<SharePermissionsEditor :can-reshare="canReshare"
-						:share.sync="share"
-						:file-info="fileInfo" />
-
-					<NcActionSeparator />
-
-					<NcActionCheckbox :checked.sync="share.hideDownload"
-						:disabled="saving || canChangeHideDownload"
-						@change="queueUpdate('hideDownload')">
-						{{ t('files_sharing', 'Hide download') }}
-					</NcActionCheckbox>
-
-					<!-- password -->
-					<NcActionCheckbox :checked.sync="isPasswordProtected"
-						:disabled="config.enforcePasswordForPublicLink || saving"
-						class="share-link-password-checkbox"
-						@uncheck="onPasswordDisable">
-						{{ config.enforcePasswordForPublicLink
-							? t('files_sharing', 'Password protection (enforced)')
-							: t('files_sharing', 'Password protect') }}
-					</NcActionCheckbox>
-
-					<NcActionInput v-if="isPasswordProtected"
-						ref="password"
-						class="share-link-password"
-						:class="{ error: errors.password}"
-						:disabled="saving"
-						:show-trailing-button="hasUnsavedPassword"
-						:required="config.enforcePasswordForPublicLink"
-						:value="hasUnsavedPassword ? share.newPassword : '***************'"
-						icon="icon-password"
-						autocomplete="new-password"
-						:type="hasUnsavedPassword ? 'text': 'password'"
-						@update:value="onPasswordChange"
-						@submit="onPasswordSubmit">
-						{{ t('files_sharing', 'Enter a password') }}
-					</NcActionInput>
-					<NcActionText v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
-						{{ t('files_sharing', 'Password expires {passwordExpirationTime}', {passwordExpirationTime}) }}
-					</NcActionText>
-					<NcActionText v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
-						{{ t('files_sharing', 'Password expired') }}
-					</NcActionText>
-
-					<!-- password protected by Talk -->
-					<NcActionCheckbox v-if="isPasswordProtectedByTalkAvailable"
-						:checked.sync="isPasswordProtectedByTalk"
-						:disabled="!canTogglePasswordProtectedByTalkAvailable || saving"
-						class="share-link-password-talk-checkbox"
-						@change="onPasswordProtectedByTalkChange">
-						{{ t('files_sharing', 'Video verification') }}
-					</NcActionCheckbox>
-
-					<!-- expiration date -->
-					<NcActionCheckbox :checked.sync="hasExpirationDate"
-						:disabled="config.isDefaultExpireDateEnforced || saving"
-						class="share-link-expire-date-checkbox"
-						@uncheck="onExpirationDisable">
-						{{ config.isDefaultExpireDateEnforced
-							? t('files_sharing', 'Expiration date (enforced)')
-							: t('files_sharing', 'Set expiration date') }}
-					</NcActionCheckbox>
-					<NcActionInput v-if="hasExpirationDate"
-						ref="expireDate"
-						:is-native-picker="true"
-						:hide-label="true"
-						class="share-link-expire-date"
-						:class="{ error: errors.expireDate}"
-						:disabled="saving"
-						:value="new Date(share.expireDate)"
-						type="date"
-						:min="dateTomorrow"
-						:max="dateMaxEnforced"
-						@input="onExpirationChange">
-						{{ t('files_sharing', 'Enter a date') }}
-					</NcActionInput>
-
-					<!-- note -->
-					<NcActionCheckbox :checked.sync="hasNote"
-						:disabled="saving"
-						@uncheck="queueUpdate('note')">
-						{{ t('files_sharing', 'Note to recipient') }}
-					</NcActionCheckbox>
-
-					<NcActionTextEditable v-if="hasNote"
-						ref="note"
-						:class="{ error: errors.note}"
-						:disabled="saving"
-						:placeholder="t('files_sharing', 'Enter a note for the share recipient')"
-						:value="share.newNote || share.note"
-						icon="icon-edit"
-						@update:value="onNoteChange"
-						@submit="onNoteSubmit" />
+					<NcActionButton :disabled="saving"
+						@click.prevent="openSharingDetails">
+						<template #icon>
+							<Tune />
+						</template>
+						{{ t('files_sharing', 'Customize link') }}
+					</NcActionButton>
 				</template>
 
 				<NcActionSeparator />
@@ -248,18 +132,19 @@
 					{{ name }}
 				</NcActionLink>
 
-				<NcActionButton v-if="share.canDelete"
-					icon="icon-close"
-					:disabled="saving"
-					@click.prevent="onDelete">
-					{{ t('files_sharing', 'Unshare') }}
-				</NcActionButton>
 				<NcActionButton v-if="!isEmailShareType && canReshare"
 					class="new-share-link"
 					icon="icon-add"
 					@click.prevent.stop="onNewLinkShare">
 					{{ t('files_sharing', 'Add another link') }}
 				</NcActionButton>
+
+				<NcActionButton v-if="share.canDelete"
+					icon="icon-close"
+					:disabled="saving"
+					@click.prevent="onDelete">
+					{{ t('files_sharing', 'Unshare') }}
+				</NcActionButton>
 			</template>
 
 			<!-- Create new share -->
@@ -283,39 +168,40 @@ import { Type as ShareTypes } from '@nextcloud/sharing'
 import Vue from 'vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
 import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
-import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
+import Tune from 'vue-material-design-icons/Tune.vue'
+
+import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
+
 import ExternalShareAction from './ExternalShareAction.vue'
-import SharePermissionsEditor from './SharePermissionsEditor.vue'
 import GeneratePassword from '../utils/GeneratePassword.js'
 import Share from '../models/Share.js'
 import SharesMixin from '../mixins/SharesMixin.js'
+import ShareDetails from '../mixins/ShareDetails.js'
 
 export default {
 	name: 'SharingEntryLink',
 
 	components: {
+		ExternalShareAction,
 		NcActions,
 		NcActionButton,
-		NcActionCheckbox,
 		NcActionInput,
 		NcActionLink,
 		NcActionText,
-		NcActionTextEditable,
 		NcActionSeparator,
 		NcAvatar,
-		ExternalShareAction,
-		SharePermissionsEditor,
+		Tune,
+		QuickShareSelect,
 	},
 
-	mixins: [SharesMixin],
+	mixins: [SharesMixin, ShareDetails],
 
 	props: {
 		canReshare: {
@@ -330,6 +216,7 @@ export default {
 
 	data() {
 		return {
+			showDropdown: false,
 			copySuccess: true,
 			copied: false,
 
@@ -593,7 +480,6 @@ export default {
 
 		canChangeHideDownload() {
 			const hasDisabledDownload = (shareAttribute) => shareAttribute.key === 'download' && shareAttribute.scope === 'permissions' && shareAttribute.enabled === false
-
 			return this.fileInfo.shareAttributes.some(hasDisabledDownload)
 		},
 	},
@@ -671,7 +557,7 @@ export default {
 		 * accordingly
 		 *
 		 * @param {Share} share the new share
-		 * @param {boolean} [update=false] do we update the current share ?
+		 * @param {boolean} [update] do we update the current share ?
 		 */
 		async pushNewLinkShare(share, update) {
 			try {
@@ -748,26 +634,6 @@ export default {
 				this.loading = false
 			}
 		},
-
-		/**
-		 * Label changed, let's save it to a different key
-		 *
-		 * @param {string} label the share label
-		 */
-		onLabelChange(label) {
-			this.$set(this.share, 'newLabel', label.trim())
-		},
-
-		/**
-		 * When the note change, we trim, save and dispatch
-		 */
-		onLabelSubmit() {
-			if (typeof this.share.newLabel === 'string') {
-				this.share.label = this.share.newLabel
-				this.$delete(this.share, 'newLabel')
-				this.queueUpdate('label')
-			}
-		},
 		async copyLink() {
 			try {
 				await navigator.clipboard.writeText(this.shareLink)
@@ -870,6 +736,10 @@ export default {
 			// YET. We can safely delete the share :)
 			this.$emit('remove:share', this.share)
 		},
+
+		toggleQuickShareSelect() {
+			this.showDropdown = !this.showDropdown
+		},
 	},
 }
 </script>
@@ -879,13 +749,13 @@ export default {
 	display: flex;
 	align-items: center;
 	min-height: 44px;
+
 	&__desc {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		padding: 8px;
 		line-height: 1.2em;
-		overflow: hidden;
 
 		p {
 			color: var(--color-text-maxcontrast);
diff --git a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
new file mode 100644
index 0000000000000..c76f4a51e44ee
--- /dev/null
+++ b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
@@ -0,0 +1,184 @@
+<template>
+	<div :class="{ 'active': showDropdown, 'share-select': true }">
+		<span class="trigger-text" @click="toggleDropdown">
+			{{ selectedOption }}
+			<DropdownIcon :size="15" />
+		</span>
+		<div v-if="showDropdown" class="share-select-dropdown-container">
+			<div v-for="option in options"
+				:key="option"
+				:class="{ 'dropdown-item': true, 'selected': option === selectedOption }"
+				@click="selectOption(option)">
+				{{ option }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import DropdownIcon from 'vue-material-design-icons/TriangleSmallDown.vue'
+import SharesMixin from '../mixins/SharesMixin.js'
+import ShareDetails from '../mixins/ShareDetails.js'
+import ShareTypes from '../mixins/ShareTypes.js'
+
+import {
+	BUNDLED_PERMISSIONS,
+} from '../lib/SharePermissionsToolBox.js'
+
+export default {
+	components: {
+		DropdownIcon,
+	},
+	mixins: [SharesMixin, ShareDetails, ShareTypes],
+	props: {
+		share: {
+			type: Object,
+			required: true,
+		},
+		toggle: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			selectedOption: '',
+			showDropdown: this.toggle,
+		}
+	},
+	computed: {
+		canViewText() {
+			return t('files_sharing', 'View only')
+		},
+		canEditText() {
+			return t('files_sharing', 'Can edit')
+		},
+		fileDropText() {
+			return t('files_sharing', 'File drop')
+		},
+		customPermissionsText() {
+			return t('files_sharing', 'Custom permissions')
+		},
+		preSelectedOption() {
+			if (this.share.permissions === BUNDLED_PERMISSIONS.READ_ONLY) {
+				return this.canViewText
+			} else if (this.share.permissions === BUNDLED_PERMISSIONS.ALL || this.share.permissions === BUNDLED_PERMISSIONS.ALL_MINUS_CREATE_AND_DELETE) {
+				return this.canEditText
+			} else if (this.share.permissions === BUNDLED_PERMISSIONS.FILE_DROP) {
+				return this.fileDropText
+			}
+
+			return this.customPermissionsText
+
+		},
+		options() {
+			const options = [this.canViewText, this.canEditText]
+			if (this.supportsFileDrop) {
+				options.push(this.fileDropText)
+			}
+			options.push(this.customPermissionsText)
+
+			return options
+		},
+		supportsFileDrop() {
+			if (this.isFolder) {
+				const shareType = this.share.type ?? this.share.shareType
+				return [this.SHARE_TYPES.SHARE_TYPE_LINK, this.SHARE_TYPES.SHARE_TYPE_EMAIL].includes(shareType)
+			}
+			return false
+		},
+		dropDownPermissionValue() {
+			switch (this.selectedOption) {
+			case this.canEditText:
+				return this.isFolder ? BUNDLED_PERMISSIONS.ALL : BUNDLED_PERMISSIONS.ALL_MINUS_CREATE_AND_DELETE
+			case this.fileDropText:
+				return BUNDLED_PERMISSIONS.FILE_DROP
+			case this.customPermissionsText:
+				return 'custom'
+			case this.canViewText:
+			default:
+				return BUNDLED_PERMISSIONS.READ_ONLY
+			}
+		},
+	},
+	watch: {
+		toggle(toggleValue) {
+			this.showDropdown = toggleValue
+		},
+	},
+	mounted() {
+		this.initializeComponent()
+	},
+	methods: {
+		toggleDropdown() {
+			this.showDropdown = !this.showDropdown
+		},
+		selectOption(option) {
+			this.selectedOption = option
+			if (option === this.customPermissionsText) {
+				this.$emit('open-sharing-details')
+			} else {
+				this.share.permissions = this.dropDownPermissionValue
+				this.queueUpdate('permissions')
+			}
+			this.showDropdown = false
+		},
+		initializeComponent() {
+			this.selectedOption = this.preSelectedOption
+		},
+	},
+
+}
+</script>
+
+<style lang="scss" scoped>
+.share-select {
+	position: relative;
+	cursor: pointer;
+
+	.trigger-text {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		font-size: 12.5px;
+		gap: 2px;
+		color: var(--color-primary-element);
+	}
+
+	.share-select-dropdown-container {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		background-color: var(--color-main-background);
+		border-radius: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+		padding: 4px 0;
+		z-index: 1;
+
+		.dropdown-item {
+			padding: 8px;
+			font-size: 12px;
+
+			&:hover {
+				background-color: #f2f2f2;
+			}
+
+			&.selected {
+				background-color: #f0f0f0;
+			}
+		}
+	}
+
+	/* Optional: Add a transition effect for smoother dropdown animation */
+	.share-select-dropdown-container {
+		max-height: 0;
+		overflow: hidden;
+		transition: max-height 0.3s ease;
+	}
+
+	&.active .share-select-dropdown-container {
+		max-height: 200px;
+		/* Adjust the value to your desired height */
+	}
+}
+</style>
diff --git a/apps/files_sharing/src/components/SharingEntrySimple.vue b/apps/files_sharing/src/components/SharingEntrySimple.vue
index daff947fe803b..5e858de990b44 100644
--- a/apps/files_sharing/src/components/SharingEntrySimple.vue
+++ b/apps/files_sharing/src/components/SharingEntrySimple.vue
@@ -29,8 +29,8 @@
 				{{ subtitle }}
 			</p>
 		</div>
-		<NcActions ref="actionsComponent"
-			v-if="$slots['default']"
+		<NcActions v-if="$slots['default']"
+			ref="actionsComponent"
 			class="sharing-entry__actions"
 			menu-align="right"
 			:aria-expanded="ariaExpandedValue">
diff --git a/apps/files_sharing/src/components/SharingInput.vue b/apps/files_sharing/src/components/SharingInput.vue
index 8b740c1bac3b4..c5ed27477b677 100644
--- a/apps/files_sharing/src/components/SharingInput.vue
+++ b/apps/files_sharing/src/components/SharingInput.vue
@@ -24,6 +24,7 @@
 	<div class="sharing-search">
 		<label for="sharing-search-input">{{ t('files_sharing', 'Search for share recipients') }}</label>
 		<NcSelect ref="select"
+			v-model="value"
 			input-id="sharing-search-input"
 			class="sharing-search__input"
 			:disabled="!canReshare"
@@ -33,10 +34,9 @@
 			:clear-search-on-blur="() => false"
 			:user-select="true"
 			:options="options"
-			v-model="value"
 			@open="handleOpen"
 			@search="asyncFind"
-			@option:selected="addShare">
+			@option:selected="openSharingDetails">
 			<template #no-options="{ search }">
 				{{ search ? noResultText : t('files_sharing', 'No recommendations. Start typing.') }}
 			</template>
@@ -57,6 +57,7 @@ import GeneratePassword from '../utils/GeneratePassword.js'
 import Share from '../models/Share.js'
 import ShareRequests from '../mixins/ShareRequests.js'
 import ShareTypes from '../mixins/ShareTypes.js'
+import ShareDetails from '../mixins/ShareDetails.js'
 
 export default {
 	name: 'SharingInput',
@@ -65,7 +66,7 @@ export default {
 		NcSelect,
 	},
 
-	mixins: [ShareTypes, ShareRequests],
+	mixins: [ShareTypes, ShareRequests, ShareDetails],
 
 	props: {
 		shares: {
@@ -176,7 +177,7 @@ export default {
 		 * Get suggestions
 		 *
 		 * @param {string} search the search query
-		 * @param {boolean} [lookup=false] search on lookup server
+		 * @param {boolean} [lookup] search on lookup server
 		 */
 		async getSuggestions(search, lookup = false) {
 			this.loading = true
@@ -452,7 +453,6 @@ export default {
 			}
 
 			return {
-				id: `${result.value.shareType}-${result.value.shareWith}`,
 				shareWith: result.value.shareWith,
 				shareType: result.value.shareType,
 				user: result.uuid || result.value.shareWith,
diff --git a/apps/files_sharing/src/lib/SharePermissionsToolBox.js b/apps/files_sharing/src/lib/SharePermissionsToolBox.js
index f5806df70bf13..d9736037649f6 100644
--- a/apps/files_sharing/src/lib/SharePermissionsToolBox.js
+++ b/apps/files_sharing/src/lib/SharePermissionsToolBox.js
@@ -34,6 +34,7 @@ export const BUNDLED_PERMISSIONS = {
 	UPLOAD_AND_UPDATE: ATOMIC_PERMISSIONS.READ | ATOMIC_PERMISSIONS.UPDATE | ATOMIC_PERMISSIONS.CREATE | ATOMIC_PERMISSIONS.DELETE,
 	FILE_DROP: ATOMIC_PERMISSIONS.CREATE,
 	ALL: ATOMIC_PERMISSIONS.UPDATE | ATOMIC_PERMISSIONS.CREATE | ATOMIC_PERMISSIONS.READ | ATOMIC_PERMISSIONS.DELETE | ATOMIC_PERMISSIONS.SHARE,
+	ALL_MINUS_CREATE_AND_DELETE: ATOMIC_PERMISSIONS.UPDATE | ATOMIC_PERMISSIONS.READ | ATOMIC_PERMISSIONS.SHARE,
 }
 
 /**
diff --git a/apps/files_sharing/src/mixins/ShareDetails.js b/apps/files_sharing/src/mixins/ShareDetails.js
new file mode 100644
index 0000000000000..329344c54e063
--- /dev/null
+++ b/apps/files_sharing/src/mixins/ShareDetails.js
@@ -0,0 +1,23 @@
+export default {
+	methods: {
+		openSharingDetails(share) {
+			const shareRequestObject = {
+				fileInfo: this.fileInfo,
+				share: this.mapShareRequestToShareObject(share),
+			}
+			this.$emit('open-sharing-details', shareRequestObject)
+		},
+		openShareDetailsForCustomSettings(share) {
+			share.setCustomPermissions = true
+			this.openSharingDetails(share)
+		},
+		mapShareRequestToShareObject(shareRequestObject) {
+			if (shareRequestObject.id) {
+				return shareRequestObject
+			}
+			shareRequestObject.shareWithDisplayName = shareRequestObject.displayName
+
+			return shareRequestObject
+		},
+	},
+}
diff --git a/apps/files_sharing/src/mixins/ShareRequests.js b/apps/files_sharing/src/mixins/ShareRequests.js
index e1d246b740016..72c180f50b660 100644
--- a/apps/files_sharing/src/mixins/ShareRequests.js
+++ b/apps/files_sharing/src/mixins/ShareRequests.js
@@ -42,13 +42,13 @@ export default {
 		 * @param {string} data.path  path to the file/folder which should be shared
 		 * @param {number} data.shareType  0 = user; 1 = group; 3 = public link; 6 = federated cloud share
 		 * @param {string} data.shareWith  user/group id with which the file should be shared (optional for shareType > 1)
-		 * @param {boolean} [data.publicUpload=false]  allow public upload to a public shared folder
+		 * @param {boolean} [data.publicUpload]  allow public upload to a public shared folder
 		 * @param {string} [data.password]  password to protect public link Share with
-		 * @param {number} [data.permissions=31]  1 = read; 2 = update; 4 = create; 8 = delete; 16 = share; 31 = all (default: 31, for public shares: 1)
-		 * @param {boolean} [data.sendPasswordByTalk=false] send the password via a talk conversation
-		 * @param {string} [data.expireDate=''] expire the shareautomatically after
-		 * @param {string} [data.label=''] custom label
-		 * @param {string} [data.attributes=null] Share attributes encoded as json
+		 * @param {number} [data.permissions]  1 = read; 2 = update; 4 = create; 8 = delete; 16 = share; 31 = all (default: 31, for public shares: 1)
+		 * @param {boolean} [data.sendPasswordByTalk] send the password via a talk conversation
+		 * @param {string} [data.expireDate] expire the shareautomatically after
+		 * @param {string} [data.label] custom label
+		 * @param {string} [data.attributes] Share attributes encoded as json
 		 * @return {Share} the new share
 		 * @throws {Error}
 		 */
@@ -66,7 +66,7 @@ export default {
 				const errorMessage = error?.response?.data?.ocs?.meta?.message
 				OC.Notification.showTemporary(
 					errorMessage ? t('files_sharing', 'Error creating the share: {errorMessage}', { errorMessage }) : t('files_sharing', 'Error creating the share'),
-					{ type: 'error' }
+					{ type: 'error' },
 				)
 				throw error
 			}
@@ -91,7 +91,7 @@ export default {
 				const errorMessage = error?.response?.data?.ocs?.meta?.message
 				OC.Notification.showTemporary(
 					errorMessage ? t('files_sharing', 'Error deleting the share: {errorMessage}', { errorMessage }) : t('files_sharing', 'Error deleting the share'),
-					{ type: 'error' }
+					{ type: 'error' },
 				)
 				throw error
 			}
@@ -118,7 +118,7 @@ export default {
 					const errorMessage = error?.response?.data?.ocs?.meta?.message
 					OC.Notification.showTemporary(
 						errorMessage ? t('files_sharing', 'Error updating the share: {errorMessage}', { errorMessage }) : t('files_sharing', 'Error updating the share'),
-						{ type: 'error' }
+						{ type: 'error' },
 					)
 				}
 				const message = error.response.data.ocs.meta.message
diff --git a/apps/files_sharing/src/mixins/SharesMixin.js b/apps/files_sharing/src/mixins/SharesMixin.js
index a29e1a91b020d..9c7ce7bceea96 100644
--- a/apps/files_sharing/src/mixins/SharesMixin.js
+++ b/apps/files_sharing/src/mixins/SharesMixin.js
@@ -36,13 +36,17 @@ import SharesRequests from './ShareRequests.js'
 import ShareTypes from './ShareTypes.js'
 import Config from '../services/ConfigService.js'
 
+import {
+	BUNDLED_PERMISSIONS,
+} from '../lib/SharePermissionsToolBox.js'
+
 export default {
 	mixins: [SharesRequests, ShareTypes],
 
 	props: {
 		fileInfo: {
 			type: Object,
-			default: () => {},
+			default: () => { },
 			required: true,
 		},
 		share: {
@@ -121,11 +125,24 @@ export default {
 				monthFormat: 'MMM',
 			}
 		},
-
+		isFolder() {
+			return this.fileInfo.type === 'dir'
+		},
+		isPublicShare() {
+			const shareType = this.share.shareType ?? this.share.type
+			return [this.SHARE_TYPES.SHARE_TYPE_LINK, this.SHARE_TYPES.SHARE_TYPE_EMAIL].includes(shareType)
+		},
 		isShareOwner() {
 			return this.share && this.share.owner === getCurrentUser().uid
 		},
-
+		hasCustomPermissions() {
+			const bundledPermissions = [
+				BUNDLED_PERMISSIONS.ALL,
+				BUNDLED_PERMISSIONS.READ_ONLY,
+				BUNDLED_PERMISSIONS.FILE_DROP,
+			]
+			return !bundledPermissions.includes(this.share.permissions)
+		},
 	},
 
 	methods: {
@@ -180,7 +197,7 @@ export default {
 		 * @param {Date} date
 		 */
 		onExpirationChange(date) {
-			this.share.expireDate = this.formatDateToString(date)
+			this.share.expireDate = this.formatDateToString(new Date(date))
 			this.queueUpdate('expireDate')
 		},
 
@@ -335,7 +352,6 @@ export default {
 			}
 			}
 		},
-
 		/**
 		 * Debounce queueUpdate to avoid requests spamming
 		 * more importantly for text data
diff --git a/apps/files_sharing/src/utils/SharedWithMe.js b/apps/files_sharing/src/utils/SharedWithMe.js
index bd39c765221bf..34de3f017efc8 100644
--- a/apps/files_sharing/src/utils/SharedWithMe.js
+++ b/apps/files_sharing/src/utils/SharedWithMe.js
@@ -33,7 +33,7 @@ const shareWithTitle = function(share) {
 				owner: share.ownerDisplayName,
 			},
 			undefined,
-			{ escape: false }
+			{ escape: false },
 		)
 	} else if (share.type === ShareTypes.SHARE_TYPE_CIRCLE) {
 		return t(
@@ -44,7 +44,7 @@ const shareWithTitle = function(share) {
 				owner: share.ownerDisplayName,
 			},
 			undefined,
-			{ escape: false }
+			{ escape: false },
 		)
 	} else if (share.type === ShareTypes.SHARE_TYPE_ROOM) {
 		if (share.shareWithDisplayName) {
@@ -56,7 +56,7 @@ const shareWithTitle = function(share) {
 					owner: share.ownerDisplayName,
 				},
 				undefined,
-				{ escape: false }
+				{ escape: false },
 			)
 		} else {
 			return t(
@@ -66,7 +66,7 @@ const shareWithTitle = function(share) {
 					owner: share.ownerDisplayName,
 				},
 				undefined,
-				{ escape: false }
+				{ escape: false },
 			)
 		}
 	} else {
@@ -75,7 +75,7 @@ const shareWithTitle = function(share) {
 			'Shared with you by {owner}',
 			{ owner: share.ownerDisplayName },
 			undefined,
-			{ escape: false }
+			{ escape: false },
 		)
 	}
 }
diff --git a/apps/files_sharing/src/views/SharingDetailsTab.vue b/apps/files_sharing/src/views/SharingDetailsTab.vue
new file mode 100644
index 0000000000000..f75dfc0a4f877
--- /dev/null
+++ b/apps/files_sharing/src/views/SharingDetailsTab.vue
@@ -0,0 +1,938 @@
+<template>
+	<div class="sharingTabDetailsView">
+		<div class="sharingTabDetailsView__header">
+			<span>
+				<NcAvatar v-if="typeShareIsUser"
+					class="sharing-entry__avatar"
+					:is-no-user="share.shareType !== SHARE_TYPES.SHARE_TYPE_USER"
+					:user="share.shareWith"
+					:display-name="share.shareWithDisplayName"
+					:menu-position="'left'"
+					:url="share.shareWithAvatar" />
+				<component :is="getShareTypeIcon(share.type)" :size="32" />
+			</span>
+			<span>
+				<h1>{{ title }}</h1>
+			</span>
+		</div>
+		<div class="sharingTabDetailsView__quick-permissions">
+			<div>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					:value="bundledPermissions.READ_ONLY.toString()"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical"
+					@update:checked="toggleCustomPermissions">
+					{{ t('files_sharing', 'View only') }}
+					<template #icon>
+						<ViewIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					:value="bundledPermissions.ALL.toString()"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical"
+					@update:checked="toggleCustomPermissions">
+					{{ t('files_sharing', 'Allow upload and editing') }}
+					<template #icon>
+						<EditIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch v-if="allowsFileDrop"
+					:button-variant="true"
+					:checked.sync="sharingPermission"
+					:value="bundledPermissions.FILE_DROP.toString()"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical"
+					@update:checked="toggleCustomPermissions">
+					{{ t('files_sharing', 'File drop') }}
+					<small>{{ t('files_sharing', 'Upload only') }}</small>
+					<template #icon>
+						<UploadIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					:value="'custom'"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical"
+					@update:checked="toggleCustomPermissions">
+					{{ t('files_sharing', 'Custom permissions') }}
+					<small>{{ t('files_sharing', customPermissionsList) }}</small>
+					<template #icon>
+						<DotsHorizontalIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+			</div>
+		</div>
+		<div class="sharingTabDetailsView__advanced-control">
+			<NcButton type="tertiary"
+				alignment="end-reverse"
+				@click="advancedSectionAccordionExpanded = !advancedSectionAccordionExpanded">
+				{{ t('files_sharing', 'Advanced settings') }}
+				<template #icon>
+					<MenuDownIcon />
+				</template>
+			</NcButton>
+		</div>
+		<div v-if="advancedSectionAccordionExpanded" class="sharingTabDetailsView__advanced">
+			<section>
+				<NcInputField :value.sync="share.label" type="text" :label="t('file_sharing', 'Share label')" />
+				<template v-if="isPublicShare">
+					<NcCheckboxRadioSwitch :checked.sync="setPasswordIsChecked">
+						{{ t('file_sharing', 'Set password') }}
+					</NcCheckboxRadioSwitch>
+					<NcInputField v-if="setPasswordIsChecked"
+						:type="hasUnsavedPassword ? 'text' : 'password'"
+						:value.sync="share.password"
+						:label="t('file_sharing', 'Password')"
+						@update:value="onPasswordChange" />
+
+					<!-- Migrate icons and remote -> icon="icon-info"-->
+					<span v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
+						{{ t('files_sharing', 'Password expires {passwordExpirationTime}', { passwordExpirationTime }) }}
+					</span>
+					<span v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
+						{{ t('files_sharing', 'Password expired') }}
+					</span>
+				</template>
+				<NcCheckboxRadioSwitch :checked.sync="hasExpirationDate">
+					{{ t('file_sharing', 'Set expiration date') }}
+				</NcCheckboxRadioSwitch>
+				<!-- REVIEW DISCUSSION OR PAIR FIX: Initialize date field with current expiry date does not work, I guess wrong element type -->
+				<NcInputField v-if="hasExpirationDate"
+					type="date"
+					:value="new Date(share.expireDate).toLocaleDateString({ year: 'numeric', month: '2-digit', day: '2-digit' })"
+					:label="t('file_sharing', 'Expiration date')"
+					@update:value="onExpirationChange" />
+				<!-- REVIEW DISCUSSION OR PAIR FIX: @update:value="onExpirationChange" does not trigger any event for NcDateTimePicker -->
+				<NcDatetimePicker v-if="hasExpirationDate"
+					v-model="share.expireDate"
+					type="datetime"
+					:placeholder="t('file_sharing', 'Expiration date')"
+					confirm
+					@update:value="onExpirationChange" />
+				<NcCheckboxRadioSwitch :disabled="canChangeHideDownload"
+					:checked.sync="share.hideDownload"
+					@update:checked="queueUpdate('hideDownload')">
+					{{ t('file_sharing', 'Hide download') }}
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch v-if="isPasswordProtectedByTalkAvailable && setPasswordIsChecked"
+					:checked.sync="isPasswordProtectedByTalk"
+					@update:checked="onPasswordProtectedByTalkChange">
+					{{ t('file_sharing', 'Video verification') }}
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :checked.sync="writeNoteToRecipientIsChecked">
+					{{ t('file_sharing', 'Note to recipient') }}
+				</NcCheckboxRadioSwitch>
+				<template v-if="writeNoteToRecipientIsChecked">
+					<textarea :value="share.note" @input="share.note = $event.target.value" />
+				</template>
+				<NcCheckboxRadioSwitch :checked.sync="setCustomPermissions">
+					{{ t('file_sharing', 'Custom permissions') }}
+				</NcCheckboxRadioSwitch>
+				<section v-if="setCustomPermissions" class="custom-permissions-group">
+					<NcCheckboxRadioSwitch :disabled="!hasFileDropPermissions" :checked.sync="readPermissionIsChecked">
+						{{ t('file_sharing', 'Read') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="isFolder && canSetCreate" :checked.sync="createPermissionIsChecked">
+						{{ t('file_sharing', 'Create') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="canSetEdit" :checked.sync="editPermissionIsChecked">
+						{{ t('file_sharing', 'Update') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="canSetReshare" :checked.sync="sharePermissionIsChecked">
+						{{ t('file_sharing', 'Share') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="canSetDownload" :checked.sync="downloadPermissionIsChecked">
+						{{ t('file_sharing', 'Download') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="canSetDelete" :checked.sync="deletePermissionIsChecked">
+						{{ t('file_sharing', 'Delete') }}
+					</NcCheckboxRadioSwitch>
+				</section>
+			</section>
+		</div>
+
+		<div class="sharingTabDetailsView__footer">
+			<NcButton v-if="!isNewShare"
+				:aria-label="t('files_sharing', 'Delete share')"
+				:disabled="false"
+				:readonly="false"
+				type="tertiary"
+				@click.prevent="removeShare">
+				<template #icon>
+					<CloseIcon :size="16" />
+				</template>
+				{{ t('files_sharing', 'Delete share') }}
+			</NcButton>
+			<div class="button-group">
+				<NcButton @click="$emit('close-sharing-details')">
+					{{ t('file_sharing', 'Cancel') }}
+				</NcButton>
+				<NcButton type="primary" @click="saveShare">
+					{{ shareButtonText }}
+				</NcButton>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import CircleIcon from 'vue-material-design-icons/CircleOutline.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import EditIcon from 'vue-material-design-icons/Pencil.vue'
+import EmailIcon from 'vue-material-design-icons/Email.vue'
+import GroupIcon from 'vue-material-design-icons/AccountGroup.vue'
+import ShareIcon from 'vue-material-design-icons/ShareCircle.vue'
+import UserIcon from 'vue-material-design-icons/AccountCircleOutline.vue'
+import ViewIcon from 'vue-material-design-icons/Eye.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import MenuDownIcon from 'vue-material-design-icons/MenuDown.vue'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+
+import Config from '../services/ConfigService.js'
+import GeneratePassword from '../utils/GeneratePassword.js'
+import Share from '../models/Share.js'
+import ShareRequests from '../mixins/ShareRequests.js'
+import ShareTypes from '../mixins/ShareTypes.js'
+import SharesMixin from '../mixins/SharesMixin.js'
+
+import {
+	ATOMIC_PERMISSIONS,
+	BUNDLED_PERMISSIONS,
+	hasPermissions,
+} from '../lib/SharePermissionsToolBox.js'
+
+export default {
+	name: 'SharingDetailsTab',
+	components: {
+		NcAvatar,
+		NcButton,
+		NcInputField,
+		NcDatetimePicker,
+		NcCheckboxRadioSwitch,
+		CloseIcon,
+		CircleIcon,
+		EditIcon,
+		GroupIcon,
+		ShareIcon,
+		UserIcon,
+		UploadIcon,
+		ViewIcon,
+		MenuDownIcon,
+		DotsHorizontalIcon,
+	},
+	mixins: [ShareTypes, ShareRequests, SharesMixin],
+	props: {
+		shareRequestValue: {
+			type: Object,
+			required: false,
+		},
+		fileInfo: {
+			type: Object,
+			required: true,
+		},
+		share: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			setPasswordIsChecked: false,
+			writeNoteToRecipientIsChecked: false,
+			sharingPermission: BUNDLED_PERMISSIONS.ALL.toString(),
+			setCustomPermissions: false,
+			advancedSectionAccordionExpanded: false,
+			editPermissionIsChecked: false,
+			createPermissionIsChecked: false,
+			deletePermissionIsChecked: false,
+			readPermissionIsChecked: true,
+			sharePermissionIsChecked: false,
+			downloadPermissionIsChecked: false,
+			bundledPermissions: BUNDLED_PERMISSIONS,
+			isFirstComponentLoad: true,
+		}
+	},
+
+	computed: {
+		title() {
+			let title = t('files_sharing', 'Share with ')
+			title = title + this.share.shareWithDisplayName
+			if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
+				title += ` (${t('files_sharing', 'group')})`
+			} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_ROOM) {
+				title += ` (${t('files_sharing', 'conversation')})`
+			} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE) {
+				title += ` (${t('files_sharing', 'remote')})`
+			} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP) {
+				title += ` (${t('files_sharing', 'remote group')})`
+			} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GUEST) {
+				title += ` (${t('files_sharing', 'guest')})`
+			}
+
+			return title
+		},
+		typeShareIsUser() {
+			return this.share.type === this.SHARE_TYPES.SHARE_TYPE_USER
+		},
+		allowsFileDrop() {
+			if (this.isFolder) {
+				if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_LINK || this.share.type === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
+					return true
+				}
+			}
+			return false
+		},
+		hasFileDropPermissions() {
+			return this.share.permissions === this.bundledPermissions.FILE_DROP
+		},
+		isGroupShare() {
+			return this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP
+		},
+		shareButtonText() {
+			if (this.isNewShare) {
+				return t('file_sharing', 'Save share')
+			}
+			return t('file_sharing', 'Update share')
+
+		},
+		isNewShare() {
+			return this.share.id === null || this.share.id === undefined
+		},
+		/**
+		 * Can the sharer set whether the sharee can edit the file ?
+		 *
+		 * @return {boolean}
+		 */
+		canSetEdit() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.sharePermissions & OC.PERMISSION_UPDATE) || this.canEdit
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can create the file ?
+		 *
+		 * @return {boolean}
+		 */
+		canSetCreate() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.sharePermissions & OC.PERMISSION_CREATE) || this.canCreate
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can delete the file ?
+		 *
+		 * @return {boolean}
+		 */
+		canSetDelete() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.sharePermissions & OC.PERMISSION_DELETE) || this.canDelete
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can reshare the file ?
+		 *
+		 * @return {boolean}
+		 */
+		canSetReshare() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.sharePermissions & OC.PERMISSION_SHARE) || this.canReshare
+		},
+
+		/**
+		 * Can the sharer set whether the sharee can download the file ?
+		 *
+		 * @return {boolean}
+		 */
+		canSetDownload() {
+			// If the owner revoked the permission after the resharer granted it
+			// the share still has the permission, and the resharer is still
+			// allowed to revoke it too (but not to grant it again).
+			return (this.fileInfo.canDownload() || this.canDownload)
+		},
+		// if newPassword exists, but is empty, it means
+		// the user deleted the original password
+		hasUnsavedPassword() {
+			return this.share.newPassword !== undefined
+		},
+		/**
+		 * Does the current share have an expiration date
+		 *
+		 * @return {boolean}
+		 */
+		 hasExpirationDate: {
+			get() {
+				return this.config.isDefaultExpireDateEnforced
+					|| !!this.share.expireDate
+			},
+			set(enabled) {
+				const defaultExpirationDate = this.config.defaultExpirationDate
+					|| new Date(new Date().setDate(new Date().getDate() + 1))
+				this.share.expireDate = enabled
+					? this.formatDateToString(defaultExpirationDate)
+					: ''
+				console.debug('Expiration date status', enabled, this.share.expireDate)
+			},
+		},
+		dateMaxEnforced() {
+			if (this.config.isDefaultExpireDateEnforced) {
+				return new Date(new Date().setDate(new Date().getDate() + this.config.defaultExpireDate))
+			}
+			return null
+		},
+		/**
+		 * Is the current share password protected ?
+		 *
+		 * @return {boolean}
+		 */
+		isPasswordProtected: {
+			get() {
+				return this.config.enforcePasswordForPublicLink
+					|| !!this.share.password
+			},
+			async set(enabled) {
+				// TODO: directly save after generation to make sure the share is always protected
+				Vue.set(this.share, 'password', enabled ? await GeneratePassword() : '')
+				Vue.set(this.share, 'newPassword', this.share.password)
+			},
+		},
+
+		passwordExpirationTime() {
+			if (this.share.passwordExpirationTime === null) {
+				return null
+			}
+
+			const expirationTime = moment(this.share.passwordExpirationTime)
+
+			if (expirationTime.diff(moment()) < 0) {
+				return false
+			}
+
+			return expirationTime.fromNow()
+		},
+
+		/**
+		 * Is Talk enabled?
+		 *
+		 * @return {boolean}
+		 */
+		isTalkEnabled() {
+			return OC.appswebroots.spreed !== undefined
+		},
+
+		/**
+		 * Is it possible to protect the password by Talk?
+		 *
+		 * @return {boolean}
+		 */
+		isPasswordProtectedByTalkAvailable() {
+			return this.isPasswordProtected && this.isTalkEnabled
+		},
+		/**
+		 * Is the current share password protected by Talk?
+		 *
+		 * @return {boolean}
+		 */
+		isPasswordProtectedByTalk: {
+			get() {
+				return this.share.sendPasswordByTalk
+			},
+			async set(enabled) {
+				this.share.sendPasswordByTalk = enabled
+			},
+		},
+		/**
+		 * Is the current share an email share ?
+		 *
+		 * @return {boolean}
+		 */
+		isEmailShareType() {
+			return this.share
+				? this.share.type === this.SHARE_TYPES.SHARE_TYPE_EMAIL
+				: false
+		},
+		canTogglePasswordProtectedByTalkAvailable() {
+			if (!this.isPasswordProtected) {
+				// Makes no sense
+				return false
+			} else if (this.isEmailShareType && !this.hasUnsavedPassword) {
+				// For email shares we need a new password in order to enable or
+				// disable
+				return false
+			}
+
+			// Anything else should be fine
+			return true
+		},
+		canChangeHideDownload() {
+			const hasDisabledDownload = (shareAttribute) => shareAttribute.key === 'download' && shareAttribute.scope === 'permissions' && shareAttribute.enabled === false
+			return this.fileInfo.shareAttributes.some(hasDisabledDownload)
+		},
+		customPermissionsList() {
+			const perms = []
+			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.READ)) {
+				perms.push('read')
+			}
+			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.CREATE)) {
+				perms.push('create')
+			}
+			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.UPDATE)) {
+				perms.push('Update')
+			}
+			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.DELETE)) {
+				perms.push('delete')
+			}
+			if (hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.SHARE)) {
+				perms.push('share')
+			}
+			if (this.share.hasDownloadPermission) {
+				perms.push('download')
+			}
+			const capitalizeFirstAndJoin = array => array.map((item, index) => index === 0 ? item[0].toUpperCase() + item.substring(1) : item).join(', ')
+
+			return capitalizeFirstAndJoin(perms)
+
+		},
+	},
+	watch: {
+		setCustomPermissions(isChecked) {
+			if (isChecked) {
+				this.sharingPermission = 'custom'
+				this.preFillCustomPermissions()
+			} else {
+				this.sharingPermission = BUNDLED_PERMISSIONS.ALL.toString()
+			}
+		},
+		async setPasswordIsChecked(isChecked) {
+			if (isChecked) {
+				if (!this.isFirstComponentLoad) {
+					this.share.password = await GeneratePassword()
+				}
+				this.isFirstComponentLoad = false
+
+			} else {
+				this.$delete(this.share, 'newPassword')
+			}
+		},
+	},
+	beforeMount() {
+		this.initializePermissions()
+		this.initializeAttributes()
+		console.debug('shareSentIn', this.share)
+	},
+
+	methods: {
+		updateAtomicPermissions({
+			isReadChecked = this.readPermissionIsChecked,
+			isEditChecked = this.editPermissionIsChecked,
+			isCreateChecked = this.createPermissionIsChecked,
+			isDeleteChecked = this.deletePermissionIsChecked,
+			isReshareChecked = this.sharePermissionIsChecked,
+			isDownloadChecked = this.downloadPermissionIsChecked,
+		} = {}) {
+			// calc permissions if checked
+			const permissions = 0
+				| ((this.hasFileDropPermissions || !isReadChecked) ? 0 : ATOMIC_PERMISSIONS.READ)
+				| (isCreateChecked ? ATOMIC_PERMISSIONS.CREATE : 0)
+				| (isDeleteChecked ? ATOMIC_PERMISSIONS.DELETE : 0)
+				| (isEditChecked ? ATOMIC_PERMISSIONS.UPDATE : 0)
+				| (isReshareChecked ? ATOMIC_PERMISSIONS.SHARE : 0)
+
+			this.share.permissions = permissions
+			if (this.share.hasDownloadPermission !== isDownloadChecked) {
+				this.share.hasDownloadPermission = isDownloadChecked
+			}
+		},
+		async saveShare() {
+			const permissionsAndAttributes = ['permissions', 'attributes', 'note', 'password', 'label', 'expireDate']
+			const sharePermissionsSet = parseInt(this.sharingPermission)
+			this.share.permissions = sharePermissionsSet
+			this.fileInfo.sharePermissions = sharePermissionsSet
+			if (this.setCustomPermissions) {
+				this.updateAtomicPermissions()
+			}
+			if (this.isNewShare) {
+				await this.addShare(this.share, this.fileInfo, new Config())
+			}
+			if (!this.isFolder && this.share.permissions === BUNDLED_PERMISSIONS.ALL) {
+				// It's not possible to create an existing file.
+				this.share.permissions = BUNDLED_PERMISSIONS.ALL_MINUS_CREATE_AND_DELETE
+			}
+			if (!this.writeNoteToRecipientIsChecked) {
+				this.share.note = ''
+			}
+
+			if (this.setPasswordIsChecked) {
+				if (this.isValidShareAttribute(this.share.newPassword)) {
+					this.share.password = this.share.newPassword
+					this.$delete(this.share, 'newPassword')
+				}
+			} else {
+				this.share.password = ''
+			}
+
+			this.queueUpdate(...permissionsAndAttributes)
+			this.$emit('close-sharing-details')
+		},
+		toggleCustomPermissions() {
+			if (this.sharingPermission === 'custom') {
+				this.advancedSectionAccordionExpanded = true
+				this.setCustomPermissions = true
+			} else {
+				this.advancedSectionAccordionExpanded = false
+				this.setCustomPermissions = false
+			}
+		},
+		preFillCustomPermissions() {
+			if (!this.isNewShare) {
+				this.editPermissionIsChecked = hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.UPDATE)
+				this.createPermissionIsChecked = hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.CREATE)
+				this.deletePermissionIsChecked = hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.DELETE)
+				this.sharePermissionIsChecked = hasPermissions(this.share.permissions, ATOMIC_PERMISSIONS.SHARE)
+				this.downloadPermissionIsChecked = this.share.hasDownloadPermission
+			}
+		},
+		initializeAttributes() {
+			let hasAdvancedAttributes = false
+			if (this.isValidShareAttribute(this.share.note)) {
+				this.writeNoteToRecipientIsChecked = true
+				hasAdvancedAttributes = true
+			}
+
+			if (this.isValidShareAttribute(this.share.password)) {
+				this.setPasswordIsChecked = true
+				hasAdvancedAttributes = true
+			}
+
+			if (this.isValidShareAttribute(this.share.expireDate)) {
+				this.hasExpirationDate = true
+				hasAdvancedAttributes = true
+			}
+
+			if (this.isValidShareAttribute(this.share.label)) {
+				hasAdvancedAttributes = true
+			}
+
+			if (hasAdvancedAttributes) {
+				this.advancedSectionAccordionExpanded = true
+			}
+
+		},
+		initializePermissions() {
+			if (this.share.share_type) {
+				this.share.type = this.share.share_type
+			}
+			// shareType 0 (USER_SHARE) would evaluate to zero
+			// Hence the use of hasOwnProperty
+			if ('shareType' in this.share) {
+				this.share.type = this.share.shareType
+			}
+			if (this.isNewShare) {
+				if (this.isPublicShare) {
+					this.sharingPermission = BUNDLED_PERMISSIONS.READ_ONLY.toString()
+				} else {
+					this.sharingPermission = BUNDLED_PERMISSIONS.ALL.toString()
+				}
+
+			} else {
+				if (this.hasCustomPermissions || this.share.setCustomPermissions) {
+					this.sharingPermission = 'custom'
+					this.advancedSectionAccordionExpanded = true
+					this.setCustomPermissions = true
+					this.preFillCustomPermissions()
+				} else {
+					this.sharingPermission = this.share.permissions.toString()
+					if (this.hasFileDropPermissions) {
+						this.readPermissionIsChecked = false
+					}
+				}
+			}
+		},
+		/**
+		 * Process the new share request
+		 *
+		 * @param {object} value the multiselect option
+		 * @param {object} fileInfo file data
+		 * @param {Config} config instance configs
+		 */
+		async addShare(value, fileInfo, config) {
+			// Clear the displayed selection
+			this.value = null
+
+			// handle externalResults from OCA.Sharing.ShareSearch
+			if (value.handler) {
+				const share = await value.handler(this)
+				this.$emit('add:share', new Share(share))
+				return true
+			}
+
+			// this.loading = true // Are we adding loaders the new share flow?
+			console.debug('Adding a new share from the input for', value)
+			try {
+				let password = null
+
+				if (config.enforcePasswordForPublicLink
+					&& value.shareType === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
+					password = await GeneratePassword()
+				}
+
+				const path = (fileInfo.path + '/' + fileInfo.name).replace('//', '/')
+				const share = await this.createShare({
+					path,
+					shareType: value.shareType,
+					shareWith: value.shareWith,
+					password,
+					permissions: fileInfo.sharePermissions,
+					attributes: JSON.stringify(fileInfo.shareAttributes),
+				})
+
+				if (this.share.hasDownloadPermission !== this.downloadPermissionIsChecked) {
+					this.share.hasDownloadPermission = this.downloadPermissionIsChecked
+				}
+
+				const newPassword = this.share.newPassword !== undefined ? this.share.newPassword : 0
+
+				if (!password && newPassword && this.setPasswordIsChecked) {
+					password = newPassword
+				}
+
+				// If we had a password, we need to show it to the user as it was generated
+				if (password) {
+					share.newPassword = password
+				}
+
+				this.$emit('add:share', share)
+			} catch (error) {
+				console.error('Error while adding new share', error)
+			} finally {
+				// this.loading = false // No loader here yet
+			}
+		},
+		async removeShare() {
+			await this.onDelete()
+			this.$emit('close-sharing-details')
+		},
+		/**
+		 * Update newPassword values
+		 * of share. If password is set but not newPassword
+		 * then the user did not changed the password
+		 * If both co-exists, the password have changed and
+		 * we show it in plain text.
+		 * Then on submit (or menu close), we sync it.
+		 *
+		 * @param {string} password the changed password
+		 */
+		onPasswordChange(password) {
+			this.$set(this.share, 'newPassword', password)
+		},
+		/**
+		 * Update the password along with "sendPasswordByTalk".
+		 *
+		 * If the password was modified the new password is sent; otherwise
+		 * updating a mail share would fail, as in that case it is required that
+		 * a new password is set when enabling or disabling
+		 * "sendPasswordByTalk".
+		 */
+		onPasswordProtectedByTalkChange() {
+			if (this.hasUnsavedPassword) {
+				this.share.password = this.share.newPassword.trim()
+			}
+
+			this.queueUpdate('sendPasswordByTalk', 'password')
+		},
+		isValidShareAttribute(value) {
+			if ([null, undefined].includes(value)) {
+				return false
+			}
+
+			if (!(value.trim().length > 0)) {
+				return false
+			}
+
+			return true
+		},
+		getShareTypeIcon(type) {
+			switch (type) {
+			case this.SHARE_TYPES.SHARE_TYPE_GUEST:
+				return UserIcon
+			case this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP:
+			case this.SHARE_TYPES.SHARE_TYPE_GROUP:
+				return GroupIcon
+			case this.SHARE_TYPES.SHARE_TYPE_EMAIL:
+				return EmailIcon
+			case this.SHARE_TYPES.SHARE_TYPE_CIRCLE:
+				return CircleIcon
+			case this.SHARE_TYPES.SHARE_TYPE_ROOM:
+				return ShareIcon
+			case this.SHARE_TYPES.SHARE_TYPE_DECK:
+				return ShareIcon
+			case this.SHARE_TYPES.SHARE_TYPE_SCIENCEMESH:
+				return ShareIcon
+			default:
+				return null // Or a default icon component if needed
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.sharingTabDetailsView {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 96%;
+	margin: 0 auto;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		margin: 0.2em;
+
+		span {
+			display: flex;
+			align-items: center;
+
+			h1 {
+				font-size: 15px;
+				padding-left: 0.3em;
+			}
+
+		}
+	}
+
+	&__quick-permissions {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 0.2em;
+		width: 100%;
+		margin: 0 auto;
+		border-radius: 0;
+
+		div {
+			width: 100%;
+
+			span {
+				width: 100%;
+
+				span:nth-child(1) {
+					align-items: center;
+					justify-content: center;
+					color: var(--color-primary-element);
+					padding: 0.1em;
+				}
+
+				::v-deep label {
+
+					span {
+						display: flex;
+						flex-direction: column;
+					}
+				}
+			}
+
+		}
+	}
+
+	&__advanced-control {
+		width: 100%;
+
+		button {
+			margin-top: 0.5em;
+		}
+
+	}
+
+	&__advanced {
+		width: 100%;
+		margin-bottom: 0.5em;
+		text-align: left;
+		padding-left: 0;
+
+		section {
+
+			textarea,
+			div.mx-datepicker {
+				width: 100%;
+			}
+
+			textarea {
+				height: 80px;
+			}
+
+			/*
+              The following style is applied out of the component's scope
+              to remove padding from the label.checkbox-radio-switch__label,
+              which is used to group radio checkbox items. The use of ::v-deep
+              ensures that the padding is modified without being affected by
+              the component's scoping.
+              Without this achieving left alignment for the checkboxes would not
+              be possible.
+            */
+			span {
+				::v-deep label {
+					padding-left: 0 !important;
+					background-color: initial !important;
+					border: none !important;
+				}
+			}
+
+			section.custom-permissions-group {
+				padding-left: 1.5em;
+			}
+		}
+	}
+
+	&__footer {
+		width: 100%;
+		display: flex;
+		position: sticky;
+		bottom: 0;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-start;
+
+		>button:first-child {
+			font-size: 12px;
+			color: rgb(223, 7, 7);
+			background-color: #f5f5f5;
+		}
+
+		.button-group {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			margin-top: 16px;
+
+			button {
+				margin-left: 16px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/apps/files_sharing/src/views/SharingLinkList.vue b/apps/files_sharing/src/views/SharingLinkList.vue
index c3f1425cb7081..899424be1d8d1 100644
--- a/apps/files_sharing/src/views/SharingLinkList.vue
+++ b/apps/files_sharing/src/views/SharingLinkList.vue
@@ -39,7 +39,8 @@
 				:file-info="fileInfo"
 				@add:share="addShare(...arguments)"
 				@update:share="awaitForShare(...arguments)"
-				@remove:share="removeShare" />
+				@remove:share="removeShare"
+				@open-sharing-details="openSharingDetails(share)" />
 		</template>
 	</ul>
 </template>
@@ -49,6 +50,7 @@
 import Share from '../models/Share.js'
 import ShareTypes from '../mixins/ShareTypes.js'
 import SharingEntryLink from '../components/SharingEntryLink.vue'
+import ShareDetails from '../mixins/ShareDetails.js'
 
 export default {
 	name: 'SharingLinkList',
@@ -57,7 +59,7 @@ export default {
 		SharingEntryLink,
 	},
 
-	mixins: [ShareTypes],
+	mixins: [ShareTypes, ShareDetails],
 
 	props: {
 		fileInfo: {
diff --git a/apps/files_sharing/src/views/SharingList.vue b/apps/files_sharing/src/views/SharingList.vue
index 05dc87d9b0760..6da48c2eece2e 100644
--- a/apps/files_sharing/src/views/SharingList.vue
+++ b/apps/files_sharing/src/views/SharingList.vue
@@ -27,15 +27,15 @@
 			:file-info="fileInfo"
 			:share="share"
 			:is-unique="isUnique(share)"
-			@remove:share="removeShare" />
+			@open-sharing-details="openSharingDetails(share)" />
 	</ul>
 </template>
 
 <script>
 // eslint-disable-next-line no-unused-vars
-import Share from '../models/Share.js'
 import SharingEntry from '../components/SharingEntry.vue'
 import ShareTypes from '../mixins/ShareTypes.js'
+import ShareDetails from '../mixins/ShareDetails.js'
 
 export default {
 	name: 'SharingList',
@@ -44,12 +44,12 @@ export default {
 		SharingEntry,
 	},
 
-	mixins: [ShareTypes],
+	mixins: [ShareTypes, ShareDetails],
 
 	props: {
 		fileInfo: {
 			type: Object,
-			default: () => {},
+			default: () => { },
 			required: true,
 		},
 		shares: {
@@ -58,7 +58,6 @@ export default {
 			required: true,
 		},
 	},
-
 	computed: {
 		hasShares() {
 			return this.shares.length === 0
@@ -71,18 +70,5 @@ export default {
 			}
 		},
 	},
-
-	methods: {
-		/**
-		 * Remove a share from the shares list
-		 *
-		 * @param {Share} share the share to remove
-		 */
-		removeShare(share) {
-			const index = this.shares.findIndex(item => item === share)
-			// eslint-disable-next-line vue/no-mutating-props
-			this.shares.splice(index, 1)
-		},
-	},
 }
 </script>
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index bfaf8a766eed4..e606f587f8c40 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -29,7 +29,7 @@
 		</div>
 
 		<!-- shares content -->
-		<div v-else class="sharingTab__content">
+		<div v-if="!showSharingDetailsView" class="sharingTab__content">
 			<!-- shared with me information -->
 			<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
 				<template #avatar>
@@ -46,20 +46,22 @@
 				:link-shares="linkShares"
 				:reshare="reshare"
 				:shares="shares"
-				@add:share="addShare" />
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- link shares list -->
 			<SharingLinkList v-if="!loading"
 				ref="linkShareList"
 				:can-reshare="canReshare"
 				:file-info="fileInfo"
-				:shares="linkShares" />
+				:shares="linkShares"
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- other shares list -->
 			<SharingList v-if="!loading"
 				ref="shareList"
 				:shares="shares"
-				:file-info="fileInfo" />
+				:file-info="fileInfo"
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- inherited shares -->
 			<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
@@ -74,6 +76,15 @@
 				:name="fileInfo.name" />
 		</div>
 
+		<!-- share details -->
+		<div v-else>
+			<SharingDetailsTab :file-info="shareDetailsData.fileInfo"
+				:share="shareDetailsData.share"
+				@close-sharing-details="toggleShareDetailsView"
+				@add:share="addShare"
+				@remove:share="removeShare" />
+		</div>
+
 		<!-- additional entries, use it with cautious -->
 		<div v-for="(section, index) in sections"
 			:ref="'section-' + index"
@@ -102,6 +113,7 @@ import SharingInput from '../components/SharingInput.vue'
 import SharingInherited from './SharingInherited.vue'
 import SharingLinkList from './SharingLinkList.vue'
 import SharingList from './SharingList.vue'
+import SharingDetailsTab from './SharingDetailsTab.vue'
 
 export default {
 	name: 'SharingTab',
@@ -115,6 +127,7 @@ export default {
 		SharingInput,
 		SharingLinkList,
 		SharingList,
+		SharingDetailsTab,
 	},
 
 	mixins: [ShareTypes],
@@ -122,7 +135,7 @@ export default {
 	data() {
 		return {
 			config: new Config(),
-
+			deleteEvent: null,
 			error: '',
 			expirationInterval: null,
 			loading: true,
@@ -137,6 +150,8 @@ export default {
 
 			sections: OCA.Sharing.ShareTabSections.getSections(),
 			projectsEnabled: loadState('core', 'projects_enabled', false),
+			showSharingDetailsView: false,
+			shareDetailsData: {},
 		}
 	},
 
@@ -307,7 +322,7 @@ export default {
 						'Shared with you by {owner}',
 						{ owner: this.fileInfo.shareOwner },
 						undefined,
-						{ escape: false }
+						{ escape: false },
 					),
 					user: this.fileInfo.shareOwnerId,
 				}
@@ -321,7 +336,7 @@ export default {
 		 * @param {Share} share the share to add to the array
 		 * @param {Function} [resolve] a function to run after the share is added and its component initialized
 		 */
-		addShare(share, resolve = () => {}) {
+		addShare(share, resolve = () => { }) {
 			// only catching share type MAIL as link shares are added differently
 			// meaning: not from the ShareInput
 			if (share.type === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
@@ -331,7 +346,16 @@ export default {
 			}
 			this.awaitForShare(share, resolve)
 		},
-
+		/**
+		 * Remove a share from the shares list
+		 *
+		 * @param {Share} share the share to remove
+		 */
+		removeShare(share) {
+			const index = this.shares.findIndex(item => item.id === share.id)
+			// eslint-disable-next-line vue/no-mutating-props
+			this.shares.splice(index, 1)
+		},
 		/**
 		 * Await for next tick and render after the list updated
 		 * Then resolve with the matched vue component of the
@@ -355,6 +379,12 @@ export default {
 				}
 			})
 		},
+		toggleShareDetailsView(eventData) {
+			if (eventData) {
+				this.shareDetailsData = eventData
+			}
+			this.showSharingDetailsView = !this.showSharingDetailsView
+		},
 	},
 }
 </script>
@@ -368,6 +398,7 @@ export default {
 	&__content {
 		padding: 0 6px;
 	}
+
 	&__additionalContent {
 		margin: 44px 0;
 	}