refs #356 Create lists

src/renderer/components/TimelineSpace/Contents/Lists/Index.vue

@@ -1,11 +1,19 @@
 <template>
-  <div id="lists">
-    <div class="list" v-for="list in lists" :key="list.id">
-      <router-link tag="span" class="title" :to="`/${id()}/lists/${list.id}`">
-        {{ list.title }}
-      </router-link>
-    </div>
+<div id="lists">
+  <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
+    <el-form :inline="true">
+      <input v-model="title" placeholder="New List" class="list-title"></input>
+      <el-button type="text" class="create" @click="createList">
+        <icon name="plus"></icon>
+      </el-button>
+    </el-form>
   </div>
+  <div class="list" v-for="list in lists" :key="list.id">
+    <router-link tag="span" class="title" :to="`/${id()}/lists/${list.id}`">
+      {{ list.title }}
+    </router-link>
+  </div>
+</div>
 </template>
 
 <script>
@@ -13,9 +21,16 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'lists',
+  data () {
+    return {
+      title: '',
+      creating: false
+    }
+  },
   computed: {
     ...mapState({
-      lists: state => state.TimelineSpace.Contents.Lists.Index.lists
+      lists: state => state.TimelineSpace.Contents.Lists.Index.lists,
+      loadingBackground: state => state.App.theme.wrapper_mask_color
     })
   },
   created () {
@@ -42,6 +57,20 @@ export default {
             type: 'error'
           })
         })
+    },
+    async createList () {
+      this.creating = true
+      try {
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/createList', this.title)
+        await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists')
+      } catch (err) {
+        this.$message({
+          message: 'Failed to create a list',
+          type: 'error'
+        })
+      } finally {
+        this.creating = false
+      }
     }
   }
 }
@@ -49,6 +78,32 @@ export default {
 
 <style lang="scss" scoped>
 #lists {
+  .new-list {
+    background-color: var(--theme-selected-background-color);
+    padding: 8px 12px;
+
+    .list-title {
+      width: calc(100% - 32px);
+      background-color: var(--theme-background-color);
+      border: none;
+      border-radius: 0 4px 4px 0;
+      color: var(--theme-primary-color);
+      line-height: 40px;
+      height: 40px;
+      padding: 0 15px;
+      outline: 0;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+
+    .create {
+      box-sizing: border-box;
+      width: 24px;
+      margin-left: 4px;
+      color: var(--theme-secondary-color);
+    }
+  }
+
   .list {
     padding: 12px 24px;
     border-bottom: 1px solid var(--theme-border-color);

src/renderer/store/TimelineSpace/Contents/Lists/Index.js

@@ -21,6 +21,15 @@ export default {
           commit('changeLists', data)
           return data
         })
+    },
+    createList ({ rootState }, title) {
+      const client = new Mastodon(
+        rootState.TimelineSpace.account.accessToken,
+        rootState.TimelineSpace.account.baseURL + '/api/v1'
+      )
+      return client.post('/lists', {
+        title: title
+      })
     }
   }
 }