Upgrade of BloomFeed v0.1

public/css/app.css

@@ -998,6 +998,148 @@ h1, h2, h3 {
     background: var(--accent-soft);
 }
 
+/* ---------- Catalogue (market) ---------- */
+
+.market-header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+}
+
+.cache-notice {
+    background: var(--accent-soft);
+    border: 1px solid var(--accent-soft-strong);
+    border-radius: var(--radius-sm);
+    padding: 12px 16px;
+    font-size: var(--font-sm);
+    font-weight: 600;
+    color: var(--accent-strong);
+    animation: fade-up 350ms var(--ease-out) both;
+}
+
+.market-search {
+    font-size: var(--font-base);
+    padding: 13px 18px;
+    border-radius: var(--radius);
+}
+
+.market-chips {
+    display: flex;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.chip {
+    background: var(--surface);
+    border: 1.5px solid var(--border);
+    border-radius: var(--radius-full);
+    padding: 6px 15px;
+    font-size: var(--font-xs);
+    font-weight: 700;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-family: inherit;
+    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast);
+}
+
+.chip:hover {
+    border-color: var(--accent);
+    color: var(--accent-strong);
+    transform: translateY(-1px);
+}
+
+.chip.active {
+    background: var(--gradient-accent);
+    border-color: transparent;
+    color: var(--accent-contrast);
+    box-shadow: var(--shadow-sm);
+}
+
+.chip-static {
+    cursor: default;
+    background: var(--accent-soft);
+    border-color: transparent;
+    color: var(--accent-strong);
+    font-size: 10px;
+    padding: 3px 10px;
+}
+
+.chip-static:hover {
+    transform: none;
+    color: var(--accent-strong);
+    border-color: transparent;
+}
+
+.market-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+    gap: var(--space-4);
+}
+
+.market-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+    padding: var(--space-4) var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    animation: fade-up 450ms var(--ease-out) both;
+    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
+}
+
+.market-card:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--accent-soft-strong);
+}
+
+.market-card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+}
+
+.market-card-title {
+    font-weight: 700;
+    font-size: var(--font-base);
+}
+
+.market-card-desc {
+    font-size: var(--font-sm);
+    color: var(--text-muted);
+    margin: 0;
+    flex: 1;
+    overflow-wrap: anywhere;
+}
+
+.market-card-foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--space-1);
+}
+
+.market-lang {
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    color: var(--text-faint);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 2px 6px;
+}
+
+.market-added {
+    color: var(--green);
+    font-size: var(--font-sm);
+    font-weight: 700;
+}
+
 /* ---------- Responsive ---------- */
 
 @media (max-width: 720px) {

public/js/app.js

@@ -31,4 +31,49 @@
             event.preventDefault();
         }
     });
+
+    // Catalogue : recherche + filtre par catégorie côté client
+    document.addEventListener('DOMContentLoaded', function () {
+        var grid = document.getElementById('market-grid');
+        if (!grid) {
+            return;
+        }
+
+        var search = document.getElementById('market-search');
+        var chips = document.getElementById('market-chips');
+        var emptyNotice = document.getElementById('market-empty');
+        var activeCategory = '';
+
+        function applyFilters() {
+            var query = (search.value || '').toLowerCase().trim();
+            var visible = 0;
+
+            grid.querySelectorAll('.market-card').forEach(function (card) {
+                var matchesCategory = !activeCategory || card.getAttribute('data-category') === activeCategory;
+                var matchesQuery = !query || card.getAttribute('data-search').indexOf(query) !== -1;
+                var show = matchesCategory && matchesQuery;
+                card.hidden = !show;
+                if (show) {
+                    visible++;
+                }
+            });
+
+            emptyNotice.hidden = visible > 0;
+        }
+
+        search.addEventListener('input', applyFilters);
+
+        chips.addEventListener('click', function (event) {
+            var chip = event.target.closest('.chip');
+            if (!chip) {
+                return;
+            }
+            chips.querySelectorAll('.chip').forEach(function (c) {
+                c.classList.remove('active');
+            });
+            chip.classList.add('active');
+            activeCategory = chip.getAttribute('data-category');
+            applyFilters();
+        });
+    });
 })();