From 9429d203bd014c7840d160870b97e62fbbcddd5b Mon Sep 17 00:00:00 2001
From: Francisco Penedo Alvarez <fran@franpenedo.com>
Date: Wed, 1 Apr 2026 11:37:27 +0200
Subject: [PATCH] Fix #2: Focus jumps to genre after status change

No idea why this is happening, but I solved it by making htmx swap only
the user status containers instead of the whole page. This keeps the
toggle status intact and prevents the jump.
---
 src/hxbooks/templates/book/detail.html.j2               | 4 ++--
 src/hxbooks/templates/components/reading_status.html.j2 | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hxbooks/templates/book/detail.html.j2 b/src/hxbooks/templates/book/detail.html.j2
index 9024223..946c162 100644
--- a/src/hxbooks/templates/book/detail.html.j2
+++ b/src/hxbooks/templates/book/detail.html.j2
@@ -23,7 +23,7 @@
   {% import 'components/user_book_vars.html.j2' as vars with context %}
   <div class="col-12 d-lg-none mb-3">
     <input type="checkbox" id="status-toggle" class="status-toggle-checkbox" hidden>
-    <div class="user-status-card">
+    <div class="user-status-card" id="user-status-card">
       <label for="status-toggle" class="status-bar">
         <div class="d-flex justify-content-between align-items-center">
           <div class="d-flex align-items-center gap-2">
@@ -110,7 +110,7 @@
       <div class="card-header">
         <h6 class="mb-0">{{ session.get('viewing_as_user').title() }}'s Data</h6>
       </div>
-      <div class="card-body">
+      <div class="card-body" id="user-status">
         {% include 'components/reading_status.html.j2' %}
         {% include 'components/wishlist_status.html.j2' %}
       </div>
diff --git a/src/hxbooks/templates/components/reading_status.html.j2 b/src/hxbooks/templates/components/reading_status.html.j2
index 35c09e2..755c850 100644
--- a/src/hxbooks/templates/components/reading_status.html.j2
+++ b/src/hxbooks/templates/components/reading_status.html.j2
@@ -6,7 +6,7 @@
   <h6 class="text-muted mb-2">📖 Reading Status</h6>
 
   <!-- Action Buttons -->
-  <div class="mb-3">
+  <div class="mb-3" hx-select-oob="#flash-messages-container,#user-status-card,#user-status" hx-swap="none show:none">
     {% if vars.current_reading %}
     <form action="/book/{{ book.id }}/reading/finish" method="POST" class="d-inline">
       <button type="submit" class="btn btn-success btn-sm me-2">✓ Finish Reading</button>
@@ -29,7 +29,7 @@
   <div class="alert alert-light border py-2 mb-3">
     <form action="/book/{{ book.id }}/reading/{{ vars.completed_readings[0].id }}/update" method="POST"
       class="row align-items-center g-2" hx-trigger="change,submit" hx-swap="none show:none"
-      hx-select-oob="#flash-messages-container:outerHTML" hx-target="this">
+      hx-select-oob="#flash-messages-container" hx-target="this">
       <!-- Hidden fields to preserve other reading data -->
       <input type="hidden" name="start_date" value="{{ vars.completed_readings[0].start_date.strftime('%Y-%m-%d') }}">
       <input type="hidden" name="end_date"