💄 feat: MessageInputTextAreaに縦の伸長を追加

src/assets/mdi.ts

@@ -41,6 +41,7 @@
   mdiChevronDoubleLeft,
   mdiChevronDoubleUp,
   mdiChevronDoubleDown,
+  mdiChevronDown,
   mdiChevronLeft,
   mdiChevronRight,
   mdiBookmark,
@@ -142,6 +143,7 @@
   'chevron-double': mdiChevronDoubleLeft,
   'chevron-double-up': mdiChevronDoubleUp,
   'chevron-double-down': mdiChevronDoubleDown,
+  'chevron-down': mdiChevronDown,
   'chevron-left': mdiChevronLeft,
   'chevron-right': mdiChevronRight,
   'chevron-up': mdiChevronUp,

src/components/Main/MainView/MessageElement/MessageEditor.vue

@@ -12,6 +12,7 @@
         :class="$style.inputTextArea"
         :is-posting="isPostingAttachment"
         simple-padding
+        is-max-height-none
         @add-attachments="onAddAttachments"
         @modifier-key-down="onModifierKeyDown"
         @modifier-key-up="onModifierKeyUp"
@@ -43,17 +44,17 @@
 </template>
 
 <script lang="ts">
+import type { AxiosProgressEvent } from 'axios'
 import type { Ref } from 'vue'
 import { computed, onMounted, ref } from 'vue'
-import apis, { buildFilePathForPost, formatResizeError } from '/@/lib/apis'
-import useModifierKey from '/@/components/Main/MainView/MessageInput/composables/useModifierKey'
 import useTextStampPickerInvoker from '../composables/useTextStampPickerInvoker'
-import { MESSAGE_MAX_LENGTH } from '/@/lib/validate'
+import useAttachments from '/@/components/Main/MainView/MessageInput/composables/useAttachments'
+import useModifierKey from '/@/components/Main/MainView/MessageInput/composables/useModifierKey'
+import apis, { buildFilePathForPost, formatResizeError } from '/@/lib/apis'
 import { countLength } from '/@/lib/basic/string'
-import { useToastStore } from '/@/store/ui/toast'
 import { getResizedFile } from '/@/lib/resize'
-import useAttachments from '/@/components/Main/MainView/MessageInput/composables/useAttachments'
-import type { AxiosProgressEvent } from 'axios'
+import { MESSAGE_MAX_LENGTH } from '/@/lib/validate'
+import { useToastStore } from '/@/store/ui/toast'
 
 const useEditMessage = (
   props: { messageId: string },
@@ -135,12 +136,12 @@
 </script>
 
 <script lang="ts" setup>
+import MessageInputInsertStampButton from '/@/components/Main/MainView/MessageInput/MessageInputInsertStampButton.vue'
 import MessageInputKeyGuide from '/@/components/Main/MainView/MessageInput/MessageInputKeyGuide.vue'
 import MessageInputTextArea from '/@/components/Main/MainView/MessageInput/MessageInputTextArea.vue'
-import FormButton from '/@/components/UI/FormButton.vue'
-import MessageInputInsertStampButton from '/@/components/Main/MainView/MessageInput/MessageInputInsertStampButton.vue'
-import MessageInputUploadProgress from '/@/components/Main/MainView/MessageInput/MessageInputUploadProgress.vue'
 import MessageInputUploadButton from '/@/components/Main/MainView/MessageInput/MessageInputUploadButton.vue'
+import MessageInputUploadProgress from '/@/components/Main/MainView/MessageInput/MessageInputUploadProgress.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
 
 const props = defineProps<{
   rawContent: string

src/components/Main/MainView/MessageInput/MessageInput.vue

@@ -26,19 +26,26 @@
     </div>
     <div v-else :class="$style.inputContainer">
       <message-input-left-controls
-        v-model:is-expanded="isLeftControlsExpanded"
+        v-model:is-left-controls-expanded="isLeftControlsExpanded"
         v-model:is-preview-shown="isPreviewShown"
+        v-model:is-input-text-area-expanded="isInputTextAreaExpanded"
+        :show-text-area-expand-button="showTextAreaExpandButton"
         :class="$style.leftControls"
         @click-add-attachment="addAttachment"
+        @toggle-left-controls-expanded="
+          textareaComponentRef?.textareaAutosizeRef?.autosizeUpdateTextarea
+        "
       />
       <message-input-text-area
         ref="textareaComponentRef"
         v-model="state.text"
+        v-model:show-text-area-expand-button="showTextAreaExpandButton"
         :channel-id="channelId"
         :is-posting="isPosting"
         :shrink-to-one-line="
           (forceMobileStyle || isMobile) && isLeftControlsExpanded
         "
+        :is-input-text-area-expanded="isInputTextAreaExpanded"
         @focus="onFocus"
         @blur="onBlur"
         @add-attachments="onAddAttachments"
@@ -58,30 +65,30 @@
 </template>
 
 <script lang="ts" setup>
-import MessageInputLeftControls from './MessageInputLeftControls.vue'
-import MessageInputPreview from './MessageInputPreview.vue'
-import MessageInputTypingUsers from './MessageInputTypingUsers.vue'
-import MessageInputKeyGuide from './MessageInputKeyGuide.vue'
-import MessageInputTextArea from './MessageInputTextArea.vue'
-import MessageInputRightControls from './MessageInputRightControls.vue'
-import MessageInputFileList from './MessageInputFileList.vue'
-import MessageInputUploadProgress from './MessageInputUploadProgress.vue'
-import AIcon from '/@/components/UI/AIcon.vue'
 import { computed, ref, toRef, watch, watchEffect } from 'vue'
-import type { ChannelId, DMChannelId, UserId } from '/@/types/entity-ids'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import useTextStampPickerInvoker from '../composables/useTextStampPickerInvoker'
 import useAttachments from './composables/useAttachments'
 import useModifierKey from './composables/useModifierKey'
 import usePostMessage from './composables/usePostMessage'
+import MessageInputFileList from './MessageInputFileList.vue'
+import MessageInputKeyGuide from './MessageInputKeyGuide.vue'
+import MessageInputLeftControls from './MessageInputLeftControls.vue'
+import MessageInputPreview from './MessageInputPreview.vue'
+import MessageInputRightControls from './MessageInputRightControls.vue'
+import MessageInputTextArea from './MessageInputTextArea.vue'
+import MessageInputTypingUsers from './MessageInputTypingUsers.vue'
+import MessageInputUploadProgress from './MessageInputUploadProgress.vue'
+import { $boolAttr } from '/@/bool-attr'
+import AIcon from '/@/components/UI/AIcon.vue'
 import useFocus from '/@/composables/dom/useFocus'
-import { useToastStore } from '/@/store/ui/toast'
 import useMessageInputState from '/@/composables/messageInputState/useMessageInputState'
 import useMessageInputStateAttachment from '/@/composables/messageInputState/useMessageInputStateAttachment'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
-import { useChannelsStore } from '/@/store/entities/channels'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
-import { $boolAttr } from '/@/bool-attr'
+import { useChannelsStore } from '/@/store/entities/channels'
+import { useResponsiveStore } from '/@/store/ui/responsive'
+import { useToastStore } from '/@/store/ui/toast'
+import type { ChannelId, DMChannelId, UserId } from '/@/types/entity-ids'
 
 const props = defineProps<{
   channelId: ChannelId | DMChannelId
@@ -108,6 +115,8 @@
 const { channelsMap } = useChannelsStore()
 const isLeftControlsExpanded = ref(false)
 const isPreviewShown = ref(false)
+const isInputTextAreaExpanded = ref(true)
+const showTextAreaExpandButton = ref(false)
 
 const isArchived = computed(
   () => channelsMap.value.get(props.channelId)?.archived ?? false
@@ -147,13 +156,11 @@
     (sendWithModifierKey.value !== 'modifier' || canPostMessage.value)
 )
 
-const textareaComponentRef = ref<{
-  textareaAutosizeRef: { $el: HTMLTextAreaElement }
-}>()
+const textareaComponentRef = ref<InstanceType<typeof MessageInputTextArea>>()
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   toRef(state, 'text'),
-  computed(() => textareaComponentRef.value?.textareaAutosizeRef.$el),
+  computed(() => textareaComponentRef.value?.textareaAutosizeRef?.$el),
   containerEle
 )
 
@@ -194,7 +201,6 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: flex-end;
 
   &[data-is-archived] {
     @include color-ui-secondary-inactive;
@@ -219,7 +225,7 @@
   }
 }
 .leftControls {
-  margin: 8px 8px 8px 0;
+  margin: 2px 8px 8px 0;
 }
 .rightControls {
   position: absolute;

src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue

@@ -1,46 +1,63 @@
 <template>
-  <div :class="$style.container" :data-is-mobile="$boolAttr(isMobile)">
-    <template v-if="!isMobile || isExpanded">
-      <message-input-upload-button
-        :class="$style.button"
-        @click="emit('clickAddAttachment')"
-      />
-      <message-input-preview-button
-        v-model="isPreviewShownValue"
-        :class="$style.button"
-      />
-    </template>
+  <div :class="$style.outerContainer" :style="outerContainerStyle">
     <icon-button
-      v-if="isMobile"
-      :class="$style.button"
-      :icon-name="isExpanded ? 'chevron-left' : 'chevron-right'"
+      v-if="showTextAreaExpandButton"
+      :class="$style.textAreaExpandButton"
+      :icon-name="isInputTextAreaExpanded ? 'chevron-down' : 'chevron-up'"
       icon-mdi
-      @click="toggleExpanded"
+      @click="toggleIsInputTextAreaExpanded"
     />
+    <div :class="$style.innerContainer" :data-is-mobile="$boolAttr(isMobile)">
+      <template v-if="!isMobile || isLeftControlsExpanded">
+        <message-input-upload-button
+          :class="$style.button"
+          @click="emit('clickAddAttachment')"
+        />
+        <message-input-preview-button
+          v-model="isPreviewShownValue"
+          :class="$style.button"
+        />
+      </template>
+      <icon-button
+        v-if="isMobile"
+        :class="$style.button"
+        :icon-name="isLeftControlsExpanded ? 'chevron-left' : 'chevron-right'"
+        icon-mdi
+        @click="toggleLeftControlsExpanded"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import MessageInputUploadButton from './MessageInputUploadButton.vue'
+import { computed } from 'vue'
 import MessageInputPreviewButton from './MessageInputPreviewButton.vue'
+import MessageInputUploadButton from './MessageInputUploadButton.vue'
 import IconButton from '/@/components/UI/IconButton.vue'
-import { computed } from 'vue'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 
 const props = defineProps<{
-  isExpanded: boolean
+  isLeftControlsExpanded: boolean
   isPreviewShown: boolean
+  isInputTextAreaExpanded: boolean
+  showTextAreaExpandButton: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:isExpanded', _v: boolean): void
+  (e: 'update:isLeftControlsExpanded', _v: boolean): void
   (e: 'update:isPreviewShown', _v: boolean): void
   (e: 'clickAddAttachment'): void
+  (e: 'update:isInputTextAreaExpanded', _v: boolean): void
+  (e: 'toggleLeftControlsExpanded'): void
 }>()
 
 const { isMobile } = useResponsiveStore()
-const toggleExpanded = () => {
-  emit('update:isExpanded', !props.isExpanded)
+const toggleLeftControlsExpanded = () => {
+  emit('update:isLeftControlsExpanded', !props.isLeftControlsExpanded)
+  emit('toggleLeftControlsExpanded')
+}
+const toggleIsInputTextAreaExpanded = () => {
+  emit('update:isInputTextAreaExpanded', !props.isInputTextAreaExpanded)
 }
 
 const isPreviewShownValue = computed<boolean>({
@@ -49,17 +66,32 @@
   },
   set(v) {
     emit('update:isPreviewShown', v)
-    emit('update:isExpanded', false)
+    emit('update:isLeftControlsExpanded', false)
+    emit('toggleLeftControlsExpanded')
   }
 })
+
+const outerContainerStyle = computed(() => ({
+  '--justify-content': props.showTextAreaExpandButton
+    ? 'space-between'
+    : 'flex-end'
+}))
 </script>
 
 <style lang="scss" module>
-.container {
+.outerContainer {
+  @include color-ui-secondary;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: var(--justify-content);
+}
+.innerContainer {
   @include color-ui-secondary;
   display: flex;
 }
 .button {
+  @include color-ui-secondary;
   margin: 0 4px;
 
   &:first-child:first-child {
@@ -69,4 +101,7 @@
     margin-right: 0;
   }
 }
+.textAreaExpandButton {
+  @include color-ui-secondary;
+}
 </style>