From 0dd0dd022429c0d1646093bd887f8a75f7237880 Mon Sep 17 00:00:00 2001
From: Surya Handika Putratama <ubunteroz@gmail.com>
Date: Sat, 24 Jan 2026 12:02:35 +0800
Subject: [PATCH] feat: add related icons section to modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add "Maybe Related" section showing icons with similar names
- Find related icons by base name matching (e.g., time-check → time-delete)
- Add icons to modal section labels (settings-sliders, link)
- Style related icons grid with hover effects

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 explorer.css  | 54 ++++++++++++++++++++++++++++++++++++++
 explorer.html |  7 ++++-
 explorer.js   | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 132 insertions(+), 1 deletion(-)

diff --git a/explorer.css b/explorer.css
index 5c1d5ff..fc6ef50 100644
--- a/explorer.css
+++ b/explorer.css
@@ -1030,6 +1030,14 @@ body {
     font-weight: 700;
     margin-bottom: 8px;
     letter-spacing: 0.6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    & .fi {
+        font-size: 12px;
+        color: var(--accent-primary);
+    }
 }
 
 .modal-variations {
@@ -1038,6 +1046,48 @@ body {
     gap: 8px;
 }
 
+.related-icons {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+    gap: 8px;
+}
+
+.related-icon {
+    text-align: center;
+    padding: 10px 8px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    border: 1px solid var(--border-color);
+    transition: var(--transition);
+
+    &:hover {
+        background: var(--bg-elevated);
+        border-color: var(--accent-primary);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-md);
+
+        & .related-icon-symbol {
+            color: var(--accent-primary);
+        }
+    }
+
+    & .related-icon-symbol {
+        font-size: 20px;
+        display: block;
+        margin-bottom: 6px;
+        color: var(--text-primary);
+    }
+
+    & .related-icon-name {
+        font-size: 9px;
+        color: var(--text-muted);
+        font-weight: 500;
+        word-break: break-all;
+        line-height: 1.3;
+    }
+}
+
 .modal-var {
     text-align: center;
     padding: 10px 6px;
@@ -1374,6 +1424,10 @@ body {
         grid-template-columns: repeat(4, 1fr);
     }
 
+    .related-icons {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
     .modal-actions-inline {
         margin-left: 0;
         width: 100%;
diff --git a/explorer.html b/explorer.html
index 3f7f9c3..a2879a3 100644
--- a/explorer.html
+++ b/explorer.html
@@ -135,10 +135,15 @@
 
             <div class="modal-content">
                 <div class="modal-section">
-                    <div class="modal-label">All Variations</div>
+                    <div class="modal-label"><span class="fi fi-rs-settings-sliders"></span> All Variations</div>
                     <div class="modal-variations" id="modalVariations"></div>
                 </div>
 
+                <div class="modal-section" id="relatedSection" style="display:none">
+                    <div class="modal-label"><span class="fi fi-rs-link"></span> Maybe Related</div>
+                    <div class="related-icons" id="relatedIcons"></div>
+                </div>
+
                 <div class="modal-footer">
                     <button class="modal-btn" id="modalClose">
                         <span class="fi fi-rs-cross"></span> Close <span class="btn-key">Esc</span>
diff --git a/explorer.js b/explorer.js
index d487831..d26718b 100644
--- a/explorer.js
+++ b/explorer.js
@@ -237,6 +237,53 @@ function animateGrid() {
 function animateModal() {
 }
 
+function findRelatedIcons(currentName, currentPrefix, limit = 12) {
+    const parts = currentName.split('-');
+    const baseName = parts[0];
+
+    const relatedScores = new Map();
+
+    for (const prefix of Object.keys(iconsByPrefix)) {
+        for (const icon of iconsByPrefix[prefix]) {
+            if (icon.name === currentName) continue;
+
+            const iconParts = icon.name.split('-');
+            const iconBase = iconParts[0];
+
+            let score = 0;
+
+            if (iconBase === baseName) {
+                score += 50;
+
+                const remainingParts = iconParts.slice(1).join('-');
+                const currentRemaining = parts.slice(1).join('-');
+
+                if (remainingParts === currentRemaining) {
+                    score += 20;
+                }
+            } else if (icon.name.includes(baseName) || baseName.includes(iconBase)) {
+                score += 10;
+            }
+
+            if (prefix === currentPrefix) {
+                score += 5;
+            }
+
+            if (score > 0) {
+                const existing = relatedScores.get(icon.name) || { score: 0, prefixes: new Set() };
+                existing.score = Math.max(existing.score, score);
+                existing.prefixes.add(prefix);
+                relatedScores.set(icon.name, existing);
+            }
+        }
+    }
+
+    return Array.from(relatedScores.entries())
+        .sort((a, b) => b[1].score - a[1].score)
+        .slice(0, limit)
+        .map(([name, data]) => ({ name, prefixes: Array.from(data.prefixes) }));
+}
+
 function renderIcons() {
     const prefix = getCurrentPrefix();
     const filtered = getFilteredIcons();
@@ -300,6 +347,8 @@ function showModal(name, currentPrefix) {
     const modalTitle = document.getElementById('modalTitle');
     const modalSubtitle = document.getElementById('modalSubtitle');
     const modalVariations = document.getElementById('modalVariations');
+    const relatedSection = document.getElementById('relatedSection');
+    const relatedIcons = document.getElementById('relatedIcons');
 
     modalTitle.textContent = name;
 
@@ -337,6 +386,29 @@ function showModal(name, currentPrefix) {
         });
     });
 
+    const related = findRelatedIcons(name, currentPrefix);
+    if (related.length > 0) {
+        relatedSection.style.display = 'block';
+        relatedIcons.innerHTML = related.map(({ name: relatedName, prefixes }) => {
+            const relatedPrefix = prefixes.includes(currentPrefix) ? currentPrefix : prefixes[0];
+            const relatedClassName = `fi-${relatedPrefix}-${relatedName}`;
+            return `
+                <div class="related-icon" data-name="${relatedName}" data-prefix="${relatedPrefix}">
+                    <span class="fi ${relatedClassName} related-icon-symbol"></span>
+                    <div class="related-icon-name">${relatedName}</div>
+                </div>
+            `;
+        }).join('');
+
+        relatedIcons.querySelectorAll('.related-icon').forEach(el => {
+            el.addEventListener('click', () => {
+                showModal(el.dataset.name, el.dataset.prefix);
+            });
+        });
+    } else {
+        relatedSection.style.display = 'none';
+    }
+
     modalOverlay.classList.add('show');
     animateModal();
 }