Follow-ups: a missing translation key, the last gift emoji, and a test that did not test (#89)

Three loose ends from #87/#88, found reading back over what was merged.

**common.clear existed in neither locale.** ImageField uses it for the clear
button's tooltip, so that button's title read the literal string
"common.clear". TypeScript could not catch it: tr is typed as `typeof en` and
the key was missing from both, so the shapes still matched.

**#80 said the SVG badge replaces the gift emoji "in the storefront and in both
admin product lists", and the web panel's Manage list still had the emoji.** The
storefront and the desktop list were done; that one was not. It uses the same
CRATE_ICON_SVG now.

**The assertion written to catch the first of those did not catch it.** It
scanned document.body.innerText for anything shaped like a translation key,
which sounds right and misses every key used in a title, placeholder or
aria-label - `common.clear` among them, since innerText contains no attributes.
Worse, the clear button only renders once an image field has a value, so an
untouched editor never draws it at all.

Fixed by scanning attributes too and by filling the icon field first, through
the native value setter so React notices. Then proved: with the key removed the
gate now exits 1 with "untranslated keys rendered in the store view:
common.clear", and with it restored it passes. A test that cannot fail is worse
than no test, because it reports coverage that is not there - the same shape as
the single-instance-lock false pass fixed in the previous PR.

The tab sweep already mounts every view, so nothing was crashing; what was
missing was any assertion about what the Store view actually renders. It now
also checks the crate animation picker and image fields are present, so #75 and
#76 have renderer-level coverage rather than only shared-logic coverage.

All twelve smoke gates pass.

Author: CaYatur

src/main/smoke.ts

@@ -2284,6 +2284,87 @@ export async function runSmoke(): Promise<void> {
   )
   await sleep(300)
   if (await viewCrashed()) return fail('create view crashed')
+  // ---- the Store view, mounted for real ----
+  //
+  // The tab sweep above proves nothing crashes, which is not the same as
+  // nothing being broken. A `t()` call for a key that exists in neither locale
+  // renders the key itself - `common.clear` did exactly that - and TypeScript
+  // cannot catch it, because `tr` is typed as `typeof en` and both were simply
+  // missing it. So: open the product editor and assert no raw key is on screen.
+  {
+    await win.webContents.executeJavaScript(`document.querySelector('.server-item')?.click()`)
+    await sleep(250)
+    await win.webContents.executeJavaScript(
+      `[...document.querySelectorAll('.tab')].find(b=>/Store|Mağaza/i.test(b.textContent||''))?.click()`
+    )
+    await sleep(300)
+    // The catalogue lives behind the second section tab.
+    await win.webContents.executeJavaScript(
+      `[...document.querySelectorAll('.tabs .tab')].pop()?.click()`
+    )
+    await sleep(250)
+    // "Add crate" opens the editor with every new control on it.
+    await win.webContents.executeJavaScript(
+      `[...document.querySelectorAll('button')].find(b=>/Add crate|Sandık ekle|Kasa ekle/i.test(b.textContent||''))?.click()`
+    )
+    await sleep(400)
+    if (await viewCrashed()) return fail('the store product editor crashed on mount')
+
+    // Put a value in the icon field first. Half the controls on an image field
+    // only exist once it has one - the clear button among them - so probing an
+    // untouched editor would miss exactly the strings least likely to be
+    // translated. React owns the input, so the native setter plus a bubbling
+    // event is what makes it notice.
+    await win.webContents.executeJavaScript(`(()=>{
+      const inp = document.querySelector('input[placeholder*="uploads"]');
+      if (!inp) return;
+      const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+      setter.call(inp, 'https://example.invalid/icon.png');
+      inp.dispatchEvent(new Event('input', { bubbles: true }));
+    })()`)
+    await sleep(250)
+
+    const storeProbe = await win.webContents.executeJavaScript(`(()=>{
+      // Attributes as well as text. A missing key is just as broken in a
+      // tooltip, and innerText does not contain one - the first version of this
+      // assertion read only innerText and passed with common.clear missing,
+      // which is the exact bug it was written for.
+      let hay = document.body.innerText || '';
+      for (const el of document.querySelectorAll('[title],[placeholder],[aria-label]')) {
+        hay += ' ' + (el.getAttribute('title') || '') +
+               ' ' + (el.getAttribute('placeholder') || '') +
+               ' ' + (el.getAttribute('aria-label') || '');
+      }
+      // A translation key that resolved to nothing looks exactly like its key.
+      const raw = (hay.match(/\\b(?:store|common|web)\\.[a-zA-Z_][a-zA-Z0-9_.-]*/g) || []);
+      return JSON.stringify({
+        raw: [...new Set(raw)],
+        modal: !!document.querySelector('.modal'),
+        anim: [...document.querySelectorAll('select')].some(s =>
+          [...s.options].some(o => /reel/i.test(o.value))),
+        imageFields: document.querySelectorAll('input[placeholder*="uploads"]').length
+      })
+    })()`)
+    const sp = JSON.parse(storeProbe) as {
+      raw: string[]
+      modal: boolean
+      anim: boolean
+      imageFields: number
+    }
+    if (!sp.modal) return fail('the store product editor did not open; probe=' + storeProbe)
+    if (sp.raw.length) return fail('untranslated keys rendered in the store view: ' + sp.raw.join(', '))
+    if (!sp.anim) return fail('the crate editor has no animation picker (#75)')
+    if (sp.imageFields < 1) return fail('the crate editor has no image field (#76)')
+    // Close it again so the file-editor assertions below start from a clean view.
+    await win.webContents.executeJavaScript(
+      `[...document.querySelectorAll('.modal-actions button')][0]?.click()`
+    )
+    await sleep(200)
+    console.log(
+      'SMOKE: store editor OK (opens, animation picker + image fields present, no untranslated keys)'
+    )
+  }
+
   // Return to a server view (settings/create have no tab bar), then open a file
   // to verify the CodeMirror editor mounts.
   await win.webContents.executeJavaScript(`document.querySelector('.server-item')?.click()`)

src/main/web/panelHtml.ts

@@ -133,7 +133,8 @@ ${STORE_CSS}
 /* store admin */
 .mrow{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
 .mrow:last-child{border-bottom:none}
-.mrow .ic{width:20px;text-align:center;flex:none}
+.mrow .ic{width:20px;text-align:center;flex:none;display:inline-flex;align-items:center;justify-content:center}
+.mrow .ic svg{width:15px;height:15px;color:var(--accent)}
 .pm-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;z-index:50;padding:16px}
 .pm-box{background:linear-gradient(160deg,#17151b,#0c0c11);border:1px solid var(--border);border-radius:16px;padding:20px;width:min(560px,95vw);max-height:88vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.65)}
 .pm-box label{display:block;font-size:12px;color:var(--dim);margin-top:8px}
@@ -731,7 +732,7 @@ function saveCurrency(){var c=document.getElementById('mCur').value.trim()||'Coi
  api('/api/servers/'+current.id+'/store/admin/currency',{method:'POST',body:JSON.stringify({currency:c})}).then(function(r){if(!r.ok){alert('Could not save currency');return}loadManage()})}
 function renderMProducts(){var el=document.getElementById('mProducts');var ps=mstore.products||[];
  if(!ps.length){el.innerHTML='<div class="dim">No products yet.</div>';return}
- el.innerHTML=ps.map(function(p){return '<div class="mrow"'+(p.hidden?' style="opacity:.55"':'')+'><span class="ic">'+(p.type==='crate'?'🎁':'📦')+'</span>'+
+ el.innerHTML=ps.map(function(p){return '<div class="mrow"'+(p.hidden?' style="opacity:.55"':'')+'><span class="ic">'+(p.type==='crate'?CRATE_ICON_SVG:'📦')+'</span>'+
   '<div style="flex:1;min-width:0"><div style="font-weight:700">'+esc(p.name)+
    (p.hidden?' <span class="badge">hidden</span>':'')+
    (typeof p.stock==='number'?' <span class="badge">'+(p.stock?p.stock+' left':'sold out')+'</span>':'')+'</div>'+

src/renderer/src/locales/en.ts

@@ -871,6 +871,7 @@ export default {
     yes: 'Yes',
     no: 'No',
     close: 'Close',
+    clear: 'Clear',
     loading: 'Loading…',
     refresh: 'Refresh',
     apply: 'Apply',

src/renderer/src/locales/tr.ts

@@ -876,6 +876,7 @@ const tr: typeof en = {
     yes: 'Evet',
     no: 'Hayır',
     close: 'Kapat',
+    clear: 'Temizle',
     loading: 'Yükleniyor…',
     refresh: 'Yenile',
     apply: 'Uygula',