feat: add localization for analytics widget and analytics modal

2026-08-06 12:06:44 +02:00 · 2026-08-06 12:06:44 +02:00 · ad4d4b4387
commit ad4d4b4387
parent ea2defe0f0
4 changed files with 92 additions and 32 deletions
--- a/src/components/AnalyticsModal.tsx
+++ b/src/components/AnalyticsModal.tsx
@ -2,6 +2,7 @@

 import { useEffect } from "react";
 import { createPortal } from "react-dom";
+import { useTranslations } from "next-intl";

 /**
 * Analytics metrics payload returned by the custom backend API
@ -24,20 +25,6 @@ interface AnalyticsModalProps {
  stats: AnalyticsData;
 }

-/**
- * Formats unix timestamps into relative time strings (e.g., "5s ago", "2m ago")
- */
-function getTimeAgo(timestamp?: number): string {
-  if (!timestamp) return "just now";
-  const seconds = Math.floor((Date.now() - timestamp * 1000) / 1000);
-  if (seconds < 10) return "just now";
-  if (seconds < 60) return `${seconds}s ago`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  return `${hours}h ago`;
-}
-
 /**
 * Terminal-style modal inspector for viewing live traffic and system health metric
 */
@ -46,6 +33,22 @@ export default function AnalyticsModal({
  onClose,
  stats,
 }: AnalyticsModalProps) {
+  const tAnalyticsModal = useTranslations("AnalyticsModal");
+
+  /**
+   * Formats unix timestamps into relative time strings based on locale
+   */
+  const getTimeAgo = (timestamp?: number): string => {
+    if (!timestamp) return tAnalyticsModal("timeJustNow");
+    const seconds = Math.floor((Date.now() - timestamp * 1000) / 1000);
+    if (seconds < 10) return tAnalyticsModal("timeJustNow");
+    if (seconds < 60) return tAnalyticsModal("timeSecondsAgo", { seconds });
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return tAnalyticsModal("timeMinutesAgo", { minutes });
+    const hours = Math.floor(minutes / 60);
+    return tAnalyticsModal("timeHoursAgo", { hours });
+  };
+
  // Global hotkeys to dismiss the modal (ESC)
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
@ -86,16 +89,16 @@ export default function AnalyticsModal({
              <button
                onClick={onClose}
                className="w-2.5 h-2.5 rounded-full bg-rose-500/80 hover:bg-rose-500 transition-colors cursor-pointer"
-                title="Close window"
+                title={tAnalyticsModal("tooltipClose")}
              />
              <button
                onClick={onClose}
                className="w-2.5 h-2.5 rounded-full bg-amber-500/80 hover:bg-amber-500 transition-colors cursor-pointer"
-                title="Minimize window"
+                title={tAnalyticsModal("tooltipMinimize")}
              />
              <span
                className="w-2.5 h-2.5 rounded-full bg-emerald-500/80 hover:bg-emerald-500 transition-colors cursor-default"
-                title="Active Process"
+                title={tAnalyticsModal("tooltipActive")}
              />
            </div>

@ -112,7 +115,7 @@ export default function AnalyticsModal({
          <button
            onClick={onClose}
            className="text-slate-500 hover:text-rose-400 transition-colors font-mono text-[11px] px-1.5 py-0.5 rounded hover:bg-rose-500/10 border border-transparent hover:border-rose-500/20 cursor-pointer"
-            title="Close modal (Esc)"
+            title={tAnalyticsModal("tooltipEsc")}
          >
            [esc ✕]
          </button>
@ -126,10 +129,10 @@ export default function AnalyticsModal({
          </div>
          <div className="text-[10px] text-slate-500 mt-1 flex items-center gap-2">
            <span className="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
-            <span>STATUS: ONLINE</span>
+            <span>{tAnalyticsModal("statusOnline")}</span>
            <span className="text-slate-700">•</span>
            <span className="text-slate-500">
-              LATENCY:{" "}
+              {tAnalyticsModal("latency")}:{" "}
              <span className="text-slate-300">
                {stats.latencyMs ?? "<1"}ms
              </span>
@ -141,7 +144,7 @@ export default function AnalyticsModal({
        <div className="grid grid-cols-2 gap-3 mb-4 relative z-10">
          <div className="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800/80 hover:border-slate-700/80 transition-colors">
            <div className="flex justify-between items-center text-[10px] text-slate-500 mb-1">
-              <span>views_today</span>
+              <span>{tAnalyticsModal("metricViewsToday")}</span>
              <span className="text-blue-400/80">#1</span>
            </div>
            <div className="text-2xl font-bold text-blue-400 tracking-tight">
@ -151,7 +154,7 @@ export default function AnalyticsModal({

          <div className="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800/80 hover:border-slate-700/80 transition-colors">
            <div className="flex justify-between items-center text-[10px] text-slate-500 mb-1">
-              <span>unique_visitors</span>
+              <span>{tAnalyticsModal("metricUniqueVisitors")}</span>
              <span className="text-emerald-400/80">#2</span>
            </div>
            <div className="text-2xl font-bold text-emerald-400 tracking-tight">
@ -163,7 +166,9 @@ export default function AnalyticsModal({
        {/* Total Hits & Device Breakdown */}
        <div className="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800/80 space-y-3 relative z-10">
          <div className="flex justify-between items-center text-xs">
-            <span className="text-slate-400">total_hits:</span>
+            <span className="text-slate-400">
+              {tAnalyticsModal("metricTotalHits")}:
+            </span>
            <span className="font-bold text-slate-100 bg-slate-900 px-2 py-0.5 rounded border border-slate-800">
              {stats.totalViews}
            </span>
@ -172,7 +177,9 @@ export default function AnalyticsModal({
          {/* Device ratio progress bar */}
          <div className="pt-2 border-t border-slate-800/80 space-y-1.5">
            <div className="flex justify-between text-[11px]">
-              <span className="text-slate-500">device_ratio:</span>
+              <span className="text-slate-500">
+                {tAnalyticsModal("metricDeviceRatio")}:
+              </span>
              <span className="text-slate-300 font-medium">
                💻 {desktopCount} <span className="text-slate-600">/</span> 📱{" "}
                {mobileCount}
@ -196,9 +203,9 @@ export default function AnalyticsModal({

        {/* GDPR & Activity Footer */}
        <div className="mt-4 text-[10px] text-slate-600 flex justify-between items-center relative z-10 pt-2 border-t border-slate-800/40">
-          <span>GDPR_ANONYMIZED: TRUE</span>
+          <span>{tAnalyticsModal("gdprAnonymized")}</span>
          <span className="text-slate-400 font-medium">
-            LAST_PING:{" "}
+            {tAnalyticsModal("lastPing")}:{" "}
            <span className="text-slate-300">{getTimeAgo(stats.lastPing)}</span>
          </span>
        </div>
--- a/src/components/AnalyticsWidget.tsx
+++ b/src/components/AnalyticsWidget.tsx
@ -1,12 +1,15 @@
 "use client";

 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 import AnalyticsModal, { AnalyticsData } from "./AnalyticsModal";

 /**
 * Footer badge widget that fetches live metrics and triggers the analytics modal
 */
 export default function AnalyticsWidget() {
+  const tAnalyticsWidget = useTranslations("AnalyticsWidget");
+
  const [stats, setStats] = useState<AnalyticsData | null>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [mounted, setMounted] = useState(false);
@ -26,14 +29,14 @@ export default function AnalyticsWidget() {

  // Open modal and silently refresh stats without incrementing view count
  const handleOpenModal = () => {
-    fetchStats(false); // track=false when clicking badge
+    fetchStats(false);
    setIsOpen(true);
  };

  // Hydrate client, fetch initial page metrics, and listen for custom Cmd+K palette events
  useEffect(() => {
    setMounted(true);
-    fetchStats(true); // Track initial page view
+    fetchStats(true);

    // Listen for custom trigger event fired from CommandPalette
    const handleCustomOpen = () => handleOpenModal();
@ -50,7 +53,9 @@ export default function AnalyticsWidget() {
      <div className="h-7 w-52 font-mono text-[11px] text-slate-500/80 bg-slate-900/40 rounded-md border border-slate-800/60 flex items-center px-2.5 gap-1.5 select-none">
        <span className="w-1.5 h-1.5 rounded-full bg-amber-400/80 animate-pulse" />
        <span className="text-blue-400 font-semibold">$</span>
-        <span className="text-slate-400 animate-pulse">loading_stats...</span>
+        <span className="text-slate-400 animate-pulse">
+          {tAnalyticsWidget("loading")}
+        </span>
      </div>
    );
  }
@ -61,7 +66,7 @@ export default function AnalyticsWidget() {
      <button
        onClick={handleOpenModal}
        className="font-mono text-xs text-slate-500 hover:text-slate-300 transition-all flex items-center gap-1.5 cursor-pointer group bg-slate-900/40 hover:bg-slate-900 px-2.5 py-1 rounded-md border border-slate-800/60 hover:border-blue-500/40 shadow-sm"
-        title="Open analytics terminal"
+        title={tAnalyticsWidget("tooltip")}
      >
        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
        <span className="text-blue-400 font-semibold">$</span>
@ -70,14 +75,14 @@ export default function AnalyticsWidget() {
        </span>
        <span className="text-slate-600">[</span>
        <span className="text-slate-300 group-hover:text-blue-400 transition-colors">
-          today:
+          {tAnalyticsWidget("today")}:
          <span className="text-emerald-400 font-medium">
            {stats.todayViews}
          </span>
        </span>
        <span className="text-slate-600">|</span>
        <span className="text-slate-300 group-hover:text-blue-400 transition-colors">
-          total:
+          {tAnalyticsWidget("total")}:
          <span className="text-blue-400 font-medium">{stats.totalViews}</span>
        </span>
        <span className="text-slate-600">]</span>
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@ -71,6 +71,30 @@
  "Footer": {
    "rights": "Alle Rechte vorbehalten."
  },
+  "AnalyticsWidget": {
+    "loading": "laden_statistiken...",
+    "tooltip": "Statistik-Terminal öffnen",
+    "today": "heute",
+    "total": "insgesamt"
+  },
+  "AnalyticsModal": {
+    "tooltipClose": "Fenster schließen",
+    "tooltipMinimize": "Fenster minimieren",
+    "tooltipActive": "Aktiver Prozess",
+    "tooltipEsc": "Modal schließen (Esc)",
+    "statusOnline": "STATUS: ONLINE",
+    "latency": "LATENZ",
+    "metricViewsToday": "aufrufe_heute",
+    "metricUniqueVisitors": "einmalige_besucher",
+    "metricTotalHits": "gesamte_zugriffe",
+    "metricDeviceRatio": "geraete_verteilung",
+    "gdprAnonymized": "DSGVO_ANONYMISIERT: TRUE",
+    "lastPing": "LETZTER_PING",
+    "timeJustNow": "gerade eben",
+    "timeSecondsAgo": "vor {seconds}s",
+    "timeMinutesAgo": "vor {minutes}m",
+    "timeHoursAgo": "vor {hours}h"
+  },
  "Imprint": {
    "backHome": "Zurück zur Startseite",
    "section1Title": "Angaben gemäß § 5 DDG",
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@ -72,6 +72,30 @@
  "Footer": {
    "rights": "All rights reserved."
  },
+  "AnalyticsWidget": {
+    "loading": "loading_stats...",
+    "tooltip": "Open analytics terminal",
+    "today": "today",
+    "total": "total"
+  },
+  "AnalyticsModal": {
+    "tooltipClose": "Close window",
+    "tooltipMinimize": "Minimize window",
+    "tooltipActive": "Active Process",
+    "tooltipEsc": "Close modal (Esc)",
+    "statusOnline": "STATUS: ONLINE",
+    "latency": "LATENCY",
+    "metricViewsToday": "views_today",
+    "metricUniqueVisitors": "unique_visitors",
+    "metricTotalHits": "total_hits",
+    "metricDeviceRatio": "device_ratio",
+    "gdprAnonymized": "GDPR_ANONYMIZED: TRUE",
+    "lastPing": "LAST_PING",
+    "timeJustNow": "just now",
+    "timeSecondsAgo": "{seconds}s ago",
+    "timeMinutesAgo": "{minutes}m ago",
+    "timeHoursAgo": "{hours}h ago"
+  },
  "Imprint": {
    "section1Title": "Information Pursuant to § 5 DDG",
    "section1Sub": "Also responsible for content pursuant to § 18 Abs. 2 MStV.",