Limit status message to 500 chars

Signed-off-by: Louis Chemineau <louis@chmn.me>

1 files changed, 18 insertions, 2 deletions

diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index e0a77ecc..d3c73e7e 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -68,7 +68,7 @@
 					:contenteditable="!loading"
 					class="message"
 					placeholder="What would you like to share?"
-					:class="{'icon-loading': loading}"
+					:class="{'icon-loading': loading, 'too-long': statusIsTooLong}"
 					@keyup.prevent.enter="keyup"
 					@input="updateStatusContent"
 					@tribute-replaced="updatePostFromTribute" />
@@ -277,12 +277,24 @@ export default {
 				return true
 			}
 
-			return !this.statusIsEmpty
+			if (this.statusIsTooLong) {
+				return false
+			}
+
+			if (this.statusIsEmpty) {
+				return false
+			}
+
+			return true
 		},
 		/** @return {boolean} */
 		statusIsEmpty() {
 			return this.statusContent.length === 0 || this.statusContent === '<br>'
 		},
+
+		statusIsTooLong() {
+			return this.statusContent.length > 500
+		},
 	},
 	mounted() {
 		this.$root.$on('composer-reply', (/** @type {import('../../types/Mastodon.js').Status} */data) => {
@@ -518,6 +530,10 @@ export default {
 	min-width: 2px;
 	display: block;
 
+	&.too-long {
+		color: var(--color-error);
+	}
+
 	:deep(.mention) {
 		color: var(--color-primary-element);
 		background-color: var(--color-background-dark);