fix: html-router modals and add insta snapshot tests.

Avoid nested forms in the scratchpad editor, centralize modal lifecycle in modal.js, return HTMX partials from archive, and add template compile plus layout snapshots.
This commit is contained in:
Per Stark
2026-06-03 20:20:43 +02:00
parent d2c1ea7d2a
commit 5cca8dee01
29 changed files with 1426 additions and 217 deletions
@@ -1,9 +1,11 @@
{% include "chat/streaming_response.html" %}
<!-- OOB swap targeting the form element directly -->
<form id="chat-form" hx-post="/chat/{{conversation.id}}" hx-target="#chat_container" hx-swap="beforeend"
class="relative flex gap-2" hx-swap-oob="true">
class="relative flex gap-2" hx-swap-oob="true"
hx-on::after-request="if(event.detail.successful) document.getElementById('chat-input').value=''">
<textarea autofocus required name="content" placeholder="Type your message..." rows="2"
class="nb-input h-24 pr-8 pl-2 pt-2 pb-2 flex-grow resize-none" id="chat-input"></textarea>
class="nb-input h-24 pr-8 pl-2 pt-2 pb-2 flex-grow resize-none" id="chat-input"
hx-on:keydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();htmx.trigger('#chat-form','submit')}"></textarea>
<button type="submit" class="absolute p-2 cursor-pointer right-0.5 btn-ghost btn-sm top-1">
{% include "icons/send_icon.html" %}
</button>
@@ -13,24 +15,8 @@
</form>
<script>
(function () {
const newChatStreamId = 'ai-stream-{{ user_message.id }}';
document.getElementById('chat-input').addEventListener('keydown', function (e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
htmx.trigger('#chat-form', 'submit');
}
});
// Clear textarea after successful submission
document.getElementById('chat-form').addEventListener('htmx:afterRequest', function (e) {
if (e.detail.successful) { // Check if the request was successful
document.getElementById('chat-input').value = ''; // Clear the textarea
}
});
const refreshSidebarAfterFirstResponse = function (e) {
const streamEl = document.getElementById(newChatStreamId);
if (!streamEl || e.target !== streamEl) return;
if (!e.target.closest('[data-message-id]')) return;
htmx.ajax('GET', '/chat/sidebar', {
target: '.drawer-side',