From aade5d3c928ca9242acf1fb81236f56cf7f86914 Mon Sep 17 00:00:00 2001
From: ashaffah <wagamama.morph@gmail.com>
Date: Fri, 26 Jun 2026 15:07:57 +0700
Subject: [PATCH 1/2] i18n: localize the MQTT broker dialog

The Brokers dialog (title, hint, add button, name placeholder, delete,
empty state) and the toolbar Brokers button were hardcoded English. Add
en/id keys and use t() so they follow the language toggle.
---
 ui/src/App.svelte         |  2 +-
 ui/src/Brokers.svelte     | 16 +++++++---------
 ui/src/lib/i18n.svelte.js | 16 ++++++++++++++++
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 8fbc998..685e202 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -93,7 +93,7 @@
         hidden
       />
       <button onclick={remove}>{t("delete")}</button>
-      <button onclick={() => (showBrokers = true)}>Brokers</button>
+      <button onclick={() => (showBrokers = true)}>{t("brokers")}</button>
       <span class="spacer"></span>
       <span class="status">{ui.status}</span>
       <select
diff --git a/ui/src/Brokers.svelte b/ui/src/Brokers.svelte
index 470e190..e0fc85c 100644
--- a/ui/src/Brokers.svelte
+++ b/ui/src/Brokers.svelte
@@ -1,5 +1,6 @@
 <script>
   import { ui, catalogFor, addBroker, removeBroker, brokers } from "./lib/store.svelte.js";
+  import { t } from "./lib/i18n.svelte.js";
 
   let { onClose } = $props();
   let def = $derived(catalogFor("mqtt-broker"));
@@ -19,20 +20,17 @@
   <button type="button" class="backdrop" aria-label="Close" onclick={onClose}></button>
   <div class="modal" role="dialog" aria-modal="true">
     <div class="head">
-      <h3>MQTT Brokers</h3>
+      <h3>{t("brokers_title")}</h3>
       <button class="x" onclick={onClose}>✕</button>
     </div>
-    <p class="hint">
-      Define a broker once, then pick it on MQTT nodes. Nodes that share a broker
-      reuse one connection.
-    </p>
-    <button class="add" onclick={addBroker}>+ Add broker</button>
+    <p class="hint">{t("brokers_hint")}</p>
+    <button class="add" onclick={addBroker}>{t("brokers_add")}</button>
 
     {#each brokers() as b (b.id)}
       <div class="broker">
         <div class="brow">
-          <input class="bname" bind:value={b.name} placeholder="broker name" />
-          <button class="del" onclick={() => removeBroker(b.id)}>Delete</button>
+          <input class="bname" bind:value={b.name} placeholder={t("brokers_name")} />
+          <button class="del" onclick={() => removeBroker(b.id)}>{t("delete")}</button>
         </div>
         {#each (def?.fields ?? []).filter((f) => visible(b, f)) as f (f.key)}
           <label class="field">
@@ -58,7 +56,7 @@
     {/each}
 
     {#if brokers().length === 0}
-      <p class="empty">No brokers yet.</p>
+      <p class="empty">{t("brokers_empty")}</p>
     {/if}
   </div>
 </div>
diff --git a/ui/src/lib/i18n.svelte.js b/ui/src/lib/i18n.svelte.js
index 75d176a..70247ea 100644
--- a/ui/src/lib/i18n.svelte.js
+++ b/ui/src/lib/i18n.svelte.js
@@ -27,6 +27,14 @@ const dict = {
     cat_output: "Output",
     cat_function: "Function",
     language: "Language",
+    // brokers
+    brokers: "Brokers",
+    brokers_title: "MQTT Brokers",
+    brokers_hint:
+      "Define a broker once, then pick it on MQTT nodes. Nodes that share a broker reuse one connection.",
+    brokers_add: "+ Add broker",
+    brokers_name: "broker name",
+    brokers_empty: "No brokers yet.",
     // auth
     sign_in: "Sign in",
     sign_out: "Sign out",
@@ -93,6 +101,14 @@ const dict = {
     cat_output: "Keluaran",
     cat_function: "Fungsi",
     language: "Bahasa",
+    // brokers
+    brokers: "Broker",
+    brokers_title: "Broker MQTT",
+    brokers_hint:
+      "Definisikan broker sekali, lalu pilih di node MQTT. Node yang berbagi broker memakai satu koneksi.",
+    brokers_add: "+ Tambah broker",
+    brokers_name: "nama broker",
+    brokers_empty: "Belum ada broker.",
     // auth
     sign_in: "Masuk",
     sign_out: "Keluar",

From 5413a0b35e84a02c9706656087106cf1bb514841 Mon Sep 17 00:00:00 2001
From: ashaffah <wagamama.morph@gmail.com>
Date: Fri, 26 Jun 2026 15:09:52 +0700
Subject: [PATCH 2/2] i18n: add Common and Sequence palette category labels

cat_common and cat_sequence were missing, so those palette group headers
showed the raw keys. Add en/id translations.
---
 ui/src/lib/i18n.svelte.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/lib/i18n.svelte.js b/ui/src/lib/i18n.svelte.js
index 70247ea..5f324c2 100644
--- a/ui/src/lib/i18n.svelte.js
+++ b/ui/src/lib/i18n.svelte.js
@@ -26,6 +26,8 @@ const dict = {
     cat_input: "Input",
     cat_output: "Output",
     cat_function: "Function",
+    cat_common: "Common",
+    cat_sequence: "Sequence",
     language: "Language",
     // brokers
     brokers: "Brokers",
@@ -100,6 +102,8 @@ const dict = {
     cat_input: "Masukan",
     cat_output: "Keluaran",
     cat_function: "Fungsi",
+    cat_common: "Umum",
+    cat_sequence: "Urutan",
     language: "Bahasa",
     // brokers
     brokers: "Broker",