From 761fa698248549443459a0588baa3116826ce9e0 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 5 Mar 2026 18:01:14 -0500
Subject: [PATCH] fix(badges): render QR code on badge front when show_qr_front
 is set
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed three issues in ae_comp__badge_obj_view.svelte:
1. Bug: {#await} block used src={qr_data_url} (the Promise) instead of src={result}
   (the resolved data URL) — QR image never displayed correctly on badge front.
2. Layout: .special div had no flex context; added flex-row + items-end so the QR
   sits at the bottom-right of the body section via ml-auto.
3. Cleanup: removed dead second QR block that awaited event_badge_qr_id_get_promise
   (always null), which could never render.

Also marks CRUD v2 refactor as complete in TODO__Agents.md.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 documentation/TODO__Agents.md                 |  2 +-
 .../[badge_id]/ae_comp__badge_obj_view.svelte | 73 +++++++------------
 2 files changed, 27 insertions(+), 48 deletions(-)

diff --git a/documentation/TODO__Agents.md b/documentation/TODO__Agents.md
index 470f5dbe..dc66ba83 100644
--- a/documentation/TODO__Agents.md
+++ b/documentation/TODO__Agents.md
@@ -23,7 +23,7 @@ Key questions before starting: which routes, does the Electron app scan, what do
 lead record look like in the DB?
 
 ### [General]
-- **CRUD v2 Refactor:** Finalize retirement of `Element_ae_crud_v2.svelte` in favor of V3 Editor.
+- ~~**CRUD v2 Refactor:** Finalize retirement of `Element_ae_crud_v2.svelte` in favor of V3 Editor.~~ ✅ Done (2026-03-05) — all non-IDAA usages migrated; IDAA had zero usages.
 - **Temp Cleanup:** Auto-removal of native `.tmp` files older than 24h.
 - **`window.print()` for badge print button:** Wire the existing `handle_print_badge()` to trigger `window.print()`. Browser print works well across Chrome/Chromium/Firefox — no Electron needed.
 - **Input Field Audit:** Several input fields are missing `name`/`id` attributes or `data-testid`. Known examples: badge override fields in `ae_comp__badge_obj_view.svelte`; template name input in `ae_comp__badge_template_form.svelte`. Matters for: accessibility, autofill, label associations, and test targeting. (For tests, use `getByLabel()` rather than `input[value*=...]` which only checks the HTML attribute, not the Svelte-bound DOM property.)
diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
index e8fac23d..f3b4106e 100644
--- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
@@ -990,33 +990,35 @@ onkeypress={() => {
                     </div>
                 {/if}
 
-                {#if ['front_bool', 'front_back_bool'].includes(option_ticket_1_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_2_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_3_display_opt) || lq__event_badge_template_obj.show_qr_front || edit_mode_active}
-                    <div class="special">
-                        <span class="badge_body_special_left">
-                            {#if option_ticket_1_override}<span
-                                    class="ticket_1_code fg_green fas fa-star"
-                                ></span>{/if}
-                        </span>
-                        <span class="badge_body_special_right">
-                            {#if option_ticket_2_override}
-                                <span class=" ticket_2_code fg_red fas fa-star"
-                                ></span>
-                            {/if}
-                            {#if option_ticket_3_override}
-                                <span class="ticket_3_code fg_blue fas fa-star"
-                                ></span>
-                            {/if}
-                        </span>
-                        {#if lq__event_badge_template_obj.show_qr_front}
+                {#if ['front_bool', 'front_back_bool'].includes(option_ticket_1_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_2_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_3_display_opt) || $lq__event_badge_template_obj?.show_qr_front || edit_mode_active}
+                    <!-- flex-col so ticket icons row and QR stack vertically; QR is centered -->
+                    <div class="special flex flex-col items-center w-full">
+                        <div class="flex flex-row justify-between w-full">
+                            <span class="badge_body_special_left">
+                                {#if option_ticket_1_override}<span
+                                        class="ticket_1_code fg_green fas fa-star"
+                                    ></span>{/if}
+                            </span>
+                            <span class="badge_body_special_right">
+                                {#if option_ticket_2_override}
+                                    <span class=" ticket_2_code fg_red fas fa-star"
+                                    ></span>
+                                {/if}
+                                {#if option_ticket_3_override}
+                                    <span class="ticket_3_code fg_blue fas fa-star"
+                                    ></span>
+                                {/if}
+                            </span>
+                        </div>
+                        {#if $lq__event_badge_template_obj?.show_qr_front}
                             {#await qr_data_url}
-                                Generating...
+                                <!-- QR generating — show nothing to avoid layout shift -->
                             {:then result}
-                                {#if qr_data_url}
+                                {#if result}
                                     <img
-                                        class="qr_code mecard_qr"
-                                        style=""
-                                        src={qr_data_url}
-                                        alt="missing QR code"
+                                        class="qr_code mecard_qr w-[0.75in] max-w-[0.75in]"
+                                        src={result}
+                                        alt="Badge QR code"
                                     />
                                 {/if}
                             {/await}
@@ -1082,29 +1084,6 @@ onkeypress={() => {
                 {/if}
             </div>
 
-            {#if $lq__event_badge_template_obj.show_qr_front}
-                {#await event_badge_qr_id_get_promise}
-                    Generating...
-                {:then result}
-                    {#if event_badge_qr_id_get_promise}
-                        <!-- {img_obj_url} -->
-
-                        <img
-                            class="qr_code mecard_qr"
-                            style=""
-                            class:v_hide_print={hide_qr}
-                            src={qr_data_url}
-                            alt="missing QR code"
-                            ondblclick={() => {
-                                // (hide_qr) ? hide_qr = !hide_qr : hide_qr;
-                                hide_qr ? (hide_qr = false) : (hide_qr = true);
-                            }}
-                        />
-                    {/if}
-                {/await}
-            {/if}
-
-            <!-- </div> -->
             <!-- badge class div end -->
         </section>
         <!-- *** badge section end *** -->