From ba96d644e0d3c544f1a30f70a274d01af0aae2c5 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Thu, 19 Jan 2023 14:40:32 +0100
Subject: [PATCH 1/5] Fix posting attachments

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 src/components/Composer/Composer.vue | 15 +++++-----
 src/components/PostAttachment.vue    | 42 ++++++++++++++++++++++++----
 src/components/TimelineEntry.vue     | 14 ++++++++--
 src/components/TimelinePost.vue      |  8 ------
 4 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index 9ef2c37a..b5f8a9ac 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -402,11 +402,12 @@ export default {
 			this.$refs.fileUploadInput.click()
 		},
 		handleFileChange(event) {
-			const previewUrl = URL.createObjectURL(event.target.files[0])
-			this.previewUrls.push({
-				description: '',
-				url: previewUrl,
-				result: event.target.files[0],
+			event.target.files.forEach((file) => {
+				this.previewUrls.push({
+					description: '',
+					url: URL.createObjectURL(file),
+					result: file,
+				})
 			})
 		},
 		removeAttachment(idx) {
@@ -481,8 +482,8 @@ export default {
 			formData.append('type', this.type)
 			for (const preview of this.previewUrls) {
 				// TODO send the summary and other props too
-				formData.append('attachments', preview.result)
-				formData.append('attachmentDescriptions', preview.description)
+				formData.append('attachments[]', preview.result)
+				formData.append('attachmentDescriptions[]', preview.description)
 			}
 			if (this.replyTo) {
 				formData.append('replyTo', this.replyTo.id)
diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue
index 6a7644c3..4c8ab6f0 100644
--- a/src/components/PostAttachment.vue
+++ b/src/components/PostAttachment.vue
@@ -1,9 +1,15 @@
 <template>
-	<masonry>
-		<div v-for="(item, index) in attachments" :key="index">
-			<img :src="imageUrl(item)" @click="showModal(index)">
+	<div class="post-attachments">
+		<div v-for="(item, index) in attachments"
+			:key="index"
+			class="post-attachment"
+			@click="showModal(index)">
+			<img v-if="item.mimeType.startsWith('image/')" :src="imageUrl(item)">
+			<div v-else>
+				{{ item }}
+			</div>
 		</div>
-		<NcModal v-show="modal"
+		<NcModal v-if="modal"
 			:has-previous="current > 0"
 			:has-next="current < (attachments.length - 1)"
 			size="full"
@@ -14,11 +20,10 @@
 				<canvas ref="modalCanvas" />
 			</div>
 		</NcModal>
-	</masonry>
+	</div>
 </template>
 
 <script>
-
 import serverData from '../mixins/serverData.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import { generateUrl } from '@nextcloud/router'
@@ -101,3 +106,28 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.post-attachments {
+	margin-top: 12px;
+	width: 100%;
+	display: flex;
+	gap: 12px;
+	overflow-x: scroll;
+
+	.post-attachment {
+		height: 100px;
+		object-fit: cover;
+		border-radius: var(--border-radius-large);
+		overflow: hidden;
+
+		> * {
+			cursor: pointer;
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+</style>
diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue
index 2ce2baec..04941109 100644
--- a/src/components/TimelineEntry.vue
+++ b/src/components/TimelineEntry.vue
@@ -27,8 +27,8 @@
 		<UserEntry v-if="item.type === 'SocialAppNotification' && item.details.actor" :key="item.details.actor.id" :item="item.details.actor" />
 		<template v-else>
 			<div class="wrapper">
-				<TimelineAvatar :item="entryContent" />
-				<TimelinePost class="message"
+				<TimelineAvatar class="entry__avatar" :item="entryContent" />
+				<TimelinePost class="entry__content"
 					:item="entryContent"
 					:parent-announce="isBoost" />
 			</div>
@@ -130,9 +130,19 @@ export default {
 		display: flex;
 		margin: auto;
 		padding: 0;
+
 		&:focus {
 			background-color: rgba(47, 47, 47, 0.068);
 		}
+
+		.entry__avatar {
+			flex-shrink: 0;
+		}
+
+		.entry__content {
+			flex-grow: 1;
+			width: 0;
+		}
 	}
 
 	.notification-header {
diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue
index 05809747..9c3b095d 100644
--- a/src/components/TimelinePost.vue
+++ b/src/components/TimelinePost.vue
@@ -220,7 +220,6 @@ export default {
 		font-size: 15px;
 		line-height: 1.6em;
 		position: relative;
-		width: 100%;
 
 		::v-deep a.widget-default {
 			text-decoration: none !important;
@@ -276,13 +275,6 @@ export default {
 		}
 	}
 
-	span {
-		/* opacity: 0.5; */
-	}
-	.entry-content {
-		display: flex;
-	}
-
 	.post-header {
 		display: flex;
 		flex-direction: row;

From d6f086a22a01cef5605a977d21813a6f05b3d77b Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Thu, 19 Jan 2023 15:11:05 +0100
Subject: [PATCH 2/5] Fix sending hashtags and mentions

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 lib/Controller/LocalController.php   |   6 +-
 src/components/Composer/Composer.vue | 350 +++++++++++++--------------
 2 files changed, 175 insertions(+), 181 deletions(-)

diff --git a/lib/Controller/LocalController.php b/lib/Controller/LocalController.php
index 5548f1f7..b75e237f 100644
--- a/lib/Controller/LocalController.php
+++ b/lib/Controller/LocalController.php
@@ -124,14 +124,10 @@ class LocalController extends Controller {
 	 *
 	 * @NoAdminRequired
 	 */
-	public function postCreate(string $content = '', $to = null, string $type = null, ?string $replyTo = null, $attachments = null, ?string $hashtags = null): DataResponse {
+	public function postCreate(string $content = '', array $to = [], string $type = null, ?string $replyTo = null, $attachments = null, array $hashtags = []): DataResponse {
 		$content = $content ?: '';
-		$to = is_string($to) ? [$to] : $to;
-		$to = $to ?? [];
 		$replyTo = $replyTo ?? '';
 		$type = $type ?? Stream::TYPE_PUBLIC;
-		$hashtags = $hashtags === '' ? [] : $hashtags;
-		$hashtags = $hashtags ?? [];
 		$attachments = $attachments ?? [];
 
 		try {
diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index b5f8a9ac..45506dc7 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -477,14 +477,12 @@ export default {
 
 			const formData = new FormData()
 			formData.append('content', content)
-			formData.append('to', to)
-			formData.append('hashtags', hashtags)
+			to.forEach(to => formData.append('to[]', to))
+			hashtags.forEach(hashtag => formData.append('hashtags[]', hashtag))
 			formData.append('type', this.type)
-			for (const preview of this.previewUrls) {
-				// TODO send the summary and other props too
-				formData.append('attachments[]', preview.result)
-				formData.append('attachmentDescriptions[]', preview.description)
-			}
+			this.previewUrls.forEach(preview => formData.append('attachments[]', preview.result))
+			this.previewUrls.forEach(preview => formData.append('attachmentDescriptions[]', preview.description))
+
 			if (this.replyTo) {
 				formData.append('replyTo', this.replyTo.id)
 			}
@@ -557,122 +555,146 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	.new-post {
-		padding: 10px;
-		background-color: var(--color-main-background);
-		position: sticky;
-		z-index: 100;
-		margin-bottom: 10px;
-		top: 0;
+.new-post {
+	padding: 10px;
+	background-color: var(--color-main-background);
+	position: sticky;
+	z-index: 100;
+	margin-bottom: 10px;
+	top: 0;
 
-		&-form {
-			flex-grow: 1;
-			position: relative;
-			top: -10px;
-			margin-left: 39px;
-			&__emoji-picker {
-				z-index: 1;
-			}
-		}
-	}
-
-	.new-post-author {
-		padding: 5px;
-		display: flex;
-		flex-wrap: wrap;
-
-		.post-author {
-			padding: 6px;
-
-			.post-author-name {
-				font-weight: bold;
-			}
-
-			.post-author-id {
-				opacity: .7;
-			}
-		}
-	}
-
-	.reply-to {
-		background-image: url(../../../img/reply.svg);
-		background-position: 8px 12px;
-		background-repeat: no-repeat;
-		margin-left: 39px;
-		margin-bottom: 20px;
-		overflow: hidden;
-		background-color: var(--color-background-hover);
-		border-radius: var(--border-radius-large);
-		padding: 5px;
-		padding-left: 30px;
-
-		.reply-info {
-			display: flex;
-			align-items: center;
-		}
-		.close-button {
-			margin-left: auto;
-			opacity: .7;
-			min-width: 30px;
-			min-height: 30px;
-			height: 30px;
-			width: 30px !important;
-		}
-	}
-
-	.message {
-		width: 100%;
-		padding-right: 44px;
-		min-height: 70px;
-		min-width: 2px;
-		display: block;
-	}
-
-	[contenteditable=true]:empty:before {
-		content: attr(placeholder);
-		display: block; /* For Firefox */
-		opacity: .5;
-	}
-
-	input[type=submit].inline {
-		width: 44px;
-		height: 44px;
-		margin: 0;
-		padding: 13px;
-		background-color: transparent;
-		border: none;
-		opacity: 0.3;
-		position: absolute;
-		bottom: 0;
-		right: 0;
-	}
-
-	.options {
-		display: flex;
-		align-items: flex-end;
-		width: 100%;
-		margin-top: 0.5rem;
-	}
-
-	.emptySpace {
-		flex-grow:1;
-	}
-
-	.popovermenu-parent {
+	&-form {
+		flex-grow: 1;
 		position: relative;
+		top: -10px;
+		margin-left: 39px;
+		&__emoji-picker {
+			z-index: 1;
+		}
 	}
-	.popovermenu {
-		top: 55px;
-	}
+}
 
-	.attachment-picker-wrapper {
-		position: absolute;
-		right: 0;
-		top: 2;
-	}
+.new-post-author {
+	padding: 5px;
+	display: flex;
+	flex-wrap: wrap;
 
-	/* Tribute-specific styles TODO: properly scope component css */
-	.tribute-container {
+	.post-author {
+		padding: 6px;
+
+		.post-author-name {
+			font-weight: bold;
+		}
+
+		.post-author-id {
+			opacity: .7;
+		}
+	}
+}
+
+.reply-to {
+	background-image: url(../../../img/reply.svg);
+	background-position: 8px 12px;
+	background-repeat: no-repeat;
+	margin-left: 39px;
+	margin-bottom: 20px;
+	overflow: hidden;
+	background-color: var(--color-background-hover);
+	border-radius: var(--border-radius-large);
+	padding: 5px;
+	padding-left: 30px;
+
+	.reply-info {
+		display: flex;
+		align-items: center;
+	}
+	.close-button {
+		margin-left: auto;
+		opacity: .7;
+		min-width: 30px;
+		min-height: 30px;
+		height: 30px;
+		width: 30px !important;
+	}
+}
+
+.message {
+	width: 100%;
+	padding-right: 44px;
+	min-height: 70px;
+	min-width: 2px;
+	display: block;
+
+	:deep(.mention) {
+		color: var(--color-primary-element);
+		background-color: var(--color-background-dark);
+		border-radius: 5px;
+		padding-top: 1px;
+		padding-left: 2px;
+		padding-bottom: 1px;
+		padding-right: 5px;
+
+		img {
+			width: 16px;
+			border-radius: 50%;
+			overflow: hidden;
+			margin-right: 3px;
+			vertical-align: middle;
+			margin-top: -1px;
+		}
+	}
+}
+
+[contenteditable=true]:empty:before {
+	content: attr(placeholder);
+	display: block; /* For Firefox */
+	opacity: .5;
+}
+
+input[type=submit].inline {
+	width: 44px;
+	height: 44px;
+	margin: 0;
+	padding: 13px;
+	background-color: transparent;
+	border: none;
+	opacity: 0.3;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+.options {
+	display: flex;
+	align-items: flex-end;
+	width: 100%;
+	margin-top: 0.5rem;
+}
+
+.emptySpace {
+	flex-grow:1;
+}
+
+.popovermenu-parent {
+	position: relative;
+}
+.popovermenu {
+	top: 55px;
+}
+
+.attachment-picker-wrapper {
+	position: absolute;
+	right: 0;
+	top: 2;
+}
+
+.hashtag {
+	text-decoration: underline;
+}
+</style>
+<style lang="scss">
+/* Tribute-specific styles TODO: properly scope component css */
+.tribute-container {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -695,43 +717,42 @@ export default {
 			border-radius: 4px;
 			background-clip: padding-box;
 			overflow: hidden;
-		}
 
-		li {
-			color: var(--color-text);
-			padding: 5px 10px;
-			cursor: pointer;
-			font-size: 14px;
-			display: flex;
+			li {
+				color: var(--color-text);
+				padding: 5px 10px;
+				cursor: pointer;
+				font-size: 14px;
+				display: flex;
 
-			span {
-				display: block;
+				span {
+					display: block;
+				}
+
+				&.highlight,
+				&:hover {
+					background: var(--color-primary);
+					color: var(--color-primary-text);
+				}
+
+				img {
+					width: 32px;
+					height: 32px;
+					border-radius: 50%;
+					overflow: hidden;
+					margin-right: 10px;
+					margin-left: -3px;
+					margin-top: 3px;
+				}
+
+				span {
+					font-weight: bold;
+				}
+
+				&.no-match {
+					cursor: default;
+				}
 			}
-
-			&.highlight,
-			&:hover {
-				background: var(--color-primary);
-				color: var(--color-primary-text);
-			}
-
-			img {
-				width: 32px;
-				height: 32px;
-				border-radius: 50%;
-				overflow: hidden;
-				margin-right: 10px;
-				margin-left: -3px;
-				margin-top: 3px;
-			}
-
-			span {
-				font-weight: bold;
-			}
-
-			&.no-match {
-				cursor: default;
-			}
-
 		}
 
 		.menu-highlighted {
@@ -751,28 +772,5 @@ export default {
 			color: var(--color-primary-text) !important;
 			opacity: .6;
 		}
-	}
-
-	.message .mention {
-		color: var(--color-primary-element);
-		background-color: var(--color-background-dark);
-		border-radius: 5px;
-		padding-top: 1px;
-		padding-left: 2px;
-		padding-bottom: 1px;
-		padding-right: 5px;
-
-		img {
-			width: 16px;
-			border-radius: 50%;
-			overflow: hidden;
-			margin-right: 3px;
-			vertical-align: middle;
-			margin-top: -1px;
-		}
-	}
-
-	.hashtag {
-		text-decoration: underline;
-	}
+}
 </style>

From 3d027881bb6fa5b1ab9b63538ee6de87d79e1726 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Mon, 23 Jan 2023 12:52:47 +0100
Subject: [PATCH 3/5] Prevent error when inserting an emoji

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 src/components/Composer/Composer.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index 45506dc7..a392882d 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -422,7 +422,6 @@ export default {
 			}
 			this.post += this.$twemoji.parse(emoji) + ' '
 			this.$refs.composerInput.innerHTML += this.$twemoji.parse(emoji) + ' '
-			this.$refs.emojiPicker.hide()
 		},
 		togglePopoverMenu() {
 			this.menuOpened = !this.menuOpened

From 161fb3cf58718f093b989f52d5ac82990fbd20e3 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Mon, 23 Jan 2023 12:53:15 +0100
Subject: [PATCH 4/5] Prevent adding more than one attachment

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 src/components/Composer/Composer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index a392882d..62d4f6ca 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -25,7 +25,6 @@
 	<div class="new-post" data-id="">
 		<input id="file-upload"
 			ref="fileUploadInput"
-			multiple
 			type="file"
 			tabindex="-1"
 			aria-hidden="true"
@@ -83,6 +82,7 @@
 			<div class="options">
 				<NcButton v-tooltip="t('social', 'Add attachment')"
 					type="tertiary"
+					:disabled="previewUrls.length >= 1"
 					:aria-label="t('social', 'Add attachment')"
 					@click.prevent="clickImportInput">
 					<template #icon>

From cef7d9b42995285d448a890e7944827330d3593f Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Mon, 23 Jan 2023 12:53:28 +0100
Subject: [PATCH 5/5] Prevent shrinking of attachments

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 src/components/PostAttachment.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue
index 4c8ab6f0..0e1f06d0 100644
--- a/src/components/PostAttachment.vue
+++ b/src/components/PostAttachment.vue
@@ -119,6 +119,7 @@ export default {
 		object-fit: cover;
 		border-radius: var(--border-radius-large);
 		overflow: hidden;
+		flex-shrink: 0;
 
 		> * {
 			cursor: pointer;