Akkoma devs fucking suck

Was this last commit even tested? Apparently. Deployed? No.
Doesn't even work VANILLA, WHY WOULD IT WORK ANYWHERE ELSE???
Thank you for coming to my complaint session.

index.html

@@ -4,8 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
     <title>The Froth Zone</title>
-    <link rel="stylesheet" href="/static/font/css/fontello.css">
-    <link rel="stylesheet" href="/static/font/css/animation.css">
     <link rel="stylesheet" href="/static/font/tiresias.css">
     <link rel="stylesheet" href="/static/font/css/lato.css">
     <link rel="stylesheet" href="/static/mfm.css">

src/boot/after_store.js

@@ -327,6 +327,9 @@ const getNodeInfo = async ({ store }) => {
           : federation.enabled
       })
 
+      store.dispatch('setInstanceOption', { name: 'publicTimelineVisibility', value: metadata.publicTimelineVisibility })
+      store.dispatch('setInstanceOption', { name: 'federatedTimelineAvailable', value: metadata.federatedTimelineAvailable })
+
       const accountActivationRequired = metadata.accountActivationRequired
       store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })
 
@@ -401,9 +404,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
   ])
 
   // Start fetching things that don't need to block the UI
-  store.dispatch('fetchMutes')
-  store.dispatch('startFetchingAnnouncements')
-  store.dispatch('startFetchingReports')
   getTOS({ store })
   getStickers({ store })
 

src/components/desktop_nav/desktop_nav.js

@@ -1,6 +1,11 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  publicTimelineVisible,
+  federatedTimelineVisible,
+  bubbleTimelineVisible,
+} from '../../lib/timeline_visibility'
 import {
   faSignInAlt,
   faSignOutAlt,
@@ -19,6 +24,7 @@ import {
   faInfoCircle,
   faUserTie
 } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
 
 library.add(
   faSignInAlt,
@@ -103,7 +109,12 @@ export default {
     },
     showBubbleTimeline () {
       return this.$store.state.instance.localBubbleInstances.length > 0
-    }
+    },
+    ...mapState({
+      publicTimelineVisible,
+      federatedTimelineVisible,
+      bubbleTimelineVisible,
+    })
   },
   methods: {
     scrollToTop () {

src/components/desktop_nav/desktop_nav.vue

@@ -46,6 +46,7 @@
           <router-link
             :to="{ name: 'public-timeline' }"
             class="nav-icon"
+            v-if="publicTimelineVisible"
           >
             <FAIcon
               fixed-width
@@ -55,7 +56,7 @@
             />
           </router-link>
           <router-link
-            v-if="currentUser && showBubbleTimeline"
+            v-if="bubbleTimelineVisible"
             :to="{ name: 'bubble-timeline' }"
             class="nav-icon"
           >
@@ -69,6 +70,7 @@
           <router-link
             :to="{ name: 'public-external-timeline' }"
             class="nav-icon"
+            v-if="federatedTimelineVisible"
           >
             <FAIcon
               fixed-width

src/components/emoji_picker/emoji_picker.js

@@ -46,6 +46,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()
@@ -91,6 +92,7 @@ const EmojiPicker = {
       )
     },
     emojis () {
+      const recentEmojis = this.$store.getters.recentEmojis
       const standardEmojis = this.$store.state.instance.emoji || []
       const customEmojis = this.sortedEmoji
       const emojiPacks = []
@@ -103,6 +105,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/extra_buttons/extra_buttons.js

@@ -15,6 +15,7 @@ import {
   faBookmark as faBookmarkReg,
   faFlag
 } from '@fortawesome/free-regular-svg-icons'
+import { mapState } from 'vuex'
 
 library.add(
   faEllipsisH,
@@ -191,7 +192,7 @@ const ExtraButtons = {
     isEdited () {
       return this.status.edited_at !== null
     },
-    editingAvailable () { return this.$store.state.instance.editingAvailable }
+    editingAvailable () { return this.$store.state.instance.editingAvailable },
   }
 }
 

src/components/nav_panel/nav_panel.js

@@ -54,7 +54,7 @@ const NavPanel = {
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
-      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
+      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
     }),
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount']),
     followRequestCount () {

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

@@ -54,7 +54,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/components/timeline_menu/timeline_menu_content.js

@@ -8,6 +8,7 @@ import {
   faHome,
   faCircle
 } from '@fortawesome/free-solid-svg-icons'
+import { federatedTimelineVisible, publicTimelineVisible, bubbleTimelineVisible } from '../../lib/timeline_visibility'
 
 library.add(
   faUsers,
@@ -24,7 +25,9 @@ const TimelineMenuContent = {
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
-      showBubbleTimeline: state => (state.instance.localBubbleInstances.length > 0)
+      publicTimelineVisible,
+      federatedTimelineVisible,
+      bubbleTimelineVisible,
     })
   }
 }

src/components/timeline_menu/timeline_menu_content.vue

@@ -16,7 +16,7 @@
         >{{ $t("nav.home_timeline") }}</span>
       </router-link>
     </li>
-    <li v-if="currentUser && showBubbleTimeline">
+    <li v-if="bubbleTimelineVisible">
       <router-link
         class="menu-item"
         :to="{ name: 'bubble-timeline' }"
@@ -32,7 +32,7 @@
         >{{ $t("nav.bubble_timeline") }}</span>
       </router-link>
     </li>
-    <li v-if="currentUser || !privateMode">
+    <li v-if="publicTimelineVisible">
       <router-link
         class="menu-item"
         :to="{ name: 'public-timeline' }"
@@ -48,7 +48,7 @@
         >{{ $t("nav.public_tl") }}</span>
       </router-link>
     </li>
-    <li v-if="federating && (currentUser || !privateMode)">
+    <li v-if="federatedTimelineVisible">
       <router-link
         class="menu-item"
         :to="{ name: 'public-external-timeline' }"
@@ -62,6 +62,7 @@
           :title="$t('nav.twkn_timeline_description')"
           :aria-label="$t('nav.twkn_timeline_description')"
         >{{ $t("nav.twkn") }}</span>
+
       </router-link>
     </li>
     <li v-if="currentUser">

src/components/timeline_menu_tabs/timeline_menu_content.js

@@ -8,6 +8,7 @@ import {
   faHome
 } from '@fortawesome/free-solid-svg-icons'
 import { faCircle } from '@fortawesome/free-regular-svg-icons'
+import { federatedTimelineVisible, publicTimelineVisible, bubbleTimelineVisible } from '../../lib/timeline_visibility'
 library.add(
   faUsers,
   faGlobe,
@@ -22,7 +23,10 @@ const TimelineMenuContent = {
     ...mapState({
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
+      federating: state => state.instance.federating,
+      publicTimelineVisible,
+      federatedTimelineVisible,
+      bubbleTimelineVisible,
     })
   }
 }

src/components/timeline_menu_tabs/timeline_menu_content.vue

@@ -16,7 +16,7 @@
         >{{ $t("nav.home_timeline") }}</span>
       </router-link>
     </li>
-    <li v-if="currentUser">
+    <li v-if="bubbleTimelineVisible">
       <router-link
         class="menu-item"
         :to="{ name: 'bubble-timeline' }"
@@ -32,7 +32,7 @@
         >{{ $t("nav.bubble_timeline") }}</span>
       </router-link>
     </li>
-    <li v-if="currentUser || !privateMode">
+    <li v-if="publicTimelineVisible">
       <router-link
         class="menu-item"
         :to="{ name: 'public-timeline' }"
@@ -48,7 +48,7 @@
         >{{ $t("nav.public_tl") }}</span>
       </router-link>
     </li>
-    <li v-if="federating && (currentUser || !privateMode)">
+    <li v-if="federatedTimelineVisible">
       <router-link
         class="menu-item"
         :to="{ name: 'public-external-timeline' }"

src/components/timeline_menu_tabs/timeline_menu_tabs.js

@@ -4,6 +4,12 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
+import {
+  publicTimelineVisible,
+  federatedTimelineVisible,
+  bubbleTimelineVisible,
+} from '../../lib/timeline_visibility'
 
 library.add(faChevronDown)
 
@@ -36,12 +42,15 @@ const TimelineMenuTabs = {
     }
   },
   computed: {
-    currentUser () {
-      return this.$store.state.users.currentUser
-    },
     privateMode () {
       return this.$store.state.instance.private
-    }
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      publicTimelineVisible,
+      federatedTimelineVisible,
+      bubbleTimelineVisible,
+    })
   },
   methods: {
     timelineName () {

src/components/timeline_menu_tabs/timeline_menu_tabs.vue

@@ -18,6 +18,7 @@
     <router-link
       :to="{ name: 'public-timeline' }"
       class="nav-icon"
+      v-if="publicTimelineVisible"
     >
       <FAIcon
         fixed-width
@@ -27,7 +28,7 @@
       />
     </router-link>
     <router-link
-      v-if="currentUser"
+      v-if="bubbleTimelineVisible"
       :to="{ name: 'bubble-timeline' }"
       class="nav-icon"
     >
@@ -41,6 +42,7 @@
     <router-link
       :to="{ name: 'public-external-timeline' }"
       class="nav-icon"
+      v-if="federatedTimelineVisible"
     >
       <FAIcon
         fixed-width

src/i18n/en.json

@@ -89,7 +89,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/lib/timeline_visibility.js

@@ -0,0 +1,23 @@
+const timelineVisibleUnauthenticated =  (state, timeline) => (
+    publicTimelineVisible[timeline] ?? false
+);
+
+const currentUser = (state) => state.users.currentUser;
+
+const currentUserOrTimelineVisibleUnauthenticated = (state, timeline) => (
+  currentUser(state) || timelineVisibleUnauthenticated(state, timeline)
+);
+
+const federatedTimelineAvailable = (state) => state.instance.federatedTimelineAvailable;
+
+export const federatedTimelineVisible = (state) => (
+  federatedTimelineAvailable(state) && currentUserOrTimelineVisibleUnauthenticated(state, 'federated')
+);
+
+export const publicTimelineVisible = (state) => (
+  currentUserOrTimelineVisibleUnauthenticated(state, 'local')
+);
+
+export const bubbleTimelineVisible = (state) => (
+  state.instance.localBubbleInstances.length > 0 && currentUserOrTimelineVisibleUnauthenticated(state, 'bubble')
+);

src/main.js

@@ -24,6 +24,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'
 
@@ -49,7 +50,8 @@ const persistedStateOptions = {
   paths: [
     'config',
     'users.lastLoginName',
-    'oauth'
+    'oauth',
+    'recentEmojis.emojis',
   ]
 };
 
@@ -102,7 +104,8 @@ const persistedStateOptions = {
       editStatus: editStatusModule,
       statusHistory: statusHistoryModule,
       chats: chatsModule,
-      tags: tagModule
+      tags: tagModule,
+      recentEmojis: recentEmojisModule,
     },
     plugins,
     strict: false // Socket modifies itself, let's ignore this for now.

src/modules/api.js

@@ -7,15 +7,25 @@ import { Socket } from 'phoenix'
 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

src/modules/users.js

@@ -651,13 +651,14 @@ const users = {
 
               // Get user mutes
               store.dispatch('fetchMutes')
-
               store.dispatch('setLayoutWidth', windowWidth())
               store.dispatch('setLayoutHeight', windowHeight())
               store.dispatch('getSupportedTranslationlanguages')
               store.dispatch('getSettingsProfile')
               store.dispatch('listSettingsProfiles')
               store.dispatch('startFetchingConfig')
+              store.dispatch('startFetchingAnnouncements')
+              store.dispatch('startFetchingReports')
 
               // Fetch our friends
               store.rootState.api.backendInteractor.fetchFriends({ id: user.id })