UI: дополнения группы — горизонтальные тумблеры вместо галочек; строка базовой игры скрыта

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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}>

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%;