implemented word count for setting bio

hushline/static/css/style.css

@@ -1147,15 +1147,33 @@ p.helper {
  outline-offset: 2px;
 }
 
+.label-with-wordcount {
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+ flex-direction: column;
+ margin-bottom: .5rem;
+}
+
+.label-with-wordcount label {
+ margin-bottom: 0;
+}
+
 button[name="update_directory_visibility"] {
  visibility: hidden;
  display: none;
 }
 
+@media(min-width: 480px) {
+ .label-with-wordcount {
+ flex-direction: row;
+ align-items: center;
+ }
+}
+
 @media only screen and (max-width: 480px) {
  #searchInput {
  min-width: 100%;
-
  }
 
  .search-box {

hushline/static/js/settings.js

@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
  // Tab functionality
  const tabs = document.querySelectorAll('.tab');
  const tabContents = document.querySelectorAll('.tab-content');
+ const bioCountEl = document.querySelector('.bio-count');
 
  function removeActiveClasses() {
  tabs.forEach(tab => tab.classList.remove('active'));
@@ -37,4 +38,8 @@ document.addEventListener('DOMContentLoaded', function() {
  document.querySelector("button[name='update_directory_visibility']").click();
  }, 200)
  });
+
+ document.getElementById('bio').addEventListener('keyup', function(e) {
+ bioCountEl.textContent = e.target.value.length;
+ });
 });

hushline/templates/settings.html

@@ -56,7 +56,10 @@ <h3>Public User Directory</h3>
  <h3>Add Your Bio</h3>
  <form method="POST" action="{{ url_for('settings.index') }}">
  <div class="form-group">
- <label for="bio">Bio (up to 250 characters):</label>
+ <div class="label-with-wordcount">
+ <label for="bio">Bio (up to 250 characters):</label>
+ <span><span class="bio-count">0</span>/250</span>
+ </div>
  <textarea id="bio" name="bio" rows="4" maxlength="250">{{ user.bio or '' }}</textarea>
  </div>
  <button type="submit" name="update_bio">Update Bio</button>