1 files changed, 75 insertions, 10 deletions

diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index d3ee8db57..6403ecc0f 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -22,16 +22,34 @@
 <template>
 	<div v-if="!loading && active">
 		<template v-for="type in sharedItemsOrder">
-			<SharedItems v-if="sharedItems[type]"
-				:key="type"
-				:type="type"
-				:items="sharedItems[type]" />
+			<div v-if="sharedItems[type]" :key="type">
+				<AppNavigationCaption :title="getTitle(type)" />
+				<SharedItems :type="type"
+					:limit="true"
+					:items="sharedItems[type]" />
+				<Button v-if="hasMore(sharedItems[type])"
+					type="tertiary-no-background"
+					class="more"
+					:wide="true"
+					@click="showMore(type)">
+					<template #icon>
+						<DotsHorizontal :size="20"
+							decorative
+							title="" />
+					</template>
+					{{ getButtonTitle(type) }}
+				</Button>
+			</div>
 		</template>
 		<AppNavigationCaption :title="t('spreed', 'Projects')" />
 		<CollectionList v-if="getUserId && token"
 			:id="token"
 			type="room"
 			:name="conversation.displayName" />
+		<SharedItemsBrowser v-if="showSharedItemsBrowser"
+			:shared-items="sharedItems"
+			:active-tab.sync="browserActiveTab"
+			@close="showSharedItemsBrowser = false" />
 	</div>
 </template>
 
@@ -40,6 +58,10 @@ import { CollectionList } from 'nextcloud-vue-collections'
 import SharedItems from './SharedItems'
 import { SHARED_ITEM } from '../../../constants'
 import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
+import SharedItemsBrowser from './SharedItemsBrowser/SharedItemsBrowser.vue'
+import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import Button from '@nextcloud/vue/dist/Components/Button'
+import sharedItems from '../../../mixins/sharedItems'
 
 export default {
 
@@ -49,8 +71,13 @@ export default {
 		SharedItems,
 		CollectionList,
 		AppNavigationCaption,
+		SharedItemsBrowser,
+		DotsHorizontal,
+		Button,
 	},
 
+	mixins: [sharedItems],
+
 	props: {
 
 		active: {
@@ -59,6 +86,13 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			showSharedItemsBrowser: false,
+			browserActiveTab: '',
+		}
+	},
+
 	computed: {
 		getUserId() {
 			return this.$store.getters.getUserId()
@@ -79,12 +113,6 @@ export default {
 		sharedItems() {
 			return this.$store.getters.sharedItems(this.token)
 		},
-
-		// Defines the order of the sections
-		sharedItemsOrder() {
-			// FIXME restore when non files work return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO, SHARED_ITEM.TYPES.LOCATION, SHARED_ITEM.TYPES.DECK_CARD, SHARED_ITEM.TYPES.OTHER]
-			return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO]
-		},
 	},
 
 	watch: {
@@ -99,6 +127,43 @@ export default {
 		getSharedItemsOverview() {
 			this.$store.dispatch('getSharedItemsOverview', { token: this.token })
 		},
+
+		hasMore(items) {
+			return Object.values(items).length > 6
+		},
+
+		showMore(type) {
+			this.browserActiveTab = type
+			this.showSharedItemsBrowser = true
+		},
+
+		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.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.OTHER:
+			default:
+				return t('spreed', 'Show all other')
+			}
+		},
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+
+.more {
+	margin-top: 8px;
+}
+
+</style>