chore: update translations example

Author: lukepolo

src/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { Sparkles, User } from "lucide-vue-next";
+import en from "./locales/en.json";
+import de_DE from "./locales/de_DE.json";
 import "./style.css";
 
 // The panel injects the authenticated 5stack user here. It is null for guests
@@ -11,8 +13,49 @@ import "./style.css";
 const props = defineProps<{
   user?: { steam_id: string; name: string; role: string } | null;
   query?: Record<string, unknown>;
+  // Capabilities the host OWNS and therefore hands down. You cannot import
+  // these: a plugin is a separate module graph, and both `useToast` and
+  // vue-i18n keep their state in module scope — an imported copy would be a
+  // second, empty instance whose toasts nothing renders and whose translator
+  // knows no messages. It fails silently, which is the worst way to fail.
+  // See /plugins/translations.
+  notify?: (message: string, kind: "error" | "success") => void;
+  t?: (key: string, named?: Record<string, unknown>) => string;
+  locale?: string;
 }>();
 
+// ---- translations -----------------------------------------------------------
+// Your own catalogue first, the panel second, a literal English fallback last.
+// Ship whatever languages you have; anything missing falls through to your
+// English, so a plugin with only en.json still works everywhere — it is just
+// untranslated, which beats a screen full of dotted keys.
+const CATALOGUES: Record<string, Record<string, unknown>> = { en, de_DE };
+
+function lookup(catalogue: Record<string, unknown>, key: string) {
+  return key.split(".").reduce<unknown>((o, k) => (o as never)?.[k], catalogue);
+}
+
+function tr(key: string, fallback: string, named?: Record<string, unknown>) {
+  // Read locale so computeds using tr() re-run on a language switch — `t` is a
+  // stable reference and would not invalidate them by itself.
+  const lang = props.locale ?? "en";
+  const mine = lookup(CATALOGUES[lang] ?? {}, key) ?? lookup(CATALOGUES.en, key);
+  if (typeof mine === "string") {
+    return mine.replace(/\{(\w+)\}/g, (_, k) => String(named?.[k] ?? `{${k}}`));
+  }
+  // vue-i18n returns the KEY when a message is missing, so treat that as a miss
+  // — otherwise "hello.title" ships to production looking like a bug.
+  const host = props.t?.(key, named);
+  return !host || host === key ? fallback : host;
+}
+
+// The panel's toast when embedded; a console line when running standalone.
+function sayHi() {
+  const message = tr("hello.toast_hi", "Hello from the plugin.");
+  if (props.notify) props.notify(message, "success");
+  else console.log(message);
+}
+
 // Because the manifest sets "profileTabLabel", this same component is ALSO
 // mounted as a tab on /players/:steamid. Two query keys tell us we are there.
 
@@ -65,14 +108,28 @@ const embed = computed(() => props.query?.embed === "1");
     >
       <Sparkles class="h-10 w-10 text-primary" />
       <h1 class="text-3xl font-bold tracking-tight text-foreground">
-        Hello from a 5stack plugin
+        {{ tr("hello.title", "Hello from a 5stack plugin") }}
       </h1>
       <p class="text-muted-foreground">
         <template v-if="user">
-          Signed in as {{ user.name }} ({{ user.role }})
+          {{
+            tr("hello.signed_in", `Signed in as ${user.name} (${user.role})`, {
+              name: user.name,
+              role: user.role,
+            })
+          }}
+        </template>
+        <template v-else>
+          {{ tr("hello.not_signed_in", "Not signed in") }}
         </template>
-        <template v-else>Not signed in</template>
       </p>
+      <!-- The panel's own toast, reached through the `notify` prop. -->
+      <button
+        class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground"
+        @click="sayHi()"
+      >
+        Toast me
+      </button>
       <p class="max-w-md text-sm text-muted-foreground">
         This whole page is a Module Federation remote rendered natively inside
         the 5stack panel — same nav, theme, and login.

src/locales/de_DE.json

@@ -0,0 +1,8 @@
+{
+  "hello": {
+    "title": "Hallo von einem 5stack-Plugin",
+    "signed_in": "Angemeldet als {name} ({role})",
+    "not_signed_in": "Nicht angemeldet",
+    "toast_hi": "Hallo vom Plugin — das ist der Toast des Panels."
+  }
+}

src/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "hello": {
+    "title": "Hello from a 5stack plugin",
+    "signed_in": "Signed in as {name} ({role})",
+    "not_signed_in": "Not signed in",
+    "toast_hi": "Hello from the plugin — this is the panel's own toast."
+  }
+}