UX: implements new composer design (#21588)

This is only the first steps of a redesign

- redesigns the buttons to have a larger hitzone
- generally bigger composer
- clicking near textarea focuses the input
- relies on the fact that safe-area-inset-bottom is set globally and doesn’t need to be set in sub components

plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs

@@ -1,4 +1,6 @@
 {{! template-lint-disable no-down-event-binding }}
+{{! template-lint-disable no-invalid-interactive }}
+
 <div class="chat-composer__wrapper">
   {{#if this.shouldRenderMessageDetails}}
     <ChatComposerMessageDetails
@@ -40,7 +42,10 @@
           @onCloseActivePanel={{this.chatEmojiPickerManager.close}}
         />
 
-        <div class="chat-composer__input-container">
+        <div
+          class="chat-composer__input-container"
+          {{on "click" this.focusTextarea}}
+        >
           <DTextarea
             id={{this.composerId}}
             value={{readonly this.currentMessage.message}}
@@ -62,12 +67,12 @@
           />
         </div>
 
-        <DButton
-          @action={{this.onSend}}
+        <Chat::Composer::Button
+          {{on "click" this.onSend}}
           @icon="paper-plane"
-          class="chat-composer__send-btn icon-only"
-          @title="chat.composer.send"
-          @disabled={{or this.disabled (not this.sendEnabled)}}
+          class="chat-composer__send-btn"
+          title="chat.composer.send"
+          disabled={{or this.disabled (not this.sendEnabled)}}
           tabindex={{if this.sendEnabled 0 -1}}
           {{on "focus" (fn this.computeIsFocused true)}}
           {{on "blur" (fn this.computeIsFocused false)}}
@@ -77,7 +82,6 @@
           <ChatComposerInlineButtons @buttons={{this.inlineButtons}} />
         {{/unless}}
       </div>
-
     </div>
   </div>