:)

templates/story_form.html

@@ -2,12 +2,31 @@
     <div class="modal" onclick="event.stopPropagation()">
         <div class="modal-header">
             <h2>Add Story</h2>
-            <button class="modal-close" onclick="this.closest('.modal-overlay').remove()">&times;</button>
+            <button
+                class="modal-close"
+                onclick="this.closest('.modal-overlay').remove()"
+            >
+                ×
+            </button>
         </div>
-        <form method="POST" action="/rooms/{{.ID}}/stories" class="auth-form">
+        <form
+            method="POST"
+            action="/rooms/{{.ID}}/stories"
+            hx-post="/rooms/{{.ID}}/stories"
+            hx-target="#stories-panel"
+            hx-swap="outerHTML"
+            hx-on::after-request="if (event.detail.successful) document.getElementById('modal-container').innerHTML = ''"
+            class="auth-form"
+        >
             <div class="form-group">
                 <label class="form-label">Story Title</label>
-                <input class="form-input" type="text" name="title" placeholder="e.g. As a user, I can..." required />
+                <input
+                    class="form-input"
+                    type="text"
+                    name="title"
+                    placeholder="e.g. As a user..."
+                    required
+                />
             </div>
             <button class="btn-primary" type="submit">Add Story</button>
         </form>