feat: chat conversation list titles, sorting, etc

html-router/templates/chat/drawer.html

@@ -1,15 +1,44 @@
 <div class="drawer-side z-50 max-h-[calc(100vh-65px)]">
   <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
-  <ul class="menu bg-base-200 text-base-content w-72">
+  <ul class="menu bg-base-200 text-base-content w-72 ">
     <!-- Sidebar content here -->
-    <li class="mt-4 cursor-pointer "><a href="/chat" hx-boost="true" class="flex justify-between">Create new
+    <li class=" mt-4 cursor-pointer "><a href=" /chat" hx-boost="true" class="flex justify-between">Create new
         chat<span>{% include
           "icons/edit_icon.html" %}
         </span></a></li>
     <div class="divider"></div>
     {% for conversation in conversation_archive %}
-    <li><a href="/chat/{{conversation.id}}" hx-boost="true">{{conversation.title}} - {{conversation.created_at}}</a>
+    {% if edit_conversation_id == conversation.id %}
+    <!-- Render the editable title form variant -->
+    <li class="align-center" id="conversation-{{ conversation.id }}">
+      <form hx-patch="/chat/{{ conversation.id }}/title" hx-target=".drawer-side" hx-swap="outerHTML"
+        class="flex items-center gap-2">
+        <input type="text" name="title" value="{{ conversation.title }}" class="input input-sm" />
+        <button type="submit">{% include "icons/check_icon.html" %}
+        </button>
+        <button type="button" hx-get="/chat/sidebar" hx-target=".drawer-side" hx-swap="outerHTML">{% include
+          "icons/x_icon.html" %}
+        </button>
+      </form>
     </li>
+    {% else %}
+    <!-- Render the normal view mode conversation item -->
+    <li class="align-center" id="conversation-{{ conversation.id }}">
+      <div class="justify-between">
+        <a href="/chat/{{ conversation.id }}" hx-boost="true">
+          {{ conversation.title }} - {{ conversation.created_at | datetimeformat(format="short", tz=user.timezone) }}
+        </a>
+        <div class="flex gap-0.5">
+          <button hx-get="/chat/{{ conversation.id }}/title" hx-target=".drawer-side" hx-swap="outerHTML">
+            {% include "icons/edit_icon.html" %}
+          </button>
+          <button hx-delete="/chat/{{ conversation.id }}" hx-target=".drawer-side" hx-swap="outerHTML">
+            {% include "icons/delete_icon.html" %}
+          </button>
+        </div>
+      </div>
+    </li>
+    {% endif %}
     {% endfor %}
   </ul>
 </div>

html-router/templates/icons/check_icon.html

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+  class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+</svg>

html-router/templates/icons/x_icon.html

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+  class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>