Интерфейс v1.1.3: профиль и компактные настройки

web/app.css

@@ -83,7 +83,7 @@ button {
 }
 
 /* #app — колонка ровно в высоту окна: от неё считают высоту экраны,
-   поэтому сайдбар с «ты: @nick» стоит на месте, а прокручивается
+   поэтому профиль в подвале сайдбара стоит на месте, а прокручивается
    только содержимое */
 
 #app {
@@ -437,7 +437,8 @@ input[type="password"] {
   color: var(--mute);
 }
 
-/* подвал сайдбара: «ты: @nick» и версия с временем коммита (ADR-067).
+/* подвал сайдбара: пиктограмма профиля, @nick и версия с временем коммита
+   (ADR-067, ADR-079).
    Версия не кнопка: нажимать в ней нечего, поэтому она стоит рядом
    с кнопкой, а не внутри неё. В сайдбаре 224 px они рядом не помещаются
    никогда — версия занимает вторую строку и остаётся справа; на мобильном,
@@ -473,11 +474,11 @@ input[type="password"] {
   cursor: pointer;
 }
 
-.me i {
+.me__icon {
+  display: block;
   flex: none;
-  width: 6px;
-  height: 6px;
-  background: var(--ink);
+  width: 16px;
+  height: 16px;
 }
 
 /* ник бывает в 32 символа (ADR-019): он обрезается, а версия остаётся
@@ -561,6 +562,17 @@ input[type="password"] {
   max-width: 460px;
 }
 
+/* На экране настроек все поля и действия занимают одну ширину. Глобальный
+   предел .form остаётся у входа и остальных коротких форм. */
+
+.settings--account .form {
+  max-width: none;
+}
+
+.settings__column {
+  min-width: 0;
+}
+
 .block {
   padding: 20px 0;
   border-top: 1px solid var(--line);
@@ -1110,9 +1122,38 @@ input[type="password"] {
   }
 }
 
+/* На широком десктопе настройки используют место справа от сайдбара:
+   повседневные действия и действия аккаунта идут в двух равных колонках. */
+
+@media (min-width: 960px) {
+  .settings--account {
+    /* 752 px содержимого: две колонки по 360 px и промежуток 32 px;
+       ещё 64 px занимает desktop-padding самой .body */
+    max-width: 816px;
+  }
+
+  .settings__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 32px;
+    align-items: start;
+  }
+}
+
 /* мобильный: один экран за раз, цели нажатия не меньше 44 px */
 
 @media (max-width: 759px) {
+  /* На мобильном версия и профиль остаются в одной строке; место под
+     фиксированную версию отдаёт ник, который умеет обрезаться. */
+
+  .foot {
+    flex-wrap: nowrap;
+  }
+
+  .me {
+    flex-basis: 0;
+  }
+
   .shell[data-screen="list"] .main {
     display: none;
   }

web/icons/profile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" stroke="#1B1917" stroke-width="7" stroke-linecap="square" stroke-linejoin="miter"><circle cx="32" cy="19" r="9"/><path d="M10 54v-8l14-10h16l14 10v8"/></svg>

web/js/ui/settings.js

@@ -50,13 +50,21 @@ const IMPORT_FAILED = "импорт не удался";
 
 export function renderSettings(root, ctx) {
   root.append(head(ctx));
-  const body = el("div", "body settings");
-  body.append(identity(ctx), notificationsBlock(ctx));
+  const body = el("div", "body settings settings--account");
+  const general = el("div", "settings__column");
+  general.append(notificationsBlock(ctx));
   const install = installBlock();
   if (install !== null) {
-    body.append(install);
+    general.append(install);
   }
-  body.append(devicesBlock(ctx), historyBlock(), passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
+  general.append(devicesBlock(ctx), historyBlock());
+
+  const security = el("div", "settings__column");
+  security.append(passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
+
+  const grid = el("div", "settings__grid");
+  grid.append(general, security);
+  body.append(identity(ctx), grid);
   root.append(body);
 }
 

web/js/ui/shell.js

@@ -47,9 +47,12 @@ function side(ctx, active) {
   const foot = el("div", "foot");
   const me = el("button", "me");
   me.type = "button";
-  const dot = el("i");
-  dot.setAttribute("aria-hidden", "true");
-  me.append(dot, el("span", "me__nick", `ты: @${ctx.me.nick}`));
+  me.setAttribute("aria-label", `настройки: @${ctx.me.nick}`);
+  const profile = el("img", "me__icon");
+  profile.src = "/icons/profile.svg";
+  profile.alt = "";
+  profile.draggable = false;
+  me.append(profile, el("span", "me__nick", `@${ctx.me.nick}`));
   me.addEventListener("click", () => ctx.go("#/settings"));
   foot.append(me);
   const version = build(ctx.config);

web/sw.js

@@ -7,7 +7,7 @@
 // Имя кэша содержит версию; версия — константа, она меняется при релизе,
 // и старые кэши уходят в activate.
 
-const VERSION = "v8";
+const VERSION = "v9";
 const CACHE = `bare-${VERSION}`;
 
 // Оболочка — всё, из чего клиент поднимается без сети. Список явный:
@@ -37,6 +37,7 @@ const SHELL = [
   "/js/ui/shell.js",
   "/icons/icon.svg",
   "/icons/mark.svg",
+  "/icons/profile.svg",
   "/icons/icon-180.png",
   "/icons/icon-192.png",
   "/icons/icon-512.png",