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

- .btn-block в global.css заменяет 9 повторов style={{width:100%}};
- .badge-live — единый бейдж «идёт» (3 копии inline-стиля);
- незавершённые партии на главной используют стандартный .card,
  как список партий (была единственная карточка на самодельных стилях);
- в списке партий добавлен бейдж 🎲 случайной фракции — как на странице
  партии (раньше в списке он терялся);
- переключатель групп: кнопка «+» подписана «+ Создать группу»
  (по образцу «+ Добавить игрока»), убран пустой span.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/components/CreateGroupForm.tsx   |  2 +-
 frontend/src/components/GroupSwitcher.tsx     | 10 +++-------
 frontend/src/components/InProgressMatches.tsx | 15 +++------------
 frontend/src/components/MatchList.tsx         |  3 ++-
 frontend/src/pages/AccountPage.tsx            |  2 +-
 frontend/src/pages/CreateMatchPage.tsx        |  4 ++--
 frontend/src/pages/MatchDetailPage.tsx        | 11 +++--------
 frontend/src/pages/PublicProfilePage.tsx      |  6 ++----
 frontend/src/pages/admin/AdminLoginPage.tsx   |  2 +-
 frontend/src/pages/admin/AdminMatchEdit.tsx   |  2 +-
 frontend/src/styles/global.css                |  3 +++
 11 files changed, 22 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/CreateGroupForm.tsx b/frontend/src/components/CreateGroupForm.tsx
index 3c8a524..5037bc9 100644
--- a/frontend/src/components/CreateGroupForm.tsx
+++ b/frontend/src/components/CreateGroupForm.tsx
@@ -58,7 +58,7 @@ export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
         </div>
       </div>
       {error && <p className="error-text">{error}</p>}
-      <button className="btn btn-primary" style={{ width: "100%" }} onClick={submit} disabled={createGroup.isPending}>
+      <button className="btn btn-primary btn-block" onClick={submit} disabled={createGroup.isPending}>
         Создать
       </button>
     </div>
diff --git a/frontend/src/components/GroupSwitcher.tsx b/frontend/src/components/GroupSwitcher.tsx
index 067c358..7a7f88c 100644
--- a/frontend/src/components/GroupSwitcher.tsx
+++ b/frontend/src/components/GroupSwitcher.tsx
@@ -21,17 +21,13 @@ export function GroupSwitcher() {
               className={"btn" + (active ? " btn-primary" : "")}
               onClick={() => !active && setActive.mutate(g.id)}
             >
-              {g.name} {active && "✓"} <span className="muted small"></span>
+              {g.name} {active && "✓"}
             </button>
           );
         })}
         {/* Плашка создания новой группы — в одном ряду логики с выбором группы. */}
-        <button
-          className="btn"
-          aria-label="Создать группу"
-          onClick={() => setCreating((v) => !v)}
-        >
-          +
+        <button className="btn" onClick={() => setCreating((v) => !v)}>
+          + Создать группу
         </button>
       </div>
 
diff --git a/frontend/src/components/InProgressMatches.tsx b/frontend/src/components/InProgressMatches.tsx
index 750232e..23b9861 100644
--- a/frontend/src/components/InProgressMatches.tsx
+++ b/frontend/src/components/InProgressMatches.tsx
@@ -18,23 +18,14 @@ export function InProgressMatches({ items }: { items: HomeInProgressMatch[] }) {
           // а интерактивные элементы внутри <button> — невалидная разметка.
           <div
             key={m.id}
-            className="row-between"
+            className="card row-between"
             onClick={() => navigate(`/match/${m.id}`)}
-            style={{
-              width: "100%",
-              textAlign: "left",
-              background: "var(--surface-2)",
-              border: "1px solid var(--border)",
-              borderRadius: "var(--radius-sm)",
-              padding: 12,
-              color: "var(--text)",
-              cursor: "pointer",
-            }}
+            style={{ margin: 0, cursor: "pointer" }}
           >
             <div style={{ minWidth: 0 }}>
               <div className="row" style={{ gap: 8 }}>
                 <b>{m.group_name}</b>
-                <span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
+                <span className="badge badge-live">идёт</span>
               </div>
               <div className="muted small">
                 {formatTime(m.started_at)} · {m.player_count}{" "}
diff --git a/frontend/src/components/MatchList.tsx b/frontend/src/components/MatchList.tsx
index 1e86f14..60b8d9c 100644
--- a/frontend/src/components/MatchList.tsx
+++ b/frontend/src/components/MatchList.tsx
@@ -26,7 +26,7 @@ export function MatchListView({ items }: { items: MatchListItem[] }) {
             <div className="row-between">
               <span className="muted small">{formatDate(m.played_at)}</span>
               {inProgress ? (
-                <span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
+                <span className="badge badge-live">идёт</span>
               ) : (
                 <span className="muted small">
                   {formatDuration(m.duration_minutes)} · {winReasonLabel(m.win_reason)}
@@ -47,6 +47,7 @@ export function MatchListView({ items }: { items: MatchListItem[] }) {
                   </span>
                   <span>{p.nickname}</span>
                   <span className="muted small">· {p.faction_name}</span>
+                  {p.was_random && <span className="badge">🎲</span>}
                 </PlayerLink>
               ))}
             </div>
diff --git a/frontend/src/pages/AccountPage.tsx b/frontend/src/pages/AccountPage.tsx
index 004fbee..14aac89 100644
--- a/frontend/src/pages/AccountPage.tsx
+++ b/frontend/src/pages/AccountPage.tsx
@@ -153,7 +153,7 @@ export function AccountPage() {
 
       {stats && <ProfileStatsCard stats={stats} />}
 
-      <button className="btn btn-danger" style={{ width: "100%" }} onClick={doLogout}>
+      <button className="btn btn-danger btn-block" onClick={doLogout}>
         Выйти
       </button>
     </div>
diff --git a/frontend/src/pages/CreateMatchPage.tsx b/frontend/src/pages/CreateMatchPage.tsx
index 0d443ae..01f0aa9 100644
--- a/frontend/src/pages/CreateMatchPage.tsx
+++ b/frontend/src/pages/CreateMatchPage.tsx
@@ -236,8 +236,8 @@ export function CreateMatchPage() {
       {error && <p className="error-text">{error}</p>}
 
       <button
-        className="btn btn-primary"
-        style={{ width: "100%", marginTop: 12 }}
+        className="btn btn-primary btn-block"
+        style={{ marginTop: 12 }}
         onClick={submit}
         disabled={startMatch.isPending}
       >
diff --git a/frontend/src/pages/MatchDetailPage.tsx b/frontend/src/pages/MatchDetailPage.tsx
index 9858497..f452107 100644
--- a/frontend/src/pages/MatchDetailPage.tsx
+++ b/frontend/src/pages/MatchDetailPage.tsx
@@ -122,7 +122,7 @@ export function MatchDetailPage() {
         <div className="row-between">
           <h2 style={{ margin: 0 }}>{formatDate(match.played_at)}</h2>
           {inProgress ? (
-            <span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
+            <span className="badge badge-live">идёт</span>
           ) : (
             <span className="muted small">{formatDuration(match.duration_minutes)}</span>
           )}
@@ -261,8 +261,7 @@ export function MatchDetailPage() {
               {error && <p className="error-text">{error}</p>}
 
               <button
-                className="btn btn-primary"
-                style={{ width: "100%" }}
+                className="btn btn-primary btn-block"
                 onClick={submitFinish}
                 disabled={finish.isPending}
               >
@@ -274,11 +273,7 @@ export function MatchDetailPage() {
       )}
 
       {canModify && (
-        <button
-          className="btn btn-danger"
-          style={{ width: "100%" }}
-          onClick={() => setConfirmRemove(true)}
-        >
+        <button className="btn btn-danger btn-block" onClick={() => setConfirmRemove(true)}>
           {inProgress ? "Отменить партию" : "Удалить партию"}
         </button>
       )}
diff --git a/frontend/src/pages/PublicProfilePage.tsx b/frontend/src/pages/PublicProfilePage.tsx
index 44098c4..6b5a843 100644
--- a/frontend/src/pages/PublicProfilePage.tsx
+++ b/frontend/src/pages/PublicProfilePage.tsx
@@ -64,8 +64,7 @@ export function PublicProfilePage() {
         <div className="card">
           {groups.length === 1 ? (
             <button
-              className="btn btn-primary"
-              style={{ width: "100%" }}
+              className="btn btn-primary btn-block"
               onClick={() => doInvite(groups[0].id)}
               disabled={invite.isPending}
             >
@@ -74,8 +73,7 @@ export function PublicProfilePage() {
           ) : (
             <>
               <button
-                className="btn btn-primary"
-                style={{ width: "100%" }}
+                className="btn btn-primary btn-block"
                 onClick={() => setPickOpen((v) => !v)}
               >
                 Добавить в группу
diff --git a/frontend/src/pages/admin/AdminLoginPage.tsx b/frontend/src/pages/admin/AdminLoginPage.tsx
index 1c40820..4a11f95 100644
--- a/frontend/src/pages/admin/AdminLoginPage.tsx
+++ b/frontend/src/pages/admin/AdminLoginPage.tsx
@@ -40,7 +40,7 @@ export function AdminLoginPage() {
             <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
           </div>
           {error && <p className="error-text">{error}</p>}
-          <button className="btn btn-primary" style={{ width: "100%" }} onClick={submit} disabled={login.isPending}>
+          <button className="btn btn-primary btn-block" onClick={submit} disabled={login.isPending}>
             Войти
           </button>
         </div>
diff --git a/frontend/src/pages/admin/AdminMatchEdit.tsx b/frontend/src/pages/admin/AdminMatchEdit.tsx
index 7e81778..3a3b96f 100644
--- a/frontend/src/pages/admin/AdminMatchEdit.tsx
+++ b/frontend/src/pages/admin/AdminMatchEdit.tsx
@@ -186,7 +186,7 @@ export function AdminMatchEdit({ matchId, onClose }: { matchId: number; onClose:
 
               {error && <p className="error-text">{error}</p>}
 
-              <button className="btn btn-primary" style={{ width: "100%" }} onClick={save} disabled={update.isPending}>
+              <button className="btn btn-primary btn-block" onClick={save} disabled={update.isPending}>
                 Сохранить изменения
               </button>
             </>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 9937cb1..809e553 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -71,6 +71,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
 .btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
 .btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
 .btn[disabled] { opacity: 0.5; pointer-events: none; }
+.btn-block { width: 100%; }
 
 .row { display: flex; align-items: center; gap: 10px; }
 .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@@ -91,6 +92,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
   border: 1px solid var(--border);
   font-size: 12px;
 }
+/* Бейдж незавершённой партии («идёт») */
+.badge-live { color: var(--accent-2); }
 
 .error-text { color: var(--danger); font-size: 13px; }