From 7b8429aa24985bb53e5c0c8c26276e4d5e0b050f Mon Sep 17 00:00:00 2001
From: novenary <novenary@kwak.zip>
Date: Tue, 17 Sep 2024 03:28:40 +0300
Subject: [PATCH] emoji_input: show more suggestions

5 suggestions is really too little, so increase the limit and make the
list scrollable.
---
 src/components/emoji_input/emoji_input.js  | 8 +++++++-
 src/components/emoji_input/emoji_input.vue | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 138a5b51..d6e5da53 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -183,7 +183,7 @@ const EmojiInput = {
       // Async: cancel if textAtCaret has changed during wait
       if (this.textAtCaret !== newWord) return
       if (matchedSuggestions.length <= 0) return
-      this.suggestions = take(matchedSuggestions, 5)
+      this.suggestions = take(matchedSuggestions, 25)
         .map(({ imageUrl, ...rest }) => ({
           ...rest,
           img: imageUrl || ''
@@ -300,6 +300,9 @@ const EmojiInput = {
         if (this.highlighted < 0) {
           this.highlighted = this.suggestions.length - 1
         }
+        const panelBody = this.$refs['panel-body']
+        const highlighted = panelBody.children[this.highlighted]
+        highlighted.scrollIntoView({ block: 'nearest' })
         e.preventDefault()
       } else {
         this.highlighted = 0
@@ -312,6 +315,9 @@ const EmojiInput = {
         if (this.highlighted >= len) {
           this.highlighted = 0
         }
+        const panelBody = this.$refs['panel-body']
+        const highlighted = panelBody.children[this.highlighted]
+        highlighted.scrollIntoView({ block: 'nearest' })
         e.preventDefault()
       } else {
         this.highlighted = 0
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index aeacf544..c4174c27 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -128,6 +128,12 @@
         --postLink: var(--popoverPostLink, $fallback--link);
         --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
         --icon: var(--popoverIcon, $fallback--icon);
+
+        overflow-y: scroll;
+        scrollbar-gutter: stable;
+        scrollbar-width: thin;
+        max-height: calc((0.2em * 2 + 1px + 32px) * 5);
+        scroll-padding-block: calc((0.2em * 2 + 1px + 32px) * 2);
       }
     }