feat: Display country flags next to manga chapter titles based on their language.

package-lock.json

@@ -28,6 +28,7 @@
 				"next-themes": "^0.4.6",
 				"orval": "^7.13.2",
 				"react": "^19.1.1",
+				"react-country-flag": "^3.1.0",
 				"react-dom": "^19.1.1",
 				"react-hook-form": "^7.65.0",
 				"react-router": "^7.9.5",
@@ -7175,6 +7176,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-country-flag": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
+			"integrity": "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"peerDependencies": {
+				"react": ">=16"
+			}
+		},
 		"node_modules/react-dom": {
 			"version": "19.2.0",
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",

package.json

@@ -30,6 +30,7 @@
 		"next-themes": "^0.4.6",
 		"orval": "^7.13.2",
 		"react": "^19.1.1",
+		"react-country-flag": "^3.1.0",
 		"react-dom": "^19.1.1",
 		"react-hook-form": "^7.65.0",
 		"react-router": "^7.9.5",

src/features/manga/MangaChapter.tsx

@@ -8,6 +8,7 @@ import {
 	useFetchChapter,
 } from "@/api/generated/manga-chapter/manga-chapter.ts";
 import { Button } from "@/components/ui/button";
+import ReactCountryFlag from "react-country-flag";
 
 interface MangaChapterProps {
 	mangaId: number;
@@ -79,9 +80,8 @@ export const MangaChapter = ({
 							>
 								<div className="flex items-center gap-3">
 									<div
-										className={`flex h-8 w-8 items-center justify-center rounded-full ${
-											chapter.isRead ? "bg-primary/20" : "bg-muted"
-										}`}
+										className={`flex h-8 w-8 items-center justify-center rounded-full ${chapter.isRead ? "bg-primary/20" : "bg-muted"
+											}`}
 									>
 										{chapter.isRead ? (
 											<Check className="h-4 w-4 text-primary" />
@@ -92,7 +92,18 @@ export const MangaChapter = ({
 										)}
 									</div>
 									<div>
-										<p className="text-sm font-medium text-foreground">
+										<p className="text-sm font-medium text-foreground flex items-center gap-2">
+											{chapter.language?.code && (
+												<ReactCountryFlag
+													countryCode={chapter.language.code.split("-")[1]}
+													svg
+													style={{
+														width: "1.2em",
+														height: "1.2em",
+													}}
+													title={chapter.language.name}
+												/>
+											)}
 											{chapter.title}
 										</p>
 										{chapter.downloaded && (