fix(SharedItems): fetch after page reload + fix(Conversation): set warnings on max length

src/components/AvatarWrapper/AvatarWrapper.vue

@@ -224,6 +224,8 @@ export default {
 		top: 0;
 		width: var(--avatar-size);
 		height: var(--avatar-size);
+		max-height: var(--avatar-size);
+		max-width: var(--avatar-size);
 		line-height: var(--avatar-size);
 		font-size: calc(var(--avatar-size) / 2);
 		border-radius: 50%;

src/components/ConversationSettings/BasicInfo.vue

@@ -30,6 +30,7 @@
 			:loading="isNameLoading"
 			:placeholder="t('spreed', 'Enter a name for this conversation')"
 			:edit-button-aria-label="t('spreed', 'Edit conversation name')"
+			:max-length="CONVERSATION.MAX_NAME_LENGTH"
 			@submit-text="handleUpdateName"
 			@update:editing="handleEditName" />
 		<template v-if="!isOneToOne">
@@ -42,6 +43,7 @@
 				:loading="isDescriptionLoading"
 				:edit-button-aria-label="t('spreed', 'Edit conversation description')"
 				:placeholder="t('spreed', 'Enter a description for this conversation')"
+				:max-length="CONVERSATION.MAX_DESCRIPTION_LENGTH"
 				multiline
 				use-markdown
 				@submit-text="handleUpdateDescription"
@@ -92,7 +94,10 @@ export default {
 	},
 
 	setup() {
-		return { supportsAvatar }
+		return {
+			supportsAvatar,
+			CONVERSATION,
+		}
 	},
 
 	data() {

src/components/NewConversationDialog/NewConversationDialog.vue

@@ -224,6 +224,8 @@ export default {
 		// Controls the disabled/enabled state of the first page's button.
 		disabled() {
 			return this.conversationName === '' || (this.newConversation.hasPassword && this.password === '')
+				|| this.conversationName.length > CONVERSATION.MAX_NAME_LENGTH
+				|| this.newConversation.description.length > CONVERSATION.MAX_DESCRIPTION_LENGTH
 		},
 	},
 

src/components/NewConversationDialog/NewConversationSetupPage.vue

@@ -26,12 +26,20 @@
 			v-model="conversationName"
 			:placeholder="t('spreed', 'Enter a name for this conversation')"
 			:label="t('spreed', 'Name')"
+			:error="!!nameErrorLabel"
 			label-visible
 			@keydown.enter="$emit('handle-enter')" />
+		<span v-if="nameErrorLabel" class="new-group-conversation__error">
+			{{ nameErrorLabel }}
+		</span>
 		<NcTextArea v-model="conversationDescription"
 			:placeholder="t('spreed', 'Enter a description for this conversation')"
 			:label="t('spreed', 'Description')"
+			:error="!!descriptionErrorLabel"
 			label-visible />
+		<span v-if="descriptionErrorLabel" class="new-group-conversation__error">
+			{{ descriptionErrorLabel }}
+		</span>
 
 		<template v-if="supportsAvatar">
 			<label class="avatar-editor__label">
@@ -136,6 +144,20 @@ export default {
 			},
 		},
 
+		nameErrorLabel() {
+			if (this.conversationName.length <= CONVERSATION.MAX_NAME_LENGTH) {
+				return
+			}
+			return t('spreed', 'Maximum length exceeded ({maxlength} characters)', { maxlength: CONVERSATION.MAX_NAME_LENGTH })
+		},
+
+		descriptionErrorLabel() {
+			if (this.conversationDescription.length <= CONVERSATION.MAX_DESCRIPTION_LENGTH) {
+				return
+			}
+			return t('spreed', 'Maximum length exceeded ({maxlength} characters)', { maxlength: CONVERSATION.MAX_DESCRIPTION_LENGTH })
+		},
+
 		isPublic: {
 			get() {
 				return this.newConversation.type === CONVERSATION.TYPE.PUBLIC
@@ -206,5 +228,9 @@ export default {
 		margin-top: 10px;
 		padding: 4px 0;
 	}
+
+	&__error {
+		color: var(--color-error);
+	}
 }
 </style>

src/components/RightSidebar/SharedItems/SharedItemsTab.vue

@@ -185,9 +185,12 @@ export default {
 	},
 
 	watch: {
-		sharedItemsIdentifier() {
-			if (this.token && this.active && this.isSidebarOpen) {
-				this.sharedItemsStore.getSharedItemsOverview(this.token)
+		sharedItemsIdentifier: {
+			immediate: true,
+			handler() {
+				if (this.token && this.active && this.isSidebarOpen) {
+					this.sharedItemsStore.getSharedItemsOverview(this.token)
+				}
 			}
 		},
 	},

src/constants.js

@@ -104,7 +104,10 @@ export const CONVERSATION = {
 		VIDEO_VERIFICATION: 'share:password',
 		BREAKOUT_ROOM: 'room',
 		DEFAULT: '',
-	}
+	},
+
+	MAX_NAME_LENGTH: 255,
+	MAX_DESCRIPTION_LENGTH: 500,
 }
 export const ATTENDEE = {
 	ACTOR_TYPE: {

src/services/conversationsService.js

@@ -176,7 +176,7 @@ const setConversationPassword = async function(token, password) {
  * Set a conversation's name
  *
  * @param {string} token the conversation's token
- * @param {string} name the name to be set
+ * @param {string} name the name to be set (max 255 characters)
  */
 const setConversationName = async function(token, name) {
 	return axios.put(generateOcsUrl('apps/spreed/api/v4/room/{token}', { token }), {
@@ -188,7 +188,7 @@ const setConversationName = async function(token, name) {
  * Set a conversation's description
  *
  * @param {string} token the conversation's token
- * @param {string} description the description to be set
+ * @param {string} description the description to be set (max 500 characters)
  */
 const setConversationDescription = async function(token, description) {
 	return axios.put(generateOcsUrl('apps/spreed/api/v4/room/{token}/description', { token }), {