Fix open source templates filtering

pcweb/components/docpage/navbar/typesense.py

@@ -470,16 +470,16 @@ def search_input():
             ),
             rx.box(
                 filter_component(),
-                rx.link(
+                rx.el.a(
                     ui.button(
-                        ui.icon(icon="SparklesIcon", class_name="shrink-0 size-2"),
+                        ui.icon(icon="SparklesIcon", class_name="shrink-0 size-3"),
                         "Ask AI",
                         type="button",
                         variant="secondary",
                         size="xs",
                         class_name="text-sm flex flex-row gap-x-2 items-center",
                     ),
-                    href="https://reflex.dev/docs/ai-builder/integrations/mcp-overview/",
+                    to="https://reflex.dev/docs/ai-builder/integrations/mcp-overview/",
                 ),
                 ui.button(
                     "Esc",
@@ -718,7 +718,7 @@ def typesense_search() -> rx.Component:
                 search_content(),
                 on_interact_outside=SimpleSearch.reset_search,
                 on_escape_key_down=SimpleSearch.reset_search,
-                class_name="w-full max-w-[650px] mx-auto bg-secondary-1 border-none outline-none p-3 lg:!fixed lg:!top-24 lg:!left-1/2 lg:!transform lg:!-translate-x-1/2 lg:!translate-y-0 lg:!m-0 "
+                class_name="!font-sans w-full max-w-[650px] mx-auto bg-secondary-1 border-none outline-none p-3 lg:!fixed lg:!top-24 lg:!left-1/2 lg:!transform lg:!-translate-x-1/2 lg:!translate-y-0 lg:!m-0 "
                 + rx.cond(SimpleSearch.query.length() < 3, "min-h[57vh]", "h-[57vh]"),
             ),
         ),

pcweb/pages/gallery/sidebar.py

@@ -2,6 +2,7 @@
 
 from pcweb.components.new_button import button
 from pcweb.components.user_input import input
+from pcweb.pages.gallery.apps import gallery_apps_data
 
 TAGS = {
     "Category": [
@@ -17,62 +18,52 @@
 }
 
 ITEMS_PER_PAGE = 12
+TEMPLATES_FOLDER = "templates/"
 
 
-class TemplatesState(rx.State):
-    query: rx.Field[str] = rx.field("")
-    checked_tags: rx.Field[set[str]] = rx.field(default_factory=set)
-    page: rx.Field[int] = rx.field(1)
-    total_pages: rx.Field[int] = rx.field(1)
-
-    def _get_all_filtered_templates(self) -> list[str]:
-        from pcweb.pages.gallery.apps import gallery_apps_data
-
-        filtered = []
-        for (_path, folder), document in gallery_apps_data.items():
-            if folder != "templates/":
-                continue
-
-            app_metadata = document.metadata
-            app_title = app_metadata.get("title", "")
-            app_description = app_metadata.get("description", "")
-            app_tags = app_metadata.get("tags", [])
-
-            # print(app_metadata, app_title, app_tags)
-
-            # Text search filtering
-            if self.query.strip():
-                query_lower = self.query.lower()
-                if not (
-                    query_lower in app_title.lower()
-                    or query_lower in app_description.lower()
-                ):
-                    continue
+TEMPLATE_SUMMARIES = [
+    {
+        "title": (m := doc.metadata or {}).get("title", ""),
+        "description": m.get("description", ""),
+        "tags": m.get("tags", []),
+    }
+    for (_, folder), doc in gallery_apps_data.items()
+    if folder == TEMPLATES_FOLDER
+]
 
-            # Tag filtering
-            if self.checked_tags and not (set(app_tags) & self.checked_tags):
-                continue
 
-            filtered.append(app_title)
-
-        return filtered
+class TemplatesState(rx.State):
+    query: rx.Field[str] = rx.field(default="")
+    checked_tags: rx.Field[set[str]] = rx.field(default_factory=set)
+    page: rx.Field[int] = rx.field(default=1)
 
     @rx.event
     def clear_filters(self):
         self.checked_tags = set()
         self.page = 1
 
+    @rx.var
+    def all_filtered_templates(self) -> list[str]:
+        query = self.query.strip().lower()
+        return [
+            t["title"]
+            for t in TEMPLATE_SUMMARIES
+            if (
+                not query
+                or query in t["title"].lower()
+                or query in t["description"].lower()
+            )
+            and (not self.checked_tags or set(t["tags"]) & self.checked_tags)
+        ]
+
+    @rx.var
+    def total_pages(self) -> int:
+        return max(1, -(-len(self.all_filtered_templates) // ITEMS_PER_PAGE))
+
     @rx.var
     def filtered_templates(self) -> list[str]:
-        all_filtered = self._get_all_filtered_templates()
-        self.total_pages = (
-            (len(all_filtered) + ITEMS_PER_PAGE - 1) // ITEMS_PER_PAGE
-            if all_filtered
-            else 1
-        )
         start = (self.page - 1) * ITEMS_PER_PAGE
-        end = start + ITEMS_PER_PAGE
-        return all_filtered[start:end]
+        return self.all_filtered_templates[start : start + ITEMS_PER_PAGE]
 
     @rx.event
     def set_query(self, value: str):
@@ -129,9 +120,9 @@ def checkbox_item(text: str, value: str):
     return rx.box(
         rx.checkbox(
             checked=TemplatesState.checked_tags.contains(value),
-            on_change=TemplatesState.toggle_template(value),
             color_scheme="violet",
             key=value,
+            class_name="cursor-pointer",
         ),
         rx.text(
             text,