Add watching status and groups for shows and movies

src/routes/about/+page.svelte

@@ -6,7 +6,7 @@
 	import Section from '#lib/components/ui/Section.svelte';
 	import Panel from '#lib/components/ui/Panel.svelte';
 	import AniListSection from '#lib/components/about/AniListSection.svelte';
-	import MediaGrid from '#lib/components/about/MediaGrid.svelte';
+	import MediaSection from '#lib/components/about/media/MediaSection.svelte';
 	import GameCard from '#lib/components/about/GameCard.svelte';
 	import BooksSection from '#lib/components/about/books/BooksSection.svelte';
 	import SetupSection from '#lib/components/about/setup/SetupSection.svelte';
@@ -15,12 +15,9 @@
 
 	let { data }: PageProps = $props();
 
-	const byRating = (first: { rating: number }, second: { rating: number }) => second.rating - first.rating;
-	const shows = [...about.shows].sort(byRating);
-	const movies = [...about.movies].sort(byRating);
 	const mediaGroups = [
-		{ id: 'shows', title: 'TV Shows', items: shows, kind: 'show' as const },
-		{ id: 'movies', title: 'Movies', items: movies, kind: 'movie' as const }
+		{ id: 'shows', title: 'TV Shows', items: about.shows, kind: 'show' as const },
+		{ id: 'movies', title: 'Movies', items: about.movies, kind: 'movie' as const }
 	];
 
 	const sections = $derived([
@@ -68,7 +65,7 @@
 
 	{#each mediaGroups as group (group.id)}
 		<Section title={group.title} id={group.id}>
-			<MediaGrid items={group.items} mediaDetails={data.mediaDetails} kind={group.kind} />
+			<MediaSection items={group.items} mediaDetails={data.mediaDetails} kind={group.kind} />
 		</Section>
 	{/each}