wip: fixed issues with i18n fallbacking for value-type objects/arrays, removed i18n integration and replaced with proprietary implementation again

apps/vdn-static/src/pages/discord/rules.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import DiscordRuleOverview from "@/components/molecules/DiscordRuleOverview.vue";
 import DiscordRuleSection from "@/components/molecules/DiscordRuleSection.vue";
-import { useI18n } from "@/i18n";
+import { useLocale } from "@/i18n";
 import { computed } from "vue";
 
-const i18n = useI18n();
+const locale = useLocale();
 
-const pageI18n = computed(() => i18n.v("discord.rulesPage"));
+const pageI18n = computed(() => locale.value.discord.rulesPage);
 const rules = computed(() => pageI18n.value.rules);
 
 const RULE_ORDER = [
@@ -18,31 +18,6 @@ const RULE_ORDER = [
 	"respectStaff",
 	"controversialTopics",
 ] as const satisfies (keyof typeof pageI18n.value.rules)[];
-
-function unwrapProxy<T extends object>(
-	value: T,
-	maxDepth: number,
-	depth: number = 0,
-): T {
-	if (depth > maxDepth) {
-		return value;
-	}
-
-	const entries = Object.entries(value);
-	const unwrappedEntries = entries.map(
-		([key, value]) =>
-			[
-				key,
-				value !== null && typeof value === "object" ?
-					unwrapProxy(value, maxDepth, depth + 1)
-				:	value,
-			] as const,
-	);
-
-	return Object.fromEntries(unwrappedEntries) as T;
-}
-
-console.log(unwrapProxy(rules.value, 5));
 </script>
 
 <template>

apps/vdn-static/src/pages/index.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import HomeSectionWrapper from "@/components/molecules/HomeSectionWrapper.vue";
-import { useI18n } from "@/i18n";
+import { useLocale } from "@/i18n";
 import { GREETINGS, type Greeting } from "@/i18n/greeting";
 import type { Locale } from "@/i18n/locale";
 import { VILANTIC_ID_TO_FLAG } from "@/i18n/vilantic";
 import { randomElement } from "@/utils/random";
 import { computed } from "vue";
 
-const i18n = useI18n();
+const locale = useLocale();
 
 const greeting: Greeting = randomElement(GREETINGS);
 
@@ -18,7 +18,7 @@ const SECTION_ORDER = [
 ] as const satisfies (keyof Locale["home"]["sections"])[];
 
 const sections = computed(() =>
-	SECTION_ORDER.map((id) => i18n.v(`home.sections.${id}`)),
+	SECTION_ORDER.map((id) => locale.value.home.sections[id]),
 );
 </script>
 
@@ -35,7 +35,7 @@ const sections = computed(() =>
 				<div
 					class="subtitle is-size-6 is-flex is-flex-direction-row is-align-items-center is-gap-1 has-text-text-bold">
 					&mdash; {{ greeting.author }} ({{
-						i18n.v("vilanticLangs")[greeting.lang]
+						locale.vilanticLangs[greeting.lang]
 					}})
 					<figure class="image is-32x32">
 						<img :src="VILANTIC_ID_TO_FLAG[greeting.lang]" />

apps/vdn-static/src/pages/kotoba.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { useI18n } from "@/i18n";
+import { useLocale } from "@/i18n";
 
-const i18n = useI18n();
+const locale = useLocale();
 </script>
 
 <template>
 	<div>
 		<section class="section">
-			<h1 class="title">{{ i18n.t("kotoba.title") }}</h1>
+			<h1 class="title">{{ locale.kotoba.title }}</h1>
 		</section>
 
 		<section class="section container">
 			<div class="notification is-info block">
-				<p>{{ i18n.t("kotoba.searchHelp") }}</p>
+				<p>{{ locale.kotoba.searchHelp }}</p>
 			</div>
 
 			<div class="block is-flex is-flex-direction-row is-gap-2">

apps/vdn-static/src/pages/resources.vue

@@ -2,14 +2,14 @@
 import LearningResourceWrapper, {
 	type ResourceButton,
 } from "@/components/molecules/LearningResourceWrapper.vue";
-import { useI18n } from "@/i18n";
+import { useLocale, type CompileLocale } from "@/i18n";
 import type { Locale } from "@/i18n/locale";
 import { ignore } from "@/utils/ignore";
 import { computed } from "vue";
 
-const i18n = useI18n();
+const locale = useLocale();
 
-const resourceIdToResource = computed(() => i18n.v("resources.resources"));
+const resourceIdToResource = computed(() => locale.value.resources.resources);
 
 const RESOURCE_ORDER = [
 	"discord",
@@ -20,7 +20,7 @@ const resources = computed(() =>
 );
 
 const computeButtons = (
-	id: keyof Locale["resources"]["resources"],
+	id: keyof CompileLocale<Locale>["resources"]["resources"],
 ): ResourceButton[] => {
 	// will warn us if a new variant is added that isn't handled, and so we should add a switch
 	// once we have a switch statement, this won't be needed as that will check for exhaustiveness
@@ -53,7 +53,7 @@ const computeButtons = (
 <template>
 	<div>
 		<section class="section">
-			<h1 class="title">{{ i18n.t("resources.title") }}</h1>
+			<h1 class="title">{{ locale.resources.title }}</h1>
 		</section>
 
 		<section class="section container">