From cd7e5d16b4f72bdc9a8efede2f75f7e694e5ecba Mon Sep 17 00:00:00 2001
From: NotBigGhost <ivan@arseniev.info>
Date: Fri, 26 Jun 2026 16:43:10 +0300
Subject: [PATCH] =?UTF-8?q?UI:=20=D0=B4=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B3=D1=80=D1=83=D0=BF=D0=BF=D1=8B?=
 =?UTF-8?q?=20=E2=80=94=20=D0=B3=D0=BE=D1=80=D0=B8=D0=B7=D0=BE=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D1=82=D1=83=D0=BC=D0=B1?=
 =?UTF-8?q?=D0=BB=D0=B5=D1=80=D1=8B=20=D0=B2=D0=BC=D0=B5=D1=81=D1=82=D0=BE?=
 =?UTF-8?q?=20=D0=B3=D0=B0=D0=BB=D0=BE=D1=87=D0=B5=D0=BA;=20=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=BE=D0=BA=D0=B0=20=D0=B1=D0=B0=D0=B7=D0=BE=D0=B2=D0=BE?=
 =?UTF-8?q?=D0=B9=20=D0=B8=D0=B3=D1=80=D1=8B=20=D1=81=D0=BA=D1=80=D1=8B?=
 =?UTF-8?q?=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/pages/GroupSettingsPage.tsx | 33 +++++++++++++-----------
 frontend/src/styles/global.css           | 33 ++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/GroupSettingsPage.tsx b/frontend/src/pages/GroupSettingsPage.tsx
index ea05dfc..31a4f5f 100644
--- a/frontend/src/pages/GroupSettingsPage.tsx
+++ b/frontend/src/pages/GroupSettingsPage.tsx
@@ -72,21 +72,24 @@ export function GroupSettingsPage() {
       <div className="card">
         <h3>Дополнения</h3>
         <div className="stack">
-          {(expansions ?? []).map((e) => (
-            <label key={e.id} className="row" style={{ justifyContent: "space-between" }}>
-              <span>
-                {e.name_ru}
-                {e.is_base && <span className="muted small"> (всегда включено)</span>}
-              </span>
-              <input
-                type="checkbox"
-                style={{ width: "auto" }}
-                disabled={e.is_base || !isOwner}
-                checked={e.is_base || selected.has(e.id)}
-                onChange={() => toggle(e.id)}
-              />
-            </label>
-          ))}
+          {(expansions ?? [])
+            .filter((e) => !e.is_base)
+            .map((e) => (
+              <label key={e.id} className="row" style={{ justifyContent: "space-between" }}>
+                <span>{e.name_ru}</span>
+                <span className="switch">
+                  <input
+                    type="checkbox"
+                    disabled={!isOwner}
+                    checked={selected.has(e.id)}
+                    onChange={() => toggle(e.id)}
+                  />
+                  <span className="switch-track">
+                    <span className="switch-thumb" />
+                  </span>
+                </span>
+              </label>
+            ))}
         </div>
         {isOwner && (
           <button className="btn btn-primary" style={{ marginTop: 10 }} onClick={saveExpansions}>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index bb42ee7..21b0ba5 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -92,6 +92,39 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
 
 .error-text { color: var(--danger); font-size: 13px; }
 
+/* Тумблер-переключатель (вкл/выкл) */
+.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 auto; }
+.switch input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.switch-track {
+  display: inline-flex;
+  align-items: center;
+  width: 44px;
+  height: 26px;
+  padding: 2px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.switch-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--text);
+  transition: transform 0.15s ease;
+}
+.switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
+.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); background: #fff; }
+.switch input:disabled + .switch-track { opacity: 0.5; }
+
 .toast {
   position: fixed;
   left: 50%;