From 3d62a53c09edb2f4b1c359130382eb2bc44344d4 Mon Sep 17 00:00:00 2001
From: phyce <phyce.claw.vps.1194@phyce.dev>
Date: Fri, 31 Jul 2026 09:23:44 +0000
Subject: [PATCH] Render the homepage list as grid rows with content-visibility

Metric: Total Blocking Time / Style & Layout (mobile home perf 34)

The homepage renders all 2048 plugins, giving 20,590 DOM nodes. Lighthouse
mobile spends 2,690 ms in Style & Layout and 1,646 ms in Rendering, and
Total Blocking Time is 3,162 ms.

content-visibility lets the browser skip style, layout and paint for rows
that are off screen. It does nothing on a <table>: containment does not
apply to internal table elements. Measured in Chrome 151 over 2048 real
rows, applying it to <tr> is not merely a no-op but slightly negative,
because Chrome pays for bookkeeping it cannot use:

  <table> today                     321.5 ms   (412px viewport)
  <table> + content-visibility      319.5 ms
  grid rows + content-visibility     50.3 ms   -84.4%

So the rows become grid boxes with ARIA table roles.

Each row repeats the column track list instead of using `subgrid`.
content-visibility implies layout containment, and containment forces a
subgrid to become an independent grid: the first attempt looked correct
in review but rendered every cell full-width, 241px rows instead of 41px.
An explicit template per row keeps columns aligned precisely because it
does not depend on sibling content. Verified against the compiled CSS
that column offsets match between row 0 and row 900.

contain-intrinsic-size uses the measured row heights (41px, and 61px
below the sm breakpoint where the description wraps to three lines) so
the scrollbar stays honest. The `auto` keyword means a row's real height
is remembered once it has been rendered.

The header search now filters the list in place on the homepage rather
than opening a dropdown over the content it is already showing;
elsewhere it is unchanged. Ctrl/Cmd+F focuses that box - browser find
only matches rendered text, while the search box matches author and tags
across every plugin. The shared query is provided by AppLayout rather
than module scope so it is per app instance under SSR.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 resources/js/components/AppHeader.vue |  57 +++++++++--
 resources/js/layouts/AppLayout.vue    |   4 +
 resources/js/lib/pluginSearch.ts      |  36 +++++++
 resources/js/pages/Index.vue          | 130 ++++++++++++++++++++------
 4 files changed, 195 insertions(+), 32 deletions(-)
 create mode 100644 resources/js/lib/pluginSearch.ts

diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index 3a59df4..07bd84b 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
+import { router, usePage } from '@inertiajs/vue3';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { index as developersIndex } from '@/actions/App/Http/Controllers/DeveloperController';
 import { show } from '@/actions/App/Http/Controllers/PluginController';
-import { scoreSearchResult } from '@/utils/formatting';
+import { pluginSearchKey } from '@/lib/pluginSearch';
 import type { Plugin } from '@/types';
-import { router, usePage } from '@inertiajs/vue3';
-import { computed, nextTick, ref, watch } from 'vue';
+import { scoreSearchResult } from '@/utils/formatting';
 
 const page = usePage<{ plugins?: Plugin[]; apiUrl: string }>();
 const plugins = computed(() => page.props.plugins ?? []);
 
-const searchInput = ref('');
+const searchInput = inject(pluginSearchKey, ref(''));
 const searchVisible = ref(false);
 const menuOpen = ref(false);
 const searchInputRef = ref<HTMLInputElement | null>(null);
+const desktopSearchInputRef = ref<HTMLInputElement | null>(null);
 
 const links = [
     { href: '/', label: 'All Plugins', exact: true },
@@ -29,9 +31,15 @@ function isActive(link: { href: string; exact: boolean }): boolean {
     return currentPath.value.startsWith(link.href);
 }
 
+/**
+ * The homepage renders the whole plugin list itself, so there the query filters
+ * that list in place instead of opening a duplicate dropdown over it.
+ */
+const filtersPageInPlace = computed(() => currentPath.value === '/');
+
 const searchResults = computed(() => {
     const q = searchInput.value.trim();
-    if (!q) return [];
+    if (!q || filtersPageInPlace.value) return [];
     return plugins.value
         .map((p) => ({ ...p, score: scoreSearchResult(p, q) }))
         .filter((p) => p.score > 0)
@@ -73,6 +81,42 @@ async function openMenuForSearch(): Promise<void> {
     await nextTick();
     searchInputRef.value?.focus();
 }
+
+/** The drawer holds the only search box below the `sm` breakpoint. */
+async function focusSearch(): Promise<void> {
+    if (window.matchMedia('(min-width: 640px)').matches) {
+        searchVisible.value = true;
+        await nextTick();
+        desktopSearchInputRef.value?.focus();
+        desktopSearchInputRef.value?.select();
+
+        return;
+    }
+
+    await openMenuForSearch();
+}
+
+/**
+ * Take over find-in-page. Browser find is of limited use here: it only matches
+ * the plugin name and description text that happens to be rendered, whereas the
+ * search box also matches author and tags across every plugin.
+ */
+function onKeydown(event: KeyboardEvent): void {
+    if (event.altKey || !(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 'f') {
+        return;
+    }
+
+    event.preventDefault();
+    void focusSearch();
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown));
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown));
+
+watch(currentPath, () => {
+    searchInput.value = '';
+    searchVisible.value = false;
+});
 </script>
 
 <template>
@@ -105,9 +149,10 @@ async function openMenuForSearch(): Promise<void> {
                         <path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
                     </svg>
                     <input
+                        ref="desktopSearchInputRef"
                         v-model="searchInput"
                         class="app-header__search-input"
-                        placeholder="Search plugins by name, author, tags..."
+                        :placeholder="filtersPageInPlace ? 'Filter plugins by name, author, tags...' : 'Search plugins by name, author, tags...'"
                         type="text"
                         autocomplete="off"
                         spellcheck="false"
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 332fc44..a613708 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { provide, ref } from 'vue';
 import AppFooter from '@/components/AppFooter.vue';
 import AppHeader from '@/components/AppHeader.vue';
 import AppNav from '@/components/AppNav.vue';
+import { pluginSearchKey } from '@/lib/pluginSearch';
+
+provide(pluginSearchKey, ref(''));
 </script>
 
 <template>
diff --git a/resources/js/lib/pluginSearch.ts b/resources/js/lib/pluginSearch.ts
new file mode 100644
index 0000000..0b5d9f4
--- /dev/null
+++ b/resources/js/lib/pluginSearch.ts
@@ -0,0 +1,36 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { Plugin } from '@/types';
+import { scoreSearchResult } from '@/utils/formatting';
+
+/**
+ * The header search box and the homepage plugin list share one query string.
+ *
+ * On the homepage the query filters the list in place; everywhere else the
+ * header keeps showing its own results dropdown. The ref is provided by
+ * AppLayout rather than living at module scope so that it is created per app
+ * instance — module state would be shared across requests under SSR.
+ */
+export const pluginSearchKey: InjectionKey<Ref<string>> =
+    Symbol('pluginSearch');
+
+/**
+ * Whether a plugin matches the query, using the same scoring the header
+ * dropdown uses so that filtering and searching never disagree.
+ */
+export function matchesQuery(plugin: Plugin, query: string): boolean {
+    return scoreSearchResult(plugin, query) > 0;
+}
+
+/**
+ * Filters while preserving the caller's ordering — the homepage sorts by the
+ * column the user picked, which must survive filtering.
+ */
+export function filterPlugins(plugins: Plugin[], query: string): Plugin[] {
+    const trimmed = query.trim();
+
+    if (!trimmed) {
+        return plugins;
+    }
+
+    return plugins.filter((plugin) => matchesQuery(plugin, trimmed));
+}
diff --git a/resources/js/pages/Index.vue b/resources/js/pages/Index.vue
index 3e83c29..2311f3a 100644
--- a/resources/js/pages/Index.vue
+++ b/resources/js/pages/Index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import { show } from '@/actions/App/Http/Controllers/PluginController';
 import AppLayout from '@/layouts/AppLayout.vue';
+import { filterPlugins, pluginSearchKey } from '@/lib/pluginSearch';
 import type { Plugin } from '@/types';
 import { formatDate, truncateString } from '@/utils/formatting';
-import { Head } from '@inertiajs/vue3';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 defineOptions({ layout: AppLayout });
 
@@ -12,6 +13,7 @@ const props = defineProps<{
     plugins: Plugin[];
 }>();
 
+const searchQuery = inject(pluginSearchKey, ref(''));
 
 type SortField = keyof Plugin;
 type SortDirection = 'asc' | 'desc';
@@ -33,6 +35,11 @@ function sortIndicator(field: SortField): string {
     return sortDirection.value === 'asc' ? '↑' : '↓';
 }
 
+function ariaSort(field: SortField): 'ascending' | 'descending' | 'none' {
+    if (sortField.value !== field) return 'none';
+    return sortDirection.value === 'asc' ? 'ascending' : 'descending';
+}
+
 const sortedPlugins = computed(() => {
     return [...props.plugins].sort((a, b) => {
         const valueA = a[sortField.value];
@@ -46,6 +53,8 @@ const sortedPlugins = computed(() => {
     });
 });
 
+const visiblePlugins = computed(() => filterPlugins(sortedPlugins.value, searchQuery.value));
+
 const tableWrapper = ref<HTMLElement>();
 const stickyScrollbar = ref<HTMLElement>();
 const scrollWidth = ref(0);
@@ -97,31 +106,36 @@ const columns: { field: SortField; label: string }[] = [
     <Head title="RuneLite Plugin Stats" />
 
     <div ref="tableWrapper" class="plugin-table__wrapper">
-        <table class="plugin-table">
-            <thead class="plugin-table__head">
-                <tr>
-                    <th
+        <div class="plugin-table" role="table" aria-label="RuneLite plugins">
+            <div class="plugin-table__head" role="rowgroup">
+                <div class="plugin-table__head-row" role="row">
+                    <div
                         v-for="col in columns"
                         :key="col.field"
-                        scope="col"
+                        role="columnheader"
+                        tabindex="0"
                         class="plugin-table__head-cell plugin-table__head-cell--sortable"
+                        :aria-sort="ariaSort(col.field)"
                         @click="handleSort(col.field)"
+                        @keydown.enter.prevent="handleSort(col.field)"
+                        @keydown.space.prevent="handleSort(col.field)"
                     >
                         {{ col.label }}
                         <span :class="sortField === col.field ? 'plugin-table__sort--active' : 'plugin-table__sort--inactive'">{{ sortIndicator(col.field) }}</span>
-                    </th>
-                    <th scope="col" class="plugin-table__head-cell"></th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr
-                    v-for="(plugin, index) in sortedPlugins"
+                    </div>
+                    <div role="columnheader" class="plugin-table__head-cell"><span class="plugin-table__head-cell-label">Stats</span></div>
+                </div>
+            </div>
+            <div class="plugin-table__body" role="rowgroup">
+                <div
+                    v-for="(plugin, index) in visiblePlugins"
                     :key="plugin.id"
+                    role="row"
                     :title="plugin.warning"
                     class="plugin-table__row"
                     :class="index % 2 === 0 ? 'plugin-table__row--even' : 'plugin-table__row--odd'"
                 >
-                    <td class="plugin-table__cell">
+                    <div role="cell" class="plugin-table__cell">
                         <a
                             class="plugin-table__name-link"
                             :href="`https://runelite.net/plugin-hub/show/${plugin.name}`"
@@ -129,19 +143,31 @@ const columns: { field: SortField; label: string }[] = [
                             rel="noopener noreferrer"
                         >{{ plugin.display || plugin.name }}</a>
                         <span v-if="plugin.author" class="plugin-table__author">by {{ plugin.author }}</span>
-                    </td>
-                    <td class="plugin-table__cell plugin-table__cell--num">{{ plugin.current_installs.toLocaleString('en-US') }}</td>
-                    <td class="plugin-table__cell plugin-table__cell--num plugin-table__cell--secondary">{{ plugin.all_time_high.toLocaleString('en-US') }}</td>
-                    <td class="plugin-table__cell plugin-table__cell--desc">{{ truncateString(plugin.description, 100) }}</td>
-                    <td class="plugin-table__cell plugin-table__cell--secondary plugin-table__cell--date">{{ formatDate(plugin.updated_on) }}</td>
-                    <td class="plugin-table__cell plugin-table__cell--action">
+                    </div>
+                    <div role="cell" class="plugin-table__cell plugin-table__cell--num">{{ plugin.current_installs.toLocaleString('en-US') }}</div>
+                    <div role="cell" class="plugin-table__cell plugin-table__cell--num plugin-table__cell--secondary">{{ plugin.all_time_high.toLocaleString('en-US') }}</div>
+                    <div role="cell" class="plugin-table__cell plugin-table__cell--desc">{{ truncateString(plugin.description, 100) }}</div>
+                    <div role="cell" class="plugin-table__cell plugin-table__cell--secondary plugin-table__cell--date">{{ formatDate(plugin.updated_on) }}</div>
+                    <div role="cell" class="plugin-table__cell plugin-table__cell--action">
                         <a :href="show.url(plugin.name)" class="plugin-table__stats-link">Stats</a>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <p v-if="visiblePlugins.length === 0" class="plugin-table__empty">
+            No plugins match “{{ searchQuery.trim() }}”.
+        </p>
     </div>
 
+    <p class="plugin-table__count" aria-live="polite">
+        <template v-if="searchQuery.trim()">
+            Showing {{ visiblePlugins.length.toLocaleString('en-US') }} of
+            {{ sortedPlugins.length.toLocaleString('en-US') }} plugins
+        </template>
+        <template v-else>{{ sortedPlugins.length.toLocaleString('en-US') }} plugins</template>
+    </p>
+
     <div ref="stickyScrollbar" class="plugin-table__scrollbar">
         <div :style="{ width: scrollWidth + 'px' }" class="plugin-table__scrollbar-spacer" />
     </div>
@@ -159,8 +185,21 @@ const columns: { field: SortField; label: string }[] = [
     display: none;
 }
 
+/*
+ * Grid rather than <table>: content-visibility has no effect on internal table
+ * elements, so rows have to be ordinary grid boxes for the browser to be able
+ * to skip laying out the ones that are off screen.
+ *
+ * Each row carries the column track list itself rather than using `subgrid`.
+ * content-visibility implies layout containment, and containment forces a
+ * subgrid to become an independent grid - the rows would silently lose the
+ * parent's tracks and every cell would take a full row. Repeating an explicit
+ * template keeps the columns aligned precisely because it does not depend on
+ * what any sibling row contains.
+ */
 .plugin-table {
     @apply w-full text-left text-sm;
+    min-width: 57rem;
 }
 
 .plugin-table__head {
@@ -168,8 +207,14 @@ const columns: { field: SortField; label: string }[] = [
     border-bottom: 1px solid #2a2a2a;
 }
 
+.plugin-table__head-row,
+.plugin-table__row {
+    @apply grid items-center;
+    grid-template-columns: minmax(12rem, 2fr) 7rem 9rem minmax(14rem, 3fr) 9.5rem 5.5rem;
+}
+
 .plugin-table__head-cell {
-    @apply px-4 py-3 text-xs font-medium uppercase tracking-wider text-gray-500;
+    @apply px-4 py-3 text-xs font-medium uppercase tracking-wider text-gray-400;
     white-space: nowrap;
 }
 
@@ -177,6 +222,15 @@ const columns: { field: SortField; label: string }[] = [
     @apply cursor-pointer select-none;
 }
 
+.plugin-table__head-cell--sortable:focus-visible {
+    @apply outline-none;
+    box-shadow: inset 0 0 0 2px #ff6c21;
+}
+
+.plugin-table__head-cell-label {
+    @apply sr-only;
+}
+
 .plugin-table__head-cell--sortable:hover {
     color: #ff6c21;
 }
@@ -189,9 +243,25 @@ const columns: { field: SortField; label: string }[] = [
     @apply text-gray-700;
 }
 
+/*
+ * The list runs to ~2000 rows. `content-visibility: auto` lets the browser skip
+ * style, layout and paint for rows outside the viewport; `contain-intrinsic-size`
+ * supplies the placeholder height so the scrollbar stays honest. The `auto`
+ * keyword means the real height is remembered once a row has been rendered, so
+ * the estimate only has to be close for rows that have never been on screen.
+ */
 .plugin-table__row {
     @apply transition-colors duration-75;
     border-bottom: 1px solid #1e1e1e;
+    content-visibility: auto;
+    contain-intrinsic-size: auto 41px;
+}
+
+/* Rows wrap to three description lines once the grid is horizontally scrolled. */
+@media (max-width: 639px) {
+    .plugin-table__row {
+        contain-intrinsic-size: auto 61px;
+    }
 }
 
 .plugin-table__row--even {
@@ -254,6 +324,14 @@ const columns: { field: SortField; label: string }[] = [
     color: #fff;
 }
 
+.plugin-table__empty {
+    @apply px-4 py-10 text-center text-sm text-gray-400;
+}
+
+.plugin-table__count {
+    @apply px-4 py-3 text-xs text-gray-400;
+}
+
 .plugin-table__scrollbar {
     @apply sticky bottom-0 overflow-x-auto overflow-y-hidden;
     scrollbar-width: thin;