From c2785b14d61dcac8a580e6dd6f7d635984b4d109 Mon Sep 17 00:00:00 2001
From: Parzival-Moksha <leviturk@protonmail.com>
Date: Thu, 16 Oct 2025 19:48:15 +0200
Subject: [PATCH] Fix emoji category filtering bug

The category tabs were not working because the click handler was:
1. Removing the entire container (including tabs)
2. Re-rendering everything
3. Trying to read the active tab (which no longer existed)

Fixed by:
- Only clearing the emoji grid (gridContainer.innerHTML = '')
- Rebuilding just the emoji buttons
- Preserving the category tabs and their active state

Now clicking different categories properly filters emojis.
---
 js/emojiLibrary.js | 46 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/js/emojiLibrary.js b/js/emojiLibrary.js
index 3a0e44d..bc80eda 100644
--- a/js/emojiLibrary.js
+++ b/js/emojiLibrary.js
@@ -603,14 +603,48 @@ window.emojiLibrary.renderEmojiGrid = function(containerId, onEmojiSelect, filte
             // Update active tab
             categoryTabButtons.forEach(t => t.classList.remove('active'));
             tab.classList.add('active');
-            
-            // Re-render the emoji grid with the selected category
+
+            // Get the selected category
             const selectedCategory = tab.getAttribute('data-category');
             console.log('Category selected:', selectedCategory);
-            
-            // Clear and recreate the grid
-            container.removeChild(gridContainer);
-            window.emojiLibrary.renderEmojiGrid(containerId, onEmojiSelect);
+
+            // Determine which emojis to show
+            let emojisToShow = [];
+            if (selectedCategory === 'all') {
+                // For 'all' category, combine all emojis from the categories
+                Object.values(window.emojiLibrary.EMOJIS).forEach(categoryEmojis => {
+                    emojisToShow = [...emojisToShow, ...categoryEmojis];
+                });
+            } else if (window.emojiLibrary.EMOJIS[selectedCategory]) {
+                // For specific category, use emojis from that category
+                emojisToShow = window.emojiLibrary.EMOJIS[selectedCategory];
+            }
+
+            console.log(`Updating grid with ${emojisToShow.length} emojis for category: ${selectedCategory}`);
+
+            // Clear only the grid and rebuild it
+            gridContainer.innerHTML = '';
+
+            // Add emojis to grid
+            emojisToShow.forEach(emoji => {
+                const emojiButton = document.createElement('button');
+                emojiButton.className = 'emoji-button';
+                emojiButton.textContent = emoji;
+                emojiButton.title = 'Click to encode with this emoji';
+
+                emojiButton.addEventListener('click', () => {
+                    if (typeof onEmojiSelect === 'function') {
+                        onEmojiSelect(emoji);
+                        // Add visual feedback when clicked
+                        emojiButton.style.backgroundColor = '#e6f7ff';
+                        setTimeout(() => {
+                            emojiButton.style.backgroundColor = '';
+                        }, 300);
+                    }
+                });
+
+                gridContainer.appendChild(emojiButton);
+            });
         });
     });