Client side journal rendering

frontend/build.ts

@@ -31,7 +31,7 @@ async function runBuild(dev: boolean) {
     format: "esm",
     bundle: true,
     outfile: "../src/fava/static/app.js",
-    conditions: dev ? ["development"] : ["production"],
+    conditions: ["svelte", dev ? "development" : "production"],
     external: ["fs/promises", "module"], // for web-tree-sitter
     loader: {
       ".wasm": "file",

frontend/css/journal-table.css

@@ -41,6 +41,19 @@
   margin-top: 0.25rem;
 }
 
+.journal .head .container {
+  padding: 1.5em 1.5em 0;
+  margin-bottom: 0.25em;
+}
+
+.journal .head .table-head {
+  padding: 0 1.5em;
+}
+
+.journal .entry {
+  padding: 0 1.5em;
+}
+
 .journal p,
 .journal dl {
   border-bottom: thin solid var(--table-border);
@@ -61,52 +74,6 @@
   line-height: 16px;
 }
 
-.journal > li,
-.journal.show-custom .custom.budget,
-.journal.show-document .document.discovered,
-.journal.show-document .document.linked,
-.journal .metadata,
-.journal .postings {
-  display: none;
-}
-
-.journal .head,
-.journal.show-balance .balance,
-.journal.show-close .close,
-.journal.show-custom .custom,
-.journal.show-document .document,
-.journal.show-note .note,
-.journal.show-open .open,
-.journal.show-pad .pad,
-.journal.show-query .query {
-  display: block;
-}
-
-/* Show metadata and postings if it was toggled for the whole journal. */
-.journal.show-metadata .metadata,
-.journal.show-postings .postings {
-  display: block;
-}
-
-/* Show metadata and postings where it was explicitly toggled with the indicators. */
-.journal > li.show-full-entry .postings,
-.journal > li.show-full-entry .metadata {
-  display: block;
-}
-
-.journal.show-transaction.show-cleared .transaction.cleared,
-.journal.show-transaction.show-pending .transaction.pending,
-.journal.show-transaction.show-other .transaction.other,
-.journal.show-document.show-discovered .document.discovered,
-.journal.show-document.show-linked .document.linked,
-.journal.show-custom.show-budget .custom.budget {
-  display: block;
-}
-
-.journal .transaction:hover {
-  background: var(--journal-hover-highlight);
-}
-
 /* Metadata */
 .journal .metadata {
   padding: 2px 0;
@@ -129,6 +96,10 @@
   cursor: pointer;
 }
 
+.journal .transaction:hover {
+  background: var(--journal-hover-highlight);
+}
+
 /* There's three number columns (units, cost, price).
  * They should add about to about half of the width */
 .journal p > .num {
@@ -250,6 +221,18 @@
     flex-wrap: wrap;
   }
 
+  .journal .head .container {
+    padding: 1em 1em 0;
+  }
+
+  .journal .head .table-head {
+    padding: 0 1em;
+  }
+
+  .journal .entry {
+    padding: 0 1.5em;
+  }
+
   /* show a colored top border for all entries */
   .journal > li > p {
     border-top: thin solid var(--entry-background);

frontend/package.json

@@ -78,6 +78,7 @@
     "@fontsource/source-code-pro": "^5.0.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.0.0",
+    "@tanstack/svelte-virtual": "^3.13.12",
     "@ungap/custom-elements": "^1.0.0",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",

frontend/src/api/index.ts

@@ -79,6 +79,7 @@ interface GetAPIParams {
   narrations: undefined;
   query: Filters & { query_string: string };
   source: { filename: string };
+  journal: FiltersConversionInterval;
 }
 
 /**

frontend/src/api/validators.ts

@@ -152,6 +152,19 @@ const account_budget = object({
 });
 export type AccountBudget = ValidationT<typeof account_budget>;
 
+const simple_counter_inventory = record(number);
+export type SimpleCounterInventory = ValidationT<
+  typeof simple_counter_inventory
+>;
+
+const account_journal_entry = tuple(
+  entryValidator,
+  simple_counter_inventory,
+  simple_counter_inventory,
+);
+/** [entry, change, balance] */
+export type AccountJournalEntry = ValidationT<typeof account_journal_entry>;
+
 /** One of the Beancount source files. */
 export interface SourceFile {
   readonly file_path: string;
@@ -174,7 +187,7 @@ export const getAPIValidators = {
   balance_sheet: tree_report,
   account_report: object({
     charts: unknown,
-    journal: optional(string),
+    journal: optional(array(account_journal_entry)),
     dates: optional(array(date_range)),
     interval_balances: optional(array(account_hierarchy_validator)),
     budgets: optional(record(array(account_budget))),