Speed up navigation (#824)

* use client-side navigation

* update tests

* add setting for enabling link prefetching

* do not prefetch bookmark details

* theme progress bar

* cleanup behaviors

* update test

bookmarks/templates/settings/general.html

@@ -19,7 +19,7 @@
       <p>
         <a href="{% url 'change_password' %}">Change password</a>
       </p>
-      <form action="{% url 'bookmarks:settings.general' %}" method="post" novalidate>
+      <form action="{% url 'bookmarks:settings.update' %}" method="post" novalidate data-turbo="false">
         {% csrf_token %}
         <div class="form-group">
           <label for="{{ form.theme.id_for_label }}" class="form-label">Theme</label>
@@ -247,7 +247,7 @@ reddit.com/r/Music music reddit</pre>
     {% if global_settings_form %}
       <section class="content-area">
         <h2>Global settings</h2>
-        <form action="{% url 'bookmarks:settings.general' %}" method="post" novalidate>
+        <form action="{% url 'bookmarks:settings.update' %}" method="post" novalidate data-turbo="false">
           {% csrf_token %}
           <div class="form-group">
             <label for="{{ global_settings_form.landing_page.id_for_label }}" class="form-label">Landing page</label>
@@ -266,6 +266,16 @@ reddit.com/r/Music music reddit</pre>
               a dedicated user for this purpose. By default, a standard profile with fixed settings is used.
             </div>
           </div>
+          <div class="form-group">
+            <label for="{{ global_settings_form.enable_link_prefetch.id_for_label }}" class="form-checkbox">
+              {{ global_settings_form.enable_link_prefetch }}
+              <i class="form-icon"></i> Enable prefetching links on hover
+            </label>
+            <div class="form-input-hint">
+              Prefetches internal links when hovering over them. This can improve the perceived performance when
+              navigating application, but also increases the load on the server as well as bandwidth usage.
+            </div>
+          </div>
 
           <div class="form-group">
             <input type="submit" name="update_global_settings" value="Save" class="btn btn-primary btn-wide mt-2">
@@ -306,7 +316,7 @@ reddit.com/r/Music music reddit</pre>
     <section class="content-area">
       <h2>Export</h2>
       <p>Export all bookmarks in Netscape HTML format.</p>
-      <a class="btn btn-primary" href="{% url 'bookmarks:settings.export' %}">Download (.html)</a>
+      <a class="btn btn-primary" target="_blank" href="{% url 'bookmarks:settings.export' %}">Download (.html)</a>
       {% if export_error %}
         <div class="has-error">
           <p class="form-input-hint">
@@ -344,35 +354,37 @@ reddit.com/r/Music music reddit</pre>
   </div>
 
   <script>
-    const enableSharing = document.getElementById("{{ form.enable_sharing.id_for_label }}");
-    const enablePublicSharing = document.getElementById("{{ form.enable_public_sharing.id_for_label }}");
-    const bookmarkDescriptionDisplay = document.getElementById("{{ form.bookmark_description_display.id_for_label }}");
-    const bookmarkDescriptionMaxLines = document.getElementById("{{ form.bookmark_description_max_lines.id_for_label }}");
+    (function init() {
+      const enableSharing = document.getElementById("{{ form.enable_sharing.id_for_label }}");
+      const enablePublicSharing = document.getElementById("{{ form.enable_public_sharing.id_for_label }}");
+      const bookmarkDescriptionDisplay = document.getElementById("{{ form.bookmark_description_display.id_for_label }}");
+      const bookmarkDescriptionMaxLines = document.getElementById("{{ form.bookmark_description_max_lines.id_for_label }}");
 
-    // Automatically disable public bookmark sharing if bookmark sharing is disabled
-    function updatePublicSharing() {
-      if (enableSharing.checked) {
-        enablePublicSharing.disabled = false;
-      } else {
-        enablePublicSharing.disabled = true;
-        enablePublicSharing.checked = false;
+      // Automatically disable public bookmark sharing if bookmark sharing is disabled
+      function updatePublicSharing() {
+        if (enableSharing.checked) {
+          enablePublicSharing.disabled = false;
+        } else {
+          enablePublicSharing.disabled = true;
+          enablePublicSharing.checked = false;
+        }
       }
-    }
 
-    updatePublicSharing();
-    enableSharing.addEventListener("change", updatePublicSharing);
+      updatePublicSharing();
+      enableSharing.addEventListener("change", updatePublicSharing);
 
-    // Automatically hide the bookmark description max lines input if the description display is set to inline
-    function updateBookmarkDescriptionMaxLines() {
-      if (bookmarkDescriptionDisplay.value === "inline") {
-        bookmarkDescriptionMaxLines.closest(".form-group").classList.add("d-hide");
-      } else {
-        bookmarkDescriptionMaxLines.closest(".form-group").classList.remove("d-hide");
+      // Automatically hide the bookmark description max lines input if the description display is set to inline
+      function updateBookmarkDescriptionMaxLines() {
+        if (bookmarkDescriptionDisplay.value === "inline") {
+          bookmarkDescriptionMaxLines.closest(".form-group").classList.add("d-hide");
+        } else {
+          bookmarkDescriptionMaxLines.closest(".form-group").classList.remove("d-hide");
+        }
       }
-    }
 
-    updateBookmarkDescriptionMaxLines();
-    bookmarkDescriptionDisplay.addEventListener("change", updateBookmarkDescriptionMaxLines);
+      updateBookmarkDescriptionMaxLines();
+      bookmarkDescriptionDisplay.addEventListener("change", updateBookmarkDescriptionMaxLines);
+    })();
   </script>
 
 {% endblock %}

bookmarks/templates/settings/integrations.html

@@ -52,10 +52,10 @@
       <h2>RSS Feeds</h2>
       <p>The following URLs provide RSS feeds for your bookmarks:</p>
       <ul style="list-style-position: outside;">
-        <li><a href="{{ all_feed_url }}">All bookmarks</a></li>
-        <li><a href="{{ unread_feed_url }}">Unread bookmarks</a></li>
-        <li><a href="{{ shared_feed_url }}">Shared bookmarks</a></li>
-        <li><a href="{{ public_shared_feed_url }}">Public shared bookmarks</a><br><span class="text-small text-secondary">The public shared feed does not contain an authentication token and can be shared with other people. Only shows shared bookmarks from users who have explicitly enabled public sharing.</span>
+        <li><a target="_blank" href="{{ all_feed_url }}">All bookmarks</a></li>
+        <li><a target="_blank" href="{{ unread_feed_url }}">Unread bookmarks</a></li>
+        <li><a target="_blank" href="{{ shared_feed_url }}">Shared bookmarks</a></li>
+        <li><a target="_blank" href="{{ public_shared_feed_url }}">Public shared bookmarks</a><br><span class="text-small text-secondary">The public shared feed does not contain an authentication token and can be shared with other people. Only shows shared bookmarks from users who have explicitly enabled public sharing.</span>
         </li>
       </ul>
       <p>
@@ -80,7 +80,7 @@
           credential.</strong>
         Any party with access to these URLs can read all your bookmarks.
         If you think that a URL was compromised you can delete the feed token for your user in the <a
-          href="{% url 'admin:bookmarks_feedtoken_changelist' %}">admin panel</a>.
+          target="_blank" href="{% url 'admin:bookmarks_feedtoken_changelist' %}">admin panel</a>.
         After deleting the feed token, new URLs will be generated when you reload this settings page.
       </p>
     </section>