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/stores/transactionStore.ts

@@ -0,0 +1,48 @@
+import { atom } from "nanostores";
+import type { Transaction } from "../types";
+
+// Atom to hold the ID of the currently selected account
+export const currentAccountId = atom<string | null>(null);
+
+// Atom to hold the transaction object when editing, or null otherwise
+export const transactionToEdit = atom<Transaction | null>(null);
+
+// Atom to trigger refreshes in components that depend on external changes
+export const refreshKey = atom<number>(0);
+
+// Action to increment the refresh key, forcing dependent effects to re-run
+export function triggerRefresh() {
+  refreshKey.set(refreshKey.get() + 1);
+}
+
+// Action to set the transaction to be edited
+export function startEditingTransaction(transaction: Transaction) {
+  transactionToEdit.set(transaction);
+  // Optionally, trigger UI changes like expanding the form here
+  // document.getElementById('add-transaction-section')?.classList.replace('collapsed', 'expanded');
+  // document.getElementById('toggle-add-txn-btn')?.setAttribute('aria-expanded', 'true');
+}
+
+// Action to clear the edit state
+export function cancelEditingTransaction() {
+  transactionToEdit.set(null);
+  // Optionally, collapse the form
+  // document.getElementById('add-transaction-section')?.classList.replace('expanded', 'collapsed');
+  // document.getElementById('toggle-add-txn-btn')?.setAttribute('aria-expanded', 'false');
+}
+
+// Action triggered after a transaction is saved (created or updated)
+export function transactionSaved(transaction: Transaction) {
+  // Clear edit state if the saved transaction was the one being edited
+  if (transactionToEdit.get()?.id === transaction.id) {
+    transactionToEdit.set(null);
+  }
+  // Potentially trigger UI updates or refreshes here
+  // This might involve dispatching a custom event or calling a refresh function
+  document.dispatchEvent(
+    new CustomEvent("transactionSaved", { detail: { transaction } })
+  );
+
+  // Trigger a general refresh after saving too, to update balance
+  triggerRefresh();
+}