chore(badges): add 'Start Here' helper button to focus fulltext search input

src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_search.svelte

@@ -12,7 +12,10 @@ import {
     LoaderCircle,
     QrCode,
     RemoveFormatting,
-    Search
+    Search,
+
+    StepForward
+
 } from '@lucide/svelte';
 import { ae_loc, ae_api } from '$lib/stores/ae_stores';
 import { events_sess } from '$lib/stores/ae_events_stores';
@@ -92,10 +95,11 @@ function handle_qr_scan_result(event: {
                 handle_search_trigger();
             })}
             autocomplete="off"
-            class="search_form bg-primary-50-950 border-primary-100-900 flex w-full max-w-7xl flex-col sm:flex-row flex-wrap items-center justify-center gap-2 rounded-lg px-2 py-2 shadow-md md:px-12">
+            class="search_form bg-primary-50-950 border-primary-100-900 flex w-full max-w-4xl flex-col sm:flex-row flex-wrap items-center justify-center gap-2 rounded-lg px-2 py-2 shadow-lg md:px-12 outline">
             <div
-                class="flex grow flex-col md:flex-row flex-wrap items-center justify-center gap-2">
+                class="flex grow flex-col xl:flex-row flex-wrap items-center justify-center gap-2">
                 {#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || $ae_loc.manager_access}
+                    <div class="flex flex-row flex-wrap items-center justify-center gap-1">
                         <span class="flex flex-row flex-wrap items-center justify-center gap-1">
                         <select
                             bind:value={badges_loc.current.search_badge_type_code}
@@ -152,22 +156,54 @@ function handle_qr_scan_result(event: {
                                 }
                             }}
                             class="input input-sm max-w-fit px-1 text-xs" />
+                    </div>
                 {/if}
 
+                <div class="flex grow flex-row items-center justify-center gap-2">
+
+                    <!-- An extra "start" button that will just set the focus to the input form field -->
+                    <button
+                        type="button"
+                        onclick={() => document.getElementById('badge_fulltext_search_qry_str')?.focus()}
+                        aria-label="Start here — focus search field"
+                        data-testid="badge-start-btn"
+                        class="btn btn-sm preset-filled-secondary-300-700"
+                        class:opacity-30={!!badges_loc.current.fulltext_search_qry_str}
+                        >
+                        <StepForward size="1em" class="mx-1" />
+                        Start Here
+                    </button>
+
+                    <!-- svelte-ignore a11y_autofocus -->
                     <input
                         type="search"
+                        autofocus
                         placeholder="name, email, company, organization, etc."
                         id="badge_fulltext_search_qry_str"
                         bind:value={badges_loc.current.fulltext_search_qry_str}
                         autocomplete="off"
                         data-lpignore="true"
-                    class="input grow font-mono text-lg transition-all focus:bg-white min-w-96 md:max-w-1/2 border-l-2 border-b-2 border-l-primary-500 border-b-primary-500"
+                        class="
+                            input grow
+                            min-w-96 md:max-w-1/2
+                            transition-all
+                            font-mono text-lg
+                            bg-red-50-900 dark:bg-red-50-950
+                            focus:bg-white
+                            focus:text-black
+                            border border-l-2 border-b-2
+                            border-l-primary-500 border-b-primary-500
+                            border-r-primary-300 border-t-primary-300
+                            dark:border-l-primary-800 dark:border-b-primary-800
+                            "
                         onkeyup={(e) => {
                             if (e.key === 'Enter') {
                                 handle_search_trigger();
                             }
                         }}
                         title="Search by name, email, etc. Press Enter." />
+
+                </div>
             </div>
 
             {#if (badges_loc.current.fulltext_search_qry_str ?? '').trim().length < effective_min_chars}
@@ -202,6 +238,8 @@ function handle_qr_scan_result(event: {
                         badges_loc.current.qry_printed_status = 'all';
                         badges_loc.current.qry_affiliations = '';
                         handle_search_trigger();
+
+                        document.getElementById('badge_fulltext_search_qry_str')?.focus();
                     }}
                     class="
                     hover:text-tertiary-800-200 hover:bg-tertiary-200-800 active:bg-surface-200-700 flex items-center justify-center gap-1 px-3 py-2 text-sm font-bold transition-all duration-1000 hover:duration-300 min-w-0 preset-outlined-tertiary rounded-lg border border-tertiary-200-800