Tabs, working 'my spells'

src/components/Index.vue

@@ -11,7 +11,7 @@
           anchor="bottom right"
           self="top right"
         >
-          Export Chosen Spells
+          Export Selected Spells
         </q-tooltip>
       </button>
 
@@ -21,7 +21,7 @@
           anchor="bottom right"
           self="top right"
         >
-          Import Chosen Spells
+          Import Selected Spells
         </q-tooltip>
       </button>
     </div>
@@ -33,12 +33,38 @@
       ></q-search>
     </div>
 
-    <div class="layout-view">
+    <div slot="header" class="toolbar primary">
-      <spell-list
+      <q-tabs
-        :spells="state.spells.data"
+        :refs="$refs"
-        :search="search"
+        default-tab="tab-all"
-      ></spell-list>
+      >
+        <q-tab name="tab-all" icon="local_library">
+          All Spells
+        </q-tab>
+        <q-tab name="tab-my" icon="bookmark">
+          My Spells
+        </q-tab>
+      </q-tabs>
     </div>
+
+    <div class="layout-view">
+      <section ref="tab-all">
+        <spell-list
+          :spells="state.spells.data"
+          :search="search"
+        ></spell-list>
+      </section>
+
+      <section ref="tab-my">
+        <spell-list
+          v-if="mySpells.length"
+          :spells="mySpells"
+          :search="search"
+        ></spell-list>
+        <div v-else>None :D</div>
+      </section>
+    </div>
+
   </q-layout>
 </template>
 
@@ -78,6 +104,19 @@ export default {
       search: ''
     }
   },
+  computed: {
+    mySpells () {
+      if (!this.state.spells.loaded || this.state.chosen.length === 0) {
+        return []
+      }
+
+      return this.state.chosen.map(chosen => {
+        return this.state.spells.data.find(spell => {
+          return spell.name === chosen
+        })
+      })
+    }
+  },
   mounted () {
     if (!this.state.spells.loaded) {
       Loading.show()

src/components/Spellitem.vue

@@ -12,7 +12,18 @@
       </div>
     </div>
     <div class="item-secondary">
+      <i
+        class="float-left"
+        v-if="checked"
+        v-on:click="checked = false"
+      >bookmark</i>
+      <i
+        class="float-left"
+        v-else
+        v-on:click="checked = true"
+      >bookmark_border</i>
       <q-checkbox
+        class="float-right"
         v-model="checked"
         @input="toggle"
       ></q-checkbox>
@@ -35,11 +46,14 @@ export default {
     },
     classes () {
       return this.spell.classes.map(cla => capitalize(cla)).join(', ')
+    },
+    checked () {
+      return this.state.chosen.indexOf(this.spell.name) >= 0
     }
   },
   data () {
     return {
-      checked: false
+      state
     }
   },
   props: [
@@ -62,3 +76,8 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="stylus">
+  .item-secondary
+    width: 50px
+</style>