Add bundles for organizing bookmarks (#1097)

* add bundle model and query logic

* cleanup tests

* add basic form

* add success message

* Add form tests

* Add bundle list view

* fix edit view

* Add remove button

* Add basic preview logic

* Make pagination use absolute URLs

* Hide bookmark edits when rendering preview

* Render bookmark list in preview

* Reorder bundles

* Show bundles in bookmark view

* Make bookmark search respect selected bundle

* UI tweaks

* Fix bookmark scope

* Improve bundle preview

* Skip preview if form is submitted

* Show correct preview after invalid form submission

* Add option to hide bundles

* Merge new migrations

* Add tests for bundle menu

* Improve check for preview being removed

bookmarks/templates/bookmarks/archive.html

@@ -30,16 +30,10 @@
       </form>
     </main>
 
-    {# Tag cloud #}
+    {# Filters #}
     <div class="side-panel col-1 hide-md">
-      <section aria-labelledby="tags-heading">
-        <div class="section-header">
-          <h2 id="tags-heading">Tags</h2>
-        </div>
-        <div id="tag-cloud-container">
-          {% include 'bookmarks/tag_cloud.html' %}
-        </div>
-      </section>
+      {% include 'bookmarks/bundle_section.html' %}
+      {% include 'bookmarks/tag_section.html' %}
     </div>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/bookmark_list.html

@@ -77,72 +77,76 @@
                 {% else %}
                   <span>{{ bookmark_item.display_date }}</span>
                 {% endif %}
-                <span>|</span>
-              {% endif %}
-              {# View link is visible for both owned and shared bookmarks #}
-              {% if bookmark_list.show_view_action %}
-                <a href="{{ bookmark_item.details_url }}" class="view-action"
-                   data-turbo-action="replace" data-turbo-frame="details-modal">View</a>
-              {% endif %}
-              {% if bookmark_item.is_editable %}
-                {# Bookmark owner actions #}
-                {% if bookmark_list.show_edit_action %}
-                  <a href="{% url 'linkding:bookmarks.edit' bookmark_item.id %}?return_url={{ bookmark_list.return_url|urlencode }}">Edit</a>
+                {% if not bookmark_list.is_preview %}
+                  <span>|</span>
                 {% endif %}
-                {% if bookmark_list.show_archive_action %}
-                  {% if bookmark_item.is_archived %}
-                    <button type="submit" name="unarchive" value="{{ bookmark_item.id }}"
-                            class="btn btn-link btn-sm">Unarchive
-                    </button>
-                  {% else %}
-                    <button type="submit" name="archive" value="{{ bookmark_item.id }}"
-                            class="btn btn-link btn-sm">Archive
-                    </button>
-                  {% endif %}
-                {% endif %}
-                {% if bookmark_list.show_remove_action %}
-                  <button ld-confirm-button type="submit" name="remove" value="{{ bookmark_item.id }}"
-                          class="btn btn-link btn-sm">Remove
-                  </button>
-                {% endif %}
-              {% else %}
-                {# Shared bookmark actions #}
-                <span>Shared by
-                <a href="?{% replace_query_param user=bookmark_item.owner.username %}">{{ bookmark_item.owner.username }}</a>
-              </span>
               {% endif %}
-              {% if bookmark_item.has_extra_actions %}
-                <div class="extra-actions">
-                  <span class="hide-sm">|</span>
-                  {% if bookmark_item.show_mark_as_read %}
-                    <button type="submit" name="mark_as_read" value="{{ bookmark_item.id }}"
-                            class="btn btn-link btn-sm btn-icon"
-                            ld-confirm-button ld-confirm-icon="ld-icon-read" ld-confirm-question="Mark as read?">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-                        <use xlink:href="#ld-icon-unread"></use>
-                      </svg>
-                      Unread
+              {% if not bookmark_list.is_preview %}
+                {# View link is visible for both owned and shared bookmarks #}
+                {% if bookmark_list.show_view_action %}
+                  <a href="{{ bookmark_item.details_url }}" class="view-action"
+                    data-turbo-action="replace" data-turbo-frame="details-modal">View</a>
+                {% endif %}
+                {% if bookmark_item.is_editable %}
+                  {# Bookmark owner actions #}
+                  {% if bookmark_list.show_edit_action %}
+                    <a href="{% url 'linkding:bookmarks.edit' bookmark_item.id %}?return_url={{ bookmark_list.return_url|urlencode }}">Edit</a>
+                  {% endif %}
+                  {% if bookmark_list.show_archive_action %}
+                    {% if bookmark_item.is_archived %}
+                      <button type="submit" name="unarchive" value="{{ bookmark_item.id }}"
+                              class="btn btn-link btn-sm">Unarchive
+                      </button>
+                    {% else %}
+                      <button type="submit" name="archive" value="{{ bookmark_item.id }}"
+                              class="btn btn-link btn-sm">Archive
+                      </button>
+                    {% endif %}
+                  {% endif %}
+                  {% if bookmark_list.show_remove_action %}
+                    <button ld-confirm-button type="submit" name="remove" value="{{ bookmark_item.id }}"
+                            class="btn btn-link btn-sm">Remove
                     </button>
                   {% endif %}
-                  {% if bookmark_item.show_unshare %}
-                    <button type="submit" name="unshare" value="{{ bookmark_item.id }}"
-                            class="btn btn-link btn-sm btn-icon"
-                            ld-confirm-button ld-confirm-icon="ld-icon-unshare" ld-confirm-question="Unshare?">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-                        <use xlink:href="#ld-icon-share"></use>
-                      </svg>
-                      Shared
-                    </button>
-                  {% endif %}
-                  {% if bookmark_item.show_notes_button %}
-                    <button type="button" class="btn btn-link btn-sm btn-icon toggle-notes">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-                        <use xlink:href="#ld-icon-note"></use>
-                      </svg>
-                      Notes
-                    </button>
-                  {% endif %}
-                </div>
+                {% else %}
+                  {# Shared bookmark actions #}
+                  <span>Shared by
+                  <a href="?{% replace_query_param user=bookmark_item.owner.username %}">{{ bookmark_item.owner.username }}</a>
+                </span>
+                {% endif %}
+                {% if bookmark_item.has_extra_actions %}
+                  <div class="extra-actions">
+                    <span class="hide-sm">|</span>
+                    {% if bookmark_item.show_mark_as_read %}
+                      <button type="submit" name="mark_as_read" value="{{ bookmark_item.id }}"
+                              class="btn btn-link btn-sm btn-icon"
+                              ld-confirm-button ld-confirm-icon="ld-icon-read" ld-confirm-question="Mark as read?">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+                          <use xlink:href="#ld-icon-unread"></use>
+                        </svg>
+                        Unread
+                      </button>
+                    {% endif %}
+                    {% if bookmark_item.show_unshare %}
+                      <button type="submit" name="unshare" value="{{ bookmark_item.id }}"
+                              class="btn btn-link btn-sm btn-icon"
+                              ld-confirm-button ld-confirm-icon="ld-icon-unshare" ld-confirm-question="Unshare?">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+                          <use xlink:href="#ld-icon-share"></use>
+                        </svg>
+                        Shared
+                      </button>
+                    {% endif %}
+                    {% if bookmark_item.show_notes_button %}
+                      <button type="button" class="btn btn-link btn-sm btn-icon toggle-notes">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+                          <use xlink:href="#ld-icon-note"></use>
+                        </svg>
+                        Notes
+                      </button>
+                    {% endif %}
+                  </div>
+                {% endif %}
               {% endif %}
             </div>
           </div>

bookmarks/templates/bookmarks/bundle_section.html

@@ -0,0 +1,23 @@
+{% if not request.user_profile.hide_bundles %}
+  <section aria-labelledby="bundles-heading">
+    <div class="section-header">
+      <h2 id="bundles-heading">Bundles</h2>
+      <a href="{% url 'linkding:bundles.index' %}" class="btn ml-auto" aria-label="Manage bundles">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+          <path
+              d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"/>
+          <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/>
+        </svg>
+      </a>
+    </div>
+    <ul class="bundle-menu">
+      {% for bundle in bundles.bundles %}
+        <li class="bundle-menu-item {% if bundle.id == bundles.selected_bundle.id %}selected{% endif %}">
+          <a href="?bundle={{ bundle.id }}">{{ bundle.name }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </section>
+{% endif %}

bookmarks/templates/bookmarks/details/assets.html

@@ -1,12 +1,12 @@
 <div>
   {% if details.assets %}
-    <div class="assets">
+    <div class="item-list assets">
       {% for asset in details.assets %}
-        <div class="asset" data-asset-id="{{ asset.id }}">
-          <div class="asset-icon {{ asset.icon_classes }}">
+        <div class="list-item" data-asset-id="{{ asset.id }}">
+          <div class="list-item-icon {{ asset.icon_classes }}">
             {% include 'bookmarks/details/asset_icon.html' %}
           </div>
-          <div class="asset-text {{ asset.text_classes }}">
+          <div class="list-item-text {{ asset.text_classes }}">
           <span class="truncate">
             {{ asset.display_name }}
             {% if asset.status == 'pending' %}(queued){% endif %}
@@ -16,7 +16,7 @@
               <span class="filesize">{{ asset.file_size|filesizeformat }}</span>
             {% endif %}
           </div>
-          <div class="asset-actions">
+          <div class="list-item-actions">
             {% if asset.file %}
               <a class="btn btn-link" href="{% url 'linkding:assets.view' asset.id %}" target="_blank">View</a>
             {% endif %}

bookmarks/templates/bookmarks/index.html

@@ -32,16 +32,10 @@
       </form>
     </main>
 
-    {# Tag cloud #}
+    {# Filters #}
     <div class="side-panel col-1 hide-md">
-      <section aria-labelledby="tags-heading">
-        <div class="section-header">
-          <h2 id="tags-heading">Tags</h2>
-        </div>
-        <div id="tag-cloud-container">
-          {% include 'bookmarks/tag_cloud.html' %}
-        </div>
-      </section>
+      {% include 'bookmarks/bundle_section.html' %}
+      {% include 'bookmarks/tag_section.html' %}
     </div>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/layout.html

@@ -67,7 +67,7 @@
 
 <header class="container">
   {% if has_toasts %}
-    <div class="toasts">
+    <div class="message-list">
       <form action="{% url 'linkding:toasts.acknowledge' %}?return_url={{ request.path | urlencode }}" method="post">
         {% csrf_token %}
         {% for toast in toast_messages %}

bookmarks/templates/bookmarks/pagination.html

@@ -3,7 +3,7 @@
 <ul class="pagination">
   {% if prev_link %}
     <li class="page-item">
-      <a href="?{{ prev_link }}" tabindex="-1">Previous</a>
+      <a href="{{ prev_link }}" tabindex="-1">Previous</a>
     </li>
   {% else %}
     <li class="page-item disabled">
@@ -14,7 +14,7 @@
   {% for page_link in page_links %}
     {% if page_link %}
       <li class="page-item {% if page_link.active %}active{% endif %}">
-        <a href="?{{ page_link.link }}">{{ page_link.number }}</a>
+        <a href="{{ page_link.link }}">{{ page_link.number }}</a>
       </li>
     {% else %}
       <li class="page-item">
@@ -25,7 +25,7 @@
 
   {% if next_link %}
     <li class="page-item">
-      <a href="?{{ next_link }}" tabindex="-1">Next</a>
+      <a href="{{ next_link }}" tabindex="-1">Next</a>
     </li>
   {% else %}
     <li class="page-item disabled">

bookmarks/templates/bookmarks/shared.html

@@ -38,14 +38,7 @@
           <br>
         </div>
       </section>
-      <section aria-labelledby="tags-heading">
-        <div class="section-header">
-          <h2 id="tags-heading">Tags</h2>
-        </div>
-        <div id="tag-cloud-container">
-          {% include 'bookmarks/tag_cloud.html' %}
-        </div>
-      </section>
+      {% include 'bookmarks/tag_section.html' %}
     </div>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/tag_section.html

@@ -0,0 +1,8 @@
+<section aria-labelledby="tags-heading">
+  <div class="section-header">
+    <h2 id="tags-heading">Tags</h2>
+  </div>
+  <div id="tag-cloud-container">
+    {% include 'bookmarks/tag_cloud.html' %}
+  </div>
+</section>

bookmarks/templates/bundles/edit.html

@@ -0,0 +1,33 @@
+{% extends 'bookmarks/layout.html' %}
+{% load widget_tweaks %}
+
+{% block head %}
+  {% with page_title="Edit bundle - Linkding" %}
+    {{ block.super }}
+  {% endwith %}
+{% endblock %}
+
+{% block content %}
+  <div class="bundles-editor-page grid columns-md-1">
+    <main aria-labelledby="main-heading">
+      <div class="section-header">
+        <h1 id="main-heading">Edit bundle</h1>
+      </div>
+
+      {% include 'shared/messages.html' %}
+
+      <form id="bundle-form" action="{% url 'linkding:bundles.edit' bundle.id %}" method="post" novalidate>
+        {% csrf_token %}
+        {% include 'bundles/form.html' %}
+      </form>
+    </main>
+
+    <aside class="col-2" aria-labelledby="preview-heading">
+      <div class="section-header">
+        <h2 id="preview-heading">Preview</h2>
+      </div>
+
+      {% include 'bundles/preview.html' %}
+    </aside>
+  </div>
+{% endblock %}

bookmarks/templates/bundles/form.html

@@ -0,0 +1,91 @@
+{% load widget_tweaks %}
+
+<div class="form-group {% if form.name.errors %}has-error{% endif %}">
+  <label for="{{ form.name.id_for_label }}" class="form-label">Name</label>
+  {{ form.name|add_class:"form-input"|attr:"autocomplete:off"|attr:"placeholder: " }}
+  {% if form.name.errors %}
+    <div class="form-input-hint">
+      {{ form.name.errors }}
+    </div>
+  {% endif %}
+</div>
+
+<div class="form-group {% if form.search.errors %}has-error{% endif %}">
+  <label for="{{ form.search.id_for_label }}" class="form-label">Search</label>
+  {{ form.search|add_class:"form-input"|attr:"autocomplete:off"|attr:"placeholder: " }}
+  {% if form.search.errors %}
+    <div class="form-input-hint">
+      {{ form.search.errors }}
+    </div>
+  {% endif %}
+  <div class="form-input-hint">
+    Search terms to match bookmarks in this bundle.
+  </div>
+</div>
+
+<div class="form-group" ld-tag-autocomplete>
+  <label for="{{ form.any_tags.id_for_label }}" class="form-label">Tags</label>
+  {{ form.any_tags|add_class:"form-input"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
+  <div class="form-input-hint">
+    At least one of these tags must be present in a bookmark to match.
+  </div>
+</div>
+
+<div class="form-group" ld-tag-autocomplete>
+  <label for="{{ form.all_tags.id_for_label }}" class="form-label">Required tags</label>
+  {{ form.all_tags|add_class:"form-input"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
+  <div class="form-input-hint">
+    All of these tags must be present in a bookmark to match.
+  </div>
+</div>
+
+<div class="form-group" ld-tag-autocomplete>
+  <label for="{{ form.excluded_tags.id_for_label }}" class="form-label">Excluded tags</label>
+  {{ form.excluded_tags|add_class:"form-input"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
+  <div class="form-input-hint">
+    None of these tags must be present in a bookmark to match.
+  </div>
+</div>
+
+<div class="form-footer d-flex mt-4">
+  <input type="submit" name="save" value="Save" class="btn btn-primary btn-wide">
+  <a href="{% url 'linkding:bundles.index' %}" class="btn btn-wide ml-auto">Cancel</a>
+  <a href="{% url 'linkding:bundles.preview' %}" data-turbo-frame="preview" class="d-none" id="preview-link"></a>
+</div>
+
+<script>
+  (function init() {
+    const bundleForm = document.getElementById('bundle-form');
+    const previewLink = document.getElementById('preview-link');
+
+    let pendingUpdate;
+
+    function scheduleUpdate() {
+      if (pendingUpdate) {
+        clearTimeout(pendingUpdate);
+      }
+      pendingUpdate = setTimeout(() => {
+        // Ignore if link has been removed (e.g. form submit or navigation)
+        if (!previewLink.isConnected) {
+          return;
+        }
+
+        const baseUrl = previewLink.href.split('?')[0];
+        const params = new URLSearchParams();
+        const inputs = bundleForm.querySelectorAll('input[type="text"]:not([name="csrfmiddlewaretoken"]), textarea, select');
+
+        inputs.forEach(input => {
+          if (input.name && input.value.trim()) {
+            params.set(input.name, input.value.trim());
+          }
+        });
+
+        previewLink.href = params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
+        previewLink.click();
+      }, 500)
+    }
+
+    bundleForm.addEventListener('input', scheduleUpdate);
+    bundleForm.addEventListener('change', scheduleUpdate);
+  })();
+</script>

bookmarks/templates/bundles/index.html

@@ -0,0 +1,124 @@
+{% extends "bookmarks/layout.html" %}
+
+{% block head %}
+  {% with page_title="Bundles - Linkding" %}
+    {{ block.super }}
+  {% endwith %}
+{% endblock %}
+
+{% block content %}
+  <main class="bundles-page" aria-labelledby="main-heading">
+    <h1 id="main-heading">Bundles</h1>
+
+    {% include 'shared/messages.html' %}
+
+    {% if bundles %}
+      <form action="{% url 'linkding:bundles.action' %}" method="post">
+        {% csrf_token %}
+        <div class="item-list bundles">
+          {% for bundle in bundles %}
+            <div class="list-item" data-bundle-id="{{ bundle.id }}" draggable="true">
+              <div class="list-item-icon text-secondary">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                  <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+                  <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+                  <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+                  <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+                  <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+                  <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/>
+                </svg>
+              </div>
+              <div class="list-item-text">
+                <span class="truncate">{{ bundle.name }}</span>
+              </div>
+              <div class="list-item-actions">
+                <a class="btn btn-link" href="{% url 'linkding:bundles.edit' bundle.id %}">Edit</a>
+                <button ld-confirm-button type="submit" name="remove_bundle" value="{{ bundle.id }}"
+                        class="btn btn-link">Remove
+                </button>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+        <input type="submit" name="move_bundle" value="" class="d-none">
+        <input type="hidden" name="move_position" value="">
+      </form>
+    {% else %}
+      <div class="empty">
+        <p class="empty-title h5">You have no bundles yet</p>
+        <p class="empty-subtitle">Create your first bundle to get started</p>
+      </div>
+    {% endif %}
+
+    <div class="mt-4">
+      <a href="{% url 'linkding:bundles.new' %}" class="btn btn-primary">Add new bundle</a>
+    </div>
+  </main>
+
+  <script>
+    (function init() {
+      const bundlesList = document.querySelector(".item-list.bundles");
+      if (!bundlesList) return;
+
+      let draggedElement = null;
+
+      const listItems = bundlesList.querySelectorAll('.list-item');
+      listItems.forEach((item) => {
+        item.addEventListener('dragstart', handleDragStart);
+        item.addEventListener('dragend', handleDragEnd);
+        item.addEventListener('dragover', handleDragOver);
+        item.addEventListener('dragenter', handleDragEnter);
+      });
+
+      function handleDragStart(e) {
+        draggedElement = this;
+
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.dropEffect = 'move';
+
+        this.classList.add('drag-start');
+        setTimeout(() => {
+          this.classList.remove('drag-start');
+          this.classList.add('dragging');
+        }, 0);
+      }
+
+      function handleDragEnd() {
+        this.classList.remove('dragging');
+
+        const moveBundleInput = document.querySelector('input[name="move_bundle"]');
+        const movePositionInput = document.querySelector('input[name="move_position"]');
+        moveBundleInput.value = draggedElement.getAttribute('data-bundle-id');
+        movePositionInput.value = Array.from(bundlesList.children).indexOf(draggedElement);
+
+        const form = this.closest('form');
+        form.requestSubmit(moveBundleInput);
+
+        draggedElement = null;
+      }
+
+      function handleDragOver(e) {
+        if (e.preventDefault) {
+          e.preventDefault();
+        }
+        return false;
+      }
+
+      function handleDragEnter() {
+        if (this !== draggedElement) {
+          const listItems = Array.from(bundlesList.children);
+          const draggedIndex = listItems.indexOf(draggedElement);
+          const currentIndex = listItems.indexOf(this);
+
+          if (draggedIndex < currentIndex) {
+            this.insertAdjacentElement('afterend', draggedElement);
+          } else {
+            this.insertAdjacentElement('beforebegin', draggedElement);
+          }
+        }
+      }
+    })();
+  </script>
+{% endblock %}

bookmarks/templates/bundles/new.html

@@ -0,0 +1,33 @@
+{% extends 'bookmarks/layout.html' %}
+{% load widget_tweaks %}
+
+{% block head %}
+  {% with page_title="New bundle - Linkding" %}
+    {{ block.super }}
+  {% endwith %}
+{% endblock %}
+
+{% block content %}
+  <div class="bundles-editor-page grid columns-md-1">
+    <main aria-labelledby="main-heading">
+      <div class="section-header">
+        <h1 id="main-heading">New bundle</h1>
+      </div>
+
+      {% include 'shared/messages.html' %}
+
+      <form id="bundle-form" action="{% url 'linkding:bundles.new' %}" method="post" novalidate>
+        {% csrf_token %}
+        {% include 'bundles/form.html' %}
+      </form>
+    </main>
+
+    <aside class="col-2" aria-labelledby="preview-heading">
+      <div class="section-header">
+        <h2 id="preview-heading">Preview</h2>
+      </div>
+
+      {% include 'bundles/preview.html' %}
+    </aside>
+  </div>
+{% endblock %}

bookmarks/templates/bundles/preview.html

@@ -0,0 +1,12 @@
+<turbo-frame id="preview">
+  {% if bookmark_list.is_empty %}
+    <div>
+      No bookmarks match the current bundle.
+    </div>
+  {% else %}
+    <div class="mb-4">
+      Found {{ bookmark_list.bookmarks_total }} bookmarks matching this bundle.
+    </div>
+    {% include 'bookmarks/bookmark_list.html' %}
+  {% endif %}
+</turbo-frame>

bookmarks/templates/settings/general.html

@@ -139,6 +139,15 @@
             Instead, the tags are shown in an expandable drawer.
           </div>
         </div>
+        <div class="form-group">
+          <label for="{{ form.hide_bundles.id_for_label }}" class="form-checkbox">
+            {{ form.hide_bundles }}
+            <i class="form-icon"></i> Hide bundles
+          </label>
+          <div class="form-input-hint">
+            Allows to hide the bundles in the side panel if you don't intend to use them.
+          </div>
+        </div>
         <div class="form-group">
           <label for="{{ form.tag_search.id_for_label }}" class="form-label">Tag search</label>
           {{ form.tag_search|add_class:"form-select width-25 width-sm-100" }}

bookmarks/templates/shared/messages.html

@@ -0,0 +1,9 @@
+{% if messages %}
+  <div class="message-list">
+    {% for message in messages %}
+      <div class="toast toast-{{ message.tags }}" role="alert">
+        {{ message }}
+      </div>
+    {% endfor %}
+  </div>
+{% endif %}