fix(budgets,tags,piggy-banks,dashboard): live buttons that answer in place, lucide icons, mobile wrapping

src/lib/components/accounts/Reconcile.svelte

@@ -56,6 +56,7 @@
   let busy = $state(false);
   let status = $state("");
   let failure = $state("");
+  let pressed = $state(false);
 
   const account = createQuery(() => ({
     queryFn: () => api<One<Account>>(`/v1/accounts/${id}`),
@@ -179,6 +180,17 @@
   const canCorrect = $derived(Boolean(reconciliationId));
   const correcting = $derived(correct && canCorrect && difference !== 0);
   const ready = $derived(before.isSuccess && after.isSuccess && list.isSuccess);
+  const hint = $derived.by(() => {
+    if (!pressed) {
+      return "";
+    }
+    if (!ready) {
+      return "Balances are still loading";
+    }
+    return selected.length === 0 && !correcting
+      ? "Tick the transactions to clear first"
+      : "";
+  });
 
   function setDates(nextStart: string, nextEnd: string) {
     if (!(nextStart && nextEnd) || nextStart > nextEnd) {
@@ -241,7 +253,8 @@
   }
 
   async function store() {
-    if (busy || !ready || (selected.length === 0 && !correcting)) {
+    pressed = true;
+    if (busy || hint) {
       return;
     }
     busy = true;
@@ -525,10 +538,7 @@
         </fieldset>
       {/if}
       <div class="flex flex-wrap items-center gap-2">
-        <Button
-          disabled={busy || !ready || (selected.length === 0 && !correcting)}
-          onclick={store}
-          type="button"
+        <Button disabled={busy} onclick={store} type="button"
           >Store reconciliation</Button
         >
         <span class="flex gap-1">
@@ -536,6 +546,9 @@
             <span class="kbd">{key}</span>
           {/each}
         </span>
+        {#if hint}
+          <span class="text-[12px] text-expense" role="alert">{hint}</span>
+        {/if}
       </div>
       {#if status}
         <p class="text-[12px] text-cladd-fg-soft" role="status">{status}</p>