⚡️ Sync Collection -> Notes

components/firebase/feeds.vue

@@ -3,10 +3,10 @@
     v-if="fb.currentFeeds.length !== 0"
     class="virtual-list"
     :class="{ filled: fb.currentFeeds.length }"
-    :size="56"
+    :size="90"
-    :remain="Math.min(8, fb.currentFeeds.length)"
+    :remain="Math.min(5, fb.currentFeeds.length)"
   >
-    <ul v-for="feed in fb.currentFeeds" :key="feed.id">
+    <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
       <div class="show-on-large-screen">
         <li>
           <input
@@ -18,13 +18,15 @@
             class="bg-color"
           />
         </li>
-        <button class="icon" @click="saveFeed(feed)">
-          <i class="material-icons">get_app</i>
-        </button>
         <button class="icon" @click="deleteFeed(feed)">
           <i class="material-icons">delete</i>
         </button>
       </div>
+      <div class="show-on-large-screen">
+        <li class="info clamb-3">
+          <label>{{ feed.message }}</label>
+        </li>
+      </div>
     </ul>
   </virtual-list>
   <ul v-else>
@@ -38,6 +40,23 @@
 .virtual-list {
   max-height: calc(100vh - 288px);
 }
+
+ul,
+ol {
+  flex-direction: column;
+}
+
+.entry {
+  border-bottom: 1px dashed var(--brd-color);
+  padding: 0 0 8px;
+}
+
+.clamb-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 </style>
 
 <script>
@@ -58,23 +77,6 @@ export default {
       this.$toast.error(this.$t("deleted"), {
         icon: "delete"
       });
-    },
-    saveFeed(feed) {
-      const dataToWrite = JSON.stringify(feed.message, null, 2);
-      const file = new Blob([dataToWrite], { type: "application/json" });
-      const a = document.createElement("a"),
-        url = URL.createObjectURL(file);
-      a.href = url;
-      a.download = (feed.label + " on " + Date()).replace(/\./g, "[dot]");
-      document.body.appendChild(a);
-      a.click();
-      this.$toast.success(this.$t("download_started"), {
-        icon: "done"
-      });
-      setTimeout(() => {
-        document.body.removeChild(a);
-        window.URL.revokeObjectURL(url);
-      }, 1000);
     }
   }
 };

components/firebase/inputform.vue

@@ -7,7 +7,8 @@
           type="text"
           autofocus
           v-model="message"
-          :placeholder="$t('paste_a_collection')"
+          :placeholder="$t('paste_a_note')"
+          @keyup.enter="formPost"
         />
       </li>
     </ul>
@@ -19,11 +20,12 @@
           autofocus
           v-model="label"
           :placeholder="$t('label')"
+          @keyup.enter="formPost"
         />
       </li>
       <button
         class="icon"
-        :disabled="!(this.message && this.label)"
+        :disabled="!(this.message || this.label)"
         value="Save"
         @click="formPost"
       >
@@ -46,6 +48,9 @@ export default {
   },
   methods: {
     formPost() {
+      if (!(this.message || this.label)) {
+        return;
+      }
       fb.writeFeeds(this.message, this.label);
       this.message = null;
       this.label = null;

components/history.vue

@@ -289,11 +289,6 @@ ol {
   flex-direction: column;
 }
 
-ul li,
-ol li {
-  display: flex;
-}
-
 .method-list-item {
   position: relative;
 

lang/en-US.js

@@ -259,6 +259,7 @@ export default {
   syncCollections: "Collections",
   turn_on: "Turn on",
   login_first: "Login first",
-  paste_a_collection: "Paste a Collection",
+  paste_a_note: "Paste a note",
-  import_from_sync: "Import from Sync"
+  import_from_sync: "Import from Sync",
+  notes: "Notes"
 };

pages/index.vue

@@ -932,12 +932,12 @@
             </pw-section>
           </div>
           <input id="sync-tab" type="radio" name="side" />
-          <label for="sync-tab">{{ $t("sync") }}</label>
+          <label for="sync-tab">{{ $t("notes") }}</label>
           <div class="tab">
             <pw-section
               v-if="fb.currentUser"
               class="pink"
-              label="Sync"
+              :label="$t('notes')"
               ref="sync"
             >
               <inputform />
@@ -1505,9 +1505,9 @@ export default {
     },
     rawInput(status) {
       if (status && this.rawParams === "") {
-      	this.rawParams = "{}";
+        this.rawParams = "{}";
       } else {
-        this.setRouteQueryState();	
+        this.setRouteQueryState();
       }
     },
     "response.body": function(val) {
@@ -2455,7 +2455,7 @@ export default {
         const haveItems = [...this[key]].length;
         if (haveItems && this[key]["value"] !== "") {
           return `${key}=${JSON.stringify(this[key])}&`;
-        } 
+        }
         return "";
       };
       let flats = [
@@ -2524,7 +2524,9 @@ export default {
       const { value: text } = document.getElementById("import-text");
       try {
         const parsedCurl = parseCurlCommand(text);
-        const { origin, pathname } = new URL(parsedCurl.url.replace(/"/g, "").replace(/'/g, ""));
+        const { origin, pathname } = new URL(
+          parsedCurl.url.replace(/"/g, "").replace(/'/g, "")
+        );
         this.url = origin;
         this.path = pathname;
         this.headers = [];
@@ -2790,7 +2792,9 @@ export default {
       });
     },
     tokenReqChange({ target }) {
-      const { details, name } = this.tokenReqs.find(({ name }) => name === target.value);
+      const { details, name } = this.tokenReqs.find(
+        ({ name }) => name === target.value
+      );
       const {
         oidcDiscoveryUrl,
         authUrl,