* Add SQL query executor

* Move mermaid.min.js to static asset
* Create templates for sql logic

templates/base.html

@@ -17,7 +17,7 @@
     <script src="/static/js/hyperscript.min.js" defer></script>
     <script src="/static/js/sweetalert2@11.js" defer></script>
     <!-- Mermaid -->
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+    <script src="/static/js/mermaid.min.js"></script>
     <script>
         // Initialize Mermaid with startOnLoad set to false
         mermaid.initialize({
@@ -123,6 +123,22 @@
                                 <span class="ml-3">Settings</span>
                             </a>
                         </div>
+                        <div class="space-y-2 pt-2">
+                            <a hx-get="{{ url_for('sql_explorer') }}" hx-push-url="true" hx-target="#container"
+                                class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('sql_explorer')) }} page-link"
+                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
+                                   on htmx:afterRequest go to the top of the body">
+                                <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
+                                    fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M2 5a2 2 0 012-2h12a2 2 0 012 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2V5z" />
+                                    <path fill-rule="evenodd"
+                                        d="M2 11v-1c0-1.105 1.343-2 3-2h10c1.657 0 3 .895 3 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2zm0 4v-1c0-1.105 1.343-2 3-2h10c1.657 0 3 .895 3 2v1c0 1.105-1.343 2-3 2H5c-1.657 0-3-.895-3-2z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                                <span class="ml-3">SQL Explorer</span>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>

templates/partials/sql_explorer/schema.html

@@ -0,0 +1,7 @@
+<div class="overflow-auto" style="max-height: 80vh;">
+    <div class="mermaid" style="opacity: 0;" _="on load
+             mermaid.init(undefined, this)
+             set me.style.opacity to '1'">
+        {{ mermaid_code }}
+    </div>
+</div>

templates/partials/sql_explorer/sql_query.html

@@ -0,0 +1,37 @@
+<div id="sql-query">
+    {% if error %}
+    <div class="bg-red-200 text-red-800 p-3 rounded mb-4">
+        <strong>Error:</strong> {{ error }}
+    </div>
+    {% endif %}
+
+    <form method="POST" hx-post="{{ url_for('sql_query') }}" hx-target="#sql-query">
+        <textarea name="query" rows="5" class="w-full p-2 border rounded mb-4"
+            placeholder="Enter your SQL query here..." required>{{ query }}</textarea>
+        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Execute</button>
+    </form>
+
+    <div class="mt-6">
+        {% if results %}
+        <table class="min-w-full bg-white">
+            <thead>
+                <tr>
+                    {% for col in columns %}
+                    <th class="py-2 px-4 border-b">{{ col }}</th>
+                    {% endfor %}
+                </tr>
+            </thead>
+            <tbody>
+                {% for row in results %}
+                <tr class="text-center">
+                    {% for col in columns %}
+                    <td class="py-2 px-4 border-b">{{ row[col] }}</td>
+                    {% endfor %}
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% endif %}
+    </div>
+
+</div>

templates/settings.html

@@ -182,7 +182,6 @@
 
     </div>
 
-    <div hx-get="{{ url_for('get_sql_schema') }}" hx-trigger="load"></div>
 </div>
 
 {% endblock %}

templates/sql_explorer.html

@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 mb-8">
+    <div class="mb-4 flex items-center justify-between">
+        <div>
+            <h3 class="text-xl font-bold text-gray-900 mb-2">SQL Explorer</h3>
+        </div>
+    </div>
+
+    <div hx-get="{{ url_for('sql_schema') }}" hx-trigger="load"></div>
+
+    {{ render_partial('partials/sql_explorer/sql_query.html') }}
+
+</div>
+
+{% endblock %}