Lots of improvements

src/background.js

@@ -4,7 +4,7 @@ chrome.runtime.onInstalled.addListener(function() {
         groupings: []
     };
 
-    chrome.storage.sync.set(data, function() {
+    chrome.storage.local.set(data, function() {
         console.log("data initialized");
     });
 });

src/page/App.vue

@@ -3,8 +3,21 @@
     <div class="fluid-container">
       <div class="d-flex justify-content-between">
         <h1 class="py-2 pr-2">Pinboard Groupings</h1>
+  
+        <div class="tags-form py-2 pl-2">      
+          <form @submit.prevent="saveNewGrouping" class="form-inline" v-if="apiKey">
+            <div class="form-group">
+              <label class="sr-only" for="tags">Tags</label>
+              <input type="text" class="form-control" id="tags"
+                      v-model="newGrouping.tags"
+                      placeholder="new grouping tags">
+            </div>
+            <button type="submit" class="btn btn-link p-0 pl-2">add grouping</button>
+          </form>
+        </div>
+
         <div class="api-key-form py-2 pl-2">      
-          <form @submit.prevent="save" class="form-inline">
+          <form @submit.prevent="saveApiKey" class="form-inline">
             <div class="form-group" v-if="!apiKey">
               <label class="sr-only" for="apiKey">Pinboard API Key</label>
               <input type="text" class="form-control" id="apiKey"
@@ -24,29 +37,20 @@
         {{ error }}
       </div>
 
-      <div class="my-2 d-flex justify-content-between" v-if="apiKey">
-        <button type="button" class="btn btn-link"
-          v-if="groupings.length > 0"
-          @click="refreshGroupings">refresh groupings</button>
-  
-        <form @submit.prevent="saveNewGrouping" class="form-inline">
-          <div class="form-group">
-            <label class="sr-only" for="tags">Tags</label>
-            <input type="text" class="form-control" id="tags"
-                    v-model="newGrouping.tags"
-                    placeholder="new grouping tags">
-          </div>
-          <button type="submit" class="btn btn-link p-0 pl-2">add grouping</button>
-        </form>
+      <div class="my-2" v-if="apiKey && groupings.length > 0">
+        <button type="button" class="btn btn-link p-0"
+          @click="refreshGroupings">
+          refresh groupings
+        </button>
       </div>
 
       <div class="groupings card-columns" v-if="apiKey">
         <div class="grouping card" v-for="(grouping, index) in groupings" v-bind:key="grouping.tags">
           <div class="card-body">
-            <h5 class="card-title">
-              {{ grouping.tags }}
+            <h5 class="card-title d-flex justify-content-between">
+              <span>{{ grouping.tags }}</span>
               <button type="button"
-                class="btn btn-link"
+                class="btn btn-link p-0"
                 :dataIdx="index"
                 @click="deleteGrouping(index)">
                 delete
@@ -55,7 +59,7 @@
             <p class="card-text" v-if="grouping.loading">
               loading...
             </p>
-            <p class="card-text" v-else v-for="pin in grouping.pins" v-bind:key="pin.hash">
+            <p class="card-text m-0" v-else v-for="pin in grouping.pins" v-bind:key="pin.hash">
               <a target="_blank" :href="pin.href">{{ pin.description }}</a>
             </p>
           </div>
@@ -85,33 +89,36 @@ export default {
   methods: {
     deleteGrouping(index) {
       this.groupings.splice(index, 1);
-      var data = { groupings: this.groupings };      
-      chrome.storage.sync.set(data, () => { });
+      this.persistGroupings();
     },
     refreshGroupings(event) {
+      var promises = [];
       for(var key in this.groupings) {
         var grouping = this.groupings[key];
         grouping.loading = true;
         grouping.pins = [];
 
-        this.getPinsForGroup(grouping);
+        promises.push(this.getPinsForGroup(key));
       }
+      
+      axios.all(promises).finally(() => {
+        this.persistGroupings();
+      });
     },
-    getPinsForGroup(grouping) {
+    getPinsForGroup(index) {
       var url = "https://api.pinboard.in/v1/posts/all?format=json&results=30";
       url += "&auth_token=" + this.apiKey;
-      url += "&tag=" + grouping.tags;
-
-      axios.get(url)
-        .then(response => {
-          grouping.pins = response.data;
-          grouping.loading = false;
-          var data = { groupings: this.groupings };
-          chrome.storage.sync.set(data, () => { });
+      url += "&tag=" + this.groupings[index].tags;
+      
+      var promise = axios.get(url);
+      promise.then(response => {
+          this.groupings[index].pins = response.data;
+          this.groupings[index].loading = false;
         })
         .catch(error => {
           this.error = error;
         });
+      return promise;
     },
     saveNewGrouping(event) {
       this.groupings.push({
@@ -119,29 +126,33 @@ export default {
         pins: [],
         loading: true
       });
-      var data = { groupings: this.groupings };      
-      chrome.storage.sync.set(data, () => { });
       this.newGrouping = { tags: [] };
-
-      this.getPinsForGroup(this.groupings[this.groupings.length - 1]);
+      this.getPinsForGroup(this.groupings.length - 1)
+        .finally(() => {
+          this.persistGroupings();
+        });
     },
-    save(event) {
+    saveApiKey(event) {
       var data = {
         apiKey: this.form.apiKey,
         groupings: this.apiKey !== this.form.apiKey ? [] : this.groupings
       };
-      chrome.storage.sync.set(data, () => {
+      chrome.storage.local.set(data, () => {
         this.apiKey = data.apiKey;
         this.groupings = data.groupings;
       });
     },
+    persistGroupings() {
+      var data = { groupings: this.groupings };
+      chrome.storage.local.set(data, () => {});
+    },
     editApiKey(event) {
       this.form.apiKey = this.apiKey;
       this.apiKey = null;
     }
   },
   mounted() {
-    chrome.storage.sync.get(['apiKey','groupings'], result => {
+    chrome.storage.local.get(['apiKey','groupings'], result => {
       this.apiKey = result.apiKey;
       this.groupings = result.groupings;
     });