Merge pull request 'Merge stable 2023.03' (#8) from AkkomaGang/akkoma-fe:stable into stable

Reviewed-on: fedward/pleroma-fe#8

src/components/emoji_picker/emoji_picker.js

@@ -51,6 +51,7 @@ const EmojiPicker = {
     onEmoji (emoji) {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
       this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
+      this.$store.commit('emojiUsed', emoji)
     },
     onWheel (e) {
       e.preventDefault()
@@ -96,6 +97,7 @@ const EmojiPicker = {
       )
     },
     emojis () {
+      const recentEmojis = this.$store.getters.recentEmojis
       const standardEmojis = this.$store.state.instance.emoji || []
       const customEmojis = this.sortedEmoji
       const emojiPacks = []
@@ -108,6 +110,15 @@ const EmojiPicker = {
         })
       })
       return [
+        {
+          id: 'recent',
+          text: this.$t('emoji.recent'),
+          first: {
+            imageUrl: '',
+            replacement: '🕒',
+          },
+          emojis: this.filterByKeyword(recentEmojis)
+        },
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),

src/components/emoji_reactions/emoji_reactions.js

@@ -3,6 +3,11 @@ import UserListPopover from '../user_list_popover/user_list_popover.vue'
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
+const findEmojiByReplacement = (state, replacement) => {
+  const allEmojis = state.instance.emoji.concat(state.instance.customEmoji)
+  return allEmojis.find(emoji => emoji.replacement === replacement)
+}
+
 const EmojiReactions = {
   name: 'EmojiReactions',
   components: {
@@ -54,6 +59,8 @@ const EmojiReactions = {
     },
     reactWith (emoji) {
       this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+      const emojiObject = findEmojiByReplacement(this.$store.state, emoji)
+      this.$store.commit('emojiUsed', emojiObject)
     },
     unreact (emoji) {
       this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })

src/components/emoji_reactions/emoji_reactions.vue

@@ -18,7 +18,6 @@
             :src="reaction.url"
             :title="reaction.name"
             class="reaction-emoji"
-            width="2.55em"
             height="2.55em"
           >
           {{ reaction.count }}
@@ -50,6 +49,7 @@
   display: flex;
   margin-top: 0.25em;
   flex-wrap: wrap;
+  container-type: inline-size;
 }
 
 .unicode-emoji {
@@ -65,7 +65,8 @@
   justify-content: center;
   box-sizing: border-box;
   .reaction-emoji {
-    width: 2.55em !important;
+    width: auto;
+    max-width: 96cqw;
     height: 2.55em !important;
     margin-right: 0.25em;
   }

src/components/post_status_form/post_status_form.js

@@ -54,6 +54,14 @@ const pxStringToNumber = (str) => {
   return Number(str.substring(0, str.length - 2))
 }
 
+const deleteDraft = (draftKey) => {
+	const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+	delete draftData[draftKey];
+
+	localStorage.setItem('drafts', JSON.stringify(draftData));
+}
+
 const PostStatusForm = {
   props: [
     'statusId',
@@ -161,6 +169,34 @@ const PostStatusForm = {
       }
     }
 
+    let draftKey = 'status';
+    if (this.replyTo) {
+      draftKey = 'reply:' + this.replyTo;
+    } else if (this.quoteId) {
+      draftKey = 'quote:' + this.quoteId;
+    }
+
+    const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[draftKey];
+
+    if (draft) {
+      statusParams = {
+        spoilerText: draft.data.spoilerText,
+        status: draft.data.status,
+        sensitiveIfSubject,
+        nsfw: draft.data.nsfw,
+        files: draft.data.files,
+        poll: draft.data.poll,
+        mediaDescriptions: draft.data.mediaDescriptions,
+        visibility: draft.data.visibility,
+        language: draft.data.language,
+        contentType: draft.data.contentType
+      }
+
+      if (draft.data.poll) {
+        this.togglePollForm();
+      }
+    }
+
     return {
       dropFiles: [],
       uploadingFiles: false,
@@ -280,6 +316,7 @@ const PostStatusForm = {
     statusChanged () {
       this.autoPreview()
       this.updateIdempotencyKey()
+      this.saveDraft()
     },
     clearStatus () {
       const newStatus = this.newStatus
@@ -401,8 +438,38 @@ const PostStatusForm = {
       }).finally(() => {
         this.previewLoading = false
       })
+
+      let draftKey = 'status';
+      if (this.replyTo) {
+        draftKey = 'reply:' + this.replyTo;
+      } else if (this.quoteId) {
+        draftKey = 'quote:' + this.quoteId;
+      }
+      deleteDraft(draftKey)
     },
     debouncePreviewStatus: debounce(function () { this.previewStatus() }, 500),
+    saveDraft() {
+      const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+      let draftKey = 'status';
+      if (this.replyTo) {
+        draftKey = 'reply:' + this.replyTo;
+      } else if (this.quoteId) {
+        draftKey = 'quote:' + this.quoteId;
+      }
+
+      if (this.newStatus.status || this.newStatus.spoilerText || this.newStatus.files.length > 0 || this.newStatus.poll.length > 0) {
+          draftData[draftKey] = {
+          updatedAt: new Date(),
+          data: this.newStatus,
+        };
+
+        localStorage.setItem('drafts', JSON.stringify(draftData));
+
+      } else {
+        deleteDraft(draftKey);
+      }
+    },
     autoPreview () {
       if (!this.preview) return
       this.previewLoading = true

src/components/rich_content/rich_content.scss

@@ -50,7 +50,6 @@
 
   .emoji {
     display: inline-block;
-    width: var(--emoji-size, 32px);
     height: var(--emoji-size, 32px);
   }
 

src/components/status_body/status_body.scss

@@ -22,21 +22,18 @@
 
   ._mfm_x2_ {
     .emoji {
-      width: 100px;
       height: 100px;
     }
   }
 
   ._mfm_x3_ {
     .emoji {
-      width: 150px;
       height: 150px;
     }
   }
 
   ._mfm_x4_ {
     .emoji {
-      width: 200px;
       height: 200px;
     }
   }

src/components/status_content/status_content.vue

@@ -71,7 +71,7 @@
 
   img, video {
     &.emoji {
-      width: 50px;
+      max-width: 100%;
       height: 50px;
     }
   }
@@ -89,7 +89,6 @@
       animation: none !important;
     }
     .emoji {
-      width: 32px !important;
       height: 32px !important;
     }
   }

src/i18n/en.json

@@ -86,7 +86,8 @@
         "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
         "search_emoji": "Search for an emoji",
         "stickers": "Stickers",
-        "unicode": "Unicode emoji"
+        "unicode": "Unicode emoji",
+        "recent": "Recently used"
     },
     "errors": {
         "storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."

src/lib/persisted_state.js

@@ -19,7 +19,8 @@ const saveImmedeatelyActions = [
   'setOption',
   'setClientData',
   'setToken',
-  'clearToken'
+  'clearToken',
+  'emojiUsed',
 ]
 
 const defaultStorage = (() => {

src/main.js

@@ -22,6 +22,7 @@ import announcementsModule from './modules/announcements.js'
 import editStatusModule from './modules/editStatus.js'
 import statusHistoryModule from './modules/statusHistory.js'
 import tagModule from './modules/tags.js'
+import recentEmojisModule from './modules/recentEmojis.js'
 
 import { createI18n } from 'vue-i18n'
 
@@ -47,7 +48,8 @@ const persistedStateOptions = {
   paths: [
     'config',
     'users.lastLoginName',
-    'oauth'
+    'oauth',
+    'recentEmojis.emojis',
   ]
 };
 
@@ -98,7 +100,8 @@ const persistedStateOptions = {
       announcements: announcementsModule,
       editStatus: editStatusModule,
       statusHistory: statusHistoryModule,
-      tags: tagModule
+      tags: tagModule,
+      recentEmojis: recentEmojisModule,
     },
     plugins,
     strict: false // Socket modifies itself, let's ignore this for now.

src/modules/api.js

@@ -5,15 +5,25 @@ import { map } from 'lodash'
 const retryTimeout = (multiplier) => 1000 * multiplier
 
 const isVisible = (store, message, visibility) => {
-  if (visibility === 'all') {
+  if (visibility == 'all') {
     return true
-  } else if (visibility === 'following') {
-    return store.getters.relationship(message.in_reply_to_user_id).following
-  } else if (visibility === 'self') {
+  }
+
+  if (visibility == 'following') {
+    if (message.in_reply_to_user_id === null) {
+      return true
+    } else {
+      return store.getters.relationship(message.in_reply_to_user_id).following
+    }
+  }
+
+  if (visibility == 'self') {
     return message.in_reply_to_user_id === store.rootState.users.currentUser.id
   }
+
   return false
 }
+
 const api = {
   state: {
     retryMultiplier: 1,

src/modules/recentEmojis.js

@@ -0,0 +1,50 @@
+// each row is 7 emojis, 6 rows chosen arbitrarily. i don't think more than
+// that are going to be useful.
+const RECENT_MAX = 7 * 6
+
+const defaultState = {
+  emojis: [],
+}
+
+const recentEmojis = {
+  state: defaultState,
+
+  mutations: {
+    emojiUsed ({ emojis }, emoji) {
+      if (emoji.displayText === undefined || emoji.displayText === null) {
+        console.error('emojiUsed was called with a bad emoji object: ', emoji)
+        return
+      } else if (emoji.displayText.includes('@')) {
+        console.error('emojiUsed was called with a remote emoji: ', emoji)
+        return
+      }
+
+      const i = emojis.indexOf(emoji.displayText)
+
+      if (i === -1) {
+        // not in `emojis` yet, insert and truncate if necessary
+        const newLength = emojis.unshift(emoji.displayText)
+        if (newLength > RECENT_MAX) {
+          emojis.pop()
+        }
+      } else if (i !== 0) {
+        // emoji is already in `emojis` but needs to be bumped to the top
+        emojis.splice(i, 1)
+        emojis.unshift(emoji.displayText)
+      }
+    },
+  },
+
+  getters: {
+    recentEmojis: (state, getters, rootState) => state.emojis.reduce((objects, displayText) => {
+      const allEmojis = rootState.instance.emoji.concat(rootState.instance.customEmoji)
+      let emojiObject = allEmojis.find(emoji => emoji.displayText === displayText)
+      if (emojiObject !== undefined) {
+        objects.push(emojiObject)
+      }
+      return objects
+    }, []),
+  },
+}
+
+export default recentEmojis