add real time searching in my plugins

tutordash/server/app.py

@@ -52,7 +52,6 @@ def run(root: str, **app_kwargs: t.Any) -> None:
 async def home() -> str:
     return await render_template("index.html", **shared_template_context())
 
-
 @app.get("/plugin/store")
 async def plugin_store() -> str:
     installed_plugins = tutorclient.Client.installed_plugins()
@@ -91,9 +90,15 @@ async def plugin_store() -> str:
         **shared_template_context(),
     )
 
-
 @app.get("/plugin/installed")
 async def installed_plugins() -> str:
+    return await render_template(
+        "installed_plugins.html",
+        **shared_template_context(),
+    )
+
+@app.get("/plugin/installed/list")
+async def installed_plugins_list() -> str:
     installed_plugins = tutorclient.Client.installed_plugins()
     enabled_plugins = tutorclient.Client.enabled_plugins()
     store_plugins: dict[str, dict[str, str]] = {
@@ -117,12 +122,12 @@ async def installed_plugins() -> str:
         for plugin_name in installed_plugins
     ]
 
-    search_query = request.args.get("q", default="", type=str).strip().lower()
+    search_query = request.args.get("search", default="", type=str).strip().lower()
     if search_query:
         plugins = [plugin for plugin in plugins if search_query in plugin["name"].lower()]
 
     return await render_template(
-        "installed_plugins.html",
+        "_installed_plugins_list.html",
         plugins=plugins,
         **shared_template_context(),
     )

tutordash/server/templates/_installed_plugins_list.html

@@ -0,0 +1,16 @@
+{% from '_switch.html' import switch %}
+
+{% for plugin in plugins %}
+<div class="installed-plugin">
+    <div class="details">
+        <div class="name"><a href="{{ url_for('plugin', name=plugin.name) }}">{{ plugin.name }}</a></div>
+        <div class="author">{{ plugin.author }}</div>
+        <div class="description">{{ plugin.description|safe }}</div>
+    </div>
+    <div class="warning" id="warning-cookie-{{plugin.name}}">
+        <img src="{{ url_for('static', filename='/img/Featured icon.svg')}}" alt="">
+    </div>
+
+    {{ switch(plugin.name, plugin.is_enabled)}}
+</div>
+{% endfor %}

tutordash/server/templates/_plugin_store_list.html

@@ -0,0 +1,35 @@
+{% for plugin in plugins %}
+    <div class="plugin">
+        <div class="header">
+            <div class="title">
+                <div class="name">
+                <a href="{{ url_for('plugin', name=plugin.name) }}">{{ plugin.name }}</a>
+                </div>
+                <div class="author">
+                    By {{ plugin.author }}
+                </div>
+            </div>
+            <div class="status">
+                {% if plugin.is_installed %}
+                <img src="{{ url_for('static', filename='/img/CheckCircle.svg') }}" alt="">
+                {% endif %}
+            </div>
+        </div>
+        <div class="body">
+            <!-- TODO is that actually safe? -->
+            {{ plugin.description|safe }}
+        </div>
+        <div class="footer">
+            <div class="meta">
+
+            </div>
+            <div class="plugin-button">
+                {% if plugin.is_installed %}
+                <form action="{{ url_for('plugin_upgrade', name=plugin.name) }}" method="POST">
+                    <button type="submit">Upgrade</button>
+                </form>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+{% endfor %}

tutordash/server/templates/base_header.html

@@ -12,26 +12,19 @@
 </div>
 <div class="search">
     <img src="{{ url_for('static', filename='/img/search.svg') }}"/>
-    <input id="search-input" type="text" class="form-control search-input" placeholder="Search...">
+    <input 
+        id="search-input"
+        type="text" 
+        class="form-control search-input"
+        name="search" 
+        placeholder="Search..." 
+        hx-get="{{ url_for('installed_plugins_list') }}"
+        hx-trigger="input changed delay:300ms, search"
+        hx-target="#plugins-list"
+        hx-indicator="#search-indicator">
 </div>
 <div id="warning-main">
     <img src="{{ url_for('static', filename='/img/Featured icon.svg')}}" alt="">
     <span>Changes have been made to some plugins that will only take effect after a local launch.</span>
 </div>
 {% endblock %}
-
-{% block scripts %}
-<script>
-    document.getElementById("search-input").addEventListener("keypress", function(event) {
-        if (event.key === "Enter") {  
-            const searchInput = this.value.trim();
-            const url = new URL(window.location.href);
-
-            url.searchParams.set("q", searchInput);  
-
-            url.searchParams.set("page", 1);  
-            window.location.href = url.toString(); 
-        }
-    });
-</script>
-{% endblock %}

tutordash/server/templates/installed_plugins.html

@@ -1,7 +1,5 @@
 {% extends "base_header.html" %}
 
-{% from '_switch.html' import switch %}
-
 {% block page_title %}
 My Plugins
 {% endblock %}
@@ -36,20 +34,5 @@ Running local launch will allow all changes to plugins to take effect. This coul
 {% set sidebar_active_tab = "my-plugins" %}
 
 {% block workspace_content %}
-<div class="installed-plugins-list">
-    {% for plugin in plugins %}
-    <div class="installed-plugin">
-        <div class="details">
-            <div class="name"><a href="{{ url_for('plugin', name=plugin.name) }}">{{ plugin.name }}</a></div>
-            <div class="author">{{ plugin.author }}</div>
-            <div class="description">{{ plugin.description|safe }}</div>
-        </div>
-        <div class="warning" id="warning-cookie-{{plugin.name}}">
-            <img src="{{ url_for('static', filename='/img/Featured icon.svg')}}" alt="">
-        </div>
-
-        {{ switch(plugin.name, plugin.is_enabled)}}
-    </div>
-    {% endfor %}
-</div>
+<div id="plugins-list" class="installed-plugins-list" hx-get="{{ url_for('installed_plugins_list')}}" hx-trigger="load"></div>
 {% endblock %}