refactor pt7

.claude/settings.local.json

···
 {
-	"permissions": {
-		"allow": [
-			"Bash(pnpm check:*)",
-			"mcp__ide__getDiagnostics",
-			"mcp__plugin_svelte_svelte__svelte-autofixer",
-			"mcp__plugin_svelte_svelte__list-sections",
-			"Bash(pkill:*)",
-			"Bash(timeout 8 pnpm dev:*)",
-			"Bash(git checkout:*)",
-			"Bash(npx svelte-kit:*)"
-		]
-	}
+  "permissions": {
+    "allow": [
+      "Bash(pnpm check:*)",
+      "mcp__ide__getDiagnostics",
+      "mcp__plugin_svelte_svelte__svelte-autofixer",
+      "mcp__plugin_svelte_svelte__list-sections",
+      "Bash(pkill:*)",
+      "Bash(timeout 8 pnpm dev:*)",
+      "Bash(git checkout:*)",
+      "Bash(npx svelte-kit:*)",
+      "Bash(ls:*)"
+    ]
+  }
 }

src/lib/cards/BlueskyPostCard/BlueskyPostCard.svelte

···
 			feed = (
 				(await CardDefinitionsByType[item.cardType]?.loadData?.([], {
 					did,
-					handle,
-					platform: undefined
+					handle
 				})) as any
 			).feed;
 

src/lib/cards/GameCards/DinoGameCard/DinoGameCard.svelte

···
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	bind:this={container}
 	class="relative h-full w-full overflow-hidden outline-none"

src/lib/cards/GameCards/TetrisCard/TetrisCard.svelte

···
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	bind:this={container}
 	class="relative h-full w-full overflow-hidden outline-none"

src/lib/cards/LivestreamCard/LivestreamCard.svelte

···
 		if (!latestLivestream) {
 			latestLivestream = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
 				did,
-				handle,
-				platform: undefined
+				handle
 			})) as
 				| {
 						createdAt: string;
···
 					{:else if latestLivestream.online === false}
 						<Badge size="sm" class="accent:text-base-900">ended</Badge>
 					{:else}
-						<div class="h-[22px]"></div>
+						<div class="h-5.5"></div>
 					{/if}
 				</div>
 

src/lib/cards/utils/YoutubeVideoPlayer.svelte

···
 	import { cn } from '@foxui/core';
 	import { onDestroy, onMount } from 'svelte';
 
+	// Minimal Plyr interface for what we use
+	interface PlyrInstance {
+		source: {
+			type: string;
+			sources: { src: string; type: string }[];
+		};
+		on: (event: string, callback: () => void) => void;
+		play: () => void;
+		destroy: () => void;
+	}
+
+	interface PlyrConstructorType {
+		new (selector: string, options: Record<string, unknown>): PlyrInstance;
+	}
+
 	const { class: className }: { class?: string } = $props();
 
-	let Plyr = $state();
+	let PlyrConstructor: PlyrConstructorType | undefined = $state();
 
-	let player = $state();
+	let player: PlyrInstance | undefined = $state();
 
 	onMount(async () => {
-		if (!Plyr) Plyr = (await import('plyr')).default;
+		if (!PlyrConstructor) {
+			const plyrModule = (await import('plyr')) as unknown as { default: PlyrConstructorType };
+			PlyrConstructor = plyrModule.default;
+		}
 
-		const player = new Plyr('.js-player', {
+		player = new PlyrConstructor('.js-player', {
 			settings: ['captions', 'quality', 'loop', 'speed'],
 			controls: [
 				'play-large',
···
 
 		// when loaded play the video and go fullscreen
 		player.on('ready', () => {
-			player.play();
+			player?.play();
 			//player.fullscreen.enter();
 		});
 	});
···
 
 {#key videoPlayer.id}
 	{#if videoPlayer.id}
-		<div class="fixed inset-0 z-[100] flex h-screen w-screen items-center justify-center">
+		<div class="fixed inset-0 z-100 flex h-screen w-screen items-center justify-center">
 			<button
 				onclick={() => videoPlayer.hide()}
 				class="absolute inset-0 bg-black/70 backdrop-blur-sm"

src/lib/components/bluesky-post/index.ts

···
 		return '';
 	}
 
-	const html = RichText({ text: post.record.text, facets: post.record.facets }, baseUrl);
+	const html = RichText(
+		{ text: post.record.text as string, facets: post.record.facets as Facet[] },
+		baseUrl
+	);
 
 	return html.replace(/\n/g, '<br>');
 }