Fix: Update button remaining disabled in transaction edit mode

This commit resolves an issue where the Update button in the transaction form
would remain disabled when attempting to edit a transaction. The problem was
in how the transactionStore was managing state updates during transaction editing.

Key changes:
- Enhanced startEditingTransaction function in transactionStore.ts to ensure proper reactivity
- Added clean copy creation of transaction objects to avoid reference issues
- Implemented a state update cycle with null value first to force reactivity
- Added a small timeout to ensure state changes are properly detected by components

The Transaction form now correctly enables the Update button when in edit mode,
regardless of account selection state.

src/components/Sidebar.astro

@@ -1,31 +1,41 @@
 ---
-import type { Account } from '../types';
-import AccountSummary from './AccountSummary.tsx'; // Import the React component instead of the Astro one
-import AddTransactionForm from './AddTransactionForm.tsx';
+import type { Account } from "../types";
+import AccountSummary from "./AccountSummary.tsx"; // Import the React component instead of the Astro one
+import AddTransactionForm from "./AddTransactionForm.tsx";
 
 interface Props {
-  accounts: Account[];
-  initialAccount: Account;
+    accounts: Account[];
+    initialAccount: Account;
 }
 
 const { accounts, initialAccount } = Astro.props;
 ---
+
 <aside class="sidebar">
     <div class="sidebar-header">
         <h2>My finances</h2>
         {/* Add button to toggle form visibility */}
-        <button id="toggle-add-txn-btn" aria-expanded="false" aria-controls="add-transaction-section">
+        <button
+            id="toggle-add-txn-btn"
+            aria-expanded="false"
+            aria-controls="add-transaction-section"
+        >
             + New Txn
         </button>
     </div>
     <nav class="account-nav">
         <h3>Accounts</h3>
         <select id="account-select" name="account">
-            {accounts.map(account => (
-                <option value={account.id} selected={account.id === initialAccount.id}>
-                    {account.name} (***{account.last4})
-                </option>
-            ))}
+            {
+                accounts.map((account) => (
+                    <option
+                        value={account.id}
+                        selected={account.id === initialAccount.id}
+                    >
+                        {account.name} (***{account.accountNumber.slice(-3)})
+                    </option>
+                ))
+            }
         </select>
     </nav>
 
@@ -34,31 +44,38 @@ const { accounts, initialAccount } = Astro.props;
 
     {/* Section to contain the React form, initially hidden */}
     <section id="add-transaction-section" class="collapsible collapsed">
-         {/*
+        {
+            /*
             Use the React component here.
             It now gets its state (currentAccountId, transactionToEdit)
             directly from the Nano Store.
-         */}
-         <AddTransactionForm client:load />
+         */
+        }
+        <AddTransactionForm client:load />
     </section>
 </aside>
 
 {/* Keep the script for toggling visibility for now */}
 <script>
-    const toggleButton = document.getElementById('toggle-add-txn-btn');
-    const formSection = document.getElementById('add-transaction-section');
+    const toggleButton = document.getElementById("toggle-add-txn-btn");
+    const formSection = document.getElementById("add-transaction-section");
 
     if (toggleButton && formSection) {
-        toggleButton.addEventListener('click', () => {
-            const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true';
-            toggleButton.setAttribute('aria-expanded', String(!isExpanded));
-            formSection.classList.toggle('collapsed');
-            formSection.classList.toggle('expanded');
+        toggleButton.addEventListener("click", () => {
+            const isExpanded =
+                toggleButton.getAttribute("aria-expanded") === "true";
+            toggleButton.setAttribute("aria-expanded", String(!isExpanded));
+            formSection.classList.toggle("collapsed");
+            formSection.classList.toggle("expanded");
             // Optional: Focus first field when expanding
             if (!isExpanded) {
                 // Cast the result to HTMLElement before calling focus
-                (formSection.querySelector('input, select, textarea') as HTMLElement)?.focus();
+                (
+                    formSection.querySelector(
+                        "input, select, textarea",
+                    ) as HTMLElement
+                )?.focus();
             }
         });
     }
-</script>
+</script>