Display transaction status in hledger-web

hledger-web/static/hledger.css

@@ -227,6 +227,45 @@ ul {
     whitespace: nowrap;
 }
 
+.status {
+    width: 1.2em;
+    text-align: center;
+}
+
+.status-cleared {
+    width: 0.8em;
+    height: 0.8em;
+    vertical-align: baseline;
+    border-radius: 50%;
+    background-color: #5cb85c;
+    display: inline-block;
+}
+
+.transaction:has(.status-pending) {
+    background-color: #f2dede;
+}
+
+.transaction:has(.status-unmarked) {
+    background-color: #fcf8e3;
+}
+
+.status-pending::before {
+    color: #d9534f;
+    font-weight: 900;
+    content: "!";
+}
+
+.status-unmarked {
+    width: 0.8em;
+    height: 0.8em;
+    vertical-align: baseline;
+    border-radius: 50%;
+    border-color: #f0ad4e;
+    border-width: 2px;
+    border-style: solid;
+    display: inline-block;
+}
+
 .transaction-code {
     font-family: monospace;
     color: #888;

hledger-web/templates/journal.hamlet

@@ -13,6 +13,14 @@ $if elem AddPermission perms
           $with (payee, note) <- payeeAndNoteFromDescription' $ tdescription torig
             <time .date datetime="#{show (tdate torig)}" nowrap>
               #{show (tdate torig)}
+            <div .status>
+              $case tstatus torig
+                $of Unmarked
+                  <div .status-unmarked title="Tarkistamaton" aria-label="Tarkistamaton">
+                $of Pending
+                  <div .status-pending title="Kesken" aria-label="Kesken">
+                $of Cleared
+                  <div .status-cleared title="Tarkistettu" aria-label="Tarkistettu">
             $if not $ T.null $ tcode torig
               <div .transaction-code>
                 (#{tcode torig})