From 1a17e98052180be4f89d1ac6b7b471feca0b2ba8 Mon Sep 17 00:00:00 2001
From: SandObserver <260779319+SandObserver@users.noreply.github.com>
Date: Thu, 13 Aug 2026 01:31:19 -0400
Subject: [PATCH] Fix: translate the Add New type tiles

The tile labels were resolved when the module evaluated, before the
translation catalog was fetched, so each tile kept its lookup key.
Resolve them when the card is built.

Rename the loop variable that shadowed the translation function.
---
 CHANGELOG.md   |  4 ++++
 ui/js/admin.js | 21 ++++++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b3c57b8..f53c3b3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,9 +11,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - A long error in Admin now stays on screen long enough to read, up to fifteen
   seconds.
+
 - Backup placeholder no longer moves or reshuffles when a card is hovered or
   tapped.
 
+- The App, Widget and Folder tiles under Add New show their names instead of
+  their internal keys.
+
 ## [1.6.0] - 2026-08-13
 
 ### Added
diff --git a/ui/js/admin.js b/ui/js/admin.js
index 627476a5..977e4073 100644
--- a/ui/js/admin.js
+++ b/ui/js/admin.js
@@ -596,7 +596,8 @@ const TYPE_ICONS = {
   folder:
     '<rect x="6" y="6" width="12" height="12" rx="2.6" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="9.7" cy="9.7" r="1.25" fill="currentColor"/><circle cx="14.3" cy="9.7" r="1.25" fill="currentColor"/><circle cx="9.7" cy="14.3" r="1.25" fill="currentColor"/><circle cx="14.3" cy="14.3" r="1.25" fill="currentColor"/>',
 };
-const TYPE_LABELS = { app: t('type.app'), widget: t('type.widget'), folder: t('type.folder') };
+/* Read at draw time. The catalog is not loaded when this module evaluates. */
+const typeLabels = () => ({ app: t('type.app'), widget: t('type.widget'), folder: t('type.folder') });
 
 function buildAddNewCard() {
   const grp = document.createElement('div');
@@ -606,20 +607,22 @@ function buildAddNewCard() {
   setHtml(row, html`<span class="rl">${t('type.addNew')}</span>`);
   const grpTiles = document.createElement('div');
   grpTiles.className = 'tile-grp';
-  ['app', 'widget', 'folder'].forEach(t => {
+  const labels = typeLabels();
+  ['app', 'widget', 'folder'].forEach(kind => {
+    const label = labels[kind];
     const b = document.createElement('button');
     b.type = 'button';
-    b.className = 'tile-opt' + (t === state.ctype ? ' on' : '');
-    b.dataset.ctype = t;
-    b.setAttribute('aria-pressed', String(t === state.ctype));
-    b.setAttribute('aria-label', 'Add ' + TYPE_LABELS[t]);
+    b.className = 'tile-opt' + (kind === state.ctype ? ' on' : '');
+    b.dataset.ctype = kind;
+    b.setAttribute('aria-pressed', String(kind === state.ctype));
+    b.setAttribute('aria-label', t('type.addNew') + ': ' + label);
     setHtml(
       b,
-      html`<span class="tile-ico"><svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true">${raw(TYPE_ICONS[t])}</svg></span><span class="tile-cap">${TYPE_LABELS[t]}</span>`,
+      html`<span class="tile-ico"><svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true">${raw(TYPE_ICONS[kind])}</svg></span><span class="tile-cap">${label}</span>`,
     );
     b.onclick = () => {
-      if (state.ctype === t) return;
-      state.ctype = t;
+      if (state.ctype === kind) return;
+      state.ctype = kind;
       _renderEditBody();
     };
     grpTiles.appendChild(b);