Implement archive feature (#73)

* Implement archive function (#46)

* Implement archive view (#46)

* Filter tags for archived/unarchived (#46)

* Implement archived bookmarks endpoint (#46)

* Implement archive mode for search component (#46)

* Move bookmarklet to settings (#46)

* Update modified timestamp on archive/unarchive (#46)

* Fix bookmarklet (#46)

bookmarks/templates/bookmarks/archive.html

@@ -0,0 +1,34 @@
+{% extends "bookmarks/layout.html" %}
+{% load static %}
+{% load shared %}
+{% load bookmarks %}
+
+{% block content %}
+    <div class="bookmarks-page columns">
+
+        {# Bookmark list #}
+        <section class="content-area column col-8 col-md-12">
+            <div class="content-area-header">
+                <h2>Archived bookmarks</h2>
+                <div class="spacer"></div>
+                {% bookmark_search query tags mode='archive' %}
+            </div>
+
+            {% if empty %}
+                {% include 'bookmarks/empty_bookmarks.html' %}
+            {% else %}
+                {% bookmark_list bookmarks return_url %}
+            {% endif %}
+        </section>
+
+        {# Tag list #}
+        <section class="content-area column col-4 hide-md">
+            <div class="content-area-header">
+                <h2>Tags</h2>
+            </div>
+            {% tag_cloud tags %}
+        </section>
+    </div>
+
+    <script src="{% static "bundle.js" %}"></script>
+{% endblock %}

bookmarks/templates/bookmarks/bookmark_list.html

@@ -24,6 +24,13 @@
             <div class="actions">
                 <a href="{% url 'bookmarks:edit' bookmark.id %}?return_url={{ return_url }}"
                    class="btn btn-link btn-sm">Edit</a>
+                {% if bookmark.is_archived %}
+                    <a href="{% url 'bookmarks:unarchive' bookmark.id %}?return_url={{ return_url }}"
+                       class="btn btn-link btn-sm">Unarchive</a>
+                {% else %}
+                    <a href="{% url 'bookmarks:archive' bookmark.id %}?return_url={{ return_url }}"
+                       class="btn btn-link btn-sm">Archive</a>
+                {% endif %}
                 <a href="{% url 'bookmarks:remove' bookmark.id %}?return_url={{ return_url }}"
                    class="btn btn-link btn-sm"
                    onclick="return confirm('Do you really want to delete this bookmark?')">Remove</a>

bookmarks/templates/bookmarks/bookmarklet.html

@@ -1,24 +0,0 @@
-{% extends "bookmarks/layout.html" %}
-
-{% block content %}
-    <div class="columns">
-        <section class="content-area column col-12">
-            <div class="content-area-header">
-                <h2>Bookmarklet</h2>
-            </div>
-            <p>The bookmarklet is a quick way to add new bookmarks without opening the linkding application
-                first. Here's how it works:</p>
-            <ul>
-                <li>Drag the bookmarklet below into your browsers bookmark bar / toolbar</li>
-                <li>Open the website that you want to bookmark</li>
-                <li>Click the bookmarklet in your browsers toolbar</li>
-                <li>linkding opens in a new window  or tab and allows you to add a bookmark for the site</li>
-                <li>After saving the bookmark the linkding window closes and you are back on your website</li>
-            </ul>
-            <p>Drag the following bookmarklet to your browsers toolbar:</p>
-            <a href="javascript: {% include 'bookmarks/bookmarklet.js' %}"
-               class="btn btn-primary">📎 Add bookmark</a>
-        </section>
-    </div>
-{% endblock %}
-

bookmarks/templates/bookmarks/empty_bookmarks.html

@@ -1,8 +1,8 @@
 <div class="empty">
     <p class="empty-title h5">You have no bookmarks yet</p>
     <p class="empty-subtitle">
-        You can get started by <a href="{% url 'bookmarks:new' %}">adding</a> bookmarks, <a
-            href="{% url 'bookmarks:settings.index' %}">importing</a> your existing bookmarks or <a
-            href="{% url 'bookmarks:bookmarklet' %}">configuring</a> the bookmarklet.
+        You can get started by <a href="{% url 'bookmarks:new' %}">adding</a> bookmarks,
+        <a href="{% url 'bookmarks:settings.index' %}">importing</a> your existing bookmarks or configuring the
+        <a href="{% url 'bookmarks:settings.index' %}#bookmarklet">bookmarklet</a>.
     </p>
 </div>

bookmarks/templates/bookmarks/index.html

@@ -11,17 +11,7 @@
             <div class="content-area-header">
                 <h2>Bookmarks</h2>
                 <div class="spacer"></div>
-                <div class="search">
-                    <form action="{% url 'bookmarks:index' %}" method="get" role="search">
-                        <div class="input-group">
-                            <span id="search-input-wrap">
-                                <input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
-                                       value="{{ query }}">
-                            </span>
-                            <input type="submit" value="Search" class="btn input-group-btn">
-                        </div>
-                    </form>
-                </div>
+                {% bookmark_search query tags %}
             </div>
 
             {% if empty %}
@@ -40,24 +30,5 @@
         </section>
     </div>
 
-    {# Replace search input with auto-complete component #}
     <script src="{% static "bundle.js" %}"></script>
-    <script type="application/javascript">
-        const currentTagsString = '{{ tags_string }}';
-        const currentTags = currentTagsString.split(' ');
-        const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
-        const wrapper = document.getElementById('search-input-wrap')
-        const newWrapper = document.createElement('div')
-        new linkding.SearchAutoComplete({
-            target: newWrapper,
-            props: {
-                name: 'q',
-                placeholder: 'Search for words or #tags',
-                value: '{{ query }}',
-                tags: currentTags,
-                apiClient
-            }
-        })
-        wrapper.parentElement.replaceChild(newWrapper, wrapper)
-    </script>
 {% endblock %}

bookmarks/templates/bookmarks/nav_menu.html

@@ -1,7 +1,7 @@
 {# Basic menu list #}
 <div class="hide-md">
     <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
-    <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
+    <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archive</a>
     <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
     <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
 </div>
@@ -17,7 +17,7 @@
         <!-- menu component -->
         <ul class="menu">
             <li>
-                <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
+                <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archive</a>
             </li>
             <li>
                 <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>

bookmarks/templates/bookmarks/search.html

@@ -0,0 +1,34 @@
+<div class="search">
+    <form action="" method="get" role="search">
+        <div class="input-group">
+            <span id="search-input-wrap">
+                <input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
+                       value="{{ query }}">
+            </span>
+            <input type="submit" value="Search" class="btn input-group-btn">
+        </div>
+    </form>
+</div>
+
+{# Replace search input with auto-complete component #}
+<script type="application/javascript">
+    window.addEventListener("load", function() {
+        const currentTagsString = '{{ tags_string }}';
+        const currentTags = currentTagsString.split(' ');
+        const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
+        const wrapper = document.getElementById('search-input-wrap')
+        const newWrapper = document.createElement('div')
+        new linkding.SearchAutoComplete({
+            target: newWrapper,
+            props: {
+                name: 'q',
+                placeholder: 'Search for words or #tags',
+                value: '{{ query }}',
+                tags: currentTags,
+                mode: '{{ mode }}',
+                apiClient
+            }
+        })
+        wrapper.parentElement.replaceChild(newWrapper, wrapper)
+    });
+</script>