Rushing more stuff in

Signed-off-by: marco <marcoambrosini@pm.me>

3 files changed, 51 insertions, 11 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 3ed04b3c9..09cda5d64 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -25,7 +25,10 @@
 	<file-preview v-bind="filePreview"
 		:tabindex="wrapperTabIndex"
 		class="file-preview"
-		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor, 'file-preview--row-layout': rowLayout}"
+		:class="{ 'file-preview--viewer-available': isViewerAvailable,
+			'file-preview--upload-editor': isUploadEditor,
+			'file-preview--shared-items-grid': isSharedItemsTab && !rowLayout,
+			'file-preview--row-layout': rowLayout }"
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
 		<div v-if="!isLoading"
@@ -537,6 +540,7 @@ export default {
 
 	.image-container {
 		display: flex;
+		height: 100%;
 
 		&.playable {
 			.preview {
@@ -602,10 +606,21 @@ export default {
 		border-radius: var(--border-radius);
 		padding: 2px 4px;
 
+		.image-container {
+			height: 100%;
+		}
+
 		.name-container {
 			padding: 0 4px;
 		}
 	}
+
+	&--shared-items-grid {
+		aspect-ratio: 1;
+		.preview {
+			width: 100%;
+		}
+	}
 }
 
 .remove-file {
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index f16347906..8f4427e54 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -81,7 +81,7 @@
 			ref="sharedItemsTab"
 			:order="4"
 			icon="icon-details"
-			:name="t('spreed', 'Shared Items')"
+			:name="t('spreed', 'Shared items')"
 			@update:active="handleUpdateActive">
 			<template #icon>
 				<FolderMultipleImage :size="20"
diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index 390903ca3..7f8cbb72f 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItems.vue
@@ -31,7 +31,8 @@
 					v-bind="file.messageParameters.file" />
 			</template>
 		</div>
-		<Button type="tertiary"
+		<Button v-if="hasMore"
+			type="tertiary"
 			class="shared-items__more"
 			:wide="true"
 			@click="handleCaptionClick">
@@ -40,7 +41,7 @@
 					decorative
 					title="" />
 			</template>
-			Show all {{ title }}
+			{{ buttonTitle }}
 		</Button>
 	</div>
 </template>
@@ -75,7 +76,7 @@ export default {
 
 	computed: {
 		filesToDisplay() {
-			return Object.values(this.items).slice(0, 5)
+			return Object.values(this.items).slice(0, 6)
 		},
 
 		title() {
@@ -99,20 +100,41 @@ export default {
 			}
 		},
 
-		isList() {
+		buttonTitle() {
 			switch (this.type) {
+			case 'media':
+				return t('spreed', 'Show all media')
 			case 'file':
-				return true
+				return t('spreed', 'Show all files')
+			case 'deck-card':
+				return t('spreed', 'Show all deck cards')
 			case 'voice':
-				return true
+				return t('spreed', 'Show all voice messages')
+			case 'location':
+				return t('spreed', 'Show all locations')
 			case 'audio':
-				return true
+				return t('spreed', 'Show all audio')
 			case 'other':
-				return true
+				return t('spreed', 'Show all other')
 			default:
+				return ''
+			}
+		},
+
+		isList() {
+			switch (this.type) {
+			case 'media':
+				return false
+			case 'locations':
 				return false
+			default:
+				return true
 			}
 		},
+
+		hasMore() {
+			return Object.values(this.items).length > 6
+		},
 	},
 
 	methods: {
@@ -127,16 +149,19 @@ export default {
 .files {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 1fr 1fr;
+	grid-gap: 4px;
 	&__list {
 		display: flex;
 		flex-direction: column;
 	}
+
 }
 
 .shared-items {
 	margin-bottom: 16px;
 	&__more {
-		margin-top: 4px;
+		margin-top: 8px;
 	}
 }
 </style>