Merge branch 'miscs'

Author: Jenselme

Diff for: .pre-commit-config.yaml

@@ -41,6 +41,7 @@ repos:
       - id: insert-license
         name: Insert license header on JS files
         files: ^legadilo/.*\.js$
+        exclude: theme_chooser\.js$
         args:
           - --license-filepath
           - "./devops/license-header-template.txt"

Diff for: CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 24.12.4
+
+- Use the theme (light or dark) that matches the system theme.
+- Add a theme selector.
+- Use a switch to enable/disable read on scroll. This is more visible and is clearer than what we had before.
+- Don’t disable feeds when saving modifications with enter.
+- Prevent a display issue when linking new email addresses.
+
+## 24.12.3
+
+- Small adjustments for extensions.
+- Add a privacy policy page.
+
 ## 24.12.2
 
 - Add a privacy policy to release the extension on Chrome webstore.

Diff for: legadilo/static/css/base.css

@@ -42,7 +42,7 @@ html {
 
 .btn-primary img.bi,
 .btn-danger img.bi {
-  filter: invert(1);
+  filter: invert(1) !important;
 }
 
 .htmx-indicator,
@@ -114,3 +114,17 @@ html {
     height: var(--content-footer-height);
   }
 }
+
+/* For the theme switcher */
+svg.bi {
+  width: 1rem;
+  height: 1rem;
+}
+
+.bd-navbar .dropdown-menu .active .bi {
+  display: block !important;
+}
+
+[data-bs-theme="dark"] img.bi {
+  filter: invert(0.715);
+}

Diff for: legadilo/static/js/list_of_articles.js

@@ -75,7 +75,7 @@
   };
 
   const readOnScroll = () => {
-    const isReadOnScrollCheckboxTicked = document.getElementById("read-on-scroll-enabled").checked;
+    const isReadOnScrollCheckboxTicked = document.getElementById("read-on-scroll-status").checked;
 
     if (!isReadOnScrollCheckboxTicked) {
       return;

Diff for: legadilo/static/js/theme_chooser.js

@@ -0,0 +1,84 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+// https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript
+
+(() => {
+  "use strict";
+
+  const getStoredTheme = () => localStorage.getItem("theme");
+  const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme) {
+      return storedTheme;
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  };
+
+  const setTheme = (theme) => {
+    if (theme === "auto") {
+      document.documentElement.setAttribute(
+        "data-bs-theme",
+        window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+      );
+    } else {
+      document.documentElement.setAttribute("data-bs-theme", theme);
+    }
+  };
+
+  setTheme(getPreferredTheme());
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector("#bd-theme");
+
+    if (!themeSwitcher) {
+      return;
+    }
+
+    const themeSwitcherText = document.querySelector("#bd-theme-text");
+    const activeThemeIcon = document.querySelector(".theme-icon-active use");
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+    const svgOfActiveBtn = btnToActive.querySelector("svg use").getAttribute("href");
+
+    document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
+      element.classList.remove("active");
+      element.setAttribute("aria-pressed", "false");
+    });
+
+    btnToActive.classList.add("active");
+    btnToActive.setAttribute("aria-pressed", "true");
+    activeThemeIcon.setAttribute("href", svgOfActiveBtn);
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
+
+    if (focus) {
+      themeSwitcher.focus();
+    }
+  };
+
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme !== "light" && storedTheme !== "dark") {
+      setTheme(getPreferredTheme());
+    }
+  });
+
+  window.addEventListener("DOMContentLoaded", () => {
+    showActiveTheme(getPreferredTheme());
+
+    document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
+      toggle.addEventListener("click", () => {
+        const theme = toggle.getAttribute("data-bs-theme-value");
+        setStoredTheme(theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+      });
+    });
+  });
+})();

Diff for: legadilo/templates/account/email.html

@@ -70,12 +70,7 @@ <h1>{% translate "E-mail Addresses" %}</h1>
         </p>
     {% endif %}
     <h2>{% translate "Add E-mail Address" %}</h2>
-    <form method="post"
-          action="{% url 'account_email' %}"
-          class="add_email"
-          hx-boost="true"
-          hx-push-url="false"
-          hx-indicator=".icon-indicator">
+    <form method="post" action="{% url 'account_email' %}" class="add_email">
         {% csrf_token %}
         {{ form|crispy }}
         <button class="btn btn-primary" name="action_add" type="submit">

Diff for: legadilo/templates/base.html

@@ -59,11 +59,31 @@
                 <script src="{% static 'htmx.min.js' %}" nonce="{{request.csp_nonce}}" defer></script>
             {% endif %}
             <script src="{% static 'js/base.js' %}" nonce="{{request.csp_nonce}}" defer></script>
+            <!-- This cannot be deferred: we want the proper theme to apply immediately, not after the page has loaded -->
+            <script src="{% static 'js/theme_chooser.js' %}"
+                    nonce="{{ request.csp_nonce }}"></script>
             {% block page_js %}
             {% endblock page_js %}
         {% endblock javascript %}
     </head>
     <body class="content-body">
+        <!-- Icons for theme selector -->
+        <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+            <symbol id="check2" viewBox="0 0 16 16">
+            <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
+            </symbol>
+            <symbol id="circle-half" viewBox="0 0 16 16">
+            <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
+            </symbol>
+            <symbol id="sun-fill" viewBox="0 0 16 16">
+            <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+            </symbol>
+            <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+            <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+            <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
+            </symbol>
+        </svg>
+        <!-- Ends icons for theme selector -->
         <div class="content-main-container">
             <div id="danger-modal"
                  class="modal fade"
@@ -89,7 +109,7 @@ <h1 class="modal-title fs-5"></h1>
             </div>
             {% if not base.hide_header %}
                 <div class="header-container mb-1 sticky-top">
-                    <nav class="navbar navbar-expand-md navbar-light bg-light">
+                    <nav class="navbar navbar-expand-md bd-navbar bg-body-tertiary">
                         <div class="container-fluid">
                             <button class="navbar-toggler navbar-toggler-right"
                                     type="button"
@@ -105,9 +125,11 @@ <h1 class="modal-title fs-5"></h1>
                             <a class="navbar-brand" href="{% url 'reading:default_reading_list' %}">Legadilo</a>
                             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                 <ul class="navbar-nav me-auto">
-                                    <li class="nav-item active">
-                                        <a class="nav-link" href="{% url 'reading:default_reading_list' %}">{% translate "Default reading list" %}</a>
-                                    </li>
+                                    {% if request.user.is_authenticated %}
+                                        <li class="nav-item active">
+                                            <a class="nav-link" href="{% url 'reading:default_reading_list' %}">{% translate "Default reading list" %}</a>
+                                        </li>
+                                    {% endif %}
                                 </ul>
                                 <ul class="navbar-nav">
                                     {% if request.user.is_authenticated %}
@@ -148,6 +170,7 @@ <h1 class="modal-title fs-5"></h1>
                                                 </span>
                                             </a>
                                         </li>
+                                        {% include "core/partials/theme_chooser.html" %}
                                         <li class="nav-item dropdown">
                                             <a class="nav-link dropdown-toggle"
                                                href="#"
@@ -169,6 +192,7 @@ <h1 class="modal-title fs-5"></h1>
                                             </div>
                                         </li>
                                     {% else %}
+                                        {% include "core/partials/theme_chooser.html" %}
                                         {% if ACCOUNT_ALLOW_REGISTRATION %}
                                             <li class="nav-item">
                                                 {# URL provided by django-allauth/account/urls.py #}

Diff for: legadilo/templates/core/partials/theme_chooser.html

@@ -0,0 +1,58 @@
+{% load i18n %}
+
+<!-- Taken and slightly adapted from the boostrap website -->
+<li class="nav-item">
+    <button id="bd-theme"
+            class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            type="button"
+            aria-expanded="false"
+            data-bs-toggle="dropdown"
+            data-bs-display="static"
+            aria-label="Toggle theme (auto)">
+        <svg class="bi my-1 theme-icon-active">
+            <use href="#circle-half"></use>
+        </svg>
+        <span id="bd-theme-text" class="d-lg-none ms-2">Toggle theme</span>
+    </button>
+    <ul class="dropdown-menu dropdown-menu-end"
+        aria-labelledby="bd-theme-text">
+        <li>
+            <button class="dropdown-item d-flex align-items-center"
+                    type="button"
+                    data-bs-theme-value="light"
+                    aria-pressed="false">
+                <svg class="bi me-2 opacity-50">
+                    <use href="#sun-fill"></use>
+                </svg>
+                {% translate "Light" %}
+                <svg class="bi ms-auto d-none">
+                    <use href="#check2"></use>
+                </svg>
+            </button>
+            <button class="dropdown-item d-flex align-items-center"
+                    type="button"
+                    data-bs-theme-value="dark"
+                    aria-pressed="false">
+                <svg class="bi me-2 opacity-50">
+                    <use href="#moon-stars-fill"></use>
+                </svg>
+                {% translate "Dark" %}
+                <svg class="bi ms-auto d-none">
+                    <use href="#check2"></use>
+                </svg>
+            </button>
+            <button class="dropdown-item d-flex align-items-center"
+                    type="button"
+                    data-bs-theme-value="auto"
+                    aria-pressed="false">
+                <svg class="bi me-2 opacity-50" viewBox="0 0 16 16">
+                    <use href="#circle-half"></use>
+                </svg>
+                {% translate "Auto" %}
+                <svg class="bi ms-auto d-none">
+                    <use href="#check2"></use>
+                </svg>
+            </button>
+        </li>
+    </ul>
+</li>

Diff for: legadilo/templates/feeds/edit_feed.html

@@ -30,16 +30,20 @@ <h1>Editing feed '{{ feed.title }}'</h1>
     <form method="post">
         {% csrf_token %}
         {{ form|crispy }}
-        <button form="delete-feed-form"
-                class="btn btn-danger"
-                type="submit"
-                name="delete">{% translate "Delete" %}</button>
-        {% if feed.enabled %}
-            <button class="btn btn-outline-secondary" type="submit" name="disable">{% translate "Disable feed" %}</button>
-        {% else %}
-            <button class="btn btn-outline-secondary" type="submit" name="enable">{% translate "Reenable feed" %}</button>
-        {% endif %}
-        <button class="btn btn-primary" type="submit" name="save">{% translate "Save" %}</button>
+        <div class="d-flex justify-content-between">
+            <div>
+                <button form="delete-feed-form"
+                        class="btn btn-danger"
+                        type="submit"
+                        name="delete">{% translate "Delete" %}</button>
+                <button class="btn btn-primary" type="submit" name="save">{% translate "Save" %}</button>
+            </div>
+            {% if feed.enabled %}
+                <button class="btn btn-outline-secondary" type="submit" name="disable">{% translate "Disable feed" %}</button>
+            {% else %}
+                <button class="btn btn-outline-secondary" type="submit" name="enable">{% translate "Reenable feed" %}</button>
+            {% endif %}
+        </div>
     </form>
     <div id="feed-debug-container" class="accordion mt-5">
         <div class="accordion-item">

Diff for: legadilo/templates/reading/edit_reading_list.html

@@ -42,18 +42,22 @@ <h1>
     <form method="post">
         {% csrf_token %}
         {{ form|crispy }}
-        {% if reading_list %}
-            <button form="delete-reading-list-form"
-                    class="btn btn-danger"
-                    type="submit"
-                    name="delete">{% translate "Delete" %}</button>
-            <button class="btn btn-primary" type="submit">{% translate "Update" %}</button>
-        {% else %}
-            <button class="btn btn-primary" type="submit">{% translate "Create" %}</button>
-        {% endif %}
-        {% if not reading_list.is_default %}
-            <button class="btn btn-outline-secondary" type="submit" name="make-default">{% translate "Make default" %}</button>
-        {% endif %}
+        <div class="d-flex justify-content-between">
+            <div>
+                {% if reading_list %}
+                    <button form="delete-reading-list-form"
+                            class="btn btn-danger"
+                            type="submit"
+                            name="delete">{% translate "Delete" %}</button>
+                    <button class="btn btn-primary" type="submit">{% translate "Update" %}</button>
+                {% else %}
+                    <button class="btn btn-primary" type="submit">{% translate "Create" %}</button>
+                {% endif %}
+            </div>
+            {% if not reading_list.is_default %}
+                <button class="btn btn-outline-secondary" type="submit" name="make-default">{% translate "Make default" %}</button>
+            {% endif %}
+        </div>
     </form>
     <div class="mb-4"></div>
 {% endblock content %}