add popfeed reviews

docs/Autofill.md

···
+# autofilling a profile
+
+- find all links in bluesky profile
+- check for lexicons:
+  - place.stream.livestream
+  - social.popfeed.challenge.participation
+  - social.popfeed.feed.review
+  - site.standard.document
+  - com.germnetwork.declaration
+  - pub.leaflet.document
+  - blue.flashes.actor.portfolio
+- add bluesky profile card

src/lib/cards/PopfeedReviews/PopfeedReviewsCard.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { BlueskyPost } from '../../components/bluesky-post';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import { CardDefinitionsByType } from '..';
+	import Rating from './Rating.svelte';
+
+	let { item }: { item: Item } = $props();
+
+	const data = getAdditionalUserData();
+	// svelte-ignore state_referenced_locally
+	let feed = $state(data[item.cardType] as any);
+
+	let did = getDidContext();
+	let handle = getHandleContext();
+
+	onMount(async () => {
+		console.log(feed);
+		if (!feed) {
+			feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
+				did,
+				handle
+			})) as any;
+
+			console.log(feed);
+
+			data[item.cardType] = feed;
+		}
+	});
+</script>
+
+<div class="z-10 flex h-full gap-4 overflow-x-scroll p-4">
+	{#each feed ?? [] as review}
+		<a target="_blank" class="flex" href="https://popfeed.social/review/{review.uri}">
+			<div
+				class="relative flex aspect-[2/3] h-full flex-col items-center justify-end overflow-hidden p-1 rounded-xl"
+			>
+				<img src={review.value.posterUrl} alt="" class="absolute inset-0 -z-10" />
+				<div class="from-base-900/80 absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t via-transparent"></div>
+
+				<Rating class="z-10 text-lg" rating={review.value.rating} />
+			</div>
+		</a>
+	{/each}
+</div>

src/lib/cards/PopfeedReviews/Rating.svelte

···
+<script lang="ts">
+	import { cn } from '@foxui/core';
+
+	let { rating, class: className }: { rating: number; class?: string } = $props();
+
+	// Convert 0-10 rating to 0-5 stars
+	const starRating = $derived(Math.max(0, Math.min(10, rating ?? 0)) / 2);
+	const fullStars = $derived(Math.floor(starRating));
+	const hasHalfStar = $derived(rating % 2 === 1);
+	const emptyStars = $derived(Math.max(0, 5 - fullStars - (hasHalfStar ? 1 : 0)));
+</script>
+
+{#snippet star(className: string)}
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 {className}">
+		<path
+			fill="currentColor"
+			fill-rule="evenodd"
+			d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+			clip-rule="evenodd"
+		/>
+	</svg>
+{/snippet}
+
+{#snippet halfStar()}
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-accent-500">
+		<defs>
+			<linearGradient id="half-filled" x1="0%" y1="0%" x2="100%" y2="0%">
+				<stop offset="50%" stop-color="currentColor" />
+				<stop offset="50%" stop-color="var(--color-base-400)" />
+			</linearGradient>
+		</defs>
+		<path
+			fill="url(#half-filled)"
+			fill-rule="evenodd"
+			d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+			clip-rule="evenodd"
+		/>
+	</svg>
+{/snippet}
+
+<div class={cn('text-accent-500 flex', className)}>
+	{#each Array(fullStars) as _}
+		{@render star("text-accent-500")}
+	{/each}
+	{#if hasHalfStar}
+		{@render halfStar()}
+	{/if}
+	{#each Array(emptyStars) as _}
+		{@render star("text-base-400")}
+	{/each}
+</div>

src/lib/cards/PopfeedReviews/index.ts

···
+import type { CardDefinition } from '../types';
+import { listRecords } from '$lib/oauth/atproto';
+import PopfeedReviewsCard from './PopfeedReviewsCard.svelte';
+
+export const PopfeedReviewsCardDefinition = {
+	type: 'recentPopfeedReviews',
+	contentComponent: PopfeedReviewsCard,
+	createNew: (card) => {
+		card.w = 8;
+		card.mobileW = 8;
+		card.h = 3;
+		card.mobileH = 6;
+	},
+	loadData: async (items, { did }) => {
+		const data = await listRecords({ did, collection: 'social.popfeed.feed.review' });
+
+		return data;
+	},
+	minH: 3,
+	sidebarButtonText: 'Popfeed Reviews'
+} as CardDefinition & { type: 'recentPopfeedReviews' };

src/lib/cards/index.ts

···
 import { YoutubeCardDefinition } from './YoutubeVideoCard';
 import { BlueskyProfileCardDefinition } from './BlueskyProfileCard';
 import { GithubProfileCardDefitition } from './GitHubProfileCard';
+import { PopfeedReviewsCardDefinition } from './PopfeedReviews';
 
 export const AllCardDefinitions = [
 	ImageCardDefinition,
···
 	DinoGameCardDefinition,
 	BlueskyProfileCardDefinition,
 	GithubProfileCardDefitition,
-	TetrisCardDefinition
+	TetrisCardDefinition,
+	PopfeedReviewsCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/website/Settings.svelte

···
 				(value) => {
 					data.publication ??= {};
 					data.publication.preferences ??= {};
-					data.publication.preferences.hideProfile = value;
+					data.publication.preferences.hideProfileSection = value;
 
 					data = { ...data };
 				}