conversation: scrollIntoView when collapsed

This helps find the original context when collapsing a thread on the
timeline.

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/components/conversation/conversation.js

@@ -267,11 +267,11 @@ const conversation = {
     },
     replies () {
       let i = 1
-       
+
       return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
-         
+
         const irid = in_reply_to_status_id
-         
+
         if (irid) {
           result[irid] = result[irid] || []
           result[irid].push({
@@ -414,6 +414,11 @@ const conversation = {
     },
     toggleExpanded () {
       this.expanded = !this.expanded
+      this.$nextTick(() => {
+        if (!this.expanded) {
+          this.$el.scrollIntoView({ block: 'nearest' })
+        }
+      })
     },
     getConversationId (statusId) {
       const status = this.$store.state.statuses.allStatusesObject[statusId]

src/components/conversation/conversation.vue

@@ -278,5 +278,8 @@
   &.-expanded.status-fadein {
     margin: calc(var(--status-margin, $status-margin) / 2);
   }
+
+  /* HACK: this value was picked arbitrarily and this is likely not even the right place */
+  scroll-margin-block-start: calc(var(--navbar-height) * 2);
 }
 </style>

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

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);
       }
     }
 

src/components/emoji_input/suggestor.js

@@ -1,3 +1,6 @@
+import * as fzy from 'fzy.js'
+import { sortBy } from 'lodash'
+
 const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow', 'rotate', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
   .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))
 
@@ -34,6 +37,20 @@ export default data => {
 
 export const suggestEmoji = emojis => input => {
   const noPrefix = input.toLowerCase().substr(1)
+
+  if (true) { // TODO check option setting
+    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
+    })
+  }
+
   return emojis
     .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))
     .sort((a, b) => {
@@ -122,14 +139,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

src/components/emoji_picker/emoji_picker.js

@@ -31,7 +31,7 @@ const EmojiPicker = {
   data () {
     return {
       keyword: '',
-      activeGroup: 'standard',
+      activeGroup: 'recent',
       showingStickers: false,
       keepOpen: false
     }

src/components/poll/poll_form.vue

@@ -24,6 +24,7 @@
       <button
         v-if="options.length > 2"
         class="delete-option button-unstyled -hover-highlight"
+        type="button"
         @click="deleteOption(index)"
       >
         <FAIcon icon="times" />
@@ -32,6 +33,7 @@
     <button
       v-if="options.length < maxOptions"
       class="add-option faint button-unstyled -hover-highlight"
+      type="button"
       @click="addOption"
     >
       <FAIcon

src/components/post_status_form/post_status_form.js

@@ -85,6 +85,7 @@ const PostStatusForm = {
     'quoteId',
     'repliedUser',
     'attentions',
+    'copyMessageLanguage',
     'copyMessageScope',
     'subject',
     'disableSubject',
@@ -153,8 +154,7 @@ const PostStatusForm = {
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
 
-    const { postContentType: contentType, postLanguage: defaultPostLanguage, sensitiveByDefault, sensitiveIfSubject, interfaceLanguage, alwaysShowSubjectInput } = this.$store.getters.mergedConfig
-    const postLanguage = defaultPostLanguage || interfaceToISOLanguage(interfaceLanguage)
+    const { postContentType: contentType, sensitiveByDefault, sensitiveIfSubject, alwaysShowSubjectInput } = this.$store.getters.mergedConfig
 
     let statusParams = {
       spoilerText: this.subject || '',
@@ -165,7 +165,7 @@ const PostStatusForm = {
       poll: {},
       mediaDescriptions: {},
       visibility: this.suggestedVisibility(),
-      language: postLanguage,
+      language: this.suggestedLanguage(),
       contentType
     }
 
@@ -180,7 +180,7 @@ const PostStatusForm = {
         poll: this.statusPoll || {},
         mediaDescriptions: this.statusMediaDescriptions || {},
         visibility: this.statusScope || this.suggestedVisibility(),
-        language: this.statusLanguage || postLanguage,
+        language: this.statusLanguage || this.suggestedLanguage(),
         contentType: statusContentType
       }
     }
@@ -329,6 +329,7 @@ const PostStatusForm = {
   watch: {
     'newStatus': {
       deep: true,
+      flush: 'sync',
       handler () {
         this.statusChanged()
       }
@@ -341,17 +342,22 @@ const PostStatusForm = {
       this.saveDraft()
     },
     clearStatus () {
-      const newStatus = this.newStatus
+      const config = this.$store.getters.mergedConfig
       this.newStatus = {
         status: '',
         spoilerText: '',
         files: [],
-        visibility: newStatus.visibility,
-        contentType: newStatus.contentType,
-        language: newStatus.language,
+        nsfw: !!config.sensitiveByDefault,
+        visibility: this.suggestedVisibility(),
+        contentType: config.postContentType,
+        language: this.suggestedLanguage(),
         poll: {},
         mediaDescriptions: {}
       }
+      const scopeselector = this.$refs.scopeselector
+      if (scopeselector) {
+        scopeselector.currentScope = this.newStatus.visibility
+      }
       this.pollFormVisible = false
       this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
       this.clearPollForm()
@@ -760,6 +766,15 @@ const PostStatusForm = {
     openProfileTab () {
       this.$store.dispatch('openSettingsModalTab', 'profile')
     },
+    suggestedLanguage () {
+      // Make sure the inherited language is actually valid
+      if (this.postLanguageOptions.find(o => o.value === this.copyMessageLanguage)) {
+        return this.copyMessageLanguage
+      }
+      const { postLanguage: defaultPostLanguage, interfaceLanguage } = this.$store.getters.mergedConfig
+      const postLanguage = defaultPostLanguage || interfaceToISOLanguage(interfaceLanguage)
+      return postLanguage
+    },
     suggestedVisibility () {
       if (this.copyMessageScope) {
         if (this.copyMessageScope === 'direct') {

src/components/post_status_form/post_status_form.vue

@@ -18,6 +18,7 @@
         >
           <button
             class="button-unstyled -link"
+            type="button"
             @click="openProfileTab"
           >
             {{ $t('post_status.account_not_locked_warning_link') }}
@@ -136,6 +137,7 @@
             class="form-post-subject"
             @input="onSubjectInput"
             @focus="focusSubjectInput()"
+            @keydown.exact.enter.prevent
           >
         </EmojiInput>
         <i18n-t
@@ -193,6 +195,7 @@
           :class="{ 'visibility-tray-edit': isEdit }"
         >
           <scope-selector
+            ref="scopeselector"
             v-if="!disableVisibilitySelector"
             :user-default="userDefaultScope"
             :original-scope="copyMessageScope"
@@ -272,6 +275,7 @@
           <button
             class="emoji-icon button-unstyled"
             :title="$t('emoji.add_emoji')"
+            type="button"
             @click="showEmojiPicker"
           >
             <FAIcon icon="smile-beam" />
@@ -281,6 +285,7 @@
             class="poll-icon button-unstyled"
             :class="{ selected: pollFormVisible }"
             :title="$t('polls.add_poll')"
+            type="button"
             @click="togglePollForm"
           >
             <FAIcon icon="poll-h" />
@@ -290,6 +295,7 @@
             class="spoiler-icon button-unstyled"
             :class="{ selected: subjectVisible }"
             :title="$t('post_status.toggle_content_warning')"
+            type="button"
             @click="toggleSubjectVisible"
           >
             <FAIcon icon="eye-slash" />

src/components/status/status.vue

@@ -519,6 +519,7 @@
           :reply-to="status.id"
           :attentions="status.attentions"
           :replied-user="status.user"
+          :copy-message-language="status.language"
           :copy-message-scope="status.visibility"
           :subject="replySubject"
           @posted="toggleReplying"
@@ -533,6 +534,7 @@
           :quote-id="status.id"
           :attentions="[status.user]"
           :replied-user="status.user"
+          :copy-message-language="status.language"
           :copy-message-scope="status.visibility"
           :subject="replySubject"
           @posted="toggleQuoting"

src/services/api/api.service.js

@@ -901,7 +901,7 @@ const postStatus = ({
       form.append('poll[options][]', option)
     })
   }
-  if (inReplyToStatusId) {
+  if (inReplyToStatusId && typeof inReplyToStatusId === 'string') {
     form.append('in_reply_to_id', inReplyToStatusId)
   }
   if (quoteId) {

src/services/entity_normalizer/entity_normalizer.service.js

@@ -326,6 +326,7 @@ export const parseStatus = (data) => {
     }
     output.pinned = data.pinned
     output.muted = data.muted
+    output.language = data.language
   } else {
     output.favorited = data.favorited
     output.fave_num = data.fave_num

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"