diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/app.js')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/app.js | 24 |
1 files changed, 17 insertions, 7 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js index cf33d72..6a5a13f 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js @@ -2,7 +2,7 @@ import { html, render, useState, useEffect, useCallback, useRef, createContext, useContext, } from './vendor/htm-preact.js'; -import { t, getLocale, setLocale, LOCALES } from './i18n.js'; +import { t, getLocale, setLocale, initLocale, LOCALES } from './i18n.js'; import { ZipStream, entriesUnder } from './zipstream.js'; import { transfers, formatSpeed } from './transfers.js'; import * as downloads from './downloads.js'; @@ -852,7 +852,7 @@ function CreateGroupPage({ token, onCreated }) { <form onSubmit=${onSubmit}> <div class="form-field"> <label class="form-label">${t('create_group.name')}</label> - <input type="text" placeholder="e.g. Family Photos, Project Files..." + <input type="text" placeholder="${t('create_group.name_placeholder')}" value=${name} onInput=${e => setName(e.target.value)} required autofocus /> </div> @@ -872,13 +872,13 @@ function CreateGroupPage({ token, onCreated }) { onClick=${() => setVisibility('private')}> <${Icon} name="lock" cls="option-icon" /> <span class="option-title">${t('create_group.private')}</span> - <span class="option-desc">Only invited members can see and access files</span> + <span class="option-desc">${t('create_group.private_desc')}</span> </button> <button type="button" class="option-card ${visibility === 'public' ? 'selected' : ''}" onClick=${() => setVisibility('public')}> <${Icon} name="globe" cls="option-icon" /> <span class="option-title">${t('create_group.public')}</span> - <span class="option-desc">Anyone can discover and browse this group</span> + <span class="option-desc">${t('create_group.public_desc')}</span> </button> </div> </div> @@ -890,13 +890,13 @@ function CreateGroupPage({ token, onCreated }) { onClick=${() => setJoinPolicy('invite')}> <${Icon} name="envelope" cls="option-icon" /> <span class="option-title">${t('create_group.invite')}</span> - <span class="option-desc">Members must be invited by an admin</span> + <span class="option-desc">${t('create_group.invite_desc')}</span> </button> <button type="button" class="option-card ${joinPolicy === 'open' ? 'selected' : ''}" onClick=${() => setJoinPolicy('open')}> <${Icon} name="door" cls="option-icon" /> <span class="option-title">${t('create_group.open')}</span> - <span class="option-desc">Anyone can join without approval</span> + <span class="option-desc">${t('create_group.open_desc')}</span> </button> </div> </div> @@ -3643,4 +3643,14 @@ function App() { // ── Boot ───────────────────────────────────────────────────────────────────── -render(html`<${App} />`, document.getElementById('app')); +// Catalogues are fetched, so the first render waits for one: mounting earlier +// would paint the interface in English and then swap every string. initLocale() +// falls back to English rather than rejecting, so this cannot strand the page. +const mount = () => render(html`<${App} />`, document.getElementById('app')); +initLocale().then(mount, (err) => { + // Nothing in initLocale() is supposed to reject. If something does, an + // English interface is still an interface; an unhandled rejection here is a + // blank page. + console.error('[MeshBay] locale init failed, continuing in English:', err); + mount(); +}); |