From dc0b3065ed30c8f7957a67ad700ef2652221d056 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 19 Sep 2023 12:25:29 +0200
Subject: [PATCH 1/7] remove sharedItems.js mixin

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../SharedItemsBrowser.vue                    | 15 +++--
 .../SharedItems/SharedItemsTab.vue            | 55 ++++++-----------
 .../SharedItems/sharedItemsConstants.js       | 39 ++++++++++++
 src/mixins/sharedItems.js                     | 59 -------------------
 4 files changed, 68 insertions(+), 100 deletions(-)
 rename src/components/RightSidebar/SharedItems/{SharedItemsBrowser => }/SharedItemsBrowser.vue (93%)
 create mode 100644 src/components/RightSidebar/SharedItems/sharedItemsConstants.js
 delete mode 100644 src/mixins/sharedItems.js

diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
similarity index 93%
rename from src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
rename to src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
index bbdaa7faad..774bc3a342 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
@@ -29,7 +29,7 @@
 						:class="{'active' : activeTab === type}"
 						type="tertiary"
 						@click="handleTabClick(type)">
-						{{ getTitle(type) }}
+						{{ sharedItemTitle[type] || sharedItemTitle.default }}
 					</NcButton>
 				</template>
 			</div>
@@ -47,9 +47,9 @@ import debounce from 'debounce'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import SharedItems from '../SharedItems.vue'
+import SharedItems from './SharedItems.vue'
 
-import sharedItems from '../../../../mixins/sharedItems.js'
+import { sharedItemsOrder, sharedItemTitle } from './sharedItemsConstants.js'
 
 export default {
 	name: 'SharedItemsBrowser',
@@ -60,8 +60,6 @@ export default {
 		SharedItems,
 	},
 
-	mixins: [sharedItems],
-
 	props: {
 		sharedItems: {
 			type: Object,
@@ -76,6 +74,13 @@ export default {
 
 	emits: ['update:active-tab'],
 
+	setup() {
+		return {
+			sharedItemTitle,
+			sharedItemsOrder,
+		}
+	},
+
 	data() {
 		return {
 			firstItemsLoaded: {},
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index 1221863cec..660c8bbeec 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -23,7 +23,7 @@
 	<div v-if="!loading && active">
 		<template v-for="type in sharedItemsOrder">
 			<div v-if="sharedItems[type]" :key="type">
-				<NcAppNavigationCaption :title="getTitle(type)" />
+				<NcAppNavigationCaption :title="sharedItemTitle[type] || sharedItemTitle.default" />
 				<SharedItems :type="type"
 					:limit="limit(type)"
 					:items="sharedItems[type]" />
@@ -35,7 +35,7 @@
 					<template #icon>
 						<DotsHorizontal :size="20" />
 					</template>
-					{{ getButtonTitle(type) }}
+					{{ sharedItemButtonTitle[type] || sharedItemButtonTitle.default }}
 				</NcButton>
 			</div>
 		</template>
@@ -78,10 +78,14 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcRelatedResourcesPanel from '@nextcloud/vue/dist/Components/NcRelatedResourcesPanel.js'
 
 import SharedItems from './SharedItems.vue'
-import SharedItemsBrowser from './SharedItemsBrowser/SharedItemsBrowser.vue'
+import SharedItemsBrowser from './SharedItemsBrowser.vue'
 
-import { SHARED_ITEM } from '../../../constants.js'
-import sharedItems from '../../../mixins/sharedItems.js'
+import {
+	sharedItemButtonTitle,
+	sharedItemsOrder,
+	sharedItemsWithPreviewLimit,
+	sharedItemTitle,
+} from './sharedItemsConstants.js'
 
 export default {
 
@@ -99,8 +103,6 @@ export default {
 		FolderMultipleImage,
 	},
 
-	mixins: [sharedItems],
-
 	props: {
 
 		active: {
@@ -109,6 +111,15 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			sharedItemButtonTitle,
+			sharedItemTitle,
+			sharedItemsOrder,
+			sharedItemsWithPreviewLimit,
+		}
+	},
+
 	data() {
 		return {
 			showSharedItemsBrowser: false,
@@ -167,35 +178,7 @@ export default {
 		},
 
 		limit(type) {
-			if (type === SHARED_ITEM.TYPES.DECK_CARD || type === SHARED_ITEM.TYPES.LOCATION || type === SHARED_ITEM.TYPES.POLL) {
-				return 2
-			} else {
-				return 6
-			}
-		},
-
-		getButtonTitle(type) {
-			switch (type) {
-			case SHARED_ITEM.TYPES.MEDIA:
-				return t('spreed', 'Show all media')
-			case SHARED_ITEM.TYPES.FILE:
-				return t('spreed', 'Show all files')
-			case SHARED_ITEM.TYPES.POLL:
-				return t('spreed', 'Show all polls')
-			case SHARED_ITEM.TYPES.DECK_CARD:
-				return t('spreed', 'Show all deck cards')
-			case SHARED_ITEM.TYPES.VOICE:
-				return t('spreed', 'Show all voice messages')
-			case SHARED_ITEM.TYPES.LOCATION:
-				return t('spreed', 'Show all locations')
-			case SHARED_ITEM.TYPES.AUDIO:
-				return t('spreed', 'Show all audio')
-			case SHARED_ITEM.TYPES.RECORDING:
-				return t('spreed', 'Show all call recordings')
-			case SHARED_ITEM.TYPES.OTHER:
-			default:
-				return t('spreed', 'Show all other')
-			}
+			return this.sharedItemsWithPreviewLimit.includes(type) ? 2 : 6
 		},
 	},
 }
diff --git a/src/components/RightSidebar/SharedItems/sharedItemsConstants.js b/src/components/RightSidebar/SharedItems/sharedItemsConstants.js
new file mode 100644
index 0000000000..c2dce06dbe
--- /dev/null
+++ b/src/components/RightSidebar/SharedItems/sharedItemsConstants.js
@@ -0,0 +1,39 @@
+import { SHARED_ITEM } from '../../../constants.js'
+
+export const sharedItemsOrder = [SHARED_ITEM.TYPES.MEDIA,
+	SHARED_ITEM.TYPES.FILE,
+	SHARED_ITEM.TYPES.RECORDING,
+	SHARED_ITEM.TYPES.POLL,
+	SHARED_ITEM.TYPES.VOICE,
+	SHARED_ITEM.TYPES.AUDIO,
+	SHARED_ITEM.TYPES.LOCATION,
+	SHARED_ITEM.TYPES.DECK_CARD,
+	SHARED_ITEM.TYPES.OTHER]
+
+export const sharedItemsWithPreviewLimit = [SHARED_ITEM.TYPES.DECK_CARD, SHARED_ITEM.TYPES.LOCATION, SHARED_ITEM.TYPES.POLL]
+
+export const sharedItemTitle = {
+	[SHARED_ITEM.TYPES.MEDIA]: t('spreed', 'Media'),
+	[SHARED_ITEM.TYPES.FILE]: t('spreed', 'Files'),
+	[SHARED_ITEM.TYPES.POLL]: t('spreed', 'Polls'),
+	[SHARED_ITEM.TYPES.DECK_CARD]: t('spreed', 'Deck cards'),
+	[SHARED_ITEM.TYPES.VOICE]: t('spreed', 'Voice messages'),
+	[SHARED_ITEM.TYPES.LOCATION]: t('spreed', 'Locations'),
+	[SHARED_ITEM.TYPES.RECORDING]: t('spreed', 'Call recordings'),
+	[SHARED_ITEM.TYPES.AUDIO]: t('spreed', 'Audio'),
+	[SHARED_ITEM.TYPES.OTHER]: t('spreed', 'Other'),
+	default: t('spreed', 'Other'),
+}
+
+export const sharedItemButtonTitle = {
+	[SHARED_ITEM.TYPES.MEDIA]: t('spreed', 'Show all media'),
+	[SHARED_ITEM.TYPES.FILE]: t('spreed', 'Show all files'),
+	[SHARED_ITEM.TYPES.POLL]: t('spreed', 'Show all polls'),
+	[SHARED_ITEM.TYPES.DECK_CARD]: t('spreed', 'Show all deck cards'),
+	[SHARED_ITEM.TYPES.VOICE]: t('spreed', 'Show all voice messages'),
+	[SHARED_ITEM.TYPES.LOCATION]: t('spreed', 'Show all locations'),
+	[SHARED_ITEM.TYPES.RECORDING]: t('spreed', 'Show all call recordings'),
+	[SHARED_ITEM.TYPES.AUDIO]: t('spreed', 'Show all audio'),
+	[SHARED_ITEM.TYPES.OTHER]: t('spreed', 'Show all other'),
+	default: t('spreed', 'Show all other'),
+}
diff --git a/src/mixins/sharedItems.js b/src/mixins/sharedItems.js
deleted file mode 100644
index 0cd037b5cf..0000000000
--- a/src/mixins/sharedItems.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @author Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import { SHARED_ITEM } from '../constants.js'
-
-const sharedItems = {
-	computed: {
-		// Defines the order of the sections
-		sharedItemsOrder() {
-			return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.RECORDING, SHARED_ITEM.TYPES.POLL, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO, SHARED_ITEM.TYPES.LOCATION, SHARED_ITEM.TYPES.DECK_CARD, SHARED_ITEM.TYPES.OTHER]
-		},
-	},
-
-	methods: {
-		getTitle(type) {
-			switch (type) {
-			case SHARED_ITEM.TYPES.MEDIA:
-				return t('spreed', 'Media')
-			case SHARED_ITEM.TYPES.FILE:
-				return t('spreed', 'Files')
-			case SHARED_ITEM.TYPES.POLL:
-				return t('spreed', 'Polls')
-			case SHARED_ITEM.TYPES.DECK_CARD:
-				return t('spreed', 'Deck cards')
-			case SHARED_ITEM.TYPES.VOICE:
-				return t('spreed', 'Voice messages')
-			case SHARED_ITEM.TYPES.LOCATION:
-				return t('spreed', 'Locations')
-			case SHARED_ITEM.TYPES.RECORDING:
-				return t('spreed', 'Call recordings')
-			case SHARED_ITEM.TYPES.AUDIO:
-				return t('spreed', 'Audio')
-			default:
-				return t('spreed', 'Other')
-			}
-		},
-	},
-}
-
-export default sharedItems

From a6b8b0790281e37ca88fcc07f3207ed6c9f440e6 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 19 Sep 2023 12:47:34 +0200
Subject: [PATCH 2/7] refactor SharedItems.vue component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Message/MessagePart/DeckCard.vue          |   1 +
 .../RightSidebar/SharedItems/SharedItems.vue  | 121 +++++++++---------
 .../SharedItems/SharedItemsBrowser.vue        |  10 +-
 .../SharedItems/SharedItemsTab.vue            |   3 +
 4 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
index 2d889f0064..ac0c81bc2b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
@@ -141,6 +141,7 @@ export default {
 
 .wide {
 	max-width: 400px;
+	width: 100%;
 	margin: 4px auto;
 }
 
diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index 23e752a722..9e62462584 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItems.vue
@@ -20,47 +20,40 @@
 -->
 
 <template>
-	<div class="shared-items" :class="{'shared-items__list' : isList}">
+	<div class="shared-items" :class="{'shared-items__list' : hasListLayout}">
 		<template v-for="item in itemsToDisplay">
-			<div v-if="type === 'location'"
-				:key="item.id"
-				class="shared-items__location"
-				:class="{ 'shared-items__location--nolimit': limit === 0 }">
-				<Location :wide="true"
-					v-bind="item.messageParameters.object" />
+			<div v-if="isLocation" :key="item.id" class="shared-items__location">
+				<Location wide v-bind="item.messageParameters.object" />
 			</div>
-			<div v-else-if="type === 'deckcard'"
+
+			<DeckCard v-else-if="isDeckCard"
 				:key="item.id"
-				class="shared-items__deckcard"
-				:class="{ 'shared-items__deckcard--nolimit': limit === 0 }">
-				<DeckCard :wide="true"
-					v-bind="item.messageParameters.object" />
-			</div>
-			<div v-else-if="type === 'poll'"
+				wide
+				v-bind="item.messageParameters.object" />
+
+			<Poll v-else-if="isPoll"
 				:key="item.id"
-				class="shared-items__poll"
-				:class="{ 'shared-items__poll--nolimit': limit === 0 }">
-				<Poll v-bind="item.messageParameters.object"
-					:token="$store.getters.getToken()"
-					:poll-name="item.messageParameters.object.name" />
+				:token="token"
+				v-bind="item.messageParameters.object"
+				:poll-name="item.messageParameters.object.name" />
+
+			<div v-else-if="isOther"
+				:key="item.id"
+				class="shared-items__other">
+				<a v-if="item.messageParameters.object.link"
+					:href="item.messageParameters.object.link"
+					target="_blank">
+					{{ item.messageParameters.object.name }}
+				</a>
+				<p v-else>
+					{{ item.messageParameters.object.name }}
+				</p>
 			</div>
-			<template v-else-if="type === 'other'">
-				<div :key="item.id"
-					class="shared-items__other">
-					<a v-if="item.messageParameters.object.link"
-						:href="item.messageParameters.object.link"
-						target="_blank">
-						{{ item.messageParameters.object.name }}
-					</a>
-					<p v-else>
-						{{ item.messageParameters.object.name }}
-					</p>
-				</div>
-			</template>
+
 			<FilePreview v-else
 				:key="item.id"
-				:small-preview="isList"
-				:row-layout="isList"
+				:small-preview="!isMedia"
+				:row-layout="!isMedia"
 				:shared-items-type="type"
 				:is-shared-items-tab="true"
 				v-bind="item.messageParameters.file" />
@@ -87,6 +80,11 @@ export default {
 	},
 
 	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+
 		type: {
 			type: String,
 			required: true,
@@ -100,25 +98,37 @@ export default {
 		// Limits the amount of items displayed
 		limit: {
 			type: Number,
-			default: 0,
+			default: undefined,
+		},
+
+		// Whether items are shown directly in SharedItemsTab
+		tabView: {
+			type: Boolean,
+			default: false,
 		},
 	},
 
 	computed: {
 		itemsToDisplay() {
-			if (this.limit === 0) {
-				return Object.values(this.items).reverse()
-			} else {
-				return Object.values(this.items).reverse().slice(0, this.limit)
-			}
+			return Object.values(this.items).reverse().slice(0, this.limit)
 		},
-
-		isList() {
-			if (this.type === SHARED_ITEM.TYPES.MEDIA) {
-				return false
-			} else {
-				return true
-			}
+		isLocation() {
+			return this.type === SHARED_ITEM.TYPES.LOCATION
+		},
+		isDeckCard() {
+			return this.type === SHARED_ITEM.TYPES.DECK_CARD
+		},
+		isPoll() {
+			return this.type === SHARED_ITEM.TYPES.POLL
+		},
+		isOther() {
+			return this.type === SHARED_ITEM.TYPES.OTHER
+		},
+		isMedia() {
+			return this.type === SHARED_ITEM.TYPES.MEDIA
+		},
+		hasListLayout() {
+			return !this.isMedia && (this.tabView || (!this.isLocation && !this.isDeckCard && !this.isPoll))
 		},
 	},
 }
@@ -133,27 +143,12 @@ export default {
 	margin: auto;
 
 	&__list {
-		display: flex;
-		flex-wrap: wrap;
+		grid-template-columns: 1fr;
 	}
 
 	&__location {
-		width: 100%;
 		height: 150px;
 		margin: 4px 0;
-
-		&--nolimit {
-			width: 33%;
-		}
-	}
-
-	&__poll,
-	&__deckcard {
-		width: 100%;
-
-		&--nolimit {
-			width: 33%;
-		}
 	}
 
 	&__other {
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
index 774bc3a342..7bd91e1016 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
@@ -35,6 +35,7 @@
 			</div>
 			<div ref="scroller" class="shared-items-browser__content" @scroll="debounceHandleScroll">
 				<SharedItems :type="activeTab"
+					:token="token"
 					:items="sharedItems[activeTab]" />
 			</div>
 		</div>
@@ -61,6 +62,11 @@ export default {
 	},
 
 	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+
 		sharedItems: {
 			type: Object,
 			required: true,
@@ -94,10 +100,6 @@ export default {
 			return this.$refs.scroller
 		},
 
-		token() {
-			return this.$store.getters.getToken()
-		},
-
 		container() {
 			return this.$store.getters.getMainContainerSelector()
 		},
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index 660c8bbeec..d95bfe26e0 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -25,6 +25,8 @@
 			<div v-if="sharedItems[type]" :key="type">
 				<NcAppNavigationCaption :title="sharedItemTitle[type] || sharedItemTitle.default" />
 				<SharedItems :type="type"
+					:token="token"
+					tab-view
 					:limit="limit(type)"
 					:items="sharedItems[type]" />
 				<NcButton v-if="hasMore(type, sharedItems[type])"
@@ -58,6 +60,7 @@
 			</template>
 		</NcEmptyContent>
 		<SharedItemsBrowser v-if="showSharedItemsBrowser"
+			:token="token"
 			:shared-items="sharedItems"
 			:active-tab.sync="browserActiveTab"
 			@close="showSharedItemsBrowser = false" />

From 7ff83ca1b233f3da3468196dbca5dc36ad7d0b88 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 19 Sep 2023 15:34:25 +0200
Subject: [PATCH 3/7] lint, cleanup, style fixes in SharedItemsTab

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../RightSidebar/SharedItems/SharedItems.vue  | 11 ++++----
 .../SharedItems/SharedItemsBrowser.vue        | 16 +++++++----
 .../SharedItems/SharedItemsTab.vue            | 28 +++++++++++--------
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index 9e62462584..a0366c5baa 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItems.vue
@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -55,7 +55,7 @@
 				:small-preview="!isMedia"
 				:row-layout="!isMedia"
 				:shared-items-type="type"
-				:is-shared-items-tab="true"
+				is-shared-items-tab
 				v-bind="item.messageParameters.file" />
 		</template>
 	</div>
@@ -138,8 +138,7 @@ export default {
 .shared-items {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: 1fr 1fr;
-	grid-gap: 4px;
+	grid-gap: 6px;
 	margin: auto;
 
 	&__list {
@@ -152,11 +151,11 @@ export default {
 	}
 
 	&__other {
-		width: 100%;
-		margin-left: 8px;
+		padding-left: 8px;
 
 		a {
 			text-decoration: underline;
+
 			&:after {
 				content: ' ↗';
 			}
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
index 7bd91e1016..cd59329bc9 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue
@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -33,6 +33,7 @@
 					</NcButton>
 				</template>
 			</div>
+
 			<div ref="scroller" class="shared-items-browser__content" @scroll="debounceHandleScroll">
 				<SharedItems :type="activeTab"
 					:token="token"
@@ -147,7 +148,9 @@ export default {
 			const scrollHeight = this.scroller.scrollHeight
 			const scrollTop = this.scroller.scrollTop
 			const containerHeight = this.scroller.clientHeight
-			if ((scrollHeight - scrollTop - containerHeight < 300) && !this.isRequestingMoreItems?.[this.activeTab] && !this.hasFetchedAllItems?.[this.activeTab]) {
+			if ((scrollHeight - scrollTop - containerHeight < 300)
+				&& !this.isRequestingMoreItems?.[this.activeTab]
+				&& !this.hasFetchedAllItems?.[this.activeTab]) {
 				this.fetchItems(this.activeTab)
 			}
 		},
@@ -159,20 +162,22 @@ export default {
 .shared-items-browser {
 	width: 100%;
 	height: 100%;
-	position:relative;
+	position: relative;
 	display: flex;
 	flex-direction: column;
+
 	&__navigation {
 		display: flex;
 		gap: 8px;
-		padding: 16px;
+		padding: 16px 16px 4px;
 		flex-wrap: wrap;
 		justify-content: center;
 	}
+
 	&__content {
 		overflow-y: auto;
 		overflow-x: hidden;
-		margin: 0 12px;
+		padding: 12px;
 	}
 }
 
@@ -182,6 +187,7 @@ export default {
 
 :deep(.button-vue) {
 	border-radius: var(--border-radius-large);
+
 	&.active {
 		background-color: var(--color-primary-element-light);
 	}
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index d95bfe26e0..f0a467d059 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -21,6 +21,7 @@
 
 <template>
 	<div v-if="!loading && active">
+		<!-- Shared items grouped by type -->
 		<template v-for="type in sharedItemsOrder">
 			<div v-if="sharedItems[type]" :key="type">
 				<NcAppNavigationCaption :title="sharedItemTitle[type] || sharedItemTitle.default" />
@@ -32,7 +33,7 @@
 				<NcButton v-if="hasMore(type, sharedItems[type])"
 					type="tertiary-no-background"
 					class="more"
-					:wide="true"
+					wide
 					@click="showMore(type)">
 					<template #icon>
 						<DotsHorizontal :size="20" />
@@ -41,10 +42,14 @@
 				</NcButton>
 			</div>
 		</template>
+
+		<!-- Shared from "Related Resources" app -->
 		<NcRelatedResourcesPanel class="related-resources"
 			provider-id="talk"
 			:item-id="conversation.token"
 			@has-resources="value => hasRelatedResources = value" />
+
+		<!-- Shared from "Projects" app -->
 		<template v-if="projectsEnabled">
 			<NcAppNavigationCaption :title="t('spreed', 'Projects')" />
 			<CollectionList v-if="getUserId && token"
@@ -53,12 +58,16 @@
 				:name="conversation.displayName"
 				:is-active="active" />
 		</template>
+
+		<!-- No shared content -->
 		<NcEmptyContent v-else-if="!hasSharedItems && !hasRelatedResources"
 			:title="t('spreed', 'No shared items')">
 			<template #icon>
 				<FolderMultipleImage :size="20" />
 			</template>
 		</NcEmptyContent>
+
+		<!-- Dialog window -->
 		<SharedItemsBrowser v-if="showSharedItemsBrowser"
 			:token="token"
 			:shared-items="sharedItems"
@@ -95,19 +104,18 @@ export default {
 	name: 'SharedItemsTab',
 
 	components: {
-		SharedItems,
 		CollectionList,
+		DotsHorizontal,
+		FolderMultipleImage,
 		NcAppNavigationCaption,
-		NcRelatedResourcesPanel,
 		NcButton,
 		NcEmptyContent,
+		NcRelatedResourcesPanel,
+		SharedItems,
 		SharedItemsBrowser,
-		DotsHorizontal,
-		FolderMultipleImage,
 	},
 
 	props: {
-
 		active: {
 			type: Boolean,
 			required: true,
@@ -188,9 +196,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use 'sass:math';
-@import '../../../assets/variables';
-
 .more {
 	margin-top: 8px;
 }
@@ -199,7 +204,8 @@ export default {
 .related-resources {
 	&:deep(.related-resources__header) {
 		margin: 14px 0 !important;
-		padding: 0 8px 0 math.div($clickable-area, 2) !important;
+		padding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);
+
 		h5 {
 			opacity: .7 !important;
 			color: var(--color-primary-element) !important;

From e46f668f472875299831b6626aeb16e8c1f90ef3 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 20 Sep 2023 12:10:53 +0200
Subject: [PATCH 4/7] show default icon based on mimetype

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/MessagePart/FilePreview.spec.js      | 3 ++-
 .../MessagesGroup/Message/MessagePart/FilePreview.vue          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
index ab47784b83..691a2d25e4 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
@@ -196,6 +196,7 @@ describe('FilePreview.vue', () => {
 		})
 
 		test('renders default mime icon on load error', async () => {
+			OC.MimeType.getIconUrl.mockReturnValueOnce(imagePath('core', 'image/jpeg'))
 			const wrapper = shallowMount(FilePreview, {
 				localVue,
 				store,
@@ -206,7 +207,7 @@ describe('FilePreview.vue', () => {
 
 			expect(wrapper.element.tagName).toBe('A')
 			const imageUrl = wrapper.find('img').attributes('src')
-			expect(imageUrl).toBe(imagePath('core', 'filetypes/file'))
+			expect(imageUrl).toBe(imagePath('core', 'image/jpeg'))
 		})
 
 		test('renders generic mime type icon for unknown mime types', async () => {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index ef709de728..15f43852a6 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -317,7 +317,7 @@ export default {
 		},
 
 		defaultIconUrl() {
-			return imagePath('core', 'filetypes/file')
+			return OC.MimeType.getIconUrl(this.mimetype) || imagePath('core', 'filetypes/file')
 		},
 
 		previewImageClass() {

From bf5fc09f628fcf3a88d632d3b8d1d66e10245c79 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 21 Sep 2023 12:49:47 +0200
Subject: [PATCH 5/7] add hover effects on shared items with preview

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Message/MessagePart/DeckCard.vue           | 16 +++++++++-------
 .../Message/MessagePart/FilePreview.vue        | 18 +++++++++++++++++-
 .../Message/MessagePart/Location.vue           |  7 +++++++
 .../MessagesGroup/Message/MessagePart/Poll.vue | 13 +++++++++----
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
index ac0c81bc2b..402a6e8e31 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
@@ -98,21 +98,23 @@ export default {
 <style lang="scss" scoped>
 .deck-card {
 	display: flex;
-	transition: box-shadow 0.1s ease-in-out;
-	border: 1px solid var(--color-border);
-	box-shadow: 0 0 2px 0 var(--color-box-shadow);
+	border: 2px solid var(--color-border);
 	border-radius: var(--border-radius-large);
 	font-size: 100%;
 	background-color: var(--color-main-background);
-	margin: 4px 0;
 	max-width: 300px;
 	padding: 8px 16px;
 	flex-direction: column;
 	white-space: nowrap;
+	transition: border-color 0.1s ease-in-out;
+
 	&:hover,
-	&:focus{
-		box-shadow: 0 0 5px 0 var(--color-box-shadow);
+	&:focus,
+	&:focus-visible {
+		border-color: var(--color-primary-element);
+		outline: none;
 	}
+
 	&__lineone {
 		height: 30px;
 		display: flex;
@@ -126,6 +128,7 @@ export default {
 			margin-left: 8px;
 		}
 	}
+
 	&__linetwo {
 		height: 30px;
 		color: var(--color-text-lighter);
@@ -142,7 +145,6 @@ export default {
 .wide {
 	max-width: 400px;
 	width: 100%;
-	margin: 4px auto;
 }
 
 </style>
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 15f43852a6..278499a327 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -332,7 +332,10 @@ export default {
 
 			if (this.failed || this.previewType === PREVIEW_TYPE.MIME_ICON || this.rowLayout) {
 				classes += 'mimeicon'
+			} else if (this.previewAvailable === 'yes') {
+				classes += 'media'
 			}
+
 			return classes
 		},
 
@@ -518,15 +521,23 @@ export default {
 
 	box-sizing: content-box !important;
 	&:hover,
-	&:focus {
+	&:focus,
+	&:focus-visible {
 		background-color: var(--color-background-hover);
+		outline: none;
+
 		.remove-file {
 			visibility: visible;
 		}
+
+		.file-preview__image.media {
+			outline: 2px solid var(--color-primary-element);
+		}
 	}
 
 	&__image {
 		object-fit: cover;
+		transition: outline 0.1s ease-in-out;
 	}
 
 	.loading {
@@ -549,12 +560,14 @@ export default {
 		max-width: 100%;
 		max-height: 384px;
 	}
+
 	.preview-medium {
 		display: inline-block;
 		border-radius: var(--border-radius);
 		max-width: 100%;
 		max-height: 192px;
 	}
+
 	.preview-small {
 		display: inline-block;
 		border-radius: var(--border-radius);
@@ -607,6 +620,7 @@ export default {
 			content: ' ↗';
 		}
 	}
+
 	&--upload-editor {
 		max-width: 140px;
 		max-height: 140px;
@@ -618,6 +632,7 @@ export default {
 			width: 128px;
 			height: 128px;
 		}
+
 		.loading {
 			width: 100%;
 		}
@@ -646,6 +661,7 @@ export default {
 
 	&--shared-items-grid {
 		aspect-ratio: 1;
+
 		.preview {
 			width: 100%;
 			min-height: unset;
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
index bb002543c2..570ef03547 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
@@ -142,6 +142,13 @@ export default {
 	height: 300px;
 	max-height: 30vh;
 	margin: 4px;
+	transition: outline 0.1s ease-in-out;
+
+	&:hover,
+	&:focus,
+	&:focus-visible {
+		outline: 2px solid var(--color-primary-element);
+	}
 
 	&.wide {
 		width: 100%;
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index 45d010f356..a87b682c0d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -455,16 +455,21 @@ export default {
 
 .poll {
 	display: flex;
-	transition: box-shadow 0.1s ease-in-out;
-	border: 1px solid var(--color-border);
-	box-shadow: 0 0 2px 0 var(--color-box-shadow);
-	margin: 4px 0;
+	border: 2px solid var(--color-border);
 	max-width: 300px;
 	padding: 0 16px 16px 16px;
 	flex-direction: column;
 	background: var(--color-main-background);
 	border-radius: var(--border-radius-large);
 	justify-content: space-between;
+	transition: border-color 0.1s ease-in-out;
+
+	&:hover,
+	&:focus,
+	&:focus-visible {
+		border-color: var(--color-primary-element);
+		outline: none;
+	}
 
 	&__header {
 		display: flex;

From 8e900b6ec3bd671ca4391044928cced70d9a5267 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 21 Sep 2023 14:54:44 +0200
Subject: [PATCH 6/7] pass token to FilePreview component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/Message.spec.js     |  2 +-
 .../MessagesGroup/Message/Message.vue         |  4 +++-
 .../Message/MessagePart/FilePreview.spec.js   |  1 +
 .../Message/MessagePart/FilePreview.vue       | 19 +++++++++++--------
 .../NewMessage/NewMessageUploadEditor.vue     |  1 +
 src/components/Quote.vue                      |  4 ++--
 .../RightSidebar/SharedItems/SharedItems.vue  |  5 +++--
 7 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index a96c6a5515..232c7aeda1 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -324,7 +324,7 @@ describe('Message.vue', () => {
 
 				const messageEl = wrapper.findComponent({ name: 'NcRichText' })
 				// note: indices as object keys are on purpose
-				expect(messageEl.props('arguments')).toStrictEqual(expectedRichParameters)
+				expect(messageEl.props('arguments')).toMatchObject(expectedRichParameters)
 			}
 
 			test('renders mentions', () => {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index e8edb5cffd..6c253a21ec 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -591,7 +591,9 @@ export default {
 					parameters['is-voice-message'] = this.messageType === 'voice-message'
 					richParameters[p] = {
 						component: FilePreview,
-						props: parameters,
+						props: Object.assign({
+							token: this.token,
+						}, parameters),
 					}
 				} else if (type === 'deck-card') {
 					richParameters[p] = {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
index 691a2d25e4..c8708a2ac0 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
@@ -48,6 +48,7 @@ describe('FilePreview.vue', () => {
 			})
 
 		propsData = {
+			token: 'TOKEN',
 			id: '123',
 			name: 'test.jpg',
 			path: 'path/to/test.jpg',
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 278499a327..232fa20a1d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -28,7 +28,7 @@
 		class="file-preview"
 		:class="{ 'file-preview--viewer-available': isViewerAvailable,
 			'file-preview--upload-editor': isUploadEditor,
-			'file-preview--shared-items-grid': isSharedItemsTab && !rowLayout,
+			'file-preview--shared-items-grid': isSharedItems && !rowLayout,
 			'file-preview--row-layout': rowLayout }"
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
@@ -109,6 +109,10 @@ export default {
 	},
 
 	props: {
+		token: {
+			type: String,
+			required: true,
+		},
 		/**
 		 * File id
 		 */
@@ -230,12 +234,12 @@ export default {
 			default: false,
 		},
 
-		isSharedItemsTab: {
+		isSharedItems: {
 			type: Boolean,
 			default: false,
 		},
 
-		sharedItemsType: {
+		itemType: {
 			type: String,
 			default: '',
 		},
@@ -260,7 +264,7 @@ export default {
 	},
 	computed: {
 		shouldShowFileDetail() {
-			if (this.isSharedItemsTab && !this.rowLayout) {
+			if (this.isSharedItems && !this.rowLayout) {
 				return false
 			}
 			// display the file detail below the preview if the preview
@@ -483,17 +487,16 @@ export default {
 
 			const fileInfo = this.generateViewerObject(this)
 
-			if (this.isSharedItemsTab && this.sharedItemsType === SHARED_ITEM.TYPES.MEDIA) {
-				const token = this.$store.getters.getToken()
+			if (this.itemType === SHARED_ITEM.TYPES.MEDIA) {
 				const getRevertedList = (items) => Object.values(items).reverse()
 					.map(item => this.generateViewerObject(item.messageParameters.file))
 
 				// Get available media files from store and put them to the list to navigate through slides
-				const mediaFiles = this.$store.getters.sharedItems(token).media
+				const mediaFiles = this.$store.getters.sharedItems(this.token).media
 				const list = getRevertedList(mediaFiles)
 				const loadMore = async () => {
 					const { messages } = await this.$store.dispatch('getSharedItems',
-						{ token, type: SHARED_ITEM.TYPES.MEDIA })
+						{ token: this.token, type: SHARED_ITEM.TYPES.MEDIA })
 					return getRevertedList(messages)
 				}
 
diff --git a/src/components/NewMessage/NewMessageUploadEditor.vue b/src/components/NewMessage/NewMessageUploadEditor.vue
index 4da3db01f9..5703958497 100644
--- a/src/components/NewMessage/NewMessageUploadEditor.vue
+++ b/src/components/NewMessage/NewMessageUploadEditor.vue
@@ -40,6 +40,7 @@
 					group>
 					<template v-for="file in files">
 						<FilePreview :key="file.temporaryMessage.id"
+							:token="token"
 							v-bind="file.temporaryMessage.messageParameters.file"
 							:is-upload-editor="true"
 							@remove-file="handleRemoveFileFromSelection" />
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index ed5145c596..bd5fefa578 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -178,9 +178,9 @@ export default {
 					richParameters[p] = {
 						component: FilePreview,
 						props: Object.assign({
+							token: this.token,
 							smallPreview: true,
-						}, this.messageParameters[p]
-						),
+						}, this.messageParameters[p]),
 					}
 				} else {
 					richParameters[p] = {
diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index a0366c5baa..7b86f402c1 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItems.vue
@@ -52,10 +52,11 @@
 
 			<FilePreview v-else
 				:key="item.id"
+				:token="token"
 				:small-preview="!isMedia"
 				:row-layout="!isMedia"
-				:shared-items-type="type"
-				is-shared-items-tab
+				:item-type="type"
+				is-shared-items
 				v-bind="item.messageParameters.file" />
 		</template>
 	</div>

From cbc0b873c3369931e91634b868efe41925fb522d Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 21 Sep 2023 14:57:12 +0200
Subject: [PATCH 7/7] add voice messages to the sharedItemsStore

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/Message.vue         |  7 +++--
 .../Message/MessagePart/FilePreview.vue       | 11 +++----
 src/store/messagesStore.js                    |  1 +
 src/store/sharedItemsStore.js                 | 30 +-----------------
 src/utils/getItemTypeFromMessage.js           | 31 +++++++++++++++++++
 5 files changed, 42 insertions(+), 38 deletions(-)
 create mode 100644 src/utils/getItemTypeFromMessage.js

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 6c253a21ec..0d93bc1991 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -281,6 +281,7 @@ import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
 import participant from '../../../../mixins/participant.js'
 import { EventBus } from '../../../../services/EventBus.js'
 import { useGuestNameStore } from '../../../../stores/guestName.js'
+import { getItemTypeFromMessage } from '../../../../utils/getItemTypeFromMessage.js'
 
 const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
 
@@ -581,19 +582,19 @@ export default {
 			Object.keys(this.messageParameters).forEach(function(p) {
 				const type = this.messageParameters[p].type
 				const mimetype = this.messageParameters[p].mimetype
+				const itemType = getItemTypeFromMessage(this.messageObject)
 				if (type === 'user' || type === 'call' || type === 'guest' || type === 'user-group' || type === 'group') {
 					richParameters[p] = {
 						component: Mention,
 						props: this.messageParameters[p],
 					}
 				} else if (type === 'file' && mimetype !== 'text/vcard') {
-					const parameters = this.messageParameters[p]
-					parameters['is-voice-message'] = this.messageType === 'voice-message'
 					richParameters[p] = {
 						component: FilePreview,
 						props: Object.assign({
 							token: this.token,
-						}, parameters),
+							itemType,
+						}, this.messageParameters[p]),
 					}
 				} else if (type === 'deck-card') {
 					richParameters[p] = {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 232fa20a1d..c1883db15a 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -224,11 +224,6 @@ export default {
 			default: '',
 		},
 
-		isVoiceMessage: {
-			type: Boolean,
-			default: false,
-		},
-
 		rowLayout: {
 			type: Boolean,
 			default: false,
@@ -304,7 +299,7 @@ export default {
 				return {
 					is: 'div',
 				}
-			} else if (this.isVoiceMessage) {
+			} else if (this.isVoiceMessage && !this.isSharedItems) {
 				return {
 					is: AudioPlayer,
 					name: this.name,
@@ -417,6 +412,10 @@ export default {
 			return false
 		},
 
+		isVoiceMessage() {
+			return this.itemType === SHARED_ITEM.TYPES.VOICE
+		},
+
 		isPlayable() {
 			// don't show play button for direct renders
 			if (this.failed || !this.isViewerAvailable || this.previewType !== PREVIEW_TYPE.PREVIEW) {
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 66022eb10e..ddc8c77922 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -552,6 +552,7 @@ const actions = {
 		context.commit('addMessage', message)
 
 		 if ((message.messageType === 'comment' && message.message === '{file}' && message.messageParameters?.file)
+			|| (message.messageType === 'voice-message' && message.message === '{file}' && message.messageParameters?.file)
 			|| (message.messageType === 'comment' && message.message === '{object}' && message.messageParameters?.object)) {
 			context.dispatch('addSharedItemMessage', {
 				message,
diff --git a/src/store/sharedItemsStore.js b/src/store/sharedItemsStore.js
index dc99e0bcff..315184d3b9 100644
--- a/src/store/sharedItemsStore.js
+++ b/src/store/sharedItemsStore.js
@@ -22,36 +22,8 @@
 
 import Vue from 'vue'
 
-import { SHARED_ITEM } from '../constants.js'
 import { getSharedItemsOverview, getSharedItems } from '../services/sharedItemsService.js'
-
-const getItemTypeFromMessage = function(message) {
-	if (message.message === '{object}') {
-		if (message.messageParameters.object.type === 'geo-location') {
-			return SHARED_ITEM.TYPES.LOCATION
-		} else if (message.messageParameters.object.type === 'deck-card') {
-			return SHARED_ITEM.TYPES.DECK_CARD
-		} else if (message.messageParameters.object.type === 'talk-poll') {
-			return SHARED_ITEM.TYPES.POLL
-		} else {
-			return SHARED_ITEM.TYPES.OTHER
-		}
-	} else {
-		const messageType = message.messageType || ''
-		const mimetype = message.messageParameters.file?.mimetype || ''
-		if (messageType === 'record-audio' || messageType === 'record-video') {
-			return SHARED_ITEM.TYPES.RECORDING
-		} else if (messageType === 'voice-message') {
-			return SHARED_ITEM.TYPES.VOICE
-		} else if (mimetype.startsWith('audio/')) {
-			return SHARED_ITEM.TYPES.AUDIO
-		} else if (mimetype.startsWith('image/') || mimetype.startsWith('video/')) {
-			return SHARED_ITEM.TYPES.MEDIA
-		} else {
-			return SHARED_ITEM.TYPES.FILE
-		}
-	}
-}
+import { getItemTypeFromMessage } from '../utils/getItemTypeFromMessage.js'
 
 // sharedItemsByConversationAndType structure
 // token: {
diff --git a/src/utils/getItemTypeFromMessage.js b/src/utils/getItemTypeFromMessage.js
new file mode 100644
index 0000000000..69d0fa1410
--- /dev/null
+++ b/src/utils/getItemTypeFromMessage.js
@@ -0,0 +1,31 @@
+import { SHARED_ITEM } from '../constants.js'
+
+export const getItemTypeFromMessage = function(message) {
+	if (message.message === '{object}') {
+		if (message.messageParameters.object.type === 'geo-location') {
+			return SHARED_ITEM.TYPES.LOCATION
+		} else if (message.messageParameters.object.type === 'deck-card') {
+			return SHARED_ITEM.TYPES.DECK_CARD
+		} else if (message.messageParameters.object.type === 'talk-poll') {
+			return SHARED_ITEM.TYPES.POLL
+		} else {
+			return SHARED_ITEM.TYPES.OTHER
+		}
+	} else if (message.message === '{file}') {
+		const messageType = message.messageType || ''
+		const mimetype = message.messageParameters.file?.mimetype || ''
+		if (messageType === 'record-audio' || messageType === 'record-video') {
+			return SHARED_ITEM.TYPES.RECORDING
+		} else if (messageType === 'voice-message') {
+			return SHARED_ITEM.TYPES.VOICE
+		} else if (mimetype.startsWith('audio/')) {
+			return SHARED_ITEM.TYPES.AUDIO
+		} else if (mimetype.startsWith('image/') || mimetype.startsWith('video/')) {
+			return SHARED_ITEM.TYPES.MEDIA
+		} else {
+			return SHARED_ITEM.TYPES.FILE
+		}
+	} else {
+		return SHARED_ITEM.TYPES.OTHER
+	}
+}