From d17d8776a6bdfc7f7345b0d3d6c824d164486836 Mon Sep 17 00:00:00 2001
From: Umang Varma <umangv@google.com>
Date: Mon, 6 Jan 2025 20:54:06 -0800
Subject: [PATCH 1/2] Bulk importer for Fava

This is my first pass at making a bulk importer for Fava.

Known issues that I hope to address:
 * Checkboxes don't honor shift-clicks to select a range
 * Doesn't use Svelte v5 runes.

Nice to haves that I also hope to work on in the future:
 * A drag and drop interface for moving transactions (either
   individually, or all selected transactions).
---
 frontend/css/bulk-importer.css                |  41 ++++
 frontend/css/style.css                        |   8 +-
 frontend/src/api/validators.ts                |   1 +
 frontend/src/main.ts                          |   1 +
 .../reports/bulkimporter/BulkExtract.svelte   | 221 ++++++++++++++++++
 .../bulkimporter/IndividualEntryEdit.svelte   |  59 +++++
 .../reports/bulkimporter/OtherEntryRow.svelte |  60 +++++
 .../bulkimporter/SimpleTransactionRow.svelte  |  37 +++
 frontend/src/reports/bulkimporter/index.ts    |  58 +++++
 frontend/src/reports/import/FileList.svelte   |   4 +-
 frontend/src/reports/import/Import.svelte     |  32 ++-
 src/fava/core/fava_options.py                 |   1 +
 12 files changed, 509 insertions(+), 14 deletions(-)
 create mode 100644 frontend/css/bulk-importer.css
 create mode 100644 frontend/src/reports/bulkimporter/BulkExtract.svelte
 create mode 100644 frontend/src/reports/bulkimporter/IndividualEntryEdit.svelte
 create mode 100644 frontend/src/reports/bulkimporter/OtherEntryRow.svelte
 create mode 100644 frontend/src/reports/bulkimporter/SimpleTransactionRow.svelte
 create mode 100644 frontend/src/reports/bulkimporter/index.ts

diff --git a/frontend/css/bulk-importer.css b/frontend/css/bulk-importer.css
new file mode 100644
index 000000000..8fd22c93a
--- /dev/null
+++ b/frontend/css/bulk-importer.css
@@ -0,0 +1,41 @@
+.bulk-importer span.select,
+.bulk-importer span.edit {
+    width: 2rem;
+}
+
+.bulk-importer span.flag {
+    width: 3rem;
+}
+
+.bulk-importer span.description {
+    flex: 1;
+}
+
+.bulk-importer span.datecell {
+    width: 6rem;
+}
+
+.bulk-importer span.datecell,
+.bulk-importer span.flag {
+    text-align: center;
+    background-color: var(--entry-background);
+}
+
+.bulk-importer span.edit button {
+    padding: 2px 4px;
+    margin: 0;
+    font-weight: bold;
+    background: var(--background);
+}
+
+.bulk-importer span.edit button:hover {
+    background: var(--background-darker);
+}
+
+.bulk-importer .postings {
+    font-size: 0.9em;
+    background-color: var(--journal-postings);
+}
+.bulk-importer .duplicate {
+    text-decoration: line-through;
+  }
\ No newline at end of file
diff --git a/frontend/css/style.css b/frontend/css/style.css
index 5aac33bd4..048e52bb5 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -186,7 +186,7 @@
   }
 }
 
-.journal .balance {
+.journal .balance, .bulk-importer .balance {
   --entry-background: hsl(120deg 100% 90%);
 }
 
@@ -230,7 +230,7 @@
   --entry-background: hsl(35deg 100% 80%);
 }
 
-.journal {
+.journal, .bulk-importer {
   --journal-postings: hsl(0deg 0% 92%);
   --journal-metadata: hsl(210deg 44% 67%);
   --journal-tag: hsl(210deg 61% 64%);
@@ -242,7 +242,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    .journal .balance {
+    .journal .balance, .bulk-importer .balance {
       --entry-background: hsl(120deg 50% 15%);
     }
 
@@ -286,7 +286,7 @@
       --entry-background: hsl(35deg 100% 20%);
     }
 
-    .journal {
+    .journal, .bulk-importer {
       --journal-postings: hsl(0deg 0% 10%);
       --journal-hover-highlight: hsl(0deg 0% 20% / 60%);
     }
diff --git a/frontend/src/api/validators.ts b/frontend/src/api/validators.ts
index 77d44a8c2..70043bd3c 100644
--- a/frontend/src/api/validators.ts
+++ b/frontend/src/api/validators.ts
@@ -66,6 +66,7 @@ const fava_options = object({
   insert_entry: array(
     object({ date: string, filename: string, lineno: number, re: string }),
   ),
+  use_bulk_importer: boolean,
   use_external_editor: boolean,
 });
 
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 0344f5fff..44080fc93 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -19,6 +19,7 @@ import "../css/help.css";
 import "../css/journal-table.css";
 import "../css/notifications.css";
 import "../css/tree-table.css";
+import "../css/bulk-importer.css";
 // Polyfill for customised builtin elements in Webkit
 import "@ungap/custom-elements";
 
diff --git a/frontend/src/reports/bulkimporter/BulkExtract.svelte b/frontend/src/reports/bulkimporter/BulkExtract.svelte
new file mode 100644
index 000000000..f2bf62bcd
--- /dev/null
+++ b/frontend/src/reports/bulkimporter/BulkExtract.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+  import type { Entry as EntryType } from "../../entries";
+  import { _ } from "../../i18n";
+  import ModalBase from "../../modals/ModalBase.svelte";
+  import SimpleTransactionRow from "./SimpleTransactionRow.svelte";
+  import { accounts } from "../../stores";
+  import { slide } from "svelte/transition";
+
+  import { SimpleTransaction } from ".";
+  import { Transaction } from "../../entries";
+  import AutocompleteInput from "../../AutocompleteInput.svelte";
+  import OtherEntryRow from "./OtherEntryRow.svelte";
+  import IndividualEntryEdit from "./IndividualEntryEdit.svelte";
+
+  export let entries: EntryType[];
+  export let save: () => void;
+  export let close: () => void;
+  export let account: string;
+
+  // The new target account (when moving simple transactions in bulk).
+  let new_target: string;
+  // The entry that we want to manually edit. Starts off undefined, is set when
+  // the user clicks the vertical elipses to edit, and unset when they close the
+  // editor.
+  let entry_to_edit: EntryType | undefined = undefined;
+
+  // Simple transactions grouped by their target account.
+  let transactions_by_target: Map<string, SimpleTransaction[]>;
+  let simple_transactions: SimpleTransaction[];
+  let other_entries: EntryType[];
+  $: {
+    // When `entries` changes, we recompute simple_transactions, other_entries,
+    // and transactions_by_target.
+    simple_transactions = [];
+    other_entries = [];
+    entries.forEach((entry) => {
+      try {
+        if (entry instanceof Transaction) {
+          simple_transactions.push(
+            new SimpleTransaction(entry, account, simple_transactions.length),
+          );
+          return;
+        }
+      } finally {
+      }
+      other_entries.push(entry);
+    });
+    transactions_by_target = new Map();
+    simple_transactions.forEach((st) => {
+      let target = st.getTargetAccount();
+      let transactions = transactions_by_target.get(target);
+      if (transactions) {
+        transactions.push(st);
+      } else {
+        transactions_by_target.set(target, [st]);
+      }
+    });
+  }
+  // `selected` shouldn't always be regenerated after changes to `entries`
+  // because Svelte sometimes recomputes when there isn't a real change to
+  // `entries` and the user might still be selecting transactions. Only recreate
+  // `selected` if there is a length mismatch.
+  let selected: boolean[] = [];
+  $: if (selected.length !== simple_transactions.length) {
+    selected = new Array(simple_transactions.length).fill(false);
+  }
+  $: shown = entries.length > 0;
+  $: num_selected = selected.filter((v) => v).length;
+
+  function selectNone() {
+    selected.fill(false);
+    selected = selected;
+  }
+
+  function selectAll() {
+    selected.fill(true);
+    selected = selected;
+  }
+
+  function toggleSelectAll() {
+    if (num_selected == 0) {
+      selectAll();
+    } else {
+      selectNone();
+    }
+  }
+
+  function forEachSelectedTransaction(
+    callbackFn: (transaction: SimpleTransaction, index: number) => void,
+  ) {
+    selected.forEach((selected, index) => {
+      if (selected) {
+        callbackFn(simple_transactions[index]!, index);
+      }
+    });
+  }
+
+  function moveSelected() {
+    if (!new_target) {
+      return;
+    }
+    forEachSelectedTransaction((transaction, index) => {
+      transaction.transaction.postings[
+        transaction.target_posting_index
+      ]!.account = new_target;
+    });
+    // Force reactivity to everything that follows from `entries`
+    entries = entries;
+    new_target = "";
+    selectNone();
+  }
+
+  function markSelectedDuplicate() {
+    forEachSelectedTransaction((transaction, index) => {
+      transaction.transaction.meta.__duplicate__ = true;
+    });
+    // Force reactivity to everything that follows from `entries`
+    entries = entries;
+    selectNone();
+  }
+
+  function markSelectedNotDuplicate() {
+    forEachSelectedTransaction((transaction, index) => {
+      transaction.transaction.meta.__duplicate__ = false;
+    });
+    // Force reactivity to everything that follows from `entries`
+    entries = entries;
+    selectNone();
+  }
+</script>
+
+<ModalBase {shown} closeHandler={close}>
+  <div>
+    <h3>{_("Import")}: {account}</h3>
+    <div class="toolbar" transition:slide|global>
+      <label>
+        <input type="checkbox" on:click|preventDefault={toggleSelectAll} />
+        {num_selected} selected.
+      </label>
+      {#if num_selected > 0}
+        <AutocompleteInput
+          bind:value={new_target}
+          placeholder={_("Move to account")}
+          suggestions={$accounts}
+          className="account-selector"
+        />
+        <button on:click={moveSelected}>Move</button>
+        <button on:click={markSelectedDuplicate}>Mark Duplicate</button>
+        <button on:click={markSelectedNotDuplicate}>Mark Not Duplicate</button>
+      {/if}
+    </div>
+    <div>
+      {#each transactions_by_target as [target, transactions], i}
+        <h4>{target}</h4>
+        <ul class="flex-table bulk-importer">
+          <li class="head">
+            <p>
+              <span class="select"></span>
+              <span class="datecell">Date</span>
+              <span class="flag">F</span>
+              <span class="description">Description</span>
+              <span class="num">Amount</span>
+              <span class="edit"></span>
+            </p>
+          </li>
+          {#each transactions as transaction}
+            <SimpleTransactionRow
+              bind:entry={transaction}
+              bind:selected={selected[transaction.index]}
+              manual_edit={() => {
+                entry_to_edit = transaction.transaction;
+              }}
+            />
+          {/each}
+        </ul>
+      {/each}
+      <strong>{_("Other entries")}</strong>
+      <ul class="flex-table bulk-importer">
+        <li class="head">
+          <p>
+            <span class="select"></span>
+            <span class="datecell">Date</span>
+            <span class="flag">F</span>
+            <span class="description">Description</span>
+            <span class="num">Amount</span>
+            <span class="edit"></span>
+          </p>
+        </li>
+        {#each other_entries as entry}
+          <OtherEntryRow
+            bind:entry
+            manual_edit={() => {
+              entry_to_edit = entry;
+            }}
+          />
+        {/each}
+      </ul>
+    </div>
+    <div class="flex-row">
+      <form on:submit|preventDefault={save}>
+        <button>{_("Save")}</button>
+      </form>
+    </div>
+  </div>
+  <IndividualEntryEdit
+    bind:entry={entry_to_edit}
+    close={() => {
+      entry_to_edit = undefined;
+      entries = entries;
+    }}
+  />
+</ModalBase>
+
+<style>
+  .toolbar {
+    min-height: 3em;
+  }
+  .toolbar label {
+    vertical-align: middle;
+  }
+</style>
diff --git a/frontend/src/reports/bulkimporter/IndividualEntryEdit.svelte b/frontend/src/reports/bulkimporter/IndividualEntryEdit.svelte
new file mode 100644
index 000000000..5de8eedf9
--- /dev/null
+++ b/frontend/src/reports/bulkimporter/IndividualEntryEdit.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    // This is very similar to the Extract.svelte component in the traditional importer.
+  import type { Entry as EntryType } from "../../entries";
+  import { isDuplicate, Transaction } from "../../entries";
+  import Entry from "../../entry-forms/Entry.svelte";
+  import { _ } from "../../i18n";
+  import ModalBase from "../../modals/ModalBase.svelte";
+
+  export let entry: EntryType | undefined;
+  export let close: () => void;
+  $: shown = !!entry; // Truthiness check (if entry is undefined then shown === false)
+
+  $: duplicate = entry && isDuplicate(entry);
+
+  function toggleDuplicate() {
+    if (entry) {
+      entry.meta.__duplicate__ = !isDuplicate(entry);
+    }
+  }
+
+  function cleanup_and_close(){
+    if (entry instanceof Transaction) {
+        // The editor can add an extra posting to allow for editing. Clean it up
+        // before closing.
+        entry.postings = entry.postings.filter((p) => !p.is_empty());
+    }
+    close()
+  }
+
+</script>
+
+<ModalBase {shown} closeHandler={cleanup_and_close}>
+  <form novalidate={duplicate} on:submit|preventDefault={() => {}}>
+    <h3>{_("Import")}</h3>
+    {#if entry}
+      <div class="flex-row">
+        <h3>{_("Edit Entry")}</h3>
+        <span class="spacer"></span>
+        <label class="button muted">
+          <input
+            type="checkbox"
+            checked={duplicate}
+            on:click={toggleDuplicate}
+          />
+          ignore duplicate
+        </label>
+      </div>
+      <div class:duplicate>
+        <Entry bind:entry />
+      </div>
+    {/if}
+  </form>
+</ModalBase>
+
+<style>
+  .duplicate {
+    opacity: 0.5;
+  }
+</style>
diff --git a/frontend/src/reports/bulkimporter/OtherEntryRow.svelte b/frontend/src/reports/bulkimporter/OtherEntryRow.svelte
new file mode 100644
index 000000000..8e08ec36c
--- /dev/null
+++ b/frontend/src/reports/bulkimporter/OtherEntryRow.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {
+    Balance,
+    isDuplicate,
+    Transaction,
+    type Entry as EntryType,
+  } from "../../entries";
+  import { _ } from "../../i18n";
+
+  export let entry: EntryType;
+  export let manual_edit: () => void;
+  $: duplicate = isDuplicate(entry);
+</script>
+
+{#if entry instanceof Transaction}
+  <li class={{ transaction: true, duplicate: duplicate }}>
+    <p>
+      <span class="select"></span>
+      <span class="datecell">{entry.date}</span>
+      <span class="flag">*</span>
+      <span class="description"
+        ><strong class="payee">{entry.payee || ""}</strong
+        >{#if entry.payee && entry.narration}<span class="separator"
+          ></span>{/if}{entry.narration || ""}</span
+      >
+      <span class="amount"></span>
+      <span class="edit"
+        ><button class="muted" on:click={manual_edit}>⋮</button></span
+      >
+    </p>
+    <ul class="postings">
+      {#each entry.postings as posting}
+        <li>
+          <p>
+            <span class="select"></span>
+            <span class="datecell"></span>
+            <span class="flag"></span>
+            <span class="description">{posting.account}</span>
+            <span class="amount">{posting.amount}</span>
+            <span class="edit"></span>
+          </p>
+        </li>
+      {/each}
+    </ul>
+  </li>
+{:else if entry instanceof Balance}
+  <li class={{ balance: true, duplicate: duplicate }}>
+    <p>
+      <span class="select"></span>
+      <span class="datecell">{entry.date}</span>
+      <span class="flag">Bal</span>
+      <span class="description">{entry.account}</span>
+      <span class="amount">{entry.amount.number} {entry.amount.currency}</span>
+      <span class="edit"><button on:click={manual_edit}>⋮</button></span>
+    </p>
+  </li>
+{/if}
+
+<style>
+</style>
diff --git a/frontend/src/reports/bulkimporter/SimpleTransactionRow.svelte b/frontend/src/reports/bulkimporter/SimpleTransactionRow.svelte
new file mode 100644
index 000000000..76bf20dd9
--- /dev/null
+++ b/frontend/src/reports/bulkimporter/SimpleTransactionRow.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { SimpleTransaction } from ".";
+  import { _ } from "../../i18n";
+  import { isDuplicate } from "../../entries";
+  import { slide } from "svelte/transition";
+
+  export let entry: SimpleTransaction;
+  export let selected = false;
+  export let manual_edit: () => void;
+  $: transaction = entry.transaction;
+  $: duplicate = isDuplicate(transaction);
+</script>
+
+<li class="transaction" transition:slide|global>
+  <label class={{ duplicate: duplicate, selected: selected }}>
+    <p>
+      <span class="select"
+        ><input type="checkbox" bind:checked={selected} /></span
+      >
+      <span class="datecell">{transaction.date}</span>
+      <span class="flag">*</span>
+      <span class="description"
+        ><strong class="payee">{transaction.payee || ""}</strong
+        >{#if transaction.payee && transaction.narration}<span class="separator"
+          ></span>{/if}{transaction.narration || ""}</span
+      >
+      <span class="num">{entry.getAmount()}</span>
+      <span class="edit"><button on:click={manual_edit}>⋮</button></span>
+    </p>
+  </label>
+</li>
+
+<style>
+  label.selected p {
+    background-color: var(--background-darker);
+  }
+</style>
diff --git a/frontend/src/reports/bulkimporter/index.ts b/frontend/src/reports/bulkimporter/index.ts
new file mode 100644
index 000000000..bec271693
--- /dev/null
+++ b/frontend/src/reports/bulkimporter/index.ts
@@ -0,0 +1,58 @@
+import { Transaction } from "../../entries";
+import type { Entry } from "../../entries";
+
+function negate_amount(amount: string) {
+    if (amount.trimStart().startsWith("-")) {
+        return amount.trimStart().slice(1);
+    } else {
+        return "-" + amount;
+    }
+}
+
+// Wrapper around Transaction.
+export class SimpleTransaction {
+    // The original transaction. This is guaranteed to have exactly 2
+    // postings (checked in the constructor).
+    transaction: Transaction;
+    readonly origin_account: string;
+    readonly target_posting_index: number;
+    readonly origin_posting_index: number;
+    // Remember the index in the upstream list of `SimpleTransaction`s.  Because
+    // of Svelte's reactivity, we have to maintain paralell data structures to
+    // track local edits that are not purely functional (as otherwise, the changes
+    // get overwritten any time Svelte recomputes derived values).
+    readonly index: number;
+
+    constructor(transaction: Transaction, origin_account: string, index: number) {
+        this.transaction = transaction;
+        this.origin_account = origin_account;
+        this.index = index;
+
+        let target_postings = this.transaction.postings
+            .map((posting, index) => ({ posting: posting, index: index }))
+            .filter(({ posting, }) => !posting.is_empty() && posting.account !== this.origin_account);
+        if (this.transaction.postings.length !== 2) {
+            throw new Error("A transaction with more than 2 postings is not a 'simple' transaction.")
+        }
+        if (target_postings.length !== 1) {
+            throw new Error("Expected exactly one posting whose account was not" +
+                this.origin_account + ", but found " +
+                JSON.stringify(target_postings))
+        } else {
+            this.target_posting_index = target_postings[0]!.index;
+            this.origin_posting_index = 1 - this.target_posting_index;
+        }
+    }
+
+    getTargetAccount() {
+        return this.transaction.postings[this.target_posting_index]!.account;
+    }
+
+    setTargetAccount(target: string) {
+        this.transaction.postings[this.target_posting_index]!.account = target;
+    }
+
+    getAmount() {
+        return this.transaction.postings[this.origin_posting_index]!.amount || negate_amount(this.transaction.postings[this.target_posting_index]!.amount)
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/reports/import/FileList.svelte b/frontend/src/reports/import/FileList.svelte
index 6cd97e893..04de96803 100644
--- a/frontend/src/reports/import/FileList.svelte
+++ b/frontend/src/reports/import/FileList.svelte
@@ -9,7 +9,7 @@
   export let selected: string | null;
   export let remove: (name: string) => unknown;
   export let move: (name: string, a: string, newName: string) => unknown;
-  export let extract: (name: string, importer: string) => unknown;
+  export let extract: (name: string, importer: string, account:string) => unknown;
 </script>
 
 {#each files as file}
@@ -45,7 +45,7 @@
         <button
           type="button"
           title="{_('Extract')} with importer {info.importer_name}"
-          on:click={() => extract(file.name, info.importer_name)}
+          on:click={() => extract(file.name, info.importer_name, info.account)}
         >
           {extractCache.get(`${file.name}:${info.importer_name}`)
             ? _("Continue")
diff --git a/frontend/src/reports/import/Import.svelte b/frontend/src/reports/import/Import.svelte
index c2296139c..8b5efd8a4 100644
--- a/frontend/src/reports/import/Import.svelte
+++ b/frontend/src/reports/import/Import.svelte
@@ -18,12 +18,16 @@
   import DocumentPreview from "../documents/DocumentPreview.svelte";
   import type { ProcessedImportableFile } from ".";
   import Extract from "./Extract.svelte";
+  import BulkExtract from "../bulkimporter/BulkExtract.svelte";
   import FileList from "./FileList.svelte";
 
   export let data: ProcessedImportableFile[];
 
   /** The array of entries to show the modal for. */
   let entries: Entry[] = [];
+  // Tracks the account that we are currently importing into. The bulk importer
+  // needs this for "simple" transactions.
+  let bulk_importer_account: string = "";
 
   /** Name of the currently selected file. */
   let selected: string | null = null;
@@ -84,8 +88,9 @@
   /**
    * Open the extract dialog for the given file/importer combination.
    */
-  async function extract(filename: string, importer: string) {
+  async function extract(filename: string, importer: string, account: string) {
     const extractCacheKey = `${filename}:${importer}`;
+    bulk_importer_account = account;
     const cached = extractCache.get(extractCacheKey);
     if (cached) {
       entries = cached;
@@ -148,13 +153,24 @@
     > for more information.
   </p>
 {:else}
-  <Extract
-    {entries}
-    close={() => {
-      entries = [];
-    }}
-    {save}
-  />
+  {#if $fava_options.use_bulk_importer}
+    <BulkExtract
+      {entries}
+      close={() => {
+        entries = [];
+      }}
+      {save}
+      account={bulk_importer_account}
+    />
+  {:else}
+    <Extract
+      {entries}
+      close={() => {
+        entries = [];
+      }}
+      {save}
+    />
+  {/if}
   <div class="fixed-fullsize-container">
     <div class="filelist">
       {#if files.length === 0}
diff --git a/src/fava/core/fava_options.py b/src/fava/core/fava_options.py
index 95a02527b..35c89c4cd 100644
--- a/src/fava/core/fava_options.py
+++ b/src/fava/core/fava_options.py
@@ -113,6 +113,7 @@ class FavaOptions:
     upcoming_events: int = 7
     uptodate_indicator_grey_lookback_days: int = 60
     use_external_editor: bool = False
+    use_bulk_importer: bool = False
 
     def set_collapse_pattern(self, value: str) -> None:
         """Set the collapse_pattern option."""

From d06ee98825cd0acc7ce882e02c0479ba45a5a8fd Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Tue, 7 Jan 2025 05:10:48 +0000
Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 frontend/css/bulk-importer.css                | 31 ++++++++++---------
 frontend/css/style.css                        | 12 ++++---
 .../reports/bulkimporter/BulkExtract.svelte   |  1 +
 .../bulkimporter/IndividualEntryEdit.svelte   | 13 ++++----
 frontend/src/reports/import/FileList.svelte   |  6 +++-
 5 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/frontend/css/bulk-importer.css b/frontend/css/bulk-importer.css
index 8fd22c93a..fe8bdfb3b 100644
--- a/frontend/css/bulk-importer.css
+++ b/frontend/css/bulk-importer.css
@@ -1,41 +1,42 @@
 .bulk-importer span.select,
 .bulk-importer span.edit {
-    width: 2rem;
+  width: 2rem;
 }
 
 .bulk-importer span.flag {
-    width: 3rem;
+  width: 3rem;
 }
 
 .bulk-importer span.description {
-    flex: 1;
+  flex: 1;
 }
 
 .bulk-importer span.datecell {
-    width: 6rem;
+  width: 6rem;
 }
 
 .bulk-importer span.datecell,
 .bulk-importer span.flag {
-    text-align: center;
-    background-color: var(--entry-background);
+  text-align: center;
+  background-color: var(--entry-background);
 }
 
 .bulk-importer span.edit button {
-    padding: 2px 4px;
-    margin: 0;
-    font-weight: bold;
-    background: var(--background);
+  padding: 2px 4px;
+  margin: 0;
+  font-weight: bold;
+  background: var(--background);
 }
 
 .bulk-importer span.edit button:hover {
-    background: var(--background-darker);
+  background: var(--background-darker);
 }
 
 .bulk-importer .postings {
-    font-size: 0.9em;
-    background-color: var(--journal-postings);
+  font-size: 0.9em;
+  background-color: var(--journal-postings);
 }
+
 .bulk-importer .duplicate {
-    text-decoration: line-through;
-  }
\ No newline at end of file
+  text-decoration: line-through;
+}
diff --git a/frontend/css/style.css b/frontend/css/style.css
index 048e52bb5..a124d4a3f 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -186,7 +186,8 @@
   }
 }
 
-.journal .balance, .bulk-importer .balance {
+.journal .balance,
+.bulk-importer .balance {
   --entry-background: hsl(120deg 100% 90%);
 }
 
@@ -230,7 +231,8 @@
   --entry-background: hsl(35deg 100% 80%);
 }
 
-.journal, .bulk-importer {
+.journal,
+.bulk-importer {
   --journal-postings: hsl(0deg 0% 92%);
   --journal-metadata: hsl(210deg 44% 67%);
   --journal-tag: hsl(210deg 61% 64%);
@@ -242,7 +244,8 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    .journal .balance, .bulk-importer .balance {
+    .journal .balance,
+    .bulk-importer .balance {
       --entry-background: hsl(120deg 50% 15%);
     }
 
@@ -286,7 +289,8 @@
       --entry-background: hsl(35deg 100% 20%);
     }
 
-    .journal, .bulk-importer {
+    .journal,
+    .bulk-importer {
       --journal-postings: hsl(0deg 0% 10%);
       --journal-hover-highlight: hsl(0deg 0% 20% / 60%);
     }
diff --git a/frontend/src/reports/bulkimporter/BulkExtract.svelte b/frontend/src/reports/bulkimporter/BulkExtract.svelte
index f2bf62bcd..dbc668f16 100644
--- a/frontend/src/reports/bulkimporter/BulkExtract.svelte
+++ b/frontend/src/reports/bulkimporter/BulkExtract.svelte
@@ -215,6 +215,7 @@
   .toolbar {
     min-height: 3em;
   }
+
   .toolbar label {
     vertical-align: middle;
   }
diff --git a/frontend/src/reports/bulkimporter/IndividualEntryEdit.svelte b/frontend/src/reports/bulkimporter/IndividualEntryEdit.svelte
index 5de8eedf9..1f7276665 100644
--- a/frontend/src/reports/bulkimporter/IndividualEntryEdit.svelte
+++ b/frontend/src/reports/bulkimporter/IndividualEntryEdit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    // This is very similar to the Extract.svelte component in the traditional importer.
+  // This is very similar to the Extract.svelte component in the traditional importer.
   import type { Entry as EntryType } from "../../entries";
   import { isDuplicate, Transaction } from "../../entries";
   import Entry from "../../entry-forms/Entry.svelte";
@@ -18,15 +18,14 @@
     }
   }
 
-  function cleanup_and_close(){
+  function cleanup_and_close() {
     if (entry instanceof Transaction) {
-        // The editor can add an extra posting to allow for editing. Clean it up
-        // before closing.
-        entry.postings = entry.postings.filter((p) => !p.is_empty());
+      // The editor can add an extra posting to allow for editing. Clean it up
+      // before closing.
+      entry.postings = entry.postings.filter((p) => !p.is_empty());
     }
-    close()
+    close();
   }
-
 </script>
 
 <ModalBase {shown} closeHandler={cleanup_and_close}>
diff --git a/frontend/src/reports/import/FileList.svelte b/frontend/src/reports/import/FileList.svelte
index 04de96803..e71f3b9c4 100644
--- a/frontend/src/reports/import/FileList.svelte
+++ b/frontend/src/reports/import/FileList.svelte
@@ -9,7 +9,11 @@
   export let selected: string | null;
   export let remove: (name: string) => unknown;
   export let move: (name: string, a: string, newName: string) => unknown;
-  export let extract: (name: string, importer: string, account:string) => unknown;
+  export let extract: (
+    name: string,
+    importer: string,
+    account: string,
+  ) => unknown;
 </script>
 
 {#each files as file}