v2: minimal htmx mark-as-... functionality. #318

lemon24 · Jan 9, 2025 · a31b788 · a31b788
1 parent e65951f
commit a31b788
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/pyproject.toml b/pyproject.toml
@@ -79,6 +79,7 @@ app = [
     "PyYAML",
     # for v2
     "WTForms",
+    "jinja2-fragments",
 ]
 
 # UNSTABLE PLUGINS

diff --git a/src/reader/_app/v2/__init__.py b/src/reader/_app/v2/__init__.py
@@ -4,6 +4,7 @@
 from flask import Blueprint
 from flask import redirect
 from flask import request
+from jinja2_fragments.flask import render_block
 
 from .. import get_reader
 from .. import stream_template
@@ -70,5 +71,10 @@ def mark_as():
             case _:
                 abort(422)
 
+    if request.headers.get('hx-request') == 'true':
+        return render_block(
+            'v2/entries.html', 'entry_form', entry=reader.get_entry(entry)
+        )
+
     print(request.form['next'])
     return redirect(request.form['next'], code=303)
diff --git a/src/reader/_app/v2/templates/v2/entries.html b/src/reader/_app/v2/templates/v2/entries.html
@@ -95,8 +95,12 @@ <h2 class="h5 mb-1" style="font-size: 1.125rem">
   </p>
   {% endif %}
 
-  <form action="{{ url_for('.mark_as') }}" method="post" class="my-2">
+  {% set next = loop.index if not loop.last else loop.index - 1 -%}
+  <form action="{{ url_for('.mark_as') }}" method="post"
+    hx-post="{{ url_for('.mark_as') }}"
+    class="my-2">
     {#- TODO: aria stuff #}
+    {% block entry_form scoped %}
 
     <button type="submit" name="read"
       value="{{ 'false' if entry.read else 'true' }}"
@@ -105,7 +109,9 @@ <h2 class="h5 mb-1" style="font-size: 1.125rem">
       aria-pressed="true"
       {% endif -%}
       style="width: 4rem">
-      <i class="bi bi-check-lg"></i>
+      <i class="bi {{
+        'bi-check-circle-fill' if entry.read is true else 'bi-check-lg'
+      }}"></i>
     </button>
 
     <div class="btn-group" role="group" aria-label="importance">
@@ -116,7 +122,9 @@ <h2 class="h5 mb-1" style="font-size: 1.125rem">
         aria-pressed="true"
         {% endif -%}
         style="width: 2rem">
-        <i class="bi {{ 'bi-star-fill' if entry.important is true else 'bi-star' }}"></i>
+        <i class="bi {{
+          'bi-star-fill' if entry.important is true else 'bi-star'
+        }}"></i>
       </button>
 
       <button type="submit" name="important"
@@ -126,7 +134,9 @@ <h2 class="h5 mb-1" style="font-size: 1.125rem">
         aria-pressed="true"
         {% endif -%}
         style="width: 2rem">
-        <i class="bi bi-arrow-down"></i>
+        <i class="bi {{
+          'bi-arrow-down-circle-fill' if entry.important is false else 'bi-arrow-down'
+        }}"></i>
       </button>
     </div>
 
@@ -143,10 +153,12 @@ <h2 class="h5 mb-1" style="font-size: 1.125rem">
     <input type="hidden" name="feed-url" value="{{ entry.feed_url }}">
     <input type="hidden" name="entry-id" value="{{ entry.id }}">
 
-    {% set next = loop.index if not loop.last else loop.index - 1 -%}
+    {% if next -%}
     <input type="hidden" name="next"
       value="{{ url_for('.entries', **request.args) }}#entry-{{ next }}">
+    {%- endif %}
 
+  {% endblock %}
   </form>
 
 </div>

diff --git a/src/reader/_app/v2/templates/v2/layout.html b/src/reader/_app/v2/templates/v2/layout.html
@@ -14,6 +14,8 @@
     <!-- styles flash if this is at the end and not in head -->
     <script src="{{ url_for('v2.static', filename='theme.js') }}"></script>
 
+    <script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+
   </head>
   <body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,8 @@ @@
         <!-- styles flash if this is at the end and not in head -->
         <script src="{{ url_for('v2.static', filename='theme.js') }}"></script>
+        <script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
       </head>
       <body>
@@ Expand Down @@