fix(dashboard): received country pie chart now groups by country_from (寄出国)

app/main.py

@@ -1,6 +1,7 @@
 from pathlib import Path
 
 from fastapi import FastAPI
+from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
 
 from app.config import UPLOAD_DIR
@@ -10,6 +11,7 @@ from app.routers import web, api
 app = FastAPI(title="Mailova 星笺")
 
 UPLOAD_DIR.mkdir(exist_ok=True)
+STATIC_DIR = Path(__file__).resolve().parent / "static"
 
 
 # Cache-Control for uploaded images (30 days, immutable — filenames contain UUID)
@@ -21,7 +23,12 @@ async def cache_control_middleware(request, call_next):
     return response
 
 
-app.mount("/static", StaticFiles(directory=str(Path(__file__).resolve().parent / "static")), name="static")
+@app.get("/favicon.ico")
+async def favicon():
+    return FileResponse(STATIC_DIR / "favicon.ico", media_type="image/x-icon")
+
+
+app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
 app.mount("/uploads", StaticFiles(directory=str(UPLOAD_DIR)), name="uploads")
 
 app.include_router(web.router)

app/routers/web.py

@@ -593,6 +593,7 @@ def dashboard(request: Request, user: User = Depends(get_current_user_web), db:
         all_cards.extend(cards)
 
     total = len(all_cards)
+    pending = sum(1 for c in all_cards if c.status == "pending")
     sent = sum(1 for c in all_cards if c.status == "sent")
     delivered = sum(1 for c in all_cards if c.status == "delivered")
     received = sum(1 for c in all_cards if c.status == "received")
@@ -604,33 +605,36 @@ def dashboard(request: Request, user: User = Depends(get_current_user_web), db:
 
     # status distribution for progress bar
     if total > 0:
+        pending_pct = round(pending / total * 100)
         sent_pct = round(sent / total * 100)
         delivered_pct = round(delivered / total * 100)
         received_pct = round(received / total * 100)
     else:
-        sent_pct = delivered_pct = received_pct = 0
+        pending_pct = sent_pct = delivered_pct = received_pct = 0
 
     # country stats split by sent/received
     sent_country_counts: dict[str, int] = {}
     received_country_counts: dict[str, int] = {}
     for c in all_cards:
+        if c.status in ("pending", "sent", "delivered"):
             if not c.country_to:
                 continue
-        if c.status in ("pending", "sent", "delivered"):
             sent_country_counts[c.country_to] = sent_country_counts.get(c.country_to, 0) + 1
         elif c.status == "received":
-            received_country_counts[c.country_to] = received_country_counts.get(c.country_to, 0) + 1
+            if not c.country_from:
+                continue
+            received_country_counts[c.country_from] = received_country_counts.get(c.country_from, 0) + 1
     sent_country_stats = sorted(sent_country_counts.items(), key=lambda x: -x[1])
     received_country_stats = sorted(received_country_counts.items(), key=lambda x: -x[1])
 
     from datetime import datetime, timezone as _tz
 
     return _render(request, "dashboard.html", {"user": user, "profiles": profiles,
-        "total": total, "sent": sent, "delivered": delivered, "received": received,
+        "total": total, "pending": pending, "sent": sent, "delivered": delivered, "received": received,
         "countries": countries, "recent": recent,
-        "sent_pct": sent_pct, "delivered_pct": delivered_pct, "received_pct": received_pct,
+        "pending_pct": pending_pct, "sent_pct": sent_pct, "delivered_pct": delivered_pct, "received_pct": received_pct,
         "sent_country_stats": sent_country_stats, "received_country_stats": received_country_stats,
-        "now": datetime.now(_tz.utc),
+        "now": datetime.now(_tz.utc) + timedelta(hours=8),
     })
 
 
@@ -644,6 +648,7 @@ def profile_list(request: Request, user: User = Depends(get_current_user_web), d
         cards = db.query(Postcard).filter(Postcard.profile_id == p.id).all()
         extras[p.id] = {
             "total": len(cards),
+            "pending": sum(1 for c in cards if c.status == "pending"),
             "sent": sum(1 for c in cards if c.status == "sent"),
             "delivered": sum(1 for c in cards if c.status == "delivered"),
             "received": sum(1 for c in cards if c.status == "received"),
@@ -895,7 +900,7 @@ def postcard_delete(postcard_id: int, user: User = Depends(get_current_user_web)
 
 
 @router.post("/postcards/{postcard_id}/mark-delivered")
-def mark_delivered(
+async def mark_delivered(
     postcard_id: int,
     user: User = Depends(get_current_user_web),
     db: Session = Depends(get_db),
@@ -907,16 +912,16 @@ def mark_delivered(
         .first()
     )
     if not pc:
-        return _redirect("/profiles")
+        return JSONResponse({"ok": False}, status_code=404)
     pc.status = "delivered"
     if not pc.arrival_time:
         pc.arrival_time = datetime.now()
     db.commit()
-    return _redirect(f"/postcards/{postcard_id}")
+    return JSONResponse({"ok": True})
 
 
 @router.post("/postcards/{postcard_id}/mark-sent")
-def mark_sent(
+async def mark_sent(
     postcard_id: int,
     user: User = Depends(get_current_user_web),
     db: Session = Depends(get_db),
@@ -929,12 +934,12 @@ def mark_sent(
         .first()
     )
     if not pc:
-        return _redirect("/profiles")
+        return JSONResponse({"ok": False}, status_code=404)
     pc.status = "sent"
     if not pc.send_time:
         pc.send_time = datetime.now()
     db.commit()
-    return _redirect(f"/postcards/{postcard_id}")
+    return JSONResponse({"ok": True})
 
 
 # ---------- Image Upload ----------

app/static/style.css

@@ -186,17 +186,20 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
 .dash-stat-body { display: flex; flex-direction: column; }
 .dash-stat-value { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
 .dash-stat-label { font-size: .68rem; color: var(--text-muted); }
+.dash-pending { color: var(--primary); }
 .dash-sent { color: var(--sent); }
 .dash-delivered { color: var(--delivered); }
 .dash-received { color: var(--received); }
 .dash-progress { margin-bottom: 2rem; }
 .progress-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); }
 .progress-seg { height: 100%; }
+.progress-pending { background: var(--primary); }
 .progress-sent { background: var(--sent); }
 .progress-delivered { background: var(--delivered); }
 .progress-received { background: var(--received); }
 .progress-legend { display: flex; gap: 1.25rem; margin-top: .5rem; font-size: .8rem; color: var(--text-muted); }
 .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .25rem; vertical-align: middle; }
+.dot-pending { background: var(--primary); }
 .dot-sent { background: var(--sent); }
 .dot-delivered { background: var(--delivered); }
 .dot-received { background: var(--received); }
@@ -229,6 +232,7 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
 .stat-value { font-size: 1.1rem; font-weight: 700; }
 .stat-label { font-size: .75rem; color: var(--text-muted); }
 .badge-sent-text { color: var(--sent); }
+.badge-pending-text { color: var(--primary); }
 .badge-delivered-text { color: var(--delivered); }
 .badge-received-text { color: var(--received); }
 .profile-card-footer { display: flex; align-items: center; justify-content: space-between; }
@@ -302,26 +306,48 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
     .detail-grid { grid-template-columns: 1fr; }
     .card-grid { grid-template-columns: 1fr; }
     .postcard-row-info { flex-wrap: wrap; gap: .35rem; }
-    .navbar { padding: .5rem 1rem; }
-    .nav-links { gap: .75rem; }
-    .nav-links a { font-size: .8rem; }
-    .container { margin: 1rem auto; padding: 0 1rem; }
+
+    /* Navbar */
+    .navbar { padding: .5rem .75rem; }
+    .nav-brand { font-size: .9rem; }
+    .nav-links { gap: .5rem; }
+    .nav-links a { font-size: .78rem; }
+    .nav-links .btn-sm { padding: .3rem .6rem; font-size: .75rem; }
+
+    .container { margin: 1rem auto; padding: 0 .75rem; }
+
+    /* Dashboard */
     .dash-stats { display: grid; grid-template-columns: 1fr 1fr; }
     .dash-stat-card { min-width: 0; }
     .dash-sections { grid-template-columns: 1fr; }
     .recent-meta > span:nth-child(-n+2) { display: none; }
     .recent-meta .recent-time { display: inline; }
     .recent-item { gap: .5rem; padding: .5rem; }
-    .section-header { flex-direction: column; gap: .75rem; }
+
+    /* Section header */
+    .section-header { flex-direction: column; gap: .5rem; text-align: center; }
     .section-header .btn { width: auto; }
+
+    /* Detail */
     .detail-title-row h1 { font-size: 1.2rem; }
     .btn-back { padding: .25rem .5rem; font-size: .85rem; }
+
+    /* Profiles */
     .profile-grid { grid-template-columns: 1fr; }
     .profile-card-stats { gap: .75rem; flex-wrap: wrap; }
-    .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
-    .showcase-card-meta { flex-wrap: wrap; }
-    .detail-title-row h1 { font-size: 1.2rem; }
-    .btn-back { padding: .25rem .5rem; font-size: .85rem; }
+
+    /* Showcase / Landing grid — 2 columns on mobile */
+    .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
+    .showcase-card-body { padding: .5rem; }
+    .showcase-card-meta { font-size: .72rem; flex-wrap: wrap; gap: .25rem; }
+
+    /* Lightbox — tighter on mobile */
+    .lightbox-content { max-width: 95vw; }
+    .lightbox-content img { max-width: 95vw; max-height: 75vh; }
+    .lightbox-prev, .lightbox-next { font-size: 1.4rem; padding: .4rem .6rem; }
+    .lightbox-prev { left: .5rem; }
+    .lightbox-next { right: .5rem; }
+    .lightbox-close { top: .5rem; right: .75rem; font-size: 1.6rem; }
 }
 
 /* Admin invite form */

app/templates/base.html

@@ -2,6 +2,7 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}星笺{% endblock %}</title>
     <link rel="stylesheet" href="/static/style.css">

app/templates/dashboard.html

@@ -14,6 +14,13 @@
             <span class="dash-stat-label">{{ 'dash.total_cards'|t(user.language) }}</span>
         </div>
     </div>
+    <div class="dash-stat-card">
+        <div class="dash-stat-icon">📋</div>
+        <div class="dash-stat-body">
+            <span class="dash-stat-value dash-pending">{{ pending }}</span>
+            <span class="dash-stat-label">{{ 'status.pending'|t(user.language) }}</span>
+        </div>
+    </div>
     <div class="dash-stat-card">
         <div class="dash-stat-icon">📤</div>
         <div class="dash-stat-body">
@@ -47,11 +54,13 @@
 {% if total > 0 %}
 <div class="dash-progress">
     <div class="progress-bar">
+        <div class="progress-seg progress-pending" style="width:{{ pending_pct }}%"></div>
         <div class="progress-seg progress-sent" style="width:{{ sent_pct }}%"></div>
         <div class="progress-seg progress-delivered" style="width:{{ delivered_pct }}%"></div>
         <div class="progress-seg progress-received" style="width:{{ received_pct }}%"></div>
     </div>
     <div class="progress-legend">
+        <span><i class="dot dot-pending"></i>{{ 'status.pending'|t(user.language) }} {{ pending_pct }}%</span>
         <span><i class="dot dot-sent"></i>{{ 'dash.sent'|t(user.language) }} {{ sent_pct }}%</span>
         <span><i class="dot dot-delivered"></i>{{ 'dash.delivered'|t(user.language) }} {{ delivered_pct }}%</span>
         <span><i class="dot dot-received"></i>{{ 'dash.received'|t(user.language) }} {{ received_pct }}%</span>
@@ -78,22 +87,22 @@
 <script>
 {% if sent_country_stats %}
 new Chart(document.getElementById('chart-sent'), {
-    type: 'bar',
+    type: 'pie',
     data: {
         labels: [{% for code, _ in sent_country_stats %}'{{ code|flag }} {{ code }}',{% endfor %}],
-        datasets: [{ data: [{% for _, count in sent_country_stats %}{{ count }},{% endfor %}], backgroundColor: '#3b82f6', borderRadius: 4, maxBarThickness: 40 }]
+        datasets: [{ data: [{% for _, count in sent_country_stats %}{{ count }},{% endfor %}], backgroundColor: ['#3b82f6','#f59e0b','#10b981','#8b5cf6','#ef4444','#06b6d4','#f97316','#84cc16','#ec4899','#6366f1'] }]
     },
-    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } } }
+    options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { padding: 12, usePointStyle: true } } } }
 });
 {% endif %}
 {% if received_country_stats %}
 new Chart(document.getElementById('chart-received'), {
-    type: 'bar',
+    type: 'pie',
     data: {
         labels: [{% for code, _ in received_country_stats %}'{{ code|flag }} {{ code }}',{% endfor %}],
-        datasets: [{ data: [{% for _, count in received_country_stats %}{{ count }},{% endfor %}], backgroundColor: '#8b5cf6', borderRadius: 4, maxBarThickness: 40 }]
+        datasets: [{ data: [{% for _, count in received_country_stats %}{{ count }},{% endfor %}], backgroundColor: ['#8b5cf6','#3b82f6','#f59e0b','#10b981','#ef4444','#06b6d4','#f97316','#84cc16','#ec4899','#6366f1'] }]
     },
-    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } } }
+    options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { padding: 12, usePointStyle: true } } } }
 });
 {% endif %}
 </script>
@@ -135,13 +144,16 @@ new Chart(document.getElementById('chart-received'), {
                 <div class="recent-meta" style="margin-left:0">
                     <span class="recent-time">
                         {% if pc.status == 'sent' and pc.send_time %}
-                            {% set delta = (now.date() - pc.send_time.date()).days %}
+                            {% set local_time = pc.send_time|to_local %}
+                            {% set delta = (now.date() - local_time.date()).days %}
                             {% if delta == 0 %}{{ 'dash.today'|t(user.language) }}{% elif delta == 1 %}{{ 'dash.yesterday'|t(user.language) }}{% else %}{{ delta }}{{ 'dash.days_ago'|t(user.language) }}{% endif %}
                         {% elif pc.status == 'delivered' and pc.arrival_time %}
-                            {% set delta = (now.date() - pc.arrival_time.date()).days %}
+                            {% set local_time = pc.arrival_time|to_local %}
+                            {% set delta = (now.date() - local_time.date()).days %}
                             {% if delta == 0 %}{{ 'dash.today'|t(user.language) }}{% elif delta == 1 %}{{ 'dash.yesterday'|t(user.language) }}{% else %}{{ delta }}{{ 'dash.days_ago'|t(user.language) }}{% endif %}
                         {% elif pc.status == 'received' and pc.receive_time %}
-                            {% set delta = (now.date() - pc.receive_time.date()).days %}
+                            {% set local_time = pc.receive_time|to_local %}
+                            {% set delta = (now.date() - local_time.date()).days %}
                             {% if delta == 0 %}{{ 'dash.today'|t(user.language) }}{% elif delta == 1 %}{{ 'dash.yesterday'|t(user.language) }}{% else %}{{ delta }}{{ 'dash.days_ago'|t(user.language) }}{% endif %}
                         {% endif %}
                     </span>

app/templates/index.html

@@ -3,6 +3,7 @@
 {% block nav %}
 <nav class="navbar">
     <a href="/" class="nav-brand">{{ 'brand'|t(lang) }}</a>
+    <button class="nav-hamburger" onclick="this.nextElementSibling.classList.toggle('open')">☰</button>
     <div class="nav-links">
         <div class="lang-switcher" id="langSwitcher">
             <button type="button" class="lang-globe" onclick="document.getElementById('langDropdown').classList.toggle('show')">🌐</button>
@@ -12,15 +13,15 @@
                 {% endfor %}
             </div>
         </div>
-        <a href="/login" class="btn btn-sm" style="margin-left:.5rem">{{ 'index.go_login'|t(lang) }}</a>
+        <a href="/login" class="btn btn-sm">{{ 'index.go_login'|t(lang) }}</a>
         <a href="/register" class="btn btn-primary btn-sm">{{ 'index.go_register'|t(lang) }}</a>
     </div>
 </nav>
 {% endblock %}
 {% block content %}
-<div class="section-header">
-    <h1>📮 {{ 'index.title'|t(lang) }}</h1>
-    <p style="color:var(--text-muted);margin-top:.25rem">{{ 'index.subtitle'|t(lang) }}</p>
+<div class="section-header" style="text-align:center">
+    <h1 style="font-size:1.3rem">📮 {{ 'index.title'|t(lang) }}</h1>
+    <p style="color:var(--text-muted);font-size:.85rem;margin-top:.15rem">{{ 'index.subtitle'|t(lang) }}</p>
 </div>
 
 {% set visible = [] %}

app/templates/postcard_detail.html

@@ -10,13 +10,9 @@
     <div class="detail-actions">
         <a href="/postcards/{{ postcard.id }}/edit" class="btn">{{ 'pc_detail.edit'|t(user.language) }}</a>
         {% if postcard.status == 'pending' %}
-        <form method="post" action="/postcards/{{ postcard.id }}/mark-sent" class="inline">
-            <button type="submit" class="btn btn-primary" onclick="return confirm('{{ 'pc_detail.confirm_sent'|t(user.language) }}')">{{ 'pc_detail.mark_sent'|t(user.language) }}</button>
-        </form>
+        <button type="button" class="btn btn-primary" onclick="if(confirm('{{ 'pc_detail.confirm_sent'|t(user.language) }}'))fetch('/postcards/{{ postcard.id }}/mark-sent',{method:'POST'}).then(function(){location.reload();})">{{ 'pc_detail.mark_sent'|t(user.language) }}</button>
         {% elif postcard.status == 'sent' %}
-        <form method="post" action="/postcards/{{ postcard.id }}/mark-delivered" class="inline">
-            <button type="submit" class="btn btn-primary" onclick="return confirm('{{ 'pc_detail.confirm_delivered'|t(user.language) }}')">{{ 'pc_detail.mark_delivered'|t(user.language) }}</button>
-        </form>
+        <button type="button" class="btn btn-primary" onclick="if(confirm('{{ 'pc_detail.confirm_delivered'|t(user.language) }}'))fetch('/postcards/{{ postcard.id }}/mark-delivered',{method:'POST'}).then(function(){location.reload();})">{{ 'pc_detail.mark_delivered'|t(user.language) }}</button>
         {% endif %}
         <form method="post" action="/postcards/{{ postcard.id }}/delete" class="inline">
             <button type="submit" class="btn btn-danger" onclick="return confirm('{{ 'pc_detail.confirm_delete'|t(user.language) }}')">{{ 'pc_detail.delete'|t(user.language) }}</button>

app/templates/postcard_form.html

@@ -23,6 +23,9 @@
     <label>{{ 'pc_form.sender'|t(user.language) }} *</label>
     <input type="text" name="sender_name" value="{{ postcard.sender_name if is_edit else '' }}">
 
+    <label>{{ 'pc_form.send_time'|t(user.language) }}</label>
+    <input type="date" name="send_time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if is_edit and postcard.send_time else '' }}">
+
     <label>{{ 'pc_form.receive_time'|t(user.language) }} *</label>
     <input type="date" name="receive_time" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if is_edit and postcard.receive_time else today }}">
 
@@ -55,7 +58,7 @@
     <div id="fields-sent-delivered">
         <label>{{ 'pc_form.recipient'|t(user.language) }} *</label>
         <input type="text" name="recipient_name" value="{{ postcard.recipient_name if is_edit else '' }}">
-        <label>{{ 'pc_form.send_time'|t(user.language) }} *</label>
+        <label id="label-send-time">{{ 'pc_form.send_time'|t(user.language) }} *</label>
         <input type="date" name="send_time" id="input-send-time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if is_edit and postcard.send_time else (today if is_new else '') }}">
         <label id="label-arrival">{{ 'pc_form.arrival_time'|t(user.language) }}</label>
         <input type="date" name="arrival_time" id="input-arrival" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if is_edit and postcard.arrival_time else '' }}" {% if is_new or (is_edit and edit_status=='sent') %}disabled{% endif %}>
@@ -79,21 +82,25 @@
 </form>
 <script>
 {% if is_new and not is_received_form %}
-// ── 新建寄出：根据日期自动判定状态，可手动覆盖 ──
+// ── 新建寄出：待寄出时禁用寄出时间，寄出时自动填入 ──
 (function() {
     var sendTime = document.getElementById('input-send-time');
     var select = document.getElementById('status-select');
     var arrival = document.getElementById('input-arrival');
     var labelArrival = document.getElementById('label-arrival');
+    var labelSend = document.getElementById('label-send-time');
     var today = new Date().toISOString().slice(0, 10);
+
+    function updateSendTime(s) {
+        if (s === 'pending') {
+            sendTime.disabled = true;
+            sendTime.value = '';
+            if (labelSend) labelSend.textContent = '{{ "pc_form.send_time"|t(user.language) }}';
+        } else {
+            sendTime.disabled = false;
             if (!sendTime.value) sendTime.value = today;
-
-    var userOverrode = false;
-
-    function autoFromSendTime() {
-        var v = sendTime.value;
-        if (!v) return 'sent';
-        return v > today ? 'pending' : 'sent';
+            if (labelSend) labelSend.textContent = '{{ "pc_form.send_time"|t(user.language) }} *';
+        }
     }
 
     function updateArrival(s) {
@@ -109,22 +116,29 @@
     }
 
     function sync() {
-        var auto = autoFromSendTime();
-        if (!userOverrode) select.value = auto;
         updateArrival(select.value);
+        updateSendTime(select.value);
     }
 
-    select.addEventListener('change', function() { userOverrode = true; updateArrival(select.value); });
-    sendTime.addEventListener('change', function() { if (!userOverrode) sync(); });
-    sendTime.addEventListener('input', function() { if (!userOverrode) sync(); });
+    select.addEventListener('change', sync);
     sync();
 })();
 {% elif is_edit and not is_received_form %}
-// ── 编辑寄出：根据状态切换 arrival 可用性 ──
+// ── 编辑寄出：根据状态切换 send_time / arrival 可用性 ──
 function toggleFields() {
     var s = document.getElementById('status-select').value;
+    var sendTime = document.getElementById('input-send-time');
+    var labelSend = document.getElementById('label-send-time');
     var arrival = document.getElementById('input-arrival');
     var labelArrival = document.getElementById('label-arrival');
+    var today = new Date().toISOString().slice(0, 10);
+    if (s === 'pending') {
+        sendTime.disabled = true;
+        if (labelSend) labelSend.textContent = '{{ "pc_form.send_time"|t(user.language) }}';
+    } else {
+        sendTime.disabled = false;
+        if (labelSend) labelSend.textContent = '{{ "pc_form.send_time"|t(user.language) }} *';
+    }
     if (s === 'delivered') {
         arrival.disabled = false;
         labelArrival.textContent = '{{ "pc_form.arrival_time"|t(user.language) }} *';

app/templates/postcards.html

@@ -56,13 +56,9 @@
     {% if pc.notes %}<span class="postcard-row-notes">{{ pc.notes[:50] }}{% if pc.notes|length > 50 %}…{% endif %}</span>{% endif %}
     <div class="postcard-row-action">
         {% if pc.status == 'pending' %}
-        <form method="post" action="/postcards/{{ pc.id }}/mark-sent" onclick="event.preventDefault();event.stopPropagation();if(confirm('{{ 'pc_list.confirm_sent'|t(user.language) }}'))this.submit();">
-            <button type="submit" class="btn btn-sm btn-primary">{{ 'pc_list.mark_sent'|t(user.language) }}</button>
-        </form>
+        <button type="button" class="btn btn-sm btn-primary" onclick="event.preventDefault();event.stopPropagation();if(confirm('{{ 'pc_list.confirm_sent'|t(user.language) }}'))fetch('/postcards/{{ pc.id }}/mark-sent',{method:'POST'}).then(function(){location.reload();})">{{ 'pc_list.mark_sent'|t(user.language) }}</button>
         {% elif pc.status == 'sent' %}
-        <form method="post" action="/postcards/{{ pc.id }}/mark-delivered" onclick="event.preventDefault();event.stopPropagation();if(confirm('{{ 'pc_list.confirm_delivered'|t(user.language) }}'))this.submit();">
-            <button type="submit" class="btn btn-sm btn-primary">{{ 'pc_list.mark_delivered'|t(user.language) }}</button>
-        </form>
+        <button type="button" class="btn btn-sm btn-primary" onclick="event.preventDefault();event.stopPropagation();if(confirm('{{ 'pc_list.confirm_delivered'|t(user.language) }}'))fetch('/postcards/{{ pc.id }}/mark-delivered',{method:'POST'}).then(function(){location.reload();})">{{ 'pc_list.mark_delivered'|t(user.language) }}</button>
         {% endif %}
     </div>
 </a>

app/templates/profiles.html

@@ -34,6 +34,10 @@
                 <span class="stat-value">{{ e.total }}</span>
                 <span class="stat-label">{{ 'profiles.total'|t(user.language) }}</span>
             </div>
+            <div class="stat">
+                <span class="stat-value badge-pending-text">{{ e.pending }}</span>
+                <span class="stat-label">{{ 'status.pending'|t(user.language) }}</span>
+            </div>
             <div class="stat">
                 <span class="stat-value badge-sent-text">{{ e.sent }}</span>
                 <span class="stat-label">{{ 'dash.sent'|t(user.language) }}</span>

app/templates/showcase.html

@@ -12,8 +12,8 @@
         </div>
     </div>
 </div>
-<div class="section-header">
-    <h1>📮 {{ profile_user.username }} {{ 'showcase.title'|t(lang) }}</h1>
+<div class="section-header" style="text-align:center">
+    <h1 style="font-size:1.3rem">📮 {{ profile_user.username }} {{ 'showcase.title'|t(lang) }}</h1>
 </div>
 
 {% set sent_visible = [] %}