Merge pull request 'develop' (#5) from AkkomaGang/akkoma-fe:develop into develop

Reviewed-on: #5

src/boot/after_store.js

@@ -322,6 +322,8 @@ const getNodeInfo = async ({ store }) => {
           : federation.enabled
       })
 
+      store.dispatch('setInstanceOption', { name: 'publicTimelineVisibility', value: metadata.publicTimelineVisibility })
+
       const accountActivationRequired = metadata.accountActivationRequired
       store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })
 
@@ -396,9 +398,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

@@ -19,6 +19,7 @@ import {
   faInfoCircle,
   faUserTie
 } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
 
 library.add(
   faSignInAlt,
@@ -103,7 +104,10 @@ export default {
     },
     showBubbleTimeline () {
       return this.$store.state.instance.localBubbleInstances.length > 0
-    }
+    },
+    ...mapState({
+      publicTimelineVisibility: state => state.instance.publicTimelineVisibility,
+    })
   },
   methods: {
     scrollToTop () {

src/components/desktop_nav/desktop_nav.vue

@@ -46,6 +46,7 @@
           <router-link
             :to="{ name: 'public-timeline' }"
             class="nav-icon"
+            v-if="(currentUser || (publicTimelineVisibility?.local ?? true))"
           >
             <FAIcon
               fixed-width
@@ -69,6 +70,7 @@
           <router-link
             :to="{ name: 'public-external-timeline' }"
             class="nav-icon"
+            v-if="(currentUser || (publicTimelineVisibility?.federated ?? true))"
           >
             <FAIcon
               fixed-width

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/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

@@ -50,7 +50,7 @@ const NavPanel = {
     ...mapState({
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
+      federating: state => state.instance.federating,
     }),
     ...mapGetters(['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

@@ -51,7 +51,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

@@ -24,7 +24,8 @@ const TimelineMenuContent = {
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
-      showBubbleTimeline: state => (state.instance.localBubbleInstances.length > 0)
+      showBubbleTimeline: state => (state.instance.localBubbleInstances.length > 0),
+      publicTimelineVisibility: state => state.instance.publicTimelineVisibility,
     })
   }
 }

src/components/timeline_menu/timeline_menu_content.vue

@@ -32,7 +32,7 @@
         >{{ $t("nav.bubble_timeline") }}</span>
       </router-link>
     </li>
-    <li v-if="currentUser || !privateMode">
+    <li v-if="(currentUser || !privateMode) && (currentUser || (publicTimelineVisibility?.local ?? true))">
       <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="federating && (currentUser || !privateMode) && (currentUser || (publicTimelineVisibility?.federated ?? true))">
       <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_tabs.js

@@ -4,6 +4,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
 
 library.add(faChevronDown)
 
@@ -41,7 +42,11 @@ const TimelineMenuTabs = {
     },
     privateMode () {
       return this.$store.state.instance.private
-    }
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      publicTimelineVisibility: state => state.instance.publicTimelineVisibility,
+    })
   },
   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="currentUser || (publicTimelineVisibility?.local ?? true)"
     >
       <FAIcon
         fixed-width
@@ -41,6 +42,7 @@
     <router-link
       :to="{ name: 'public-external-timeline' }"
       class="nav-icon"
+      v-if="currentUser || (publicTimelineVisibility?.federated ?? true)"
     >
       <FAIcon
         fixed-width

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/users.js

@@ -637,13 +637,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 })

src/services/follow_request_fetcher/follow_request_fetcher.service.js

@@ -1,23 +0,0 @@
-import apiService from '../api/api.service.js'
-import { promiseInterval } from '../promise_interval/promise_interval.js'
-
-const fetchAndUpdate = ({ store, credentials }) => {
-  return apiService.fetchFollowRequests({ credentials })
-    .then((requests) => {
-      store.commit('setFollowRequests', requests)
-      store.commit('addNewUsers', requests)
-    }, () => {})
-    .catch(() => {})
-}
-
-const startFetching = ({ credentials, store }) => {
-  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
-  boundFetchAndUpdate()
-  return promiseInterval(boundFetchAndUpdate, 240000)
-}
-
-const followRequestFetcher = {
-  startFetching
-}
-
-export default followRequestFetcher