Обновить UI и документы личных сообщений

shine-UI/js/pages/language-view.js

@@ -1,43 +1,58 @@
 import { renderHeader } from '../components/header.js';
-import { state } from '../state.js';
+import { saveEntryLanguage, state } from '../state.js';
 
 export const pageMeta = { id: 'language-view', title: 'Язык' };
 
+function resolveReturnPage() {
+  const stored = String(sessionStorage.getItem('shine-language-return-page') || '').trim();
+  return stored === 'start-view' ? 'start-view' : 'settings-view';
+}
+
 export function render({ navigate }) {
   const screen = document.createElement('section');
-  screen.className = 'stack';
+  screen.className = 'stack language-screen';
+  const returnPage = resolveReturnPage();
 
   screen.append(
     renderHeader({
-      title: 'Язык',
-      leftAction: { label: '←', onClick: () => navigate('settings-view') },
+      title: 'Язык / Language',
+      leftAction: { label: '←', onClick: () => {
+        sessionStorage.removeItem('shine-language-return-page');
+        navigate(returnPage);
+      } },
     }),
   );
 
   const card = document.createElement('div');
-  card.className = 'card stack';
+  card.className = 'card stack language-choice-card';
   card.innerHTML = `
-    <label class="checkbox-row"><input type="radio" name="language" value="ru" ${state.entrySettings.language === 'ru' ? 'checked' : ''} /> Русский</label>
-    <label class="checkbox-row"><input type="radio" name="language" value="en" ${state.entrySettings.language === 'en' ? 'checked' : ''} /> English</label>
+    <p class="meta-muted language-choice-hint">Выберите язык интерфейса</p>
+    <div class="language-choice-grid" role="radiogroup" aria-label="Язык интерфейса">
+      <button class="language-choice-option${state.entrySettings.language === 'ru' ? ' is-selected' : ''}" type="button" data-language="ru" role="radio" aria-checked="${state.entrySettings.language === 'ru'}">
+        <span class="language-choice-name">Русский</span>
+        <span class="language-choice-code">RU</span>
+      </button>
+      <button class="language-choice-option${state.entrySettings.language === 'en' ? ' is-selected' : ''}" type="button" data-language="en" role="radio" aria-checked="${state.entrySettings.language === 'en'}">
+        <span class="language-choice-name">English</span>
+        <span class="language-choice-code">EN</span>
+      </button>
+    </div>
   `;
 
-  const actions = document.createElement('div');
-  actions.className = 'auth-footer-actions';
-  actions.innerHTML = `
-    <button class="primary-btn" type="button" id="language-ok">ОК</button>
-    <button class="ghost-btn" type="button" id="language-cancel">Отмена</button>
-  `;
-
-  actions.querySelector('#language-ok').addEventListener('click', () => {
-    const selected = card.querySelector('input[name="language"]:checked');
-    if (selected) {
-      state.entrySettings.language = selected.value;
-    }
-    navigate('settings-view');
+  card.querySelectorAll('[data-language]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const language = String(button.dataset.language || 'ru');
+      saveEntryLanguage(language);
+      card.querySelectorAll('[data-language]').forEach((item) => {
+        const selected = item === button;
+        item.classList.toggle('is-selected', selected);
+        item.setAttribute('aria-checked', String(selected));
+      });
+      sessionStorage.removeItem('shine-language-return-page');
+      navigate(returnPage);
+    });
   });
 
-  actions.querySelector('#language-cancel').addEventListener('click', () => navigate('settings-view'));
-
-  screen.append(card, actions);
+  screen.append(card);
   return screen;
 }