From 3cd6d7ad4d21cc4bfb5c356acee129888508b9c6 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 2 Jul 2024 09:13:35 +0200
Subject: [PATCH 1/3] feat(NcCollectionList): merge nextcloud-vue-collections
 into nextcloud/vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

(cherry picked from commit 0637422d32574e72319338d3b3177e7b36a507d6)
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NcCollectionList/NcCollectionList.vue     | 345 ++++++++++++++++++
 .../NcCollectionList/NcCollectionListItem.vue | 313 ++++++++++++++++
 .../NcCollectionList/collectionservice.js     |  71 ++++
 .../NcCollectionList/collectionstore.js       |  82 +++++
 src/components/NcCollectionList/index.js      |   6 +
 src/components/index.ts                       |   1 +
 6 files changed, 818 insertions(+)
 create mode 100644 src/components/NcCollectionList/NcCollectionList.vue
 create mode 100644 src/components/NcCollectionList/NcCollectionListItem.vue
 create mode 100644 src/components/NcCollectionList/collectionservice.js
 create mode 100644 src/components/NcCollectionList/collectionstore.js
 create mode 100644 src/components/NcCollectionList/index.js

diff --git a/src/components/NcCollectionList/NcCollectionList.vue b/src/components/NcCollectionList/NcCollectionList.vue
new file mode 100644
index 00000000..483ff886
--- /dev/null
+++ b/src/components/NcCollectionList/NcCollectionList.vue
@@ -0,0 +1,345 @@
+<!--
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<ul v-if="collections && type && id" id="collection-list" class="collection-list">
+		<li @click="showSelect">
+			<div class="avatar">
+				<span class="icon-projects" />
+			</div>
+			<div id="collection-select-container">
+				<NcSelect ref="select"
+					v-model="value"
+					:aria-label-combobox="t('core', 'Add to a project')"
+					:options="options"
+					:placeholder="placeholder"
+					label="title"
+					:limit="5"
+					@close="isSelectOpen = false"
+					@open="isSelectOpen = true"
+					@option:selected="select"
+					@search="search">
+					<template #selected-option="option">
+						<span class="option__desc">
+							<span class="option__title">{{ option.title }}</span>
+						</span>
+					</template>
+					<template #option="option">
+						<span class="option__wrapper">
+							<span v-if="option.class" :class="option.class" class="avatar" />
+							<NcAvatar v-else-if="option.method !== 2" allow-placeholder :display-name="option.title" />
+							<span class="option__title">{{ option.title }}</span>
+						</span>
+					</template>
+					<p class="hint">
+						{{ t('core', 'Connect items to a project to make them easier to find') }}
+					</p>
+				</NcSelect>
+			</div>
+		</li>
+		<transition name="fade">
+			<li v-if="error" class="error">
+				{{ error }}
+			</li>
+		</transition>
+		<NcCollectionListItem v-for="collection in collections" :key="collection.id" :collection="collection" />
+	</ul>
+</template>
+
+<script>
+import debounce from 'debounce'
+import { t } from '@nextcloud/l10n'
+
+import NcAvatar from '../NcAvatar/index.js'
+import NcSelect from '../NcSelect/index.js'
+import NcCollectionListItem from './NcCollectionListItem.vue'
+
+import { state, actions } from './collectionstore.js'
+
+const METHOD_CREATE_COLLECTION = 0
+const METHOD_ADD_TO_COLLECTION = 1
+
+const _debouncedSearch = debounce(
+	function(query, loading) {
+		if (query !== '') {
+			loading(true)
+			actions.search(query).then((collections) => {
+				this.searchCollections = collections
+			}).catch(e => {
+				console.error('Failed to search for collections', e)
+			}).finally(() => {
+				loading(false)
+			})
+		}
+	}, 500)
+
+export default {
+	name: 'NcCollectionList',
+
+	components: {
+		NcCollectionListItem,
+		NcAvatar,
+		NcSelect,
+	},
+
+	props: {
+		/**
+		 * Resource type identifier
+		 */
+		type: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Unique id of the resource
+		 */
+		id: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Name of the resource
+		 */
+		name: {
+			type: String,
+			default: '',
+		},
+
+		isActive: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	setup() {
+		return {
+			state,
+		}
+	},
+
+	data() {
+		return {
+			selectIsOpen: false,
+			generatingCodes: false,
+			codes: undefined,
+			value: null,
+			model: {},
+			searchCollections: [],
+			error: null,
+			isSelectOpen: false,
+		}
+	},
+
+	computed: {
+		collections() {
+			return this.state.collections.filter((collection) => {
+				return typeof collection.resources.find((resource) => resource && resource.id === '' + this.id && resource.type === this.type) !== 'undefined'
+			})
+		},
+
+		placeholder() {
+			return this.isSelectOpen ? t('core', 'Type to search for existing projects') : t('core', 'Add to a project')
+		},
+
+		options() {
+			const options = []
+			window.OCP.Collaboration.getTypes().sort().forEach((type) => {
+				options.push({
+					method: METHOD_CREATE_COLLECTION,
+					type,
+					title: window.OCP.Collaboration.getLabel(type),
+					class: window.OCP.Collaboration.getIcon(type),
+					action: () => window.OCP.Collaboration.trigger(type),
+				})
+			})
+			for (const index in this.searchCollections) {
+				if (this.collections.findIndex((collection) => collection.id === this.searchCollections[index].id) === -1) {
+					options.push({
+						method: METHOD_ADD_TO_COLLECTION,
+						title: this.searchCollections[index].name,
+						collectionId: this.searchCollections[index].id,
+					})
+				}
+			}
+			return options
+		},
+	},
+
+	watch: {
+		type() {
+			if (this.isActive) {
+				actions.fetchCollectionsByResource({
+					resourceType: this.type,
+					resourceId: this.id,
+				})
+			}
+		},
+
+		id() {
+			if (this.isActive) {
+				actions.fetchCollectionsByResource({
+					resourceType: this.type,
+					resourceId: this.id,
+				})
+			}
+		},
+
+		isActive(isActive) {
+			if (isActive) {
+				actions.fetchCollectionsByResource({
+					resourceType: this.type,
+					resourceId: this.id,
+				})
+			}
+		},
+	},
+
+	mounted() {
+		actions.fetchCollectionsByResource({
+			resourceType: this.type,
+			resourceId: this.id,
+		})
+	},
+
+	methods: {
+		t,
+
+		select(selectedOption, id) {
+			if (selectedOption.method === METHOD_CREATE_COLLECTION) {
+				selectedOption.action().then((id) => {
+					actions.createCollection({
+						baseResourceType: this.type,
+						baseResourceId: this.id,
+						resourceType: selectedOption.type,
+						resourceId: id,
+						name: this.name,
+					}).catch((e) => {
+						this.setError(t('core', 'Failed to create a project'), e)
+					})
+				}).catch((e) => {
+					console.error('No resource selected', e)
+				})
+			}
+
+			if (selectedOption.method === METHOD_ADD_TO_COLLECTION) {
+				actions.addResourceToCollection({
+					collectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.id,
+				}).catch((e) => {
+					this.setError(t('core', 'Failed to add the item to the project'), e)
+				})
+			}
+		},
+
+		search(query, loading) {
+			_debouncedSearch.bind(this)(query, loading)
+		},
+
+		showSelect() {
+			this.selectIsOpen = true
+			this.$refs.select.$el.focus()
+		},
+
+		hideSelect() {
+			this.selectIsOpen = false
+		},
+
+		isVueComponent(object) {
+			return object._isVue
+		},
+
+		setError(error, e) {
+			console.error(error, e)
+			this.error = error
+			setTimeout(() => {
+				this.error = null
+			}, 5000)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.collection-list * {
+	box-sizing: border-box;
+}
+
+.collection-list > li {
+	display: flex;
+	align-items: start;
+	gap: 12px;
+
+	& > .avatar {
+		margin-top: auto;
+	}
+}
+
+#collection-select-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.v-select {
+	// NcAvatar in the dropdown
+	span.avatar {
+		display: block;
+		padding: 16px;
+		opacity: .7;
+		background-repeat: no-repeat;
+		background-position: center;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+
+p.hint {
+	z-index: 1;
+	// fix alignment
+	margin-top: -16px;
+	padding: 8px 8px;
+	color: var(--color-text-maxcontrast);
+	line-height: normal;
+}
+
+div.avatar {
+	width: 32px;
+	height: 32px;
+	margin: 0;
+	padding: 8px;
+	background-color: var(--color-background-dark);
+	margin-top: 30px;
+}
+
+/** TODO provide white icon in core */
+.icon-projects {
+	display: block;
+	padding: 8px;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+.option__wrapper {
+	display: flex;
+
+	.avatar {
+		display: block;
+		background-color: var(--color-background-darker) !important;
+	}
+
+	.option__title {
+		padding: 4px;
+	}
+}
+
+.fade-enter-active, .fade-leave-active {
+	transition: opacity .5s;
+}
+
+.fade-enter, .fade-leave-to {
+	opacity: 0;
+}
+
+</style>
diff --git a/src/components/NcCollectionList/NcCollectionListItem.vue b/src/components/NcCollectionList/NcCollectionListItem.vue
new file mode 100644
index 00000000..b9171365
--- /dev/null
+++ b/src/components/NcCollectionList/NcCollectionListItem.vue
@@ -0,0 +1,313 @@
+<!--
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<li class="collection-list-item">
+		<NcAvatar :display-name="collection.name" allow-placeholder class="collection-avatar" />
+		<span v-if="newName === null"
+			class="collection-item-name"
+			title=""
+			@click="showDetails">{{ collection.name }}</span>
+		<form v-else :class="{'shouldshake': error.rename }" @submit.prevent="renameCollection">
+			<input v-model="newName"
+				type="text"
+				autocomplete="off"
+				autocapitalize="off">
+			<input type="submit" value="" class="icon-confirm">
+		</form>
+		<div v-if="!detailsOpen && newName === null" class="linked-icons">
+			<a v-for="resource in limitedResources(collection)"
+				:key="resource.type + '|' + resource.id"
+				:title="resource.name"
+				:href="resource.link"
+				:class="typeClass(resource)"><img :src="iconUrl(resource)"></a>
+		</div>
+
+		<span v-if="newName === null" class="sharingOptionsGroup">
+			<NcActions>
+				<NcActionButton icon="icon-info"
+					@click.prevent="toggleDetails">
+					{{ detailsOpen ? t('core', 'Hide details') : t('core', 'Show details') }}
+				</NcActionButton>
+				<NcActionButton icon="icon-rename"
+					@click.prevent="openRename">
+					{{ t('core', 'Rename project') }}
+				</NcActionButton>
+			</NcActions>
+		</span>
+
+		<transition name="fade">
+			<div v-if="error.rename" class="error">
+				{{ error.rename }}
+			</div>
+		</transition>
+		<transition name="fade">
+			<ul v-if="detailsOpen" class="resource-list-details">
+				<li v-for="resource in collection.resources"
+					:key="resource.type + '|' + resource.id"
+					:class="typeClass(resource)">
+					<a :href="resource.link"><img :src="iconUrl(resource)"><span class="resource-name">{{ resource.name || '' }}</span></a>
+					<span class="icon-close" @click="removeResource(collection, resource)" />
+				</li>
+			</ul>
+		</transition>
+	</li>
+</template>
+
+<script>
+import { set } from 'vue'
+import { t } from '@nextcloud/l10n'
+
+import NcActions from '../NcActions/index.js'
+import NcActionButton from '../NcActionButton/index.js'
+import NcAvatar from '../NcAvatar/index.js'
+
+import { actions } from './collectionstore.js'
+
+export default {
+	name: 'NcCollectionListItem',
+
+	components: {
+		NcAvatar,
+		NcActions,
+		NcActionButton,
+	},
+
+	props: {
+		collection: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	data() {
+		return {
+			detailsOpen: false,
+			newName: null,
+			error: {},
+		}
+	},
+
+	computed: {
+		getIcon() {
+			return (resource) => [resource.iconClass]
+		},
+
+		typeClass() {
+			return (resource) => 'resource-type-' + resource.type
+		},
+
+		limitedResources() {
+			return (collection) => collection.resources ? collection.resources.slice(0, 2) : []
+		},
+
+		iconUrl() {
+			return (resource) => {
+				if (resource.mimetype) {
+					return OC.MimeType.getIconUrl(resource.mimetype)
+				}
+				if (resource.iconUrl) {
+					return resource.iconUrl
+				}
+				return ''
+			}
+		},
+	},
+
+	methods: {
+		t,
+
+		toggleDetails() {
+			this.detailsOpen = !this.detailsOpen
+		},
+
+		showDetails() {
+			this.detailsOpen = true
+		},
+
+		hideDetails() {
+			this.detailsOpen = false
+		},
+
+		removeResource(collection, resource) {
+			actions.removeResource({
+				collectionId: collection.id, resourceType: resource.type, resourceId: resource.id,
+			})
+		},
+
+		openRename() {
+			this.newName = this.collection.name
+		},
+
+		renameCollection() {
+			if (this.newName === '') {
+				this.newName = null
+				return
+			}
+			actions.renameCollection({
+				collectionId: this.collection.id,
+				name: this.newName,
+			}).then((collection) => {
+				this.newName = null
+			}).catch((e) => {
+				this.$set(this.error, 'rename', t('core', 'Failed to rename the project'))
+				console.error(e)
+				setTimeout(() => {
+					set(this.error, 'rename', null)
+				}, 3000)
+			})
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.fade-enter-active, .fade-leave-active {
+	transition: opacity .3s ease;
+}
+
+.fade-enter, .fade-leave-to
+	/* .fade-leave-active below version 2.1.8 */
+{
+	opacity: 0;
+}
+
+.linked-icons {
+	display: flex;
+
+	img {
+		padding: 12px;
+		height: 44px;
+		display: block;
+		background-repeat: no-repeat;
+		background-position: center;
+		opacity: 0.7;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+
+.popovermenu {
+	display: none;
+
+	&.open {
+		display: block;
+	}
+}
+
+li.collection-list-item {
+	flex-wrap: wrap;
+	height: auto;
+	cursor: pointer;
+	margin-bottom: 0 !important;
+
+	.collection-avatar {
+		margin-top: 6px;
+	}
+
+	form, .collection-item-name {
+		flex-basis: 10%;
+		flex-grow: 1;
+		display: flex;
+	}
+
+	.collection-item-name {
+		padding: 12px 9px;
+	}
+
+	input {
+		margin-top: 4px;
+		border-color: var(--color-border-maxcontrast);
+
+		&[type=text] {
+			flex-grow: 1;
+		}
+	}
+
+	.error {
+		flex-basis: 100%;
+		width: 100%;
+	}
+
+	.resource-list-details {
+		flex-basis: 100%;
+		width: 100%;
+
+		li {
+			display: flex;
+			margin-left: 44px;
+			border-radius: 3px;
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--color-background-dark);
+			}
+
+			a {
+				flex-grow: 1;
+				padding: 3px;
+				max-width: calc(100% - 30px);
+				display: flex;
+			}
+		}
+
+		span {
+			display: inline-block;
+			vertical-align: top;
+			margin-right: 10px;
+		}
+
+		span.resource-name {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			position: relative;
+			vertical-align: top;
+			white-space: nowrap;
+			flex-grow: 1;
+			padding: 4px;
+		}
+
+		img {
+			width: 24px;
+			height: 24px;
+		}
+
+		.icon-close {
+			opacity: .7;
+
+			&:hover, &:focus {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+.shouldshake {
+	animation: shake 0.6s 1 linear;
+}
+
+@keyframes shake {
+	0% {
+		transform: translate(15px);
+	}
+	20% {
+		transform: translate(-15px);
+	}
+	40% {
+		transform: translate(7px);
+	}
+	60% {
+		transform: translate(-7px);
+	}
+	80% {
+		transform: translate(3px);
+	}
+	100% {
+		transform: translate(0px);
+	}
+}
+</style>
diff --git a/src/components/NcCollectionList/collectionservice.js b/src/components/NcCollectionList/collectionservice.js
new file mode 100644
index 00000000..d49dfab5
--- /dev/null
+++ b/src/components/NcCollectionList/collectionservice.js
@@ -0,0 +1,71 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
+class CollectionService {
+
+	constructor() {
+		this.http = axios
+	}
+
+	listCollection(collectionId) {
+		return this.http.get(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }))
+	}
+
+	renameCollection(collectionId, collectionName) {
+		return this.http.put(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), {
+			collectionName,
+		}).then(result => {
+			return result.data.ocs.data
+		})
+	}
+
+	getCollectionsByResource(resourceType, resourceId) {
+		return this.http.get(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }))
+			.then(result => {
+				return result.data.ocs.data
+			})
+	}
+
+	createCollection(resourceType, resourceId, name) {
+		return this.http.post(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }), {
+			name,
+		})
+			.then((response) => {
+				return response.data.ocs.data
+			})
+	}
+
+	addResource(collectionId, resourceType, resourceId) {
+		resourceId = '' + resourceId
+		return this.http.post(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), {
+			resourceType,
+			resourceId,
+		}).then((response) => {
+			return response.data.ocs.data
+		})
+	}
+
+	removeResource(collectionId, resourceType, resourceId) {
+		return this.http.delete(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { params: { resourceType, resourceId } })
+			.then((response) => {
+				return response.data.ocs.data
+			})
+	}
+
+	search(query) {
+		return this.http.get(generateOcsUrl('collaboration/resources/collections/search/{query}', { query }))
+			.then((response) => {
+				return response.data.ocs.data
+			})
+	}
+
+}
+
+const service = new CollectionService()
+
+export default service
diff --git a/src/components/NcCollectionList/collectionstore.js b/src/components/NcCollectionList/collectionstore.js
new file mode 100644
index 00000000..e6aa1c67
--- /dev/null
+++ b/src/components/NcCollectionList/collectionstore.js
@@ -0,0 +1,82 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { reactive, set } from 'vue'
+import service from './collectionservice.js'
+
+const state = reactive({
+	collections: [],
+})
+
+const mutations = {
+	addCollections(collections) {
+		set(state, 'collections', collections)
+	},
+	addCollection(collection) {
+		state.collections.push(collection)
+	},
+	removeCollection(collectionId) {
+		set(state, 'collections', state.collections.filter(item => item.id !== collectionId))
+	},
+	updateCollection(collection) {
+		const index = state.collections.findIndex((_item) => _item.id === collection.id)
+		if (index !== -1) {
+			set(state.collections, index, collection)
+		} else {
+			state.collections.push(collection)
+		}
+	},
+}
+
+const actions = {
+	fetchCollectionsByResource({ resourceType, resourceId }) {
+		return service.getCollectionsByResource(resourceType, resourceId).then((collections) => {
+			mutations.addCollections(collections)
+			return collections
+		})
+	},
+	createCollection({ baseResourceType, baseResourceId, resourceType, resourceId, name }) {
+		return service.createCollection(baseResourceType, baseResourceId, name).then((collection) => {
+			mutations.addCollection(collection)
+			actions.addResourceToCollection({
+				collectionId: collection.id,
+				resourceType,
+				resourceId,
+			})
+		})
+	},
+	renameCollection({ collectionId, name }) {
+		return service.renameCollection(collectionId, name).then((collection) => {
+			mutations.updateCollection(collection)
+			return collection
+		})
+	},
+	addResourceToCollection({ collectionId, resourceType, resourceId }) {
+		return service.addResource(collectionId, resourceType, resourceId).then((collection) => {
+			mutations.updateCollection(collection)
+			return collection
+		})
+	},
+	removeResource({ collectionId, resourceType, resourceId }) {
+		return service.removeResource(collectionId, resourceType, resourceId).then((collection) => {
+			if (collection.resources.length > 0) {
+				mutations.updateCollection(collection)
+			} else {
+				mutations.removeCollection(collection)
+			}
+		})
+	},
+	search(query) {
+		return service.search(query)
+	},
+
+}
+
+const store = {
+	actions,
+	state,
+}
+export default store
+export { actions, state }
diff --git a/src/components/NcCollectionList/index.js b/src/components/NcCollectionList/index.js
new file mode 100644
index 00000000..98ca1dea
--- /dev/null
+++ b/src/components/NcCollectionList/index.js
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+export { default as NcCollectionListItem } from './NcCollectionListItem.vue'
+export { default } from './NcCollectionList.vue'
diff --git a/src/components/index.ts b/src/components/index.ts
index 7e4628d9..fd7a2419 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -37,6 +37,7 @@ export { default as NcBreadcrumbs } from './NcBreadcrumbs/index.js'
 export { default as NcButton } from './NcButton/index'
 export { default as NcCheckboxRadioSwitch } from './NcCheckboxRadioSwitch/index.js'
 export { default as NcChip } from './NcChip/index'
+export { default as NcCollectionList, NcCollectionListItem } from './NcCollectionList/index.js'
 export { default as NcColorPicker } from './NcColorPicker/index.js'
 export { default as NcContent } from './NcContent/index.js'
 export { default as NcCounterBubble } from './NcCounterBubble/index.js'

From 100bb3a6f8860d26f5c2f1450546119ee862021b Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 2 Jul 2024 11:05:58 +0200
Subject: [PATCH 2/3] refactor(NcCollectionList): refactor code

- migrate service from Class to simple functions
- migrate store to composable
- make NcCollectionListItem a visual component
- update avatar styles
- use RouterLink for relative paths in the same app
- update message.pot translations
- add docs

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

(cherry picked from commit 94177fec585e2b5c3e0e8262382cc9d37d295c36)
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 l10n/messages.pot                             |  27 +++
 .../NcCollectionList/NcCollectionList.vue     | 188 ++++++++++--------
 .../NcCollectionList/NcCollectionListItem.vue |  93 +++++----
 .../NcCollectionList/collectionservice.js     |  71 -------
 .../NcCollectionList/collectionstore.js       |  82 --------
 src/components/NcCollectionList/index.js      |   1 -
 src/components/NcCollectionList/service.ts    |  80 ++++++++
 .../NcCollectionList/useCollections.js        |  92 +++++++++
 src/components/index.ts                       |   2 +-
 styleguide.config.cjs                         |   1 +
 10 files changed, 362 insertions(+), 275 deletions(-)
 delete mode 100644 src/components/NcCollectionList/collectionservice.js
 delete mode 100644 src/components/NcCollectionList/collectionstore.js
 create mode 100644 src/components/NcCollectionList/service.ts
 create mode 100644 src/components/NcCollectionList/useCollections.js

diff --git a/l10n/messages.pot b/l10n/messages.pot
index a5069f70..59eba91a 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -27,6 +27,9 @@ msgstr ""
 msgid "Activities"
 msgstr ""
 
+msgid "Add to a project"
+msgstr ""
+
 msgid "Animals & Nature"
 msgstr ""
 
@@ -102,6 +105,9 @@ msgstr ""
 msgid "Confirm changes"
 msgstr ""
 
+msgid "Connect items to a project to make them easier to find"
+msgstr ""
+
 msgid "Custom"
 msgstr ""
 
@@ -136,6 +142,15 @@ msgstr ""
 msgid "External documentation for {name}"
 msgstr ""
 
+msgid "Failed to add the item to the project"
+msgstr ""
+
+msgid "Failed to create a project"
+msgstr ""
+
+msgid "Failed to rename the project"
+msgstr ""
+
 msgid "Favorite"
 msgstr ""
 
@@ -161,6 +176,9 @@ msgstr ""
 msgid "Gold"
 msgstr ""
 
+msgid "Hide details"
+msgstr ""
+
 msgid "Hide password"
 msgstr ""
 
@@ -295,6 +313,9 @@ msgstr ""
 msgid "Related team resources"
 msgstr ""
 
+msgid "Rename project"
+msgstr ""
+
 #. TRANSLATORS: A color name for RGB(191, 103, 139)
 msgid "Rosy brown"
 msgstr ""
@@ -337,6 +358,9 @@ msgstr ""
 msgid "Settings navigation"
 msgstr ""
 
+msgid "Show details"
+msgstr ""
+
 msgid "Show password"
 msgstr ""
 
@@ -370,6 +394,9 @@ msgstr ""
 msgid "Travel & Places"
 msgstr ""
 
+msgid "Type to search for existing projects"
+msgstr ""
+
 msgid "Type to search time zone"
 msgstr ""
 
diff --git a/src/components/NcCollectionList/NcCollectionList.vue b/src/components/NcCollectionList/NcCollectionList.vue
index 483ff886..85058240 100644
--- a/src/components/NcCollectionList/NcCollectionList.vue
+++ b/src/components/NcCollectionList/NcCollectionList.vue
@@ -3,6 +3,19 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<docs>
+Provides a Vue standalone component for Nextcloud Projects feature introduced in Nextcloud 16. Replaces deprecated `nextcloud-vue-collections` library.
+
+Projects feature is deprecated since Nextcloud 25, and superseded by Related resources. See [NcRelatedResourcesPanel](#/Components/NcRelatedResourcesPanel) documentation for more information.
+
+### Usage
+
+To enable feature in Nextcloud, run following command:
+```sh
+occ config:system:set --value true 'projects.enabled'
+```
+</docs>
+
 <template>
 	<ul v-if="collections && type && id" id="collection-list" class="collection-list">
 		<li @click="showSelect">
@@ -12,7 +25,7 @@
 			<div id="collection-select-container">
 				<NcSelect ref="select"
 					v-model="value"
-					:aria-label-combobox="t('core', 'Add to a project')"
+					:aria-label-combobox="t('Add to a project')"
 					:options="options"
 					:placeholder="placeholder"
 					label="title"
@@ -34,7 +47,7 @@
 						</span>
 					</template>
 					<p class="hint">
-						{{ t('core', 'Connect items to a project to make them easier to find') }}
+						{{ t('Connect items to a project to make them easier to find') }}
 					</p>
 				</NcSelect>
 			</div>
@@ -44,37 +57,30 @@
 				{{ error }}
 			</li>
 		</transition>
-		<NcCollectionListItem v-for="collection in collections" :key="collection.id" :collection="collection" />
+		<NcCollectionListItem v-for="collection in collections"
+			:key="collection.id"
+			:collection="collection"
+			:error="collectionsError[collection.id]"
+			@rename-collection="renameCollectionFromItem"
+			@remove-resource="removeResourceFromCollection" />
 	</ul>
 </template>
 
 <script>
 import debounce from 'debounce'
-import { t } from '@nextcloud/l10n'
+import { ref } from 'vue'
+import { t } from '../../l10n.js'
 
 import NcAvatar from '../NcAvatar/index.js'
 import NcSelect from '../NcSelect/index.js'
 import NcCollectionListItem from './NcCollectionListItem.vue'
 
-import { state, actions } from './collectionstore.js'
+import { useCollections } from './useCollections.js'
+import { searchService } from './service.ts'
 
 const METHOD_CREATE_COLLECTION = 0
 const METHOD_ADD_TO_COLLECTION = 1
 
-const _debouncedSearch = debounce(
-	function(query, loading) {
-		if (query !== '') {
-			loading(true)
-			actions.search(query).then((collections) => {
-				this.searchCollections = collections
-			}).catch(e => {
-				console.error('Failed to search for collections', e)
-			}).finally(() => {
-				loading(false)
-			})
-		}
-	}, 500)
-
 export default {
 	name: 'NcCollectionList',
 
@@ -106,7 +112,9 @@ export default {
 			type: String,
 			default: '',
 		},
-
+		/**
+		 * Whether the component is active (to start fetch resources)
+		 */
 		isActive: {
 			type: Boolean,
 			default: true,
@@ -114,8 +122,38 @@ export default {
 	},
 
 	setup() {
+		const {
+			storedCollections,
+			fetchCollectionsByResource,
+			createCollection,
+			addResourceToCollection,
+			removeResourceFromCollection,
+			renameCollection,
+		} = useCollections()
+
+		const searchCollections = ref([])
+		const search = debounce(function(query, loading) {
+			if (query !== '') {
+				loading(true)
+				searchService(query).then(collections => {
+					searchCollections.value = collections
+				}).catch(e => {
+					console.error('Failed to search for collections', e)
+				}).finally(() => {
+					loading(false)
+				})
+			}
+		}, 500)
+
 		return {
-			state,
+			storedCollections,
+			fetchCollectionsByResource,
+			createCollection,
+			addResourceToCollection,
+			removeResourceFromCollection,
+			renameCollection,
+			searchCollections,
+			search,
 		}
 	},
 
@@ -126,7 +164,7 @@ export default {
 			codes: undefined,
 			value: null,
 			model: {},
-			searchCollections: [],
+			collectionsError: {},
 			error: null,
 			isSelectOpen: false,
 		}
@@ -134,18 +172,20 @@ export default {
 
 	computed: {
 		collections() {
-			return this.state.collections.filter((collection) => {
-				return typeof collection.resources.find((resource) => resource && resource.id === '' + this.id && resource.type === this.type) !== 'undefined'
-			})
+			return this.storedCollections.filter(collection => collection.resources
+				.some(resource => resource && resource.id === String(this.id) && resource.type === this.type),
+			)
 		},
 
 		placeholder() {
-			return this.isSelectOpen ? t('core', 'Type to search for existing projects') : t('core', 'Add to a project')
+			return this.isSelectOpen
+				? t('Type to search for existing projects')
+				: t('Add to a project')
 		},
 
 		options() {
 			const options = []
-			window.OCP.Collaboration.getTypes().sort().forEach((type) => {
+			window.OCP.Collaboration.getTypes().sort().forEach(type => {
 				options.push({
 					method: METHOD_CREATE_COLLECTION,
 					type,
@@ -155,7 +195,7 @@ export default {
 				})
 			})
 			for (const index in this.searchCollections) {
-				if (this.collections.findIndex((collection) => collection.id === this.searchCollections[index].id) === -1) {
+				if (!this.collections.find(collection => collection.id === this.searchCollections[index].id)) {
 					options.push({
 						method: METHOD_ADD_TO_COLLECTION,
 						title: this.searchCollections[index].name,
@@ -165,58 +205,43 @@ export default {
 			}
 			return options
 		},
+
+		resourceIdentifier() {
+			return {
+				resourceType: this.type,
+				resourceId: this.id,
+				isActive: this.isActive,
+			}
+		},
 	},
 
 	watch: {
-		type() {
-			if (this.isActive) {
-				actions.fetchCollectionsByResource({
-					resourceType: this.type,
-					resourceId: this.id,
-				})
-			}
+		resourceIdentifier: {
+			deep: true,
+			immediate: true,
+			handler(resourceIdentifier) {
+				if (!resourceIdentifier.isActive || !resourceIdentifier.resourceId || !resourceIdentifier.resourceType) {
+					return
+				}
+				this.fetchCollectionsByResource(resourceIdentifier)
+			},
 		},
-
-		id() {
-			if (this.isActive) {
-				actions.fetchCollectionsByResource({
-					resourceType: this.type,
-					resourceId: this.id,
-				})
-			}
-		},
-
-		isActive(isActive) {
-			if (isActive) {
-				actions.fetchCollectionsByResource({
-					resourceType: this.type,
-					resourceId: this.id,
-				})
-			}
-		},
-	},
-
-	mounted() {
-		actions.fetchCollectionsByResource({
-			resourceType: this.type,
-			resourceId: this.id,
-		})
 	},
 
 	methods: {
 		t,
 
-		select(selectedOption, id) {
+		select(selectedOption) {
 			if (selectedOption.method === METHOD_CREATE_COLLECTION) {
-				selectedOption.action().then((id) => {
-					actions.createCollection({
+				selectedOption.action().then(resourceId => {
+					this.createCollection({
 						baseResourceType: this.type,
 						baseResourceId: this.id,
 						resourceType: selectedOption.type,
-						resourceId: id,
+						resourceId,
 						name: this.name,
 					}).catch((e) => {
-						this.setError(t('core', 'Failed to create a project'), e)
+						this.setError(t('Failed to create a project'), e)
 					})
 				}).catch((e) => {
 					console.error('No resource selected', e)
@@ -224,16 +249,14 @@ export default {
 			}
 
 			if (selectedOption.method === METHOD_ADD_TO_COLLECTION) {
-				actions.addResourceToCollection({
+				this.addResourceToCollection({
 					collectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.id,
 				}).catch((e) => {
-					this.setError(t('core', 'Failed to add the item to the project'), e)
+					this.setError(t('Failed to add the item to the project'), e)
 				})
 			}
-		},
 
-		search(query, loading) {
-			_debouncedSearch.bind(this)(query, loading)
+			this.value = null
 		},
 
 		showSelect() {
@@ -241,14 +264,6 @@ export default {
 			this.$refs.select.$el.focus()
 		},
 
-		hideSelect() {
-			this.selectIsOpen = false
-		},
-
-		isVueComponent(object) {
-			return object._isVue
-		},
-
 		setError(error, e) {
 			console.error(error, e)
 			this.error = error
@@ -256,6 +271,17 @@ export default {
 				this.error = null
 			}, 5000)
 		},
+
+		renameCollectionFromItem({ collectionId, name }) {
+			this.renameCollection({ collectionId, name })
+				.catch((e) => {
+					console.error(t('Failed to rename the project'), e)
+					this.collectionsError[collectionId] = t('Failed to rename the project')
+					setTimeout(() => {
+						this.collectionsError[collectionId] = null
+					}, 5000)
+				})
+		},
 	},
 }
 </script>
@@ -267,11 +293,11 @@ export default {
 
 .collection-list > li {
 	display: flex;
-	align-items: start;
+	align-items: center;
 	gap: 12px;
 
 	& > .avatar {
-		margin-top: auto;
+		margin-top: 0;
 	}
 }
 
@@ -326,6 +352,8 @@ div.avatar {
 
 	.avatar {
 		display: block;
+		width: 32px;
+		height: 32px;
 		background-color: var(--color-background-darker) !important;
 	}
 
diff --git a/src/components/NcCollectionList/NcCollectionListItem.vue b/src/components/NcCollectionList/NcCollectionListItem.vue
index b9171365..efb95a8c 100644
--- a/src/components/NcCollectionList/NcCollectionListItem.vue
+++ b/src/components/NcCollectionList/NcCollectionListItem.vue
@@ -10,7 +10,7 @@
 			class="collection-item-name"
 			title=""
 			@click="showDetails">{{ collection.name }}</span>
-		<form v-else :class="{'shouldshake': error.rename }" @submit.prevent="renameCollection">
+		<form v-else :class="{'should-shake': error }" @submit.prevent="renameCollection">
 			<input v-model="newName"
 				type="text"
 				autocomplete="off"
@@ -18,37 +18,46 @@
 			<input type="submit" value="" class="icon-confirm">
 		</form>
 		<div v-if="!detailsOpen && newName === null" class="linked-icons">
-			<a v-for="resource in limitedResources(collection)"
+			<component :is="getComponent(resource).component"
+				v-for="resource in resources.slice(0, 2)"
 				:key="resource.type + '|' + resource.id"
 				:title="resource.name"
-				:href="resource.link"
-				:class="typeClass(resource)"><img :src="iconUrl(resource)"></a>
+				:to="getComponent(resource).to"
+				:href="getComponent(resource).href"
+				:class="typeClass(resource)">
+				<img :src="iconUrl(resource)" :alt="resource.name">
+			</component>
 		</div>
 
 		<span v-if="newName === null" class="sharingOptionsGroup">
 			<NcActions>
 				<NcActionButton icon="icon-info"
 					@click.prevent="toggleDetails">
-					{{ detailsOpen ? t('core', 'Hide details') : t('core', 'Show details') }}
+					{{ detailsOpen ? t('Hide details') : t('Show details') }}
 				</NcActionButton>
 				<NcActionButton icon="icon-rename"
 					@click.prevent="openRename">
-					{{ t('core', 'Rename project') }}
+					{{ t('Rename project') }}
 				</NcActionButton>
 			</NcActions>
 		</span>
 
 		<transition name="fade">
-			<div v-if="error.rename" class="error">
-				{{ error.rename }}
+			<div v-if="error" class="error">
+				{{ error }}
 			</div>
 		</transition>
 		<transition name="fade">
 			<ul v-if="detailsOpen" class="resource-list-details">
-				<li v-for="resource in collection.resources"
+				<li v-for="resource in resources"
 					:key="resource.type + '|' + resource.id"
 					:class="typeClass(resource)">
-					<a :href="resource.link"><img :src="iconUrl(resource)"><span class="resource-name">{{ resource.name || '' }}</span></a>
+					<component :is="getComponent(resource).component"
+						:to="getComponent(resource).to"
+						:href="getComponent(resource).href">
+						<img :src="iconUrl(resource)" :alt="resource.name">
+						<span class="resource-name">{{ resource.name || '' }}</span>
+					</component>
 					<span class="icon-close" @click="removeResource(collection, resource)" />
 				</li>
 			</ul>
@@ -57,15 +66,13 @@
 </template>
 
 <script>
-import { set } from 'vue'
-import { t } from '@nextcloud/l10n'
+import { t } from '../../l10n.js'
+import { getRoute } from '../NcRichText/autolink.js'
 
 import NcActions from '../NcActions/index.js'
 import NcActionButton from '../NcActionButton/index.js'
 import NcAvatar from '../NcAvatar/index.js'
 
-import { actions } from './collectionstore.js'
-
 export default {
 	name: 'NcCollectionListItem',
 
@@ -80,13 +87,19 @@ export default {
 			type: Object,
 			default: null,
 		},
+
+		error: {
+			type: String,
+			default: undefined,
+		},
 	},
 
+	emits: ['remove-resource', 'rename-collection'],
+
 	data() {
 		return {
 			detailsOpen: false,
 			newName: null,
-			error: {},
 		}
 	},
 
@@ -99,8 +112,19 @@ export default {
 			return (resource) => 'resource-type-' + resource.type
 		},
 
-		limitedResources() {
-			return (collection) => collection.resources ? collection.resources.slice(0, 2) : []
+		resources() {
+			// invalid resources come from server as empty array ([]) and not an object
+			return this.collection.resources?.filter(resource => !Array.isArray(resource)) ?? []
+		},
+
+		getComponent() {
+			return (resource) => {
+				const route = getRoute(this.$router, resource.link)
+
+				return route
+					? { component: 'router-link', to: route, href: undefined }
+					: { component: 'a', to: undefined, href: resource.link }
+			}
 		},
 
 		iconUrl() {
@@ -127,13 +151,11 @@ export default {
 			this.detailsOpen = true
 		},
 
-		hideDetails() {
-			this.detailsOpen = false
-		},
-
 		removeResource(collection, resource) {
-			actions.removeResource({
-				collectionId: collection.id, resourceType: resource.type, resourceId: resource.id,
+			this.$emit('remove-resource', {
+				collectionId: collection.id,
+				resourceType: resource.type,
+				resourceId: resource.id,
 			})
 		},
 
@@ -142,22 +164,13 @@ export default {
 		},
 
 		renameCollection() {
-			if (this.newName === '') {
-				this.newName = null
-				return
+			if (this.newName) {
+				this.$emit('rename-collection', {
+					collectionId: this.collection.id,
+					name: this.newName,
+				})
 			}
-			actions.renameCollection({
-				collectionId: this.collection.id,
-				name: this.newName,
-			}).then((collection) => {
-				this.newName = null
-			}).catch((e) => {
-				this.$set(this.error, 'rename', t('core', 'Failed to rename the project'))
-				console.error(e)
-				setTimeout(() => {
-					set(this.error, 'rename', null)
-				}, 3000)
-			})
+			this.newName = null
 		},
 	},
 }
@@ -206,7 +219,7 @@ li.collection-list-item {
 	margin-bottom: 0 !important;
 
 	.collection-avatar {
-		margin-top: 6px;
+		margin-top: 0;
 	}
 
 	form, .collection-item-name {
@@ -286,7 +299,7 @@ li.collection-list-item {
 	}
 }
 
-.shouldshake {
+.should-shake {
 	animation: shake 0.6s 1 linear;
 }
 
diff --git a/src/components/NcCollectionList/collectionservice.js b/src/components/NcCollectionList/collectionservice.js
deleted file mode 100644
index d49dfab5..00000000
--- a/src/components/NcCollectionList/collectionservice.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import axios from '@nextcloud/axios'
-import { generateOcsUrl } from '@nextcloud/router'
-
-class CollectionService {
-
-	constructor() {
-		this.http = axios
-	}
-
-	listCollection(collectionId) {
-		return this.http.get(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }))
-	}
-
-	renameCollection(collectionId, collectionName) {
-		return this.http.put(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), {
-			collectionName,
-		}).then(result => {
-			return result.data.ocs.data
-		})
-	}
-
-	getCollectionsByResource(resourceType, resourceId) {
-		return this.http.get(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }))
-			.then(result => {
-				return result.data.ocs.data
-			})
-	}
-
-	createCollection(resourceType, resourceId, name) {
-		return this.http.post(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }), {
-			name,
-		})
-			.then((response) => {
-				return response.data.ocs.data
-			})
-	}
-
-	addResource(collectionId, resourceType, resourceId) {
-		resourceId = '' + resourceId
-		return this.http.post(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), {
-			resourceType,
-			resourceId,
-		}).then((response) => {
-			return response.data.ocs.data
-		})
-	}
-
-	removeResource(collectionId, resourceType, resourceId) {
-		return this.http.delete(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { params: { resourceType, resourceId } })
-			.then((response) => {
-				return response.data.ocs.data
-			})
-	}
-
-	search(query) {
-		return this.http.get(generateOcsUrl('collaboration/resources/collections/search/{query}', { query }))
-			.then((response) => {
-				return response.data.ocs.data
-			})
-	}
-
-}
-
-const service = new CollectionService()
-
-export default service
diff --git a/src/components/NcCollectionList/collectionstore.js b/src/components/NcCollectionList/collectionstore.js
deleted file mode 100644
index e6aa1c67..00000000
--- a/src/components/NcCollectionList/collectionstore.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { reactive, set } from 'vue'
-import service from './collectionservice.js'
-
-const state = reactive({
-	collections: [],
-})
-
-const mutations = {
-	addCollections(collections) {
-		set(state, 'collections', collections)
-	},
-	addCollection(collection) {
-		state.collections.push(collection)
-	},
-	removeCollection(collectionId) {
-		set(state, 'collections', state.collections.filter(item => item.id !== collectionId))
-	},
-	updateCollection(collection) {
-		const index = state.collections.findIndex((_item) => _item.id === collection.id)
-		if (index !== -1) {
-			set(state.collections, index, collection)
-		} else {
-			state.collections.push(collection)
-		}
-	},
-}
-
-const actions = {
-	fetchCollectionsByResource({ resourceType, resourceId }) {
-		return service.getCollectionsByResource(resourceType, resourceId).then((collections) => {
-			mutations.addCollections(collections)
-			return collections
-		})
-	},
-	createCollection({ baseResourceType, baseResourceId, resourceType, resourceId, name }) {
-		return service.createCollection(baseResourceType, baseResourceId, name).then((collection) => {
-			mutations.addCollection(collection)
-			actions.addResourceToCollection({
-				collectionId: collection.id,
-				resourceType,
-				resourceId,
-			})
-		})
-	},
-	renameCollection({ collectionId, name }) {
-		return service.renameCollection(collectionId, name).then((collection) => {
-			mutations.updateCollection(collection)
-			return collection
-		})
-	},
-	addResourceToCollection({ collectionId, resourceType, resourceId }) {
-		return service.addResource(collectionId, resourceType, resourceId).then((collection) => {
-			mutations.updateCollection(collection)
-			return collection
-		})
-	},
-	removeResource({ collectionId, resourceType, resourceId }) {
-		return service.removeResource(collectionId, resourceType, resourceId).then((collection) => {
-			if (collection.resources.length > 0) {
-				mutations.updateCollection(collection)
-			} else {
-				mutations.removeCollection(collection)
-			}
-		})
-	},
-	search(query) {
-		return service.search(query)
-	},
-
-}
-
-const store = {
-	actions,
-	state,
-}
-export default store
-export { actions, state }
diff --git a/src/components/NcCollectionList/index.js b/src/components/NcCollectionList/index.js
index 98ca1dea..8b276a03 100644
--- a/src/components/NcCollectionList/index.js
+++ b/src/components/NcCollectionList/index.js
@@ -2,5 +2,4 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-export { default as NcCollectionListItem } from './NcCollectionListItem.vue'
 export { default } from './NcCollectionList.vue'
diff --git a/src/components/NcCollectionList/service.ts b/src/components/NcCollectionList/service.ts
new file mode 100644
index 00000000..a2f33492
--- /dev/null
+++ b/src/components/NcCollectionList/service.ts
@@ -0,0 +1,80 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import axios, { type AxiosResponse } from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import type { OCSResponse } from '@nextcloud/typings/ocs'
+
+/**
+ * Extracts the OCS data from a response
+ * @param response OCS response
+ */
+function extractOcsData(response: AxiosResponse<OCSResponse>) {
+	return response.data.ocs.data
+}
+
+/**
+ * Lists all collections
+ * @param collectionId Collection ID
+ */
+export function listCollectionService(collectionId: number) {
+	return axios.get(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId })).then(extractOcsData)
+}
+
+/**
+ * Renames a collection
+ * @param collectionId Collection ID
+ * @param collectionName New collection name
+ */
+export function renameCollectionService(collectionId: number, collectionName: string) {
+	return axios.put(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { collectionName }).then(extractOcsData)
+}
+
+/**
+ * Lists all collections for a resource
+ * @param resourceType Resource type
+ * @param resourceId Resource ID
+ */
+export function getCollectionsByResourceService(resourceType: string, resourceId: string) {
+	return axios.get(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId })).then(extractOcsData)
+}
+
+/**
+ * Creates a collection
+ * @param resourceType Resource type
+ * @param resourceId Resource ID
+ * @param name Collection name
+ */
+export function createCollectionService(resourceType: string, resourceId: string, name: string) {
+	return axios.post(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }), { name }).then(extractOcsData)
+}
+
+/**
+ * Adds a resource to a collection
+ * @param collectionId Collection ID
+ * @param resourceType Resource type
+ * @param resourceId Resource ID
+ */
+export function addResourceService(collectionId: number, resourceType: string, resourceId: string) {
+	return axios.post(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { resourceType, resourceId }).then(extractOcsData)
+}
+
+/**
+ * Removes a resource from a collection
+ * @param collectionId Collection ID
+ * @param resourceType Resource type
+ * @param resourceId Resource ID
+ */
+export function removeResourceService(collectionId: number, resourceType: string, resourceId: string) {
+	return axios.delete(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { params: { resourceType, resourceId } }).then(extractOcsData)
+}
+
+/**
+ * Searches for collections
+ * @param query Search query
+ */
+export function searchService(query: string) {
+	return axios.get(generateOcsUrl('collaboration/resources/collections/search/{query}', { query })).then(extractOcsData)
+}
diff --git a/src/components/NcCollectionList/useCollections.js b/src/components/NcCollectionList/useCollections.js
new file mode 100644
index 00000000..a5742ac1
--- /dev/null
+++ b/src/components/NcCollectionList/useCollections.js
@@ -0,0 +1,92 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { ref, set } from 'vue'
+import {
+	renameCollectionService,
+	getCollectionsByResourceService,
+	createCollectionService,
+	addResourceService,
+	removeResourceService,
+} from './service.ts'
+
+/**
+ * Use collections composable
+ */
+export function useCollections() {
+	// State
+	const storedCollections = ref([])
+
+	// Mutations
+	const addCollections = (collections) => {
+		set(storedCollections, 'value', collections)
+	}
+
+	const addCollection = (collection) => {
+		set(storedCollections, 'value', [...storedCollections.value, collection])
+	}
+
+	const removeCollection = (collectionId) => {
+		set(storedCollections, 'value', storedCollections.value.filter(item => item.id !== collectionId))
+	}
+
+	const updateCollection = (collection) => {
+		const index = storedCollections.value.findIndex(item => item.id === collection.id)
+		if (index !== -1) {
+			set(storedCollections.value, index, collection)
+		} else {
+			addCollection(collection)
+		}
+	}
+
+	// Actions
+	const fetchCollectionsByResource = async ({ resourceType, resourceId }) => {
+		const collections = await getCollectionsByResourceService(resourceType, resourceId)
+
+		addCollections(collections)
+	}
+
+	const createCollection = async ({ baseResourceType, baseResourceId, resourceType, resourceId, name }) => {
+		const collection = await createCollectionService(baseResourceType, baseResourceId, name)
+
+		addCollection(collection)
+		await addResourceToCollection({
+			collectionId: collection.id,
+			resourceType,
+			resourceId,
+		})
+	}
+
+	const renameCollection = async ({ collectionId, name }) => {
+		const collection = await renameCollectionService(collectionId, name)
+
+		updateCollection(collection)
+	}
+
+	const addResourceToCollection = async ({ collectionId, resourceType, resourceId }) => {
+		const collection = await addResourceService(collectionId, resourceType, String(resourceId))
+
+		updateCollection(collection)
+	}
+
+	const removeResourceFromCollection = async ({ collectionId, resourceType, resourceId }) => {
+		const collection = await removeResourceService(collectionId, resourceType, String(resourceId))
+
+		if (collection.resources.length > 0) {
+			updateCollection(collection)
+		} else {
+			removeCollection(collectionId)
+		}
+	}
+
+	return {
+		storedCollections,
+		fetchCollectionsByResource,
+		createCollection,
+		renameCollection,
+		addResourceToCollection,
+		removeResourceFromCollection,
+	}
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index fd7a2419..971adf61 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -37,7 +37,7 @@ export { default as NcBreadcrumbs } from './NcBreadcrumbs/index.js'
 export { default as NcButton } from './NcButton/index'
 export { default as NcCheckboxRadioSwitch } from './NcCheckboxRadioSwitch/index.js'
 export { default as NcChip } from './NcChip/index'
-export { default as NcCollectionList, NcCollectionListItem } from './NcCollectionList/index.js'
+export { default as NcCollectionList } from './NcCollectionList/index.js'
 export { default as NcColorPicker } from './NcColorPicker/index.js'
 export { default as NcContent } from './NcContent/index.js'
 export { default as NcCounterBubble } from './NcCounterBubble/index.js'
diff --git a/styleguide.config.cjs b/styleguide.config.cjs
index 29a632df..c8741dcf 100644
--- a/styleguide.config.cjs
+++ b/styleguide.config.cjs
@@ -120,6 +120,7 @@ module.exports = async () => {
 					'src/components/NcAppSidebar*/*.vue',
 					'src/components/NcBreadcrumb*/*.vue',
 					'src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue',
+					'src/components/NcCollectionList/!(NcCollectionList).vue',
 					'src/components/NcContent/*.vue',
 					'src/components/NcDashboard*/*.vue',
 					'src/components/NcDialog*/*.vue',

From 3c1412f3da343dbc90a8eae7b016df395734069f Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 4 Jul 2024 10:46:08 +0200
Subject: [PATCH 3/3] vue3(NcCollectionList): migrate component to Vue3

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NcCollectionList/NcCollectionListItem.vue          |  2 +-
 src/components/NcCollectionList/useCollections.js      | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/NcCollectionList/NcCollectionListItem.vue b/src/components/NcCollectionList/NcCollectionListItem.vue
index efb95a8c..4faca13f 100644
--- a/src/components/NcCollectionList/NcCollectionListItem.vue
+++ b/src/components/NcCollectionList/NcCollectionListItem.vue
@@ -67,7 +67,7 @@
 
 <script>
 import { t } from '../../l10n.js'
-import { getRoute } from '../NcRichText/autolink.js'
+import { getRoute } from '../NcRichText/autolink.ts'
 
 import NcActions from '../NcActions/index.js'
 import NcActionButton from '../NcActionButton/index.js'
diff --git a/src/components/NcCollectionList/useCollections.js b/src/components/NcCollectionList/useCollections.js
index a5742ac1..a6a6cc3f 100644
--- a/src/components/NcCollectionList/useCollections.js
+++ b/src/components/NcCollectionList/useCollections.js
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { ref, set } from 'vue'
+import { ref } from 'vue'
 import {
 	renameCollectionService,
 	getCollectionsByResourceService,
@@ -21,21 +21,21 @@ export function useCollections() {
 
 	// Mutations
 	const addCollections = (collections) => {
-		set(storedCollections, 'value', collections)
+		storedCollections.value = collections
 	}
 
 	const addCollection = (collection) => {
-		set(storedCollections, 'value', [...storedCollections.value, collection])
+		storedCollections.value.push(collection)
 	}
 
 	const removeCollection = (collectionId) => {
-		set(storedCollections, 'value', storedCollections.value.filter(item => item.id !== collectionId))
+		storedCollections.value = storedCollections.value.filter(item => item.id !== collectionId)
 	}
 
 	const updateCollection = (collection) => {
 		const index = storedCollections.value.findIndex(item => item.id === collection.id)
 		if (index !== -1) {
-			set(storedCollections.value, index, collection)
+			storedCollections.value[index] = collection
 		} else {
 			addCollection(collection)
 		}