Repository: openfoodfacts/openfoodfacts-explorer
Pull request #289: preference section on product page
Author: login: Bhavishya2601
Created: 2025-03-14T18:33:43Z | Merged: 2025-03-22T01:20:49Z

Fixes #237 

Changed the preference section of the product page

Before
![image](https://github.com/user-attachments/assets/3d618eaf-6622-4842-bfc9-b1215e704b9a)

After
![image](https://github.com/user-attachments/assets/b9d9917e-30f5-421f-90b1-c327fb2fc076)


Linked issue #237: Change the preferences section on product page
The tags on the product page doesn't tell much about what they are and also doesn't provide good user experience

I propose to change them something like this as discussed in issue #218 

Before
![Image](https://github.com/user-attachments/assets/75765254-f11b-451d-9951-d706ee3ea4f9)

After
![Image](https://github.com/user-attachments/assets/de0fb846-4693-4c43-b375-e9f1ae163c11)

Can I work on this issue?
Linked issue comments: user: login: teolemon
created_at: 2025-03-10T11:17:02Z
body: Good idea, it's the attributes API that you should be looking for.
author_association: MEMBER
user: login: Bhavishya2601
created_at: 2025-03-13T18:47:24Z
body: @VaiTon what do you think about this issue?
author_association: CONTRIBUTOR
user: login: VaiTon
created_at: 2025-03-14T00:39:11Z
body: @Bhavishya2601 I'm ok with it. Do you want to work on it?
author_association: MEMBER
user: login: Bhavishya2601
created_at: 2025-03-14T04:38:43Z
body: yeah

> [@Bhavishya2601](https://github.com/Bhavishya2601) I'm ok with it. Do you want to work on it?


author_association: CONTRIBUTOR

Diff:
diff --git a/src/lib/greenscore/GreenScore.svelte b/src/lib/greenscore/GreenScore.svelte
index e8151bd45..f45777713 100644
--- a/src/lib/greenscore/GreenScore.svelte
+++ b/src/lib/greenscore/GreenScore.svelte
@@ -1,18 +1,54 @@
 <script lang="ts">
 	import { KP_ATTRIBUTE_IMG } from '$lib/const';
 
-	const MAP: Record<string, string> = {
-		a: KP_ATTRIBUTE_IMG('green-score-b.svg'),
-		b: KP_ATTRIBUTE_IMG('green-score-c.svg'),
-		c: KP_ATTRIBUTE_IMG('green-score-d.svg'),
-		d: KP_ATTRIBUTE_IMG('green-score-e.svg'),
-		e: KP_ATTRIBUTE_IMG('green-score-unknown.svg')
+	const GRADE_MAP: Record<
+		string,
+		{ name: string; src: string; textColor: string; bgColor: string }
+	> = {
+		a: {
+			name: 'Very low environmental impact',
+			src: KP_ATTRIBUTE_IMG('green-score-a.svg'),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		b: {
+			name: 'Low environmental impact',
+			src: KP_ATTRIBUTE_IMG('green-score-b.svg'),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		c: {
+			name: 'Moderate environmental impact',
+			src: KP_ATTRIBUTE_IMG('green-score-c.svg'),
+			textColor: 'text-yellow-800',
+			bgColor: 'bg-orange-100 hover:bg-orange-200'
+		},
+		d: {
+			name: 'High environmental impact',
+			src: KP_ATTRIBUTE_IMG('green-score-d.svg'),
+			textColor: 'text-orange-700',
+			bgColor: 'bg-red-100 hover:bg-red-200'
+		},
+		unknown: {
+			name: 'Unknown impact',
+			src: KP_ATTRIBUTE_IMG('green-score-unknown.svg'),
+			textColor: 'text-black',
+			bgColor: 'bg-gray-200 hover:bg-gray-300'
+		}
 	};
 
-	let SRC_UNKNOWN = KP_ATTRIBUTE_IMG('green-score-unknown.svg');
-
 	let { grade }: { grade: string } = $props();
-	let src = $derived(MAP[grade.toLowerCase()] ?? SRC_UNKNOWN);
+	let normalizedGrade = $derived(grade.toLowerCase());
+	let { name, src, textColor, bgColor } = $derived(GRADE_MAP[normalizedGrade]);
 </script>
 
-<img alt="Green-Score" {src} class="transition-all duration-75 hover:brightness-90" />
+<a
+	href="#environment_card"
+	class="flex h-full w-full items-center gap-4 rounded-xl p-4 {bgColor} hover:bg-opacity-90 transition-all duration-75"
+>
+	<img alt="Green-Score" {src} class="h-20" />
+	<div class="flex flex-col">
+		<div class="text-xl font-semibold {textColor}">Green-Score {grade.toUpperCase()}</div>
+		<div class="text-black">{name}</div>
+	</div>
+</a>
diff --git a/src/lib/nova/Nova.svelte b/src/lib/nova/Nova.svelte
index b816fd927..a5e8874f3 100644
--- a/src/lib/nova/Nova.svelte
+++ b/src/lib/nova/Nova.svelte
@@ -1,19 +1,48 @@
 <script lang="ts">
 	import { KP_ATTRIBUTE_IMG } from '$lib/const';
 
-	const SRC_MAP: Record<string, string> = {
-		1: KP_ATTRIBUTE_IMG('nova-group-1.svg'),
-		2: KP_ATTRIBUTE_IMG('nova-group-2.svg'),
-		3: KP_ATTRIBUTE_IMG('nova-group-3.svg'),
-		4: KP_ATTRIBUTE_IMG('nova-group-4.svg')
+	const NOVA_MAP: Record<
+		number,
+		{ name: string; src: string; textColor: string; bgColor: string }
+	> = {
+		1: {
+			name: 'Unprocessed or minimally processed foods',
+			src: KP_ATTRIBUTE_IMG('nova-group-1.svg'),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		2: {
+			name: 'Processed culinary ingredients',
+			src: KP_ATTRIBUTE_IMG('nova-group-2.svg'),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		3: {
+			name: 'Processed foods',
+			src: KP_ATTRIBUTE_IMG('nova-group-3.svg'),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		4: {
+			name: 'Ultra processed foods',
+			src: KP_ATTRIBUTE_IMG('nova-group-4.svg'),
+			textColor: 'text-orange-700',
+			bgColor: 'bg-red-100 hover:bg-red-200'
+		},
+		0: {
+			name: 'NOVA not computed',
+			src: KP_ATTRIBUTE_IMG('nova-group-unknown.svg'),
+			textColor: 'text-black',
+			bgColor: 'bg-gray-200 hover:bg-gray-300'
+		}
 	};
 
-	const SRC_UNKNOWN = KP_ATTRIBUTE_IMG('nova-group-unknown.svg');
-
 	let { grade }: { grade: number } = $props();
-	let src = $derived(SRC_MAP[grade] ?? SRC_UNKNOWN);
+
+	let { name, src, textColor, bgColor } = $derived(NOVA_MAP[grade] ?? NOVA_MAP[0]);
 </script>
 
-<a href="#nova">
-	<img alt="Nova Score" {src} class="transition-all duration-75 hover:brightness-90" />
+<a href="#nova" class="w-1/3 {bgColor} flex items-center justify-evenly gap-4 rounded-xl p-4">
+	<img alt="Nova Score" {src} class="h-20 transition-all duration-75 hover:brightness-90" />
+	<div class="{textColor} text-xl font-semibold">{name}</div>
 </a>
diff --git a/src/lib/nutriscore/NutriScore.svelte b/src/lib/nutriscore/NutriScore.svelte
index 380b7ac99..d60b993ef 100644
--- a/src/lib/nutriscore/NutriScore.svelte
+++ b/src/lib/nutriscore/NutriScore.svelte
@@ -4,19 +4,59 @@
 	type Props = { grade: string; lang?: string };
 	let { grade, lang = 'en' }: Props = $props();
 
-	let srcMap: Record<string, string> = $derived({
-		a: KP_ATTRIBUTE_IMG('nutriscore-a-new-' + lang + '.svg'),
-		b: KP_ATTRIBUTE_IMG('nutriscore-b-new-' + lang + '.svg'),
-		c: KP_ATTRIBUTE_IMG('nutriscore-c-new-' + lang + '.svg'),
-		d: KP_ATTRIBUTE_IMG('nutriscore-d-new-' + lang + '.svg'),
-		e: KP_ATTRIBUTE_IMG('nutriscore-e-new-' + lang + '.svg')
-	});
+	const NUTRI_MAP: Record<
+		string,
+		{ name: string; src: string; textColor: string; bgColor: string }
+	> = {
+		a: {
+			name: 'Good Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-a-new-${lang}.svg`),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		b: {
+			name: 'Good Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-b-new-${lang}.svg`),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		c: {
+			name: 'Average Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-c-new-${lang}.svg`),
+			textColor: 'text-yellow-800',
+			bgColor: 'bg-orange-100 hover:bg-orange-200'
+		},
+		d: {
+			name: 'Lower Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-d-new-${lang}.svg`),
+			textColor: 'text-red-700',
+			bgColor: 'bg-red-100 hover:bg-red-200'
+		},
+		e: {
+			name: 'Lower Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-e-new-${lang}.svg`),
+			textColor: 'text-red-700',
+			bgColor: 'bg-red-100 hover:bg-red-200'
+		},
+		unknown: {
+			name: 'Unknown Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-unknown-new-${lang}.svg`),
+			textColor: 'text-black',
+			bgColor: 'bg-gray-200 hover:bg-gray-300'
+		}
+	};
 
-	let srcUnknown = $derived(KP_ATTRIBUTE_IMG('nutriscore-unknown-new-' + lang + '.svg'));
-
-	let src = $derived(srcMap[grade.toLowerCase()] ?? srcUnknown);
+	let normalizedGrade = $derived(grade.toLowerCase());
+	let { name, src, textColor, bgColor } = $derived(NUTRI_MAP[normalizedGrade] ?? NUTRI_MAP.unknown);
 </script>
 
-<a href="#health_card">
-	<img alt="Nutri-Score" {src} class="transition-all duration-75 hover:brightness-90" />
+<a
+	href="#health_card"
+	class="{bgColor} flex w-1/3 items-center justify-evenly gap-2 rounded-lg p-2"
+>
+	<img alt="Nutri-Score" {src} class="h-16" />
+	<div class="flex flex-col">
+		<div class="text-xl {textColor} font-semibold">Nutri-Score {grade.toUpperCase()}</div>
+		<div class="text-sm text-black">{name}</div>
+	</div>
 </a>
diff --git a/src/routes/products/[barcode]/+page.svelte b/src/routes/products/[barcode]/+page.svelte
index b8edd0c27..bf1cb2f88 100644
--- a/src/routes/products/[barcode]/+page.svelte
+++ b/src/routes/products/[barcode]/+page.svelte
@@ -149,7 +149,7 @@
 	</div>
 </Card>
 
-<div class="flex w-full justify-evenly gap-4 p-3">
+<div class="flex max-h-32 w-full justify-between gap-3">
 	<NutriScore grade={product.nutriscore_grade} />
 	<Nova grade={product.nova_group} />
 	<a href="#environment_card">


Reviews:
user: login: VaiTon
body: Thank you for your PR. I've made some comments but good work!
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-16T16:41:33Z
user: login: Bhavishya2601
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T11:32:41Z
user: login: VaiTon
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-19T19:41:59Z
user: login: VaiTon
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-21T19:26:19Z

Review comments:
diff_hunk: @@ -2,17 +2,46 @@
 	import { KP_ATTRIBUTE_IMG } from '$lib/const';
 
 	const MAP: Record<string, string> = {
-		a: KP_ATTRIBUTE_IMG('green-score-b.svg'),
-		b: KP_ATTRIBUTE_IMG('green-score-c.svg'),
-		c: KP_ATTRIBUTE_IMG('green-score-d.svg'),
-		d: KP_ATTRIBUTE_IMG('green-score-e.svg'),
+		a: KP_ATTRIBUTE_IMG('green-score-a.svg'),
+		b: KP_ATTRIBUTE_IMG('green-score-b.svg'),
+		c: KP_ATTRIBUTE_IMG('green-score-c.svg'),
+		d: KP_ATTRIBUTE_IMG('green-score-d.svg'),
 		e: KP_ATTRIBUTE_IMG('green-score-unknown.svg')
 	};
 
 	let SRC_UNKNOWN = KP_ATTRIBUTE_IMG('green-score-unknown.svg');
 
 	let { grade }: { grade: string } = $props();
+	
 	let src = $derived(MAP[grade.toLowerCase()] ?? SRC_UNKNOWN);
+
+	let GreenScore = $derived({
path: src/lib/greenscore/GreenScore.svelte
user: login: VaiTon
body: I don't really like this syntax. Please make the dictionary a `const` and then use it inside the `$derive`
created_at: 2025-03-16T16:39:12Z
author_association: MEMBER
diff_hunk: @@ -2,17 +2,46 @@
 	import { KP_ATTRIBUTE_IMG } from '$lib/const';
 
 	const MAP: Record<string, string> = {
-		a: KP_ATTRIBUTE_IMG('green-score-b.svg'),
-		b: KP_ATTRIBUTE_IMG('green-score-c.svg'),
-		c: KP_ATTRIBUTE_IMG('green-score-d.svg'),
-		d: KP_ATTRIBUTE_IMG('green-score-e.svg'),
+		a: KP_ATTRIBUTE_IMG('green-score-a.svg'),
+		b: KP_ATTRIBUTE_IMG('green-score-b.svg'),
+		c: KP_ATTRIBUTE_IMG('green-score-c.svg'),
+		d: KP_ATTRIBUTE_IMG('green-score-d.svg'),
 		e: KP_ATTRIBUTE_IMG('green-score-unknown.svg')
 	};
 
 	let SRC_UNKNOWN = KP_ATTRIBUTE_IMG('green-score-unknown.svg');
 
 	let { grade }: { grade: string } = $props();
+	
 	let src = $derived(MAP[grade.toLowerCase()] ?? SRC_UNKNOWN);
+
+	let GreenScore = $derived({
+		a: 'Very low environmental impact',
+		b: 'low environmental impact',
+		c: 'Moderate environmental impact',
+		d: 'High environmental impact',
+	}[grade.toLowerCase()] ?? 'Unknown impact');
+	
+	let textColor = $derived({
+		a: 'text-green-700', 
+		b: 'text-green-700',
+		c: 'text-yellow-800',
+		d: 'text-orange-700',
+	}[grade.toLowerCase()] ?? 'text-black'); 
+
+	let bgColor = $derived({
+		a: 'bg-green-100 hover:bg-green-200', 
+		b: 'bg-green-100 hover:bg-green-200', 
+		c: 'bg-orange-100 hover:bg-orange-200',
+		d: 'bg-red-100 hover:bg-red-200',
+	}[grade.toLowerCase()] ?? 'bg-gray-200 hover:bg-gray-300'); 
+
 </script>
 
-<img alt="Green-Score" {src} class="transition-all duration-75 hover:brightness-90" />
+<a href={src} class="flex items-center h-full w-full p-4 gap-4 rounded-xl {bgColor} transition-all duration-75 hover:bg-opacity-90">
path: src/lib/greenscore/GreenScore.svelte
user: login: VaiTon
body: Are we sure we want the `href={src}` here? 
created_at: 2025-03-16T16:39:41Z
author_association: MEMBER
diff_hunk: @@ -2,17 +2,46 @@
 	import { KP_ATTRIBUTE_IMG } from '$lib/const';
 
 	const MAP: Record<string, string> = {
-		a: KP_ATTRIBUTE_IMG('green-score-b.svg'),
-		b: KP_ATTRIBUTE_IMG('green-score-c.svg'),
-		c: KP_ATTRIBUTE_IMG('green-score-d.svg'),
-		d: KP_ATTRIBUTE_IMG('green-score-e.svg'),
+		a: KP_ATTRIBUTE_IMG('green-score-a.svg'),
+		b: KP_ATTRIBUTE_IMG('green-score-b.svg'),
+		c: KP_ATTRIBUTE_IMG('green-score-c.svg'),
+		d: KP_ATTRIBUTE_IMG('green-score-d.svg'),
 		e: KP_ATTRIBUTE_IMG('green-score-unknown.svg')
 	};
 
 	let SRC_UNKNOWN = KP_ATTRIBUTE_IMG('green-score-unknown.svg');
 
 	let { grade }: { grade: string } = $props();
+	
 	let src = $derived(MAP[grade.toLowerCase()] ?? SRC_UNKNOWN);
+
+	let GreenScore = $derived({
path: src/lib/greenscore/GreenScore.svelte
user: login: VaiTon
body: Even better, create a single map for each element and then index two times

```js
const ABC_MAP = {
  a : {name: "...", src: "..."}
  ...
}
```
created_at: 2025-03-16T16:40:45Z
author_association: MEMBER
diff_hunk: @@ -2,17 +2,46 @@
 	import { KP_ATTRIBUTE_IMG } from '$lib/const';
 
 	const MAP: Record<string, string> = {
-		a: KP_ATTRIBUTE_IMG('green-score-b.svg'),
-		b: KP_ATTRIBUTE_IMG('green-score-c.svg'),
-		c: KP_ATTRIBUTE_IMG('green-score-d.svg'),
-		d: KP_ATTRIBUTE_IMG('green-score-e.svg'),
+		a: KP_ATTRIBUTE_IMG('green-score-a.svg'),
+		b: KP_ATTRIBUTE_IMG('green-score-b.svg'),
+		c: KP_ATTRIBUTE_IMG('green-score-c.svg'),
+		d: KP_ATTRIBUTE_IMG('green-score-d.svg'),
 		e: KP_ATTRIBUTE_IMG('green-score-unknown.svg')
 	};
 
 	let SRC_UNKNOWN = KP_ATTRIBUTE_IMG('green-score-unknown.svg');
 
 	let { grade }: { grade: string } = $props();
+	
 	let src = $derived(MAP[grade.toLowerCase()] ?? SRC_UNKNOWN);
+
+	let GreenScore = $derived({
+		a: 'Very low environmental impact',
+		b: 'low environmental impact',
+		c: 'Moderate environmental impact',
+		d: 'High environmental impact',
+	}[grade.toLowerCase()] ?? 'Unknown impact');
+	
+	let textColor = $derived({
+		a: 'text-green-700', 
+		b: 'text-green-700',
+		c: 'text-yellow-800',
+		d: 'text-orange-700',
+	}[grade.toLowerCase()] ?? 'text-black'); 
+
+	let bgColor = $derived({
+		a: 'bg-green-100 hover:bg-green-200', 
+		b: 'bg-green-100 hover:bg-green-200', 
+		c: 'bg-orange-100 hover:bg-orange-200',
+		d: 'bg-red-100 hover:bg-red-200',
+	}[grade.toLowerCase()] ?? 'bg-gray-200 hover:bg-gray-300'); 
+
 </script>
 
-<img alt="Green-Score" {src} class="transition-all duration-75 hover:brightness-90" />
+<a href={src} class="flex items-center h-full w-full p-4 gap-4 rounded-xl {bgColor} transition-all duration-75 hover:bg-opacity-90">
path: src/lib/greenscore/GreenScore.svelte
user: login: Bhavishya2601
body: it was like that beforehand only, but I'll change it now
created_at: 2025-03-17T11:32:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,18 +1,54 @@
 <script lang="ts">
 	import { KP_ATTRIBUTE_IMG } from '$lib/const';
 
-	const MAP: Record<string, string> = {
-		a: KP_ATTRIBUTE_IMG('green-score-b.svg'),
-		b: KP_ATTRIBUTE_IMG('green-score-c.svg'),
-		c: KP_ATTRIBUTE_IMG('green-score-d.svg'),
-		d: KP_ATTRIBUTE_IMG('green-score-e.svg'),
-		e: KP_ATTRIBUTE_IMG('green-score-unknown.svg')
+	const GRADE_MAP: Record<
+		string,
+		{ name: string; src: string; textColor: string; bgColor: string }
+	> = {
+		a: {
+			name: 'Very low environmental impact',
+			src: KP_ATTRIBUTE_IMG('green-score-a.svg'),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		b: {
+			name: 'Low environmental impact',
+			src: KP_ATTRIBUTE_IMG('green-score-b.svg'),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		c: {
+			name: 'Moderate environmental impact',
+			src: KP_ATTRIBUTE_IMG('green-score-c.svg'),
+			textColor: 'text-yellow-800',
+			bgColor: 'bg-orange-100 hover:bg-orange-200'
+		},
+		d: {
+			name: 'High environmental impact',
+			src: KP_ATTRIBUTE_IMG('green-score-d.svg'),
+			textColor: 'text-orange-700',
+			bgColor: 'bg-red-100 hover:bg-red-200'
+		},
+		unknown: {
+			name: 'Unknown impact',
+			src: KP_ATTRIBUTE_IMG('green-score-unknown.svg'),
+			textColor: 'text-black',
+			bgColor: 'bg-gray-200 hover:bg-gray-300'
+		}
 	};
 
-	let SRC_UNKNOWN = KP_ATTRIBUTE_IMG('green-score-unknown.svg');
-
 	let { grade }: { grade: string } = $props();
-	let src = $derived(MAP[grade.toLowerCase()] ?? SRC_UNKNOWN);
+	let normalizedGrade = grade.toLowerCase();
path: src/lib/greenscore/GreenScore.svelte
user: login: VaiTon
body: This property is not reactive. You should use `$derived`
created_at: 2025-03-19T19:40:37Z
author_association: MEMBER
diff_hunk: @@ -4,19 +4,59 @@
 	type Props = { grade: string; lang?: string };
 	let { grade, lang = 'en' }: Props = $props();
 
-	let srcMap: Record<string, string> = $derived({
-		a: KP_ATTRIBUTE_IMG('nutriscore-a-new-' + lang + '.svg'),
-		b: KP_ATTRIBUTE_IMG('nutriscore-b-new-' + lang + '.svg'),
-		c: KP_ATTRIBUTE_IMG('nutriscore-c-new-' + lang + '.svg'),
-		d: KP_ATTRIBUTE_IMG('nutriscore-d-new-' + lang + '.svg'),
-		e: KP_ATTRIBUTE_IMG('nutriscore-e-new-' + lang + '.svg')
-	});
+	const NUTRI_MAP: Record<
+		string,
+		{ name: string; src: string; textColor: string; bgColor: string }
+	> = {
+		a: {
+			name: 'Good Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-a-new-${lang}.svg`),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		b: {
+			name: 'Good Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-b-new-${lang}.svg`),
+			textColor: 'text-green-700',
+			bgColor: 'bg-green-100 hover:bg-green-200'
+		},
+		c: {
+			name: 'Average Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-c-new-${lang}.svg`),
+			textColor: 'text-yellow-800',
+			bgColor: 'bg-orange-100 hover:bg-orange-200'
+		},
+		d: {
+			name: 'Lower Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-d-new-${lang}.svg`),
+			textColor: 'text-red-700',
+			bgColor: 'bg-red-100 hover:bg-red-200'
+		},
+		e: {
+			name: 'Lower Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-e-new-${lang}.svg`),
+			textColor: 'text-red-700',
+			bgColor: 'bg-red-100 hover:bg-red-200'
+		},
+		unknown: {
+			name: 'Unknown Nutritional quality',
+			src: KP_ATTRIBUTE_IMG(`nutriscore-unknown-new-${lang}.svg`),
+			textColor: 'text-black',
+			bgColor: 'bg-gray-200 hover:bg-gray-300'
+		}
+	};
 
-	let srcUnknown = $derived(KP_ATTRIBUTE_IMG('nutriscore-unknown-new-' + lang + '.svg'));
-
-	let src = $derived(srcMap[grade.toLowerCase()] ?? srcUnknown);
+	let normalizedGrade = grade.toLowerCase();
path: src/lib/nutriscore/NutriScore.svelte
user: login: VaiTon
body: This is not reactive
created_at: 2025-03-19T19:41:30Z
author_association: MEMBER

PR comments:
user: login: vercel[bot]
created_at: 2025-03-14T18:33:48Z
body: @Bhavishya2601 is attempting to deploy a commit to the **openfoodfacts** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=openfoodfacts&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%220717cc805fa6992828d4a3b6d65129384514dcf4%22%7D%2C%22id%22%3A%22QmTN2HHw5vfPA4Mk9JYStGd3LGDCYBga8No4s8ZHDPzjv4%22%2C%22org%22%3A%22openfoodfacts%22%2C%22prId%22%3A289%2C%22repo%22%3A%22openfoodfacts-explorer%22%7D).


author_association: NONE
user: login: Bhavishya2601
created_at: 2025-03-20T13:33:02Z
body: @VaiTon Check out now
author_association: CONTRIBUTOR
user: login: vercel[bot]
created_at: 2025-03-21T19:26:33Z
body: [vc]: #yyjPiub2n0KylOuGflTHE+tIkcVN1nhl43zuiFMUhcM=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJvcGVuZm9vZGZhY3RzLWV4cGxvcmVyIiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL29wZW5mb29kZmFjdHMvb3BlbmZvb2RmYWN0cy1leHBsb3Jlci83cTREcDZZeG1ORXRGRVVyYlVTRjV1VGZ6bkdFIiwicHJldmlld1VybCI6Im9wZW5mb29kZmFjdHMtZXhwbG9yZXItZ2l0LWZvcmstYmhhdmlzaHlhMi03MThjMmMtb3BlbmZvb2RmYWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6Im9wZW5mb29kZmFjdHMtZXhwbG9yZXItZ2l0LWZvcmstYmhhdmlzaHlhMi03MThjMmMtb3BlbmZvb2RmYWN0cy52ZXJjZWwuYXBwIn19XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **openfoodfacts-explorer** | ✅ Ready ([Inspect](https://vercel.com/openfoodfacts/openfoodfacts-explorer/7q4Dp6YxmNEtFEUrbUSF5uTfznGE)) | [Visit Preview](https://openfoodfacts-explorer-git-fork-bhavishya2-718c2c-openfoodfacts.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/openfoodfacts-explorer-git-fork-bhavishya2-718c2c-openfoodfacts.vercel.app?via=pr-comment-feedback-link) | Mar 22, 2025 1:20am |


author_association: NONE
user: login: VaiTon
created_at: 2025-03-21T19:26:50Z
body: Please make sure to always run `pnpm format` before committing and thanks! 
author_association: MEMBER
user: login: Bhavishya2601
created_at: 2025-03-21T20:25:54Z
body: @VaiTon done
author_association: CONTRIBUTOR
user: login: VaiTon
created_at: 2025-03-22T01:21:03Z
body: Thank you! :rocket: 
author_association: MEMBER