Speed up response times for certain actions (#829)

* return updated HTML from bookmark actions

* open details through URL

* fix details update

* improve modal behavior

* use a frame

* make behaviors properly destroy themselves

* remove page and details params from tag urls

* use separate behavior for details and tags

* remove separate details view

* make it work with other views

* add asset actions

* remove asset refresh for now

* remove details partial

* fix tests

* remove old partials

* update tests

* cache and reuse tags

* extract search autocomplete behavior

* remove details param from pagination

* fix tests

* only return details modal when navigating in frame

* fix link target

* remove unused behaviors

* use auto submit behavior for user select

* fix import

bookmarks/templates/bookmarks/archive.html

@@ -11,24 +11,20 @@
       <div class="content-area-header mb-0">
         <h2>Archived bookmarks</h2>
         <div class="header-controls">
-          {% bookmark_search bookmark_list.search tag_cloud.tags mode='archived' %}
+          {% bookmark_search bookmark_list.search mode='archived' %}
           {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-fetch="{{ bookmark_list.tag_modal_url }}" ld-target="body|append" ld-on="click"
-                  class="btn ml-2 show-md">Tags
+          <button ld-tag-modal class="btn ml-2 show-md">Tags
           </button>
         </div>
       </div>
 
-      <form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud"
-            class="bookmark-actions"
+      <form class="bookmark-actions"
             action="{{ bookmark_list.action_url|safe }}"
             method="post" autocomplete="off">
         {% csrf_token %}
         {% include 'bookmarks/bulk_edit/bar.html' with disable_actions='bulk_archive' %}
 
-        <div ld-fetch="{{ bookmark_list.refresh_url }}" ld-on="refresh-bookmark-list"
-             ld-fire="refresh-bookmark-list-done"
-             class="bookmark-list-container">
+        <div id="bookmark-list-container">
           {% include 'bookmarks/bookmark_list.html' %}
         </div>
       </form>
@@ -39,10 +35,16 @@
       <div class="content-area-header">
         <h2>Tags</h2>
       </div>
-      <div ld-fetch="{{ tag_cloud.refresh_url }}" ld-on="refresh-tag-cloud"
-           class="tag-cloud-container">
+      <div id="tag-cloud-container">
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
+
+    {# Bookmark details #}
+    <turbo-frame id="details-modal" target="_top">
+      {% if details %}
+        {% include 'bookmarks/details/modal.html' %}
+      {% endif %}
+    </turbo-frame>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/bookmark_list.html

@@ -78,10 +78,7 @@
             {% endif %}
             {# View link is visible for both owned and shared bookmarks #}
             {% if bookmark_list.show_view_action %}
-              <a ld-fetch="{% url 'bookmarks:details_modal' bookmark_item.id %}?return_url={{ bookmark_list.return_url|urlencode }}"
-                 ld-on="click" ld-target="body|append"
-                 data-turbo-prefetch="false"
-                 href="{% url 'bookmarks:details' bookmark_item.id %}">View</a>
+              <a href="{{ bookmark_item.details_url }}" data-turbo-action="replace" data-turbo-frame="details-modal">View</a>
             {% endif %}
             {% if bookmark_item.is_editable %}
               {# Bookmark owner actions #}

bookmarks/templates/bookmarks/details.html

@@ -1,13 +0,0 @@
-{% extends 'bookmarks/layout.html' %}
-
-{% block content %}
-  <div class="bookmark-details page">
-    {% if details.is_editable %}
-      {% include 'bookmarks/details/actions.html' %}
-    {% endif %}
-    {% include 'bookmarks/details/title.html' %}
-    <div>
-      {% include 'bookmarks/details/form.html' %}
-    </div>
-  </div>
-{% endblock %}

bookmarks/templates/bookmarks/details/actions.html

@@ -1,16 +0,0 @@
-<div class="actions">
-  <div class="left-actions">
-    <a class="btn btn-wide"
-       href="{% url 'bookmarks:edit' details.bookmark.id %}?return_url={{ details.edit_return_url|urlencode }}">Edit</a>
-  </div>
-  <div class="right-actions">
-    <form action="{% url 'bookmarks:index.action' %}?return_url={{ details.delete_return_url|urlencode }}"
-          method="post">
-      {% csrf_token %}
-      <button ld-confirm-button type="submit" name="remove" value="{{ details.bookmark.id }}"
-              class="btn btn-error btn-wide">
-        Delete...
-      </button>
-    </form>
-  </div>
-</div>

bookmarks/templates/bookmarks/details/assets.html

@@ -1,7 +1,4 @@
-<div {% if details.has_pending_assets %}
-  ld-fetch="{% url 'bookmarks:details_assets' details.bookmark.id %}"
-  ld-interval="5" ld-target="self|outerHTML"
-{% endif %}>
+<div>
   {% if details.assets %}
     <div class="assets">
       {% for asset in details.assets %}
@@ -36,10 +33,10 @@
 
   {% if details.is_editable %}
     <div class="assets-actions">
-      <button type="submit" name="create_snapshot" class="btn btn-sm"
+      <button type="submit" name="create_html_snapshot" value="{{ details.bookmark.id }}" class="btn btn-sm"
               {% if details.has_pending_assets %}disabled{% endif %}>Create HTML snapshot
       </button>
-      <button ld-upload-button id="upload-asset" name="upload_asset" value="{{ details.bookmark.id }}" type="button"
+      <button ld-upload-button id="upload-asset" name="upload_asset" value="{{ details.bookmark.id }}" type="submit"
               class="btn btn-sm">Upload file
       </button>
       <input id="upload-asset-file" name="upload_asset_file" type="file" class="d-hide">

bookmarks/templates/bookmarks/details/form.html

@@ -1,9 +1,10 @@
 {% load static %}
 {% load shared %}
 
-<form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud,refresh-details"
-      action="{% url 'bookmarks:details' details.bookmark.id %}"
-      method="post">
+<form action="{{ details.action_url }}" method="post" enctype="multipart/form-data">
+  {% csrf_token %}
+  <input type="hidden" name="update_state" value="{{ details.bookmark.id }}">
+
   <div class="weblinks">
     <a class="weblink" href="{{ details.bookmark.url }}" rel="noopener"
        target="{{ details.profile.bookmark_link_target }}">
@@ -47,7 +48,6 @@
       <div class="status col-2">
         <dt>Status</dt>
         <dd class="d-flex" style="gap: .8rem">
-          {% csrf_token %}
           <div class="form-group">
             <label class="form-switch">
               <input ld-auto-submit type="checkbox" name="is_archived"

bookmarks/templates/bookmarks/details/modal.html

@@ -0,0 +1,47 @@
+<div class="modal active bookmark-details"
+     ld-details-modal>
+  <a href="{{ details.close_url }}" data-turbo-frame="details-modal">
+    <div class="modal-overlay" aria-label="Close"></div>
+  </a>
+  <div class="modal-container">
+    <div class="modal-header">
+      <h2>{{ details.bookmark.resolved_title }}</h2>
+      <a href="{{ details.close_url }}" data-turbo-frame="details-modal">
+        <button class="close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+               stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M18 6l-12 12"></path>
+            <path d="M6 6l12 12"></path>
+          </svg>
+        </button>
+      </a>
+    </div>
+    <div class="modal-body">
+      <div class="content">
+        {% include 'bookmarks/details/form.html' %}
+      </div>
+    </div>
+
+    {% if details.is_editable %}
+      <div class="modal-footer">
+        <div class="actions">
+          <div class="left-actions">
+            <a class="btn btn-wide"
+               href="{% url 'bookmarks:edit' details.bookmark.id %}?return_url={{ details.edit_return_url|urlencode }}">Edit</a>
+          </div>
+          <div class="right-actions">
+            <form action="{{ details.delete_url }}" method="post" data-turbo-action="replace">
+              {% csrf_token %}
+              <input type="hidden" name="disable_turbo" value="true">
+              <button ld-confirm-button class="btn btn-error btn-wide"
+                      type="submit" name="remove" value="{{ details.bookmark.id }}">
+                Delete...
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</div>

bookmarks/templates/bookmarks/details/title.html

@@ -1,3 +0,0 @@
-<h2>
-  {{ details.bookmark.resolved_title }}
-</h2>

bookmarks/templates/bookmarks/details_modal.html

@@ -1,30 +0,0 @@
-<div ld-modal
-     ld-fetch="{% url 'bookmarks:details_modal' details.bookmark.id %}" ld-on="refresh-details"
-     ld-select=".content" ld-target=".modal.bookmark-details .content|outerHTML"
-     class="modal active bookmark-details">
-  <div class="modal-overlay" aria-label="Close"></div>
-  <div class="modal-container">
-    <div class="modal-header">
-      {% include 'bookmarks/details/title.html' %}
-      <button class="close">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
-             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M18 6l-12 12"></path>
-          <path d="M6 6l12 12"></path>
-        </svg>
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="content">
-        {% include 'bookmarks/details/form.html' %}
-      </div>
-    </div>
-
-    {% if details.is_editable %}
-      <div class="modal-footer">
-        {% include 'bookmarks/details/actions.html' %}
-      </div>
-    {% endif %}
-  </div>
-</div>

bookmarks/templates/bookmarks/head.html

@@ -0,0 +1,40 @@
+{% load static %}
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="{% static 'favicon.ico' %}" sizes="48x48">
+  <link rel="icon" href="{% static 'favicon.svg' %}" sizes="any" type="image/svg+xml">
+  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
+  <link rel="mask-icon" href="{% static 'safari-pinned-tab.svg' %}" color="#5856e0">
+  <link rel="manifest" href="{% url 'bookmarks:manifest' %}">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
+  <meta name="description" content="Self-hosted bookmark service">
+  <meta name="robots" content="index,follow">
+  <meta name="author" content="Sascha Ißbrücker">
+  <title>linkding</title>
+  {# Include specific theme variant based on user profile setting #}
+  {% if request.user_profile.theme == 'light' %}
+    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#5856e0">
+  {% elif request.user_profile.theme == 'dark' %}
+    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#161822">
+  {% else %}
+    {# Use auto theme as fallback #}
+    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
+          media="(prefers-color-scheme: dark)"/>
+    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
+          media="(prefers-color-scheme: light)"/>
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
+  {% endif %}
+  {% if request.user_profile.custom_css %}
+    <style>{{ request.user_profile.custom_css }}</style>
+  {% endif %}
+  <meta name="turbo-cache-control" content="no-preview">
+  {% if not request.global_settings.enable_link_prefetch %}
+    <meta name="turbo-prefetch" content="false">
+  {% endif %}
+  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
+</head>

bookmarks/templates/bookmarks/index.html

@@ -11,24 +11,19 @@
       <div class="content-area-header mb-0">
         <h2>Bookmarks</h2>
         <div class="header-controls">
-          {% bookmark_search bookmark_list.search tag_cloud.tags %}
+          {% bookmark_search bookmark_list.search %}
           {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-fetch="{{ bookmark_list.tag_modal_url }}" ld-target="body|append" ld-on="click"
-                  class="btn ml-2 show-md">Tags
-          </button>
+          <button ld-tag-modal class="btn ml-2 show-md">Tags</button>
         </div>
       </div>
 
-      <form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud"
-            class="bookmark-actions"
+      <form class="bookmark-actions"
             action="{{ bookmark_list.action_url|safe }}"
             method="post" autocomplete="off">
         {% csrf_token %}
         {% include 'bookmarks/bulk_edit/bar.html' with disable_actions='bulk_unarchive' %}
 
-        <div ld-fetch="{{ bookmark_list.refresh_url }}" ld-on="refresh-bookmark-list"
-             ld-fire="refresh-bookmark-list-done"
-             class="bookmark-list-container">
+        <div id="bookmark-list-container">
           {% include 'bookmarks/bookmark_list.html' %}
         </div>
       </form>
@@ -39,10 +34,16 @@
       <div class="content-area-header">
         <h2>Tags</h2>
       </div>
-      <div ld-fetch="{{ tag_cloud.refresh_url }}" ld-on="refresh-tag-cloud"
-           class="tag-cloud-container">
+      <div id="tag-cloud-container">
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
+
+    {# Bookmark details #}
+    <turbo-frame id="details-modal" target="_top">
+      {% if details %}
+        {% include 'bookmarks/details/modal.html' %}
+      {% endif %}
+    </turbo-frame>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/layout.html

@@ -3,44 +3,7 @@
 <!DOCTYPE html>
 {# Use data attributes as storage for access in static scripts #}
 <html lang="en" data-api-base-url="{% url 'bookmarks:api-root' %}">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="{% static 'favicon.ico' %}" sizes="48x48">
-  <link rel="icon" href="{% static 'favicon.svg' %}" sizes="any" type="image/svg+xml">
-  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
-  <link rel="mask-icon" href="{% static 'safari-pinned-tab.svg' %}" color="#5856e0">
-  <link rel="manifest" href="{% url 'bookmarks:manifest' %}">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
-  <meta name="description" content="Self-hosted bookmark service">
-  <meta name="robots" content="index,follow">
-  <meta name="author" content="Sascha Ißbrücker">
-  <title>linkding</title>
-  {# Include specific theme variant based on user profile setting #}
-  {% if request.user_profile.theme == 'light' %}
-    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
-    <meta name="theme-color" content="#5856e0">
-  {% elif request.user_profile.theme == 'dark' %}
-    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
-    <meta name="theme-color" content="#161822">
-  {% else %}
-    {# Use auto theme as fallback #}
-    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
-          media="(prefers-color-scheme: dark)"/>
-    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
-          media="(prefers-color-scheme: light)"/>
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
-  {% endif %}
-  {% if request.user_profile.custom_css %}
-    <style>{{ request.user_profile.custom_css }}</style>
-  {% endif %}
-  <meta name="turbo-cache-control" content="no-preview">
-  {% if not request.global_settings.enable_link_prefetch %}
-    <meta name="turbo-prefetch" content="false">
-  {% endif %}
-  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
-</head>
+{% include 'bookmarks/head.html' %}
 <body ld-global-shortcuts>
 
 <div class="d-none">

bookmarks/templates/bookmarks/pagination.html

@@ -1,9 +1,9 @@
 {% load shared %}
 
 <ul class="pagination">
-  {% if page.has_previous %}
+  {% if prev_link %}
     <li class="page-item">
-      <a href="?{% update_query_string page=page.previous_page_number %}" tabindex="-1">Previous</a>
+      <a href="?{{ prev_link }}" tabindex="-1">Previous</a>
     </li>
   {% else %}
     <li class="page-item disabled">
@@ -11,10 +11,10 @@
     </li>
   {% endif %}
 
-  {% for page_number in visible_page_numbers %}
-    {% if page_number >= 0 %}
-      <li class="page-item {% if page.number == page_number %}active{% endif %}">
-        <a href="?{% update_query_string page=page_number %}">{{ page_number }}</a>
+  {% 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>
       </li>
     {% else %}
       <li class="page-item">
@@ -23,9 +23,9 @@
     {% endif %}
   {% endfor %}
 
-  {% if page.has_next %}
+  {% if next_link %}
     <li class="page-item">
-      <a href="?{% update_query_string page=page.next_page_number %}" tabindex="-1">Next</a>
+      <a href="?{{ next_link }}" tabindex="-1">Next</a>
     </li>
   {% else %}
     <li class="page-item disabled">

bookmarks/templates/bookmarks/search.html

@@ -1,9 +1,14 @@
 {% load widget_tweaks %}
 
-<div class="search-container">
+<div ld-search-autocomplete class="search-container">
   <form id="search" action="" method="get" role="search">
     <input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
-           value="{{ search.q }}">
+           value="{{ search.q }}"
+           data-link-target="{{ request.user_profile.bookmark_link_target }}"
+           data-mode="{{ mode }}"
+           data-user="{{ search.user }}"
+           data-shared="{{ search.shared }}"
+           data-unread="{{ search.unread }}">
     <input type="submit" value="Search" class="d-none">
     {% for hidden_field in search_form.hidden_fields %}
       {{ hidden_field }}
@@ -73,42 +78,3 @@
     </div>
   </div>
 </div>
-
-
-{# Replace search input with auto-complete component #}
-<script type="application/javascript">
-  (function init() {
-    const currentTagsString = '{{ tags_string }}';
-    const currentTags = currentTagsString.split(' ');
-    const uniqueTags = [...new Set(currentTags)]
-    const search = {
-      q: '{{ search.q }}',
-      user: '{{ search.user }}',
-      shared: '{{ search.shared }}',
-      unread: '{{ search.unread }}',
-    }
-    const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
-    const input = document.querySelector('#search input[name="q"]')
-    const container = document.createElement('div')
-    new linkding.SearchAutoComplete({
-      target: container,
-      props: {
-        name: 'q',
-        placeholder: 'Search for words or #tags',
-        value: input.value,
-        tags: uniqueTags,
-        mode: '{{ mode }}',
-        linkTarget: '{{ request.user_profile.bookmark_link_target }}',
-        apiClient,
-        search,
-      }
-    })
-
-    const autoComplete = container.firstElementChild;
-    input.replaceWith(autoComplete);
-
-    document.addEventListener("turbo:before-cache", () => {
-      autoComplete.replaceWith(input);
-    }, {once: true});
-  })();
-</script>

bookmarks/templates/bookmarks/shared.html

@@ -11,21 +11,17 @@
       <div class="content-area-header">
         <h2>Shared bookmarks</h2>
         <div class="header-controls">
-          {% bookmark_search bookmark_list.search tag_cloud.tags mode='shared' %}
-          <button ld-fetch="{{ bookmark_list.tag_modal_url }}" ld-target="body|append" ld-on="click"
-                  class="btn ml-2 show-md">Tags
+          {% bookmark_search bookmark_list.search mode='shared' %}
+          <button ld-tag-modal class="btn ml-2 show-md">Tags
           </button>
         </div>
       </div>
 
-      <form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud"
-            class="bookmark-actions"
+      <form class="bookmark-actions"
             action="{{ bookmark_list.action_url|safe }}"
             method="post" autocomplete="off">
         {% csrf_token %}
-        <div ld-fetch="{{ bookmark_list.refresh_url }}" ld-on="refresh-bookmark-list"
-             ld-fire="refresh-bookmark-list-done"
-             class="bookmark-list-container">
+        <div id="bookmark-list-container">
           {% include 'bookmarks/bookmark_list.html' %}
         </div>
       </form>
@@ -43,10 +39,16 @@
       <div class="content-area-header">
         <h2>Tags</h2>
       </div>
-      <div ld-fetch="{{ tag_cloud.refresh_url }}" ld-on="refresh-tag-cloud"
-           class="tag-cloud-container">
+      <div id="tag-cloud-container">
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
+
+    {# Bookmark details #}
+    <turbo-frame id="details-modal" target="_top">
+      {% if details %}
+        {% include 'bookmarks/details/modal.html' %}
+      {% endif %}
+    </turbo-frame>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/tag_modal.html

@@ -1,21 +0,0 @@
-<div ld-modal class="modal active">
-  <div class="modal-overlay" aria-label="Close"></div>
-  <div class="modal-container">
-    <div class="modal-header d-flex justify-between align-center">
-      <div class="modal-title h5">Tags</div>
-      <button class="close">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
-             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M18 6l-12 12"></path>
-          <path d="M6 6l12 12"></path>
-        </svg>
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="content">
-        {% include 'bookmarks/tag_cloud.html' %}
-      </div>
-    </div>
-  </div>
-</div>

bookmarks/templates/bookmarks/updates/bookmark_view_stream.html

@@ -0,0 +1,21 @@
+<turbo-stream action="update" target="bookmark-list-container">
+  <template>
+    {% include 'bookmarks/bookmark_list.html' %}
+    <script>
+      document.dispatchEvent(new CustomEvent('bookmark-list-updated'));
+    </script>
+  </template>
+</turbo-stream>
+<turbo-stream action="update" target="tag-cloud-container">
+  <template>
+    {% include 'bookmarks/tag_cloud.html' %}
+  </template>
+</turbo-stream>
+
+<turbo-stream action="update" method="morph" target="details-modal">
+  <template>
+    {% if details %}
+      {% include 'bookmarks/details/modal.html' %}
+    {% endif %}
+  </template>
+</turbo-stream>

bookmarks/templates/bookmarks/updates/details-modal-frame.html

@@ -0,0 +1,10 @@
+<html>
+{% include 'bookmarks/head.html' %}
+<body>
+<turbo-frame id="details-modal">
+  {% if details %}
+    {% include 'bookmarks/details/modal.html' %}
+  {% endif %}
+</turbo-frame>
+</body>
+</html>

bookmarks/templates/bookmarks/user_select.html

@@ -6,17 +6,10 @@
   {% endfor %}
   <div class="form-group">
     <div class="d-flex">
-      {{ form.user|add_class:"form-select" }}
+      {% render_field form.user class+="form-select" ld-auto-submit="" %}
       <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/integrations.html

@@ -27,7 +27,7 @@
         <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 browser's toolbar:</p>
-      <a href="javascript: {% include 'bookmarks/bookmarklet.js' %}"
+      <a href="javascript: {% include 'bookmarks/bookmarklet.js' %}" data-turbo="false"
          class="btn btn-primary">📎 Add bookmark</a>
     </section>
 
@@ -43,7 +43,7 @@
         <strong>Please treat this token as you would any other credential.</strong>
         Any party with access to this token can access and manage all your bookmarks.
         If you think that a token was compromised you can revoke (delete) it in the <a
-          href="{% url 'admin:authtoken_tokenproxy_changelist' %}">admin panel</a>.
+          target="_blank" href="{% url 'admin:authtoken_tokenproxy_changelist' %}">admin panel</a>.
         After deleting the token, a new one will be generated when you reload this settings page.
       </p>
     </section>