Обновить синхронизацию серверов и экран сохранения ключей

shine-UI/js/pages/key-storage-view.js

@@ -35,16 +35,20 @@ export function render({ navigate }) {
   card.innerHTML = `
     <div class="key-card stack">
       <label class="checkbox-row"><span class="field-label">Root Key</span></label>
+      <p class="meta-muted key-storage-option__description">Главный ключ аккаунта. Нужен для смены пароля, восстановления доступа и важных основных настроек.</p>
       <input class="input" type="text" value="${state.keyStorage.rootKey}" />
     </div>
     <div class="key-card stack">
       <label class="checkbox-row"><span class="field-label">Blockchain Key</span></label>
+      <p class="meta-muted key-storage-option__description">Используется для подписи ваших действий и записей в блокчейне SHiNE.</p>
       <input class="input" type="text" value="${state.keyStorage.blockchainKey}" />
     </div>
     <div class="key-card stack">
       <label class="checkbox-row"><span class="field-label">Device Key</span></label>
+      <p class="meta-muted key-storage-option__description">Ключ этого устройства. Нужен для обычного входа, авторизации сессии и работы приложения на телефоне.</p>
       <input class="input" type="text" value="${state.keyStorage.clientKey}" />
     </div>
+    <p class="key-storage-note key-storage-note--strong">Если вы не особо понимаете, о чём идёт речь, и не хотите особо заморачиваться с ключами, можете просто сохранить все ключи на телефоне.</p>
   `;
 
   card.children[0].querySelector('label').prepend(rootToggle);

shine-UI/js/pages/registration-keys-view.js

@@ -42,6 +42,22 @@ export function render({ navigate }) {
   status.className = 'status-line is-unavailable';
   status.style.display = 'none';
 
+  const createKeyInfo = (toggle, titleText, descriptionText) => {
+    const wrap = document.createElement('div');
+    wrap.className = 'key-storage-option stack';
+
+    const row = document.createElement('label');
+    row.className = 'checkbox-row';
+    row.append(toggle, document.createTextNode(titleText));
+
+    const description = document.createElement('p');
+    description.className = 'meta-muted key-storage-option__description';
+    description.textContent = descriptionText;
+
+    wrap.append(row, description);
+    return wrap;
+  };
+
   const rootToggle = document.createElement('input');
   rootToggle.type = 'checkbox';
   rootToggle.checked = state.keyStorage.saveRoot;
@@ -55,19 +71,29 @@ export function render({ navigate }) {
   deviceToggle.checked = true;
   deviceToggle.disabled = true;
 
-  const rootRow = document.createElement('label');
-  rootRow.className = 'checkbox-row';
-  rootRow.append(rootToggle, document.createTextNode('Ключ root'));
+  const rootRow = createKeyInfo(
+    rootToggle,
+    'Ключ root',
+    'Главный ключ аккаунта. Нужен для смены пароля, восстановления доступа и важных основных настроек.',
+  );
 
-  const blockchainRow = document.createElement('label');
-  blockchainRow.className = 'checkbox-row';
-  blockchainRow.append(blockchainToggle, document.createTextNode('Ключ blockchain'));
+  const blockchainRow = createKeyInfo(
+    blockchainToggle,
+    'Ключ blockchain',
+    'Используется для подписи ваших действий и записей в блокчейне SHiNE.',
+  );
 
-  const deviceRow = document.createElement('label');
-  deviceRow.className = 'checkbox-row';
-  deviceRow.append(deviceToggle, document.createTextNode('Ключ device (всегда)'));
+  const deviceRow = createKeyInfo(
+    deviceToggle,
+    'Ключ device (всегда)',
+    'Ключ этого устройства. Нужен для обычного входа, авторизации сессии и работы приложения на телефоне.',
+  );
 
-  card.append(title, question, nextStep, rootRow, blockchainRow, deviceRow, status);
+  const simpleNote = document.createElement('p');
+  simpleNote.className = 'key-storage-note key-storage-note--strong';
+  simpleNote.textContent = 'Если вы не особо понимаете, о чём идёт речь, и не хотите особо заморачиваться с ключами, можете просто сохранить все ключи на телефоне.';
+
+  card.append(title, question, nextStep, rootRow, blockchainRow, deviceRow, simpleNote, status);
 
   const actions = document.createElement('div');
   actions.className = 'auth-footer-actions';

shine-UI/js/state.js

@@ -290,7 +290,7 @@ function createInitialState({ withStoredSession = true } = {}) {
       rootKey: 'Ключ root хранится в зашифрованном виде',
       blockchainKey: 'Ключ blockchain хранится в зашифрованном виде',
       clientKey: 'Ключ device хранится в зашифрованном виде',
-      saveRoot: false,
+      saveRoot: true,
       saveBlockchain: true,
       saveDevice: true,
     },

shine-UI/styles/components.css

@@ -628,6 +628,25 @@
   gap: 10px;
 }
 
+.key-storage-option {
+  gap: 6px;
+}
+
+.key-storage-option__description {
+  margin: 0;
+}
+
+.key-storage-note {
+  margin: 0;
+  line-height: 1.45;
+}
+
+.key-storage-note--strong {
+  font-size: 17px;
+  font-weight: 700;
+  color: #eef4ff;
+}
+
 .key-card {
   padding: 12px;
   border-radius: var(--radius-md);