JWE/app/src/lib/components/WikiFiche.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { t } from '$lib/i18n/store.svelte';
	import type { WikiSummary } from '$lib/types';

	interface Props {
		nom: string;
		wikidataId: string | null;
		tonPositif?: string;
		tonNeutre?: string;
	}

	let { nom, wikidataId, tonPositif, tonNeutre }: Props = $props();

	// undefined = chargement, null = pas de fiche (Cas B), WikiSummary = Cas A
	let wiki = $state<WikiSummary | null | undefined>(undefined);

	onMount(() => {
		if (!wikidataId) {
			wiki = null;
			return;
		}
		let annule = false;
		void (async () => {
			try {
				const res = await fetch(`/api/wiki/${wikidataId}`);
				if (annule) return;
				wiki = res.ok ? ((await res.json()) as WikiSummary) : null;
			} catch {
				if (!annule) wiki = null;
			}
		})();
		return () => {
			annule = true;
		};
	});

	const lienContribution = $derived(
		`https://fr.wikipedia.org/w/index.php?search=${encodeURIComponent(nom)}&title=Sp%C3%A9cial:Recherche`
	);
</script>

{#if wiki === undefined}
	<div class="panneau chargement">
		<p>{t().explorer.chargerFiche}</p>
	</div>
{:else if wiki}
	<!-- Cas A : fiche Wikipédia existante -->
	<article class="panneau cas-a">
		<h2>
			<a href={wiki.url} target="_blank" rel="noopener noreferrer">{wiki.title}</a>
		</h2>
		{#if tonPositif || tonNeutre}
			<p class="ton">{tonPositif ?? tonNeutre}</p>
		{/if}
		{#if wiki.thumbnail}
			<img src={wiki.thumbnail} alt="" loading="lazy" decoding="async" />
		{/if}
		<p class="extrait">{wiki.extract}</p>
		<a class="lien-wiki" href={wiki.url} target="_blank" rel="noopener noreferrer">
			{t().resultat.lireWiki} ↗
		</a>
	</article>
{:else}
	<!-- Cas B : lacune documentaire — panneau volontairement distinct (Peak-End) -->
	<article class="panneau cas-b">
		<h2><span class="icone" aria-hidden="true">◌</span> {t().lacune.titre}</h2>
		<p class="texte">{t().lacune.texte}</p>
		<a class="btn btn-cta" href={lienContribution} target="_blank" rel="noopener noreferrer">
			{t().lacune.cta} ↗
		</a>
		<p class="guide">
			{t().lacune.guide}
			<a href="https://fr.wikipedia.org/wiki/Aide:Premiers_pas" target="_blank" rel="noopener noreferrer">
				{t().lacune.guideLien} ↗
			</a>
		</p>
	</article>
{/if}

<style>
	.panneau {
		border-radius: var(--oki-radius);
		padding: 1.1rem 1.25rem;
		box-shadow: var(--oki-ombre);
	}

	.chargement {
		background: var(--oki-blanc);
		color: var(--oki-encre-doux);
		text-align: center;
	}

	/* Cas A : vert doux, apaisé */
	.cas-a {
		background: var(--oki-vert-doux);
		border: 1.5px solid var(--oki-vert-clair);
	}

	.cas-a h2 {
		margin: 0 0 0.3rem;
		font-size: 1.2rem;
	}

	.cas-a h2 a {
		color: var(--oki-vert);
	}

	.cas-a .ton {
		margin: 0 0 0.6rem;
		font-weight: 600;
		color: var(--oki-vert-clair);
	}

	.cas-a img {
		float: right;
		width: 96px;
		height: auto;
		margin: 0 0 0.5rem 0.8rem;
		border-radius: var(--oki-radius-petit);
	}

	.cas-a .extrait {
		margin: 0 0 0.6rem;
	}

	.lien-wiki {
		color: var(--oki-bleu);
		font-weight: 650;
	}

	/* Cas B : teinte sable/orangée distincte, icône spécifique */
	.cas-b {
		background: var(--oki-lacune-fond);
		border: 2px solid var(--oki-lacune-bord);
	}

	.cas-b h2 {
		margin: 0 0 0.5rem;
		font-size: 1.25rem;
		color: #8a5a00;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.cas-b .icone {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.6rem;
		height: 1.6rem;
		border: 2.5px dashed var(--oki-lacune-bord);
		border-radius: 50%;
		font-size: 1rem;
	}

	.cas-b .texte {
		margin: 0 0 0.9rem;
		font-size: 1.02rem;
	}

	.btn-cta {
		background: var(--oki-lacune-bord);
		color: #fff;
	}

	.btn-cta:hover {
		background: #b98a2f;
	}

	.guide {
		margin: 0.8rem 0 0;
		font-size: 0.88rem;
		color: var(--oki-encre-doux);
	}

	.guide a {
		color: var(--oki-bleu);
		font-weight: 600;
	}
</style>