feat(chat): change message character limit from 500 to 800

Also
- removes some debug loggers
- fixes NL "too long" hint error copy

firestore.rules

@@ -95,7 +95,7 @@ service cloud.firestore {
     }
 
     function validateTrailState(trail) {
-      return isNonEmptyString(trail.originalFileName) 
+      return isNonEmptyString(trail.originalFileName)
         && isNonEmptyString(trail.md5Hash)
         && trail.visible is bool
     }
@@ -119,7 +119,7 @@ service cloud.firestore {
         allow update: if isValidTrailAccess(userId)
         // Only the visibility should be updateable by the user, once the trail is created.
           && incomingData().diff(existingData()).affectedKeys().hasOnly(['visible'])
-          && incomingData().visible is bool; 
+          && incomingData().visible is bool;
         allow delete: if isValidTrailAccess(userId);
       }
       match /push-registrations/{registrationId} {
@@ -246,6 +246,11 @@ service cloud.firestore {
       return isSignedIn() && isVerified() && requesterId() in existingData().users;
     }
 
+    // Function that acts a global variable
+    function maxMessageLength() {
+      return 800;
+    }
+
     // Conditions common to chat creations and updates
     function isValidChatWrite() {
       return isSignedIn() && isVerified()
@@ -257,16 +262,16 @@ service cloud.firestore {
         && incomingData().lastActivity is timestamp
         && incomingData().lastMessage is string
         && incomingData().lastMessage.size() >= 1
-        && incomingData().lastMessage.size() <= 500
+        && incomingData().lastMessage.size() <= maxMessageLength()
       // The following keys are optional.
       // The client creates a chat before it has sent the first message in it, so these message-related properties may be empty.
       // Some old chats with existing messages before these features were lauched, may also not have these keys, until someone sends a new message in the chat.
-        && 
+        &&
       (
       !incomingData().keys().hasAny(['lastMessageSeen', 'lastMessageSender'])
-        || 
+        ||
       (
-      incomingData().keys().hasAll(['lastMessageSeen', 'lastMessageSender']) 
+      incomingData().keys().hasAll(['lastMessageSeen', 'lastMessageSender'])
         && incomingData().lastMessageSeen is bool
         && incomingData().lastMessageSender is string
         && incomingData().lastMessageSender in incomingData().users
@@ -292,15 +297,15 @@ service cloud.firestore {
       return isValidChatWrite()
       // Only chat participants can update the chat
         && requesterId() in incomingData().users
-      // Participants can not change the creation timestamp 
+      // Participants can not change the creation timestamp
         && incomingData().createdAt == existingData().createdAt
       // Participants can not change the chat participants
         && incomingData().users == existingData().users
     }
 
 
     function canReadMessage(chatId) {
-      return isSignedIn() && isVerified() 
+      return isSignedIn() && isVerified()
       // this condition doubles as a "does the chat exist" check
         && requesterId() in getChatUsers(chatId);
     }
@@ -310,7 +315,7 @@ service cloud.firestore {
         && incomingData().keys().hasOnly(['content', 'createdAt', 'from'])
         && incomingData().content is string
         && incomingData().content.size() >= 1
-        && incomingData().content.size() <= 500
+        && incomingData().content.size() <= maxMessageLength()
         && incomingData().createdAt is timestamp
         && incomingData().from == requesterId()
     }

src/locales/nl.json

@@ -724,7 +724,7 @@
     "notify": {
       "unverified": "Verifieer jouw e-mail voordat je begint te chatten",
       "empty-message": "Jouw bericht kan niet leeg zijn",
-      "too-long": "Jouw bericht is {surplus} {surplus, plural, one {karakter} other {karakters} te lang..."
+      "too-long": "Jouw bericht is {surplus} {surplus, plural, one {karakter} other {karakters}} te lang..."
     },
     "go-to-garden": "Ga naar de tuin",
     "error-modal": {

src/routes/chat/[name]/[chatId]/+page.svelte

@@ -28,6 +28,8 @@
   } from '$lib/api/push-registrations';
   import { isMobileDevice } from '$lib/util/uaInfo';
 
+  const MAX_MESSAGE_LENGTH = 800;
+
   /**
    * The chat ID of the currently selected chat.
    * Equal to 'new' in case of a new chat. The UID of the recipient is then in the query param 'id'.
@@ -102,8 +104,6 @@
     (chat || $newConversation) &&
     (partnerHasGarden === null || partnerInitializedForChatId !== chatId)
   ) {
-    console.log('id', partnerId);
-    console.log('id', $newConversation);
     // variables are initialized
     // 1. Partner ID
     partnerId = chat ? chat.users.find((id) => $user?.id !== id) : $newConversation!.partnerId;
@@ -117,7 +117,7 @@
       })
       .catch((err) => {
         // something went wrong just act like partner has no garden
-        console.log(err);
+        console.error(err);
         partnerHasGarden = false;
       })
       .finally(() => {
@@ -204,9 +204,11 @@
   });
 
   let hint = '';
-  $: if (typedMessage && typedMessage.length > 500) {
+  $: if (typedMessage && typedMessage.length > MAX_MESSAGE_LENGTH) {
     const len = typedMessage.length;
-    hint = $_('chat.notify.too-long', { values: { surplus: len - 500 } });
+    // This key uses ICU syntax https://formatjs.io/docs/core-concepts/icu-syntax/#plural-format
+    // Referenced from https://github.com/kaisermann/svelte-i18n/blob/main/docs/Formatting.md
+    hint = $_('chat.notify.too-long', { values: { surplus: len - MAX_MESSAGE_LENGTH } });
   } else {
     hint = '';
   }
@@ -240,18 +242,19 @@
         // The first uid in the users array is the requester/traveller
         const role = chat.users[0] === $user?.id ? 'traveller' : 'host';
         trackEvent(PlausibleEvent.SEND_RESPONSE, { role });
-        // Reset the text area
-        typedMessage = '';
-        if (textArea) {
-          textArea.style.height = '0';
-        }
-        // Scroll down in the chats list
-        scrollDownMessages();
       } catch (ex) {
         showChatError(ex);
       }
     }
 
+    // Reset the text area
+    typedMessage = '';
+    if (textArea) {
+      textArea.style.height = '0';
+    }
+    // Scroll down in the chats list
+    scrollDownMessages();
+
     const COOKIE_FIRST_REMINDER_DAYS = 30;
     // TODO: test if this appears after a new message to a new person
     // Show instructions notifications after sending message as a traveller
@@ -293,10 +296,7 @@
 
   const scrollDownMessages = () => {
     if (messageContainer) {
-      console.log('scrolling down');
       messageContainer.scrollTo(0, messageContainer.scrollHeight - messageContainer.offsetHeight);
-    } else {
-      console.log('no container');
     }
   };
 </script>
@@ -492,23 +492,28 @@ CSS grids should do the job cleanly -->
 
   form {
     flex: 0.08;
-    display: flex;
+    display: grid;
+    grid-template:
+      'hint hint'
+      'textarea sendbtn' / 1fr auto;
+    column-gap: 1.2rem;
     align-items: flex-end;
     width: 100%;
     position: relative;
     padding-top: 1.2rem;
   }
 
   .hint {
+    grid-area: hint;
     color: var(--color-danger);
     height: 3rem;
     font-size: 1.4rem;
-    position: absolute;
     top: -2.5rem;
     left: 0;
   }
 
   textarea {
+    grid-area: textarea;
     /* the 16px font size actually prevents iOS/Safari from zooming in on this box */
     font-size: 16px;
     background-color: rgba(187, 187, 187, 0.23);
@@ -519,7 +524,6 @@ CSS grids should do the job cleanly -->
     min-height: 6rem;
     /* 26 rem for desktop, 38svh is intended for mobile */
     max-height: min(26rem, 38svh);
-    margin-right: 1.2rem;
     /* Disable manual resizing, since we adapt to the text automatically */
     resize: none;
     transition: border 300ms ease-in-out;
@@ -530,6 +534,7 @@ CSS grids should do the job cleanly -->
   }
 
   form button {
+    grid-area: sendbtn;
     background-color: var(--color-green);
     font-size: 2.4rem;
     color: var(--color-white);