Improve browser extension

.pre-commit-config.yaml

@@ -51,7 +51,7 @@ repos:
           - --allow-past-years
 
   - repo: https://github.com/adamchainz/django-upgrade
-    rev: "1.23.1"
+    rev: "1.24.0"
     hooks:
       - id: django-upgrade
         args: ["--target-version", "5.0"]
@@ -64,15 +64,15 @@ repos:
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
-    rev: v0.11.2
+    rev: v0.11.5
     hooks:
       - id: ruff
         args: [--fix, --preview]
       - id: ruff-format
         args: [--preview]
 
   - repo: https://github.com/seddonym/import-linter
-    rev: v2.2
+    rev: v2.3
     hooks:
       - id: import-linter
 
@@ -91,7 +91,7 @@ repos:
         args: [-e, SC1091]
 
   - repo: https://github.com/thibaudcolas/pre-commit-stylelint
-    rev: v16.15.0
+    rev: v16.18.0
     hooks:
       - id: stylelint
         args: [--fix]
@@ -100,7 +100,7 @@ repos:
           - "[email protected]"
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: "v9.22.0"
+    rev: "v9.24.0"
     hooks:
       - id: eslint
         args: [--fix]

CHANGELOG.md

@@ -3,6 +3,22 @@
 ## Unreleased
 
 - Show reading list title and reading list actions when scrolling up.
+- Improve browser extension:
+  - Display site title instead of nothing for feed links without a title attribute.
+  - Can go back to list of actions from error, article & feed.
+  - Can delete article from extension.
+  - Display on actions chooser whether the sure is subscribed feeds.
+  - Display on actions chooser whether the article is already saved.
+  - Can delete and disable/enable a feed from the extension.
+- API changes:
+  - Switch from `link` to `url` to save articles. This is done to have a consistant naming in the codebase.
+  - Can list articles and filter them by URLs.
+  - Can list feeds and filter them by feed URLs and enabled status.
+- Correct Django admin styling.
+  - This was caused by the update to `django-csp` 4.0 which changed how CSP rules are computed. It caused the admin to be unable to load its script files and stylesheets.
+- Allow base64 encoded images.
+- Keep h1 titles when we have more than 1.
+  - Some invalid articles may have multiple h1, keep them in this case since they are "normal" article titles and thus must be kept.
 
 ## 25.04.1
 

browser-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "legadilo-browser-extension",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "dependencies": {
     "bootstrap": "^5.3.3",
     "bootstrap5-tags": "^1.7.5",

browser-extension/src/action.html

@@ -20,10 +20,25 @@
             <div id="choose-action-container" class="row row-cols-1 m-auto">
                 <button id="save-article-action-btn"
                         class="btn btn-primary mb-2 col"
-                        type="button">Save this article</button>
+                        type="button">
+                    Save this article
+                    <img id="article-already-saved"
+                         class="bi hidden"
+                         src="./vendor/bs-icons/save-fill.svg"
+                         alt="Article already saved" />
+                </button>
             </div>
+            <div id="subscribe-to-feeds-container" class="row row-cols-1 m-auto"></div>
         </div>
         <div id="article-container">
+            <button id="article-nav-back"
+                    class="btn btn-outline-secondary btn-sm"
+                    type="button">
+                <img class="bi"
+                     src="./vendor/bs-icons/arrow-left.svg"
+                     alt="Go back button" />
+                Back
+            </button>
             <form id="update-saved-article-form">
                 <div class="mb-3">
                     <label for="saved-article-title" class="form-label">
@@ -56,7 +71,9 @@
                     </select>
                 </div>
                 <div class="mb-3 d-flex justify-content-center">
-                    <button class="btn btn-primary btn-sm" type="submit">Update</button>
+                    <button id="update-saved-article"
+                            class="btn btn-primary btn-sm"
+                            type="submit">Update</button>
                 </div>
             </form>
             <div class="mb-3 d-flex justify-content-evenly">
@@ -96,6 +113,11 @@
                          src="./vendor/bs-icons/bookmark-fill.svg"
                          alt="Unmark as for later" />
                 </button>
+                <button class="btn btn-outline-danger btn-sm"
+                        type="button"
+                        id="delete-article">
+                    <img class="bi" src="./vendor/bs-icons/trash.svg" alt="Delete article" />
+                </button>
                 <a id="open-article-details"
                    class="btn btn-outline-secondary btn-sm"
                    role="button"
@@ -105,6 +127,14 @@
             </div>
         </div>
         <div id="feed-container">
+            <button id="feed-nav-back"
+                    class="btn btn-outline-secondary btn-sm"
+                    type="button">
+                <img class="bi"
+                     src="./vendor/bs-icons/arrow-left.svg"
+                     alt="Go back button" />
+                Back
+            </button>
             <h2 id="feed-title"></h2>
             <form id="update-feed-form">
                 <div class="mb-3">
@@ -148,19 +178,49 @@ <h2 id="feed-title"></h2>
                         <option disabled hidden value="">Choose a tag...</option>
                     </select>
                 </div>
-                <button class="btn btn-primary btn-sm">Update</button>
+                <div class="mb-3 d-flex justify-content-center">
+                    <button id="update-feed" class="btn btn-primary btn-sm" type="submit">Update</button>
+                </div>
+            </form>
+            <div class="mb-3 d-flex justify-content-evenly">
+                <button id="enable-feed"
+                        class="btn btn-outline-secondary btn-sm"
+                        type="button">Enable</button>
+                <button id="disable-feed"
+                        class="btn btn-outline-secondary btn-sm"
+                        type="button">Disable</button>
+                <button class="btn btn-outline-danger btn-sm" type="button" id="delete-feed">
+                    <img class="bi" src="./vendor/bs-icons/trash.svg" alt="Delete feed" />
+                </button>
                 <a id="open-feed-details"
                    class="btn btn-outline-secondary btn-sm"
                    role="button"
                    href="">
                     <img class="bi" src="./vendor/bs-icons/eye.svg" alt="Open feed" />
                 </a>
-            </form>
+            </div>
         </div>
         <div id="error-container" class="alert alert-danger">
+            <button id="error-nav-back"
+                    class="btn btn-outline-secondary btn-sm"
+                    type="button">
+                <img class="bi"
+                     src="./vendor/bs-icons/arrow-left.svg"
+                     alt="Go back button" />
+                Back
+            </button>
             <p>An error occurred</p>
             <pre id="error-message"></pre>
         </div>
+        <dialog id="confirm-dialog">
+            <div class="modal-header">
+                <h2 id="confirm-dialog-title" class="modal-title">Do you confirm?</h2>
+            </div>
+            <button id="confirm-dialog-cancel-btn"
+                    class="btn btn-outline-secondary"
+                    type="button">No</button>
+            <button id="confirm-dialog-confirm-btn" class="btn btn-danger" type="button">Yes</button>
+        </dialog>
         <script src="action.js" type="module"></script>
     </body>
 </html>