feat(postcard): profile country, country_from, per-user card number uniqueness, public page overhaul - Profile: add country field for default origin country - Postcard: add country_from field, auto-fill from profile.country on create - card_number uniqueness: change from global to per-user (profile_id + card_number) - Public pages: remove card_number display, only show cards with image_front - Public pages: show country as from→to format - Index page: no time display, add register button, fix lightbox with prev/next - Infinite scroll: add /api/public/cards endpoints and IntersectionObserver - Internal pages: update postcards list/detail for country_from display - i18n: add profiles.country_ph, pc_form.country_from, pc_detail.route

app/templates/showcase.html

@@ -16,7 +16,20 @@
     <h1>📮 {{ profile_user.username }} {{ 'showcase.title'|t(lang) }}</h1>
 </div>
 
-{% set has_content = (sent_all|length + received_all|length) > 0 %}
+{% set sent_visible = [] %}
+{% set received_visible = [] %}
+{% for pc in sent_all %}
+    {% if pc.image_front %}
+        {% if sent_visible.append(pc) %}{% endif %}
+    {% endif %}
+{% endfor %}
+{% for pc in received_all %}
+    {% if pc.image_front %}
+        {% if received_visible.append(pc) %}{% endif %}
+    {% endif %}
+{% endfor %}
+
+{% set has_content = (sent_visible|length + received_visible|length) > 0 %}
 {% if not has_content %}
 <div class="empty-state">
     <p>{{ 'showcase.empty'|t(lang) }}</p>
@@ -24,25 +37,21 @@
 {% else %}
 
 <div class="tabs" id="tabs">
-    <button class="tab active" onclick="switchTab('sent')">{{ 'showcase.tab_sent'|t(lang) }} ({{ sent_all|length }})</button>
-    <button class="tab" onclick="switchTab('received')">{{ 'showcase.tab_received'|t(lang) }} ({{ received_all|length }})</button>
+    <button class="tab active" onclick="switchTab('sent')">{{ 'showcase.tab_sent'|t(lang) }} ({{ sent_visible|length }})</button>
+    <button class="tab" onclick="switchTab('received')">{{ 'showcase.tab_received'|t(lang) }} ({{ received_visible|length }})</button>
 </div>
 
 <div id="tab-sent" class="tab-panel">
 {% if mode == 'flat' %}
-    <div class="showcase-grid">
-    {% for pc in sent_all %}
-        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-            {% if pc.image_front %}
+    <div class="showcase-grid" id="grid-sent">
+    {% for pc in sent_visible %}
+        <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
             <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-            {% else %}
-            <div class="showcase-card-img placeholder-img">📷</div>
-            {% endif %}
             <div class="showcase-card-body">
-                <strong>{{ pc.card_number }}</strong>
                 <div class="showcase-card-meta">
-                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                    {% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                    {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                    {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -50,21 +59,23 @@
     </div>
 {% else %}
     {% for g in profile_groups %}
-    {% if g.sent %}
+    {% set g_sent = [] %}
+    {% for pc in g.sent %}
+        {% if pc.image_front %}
+            {% if g_sent.append(pc) %}{% endif %}
+        {% endif %}
+    {% endfor %}
+    {% if g_sent %}
     <h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
     <div class="showcase-grid">
-        {% for pc in g.sent %}
-        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-            {% if pc.image_front %}
+        {% for pc in g_sent %}
+        <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
             <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-            {% else %}
-            <div class="showcase-card-img placeholder-img">📷</div>
-            {% endif %}
             <div class="showcase-card-body">
-                <strong>{{ pc.card_number }}</strong>
                 <div class="showcase-card-meta">
-                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                    {% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                    {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                    {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -73,23 +84,21 @@
     {% endif %}
     {% endfor %}
 {% endif %}
+<div id="scroll-sentinel-sent" style="height:1px"></div>
+<div id="scroll-loading-sent" style="text-align:center;padding:1rem;color:var(--text-muted);display:none">⏳</div>
 </div>
 
 <div id="tab-received" class="tab-panel" style="display:none">
 {% if mode == 'flat' %}
-    <div class="showcase-grid">
-    {% for pc in received_all %}
-        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-            {% if pc.image_front %}
+    <div class="showcase-grid" id="grid-received">
+    {% for pc in received_visible %}
+        <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
             <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-            {% else %}
-            <div class="showcase-card-img placeholder-img">📷</div>
-            {% endif %}
             <div class="showcase-card-body">
-                <strong>{{ pc.card_number }}</strong>
                 <div class="showcase-card-meta">
-                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                    {% if pc.receive_time %}<span>{{ pc.receive_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                    {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                    {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -97,21 +106,23 @@
     </div>
 {% else %}
     {% for g in profile_groups %}
-    {% if g.received %}
+    {% set g_received = [] %}
+    {% for pc in g.received %}
+        {% if pc.image_front %}
+            {% if g_received.append(pc) %}{% endif %}
+        {% endif %}
+    {% endfor %}
+    {% if g_received %}
     <h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
     <div class="showcase-grid">
-        {% for pc in g.received %}
-        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-            {% if pc.image_front %}
+        {% for pc in g_received %}
+        <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
             <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-            {% else %}
-            <div class="showcase-card-img placeholder-img">📷</div>
-            {% endif %}
             <div class="showcase-card-body">
-                <strong>{{ pc.card_number }}</strong>
                 <div class="showcase-card-meta">
-                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                    {% if pc.receive_time %}<span>{{ pc.receive_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                    {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                    {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -120,20 +131,88 @@
     {% endif %}
     {% endfor %}
 {% endif %}
+<div id="scroll-sentinel-received" style="height:1px"></div>
+<div id="scroll-loading-received" style="text-align:center;padding:1rem;color:var(--text-muted);display:none">⏳</div>
 </div>
 {% endif %}
 
 <div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
-    <button class="lightbox-close" onclick="closeLightbox(event)">&times;</button>
-    <button class="lightbox-prev" onclick="navLightbox(-1,event)">&#10094;</button>
-    <button class="lightbox-next" onclick="navLightbox(1,event)">&#10095;</button>
     <div class="lightbox-content" onclick="event.stopPropagation()">
+        <button class="lightbox-close" onclick="closeLightbox(event)">&times;</button>
+        <button class="lightbox-prev" onclick="navLightbox(-1,event)">&#8249;</button>
+        <button class="lightbox-next" onclick="navLightbox(1,event)">&#8250;</button>
         <img id="lightbox-img" src="" alt="">
         <div id="lightbox-caption" class="lightbox-caption"></div>
     </div>
 </div>
 
 <script>
+var _username = '{{ profile_user.username }}';
+var _sentPage = 1, _sentMore = {{ 'true' if sent_visible|length > 19 else 'false' }};
+var _recvPage = 1, _recvMore = {{ 'true' if received_visible|length > 19 else 'false' }};
+var _sentLoading = false, _recvLoading = false;
+
+function _flag(code) {
+    if (!code || code.length !== 2) return code || '';
+    return String.fromCodePoint(0x1F1E6 + code.charCodeAt(0) - 65) + String.fromCodePoint(0x1F1E6 + code.charCodeAt(1) - 65);
+}
+
+function _appendCard(c, gridId) {
+    var grid = document.getElementById(gridId);
+    if (!grid) return;
+    var div = document.createElement('div');
+    div.className = 'showcase-card';
+    div.setAttribute('data-front', c.image_front);
+    div.onclick = function() { openLightbox(div); };
+    var countryHtml = '';
+    if (c.country_from && c.country) countryHtml = '<span>' + _flag(c.country_from) + '→' + _flag(c.country) + '</span>';
+    else if (c.country) countryHtml = '<span>' + _flag(c.country) + '</span>';
+    div.innerHTML = '<img src="' + c.image_front + '" alt="" class="showcase-card-img" loading="lazy">' +
+        '<div class="showcase-card-body"><div class="showcase-card-meta">' + countryHtml + '</div></div>';
+    grid.appendChild(div);
+}
+
+function _loadMoreSent() {
+    if (_sentLoading || !_sentMore) return;
+    _sentLoading = true;
+    document.getElementById('scroll-loading-sent').style.display = '';
+    fetch('/api/public/cards/' + _username + '?page=' + (_sentPage + 1) + '&limit=20&tab=sent')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            _sentLoading = false;
+            document.getElementById('scroll-loading-sent').style.display = 'none';
+            _sentPage = data.page;
+            _sentMore = data.has_more;
+            data.cards.forEach(function(c) { _appendCard(c, 'grid-sent'); });
+            if (!_sentMore) { var s = document.getElementById('scroll-sentinel-sent'); if (s) s.remove(); }
+        })
+        .catch(function() { _sentLoading = false; });
+}
+
+function _loadMoreReceived() {
+    if (_recvLoading || !_recvMore) return;
+    _recvLoading = true;
+    document.getElementById('scroll-loading-received').style.display = '';
+    fetch('/api/public/cards/' + _username + '?page=' + (_recvPage + 1) + '&limit=20&tab=received')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            _recvLoading = false;
+            document.getElementById('scroll-loading-received').style.display = 'none';
+            _recvPage = data.page;
+            _recvMore = data.has_more;
+            data.cards.forEach(function(c) { _appendCard(c, 'grid-received'); });
+            if (!_recvMore) { var s = document.getElementById('scroll-sentinel-received'); if (s) s.remove(); }
+        })
+        .catch(function() { _recvLoading = false; });
+}
+
+var _obsSent = new IntersectionObserver(function(e) { if (e[0].isIntersecting) _loadMoreSent(); }, {rootMargin: '400px'});
+var _obsRecv = new IntersectionObserver(function(e) { if (e[0].isIntersecting) _loadMoreReceived(); }, {rootMargin: '400px'});
+var _sSent = document.getElementById('scroll-sentinel-sent');
+var _sRecv = document.getElementById('scroll-sentinel-received');
+if (_sSent) _obsSent.observe(_sSent);
+if (_sRecv) _obsRecv.observe(_sRecv);
+
 function switchTab(name) {
     document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
     document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
@@ -149,8 +228,7 @@ function buildLightboxItems() {
     var visible = document.querySelectorAll('.tab-panel:not([style*="display:none"]) .showcase-card[data-front]');
     visible.forEach(function(card) {
         var front = card.getAttribute('data-front');
-        var number = card.getAttribute('data-number');
-        if (front) lightboxItems.push({src: front, number: number});
+        if (front) lightboxItems.push({src: front});
     });
 }
 
@@ -158,9 +236,8 @@ function openLightbox(el) {
     buildLightboxItems();
     var front = el.getAttribute('data-front');
     if (!front) return;
-    var number = el.getAttribute('data-number');
     for (var i = 0; i < lightboxItems.length; i++) {
-        if (lightboxItems[i].number === number) { lightboxIdx = i; break; }
+        if (lightboxItems[i].src === front) { lightboxIdx = i; break; }
     }
     showLightboxItem();
     document.getElementById('lightbox').classList.add('active');
@@ -171,7 +248,7 @@ function showLightboxItem() {
     if (!lightboxItems.length) return;
     var item = lightboxItems[lightboxIdx];
     document.getElementById('lightbox-img').src = item.src;
-    document.getElementById('lightbox-caption').textContent = item.number + ' (' + (lightboxIdx+1) + '/' + lightboxItems.length + ')';
+    document.getElementById('lightbox-caption').textContent = (lightboxIdx+1) + '/' + lightboxItems.length;
 }
 
 function closeLightbox(e) {
@@ -194,13 +271,10 @@ document.addEventListener('keydown', function(e) {
     else if (e.key === 'ArrowLeft') navLightbox(-1);
     else if (e.key === 'ArrowRight') navLightbox(1);
 });
-// Close language dropdown when clicking outside
 document.addEventListener('click', function(e) {
     var sw = document.getElementById('langSwitcher');
     var dd = document.getElementById('langDropdown');
-    if (sw && dd && !sw.contains(e.target)) {
-        dd.classList.remove('show');
-    }
+    if (sw && dd && !sw.contains(e.target)) dd.classList.remove('show');
 });
 </script>
 {% endblock %}