diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 280b6771..75f57e3b 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -25,7 +25,7 @@ repos:
       - id: mixed-line-ending
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.7.1
+    rev: v0.8.4
     hooks:
       - id: ruff
       # - id: ruff-format
@@ -42,7 +42,7 @@ repos:
       - id: black
 
   - repo: https://github.com/Riverside-Healthcare/djLint
-    rev: v1.35.2
+    rev: v1.36.4
     hooks:
       - id: djlint-reformat-django
       - id: djlint-django
diff --git a/catalog/sites/bangumi.py b/catalog/sites/bangumi.py
index 603f64e5..99c3d58d 100644
--- a/catalog/sites/bangumi.py
+++ b/catalog/sites/bangumi.py
@@ -132,7 +132,8 @@ def scrape(self):
         if o.get("name_cn"):
             titles[o.get("name_cn")] = "zh-cn"
         localized_title = [
-            {"lang": l or detect_language(t), "text": t} for t, l in titles.items()
+            {"lang": lang or detect_language(t), "text": t}
+            for t, lang in titles.items()
         ]
         localized_desc = (
             [{"lang": detect_language(brief), "text": brief}] if brief else []
diff --git a/catalog/templates/discover.html b/catalog/templates/discover.html
index ba52d67a..4528e7a3 100644
--- a/catalog/templates/discover.html
+++ b/catalog/templates/discover.html
@@ -41,14 +41,10 @@
                    {% if not gallery.items %}style="display:none;"{% endif %}>
             <span class="action">
               <span>
-                <a _="on click set el to the next
-                  <ul/>
-                then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
+                <a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
               </span>
               <span>
-                <a _="on click set el to the next
-                  <ul/>
-                then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
+                <a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
               </span>
             </span>
             <h5>{{ gallery.category.label }}</h5>
@@ -71,14 +67,10 @@ <h5>{{ gallery.category.label }}</h5>
                  {% if not featured_collections %}style="display:none;"{% endif %}>
           <span class="action">
             <span>
-              <a _="on click set el to the next
-                <ul/>
-              then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
+              <a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
             </span>
             <span>
-              <a _="on click set el to the next
-                <ul/>
-              then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
+              <a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
             </span>
           </span>
           <h5>{% trans "Collections" %}</h5>
diff --git a/catalog/templates/edition.html b/catalog/templates/edition.html
index 73f020a7..32d41358 100644
--- a/catalog/templates/edition.html
+++ b/catalog/templates/edition.html
@@ -79,14 +79,10 @@ <h5>contents</h5>
       <section class="entity-sort shelf" id="sibling">
         <span class="action">
           <span>
-            <a _="on click set el to the next
-              <ul/>
-            then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
+            <a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
           </span>
           <span>
-            <a _="on click set el to the next
-              <ul/>
-            then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
+            <a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
           </span>
         </span>
         <h5>{% trans 'other editions' %}</h5>
diff --git a/common/templates/_header.html b/common/templates/_header.html
index 304a6a3f..2421ebad 100644
--- a/common/templates/_header.html
+++ b/common/templates/_header.html
@@ -80,6 +80,7 @@
           <summary aria-haspopup="listbox">
             <span class="avatar">
               <img alt=""
+                   title="{% if request.user.is_authenticated %}{{ request.user.username }}{% else %}{% endif %}"
                    src="{% if request.user.is_authenticated %}{{ request.user.avatar }}{% else %}{{ user_icon }}{% endif %}" />
             </span>
           </summary>
diff --git a/journal/templates/mark.html b/journal/templates/mark.html
index 032775fd..659ffd00 100644
--- a/journal/templates/mark.html
+++ b/journal/templates/mark.html
@@ -46,17 +46,11 @@
               </div>
             </div>
             <div>
-              <span class="rating-editor {% if shelf_type == 'wishlist' %}hidden{% endif %}" _="on mousemove(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) if current_value <=10 then set star_div to the
-                <div/>
-                in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '{% trans "not rated" %}' add .yellow to star_div end on click(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) if current_value <=10 then set star_div to the
-                <div/>
-                in me set star_input to the
-                <input/>
-                in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '{% trans "not rated" %}' set star_input.value to current_value end on mouseleave(currentTarget) set star_div to the
-                <div/>
-                in me set star_input to the
-                <input/>
-                in me set current_value to star_input.value set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '{% trans "not rated" %}' end">
+              <span class="rating-editor {% if shelf_type == 'wishlist' %}hidden{% endif %}"
+                {# djlint:off #}
+                _="on mousemove(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) if current_value <=10 then set star_div to the <div/> in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '{% trans "not rated" %}' add .yellow to star_div end on click(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) if current_value <=10 then set star_div to the <div/> in me set star_input to the <input/> in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '{% trans "not rated" %}' set star_input.value to current_value end on mouseleave(currentTarget) set star_div to the <div/> in me set star_input to the <input/> in me set current_value to star_input.value set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '{% trans "not rated" %}' end"
+                {# djlint:on #}
+                id="rating_editor">
                 {{ mark.rating_grade|rating_star }}
                 <input type="hidden"
                        name="rating_grade"
diff --git a/journal/templates/profile.html b/journal/templates/profile.html
index d86f23df..5727d218 100644
--- a/journal/templates/profile.html
+++ b/journal/templates/profile.html
@@ -41,14 +41,10 @@
             <section class="entity-sort shelf" id="calendar_grid">
               <span class="action">
                 <span>
-                  <a _="on click set el to the next
-                    <ul/>
-                  then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
+                  <a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
                 </span>
                 <span>
-                  <a _="on click set el to the next
-                    <ul/>
-                  then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
+                  <a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
                 </span>
               </span>
               <h5>
@@ -78,14 +74,10 @@ <h5>
                        {% if not shelf.count %}style="display:none;"{% endif %}>
                 <span class="action">
                   <span>
-                    <a _="on click set el to the next
-                      <ul/>
-                    then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
+                    <a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
                   </span>
                   <span>
-                    <a _="on click set el to the next
-                      <ul/>
-                    then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
+                    <a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
                   </span>
                 </span>
                 <h5>
@@ -117,14 +109,10 @@ <h5>
                    {% if not collections_count %}style="display:none;"{% endif %}>
             <span class="action">
               <span>
-                <a _="on click set el to the next
-                  <ul/>
-                then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
+                <a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
               </span>
               <span>
-                <a _="on click set el to the next
-                  <ul/>
-                then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
+                <a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
               </span>
             </span>
             <h5>
@@ -157,14 +145,10 @@ <h5>
                    {% if not liked_collections_count %}style="display:none;"{% endif %}>
             <span class="action">
               <span>
-                <a _="on click set el to the next
-                  <ul/>
-                then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
+                <a _="on click set el to the next <ul/> then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
               </span>
               <span>
-                <a _="on click set el to the next
-                  <ul/>
-                then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
+                <a _="on click set el to the next <ul/> then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
               </span>
             </span>
             <h5>
diff --git a/users/templates/users/account.html b/users/templates/users/account.html
index e747de6f..b28468a6 100644
--- a/users/templates/users/account.html
+++ b/users/templates/users/account.html
@@ -318,7 +318,9 @@
                          placeholder="Gargron@mastodon.social">
                   <small id="invalid-helper">{% trans "Once deleted, account data cannot be recovered." %}</small>
                   {% if import_status.douban_pending %}
-                    <input type="submit" value="{% trans "Importing in progress, can't delete now." %}" disabled />
+                    <input type="submit"
+                           value="{% trans "Importing in progress, can't delete now." %}"
+                           disabled />
                   {% else %}
                     <input type="submit"
                            value="{% trans 'Permanently Delete' %}"
diff --git a/users/templates/users/login.html b/users/templates/users/login.html
index b8892d1c..9c9cdac8 100644
--- a/users/templates/users/login.html
+++ b/users/templates/users/login.html
@@ -52,15 +52,21 @@
         {% elif allow_any_site %}
           <div role="group">
             {% if enable_email %}
-              <button class="platform outline" _="on click add .outline to .platform then remove .outline from me then hide
-                <form/>
-                then show #login-email" id="platform-email" title="{% trans "Email" %}">
+              <button class="platform outline"
+                {# djlint:off #}
+                _="on click add .outline to .platform then remove .outline from me then hide <form/> then show #login-email"
+                {# djlint:on #}
+                id="platform-email"
+                title="{% trans 'Email' %}">
                 <i class="fa-solid fa-envelope"></i>
               </button>
             {% endif %}
-            <button class="platform outline" _="on click add .outline to .platform then remove .outline from me then hide
-              <form/>
-              then show #login-mastodon" id="platform-mastodon" title="{% trans "Fediverse (Mastodon)" %}">
+            <button class="platform outline"
+              {# djlint:off #}
+              _="on click add .outline to .platform then remove .outline from me then hide <form/> then show #login-mastodon"
+              {# djlint:on #}
+              id="platform-mastodon"
+              title="{% trans "Fediverse (Mastodon)" %}">
               <svg xmlns="http://www.w3.org/2000/svg"
                    viewBox="64 163 873 873"
                    style="width: 1em;
@@ -71,16 +77,22 @@
               <!--<i class="fa-brands fa-mastodon"></i>-->
             </button>
             {% if enable_threads %}
-              <button class="platform outline" _="on click add .outline to .platform then remove .outline from me then hide
-                <form/>
-                then show #login-threads" id="platform-threads" title="{% trans "Threads" %}">
+              <button class="platform outline"
+                {# djlint:off #}
+                _="on click add .outline to .platform then remove .outline from me then hide <form/> then show #login-threads"
+                {# djlint:on #}
+                id="platform-threads"
+                title="{% trans 'Threads' %}">
                 <i class="fa-brands fa-threads"></i>
               </button>
             {% endif %}
             {% if enable_bluesky %}
-              <button class="platform outline" _="on click add .outline to .platform then remove .outline from me then hide
-                <form/>
-                then show #login-bluesky" id="platform-bluesky" title="{% trans "Bluesky (ATProto)" %}">
+              <button class="platform outline"
+                {# djlint:off #}
+                _="on click add .outline to .platform then remove .outline from me then hide <form/> then show #login-bluesky"
+                {# djlint:on #}
+                id="platform-bluesky"
+                title="{% trans 'Bluesky (ATProto)' %}">
                 <i class="fa-brands fa-bluesky" style="font-size:85%"></i>
               </button>
             {% endif %}
diff --git a/users/templates/users/register.html b/users/templates/users/register.html
index 6335f91a..960326c7 100644
--- a/users/templates/users/register.html
+++ b/users/templates/users/register.html
@@ -23,7 +23,14 @@
             <fieldset>
               <label>
                 {% blocktrans %}Your username on {{ site_name }}{% endblocktrans %}
-                <input name="username" placeholder="{% trans "2-30 alphabets, numbers or underscore, can't be changed once saved" %}" value="{{ form.username.value|default:request.user.username|default:'' }}" required _="on input remove [@aria-invalid] end" {% if request.user.username and not form.username.errors %}aria-invalid="false" readonly{% endif %} {% if form.username.errors %}aria-invalid="true"{% endif %} pattern="^[a-zA-Z0-9_]{2,30}$" />
+                <input name="username"
+                       placeholder="{% trans "2-30 alphabets, numbers or underscore, can't be changed once saved" %}"
+                       value="{{ form.username.value|default:request.user.username|default:'' }}"
+                       required
+                       _="on input remove [@aria-invalid] end"
+                       {% if request.user.username and not form.username.errors %}aria-invalid="false" readonly{% endif %}
+                       {% if form.username.errors %}aria-invalid="true"{% endif %}
+                       pattern="^[a-zA-Z0-9_]{2,30}$" />
                 {% for error in form.username.errors %}<small>{{ error }}</small>{% endfor %}
               </label>
               <label>