fix: review fixes

.eslintrc.js

@@ -58,7 +58,8 @@ module.exports = {
             // fn: async () => {}, ожидая () => void
             properties: false
           }
-        }]
+        }],
+        '@typescript-eslint/no-unused-vars': 'off'
       }
     },
     {
@@ -336,7 +337,6 @@ module.exports = {
       allowShortCircuit: true
     }],
     // Включено в full файле
-    '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-useless-constructor': 'error',
     '@typescript-eslint/no-unnecessary-template-expression': 'error',
     '@typescript-eslint/object-curly-spacing': ['error', 'always'],

src/actions/handleEngineUpdates.ts

@@ -123,7 +123,6 @@ export async function handleEngineUpdates(fromPts: number, updates: IEngine.Upda
           down: true,
           aroundId: cmid
         })
-
         break
       }
 

src/misc/utils.ts

@@ -1,5 +1,5 @@
 import * as electron from '@electron/remote'
-import { ComponentPublicInstance, onScopeDispose, Ref, unref } from 'vue'
+import { ComponentPublicInstance, KeyboardEvent, type MouseEvent, onScopeDispose, Ref, unref } from 'vue'
 
 export { debounce } from 'main-process/shared'
 
@@ -138,3 +138,13 @@ export function unrefElement(ref: Ref<RefElement>): ExplicitRefElement {
 
   return raw
 }
+
+export function isEventWithModifier(event: MouseEvent | KeyboardEvent): boolean {
+  return (
+    event.ctrlKey ||
+    event.metaKey ||
+    event.altKey ||
+    event.shiftKey ||
+    (event instanceof MouseEvent && event.button === 1)
+  )
+}

src/model/api-types/index.ts

@@ -123,7 +123,6 @@ export type Methods = {
     params: MessagesGetLongPollHistoryParams
     response: MessagesGetLongPollHistoryResponse
   }
-
   'messages.send': {
     params: MessagesSendParams
     response: MessagesSendResponse

src/ui/messenger/ConvoComposer/ConvoComposer.css

@@ -43,12 +43,6 @@
   opacity: 1;
 }
 
-.ConvoComposer__send[disabled] {
-  pointer-events: none;
-  opacity: 0.8;
-  background-color: transparent;
-}
-
 .ConvoComposer__restriction {
   display: flex;
   align-items: center;

src/ui/messenger/ConvoComposer/ConvoComposer.tsx

@@ -1,7 +1,7 @@
-import { ChangeEvent, computed, defineComponent, KeyboardEvent, MouseEvent, ref, shallowRef } from 'vue'
+import { ChangeEvent, computed, defineComponent, KeyboardEvent, ref, shallowRef } from 'vue'
 import * as Convo from 'model/Convo'
 import { useEnv } from 'hooks'
-import { random } from 'misc/utils'
+import { isEventWithModifier, random } from 'misc/utils'
 import { INTEGER_BOUNDARY } from 'misc/constants'
 import { Button } from 'ui/ui/Button/Button'
 import { ButtonIcon } from 'ui/ui/ButtonIcon/ButtonIcon'
@@ -37,24 +37,20 @@ export const ConvoComposer = defineComponent<Props>((props) => {
     }
   }
 
-  const onFromButton = async (event: MouseEvent<HTMLElement>) => {
-    event.preventDefault()
-    await sendMessage()
-  }
-
-  const onFromKeyboard = async (event: KeyboardEvent<HTMLElement>) => {
-    if (event.code === 'Enter' && !event.shiftKey) {
+  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (event.code === 'Enter' && !isEventWithModifier(event)) {
+      // Предотвращаем перенос строки
       event.preventDefault()
 
       if (isEmpty.value) {
         return
       }
 
-      await sendMessage()
+      sendMessage()
     }
   }
 
-  const printMessage = (event: ChangeEvent<HTMLElement>) => {
+  const onInput = (event: ChangeEvent<HTMLElement>) => {
     text.value = event.currentTarget.textContent ?? ''
   }
 
@@ -114,18 +110,22 @@ export const ConvoComposer = defineComponent<Props>((props) => {
           role="textbox"
           placeholder={lang.use('me_convo_composer_placeholder')}
           ref={$input}
-          onKeydown={onFromKeyboard}
-          onInput={printMessage}
+          onKeydown={onKeyDown}
+          onInput={onInput}
         />
         <ButtonIcon
           class="ConvoComposer__send"
           disabled={isEmpty.value}
           icon={<Icon24Send />}
-          onMousedown={onFromButton}
+          addHoverBackground={false}
+          onClick={sendMessage}
+          // Предотвращаем сброс фокуса с поля ввода
+          onMousedown={(event) => event.preventDefault()}
         />
       </>
     )
   }
+
   return () => (
     <div class="ConvoComposer">
       <div class="ConvoComposer__panel">

src/ui/messenger/ConvoHistory/ConvoHistory.tsx

@@ -48,10 +48,18 @@ export const ConvoHistory = defineComponent<Props>(({ convo }) => {
     }
 
     /**
-    * scrollTop - высота от начала элемена до вьюпорта, offsetHeight - высота вьюпорта.
-    * Их сумма - высота от нижней видимой границы до верхней существующей границы контента.
-    * Если мы находимся в самом низу, то она будет совпадать с общей высотой, но если
-    * мы проскроллим вверх, появляется контент снизу вьюпорта, который не виден нам
+     * Автоматически скроллим до низа истории, если перед ререндером мы находились внизу,
+     * но впоследствии ререндера оказались выше.
+     * Основной сценарий - когда мы или собеседник написали новое сообщение
+     *
+     * scrollTop - высота от начала контента до начала вьюпорта;
+     * offsetHeight - высота вьюпорта;
+     * scrollHeight - общая высота контента.
+     *
+     * Сумма scrollTop и offsetHeight равна высоте от начала контента до конца вьюпорта.
+     * Если мы находимся в самом низу, то она будет совпадать с общей высотой, но если
+     * мы проскроллим вверх, появляется контент под вьюпортом, который нам не виден.
+     * Тогда сумма не совпадет и мы поймем что юзер не находится внизу
     */
     const upperContentHeight = $historyElement.value.scrollTop + $historyElement.value.offsetHeight
 

src/ui/ui/ButtonIcon/ButtonIcon.css

@@ -8,12 +8,14 @@
   transition: background-color var(--fastTransition);
 }
 
-.ButtonIcon:hover {
-  background: var(--vkui--color_transparent--hover);
-}
-
 .ButtonIcon[disabled] {
   cursor: default;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.ButtonIcon--hoverBackground:hover {
+  background: var(--vkui--color_transparent--hover);
 }
 
 .ButtonIcon--stretched {

src/ui/ui/ButtonIcon/ButtonIcon.tsx

@@ -7,15 +7,19 @@ import './ButtonIcon.css'
 type Props = {
   icon?: JSXElement
   stretched?: boolean
+  addHoverBackground?: boolean
 } & ButtonHTMLAttributes
 
 export const ButtonIcon = defineComponent<Props>((props, { slots }) => {
   const { isFocused, onBlur, onFocus } = useFocusVisible()
-
+  const { addHoverBackground = true } = props
   return () => (
     <button
       type="button"
-      class={['ButtonIcon', props.stretched && 'ButtonIcon--stretched']}
+      class={['ButtonIcon', {
+        'ButtonIcon--stretched': props.stretched,
+        'ButtonIcon--hoverBackground': addHoverBackground
+      }]}
       onBlur={onBlur}
       onFocus={onFocus}
     >
@@ -25,5 +29,5 @@ export const ButtonIcon = defineComponent<Props>((props, { slots }) => {
     </button>
   )
 }, {
-  props: ['icon', 'stretched']
+  props: ['icon', 'stretched', 'addHoverBackground']
 })