Display all models on single page and sync filters to URL params (#438)

Remove pagination from the models page so all models are visible at once.
Sync filter state (device, family, acceleration, search, sort) to URL
search params so filtered views can be shared via links.

Device filters use shorthand keys (e.g. /models?cpu&gpu) while other
filters use named params (e.g. ?family=phi&acceleration=cuda&q=search).

Author: MaanavD

www/src/routes/models/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import { foundryModelService } from './service';
 	import type { GroupedFoundryModel } from './types';
 	import Nav from '$lib/components/home/nav.svelte';
@@ -9,6 +11,9 @@
 	import { toast } from 'svelte-sonner';
 	import { ModelFilters, ModelGrid, ModelDetailsModal } from './components';
 
+	// Known device names used as shorthand URL params (e.g. /models?cpu)
+	const KNOWN_DEVICES = ['cpu', 'gpu', 'npu'];
+
 	// Debounce timer for search
 	let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 	let debouncedSearchTerm = '';
@@ -32,14 +37,64 @@
 	let sortBy = 'lastModified';
 	let sortOrder: 'asc' | 'desc' = 'desc';
 
+	// Track whether we've initialized filters from URL
+	let filtersInitialized = false;
+	// Suppress URL updates while reading from URL
+	let suppressUrlUpdate = false;
+
 	// Available filter options
 	let availableDevices: string[] = [];
 	let availableFamilies: string[] = ['deepseek', 'mistral', 'qwen', 'phi', 'whisper'];
 	let availableAccelerations: string[] = [];
 
-	// Pagination
-	let currentPage = 1;
-	let itemsPerPage = 12;
+	// Read filter state from URL search params
+	function readFiltersFromUrl() {
+		const params = $page.url.searchParams;
+
+		// Device filters: shorthand keys like ?cpu, ?gpu, ?npu
+		const devices: string[] = [];
+		for (const device of KNOWN_DEVICES) {
+			if (params.has(device)) {
+				devices.push(device);
+			}
+		}
+		selectedDevices = devices;
+
+		// Named params
+		searchTerm = params.get('q') ?? '';
+		debouncedSearchTerm = searchTerm;
+		selectedFamily = params.get('family') ?? '';
+		selectedAcceleration = params.get('acceleration') ?? '';
+		sortBy = params.get('sort') ?? 'lastModified';
+		sortOrder = (params.get('order') as 'asc' | 'desc') ?? 'desc';
+	}
+
+	// Write current filter state to URL search params (replaceState, no navigation)
+	function updateUrlFromFilters() {
+		if (suppressUrlUpdate) return;
+
+		const params = new URLSearchParams();
+
+		// Device filters as shorthand keys
+		for (const device of selectedDevices) {
+			if (KNOWN_DEVICES.includes(device)) {
+				params.set(device, '');
+			}
+		}
+
+		if (searchTerm) params.set('q', searchTerm);
+		if (selectedFamily) params.set('family', selectedFamily);
+		if (selectedAcceleration) params.set('acceleration', selectedAcceleration);
+		if (sortBy && sortBy !== 'lastModified') params.set('sort', sortBy);
+		if (sortOrder && sortOrder !== 'desc') params.set('order', sortOrder);
+
+		const search = params.toString();
+		// Clean up empty-value params: "cpu=" -> "cpu"
+		const cleanSearch = search.replace(/=(?=&|$)/g, '');
+		const newUrl = cleanSearch ? `/models?${cleanSearch}` : '/models';
+
+		goto(newUrl, { replaceState: true, noScroll: true, keepFocus: true });
+	}
 
 	// Fetch all models from API
 	async function fetchAllModels() {
@@ -150,8 +205,6 @@
 
 			return sortOrder === 'asc' ? (aVal > bVal ? 1 : -1) : aVal < bVal ? 1 : -1;
 		});
-
-		currentPage = 1;
 	}
 
 	function clearFilters() {
@@ -162,7 +215,8 @@
 		selectedAcceleration = '';
 		sortBy = 'lastModified';
 		sortOrder = 'desc';
-		currentPage = 1;
+		// Clear URL params
+		goto('/models', { replaceState: true, noScroll: true, keepFocus: true });
 	}
 
 	async function copyModelId(modelId: string) {
@@ -234,7 +288,26 @@
 		}
 	}
 
+	// Sync filter state to URL whenever filters change (after initialization)
+	$: if (filtersInitialized) {
+		// Track all filter values to trigger reactivity
+		selectedDevices;
+		selectedFamily;
+		selectedAcceleration;
+		searchTerm;
+		sortBy;
+		sortOrder;
+
+		updateUrlFromFilters();
+	}
+
 	onMount(() => {
+		// Read initial filter state from URL before fetching
+		suppressUrlUpdate = true;
+		readFiltersFromUrl();
+		suppressUrlUpdate = false;
+		filtersInitialized = true;
+
 		fetchAllModels();
 	});
 
@@ -320,8 +393,6 @@
 			{#if !loading && !error}
 				<ModelGrid
 					models={filteredModels}
-					bind:currentPage
-					{itemsPerPage}
 					{copiedModelId}
 					onCardClick={openModelDetails}
 					onCopyCommand={copyRunCommand}

www/src/routes/models/components/ModelGrid.svelte

@@ -5,66 +5,18 @@
 	import ModelCard from './ModelCard.svelte';
 
 	export let models: GroupedFoundryModel[] = [];
-	export let currentPage = 1;
-	export let itemsPerPage = 12;
 	export let copiedModelId: string | null = null;
 	export let onCardClick: (model: GroupedFoundryModel) => void;
 	export let onCopyCommand: (modelId: string) => void;
 	export let onClearFilters: () => void;
-
-	$: totalPages = Math.ceil(models.length / itemsPerPage);
-	$: paginatedModels = models.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
-
-	function goToPage(page: number) {
-		currentPage = Math.max(1, Math.min(totalPages, page));
-	}
 </script>
 
 {#if models.length > 0}
 	<div class="mt-6 grid auto-rows-fr gap-4 sm:grid-cols-2 lg:grid-cols-3">
-		{#each paginatedModels as model (model.id)}
+		{#each models as model (model.id)}
 			<ModelCard {model} {copiedModelId} {onCardClick} {onCopyCommand} />
 		{/each}
 	</div>
-
-	<!-- Pagination -->
-	{#if totalPages > 1}
-		<div class="mt-8 flex justify-center gap-2">
-			<Button
-				variant="outline"
-				size="sm"
-				disabled={currentPage === 1}
-				onclick={() => goToPage(currentPage - 1)}
-			>
-				Previous
-			</Button>
-
-			<div class="flex items-center gap-2">
-				{#each Array(totalPages).fill(0) as _, i}
-					{#if i + 1 === 1 || i + 1 === totalPages || (i + 1 >= currentPage - 2 && i + 1 <= currentPage + 2)}
-						<Button
-							variant={currentPage === i + 1 ? 'default' : 'outline'}
-							size="sm"
-							onclick={() => goToPage(i + 1)}
-						>
-							{i + 1}
-						</Button>
-					{:else if i + 1 === currentPage - 3 || i + 1 === currentPage + 3}
-						<span class="px-2">...</span>
-					{/if}
-				{/each}
-			</div>
-
-			<Button
-				variant="outline"
-				size="sm"
-				disabled={currentPage === totalPages}
-				onclick={() => goToPage(currentPage + 1)}
-			>
-				Next
-			</Button>
-		</div>
-	{/if}
 {:else}
 	<Card.Root>
 		<Card.Content class="py-12 text-center">