feat: extract and style product page barcode info

Author: VaiTon

src/lib/ui/BarcodeInfo.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import JsBarcode from 'jsbarcode';
+	import Card from './Card.svelte';
+
+	let { code }: { code: string } = $props();
+
+	let openPricesStatus: number | null = $state(null);
+	let proOffStatus: number | null = $state(null);
+
+	$effect(() => {
+		JsBarcode('#barcode', code, { format: 'ean13' });
+		fetch(`https://prices.openfoodfacts.org/product/${code}`)
+			.then((r) => (openPricesStatus = r.status))
+			.catch(() => (openPricesStatus = 0));
+		fetch(`https://pro.openfoodfacts.dev/products/${code}`)
+			.then((r) => (proOffStatus = r.status))
+			.catch(() => (proOffStatus = 0));
+	});
+</script>
+
+<Card>
+	<h1 class="card-title my-4 grow text-2xl font-bold md:text-4xl">Barcode Information</h1>
+	<div class="card-body flex flex-row-reverse">
+		<svg id="barcode" class="mb-2 block"></svg>
+
+		<div class="grow">
+			<label class="input w-full">
+				<span class="label">Barcode</span>
+				<input type="text" readonly value={code} />
+			</label>
+
+			<ul class="list mt-4 list-inside list-disc">
+				<li>
+					<a
+						class="text-xs text-blue-500 hover:underline"
+						href={`https://www.google.com/search?q=${code}`}
+						target="_blank"
+						rel="noopener"
+						title="Search on Google"
+					>
+						Google
+					</a>
+				</li>
+				<li>
+					<a
+						class="text-xs text-blue-500 hover:underline"
+						href={`https://duckduckgo.com/?q=${code}`}
+						target="_blank"
+						rel="noopener"
+						title="Search on DuckDuckGo"
+					>
+						DuckDuckGo
+					</a>
+				</li>
+				<li>
+					<a
+						class="text-xs text-green-600 hover:underline"
+						href={`https://prices.openfoodfacts.org/product/${code}`}
+						target="_blank"
+						rel="noopener"
+						title="Open Prices"
+					>
+						Open Prices {openPricesStatus === null
+							? '…'
+							: openPricesStatus === 200
+								? ''
+								: ' (Not found)'}
+					</a>
+				</li>
+				<li>
+					<a
+						class="text-xs text-green-600 hover:underline"
+						href={`https://pro.openfoodfacts.dev/products/${code}`}
+						target="_blank"
+						rel="noopener"
+						title="Pro OFF"
+					>
+						Pro OFF{proOffStatus === null ? '…' : proOffStatus === 200 ? '' : ' (Not found)'}
+					</a>
+				</li>
+				{#if code && code.length >= 3}
+					<li>
+						<a
+							class="text-xs text-purple-500 hover:underline"
+							href={`/search?barcode_prefix=${code.slice(0, 3)}`}
+							title="Find similar products"
+						>
+							Similar prefix
+						</a>
+					</li>
+				{/if}
+			</ul>
+		</div>
+	</div>
+</Card>

src/routes/products/[barcode]/+page.svelte

@@ -13,6 +13,7 @@
 
 	import Gs1Country from './GS1Country.svelte';
 	import ProductHeader from './ProductHeader.svelte';
+	import BarcodeInfo from '$lib/ui/BarcodeInfo.svelte';
 
 	import type { PageData } from './$types';
 	import Prices from './Prices.svelte';
@@ -62,12 +63,6 @@
 		description: 'Show product barcode',
 		action: () => (showBarcode = !showBarcode)
 	});
-
-	import JsBarcode from 'jsbarcode';
-
-	$effect(() => {
-		JsBarcode('#barcode', product.code, { format: 'ean13' });
-	});
 </script>
 
 <!-- FIXME: Remove this cast once product.image_front_small_url and product.image_front_url are not nullable in the API -->
@@ -80,10 +75,9 @@
 <div class="flex flex-col gap-4">
 	<ProductHeader {product} taxonomies={data.taxo} />
 
-	<div class={['flex flex-col items-center gap-4', showBarcode || 'hidden'].join(' ')}>
-		<svg id="barcode"></svg>
-		<p class="text-sm text-gray-500">Barcode: {product.code}</p>
-	</div>
+	{#if showBarcode && product.code != null}
+		<BarcodeInfo code={product.code} />
+	{/if}
 
 	<robotoff-contribution-message product-code={product.code} is-logged-in={$userInfo != null}
 	></robotoff-contribution-message>