claude-code-templates 1.21.11 → 1.21.13

package/docs/js/search-functionality.js

@@ -0,0 +1,1165 @@
+// Search functionality for Claude Code Templates
+let searchActive = false;
+let searchResults = [];
+let allComponents = {};
+let searchTimeout = null;
+
+/**
+ * Toggle search bar visibility
+ */
+function toggleSearch() {
+    const container = document.getElementById('searchBarContainer');
+    const input = document.getElementById('searchInput');
+    const searchBtn = document.getElementById('searchToggleBtn');
+    const categoryLabels = document.querySelectorAll('.category-filter-label');
+    
+    if (searchActive) {
+        // Hide search and show category sections
+        container.style.display = 'none';
+        searchActive = false;
+        searchBtn.classList.remove('active');
+        clearSearch();
+        
+        // Show category filter labels/sections
+        categoryLabels.forEach(label => {
+            label.style.display = '';
+        });
+    } else {
+        // Show search and hide category sections
+        container.style.display = 'block';
+        searchActive = true;
+        searchBtn.classList.add('active');
+        input.focus();
+        
+        // Hide category filter labels/sections only (keep filter buttons visible)
+        categoryLabels.forEach(label => {
+            label.style.display = 'none';
+        });
+        
+        // Ensure components are loaded
+        if (Object.keys(allComponents).length === 0) {
+            loadComponentsForSearch();
+        }
+    }
+}
+
+/**
+ * Handle search input - now only shows/hides clear button, doesn't trigger search
+ */
+function handleSearchInput(event) {
+    const query = event.target.value;
+    const clearBtn = document.getElementById('clearSearchBtn');
+    
+    // Show/hide clear button
+    if (query.length > 0) {
+        clearBtn.style.display = 'flex';
+    } else {
+        clearBtn.style.display = 'none';
+        // If input is empty, restore previous view
+        restorePreviousView();
+    }
+}
+
+/**
+ * Handle keyboard shortcuts in search
+ */
+function handleSearchKeydown(event) {
+    if (event.key === 'Escape') {
+        clearSearch();
+    } else if (event.key === 'Enter') {
+        event.preventDefault();
+        const query = event.target.value.trim();
+        if (query.length >= 3) {
+            performSearch(query);
+        } else if (query.length === 0) {
+            restorePreviousView();
+        }
+    }
+}
+
+/**
+ * Clear search and reset view
+ */
+function clearSearch() {
+    const input = document.getElementById('searchInput');
+    const clearBtn = document.getElementById('clearSearchBtn');
+    
+    input.value = '';
+    clearBtn.style.display = 'none';
+    
+    // Clear search timeout
+    if (searchTimeout) {
+        clearTimeout(searchTimeout);
+        searchTimeout = null;
+    }
+    
+    // Clear URL parameter
+    updateURLWithSearch('');
+    
+    // Restore previous view
+    restorePreviousView();
+    
+    searchResults = [];
+}
+
+/**
+ * Restore the previous view (before search was active)
+ */
+function restorePreviousView() {
+    const resultsInfo = document.getElementById('searchResultsInfo');
+    resultsInfo.style.display = 'none';
+    
+    // Show filters again
+    showFilters();
+    
+    // Reset to current filter view
+    const activeFilter = document.querySelector('.component-type-filters .filter-chip.active');
+    if (activeFilter) {
+        const filterType = activeFilter.getAttribute('data-filter');
+        if (window.indexManager) {
+            window.indexManager.displayCurrentFilter();
+        }
+    } else {
+        // Fallback to agents if no active filter found
+        if (window.indexManager) {
+            window.indexManager.setFilter('agents');
+        }
+    }
+}
+
+/**
+ * Load all components for search functionality
+ */
+async function loadComponentsForSearch() {
+    try {
+        // Check if dataLoader is available and use it
+        if (window.dataLoader) {
+            console.log('Using DataLoader for search components...');
+            const data = await window.dataLoader.loadAllComponents();
+            
+            if (data) {
+                // Process each category for search
+                const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps'];
+                
+                for (const category of categories) {
+                    if (data[category] && Array.isArray(data[category])) {
+                        // Process components to make them search-friendly
+                        allComponents[category] = data[category].map(component => ({
+                            ...component,
+                            // Normalize fields for better searching
+                            title: component.name || component.title || 'Untitled',
+                            displayName: (component.name || component.title || '').replace(/[-_]/g, ' '),
+                            category: category,
+                            searchableText: [
+                                component.name || component.title,
+                                component.description,
+                                component.category,
+                                ...(component.tags || []),
+                                component.keywords || '',
+                                component.path || ''
+                            ].filter(Boolean).join(' ').toLowerCase(),
+                            
+                            // Ensure tags exist
+                            tags: component.tags || [component.category].filter(Boolean)
+                        }));
+                    }
+                }
+                
+                console.log('Search data loaded successfully via DataLoader:', Object.keys(allComponents));
+                return;
+            }
+        }
+        
+        // Fallback: direct fetch if DataLoader not available
+        console.log('DataLoader not available, using direct fetch...');
+        const response = await fetch('components.json');
+        if (response.ok) {
+            const data = await response.json();
+            
+            // Process each category for search
+            const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps'];
+            
+            for (const category of categories) {
+                if (data[category] && Array.isArray(data[category])) {
+                    // Process components to make them search-friendly
+                    allComponents[category] = data[category].map(component => ({
+                        ...component,
+                        // Normalize fields for better searching
+                        title: component.name || component.title || 'Untitled',
+                        displayName: (component.name || component.title || '').replace(/[-_]/g, ' '),
+                        category: category,
+                        searchableText: [
+                            component.name || component.title,
+                            component.description,
+                            component.category,
+                            ...(component.tags || []),
+                            component.keywords || '',
+                            component.path || ''
+                        ].filter(Boolean).join(' ').toLowerCase(),
+                        
+                        // Ensure tags exist
+                        tags: component.tags || [component.category].filter(Boolean)
+                    }));
+                }
+            }
+            
+            console.log('Search data loaded successfully via direct fetch:', Object.keys(allComponents));
+        } else {
+            console.error('Failed to load components.json');
+        }
+    } catch (error) {
+        console.error('Error loading components for search:', error);
+        
+        // Fallback: try to use cached data if available
+        if (window.getSearchData) {
+            const categories = ['agents', 'commands', 'settings', 'hooks', 'mcps'];
+            for (const category of categories) {
+                const data = window.getSearchData(category);
+                if (data && data.length > 0) {
+                    allComponents[category] = data;
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Update URL with search parameter
+ */
+function updateURLWithSearch(query) {
+    const url = new URL(window.location);
+    if (query && query.length >= 3) {
+        url.searchParams.set('search', encodeURIComponent(query));
+    } else {
+        url.searchParams.delete('search');
+    }
+    window.history.replaceState({}, '', url);
+}
+
+/**
+ * Get search query from URL parameters
+ */
+function getSearchQueryFromURL() {
+    const params = new URLSearchParams(window.location.search);
+    return params.get('search') ? decodeURIComponent(params.get('search')) : null;
+}
+
+/**
+ * Update URL with filter using path-based routing
+ */
+function updateURLWithFilter(filter) {
+    const currentSearch = window.location.search; // Preserve search parameters
+    const newPath = `/${filter}${currentSearch}`;
+    
+    window.history.pushState({}, '', newPath);
+}
+
+/**
+ * Get filter from URL path
+ */
+function getFilterFromURL() {
+    const path = window.location.pathname;
+    const segments = path.split('/').filter(segment => segment);
+    
+    // Check if first segment is a valid filter
+    const validFilters = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'templates'];
+    const firstSegment = segments[0];
+    
+    if (firstSegment && validFilters.includes(firstSegment)) {
+        return firstSegment;
+    }
+    
+    // If no valid filter found and we're on root, default to agents
+    if (path === '/' || path === '') {
+        return 'agents';
+    }
+    
+    return 'agents'; // Default fallback
+}
+
+/**
+ * Perform search across all loaded components
+ */
+function performSearch(query) {
+    if (!query || query.length < 3) {
+        updateSearchResults([]);
+        showFilters(); // Show filters when no search
+        updateURLWithSearch(''); // Clear URL parameter
+        return;
+    }
+    
+    // Update URL with search query
+    updateURLWithSearch(query);
+    
+    // Hide filters during search
+    hideFilters();
+    
+    const normalizedQuery = query.toLowerCase().trim();
+    const results = [];
+    const categoryMatches = new Set();
+    
+    // Search across all categories except templates
+    Object.keys(allComponents).forEach(category => {
+        if (category === 'templates') return; // Skip templates
+        
+        const components = allComponents[category];
+        if (!components || !Array.isArray(components)) return;
+        
+        components.forEach(component => {
+            const matchScore = calculateMatchScore(component, normalizedQuery, category);
+            
+            if (matchScore > 0) {
+                results.push({
+                    ...component,
+                    category: category,
+                    matchScore: matchScore,
+                    matchType: getMatchType(component, normalizedQuery, category)
+                });
+                categoryMatches.add(category);
+            }
+        });
+    });
+    
+    // Sort by match score (highest first)
+    results.sort((a, b) => b.matchScore - a.matchScore);
+    
+    searchResults = results;
+    updateSearchResults(results, categoryMatches);
+    displaySearchResults(results);
+}
+
+/**
+ * Calculate match score for a component
+ */
+function calculateMatchScore(component, query, category) {
+    let score = 0;
+    
+    // Category name match (highest priority)
+    if (category.includes(query)) {
+        score += 100;
+    }
+    
+    // Component name/title match
+    const name = (component.name || component.title || '').toLowerCase();
+    if (name.includes(query)) {
+        score += name.startsWith(query) ? 80 : 60;
+    }
+    
+    // Description match
+    const description = (component.description || '').toLowerCase();
+    if (description.includes(query)) {
+        score += 30;
+    }
+    
+    // Tags match
+    if (component.tags && Array.isArray(component.tags)) {
+        const tagMatch = component.tags.some(tag => 
+            tag.toLowerCase().includes(query)
+        );
+        if (tagMatch) {
+            score += 40;
+        }
+    }
+    
+    // Keywords match (for settings/hooks)
+    if (component.keywords) {
+        const keywordMatch = component.keywords.toLowerCase().includes(query);
+        if (keywordMatch) {
+            score += 25;
+        }
+    }
+    
+    // Path match (for file-based components)
+    if (component.path) {
+        const pathMatch = component.path.toLowerCase().includes(query);
+        if (pathMatch) {
+            score += 15;
+        }
+    }
+    
+    return score;
+}
+
+/**
+ * Get match type for display
+ */
+function getMatchType(component, query, category) {
+    const name = (component.name || component.title || '').toLowerCase();
+    const description = (component.description || '').toLowerCase();
+    
+    if (category.includes(query)) return 'category';
+    if (name.includes(query)) return 'name';
+    if (description.includes(query)) return 'description';
+    if (component.tags && component.tags.some(tag => tag.toLowerCase().includes(query))) return 'tag';
+    if (component.keywords && component.keywords.toLowerCase().includes(query)) return 'keyword';
+    if (component.path && component.path.toLowerCase().includes(query)) return 'path';
+    
+    return 'other';
+}
+
+/**
+ * Update search results info display
+ */
+function updateSearchResults(results, categoryMatches = new Set()) {
+    const resultsInfo = document.getElementById('searchResultsInfo');
+    const resultsCount = document.getElementById('resultsCount');
+    const filterTags = document.getElementById('searchFilterTags');
+    
+    if (results.length === 0) {
+        resultsInfo.style.display = 'none';
+        return;
+    }
+    
+    resultsInfo.style.display = 'block';
+    
+    // Update count with terminal-style format
+    const count = results.length;
+    resultsCount.textContent = `Found(${count} result${count !== 1 ? 's' : ''})`;
+    
+    // Update category tags
+    if (categoryMatches.size > 0) {
+        const categoryIcons = {
+            agents: '🤖',
+            commands: '⚡',
+            settings: '⚙️',
+            hooks: '🪝',
+            mcps: '🔌'
+        };
+        
+        const tags = Array.from(categoryMatches).map(category => {
+            const icon = categoryIcons[category] || '';
+            const name = category.charAt(0).toUpperCase() + category.slice(1);
+            return `<span class="search-category-tag">${icon} ${name}</span>`;
+        }).join('');
+        
+        filterTags.innerHTML = tags;
+    } else {
+        filterTags.innerHTML = '';
+    }
+}
+
+/**
+ * Display search results in the grid
+ */
+function displaySearchResults(results) {
+    const unifiedGrid = document.getElementById('unifiedGrid');
+    
+    if (!unifiedGrid) {
+        console.error('Unified grid not found');
+        return;
+    }
+    
+    // Clear current content
+    unifiedGrid.innerHTML = '';
+    
+    if (results.length === 0) {
+        // Show no results message
+        unifiedGrid.innerHTML = `
+            <div class="no-search-results">
+                <div class="no-results-icon">🔍</div>
+                <h3>No components found</h3>
+                <p>Try searching for:</p>
+                <ul class="search-suggestions">
+                    <li><strong>Categories:</strong> agents, commands, settings, hooks, mcps</li>
+                    <li><strong>Technologies:</strong> react, python, git, telegram, api</li>
+                    <li><strong>Features:</strong> security, performance, automation, notifications</li>
+                </ul>
+            </div>
+        `;
+        return;
+    }
+    
+    // Group results by category for better organization
+    const groupedResults = {};
+    results.forEach(result => {
+        if (!groupedResults[result.category]) {
+            groupedResults[result.category] = [];
+        }
+        groupedResults[result.category].push(result);
+    });
+    
+    // Render grouped results in specific order
+    let html = '';
+    const categoryOrder = ['agents', 'commands', 'settings', 'hooks', 'mcps'];
+    
+    categoryOrder.forEach(category => {
+        if (!groupedResults[category]) return;
+        const categoryResults = groupedResults[category];
+        const categoryIcon = getCategoryIcon(category);
+        const categoryName = category.charAt(0).toUpperCase() + category.slice(1);
+        
+        html += `
+            <div class="search-category-section">
+                <h3 class="search-category-header">
+                    <span class="category-icon">${categoryIcon}</span>
+                    ${categoryName} (${categoryResults.length})
+                </h3>
+                <div class="search-category-grid">
+        `;
+        
+        categoryResults.forEach(component => {
+            html += generateComponentCard(component, category);
+        });
+        
+        html += `
+                </div>
+            </div>
+        `;
+    });
+    
+    unifiedGrid.innerHTML = html;
+}
+
+/**
+ * Get category icon
+ */
+function getCategoryIcon(category) {
+    const icons = {
+        agents: '🤖',
+        commands: '⚡',
+        settings: '⚙️',
+        hooks: '🪝',
+        mcps: '🔌'
+    };
+    return icons[category] || '📦';
+}
+
+/**
+ * Generate component card HTML (matching existing template-card format)
+ */
+function generateComponentCard(component, category) {
+    // Generate install command - remove .md extension from path
+    let componentPath = component.path || component.name;
+    // Remove .md or .json extensions from path
+    if (componentPath.endsWith('.md') || componentPath.endsWith('.json')) {
+        componentPath = componentPath.replace(/\.(md|json)$/, '');
+    }
+    const installCommand = `npx claude-code-templates@latest --${component.type}=${componentPath} --yes`;
+    
+    const typeConfig = {
+        agent: { icon: '🤖', color: '#ff6b6b' },
+        command: { icon: '⚡', color: '#4ecdc4' },
+        mcp: { icon: '🔌', color: '#45b7d1' },
+        setting: { icon: '⚙️', color: '#9c88ff' },
+        hook: { icon: '🪝', color: '#ff8c42' }
+    };
+    
+    const config = typeConfig[component.type];
+    
+    // Escape quotes and special characters for onclick attributes
+    const escapedType = component.type.replace(/'/g, "\\'");
+    const escapedName = (component.name || '').replace(/'/g, "\\'");
+    const escapedPath = (component.path || component.name || '').replace(/'/g, "\\'");
+    const escapedCategory = (component.category || 'general').replace(/'/g, "\\'");
+    const escapedCommand = installCommand.replace(/'/g, "\\'");
+    
+    // Create category label (use "General" if no category)
+    const categoryName = component.category || 'general';
+    const categoryLabel = `<div class="category-label">${categoryName.charAt(0).toUpperCase() + categoryName.slice(1)}</div>`;
+    
+    // Format component name
+    const formattedName = (component.name || '').split(/[-_]/).map(word => 
+        word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+    
+    // Get description
+    const description = component.description || 'Component for enhanced development workflow';
+    const truncatedDescription = description.length > 80 ? description.substring(0, 80) + '...' : description;
+    
+    return `
+        <div class="template-card" data-type="${component.type}">
+            <div class="card-inner">
+                <div class="card-front">
+                    ${categoryLabel}
+                    <div class="framework-logo" style="color: ${config.color}">
+                        <span class="component-icon">${config.icon}</span>
+                    </div>
+                    <h3 class="template-title">${formattedName}</h3>
+                    <p class="template-description">${truncatedDescription}</p>
+                </div>
+                <div class="card-back">
+                    <div class="command-display">
+                        <h3>Installation Command</h3>
+                        <div class="command-code-container">
+                            <div class="command-code">${installCommand}</div>
+                            <button class="copy-overlay-btn" onclick="copyToClipboard('${escapedCommand}'); event.stopPropagation();" title="Copy command">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                                </svg>
+                                Copy Command
+                            </button>
+                        </div>
+                        <div class="card-actions">
+                            <button class="view-files-btn" onclick="showComponentDetails('${escapedType}', '${escapedName}', '${escapedPath}', '${escapedCategory}')">
+                                📁 View Details
+                            </button>
+                            <button class="add-to-cart-btn" 
+                                    data-type="${component.type}s" 
+                                    data-path="${componentPath}"
+                                    onclick="handleAddToCart('${escapedName}', '${componentPath}', '${component.type}s', '${escapedCategory}', this)">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M19,7H18V6A2,2 0 0,0 16,4H8A2,2 0 0,0 6,6V7H5A1,1 0 0,0 4,8A1,1 0 0,0 5,9H6V19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V9H19A1,1 0 0,0 20,8A1,1 0 0,0 19,7M8,6H16V7H8V6M16,19H8V9H16V19Z"/>
+                                </svg>
+                                Add to Stack
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Generate installation command for component
+ */
+function generateInstallCommand(component, category) {
+    let name = component.name || component.path || component.title;
+    let categoryParam = category.slice(0, -1); // Remove 's' from category name
+    
+    // Handle special cases for category parameters
+    if (category === 'settings' || category === 'hooks') {
+        // Use the path if available for settings and hooks
+        if (component.path) {
+            name = component.path.replace(/\.(json|md)$/, ''); // Remove file extension
+        }
+        categoryParam = category.slice(0, -1); // 'setting' or 'hook'
+    }
+    
+    return `npx claude-code-templates@latest --${categoryParam}=${name} --yes`;
+}
+
+/**
+ * Show all components except templates
+ */
+function showAllComponents() {
+    // This function should integrate with existing filter logic
+    if (typeof setUnifiedFilter === 'function') {
+        setUnifiedFilter('agents'); // Default to agents
+    }
+}
+
+// Search result cards now use the global click handler from index-events.js
+// No need for custom toggleCard function
+
+/**
+ * Initialize filter from URL parameters on page load
+ */
+function initializeFilterFromURL() {
+    const urlFilter = getFilterFromURL();
+    console.log('Initializing filter from URL:', urlFilter);
+    
+    if (urlFilter && typeof setUnifiedFilter === 'function') {
+        setUnifiedFilter(urlFilter);
+    }
+}
+
+/**
+ * Initialize search from URL parameters on page load
+ */
+function initializeSearchFromURL() {
+    const urlQuery = getSearchQueryFromURL();
+    if (urlQuery) {
+        console.log('Initializing search from URL:', urlQuery);
+        
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            searchInput.value = urlQuery;
+            
+            // Show search interface
+            const resultsInfo = document.getElementById('searchResultsInfo');
+            if (resultsInfo) {
+                resultsInfo.style.display = 'block';
+            }
+            
+            // Show clear button
+            const clearBtn = document.getElementById('clearSearchBtn');
+            if (clearBtn) {
+                clearBtn.style.display = 'flex';
+            }
+            
+            // Ensure components are loaded before searching
+            let attempts = 0;
+            const maxAttempts = 25; // 5 seconds total (200ms * 25)
+            
+            const trySearch = () => {
+                attempts++;
+                console.log(`Attempt ${attempts} to perform search. Components loaded:`, Object.keys(allComponents).length > 0);
+                
+                if (Object.keys(allComponents).length > 0) {
+                    console.log('Components ready, performing search...');
+                    performSearch(urlQuery);
+                } else if (attempts < maxAttempts) {
+                    // If components not loaded, wait and try again
+                    setTimeout(trySearch, 200);
+                } else {
+                    console.error('Failed to load components for URL search after maximum attempts');
+                    // Force load components and try one more time
+                    loadComponentsForSearch().then(() => {
+                        if (Object.keys(allComponents).length > 0) {
+                            performSearch(urlQuery);
+                        }
+                    });
+                }
+            };
+            
+            // Start trying to search
+            trySearch();
+        }
+    }
+}
+
+// Initialize search functionality when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Load components for search
+    loadComponentsForSearch();
+    
+    // Initialize filter from URL if present
+    initializeFilterFromURL();
+    
+    // Initialize search from URL if present
+    initializeSearchFromURL();
+    
+    // Add CSS for search functionality if not already present
+    if (!document.getElementById('search-styles')) {
+        const searchStyles = document.createElement('style');
+        searchStyles.id = 'search-styles';
+        searchStyles.textContent = `
+            .search-btn.active {
+                background-color: var(--accent-color, #00d4aa) !important;
+                color: var(--bg-color, #0a0e0f) !important;
+            }
+            
+            .search-bar-container {
+                margin-top: 1rem;
+                padding: 0 1rem;
+                animation: slideDown 0.3s ease-out;
+            }
+            
+            @keyframes slideDown {
+                from { opacity: 0; transform: translateY(-10px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+            
+            .search-input-wrapper {
+                position: relative;
+                display: flex;
+                align-items: center;
+                background: var(--card-bg, #1a1f23);
+                border: 1px solid var(--border-color, #2a3338);
+                border-radius: 8px;
+                padding: 0.75rem 1rem;
+                transition: border-color 0.2s ease;
+            }
+            
+            .search-input-wrapper:focus-within {
+                border-color: var(--accent-color, #00d4aa);
+                box-shadow: 0 0 0 2px var(--accent-color, #00d4aa)20;
+            }
+            
+            .search-icon {
+                margin-right: 0.75rem;
+                color: var(--text-dim, #8892a0);
+            }
+            
+            .search-input {
+                flex: 1;
+                background: transparent;
+                border: none;
+                outline: none;
+                color: var(--text-color, #ffffff);
+                font-size: 1rem;
+                font-family: 'Inter', sans-serif;
+            }
+            
+            .search-input::placeholder {
+                color: var(--text-dim, #8892a0);
+            }
+            
+            .clear-search-btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 24px;
+                height: 24px;
+                margin-left: 0.5rem;
+                background: transparent;
+                border: none;
+                border-radius: 4px;
+                color: var(--text-dim, #8892a0);
+                cursor: pointer;
+                transition: all 0.2s ease;
+            }
+            
+            .clear-search-btn:hover {
+                background: var(--hover-bg, #2a3338);
+                color: var(--text-color, #ffffff);
+            }
+            
+            .search-results-info {
+                margin-top: 1rem;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                flex-wrap: wrap;
+                gap: 1rem;
+            }
+            
+            .results-count {
+                color: var(--text-dim, #8892a0);
+                font-size: 0.9rem;
+            }
+            
+            .search-filters {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                flex-wrap: wrap;
+            }
+            
+            .search-filter-label {
+                color: var(--text-dim, #8892a0);
+                font-size: 0.85rem;
+            }
+            
+            .search-category-tag {
+                background: var(--accent-color, #00d4aa)20;
+                color: var(--accent-color, #00d4aa);
+                padding: 0.25rem 0.5rem;
+                border-radius: 4px;
+                font-size: 0.75rem;
+                font-weight: 500;
+            }
+            
+            .no-search-results {
+                text-align: center;
+                padding: 3rem 2rem;
+                color: var(--text-dim, #8892a0);
+            }
+            
+            .no-results-icon {
+                font-size: 4rem;
+                margin-bottom: 1rem;
+            }
+            
+            .no-search-results h3 {
+                color: var(--text-color, #ffffff);
+                margin-bottom: 1rem;
+            }
+            
+            .search-suggestions {
+                text-align: left;
+                max-width: 400px;
+                margin: 1.5rem auto 0;
+            }
+            
+            .search-suggestions li {
+                margin-bottom: 0.5rem;
+                padding-left: 1rem;
+            }
+            
+            .search-category-section {
+                margin-bottom: 2rem;
+            }
+            
+            .search-category-header {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                margin-bottom: 1rem;
+                padding-bottom: 0.5rem;
+                border-bottom: 1px solid var(--border-color, #2a3338);
+                color: var(--text-color, #ffffff);
+                font-size: 1.25rem;
+                font-weight: 600;
+            }
+            
+            .category-icon {
+                font-size: 1.5rem;
+            }
+            
+            .search-category-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                gap: 1.5rem;
+            }
+            
+            .search-result-card {
+                transition: all 0.3s ease;
+                cursor: pointer;
+            }
+            
+            /* Ensure search result cards inherit flip behavior */
+            .search-result-card .card-inner {
+                transition: transform 0.6s;
+                transform-style: preserve-3d;
+            }
+            
+            .search-result-card.flipped .card-inner {
+                transform: rotateY(180deg);
+            }
+            
+            .search-result-card .component-type-badge {
+                background: var(--accent-color, #00d4aa)20;
+                color: var(--accent-color, #00d4aa);
+                font-size: 0.75rem;
+                font-weight: 600;
+                text-transform: capitalize;
+            }
+            
+            .search-result-card .card-title {
+                color: var(--text-primary, #ffffff);
+                font-size: 1.1rem;
+                font-weight: normal;
+                margin: 0.75rem 0 0.5rem 0;
+                text-transform: capitalize;
+            }
+            
+            .search-result-card .card-description {
+                color: var(--text-secondary, #8892a0);
+                font-size: 0.8rem;
+                line-height: 1.4;
+                text-align: center;
+                margin-bottom: 1rem;
+            }
+            
+            /* Card back should match main template card styles */
+            .search-result-card .card-back {
+                background: var(--bg-tertiary);
+                padding: 1.5rem;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                text-align: center;
+            }
+            
+            .search-result-card .card-tags {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 0.5rem;
+                margin-top: auto;
+            }
+            
+            .search-result-card .tag {
+                background: var(--hover-bg, #2a3338);
+                color: var(--text-dim, #8892a0);
+                padding: 0.25rem 0.5rem;
+                border-radius: 4px;
+                font-size: 0.7rem;
+                font-weight: 500;
+            }
+            
+            .search-result-card .tag-more {
+                background: var(--accent-color, #00d4aa)30;
+                color: var(--accent-color, #00d4aa);
+                padding: 0.25rem 0.5rem;
+                border-radius: 4px;
+                font-size: 0.7rem;
+                font-weight: 600;
+            }
+            
+            .search-result-card .card-back h3 {
+                color: var(--text-primary, #ffffff);
+                font-size: 0.85rem;
+                font-weight: normal;
+                margin-bottom: 0.5rem;
+                text-align: center;
+            }
+            
+            .search-result-card .command-display {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 0.5rem;
+                padding: 0;
+            }
+            
+            .search-result-card .command-code-container {
+                position: relative;
+                width: 100%;
+                display: flex;
+                align-items: center;
+                background: var(--bg-tertiary);
+                border: 1px solid var(--border-secondary);
+                border-radius: 4px;
+                padding: 8px 12px;
+                margin-bottom: 0.5rem;
+                flex-shrink: 0;
+            }
+            
+            .search-result-card .command-code {
+                flex: 1;
+                color: var(--text-primary, #ffffff);
+                font-size: 0.75rem;
+                font-family: 'Monaco', 'Menlo', monospace;
+                overflow-x: auto;
+                white-space: nowrap;
+                padding-right: 8px;
+            }
+            
+            .search-result-card .copy-overlay-btn {
+                background: var(--text-accent, #00d4aa);
+                border: none;
+                color: var(--bg-primary, #0a0e0f);
+                padding: 4px 8px;
+                border-radius: 3px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                font-size: 10px;
+                font-weight: 500;
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                opacity: 0;
+                transform: translateX(10px);
+                position: absolute;
+                right: 6px;
+                z-index: 2;
+            }
+            
+            .search-result-card .command-code-container:hover .copy-overlay-btn {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            
+            .search-result-card .copy-overlay-btn:hover {
+                background: var(--text-success, #22c55e);
+                transform: translateX(0) translateY(-1px);
+                box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
+            }
+            
+            .search-result-card .btn {
+                background: var(--accent-color, #00d4aa);
+                color: var(--bg-color, #0a0e0f);
+                border: none;
+                padding: 0.75rem 1rem;
+                border-radius: 6px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.5rem;
+                width: 100%;
+            }
+            
+            .search-result-card .btn:hover {
+                background: var(--accent-color, #00d4aa)90;
+                transform: translateY(-1px);
+            }
+            
+            /* View Details and Add to Stack buttons */
+            .search-result-card .view-files-btn {
+                background: rgba(0, 255, 0, 0.2); /* Debug background */
+                border: 2px solid lime; /* Debug border */
+                color: var(--text-color, #ffffff);
+                padding: 0.4rem 0.6rem;
+                border-radius: 4px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.3rem;
+                width: 100%;
+                margin-bottom: 0;
+                font-size: 0.75rem;
+            }
+            
+            .search-result-card .view-files-btn:hover {
+                background: var(--hover-bg, #2a3338);
+                border-color: var(--accent-color, #00d4aa);
+                transform: translateY(-1px);
+            }
+            
+            .search-result-card .add-to-cart-btn {
+                background: rgba(255, 255, 0, 0.5); /* Debug background */
+                border: 2px solid yellow; /* Debug border */
+                color: black; /* Debug text color */
+                padding: 0.4rem 0.6rem;
+                border-radius: 4px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.3rem;
+                width: 100%;
+                font-size: 0.75rem;
+            }
+            
+            .search-result-card .add-to-cart-btn:hover {
+                background: var(--accent-color, #00d4aa)90;
+                transform: translateY(-1px);
+            }
+            
+            .search-result-card .add-to-cart-btn.added {
+                background: var(--success-color, #22c55e);
+                color: var(--bg-color, #0a0e0f);
+            }
+            
+            /* Card actions container */
+            .search-result-card .card-actions {
+                display: flex;
+                flex-direction: column;
+                gap: 0.4rem;
+                width: 100%;
+                margin-top: auto;
+                background: rgba(255, 0, 0, 0.1); /* Debug background */
+                border: 1px solid red; /* Debug border */
+                padding: 4px; /* Debug padding */
+            }
+            
+            @media (max-width: 768px) {
+                .search-results-info {
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+                
+                .search-category-grid {
+                    grid-template-columns: 1fr;
+                }
+            }
+        `;
+        document.head.appendChild(searchStyles);
+    }
+});
+
+/**
+ * Hide filter elements during search
+ */
+function hideFilters() {
+    const filterGroup = document.querySelector('.filter-group');
+    const componentCategories = document.getElementById('componentCategories');
+    
+    if (filterGroup) {
+        filterGroup.style.display = 'none';
+    }
+    
+    if (componentCategories) {
+        componentCategories.style.display = 'none';
+    }
+}
+
+/**
+ * Show filter elements when search is cleared
+ */
+function showFilters() {
+    const filterGroup = document.querySelector('.filter-group');
+    const componentCategories = document.getElementById('componentCategories');
+    
+    if (filterGroup) {
+        filterGroup.style.display = 'flex';
+    }
+    
+    if (componentCategories) {
+        componentCategories.style.display = 'block';
+    }
+}