fix(dialog): guard missing recipient permissions and refine the recipient row

- Guard recipient.permissions (the backend does not yet return per-recipient
  permissions), which previously threw on an undefined .map().
- Recipient row: drop the inline preset select; show a static preset label
  ("Can view" / "Custom permissions"), and move preset shortcuts + custom
  permissions (opens the modal) + remove into the three-dot menu.
- Hide the Invited/Anyone tab bar once a recipient (or the link) exists.
- Constrain the "Add people" field width.

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

Author: skjnldsv

lib/dialog/components/RecipientRow.vue

@@ -15,25 +15,27 @@
 
 		<div class="recipient-row__desc">
 			<span class="recipient-row__name">{{ recipient.display_name }}</span>
-			<NcSelect
-				class="recipient-row__preset"
-				:modelValue="selectedPreset"
-				:clearable="false"
-				:searchable="false"
-				:inputLabel="t('Permissions')"
-				:hideLabel="true"
-				:options="presetOptions"
-				:placeholder="t('Can…')"
-				@update:modelValue="onPresetChange" />
+			<span class="recipient-row__subtitle">{{ currentPresetLabel }}</span>
 		</div>
 
-		<NcActions class="recipient-row__actions" :aria-label="t('Recipient actions')">
+		<NcActions class="recipient-row__actions" :aria-label="t('Recipient actions')" :forceMenu="true">
+			<NcActionCaption :name="t('Permissions')" />
+			<NcActionButton
+				v-for="preset in presets"
+				:key="preset.value"
+				@click="onPresetChange(preset)">
+				<template #icon>
+					<NcIconSvgWrapper v-if="preset.value === currentPresetValue" :svg="IconCheck" :size="20" />
+				</template>
+				{{ preset.label }}
+			</NcActionButton>
 			<NcActionButton @click="modalOpen = true">
 				<template #icon>
-					<NcIconSvgWrapper :svg="IconTune" :size="20" />
+					<NcIconSvgWrapper :svg="isCustom ? IconCheck : IconTune" :size="20" />
 				</template>
 				{{ t('Custom permissions') }}
 			</NcActionButton>
+			<NcActionSeparator />
 			<NcActionButton @click="remove">
 				<template #icon>
 					<NcIconSvgWrapper :svg="IconDelete" :size="20" />
@@ -65,19 +67,22 @@
 
 <script setup lang="ts">
 import type { Share } from '../api/share.ts'
+import type { PresetOption } from '../composables/useRecipientPermissions.ts'
 import type { SharingRecipient } from '../types/api.ts'
 
+import IconCheck from '@mdi/svg/svg/check.svg?raw'
 import IconDelete from '@mdi/svg/svg/delete.svg?raw'
 import IconTune from '@mdi/svg/svg/tune-variant.svg?raw'
 import { computed, ref } from 'vue'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import NcSelect from '@nextcloud/vue/components/NcSelect'
 import PermissionEditor from './PermissionEditor.vue'
-import { useRecipientPermissions } from '../composables/useRecipientPermissions.ts'
+import { CUSTOM_VALUE, useRecipientPermissions } from '../composables/useRecipientPermissions.ts'
 import { RECIPIENT_TYPE_USER } from '../constants.ts'
 import { t } from '../utils/l10n.ts'
 import { logger } from '../utils/logger.ts'
@@ -105,6 +110,13 @@ const {
 	onPermissionToggle,
 } = useRecipientPermissions(props.share, () => props.recipient)
 
+const currentPresetValue = computed(() => selectedPreset.value.value)
+const isCustom = computed(() => currentPresetValue.value === CUSTOM_VALUE)
+// Preset shortcuts in the menu, excluding the "custom" sentinel.
+const presets = computed<PresetOption[]>(() => presetOptions.value.filter((option) => option.value !== CUSTOM_VALUE))
+// Static label shown under the recipient name.
+const currentPresetLabel = computed(() => isCustom.value ? t('Custom permissions') : selectedPreset.value.label)
+
 /**
  * Remove this recipient from the share.
  */
@@ -129,21 +141,18 @@ async function remove() {
 		flex-direction: column;
 		flex: 1 1 auto;
 		min-width: 0;
+		line-height: 1.2em;
 	}
 
-	&__name {
+	&__name,
+	&__subtitle {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
-	// Compact, borderless preset dropdown sitting under the name.
-	&__preset {
-		min-width: 0;
-		:deep(.vs__dropdown-toggle) {
-			border: none;
-			color: var(--color-text-maxcontrast);
-		}
+	&__subtitle {
+		color: var(--color-text-maxcontrast);
 	}
 
 	&__actions {

lib/dialog/components/SharePanel.vue

@@ -6,7 +6,9 @@
 	<form class="share-panel" @submit.prevent>
 		<!-- First page view -->
 		<template v-if="!inSettings">
+			<!-- Share type is committed once a recipient (or the link) exists -->
 			<NcRadioGroup
+				v-if="!hasRecipients"
 				class="share-panel__tab-bar"
 				:modelValue="shareDialogTab"
 				:label="t('Share type')"
@@ -216,6 +218,9 @@ const isLinkShare = computed(() => shareDialogTab.value === ShareDialogTab.Anyon
 // A share cannot be submitted without at least one recipient.
 const canSubmit = computed(() => props.share.recipients.length > 0)
 
+// Once a recipient (or the link) exists, the share type is committed.
+const hasRecipients = computed(() => props.share.recipients.length > 0)
+
 // Editable properties, permissions/presets, recipient search and link handling
 // live in dedicated composables; this component wires them to the template.
 const {
@@ -322,9 +327,14 @@ form.share-panel {
 	// letting flex shrink (compress) them to fit the max-height.
 	> * {
 		flex-shrink: 0;
+		min-width: 0;
 	}
 }
 
+.share-panel__recipient-search {
+	width: 100%;
+}
+
 .share-panel__link-actions {
 	display: flex;
 	gap: calc(var(--default-grid-baseline) * 3);

lib/dialog/composables/useRecipientPermissions.ts

@@ -67,7 +67,8 @@ export function useRecipientPermissions(share: Share, getRecipient: () => Sharin
 
 	const permissions = computed<RecipientPermission[]>(() => {
 		const max = shareMax.value
-		return recipient.value.permissions.map((permission) => ({
+		// The backend may not (yet) return per-recipient permissions.
+		return (recipient.value.permissions ?? []).map((permission) => ({
 			...permission,
 			available: max.has(permission.class),
 		}))