From 6e1d79acceadfe782db2794cd412d6b9bbc8ef3d Mon Sep 17 00:00:00 2001
From: Jan <jplacht@gmail.com>
Date: Wed, 6 May 2026 10:52:00 +0200
Subject: [PATCH] improve(i18n): help view localizations

---
 src/features/help/components/HelpTutorial.vue | 199 +++++++++---------
 src/locales/en_US/help.json                   |  75 +++++++
 src/views/HelpView.vue                        |  14 +-
 3 files changed, 187 insertions(+), 101 deletions(-)
 create mode 100644 src/locales/en_US/help.json

diff --git a/src/features/help/components/HelpTutorial.vue b/src/features/help/components/HelpTutorial.vue
index 0e7d2e91..9d730f1e 100644
--- a/src/features/help/components/HelpTutorial.vue
+++ b/src/features/help/components/HelpTutorial.vue
@@ -3,75 +3,88 @@
 <template>
 	<div class="flex flex-col gap-y-6">
 		<section class="bg-white/10 p-3 rounded">
-			PRUNplanner helps you design bases, organize empires, and calculate
-			profits — without wasting in-game resources. It mirrors nearly every
-			aspect of
-			<span class="italic">Prosperous Universe</span> so you can plan
-			smarter and play more confidently.
+			{{ $t("help.tutorial.intro") }}
 		</section>
 
 		<section>
 			<div
 				class="grid grid-cols-1 xl:grid-cols-[60%_auto] gap-3 gap-x-10">
 				<div>
-					<h2 class="text-lg font-bold mb-3">Getting Started</h2>
+					<h2 class="text-lg font-bold mb-3">
+						{{ $t("help.getting_started.title") }}
+					</h2>
 					<ol class="list-decimal space-y-2 pl-4">
 						<li>
 							<strong>
-								Create an Empire in
-								<router-link
-									to="/manage"
-									class="text-link-primary">
-									Management</router-link
-								>:</strong
-							>
-							By default, you'll already have one. But you can add
-							more for different factions or regions. Assign a
-							name and faction, and save.
+								<i18n-t
+									keypath="help.getting_started.l1.title"
+									tag="span">
+									<template #link>
+										<router-link
+											to="/manage"
+											class="text-link-primary">
+											{{
+												$t(
+													"help.getting_started.l1.link"
+												)
+											}}</router-link
+										>
+									</template>
+								</i18n-t>
+							</strong>
+							{{ $t("help.getting_started.l1.p") }}
 						</li>
 						<li>
 							<strong>
-								Set up an
-								<router-link
-									to="/exchanges"
-									class="text-link-primary">
-									Exchange</router-link
-								>:</strong
-							>
-							Go into Management and create your exchange. Switch
-							to the Exchanges view to modify it. For most
-							players, set it to
-							<em>Both</em> (buying and selling) and choose the
-							exchange your bases will use (e.g., CI1 for Benten).
-							Save it.
+								<i18n-t
+									keypath="help.getting_started.l2.title"
+									tag="span">
+									<template #link>
+										<router-link
+											to="/manage"
+											class="text-link-primary">
+											{{
+												$t(
+													"help.getting_started.l2.link"
+												)
+											}}</router-link
+										>
+									</template>
+								</i18n-t>
+							</strong>
+							{{ $t("help.getting_started.l2.p") }}
 						</li>
 						<li>
 							<strong>
-								Search for a
-								<router-link
-									to="/search"
-									class="text-link-primary">
-									Planet</router-link
-								>:</strong
-							>
-							Use the planet search to filter by resources,
-							programs, or proximity to a CX. Select your target
-							planet and view its modifiers, extraction rates, and
-							infrastructure.
+								<i18n-t
+									keypath="help.getting_started.l3.title"
+									tag="span">
+									<template #link>
+										<router-link
+											to="/manage"
+											class="text-link-primary">
+											{{
+												$t(
+													"help.getting_started.l3.link"
+												)
+											}}</router-link
+										>
+									</template>
+								</i18n-t>
+							</strong>
+							{{ $t("help.getting_started.l3.p") }}
 						</li>
 						<li>
-							<strong>Create a Plan:</strong>
-							Choose your Empire, give it a name, then add
-							buildings. For example: add a Refinery, set a
-							production order, and save the plan. You can modify
-							all aspects like COGC, expert bonuses and dive into
-							optimizations.
+							<strong>
+								{{ $t("help.getting_started.l4.title") }}
+							</strong>
+							{{ $t("help.getting_started.l4.p") }}
 						</li>
 						<li>
-							<strong>Check ROI:</strong>
-							Once set up, you'll see daily profits, inputs and
-							outputs, and return on investment for each
-							production line. Adjust, experiment, and optimize.
+							<strong>
+								{{ $t("help.getting_started.l5.title") }}
+							</strong>
+							{{ $t("help.getting_started.l5.p") }}
 						</li>
 					</ol>
 				</div>
@@ -81,7 +94,9 @@
 							src="/images/help/management-screenshot.png"
 							alt="Management Screenshot"
 							class="rounded shadow-lg border border-white/10" />
-						<span class="text-xs text-white/60">Management</span>
+						<span class="text-xs text-white/60">
+							{{ $t("help.getting_started.image_label") }}
+						</span>
 					</div>
 				</div>
 			</div>
@@ -91,90 +106,80 @@
 			<div class="grid grid-cols-1 xl:grid-cols-[30%_auto] gap-3 gap-x-6">
 				<div>
 					<div class="bg-white/10 rounded p-3">
-						<h2 class="text-lg font-bold mb-3">Core Concepts</h2>
+						<h2 class="text-lg font-bold mb-3">
+							{{ $t("help.core_concepts.title") }}
+						</h2>
 						<div class="space-y-6">
 							<div>
-								<h3 class="text-lg mb-1">Plans</h3>
+								<h3 class="text-lg mb-1">
+									{{ $t("help.core_concepts.p1.title") }}
+								</h3>
 								<p class="text-white/80">
-									A plan represents a single base: its
-									buildings, productions, and bonuses. Create
-									a plan by choosing a planet, placing
-									buildings, and assigning it to an Empire
-									with a CX preference.
+									{{ $t("help.core_concepts.p1.p") }}
 								</p>
 							</div>
 							<div>
-								<h3 class="text-lg mb-1">Empires</h3>
+								<h3 class="text-lg mb-1">
+									{{ $t("help.core_concepts.p2.title") }}
+								</h3>
 								<p class="text-white/80">
-									An Empire is a container of multiple plans —
-									essentially your entire network of bases.
-									Empires keep your supply chains organized
-									and allow you to manage multiple bases
-									together.
+									{{ $t("help.core_concepts.p2.p") }}
 								</p>
 							</div>
 							<div>
-								<h3 class="text-lg mb-1">Exchanges</h3>
+								<h3 class="text-lg mb-1">
+									{{ $t("help.core_concepts.p3.title") }}
+								</h3>
 								<p class="text-white/80">
-									Exchange settings define how prices are
-									calculated. Each Empire uses one Exchange
-									for consistency. You can reuse the same
-									Exchange setup across empires if needed.
+									{{ $t("help.core_concepts.p3.p") }}
 								</p>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="p-3">
-					<h2 class="text-lg font-bold mb-3">Key Features</h2>
+					<h2 class="text-lg font-bold mb-3">
+						{{ $t("help.key_features.title") }}
+					</h2>
 					<div class="space-y-6">
 						<div>
-							<h3 class="text-lg">Base Simulation</h3>
+							<h3 class="text-lg">
+								{{ $t("help.key_features.p1.title") }}
+							</h3>
 							<p class="text-white/80">
-								Design and test bases without spending
-								resources. From habitation to production to
-								planet-specific modifiers and bonuses —
-								PRUNplanner simulates it all.
+								{{ $t("help.key_features.p1.p") }}
 							</p>
 						</div>
 						<div>
-							<h3 class="text-lg">Empire Planning</h3>
+							<h3 class="text-lg">
+								{{ $t("help.key_features.p2.title") }}
+							</h3>
 							<p class="text-white/80">
-								Manage your empire across multiple bases and
-								supply chains. Keep your materials flowing,
-								prevent bottlenecks, and run smoothly at scale.
-								Always see what is going on and where the next
-								best expansion starts.
+								{{ $t("help.key_features.p2.p") }}
 							</p>
 						</div>
 						<div>
-							<h3 class="text-lg">Game Data</h3>
+							<h3 class="text-lg">
+								{{ $t("help.key_features.p3.title") }}
+							</h3>
 							<p class="text-white/80">
-								Market information is integrated directly from
-								FIO, the community API. Plan expansions, check
-								ROI, and make informed trade decisions. Explore
-								historic market data or let PRUNplanner
-								calculate production or resource extraction
-								ROIs.
+								{{ $t("help.key_features.p3.p") }}
 							</p>
 						</div>
 						<div>
-							<h3 class="text-lg">Burn & Repair</h3>
+							<h3 class="text-lg">
+								{{ $t("help.key_features.p4.title") }}
+							</h3>
 							<p class="text-white/80">
-								Track consumables and building wear. Avoid
-								shortages and downtime by seeing exactly what
-								your colony needs and when it needs it.
+								{{ $t("help.key_features.p4.p") }}
 							</p>
 						</div>
 						<div>
 							<h3 class="text-lg">
-								A Wealth of Additional Tools
+								{{ $t("help.key_features.p5.title") }}
 							</h3>
 							<p class="text-white/80">
-								Dive into historical prices, optimize habitation
-								layouts, estimate visitation frequencies, and
-								fine-tune production efficiency. PRUNplanner is
-								packed with utilities to give you the edge.
+								{{ $t("help.key_features.p5.p") }}
 							</p>
 						</div>
 					</div>
diff --git a/src/locales/en_US/help.json b/src/locales/en_US/help.json
new file mode 100644
index 00000000..5fb192c2
--- /dev/null
+++ b/src/locales/en_US/help.json
@@ -0,0 +1,75 @@
+{
+	"view_title": "Help",
+	"title": "Help & Changelog",
+	"changelog": {
+		"title": "Changelog"
+	},
+	"tutorial": {
+		"intro": "PRUNplanner helps you design bases, organize empires, and calculate profits — without wasting in-game resources. It mirrors nearly every aspect of Prosperous Universe so you can plan smarter and play more confidently."
+	},
+	"getting_started": {
+		"title": "Getting Started",
+		"image_label": "Management",
+		"l1": {
+			"title": "Create an Empire in {link}:",
+			"link": "Management",
+			"p": "By default, you'll already have one. But you can add more for different factions or regions. Assign a name and faction, and save."
+		},
+		"l2": {
+			"title": "Setup an {link}:",
+			"link": "Exchange",
+			"p": "Go into Management and create your exchange. Switch to the Exchanges view to modify it. For most players, set it to Both (buying and selling) and choose the exchange your bases will use (e.g., CI1 for Benten). Save it."
+		},
+		"l3": {
+			"title": "Search for a {link}:",
+			"link": "Planet",
+			"p": "Use the planet search to filter by resources, programs, or proximity to a CX. Select your target planet and view its modifiers, extraction rates, and infrastructure."
+		},
+		"l4": {
+			"title": "Create a Plan:",
+			"p": "Choose your Empire, give it a name, then add buildings. For example: add a Refinery, set a production order, and save the plan. You can modify all aspects like COGC, expert bonuses and dive into optimizations."
+		},
+		"l5": {
+			"title": "Check ROI:",
+			"p": "Once set up, you'll see daily profits, inputs and outputs, and return on investment for each production line. Adjust, experiment, and optimize."
+		}
+	},
+	"core_concepts": {
+		"title": "Core Concepts",
+		"p1": {
+			"title": "Plans",
+			"p": "A plan represents a single base: its buildings, productions, and bonuses. Create a plan by choosing a planet, placing buildings, and assigning it to an Empire with a CX preference."
+		},
+		"p2": {
+			"title": "Empires",
+			"p": "An Empire is a container of multiple plans - essentially your entire network of bases. Empires keep your supply chains organized and allow you to manage multiple bases together."
+		},
+		"p3": {
+			"title": "Exchanges",
+			"p": "Exchange settings define how prices are calculated. Each Empire uses one Exchange for consistency. You can reuse the same Exchange setup across empires if needed."
+		}
+	},
+	"key_features": {
+		"title": "Key Features",
+		"p1": {
+			"title": "Base Simulation",
+			"p": "Design and test bases without spending resources. From habitation to production to planet-specific modifiers and bonuses — PRUNplanner simulates it all."
+		},
+		"p2": {
+			"title": "Empire Planning",
+			"p": "Manage your empire across multiple bases and supply chains. Keep your materials flowing, prevent bottlenecks, and run smoothly at scale. Always see what is going on and where the next best expansion starts."
+		},
+		"p3": {
+			"title": "Game Data",
+			"p": "Market information is integrated directly from FIO, the community API. Plan expansions, check ROI, and make informed trade decisions. Explore historic market data or let PRUNplanner calculate production or resource extraction ROIs."
+		},
+		"p4": {
+			"title": "Burn & Repair",
+			"p": "Track consumables and building wear. Avoid shortages and downtime by seeing exactly what your colony needs and when it needs it."
+		},
+		"p5": {
+			"title": "A Wealth of Additional Tools",
+			"p": "Dive into historical prices, optimize habitation layouts, estimate visitation frequencies, and fine-tune production efficiency. PRUNplanner is packed with utilities to give you the edge."
+		}
+	}
+}
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index 1d165f36..5761637a 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 	import { onMounted, Ref, ref } from "vue";
-	import { useHead } from "@unhead/vue";
 
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
+	// Unhead
+	import { useHead } from "@unhead/vue";
 	useHead({
-		title: "Help | PRUNplanner",
+		title: `${t("help.view_title")} | PRUNplanner`,
 	});
 
 	import HelpTutorial from "@/features/help/components/HelpTutorial.vue";
@@ -32,7 +36,7 @@
 	<div class="min-h-screen flex flex-col">
 		<div
 			class="px-6 py-3 border-b border-white/10 flex flex-row justify-between">
-			<h1 class="text-2xl font-bold my-auto">Help & Changelog</h1>
+			<h1 class="text-2xl font-bold my-auto">{{ $t("help.title") }}</h1>
 		</div>
 
 		<div
@@ -41,7 +45,9 @@
 				<HelpTutorial />
 			</div>
 			<div>
-				<h2 class="text-xl font-bold pb-3">Changelog</h2>
+				<h2 class="text-xl font-bold pb-3">
+					{{ $t("help.changelog.title") }}
+				</h2>
 				<div
 					v-if="markdownContent != ''"
 					id="markdown"