From 90e216e30bd2efa27d1fafb56422055fc0971761 Mon Sep 17 00:00:00 2001
From: core <core.group@ya.ru>
Date: Mon, 1 Jun 2026 17:36:21 +0500
Subject: [PATCH] settings: restore color-coding for quality presets, pin them
 right
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The SOFT/MEDIUM/HARD selector lost its color coding when it became a
dropdown. Re-apply colors (SOFT red, MEDIUM yellow, HARD white) to the
options and to the select's shown value, and right-align the "Готовый
профиль" label (margin-left:auto) so it clearly sits on the right.

VERSION -> 0.0.122.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 VERSION                   |  2 +-
 frontend/static/app.js    | 10 +++++++---
 frontend/static/style.css |  1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/VERSION b/VERSION
index 674d109..5a05f0a 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.0.121
+0.0.122
diff --git a/frontend/static/app.js b/frontend/static/app.js
index 842a3c6..67e561e 100644
--- a/frontend/static/app.js
+++ b/frontend/static/app.js
@@ -20,6 +20,7 @@ const TR_PRESETS = {
   MEDIUM: { codec: "h264", profile: "baseline", bitrate: "8000k",  keyint: 2, preset: "ultrafast" },
   HARD:   { codec: "h264", profile: "main",     bitrate: "16000k", keyint: 1, preset: "superfast" },
 };
+const TR_PRESET_COLORS = { SOFT: "#e03131", MEDIUM: "#e9c46a", HARD: "#ffffff" };   // цветомаркировка профилей
 function matchPreset(pr) {                          // имя пресета, совпадающего с параметрами
   return Object.keys(TR_PRESETS).find((k) => {
     const p = TR_PRESETS[k];
@@ -1479,9 +1480,10 @@ const Settings = {
       `<option value="${v}"${String(pr[f]) === String(v) ? " selected" : ""}>${t}</option>`).join("") + `</select>`;
     // «Готовый профиль» SOFT/MEDIUM/HARD — выпадающее меню; выставляет все параметры разом
     const qmatch = matchPreset(pr);
-    const qpresetSel = `<select class="qpreset">` +
+    const qcol = (v) => TR_PRESET_COLORS[v] ? ` style="color:${TR_PRESET_COLORS[v]}"` : "";
+    const qpresetSel = `<select class="qpreset"${qcol(qmatch)}>` +
       [["", "— свой —"]].concat(Object.keys(TR_PRESETS).map((k) => [k, k])).map(([v, t]) =>
-        `<option value="${v}"${v === qmatch ? " selected" : ""}>${t}</option>`).join("") + `</select>`;
+        `<option value="${v}"${v === qmatch ? " selected" : ""}${qcol(v)}>${t}</option>`).join("") + `</select>`;
     return (
       `<label>Кодек${sel("codec", [["h264", "H.264"], ["vp9", "VP9"]])}</label>` +
       `<label>Профиль H.264${sel("profile", [["baseline", "baseline"], ["main", "main"], ["high", "high"]])}</label>` +
@@ -1490,7 +1492,7 @@ const Settings = {
       `<label>QP (квантизатор)<input type="number" data-f="qp" min="0" max="51" value="${pr.qp}"></label>` +
       `<label>Интервал ключевых кадров${sel("keyint", [[1, "1 секунда"], [2, "2 секунды"], [5, "5 секунд"]])}</label>` +
       `<label>Пресет (Preset)${sel("preset", [["ultrafast", "Ultrafast"], ["superfast", "Superfast"], ["veryfast", "Veryfast"], ["faster", "Faster"], ["fast", "Fast"], ["medium", "Medium"]])}</label>` +
-      `<label>Готовый профиль${qpresetSel}</label>`
+      `<label class="qpreset-lbl">Готовый профиль${qpresetSel}</label>`
     );
   },
 
@@ -1528,8 +1530,10 @@ const Settings = {
       const syncQuality = () => {
         qpreset.value = matchPreset({ codec: codec.value, profile: prof.value, bitrate: brSel.value,
           keyint: row.querySelector('[data-f="keyint"]').value, preset: row.querySelector('[data-f="preset"]').value });
+        qpreset.style.color = TR_PRESET_COLORS[qpreset.value] || "";
       };
       qpreset.onchange = () => {
+        qpreset.style.color = TR_PRESET_COLORS[qpreset.value] || "";
         const p = TR_PRESETS[qpreset.value];
         if (!p) return;
         const put = (f, v) => { const s = row.querySelector(`[data-f="${f}"]`); if (s) s.value = String(v); };
diff --git a/frontend/static/style.css b/frontend/static/style.css
index 25cf225..30e9d04 100644
--- a/frontend/static/style.css
+++ b/frontend/static/style.css
@@ -345,6 +345,7 @@ input[type="date"], input[type="number"], select {
 .tr-row select { display: block; }
 .tr-row input[type="number"] { display: block; width: 80px; }
 .tr-row select:disabled, .tr-row input:disabled { opacity: .4; cursor: not-allowed; }
+.tr-row label.qpreset-lbl { margin-left: auto; }   /* «Готовый профиль» — прижат к правому краю */
 /* общие пресеты перекодирования (SOFT / MEDIUM / HARD) */
 .tr-presets { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-left: 28px; }
 .tr-preset {