Expand ecash explorer capabilities

Add Fedimint discovery, dual SQLite/Postgres storage, richer review handling, and generated social imagery.

web/src/styles/global.css

@@ -365,6 +365,19 @@ main { flex: 1; }
 .status-chip.degraded .status-dot { background: var(--amber); box-shadow: 0 0 8px rgba(240, 169, 59, .7); }
 .status-chip.unknown { color: var(--muted); background: rgba(154, 146, 126, .07); border-color: rgba(154, 146, 126, .22); }
 .status-chip.unknown .status-dot { background: var(--muted); box-shadow: none; }
+/*
+ * "Announced": a federation on Nostr that no check has ever confirmed.
+ *
+ * Grey and, uniquely, hollow. Every other state here is a filled dot with a glow,
+ * because every other state is something this site found out; a ring with nothing in it
+ * is the one that says the opposite. It must never be mistaken for the green one at a
+ * glance, which is the whole reason it is not simply a paler mint.
+ */
+.status-chip.announced { color: var(--muted); background: rgba(154, 146, 126, .07); border-color: rgba(154, 146, 126, .22); }
+.status-chip.announced .status-dot {
+  background: none; box-shadow: none;
+  border: 2px solid var(--faint); box-sizing: border-box;
+}
 
 /* ---------- panels ---------- */
 .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
@@ -461,6 +474,8 @@ main { flex: 1; }
 .mc-dot.offline { background: var(--red); }
 .mc-dot.degraded { background: var(--amber); }
 .mc-dot.unknown { background: var(--muted); }
+/* Hollow, for the same reason the chip's dot is. See `.status-chip.announced`. */
+.mc-dot.announced { background: none; border: 2px solid var(--faint); box-sizing: border-box; width: 7px; height: 7px; }
 /* Two words next to the status, in the same colours the banner uses. Cards never
    explain, they only flag: the mint page has the sentence. */
 .mc-chip {
@@ -536,13 +551,24 @@ footer { border-top: 1px solid var(--line-soft); margin-top: 70px; }
 /*
  * Below this the header stops being one row.
  *
- * Four nav items, the brand, the language control and the account control do not fit
- * across a phone, and a header that does not fit is a page that scrolls sideways: the
- * body inherits the overflow and every section under it drifts. So the nav takes a row
- * of its own and the two controls stay up top with the brand, which is also the order
- * they are wanted in: what page am I on, then who am I and what language is this.
+ * Five nav items, the brand, the language control and the account control do not fit
+ * across anything narrower than a laptop, and a header that does not fit is a page that
+ * scrolls sideways: the body inherits the overflow and every section under it drifts. So
+ * the nav takes a row of its own and the two controls stay up top with the brand, which
+ * is also the order they are wanted in: what page am I on, then who am I and what
+ * language is this.
+ *
+ * 1040px, not the 620px this used to be. The old figure was already two pixels short of
+ * fitting four English items at 768, and five need 400px against the 303px the first row
+ * has left there — no amount of tightening the padding closes a gap that size.
+ *
+ * The number is set by Spanish, which is the longest of the three ("Mints Cashu /
+ * Fedimints / Reseñas / Monederos / Acerca de") and needs 1008px to fit on one row
+ * against English's 906. Picking the English figure is how this shipped broken once
+ * already: every locale renders the same stylesheet, so the breakpoint has to clear the
+ * widest of them, with room for the next language to be longer still.
  */
-@media (max-width: 620px) {
+@media (max-width: 1040px) {
   .topbar-inner { flex-wrap: wrap; row-gap: 10px; }
   /* Pushes the pair to the right of the first row, where they were before it wrapped. */
   .topbar-inner > .lang-menu { margin-left: auto; }
@@ -553,6 +579,15 @@ footer { border-top: 1px solid var(--line-soft); margin-top: 70px; }
     /* The row's own edges, so the first and last item line up with the brand and the
        account control above them rather than sitting inset by their padding. */
     margin-inline: -9px;
+    /*
+     * Wraps onto a second line rather than overflowing.
+     *
+     * Four items fitted one narrow row; "Cashu mints" and "Fedimints" together do not,
+     * and a nav that overflows here is the sideways scroll this whole block exists to
+     * prevent. Two tidy rows beat one row with a cut-off "About".
+     */
+    flex-wrap: wrap;
+    row-gap: 2px;
   }
 }
 @media (max-width: 640px) {