feat: Refactor transaction management with nanostores and convert components to React

- Added @nanostores/react for state management.
- Created AccountSummary component to display account balance.
- Replaced AddTransactionForm.astro with AddTransactionForm.tsx for better state handling.
- Introduced TransactionTable.tsx for displaying transactions with edit/delete functionality.
- Updated Sidebar.astro and MainContent.astro to use React components.
- Implemented transactionStore.ts for managing current account ID and transaction editing state.
- Removed obsolete AddTransactionForm.astro and related scripts.
- Enhanced error handling and loading states in transaction forms.
This fixes issues #7, #8, #9, #10, #11

src/components/Sidebar.astro

@@ -1,11 +1,10 @@
 ---
-import AddTransactionForm from './AddTransactionForm.astro';
-import AccountSummary from './AccountSummary.astro';
+import AccountSummary from './AccountSummary.tsx'; // Import the React component instead of the Astro one
+import AddTransactionForm from './AddTransactionForm.tsx';
 import type { Account } from '../types';
 
 interface Props {
     accounts: Account[];
-    /* The account to show in the sidebar. */
     initialAccount: Account;
 }
 
@@ -14,6 +13,10 @@ 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">
+            + New Txn
+        </button>
     </div>
     <nav class="account-nav">
         <h3>Accounts</h3>
@@ -26,9 +29,36 @@ const { accounts, initialAccount } = Astro.props;
         </select>
     </nav>
 
-    <AccountSummary account={initialAccount} /> {}
+    {/* Use the React AccountSummary component, remove account prop */}
+    <AccountSummary client:load />
 
-    /* Make form toggle interactive */
-    <AddTransactionForm client:load /> {}
+    {/* 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 />
+    </section>
+</aside>
 
-</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');
+
+    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');
+            // Optional: Focus first field when expanding
+            if (!isExpanded) {
+                // Cast the result to HTMLElement before calling focus
+                (formSection.querySelector('input, select, textarea') as HTMLElement)?.focus();
+            }
+        });
+    }
+</script>