feat: YOLO toggle inline layout; yoloLabel/yoloDescription configurable via config.json

src/routes/+page.server.ts

@@ -1,10 +1,13 @@
-import { loadData } from '$lib/server/data';
+import { loadData, loadConfig } from '$lib/server/data';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = () => {
   const data = loadData();
+  const config = loadConfig();
   return {
     units: data.units,
-    groups: data.groups
+    groups: data.groups,
+    yoloLabel: config.yoloLabel ?? 'YOLO mode',
+    yoloDescription: config.yoloDescription ?? '(cross-group conversions)'
   };
 };

src/routes/+page.svelte

@@ -14,10 +14,12 @@
    * Supports same-group and cross-group (YOLO) conversions.
    */
 
-  let { data }: { data: { units: Unit[]; groups: Group[] } } = $props();
+  let { data }: { data: { units: Unit[]; groups: Group[]; yoloLabel: string; yoloDescription: string } } = $props();
 
   let units: Unit[] = $derived(data.units);
   let groups: Group[] = $derived(data.groups);
+  let yoloLabel: string = $derived(data.yoloLabel);
+  let yoloDescription: string = $derived(data.yoloDescription);
 
   // ── Reactive state ──────────────────────────────────────────────────────────
   let inputValue = $state<number>(1);
@@ -94,6 +96,8 @@
   );
 
   // ── URL sync ────────────────────────────────────────────────────────────────
+  // Use history.replaceState directly — goto() triggers a SvelteKit navigation
+  // which re-renders the page and steals focus from the input on every keystroke.
   $effect(() => {
     if (!browser) return;
     const params = new URLSearchParams();
@@ -104,7 +108,7 @@
     }
     const next = params.toString();
     if (next !== window.location.search.slice(1)) {
-      goto(`?${next}`, { replaceState: true, noScroll: true });
+      history.replaceState(history.state, '', `?${next}`);
     }
   });
 
@@ -176,7 +180,10 @@
 <div class="yolo-toggle-row">
   <label class="yolo-label">
     <input type="checkbox" bind:checked={yoloMode} role="switch" />
-    YOLO mode <small>(cross-group conversions)</small>
+    <span class="yolo-label-text">{yoloLabel}</span>
+    {#if yoloDescription}
+      <small class="yolo-desc">{yoloDescription}</small>
+    {/if}
   </label>
 </div>
 
@@ -198,17 +205,24 @@
 <style>
   .yolo-toggle-row {
     margin-bottom: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
   }
 
   .yolo-label {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     cursor: pointer;
     user-select: none;
+    white-space: nowrap;
+  }
+
+  .yolo-label-text {
+    font-weight: 500;
+  }
+
+  .yolo-desc {
+    color: var(--pico-muted-color);
+    white-space: nowrap;
   }
 
   .yolo-marker {