Add lists listing page

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 }
   ]
 

src/components/list_card/list_card.js

@@ -0,0 +1,12 @@
+const ListCard = {
+  props: [
+    'list'
+  ],
+  methods: {
+    listLink (id) {
+      return '/lists/' + id
+    }
+  }
+}
+
+export default ListCard

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>

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

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>

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",