Can attach multiple inbox entries to movements at once

moneymgr_web/src/widgets/InboxEntryWidget.tsx

@@ -0,0 +1,63 @@
+import CallMadeIcon from "@mui/icons-material/CallMade";
+import CallReceivedIcon from "@mui/icons-material/CallReceived";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import React from "react";
+import { match } from "ts-pattern";
+import { InboxEntry } from "../api/InboxApi";
+import { fmtDateFromTime } from "../utils/DateUtils";
+import { AmountWidget } from "./AmountWidget";
+import { UploadedFileWidget } from "./UploadedFileWidget";
+
+export function InboxEntryWidget(p: { entry: InboxEntry }): React.ReactElement {
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        height: "100%",
+      }}
+    >
+      {/* File */}
+      <UploadedFileWidget small file_id={p.entry.file_id} />
+
+      {/* Icon */}
+      {match(p.entry.amount)
+        .when(
+          (v) => v === undefined || v === null,
+          () => <QuestionMarkIcon color="secondary" />
+        )
+        .when(
+          (v) => v > 0,
+          () => <CallReceivedIcon color="success" />
+        )
+        .otherwise(() => (
+          <CallMadeIcon color="error" />
+        ))}
+
+      <span
+        style={{
+          marginLeft: "5px",
+          display: "inline-flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        <span style={{ height: "1em", lineHeight: 1 }}>
+          {(p.entry.label?.length ?? 0) > 0 ? p.entry.label : <i>No label</i>}
+        </span>
+        <span style={{ display: "flex", alignItems: "center", lineHeight: 1 }}>
+          {p.entry.amount ? (
+            <AmountWidget amount={p.entry.amount} />
+          ) : (
+            <i>No amount</i>
+          )}
+          <span style={{ width: "0.5em" }} />
+          &bull;
+          <span style={{ width: "0.5em" }} />
+          {fmtDateFromTime(p.entry.time)}
+        </span>
+      </span>
+    </span>
+  );
+}