Merge remote-tracking branch 'origin/develop' into shigusegubu-vue3

* origin/develop: (41 commits)
  lint
  Apply 1 suggestion(s) to 1 file(s)
  Use feed role for notifs and timelines
  Update dependency chai to v4.3.7
  Make notification panel a list of articles
  Handle properly 2-col and 3-col desktop notifications
  Make user panel and notification <aside>
  Make timeline a list of articles
  Add labels to mobile navs
  Add labels for timeline header
  Use <main> for main content
  Add title to mobile post button
  Update dependency eslint-plugin-n to v15.5.0
  Update dependency eslint-plugin-promise to v6.1.1
  Update Node.js to v16.18.1
  Update dependency eslint-plugin-vue to v9.7.0
  Update dependency eslint-plugin-n to v15.4.0
  Update dependency eslint to v8.26.0
  Update vue monorepo
  Update dependency css-minimizer-webpack-plugin to v4.2.2
  ...

.gitlab/issue_templates/Bug.md

@@ -0,0 +1,25 @@
+# Environment info
+
+<!-- Everything is optional and where applicable but the more information the better. -->
+* Browser, version, OS, platform:
+* Instance URL:
+* Frontend version (see settings -> about):
+* Backend version (see settings -> about):
+* Browser extensions (ublock, rikaichamp etc):
+* Known instance/user customizations (i.e. pleromafe mods/forks, instance styles etc)
+
+# Bug description & reproduction steps
+
+<!-- Type out here how to reproduce the bug, what goes wrong and what should go right -->
+<!-- Screenshots and videos help a lot ;) any observations might also help -->
+<!-- Also mention if there any errors in browser's console if relevant -->
+
+# Bug seriousness
+
+<!-- Everything is optional and free-form -->
+* How annoying it is:
+* How often does it happen:
+* How many people does it affect:
+* Is there a workaround for it:
+
+/label ~Bug

.gitlab/issue_templates/Suggestion.md

@@ -0,0 +1,11 @@
+# Behavior suggestion/Feature request
+<!-- 
+Type out what you want to see changed or what feature you want to see added to 
+PleormaFE. Please also explain how it would benefit users (or admins/moderators)
+and what intended usecase is. Any background information (i.e. porting behavior
+from other frontends/services, specific situations, personal preferences etc.) 
+as well as examples would be greatly appreciated.
+-->
+
+/label ~suggestion
+

.gitlab/issue_templates/default.md

@@ -0,0 +1,7 @@
+<!-- 
+please use one of the templates if applicable, otherwise - type out here 
+in free-form
+-->
+
+/label ~needs-triage
+

.gitlab/merge_request_templates/default.md

@@ -0,0 +1,30 @@
+<!-- 
+Feel free to submit merge requests that are work-in-progress, but mark them as
+Draft: or WIP:.
+Merge requests that have Draft or WIP status will not be merged and have less chances
+of being reviewed, but you can still ask people to take a look if you need advice.
+-->
+# Changes
+
+*
+*
+*
+
+<!-- List what your merge request changes and how -->
+<!-- 
+Try to not to break existing behavior, if your changes do break existing behavior 
+make it configurable to toggle between old behavior and new. Which one should be
+default is up to discussion.
+-->
+<!-- If your merge request resolves some issue link it like so: "Closes #99999" -->
+<!-- 
+If merge request adds some new feature that depends on backend: 
+
+1. Make sure it gracefully degrades if backend hasn't been updated to support the feature,
+   we try to make PleromaFE compatible with older versions of BE so that people can still
+   update frontend safely without updating backend since it's costly and much riskier. 
+2. Link related BE merge request here 
+-->
+<!-- Screenshots are welcome -->
+
+/label ~needs-review

.node-version

@@ -1 +1 @@
-16.16.0
+16.18.1

CHANGELOG.md

@@ -48,6 +48,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Enabled users to zoom and pan images in media viewer with mouse and touch
 - Timelines/panels and conversations have sticky headers now
 - Added frontend ui for account migration
+- Implemented remote interaction with statuses
 
 
 ## [2.4.2] - 2022-01-09

package.json

@@ -16,7 +16,7 @@
     "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.18.9",
+    "@babel/runtime": "7.20.0",
     "@chenfengyuan/vue-qrcode": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "6.2.0",
     "@fortawesome/free-regular-svg-icons": "6.2.0",
@@ -43,43 +43,43 @@
     "querystring-es3": "0.2.1",
     "url": "0.11.0",
     "utf8": "3.0.0",
-    "vue": "3.2.38",
+    "vue": "3.2.41",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.1.5",
+    "vue-router": "4.1.6",
-    "vue-template-compiler": "2.7.10",
+    "vue-template-compiler": "2.7.13",
-    "vuex": "4.0.2"
+    "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.18.13",
+    "@babel/core": "7.19.6",
-    "@babel/eslint-parser": "7.18.9",
+    "@babel/eslint-parser": "7.19.1",
-    "@babel/plugin-transform-runtime": "7.18.10",
+    "@babel/plugin-transform-runtime": "7.19.6",
-    "@babel/preset-env": "7.18.10",
+    "@babel/preset-env": "7.19.4",
     "@babel/register": "7.18.9",
     "@intlify/vue-i18n-loader": "5.0.0",
     "@ungap/event-target": "0.2.3",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
     "@vue/babel-plugin-jsx": "1.1.1",
-    "@vue/compiler-sfc": "3.2.38",
+    "@vue/compiler-sfc": "3.2.41",
-    "@vue/test-utils": "2.0.2",
+    "@vue/test-utils": "2.2.1",
     "autoprefixer": "10.4.12",
     "babel-loader": "8.2.5",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.3.6",
+    "chai": "4.3.7",
     "chalk": "1.1.3",
     "chromedriver": "104.0.0",
     "connect-history-api-fallback": "2.0.0",
     "copy-webpack-plugin": "11.0.0",
     "cross-spawn": "7.0.3",
     "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "4.0.0",
+    "css-minimizer-webpack-plugin": "4.2.2",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "8.23.0",
+    "eslint": "8.26.0",
     "eslint-config-standard": "17.0.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-n": "15.2.5",
+    "eslint-plugin-n": "15.5.0",
-    "eslint-plugin-promise": "6.0.1",
+    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-vue": "9.4.0",
+    "eslint-plugin-vue": "9.7.0",
     "eslint-webpack-plugin": "3.2.0",
     "eventsource-polyfill": "0.9.6",
     "express": "4.18.2",
@@ -88,7 +88,7 @@
     "http-proxy-middleware": "2.0.6",
     "iso-639-1": "2.1.15",
     "json-loader": "0.5.7",
-    "karma": "6.4.0",
+    "karma": "6.4.1",
     "karma-coverage": "2.2.0",
     "karma-firefox-launcher": "2.1.2",
     "karma-mocha": "2.0.1",
@@ -108,16 +108,16 @@
     "sass": "1.55.0",
     "sass-loader": "13.0.2",
     "selenium-server": "2.53.1",
-    "semver": "7.3.7",
+    "semver": "7.3.8",
     "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",
-    "sinon": "14.0.0",
+    "sinon": "14.0.1",
     "sinon-chai": "3.7.0",
     "stylelint": "13.13.1",
     "stylelint-config-standard": "20.0.0",
     "stylelint-rscss": "0.4.0",
-    "vue-loader": "17.0.0",
     "unicode-emoji-json": "^0.3.0",
+    "vue-loader": "17.0.1",
     "vue-style-loader": "4.1.3",
     "webpack": "5.74.0",
     "webpack-dev-middleware": "3.7.3",

src/App.vue

@@ -33,7 +33,7 @@
           <div id="notifs-sidebar" />
         </template>
       </div>
-      <div
+      <main
         id="main-scroller"
         class="column main"
         :class="{ '-full-height': isChats || isListEdit }"
@@ -50,7 +50,7 @@
           </router-link>
         </div>
         <router-view />
-      </div>
+      </main>
       <div
         id="notifs-column"
         class="column -scrollable"

src/components/conversation/conversation.vue

@@ -60,7 +60,7 @@
           v-if="shouldShowAncestors"
           class="thread-ancestors"
         >
-          <div
+          <article
             v-for="status in ancestorsOf(diveRoot)"
             :key="status.id"
             class="thread-ancestor"
@@ -130,7 +130,7 @@
                 </i18n-t>
               </div>
             </div>
-          </div>
+          </article>
         </div>
         <thread-tree
           v-for="status in showingTopLevel"
@@ -168,34 +168,36 @@
         v-if="isLinearView"
         class="thread-body"
       >
-        <status
+        <article>
-          v-for="status in conversation"
+          <status
-          :key="status.id"
+            v-for="status in conversation"
-          ref="statusComponent"
+            :key="status.id"
-          :inline-expanded="collapsable && isExpanded"
+            ref="statusComponent"
-          :statusoid="status"
+            :inline-expanded="collapsable && isExpanded"
-          :expandable="!isExpanded"
+            :statusoid="status"
-          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+            :expandable="!isExpanded"
-          :focused="focused(status.id)"
+            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-          :in-conversation="isExpanded"
+            :focused="focused(status.id)"
-          :highlight="getHighlight()"
+            :in-conversation="isExpanded"
-          :replies="getReplies(status.id)"
+            :highlight="getHighlight()"
-          :in-profile="inProfile"
+            :replies="getReplies(status.id)"
-          :profile-user-id="profileUserId"
+            :in-profile="inProfile"
-          class="conversation-status status-fadein panel-body"
+            :profile-user-id="profileUserId"
+            class="conversation-status status-fadein panel-body"
 
-          :toggle-thread-display="toggleThreadDisplay"
+            :toggle-thread-display="toggleThreadDisplay"
-          :thread-display-status="threadDisplayStatus"
+            :thread-display-status="threadDisplayStatus"
-          :show-thread-recursively="showThreadRecursively"
+            :show-thread-recursively="showThreadRecursively"
-          :total-reply-count="totalReplyCount"
+            :total-reply-count="totalReplyCount"
-          :total-reply-depth="totalReplyDepth"
+            :total-reply-depth="totalReplyDepth"
-          :status-content-properties="statusContentProperties"
+            :status-content-properties="statusContentProperties"
-          :set-status-content-property="setStatusContentProperty"
+            :set-status-content-property="setStatusContentProperty"
-          :toggle-status-content-property="toggleStatusContentProperty"
+            :toggle-status-content-property="toggleStatusContentProperty"
 
-          @goto="setHighlight"
+            @goto="setHighlight"
-          @toggleExpanded="toggleExpanded"
+            @toggleExpanded="toggleExpanded"
-        />
+          />
+        </article>
       </div>
     </div>
   </div>

src/components/emoji_input/emoji_input.vue

@@ -6,9 +6,16 @@
   >
     <slot />
     <!-- TODO: make the 'x' disappear if at the end maybe? -->
-    <div class="hidden-overlay" :style="overlayStyle" ref="hiddenOverlay">
+    <div
+      ref="hiddenOverlay"
+      class="hidden-overlay"
+      :style="overlayStyle"
+    >
       <span>{{ preText }}</span>
-      <span class="caret" ref="hiddenOverlayCaret">x</span>
+      <span
+        ref="hiddenOverlayCaret"
+        class="caret"
+      >x</span>
       <span>{{ postText }}</span>
     </div>
     <template v-if="enableEmojiPicker">
@@ -33,9 +40,9 @@
       />
     </template>
     <Popover
+      ref="suggestorPopover"
       class="autocomplete-panel"
       placement="bottom"
-      ref="suggestorPopover"
     >
       <template #content>
         <div

src/components/emoji_picker/emoji_picker.vue

@@ -1,8 +1,8 @@
 <template>
   <Popover
+    ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    ref="popover"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
@@ -66,12 +66,12 @@
         >
           <div class="emoji-search">
             <input
+              ref="search"
               v-model="keyword"
               type="text"
               class="form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
-              ref="search"
             >
           </div>
           <div

src/components/extra_buttons/extra_buttons.js

@@ -113,8 +113,7 @@ const ExtraButtons = {
     currentUser () { return this.$store.state.users.currentUser },
     canDelete () {
       if (!this.currentUser) { return }
-      const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin
+      return this.currentUser.privileges.includes('messages_delete') || this.status.user.id === this.currentUser.id
-      return superuser || this.status.user.id === this.currentUser.id
     },
     ownStatus () {
       return this.status.user.id === this.currentUser.id

src/components/favorite_button/favorite_button.js

@@ -39,7 +39,10 @@ const FavoriteButton = {
     }
   },
   computed: {
-    ...mapGetters(['mergedConfig'])
+    ...mapGetters(['mergedConfig']),
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    }
   }
 }
 

src/components/favorite_button/favorite_button.vue

@@ -33,13 +33,19 @@
         />
       </FALayers>
     </button>
-    <span v-else>
+    <a
+      v-else
+      class="button-unstyled interactive"
+      target="_blank"
+      role="button"
+      :href="remoteInteractionLink"
+    >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         :title="$t('tool_tip.favorite')"
         :icon="['far', 'star']"
       />
-    </span>
+    </a>
     <span
       v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
       class="action-counter"

src/components/interactions/interactions.js

@@ -15,7 +15,7 @@ const Interactions = {
     return {
       allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
       filterMode: tabModeDict.mentions,
-      canSeeReports: ['moderator', 'admin'].includes(this.$store.state.users.currentUser.role)
+      canSeeReports: this.$store.state.users.currentUser.privileges.includes('reports_manage_reports')
     }
   },
   methods: {

src/components/mobile_nav/mobile_nav.vue

@@ -10,6 +10,8 @@
       <div class="item">
         <button
           class="button-unstyled mobile-nav-button"
+          :title="$t('nav.mobile_sidebar')"
+          :aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
           @click.stop.prevent="toggleMobileSidebar()"
         >
           <FAIcon
@@ -26,6 +28,7 @@
         <button
           v-if="currentUser"
           class="button-unstyled mobile-nav-button"
+          :title="unseenNotificationsCount ? $t('nav.mobile_notifications_unread_active') : $t('nav.mobile_notifications')"
           @click.stop.prevent="openMobileNotifications()"
         >
           <FAIcon
@@ -39,7 +42,7 @@
         </button>
       </div>
     </nav>
-    <div
+    <aside
       v-if="currentUser"
       class="mobile-notifications-drawer"
       :class="{ '-closed': !notificationsOpen }"
@@ -48,10 +51,11 @@
     >
       <div class="mobile-notifications-header">
         <span class="title">{{ $t('notifications.notifications') }}</span>
-        <span class="spacer"/>
+        <span class="spacer" />
         <button
           v-if="notificationsAtTop"
           class="button-unstyled mobile-nav-button"
+          :title="$t('general.scroll_to_top')"
           @click.stop.prevent="scrollMobileNotificationsToTop"
         >
           <FALayers class="fa-scale-110 fa-old-padding-layer">
@@ -64,6 +68,7 @@
         </button>
         <button
           class="button-unstyled mobile-nav-button"
+          :title="$t('nav.mobile_notifications_close')"
           @click.stop.prevent="closeMobileNotifications(true)"
         >
           <FAIcon
@@ -74,11 +79,11 @@
       </div>
       <div
         id="mobile-notifications"
-        class="mobile-notifications"
         ref="mobileNotifications"
+        class="mobile-notifications"
         @scroll="onScroll"
       />
-    </div>
+    </aside>
     <SideDrawer
       ref="sideDrawer"
       :logout="logout"

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -3,6 +3,7 @@
     v-if="isLoggedIn"
     class="MobilePostButton button-default new-status-button"
     :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
+    :title="$t('post_status.new_status')"
     @click="openPostForm"
   >
     <FAIcon icon="pen" />

src/components/moderation_tools/moderation_tools.js

@@ -41,14 +41,26 @@ const ModerationTools = {
     tagsSet () {
       return new Set(this.user.tags)
     },
-    hasTagPolicy () {
+    canGrantRole () {
-      return this.$store.state.instance.tagPolicyAvailable
+      return this.user.is_local && !this.user.deactivated && this.$store.state.users.currentUser.role === 'admin'
+    },
+    canChangeActivationState () {
+      return this.privileged('users_manage_activation_state')
+    },
+    canDeleteAccount () {
+      return this.privileged('users_delete')
+    },
+    canUseTagPolicy () {
+      return this.$store.state.instance.tagPolicyAvailable && this.privileged('users_manage_tags')
     }
   },
   methods: {
     hasTag (tagName) {
       return this.tagsSet.has(tagName)
     },
+    privileged (privilege) {
+      return this.$store.state.users.currentUser.privileges.includes(privilege)
+    },
     toggleTag (tag) {
       const store = this.$store
       if (this.tagsSet.has(tag)) {

src/components/moderation_tools/moderation_tools.vue

@@ -10,7 +10,7 @@
     >
       <template #content>
         <div class="dropdown-menu">
-          <span v-if="user.is_local">
+          <span v-if="canGrantRole">
             <button
               class="button-default dropdown-item"
               @click="toggleRight(&quot;admin&quot;)"
@@ -24,28 +24,31 @@
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
             </button>
             <div
+              v-if="canChangeActivationState || canDeleteAccount"
               role="separator"
               class="dropdown-divider"
             />
           </span>
           <button
+            v-if="canChangeActivationState"
             class="button-default dropdown-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
+            v-if="canDeleteAccount"
             class="button-default dropdown-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
           </button>
           <div
-            v-if="hasTagPolicy"
+            v-if="canUseTagPolicy"
             role="separator"
             class="dropdown-divider"
           />
-          <span v-if="hasTagPolicy">
+          <span v-if="canUseTagPolicy">
             <button
               class="button-default dropdown-item"
               @click="toggleTag(tags.FORCE_NSFW)"

src/components/notification/notification.vue

@@ -1,11 +1,14 @@
 <template>
-  <Status
+  <article
     v-if="notification.type === 'mention'"
-    class="Notification"
+  >
-    :compact="true"
+    <Status
-    :statusoid="notification.status"
+      class="Notification"
-  />
+      :compact="true"
-  <div v-else>
+      :statusoid="notification.status"
+    />
+  </article>
+  <article v-else>
     <div
       v-if="needMute && !unmuted"
       class="Notification container -muted"
@@ -226,7 +229,7 @@
         </template>
       </div>
     </div>
-  </div>
+  </article>
 </template>
 
 <script src="./notification.js"></script>

src/components/notifications/notifications.vue

@@ -3,7 +3,8 @@
     :disabled="minimalMode || disableTeleport"
     :to="teleportTarget"
   >
-    <div
+    <component
+      :is="noHeading ? 'div' : 'aside'"
       ref="root"
       :class="{ minimal: minimalMode }"
       class="Notifications"
@@ -21,8 +22,8 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="rightside-button"
             v-if="showScrollTop"
+            class="rightside-button"
           >
             <button
               class="button-unstyled scroll-to-top-button"
@@ -49,10 +50,14 @@
           </button>
           <NotificationFilters class="rightside-button" />
         </div>
-        <div class="panel-body">
+        <div
+          class="panel-body"
+          role="feed"
+        >
           <div
             v-for="notification in notificationsToDisplay"
             :key="notification.id"
+            role="listitem"
             class="notification"
             :class="{unseen: !minimalMode && !notification.seen}"
           >
@@ -88,7 +93,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </component>
   </teleport>
 </template>
 

src/components/popover/popover.js

@@ -43,7 +43,12 @@ const Popover = {
     overlayCentersSelector: String,
 
     // Lets hover popover stay when clicking inside of it
-    stayOnClick: Boolean
+    stayOnClick: Boolean,
+
+    triggerAttrs: {
+      type: Object,
+      default: {}
+    }
   },
   inject: ['popoversZLayer'], // override popover z layer
   data () {

src/components/popover/popover.vue

@@ -7,11 +7,15 @@
       ref="trigger"
       class="button-unstyled popover-trigger-button"
       type="button"
+      v-bind="triggerAttrs"
       @click="onClick"
     >
       <slot name="trigger" />
     </button>
-    <teleport :disabled="!teleport" to="#popovers">
+    <teleport
+      :disabled="!teleport"
+      to="#popovers"
+    >
       <transition name="fade">
         <div
           v-if="!hidden"

src/components/quick_filter_settings/quick_filter_settings.vue

@@ -3,6 +3,7 @@
     trigger="click"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
+    :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
@@ -79,9 +80,7 @@
       </div>
     </template>
     <template #trigger>
-      <button class="button-unstyled">
+      <FAIcon icon="filter" />
-        <FAIcon icon="filter" />
-      </button>
     </template>
   </Popover>
 </template>

src/components/quick_view_settings/quick_view_settings.vue

@@ -3,6 +3,7 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
+    :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
@@ -66,9 +67,7 @@
       </div>
     </template>
     <template #trigger>
-      <button class="button-unstyled">
+      <FAIcon icon="bars" />
-        <FAIcon icon="bars" />
-      </button>
     </template>
   </Popover>
 </template>

src/components/reply_button/reply_button.js

@@ -17,6 +17,9 @@ const ReplyButton = {
   computed: {
     loggedIn () {
       return !!this.$store.state.users.currentUser
+    },
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
     }
   }
 }

src/components/reply_button/reply_button.vue

@@ -26,13 +26,19 @@
         />
       </FALayers>
     </button>
-    <span v-else>
+    <a
+      v-else
+      class="button-unstyled interactive"
+      target="_blank"
+      role="button"
+      :href="remoteInteractionLink"
+    >
       <FAIcon
         icon="reply"
         class="fa-scale-110 fa-old-padding"
         :title="$t('tool_tip.reply')"
       />
-    </span>
+    </a>
     <span
       v-if="status.replies_count > 0"
       class="action-counter"

src/components/retweet_button/retweet_button.js

@@ -36,6 +36,9 @@ const RetweetButton = {
   computed: {
     mergedConfig () {
       return this.$store.getters.mergedConfig
+    },
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
     }
   }
 }

src/components/retweet_button/retweet_button.vue

@@ -40,13 +40,19 @@
         :title="$t('timeline.no_retweet_hint')"
       />
     </span>
-    <span v-else>
+    <a
+      v-else
+      class="button-unstyled interactive"
+      target="_blank"
+      role="button"
+      :href="remoteInteractionLink"
+    >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         icon="retweet"
         :title="$t('tool_tip.repeat')"
       />
-    </span>
+    </a>
     <span
       v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
       class="no-event"

src/components/search/search.js

@@ -8,6 +8,7 @@ import {
   faCircleNotch,
   faSearch
 } from '@fortawesome/free-solid-svg-icons'
+import { uniqBy } from 'lodash'
 
 library.add(
   faCircleNotch,
@@ -32,7 +33,11 @@ const Search = {
       userIds: [],
       statuses: [],
       hashtags: [],
-      currenResultTab: 'statuses'
+      currenResultTab: 'statuses',
+
+      statusesOffset: 0,
+      lastStatusFetchCount: 0,
+      lastQuery: ''
     }
   },
   computed: {
@@ -61,26 +66,42 @@ const Search = {
       this.$router.push({ name: 'search', query: { query } })
       this.$refs.searchInput.focus()
     },
-    search (query) {
+    search (query, searchType = null) {
       if (!query) {
         this.loading = false
         return
       }
 
       this.loading = true
-      this.userIds = []
-      this.statuses = []
-      this.hashtags = []
       this.$refs.searchInput.blur()
+      if (this.lastQuery !== query) {
+        this.userIds = []
+        this.hashtags = []
+        this.statuses = []
 
-      this.$store.dispatch('search', { q: query, resolve: true })
+        this.statusesOffset = 0
+        this.lastStatusFetchCount = 0
+      }
+
+      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, type: searchType })
         .then(data => {
           this.loading = false
-          this.userIds = map(data.accounts, 'id')
+
-          this.statuses = data.statuses
+          const oldLength = this.statuses.length
-          this.hashtags = data.hashtags
+
+          // Always append to old results. If new results are empty, this doesn't change anything
+          this.userIds = this.userIds.concat(map(data.accounts, 'id'))
+          this.statuses = uniqBy(this.statuses.concat(data.statuses), 'id')
+          this.hashtags = this.hashtags.concat(data.hashtags)
+
           this.currenResultTab = this.getActiveTab()
           this.loaded = true
+
+          // Offset from whatever we already have
+          this.statusesOffset = this.statuses.length
+          // Because the amount of new statuses can actually be zero, compare to old lenght instead
+          this.lastStatusFetchCount = this.statuses.length - oldLength
+          this.lastQuery = query
         })
     },
     resultCount (tabName) {

src/components/search/search.vue

@@ -22,7 +22,7 @@
       </button>
     </div>
     <div
-      v-if="loading"
+      v-if="loading && statusesOffset == 0"
       class="text-center loading-icon"
     >
       <FAIcon
@@ -55,12 +55,6 @@
     </div>
     <div class="panel-body">
       <div v-if="currenResultTab === 'statuses'">
-        <div
-          v-if="visibleStatuses.length === 0 && !loading && loaded"
-          class="search-result-heading"
-        >
-          <h4>{{ $t('search.no_results') }}</h4>
-        </div>
         <Status
           v-for="status in visibleStatuses"
           :key="status.id"
@@ -71,6 +65,33 @@
           :statusoid="status"
           :no-heading="false"
         />
+        <button
+          v-if="!loading && loaded && lastStatusFetchCount > 0"
+          class="more-statuses-button button-unstyled -link -fullwidth"
+          @click.prevent="search(searchTerm, 'statuses')"
+        >
+          <div class="new-status-notification text-center">
+            {{ $t('search.load_more') }}
+          </div>
+        </button>
+        <div
+          v-else-if="loading && statusesOffset > 0"
+          class="text-center loading-icon"
+        >
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
+        </div>
+        <div
+          v-if="(visibleStatuses.length === 0 || lastStatusFetchCount === 0) && !loading && loaded"
+          class="search-result-heading"
+        >
+          <h4>
+            {{ visibleStatuses.length === 0 ? $t('search.no_results') : $t('search.no_more_results') }}
+          </h4>
+        </div>
       </div>
       <div v-else-if="currenResultTab === 'people'">
         <div
@@ -208,6 +229,11 @@
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
-}
+  }
+
+  .more-statuses-button {
+    height: 3.5em;
+    line-height: 3.5em;
+  }
 
 </style>

src/components/staff_panel/staff_panel.js

@@ -14,7 +14,6 @@ const StaffPanel = {
   computed: {
     groupedStaffAccounts () {
       const staffAccounts = map(this.staffAccounts, this.findUserByName).filter(_ => _)
-      console.log(staffAccounts)
       const groupedStaffAccounts = groupBy(staffAccounts, 'role')
 
       return [

src/components/thread_tree/thread_tree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="thread-tree">
+  <article class="thread-tree">
     <status
       :key="status.id"
       ref="statusComponent"
@@ -113,7 +113,7 @@
         </template>
       </i18n-t>
     </div>
-  </div>
+  </article>
 </template>
 
 <script src="./thread_tree.js"></script>

src/components/timeline/timeline.vue

@@ -6,8 +6,8 @@
         :timeline-name="timelineName"
       />
       <div
-        class="rightside-button"
         v-if="showScrollTop && !embedded"
+        class="rightside-button"
       >
         <button
           class="button-unstyled scroll-to-top-button"
@@ -26,8 +26,8 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="rightside-button"
           v-if="showLoadButton"
+          class="rightside-button"
         >
           <button
             class="button-unstyled loadmore-button"
@@ -47,6 +47,7 @@
           v-else-if="!embedded"
           class="loadmore-text faint veryfaint rightside-icon"
           :title="$t('timeline.up_to_date')"
+          :aria-disabled="true"
           @click.prevent
         >
           <FAIcon
@@ -71,17 +72,25 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
+      <QuickFilterSettings
-      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
+        v-if="!embedded"
+        class="rightside-button"
+      />
+      <QuickViewSettings
+        v-if="!embedded"
+        class="rightside-button"
+      />
     </div>
     <div :class="classes.body">
       <div
         ref="timeline"
         class="timeline"
+        role="feed"
       >
         <conversation
           v-for="statusId in filteredPinnedStatusIds"
           :key="statusId + '-pinned'"
+          role="listitem"
           class="status-fadein"
           :status-id="statusId"
           :collapsable="true"
@@ -92,6 +101,7 @@
         <conversation
           v-for="status in filteredVisibleStatuses"
           :key="status.id"
+          role="listitem"
           class="status-fadein"
           :status-id="status.id"
           :collapsable="true"

src/components/user_card/user_card.js

@@ -125,6 +125,10 @@ export default {
     hideFollowersCount () {
       return this.isOtherUser && this.user.hide_followers_count
     },
+    showModerationMenu () {
+      const privileges = this.loggedIn.privileges
+      return this.loggedIn.role === 'admin' || privileges.includes('users_manage_activation_state') || privileges.includes('users_delete') || privileges.includes('users_manage_tags')
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {

src/components/user_card/user_card.vue

@@ -258,7 +258,7 @@
             </button>
           </div>
           <ModerationTools
-            v-if="loggedIn.role === &quot;admin&quot;"
+            v-if="showModerationMenu"
             :user="user"
           />
         </div>

src/components/user_panel/user_panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="user-panel">
+  <aside class="user-panel">
     <div
       v-if="signedIn"
       key="user-panel-signed"
@@ -16,7 +16,7 @@
       v-else
       key="user-panel"
     />
-  </div>
+  </aside>
 </template>
 
 <script src="./user_panel.js"></script>

src/i18n/en.json

@@ -158,7 +158,11 @@
     "lists": "Lists",
     "edit_nav_mobile": "Customize navigation bar",
     "edit_pinned": "Edit pinned items",
-    "edit_finish": "Done editing"
+    "edit_finish": "Done editing",
+    "mobile_sidebar": "Toggle mobile sidebar",
+    "mobile_notifications": "Open notifications",
+    "mobile_notifications": "Open notifications (there are unread ones)",
+    "mobile_notifications_close": "Close notifications"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
@@ -807,7 +811,9 @@
     "no_more_statuses": "No more statuses",
     "no_statuses": "No statuses",
     "socket_reconnected": "Realtime connection established",
-    "socket_broke": "Realtime connection lost: CloseEvent code {0}"
+    "socket_broke": "Realtime connection lost: CloseEvent code {0}",
+    "quick_view_settings": "Quick view settings",
+    "quick_filter_settings": "Quick filter settings"
   },
   "status": {
     "favorites": "Favorites",
@@ -980,7 +986,9 @@
     "hashtags": "Hashtags",
     "person_talking": "{count} person talking",
     "people_talking": "{count} people talking",
-    "no_results": "No results"
+    "no_results": "No results",
+    "no_more_results": "No more results",
+    "load_more": "Load more results"
   },
   "password_reset": {
     "forgot_password": "Forgot password?",

src/modules/instance.js

@@ -36,6 +36,8 @@ const REGIONAL_INDICATORS = (() => {
   return res
 })()
 
+const REMOTE_INTERACTION_URL = '/main/ostatus'
+
 const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
@@ -214,6 +216,18 @@ const instance = {
     },
     instanceDomain (state) {
       return new URL(state.server).hostname
+    },
+    remoteInteractionLink (state) {
+      const server = state.server.endsWith('/') ? state.server.slice(0, -1) : state.server
+      const link = server + REMOTE_INTERACTION_URL
+
+      return ({ statusId, nickname }) => {
+        if (statusId) {
+          return `${link}?status_id=${statusId}`
+        } else {
+          return `${link}?nickname=${nickname}`
+        }
+      }
     }
   },
   actions: {

src/modules/statuses.js

@@ -761,8 +761,8 @@ const statuses = {
       rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
         .then(rebloggedByUsers => commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }))
     },
-    search (store, { q, resolve, limit, offset, following }) {
+    search (store, { q, resolve, limit, offset, following, type }) {
-      return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following })
+      return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following, type })
         .then((data) => {
           store.commit('addNewUsers', data.accounts)
           store.commit('addNewStatuses', { statuses: data.statuses })

src/services/api/api.service.js

@@ -1278,7 +1278,7 @@ const searchUsers = ({ credentials, query }) => {
     .then((data) => data.map(parseUser))
 }
 
-const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
+const search2 = ({ credentials, q, resolve, limit, offset, following, type }) => {
   let url = MASTODON_SEARCH_2
   const params = []
 
@@ -1302,6 +1302,10 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
     params.push(['following', true])
   }
 
+  if (type) {
+    params.push(['following', type])
+  }
+
   params.push(['with_relationships', true])
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')

src/services/entity_normalizer/entity_normalizer.service.js

@@ -124,6 +124,34 @@ export const parseUser = (data) => {
       } else {
         output.role = 'member'
       }
+
+      if (data.pleroma.privileges) {
+        output.privileges = data.pleroma.privileges
+      } else if (data.pleroma.is_admin) {
+        output.privileges = [
+          'users_read',
+          'users_manage_invites',
+          'users_manage_activation_state',
+          'users_manage_tags',
+          'users_manage_credentials',
+          'users_delete',
+          'messages_read',
+          'messages_delete',
+          'instances_delete',
+          'reports_manage_reports',
+          'moderation_log_read',
+          'announcements_manage_announcements',
+          'emoji_manage_emoji',
+          'statistics_read'
+        ]
+      } else if (data.pleroma.is_moderator) {
+        output.privileges = [
+          'messages_delete',
+          'reports_manage_reports'
+        ]
+      } else {
+        output.privileges = []
+      }
     }
 
     if (data.source) {