add real time searching on installed plugins

tutordash/server/app.py

@@ -54,6 +54,13 @@ async def home() -> str:
 
 @app.get("/plugin/store")
 async def plugin_store() -> str:
+    return await render_template(
+        "plugin_store.html",
+        **shared_template_context(),
+    )
+
+@app.get("/plugin/store/list")
+async def plugin_store_list() -> str:
     installed_plugins = tutorclient.Client.installed_plugins()
     plugins: list[dict[str, str]] = [
         {
@@ -67,26 +74,26 @@ async def plugin_store() -> str:
         for p in tutorclient.Client.plugins_in_store()
     ]
 
-    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()]
 
-    page = request.args.get("page", default=1, type=int)
-    per_page = 9
-    total_pages = (len(plugins) + per_page - 1) // per_page
-    if page < 1:
-        page = 1
-    elif page > total_pages:
-        page = total_pages
-    start = (page - 1) * per_page
-    end = start + per_page
-    plugins = plugins[start:end]
+    # page = request.args.get("page", default=1, type=int)
+    # per_page = 9
+    # total_pages = (len(plugins) + per_page - 1) // per_page
+    # if page < 1:
+    #     page = 1
+    # elif page > total_pages:
+    #     page = total_pages
+    # start = (page - 1) * per_page
+    # end = start + per_page
+    # plugins = plugins[start:end]
 
     return await render_template(
-        "plugin_store.html",
+        "_plugin_store_list.html",
         plugins=plugins,
-        page_count=total_pages,
-        current_page=page,
+        # page_count=total_pages,
+        # current_page=page,
         **shared_template_context(),
     )
 

tutordash/server/templates/base_header.html

@@ -18,7 +18,7 @@
         class="form-control search-input"
         name="search" 
         placeholder="Search..." 
-        hx-get="{{ url_for('installed_plugins_list') }}"
+        hx-get="{{ search_endpoint }}"
         hx-trigger="input changed delay:300ms, search"
         hx-target="#plugins-list"
         hx-indicator="#search-indicator">

tutordash/server/templates/installed_plugins.html

@@ -33,6 +33,8 @@ Running local launch will allow all changes to plugins to take effect. This coul
 
 {% set sidebar_active_tab = "my-plugins" %}
 
+{% set search_endpoint = url_for('installed_plugins_list') %}
+
 {% block workspace_content %}
 <div id="plugins-list" class="installed-plugins-list" hx-get="{{ url_for('installed_plugins_list')}}" hx-trigger="load"></div>
 {% endblock %}

tutordash/server/templates/plugin_store.html

@@ -16,64 +16,11 @@ View and install available plugins.
 
 {% set sidebar_active_tab = "plugin-marketplace" %}
 
+{% set search_endpoint = url_for('plugin_store_list') %}
+
 {% block workspace_content %}
-<div class="store-plugins">
-    {% 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 id="plugins-list" class="store-plugins" hx-get="{{ url_for('plugin_store_list')}}" hx-trigger="load"></div>
 
-                </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 %}
-</div>
 {% endblock %}
 
-{% block footer %}
-<div class="pagination">
-    <a href="{{ url_for('plugin_store', page=current_page-1)}}">
-        <div class="pagination-button">
-            <img src="{{ url_for('static', filename='/img/arrow-left.svg')}}" alt="">
-        </div>
-    </a>
-    {% for i in range(1, page_count + 1) %} 
-    <a href="{{ url_for('plugin_store', page=i)}}">
-        <div class="pagination-button">
-            {{i}}
-        </div>
-    </a>
-    {% endfor %}
-    <a href="{{ url_for('plugin_store', page=current_page+1)}}">
-        <div class="pagination-button">
-            <img src="{{ url_for('static', filename='/img/arrow-right.svg')}}" alt="">
-        </div>
-    </a>
-</div>
-{% endblock %}
+