Smarter scope copy (#28)

Reviewed-on: AkkomaGang/pleroma-fe#28
Co-authored-by: sfr <sol@solfisher.com>
Co-committed-by: sfr <sol@solfisher.com>

.woodpecker.yml

@@ -0,0 +1,54 @@
+pipeline:
+  lint:
+    when:
+      event:
+      - push
+      - pull_request
+    image: node:16
+    commands:
+    - yarn
+    - yarn lint
+    - yarn stylelint
+
+  test:
+    when:
+      event:
+      - push
+      - pull_request
+    image: node:16
+    commands:
+    - apt update
+    - apt install firefox-esr -y --no-install-recommends
+    - yarn 
+    - yarn unit
+
+  build:
+    when:
+      event:
+      - push
+      branch:
+      - develop
+    image: node:16
+    commands:
+    - yarn
+    - yarn build
+
+  release:
+    when:
+      event:
+      - push
+      branch:
+      - develop
+    image: node:16
+    secrets:
+    - SCW_ACCESS_KEY
+    - SCW_SECRET_KEY
+    - SCW_DEFAULT_ORGANIZATION_ID
+    commands:
+      - apt-get update && apt-get install -y rclone wget zip
+      - wget https://github.com/scaleway/scaleway-cli/releases/download/v2.5.1/scaleway-cli_2.5.1_linux_amd64
+      - mv scaleway-cli_2.5.1_linux_amd64 scaleway-cli
+      - chmod +x scaleway-cli
+      - ./scaleway-cli object config install type=rclone
+      - zip akkoma-fe.zip -r dist
+      - rclone copyto akkoma-fe.zip scaleway:akkoma-updates/frontend/akkoma-fe.zip

CHANGELOG.md

@@ -37,6 +37,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Media modal now also displays description and counter position in gallery (i.e. 1/5)
 - Ability to rearrange order of attachments when uploading
 - Enabled users to zoom and pan images in media viewer with mouse and touch
+- Added frontend ui for account migration
 
 
 ## [2.4.2] - 2022-01-09

src/boot/routes.js

@@ -20,6 +20,9 @@ import ShoutPanel from 'components/shout_panel/shout_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
 import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
+import Lists from 'components/lists/lists.vue'
+import ListTimeline from 'components/list_timeline/list_timeline.vue'
+import ListEdit from 'components/list_edit/list_edit.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -69,7 +72,10 @@ export default (store) => {
     { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
     { name: 'about', path: '/about', component: About },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
+    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
+    { name: 'lists', path: '/lists', component: Lists },
+    { name: 'list-timeline', path: '/lists/:id', component: ListTimeline },
+    { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {

src/components/attachment/attachment.js

@@ -199,6 +199,26 @@ const Attachment = {
       const width = image.naturalWidth
       const height = image.naturalHeight
       this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
+    },
+    resize (e) {
+      const target = e.target || e
+      if (!(target instanceof window.Element)) { return }
+
+      // Reset to default height for empty form, nothing else to do here.
+      if (target.value === '') {
+        target.style.height = null
+        this.$emit('resize')
+        return
+      }
+
+      const paddingString = getComputedStyle(target)['padding']
+      // remove -px suffix
+      const padding = Number(paddingString.substring(0, paddingString.length - 2))
+
+      target.style.height = 'auto'
+      const newHeight = Math.floor(target.scrollHeight - padding * 2)
+      target.style.height = `${newHeight}px`
+      this.$emit('resize', newHeight)
     }
   }
 }

src/components/attachment/attachment.scss

@@ -16,7 +16,7 @@
 
   .attachment-wrapper {
     flex: 1 1 auto;
-    height: 100%;
+    height: 200px;
     position: relative;
     overflow: hidden;
   }
@@ -33,7 +33,8 @@
       line-height: 1.5;
       padding: 0.5em;
       margin: 0;
-      white-space: nowrap;
+      white-space: pre-line;
+      word-break: break-word;
       text-overflow: ellipsis;
       overflow: hidden;
     }
@@ -52,6 +53,19 @@
   .description-field {
     flex: 1;
     min-width: 0;
+
+    box-sizing: content-box;
+    overflow: hidden;
+    transition: min-height 200ms 100ms;
+
+    padding-bottom: var(--_padding);
+    height: calc(var(--post-line-height) * 1em);
+    min-height: calc(var(--post-line-height) * 1em);
+    resize: none;
+
+    &.scrollable-form {
+      overflow-y: auto;
+    }
   }
 
   & .placeholder-container,

src/components/attachment/attachment.vue

@@ -248,14 +248,15 @@
       class="description-container"
       :class="{ '-static': !edit }"
     >
-      <input
+      <textarea
         v-if="edit"
         v-model="localDescription"
-        type="text"
         class="description-field"
         :placeholder="$t('post_status.media_description')"
-        @keydown.enter.prevent=""
+        rows="1"
-      >
+        cols="1"
+        @input="resize"
+      />
       <p v-else>
         {{ localDescription }}
       </p>

src/components/desktop_nav/desktop_nav.scss

@@ -80,11 +80,16 @@
   }
 
   .nav-icon {
-    margin-left: 0.2em;
+    margin-left: 1em;
     width: 2em;
     height: 100%;
+    font-size: 130%;
     text-align: center;
 
+    &-logout {
+      margin-left: 2em;
+    }
+
     .svg-inline--fa {
       color: $fallback--link;
       color: var(--topBarLink, $fallback--link);

src/components/desktop_nav/desktop_nav.vue

@@ -63,7 +63,7 @@
         </a>
         <button
           v-if="currentUser"
-          class="button-unstyled nav-icon"
+          class="button-unstyled nav-icon nav-icon-logout"
           @click.prevent="logout"
         >
           <FAIcon

src/components/gallery/gallery.vue

@@ -171,7 +171,6 @@
 
       .gallery-item {
         margin: 0;
-        height: 200px;
       }
     }
   }

src/components/list_card/list_card.js

@@ -0,0 +1,16 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
+const ListCard = {
+  props: [
+    'list'
+  ]
+}
+
+export default ListCard

src/components/list_card/list_card.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="list-card">
+    <router-link
+      :to="{ name: 'list-timeline', params: { id: list.id } }"
+      class="list-name"
+    >
+      {{ list.title }}
+    </router-link>
+    <router-link
+      :to="{ name: 'list-edit', params: { id: list.id } }"
+      class="button-list-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./list_card.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-card {
+  display: flex;
+}
+
+.list-name,
+.button-list-edit {
+  margin: 0;
+  padding: 1em;
+  color: $fallback--link;
+  color: var(--link, $fallback--link);
+
+  &:hover {
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: $fallback--link;
+    color: var(--selectedMenuText, $fallback--link);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+  }
+}
+
+.list-name {
+  flex-grow: 1;
+}
+</style>

src/components/list_edit/list_edit.js

@@ -0,0 +1,91 @@
+import { mapState, mapGetters } from 'vuex'
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import ListUserSearch from '../list_user_search/list_user_search.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
+
+const ListNew = {
+  components: {
+    BasicUserCard,
+    UserAvatar,
+    ListUserSearch
+  },
+  data () {
+    return {
+      title: '',
+      userIds: [],
+      selectedUserIds: []
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchList', { id: this.id })
+      .then(() => { this.title = this.findListTitle(this.id) })
+    this.$store.dispatch('fetchListAccounts', { id: this.id })
+      .then(() => {
+        this.selectedUserIds = this.findListAccounts(this.id)
+        this.selectedUserIds.forEach(userId => {
+          this.$store.dispatch('fetchUserIfMissing', userId)
+        })
+      })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    },
+    users () {
+      return this.userIds.map(userId => this.findUser(userId))
+    },
+    selectedUsers () {
+      return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
+    ...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
+  },
+  methods: {
+    onInput () {
+      this.search(this.query)
+    },
+    selectUser (user) {
+      if (this.selectedUserIds.includes(user.id)) {
+        this.removeUser(user.id)
+      } else {
+        this.addUser(user)
+      }
+    },
+    isSelected (user) {
+      return this.selectedUserIds.includes(user.id)
+    },
+    addUser (user) {
+      this.selectedUserIds.push(user.id)
+    },
+    removeUser (userId) {
+      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    },
+    onResults (results) {
+      this.userIds = results
+    },
+    updateList () {
+      this.$store.dispatch('setList', { id: this.id, title: this.title })
+      this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
+
+      this.$router.push({ name: 'list-timeline', params: { id: this.id } })
+    },
+    deleteList () {
+      this.$store.dispatch('deleteList', { id: this.id })
+      this.$router.push({ name: 'lists' })
+    }
+  }
+}
+
+export default ListNew

src/components/list_edit/list_edit.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="panel-default panel list-edit">
+    <div
+      ref="header"
+      class="panel-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="$router.back"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+    </div>
+    <div class="input-wrap">
+      <input
+        ref="title"
+        v-model="title"
+        :placeholder="$t('lists.title')"
+      >
+    </div>
+    <div class="member-list">
+      <div
+        v-for="user in selectedUsers"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <ListUserSearch @results="onResults" />
+    <div class="member-list">
+      <div
+        v-for="user in users"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <button
+      :disabled="title && title.length === 0"
+      class="btn button-default"
+      @click="updateList"
+    >
+      {{ $t('lists.save') }}
+    </button>
+    <button
+      class="btn button-default"
+      @click="deleteList"
+    >
+      {{ $t('lists.delete') }}
+    </button>
+  </div>
+</template>
+
+<script src="./list_edit.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-edit {
+  .input-wrap {
+    display: flex;
+    margin: 0.7em 0.5em 0.7em 0.5em;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  .search-icon {
+    margin-right: 0.3em;
+  }
+
+  .member-list {
+    padding-bottom: 0.7rem;
+  }
+
+  .basic-user-card:hover,
+  .basic-user-card.selected {
+    cursor: pointer;
+    background-color: var(--selectedPost, $fallback--lightBg);
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0.5em;
+  }
+}
+</style>

src/components/list_new/list_new.js

@@ -0,0 +1,79 @@
+import { mapState, mapGetters } from 'vuex'
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import ListUserSearch from '../list_user_search/list_user_search.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
+
+const ListNew = {
+  components: {
+    BasicUserCard,
+    UserAvatar,
+    ListUserSearch
+  },
+  data () {
+    return {
+      title: '',
+      userIds: [],
+      selectedUserIds: []
+    }
+  },
+  computed: {
+    users () {
+      return this.userIds.map(userId => this.findUser(userId))
+    },
+    selectedUsers () {
+      return this.selectedUserIds.map(userId => this.findUser(userId))
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    }),
+    ...mapGetters(['findUser'])
+  },
+  methods: {
+    goBack () {
+      this.$emit('cancel')
+    },
+    onInput () {
+      this.search(this.query)
+    },
+    selectUser (user) {
+      if (this.selectedUserIds.includes(user.id)) {
+        this.removeUser(user.id)
+      } else {
+        this.addUser(user)
+      }
+    },
+    isSelected (user) {
+      return this.selectedUserIds.includes(user.id)
+    },
+    addUser (user) {
+      this.selectedUserIds.push(user.id)
+    },
+    removeUser (userId) {
+      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    },
+    onResults (results) {
+      this.userIds = results
+    },
+    createList () {
+      // the API has two different endpoints for "creating a list with a name"
+      // and "updating the accounts on the list".
+      this.$store.dispatch('createList', { title: this.title })
+        .then((list) => {
+          this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
+          this.$router.push({ name: 'list-timeline', params: { id: list.id } })
+        })
+    }
+  }
+}
+
+export default ListNew

src/components/list_new/list_new.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="panel-default panel list-new">
+    <div
+      ref="header"
+      class="panel-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="goBack"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+    </div>
+    <div class="input-wrap">
+      <input
+        ref="title"
+        v-model="title"
+        :placeholder="$t('lists.title')"
+      >
+    </div>
+
+    <div class="member-list">
+      <div
+        v-for="user in selectedUsers"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <ListUserSearch
+      @results="onResults"
+    />
+    <div
+      v-for="user in users"
+      :key="user.id"
+      class="member"
+    >
+      <BasicUserCard
+        :user="user"
+        :class="isSelected(user) ? 'selected' : ''"
+        @click.capture.prevent="selectUser(user)"
+      />
+    </div>
+
+    <button
+      :disabled="title && title.length === 0"
+      class="btn button-default"
+      @click="createList"
+    >
+      {{ $t('lists.create') }}
+    </button>
+  </div>
+</template>
+
+<script src="./list_new.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-new {
+  .search-icon {
+    margin-right: 0.3em;
+  }
+
+  .member-list {
+    padding-bottom: 0.7rem;
+  }
+
+  .basic-user-card:hover,
+  .basic-user-card.selected {
+    cursor: pointer;
+    background-color: var(--selectedPost, $fallback--lightBg);
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0.5em;
+  }
+}
+</style>

src/components/list_timeline/list_timeline.js

@@ -0,0 +1,25 @@
+import Timeline from '../timeline/timeline.vue'
+const ListTimeline = {
+  data () {
+    return {
+      listId: null
+    }
+  },
+  components: {
+    Timeline
+  },
+  computed: {
+    timeline () { return this.$store.state.statuses.timelines.list }
+  },
+  created () {
+    this.listId = this.$route.params.id
+    this.$store.dispatch('fetchList', { id: this.listId })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'list')
+    this.$store.commit('clearTimeline', { timeline: 'list' })
+  }
+}
+
+export default ListTimeline

src/components/list_timeline/list_timeline.vue

@@ -0,0 +1,10 @@
+<template>
+  <Timeline
+    title="list.name"
+    :timeline="timeline"
+    :list-id="listId"
+    timeline-name="list"
+  />
+</template>
+
+<script src="./list_timeline.js"></script>

src/components/list_user_search/list_user_search.js

@@ -0,0 +1,46 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+import { debounce } from 'lodash'
+import Checkbox from '../checkbox/checkbox.vue'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
+
+const ListUserSearch = {
+  components: {
+    Checkbox
+  },
+  data () {
+    return {
+      loading: false,
+      query: '',
+      followingOnly: true
+    }
+  },
+  methods: {
+    onInput: debounce(function () {
+      this.search(this.query)
+    }, 2000),
+    search (query) {
+      if (!query) {
+        this.loading = false
+        return
+      }
+
+      this.loading = true
+      this.userIds = []
+      this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
+        .then(data => {
+          this.loading = false
+          this.$emit('results', data.accounts.map(a => a.id))
+        })
+    }
+  }
+}
+
+export default ListUserSearch

src/components/list_user_search/list_user_search.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div class="input-wrap">
+      <div class="input-search">
+        <FAIcon
+          class="search-icon fa-scale-110 fa-old-padding"
+          icon="search"
+        />
+      </div>
+      <input
+        ref="search"
+        v-model="query"
+        :placeholder="$t('lists.search')"
+        @input="onInput"
+      >
+    </div>
+    <div class="input-wrap">
+      <Checkbox
+        v-model="followingOnly"
+        @change="onInput"
+      >
+        {{ $t('lists.following_only') }}
+      </Checkbox>
+    </div>
+  </div>
+</template>
+
+<script src="./list_user_search.js"></script>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.input-wrap {
+  display: flex;
+  margin: 0.7em 0.5em 0.7em 0.5em;
+
+  input {
+    width: 100%;
+  }
+}
+
+.search-icon {
+  margin-right: 0.3em;
+}
+
+</style>

src/components/lists/lists.js

@@ -0,0 +1,32 @@
+import ListCard from '../list_card/list_card.vue'
+import ListNew from '../list_new/list_new.vue'
+
+const Lists = {
+  data () {
+    return {
+      isNew: false
+    }
+  },
+  components: {
+    ListCard,
+    ListNew
+  },
+  created () {
+    this.$store.dispatch('startFetchingLists')
+  },
+  computed: {
+    lists () {
+      return this.$store.state.lists.allLists
+    }
+  },
+  methods: {
+    cancelNewList () {
+      this.isNew = false
+    },
+    newList () {
+      this.isNew = true
+    }
+  }
+}
+
+export default Lists

src/components/lists/lists.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="isNew">
+    <ListNew @cancel="cancelNewList" />
+  </div>
+  <div
+    v-else
+    class="settings panel panel-default"
+  >
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t('lists.lists') }}
+      </div>
+      <button
+        class="button-default"
+        @click="newList"
+      >
+        {{ $t("lists.new") }}
+      </button>
+    </div>
+    <div class="panel-body">
+      <ListCard
+        v-for="list in lists.slice().reverse()"
+        :key="list"
+        :list="list"
+        class="list-item"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./lists.js"></script>

src/components/media_modal/media_modal.vue

@@ -189,7 +189,8 @@ $modal-view-button-icon-margin: 0.5em;
     min-height: 1em;
     max-width: 500px;
     max-height: 9.5em;
-    word-break: break-all;
+    word-break: break-word;
+    white-space: pre-line;
   }
 
   .modal-image {

src/components/mfm_content/mfm_content.jsx

@@ -1,13 +1,12 @@
 import { defineComponent, h } from 'vue'
 import * as mfm from 'mfm-js'
 import MentionLink from '../mention_link/mention_link.vue'
-import mention_link from '../mention_link/mention_link'
 
 function concat (xss) {
   return ([]).concat(...xss)
 }
 
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate']
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'rotate']
 
 export default defineComponent({
   props: {
@@ -138,9 +137,6 @@ export default defineComponent({
               style = 'animation: mfm-rainbow 1s linear infinite;'
               break
             }
-            case 'sparkle': {
-              return h(MkSparkle, {}, genEl(token.children))
-            }
             case 'rotate': {
               const degrees = parseInt(token.props.args.deg) || '90'
               style = `transform: rotate(${degrees}deg); transform-origin: center center;`
@@ -214,11 +210,10 @@ export default defineComponent({
         }
 
         case 'inlineCode': {
-          return [h('pre', {
+          return [h('code', {
             key: Math.random(),
-            code: token.props.code,
+            display: 'inline'
-            inline: true
+          }, token.props.code)]
-          })]
         }
 
         case 'quote': {
@@ -234,6 +229,8 @@ export default defineComponent({
         }
 
         case 'emojiCode': {
+          const emoj = this.status.emojis.find((emoji) => emoji.shortcode === token.props.name)
+          if (emoj) {
             return [h('div', {
               class: 'still-image emoji img'
             },
@@ -244,6 +241,9 @@ export default defineComponent({
               src: this.status.emojis.find((emoji) => emoji.shortcode === token.props.name).static_url
             })]
             )]
+          } else {
+            return `:${token.props.name}:`
+          }
         }
 
         case 'unicodeEmoji': {
@@ -265,6 +265,13 @@ export default defineComponent({
           })]
         }
 
+        case 'search': {
+          return [h('a', {
+            href: `https://www.google.com/search?q=${token.props.query}`
+          }, token.props.content)
+          ]
+        }
+
         default: {
           console.error('unrecognized ast type:', token.type)
 

src/components/nav_panel/nav_panel.js

@@ -12,7 +12,8 @@ import {
   faComments,
   faBell,
   faInfoCircle,
-  faStream
+  faStream,
+  faList
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -25,7 +26,8 @@ library.add(
   faComments,
   faBell,
   faInfoCircle,
-  faStream
+  faStream,
+  faList
 )
 
 const NavPanel = {

src/components/nav_panel/nav_panel.vue

@@ -25,6 +25,18 @@
             <TimelineMenuContent class="timelines" />
           </div>
         </li>
+        <li v-if="currentUser">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'lists' }"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="list"
+            />{{ $t("nav.lists") }}
+          </router-link>
+        </li>
         <li v-if="currentUser">
           <router-link
             class="menu-item"

src/components/post_status_form/post_status_form.js

@@ -112,17 +112,11 @@ const PostStatusForm = {
     const preset = this.$route.query.message
     let statusText = preset || ''
 
-    const { scopeCopy } = this.$store.getters.mergedConfig
-
     if (this.replyTo) {
       const currentUser = this.$store.state.users.currentUser
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
 
-    const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
-      ? this.copyMessageScope
-      : this.$store.state.users.currentUser.default_scope
-
     const { postContentType: contentType, sensitiveByDefault, sensitiveIfSubject } = this.$store.getters.mergedConfig
 
     return {
@@ -139,7 +133,7 @@ const PostStatusForm = {
         files: [],
         poll: {},
         mediaDescriptions: {},
-        visibility: scope,
+        visibility: this.suggestedVisibility(),
         contentType
       },
       caret: 0,
@@ -281,8 +275,6 @@ const PostStatusForm = {
       if (this.preview) this.previewStatus()
     },
     async postStatus (event, newStatus, opts = {}) {
-      const { sensitiveIfSubject } = this.$store.getters.mergedConfig
-
       if (this.posting && !this.optimisticPosting) { return }
       if (this.disableSubmit) { return }
       if (this.emojiInputShown) { return }
@@ -318,7 +310,7 @@ const PostStatusForm = {
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
         visibility: newStatus.visibility,
-        sensitive: (newStatus.nsfw || (sensitiveIfSubject && newStatus.spoilerText)),
+        sensitive: newStatus.nsfw,
         media: newStatus.files,
         store: this.$store,
         inReplyToStatusId: this.replyTo,
@@ -392,6 +384,10 @@ const PostStatusForm = {
     },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
+
+      if (this.newStatus.sensitiveIfSubject && this.newStatus.spoilerText !== '') {
+        this.newStatus.nsfw = true
+      }
       this.$emit('resize', { delayed: true })
     },
     removeMediaFile (fileInfo) {
@@ -468,6 +464,11 @@ const PostStatusForm = {
         this.resize(this.$refs['textarea'])
       })
     },
+    onSubjectInput (e) {
+      if (this.newStatus.sensitiveIfSubject) {
+        this.newStatus.nsfw = true
+      }
+    },
     resize (e) {
       const target = e.target || e
       if (!(target instanceof window.Element)) { return }
@@ -607,6 +608,19 @@ const PostStatusForm = {
     },
     openProfileTab () {
       this.$store.dispatch('openSettingsModalTab', 'profile')
+    },
+    suggestedVisibility () {
+      if (this.copyMessageScope) {
+        if (this.copyMessageScope === 'direct') {
+          return this.copyMessageScope
+        }
+        if (this.$store.getters.mergedConfig.scopeCopy) {
+          if (this.copyMessageScope !== 'public' && this.$store.state.users.currentUser.default_scope !== 'private') {
+            return this.copyMessageScope
+          }
+        }
+      }
+      return this.$store.state.users.currentUser.default_scope
     }
   }
 }

src/components/post_status_form/post_status_form.vue

@@ -124,8 +124,18 @@
             :disabled="posting && !optimisticPosting"
             size="1"
             class="form-post-subject"
+            @input="onSubjectInput"
           >
         </EmojiInput>
+        <i18n-t
+          v-if="newStatus.files.length !== 0 && newStatus.nsfw === false && newStatus.spoilerText !== ''"
+          keypath="post_status.media_not_sensitive_warning"
+          tag="p"
+          class="visibility-notice"
+          scope="global"
+        >
+          {{ $t('post_status.media_not_sensitive_warning') }}
+        </i18n-t>
         <EmojiInput
           ref="emoji-input"
           v-model="newStatus.status"

src/components/react_button/react_button.js

@@ -1,4 +1,5 @@
 import Popover from '../popover/popover.vue'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
 
@@ -12,10 +13,12 @@ const ReactButton = {
     }
   },
   components: {
-    Popover
+    Popover,
+    EmojiPicker
   },
   methods: {
-    addReaction (event, emoji, close) {
+    addReaction (event, close) {
+      const emoji = event.insertion
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
@@ -32,40 +35,6 @@ const ReactButton = {
     }
   },
   computed: {
-    commonEmojis () {
-      return [
-        { displayText: 'thumbsup', replacement: '👍' },
-        { displayText: 'angry', replacement: '😠' },
-        { displayText: 'eyes', replacement: '👀' },
-        { displayText: 'joy', replacement: '😂' },
-        { displayText: 'fire', replacement: '🔥' }
-      ]
-    },
-    emojis () {
-      if (this.filterWord !== '') {
-        const filterWordLowercase = this.filterWord.toLowerCase()
-        let orderedEmojiList = []
-        for (const emoji of [
-          ...this.$store.state.instance.emoji,
-          ...this.$store.state.instance.customEmoji
-        ]) {
-          if (emoji.replacement === this.filterWord) return [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,
-        ...this.$store.state.instance.customEmoji
-      ] || []
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     }

src/components/react_button/react_button.vue

@@ -9,43 +9,10 @@
     @show="focusInput"
   >
     <template v-slot:content="{close}">
-      <div class="reaction-picker-filter">
+      <EmojiPicker
-        <input
+        :enable-sticker-picker="false"
-          v-model="filterWord"
+        @emoji="addReaction($event, close)"
-          size="1"
+      />
-          :placeholder="$t('emoji.search_emoji')"
-        >
-      </div>
-      <div class="reaction-picker">
-        <span
-          v-for="emoji in commonEmojis"
-          :key="emoji.replacement"
-          class="emoji-button"
-          :title="emoji.displayText"
-          @click="addReaction($event, emoji.replacement, close)"
-        >
-          {{ emoji.replacement }}
-        </span>
-        <div class="reaction-picker-divider" />
-        <span
-          v-for="(emoji, key) in emojis"
-          :key="key"
-          class="emoji-button"
-          :title="emoji.displayText"
-          @click="addReaction($event, emoji.replacement, close)"
-        >
-          <img
-            v-if="emoji.imageUrl !== false"
-            :src="emoji.imageUrl"
-            width="30px"
-            class="custom-reaction"
-          >
-          <span v-else>
-            {{ emoji.replacement }}
-          </span>
-        </span>
-        <div class="reaction-bottom-fader" />
-      </div>
     </template>
     <template v-slot:trigger>
       <button
@@ -136,6 +103,11 @@
       color: var(--text, $fallback--text);
     }
   }
+
+  .popover {
+    transform: translateX(-64px) translateY(5px);
+    min-width: 70%;
+  }
 }
 
 </style>

src/components/retweet_button/retweet_button.js

@@ -24,6 +24,9 @@ const RetweetButton = {
     }
   },
   computed: {
+    isOwn () {
+      return this.status.user.id === this.$store.state.users.currentUser.id
+    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     }

src/components/retweet_button/retweet_button.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="RetweetButton">
     <button
-      v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
+      v-if="(visibility !== 'private' || isOwn) && visibility !== 'direct' && loggedIn"
       class="button-unstyled interactive"
       :class="status.repeated && '-repeated'"
       :title="$t('tool_tip.repeat')"

src/components/rich_content/rich_content.jsx

@@ -112,23 +112,6 @@ export default {
       }
     }
 
-    const renderLink = (attrs, children) => {
-      const updatedLink = attrs['href'].replace(/&/g, '&')
-      const updatedChildren = children.map(child => {
-        if (typeof child === 'string') {
-          return child.replace(attrs['href'], updatedLink)
-        }
-        if (child[0] === '<span>') {
-          return <span>
-            { child[1] }
-          </span>
-        }
-        return child[1]
-      })
-      return <a {...{ attrs }} href={updatedLink}>
-        { ...updatedChildren }
-      </a>
-    }
     // Processor to use with html_tree_converter
     const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
@@ -193,9 +176,6 @@ export default {
               return renderMention(attrs, children)
             } else {
               currentMentions = null
-              if (attrs['href']) {
-                return renderLink(attrs, children)
-              }
               break
             }
           case 'span':

src/components/settings_modal/tabs/notifications_tab.vue

@@ -65,6 +65,14 @@
             {{ $t('settings.enable_web_push_notifications') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="webPushHideIfCW"
+            expert="1"
+          >
+            {{ $t('settings.notification_setting_hide_if_cw') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="serverSide_webPushHideContents"

src/components/settings_modal/tabs/security_tab/security_tab.js

@@ -15,11 +15,21 @@ const SecurityTab = {
       deleteAccountError: false,
       changePasswordInputs: [ '', '', '' ],
       changedPassword: false,
-      changePasswordError: false
+      changePasswordError: false,
+      moveAccountTarget: '',
+      moveAccountPassword: '',
+      movedAccount: false,
+      moveAccountError: false,
+      aliases: [],
+      listAliasesError: false,
+      addAliasTarget: '',
+      addedAlias: false,
+      addAliasError: false
     }
   },
   created () {
     this.$store.dispatch('fetchTokens')
+    this.fetchAliases()
   },
   components: {
     ProgressButton,
@@ -92,6 +102,49 @@ const SecurityTab = {
           }
         })
     },
+    moveAccount () {
+      const params = {
+        targetAccount: this.moveAccountTarget,
+        password: this.moveAccountPassword
+      }
+      this.$store.state.api.backendInteractor.moveAccount(params)
+        .then((res) => {
+          if (res.status === 'success') {
+            this.movedAccount = true
+            this.moveAccountError = false
+          } else {
+            this.movedAccount = false
+            this.moveAccountError = res.error
+          }
+        })
+    },
+    removeAlias (alias) {
+      this.$store.state.api.backendInteractor.deleteAlias({ alias })
+        .then(() => this.fetchAliases())
+    },
+    addAlias () {
+      this.$store.state.api.backendInteractor.addAlias({ alias: this.addAliasTarget })
+        .then((res) => {
+          this.addedAlias = true
+          this.addAliasError = false
+          this.addAliasTarget = ''
+        })
+        .catch((error) => {
+          this.addedAlias = false
+          this.addAliasError = error
+        })
+        .then(() => this.fetchAliases())
+    },
+    fetchAliases () {
+      this.$store.state.api.backendInteractor.listAliases()
+        .then((res) => {
+          this.aliases = res.aliases
+          this.listAliasesError = false
+        })
+        .catch((error) => {
+          this.listAliasesError = error.error
+        })
+    },
     logout () {
       this.$store.dispatch('logout')
       this.$router.replace('/')

src/components/settings_modal/tabs/security_tab/security_tab.vue

@@ -103,6 +103,114 @@
       </table>
     </div>
     <mfa />
+
+    <div class="setting-item">
+      <h2>{{ $t('settings.account_alias') }}</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>{{ $t('settings.account_alias_table_head') }}</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="alias in aliases"
+            :key="alias"
+          >
+            <td>{{ alias }}</td>
+            <td class="actions">
+              <button
+                class="btn button-default"
+                @click="removeAlias(alias)"
+              >
+                {{ $t('settings.remove_alias') }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        v-if="listAliasesError"
+        class="alert error"
+      >
+        {{ $t('settings.list_aliases_error', { error }) }}
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
+          :title="$t('settings.hide_list_aliases_error_action')"
+          @click="listAliasesError = false"
+        />
+      </div>
+      <div>
+        <i18n
+          path="settings.new_alias_target"
+          tag="p"
+        >
+          <code
+            place="example"
+          >
+            foo@example.org
+          </code>
+        </i18n>
+        <input
+          v-model="addAliasTarget"
+        >
+      </div>
+      <button
+        class="btn button-default"
+        @click="addAlias"
+      >
+        {{ $t('settings.save') }}
+      </button>
+      <p v-if="addedAlias">
+        {{ $t('settings.added_alias') }}
+      </p>
+      <template v-if="addAliasError !== false">
+        <p>{{ $t('settings.add_alias_error', { error: addAliasError }) }}</p>
+      </template>
+    </div>
+
+    <div class="setting-item">
+      <h2>{{ $t('settings.move_account') }}</h2>
+      <p>{{ $t('settings.move_account_notes') }}</p>
+      <div>
+        <i18n
+          path="settings.move_account_target"
+          tag="p"
+        >
+          <code
+            place="example"
+          >
+            foo@example.org
+          </code>
+        </i18n>
+        <input
+          v-model="moveAccountTarget"
+        >
+      </div>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="moveAccountPassword"
+          type="password"
+          autocomplete="current-password"
+        >
+      </div>
+      <button
+        class="btn button-default"
+        @click="moveAccount"
+      >
+        {{ $t('settings.save') }}
+      </button>
+      <p v-if="movedAccount">
+        {{ $t('settings.moved_account') }}
+      </p>
+      <template v-if="moveAccountError !== false">
+        <p>{{ $t('settings.move_account_error', { error: moveAccountError }) }}</p>
+      </template>
+    </div>
+
     <div class="setting-item">
       <h2>{{ $t('settings.delete_account') }}</h2>
       <p v-if="!deletingAccount">

src/components/settings_modal/tabs/version_tab.js

@@ -1,7 +1,7 @@
 import { extractCommit } from 'src/services/version/version.service'
 
 const pleromaFeCommitUrl = 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/'
-const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commit/'
+const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commits/'
 
 const VersionTab = {
   data () {

src/components/side_drawer/side_drawer.js

@@ -14,7 +14,8 @@ import {
   faSearch,
   faTachometerAlt,
   faCog,
-  faInfoCircle
+  faInfoCircle,
+  faList
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -28,7 +29,8 @@ library.add(
   faSearch,
   faTachometerAlt,
   faCog,
-  faInfoCircle
+  faInfoCircle,
+  faList
 )
 
 const SideDrawer = {

src/components/side_drawer/side_drawer.vue

@@ -55,6 +55,18 @@
             /> {{ $t("nav.timelines") }}
           </router-link>
         </li>
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link :to="{ name: 'lists' }">
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="list"
+            /> {{ $t("nav.lists") }}
+          </router-link>
+        </li>
         <li
           v-if="currentUser && pleromaChatMessagesAvailable"
           @click="toggleDrawer"

src/components/timeline/timeline.js

@@ -18,6 +18,7 @@ const Timeline = {
     'timelineName',
     'title',
     'userId',
+    'listId',
     'tag',
     'embedded',
     'count',
@@ -101,6 +102,7 @@ const Timeline = {
       timeline: this.timelineName,
       showImmediately,
       userId: this.userId,
+      listId: this.listId,
       tag: this.tag
     })
   },
@@ -156,6 +158,7 @@ const Timeline = {
         older: true,
         showImmediately: true,
         userId: this.userId,
+        listId: this.listId,
         tag: this.tag
       }).then(({ statuses }) => {
         if (statuses && statuses.length === 0) {

src/components/timeline_menu/timeline_menu.js

@@ -58,6 +58,9 @@ const TimelineMenu = {
       if (route === 'tag-timeline') {
         return '#' + this.$route.params.tag
       }
+      if (route === 'list-timeline') {
+        return this.$store.getters.findListTitle(this.$route.params.id)
+      }
       const i18nkey = timelineNames()[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route
     }

src/components/user_profile/user_profile.js

@@ -7,6 +7,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import { debounce } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCircleNotch
@@ -40,7 +41,9 @@ const UserProfile = {
       error: false,
       userId: null,
       tab: defaultTabKey,
-      footerRef: null
+      footerRef: null,
+      note: null,
+      noteLoading: false
     }
   },
   created () {
@@ -110,9 +113,13 @@ const UserProfile = {
       const user = this.$store.getters.findUser(userNameOrId)
       if (user) {
         loadById(user.id)
+        this.note = user.relationship.note
       } else {
         this.$store.dispatch('fetchUser', userNameOrId)
-          .then(({ id }) => loadById(id))
+          .then(({ id, relationship }) => {
+            this.note = relationship.note
+            return loadById(id)
+          })
           .catch((reason) => {
             const errorMessage = get(reason, 'error.error')
             if (errorMessage === 'No user with such user_id') { // Known error
@@ -145,7 +152,15 @@ const UserProfile = {
       if (target.tagName === 'A') {
         window.open(target.href, '_blank')
       }
-    }
+    },
+    setNote () {
+      this.noteLoading = true
+      this.debounceSetNote()
+    },
+    debounceSetNote: debounce(function () {
+      this.$store.dispatch('setNote', { id: this.userId, note: this.note })
+      this.noteLoading = false
+    }, 1500)
   },
   watch: {
     '$route.params.id': function (newVal) {

src/components/user_profile/user_profile.vue

@@ -40,6 +40,27 @@
           </dd>
         </dl>
       </div>
+      <div
+        v-if="currentUser && !isUs"
+        class="note"
+      >
+        <textarea
+          v-model="note"
+          class="resize-height"
+          :placeholder="$t('user_card.note')"
+          @input="setNote"
+        />
+        <div
+          v-show="noteLoading"
+          class="preview-spinner"
+        >
+          <FAIcon
+            class="fa-old-padding"
+            spin
+            icon="circle-notch"
+          />
+        </div>
+      </div>
       <tab-switcher
         :active-tab="tab"
         :render-only-focused="true"
@@ -202,6 +223,22 @@
     align-items: middle;
     padding: 2em;
   }
+
+  .note {
+    position: relative;
+    margin: 0.5em 0.75em;
+
+    textarea {
+      width: 100%;
+    }
+
+    .preview-spinner {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0.5em 0.25em;
+    }
+  }
 }
 .user-profile-placeholder {
   .panel-body {

src/i18n/en.json

@@ -146,7 +146,8 @@
     "who_to_follow": "Who to follow",
     "preferences": "Preferences",
     "timelines": "Timelines",
-    "chats": "Chats"
+    "chats": "Chats",
+    "lists": "Lists"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
@@ -203,6 +204,7 @@
     "new_status": "Post new status",
     "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
     "account_not_locked_warning_link": "locked",
+    "media_not_sensitive_warning": "You have a Content Warning, but the attachments are not marked as sensitive!",
     "attachments_sensitive": "Mark attachments as sensitive",
     "media_description": "Media description",
     "content_type": {
@@ -347,6 +349,19 @@
     "delete_account_description": "Permanently delete your data and deactivate your account.",
     "delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
     "delete_account_instructions": "Type your password in the input below to confirm account deletion.",
+    "account_alias": "Account aliases",
+    "account_alias_table_head": "Alias",
+    "list_aliases_error": "Error fetching aliases: {error}",
+    "hide_list_aliases_error_action": "Close",
+    "remove_alias": "Remove this alias",
+    "new_alias_target": "Add a new alias (e.g. {example})",
+    "added_alias": "Alias is added.",
+    "add_alias_error": "Error adding alias: {error}",
+    "move_account": "Move account",
+    "move_account_notes": "If you want to move the account somewhere else, you must go to your target account and add an alias pointing here.",
+    "move_account_target": "Target account (e.g. {example})",
+    "moved_account": "Account is moved.",
+    "move_account_error": "Error moving account: {error}",
     "discoverable": "Allow discovery of this account in search results and other services",
     "domain_mutes": "Domains",
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
@@ -545,6 +560,7 @@
     "notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
     "notification_setting_privacy": "Privacy",
     "notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
+    "notification_setting_hide_if_cw": "Hide the contents of push notifications if under a Content Warning",
     "notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
     "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
     "enable_web_push_notifications": "Enable web push notifications",
@@ -844,6 +860,7 @@
     "domain_muted": "Unblock domain",
     "mute_domain": "Block domain",
     "bot": "Bot",
+    "note": "Private note",
     "admin_menu": {
       "moderation": "Moderation",
       "grant_admin": "Grant Admin",
@@ -946,6 +963,16 @@
     "error_sending_message": "Something went wrong when sending the message.",
     "empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
   },
+  "lists": {
+    "lists": "Lists",
+    "new": "New List",
+    "title": "List title",
+    "search": "Search users",
+    "create": "Create",
+    "save": "Save changes",
+    "delete": "Delete list",
+    "following_only": "Limit to Following"
+  },
   "file_type": {
     "audio": "Audio",
     "video": "Video",

src/main.js

@@ -6,6 +6,7 @@ import './lib/event_target_polyfill.js'
 import interfaceModule from './modules/interface.js'
 import instanceModule from './modules/instance.js'
 import statusesModule from './modules/statuses.js'
+import listsModule from './modules/lists.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
@@ -70,6 +71,7 @@ const persistedStateOptions = {
       // TODO refactor users/statuses modules, they depend on each other
       users: usersModule,
       statuses: statusesModule,
+      lists: listsModule,
       api: apiModule,
       config: configModule,
       serverSideConfig: serverSideConfigModule,

src/modules/api.js

@@ -191,12 +191,13 @@ const api = {
     startFetchingTimeline (store, {
       timeline = 'friends',
       tag = false,
-      userId = false
+      userId = false,
+      listId = false
     }) {
       if (store.state.fetchers[timeline]) return
 
       const fetcher = store.state.backendInteractor.startFetchingTimeline({
-        timeline, store, userId, tag
+        timeline, store, userId, listId, tag
       })
       store.commit('addFetcher', { fetcherName: timeline, fetcher })
     },
@@ -248,6 +249,18 @@ const api = {
       store.commit('setFollowRequests', requests)
     },
 
+    // Lists
+    startFetchingLists (store) {
+      if (store.state.fetchers['lists']) return
+      const fetcher = store.state.backendInteractor.startFetchingLists({ store })
+      store.commit('addFetcher', { fetcherName: 'lists', fetcher })
+    },
+    stopFetchingLists (store) {
+      const fetcher = store.state.fetchers.lists
+      if (!fetcher) return
+      store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
+    },
+
     // Pleroma websocket
     setWsToken (store, token) {
       store.commit('setWsToken', token)

src/modules/config.js

@@ -63,6 +63,7 @@ export const defaultState = {
     polls: true
   },
   webPushNotifications: false,
+  webPushHideIfCW: true,
   muteWords: [],
   highlight: {},
   interfaceLanguage: browserLocale,

src/modules/instance.js

@@ -54,7 +54,7 @@ const defaultState = {
   theme: 'pleroma-dark',
   virtualScrolling: true,
   sensitiveByDefault: false,
-  sensitiveIfSubject: false,
+  sensitiveIfSubject: true,
   renderMisskeyMarkdown: false,
   conversationDisplay: 'linear',
   conversationTreeAdvanced: false,

src/modules/lists.js

@@ -0,0 +1,90 @@
+import { remove, find } from 'lodash'
+
+export const defaultState = {
+  allLists: [],
+  allListsObject: {}
+}
+
+export const mutations = {
+  setLists (state, value) {
+    state.allLists = value
+  },
+  setList (state, { id, title }) {
+    if (!state.allListsObject[id]) {
+      state.allListsObject[id] = {}
+    }
+    state.allListsObject[id].title = title
+
+    if (!find(state.allLists, { id })) {
+      state.allLists.push({ id, title })
+    } else {
+      find(state.allLists, { id }).title = title
+    }
+  },
+  setListAccounts (state, { id, accountIds }) {
+    if (!state.allListsObject[id]) {
+      state.allListsObject[id] = {}
+    }
+    state.allListsObject[id].accountIds = accountIds
+  },
+  deleteList (state, { id }) {
+    delete state.allListsObject[id]
+    remove(state.allLists, list => list.id === id)
+  }
+}
+
+const actions = {
+  setLists ({ commit }, value) {
+    commit('setLists', value)
+  },
+  createList ({ rootState, commit }, { title }) {
+    return rootState.api.backendInteractor.createList({ title })
+      .then((list) => {
+        commit('setList', { id: list.id, title })
+        return list
+      })
+  },
+  fetchList ({ rootState, commit }, { id }) {
+    return rootState.api.backendInteractor.getList({ id })
+      .then((list) => commit('setList', { id: list.id, title: list.title }))
+  },
+  fetchListAccounts ({ rootState, commit }, { id }) {
+    return rootState.api.backendInteractor.getListAccounts({ id })
+      .then((accountIds) => commit('setListAccounts', { id, accountIds }))
+  },
+  setList ({ rootState, commit }, { id, title }) {
+    rootState.api.backendInteractor.updateList({ id, title })
+    commit('setList', { id, title })
+  },
+  setListAccounts ({ rootState, commit }, { id, accountIds }) {
+    commit('setListAccounts', { id, accountIds })
+    rootState.api.backendInteractor.addAccountsToList({ id, accountIds })
+    rootState.api.backendInteractor.removeAccountsFromList({
+      id,
+      accountIds: rootState.lists.allListsObject[id].accountIds.filter(id => !accountIds.includes(id))
+    })
+  },
+  deleteList ({ rootState, commit }, { id }) {
+    rootState.api.backendInteractor.deleteList({ id })
+    commit('deleteList', { id })
+  }
+}
+
+export const getters = {
+  findListTitle: state => id => {
+    if (!state.allListsObject[id]) return
+    return state.allListsObject[id].title
+  },
+  findListAccounts: state => id => {
+    return state.allListsObject[id].accountIds
+  }
+}
+
+const lists = {
+  state: defaultState,
+  mutations,
+  actions,
+  getters
+}
+
+export default lists

src/modules/statuses.js

@@ -62,7 +62,8 @@ export const defaultState = () => ({
     friends: emptyTl(),
     tag: emptyTl(),
     dms: emptyTl(),
-    bookmarks: emptyTl()
+    bookmarks: emptyTl(),
+    list: emptyTl()
   }
 })
 
@@ -746,8 +747,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/modules/users.js

@@ -102,6 +102,11 @@ const unmuteDomain = (store, domain) => {
     .then(() => store.commit('removeDomainMute', domain))
 }
 
+const setNote = (store, { id, note }) => {
+  return store.rootState.api.backendInteractor.setNote({ id, note })
+    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+}
+
 export const mutations = {
   tagUser (state, { user: { id }, tag }) {
     const user = state.usersObject[id]
@@ -366,6 +371,9 @@ const users = {
     unmuteDomains (store, domain = []) {
       return Promise.all(domain.map(domain => unmuteDomain(store, domain)))
     },
+    setNote (store, { id, note }) {
+      return setNote(store, { id, note })
+    },
     fetchFriends ({ rootState, commit }, id) {
       const user = rootState.users.usersObject[id]
       const maxId = last(user.friendIds)

src/services/api/api.service.js

@@ -9,6 +9,8 @@ const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
 const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
 const CHANGE_EMAIL_URL = '/api/pleroma/change_email'
 const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
+const MOVE_ACCOUNT_URL = '/api/pleroma/move_account'
+const ALIASES_URL = '/api/pleroma/aliases'
 const TAG_USER_URL = '/api/pleroma/admin/users/tag'
 const PERMISSION_GROUP_URL = (screenName, right) => `/api/pleroma/admin/users/${screenName}/permission_group/${right}`
 const ACTIVATE_USER_URL = '/api/pleroma/admin/users/activate'
@@ -47,9 +49,12 @@ const MASTODON_PUBLIC_TIMELINE = '/api/v1/timelines/public'
 const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
 const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
 const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
-const MASTODON_USER_URL = '/api/v1/accounts'
+const MASTODON_USER_URL = id => `/api/v1/accounts/${id}?with_relationships=true`
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
 const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
+const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
+const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
+const MASTODON_LIST_ACCOUNTS_URL = id => `/api/v1/lists/${id}/accounts`
 const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
 const MASTODON_BOOKMARK_TIMELINE_URL = '/api/v1/bookmarks'
 const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/'
@@ -60,6 +65,7 @@ const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
 const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
 const MASTODON_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe`
 const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe`
+const MASTODON_SET_NOTE_URL = id => `/api/v1/accounts/${id}/note`
 const MASTODON_BOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/bookmark`
 const MASTODON_UNBOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/unbookmark`
 const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
@@ -78,6 +84,7 @@ const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
 const MASTODON_MASCOT_URL = '/api/v1/pleroma/mascot'
 const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
+const MASTODON_LISTS_URL = '/api/v1/lists'
 const MASTODON_STREAMING = '/api/v1/streaming'
 const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
 const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
@@ -306,7 +313,7 @@ const denyUser = ({ id, credentials }) => {
 }
 
 const fetchUser = ({ id, credentials }) => {
-  let url = `${MASTODON_USER_URL}/${id}`
+  const url = MASTODON_USER_URL(id)
   return promisedRequest({ url, credentials })
     .then((data) => parseUser(data))
 }
@@ -382,6 +389,95 @@ const fetchFollowRequests = ({ credentials }) => {
     .then((data) => data.map(parseUser))
 }
 
+const fetchLists = ({ credentials }) => {
+  const url = MASTODON_LISTS_URL
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
+}
+
+const createList = ({ title, credentials }) => {
+  const url = MASTODON_LISTS_URL
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify({ title })
+  }).then((data) => data.json())
+}
+
+const getList = ({ id, credentials }) => {
+  const url = MASTODON_LIST_URL(id)
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
+}
+
+const updateList = ({ id, title, credentials }) => {
+  const url = MASTODON_LIST_URL(id)
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    method: 'PUT',
+    headers: headers,
+    body: JSON.stringify({ title })
+  })
+}
+
+const getListAccounts = ({ id, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
+    .then((data) => data.map(({ id }) => id))
+}
+
+const addAccountsToList = ({ id, accountIds, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify({ account_ids: accountIds })
+  })
+}
+
+const removeAccountsFromList = ({ id, accountIds, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    method: 'DELETE',
+    headers: headers,
+    body: JSON.stringify({ account_ids: accountIds })
+  })
+}
+
+const deleteList = ({ id, credentials }) => {
+  const url = MASTODON_LIST_URL(id)
+  return fetch(url, {
+    method: 'DELETE',
+    headers: authHeaders(credentials)
+  })
+}
+
+const errorStatusMapper = (response) => {
+  console.log(response)
+  switch (response.status) {
+    case 429:
+      return 'You are rate limited'
+    case 500:
+      return 'Internal Server Error'
+    case 503:
+      return 'The backend is not available'
+    default:
+      return `Unexpected status: ${response.status}`
+  }
+}
+
 const fetchConversation = ({ id, credentials }) => {
   let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
   return fetch(urlContext, { headers: authHeaders(credentials) })
@@ -389,7 +485,7 @@ const fetchConversation = ({ id, credentials }) => {
       if (data.ok) {
         return data
       }
-      throw new Error('Error fetching timeline', data)
+      throw new Error('Error fetching timeline', errorStatusMapper(data))
     })
     .then((data) => data.json())
     .then(({ ancestors, descendants }) => ({
@@ -405,7 +501,7 @@ const fetchStatus = ({ id, credentials }) => {
       if (data.ok) {
         return data
       }
-      throw new Error('Error fetching timeline', data)
+      throw new Error('Error fetching timeline', errorStatusMapper(data))
     })
     .then((data) => data.json())
     .then((data) => parseStatus(data))
@@ -503,6 +599,7 @@ const fetchTimeline = ({
   since = false,
   until = false,
   userId = false,
+  listId = false,
   tag = false,
   withMuted = false,
   replyVisibility = 'all'
@@ -515,6 +612,7 @@ const fetchTimeline = ({
     'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
     user: MASTODON_USER_TIMELINE_URL,
     media: MASTODON_USER_TIMELINE_URL,
+    list: MASTODON_LIST_TIMELINE_URL,
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
     tag: MASTODON_TAG_TIMELINE_URL,
     bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
@@ -528,6 +626,10 @@ const fetchTimeline = ({
     url = url(userId)
   }
 
+  if (timeline === 'list') {
+    url = url(listId)
+  }
+
   if (since) {
     params.push(['since_id', since])
   }
@@ -571,8 +673,15 @@ const fetchTimeline = ({
       })
       return data
     })
-    .then((data) => data.json())
     .then((data) => {
+      if (data.ok) return data.json()
+
+      throw new Error(errorStatusMapper(data))
+    })
+    .then((data) => {
+      if (data.error) {
+        throw new Error(data.error)
+      }
       if (!data.errors) {
         return { data: data.map(isNotifications ? parseNotification : parseStatus), pagination }
       } else {
@@ -790,6 +899,49 @@ const changeEmail = ({ credentials, email, password }) => {
     .then((response) => response.json())
 }
 
+const moveAccount = ({ credentials, password, targetAccount }) => {
+  const form = new FormData()
+
+  form.append('password', password)
+  form.append('target_account', targetAccount)
+
+  return fetch(MOVE_ACCOUNT_URL, {
+    body: form,
+    method: 'POST',
+    headers: authHeaders(credentials)
+  })
+    .then((response) => response.json())
+}
+
+const addAlias = ({ credentials, alias }) => {
+  return promisedRequest({
+    url: ALIASES_URL,
+    method: 'PUT',
+    credentials,
+    payload: { alias }
+  })
+}
+
+const deleteAlias = ({ credentials, alias }) => {
+  return promisedRequest({
+    url: ALIASES_URL,
+    method: 'DELETE',
+    credentials,
+    payload: { alias }
+  })
+}
+
+const listAliases = ({ credentials }) => {
+  return promisedRequest({
+    url: ALIASES_URL,
+    method: 'GET',
+    credentials,
+    params: {
+      _cacheBooster: (new Date()).getTime()
+    }
+  })
+}
+
 const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => {
   const form = new FormData()
 
@@ -863,6 +1015,18 @@ const unmuteUser = ({ id, credentials }) => {
   return promisedRequest({ url: MASTODON_UNMUTE_USER_URL(id), credentials, method: 'POST' })
 }
 
+const setNote = ({ id, note, credentials }) => {
+  const form = new FormData()
+
+  form.append('comment', note)
+
+  return fetch(MASTODON_SET_NOTE_URL(id), {
+    body: form,
+    headers: authHeaders(credentials),
+    method: 'POST'
+  }).then((data) => data.json())
+}
+
 const fetchMascot = ({ credentials }) => {
   return promisedRequest({ url: MASTODON_MASCOT_URL, credentials })
 }
@@ -1024,7 +1188,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
   let params = []
 
@@ -1048,6 +1212,10 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
     params.push(['following', true])
   }
 
+  if (type) {
+    params.push(['type', type])
+  }
+
   params.push(['with_relationships', true])
 
   let queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
@@ -1320,6 +1488,7 @@ const apiService = {
   fetchMutes,
   muteUser,
   unmuteUser,
+  setNote,
   subscribeUser,
   unsubscribeUser,
   fetchBlocks,
@@ -1341,6 +1510,10 @@ const apiService = {
   importFollows,
   deleteAccount,
   changeEmail,
+  moveAccount,
+  addAlias,
+  deleteAlias,
+  listAliases,
   changePassword,
   settingsMFA,
   mfaDisableOTP,
@@ -1348,6 +1521,14 @@ const apiService = {
   mfaSetupOTP,
   mfaConfirmOTP,
   fetchFollowRequests,
+  fetchLists,
+  createList,
+  getList,
+  updateList,
+  getListAccounts,
+  addAccountsToList,
+  removeAccountsFromList,
+  deleteList,
   approveUser,
   denyUser,
   suggestions,

src/services/backend_interactor_service/backend_interactor_service.js

@@ -2,10 +2,11 @@ import apiService, { getMastodonSocketURI, ProcessedWS } from '../api/api.servic
 import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
+import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
 
 const backendInteractorService = credentials => ({
-  startFetchingTimeline ({ timeline, store, userId = false, tag }) {
+  startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
-    return timelineFetcher.startFetching({ timeline, store, credentials, userId, tag })
+    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
   },
 
   fetchTimeline (args) {
@@ -24,6 +25,10 @@ const backendInteractorService = credentials => ({
     return followRequestFetcher.startFetching({ store, credentials })
   },
 
+  startFetchingLists ({ store }) {
+    return listsFetcher.startFetching({ store, credentials })
+  },
+
   startUserSocket ({ store }) {
     const serv = store.rootState.instance.server.replace('http', 'ws')
     const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })

src/services/desktop_notification_utils/desktop_notification_utils.js

@@ -2,8 +2,5 @@ export const showDesktopNotification = (rootState, desktopNotificationOpts) => {
   if (!('Notification' in window && window.Notification.permission === 'granted')) return
   if (rootState.statuses.notifications.desktopNotificationSilence) { return }
 
-  const desktopNotification = new window.Notification(desktopNotificationOpts.title, desktopNotificationOpts)
+  return new window.Notification(desktopNotificationOpts.title, desktopNotificationOpts)
-  // Chrome is known for not closing notifications automatically
-  // according to MDN, anyway.
-  setTimeout(desktopNotification.close.bind(desktopNotification), 5000)
 }

src/services/lists_fetcher/lists_fetcher.service.js

@@ -0,0 +1,22 @@
+import apiService from '../api/api.service.js'
+import { promiseInterval } from '../promise_interval/promise_interval.js'
+
+const fetchAndUpdate = ({ store, credentials }) => {
+  return apiService.fetchLists({ credentials })
+    .then(lists => {
+      store.commit('setLists', lists)
+    }, () => {})
+    .catch(() => {})
+}
+
+const startFetching = ({ credentials, store }) => {
+  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
+  boundFetchAndUpdate()
+  return promiseInterval(boundFetchAndUpdate, 240000)
+}
+
+const listsFetcher = {
+  startFetching
+}
+
+export default listsFetcher

src/services/notification_utils/notification_utils.js

@@ -58,7 +58,7 @@ export const maybeShowNotification = (store, notification) => {
   if (!visibleTypes(store).includes(notification.type)) return
   if (notification.type === 'mention' && isMutedNotification(store, notification)) return
 
-  const notificationObject = prepareNotificationObject(notification, store.rootGetters.i18n)
+  const notificationObject = prepareNotificationObject(notification, store.rootGetters.i18n, store)
   showDesktopNotification(rootState, notificationObject)
 }
 
@@ -74,7 +74,7 @@ export const filteredNotificationsFromStore = (store, types) => {
 export const unseenNotificationsFromStore = store =>
   filter(filteredNotificationsFromStore(store), ({ seen }) => !seen)
 
-export const prepareNotificationObject = (notification, i18n) => {
+export const prepareNotificationObject = (notification, i18n, store) => {
   const notifObj = {
     tag: notification.id
   }
@@ -109,8 +109,16 @@ export const prepareNotificationObject = (notification, i18n) => {
   } else if (i18nString) {
     notifObj.body = i18n.t('notifications.' + i18nString)
   } else if (isStatusNotification(notification.type)) {
+    if (notification.status.summary) {
+      if (store.getters.mergedConfig.webPushHideIfCW) {
+        notifObj.body = notification.status.summary
+      } else {
+        notifObj.body = `${notification.status.summary}:\n${notification.status.text}`
+      }
+    } else {
       notifObj.body = notification.status.text
     }
+  }
 
   // Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
   if (status && status.attachments && status.attachments.length > 0 && !status.nsfw &&

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -3,12 +3,13 @@ import { camelCase } from 'lodash'
 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 
-const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => {
+const update = ({ store, statuses, timeline, showImmediately, userId, listId, pagination }) => {
   const ccTimeline = camelCase(timeline)
 
   store.dispatch('addNewStatuses', {
     timeline: ccTimeline,
     userId,
+    listId,
     statuses,
     showImmediately,
     pagination
@@ -22,6 +23,7 @@ const fetchAndUpdate = ({
   older = false,
   showImmediately = false,
   userId = false,
+  listId = false,
   tag = false,
   until,
   since
@@ -44,6 +46,7 @@ const fetchAndUpdate = ({
   }
 
   args['userId'] = userId
+  args['listId'] = listId
   args['tag'] = tag
   args['withMuted'] = !hideMutedPosts
   if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
@@ -62,7 +65,7 @@ const fetchAndUpdate = ({
       if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
         store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
       }
-      update({ store, statuses, timeline, showImmediately, userId, pagination })
+      update({ store, statuses, timeline, showImmediately, userId, listId, pagination })
       return { statuses, pagination }
     })
     .catch((error) => {
@@ -75,14 +78,15 @@ const fetchAndUpdate = ({
     })
 }
 
-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => {
+const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const showImmediately = timelineData.visibleStatuses.length === 0
   timelineData.userId = userId
-  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
+  timelineData.listId = listId
+  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
   const boundFetchAndUpdate = () =>
-    fetchAndUpdate({ timeline, credentials, store, userId, tag })
+    fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
   return promiseInterval(boundFetchAndUpdate, 20000)
 }
 const timelineFetcher = {

src/services/version/version.service.js

@@ -1,6 +1,17 @@
 
 export const extractCommit = versionString => {
-  const regex = /-g(\w+)/i
+  // X.Y.Z-1337-gdeadbeef => deadbeef
-  const matches = versionString.match(regex)
+  const commit = versionString.match(/-g(\w+)/i)
-  return matches ? matches[1] : ''
+  if (commit) {
+    return commit[1]
+  }
+
+  // X.Y.Z-develop => develop
+  const branch = versionString.match(/-([\w-/]+)$/i)
+  if (branch) {
+    return branch[1]
+  }
+
+  // X.Y.Z => vX.Y.Z
+  return 'v' + versionString
 }

static/terms-of-service.html

@@ -1,45 +1,3 @@
 <h4>Terms of Service</h4>
 
-<p>It's mainly "be nice"</p>
+<p>This is a placeholder, overwrite this by putting a file at <pre>instance/static/terms_of_service.html</pre><p>
-
-<ol>
-    <li>
-        <h3>Don't be a big meanie</h4>
-        <p>Arguments are cool and all but don't make them into flamewars. Try to act in good faith - we want to be at least on good terms with people. Please act with understanding towards others on this instance. Most people here are probably struggling with a lot, be mindful of that.</p>
-    </li>
-    <li>
-        <h3>Mark your lewds!</h3>
-	<p>Reminder that lewd is bad and nobody wants to be forced to see that. Just mark it sensitive, and post unlisted. That is to say, anything suggestive/ecchi upwards should be marked. If you wouldn't look at it with your parents/boss in the room, mark it. It goes without saying that if you're <em>going</em> to post lewd stuff, keep it sensible. Obviously nothing underaged or otherwise questionable. Or you could just not post lewd stuff. Either/or.</p>
-    </li>
-    <li>
-	    <h3>This is a <b>Kink Shame Zone</b></h3>
-	    <p>Being a lewdie will be met with many anime girl reaction images shaming you for your lewdness. Go think about icky things on someone else's webzone™</p>
-    </li>
-    <li>
-	   <h3>Keep it legal!</h3>
-	   <p>Server is hosted in france, keep content legal for there (+ wherever you're browsing from)</p>
-    </li>
-    <li>
-	    <h3>No ads/spambots</h3>
-	    <p>I didn't think I'd have to specify this, but please do not set up bots solely for trying to advertise.</h3>
-    </li>
-    <li>
-	    <h3>Non-TOS recommendations</h3>
-	    <p>This is stuff that'd I'd <em>like</em> you to do, but I won't outright ban you if you don't follow them</p>
-	    <ul>
-		    <li>If someone is sadposting, don't antagonise them - they probably just want to vent</li>
-		    <li>Put walls of text behind a subject (CW) - helps the timeline not get flooded with text</li>
-	    </ul>
-    </li>
-
-    <li>
-	    <h3>Other</h3>
-	    <p>If you're here and you happen to play minecraft, feel free to message me with your username and come play with us sometime!</p>
-   </li>
-
-</ol>
-
-<p>So I guess yeah, that's about it. Try to be nice, eh? We're probably all sad here.</p>
-
-<br>
-<img src="/static/logo.svg" style="display: block; margin: auto; max-width: 100%; height: 50px; object-fit: contain;" />

test/unit/specs/boot/routes.spec.js

@@ -37,4 +37,28 @@ describe('routes', () => {
 
     expect(matchedComponents[0].components.default.components.hasOwnProperty('UserCard')).to.eql(true)
   })
+
+  it('list view', async () => {
+    await router.push('/lists')
+
+    const matchedComponents = router.currentRoute.value.matched
+
+    expect(matchedComponents[0].components.default.components.hasOwnProperty('ListCard')).to.eql(true)
+  })
+
+  it('list timeline', async () => {
+    await router.push('/lists/1')
+
+    const matchedComponents = router.currentRoute.value.matched
+
+    expect(matchedComponents[0].components.default.components.hasOwnProperty('Timeline')).to.eql(true)
+  })
+
+  it('list edit', async () => {
+    await router.push('/lists/1/edit')
+
+    const matchedComponents = router.currentRoute.value.matched
+
+    expect(matchedComponents[0].components.default.components.hasOwnProperty('BasicUserCard')).to.eql(true)
+  })
 })

test/unit/specs/components/rich_content.spec.js

@@ -44,12 +44,12 @@ describe('RichContent', () => {
     const html = [
       p('Testing 'em all'),
       'Testing 'em all',
-      '<a href="http://example.com?a=1&amp;b=2">http://example.com?a=1&b=2</a>'
+      '<a href="http://example.com?a=1">http://example.com?a=1</a>'
     ].join('')
     const expected = [
       p('Testing \'em all'),
       'Testing \'em all',
-      '<a href="http://example.com?a=1&b=2">http://example.com?a=1&b=2</a>'
+      '<a href="http://example.com?a=1" target="_blank">http://example.com?a=1</a>'
     ].join('')
     const wrapper = shallowMount(RichContent, {
       global,

test/unit/specs/modules/lists.spec.js

@@ -0,0 +1,83 @@
+import { cloneDeep } from 'lodash'
+import { defaultState, mutations, getters } from '../../../../src/modules/lists.js'
+
+describe('The lists module', () => {
+  describe('mutations', () => {
+    it('updates array of all lists', () => {
+      const state = cloneDeep(defaultState)
+      const list = { id: '1', title: 'testList' }
+
+      mutations.setLists(state, [list])
+      expect(state.allLists).to.have.length(1)
+      expect(state.allLists).to.eql([list])
+    })
+
+    it('adds a new list with a title, updating the title for existing lists', () => {
+      const state = cloneDeep(defaultState)
+      const list = { id: '1', title: 'testList' }
+      const modList = { id: '1', title: 'anotherTestTitle' }
+
+      mutations.setList(state, list)
+      expect(state.allListsObject[list.id]).to.eql({ title: list.title })
+      expect(state.allLists).to.have.length(1)
+      expect(state.allLists[0]).to.eql(list)
+
+      mutations.setList(state, modList)
+      expect(state.allListsObject[modList.id]).to.eql({ title: modList.title })
+      expect(state.allLists).to.have.length(1)
+      expect(state.allLists[0]).to.eql(modList)
+    })
+
+    it('adds a new list with an array of IDs, updating the IDs for existing lists', () => {
+      const state = cloneDeep(defaultState)
+      const list = { id: '1', accountIds: ['1', '2', '3'] }
+      const modList = { id: '1', accountIds: ['3', '4', '5'] }
+
+      mutations.setListAccounts(state, list)
+      expect(state.allListsObject[list.id]).to.eql({ accountIds: list.accountIds })
+
+      mutations.setListAccounts(state, modList)
+      expect(state.allListsObject[modList.id]).to.eql({ accountIds: modList.accountIds })
+    })
+
+    it('deletes a list', () => {
+      const state = {
+        allLists: [{ id: '1', title: 'testList' }],
+        allListsObject: {
+          1: { title: 'testList', accountIds: ['1', '2', '3'] }
+        }
+      }
+      const id = '1'
+
+      mutations.deleteList(state, { id })
+      expect(state.allLists).to.have.length(0)
+      expect(state.allListsObject).to.eql({})
+    })
+  })
+
+  describe('getters', () => {
+    it('returns list title', () => {
+      const state = {
+        allLists: [{ id: '1', title: 'testList' }],
+        allListsObject: {
+          1: { title: 'testList', accountIds: ['1', '2', '3'] }
+        }
+      }
+      const id = '1'
+
+      expect(getters.findListTitle(state)(id)).to.eql('testList')
+    })
+
+    it('returns list accounts', () => {
+      const state = {
+        allLists: [{ id: '1', title: 'testList' }],
+        allListsObject: {
+          1: { title: 'testList', accountIds: ['1', '2', '3'] }
+        }
+      }
+      const id = '1'
+
+      expect(getters.findListAccounts(state)(id)).to.eql(['1', '2', '3'])
+    })
+  })
+})

test/unit/specs/services/version/version.service.spec.js

@@ -8,4 +8,12 @@ describe('extractCommit', () => {
   it('return short commit hash without branch name', () => {
     expect(extractCommit('1.0.0-45-g5e7aeebc-branch')).to.eql('5e7aeebc')
   })
+
+  it('return branch name', () => {
+    expect(extractCommit('1.0.0-branch')).to.eql('branch')
+  })
+
+  it('return version tag', () => {
+    expect(extractCommit('1.0.0')).to.eql('v1.0.0')
+  })
 })