django-cfg 1.4.75__py3-none-any.whl → 1.4.76__py3-none-any.whl

django_cfg/templates/admin/sections/documentation_section.html

@@ -2,7 +2,7 @@
 <link rel="stylesheet" href="{% static 'admin/css/prose-unfold.css' %}">
 
 <!-- Documentation Section -->
-<div class="space-y-6">
+<div class="space-y-6" x-data="toggleSection()">
     {% if error %}
         <!-- Error State -->
         <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-default p-6">
@@ -17,7 +17,8 @@
         {% for app_key, app in commands_by_module.items %}
             <div class="app-block bg-gradient-to-br from-white to-base-50 dark:from-base-800 dark:to-base-900 rounded-default shadow-md border border-base-200 dark:border-base-700 overflow-hidden mb-6">
                 <!-- App Header (Toggle) -->
-                <div class="app-toggle cursor-pointer select-none p-6 border-b border-base-200 dark:border-base-700 hover:bg-base-100/50 dark:hover:bg-base-900/30 transition-all duration-200"
+                <div @click="toggleSection('{{ app_key }}')"
+                     class="cursor-pointer select-none p-6 border-b border-base-200 dark:border-base-700 hover:bg-base-100/50 dark:hover:bg-base-900/30 transition-all duration-200"
                      data-app="{{ app_key }}">
                     <div class="w-full flex items-center justify-between">
                         <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark flex items-center">
@@ -33,12 +34,18 @@
                                 </div>
                             </div>
                         </h3>
-                        <span class="material-symbols-outlined text-base-400 dark:text-base-500 toggle-icon transition-transform duration-200 select-none">expand_more</span>
+                        <span
+                            class="material-symbols-outlined text-base-400 dark:text-base-500 transition-transform duration-200 select-none"
+                            x-text="isSectionExpanded('{{ app_key }}') ? 'expand_less' : 'expand_more'"
+                        ></span>
                     </div>
                 </div>
 
                 <!-- App Content -->
-                <div class="app-content bg-base-50/30 dark:bg-base-900/30 p-6 space-y-4" data-app="{{ app_key }}" style="display: none;">
+                <div class="app-content bg-base-50/30 dark:bg-base-900/30 p-6 space-y-4"
+                     data-app="{{ app_key }}"
+                     x-show="isSectionExpanded('{{ app_key }}')"
+                     x-cloak>
 
                     <!-- Commands List -->
                     <div class="space-y-3">
@@ -141,32 +148,5 @@
     {% endif %}
 </div>
 
-<!-- JavaScript for App Toggle -->
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // App toggle functionality
-    const appToggles = document.querySelectorAll('.app-toggle');
-    appToggles.forEach(toggle => {
-        toggle.addEventListener('click', function() {
-            const app = this.dataset.app;
-            const content = document.querySelector(`.app-content[data-app="${app}"]`);
-            const icon = this.querySelector('.toggle-icon');
-
-            if (content.style.display === 'none' || !content.style.display) {
-                content.style.display = 'block';
-                icon.textContent = 'expand_less';
-            } else {
-                content.style.display = 'none';
-                icon.textContent = 'expand_more';
-            }
-        });
-
-        // Initialize - start collapsed
-        const app = toggle.dataset.app;
-        const content = document.querySelector(`.app-content[data-app="${app}"]`);
-        if (content) {
-            content.style.display = 'none';
-        }
-    });
-});
-</script>
+<!-- Load Alpine component -->
+<script src="{% static 'admin/js/alpine/toggle-section.js' %}"></script>

django_cfg/templates/admin/snippets/components/activity_tracker.html

@@ -16,64 +16,42 @@
     </div>
 
     <!-- Activity Tracker Grid -->
-    <div class="overflow-x-auto pb-2">
-        {% if activity_tracker %}
+    {% if activity_tracker %}
+    <div class="overflow-x-auto pb-2" x-data='activityTracker({{ activity_tracker|safe }})'>
+    {% else %}
+    <div class="overflow-x-auto pb-2" x-data='activityTracker([])'>
+    {% endif %}
+        <template x-if="hasData">
             <!-- GitHub-style heatmap visualization -->
-            <div id="activity-heatmap" class="inline-flex gap-1"></div>
-
-            <script>
-            (function() {
-                const activityData = {{ activity_tracker }};
-                const heatmap = document.getElementById('activity-heatmap');
-
-                if (activityData && activityData.length > 0) {
-                    // Group days into weeks (7 days per column)
-                    const weeks = [];
-                    for (let i = 0; i < activityData.length; i += 7) {
-                        weeks.push(activityData.slice(i, i + 7));
-                    }
-
-                    // Create week columns
-                    weeks.forEach(week => {
-                        const weekColumn = document.createElement('div');
-                        weekColumn.className = 'flex flex-col gap-1';
-
-                        week.forEach(day => {
-                            const cell = document.createElement('div');
-                            cell.className = 'w-3 h-3 rounded-sm transition-all hover:ring-2 hover:ring-blue-400 cursor-pointer';
-
-                            // Color based on activity level
-                            if (day.count === 0) {
-                                cell.className += ' bg-gray-200 dark:bg-gray-700';
-                            } else if (day.count <= 2) {
-                                cell.className += ' bg-green-200 dark:bg-green-800';
-                            } else if (day.count <= 5) {
-                                cell.className += ' bg-green-400 dark:bg-green-600';
-                            } else if (day.count <= 10) {
-                                cell.className += ' bg-green-600 dark:bg-green-500';
-                            } else {
-                                cell.className += ' bg-green-800 dark:bg-green-400';
-                            }
-
-                            cell.title = `${day.date}: ${day.count} activities`;
-                            weekColumn.appendChild(cell);
-                        });
+            <div class="inline-flex gap-1">
+                <template x-for="(week, weekIndex) in weeks" :key="weekIndex">
+                    <div class="flex flex-col gap-1">
+                        <template x-for="(day, dayIndex) in week" :key="dayIndex">
+                            <div
+                                class="w-3 h-3 rounded-sm transition-all hover:ring-2 hover:ring-blue-400 cursor-pointer"
+                                :class="getCellColor(day.count)"
+                                :title="getCellTitle(day)"
+                            ></div>
+                        </template>
+                    </div>
+                </template>
+            </div>
+        </template>
 
-                        heatmap.appendChild(weekColumn);
-                    });
-                }
-            })();
-            </script>
-        {% else %}
+        <template x-if="!hasData">
             <div class="flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                 <div class="text-center">
                     <span class="material-icons text-4xl text-gray-400 dark:text-gray-500 mb-2">timeline</span>
                     <p class="text-gray-600 dark:text-gray-400">No activity data available</p>
                 </div>
             </div>
-        {% endif %}
+        </template>
     </div>
 
+    <!-- Load Alpine component -->
+    {% load static %}
+    <script src="{% static 'admin/js/alpine/activity-tracker.js' %}"></script>
+
     <!-- Summary Stats -->
     <div class="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
         <div class="text-center">
@@ -85,7 +63,7 @@
             <div class="text-xs text-gray-600 dark:text-gray-400">Weeks</div>
         </div>
         <div class="text-center">
-            <div class="text-lg font-semibold text-blue-600 dark:text-blue-400">{{ activity_tracker|length|default:"0" }}</div>
+            <div class="text-lg font-semibold text-blue-600 dark:text-blue-400">{{ activity_tracker|length|default:0 }}</div>
             <div class="text-xs text-gray-600 dark:text-gray-400">Data points</div>
         </div>
     </div>

django_cfg/templates/admin/snippets/components/charts_section.html

@@ -32,44 +32,9 @@
                 <span class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Growth Trends</span>
             </div>
             {% if charts.user_registrations %}
-                <div class="relative h-[300px]">
-                    <canvas id="userRegistrationsChart"></canvas>
+                <div class="relative h-[300px]" x-data='chart({{ charts.user_registrations_json|safe }}, "line")'>
+                    <canvas x-ref="canvas"></canvas>
                 </div>
-                <script>
-                    document.addEventListener('DOMContentLoaded', function() {
-                        const ctx = document.getElementById('userRegistrationsChart');
-                        const chartData = {{ charts.user_registrations_json|safe }};
-
-                        if (ctx && typeof Chart !== 'undefined') {
-                            try {
-                                new Chart(ctx, {
-                                    type: 'line',
-                                    data: chartData,
-                                    options: {
-                                        responsive: true,
-                                        maintainAspectRatio: false,
-                                        plugins: {
-                                            legend: {
-                                                display: true,
-                                                position: 'top'
-                                            }
-                                        },
-                                        scales: {
-                                            y: {
-                                                beginAtZero: true,
-                                                ticks: {
-                                                    precision: 0
-                                                }
-                                            }
-                                        }
-                                    }
-                                });
-                            } catch (error) {
-                                console.error('Error creating registration chart:', error);
-                            }
-                        }
-                    });
-                </script>
 
                 <!-- Fallback data table if chart doesn't render -->
                 <div class="mt-4 text-xs text-font-subtle-light dark:text-font-subtle-dark">
@@ -106,44 +71,9 @@
                 <span class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Activity Levels</span>
             </div>
             {% if charts.user_activity %}
-                <div class="relative h-[300px]">
-                    <canvas id="userActivityChart"></canvas>
+                <div class="relative h-[300px]" x-data='chart({{ charts.user_activity_json|safe }}, "bar")'>
+                    <canvas x-ref="canvas"></canvas>
                 </div>
-                <script>
-                    document.addEventListener('DOMContentLoaded', function() {
-                        const ctx = document.getElementById('userActivityChart');
-                        const chartData = {{ charts.user_activity_json|safe }};
-
-                        if (ctx && typeof Chart !== 'undefined') {
-                            try {
-                                new Chart(ctx, {
-                                    type: 'bar',
-                                    data: chartData,
-                                    options: {
-                                        responsive: true,
-                                        maintainAspectRatio: false,
-                                        plugins: {
-                                            legend: {
-                                                display: true,
-                                                position: 'top'
-                                            }
-                                        },
-                                        scales: {
-                                            y: {
-                                                beginAtZero: true,
-                                                ticks: {
-                                                    precision: 0
-                                                }
-                                            }
-                                        }
-                                    }
-                                });
-                            } catch (error) {
-                                console.error('Error creating activity chart:', error);
-                            }
-                        }
-                    });
-                </script>
 
                 <!-- Fallback data table if chart doesn't render -->
                 <div class="mt-4 text-xs text-font-subtle-light dark:text-font-subtle-dark">
@@ -177,3 +107,7 @@
     </div>
     {% endif %}
 </div>
+
+<!-- Load Chart Alpine component -->
+{% load static %}
+<script src="{% static 'admin/js/alpine/chart.js' %}"></script>

django_cfg/templates/admin/snippets/components/django_commands.html

@@ -1,7 +1,7 @@
 {% load unfold %}
 
 <!-- Django Commands Section -->
-<div class="mt-8 w-full">
+<div class="mt-8 w-full" x-data="commandsPanel({{ django_commands.total_commands }})">
     <!-- Header -->
     <div class="flex items-center justify-between mb-6">
         <div class="flex items-center">
@@ -12,26 +12,27 @@
                 Django Commands
             </h2>
             <span class="ml-4 text-xs text-font-subtle-light dark:text-font-subtle-dark bg-base-100 dark:bg-base-800 px-2 py-1 rounded-full">
-                <span id="commandsCount">{{ django_commands.total_commands }}</span> commands
+                <span x-text="visibleCommands"></span> commands
             </span>
         </div>
-        
+
         <!-- Search Box -->
         <div class="flex items-center space-x-3">
             <div class="bg-white border border-base-200 flex flex-row items-center px-3 rounded-default relative shadow-xs w-64 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-base-900 dark:border-base-700">
                 <span class="material-symbols-outlined md-18 text-base-400 dark:text-base-500">search</span>
-                <input 
-                    type="text" 
-                    id="commandSearch" 
-                    placeholder="Search commands..." 
+                <input
+                    type="text"
+                    x-ref="searchInput"
+                    x-model="searchQuery"
+                    @input="search()"
+                    placeholder="Search commands..."
                     class="grow font-medium min-w-0 overflow-hidden p-2 placeholder-font-subtle-light truncate focus:outline-hidden dark:bg-base-900 dark:placeholder-font-subtle-dark dark:text-font-default-dark"
-                    oninput="searchCommands(this.value)"
                 >
             </div>
-            <button 
-                id="clearSearch"
-                onclick="clearSearch()" 
-                class="px-3 py-2 text-xs text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark transition-colors hidden"
+            <button
+                x-show="showClearButton"
+                @click="clearSearch()"
+                class="px-3 py-2 text-xs text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark transition-colors"
             >
                 Clear
             </button>
@@ -44,8 +45,10 @@
             {% for category, commands in django_commands.categorized.items %}
                 <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 overflow-hidden shadow-sm mb-4">
                     <!-- Category Header -->
-                    <button 
-                        onclick="toggleCategory('{{ category }}')"
+                    <button
+                        type="button"
+                        data-category="{{ category }}"
+                        @click="toggleCategory('{{ category }}')"
                         class="w-full p-4 flex items-center justify-between hover:bg-base-100 dark:hover:bg-base-700 transition-colors"
                     >
                         <div class="flex items-center">
@@ -57,13 +60,20 @@
                                 {{ commands|length }} commands
                             </span>
                         </div>
-                            <span class="material-icons text-font-subtle-light dark:text-font-subtle-dark transition-transform" id="icon-{{ category }}" style="transform: rotate(-90deg);">
-                             expand_less
-                         </span>
+                        <span
+                            class="material-icons text-font-subtle-light dark:text-font-subtle-dark transition-transform"
+                            :class="isCategoryExpanded('{{ category }}') ? 'rotate-0' : '-rotate-90'"
+                            x-text="isCategoryExpanded('{{ category }}') ? 'expand_less' : 'expand_more'"
+                        ></span>
                     </button>
-                    
-                                         <!-- Collapsible Content -->
-                     <div id="content-{{ category }}" class="border-t border-base-200 dark:border-base-700" style="display: none;">
+
+                    <!-- Collapsible Content -->
+                    <div
+                        id="content-{{ category }}"
+                        class="border-t border-base-200 dark:border-base-700"
+                        x-show="isCategoryExpanded('{{ category }}')"
+                        x-cloak
+                    >
                         <div class="p-4">
                             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                 {% for command in commands %}
@@ -122,17 +132,17 @@
                                                 {% endif %}
                                             </div>
                                             
-                                            <!-- Action Buttons - Custom due to onclick handlers -->
+                                            <!-- Action Buttons -->
                                             <div class="flex gap-2">
                                                 <button
-                                                    onclick="copyToClipboard('python manage.py {{ command.name }}')"
+                                                    @click="window.copyToClipboard('python manage.py {{ command.name }}')"
                                                     class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-lg text-xs font-medium transition-colors"
                                                     title="Copy command to clipboard">
                                                     <span class="material-icons text-xs mr-1">content_copy</span>
                                                     Copy
                                                 </button>
                                                 <button
-                                                    onclick="executeCommand('{{ command.name }}')"
+                                                    @click="window.executeCommand('{{ command.name }}')"
                                                     class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white rounded-lg text-xs font-medium transition-colors"
                                                     title="Execute command">
                                                     <span class="material-icons text-xs mr-1">play_arrow</span>
@@ -148,7 +158,20 @@
                 </div>
             {% endfor %}
         </div>
-        
+
+        <!-- No Results Message -->
+        <div x-show="showNoResults" class="text-center py-12">
+            <div class="flex flex-col items-center">
+                <span class="material-icons text-6xl text-base-400 dark:text-base-500 mb-4">search_off</span>
+                <h3 class="text-lg font-medium text-font-important-light dark:text-font-important-dark mb-2">
+                    No Commands Found
+                </h3>
+                <p class="text-font-subtle-light dark:text-font-subtle-dark max-w-md mx-auto">
+                    No commands match your search criteria. Try different keywords or clear the search.
+                </p>
+            </div>
+        </div>
+
     {% else %}
         <!-- No Commands -->
         <div class="text-center py-12">
@@ -165,8 +188,8 @@
     {% endif %}
 </div>
 
-<!-- Command Execution Modal -->
-<div id="commandModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden z-50">
+<!-- Command Execution Modal (Alpine.js) -->
+<div x-data="commandModal" x-show="open" x-cloak class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50">
     <div class="flex items-center justify-center min-h-screen p-4">
         <div class="bg-white dark:bg-base-900 rounded-lg shadow-2xl max-w-4xl w-full max-h-[80vh] flex flex-col border border-base-200 dark:border-base-700">
             <!-- Modal Header -->
@@ -180,29 +203,59 @@
                             Command Execution
                         </h3>
                         <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
-                            Running: <span id="commandName" class="font-mono text-primary-600 dark:text-primary-400"></span>
+                            Running: <span x-text="commandName" class="font-mono text-primary-600 dark:text-primary-400"></span>
                         </p>
                     </div>
                 </div>
-                <button onclick="closeCommandModal()" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-lg transition-colors">
+                <button @click="close()" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-lg transition-colors">
                     <span class="material-icons">close</span>
                 </button>
             </div>
-            
+
+            <!-- Tabs Navigation -->
+            <div class="flex gap-1 px-4 pt-2 border-b border-base-200 dark:border-base-700">
+                <button
+                    @click="activeTab = 'output'"
+                    :class="activeTab === 'output' ? 'active' : ''"
+                    class="command-tab px-4 py-2 text-sm font-medium rounded-t-lg transition-colors"
+                >
+                    <span class="material-icons text-sm mr-1 align-middle">terminal</span>
+                    Output
+                </button>
+                <button
+                    @click="activeTab = 'docs'"
+                    :class="activeTab === 'docs' ? 'active' : ''"
+                    class="command-tab px-4 py-2 text-sm font-medium rounded-t-lg transition-colors"
+                >
+                    <span class="material-icons text-sm mr-1 align-middle">help_outline</span>
+                    Documentation
+                </button>
+            </div>
+
             <!-- Modal Body -->
-            <div class="flex-1 p-4" style="min-height: 0;">
-                <div id="commandOutput" class="bg-base-100 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 overflow-y-auto p-4 text-sm font-mono text-font-default-light dark:text-font-default-dark whitespace-pre-wrap leading-relaxed break-words" style="height: calc(80vh - 200px); max-height: 60vh;"></div>
+            <div class="flex-1 p-4 min-h-0">
+                <!-- Output Tab Content -->
+                <div x-show="activeTab === 'output'" class="h-full">
+                    <div x-html="outputHtml" class="bg-base-100 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 overflow-y-auto p-4 text-sm font-mono text-font-default-light dark:text-font-default-dark whitespace-pre-wrap leading-relaxed break-words h-full"></div>
+                </div>
+
+                <!-- Documentation Tab Content -->
+                <div x-show="activeTab === 'docs'" class="h-full">
+                    <div class="bg-base-100 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 overflow-y-auto p-4 h-full">
+                        <div x-html="docsHtml" class="prose prose-sm dark:prose-invert max-w-none"></div>
+                    </div>
+                </div>
             </div>
-            
+
             <!-- Modal Footer -->
             <div class="flex items-center justify-between p-4 border-t border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
                 <div class="flex items-center space-x-3">
-                    <div id="commandStatus" class="flex items-center">
-                        <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div>
-                        <span class="text-sm font-medium text-font-default-light dark:text-font-default-dark">Executing...</span>
+                    <div class="flex items-center">
+                        <div :class="statusClass" class="w-3 h-3 rounded-full mr-2"></div>
+                        <span x-text="statusText" class="text-sm font-medium text-font-default-light dark:text-font-default-dark"></span>
                     </div>
                 </div>
-                <button onclick="closeCommandModal()" class="px-4 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-lg transition-colors font-medium">
+                <button @click="close()" class="px-4 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-lg transition-colors font-medium">
                     Close
                 </button>
             </div>
@@ -210,148 +263,8 @@
     </div>
 </div>
 
-<!-- JavaScript for command search functionality -->
-<script>
-function searchCommands(query) {
-    const searchQuery = query.toLowerCase().trim();
-    const categories = document.querySelectorAll('[id^="content-"]');
-    const clearButton = document.getElementById('clearSearch');
-    const commandsCount = document.getElementById('commandsCount');
-    let visibleCommands = 0;
-    
-    // Show/hide clear button
-    if (searchQuery) {
-        clearButton.classList.remove('hidden');
-    } else {
-        clearButton.classList.add('hidden');
-    }
-    
-    categories.forEach(category => {
-        const categoryName = category.id.replace('content-', '');
-        const commands = category.querySelectorAll('.command-item');
-        let categoryHasVisibleCommands = false;
-        
-        commands.forEach(command => {
-            const commandName = command.querySelector('.command-name').textContent.toLowerCase();
-            const commandDesc = command.querySelector('.command-description')?.textContent.toLowerCase() || '';
-            
-            if (!searchQuery || commandName.includes(searchQuery) || commandDesc.includes(searchQuery)) {
-                command.style.display = 'block';
-                categoryHasVisibleCommands = true;
-                visibleCommands++;
-            } else {
-                command.style.display = 'none';
-            }
-        });
-        
-        // Show/hide category based on whether it has visible commands
-        const categoryHeader = document.querySelector(`button[onclick="toggleCategory('${categoryName}')"]`);
-        const categoryContainer = categoryHeader.parentElement;
-        
-        if (categoryHasVisibleCommands) {
-            categoryContainer.style.display = 'block';
-            
-            // Auto-expand categories when searching
-            if (searchQuery) {
-                category.style.display = 'block';
-                const icon = categoryHeader.querySelector('.material-icons');
-                if (icon) {
-                    icon.textContent = 'expand_less';
-                    icon.style.transform = 'rotate(0deg)';
-                }
-            }
-        } else {
-            categoryContainer.style.display = 'none';
-        }
-    });
-    
-    // Update commands count
-    commandsCount.textContent = visibleCommands;
-    
-    // Show "no results" message if no commands found
-    showNoResultsMessage(visibleCommands === 0 && searchQuery);
-}
-
-function clearSearch() {
-    const searchInput = document.getElementById('commandSearch');
-    const clearButton = document.getElementById('clearSearch');
-    const commandsCount = document.getElementById('commandsCount');
-    
-    searchInput.value = '';
-    clearButton.classList.add('hidden');
-    
-    // Show all commands and categories
-    const categories = document.querySelectorAll('[id^="content-"]');
-    const allCommands = document.querySelectorAll('.command-item');
-    
-    categories.forEach(category => {
-        const categoryName = category.id.replace('content-', '');
-        const categoryHeader = document.querySelector(`button[onclick="toggleCategory('${categoryName}')"]`);
-        categoryHeader.parentElement.style.display = 'block';
-        // Reset to collapsed state
-        category.style.display = 'none';
-        const icon = categoryHeader.querySelector('.material-icons');
-        if (icon) {
-            icon.textContent = 'expand_less';
-            icon.style.transform = 'rotate(-90deg)';
-        }
-    });
-    
-    allCommands.forEach(command => {
-        command.style.display = 'block';
-    });
-    
-    // Reset commands count
-    commandsCount.textContent = '{{ django_commands.total_commands }}';
-    
-    // Hide no results message
-    showNoResultsMessage(false);
-}
-
-function showNoResultsMessage(show) {
-    let noResultsDiv = document.getElementById('noSearchResults');
-    
-    if (show && !noResultsDiv) {
-        // Create no results message
-        noResultsDiv = document.createElement('div');
-        noResultsDiv.id = 'noSearchResults';
-        noResultsDiv.className = 'text-center py-12';
-        noResultsDiv.innerHTML = `
-            <div class="flex flex-col items-center">
-                <span class="material-icons text-6xl text-base-400 dark:text-base-500 mb-4">search_off</span>
-                <h3 class="text-lg font-medium text-font-important-light dark:text-font-important-dark mb-2">
-                    No Commands Found
-                </h3>
-                <p class="text-font-subtle-light dark:text-font-subtle-dark max-w-md mx-auto">
-                    No commands match your search criteria. Try different keywords or clear the search.
-                </p>
-            </div>
-        `;
-        
-        // Insert after the commands container
-        const commandsContainer = document.querySelector('.space-y-4');
-        commandsContainer.parentNode.insertBefore(noResultsDiv, commandsContainer.nextSibling);
-    } else if (!show && noResultsDiv) {
-        noResultsDiv.remove();
-    }
-}
-
-// Add search keyboard shortcuts
-document.addEventListener('DOMContentLoaded', function() {
-    const searchInput = document.getElementById('commandSearch');
-    
-    // Focus search with Ctrl+F or Cmd+F
-    document.addEventListener('keydown', function(e) {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
-            e.preventDefault();
-            searchInput.focus();
-        }
-        
-        // Clear search with Escape
-        if (e.key === 'Escape' && document.activeElement === searchInput) {
-            clearSearch();
-            searchInput.blur();
-        }
-    });
-});
-</script>
+<!-- Alpine.js Components & Styles -->
+{% load static %}
+<link rel="stylesheet" href="{% static 'admin/css/tabs.css' %}">
+<script src="{% static 'admin/js/alpine/command-modal.js' %}"></script>
+<script src="{% static 'admin/js/alpine/commands-panel.js' %}"></script>