From 9ecdb0ae26936d2456e3d5e88b0c914b26606ade Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Tue, 23 Jun 2026 09:06:46 +0000
Subject: [PATCH] UX: Render backend notifications in the current UI locale
 #5682

Backend *Msg helpers now publish the untranslated message id and params alongside the rendered fallback; the frontend translates the id and applies a positional-placeholder shim so notifications render in each user's UI language.
---
 frontend/src/common/gettext.js               | 35 +++++++++++
 frontend/src/component/notify.vue            |  7 ++-
 frontend/tests/vitest/common/gettext.test.js | 39 ++++++++++++
 internal/event/publish.go                    | 18 ++++--
 internal/event/publish_test.go               | 63 ++++++++++++++++++++
 pkg/i18n/i18n.go                             |  6 ++
 pkg/i18n/i18n_test.go                        | 15 +++++
 7 files changed, 177 insertions(+), 6 deletions(-)
 create mode 100644 frontend/tests/vitest/common/gettext.test.js
 create mode 100644 internal/event/publish_test.go

diff --git a/frontend/src/common/gettext.js b/frontend/src/common/gettext.js
index 2a3ffc2d0..8093654fc 100644
--- a/frontend/src/common/gettext.js
+++ b/frontend/src/common/gettext.js
@@ -21,6 +21,35 @@ function interpolate(message, params = {}) {
   });
 }
 
+// interpolatePositional substitutes Go printf verbs (%s, %d, %v, %%, …) sequentially from an
+// ordered params array, bridging the backend's positional placeholders to the frontend runtime.
+function interpolatePositional(message, params) {
+  if (message === null || message === undefined) {
+    return "";
+  }
+
+  const text = String(message);
+
+  if (!Array.isArray(params) || params.length === 0) {
+    return text;
+  }
+
+  let i = 0;
+
+  return text.replace(/%(%|[-+ 0#]*\d*(?:\.\d+)?[a-zA-Z])/g, (match, verb) => {
+    if (verb === "%") {
+      return "%";
+    }
+
+    if (i >= params.length) {
+      return match;
+    }
+
+    const value = params[i++];
+    return value === undefined || value === null ? "" : String(value);
+  });
+}
+
 export let gettext = {
   $gettext: (msgid, params) => interpolate(msgid, params),
   $ngettext: (msgid, plural, n, params) => interpolate(n > 1 ? plural : msgid, params),
@@ -32,6 +61,12 @@ export function T(msgid, params) {
   return gettext.$gettext(msgid, params);
 }
 
+// Tp translates a backend message by its English source id, then substitutes the ordered
+// positional params, so backend notifications render in the current UI language.
+export function Tp(msgid, params) {
+  return interpolatePositional(gettext.$gettext(msgid), params);
+}
+
 export function $gettext(msgid, params) {
   return gettext.$gettext(msgid, params);
 }
diff --git a/frontend/src/component/notify.vue b/frontend/src/component/notify.vue
index c93555437..1101e0bea 100644
--- a/frontend/src/component/notify.vue
+++ b/frontend/src/component/notify.vue
@@ -24,6 +24,8 @@
   </teleport>
 </template>
 <script>
+import { Tp } from "common/gettext";
+
 export default {
   name: "PNotify",
   data() {
@@ -59,8 +61,9 @@ export default {
     onNotify(ev, data) {
       const type = ev.split(".")[1];
 
-      // Get the message.
-      let m = data.message;
+      // Render in the current UI language when the backend sent a message id (the English source
+      // string); otherwise fall back to the pre-rendered message string as-is.
+      let m = data.id ? Tp(data.id, data.params) : data.message;
 
       // Skip empty messages.
       if (!m || !m.length) {
diff --git a/frontend/tests/vitest/common/gettext.test.js b/frontend/tests/vitest/common/gettext.test.js
new file mode 100644
index 000000000..dbba56865
--- /dev/null
+++ b/frontend/tests/vitest/common/gettext.test.js
@@ -0,0 +1,39 @@
+// Targets the positional-interpolation bridge in common/gettext.js (Tp), which renders backend
+// notification messages — addressed by their English source id with Go printf placeholders — in
+// the current UI language. The vue3-gettext runtime itself is third-party and not retested here.
+import { describe, it, expect } from "vitest";
+
+import { Tp } from "common/gettext";
+
+describe("common/gettext", () => {
+  describe("Tp", () => {
+    it("substitutes a single %s placeholder", () => {
+      expect(Tp("Indexing files in %s", ["/photos"])).toBe("Indexing files in /photos");
+    });
+    it("substitutes a single %d placeholder", () => {
+      expect(Tp("Indexing completed in %d s", [5])).toBe("Indexing completed in 5 s");
+    });
+    it("substitutes multiple ordered placeholders of mixed type", () => {
+      expect(Tp("%d entries added to %s", [3, "Holiday"])).toBe("3 entries added to Holiday");
+    });
+    it("substitutes repeated same-type placeholders positionally", () => {
+      expect(Tp("Removed %d files and %d photos", [10, 4])).toBe("Removed 10 files and 4 photos");
+    });
+    it("returns the message unchanged when there are no params", () => {
+      expect(Tp("Album created", [])).toBe("Album created");
+      expect(Tp("Album created")).toBe("Album created");
+    });
+    it("un-escapes %% to a literal percent and does not consume a param", () => {
+      expect(Tp("100%% complete in %d s", [5])).toBe("100% complete in 5 s");
+    });
+    it("leaves a placeholder literal when its param is missing", () => {
+      expect(Tp("Indexing files in %s", [])).toBe("Indexing files in %s");
+    });
+    it("renders an empty string for null or undefined param values", () => {
+      expect(Tp("Indexing files in %s", [null])).toBe("Indexing files in ");
+    });
+    it("returns an empty string for a null message", () => {
+      expect(Tp(null, [1])).toBe("");
+    });
+  });
+});
diff --git a/internal/event/publish.go b/internal/event/publish.go
index 13980b2f0..8b6566800 100644
--- a/internal/event/publish.go
+++ b/internal/event/publish.go
@@ -3,6 +3,8 @@ package event
 import (
 	"strings"
 
+	"github.com/sirupsen/logrus"
+
 	"github.com/photoprism/photoprism/pkg/i18n"
 )
 
@@ -38,22 +40,30 @@ func Warn(msg string) {
 	Publish("notify.warning", Data{"message": msg})
 }
 
+// publishMsg logs and publishes a localized notification, carrying the rendered message plus the
+// untranslated source id and params so the frontend can render it in the user's current UI language.
+func publishMsg(level logrus.Level, topic string, id i18n.Message, params ...any) {
+	msg := i18n.Msg(id, params...)
+	Log.Log(level, strings.ToLower(msg))
+	Publish(topic, Data{"message": msg, "id": i18n.Source(id), "params": params})
+}
+
 // ErrorMsg publishes a localized error notification.
 func ErrorMsg(id i18n.Message, params ...any) {
-	Error(i18n.Msg(id, params...))
+	publishMsg(logrus.ErrorLevel, "notify.error", id, params...)
 }
 
 // SuccessMsg publishes a localized success notification.
 func SuccessMsg(id i18n.Message, params ...any) {
-	Success(i18n.Msg(id, params...))
+	publishMsg(logrus.InfoLevel, "notify.success", id, params...)
 }
 
 // InfoMsg publishes a localized informational notification.
 func InfoMsg(id i18n.Message, params ...any) {
-	Info(i18n.Msg(id, params...))
+	publishMsg(logrus.InfoLevel, "notify.info", id, params...)
 }
 
 // WarnMsg publishes a localized warning notification.
 func WarnMsg(id i18n.Message, params ...any) {
-	Warn(i18n.Msg(id, params...))
+	publishMsg(logrus.WarnLevel, "notify.warning", id, params...)
 }
diff --git a/internal/event/publish_test.go b/internal/event/publish_test.go
new file mode 100644
index 000000000..eee32d62f
--- /dev/null
+++ b/internal/event/publish_test.go
@@ -0,0 +1,63 @@
+package event
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+
+	"github.com/photoprism/photoprism/pkg/i18n"
+)
+
+func TestSuccessMsg(t *testing.T) {
+	t.Run("WithParams", func(t *testing.T) {
+		s := Subscribe("notify.success")
+		SuccessMsg(i18n.MsgAlbumDeleted, "Holiday")
+		msg := <-s.Receiver
+		assert.Equal(t, "notify.success", msg.Name)
+		assert.Equal(t, "Album Holiday deleted", msg.Fields["message"])
+		assert.Equal(t, "Album %s deleted", msg.Fields["id"])
+		assert.Equal(t, []any{"Holiday"}, msg.Fields["params"])
+		Unsubscribe(s)
+	})
+	t.Run("WithoutParams", func(t *testing.T) {
+		s := Subscribe("notify.success")
+		SuccessMsg(i18n.MsgAlbumCreated)
+		msg := <-s.Receiver
+		assert.Equal(t, "notify.success", msg.Name)
+		assert.Equal(t, "Album created", msg.Fields["message"])
+		assert.Equal(t, "Album created", msg.Fields["id"])
+		Unsubscribe(s)
+	})
+}
+
+func TestErrorMsg(t *testing.T) {
+	s := Subscribe("notify.error")
+	ErrorMsg(i18n.ErrAlreadyExists, "A cat")
+	msg := <-s.Receiver
+	assert.Equal(t, "notify.error", msg.Name)
+	assert.Equal(t, "A cat already exists", msg.Fields["message"])
+	assert.Equal(t, "%s already exists", msg.Fields["id"])
+	assert.Equal(t, []any{"A cat"}, msg.Fields["params"])
+	Unsubscribe(s)
+}
+
+func TestInfoMsg(t *testing.T) {
+	s := Subscribe("notify.info")
+	InfoMsg(i18n.MsgIndexingFiles, "/photos")
+	msg := <-s.Receiver
+	assert.Equal(t, "notify.info", msg.Name)
+	assert.Equal(t, "Indexing files in /photos", msg.Fields["message"])
+	assert.Equal(t, "Indexing files in %s", msg.Fields["id"])
+	assert.Equal(t, []any{"/photos"}, msg.Fields["params"])
+	Unsubscribe(s)
+}
+
+func TestWarnMsg(t *testing.T) {
+	s := Subscribe("notify.warning")
+	WarnMsg(i18n.ErrBusy)
+	msg := <-s.Receiver
+	assert.Equal(t, "notify.warning", msg.Name)
+	assert.Equal(t, "Busy, please try again later", msg.Fields["message"])
+	assert.Equal(t, "Busy, please try again later", msg.Fields["id"])
+	Unsubscribe(s)
+}
diff --git a/pkg/i18n/i18n.go b/pkg/i18n/i18n.go
index 2a271a9d8..2a8f9f731 100644
--- a/pkg/i18n/i18n.go
+++ b/pkg/i18n/i18n.go
@@ -69,3 +69,9 @@ func Error(id Message, params ...any) error {
 func Lower(id Message, params ...any) string {
 	return strings.ToLower(msgParams(Messages[id], params...))
 }
+
+// Source returns the untranslated English source string (gettext msgid) for a message id.
+// This is the stable key the frontend uses to render the message in the user's UI language.
+func Source(id Message) string {
+	return Messages[id]
+}
diff --git a/pkg/i18n/i18n_test.go b/pkg/i18n/i18n_test.go
index ba0a89ec0..b30542e69 100644
--- a/pkg/i18n/i18n_test.go
+++ b/pkg/i18n/i18n_test.go
@@ -86,3 +86,18 @@ func TestLower(t *testing.T) {
 		assert.Equal(t, "permission denied", msg)
 	})
 }
+
+func TestSource(t *testing.T) {
+	t.Run("WithPlaceholder", func(t *testing.T) {
+		assert.Equal(t, "%s already exists", Source(ErrAlreadyExists))
+	})
+	t.Run("WithoutPlaceholder", func(t *testing.T) {
+		assert.Equal(t, "Permission denied", Source(ErrForbidden))
+	})
+	t.Run("UntranslatedAfterSetLocale", func(t *testing.T) {
+		SetLocale("de")
+		assert.Equal(t, "%s already exists", Source(ErrAlreadyExists))
+		SetLocale("")
+		assert.Equal(t, "%s already exists", Source(ErrAlreadyExists))
+	})
+}