Fix allowed post formats enumeration on Iceshrimp

Iceshrimp.NET currently does not advertise the media proxy when it's
enabled, despite implementing the feature.
As a workaround, assume it's present in our deployment.

package.json

@@ -32,6 +32,7 @@
     "cropperjs": "^1.6.2",
     "diff": "^5.2.0",
     "escape-html": "^1.0.3",
+    "fzy.js": "^0.4.1",
     "iso-639-1": "^2.1.15",
     "js-cookie": "^3.0.1",
     "localforage": "^1.10.0",

src/boot/after_store.js

@@ -266,7 +266,7 @@ const getNodeInfo = async ({ store }) => {
       const features = metadata.features
       store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName })
       store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
-      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
+      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: true })
       store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
       store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
       store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
@@ -282,7 +282,7 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits })
 
       store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
-      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })
+      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.post_formats })
 
       const suggestions = metadata.suggestions
       store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })

src/components/emoji_input/emoji_input.js

@@ -185,7 +185,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 || ''
@@ -295,6 +295,12 @@ const EmojiInput = {
         e.preventDefault()
       }
     },
+    scrollCompletions () {
+      const panelBody = this.$refs['panel-body']
+      const highlighted = panelBody.children[this.highlighted]
+      const scroloff = (panelBody.offsetHeight - highlighted.offsetHeight) / 2
+      panelBody.scroll(0, highlighted.offsetTop - scroloff)
+    },
     cycleBackward (e) {
       const len = this.suggestions.length || 0
       if (len > 1) {
@@ -302,6 +308,7 @@ const EmojiInput = {
         if (this.highlighted < 0) {
           this.highlighted = this.suggestions.length - 1
         }
+        this.scrollCompletions()
         e.preventDefault()
       } else {
         this.highlighted = 0
@@ -314,6 +321,7 @@ const EmojiInput = {
         if (this.highlighted >= len) {
           this.highlighted = 0
         }
+        this.scrollCompletions()
         e.preventDefault()
       } else {
         this.highlighted = 0

src/components/emoji_input/emoji_input.vue

@@ -104,6 +104,11 @@
   }
 
   .autocomplete {
+    $item-height-internal: 32px;
+    $item-padding-vertical: 0.2em;
+    $item-separator: 1px;
+    $item-height-real: calc($item-height-internal + $item-padding-vertical * 2 + $item-separator);
+
     &-panel {
       position: absolute;
       z-index: 20;
@@ -130,28 +135,33 @@
         --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($item-height-real * 5);
       }
     }
 
     &-item {
       display: flex;
       cursor: pointer;
-      padding: 0.2em 0.4em;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-      height: 32px;
+      padding: $item-padding-vertical 0.4em;
+      border-bottom: $item-separator solid rgba(0, 0, 0, 0.4);
+      height: $item-height-internal;
 
       .image {
-        width: 32px;
-        height: 32px;
-        line-height: 32px;
+        width: $item-height-internal;
+        height: $item-height-internal;
+        line-height: $item-height-internal;
         text-align: center;
-        font-size: 32px;
+        font-size: $item-height-internal;
 
         margin-right: 4px;
 
         img {
-          width: 32px;
-          height: 32px;
+          width: $item-height-internal;
+          height: $item-height-internal;
           object-fit: contain;
         }
       }

src/components/emoji_input/suggestor.js

@@ -1,3 +1,6 @@
+import * as fzy from 'fzy.js'
+import { sortBy } from 'lodash'
+
 const MFM_TAGS = ['bg', 'blur', 'bounce', 'center', 'fg', 'flip', 'font', 'jelly', 'jump', 'position', 'rainbow', 'rotate', 'scale', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
   .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))
 
@@ -33,7 +36,22 @@ export default data => {
 }
 
 export const suggestEmoji = emojis => input => {
-  const noPrefix = input.toLowerCase().substr(1)
+  let noPrefix = input.toLowerCase().substring(1)
+
+  if (noPrefix[0] !== '~') {
+    const matches = emojis.filter(({ displayText }) => fzy.hasMatch(noPrefix, displayText))
+    return sortBy(matches, m => {
+      let score = fzy.score(noPrefix, m.displayText)
+
+      // Prioritize custom emoji a lot
+      score += m.imageUrl ? 100 : 0
+
+      // Sort in descending order
+      return -score
+    })
+  }
+
+  noPrefix = noPrefix.substring(1)
   return emojis
     .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))
     .sort((a, b) => {
@@ -122,14 +140,14 @@ export const suggestUsers = ({ dispatch, state }) => {
       const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
 
       return diff + nameAlphabetically + screenNameAlphabetically
-       
+
     }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
       displayText: screen_name_ui,
       detailText: name,
       imageUrl: profile_image_url_original,
       replacement: '@' + screen_name + ' '
     }))
-     
+
 
     suggestions = newSuggestions || []
     return suggestions

static/config.json

@@ -1,4 +1,5 @@
 {
+  "frontendCommitUrl": "https://akkoma.dev/novenary/akkoma-fe/commit/",
   "alwaysShowSubjectInput": true,
   "background": "/static/aurora_borealis.jpg",
   "collapseMessageWithSubject": false,

yarn.lock

@@ -4283,6 +4283,11 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+fzy.js@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/fzy.js/-/fzy.js-0.4.1.tgz#695bf87cc0bbdda9cbcf22bc318a74c4aca6b758"
+  integrity sha512-4sPVXf+9oGhzg2tYzgWe4hgAY0wEbkqeuKVEgdnqX8S8VcLosQsDjb0jV+f5uoQlf8INWId1w0IGoufAoik1TA==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -7390,7 +7395,16 @@ streamroller@^3.1.5:
     debug "^4.3.4"
     fs-extra "^8.1.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7477,7 +7491,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8577,8 +8598,7 @@ workerpool@6.2.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -8596,6 +8616,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"