Add bookmark sharing (#311)

* Allow marking bookmarks as shared

* Add basic share view

* Ensure tag names in tag cloud are unique

* Filter shared bookmarks by user

* Add link for filtering by user

* Prevent n+1 queries when rendering bookmark list

* Prevent empty query params in return URL

* Fix user select template tag name

* Create shared bookmarks through API

* List shared bookmarks through API

* Show bookmark suggestions for shared view

* Show unique tags in search suggestions

* Sort user options

* Add bookmark sharing feature flag

* Add test for share setting default

* Simplify settings view

bookmarks/templates/bookmarks/archive.html

@@ -14,7 +14,7 @@
             <div class="content-area-header">
                 <h2>Archived bookmarks</h2>
                 <div class="spacer"></div>
-                {% bookmark_search query tags mode='archive' %}
+                {% bookmark_search filters tags mode='archived' %}
                 {% include 'bookmarks/bulk_edit/toggle.html' %}
             </div>
 

bookmarks/templates/bookmarks/bookmark_list.html

@@ -54,21 +54,29 @@
                     </span>
                     <span class="text-gray text-sm">|</span>
                 {% endif %}
-                <a href="{% url 'bookmarks:edit' bookmark.id %}?return_url={{ return_url }}"
-                   class="btn btn-link btn-sm">Edit</a>
-                {% if bookmark.is_archived %}
-                    <button type="submit" name="unarchive" value="{{ bookmark.id }}"
-                       class="btn btn-link btn-sm">Unarchive</button>
+                {% if bookmark.owner == request.user %}
+                    {# Bookmark owner actions #}
+                    <a href="{% url 'bookmarks:edit' bookmark.id %}?return_url={{ return_url }}"
+                       class="btn btn-link btn-sm">Edit</a>
+                    {% if bookmark.is_archived %}
+                        <button type="submit" name="unarchive" value="{{ bookmark.id }}"
+                           class="btn btn-link btn-sm">Unarchive</button>
+                    {% else %}
+                        <button type="submit" name="archive" value="{{ bookmark.id }}"
+                           class="btn btn-link btn-sm">Archive</button>
+                    {% endif %}
+                    <button type="submit" name="remove" value="{{ bookmark.id }}"
+                       class="btn btn-link btn-sm btn-confirmation">Remove</button>
+                    {% if bookmark.unread %}
+                      <span class="text-gray text-sm">|</span>
+                      <button type="submit" name="mark_as_read" value="{{ bookmark.id }}"
+                              class="btn btn-link btn-sm">Mark as read</button>
+                    {% endif %}
                 {% else %}
-                    <button type="submit" name="archive" value="{{ bookmark.id }}"
-                       class="btn btn-link btn-sm">Archive</button>
-                {% endif %}
-                <button type="submit" name="remove" value="{{ bookmark.id }}"
-                   class="btn btn-link btn-sm btn-confirmation">Remove</button>
-                {% if bookmark.unread %}
-                  <span class="text-gray text-sm">|</span>
-                  <button type="submit" name="mark_as_read" value="{{ bookmark.id }}"
-                          class="btn btn-link btn-sm">Mark as read</button>
+                    {# Shared bookmark actions #}
+                    <span class="text-gray text-sm">Shared by
+                      <a class="text-gray" href="?{% replace_query_param user=bookmark.owner.username %}">{{ bookmark.owner.username }}</a>
+                    </span>
                 {% endif %}
             </div>
         </li>

bookmarks/templates/bookmarks/form.html

@@ -75,6 +75,18 @@
         Unread bookmarks can be filtered for, and marked as read after you had a chance to look at them.
       </div>
     </div>
+    {% if request.user.profile.enable_sharing %}
+      <div class="form-group">
+        <label for="{{ form.shared.id_for_label }}" class="form-checkbox">
+          {{ form.shared }}
+          <i class="form-icon"></i>
+          <span>Share</span>
+        </label>
+        <div class="form-input-hint">
+          Share this bookmark with other users.
+        </div>
+      </div>
+    {% endif %}
     <br/>
     <div class="form-group">
         {% if auto_close %}

bookmarks/templates/bookmarks/index.html

@@ -14,7 +14,7 @@
             <div class="content-area-header">
                 <h2>Bookmarks</h2>
                 <div class="spacer"></div>
-                {% bookmark_search query tags %}
+                {% bookmark_search filters tags %}
                 {% include 'bookmarks/bulk_edit/toggle.html' %}
             </div>
 

bookmarks/templates/bookmarks/nav_menu.html

@@ -15,6 +15,11 @@
           <li>
             <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archived</a>
           </li>
+          {% if request.user.profile.enable_sharing %}
+          <li>
+            <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared</a>
+          </li>
+          {% endif %}
           <li>
             <a href="{% url 'bookmarks:index' %}?q=!unread" class="btn btn-link">Unread</a>
           </li>
@@ -47,6 +52,11 @@
             <li style="padding-left: 1rem">
               <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archived</a>
             </li>
+            {% if request.user.profile.enable_sharing %}
+            <li style="padding-left: 1rem">
+              <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared</a>
+            </li>
+            {% endif %}
             <li style="padding-left: 1rem">
               <a href="{% url 'bookmarks:index' %}?q=!unread" class="btn btn-link">Unread</a>
             </li>

bookmarks/templates/bookmarks/search.html

@@ -3,10 +3,13 @@
         <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 }}">
+                       value="{{ filters.query }}">
             </span>
             <input type="submit" value="Search" class="btn input-group-btn">
         </div>
+        {% if filters.user %}
+            <input type="hidden" name="user" value="{{ filters.user }}">
+        {% endif %}
     </form>
 </div>
 
@@ -15,6 +18,11 @@
     window.addEventListener("load", function() {
         const currentTagsString = '{{ tags_string }}';
         const currentTags = currentTagsString.split(' ');
+        const uniqueTags = [...new Set(currentTags)]
+        const filters = {
+          q: '{{ filters.query }}',
+          user: '{{ filters.user }}',
+        }
         const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
         const wrapper = document.getElementById('search-input-wrap')
         const newWrapper = document.createElement('div')
@@ -23,10 +31,11 @@
             props: {
                 name: 'q',
                 placeholder: 'Search for words or #tags',
-                value: '{{ query }}',
-                tags: currentTags,
+                value: '{{ filters.query }}',
+                tags: uniqueTags,
                 mode: '{{ mode }}',
-                apiClient
+                apiClient,
+                filters,
             }
         })
         wrapper.parentElement.replaceChild(newWrapper, wrapper)

bookmarks/templates/bookmarks/shared.html

@@ -0,0 +1,48 @@
+{% 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>Shared bookmarks</h2>
+                <div class="spacer"></div>
+                {% bookmark_search filters tags mode='shared' %}
+            </div>
+
+            <form class="bookmark-actions" action="{% url 'bookmarks:action' %}?return_url={{ return_url }}"
+                  method="post">
+                {% csrf_token %}
+
+                {% if empty %}
+                    {% include 'bookmarks/empty_bookmarks.html' %}
+                {% else %}
+                    {% bookmark_list bookmarks return_url link_target %}
+                {% endif %}
+            </form>
+        </section>
+
+        {# Filters #}
+        <section class="content-area column col-4 hide-md">
+            <div class="content-area-header">
+                <h2>User</h2>
+            </div>
+            <div>
+                {% user_select filters users %}
+                <br>
+            </div>
+            <div class="content-area-header">
+                <h2>Tags</h2>
+            </div>
+            {% tag_cloud tags %}
+        </section>
+    </div>
+
+    <script src="{% static "bundle.js" %}"></script>
+    <script src="{% static "shared.js" %}"></script>
+{% endblock %}

bookmarks/templates/bookmarks/user_select.html

@@ -0,0 +1,29 @@
+<form id="user-select" action="" method="get">
+  {% if filters.query %}
+    <input type="hidden" name="q" value="{{ filters.query }}">
+  {% endif %}
+  <div class="form-group">
+    <div class="d-flex">
+      <select name="user" class="form-select">
+        <option value="">Everyone</option>
+        {% for user in users %}
+          <option value="{{ user.username }}"
+                  {% if user.username == filters.user %}selected{% endif %}
+                  data-is-user-option>
+            {{ user.username }}
+          </option>
+        {% endfor %}
+      </select>
+      <noscript>
+        <button type="submit" class="btn btn-link ml-2">Apply</button>
+      </noscript>
+    </div>
+  </div>
+</form>
+<script>
+  const form = document.getElementById('user-select');
+  const select = form.querySelector('select');
+  select.addEventListener('change', () => {
+    form.submit();
+  });
+</script>

bookmarks/templates/settings/general.html

@@ -47,6 +47,16 @@
                       case it goes offline or its content is modified.
                     </div>
                 </div>
+                <div class="form-group">
+                    <label for="{{ form.enable_sharing.id_for_label }}" class="form-checkbox">
+                      {{ form.enable_sharing }}
+                      <i class="form-icon"></i> Enable bookmark sharing
+                    </label>
+                    <div class="form-input-hint">
+                      Allows to share bookmarks with other users, and to view shared bookmarks.
+                      Disabling this feature will hide all previously shared bookmarks from other users.
+                    </div>
+                </div>
                 <div class="form-group">
                     <input type="submit" value="Save" class="btn btn-primary mt-2">
                 </div>