From d2c0feafcc0ae8bc62e0204d86c839c964d3b9be Mon Sep 17 00:00:00 2001
From: NotBigGhost <ivan@arseniev.info>
Date: Mon, 13 Jul 2026 17:38:46 +0300
Subject: [PATCH] =?UTF-8?q?UI:=20=D0=B5=D0=B4=D0=B8=D0=BD=D1=8B=D0=B9=20Sw?=
 =?UTF-8?q?itch=20=D0=B4=D0=BB=D1=8F=20=D0=B1=D1=83=D0=BB=D0=B5=D0=B2?=
 =?UTF-8?q?=D1=8B=D1=85=20=D0=BE=D0=BF=D1=86=D0=B8=D0=B9=20=D0=B2=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=81=D1=82=D0=BE=20=D1=81=D0=BC=D0=B5=D1=81=D0=B8=20?=
 =?UTF-8?q?=D1=87=D0=B5=D0=BA=D0=B1=D0=BE=D0=BA=D1=81=D0=BE=D0=B2=20=D0=B8?=
 =?UTF-8?q?=20=D1=81=D0=B2=D0=B8=D1=82=D1=87=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Новый компонент Switch (разметка .switch из global.css). Применён:
- создание группы: дополнения теперь свитчи, как в настройках группы;
- настройки группы: базовые дополнения показываются, как при создании
  (включены, заблокированы, подпись «всегда включено»), а не скрываются;
- админка: «Группировать по группам» и флаг «выбыл» в правке партии.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/components/CreateGroupForm.tsx   |  5 ++-
 frontend/src/components/Switch.tsx            | 27 +++++++++++++++
 frontend/src/pages/GroupSettingsPage.tsx      | 33 +++++++++----------
 frontend/src/pages/admin/AdminMatchEdit.tsx   |  8 ++---
 frontend/src/pages/admin/AdminRecordsPage.tsx |  8 ++---
 5 files changed, 48 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/components/Switch.tsx

diff --git a/frontend/src/components/CreateGroupForm.tsx b/frontend/src/components/CreateGroupForm.tsx
index 9e40252..3c8a524 100644
--- a/frontend/src/components/CreateGroupForm.tsx
+++ b/frontend/src/components/CreateGroupForm.tsx
@@ -4,6 +4,7 @@ import { ApiError } from "../api/client";
 import { useToast } from "../context/ToastContext";
 import { useCreateGroup } from "../hooks/groups";
 import { useExpansions } from "../hooks/reference";
+import { Switch } from "./Switch";
 
 export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
   const { data: expansions } = useExpansions();
@@ -47,9 +48,7 @@ export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
                 {e.name_ru}
                 {e.is_base && <span className="muted small"> (всегда включено)</span>}
               </span>
-              <input
-                type="checkbox"
-                style={{ width: "auto" }}
+              <Switch
                 disabled={e.is_base}
                 checked={e.is_base || selected.has(e.id)}
                 onChange={() => toggle(e.id)}
diff --git a/frontend/src/components/Switch.tsx b/frontend/src/components/Switch.tsx
new file mode 100644
index 0000000..435878c
--- /dev/null
+++ b/frontend/src/components/Switch.tsx
@@ -0,0 +1,27 @@
+/**
+ * Тумблер вкл/выкл (стили .switch в global.css) — единый контрол для булевых опций
+ * (дополнения группы, фильтры, флаги). Вместо нативных чекбоксов.
+ */
+export function Switch({
+  checked,
+  disabled,
+  onChange,
+}: {
+  checked: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+}) {
+  return (
+    <span className="switch">
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(e) => onChange?.(e.target.checked)}
+      />
+      <span className="switch-track">
+        <span className="switch-thumb" />
+      </span>
+    </span>
+  );
+}
diff --git a/frontend/src/pages/GroupSettingsPage.tsx b/frontend/src/pages/GroupSettingsPage.tsx
index 6e82776..c71a0b8 100644
--- a/frontend/src/pages/GroupSettingsPage.tsx
+++ b/frontend/src/pages/GroupSettingsPage.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { ApiError } from "../api/client";
 import { PlayerLink } from "../components/PlayerLink";
 import { Spinner } from "../components/Spinner";
+import { Switch } from "../components/Switch";
 import { MAX_GROUP_SIZE } from "../domain/constants";
 import { useToast } from "../context/ToastContext";
 import { useMe } from "../hooks/auth";
@@ -73,24 +74,20 @@ export function GroupSettingsPage() {
       <div className="card">
         <h3>Дополнения</h3>
         <div className="stack">
-          {(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>
-            ))}
+          {/* Базовые дополнения показываем, как и при создании группы: включены и заблокированы. */}
+          {(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>
+              <Switch
+                disabled={e.is_base || !isOwner}
+                checked={e.is_base || selected.has(e.id)}
+                onChange={() => toggle(e.id)}
+              />
+            </label>
+          ))}
         </div>
         {isOwner && (
           <button className="btn btn-primary" style={{ marginTop: 10 }} onClick={saveExpansions}>
diff --git a/frontend/src/pages/admin/AdminMatchEdit.tsx b/frontend/src/pages/admin/AdminMatchEdit.tsx
index 07eba02..7e81778 100644
--- a/frontend/src/pages/admin/AdminMatchEdit.tsx
+++ b/frontend/src/pages/admin/AdminMatchEdit.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { ApiError } from "../../api/client";
 import { MatchMedia } from "../../components/MatchMedia";
 import { Spinner } from "../../components/Spinner";
+import { Switch } from "../../components/Switch";
 import { WIN_REASONS, type WinReason } from "../../domain/winReasons";
 import { useToast } from "../../context/ToastContext";
 import {
@@ -141,12 +142,7 @@ export function AdminMatchEdit({ matchId, onClose }: { matchId: number; onClose:
                       />
                     </div>
                     <label className="row small" style={{ flex: "0 0 auto", gap: 4 }}>
-                      <input
-                        type="checkbox"
-                        style={{ width: "auto" }}
-                        checked={r.eliminated}
-                        onChange={(e) => upd(i, { eliminated: e.target.checked })}
-                      />
+                      <Switch checked={r.eliminated} onChange={(v) => upd(i, { eliminated: v })} />
                       выбыл
                     </label>
                   </div>
diff --git a/frontend/src/pages/admin/AdminRecordsPage.tsx b/frontend/src/pages/admin/AdminRecordsPage.tsx
index 5364427..7fd1c7a 100644
--- a/frontend/src/pages/admin/AdminRecordsPage.tsx
+++ b/frontend/src/pages/admin/AdminRecordsPage.tsx
@@ -2,6 +2,7 @@ import { Pencil, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { Spinner } from "../../components/Spinner";
+import { Switch } from "../../components/Switch";
 import { useToast } from "../../context/ToastContext";
 import {
   useAdminDeleteMatch,
@@ -112,12 +113,7 @@ export function AdminRecordsPage() {
             ))}
           </select>
           <label className="row" style={{ gap: 8 }}>
-            <input
-              type="checkbox"
-              style={{ width: "auto" }}
-              checked={grouped}
-              onChange={(e) => setGrouped(e.target.checked)}
-            />
+            <Switch checked={grouped} onChange={setGrouped} />
             Группировать по группам
           </label>
         </div>