More website tweaks (#977)

* Some layout tweaks

* SSR resource listing pages

Render resource listing pages in Astro for first paint and hydrate client filtering/search behavior on top.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Fixing font path

* removing feature plugin reference as we don't track that anymore

* button alignment

* rendering markdown

* Improve skills modal file browsing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Improving the layout of the search/filter section

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

website/src/scripts/pages/workflows.ts

@@ -6,15 +6,17 @@ import { FuzzySearch, type SearchItem } from "../search";
 import {
   fetchData,
   debounce,
-  escapeHtml,
-  getGitHubUrl,
-  getActionButtonsHtml,
   setupActionHandlers,
-  getLastUpdatedHtml,
 } from "../utils";
 import { setupModal, openFileModal } from "../modal";
+import {
+  renderWorkflowsHtml,
+  sortWorkflows,
+  type RenderableWorkflow,
+  type WorkflowSortOption,
+} from "./workflows-render";
 
-interface Workflow extends SearchItem {
+interface Workflow extends SearchItem, RenderableWorkflow {
   id: string;
   path: string;
   triggers: string[];
@@ -28,8 +30,6 @@ interface WorkflowsData {
   };
 }
 
-type SortOption = "title" | "lastUpdated";
-
 const resourceType = "workflow";
 let allItems: Workflow[] = [];
 let search = new FuzzySearch<Workflow>();
@@ -37,17 +37,11 @@ let triggerSelect: Choices;
 let currentFilters = {
   triggers: [] as string[],
 };
-let currentSort: SortOption = "title";
+let currentSort: WorkflowSortOption = "title";
+let resourceListHandlersReady = false;
 
 function sortItems(items: Workflow[]): Workflow[] {
-  return [...items].sort((a, b) => {
-    if (currentSort === "lastUpdated") {
-      const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
-      const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
-      return dateB - dateA;
-    }
-    return a.title.localeCompare(b.title);
-  });
+  return sortWorkflows(items, currentSort);
 }
 
 function applyFiltersAndRender(): void {
@@ -86,54 +80,32 @@ function renderItems(items: Workflow[], query = ""): void {
   const list = document.getElementById("resource-list");
   if (!list) return;
 
-  if (items.length === 0) {
-    list.innerHTML =
-      '<div class="empty-state"><h3>No workflows found</h3><p>Try a different search term or adjust filters</p></div>';
-    return;
-  }
-
-  list.innerHTML = items
-    .map(
-      (item) => `
-    <div class="resource-item" data-path="${escapeHtml(item.path)}">
-      <div class="resource-info">
-        <div class="resource-title">${
-          query ? search.highlight(item.title, query) : escapeHtml(item.title)
-        }</div>
-        <div class="resource-description">${escapeHtml(
-          item.description || "No description"
-        )}</div>
-        <div class="resource-meta">
-          ${item.triggers
-            .map(
-              (t) =>
-                `<span class="resource-tag tag-trigger">${escapeHtml(t)}</span>`
-            )
-            .join("")}
-          ${getLastUpdatedHtml(item.lastUpdated)}
-        </div>
-      </div>
-      <div class="resource-actions">
-        ${getActionButtonsHtml(item.path)}
-        <a href="${getGitHubUrl(
-          item.path
-        )}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">GitHub</a>
-      </div>
-    </div>
-  `
-    )
-    .join("");
-
-  // Add click handlers for opening modal
-  list.querySelectorAll(".resource-item").forEach((el) => {
-    el.addEventListener("click", (e) => {
-      if ((e.target as HTMLElement).closest(".resource-actions")) return;
-      const path = (el as HTMLElement).dataset.path;
-      if (path) openFileModal(path, resourceType);
-    });
+  list.innerHTML = renderWorkflowsHtml(items, {
+    query,
+    highlightTitle: (title, highlightQuery) =>
+      search.highlight(title, highlightQuery),
   });
 }
 
+function setupResourceListHandlers(list: HTMLElement | null): void {
+  if (!list || resourceListHandlersReady) return;
+
+  list.addEventListener("click", (event) => {
+    const target = event.target as HTMLElement;
+    if (target.closest(".resource-actions")) {
+      return;
+    }
+
+    const item = target.closest(".resource-item") as HTMLElement | null;
+    const path = item?.dataset.path;
+    if (path) {
+      openFileModal(path, resourceType);
+    }
+  });
+
+  resourceListHandlersReady = true;
+}
+
 export async function initWorkflowsPage(): Promise<void> {
   const list = document.getElementById("resource-list");
   const searchInput = document.getElementById(
@@ -144,6 +116,8 @@ export async function initWorkflowsPage(): Promise<void> {
     "sort-select"
   ) as HTMLSelectElement;
 
+  setupResourceListHandlers(list as HTMLElement | null);
+
   const data = await fetchData<WorkflowsData>("workflows.json");
   if (!data || !data.items) {
     if (list)
@@ -171,11 +145,15 @@ export async function initWorkflowsPage(): Promise<void> {
   });
 
   sortSelect?.addEventListener("change", () => {
-    currentSort = sortSelect.value as SortOption;
+    currentSort = sortSelect.value as WorkflowSortOption;
     applyFiltersAndRender();
   });
 
-  applyFiltersAndRender();
+  const countEl = document.getElementById("results-count");
+  if (countEl) {
+    countEl.textContent = `${allItems.length} of ${allItems.length} workflows`;
+  }
+
   searchInput?.addEventListener(
     "input",
     debounce(() => applyFiltersAndRender(), 200)