1 files changed, 73 insertions, 0 deletions
diff --git a/apps/files_sharing/src/views/FilesHeaderNoteToRecipient.vue b/apps/files_sharing/src/views/FilesHeaderNoteToRecipient.vue
new file mode 100644
index 00000000000..ec6348606fb
--- /dev/null
+++ b/apps/files_sharing/src/views/FilesHeaderNoteToRecipient.vue
@@ -0,0 +1,73 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcNoteCard v-if="note.length > 0"
+		class="note-to-recipient"
+		type="info">
+		<p v-if="displayName" class="note-to-recipient__heading">
+			{{ t('files_sharing', 'Note from') }}
+			<NcUserBubble :user="user.id" :display-name="user.displayName" />
+		</p>
+		<p v-else class="note-to-recipient__heading">
+			{{ t('files_sharing', 'Note:') }}
+		</p>
+		<p class="note-to-recipient__text" v-text="note" />
+	</NcNoteCard>
+</template>
+
+<script setup lang="ts">
+import type { Folder } from '@nextcloud/files'
+import { getCurrentUser } from '@nextcloud/auth'
+import { t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
+
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
+
+const folder = ref<Folder>()
+const note = computed<string>(() => folder.value?.attributes.note ?? '')
+const displayName = computed<string>(() => folder.value?.attributes['owner-display-name'] ?? '')
+const user = computed(() => {
+	const id = folder.value?.owner
+	if (id !== getCurrentUser()?.uid) {
+		return {
+			id,
+			displayName: displayName.value,
+		}
+	}
+	return null
+})
+
+/**
+ * Update the current folder
+ * @param newFolder the new folder to show note for
+ */
+function updateFolder(newFolder: Folder) {
+	folder.value = newFolder
+}
+
+defineExpose({ updateFolder })
+</script>
+
+<style scoped>
+.note-to-recipient {
+	margin-inline: var(--row-height)
+}
+
+.note-to-recipient__text {
+	/* respect new lines */
+	white-space: pre-line;
+}
+
+.note-to-recipient__heading {
+	font-weight: bold;
+}
+
+@media screen and (max-width: 512px) {
+	.note-to-recipient {
+		margin-inline: var(--default-grid-baseline);
+	}
+}
+</style>