pinning models at the top

Author: mchenco

src/components/ModelCatalog.tsx

@@ -19,14 +19,31 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 		capabilities: [],
 	});
 
-	// Sort models by created_at date (newest first)
+	// List of model names to pin at the top
+	const pinnedModelNames = [
+		"@cf/meta/llama-3.3-70b-instruct-fp8-fast",
+		"@cf/meta/llama-3.1-8b-instruct-fast",
+	];
+
+	// Sort models by pinned status first, then by created_at date
 	const sortedModels = useMemo(() => {
 		return [...models].sort((a, b) => {
-			// Default dates if created_at is not available
+			// First check if either model is pinned
+			const isPinnedA = pinnedModelNames.includes(a.name);
+			const isPinnedB = pinnedModelNames.includes(b.name);
+			
+			// If pinned status differs, prioritize pinned models
+			if (isPinnedA && !isPinnedB) return -1;
+			if (!isPinnedA && isPinnedB) return 1;
+			
+			// If both are pinned, sort by position in pinnedModelNames array (for manual ordering)
+			if (isPinnedA && isPinnedB) {
+				return pinnedModelNames.indexOf(a.name) - pinnedModelNames.indexOf(b.name);
+			}
+			
+			// If neither is pinned, sort by created_at date (newest first)
 			const dateA = a.created_at ? new Date(a.created_at) : new Date(0);
 			const dateB = b.created_at ? new Date(b.created_at) : new Date(0);
-			
-			// Sort in descending order (newest first)
 			return dateB.getTime() - dateA.getTime();
 		});
 	}, [models]);