Add read-later bookmarks

.nvmrc

@@ -0,0 +1 @@
+14

app/components/bookmark-form/component.js

@@ -7,7 +7,7 @@ export default Component.extend({
 
   autofocusTitleField: function() {
     if (isEmpty(this.get('bookmark.title'))) {
-      this.$('input#title').focus();
+      this.element.querySelector('input#title').focus();
     }
   },
 
@@ -38,7 +38,7 @@ export default Component.extend({
       focus: function() {
         return false;
       },
-      select: function(event, ui) {
+      select: function(_event, ui) {
         let terms;
         terms = split(this.value);
         terms.pop();
@@ -63,15 +63,15 @@ export default Component.extend({
 
   actions: {
 
-    commit() {
+    commit () {
       this.commit();
     },
 
-    cancel() {
+    cancel () {
       this.cancel();
     },
 
-    remove(bookmark) {
+    remove (bookmark) {
       this.remove(bookmark);
     }
 

app/components/bookmark-form/template.hbs

@@ -16,6 +16,19 @@
       <label for="tags">{{t "bookmark.edit.form.tags"}}</label>
       {{input value=bookmark.tags id="tags" autocomplete="off"}}
     </div>
+    {{#if bookmark.isNew}}
+      <div class="control-group">
+        {{input type='checkbox' checked=bookmark.saveForLater id="readlater"}}
+        <label class="checkbox" for="readlater">{{t "bookmark.edit.form.saveForLater"}}</label>
+      </div>
+    {{else}}
+      {{#if bookmark.unread}}
+        <div class="control-group">
+          {{input type='checkbox' checked=bookmark.markAsRead id="markread"}}
+          <label class="checkbox" for="markread">{{t "bookmark.edit.form.markAsRead"}}</label>
+        </div>
+      {{/if}}
+    {{/if}}
   </fieldset>
   <div class="controls">
     <button type="submit" class="button button-primary">{{t "bookmark.edit.form.save"}}</button>

app/components/bookmark-item/component.js

@@ -1,10 +1,13 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
 
   tagName: 'li',
   classNames: ['bookmarks'],
 
+  storage: service(),
+
   didInsertElement() {
     this._super(...arguments);
 
@@ -15,4 +18,16 @@ export default Component.extend({
     }
   },
 
+  actions: {
+
+    markAsRead () {
+      this.item.markAsRead = true;
+
+      this.storage.archiveBookmark(this.item).then(() => {
+        // TODO Show some success indicator
+      });
+    }
+
+  }
+
 });

app/components/bookmark-item/template.hbs

@@ -17,7 +17,8 @@
     {{/if}}
   </p>
   <div class="actions">
-    {{#link-to "archive.edit" item title=(t "links.edit")}}{{icon-edit}}{{/link-to}}
+    {{#if item.unread}}<button type="button" {{action "markAsRead"}}>Ar</button>{{/if}}
+    {{#link-to "bookmarks.edit" item title=(t "links.edit")}}{{icon-edit}}{{/link-to}}
   </div>
   {{#if item.description}}<p class="description">{{item.description}}</p>{{/if}}
 </li>

app/components/bookmark-saved/template.hbs

@@ -4,7 +4,8 @@
     <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
   </svg>
   <div class="controls">
-    <LinkTo @route="archive.index"
+    <LinkTo @route="bookmarks.index"
+            @query={{hash folder=@folderName}}
             @replace={{true}}
             class="button button-secondary">
       {{t "bookmark.saved.backToList"}}

app/controllers/application.js

@@ -14,11 +14,11 @@ export default Controller.extend({
   },
 
   handleStorageDisconnect: function() {
-    this.transitionToRoute('archive.index');
+    this.transitionToRoute('bookmarks.index');
   },
 
   showSearchButton: computed('router.currentRouteName', function() {
-    return this.router.currentRouteName === 'archive.index';
+    return this.router.currentRouteName === 'bookmarks.index';
   }),
 
   currentLocale: computed('i18n.locale', function() {

app/controllers/archive/edit.js → app/controllers/bookmarks/edit.js

@@ -1,7 +1,7 @@
-import ArchiveNewController from 'webmarks/controllers/archive/new';
+import BookmarksNewController from 'webmarks/controllers/bookmarks/new';
 import { inject as service } from '@ember/service';
 
-var ArchiveEditController = ArchiveNewController.extend({
+var BookmarksEditController = BookmarksNewController.extend({
 
   i18n: service(),
   showConfirmation: false,
@@ -11,7 +11,7 @@ var ArchiveEditController = ArchiveNewController.extend({
     remove: function(item) {
       if (!confirm(this.i18n.t('bookmark.edit.form.confirmDeletion'))) { return false; }
 
-      this.storage.removeBookmark(item.id)
+      this.storage.removeBookmark(item)
         .then(() => {
           this.set('showConfirmation', true);
         })
@@ -25,4 +25,4 @@ var ArchiveEditController = ArchiveNewController.extend({
 
 });
 
-export default ArchiveEditController;
+export default BookmarksEditController;

app/controllers/archive/index.js → app/controllers/bookmarks/index.js

@@ -1,5 +1,5 @@
 import { isEmpty } from '@ember/utils';
-import { alias, sort } from '@ember/object/computed';
+import { alias, and, sort } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import Controller, { inject as controller } from '@ember/controller';
 import { computed } from '@ember/object';
@@ -11,6 +11,10 @@ export default Controller.extend({
   storage: service(),
   application: controller(),
 
+  queryParams: ['tags', 'folder'],
+  tags: null,
+  folder: null,
+
   filterText: '',
   showSearchOnSmallScreen: alias('application.showSearchOnSmallScreen'),
   isLargeScreen: alias('application.isLargeScreen'),
@@ -19,18 +23,24 @@ export default Controller.extend({
   paginationItemsToLoad: 0,
   paginationItemObserved: null,
 
+  bookmarks: computed('folder', 'storage.bookmarksLoaded.[]', function() {
+    return this.storage.bookmarksLoaded.filterBy('folderName', this.folder);
+  }),
+
   sortProperties: Object.freeze(['createdAt:desc']),
-  sortedBookmarks: sort('model', 'sortProperties'),
+  sortedBookmarks: sort('bookmarks', 'sortProperties'),
+
+  showSyncProgress: and('storage.syncInProgress', 'storage.syncIsLarge'),
 
   init() {
     this._super(...arguments);
     scheduleOnce('afterRender', this, 'createIntersectionObserver');
-    this.storage.on('disconnected', this.handleStorageDisconnect.bind(this));
+    // this.storage.on('disconnected', this.handleStorageDisconnect.bind(this));
   },
 
-  handleStorageDisconnect: function() {
-    this.set('model', []);
-  },
+  // handleStorageDisconnect: function() {
+  //   this.set('model', []);
+  // },
 
   filteredContent: computed('filterText', 'sortedBookmarks', function() {
     this.setInitialPaginationItemCount();

app/controllers/archive/new.js → app/controllers/bookmarks/new.js

@@ -12,28 +12,30 @@ export default Controller.extend({
   url: null,
   description: null,
   showConfirmation: false,
+  folderName: null,
 
   bookmarkletUsed: false,
 
   bookmarkletLink: computed(function() {
-    return htmlSafe(`javascript:void(location.href="${window.location.origin}/archive/new/?url="+encodeURIComponent(location.href)+"&title="+encodeURIComponent(document.title))`);
+    return htmlSafe(`javascript:void(location.href="${window.location.origin}/bookmarks/new/?url="+encodeURIComponent(location.href)+"&title="+encodeURIComponent(document.title))`);
   }),
 
   actions: {
 
     commit () {
-      this.storage.storeBookmark(this.model)
-        .then(() => {
+      const commitMethod = this.model.markAsRead ? 'archiveBookmark' : 'storeBookmark';
+
+      this.storage[commitMethod](this.model)
+        .then(bookmark => {
           this.set('showConfirmation', true);
+          this.set('folderName', bookmark.folderName);
+          // TODO add new tags to taglist cache
         })
-        .catch(error => {
-          console.log('ERROR:');
-          console.log(error);
-        });
+        .catch(error => { console.log('ERROR:', error); });
     },
 
     cancel () {
-      this.transitionToRoute('index');
+      window.history.back();
     }
 
   }

app/controllers/welcome.js

@@ -22,7 +22,7 @@ export default Controller.extend({
       this.attemptedTransition.retry();
       this.set('attemptedTransition', null);
     } else {
-      this.transitionToRoute('archive.index');
+      this.transitionToRoute('bookmarks.index');
     }
   }
 

app/locales/de/translations.js

@@ -23,6 +23,7 @@ export default {
         url: 'URL',
         description: 'Beschreibung',
         tags: 'Tags',
+        saveForLater: 'Für später speichern (als ungelesen)',
         save: 'Speichern',
         cancel: 'Abbrechen',
         delete: 'Löschen',

app/locales/en/translations.js

@@ -23,6 +23,8 @@ export default {
         url: 'URL',
         description: 'Description',
         tags: 'Tags',
+        saveForLater: 'Save for later (mark as unread)',
+        markAsRead: 'Archive (mark as read)',
         save: 'Save',
         cancel: 'Cancel',
         delete: 'Remove',
@@ -48,5 +50,9 @@ export default {
       about: 'App Info',
       privacy: 'Privacy Policy'
     }
+  },
+  folders: {
+    archive: 'Archive',
+    readlater: 'Saved for later'
   }
 };

app/models/bookmark.js

@@ -9,10 +9,12 @@ export default EmberObject.extend({
   title: '',
   description: '',
   tags: null,
+  unread: null,
   createdAt: null,
   updatedAt: null,
   isNew: false,
   urlChanged: false,
+  folderName: null,
 
   init() {
     this._super(...arguments);
@@ -32,15 +34,19 @@ export default EmberObject.extend({
     return a.hostname;
   }),
 
-  serialize: computed('url', 'title', 'description', 'tags', 'createdAt', function() {
-    var serialized = this.getProperties('url', 'title', 'description');
-    var tags = this.tags || [];
+  serialize: computed('url', 'title', 'description', 'tags', 'createdAt', 'unread', function() {
+    const serialized = this.getProperties('url', 'title', 'description');
+    let tags = this.tags || [];
 
     var createdAt = this.createdAt;
     if (createdAt !== null) {
       serialized.createdAt = createdAt;
     }
 
+    if (this.unread !== null) {
+      serialized.unread = this.unread;
+    }
+
     if (tags && tags.length > 0) {
       if ((typeof tags) === 'string') { tags = tags.split(','); }
 

app/router.js

@@ -9,13 +9,13 @@ export default class Router extends EmberRouter {
 Router.map(function() {
   this.route('welcome');
 
-  this.route('archive', function() {
-    this.route('new', { queryParams: ['title', 'url', 'description'] });
+  this.route('bookmarks', function() {
+    this.route('new', { queryParams: [ 'title', 'url', 'description' ] });
     this.route('edit', { path: 'edit/:bookmark_id' });
-    this.route('index', { path: '', queryParams: ['tags'] });
+    this.route('index', { path: '', queryParams: ['tags', 'folder'] });
   });
 
-  this.route('bookmarks', function() {
+  this.route('archive', function() {
     this.route('new', { queryParams: ['title', 'url'] });
   });
   this.route('privacy');

app/routes/application.js

@@ -16,4 +16,3 @@ export default Route.extend({
   }
 
 });
-

app/routes/archive/index.js

@@ -1,25 +1,9 @@
-import { inject as service } from '@ember/service';
-import { isEmpty } from '@ember/utils';
 import Route from '@ember/routing/route';
 
 export default Route.extend({
 
-  storage: service(),
-  i18n: service(),
-
-  model () {
-    return this.storage.getBookmarks();
-  },
-
-  setupController (controller, model) {
-    controller.setInitialPaginationItemCount();
-    this._super(controller, model)
-  },
-
-  resetController: function(controller) {
-    if (isEmpty(controller.filterText)) {
-      controller.set('showSearchOnSmallScreen', false);
-    }
+  redirect() {
+    this.replaceWith('bookmarks.index')
   }
 
 });