V1.1.1

scitemcustom.php

@@ -700,6 +700,28 @@ $current_session_user = $_SESSION['user'] ?? '';
             margin-bottom: 1rem;
         }
 
+        .list-filter-bar {
+            display: flex;
+            gap: 0.75rem;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-bottom: 1rem;
+        }
+
+        .list-filter-input {
+            flex: 1;
+            min-width: 240px;
+        }
+
+        .list-filter-meta {
+            color: #96a0b5;
+            font-size: 0.8rem;
+        }
+
+        .hidden-by-filter {
+            display: none !important;
+        }
+
         @media (max-width: 1200px) {
             .admin-grid {
                 grid-template-columns: 1fr;
@@ -833,11 +855,32 @@ $current_session_user = $_SESSION['user'] ?? '';
                     <?php if (empty($custom_items)): ?>
                         <div class="empty-state">Aucun objet Item Custom enregistré pour le moment.</div>
                     <?php else: ?>
-                        <div class="item-card-list">
+                        <div class="list-filter-bar">
+                            <input
+                                type="text"
+                                id="item-custom-filter"
+                                class="form-control list-filter-input"
+                                placeholder="Filtrer les objets déjà ajoutés par nom, type, sous-type ou UUID..."
+                                autocomplete="off"
+                            >
+                            <button type="button" id="item-custom-filter-reset" class="btn-modern danger">Effacer</button>
+                            <div class="list-filter-meta">
+                                Affichage : <span id="item-custom-visible-count"><?php echo count($custom_items); ?></span> / <?php echo count($custom_items); ?>
+                            </div>
+                        </div>
+                        <div class="form-help" style="margin-top:-0.25rem; margin-bottom:1rem;">Tape quelques lettres pour retrouver rapidement un objet déjà présent dans ta liste Item Custom.</div>
+                        <div id="item-custom-no-results" class="empty-state hidden-by-filter">Aucun objet Item Custom ne correspond à cette recherche.</div>
+                        <div class="item-card-list" id="item-custom-list">
                             <?php foreach ($custom_items as $item): ?>
                                 <?php $item_id = (int) $item['cl_scitemcustom_id']; ?>
                                 <?php $item_stats = $custom_stats_by_item[$item_id] ?? []; ?>
-                                <section class="custom-item-card" id="itemcustom-<?php echo $item_id; ?>">
+                                <?php $item_search_text = trim(implode(' ', array_filter([
+                                    (string) ($item['cl_scobjs_name'] ?? ''),
+                                    (string) ($item['cl_scobjs_type'] ?? ''),
+                                    (string) ($item['cl_scobjs_subtype'] ?? ''),
+                                    (string) ($item['cl_scobjs_uuid'] ?? ''),
+                                ]))); ?>
+                                <section class="custom-item-card" id="itemcustom-<?php echo $item_id; ?>" data-item-search="<?php echo htmlspecialchars($item_search_text, ENT_QUOTES, 'UTF-8'); ?>">
                                     <div class="custom-item-header">
                                         <div class="item-meta">
                                             <img src="https://cstone.space/uifimages/<?php echo htmlspecialchars($item['cl_scobjs_uuid'], ENT_QUOTES, 'UTF-8'); ?>.png" class="item-preview" alt="">
@@ -977,5 +1020,51 @@ $current_session_user = $_SESSION['user'] ?? '';
             </main>
         </div>
     </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var filterInput = document.getElementById('item-custom-filter');
+            var resetButton = document.getElementById('item-custom-filter-reset');
+            var visibleCount = document.getElementById('item-custom-visible-count');
+            var emptyState = document.getElementById('item-custom-no-results');
+            var itemCards = Array.prototype.slice.call(document.querySelectorAll('#item-custom-list .custom-item-card'));
+
+            if (!filterInput || !resetButton || !visibleCount || !emptyState || itemCards.length === 0) {
+                return;
+            }
+
+            function normalizeValue(value) {
+                return (value || '')
+                    .toString()
+                    .toLowerCase()
+                    .normalize('NFD')
+                    .replace(/[̀-ͯ]/g, '')
+                    .trim();
+            }
+
+            function applyFilter() {
+                var query = normalizeValue(filterInput.value);
+                var matches = 0;
+
+                itemCards.forEach(function (card) {
+                    var searchable = normalizeValue(card.getAttribute('data-item-search'));
+                    var isMatch = query === '' || searchable.indexOf(query) !== -1;
+                    card.classList.toggle('hidden-by-filter', !isMatch);
+                    if (isMatch) {
+                        matches += 1;
+                    }
+                });
+
+                visibleCount.textContent = String(matches);
+                emptyState.classList.toggle('hidden-by-filter', matches !== 0);
+            }
+
+            filterInput.addEventListener('input', applyFilter);
+            resetButton.addEventListener('click', function () {
+                filterInput.value = '';
+                filterInput.focus();
+                applyFilter();
+            });
+        });
+    </script>
 </body>
 </html>