client: add buttons to quickly search for liked and favorite posts

3 files changed, 66 insertions, 0 deletions

diff --git a/client/html/posts_header.tpl b/client/html/posts_header.tpl
index 4869742..ef2e253 100644
--- a/client/html/posts_header.tpl
+++ b/client/html/posts_header.tpl
@@ -11,6 +11,16 @@
             %><input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/><%
             %><input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/><%
         %><% } %><%
+        %><% if (ctx.isLoggedIn) { %><%
+            %><a href class='mousetrap icon-button query-shortcut' data-term='special:liked'><%
+                %><i class="fa fa-thumbs-up term-selected"></i><%
+                %><i class="far fa-thumbs-up term-unselected"></i><%
+            %></a><%
+            %><a href class='mousetrap icon-button query-shortcut' data-term='special:fav'><%
+                %><i class="fa fa-heart term-selected"></i><%
+                %><i class="far fa-heart term-unselected"></i><%
+            %></a><%
+        %><% } %><%
         %><wbr/><%
         %><a class='mousetrap button append'
              href='<%- ctx.formatClientLink('help', 'search', 'posts') %>'><%
diff --git a/client/js/controllers/post_list_controller.js b/client/js/controllers/post_list_controller.js
index af4bd8e..d07901b 100644
--- a/client/js/controllers/post_list_controller.js
+++ b/client/js/controllers/post_list_controller.js
@@ -42,6 +42,7 @@ class PostListController {
         this._headerView = new PostsHeaderView({
             hostNode: this._pageController.view.pageHeaderHolderNode,
             parameters: ctx.parameters,
+            isLoggedIn: api.isLoggedIn(),
             enableSafety: api.safetyEnabled(),
             canBulkEditTags: api.hasPrivilege("posts:bulk-edit:tags"),
             canBulkEditSafety: api.hasPrivilege("posts:bulk-edit:safety"),
diff --git a/client/js/views/posts_header_view.js b/client/js/views/posts_header_view.js
index 3df9cd9..7f5acac 100644
--- a/client/js/views/posts_header_view.js
+++ b/client/js/views/posts_header_view.js
@@ -195,6 +195,19 @@ class PostsHeaderView extends events.EventTarget {
             this._evtRandomizeButtonClick(e)
         );
 
+        for (let shortcut of this._shortcutButtonNodes) {
+            this._setupQueryShortcutButton(shortcut, ctx.parameters.query);
+            shortcut.addEventListener("click", (e) =>
+                this._evtToggleQueryShortcut(e)
+            );
+            this.addEventListener("navigate", (e) =>
+                this._setupQueryShortcutButton(
+                    shortcut,
+                    e.detail.parameters.query
+                )
+            );
+        }
+
         this._bulkEditors = [];
         if (this._bulkEditTagsNode) {
             this._bulkTagEditor = new BulkTagEditor(this._bulkEditTagsNode);
@@ -277,6 +290,10 @@ class PostsHeaderView extends events.EventTarget {
         return this._hostNode.querySelector("#randomize-button");
     }
 
+    get _shortcutButtonNodes() {
+        return this._hostNode.querySelectorAll("form .query-shortcut");
+    }
+
     get _bulkEditBtnHolderNode() {
         return this._hostNode.querySelector(".bulk-edit-btn-holder");
     }
@@ -399,6 +416,44 @@ class PostsHeaderView extends events.EventTarget {
         );
     }
 
+    _setupQueryShortcutButton(btn, query) {
+        const term = btn.getAttribute("data-term");
+        const selectedContent = btn.querySelector(".term-selected");
+        const unselectedContent = btn.querySelector(".term-unselected");
+        const termInUse = (query || "").includes(term);
+        if (termInUse) {
+            selectedContent.style.display = "inline-block";
+            unselectedContent.style.display = "none";
+        } else {
+            selectedContent.style.display = "none";
+            unselectedContent.style.display = "inline-block";
+        }
+    }
+
+    _evtToggleQueryShortcut(e) {
+        e.preventDefault();
+        const term = e.currentTarget.getAttribute("data-term");
+        let query = this._ctx.parameters.query || "";
+        if (query.includes(term)) {
+            query = query.replace(" " + term, "");
+            query = query.replace(term, "");
+        } else {
+            query += " " + term;
+        }
+        this._queryInputNode.value = query;
+        this.dispatchEvent(
+            new CustomEvent("navigate", {
+                detail: {
+                    parameters: Object.assign({}, this._ctx.parameters, {
+                        query: query,
+                        tag: null,
+                        offset: 0,
+                    }),
+                },
+            })
+        );
+    }
+
     _evtFormSubmit(e) {
         e.preventDefault();
         this._navigate();