feat: add gamification hooks, leaderboard UI, and translations

- Added Directus hooks for automatic point awards:
  - Recording creation/publishing (50 points)
  - Recording featured status (100 points bonus)
  - Comments on recordings (5 points)
- Created /leaderboard route with full UI
  - Server-side data loading with authentication guard
  - Responsive design with medal emojis for top 3
  - User stats display (recordings, plays, achievements)
  - Pagination support
  - "How It Works" info section
- Added comprehensive gamification translations
- Time-weighted scoring displayed for rankings
- Automatic achievement checking on point awards

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/bundle/src/hook/index.ts

@@ -3,6 +3,7 @@ global.require = createRequire(import.meta.url);
 import { defineHook } from "@directus/extensions-sdk";
 import slugify from "@sindresorhus/slugify";
 import ffmpeg from "fluent-ffmpeg";
+import { awardPoints, checkAchievements } from "../endpoint/gamification.js";
 
 async function processVideo(
 	meta,
@@ -32,7 +33,7 @@ async function processVideo(
 	}
 }
 
-export default defineHook(async ({ filter, action }, { services, logger }) => {
+export default defineHook(async ({ filter, action }, { services, logger, database, getSchema }) => {
 	action("files.upload", async (meta, context) => {
 		await processVideo(meta, context, services, logger);
 	});
@@ -67,4 +68,78 @@ export default defineHook(async ({ filter, action }, { services, logger }) => {
 			return payload;
 		},
 	);
+
+	// =========================================
+	// GAMIFICATION HOOKS
+	// =========================================
+
+	// Hook: Award points when recording is published
+	action("items.create", async (meta, { collection, accountability }) => {
+		if (collection === "sexy_recordings") {
+			const { payload, key } = meta;
+
+			// Award points if recording is published
+			if (payload.status === "published" && accountability?.user) {
+				try {
+					await awardPoints(database, accountability.user, "RECORDING_CREATE", key);
+					await checkAchievements(database, accountability.user, "recordings");
+					logger.info(`Awarded RECORDING_CREATE points to user ${accountability.user}`);
+				} catch (error) {
+					logger.error("Failed to award recording creation points:", error);
+				}
+			}
+		}
+	});
+
+	// Hook: Award points when recording status changes to published or featured
+	action("items.update", async (meta, { collection, accountability, schema }) => {
+		if (collection === "sexy_recordings") {
+			const { payload, keys } = meta;
+
+			try {
+				const { ItemsService } = services;
+				const recordingsService = new ItemsService("sexy_recordings", {
+					schema: await getSchema(),
+				});
+
+				for (const key of keys) {
+					const recording = await recordingsService.readOne(key);
+
+					// Award points if status changed from non-published to published
+					if (payload.status === "published" && recording.status !== "published" && recording.user_created) {
+						await awardPoints(database, recording.user_created, "RECORDING_CREATE", key);
+						await checkAchievements(database, recording.user_created, "recordings");
+						logger.info(`Awarded RECORDING_CREATE points to user ${recording.user_created}`);
+					}
+
+					// Award bonus points if recording becomes featured
+					if (payload.featured === true && !recording.featured && recording.user_created) {
+						await awardPoints(database, recording.user_created, "RECORDING_FEATURED", key);
+						await checkAchievements(database, recording.user_created, "recordings");
+						logger.info(`Awarded RECORDING_FEATURED points to user ${recording.user_created}`);
+					}
+				}
+			} catch (error) {
+				logger.error("Failed to award recording update points:", error);
+			}
+		}
+	});
+
+	// Hook: Award points when user creates a comment on a recording
+	action("comments.create", async (meta, { accountability }) => {
+		if (!accountability?.user) return;
+
+		try {
+			const { payload } = meta;
+
+			// Check if comment is on a recording
+			if (payload.collection === "sexy_recordings") {
+				await awardPoints(database, accountability.user, "COMMENT_CREATE");
+				await checkAchievements(database, accountability.user, "social");
+				logger.info(`Awarded COMMENT_CREATE points to user ${accountability.user}`);
+			}
+		} catch (error) {
+			logger.error("Failed to award comment points:", error);
+		}
+	});
 });

packages/frontend/src/lib/i18n/locales/en.ts

@@ -910,4 +910,25 @@ export default {
 	head: {
 		title: "SexyArt | {title}",
 	},
+	gamification: {
+		leaderboard: "Leaderboard",
+		leaderboard_description: "Compete with other creators and players for the top spot",
+		leaderboard_subtitle: "Top creators and players ranked by activity points",
+		top_players: "Top Players",
+		no_rankings_yet: "No rankings yet. Be the first to earn points!",
+		points: "Points",
+		recordings: "Recordings",
+		plays: "Plays",
+		achievements: "Achievements",
+		rank: "Rank",
+		stats: "Stats",
+		how_it_works: "How It Works",
+		how_it_works_description: "Points are awarded for creating recordings, playing others' recordings, and engaging with the community. Rankings use time-weighted scoring to keep things dynamic.",
+		earn_by_creating: "Create Recordings",
+		earn_by_creating_desc: "Earn 50 points per published recording",
+		earn_by_playing: "Play & Complete",
+		earn_by_playing_desc: "Earn 10 points per play, 5 for completion",
+		stay_active: "Stay Active",
+		stay_active_desc: "Recent activity counts more toward your rank",
+	},
 };

packages/frontend/src/routes/leaderboard/+page.server.ts

@@ -0,0 +1,43 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ fetch, url, locals }) => {
+	// Guard: Redirect to login if not authenticated
+	if (!locals.authStatus.authenticated) {
+		throw redirect(302, "/login");
+	}
+
+	try {
+		const limit = parseInt(url.searchParams.get("limit") || "100");
+		const offset = parseInt(url.searchParams.get("offset") || "0");
+
+		const response = await fetch(
+			`/api/sexy/gamification/leaderboard?limit=${limit}&offset=${offset}`,
+		);
+
+		if (!response.ok) {
+			throw new Error("Failed to fetch leaderboard");
+		}
+
+		const data = await response.json();
+
+		return {
+			leaderboard: data.data || [],
+			pagination: {
+				limit,
+				offset,
+				hasMore: data.data?.length === limit,
+			},
+		};
+	} catch (error) {
+		console.error("Leaderboard load error:", error);
+		return {
+			leaderboard: [],
+			pagination: {
+				limit: 100,
+				offset: 0,
+				hasMore: false,
+			},
+		};
+	}
+};

packages/frontend/src/routes/leaderboard/+page.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+import { _, locale } from "svelte-i18n";
+import { Button } from "$lib/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
+import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar";
+import { getAssetUrl } from "$lib/directus";
+import Meta from "$lib/components/meta/meta.svelte";
+import PeonyBackground from "$lib/components/background/peony-background.svelte";
+
+const { data } = $props();
+
+// Format points with comma separator
+function formatPoints(points: number): string {
+	return Math.round(points).toLocaleString($locale || "en");
+}
+
+// Get medal emoji for top 3
+function getMedalEmoji(rank: number): string {
+	switch (rank) {
+		case 1:
+			return "🥇";
+		case 2:
+			return "🥈";
+		case 3:
+			return "🥉";
+		default:
+			return "";
+	}
+}
+
+// Get user initials
+function getUserInitials(name: string): string {
+	if (!name) return "?";
+	const parts = name.split(" ");
+	if (parts.length >= 2) {
+		return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+	}
+	return name.substring(0, 2).toUpperCase();
+}
+</script>
+
+<Meta title={$_("gamification.leaderboard")} description={$_("gamification.leaderboard_description")} />
+
+<div class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
+	<PeonyBackground />
+
+	<div class="container mx-auto px-4 py-8 relative z-10">
+		<!-- Header -->
+		<div class="flex items-center justify-between mb-8">
+			<div>
+				<h1 class="text-4xl font-bold mb-2">{$_("gamification.leaderboard")}</h1>
+				<p class="text-muted-foreground">{$_("gamification.leaderboard_subtitle")}</p>
+			</div>
+			<Button variant="ghost" size="sm" href="/">
+				<span class="icon-[ri--arrow-left-line] w-4 h-4 mr-2"></span>
+				{$_("common.back")}
+			</Button>
+		</div>
+
+		<!-- Leaderboard Card -->
+		<Card class="bg-card/90 backdrop-blur-sm border-border/50">
+			<CardHeader>
+				<CardTitle class="flex items-center gap-2">
+					<span class="icon-[ri--trophy-line] w-5 h-5 text-primary"></span>
+					{$_("gamification.top_players")}
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{#if data.leaderboard.length === 0}
+					<div class="text-center py-12 text-muted-foreground">
+						<span class="icon-[ri--trophy-line] w-12 h-12 mx-auto mb-4 opacity-50"></span>
+						<p>{$_("gamification.no_rankings_yet")}</p>
+					</div>
+				{:else}
+					<div class="space-y-2">
+						{#each data.leaderboard as entry (entry.user_id)}
+							<a
+								href="/users/{entry.user_id}"
+								class="flex items-center gap-4 p-4 rounded-lg hover:bg-accent/10 transition-colors group"
+							>
+								<!-- Rank Badge -->
+								<div class="flex-shrink-0 w-14 text-center">
+									{#if entry.rank <= 3}
+										<span class="text-3xl">{getMedalEmoji(entry.rank)}</span>
+									{:else}
+										<span class="text-xl font-bold text-muted-foreground group-hover:text-foreground transition-colors">
+											#{entry.rank}
+										</span>
+									{/if}
+								</div>
+
+								<!-- Avatar -->
+								<Avatar class="h-12 w-12 ring-2 ring-accent/20 group-hover:ring-primary/40 transition-all">
+									{#if entry.avatar}
+										<AvatarImage src={getAssetUrl(entry.avatar, "mini")} alt={entry.display_name} />
+									{/if}
+									<AvatarFallback class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold">
+										{getUserInitials(entry.display_name)}
+									</AvatarFallback>
+								</Avatar>
+
+								<!-- User Info -->
+								<div class="flex-1 min-w-0">
+									<div class="font-semibold truncate group-hover:text-primary transition-colors">
+										{entry.display_name || $_("common.anonymous")}
+									</div>
+									<div class="text-sm text-muted-foreground flex items-center gap-3">
+										<span title={$_("gamification.recordings")}>
+											<span class="icon-[ri--video-line] w-3.5 h-3.5 inline mr-1"></span>
+											{entry.recordings_count}
+										</span>
+										<span title={$_("gamification.plays")}>
+											<span class="icon-[ri--play-line] w-3.5 h-3.5 inline mr-1"></span>
+											{entry.playbacks_count}
+										</span>
+										<span title={$_("gamification.achievements")}>
+											<span class="icon-[ri--trophy-line] w-3.5 h-3.5 inline mr-1"></span>
+											{entry.achievements_count}
+										</span>
+									</div>
+								</div>
+
+								<!-- Score -->
+								<div class="text-right flex-shrink-0">
+									<div class="text-2xl font-bold text-primary">
+										{formatPoints(entry.total_weighted_points)}
+									</div>
+									<div class="text-xs text-muted-foreground">
+										{$_("gamification.points")}
+									</div>
+								</div>
+
+								<!-- Arrow indicator -->
+								<div class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+									<span class="icon-[ri--arrow-right-s-line] w-5 h-5 text-muted-foreground"></span>
+								</div>
+							</a>
+						{/each}
+					</div>
+
+					<!-- Pagination -->
+					{#if data.pagination.hasMore}
+						<div class="mt-6 text-center">
+							<Button
+								variant="outline"
+								href="/leaderboard?offset={data.pagination.offset + data.pagination.limit}&limit={data.pagination.limit}"
+							>
+								{$_("common.load_more")}
+							</Button>
+						</div>
+					{/if}
+				{/if}
+			</CardContent>
+		</Card>
+
+		<!-- Info Card -->
+		<Card class="mt-6 bg-card/90 backdrop-blur-sm border-border/50">
+			<CardContent class="p-6">
+				<h3 class="font-semibold mb-2 flex items-center gap-2">
+					<span class="icon-[ri--information-line] w-4 h-4 text-primary"></span>
+					{$_("gamification.how_it_works")}
+				</h3>
+				<p class="text-sm text-muted-foreground mb-4">
+					{$_("gamification.how_it_works_description")}
+				</p>
+				<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+					<div class="flex items-start gap-2">
+						<span class="icon-[ri--video-add-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
+						<div>
+							<div class="font-medium">{$_("gamification.earn_by_creating")}</div>
+							<div class="text-muted-foreground">{$_("gamification.earn_by_creating_desc")}</div>
+						</div>
+					</div>
+					<div class="flex items-start gap-2">
+						<span class="icon-[ri--play-circle-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
+						<div>
+							<div class="font-medium">{$_("gamification.earn_by_playing")}</div>
+							<div class="text-muted-foreground">{$_("gamification.earn_by_playing_desc")}</div>
+						</div>
+					</div>
+					<div class="flex items-start gap-2">
+						<span class="icon-[ri--time-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
+						<div>
+							<div class="font-medium">{$_("gamification.stay_active")}</div>
+							<div class="text-muted-foreground">{$_("gamification.stay_active_desc")}</div>
+						</div>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	</div>
+</div>