Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop:
  fix fontello
  Translated using Weblate (Russian)
  Translated using Weblate (Italian)
  lint fix
  fixed copy-pasting leftovers
  improved algorithm, possibly speed too
  fix 8x spaces inside this paren
  feat/reorder-emojis-by-position-of-keyword
  rename to gravestone
  Apply 1 suggestion(s) to 1 file(s)
  change i18n phrasing
  separate reply button to its own component, add changelog entry
  add basic deletes support that works with masto WS

CHANGELOG.md

@@ -8,7 +8,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - New option to optimize timeline rendering to make the site more responsive (enabled by default)
 
 ## [Unreleased patch]
-
 ### Fixed
 - Fixed chats list not updating its order when new messages come in
 - Fixed chat messages sometimes getting lost when you receive a message at the same time
@@ -16,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Added
 - Import/export a muted users
+- Proper handling of deletes when using websocket streaming
 
 ## [2.1.1] - 2020-09-08
 ### Changed

build/webpack.base.conf.js

@@ -97,6 +97,7 @@ module.exports = {
     }),
     new FontelloPlugin({
       config: require('../static/fontello.json'),
+      host: 'https://fontello.com',
       name: 'fontello',
       output: {
         css: 'static/[name].' + now + '.css',  // [hash] is not supported. Use the current timestamp instead for versioning.

src/components/emoji_picker/emoji_picker.js

@@ -8,10 +8,20 @@ const LOAD_EMOJI_BY = 60
 const LOAD_EMOJI_MARGIN = 64
 
 const filterByKeyword = (list, keyword = '') => {
+  if (keyword === '') return list
+
   const keywordLowercase = keyword.toLowerCase()
-  return list.filter(emoji =>
-    emoji.displayText.toLowerCase().includes(keywordLowercase)
-  )
+  let orderedEmojiList = []
+  for (const emoji of list) {
+    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
+    if (indexOfKeyword > -1) {
+      if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
+        orderedEmojiList[indexOfKeyword] = []
+      }
+      orderedEmojiList[indexOfKeyword].push(emoji)
+    }
+  }
+  return orderedEmojiList.flat()
 }
 
 const EmojiPicker = {

src/components/react_button/react_button.js

@@ -28,9 +28,17 @@ const ReactButton = {
     emojis () {
       if (this.filterWord !== '') {
         const filterWordLowercase = this.filterWord.toLowerCase()
-        return this.$store.state.instance.emoji.filter(emoji =>
-          emoji.displayText.toLowerCase().includes(filterWordLowercase)
-        )
+        let orderedEmojiList = []
+        for (const emoji of this.$store.state.instance.emoji) {
+          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
+          if (indexOfFilterWord > -1) {
+            if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
+              orderedEmojiList[indexOfFilterWord] = []
+            }
+            orderedEmojiList[indexOfFilterWord].push(emoji)
+          }
+        }
+        return orderedEmojiList.flat()
       }
       return this.$store.state.instance.emoji || []
     },

src/components/reply_button/reply_button.js

@@ -0,0 +1,12 @@
+
+const ReplyButton = {
+  name: 'ReplyButton',
+  props: ['status', 'replying'],
+  computed: {
+    loggedIn () {
+      return !!this.$store.state.users.currentUser
+    }
+  }
+}
+
+export default ReplyButton

src/components/reply_button/reply_button.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <i
+      v-if="loggedIn"
+      class="button-icon button-reply icon-reply"
+      :title="$t('tool_tip.reply')"
+      :class="{'-active': replying}"
+      @click.prevent="$emit('toggle')"
+    />
+    <i
+      v-else
+      class="button-icon button-reply -disabled icon-reply"
+      :title="$t('tool_tip.reply')"
+    />
+    <span v-if="status.replies_count > 0">
+      {{ status.replies_count }}
+    </span>
+  </div>
+</template>
+
+<script src="./reply_button.js"></script>

src/components/status/status.js

@@ -1,3 +1,4 @@
+import ReplyButton from '../reply_button/reply_button.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -19,6 +20,7 @@ import { unescape, uniqBy } from 'lodash'
 const Status = {
   name: 'Status',
   components: {
+    ReplyButton,
     FavoriteButton,
     ReactButton,
     RetweetButton,
@@ -158,7 +160,7 @@ const Status = {
       return this.mergedConfig.hideFilteredStatuses
     },
     hideStatus () {
-      return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden
+      return (this.muted && this.hideFilteredStatuses) || this.virtualHidden
     },
     isFocused () {
       // retweet or root of an expanded conversation

src/components/status/status.scss

@@ -30,6 +30,18 @@ $status-margin: 0.75em;
     border-left-style: solid;
   }
 
+  .gravestone {
+    padding: $status-margin;
+    color: $fallback--faint;
+    color: var(--faint, $fallback--faint);
+    display: flex;
+
+    .deleted-text {
+      margin: 0.5em 0;
+      align-items: center;
+    }
+  }
+
   .status-container {
     display: flex;
     padding: $status-margin;

src/components/status/status.vue

@@ -95,6 +95,7 @@
       </div>
 
       <div
+        v-if="!deleted"
         :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
         :style="[ userStyle ]"
         class="status-container"
@@ -323,21 +324,11 @@
             v-if="!noHeading && !isPreview"
             class="status-actions"
           >
-            <div>
-              <i
-                v-if="loggedIn"
-                class="button-icon button-reply icon-reply"
-                :title="$t('tool_tip.reply')"
-                :class="{'-active': replying}"
-                @click.prevent="toggleReplying"
+            <reply-button
+              :replying="replying"
+              :status="status"
+              @toggle="toggleReplying"
             />
-              <i
-                v-else
-                class="button-icon button-reply -disabled icon-reply"
-                :title="$t('tool_tip.reply')"
-              />
-              <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
-            </div>
             <retweet-button
               :visibility="status.visibility"
               :logged-in="loggedIn"
@@ -360,6 +351,25 @@
 
         </div>
       </div>
+      <div
+        v-else
+        class="gravestone"
+      >
+        <div class="left-side">
+          <UserAvatar :compact="compact" />
+        </div>
+        <div class="right-side">
+          <div class="deleted-text">
+            {{ $t('status.status_deleted') }}
+          </div>
+          <reply-button
+            v-if="replying"
+            :replying="replying"
+            :status="status"
+            @toggle="toggleReplying"
+          />
+        </div>
+      </div>
       <div
         v-if="replying"
         class="status-container reply-form"

src/components/user_avatar/user_avatar.vue

@@ -1,5 +1,6 @@
 <template>
   <StillImage
+    v-if="user"
     class="Avatar"
     :alt="user.screen_name"
     :title="user.screen_name"
@@ -7,6 +8,11 @@
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
   />
+  <div
+    v-else
+    class="Avatar -placeholder"
+    :class="{ 'avatar-compact': compact }"
+  />
 </template>
 
 <script src="./user_avatar.js"></script>
@@ -42,5 +48,10 @@
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
+
+  &.-placeholder {
+    background-color: $fallback--fg;
+    background-color: var(--fg, $fallback--fg);
+  }
 }
 </style>

src/i18n/en.json

@@ -665,7 +665,8 @@
     "show_full_subject": "Show full subject",
     "hide_full_subject": "Hide full subject",
     "show_content": "Show content",
-    "hide_content": "Hide content"
+    "hide_content": "Hide content",
+    "status_deleted": "This post was deleted"
   },
   "user_card": {
     "approve": "Approve",

src/i18n/fi.json

@@ -578,7 +578,8 @@
     "show_full_subject": "Näytä koko otsikko",
     "hide_full_subject": "Piilota koko otsikko",
     "show_content": "Näytä sisältö",
-    "hide_content": "Piilota sisältö"
+    "hide_content": "Piilota sisältö",
+    "status_deleted": "Poistettu viesti"
   },
   "user_card": {
     "approve": "Hyväksy",

src/i18n/it.json

@@ -702,7 +702,8 @@
     "reply_to": "Rispondi a",
     "delete_confirm": "Vuoi veramente eliminare questo messaggio?",
     "unbookmark": "Rimuovi segnalibro",
-    "bookmark": "Aggiungi segnalibro"
+    "bookmark": "Aggiungi segnalibro",
+    "status_deleted": "Questo messagio è stato cancellato"
   },
   "time": {
     "years_short": "{0}a",

src/i18n/ru.json

@@ -473,5 +473,10 @@
   "tool_tip": {
     "accept_follow_request": "Принять запрос на чтение",
     "reject_follow_request": "Отклонить запрос на чтение"
+  },
+  "image_cropper": {
+    "save_without_cropping": "Сохранить не обрезая",
+    "save": "Сохранить",
+    "crop_picture": "Обрезать картинку"
   }
 }

src/modules/api.js

@@ -72,6 +72,8 @@ const api = {
                   showImmediately: timelineData.visibleStatuses.length === 0,
                   timeline: 'friends'
                 })
+              } else if (message.event === 'delete') {
+                dispatch('deleteStatusById', message.id)
               } else if (message.event === 'pleroma:chat_update') {
                 dispatch('addChatMessages', {
                   chatId: message.chatUpdate.id,

src/modules/statuses.js

@@ -611,6 +611,10 @@ const statuses = {
       commit('setDeleted', { status })
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
     },
+    deleteStatusById ({ rootState, commit }, id) {
+      const status = rootState.statuses.allStatusesObject[id]
+      commit('setDeleted', { status })
+    },
     markStatusesAsDeleted ({ commit }, condition) {
       commit('setManyDeleted', condition)
     },