Replace status-badge dot with Material icon on /e/

The status pill on the share landing page previously used a flat colored
dot. Swap it for an inline SVG that mirrors the Taison app's status icon
set in MangaInfoHeader.kt — Schedule (Ongoing), DoneAll (Completed),
AttachMoney (Licensed), Done (Publishing finished), Close (Cancelled),
Pause (On hiatus) — so the web preview reads the same as the in-app one.
Color tinting moves from background-on-dot to currentColor on the SVG so
the existing data-status selectors continue to drive the palette.

Author: Gent8

website/e/index.html

@@ -50,12 +50,17 @@
       color: var(--on-surface-quiet);
       border: 1px solid var(--outline);
     }
-    .badge.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--on-surface-muted); }
-    .badge.status[data-status="1"] .dot { background: var(--status-ongoing); }
-    .badge.status[data-status="2"] .dot { background: var(--status-completed); }
-    .badge.status[data-status="4"] .dot { background: var(--status-completed); }
-    .badge.status[data-status="6"] .dot { background: var(--status-hiatus); }
-    .badge.status[data-status="5"] .dot { background: var(--error); }
+    .badge.status .icon {
+      width: 13px; height: 13px;
+      flex: 0 0 auto;
+      color: var(--on-surface-muted);
+    }
+    .badge.status .icon svg { display: block; width: 100%; height: 100%; }
+    .badge.status[data-status="1"] .icon { color: var(--status-ongoing); }
+    .badge.status[data-status="2"] .icon { color: var(--status-completed); }
+    .badge.status[data-status="4"] .icon { color: var(--status-completed); }
+    .badge.status[data-status="6"] .icon { color: var(--status-hiatus); }
+    .badge.status[data-status="5"] .icon { color: var(--error); }
 
     .actions { margin-top: 20px; }
   </style>
@@ -106,6 +111,25 @@ <h1 class="title" id="title">Opening in Taison…</h1>
         "6": "On hiatus",
       };
 
+      // Match the icons used in the Taison app (MangaInfoHeader.kt / DuplicateMangaDialog.kt):
+      // Material Outlined Schedule / DoneAll / AttachMoney / Done / Close / Pause.
+      const STATUS_ICON_PATHS = {
+        "1": "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z",
+        "2": "M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z",
+        "3": "M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z",
+        "4": "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
+        "5": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+        "6": "M6 19h4V5H6v14zm8-14v14h4V5h-4z",
+      };
+
+      function statusIconSvg(code) {
+        const path = STATUS_ICON_PATHS[code];
+        if (!path) return "";
+        return '<span class="icon" aria-hidden="true">' +
+          '<svg viewBox="0 0 24 24" fill="currentColor"><path d="' + path + '"/></svg>' +
+        '</span>';
+      }
+
       const titleEl   = document.getElementById("title");
       const byEl      = document.getElementById("by");
       const srcNameEl = document.getElementById("source-name");
@@ -145,7 +169,7 @@ <h1 class="title" id="title">Opening in Taison…</h1>
       if (status && STATUS_LABELS[status]) {
         badges.push(
           '<span class="badge status" data-status="' + esc(status) + '">' +
-            '<span class="dot"></span>' + esc(STATUS_LABELS[status]) +
+            statusIconSvg(status) + esc(STATUS_LABELS[status]) +
           '</span>'
         );
       }