From e4196a48a7d3236af320931add47448a3c630585 Mon Sep 17 00:00:00 2001
From: Frank Karlitschek <frank.karlitschek@nextcloud.com>
Date: Sun, 23 Aug 2026 19:00:26 +0200
Subject: [PATCH] feat(overview): flag shared files with a sharing indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Files in the overview could not be told apart by sharing state. Show a
"shared" indicator on both the grid cards and the list rows.

A file counts as shared when the current user has shared it out (a
non-empty oc:share-types) or it is owned by someone else and shared with
them — the same definition the Files app uses. The overview did not fetch
sharing state, so register the oc:share-types DAV property, as
files_sharing does, to include it in the search results.

The indicator carries an accessible label ("Shared", or "Shared by
{owner}" for an incoming share) so the state is never conveyed by icon or
colour alone. In the grid it uses a new FileCard overlay slot over the
thumbnail; in the list it joins the favourite star in the indicator slot.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: Frank Karlitschek <frank.karlitschek@nextcloud.com>
---
 src/components/FileCard.spec.ts       |  8 ++++
 src/components/FileCard.vue           | 20 ++++++++++
 src/components/ShareIndicator.spec.ts | 51 ++++++++++++++++++++++++++
 src/components/ShareIndicator.vue     | 53 +++++++++++++++++++++++++++
 src/services/officeFiles.spec.ts      |  9 +++++
 src/services/officeFiles.ts           |  9 ++++-
 src/test-utils/fixtures.ts            |  6 +++
 src/utils/fileSharing.spec.ts         | 50 +++++++++++++++++++++++++
 src/utils/fileSharing.ts              | 44 ++++++++++++++++++++++
 src/views/OfficeOverview.vue          | 22 +++++++++--
 10 files changed, 267 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ShareIndicator.spec.ts
 create mode 100644 src/components/ShareIndicator.vue
 create mode 100644 src/utils/fileSharing.spec.ts
 create mode 100644 src/utils/fileSharing.ts

diff --git a/src/components/FileCard.spec.ts b/src/components/FileCard.spec.ts
index 9f74c91..105c894 100644
--- a/src/components/FileCard.spec.ts
+++ b/src/components/FileCard.spec.ts
@@ -36,4 +36,12 @@ describe('FileCard', () => {
 		const withSubname = mount(FileCard, { slots: { subname: 'a subname' } })
 		expect(withSubname.find('.file-card__subname').text()).toBe('a subname')
 	})
+
+	it('only renders the overlay slot when provided', () => {
+		const without = mount(FileCard)
+		expect(without.find('.file-card__overlay').exists()).toBe(false)
+
+		const withOverlay = mount(FileCard, { slots: { overlay: 'a badge' } })
+		expect(withOverlay.find('.file-card__overlay').text()).toBe('a badge')
+	})
 })
diff --git a/src/components/FileCard.vue b/src/components/FileCard.vue
index 744c60b..78aeeab 100644
--- a/src/components/FileCard.vue
+++ b/src/components/FileCard.vue
@@ -11,6 +11,9 @@ defineEmits<{ click: [event: MouseEvent] }>()
 	<button type="button" class="file-card" @click="$emit('click', $event)">
 		<div class="file-card__preview">
 			<slot name="preview" />
+			<span v-if="$slots.overlay" class="file-card__overlay">
+				<slot name="overlay" />
+			</span>
 		</div>
 		<div class="file-card__content">
 			<span v-if="$slots.icon" class="file-card__icon">
@@ -50,6 +53,7 @@ defineEmits<{ click: [event: MouseEvent] }>()
 }
 
 .file-card__preview {
+	position: relative;
 	flex: 1;
 	min-height: 0;
 	display: flex;
@@ -58,6 +62,22 @@ defineEmits<{ click: [event: MouseEvent] }>()
 	margin-bottom: calc(var(--default-grid-baseline) * 1);
 }
 
+/* Badge area over the thumbnail (e.g. the share indicator). The chip keeps the
+   icon legible over any preview; the shadow colour is a theme token so it works
+   in dark mode. */
+.file-card__overlay {
+	position: absolute;
+	inset-block-start: calc(var(--default-grid-baseline) * 1);
+	inset-inline-end: calc(var(--default-grid-baseline) * 1);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 3px;
+	border-radius: var(--border-radius);
+	background-color: var(--color-main-background);
+	box-shadow: 0 1px 2px rgba(var(--color-box-shadow-rgb), 0.4);
+}
+
 .file-card__content {
 	flex-shrink: 0;
 	display: flex;
diff --git a/src/components/ShareIndicator.spec.ts b/src/components/ShareIndicator.spec.ts
new file mode 100644
index 0000000..8f459c5
--- /dev/null
+++ b/src/components/ShareIndicator.spec.ts
@@ -0,0 +1,51 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { makeNode } from '../test-utils/fixtures.ts'
+import ShareIndicator from './ShareIndicator.vue'
+
+describe('ShareIndicator', () => {
+	it('renders nothing for an unshared file the current user owns', () => {
+		const wrapper = mount(ShareIndicator, {
+			props: { file: makeNode({ owner: 'alice' }), currentUid: 'alice' },
+		})
+
+		expect(wrapper.find('.share-indicator').exists()).toBe(false)
+	})
+
+	it('labels an outgoing share "Shared"', () => {
+		const wrapper = mount(ShareIndicator, {
+			props: { file: makeNode({ owner: 'alice', shareTypes: [0] }), currentUid: 'alice' },
+		})
+
+		const indicator = wrapper.find('.share-indicator')
+		expect(indicator.exists()).toBe(true)
+		expect(indicator.attributes('aria-label')).toBe('Shared')
+		// The label is also the accessible name and the tooltip.
+		expect(indicator.attributes('title')).toBe('Shared')
+		expect(indicator.attributes('role')).toBe('img')
+	})
+
+	it('names the owner for an incoming share', () => {
+		const file = makeNode({ owner: 'bob' })
+		file.attributes!['owner-display-name'] = 'Bob'
+
+		const wrapper = mount(ShareIndicator, {
+			props: { file, currentUid: 'alice' },
+		})
+
+		expect(wrapper.find('.share-indicator').attributes('aria-label')).toBe('Shared by Bob')
+	})
+
+	it('falls back to "Shared" for an incoming share with no owner display name', () => {
+		const wrapper = mount(ShareIndicator, {
+			props: { file: makeNode({ owner: 'bob' }), currentUid: 'alice' },
+		})
+
+		expect(wrapper.find('.share-indicator').attributes('aria-label')).toBe('Shared')
+	})
+})
diff --git a/src/components/ShareIndicator.vue b/src/components/ShareIndicator.vue
new file mode 100644
index 0000000..12c6d74
--- /dev/null
+++ b/src/components/ShareIndicator.vue
@@ -0,0 +1,53 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { translate as t } from '@nextcloud/l10n'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import { mdiShareVariant } from '@mdi/js'
+import type { Node } from '@nextcloud/files'
+import { isIncomingShare, isShared } from '../utils/fileSharing.ts'
+
+const props = withDefaults(defineProps<{
+	file: Node
+	currentUid: string | null
+	size?: number
+}>(), {
+	size: 16,
+})
+
+const shared = computed(() => isShared(props.file, props.currentUid))
+
+// Incoming shares name the owner; outgoing ones just read "Shared". The label is
+// both the tooltip and the accessible name — the icon alone must never carry the
+// meaning (accessibility) or the colour (it is only a hint on top of the icon).
+const label = computed(() => {
+	if (!isIncomingShare(props.file, props.currentUid)) {
+		return t('office', 'Shared')
+	}
+	const owner = props.file.attributes?.['owner-display-name'] as string | undefined
+	return owner
+		? t('office', 'Shared by {owner}', { owner })
+		: t('office', 'Shared')
+})
+</script>
+
+<template>
+	<span v-if="shared"
+		class="share-indicator"
+		role="img"
+		:aria-label="label"
+		:title="label">
+		<NcIconSvgWrapper :path="mdiShareVariant" :size="size" />
+	</span>
+</template>
+
+<style scoped>
+.share-indicator {
+	display: inline-flex;
+	color: var(--color-primary-element);
+}
+</style>
diff --git a/src/services/officeFiles.spec.ts b/src/services/officeFiles.spec.ts
index bce3a7b..ca0aed7 100644
--- a/src/services/officeFiles.spec.ts
+++ b/src/services/officeFiles.spec.ts
@@ -5,16 +5,25 @@ import { makeNode } from '../test-utils/fixtures.ts'
 
 const searchMock = vi.fn()
 
+const registerDavPropertyMock = vi.fn()
+
 vi.mock('@nextcloud/files/dav', () => ({
 	getClient: vi.fn(() => ({ search: searchMock })),
 	getDavNameSpaces: vi.fn(() => 'xmlns:d="DAV:"'),
 	getDavProperties: vi.fn(() => '<d:getcontenttype/>'),
 	getRootPath: vi.fn(() => '/remote.php/dav/files/alice'),
+	registerDavProperty: registerDavPropertyMock,
 	resultToNode: vi.fn((item: unknown) => item),
 }))
 
 const { getAllOfficeFiles, invalidateOfficeFilesCache, filterByMimes, SEARCH_RESULT_LIMIT } = await import('./officeFiles.ts')
 
+describe('module load', () => {
+	it('registers the oc:share-types DAV property so sharing state is fetched', () => {
+		expect(registerDavPropertyMock).toHaveBeenCalledWith('oc:share-types', { oc: 'http://owncloud.org/ns' })
+	})
+})
+
 describe('filterByMimes', () => {
 	it('keeps files whose mime is in the list and drops the rest', () => {
 		const doc = makeNode({ mime: 'application/vnd.oasis.opendocument.text' })
diff --git a/src/services/officeFiles.ts b/src/services/officeFiles.ts
index 42b0208..44718ca 100644
--- a/src/services/officeFiles.ts
+++ b/src/services/officeFiles.ts
@@ -4,7 +4,14 @@
  */
 
 import type { Node } from '@nextcloud/files'
-import { getClient, getDavNameSpaces, getDavProperties, getRootPath, resultToNode } from '@nextcloud/files/dav'
+import { getClient, getDavNameSpaces, getDavProperties, getRootPath, registerDavProperty, resultToNode } from '@nextcloud/files/dav'
+
+// `oc:share-types` is not in the default DAV property set, so the search would
+// not return sharing state without this. Registering it (as the Files app does
+// in files_sharing) adds it to the <d:prop> list getDavProperties() builds, so
+// the overview can flag which files are shared. Runs once, at module load,
+// before the first search.
+registerDavProperty('oc:share-types', { oc: 'http://owncloud.org/ns' })
 
 // Upper bound on files rendered per category, after client-side category and
 // ownership filtering.
diff --git a/src/test-utils/fixtures.ts b/src/test-utils/fixtures.ts
index ef5cf14..5e19123 100644
--- a/src/test-utils/fixtures.ts
+++ b/src/test-utils/fixtures.ts
@@ -12,6 +12,8 @@ interface MakeNodeOptions {
 	favorite?: boolean
 	mtime?: Date
 	basename?: string
+	/** Outgoing share-type numbers; stored in the nested shape DAV returns. */
+	shareTypes?: number[]
 }
 
 // Owner/mount-type are the two axes that decide whether a file counts as
@@ -27,6 +29,7 @@ export function makeNode({
 	favorite = false,
 	mtime = new Date('2024-01-01T00:00:00Z'),
 	basename = `file-${id}.odt`,
+	shareTypes,
 }: MakeNodeOptions = {}): Node {
 	const ownerSegment = owner ?? 'nobody'
 	return new File({
@@ -39,6 +42,9 @@ export function makeNode({
 		attributes: {
 			...(mountType !== undefined ? { 'nc:mount-type': mountType } : {}),
 			...(favorite ? { favorite: 1 } : {}),
+			// The DAV `oc:share-types` property nests the numbers under a
+			// `share-type` key — reproduce that so consumers exercise the real shape.
+			...(shareTypes ? { 'share-types': { 'share-type': shareTypes } } : {}),
 		},
 	})
 }
diff --git a/src/utils/fileSharing.spec.ts b/src/utils/fileSharing.spec.ts
new file mode 100644
index 0000000..07f4ea0
--- /dev/null
+++ b/src/utils/fileSharing.spec.ts
@@ -0,0 +1,50 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, expect, it } from 'vitest'
+import { makeNode } from '../test-utils/fixtures.ts'
+import { isIncomingShare, isShared, outgoingShareTypes } from './fileSharing.ts'
+
+describe('outgoingShareTypes', () => {
+	it('returns [] for a file with no share types', () => {
+		expect(outgoingShareTypes(makeNode())).toEqual([])
+	})
+
+	it('flattens the nested DAV shape for a single share type', () => {
+		expect(outgoingShareTypes(makeNode({ shareTypes: [3] }))).toEqual([3])
+	})
+
+	it('flattens the nested DAV shape for several share types', () => {
+		expect(outgoingShareTypes(makeNode({ shareTypes: [0, 3] }))).toEqual([0, 3])
+	})
+})
+
+describe('isIncomingShare', () => {
+	it('is true when the file is owned by someone other than the current user', () => {
+		expect(isIncomingShare(makeNode({ owner: 'bob' }), 'alice')).toBe(true)
+	})
+
+	it('is false when the current user owns the file', () => {
+		expect(isIncomingShare(makeNode({ owner: 'alice' }), 'alice')).toBe(false)
+	})
+
+	it('is false when the current user is unknown', () => {
+		expect(isIncomingShare(makeNode({ owner: 'bob' }), null)).toBe(false)
+	})
+})
+
+describe('isShared', () => {
+	it('is true for a file the current user has shared out', () => {
+		expect(isShared(makeNode({ owner: 'alice', shareTypes: [0] }), 'alice')).toBe(true)
+	})
+
+	it('is true for a file shared with the current user', () => {
+		expect(isShared(makeNode({ owner: 'bob' }), 'alice')).toBe(true)
+	})
+
+	it('is false for an unshared file the current user owns', () => {
+		expect(isShared(makeNode({ owner: 'alice' }), 'alice')).toBe(false)
+	})
+})
diff --git a/src/utils/fileSharing.ts b/src/utils/fileSharing.ts
new file mode 100644
index 0000000..62a6ed0
--- /dev/null
+++ b/src/utils/fileSharing.ts
@@ -0,0 +1,44 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Node } from '@nextcloud/files'
+
+/**
+ * Share-type numbers the current user has attached to a node (outgoing shares),
+ * normalised to a flat array. The DAV `oc:share-types` property comes back
+ * nested — `{ 'share-type': 3 }` for one share, `{ 'share-type': [3, 1] }` for
+ * several — so flatten its values the way the Files app does. Absent/empty ⇒ [].
+ *
+ * @param file the node to inspect
+ */
+export function outgoingShareTypes(file: Node): number[] {
+	const raw = file.attributes?.['share-types'] as Record<string, unknown> | unknown[] | undefined
+	return Object.values(raw ?? {}).flat() as number[]
+}
+
+/**
+ * Whether a file is shared *with* the current user by someone else (incoming),
+ * rather than shared out by them. Owner differs from the current user ⇒ it was
+ * mounted into their tree by a share. Drives the indicator's wording.
+ *
+ * @param file the node to inspect
+ * @param currentUid uid of the logged-in user, or null when unknown
+ */
+export function isIncomingShare(file: Node, currentUid: string | null): boolean {
+	return Boolean(currentUid && file.owner && file.owner !== currentUid)
+}
+
+/**
+ * Whether a file should carry a "shared" indicator: either the current user has
+ * shared it with someone (outgoing share types present) or it is an incoming
+ * share owned by someone else. Mirrors the Files app's sharing-status definition
+ * so the indicator means the same thing here as everywhere else in Nextcloud.
+ *
+ * @param file the node to inspect
+ * @param currentUid uid of the logged-in user, or null when unknown
+ */
+export function isShared(file: Node, currentUid: string | null): boolean {
+	return outgoingShareTypes(file).length > 0 || isIncomingShare(file, currentUid)
+}
diff --git a/src/views/OfficeOverview.vue b/src/views/OfficeOverview.vue
index 15702db..56b304e 100644
--- a/src/views/OfficeOverview.vue
+++ b/src/views/OfficeOverview.vue
@@ -31,6 +31,7 @@ import {
 } from '@mdi/js'
 import FileCard from '../components/FileCard.vue'
 import FilePreview from '../components/FilePreview.vue'
+import ShareIndicator from '../components/ShareIndicator.vue'
 import TemplateSection from '../components/TemplateSection.vue'
 import { getAllOfficeFiles, invalidateOfficeFilesCache, MAX_DISPLAY_FILES } from '../services/officeFiles.ts'
 import { getTemplates, createFromTemplate } from '../services/templates.ts'
@@ -313,6 +314,10 @@ fetchAll()
 									<FilePreview :file="file" :alt="file.basename" />
 								</template>
 
+								<template #overlay>
+									<ShareIndicator :file="file" :current-uid="currentUid" />
+								</template>
+
 								<template #icon>
 									<NcIconSvgWrapper :svg="activeCreator.iconSvgInline ?? ''" :size="20" />
 								</template>
@@ -341,10 +346,13 @@ fetchAll()
 										class="office-overview__list-thumb" />
 								</template>
 								<template #indicator>
-									<NcIconSvgWrapper v-if="file.attributes?.favorite === 1"
-										:path="mdiStar"
-										:size="16"
-										class="office-overview__favourite-icon" />
+									<span class="office-overview__indicators">
+										<NcIconSvgWrapper v-if="file.attributes?.favorite === 1"
+											:path="mdiStar"
+											:size="16"
+											class="office-overview__favourite-icon" />
+										<ShareIndicator :file="file" :current-uid="currentUid" :size="16" />
+									</span>
 								</template>
 								<template #subname>
 									<NcDateTime :timestamp="file.mtime" />
@@ -461,6 +469,12 @@ fetchAll()
 	flex-shrink: 0;
 }
 
+.office-overview__indicators {
+	display: inline-flex;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 1);
+}
+
 .office-overview__favourite-icon {
 	color: var(--color-warning);
 }