minne/html-router/templates/chat/drawer.html

<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 ">
    <!-- Sidebar content here -->
    <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 %}
    {% 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>