From d5d464a28992a634f380f6a50a1a04c88f0a4dfe Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Wed, 15 Jun 2022 17:12:05 +0300
Subject: [PATCH 01/17] Add list timeline rendering functionality

the list name is missing; this is because the API request to get it is different
to the API request for receiving the list timeline, and is not yet implemented.
---
 src/boot/routes.js                            |  4 +++-
 src/components/list_timeline/list_timeline.js | 23 +++++++++++++++++++
 .../list_timeline/list_timeline.vue           | 10 ++++++++
 src/components/timeline/timeline.js           |  3 +++
 src/modules/api.js                            |  5 ++--
 src/modules/statuses.js                       |  3 ++-
 src/services/api/api.service.js               |  7 ++++++
 .../backend_interactor_service.js             |  4 ++--
 .../timeline_fetcher.service.js               | 14 +++++++----
 9 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 src/components/list_timeline/list_timeline.js
 create mode 100644 src/components/list_timeline/list_timeline.vue

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 726476a8..6eab04a4 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -20,6 +20,7 @@ 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 ListTimeline from 'components/list_timeline/list_timeline.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -69,7 +70,8 @@ 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: 'list-timeline', path: '/lists/:id', component: ListTimeline }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {
diff --git a/src/components/list_timeline/list_timeline.js b/src/components/list_timeline/list_timeline.js
new file mode 100644
index 00000000..044dbd35
--- /dev/null
+++ b/src/components/list_timeline/list_timeline.js
@@ -0,0 +1,23 @@
+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('startFetchingTimeline', { timeline: 'list', listId: this.listId })
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'list')
+  }
+}
+
+export default ListTimeline
diff --git a/src/components/list_timeline/list_timeline.vue b/src/components/list_timeline/list_timeline.vue
new file mode 100644
index 00000000..a368f861
--- /dev/null
+++ b/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>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index c575e876..5b6c5089 100644
--- a/src/components/timeline/timeline.js
+++ b/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) {
diff --git a/src/modules/api.js b/src/modules/api.js
index 54f94356..95ed99d2 100644
--- a/src/modules/api.js
+++ b/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 })
     },
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index a13930e9..ea48f2d6 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -62,7 +62,8 @@ export const defaultState = () => ({
     friends: emptyTl(),
     tag: emptyTl(),
     dms: emptyTl(),
-    bookmarks: emptyTl()
+    bookmarks: emptyTl(),
+    list: emptyTl()
   }
 })
 
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index e7a64337..b51ec6be 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -50,6 +50,7 @@ const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
 const MASTODON_USER_URL = '/api/v1/accounts'
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
 const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
+const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
 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/'
@@ -503,6 +504,7 @@ const fetchTimeline = ({
   since = false,
   until = false,
   userId = false,
+  listId = false,
   tag = false,
   withMuted = false,
   replyVisibility = 'all'
@@ -515,6 +517,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 +531,10 @@ const fetchTimeline = ({
     url = url(userId)
   }
 
+  if (timeline === 'list') {
+    url = url(listId)
+  }
+
   if (since) {
     params.push(['since_id', since])
   }
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 4a40f5b5..71740ba4 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -4,8 +4,8 @@ import notificationsFetcher from '../notifications_fetcher/notifications_fetcher
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
 
 const backendInteractorService = credentials => ({
-  startFetchingTimeline ({ timeline, store, userId = false, tag }) {
-    return timelineFetcher.startFetching({ timeline, store, credentials, userId, tag })
+  startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
+    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
   },
 
   fetchTimeline (args) {
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 3ada329b..49d7cdc8 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/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 = {

From e18e179a59c70260478106fba0694c3a4fc1d918 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Wed, 15 Jun 2022 18:34:11 +0300
Subject: [PATCH 02/17] Fetch list of lists from the API

---
 src/modules/api.js                            | 18 ++++++++++++++-
 src/services/api/api.service.js               |  8 +++++++
 .../backend_interactor_service.js             |  5 +++++
 .../lists_fetcher/lists_fetcher.service.js    | 22 +++++++++++++++++++
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/services/lists_fetcher/lists_fetcher.service.js

diff --git a/src/modules/api.js b/src/modules/api.js
index 95ed99d2..d9ae21f8 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -13,7 +13,8 @@ const api = {
     socket: null,
     mastoUserSocket: null,
     mastoUserSocketStatus: null,
-    followRequests: []
+    followRequests: [],
+    lists: []
   },
   mutations: {
     setBackendInteractor (state, backendInteractor) {
@@ -35,6 +36,9 @@ const api = {
     setFollowRequests (state, value) {
       state.followRequests = value
     },
+    setLists (state, value) {
+      state.lists = value
+    },
     setMastoUserSocketStatus (state, value) {
       state.mastoUserSocketStatus = value
     },
@@ -249,6 +253,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)
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index b51ec6be..7c7e657d 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -79,6 +79,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`
@@ -383,6 +384,12 @@ 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 fetchConversation = ({ id, credentials }) => {
   let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
   return fetch(urlContext, { headers: authHeaders(credentials) })
@@ -1355,6 +1362,7 @@ const apiService = {
   mfaSetupOTP,
   mfaConfirmOTP,
   fetchFollowRequests,
+  fetchLists,
   approveUser,
   denyUser,
   suggestions,
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 71740ba4..62ee8549 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -2,6 +2,7 @@ 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, listId = false, tag }) {
@@ -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' })
diff --git a/src/services/lists_fetcher/lists_fetcher.service.js b/src/services/lists_fetcher/lists_fetcher.service.js
new file mode 100644
index 00000000..8d9dae66
--- /dev/null
+++ b/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

From 6e8c7460a2dca37eb2264c3b3788d1baf6517108 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Wed, 15 Jun 2022 19:13:33 +0300
Subject: [PATCH 03/17] Add lists listing page

---
 src/boot/routes.js                     |  2 ++
 src/components/list_card/list_card.js  | 12 ++++++++++++
 src/components/list_card/list_card.vue |  9 +++++++++
 src/components/lists/lists.js          | 17 +++++++++++++++++
 src/components/lists/lists.vue         | 18 ++++++++++++++++++
 src/i18n/en.json                       |  3 +++
 6 files changed, 61 insertions(+)
 create mode 100644 src/components/list_card/list_card.js
 create mode 100644 src/components/list_card/list_card.vue
 create mode 100644 src/components/lists/lists.js
 create mode 100644 src/components/lists/lists.vue

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 6eab04a4..715b394e 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -20,6 +20,7 @@ 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'
 
 export default (store) => {
@@ -71,6 +72,7 @@ export default (store) => {
     { 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: 'lists', path: '/lists', component: Lists },
     { name: 'list-timeline', path: '/lists/:id', component: ListTimeline }
   ]
 
diff --git a/src/components/list_card/list_card.js b/src/components/list_card/list_card.js
new file mode 100644
index 00000000..42e56aff
--- /dev/null
+++ b/src/components/list_card/list_card.js
@@ -0,0 +1,12 @@
+const ListCard = {
+  props: [
+    'list'
+  ],
+  methods: {
+    listLink (id) {
+      return '/lists/' + id
+    }
+  }
+}
+
+export default ListCard
diff --git a/src/components/list_card/list_card.vue b/src/components/list_card/list_card.vue
new file mode 100644
index 00000000..7d6363ba
--- /dev/null
+++ b/src/components/list_card/list_card.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <router-link :to="listLink(list.id)">
+      {{ list.title }}
+    </router-link>
+  </div>
+</template>
+
+<script src="./list_card.js"></script>
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
new file mode 100644
index 00000000..bb67fafb
--- /dev/null
+++ b/src/components/lists/lists.js
@@ -0,0 +1,17 @@
+import ListCard from '../list_card/list_card.vue'
+
+const Lists = {
+  components: {
+    ListCard
+  },
+  created () {
+    this.$store.dispatch('startFetchingLists')
+  },
+  computed: {
+    lists () {
+      return this.$store.state.api.lists
+    }
+  }
+}
+
+export default Lists
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
new file mode 100644
index 00000000..da0f126f
--- /dev/null
+++ b/src/components/lists/lists.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="settings panel panel-default">
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t('lists.lists') }}
+      </div>
+    </div>
+    <div class="panel-body">
+      <ListCard
+        v-for="list in lists.slice().reverse()"
+        :key="list"
+        :list="list"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./lists.js"></script>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ec2882c5..65198863 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -946,6 +946,9 @@
     "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"
+  },
   "file_type": {
     "audio": "Audio",
     "video": "Video",

From d2c82a04d9814a040737f839cfdf0038f7a80b60 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Tue, 14 Jun 2022 23:53:51 +0300
Subject: [PATCH 04/17] Add buttons to menus

---
 src/components/nav_panel/nav_panel.js      |  6 ++++--
 src/components/nav_panel/nav_panel.vue     | 12 ++++++++++++
 src/components/side_drawer/side_drawer.js  |  6 ++++--
 src/components/side_drawer/side_drawer.vue | 12 ++++++++++++
 src/i18n/en.json                           |  3 ++-
 5 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 37bcb409..f52fc677 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/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 = {
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 7ae7b1d6..c139549d 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/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"
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index bad1806b..78b7045b 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/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 = {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index dd88de7d..4696b488 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/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"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 65198863..a80e0077 100644
--- a/src/i18n/en.json
+++ b/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…",

From 3d18dd7e47b83631e9ea1c7c75b3c451fd4faed8 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Wed, 15 Jun 2022 20:32:46 +0300
Subject: [PATCH 05/17] Make the list list page look good

---
 src/components/list_card/list_card.vue | 34 ++++++++++++++++++++++----
 src/components/lists/lists.vue         |  1 +
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/list_card/list_card.vue b/src/components/list_card/list_card.vue
index 7d6363ba..5b4fefc8 100644
--- a/src/components/list_card/list_card.vue
+++ b/src/components/list_card/list_card.vue
@@ -1,9 +1,33 @@
 <template>
-  <div>
-    <router-link :to="listLink(list.id)">
-      {{ list.title }}
-    </router-link>
-  </div>
+  <router-link
+    :to="listLink(list.id)"
+    class="list-card"
+  >
+    {{ list.title }}
+  </router-link>
 </template>
 
 <script src="./list_card.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list-card {
+  margin: 0;
+  padding: 1em;
+  display: flex;
+  flex: 1 0;
+  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);
+  }
+}
+</style>
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
index da0f126f..20dd46d8 100644
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@@ -10,6 +10,7 @@
         v-for="list in lists.slice().reverse()"
         :key="list"
         :list="list"
+        class="list-item"
       />
     </div>
   </div>

From bacb6c8fb38310a44e583e87b621cec4b61a7a79 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 01:52:24 +0300
Subject: [PATCH 06/17] Add list creation functionality

---
 src/components/list_new/list_new.js  |  97 ++++++++++++++++++++++++++
 src/components/list_new/list_new.vue | 100 +++++++++++++++++++++++++++
 src/components/lists/lists.js        |  17 ++++-
 src/components/lists/lists.vue       |  14 +++-
 src/i18n/en.json                     |   6 +-
 src/services/api/api.service.js      |  27 ++++++++
 6 files changed, 258 insertions(+), 3 deletions(-)
 create mode 100644 src/components/list_new/list_new.js
 create mode 100644 src/components/list_new/list_new.vue

diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js
new file mode 100644
index 00000000..7ac7e0f0
--- /dev/null
+++ b/src/components/list_new/list_new.js
@@ -0,0 +1,97 @@
+import { mapState, mapGetters } from 'vuex'
+import BasicUserCard from '../basic_user_card/basic_user_card.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
+  },
+  data () {
+    return {
+      title: '',
+      suggestions: [],
+      userIds: [],
+      selectedUserIds: [],
+      loading: false,
+      query: ''
+    }
+  },
+  computed: {
+    users () {
+      return this.userIds.map(userId => this.findUser(userId))
+    },
+    availableUsers () {
+      if (this.query.length !== 0) {
+        return this.users
+      } else {
+        return this.suggestions
+      }
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      backendInteractor: state => state.api.backendInteractor
+    }),
+    ...mapGetters(['findUser'])
+  },
+  methods: {
+    goBack () {
+      this.$emit('cancel')
+    },
+    onInput () {
+      this.search(this.query)
+    },
+    selectUser (user, event) {
+      if (this.selectedUserIds.includes(user.id)) {
+        this.removeUser(user.id)
+        event.target.classList.remove('selected')
+      } else {
+        this.addUser(user)
+        event.target.classList.add('selected')
+      }
+    },
+    addUser (user) {
+      this.selectedUserIds.push(user.id)
+    },
+    removeUser (userId) {
+      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    },
+    search (query) {
+      if (!query) {
+        this.loading = false
+        return
+      }
+
+      this.loading = true
+      this.userIds = []
+      this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: true })
+        .then(data => {
+          this.loading = false
+          this.userIds = data.accounts.map(a => a.id)
+        })
+    },
+    createList () {
+      // the API has two different endpoints for "creating a list with a name"
+      // and "updating the accounts on the list".
+      this.$store.state.api.backendInteractor.createList({ title: this.title })
+        .then((data) => {
+          this.$store.state.api.backendInteractor.addAccountsToList({
+            id: data.id, accountIds: this.selectedUserIds
+          })
+          this.$router.push({ name: 'list-timeline', params: { id: data.id } })
+        })
+    }
+  }
+}
+
+export default ListNew
diff --git a/src/components/list_new/list_new.vue b/src/components/list_new/list_new.vue
new file mode 100644
index 00000000..952f7732
--- /dev/null
+++ b/src/components/list_new/list_new.vue
@@ -0,0 +1,100 @@
+<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="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="member-list">
+      <div
+        v-for="user in availableUsers"
+        :key="user.id"
+        class="member"
+      >
+        <div @click.capture.prevent="selectUser(user, $event)">
+          <BasicUserCard :user="user" />
+        </div>
+      </div>
+    </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 {
+  .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>
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
index bb67fafb..f511f0f5 100644
--- a/src/components/lists/lists.js
+++ b/src/components/lists/lists.js
@@ -1,8 +1,15 @@
 import ListCard from '../list_card/list_card.vue'
+import ListNew from '../list_new/list_new.vue'
 
 const Lists = {
+  data () {
+    return {
+      isNew: false
+    }
+  },
   components: {
-    ListCard
+    ListCard,
+    ListNew
   },
   created () {
     this.$store.dispatch('startFetchingLists')
@@ -11,6 +18,14 @@ const Lists = {
     lists () {
       return this.$store.state.api.lists
     }
+  },
+  methods: {
+    cancelNewList () {
+      this.isNew = false
+    },
+    newList () {
+      this.isNew = true
+    }
   }
 }
 
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
index 20dd46d8..f11a2a02 100644
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@@ -1,9 +1,21 @@
 <template>
-  <div class="settings panel panel-default">
+  <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
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a80e0077..e113400f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -948,7 +948,11 @@
     "empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
   },
   "lists": {
-    "lists": "Lists"
+    "lists": "Lists",
+    "new": "New List",
+    "title": "List title",
+    "search": "Search users",
+    "create": "Create"
   },
   "file_type": {
     "audio": "Audio",
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7c7e657d..ff6c00d5 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -51,6 +51,7 @@ const MASTODON_USER_URL = '/api/v1/accounts'
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
 const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
 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/'
@@ -390,6 +391,30 @@ const fetchLists = ({ 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 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 fetchConversation = ({ id, credentials }) => {
   let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
   return fetch(urlContext, { headers: authHeaders(credentials) })
@@ -1363,6 +1388,8 @@ const apiService = {
   mfaConfirmOTP,
   fetchFollowRequests,
   fetchLists,
+  createList,
+  addAccountsToList,
   approveUser,
   denyUser,
   suggestions,

From cf33b3295f9465dfe41719fbb5ca26ce11f2fe25 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 05:41:43 +0300
Subject: [PATCH 07/17] Add ability to edit and delete lists

---
 src/boot/routes.js                     |   4 +-
 src/components/list_card/list_card.js  |   9 +++
 src/components/list_card/list_card.vue |  34 ++++++--
 src/components/list_edit/list_edit.js  | 106 +++++++++++++++++++++++++
 src/components/list_edit/list_edit.vue | 106 +++++++++++++++++++++++++
 src/i18n/en.json                       |   4 +-
 src/services/api/api.service.js        |  38 +++++++++
 7 files changed, 291 insertions(+), 10 deletions(-)
 create mode 100644 src/components/list_edit/list_edit.js
 create mode 100644 src/components/list_edit/list_edit.vue

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 715b394e..1ab8209d 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -22,6 +22,7 @@ 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) => {
@@ -73,7 +74,8 @@ export default (store) => {
     { name: 'about', path: '/about', component: About },
     { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
     { name: 'lists', path: '/lists', component: Lists },
-    { name: 'list-timeline', path: '/lists/:id', component: ListTimeline }
+    { name: 'list-timeline', path: '/lists/:id', component: ListTimeline },
+    { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {
diff --git a/src/components/list_card/list_card.js b/src/components/list_card/list_card.js
index 42e56aff..6546796c 100644
--- a/src/components/list_card/list_card.js
+++ b/src/components/list_card/list_card.js
@@ -1,3 +1,12 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
 const ListCard = {
   props: [
     'list'
diff --git a/src/components/list_card/list_card.vue b/src/components/list_card/list_card.vue
index 5b4fefc8..752a7eb5 100644
--- a/src/components/list_card/list_card.vue
+++ b/src/components/list_card/list_card.vue
@@ -1,10 +1,21 @@
 <template>
-  <router-link
-    :to="listLink(list.id)"
-    class="list-card"
-  >
-    {{ list.title }}
-  </router-link>
+  <div class="list-card">
+    <router-link
+      :to="listLink(list.id)"
+      class="list-name"
+    >
+      {{ list.title }}
+    </router-link>
+    <router-link
+      :to="listLink(list.id) + '/edit'"
+      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>
@@ -13,10 +24,13 @@
 @import '../../_variables.scss';
 
 .list-card {
+  display: flex;
+}
+
+.list-name,
+.button-list-edit {
   margin: 0;
   padding: 1em;
-  display: flex;
-  flex: 1 0;
   color: $fallback--link;
   color: var(--link, $fallback--link);
 
@@ -30,4 +44,8 @@
     --lightText: var(--selectedMenuLightText, $fallback--lightText);
   }
 }
+
+.list-name {
+  flex-grow: 1;
+}
 </style>
diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js
new file mode 100644
index 00000000..0e03dbcb
--- /dev/null
+++ b/src/components/list_edit/list_edit.js
@@ -0,0 +1,106 @@
+import { mapState, mapGetters } from 'vuex'
+import BasicUserCard from '../basic_user_card/basic_user_card.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
+  },
+  data () {
+    return {
+      title: '',
+      suggestions: [],
+      userIds: [],
+      selectedUserIds: [],
+      loading: false,
+      query: ''
+    }
+  },
+  created () {
+    this.$store.state.api.backendInteractor.getList({ id: this.id })
+      .then((data) => { this.title = data.title })
+    this.$store.state.api.backendInteractor.getListAccounts({ id: this.id })
+      .then((data) => { this.selectedUserIds = data })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    },
+    users () {
+      return this.userIds.map(userId => this.findUser(userId))
+    },
+    availableUsers () {
+      if (this.query.length !== 0) {
+        return this.users
+      } else {
+        return this.suggestions
+      }
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      backendInteractor: state => state.api.backendInteractor
+    }),
+    ...mapGetters(['findUser'])
+  },
+  methods: {
+    onInput () {
+      this.search(this.query)
+    },
+    selectUser (user, event) {
+      if (this.selectedUserIds.includes(user.id)) {
+        this.removeUser(user.id)
+        event.target.classList.remove('selected')
+      } else {
+        this.addUser(user)
+        event.target.classList.add('selected')
+      }
+    },
+    addUser (user) {
+      this.selectedUserIds.push(user.id)
+    },
+    removeUser (userId) {
+      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    },
+    search (query) {
+      if (!query) {
+        this.loading = false
+        return
+      }
+
+      this.loading = true
+      this.userIds = []
+      this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: true })
+        .then(data => {
+          this.loading = false
+          this.userIds = data.accounts.map(a => a.id)
+        })
+    },
+    updateList () {
+      // the API has two different endpoints for "updating the list name" and
+      // "updating the accounts on the list".
+      this.$store.state.api.backendInteractor.updateList({ id: this.id, title: this.title })
+      this.$store.state.api.backendInteractor.addAccountsToList({
+        id: this.id, accountIds: this.selectedUserIds
+      }).then(() => {
+        this.$router.push({ name: 'list-timeline', params: { id: this.id } })
+      })
+    },
+    deleteList () {
+      this.$store.state.api.backendInteractor.deleteList({ id: this.id })
+        .then(this.$router.push({ name: 'lists' }))
+    }
+  }
+}
+
+export default ListNew
diff --git a/src/components/list_edit/list_edit.vue b/src/components/list_edit/list_edit.vue
new file mode 100644
index 00000000..cadd25da
--- /dev/null
+++ b/src/components/list_edit/list_edit.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="panel-default panel list-edit">
+    <div
+      ref="header"
+      class="panel-heading"
+    >
+      <button
+        @click="$router.back"
+        class="button-unstyled go-back-button"
+      >
+        <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="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="member-list">
+      <div
+        v-for="user in availableUsers"
+        :key="user.id"
+        class="member"
+      >
+        <div @click.capture.prevent="selectUser(user, $event)">
+          <BasicUserCard :user="user" />
+        </div>
+      </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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e113400f..3430620b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -952,7 +952,9 @@
     "new": "New List",
     "title": "List title",
     "search": "Search users",
-    "create": "Create"
+    "create": "Create",
+    "save": "Save changes",
+    "delete": "Delete list"
   },
   "file_type": {
     "audio": "Audio",
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index ff6c00d5..7f2fc5ac 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -50,6 +50,7 @@ const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
 const MASTODON_USER_URL = '/api/v1/accounts'
 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}`
@@ -403,6 +404,31 @@ const createList = ({ title, credentials }) => {
   }).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)
@@ -415,6 +441,14 @@ const addAccountsToList = ({ id, accountIds, credentials }) => {
   })
 }
 
+const deleteList = ({ id, credentials }) => {
+  const url = MASTODON_LIST_URL(id)
+  return fetch(url, {
+    method: 'DELETE',
+    headers: authHeaders(credentials)
+  })
+}
+
 const fetchConversation = ({ id, credentials }) => {
   let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
   return fetch(urlContext, { headers: authHeaders(credentials) })
@@ -1389,7 +1423,11 @@ const apiService = {
   fetchFollowRequests,
   fetchLists,
   createList,
+  getList,
+  updateList,
+  getListAccounts,
   addAccountsToList,
+  deleteList,
   approveUser,
   denyUser,
   suggestions,

From d1af4bdd51192406b8ddb378c06133e83a50992a Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 08:25:09 +0300
Subject: [PATCH 08/17] Fix account selection garbage

---
 src/components/list_edit/list_edit.js  | 7 ++++---
 src/components/list_edit/list_edit.vue | 8 +++++---
 src/components/list_new/list_new.js    | 7 ++++---
 src/components/list_new/list_new.vue   | 8 +++++---
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js
index 0e03dbcb..c3869885 100644
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@@ -57,15 +57,16 @@ const ListNew = {
     onInput () {
       this.search(this.query)
     },
-    selectUser (user, event) {
+    selectUser (user) {
       if (this.selectedUserIds.includes(user.id)) {
         this.removeUser(user.id)
-        event.target.classList.remove('selected')
       } else {
         this.addUser(user)
-        event.target.classList.add('selected')
       }
     },
+    isSelected (user) {
+      return this.selectedUserIds.includes(user.id)
+    },
     addUser (user) {
       this.selectedUserIds.push(user.id)
     },
diff --git a/src/components/list_edit/list_edit.vue b/src/components/list_edit/list_edit.vue
index cadd25da..5d0cc2d5 100644
--- a/src/components/list_edit/list_edit.vue
+++ b/src/components/list_edit/list_edit.vue
@@ -41,9 +41,11 @@
         :key="user.id"
         class="member"
       >
-        <div @click.capture.prevent="selectUser(user, $event)">
-          <BasicUserCard :user="user" />
-        </div>
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
       </div>
     </div>
     <button
diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js
index 7ac7e0f0..86d354a8 100644
--- a/src/components/list_new/list_new.js
+++ b/src/components/list_new/list_new.js
@@ -51,15 +51,16 @@ const ListNew = {
     onInput () {
       this.search(this.query)
     },
-    selectUser (user, event) {
+    selectUser (user) {
       if (this.selectedUserIds.includes(user.id)) {
         this.removeUser(user.id)
-        event.target.classList.remove('selected')
       } else {
         this.addUser(user)
-        event.target.classList.add('selected')
       }
     },
+    isSelected (user) {
+      return this.selectedUserIds.includes(user.id)
+    },
     addUser (user) {
       this.selectedUserIds.push(user.id)
     },
diff --git a/src/components/list_new/list_new.vue b/src/components/list_new/list_new.vue
index 952f7732..8fedbc93 100644
--- a/src/components/list_new/list_new.vue
+++ b/src/components/list_new/list_new.vue
@@ -41,9 +41,11 @@
         :key="user.id"
         class="member"
       >
-        <div @click.capture.prevent="selectUser(user, $event)">
-          <BasicUserCard :user="user" />
-        </div>
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
       </div>
     </div>
     <button

From dea803468f480155c12dd92dbdeec7a0611d07b9 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 09:41:07 +0300
Subject: [PATCH 09/17] Show already added accounts in search

---
 src/components/list_edit/list_edit.js | 10 ++++++++--
 src/components/list_new/list_new.js   |  6 ++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js
index c3869885..5c1b36f1 100644
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@@ -20,7 +20,6 @@ const ListNew = {
   data () {
     return {
       title: '',
-      suggestions: [],
       userIds: [],
       selectedUserIds: [],
       loading: false,
@@ -40,11 +39,18 @@ const ListNew = {
     users () {
       return this.userIds.map(userId => this.findUser(userId))
     },
+    selectedUsers () {
+      const users = this.selectedUserIds.map(userId => this.findUser(userId))
+      if (users.includes(undefined)) {
+        return []
+      }
+      return users
+    },
     availableUsers () {
       if (this.query.length !== 0) {
         return this.users
       } else {
-        return this.suggestions
+        return this.selectedUsers
       }
     },
     ...mapState({
diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js
index 86d354a8..d953712b 100644
--- a/src/components/list_new/list_new.js
+++ b/src/components/list_new/list_new.js
@@ -20,7 +20,6 @@ const ListNew = {
   data () {
     return {
       title: '',
-      suggestions: [],
       userIds: [],
       selectedUserIds: [],
       loading: false,
@@ -31,11 +30,14 @@ const ListNew = {
     users () {
       return this.userIds.map(userId => this.findUser(userId))
     },
+    selectedUsers () {
+      return this.selectedUserIds.map(userId => this.findUser(userId))
+    },
     availableUsers () {
       if (this.query.length !== 0) {
         return this.users
       } else {
-        return this.suggestions
+        return this.selectedUsers
       }
     },
     ...mapState({

From 92fac1cd9f346e17db6fbce363faa97aa30ce647 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 10:04:33 +0300
Subject: [PATCH 10/17] Allow removing accounts from list

---
 src/components/list_edit/list_edit.js | 15 +++++++++++----
 src/services/api/api.service.js       | 13 +++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js
index 5c1b36f1..42316e03 100644
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@@ -94,14 +94,21 @@ const ListNew = {
         })
     },
     updateList () {
-      // the API has two different endpoints for "updating the list name" and
-      // "updating the accounts on the list".
+      // the API has three different endpoints: one for "updating the list name",
+      // one for "adding new accounts to the list" and one for "removing
+      // accounts from the list".
       this.$store.state.api.backendInteractor.updateList({ id: this.id, title: this.title })
       this.$store.state.api.backendInteractor.addAccountsToList({
         id: this.id, accountIds: this.selectedUserIds
-      }).then(() => {
-        this.$router.push({ name: 'list-timeline', params: { id: this.id } })
       })
+      this.$store.state.api.backendInteractor.getListAccounts({ id: this.id })
+        .then((data) => {
+          this.$store.state.api.backendInteractor.removeAccountsFromList({
+            id: this.id, accountIds: data.filter(x => !this.selectedUserIds.includes(x))
+          })
+        }).then(() => {
+          this.$router.push({ name: 'list-timeline', params: { id: this.id } })
+        })
     },
     deleteList () {
       this.$store.state.api.backendInteractor.deleteList({ id: this.id })
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7f2fc5ac..fa3439e9 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -441,6 +441,18 @@ const addAccountsToList = ({ id, accountIds, credentials }) => {
   })
 }
 
+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, {
@@ -1427,6 +1439,7 @@ const apiService = {
   updateList,
   getListAccounts,
   addAccountsToList,
+  removeAccountsFromList,
   deleteList,
   approveUser,
   denyUser,

From a982af771b1a3cdbb8444145342348aa6fb3b961 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 10:42:45 +0300
Subject: [PATCH 11/17] Display list title

---
 src/components/timeline_menu/timeline_menu.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index bab51e75..74046d12 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -26,7 +26,8 @@ const TimelineMenu = {
   },
   data () {
     return {
-      isOpen: false
+      isOpen: false,
+      listTitle: null
     }
   },
   created () {
@@ -58,6 +59,11 @@ const TimelineMenu = {
       if (route === 'tag-timeline') {
         return '#' + this.$route.params.tag
       }
+      if (route === 'list-timeline') {
+        this.$store.state.api.backendInteractor.getList({ id: this.$route.params.id })
+          .then((data) => { this.listTitle = data.title })
+        return this.listTitle
+      }
       const i18nkey = timelineNames()[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route
     }

From a66d40e0e83a63e503e2cd0947f084f9bfec17b3 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 11:32:58 +0300
Subject: [PATCH 12/17] Clear list timeline on exit

---
 src/components/list_timeline/list_timeline.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/list_timeline/list_timeline.js b/src/components/list_timeline/list_timeline.js
index 044dbd35..402dd98f 100644
--- a/src/components/list_timeline/list_timeline.js
+++ b/src/components/list_timeline/list_timeline.js
@@ -17,6 +17,7 @@ const ListTimeline = {
   },
   unmounted () {
     this.$store.dispatch('stopFetchingTimeline', 'list')
+    this.$store.commit('clearTimeline', { timeline: 'list' })
   }
 }
 

From 023fcb506f81fbfa275e12343c1cf5c9412ee00d Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 12:34:27 +0300
Subject: [PATCH 13/17] Lint fixes

---
 src/components/list_edit/list_edit.vue | 4 ++--
 src/components/list_new/list_new.vue   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/list_edit/list_edit.vue b/src/components/list_edit/list_edit.vue
index 5d0cc2d5..98704062 100644
--- a/src/components/list_edit/list_edit.vue
+++ b/src/components/list_edit/list_edit.vue
@@ -5,8 +5,8 @@
       class="panel-heading"
     >
       <button
-        @click="$router.back"
         class="button-unstyled go-back-button"
+        @click="$router.back"
       >
         <FAIcon
           size="lg"
@@ -19,7 +19,7 @@
         ref="title"
         v-model="title"
         :placeholder="$t('lists.title')"
-      />
+      >
     </div>
     <div class="input-wrap">
       <div class="input-search">
diff --git a/src/components/list_new/list_new.vue b/src/components/list_new/list_new.vue
index 8fedbc93..9bd7c5a5 100644
--- a/src/components/list_new/list_new.vue
+++ b/src/components/list_new/list_new.vue
@@ -19,7 +19,7 @@
         ref="title"
         v-model="title"
         :placeholder="$t('lists.title')"
-      />
+      >
     </div>
     <div class="input-wrap">
       <div class="input-search">

From ab7001ed207424319ec9e1a4fe67054b78628e72 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 13:09:41 +0300
Subject: [PATCH 14/17] Use router for list timeline link

---
 src/components/list_card/list_card.js  | 7 +------
 src/components/list_card/list_card.vue | 4 ++--
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/list_card/list_card.js b/src/components/list_card/list_card.js
index 6546796c..4668db0e 100644
--- a/src/components/list_card/list_card.js
+++ b/src/components/list_card/list_card.js
@@ -10,12 +10,7 @@ library.add(
 const ListCard = {
   props: [
     'list'
-  ],
-  methods: {
-    listLink (id) {
-      return '/lists/' + id
-    }
-  }
+  ]
 }
 
 export default ListCard
diff --git a/src/components/list_card/list_card.vue b/src/components/list_card/list_card.vue
index 752a7eb5..7d0df69c 100644
--- a/src/components/list_card/list_card.vue
+++ b/src/components/list_card/list_card.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="list-card">
     <router-link
-      :to="listLink(list.id)"
+      :to="{ name: 'list-timeline', params: { id: list.id } }"
       class="list-name"
     >
       {{ list.title }}
     </router-link>
     <router-link
-      :to="listLink(list.id) + '/edit'"
+      :to="{ name: 'list-edit', params: { id: list.id } }"
       class="button-list-edit"
     >
       <FAIcon

From 9217ca84762848ad05d15ae8beb42975c156786c Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 16 Jun 2022 13:38:24 +0300
Subject: [PATCH 15/17] Fetch all users in list before displaying

---
 src/components/list_edit/list_edit.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js
index 42316e03..3ae0459a 100644
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@@ -40,11 +40,10 @@ const ListNew = {
       return this.userIds.map(userId => this.findUser(userId))
     },
     selectedUsers () {
-      const users = this.selectedUserIds.map(userId => this.findUser(userId))
-      if (users.includes(undefined)) {
-        return []
+      for (let i = 0; i < this.selectedUserIds.length; i++) {
+        this.$store.dispatch('fetchUserIfMissing', this.selectedUserIds[i])
       }
-      return users
+      return this.selectedUserIds.map(userId => this.findUser(userId))
     },
     availableUsers () {
       if (this.query.length !== 0) {

From a6136f6cb23df4a57a046381c36de3358934d7c2 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Sat, 18 Jun 2022 16:04:18 +0300
Subject: [PATCH 16/17] refactor: don't make API calls directly

---
 src/components/list_edit/list_edit.js         | 46 ++++------
 src/components/list_new/list_new.js           | 13 ++-
 src/components/list_timeline/list_timeline.js |  1 +
 src/components/lists/lists.js                 |  2 +-
 src/components/timeline_menu/timeline_menu.js |  7 +-
 src/main.js                                   |  2 +
 src/modules/api.js                            |  6 +-
 src/modules/lists.js                          | 85 +++++++++++++++++++
 8 files changed, 115 insertions(+), 47 deletions(-)
 create mode 100644 src/modules/lists.js

diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js
index 3ae0459a..f982f4d4 100644
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@@ -27,10 +27,15 @@ const ListNew = {
     }
   },
   created () {
-    this.$store.state.api.backendInteractor.getList({ id: this.id })
-      .then((data) => { this.title = data.title })
-    this.$store.state.api.backendInteractor.getListAccounts({ id: this.id })
-      .then((data) => { this.selectedUserIds = data })
+    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 () {
@@ -40,10 +45,7 @@ const ListNew = {
       return this.userIds.map(userId => this.findUser(userId))
     },
     selectedUsers () {
-      for (let i = 0; i < this.selectedUserIds.length; i++) {
-        this.$store.dispatch('fetchUserIfMissing', this.selectedUserIds[i])
-      }
-      return this.selectedUserIds.map(userId => this.findUser(userId))
+      return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
     },
     availableUsers () {
       if (this.query.length !== 0) {
@@ -53,10 +55,9 @@ const ListNew = {
       }
     },
     ...mapState({
-      currentUser: state => state.users.currentUser,
-      backendInteractor: state => state.api.backendInteractor
+      currentUser: state => state.users.currentUser
     }),
-    ...mapGetters(['findUser'])
+    ...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
   },
   methods: {
     onInput () {
@@ -93,25 +94,14 @@ const ListNew = {
         })
     },
     updateList () {
-      // the API has three different endpoints: one for "updating the list name",
-      // one for "adding new accounts to the list" and one for "removing
-      // accounts from the list".
-      this.$store.state.api.backendInteractor.updateList({ id: this.id, title: this.title })
-      this.$store.state.api.backendInteractor.addAccountsToList({
-        id: this.id, accountIds: this.selectedUserIds
-      })
-      this.$store.state.api.backendInteractor.getListAccounts({ id: this.id })
-        .then((data) => {
-          this.$store.state.api.backendInteractor.removeAccountsFromList({
-            id: this.id, accountIds: data.filter(x => !this.selectedUserIds.includes(x))
-          })
-        }).then(() => {
-          this.$router.push({ name: 'list-timeline', params: { id: this.id } })
-        })
+      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.state.api.backendInteractor.deleteList({ id: this.id })
-        .then(this.$router.push({ name: 'lists' }))
+      this.$store.dispatch('deleteList', { id: this.id })
+      this.$router.push({ name: 'lists' })
     }
   }
 }
diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js
index d953712b..e3e4aef0 100644
--- a/src/components/list_new/list_new.js
+++ b/src/components/list_new/list_new.js
@@ -41,8 +41,7 @@ const ListNew = {
       }
     },
     ...mapState({
-      currentUser: state => state.users.currentUser,
-      backendInteractor: state => state.api.backendInteractor
+      currentUser: state => state.users.currentUser
     }),
     ...mapGetters(['findUser'])
   },
@@ -86,12 +85,10 @@ const ListNew = {
     createList () {
       // the API has two different endpoints for "creating a list with a name"
       // and "updating the accounts on the list".
-      this.$store.state.api.backendInteractor.createList({ title: this.title })
-        .then((data) => {
-          this.$store.state.api.backendInteractor.addAccountsToList({
-            id: data.id, accountIds: this.selectedUserIds
-          })
-          this.$router.push({ name: 'list-timeline', params: { id: data.id } })
+      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 } })
         })
     }
   }
diff --git a/src/components/list_timeline/list_timeline.js b/src/components/list_timeline/list_timeline.js
index 402dd98f..e17abb32 100644
--- a/src/components/list_timeline/list_timeline.js
+++ b/src/components/list_timeline/list_timeline.js
@@ -13,6 +13,7 @@ const ListTimeline = {
   },
   created () {
     this.listId = this.$route.params.id
+    this.$store.dispatch('fetchList', { id: this.listId })
     this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
   },
   unmounted () {
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
index f511f0f5..09c49407 100644
--- a/src/components/lists/lists.js
+++ b/src/components/lists/lists.js
@@ -16,7 +16,7 @@ const Lists = {
   },
   computed: {
     lists () {
-      return this.$store.state.api.lists
+      return this.$store.state.lists.allLists
     }
   },
   methods: {
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 74046d12..d152c0fe 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -26,8 +26,7 @@ const TimelineMenu = {
   },
   data () {
     return {
-      isOpen: false,
-      listTitle: null
+      isOpen: false
     }
   },
   created () {
@@ -60,9 +59,7 @@ const TimelineMenu = {
         return '#' + this.$route.params.tag
       }
       if (route === 'list-timeline') {
-        this.$store.state.api.backendInteractor.getList({ id: this.$route.params.id })
-          .then((data) => { this.listTitle = data.title })
-        return this.listTitle
+        return this.$store.getters.findListTitle(this.$route.params.id)
       }
       const i18nkey = timelineNames()[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route
diff --git a/src/main.js b/src/main.js
index eacd554c..7d2c82cb 100644
--- a/src/main.js
+++ b/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,
diff --git a/src/modules/api.js b/src/modules/api.js
index d9ae21f8..e9bf8c46 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -13,8 +13,7 @@ const api = {
     socket: null,
     mastoUserSocket: null,
     mastoUserSocketStatus: null,
-    followRequests: [],
-    lists: []
+    followRequests: []
   },
   mutations: {
     setBackendInteractor (state, backendInteractor) {
@@ -36,9 +35,6 @@ const api = {
     setFollowRequests (state, value) {
       state.followRequests = value
     },
-    setLists (state, value) {
-      state.lists = value
-    },
     setMastoUserSocketStatus (state, value) {
       state.mastoUserSocketStatus = value
     },
diff --git a/src/modules/lists.js b/src/modules/lists.js
new file mode 100644
index 00000000..b62ff3d3
--- /dev/null
+++ b/src/modules/lists.js
@@ -0,0 +1,85 @@
+import { remove, find } from 'lodash'
+
+export const defaultState = {
+  allLists: [],
+  allListsObject: {}
+}
+
+const mutations = {
+  setLists (state, value) {
+    state.allLists = value
+  },
+  setList (state, { id, title }) {
+    if (!state.allListsObject[id]) {
+      state.allListsObject[id] = {}
+    }
+    state.allListsObject[id].title = title
+    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 })
+  }
+}
+
+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

From ba4656312a2b783b9f1b11e87787230c8cec3bbf Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Sat, 18 Jun 2022 18:15:51 +0300
Subject: [PATCH 17/17] Add tests

---
 src/modules/lists.js                  | 11 +++-
 test/unit/specs/boot/routes.spec.js   | 24 ++++++++
 test/unit/specs/modules/lists.spec.js | 83 +++++++++++++++++++++++++++
 3 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 test/unit/specs/modules/lists.spec.js

diff --git a/src/modules/lists.js b/src/modules/lists.js
index b62ff3d3..0f751671 100644
--- a/src/modules/lists.js
+++ b/src/modules/lists.js
@@ -5,7 +5,7 @@ export const defaultState = {
   allListsObject: {}
 }
 
-const mutations = {
+export const mutations = {
   setLists (state, value) {
     state.allLists = value
   },
@@ -14,7 +14,12 @@ const mutations = {
       state.allListsObject[id] = {}
     }
     state.allListsObject[id].title = title
-    find(state.allLists, { 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]) {
@@ -65,7 +70,7 @@ const actions = {
   }
 }
 
-const getters = {
+export const getters = {
   findListTitle: state => id => {
     if (!state.allListsObject[id]) return
     return state.allListsObject[id].title
diff --git a/test/unit/specs/boot/routes.spec.js b/test/unit/specs/boot/routes.spec.js
index 439aefd4..d4cde702 100644
--- a/test/unit/specs/boot/routes.spec.js
+++ b/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)
+  })
 })
diff --git a/test/unit/specs/modules/lists.spec.js b/test/unit/specs/modules/lists.spec.js
new file mode 100644
index 00000000..ac9af1b6
--- /dev/null
+++ b/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'])
+    })
+  })
+})