Merge pull request #10 from LooseWireDev/feat/popular-apps-section

Add popular apps section to home page

Author: gavdevs

db/queries.ts

@@ -407,6 +407,35 @@ export async function getRecentApps(db: DrizzleDB) {
 	return withSlimRelations(db, rows);
 }
 
+export async function getPopularApps(db: DrizzleDB, limit = 6) {
+	const popular = await db
+		.select({ appId: appDownloads.appId, count: sql<number>`count(*)` })
+		.from(appDownloads)
+		.groupBy(appDownloads.appId)
+		.orderBy(sql`count(*) desc`)
+		.limit(limit);
+
+	if (popular.length === 0) return [];
+
+	const rows = await db
+		.select(appCardColumns)
+		.from(apps)
+		.where(
+			inArray(
+				apps.id,
+				popular.map((p) => p.appId),
+			),
+		);
+
+	const hydrated = await withSlimRelations(db, rows);
+
+	// Preserve download count ordering
+	const orderMap = new Map(popular.map((p, i) => [p.appId, i]));
+	return hydrated.sort(
+		(a, b) => (orderMap.get(a.id) ?? 0) - (orderMap.get(b.id) ?? 0),
+	);
+}
+
 // ─── Desktop App Queries ────────────────────────────────────────────
 
 export async function listDesktopApps(

src/lib/server-fns.ts

@@ -7,6 +7,7 @@ import {
 	getAppAlternatives,
 	getAppBySlug,
 	getComparisonBySlug,
+	getPopularApps,
 	getProprietaryAppAlternatives,
 	getProprietaryAppBySlug,
 	getRecentApps,
@@ -232,6 +233,15 @@ export const fetchRecentApps = createServerFn({ method: "GET" })
 		});
 	});
 
+export const fetchPopularApps = createServerFn({ method: "GET" })
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	.handler(async (): Promise<any> => {
+		return kvCached(cacheKey("getPopularApps"), () => {
+			const db = getDb();
+			return getPopularApps(db);
+		});
+	});
+
 export const fetchComparisonBySlug = createServerFn({ method: "GET" })
 	.inputValidator((input: { slug: string }) => input)
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

src/routes/index.tsx

@@ -4,7 +4,11 @@ import { JsonLd } from "~/components/json-ld";
 import { PageLayout } from "~/components/layout/page-layout";
 import { SearchBar } from "~/components/search-bar";
 import { SITE_URL } from "~/lib/constants";
-import { fetchCategoriesWithApps, fetchRecentApps } from "~/lib/server-fns";
+import {
+	fetchCategoriesWithApps,
+	fetchPopularApps,
+	fetchRecentApps,
+} from "~/lib/server-fns";
 
 const popularAlternatives = [
 	{ name: "WhatsApp", slug: "whatsapp" },
@@ -21,11 +25,12 @@ const popularAlternatives = [
 
 export const Route = createFileRoute("/")({
 	loader: async () => {
-		const [recentApps, categories] = await Promise.all([
+		const [recentApps, popularApps, categories] = await Promise.all([
 			fetchRecentApps(),
+			fetchPopularApps(),
 			fetchCategoriesWithApps(),
 		]);
-		return { recentApps, categories };
+		return { recentApps, popularApps, categories };
 	},
 	head: () => ({
 		meta: [
@@ -53,7 +58,7 @@ export const Route = createFileRoute("/")({
 });
 
 function HomePage() {
-	const { recentApps, categories } = Route.useLoaderData();
+	const { recentApps, popularApps, categories } = Route.useLoaderData();
 
 	const jsonLd = {
 		"@context": "https://schema.org",
@@ -104,6 +109,28 @@ function HomePage() {
 					</div>
 				</section>
 
+				{/* Popular Apps */}
+				{popularApps.length > 0 && (
+					<section>
+						<h2 className="mb-3 font-sans text-base font-bold text-foreground">
+							Popular Apps
+						</h2>
+						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+							{popularApps.map((app: any) => (
+								<AppCard
+									key={app.slug}
+									name={app.name}
+									slug={app.slug}
+									description={app.description}
+									iconUrl={app.iconUrl}
+									sources={app.sources}
+									tags={app.tags}
+								/>
+							))}
+						</div>
+					</section>
+				)}
+
 				{/* Recently Added */}
 				{recentApps.length > 0 && (
 					<section>