dev-sync

src/components/Views/Inbox.tsx

@@ -123,9 +123,14 @@ export const InboxView = () => {
       console.error('[post message error]:', error)
     }
   }
+
+  let formParent // autoresize ghost element
   const handleChangeMessage = (event) => {
     setPostMessageText(event.target.value)
   }
+  createEffect(() => {
+    formParent.dataset.replicatedValue = postMessageText()
+  })
 
   return (
     <div class="messages container">
@@ -189,15 +194,20 @@ export const InboxView = () => {
             </div>
           </div>
 
-          <div class="conversation__message-form">
-            <textarea
-              value={postMessageText()}
-              onInput={(event) => handleChangeMessage(event)}
-              placeholder="Написать сообщение"
-            />
-            <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
-              <Icon name="send-message" />
-            </button>
+          <div class="message-form">
+            <div class="wrapper">
+              <div class="grow-wrap" ref={formParent}>
+                <textarea
+                  value={postMessageText()}
+                  rows={1}
+                  onInput={(event) => handleChangeMessage(event)}
+                  placeholder="Написать сообщение"
+                />
+              </div>
+              <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
+                <Icon name="send-message" />
+              </button>
+            </div>
           </div>
         </div>
       </div>

src/styles/Inbox.scss

@@ -167,43 +167,77 @@ body {
   position: relative;
 }
 
-.conversation__message-form {
-  border-top: 1px solid #141414;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 1em 1em 1em 0;
+.message-form {
+  background: #fff;
+  padding: 2px 0 12px 0;
 
-  textarea {
-    @include font-size(2rem);
+  > .wrapper {
+    border: 2px solid #cccccc;
+    border-radius: 16px;
+    padding: 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-    font-family: inherit;
-    height: 4.4em;
-    width: 100%;
-    padding: 1em;
-    margin-bottom: 0;
-    min-height: unset;
-  }
+    > .grow-wrap {
+      display: grid;
+      width: 100%;
 
-  button {
-    border: none;
-    cursor: pointer;
-    padding: 0 0 0 0.4em;
-    text-align: center;
-    width: 5.6rem;
+      &::after {
+        content: attr(data-replicated-value) ' ';
+        white-space: pre-wrap;
+        visibility: hidden;
+        transition: height 1.3s ease-in-out;
+      }
 
-    &:hover {
-      .icon {
-        opacity: 0.5;
+      & > textarea {
+        margin-bottom: 0;
+        font-family: inherit;
+        border: none;
+        resize: none;
+        overflow: hidden;
+
+        &:focus,
+        &:focus-visible,
+        &:active {
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }
+      }
+
+      &::after,
+      & > textarea {
+        /* Identical styling required!! */
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        padding: 8px;
+        grid-area: 1 / 1 / 2 / 2;
+        width: 100%;
       }
     }
 
-    .icon {
-      height: 50%;
-      margin: 0 auto;
-      opacity: 0.2;
-      transition: opacity 0.3s;
-      width: 50%;
+    > button {
+      border: none;
+      cursor: pointer;
+      text-align: center;
+      width: 20px;
+      height: 20px;
+      margin: auto 8px 8px 0;
+
+      &:hover {
+        .icon {
+          opacity: 0.5;
+        }
+      }
+
+      > .icon {
+        width: 100%;
+        height: 100%;
+        opacity: 0.2;
+        transition: opacity 0.3s;
+      }
     }
   }
 }