From 4dae9cc5b6097d4544233578fd2700073edf264c Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 12:49:04 +0300
Subject: [PATCH 01/46] Migrate React frontend off react-bootstrap onto Mantine
 (Phase 0/1)

Infra (Phase 0): add @mantine/core + @mantine/hooks v9, PostCSS setup,
CSS-layer coexistence with Bootstrap, dark theme, MantineProvider on all
React roots. Spacing scale matched to Bootstrap-4 spacers.

Components (Phase 1): replace all react-bootstrap components with Mantine
equivalents behind compatible wrappers (CbModal, PopoverStickOnHover);
remove the react-bootstrap dependency. Global Bootstrap CSS stays for
.heex templates (Phase 3).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 162 ++++++++
 apps/codebattle/assets/css/style.scss         |   4 +
 .../js/__tests__/PopoverStickOnHover.test.tsx |  38 +-
 .../js/__tests__/RootContainer.test.tsx       |   4 +-
 .../TournamentMainControlButtons.test.tsx     |  10 +-
 .../assets/js/__tests__/UserSettings.test.tsx |  47 +--
 .../assets/js/__tests__/helpers/mantine.tsx   |  13 +
 apps/codebattle/assets/js/inertia.tsx         |   3 +-
 .../js/widgets/components/AccordeonBox.tsx    |  17 +-
 .../js/widgets/components/BootstrapModal.tsx  |  25 --
 .../assets/js/widgets/components/CbModal.tsx  | 122 ++++++
 .../components/FeedbackAlertNotification.tsx  |  10 +-
 .../js/widgets/components/FeedbackWidget.tsx  |  20 +-
 .../widgets/components/InvitesContainer.tsx   | 106 +++---
 .../components/OverlayTriggerCompat.tsx       | 230 ------------
 .../components/PlayerInsightsModal/index.tsx  |  10 +-
 .../components/PopoverStickOnHover.tsx        | 100 ++---
 .../js/widgets/components/ResultIcon.tsx      |  11 +-
 .../assets/js/widgets/components/Rooms.tsx    |  45 +--
 .../assets/js/widgets/components/UserInfo.tsx |   8 +-
 apps/codebattle/assets/js/widgets/index.tsx   |  52 ++-
 .../js/widgets/pages/admin/AdminWidget.tsx    |   4 +-
 .../event/EventStageConfirmationModal.tsx     |   4 +-
 .../js/widgets/pages/game/AnimationModal.tsx  |   8 +-
 .../pages/game/CodebattleSliderBar.tsx        |  18 +-
 .../widgets/pages/game/GameActionButtons.tsx  |  96 ++---
 .../js/widgets/pages/game/GameResult.tsx      |  11 +-
 .../js/widgets/pages/game/GameResultIcon.tsx  |  19 +-
 .../game/NextStageGroupTournamentModal.tsx    |   6 +-
 .../pages/game/PremiumRestrictionModal.tsx    |  14 +-
 .../pages/game/TaskDescriptionModal.tsx       |  14 +-
 .../pages/game/TaskLanguageSelection.tsx      |  35 +-
 .../pages/game/TournamentAwardModal.tsx       |   6 +-
 .../pages/game/TournamentStatisticsModal.tsx  |   4 +-
 .../js/widgets/pages/game/VimModeButton.tsx   |   1 -
 .../pages/headToHeadPage/HeadToHeadPage.tsx   |   5 +-
 .../js/widgets/pages/lobby/Announcement.tsx   |   3 -
 .../widgets/pages/lobby/ChatActionModal.tsx   |   4 +-
 .../js/widgets/pages/lobby/Leaderboard.tsx    |   4 +-
 .../js/widgets/pages/lobby/LobbyWidget.tsx    |   4 +-
 .../widgets/pages/lobby/TournamentModal.tsx   |   8 +-
 .../js/widgets/pages/schedule/EventModal.tsx  |   8 +-
 .../widgets/pages/settings/UserSettings.tsx   |  15 +-
 .../pages/settings/UserSettingsForm.tsx       |  83 +++--
 .../widgets/pages/tournament/DetailsModal.tsx |  24 +-
 .../pages/tournament/EditTournament.tsx       |  13 +-
 .../tournament/MatchConfirmationModal.tsx     |  30 +-
 .../StartRoundConfirmationModal.tsx           |  21 +-
 .../tournament/TournamentDescriptionModal.tsx |  21 +-
 .../TournamentMainControlButtons.tsx          |  51 ++-
 .../pages/tournament/UsersMatchList.tsx       |  32 +-
 apps/codebattle/assets/js/widgets/ui/alert.ts |  13 +
 apps/codebattle/assets/js/widgets/ui/theme.ts |  63 ++++
 .../assets/js/widgets/ui/withMantine.tsx      |  14 +
 apps/codebattle/package.json                  |   5 +-
 apps/codebattle/pnpm-lock.yaml                | 351 ++++++++++++++----
 apps/codebattle/postcss.config.js             |  14 +-
 apps/codebattle/vitest.setup.ts               |  28 ++
 58 files changed, 1174 insertions(+), 917 deletions(-)
 create mode 100644 apps/codebattle/assets/MANTINE_MIGRATION.md
 create mode 100644 apps/codebattle/assets/js/__tests__/helpers/mantine.tsx
 delete mode 100644 apps/codebattle/assets/js/widgets/components/BootstrapModal.tsx
 create mode 100644 apps/codebattle/assets/js/widgets/components/CbModal.tsx
 delete mode 100644 apps/codebattle/assets/js/widgets/components/OverlayTriggerCompat.tsx
 create mode 100644 apps/codebattle/assets/js/widgets/ui/alert.ts
 create mode 100644 apps/codebattle/assets/js/widgets/ui/theme.ts
 create mode 100644 apps/codebattle/assets/js/widgets/ui/withMantine.tsx

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
new file mode 100644
index 000000000..ede20d952
--- /dev/null
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -0,0 +1,162 @@
+# Bootstrap → Mantine migration
+
+Living spec for moving the React frontend off Bootstrap/react-bootstrap onto
+Mantine. Phases 0–1 are **done**; Phases 2–3 are **planned** and described here
+in enough detail to resume without re-discovery.
+
+## Scope & standing decisions
+
+- **React only.** Global Bootstrap CSS (`bootstrap@4.6.2`, imported in
+  `assets/css/style.scss` and `assets/js/app.ts`) **stays** — 53 `.heex` server
+  templates still use Bootstrap utility classes. Do **not** remove the
+  `bootstrap` dependency or its CSS until the heex templates are migrated
+  (Phase 3, out of current scope).
+- **Idiomatic Mantine.** Prefer Mantine layout primitives (`Group`/`Stack`/
+  `Flex`/`Box`) + style props (`mb`, `p`, `c`) over porting utility classes 1:1.
+- **Incremental, per-widget.** One widget/page per PR, leaf → container, verify
+  each in the browser before merging.
+- **Mantine version:** `@mantine/core` + `@mantine/hooks` v9.
+
+## Current status
+
+| Phase | What | Status |
+|------|------|--------|
+| 0 | Infra: Mantine deps, PostCSS, CSS-layer coexistence, theme, `MantineProvider` on all roots | ✅ done |
+| 1 | Replace `react-bootstrap` **components** with Mantine; remove `react-bootstrap` dep | ✅ done |
+| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | ⬜ planned |
+| 3 | Migrate `.heex` templates; fully remove Bootstrap CSS + `bootstrap` dep | ⬜ planned (out of current scope) |
+
+## Coexistence model (how Bootstrap + Mantine live together)
+
+- Mantine core styles are imported as **`@mantine/core/styles.layer.css`** (in
+  `style.scss`), which wraps everything in `@layer mantine`. Unlayered Bootstrap
+  always wins on conflicts, so existing Bootstrap-styled UI is unaffected.
+- Because Bootstrap wins, Mantine components that also carry Bootstrap/custom
+  classes (e.g. Alerts keeping `.alert-dark-theme`, Tables keeping `.table`) get
+  their look from those classes. Phase 2 removes the classes and lets Mantine
+  style them.
+
+## Key files (Phase 0/1 infra)
+
+- `assets/js/widgets/ui/theme.ts` — Mantine theme. Custom colors `cbSecondary`
+  (#3a3f50), `cbSuccess` (#46a077), `brand` (orange #ee3737). **Spacing scale is
+  matched to Bootstrap-4 spacers**: `xs=.25rem, sm=.5rem, md=1rem, lg=1.5rem,
+  xl=3rem` — so `mb-2 → mb="sm"`, `p-3 → p="md"`, etc. keep the same rhythm.
+- `assets/js/widgets/ui/withMantine.tsx` — provider wrapper; applied to every
+  React root in `widgets/index.tsx` and the Inertia root in `inertia.tsx`.
+  `forceColorScheme="dark"` (single baked-in dark look, no runtime toggle).
+- `assets/js/widgets/ui/alert.ts` — `bootstrapAlertColor(variant)` maps BS alert
+  variants → Mantine colors.
+- `assets/js/widgets/components/CbModal.tsx` — app modal wrapper: keeps a compound
+  API (`Modal` + `Modal.Header/Title/Body/Footer`) but renders a Mantine `Modal`
+  underneath, so ~21 modal call sites are untouched. Default `size="lg"`
+  (Bootstrap's `.modal-dialog { min-width: 700px }` no longer applies to Mantine's
+  DOM).
+- `assets/js/widgets/components/PopoverStickOnHover.tsx` — Mantine `HoverCard`
+  behind the original API; exports `Placement` (= `FloatingPosition`).
+
+## Gotchas / learnings (read before Phase 2)
+
+1. **Mantine v9 components throw without `MantineProvider`.** Any test that
+   mounts a Mantine component must wrap in `MantineTestProvider`
+   (`assets/js/__tests__/helpers/mantine.tsx`). The app itself is fine — all
+   roots use `withMantine`.
+2. **jsdom polyfills** for Mantine are in `vitest.setup.ts`: `window.matchMedia`
+   and `ResizeObserver`. Keep them.
+3. **Portals in tests.** Mantine `Modal`/`Menu`/`HoverCard`/`Popover` render in a
+   portal. Query with `screen.*` and use async `findBy*` for open-on-interaction
+   content (modals/menus have mount transitions — sync `getByRole` races).
+4. **`@/ui/*` path alias is broken in Vite's resolver** (only specific `@/`
+   subpaths are aliased; `ui` isn't). Import theme/helpers via **relative paths**
+   (`../ui/...`), not `@/ui/...`. tsc accepts `@/*` but Vite/vitest will fail to
+   resolve.
+5. **Custom-event button theming.** `cb-custom-event-btn-*` classes (in
+   `external.scss`/`custom.scss`) are event-branded color overrides used across
+   ~8 files, applied conditionally via `className` on Mantine `Button`s. They are
+   pure color overrides and still win over Mantine's layer — handle them as a set
+   in Phase 2, don't drop them piecemeal.
+6. **Menu items only render when open.** react-bootstrap `Dropdown.Menu`
+   rendered items always; Mantine `Menu.Dropdown` mounts on open. Use
+   `keepMounted` if a test/behavior depends on items being in the DOM while
+   closed (see `UserSettingsForm` language menu).
+
+---
+
+## Phase 2 — Utility classes → idiomatic Mantine (the big one)
+
+**Goal:** remove Bootstrap utility classes from React components, replacing them
+with Mantine primitives + style props. ~244 files; work per-widget.
+
+### Conversion vocabulary
+
+| Bootstrap | Mantine |
+|-----------|---------|
+| `d-flex` + `align-items-*`/`justify-content-*` | `<Group>` (row) / `<Flex>` with `align`/`justify` |
+| `d-flex flex-column` | `<Stack>` (or `<Flex direction="column">`) |
+| `row` / `col-*` / `col-md-4` | `<Grid>` + `<Grid.Col span={{ base: 12, md: 4 }}>` or `<SimpleGrid>` |
+| spacing `mb-2 p-3 mr-2 px-1 py-2 …` | style props `mb="sm" p="md" mr="sm"` (scale already matched) |
+| `text-center` / `text-white` / `text-muted` | `<Text ta="center" c="white">`, `c="dimmed"` |
+| `font-weight-bold` | `fw={700}` |
+| `card` / `card-body` / `card-header` | `<Card>` / `<Card.Section>` or `<Paper withBorder>` |
+| `badge badge-*` | `<Badge color=…>` |
+| `border` / `rounded` / `rounded-lg` / `shadow` | `withBorder`, `radius="md"`, `shadow="sm"` |
+| `w-100` / `h-100` | `w="100%"` / `h="100%"` |
+| `d-none` (responsive show/hide) | `visibleFrom`/`hiddenFrom` or `display` style prop |
+| `btn btn-secondary cb-btn-secondary` (native buttons left from Phase 1) | `<Button color="cbSecondary">` |
+| custom `bg-panel` / `cb-border-color` etc. | theme tokens or a small CSS module |
+
+### Frequency (helps prioritize; from Phase-0 audit)
+
+`d-flex` 436, `border` 201, `rounded` 200, `btn` 196, `align-items-center` 187,
+`text-white` 175, `text-muted` 151, `flex-column` 151, `text-center` 138,
+`w-100` 117, `p-3` 107, `mb-2` 106, `row` 94, `card` 89, `justify-content-between`
+83, `col-12` 74, `h-100` 66 …
+
+### Custom classes that need real homes (not just utility swaps)
+
+Defined in `assets/css/style.scss` (~4.7k lines) and `external.scss`/`custom.scss`.
+These are **design**, not utilities — port to the Mantine theme or CSS modules,
+don't inline:
+`cb-bg-panel`, `cb-bg-highlight-panel`, `cb-border-color`, `cb-btn-secondary`,
+`cb-btn-success`, `cb-btn-outline-secondary`, `cb-custom-event-btn-*`,
+`cb-rounded`, `cb-text`/`cb-text-light`, `alert-dark-theme`, the `cb-tournament-*`
+/ `cb-schedule-*` / `cb-settings-*` / `cb-replayer-*` component styles.
+
+### Sequencing (leaf → container, one PR each)
+
+1. Shared leaf components in `widgets/components/` (buttons already Mantine;
+   convert their surrounding layout, badges, cards).
+2. Pages, roughly by risk: `settings`, `profile`, `lobby`, `registration`,
+   `tournament` / `tournamentPlayer` / `groupTournament`, `game` / `gameMl`,
+   `admin`, `event`, then `schedule`, `seasonsPage`, `hallOfFamePage`,
+   `headToHeadPage`, `taskPreview`.
+3. Per slice: convert → wrap affected tests in `MantineTestProvider` + fix
+   portal/`findBy` queries → **verify in browser** (dev server) → merge.
+
+### Definition of done (Phase 2)
+
+- `grep -rE "className=.*(d-flex|btn|col-|row|mb-|text-white|card|badge)"` over
+  `assets/js` returns only intentional leftovers (documented).
+- All remaining Bootstrap-class consumers are `.heex` templates (Phase 3).
+
+---
+
+## Phase 3 — heex templates + full Bootstrap removal (out of current scope)
+
+1. Migrate the 53 `.heex` templates off Bootstrap classes (Phoenix/Elixir side).
+2. Remove `import 'bootstrap'` (`app.ts`) and `@import 'bootstrap/scss/bootstrap'`
+   (`style.scss`); drop the `bootstrap` dependency.
+3. Enable `postcss-simple-vars` (Mantine breakpoint vars) — deferred in Phase 0
+   because it choked on the compiled Bootstrap bundle. Only needed once we author
+   Mantine CSS modules with `$mantine-breakpoint-*` media queries; scope it so it
+   doesn't process legacy CSS.
+4. Delete dead custom SCSS once nothing references it.
+
+## Dev/build notes
+
+- Frontend deps + build run **inside the `codebattle-app-1` container**
+  (`docker exec -w /app/apps/codebattle codebattle-app-1 …`). The pnpm store is at
+  the container path `/app/.pnpm-store`; running `pnpm install`/`add`/`remove` on
+  the host errors on a store-path mismatch and would purge `node_modules`.
+- Verify a slice: `pnpm run typecheck`, `pnpm exec vitest run`, `pnpm run build`,
+  `pnpm run lint-fix:js` (oxfmt + oxlint).
diff --git a/apps/codebattle/assets/css/style.scss b/apps/codebattle/assets/css/style.scss
index dd29de173..ae3692763 100644
--- a/apps/codebattle/assets/css/style.scss
+++ b/apps/codebattle/assets/css/style.scss
@@ -87,6 +87,10 @@ $cb-rookie-bg: $iron;
 }
 
 @import 'bootstrap/scss/bootstrap';
+// Mantine core styles are wrapped in `@layer mantine`. Unlayered Bootstrap above
+// always wins on conflicts, so existing Bootstrap-styled UI is unaffected while
+// Mantine components still get their own styling.
+@import '@mantine/core/styles.layer.css';
 @import 'nprogress/nprogress.css';
 @import 'gamePreview';
 @import 'skeleton';
diff --git a/apps/codebattle/assets/js/__tests__/PopoverStickOnHover.test.tsx b/apps/codebattle/assets/js/__tests__/PopoverStickOnHover.test.tsx
index 918c9635c..7a0ca17ff 100644
--- a/apps/codebattle/assets/js/__tests__/PopoverStickOnHover.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/PopoverStickOnHover.test.tsx
@@ -1,37 +1,35 @@
 import React from 'react';
 
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
 import PopoverStickOnHover from '../widgets/components/PopoverStickOnHover';
+import { theme } from '../widgets/ui/theme';
 
-describe('PopoverStickOnHover', () => {
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  test('keeps the delayed hover timer across parent rerenders', () => {
-    vi.useFakeTimers();
+const renderWithMantine = (ui: React.ReactNode) =>
+  render(
+    <MantineProvider theme={theme} forceColorScheme="dark">
+      {ui}
+    </MantineProvider>,
+  );
 
+describe('PopoverStickOnHover', () => {
+  test('reveals the popover content when hovering the target', async () => {
+    const user = userEvent.setup();
     const component = <span>user details</span>;
-    const view = render(
-      <PopoverStickOnHover id="user-info" delay={400} component={component}>
-        <button type="button">Ada</button>
-      </PopoverStickOnHover>,
-    );
 
-    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Ada' }));
-
-    view.rerender(
-      <PopoverStickOnHover id="user-info" delay={400} component={component}>
+    renderWithMantine(
+      <PopoverStickOnHover id="user-info" delay={0} component={component}>
         <button type="button">Ada</button>
       </PopoverStickOnHover>,
     );
 
-    act(() => vi.advanceTimersByTime(399));
     expect(screen.queryByText('user details')).not.toBeInTheDocument();
 
-    act(() => vi.advanceTimersByTime(1));
-    expect(screen.getByText('user details')).toBeInTheDocument();
+    await user.hover(screen.getByRole('button', { name: 'Ada' }));
+
+    expect(await screen.findByText('user details')).toBeInTheDocument();
   });
 });
diff --git a/apps/codebattle/assets/js/__tests__/RootContainer.test.tsx b/apps/codebattle/assets/js/__tests__/RootContainer.test.tsx
index 237d72213..f5a0a1cc5 100644
--- a/apps/codebattle/assets/js/__tests__/RootContainer.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/RootContainer.test.tsx
@@ -16,6 +16,8 @@ import task, { config as taskConfig } from '../widgets/machines/task';
 import RootContainer from '../widgets/pages/RoomWidget';
 import reducers from '../widgets/slices';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('pixelmatch', () => ({ default: () => {} }));
 
 vi.mock('monaco-editor', () => ({
@@ -231,7 +233,7 @@ editor.initial = 'idle';
 
 const setup = (jsx: ReactElement) => ({
   user: userEvent.setup(),
-  ...render(jsx),
+  ...render(<MantineTestProvider>{jsx}</MantineTestProvider>),
 });
 
 test('rendering preview game component', async () => {
diff --git a/apps/codebattle/assets/js/__tests__/TournamentMainControlButtons.test.tsx b/apps/codebattle/assets/js/__tests__/TournamentMainControlButtons.test.tsx
index f7c903af6..1582ef815 100644
--- a/apps/codebattle/assets/js/__tests__/TournamentMainControlButtons.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/TournamentMainControlButtons.test.tsx
@@ -6,6 +6,8 @@ import { Provider } from 'react-redux';
 
 import TournamentMainControlButtons from '../widgets/pages/tournament/TournamentMainControlButtons';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('@fortawesome/react-fontawesome', () => ({
   FontAwesomeIcon: 'img',
 }));
@@ -45,9 +47,11 @@ function renderComponent(props = {}) {
   };
 
   return render(
-    <Provider store={store}>
-      <TournamentMainControlButtons {...defaultProps} {...props} />
-    </Provider>,
+    <MantineTestProvider>
+      <Provider store={store}>
+        <TournamentMainControlButtons {...defaultProps} {...props} />
+      </Provider>
+    </MantineTestProvider>,
   );
 }
 
diff --git a/apps/codebattle/assets/js/__tests__/UserSettings.test.tsx b/apps/codebattle/assets/js/__tests__/UserSettings.test.tsx
index 763d88a7f..399242710 100644
--- a/apps/codebattle/assets/js/__tests__/UserSettings.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/UserSettings.test.tsx
@@ -1,13 +1,15 @@
 import '@testing-library/jest-dom';
 import { configureStore, combineReducers } from '@reduxjs/toolkit';
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React, { type ReactElement, type ReactNode } from 'react';
+import React, { type ReactElement } from 'react';
 import { Provider } from 'react-redux';
 
 import UserSettings from '../widgets/pages/settings';
 import reducers from '../widgets/slices';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('@fortawesome/react-fontawesome', () => ({
   FontAwesomeIcon: () => <span aria-hidden="true" />,
 }));
@@ -16,23 +18,6 @@ vi.mock('calcite-react/Slider', () => ({ default: 'input' }));
 vi.mock('../widgets/components/LanguageIcon', () => ({
   default: ({ lang }: { lang?: string }) => <span data-testid={`language-icon-${lang}`} />,
 }));
-vi.mock('react-bootstrap/Alert', () => ({
-  __esModule: true,
-  default: ({
-    children,
-    variant,
-    show,
-  }: {
-    children?: ReactNode;
-    variant?: string;
-    show?: boolean;
-  }) =>
-    show ? (
-      <div role="alert" className={`alert-${variant}`}>
-        {children}
-      </div>
-    ) : null,
-}));
 
 vi.mock('../i18n', () => ({
   __esModule: true,
@@ -109,7 +94,7 @@ describe('UserSettings test cases', () => {
   function setup(jsx: ReactElement) {
     return {
       user: userEvent.setup(),
-      ...render(jsx),
+      ...render(<MantineTestProvider>{jsx}</MantineTestProvider>),
     };
   }
 
@@ -316,17 +301,15 @@ describe('UserSettings test cases', () => {
     });
   });
 
-  test('shows language icons in the settings language menu', async () => {
-    const { getByTestId, getAllByTestId, user } = setup(
+  test('shows language icons in the settings language menu', () => {
+    setup(
       <Provider store={store}>
         <UserSettings />
       </Provider>,
     );
 
-    await user.click(getByTestId('code-langSelect'));
-
-    expect(getAllByTestId('language-icon-js').length).toBeGreaterThan(0);
-    expect(getAllByTestId('language-icon-python').length).toBeGreaterThan(0);
+    expect(screen.getAllByTestId('language-icon-js').length).toBeGreaterThan(0);
+    expect(screen.getAllByTestId('language-icon-python').length).toBeGreaterThan(0);
   });
 
   test('changes a password without sending password fields to the settings endpoint', async () => {
@@ -490,7 +473,7 @@ describe('UserSettings test cases', () => {
   });
 
   test('archives the account only after typing the confirmation text', async () => {
-    const { getByLabelText, getByRole, user } = setup(
+    const { getByRole, user } = setup(
       <Provider store={store}>
         <UserSettings />
       </Provider>,
@@ -499,16 +482,16 @@ describe('UserSettings test cases', () => {
 
     await user.click(archiveButton);
     expect(fetchMock).not.toHaveBeenCalled();
-    expect(getByRole('dialog')).toBeInTheDocument();
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
 
-    const confirmButton = getByRole('button', { name: 'Archive permanently' });
+    const confirmButton = screen.getByRole('button', { name: 'Archive permanently' });
     expect(confirmButton).toBeDisabled();
 
-    await user.type(getByLabelText('Type ARCHIVE to confirm'), 'archive');
+    await user.type(screen.getByLabelText('Type ARCHIVE to confirm'), 'archive');
     expect(confirmButton).toBeDisabled();
 
-    await user.clear(getByLabelText('Type ARCHIVE to confirm'));
-    await user.type(getByLabelText('Type ARCHIVE to confirm'), 'ARCHIVE');
+    await user.clear(screen.getByLabelText('Type ARCHIVE to confirm'));
+    await user.type(screen.getByLabelText('Type ARCHIVE to confirm'), 'ARCHIVE');
     expect(confirmButton).toBeEnabled();
 
     fetchMock.mockImplementationOnce(() => new Promise(() => {}));
diff --git a/apps/codebattle/assets/js/__tests__/helpers/mantine.tsx b/apps/codebattle/assets/js/__tests__/helpers/mantine.tsx
new file mode 100644
index 000000000..bbb00e5f8
--- /dev/null
+++ b/apps/codebattle/assets/js/__tests__/helpers/mantine.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { MantineProvider } from '@mantine/core';
+
+import { theme } from '../../widgets/ui/theme';
+
+// Wraps a subtree in the app's MantineProvider for tests. Mantine v9 components
+// throw without a provider in the tree, so any test that mounts one must use this.
+export const MantineTestProvider = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider theme={theme} forceColorScheme="dark">
+    {children}
+  </MantineProvider>
+);
diff --git a/apps/codebattle/assets/js/inertia.tsx b/apps/codebattle/assets/js/inertia.tsx
index 1b361a4db..c68d6eb6f 100644
--- a/apps/codebattle/assets/js/inertia.tsx
+++ b/apps/codebattle/assets/js/inertia.tsx
@@ -4,6 +4,7 @@ import { createInertiaApp, router } from '@inertiajs/react';
 import { createRoot } from 'react-dom/client';
 
 import { setPageProps } from './inertia/pageProps';
+import { withMantine } from './widgets/ui/withMantine';
 
 type InertiaPageModule = {
   default: ComponentType;
@@ -78,7 +79,7 @@ export const initializeInertiaApp = () => {
     },
     setup({ App, el, props }) {
       setPageProps(props.initialPage.props);
-      createRoot(el).render(<App {...props} />);
+      createRoot(el).render(withMantine(<App {...props} />));
     },
   });
 };
diff --git a/apps/codebattle/assets/js/widgets/components/AccordeonBox.tsx b/apps/codebattle/assets/js/widgets/components/AccordeonBox.tsx
index 943a3ff51..ccf744066 100644
--- a/apps/codebattle/assets/js/widgets/components/AccordeonBox.tsx
+++ b/apps/codebattle/assets/js/widgets/components/AccordeonBox.tsx
@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@mantine/core';
 import cn from 'classnames';
 import uniqueId from 'lodash/uniqueId';
-import Tooltip from 'react-bootstrap/Tooltip';
-
-import OverlayTrigger from '@/components/OverlayTriggerCompat';
 
 import i18n from '../../i18n';
 import statusColorMap from '../config/statusColor';
@@ -199,18 +197,13 @@ function SubMenu({
             <span className={`badge badge-${statusColor} mr-3 ${fontClassName}`}>
               {assert.status}
             </span>
-            <OverlayTrigger
-              overlay={<Tooltip id={String(assert.id)}>{i18n.t('Execution Time')}</Tooltip>}
-              placement="top"
-            >
-              {executionTime !== undefined && Number(executionTime) !== 0 ? (
+            {executionTime !== undefined && Number(executionTime) !== 0 ? (
+              <Tooltip label={i18n.t('Execution Time')} position="top" withArrow>
                 <span className={`badge badge-secondary mr-3 ${fontClassName}`}>
                   {executionTime}
                 </span>
-              ) : (
-                <></>
-              )}
-            </OverlayTrigger>
+              </Tooltip>
+            ) : null}
             {assert.output && (
               <button
                 className="btn btn-sm btn-outline-info badge rounded-lg"
diff --git a/apps/codebattle/assets/js/widgets/components/BootstrapModal.tsx b/apps/codebattle/assets/js/widgets/components/BootstrapModal.tsx
deleted file mode 100644
index e12cb3be8..000000000
--- a/apps/codebattle/assets/js/widgets/components/BootstrapModal.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import RBModal, { type ModalProps } from 'react-bootstrap/Modal';
-import ModalDialog from 'react-bootstrap/ModalDialog';
-
-const BootstrapModal = React.forwardRef<HTMLDivElement, ModalProps>(
-  ({ dialogAs, ...props }, ref) => (
-    <RBModal ref={ref} dialogAs={dialogAs || ModalDialog} {...props} />
-  ),
-) as React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>> & {
-  Body: typeof RBModal.Body;
-  Header: typeof RBModal.Header;
-  Title: typeof RBModal.Title;
-  Footer: typeof RBModal.Footer;
-  Dialog: typeof RBModal.Dialog;
-};
-
-BootstrapModal.displayName = 'BootstrapModal';
-BootstrapModal.Body = RBModal.Body;
-BootstrapModal.Header = RBModal.Header;
-BootstrapModal.Title = RBModal.Title;
-BootstrapModal.Footer = RBModal.Footer;
-BootstrapModal.Dialog = RBModal.Dialog;
-
-export default BootstrapModal;
diff --git a/apps/codebattle/assets/js/widgets/components/CbModal.tsx b/apps/codebattle/assets/js/widgets/components/CbModal.tsx
new file mode 100644
index 000000000..aeb06e096
--- /dev/null
+++ b/apps/codebattle/assets/js/widgets/components/CbModal.tsx
@@ -0,0 +1,122 @@
+import React, { type CSSProperties, type ReactNode } from 'react';
+
+import { Box, Modal as MantineModal } from '@mantine/core';
+import cn from 'classnames';
+
+// App modal wrapper: exposes a compound API (<CbModal>, CbModal.Header/Title/
+// Body/Footer) over Mantine's Modal so call sites read as a single modal unit.
+interface CbModalProps {
+  show?: boolean;
+  onHide?: () => void;
+  centered?: boolean;
+  backdrop?: boolean | 'static';
+  keyboard?: boolean;
+  size?: string;
+  className?: string;
+  contentClassName?: string;
+  dialogClassName?: string;
+  children?: ReactNode;
+}
+
+interface HeaderProps {
+  closeButton?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+interface TitleProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+interface SectionProps {
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+}
+
+function Header({ closeButton, className, children }: HeaderProps) {
+  return (
+    <MantineModal.Header className={className}>
+      {children}
+      {closeButton && <MantineModal.CloseButton />}
+    </MantineModal.Header>
+  );
+}
+
+function Title({ className, children }: TitleProps) {
+  return <MantineModal.Title className={className}>{children}</MantineModal.Title>;
+}
+
+function Body({ className, style, children }: SectionProps) {
+  return (
+    <MantineModal.Body className={className} style={style}>
+      {children}
+    </MantineModal.Body>
+  );
+}
+
+// Mantine has no modal footer; render a right-aligned, top-bordered row.
+function Footer({ className, style, children }: SectionProps) {
+  return (
+    <Box
+      className={className}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: 'var(--mantine-spacing-sm)',
+        padding: 'var(--mantine-spacing-md)',
+        borderTop: '1px solid var(--mantine-color-default-border)',
+        ...style,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+interface CbModalComponent extends React.FC<CbModalProps> {
+  Header: typeof Header;
+  Title: typeof Title;
+  Body: typeof Body;
+  Footer: typeof Footer;
+}
+
+const noop = () => { };
+
+const CbModal = (({
+  show,
+  onHide,
+  centered,
+  backdrop,
+  keyboard,
+  size,
+  className,
+  contentClassName,
+  dialogClassName,
+  children,
+}: CbModalProps) => (
+  <MantineModal.Root
+    opened={!!show}
+    onClose={onHide ?? noop}
+    centered={centered}
+    size={size ?? 'lg'}
+    closeOnClickOutside={backdrop !== 'static'}
+    closeOnEscape={keyboard !== false}
+    className={className}
+  >
+    <MantineModal.Overlay />
+    <MantineModal.Content className={cn(contentClassName, dialogClassName)}>
+      {children}
+    </MantineModal.Content>
+  </MantineModal.Root>
+)) as CbModalComponent;
+
+CbModal.displayName = 'CbModal';
+CbModal.Header = Header;
+CbModal.Title = Title;
+CbModal.Body = Body;
+CbModal.Footer = Footer;
+
+export default CbModal;
diff --git a/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.tsx b/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.tsx
index ca423f574..6e0328f46 100644
--- a/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.tsx
+++ b/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.tsx
@@ -1,13 +1,14 @@
 import React, { useCallback } from 'react';
 
+import { Alert } from '@mantine/core';
 import isEmpty from 'lodash/isEmpty';
-import Alert, { type AlertProps } from 'react-bootstrap/Alert';
 import { useDispatch, useSelector } from 'react-redux';
 
 import i18n from '../../i18n';
 import AlertCodes from '../config/alertCodes';
 import { gameAlertsSelector } from '../selectors/index';
 import { actions } from '../slices';
+import { bootstrapAlertColor } from '../ui/alert';
 
 interface Notification {
   status?: string;
@@ -54,11 +55,12 @@ function FeedbackAlertNotification() {
 
     return (
       <Alert
-        dismissible
+        withCloseButton
         onClose={() => handleClose(key)}
         key={key}
-        variant={result.status as AlertProps['variant']}
-        className="row mb-0 rounded-0 alert alert-info alert-dismissible fade show alert-dark-theme"
+        color={bootstrapAlertColor(result.status)}
+        variant="light"
+        className={`row mb-0 rounded-0 alert alert-${result.status} show alert-dark-theme`}
       >
         {result.message}
       </Alert>
diff --git a/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx b/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
index 01fcc6af5..c11361a05 100644
--- a/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
+++ b/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, memo, useMemo, useState } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Button from 'react-bootstrap/Button';
+import { Button } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
 import i18n from '../../i18n';
@@ -9,7 +9,7 @@ import AlertCodes from '../config/alertCodes';
 import { currentUserNameSelector } from '../selectors/index';
 import { actions } from '../slices';
 
-import Modal from './BootstrapModal';
+import Modal from './CbModal';
 
 interface FeedbackPayload {
   attachments: {
@@ -108,7 +108,7 @@ function FeedbackWidget() {
         {i18n.t('Feedback')}
       </button>
       {isOpen && (
-        <Modal centered show={isOpen} onHide={closeModal} contentClassName="cb-bg-panel cb-text">
+        <Modal centered show={isOpen} onHide={closeModal} contentClassName="cb-text">
           <form onSubmit={onSubmit}>
             <Modal.Header className="cb-border-color" closeButton>
               <Modal.Title>{i18n.t('Send feedback')}</Modal.Title>
@@ -126,11 +126,10 @@ function FeedbackWidget() {
                     <button
                       key={option}
                       type="button"
-                      className={`btn btn-sm cb-rounded mr-2 mb-2 ${
-                        status === option
+                      className={`btn btn-sm cb-rounded mr-2 mb-2 ${status === option
                           ? 'btn-secondary cb-btn-secondary'
                           : 'btn-outline-secondary cb-btn-outline-secondary'
-                      }`}
+                        }`}
                       role="radio"
                       aria-checked={status === option}
                       onClick={() => setStatus(option)}
@@ -156,17 +155,14 @@ function FeedbackWidget() {
             <Modal.Footer className="cb-border-color">
               <Button
                 type="button"
-                className="btn btn-secondary cb-btn-secondary cb-rounded"
+                color="cbSecondary"
+                radius="md"
                 onClick={closeModal}
                 disabled={isSubmitting}
               >
                 {i18n.t('Cancel')}
               </Button>
-              <Button
-                type="submit"
-                className="btn btn-secondary cb-btn-secondary cb-rounded"
-                disabled={isSubmitDisabled}
-              >
+              <Button type="submit" color="cbSecondary" radius="md" disabled={isSubmitDisabled}>
                 {isSubmitting ? i18n.t('Sending...') : i18n.t('Send')}
               </Button>
             </Modal.Footer>
diff --git a/apps/codebattle/assets/js/widgets/components/InvitesContainer.tsx b/apps/codebattle/assets/js/widgets/components/InvitesContainer.tsx
index 295eea77c..a2d2d291f 100644
--- a/apps/codebattle/assets/js/widgets/components/InvitesContainer.tsx
+++ b/apps/codebattle/assets/js/widgets/components/InvitesContainer.tsx
@@ -1,11 +1,9 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Button from 'react-bootstrap/Button';
-import Popover from 'react-bootstrap/Popover';
+import { Popover, UnstyledButton } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
-import OverlayTrigger from '@/components/OverlayTriggerCompat';
 import { unfollowUser, followUser, pauseFollow } from '@/middlewares/Main';
 import type { RootState, AppDispatch } from '@/slices/store';
 
@@ -64,57 +62,25 @@ function InvitesContainer() {
   //   return () => invitesCountElement.classList.remove(...inviteClasses.split(' '));
   // }, [invites.length, followId]);
 
-  const defaultShow = invites.length !== 0 || undefined;
+  const [opened, setOpened] = useState(false);
+  // Force-open while there are pending invites (matches the previous controlled
+  // `show` behavior); otherwise the trigger toggles it.
+  const shouldOpen = invites.length !== 0 ? true : opened;
 
   return (
-    <OverlayTrigger
-      trigger="click"
+    <Popover
       key="codebattle-invites"
-      placement={invites.length === 0 ? 'bottom-end' : 'bottom'}
-      show={defaultShow}
-      overlay={
-        <Popover id="popover-invites" className="cb-bg-panel cb-border-color cb-text cb-rounded">
-          {followId && (
-            <div className="d-flex justify-content-center align-items-center p-2">
-              {followName
-                ? i18n.t('You are following %{followName}', { followName })
-                : i18n.t('You are following ID: %{followId}', { followId })}
-              <button
-                type="button"
-                className="btn btn-sm btn-outline-secondary cb-btn-outline-secondary cb-rounded mx-1"
-                onClick={togglePausedfollowClick}
-              >
-                <FontAwesomeIcon icon={followPaused ? 'play' : 'pause'} className="mr-1" />
-                {followPaused ? i18n.t('Unpause') : i18n.t('Pause')}
-              </button>
-              <button
-                type="button"
-                className="btn btn-sm btn-outline-danger cb-rounded mx-1"
-                onClick={handleUnfollowClick}
-              >
-                <FontAwesomeIcon icon="binoculars" className="mr-1" />
-                {i18n.t('Unfollow')}
-              </button>
-            </div>
-          )}
-          <InvitesList
-            followId={followId}
-            // Redux invites are loosely typed (index signature); InvitesList expects a concrete shape.
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            list={invites as any}
-            currentUserId={currentUserId!}
-          />
-        </Popover>
-      }
+      opened={shouldOpen}
+      onChange={setOpened}
+      position={invites.length === 0 ? 'bottom-end' : 'bottom'}
+      withArrow
+      withinPortal
+      shadow="md"
+      radius="md"
     >
-      {({ ref, ...triggerHandler }) => (
-        <Button {...triggerHandler} className="bg-transparent border-0 attachment mx-2">
-          <img
-            ref={ref}
-            alt={i18n.t('Invites')}
-            src={fightSvg}
-            style={{ width: '46px', height: '46px' }}
-          />
+      <Popover.Target>
+        <UnstyledButton onClick={() => setOpened((o) => !o)} className="attachment mx-2">
+          <img alt={i18n.t('Invites')} src={fightSvg} style={{ width: '46px', height: '46px' }} />
           {followId && (
             <span className="position-absolute badge badge-danger" style={{ top: '74%' }}>
               <FontAwesomeIcon icon={followPaused ? 'pause' : 'binoculars'} />
@@ -128,9 +94,41 @@ function InvitesContainer() {
           ) : (
             <span className="sr-only">{i18n.t('No invites')}</span>
           )}
-        </Button>
-      )}
-    </OverlayTrigger>
+        </UnstyledButton>
+      </Popover.Target>
+      <Popover.Dropdown className="cb-bg-panel cb-border-color cb-text cb-rounded" p={0}>
+        {followId && (
+          <div className="d-flex justify-content-center align-items-center p-2">
+            {followName
+              ? i18n.t('You are following %{followName}', { followName })
+              : i18n.t('You are following ID: %{followId}', { followId })}
+            <button
+              type="button"
+              className="btn btn-sm btn-outline-secondary cb-btn-outline-secondary cb-rounded mx-1"
+              onClick={togglePausedfollowClick}
+            >
+              <FontAwesomeIcon icon={followPaused ? 'play' : 'pause'} className="mr-1" />
+              {followPaused ? i18n.t('Unpause') : i18n.t('Pause')}
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-outline-danger cb-rounded mx-1"
+              onClick={handleUnfollowClick}
+            >
+              <FontAwesomeIcon icon="binoculars" className="mr-1" />
+              {i18n.t('Unfollow')}
+            </button>
+          </div>
+        )}
+        <InvitesList
+          followId={followId}
+          // Redux invites are loosely typed (index signature); InvitesList expects a concrete shape.
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          list={invites as any}
+          currentUserId={currentUserId!}
+        />
+      </Popover.Dropdown>
+    </Popover>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/OverlayTriggerCompat.tsx b/apps/codebattle/assets/js/widgets/components/OverlayTriggerCompat.tsx
deleted file mode 100644
index 40e2af039..000000000
--- a/apps/codebattle/assets/js/widgets/components/OverlayTriggerCompat.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import React, {
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type EventHandler,
-  type HTMLAttributes,
-  type ReactElement,
-  type ReactNode,
-  type RefAttributes,
-  type RefCallback,
-  type SyntheticEvent,
-} from 'react';
-
-import Overlay, {
-  type OverlayChildren,
-  type OverlayProps,
-  type Placement,
-} from 'react-bootstrap/Overlay';
-
-type Trigger = 'click' | 'focus' | 'hover';
-type Delay = number | { hide?: number; show?: number };
-type TriggerHandler = EventHandler<SyntheticEvent<HTMLElement>>;
-
-interface TriggerHandlers {
-  onBlur?: TriggerHandler;
-  onClick?: TriggerHandler;
-  onFocus?: TriggerHandler;
-  onMouseOut?: TriggerHandler;
-  onMouseOver?: TriggerHandler;
-}
-
-interface TriggerChildProps extends TriggerHandlers {
-  ref: RefCallback<HTMLElement>;
-}
-
-type TriggerElementProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>;
-
-interface OverlayTriggerCompatProps extends Omit<
-  OverlayProps,
-  'children' | 'placement' | 'show' | 'target'
-> {
-  children: ReactNode | ((props: TriggerChildProps) => ReactNode);
-  delay?: Delay;
-  overlay: OverlayChildren;
-  placement?: Placement;
-  show?: boolean;
-  trigger?: Trigger | Trigger[];
-}
-
-const normalizeDelay = (delay?: Delay) => {
-  if (delay == null) {
-    return { show: 0, hide: 0 };
-  }
-
-  if (typeof delay === 'number') {
-    return { show: delay, hide: delay };
-  }
-
-  return {
-    show: delay.show || 0,
-    hide: delay.hide || 0,
-  };
-};
-
-const normalizeTriggers = (trigger?: Trigger | Trigger[]) => {
-  if (!trigger) {
-    return [];
-  }
-
-  return Array.isArray(trigger) ? trigger : [trigger];
-};
-
-function OverlayTriggerCompat({
-  children,
-  trigger = ['hover', 'focus'],
-  placement = 'right',
-  overlay,
-  show,
-  delay,
-  ...overlayProps
-}: OverlayTriggerCompatProps) {
-  const triggerNodeRef = useRef<HTMLElement | null>(null);
-  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [internalShow, setInternalShow] = useState(false);
-
-  const controlled = show !== undefined;
-  const shouldShow = controlled ? show : internalShow;
-  const triggers = useMemo(() => normalizeTriggers(trigger), [trigger]);
-  const delays = useMemo(() => normalizeDelay(delay), [delay]);
-
-  const clearTimers = useCallback(() => {
-    if (showTimeoutRef.current) {
-      clearTimeout(showTimeoutRef.current);
-      showTimeoutRef.current = null;
-    }
-
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-  }, []);
-
-  useEffect(() => clearTimers, [clearTimers]);
-
-  const updateShow = useCallback(
-    (nextShow: boolean, timeout: number) => {
-      if (controlled) {
-        return;
-      }
-
-      const delayMs = Number(timeout) || 0;
-      clearTimers();
-
-      if (delayMs === 0) {
-        setInternalShow(nextShow);
-        return;
-      }
-
-      const timeoutId = setTimeout(() => {
-        setInternalShow(nextShow);
-      }, delayMs);
-
-      if (nextShow) {
-        showTimeoutRef.current = timeoutId;
-      } else {
-        hideTimeoutRef.current = timeoutId;
-      }
-    },
-    [clearTimers, controlled],
-  );
-
-  const handleShow = useCallback(() => updateShow(true, delays.show), [delays.show, updateShow]);
-  const handleHide = useCallback(() => updateShow(false, delays.hide), [delays.hide, updateShow]);
-  const handleToggle = useCallback(() => updateShow(!shouldShow, 0), [shouldShow, updateShow]);
-
-  const childProps: TriggerHandlers = {};
-
-  if (triggers.includes('click')) {
-    childProps.onClick = handleToggle;
-  }
-
-  if (triggers.includes('focus')) {
-    childProps.onFocus = handleShow;
-    childProps.onBlur = handleHide;
-  }
-
-  if (triggers.includes('hover')) {
-    childProps.onMouseOver = handleShow;
-    childProps.onMouseOut = handleHide;
-  }
-
-  const setRef: RefCallback<HTMLElement> = (node) => {
-    triggerNodeRef.current = node;
-  };
-
-  const mergeHandlers = (childHandler?: TriggerHandler, triggerHandler?: TriggerHandler) =>
-    ((event) => {
-      childHandler?.(event);
-      triggerHandler?.(event);
-    }) satisfies TriggerHandler;
-
-  if (!children) {
-    return null;
-  }
-
-  const triggerNode =
-    typeof children === 'function' ? children({ ...childProps, ref: setRef }) : children;
-
-  if (!isValidElement(triggerNode)) {
-    return triggerNode;
-  }
-
-  const triggerChild = triggerNode as ReactElement<TriggerElementProps>;
-  const isHostElement = typeof triggerChild.type === 'string';
-  const wrapperProps: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> = {
-    ref: setRef,
-    onClick: childProps.onClick,
-    onFocus: childProps.onFocus,
-    onBlur: childProps.onBlur,
-    onMouseOver: childProps.onMouseOver,
-    onMouseOut: childProps.onMouseOut,
-    className: 'd-inline-flex align-items-center',
-  };
-
-  if (childProps.onClick) {
-    wrapperProps.role = 'button';
-    wrapperProps.tabIndex = 0;
-    wrapperProps.onKeyDown = (event) => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        childProps.onClick?.(event);
-      }
-    };
-  }
-
-  const triggerElement = isHostElement ? (
-    cloneElement(triggerChild, {
-      ...childProps,
-      onClick: mergeHandlers(triggerChild.props.onClick, childProps.onClick),
-      onFocus: mergeHandlers(triggerChild.props.onFocus, childProps.onFocus),
-      onBlur: mergeHandlers(triggerChild.props.onBlur, childProps.onBlur),
-      onMouseOver: mergeHandlers(triggerChild.props.onMouseOver, childProps.onMouseOver),
-      onMouseOut: mergeHandlers(triggerChild.props.onMouseOut, childProps.onMouseOut),
-      ref: setRef,
-    })
-  ) : (
-    <span {...wrapperProps}>{triggerChild}</span>
-  );
-
-  return (
-    <>
-      {triggerElement}
-      <Overlay
-        show={Boolean(shouldShow)}
-        placement={placement}
-        target={triggerNodeRef.current}
-        {...overlayProps}
-      >
-        {overlay}
-      </Overlay>
-    </>
-  );
-}
-
-export default OverlayTriggerCompat;
diff --git a/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx b/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
index 339089f44..f15d9fd76 100644
--- a/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
+++ b/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect } from 'react';
 
+import { Loader } from '@mantine/core';
 import cn from 'classnames';
-import Spinner from 'react-bootstrap/Spinner';
 import {
   ResponsiveContainer,
   BarChart,
@@ -24,7 +24,7 @@ import {
   ReferenceLine,
 } from 'recharts';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 
 import i18n from '../../../i18n';
 import LanguageIcon from '../LanguageIcon';
@@ -457,7 +457,7 @@ function PlayerInsightsModal({
       onHide={onHide}
       size="xl"
       centered
-      contentClassName="bg-dark text-light border-secondary"
+      contentClassName="text-light"
       dialogClassName="modal-90w"
     >
       <Modal.Header
@@ -562,7 +562,7 @@ function PlayerInsightsModal({
         {/* Loading State */}
         {loading && (
           <div className="text-center py-5">
-            <Spinner animation="border" variant="info" />
+            <Loader color="blue" />
             <p className="text-muted mt-2">{i18n.t('Loading detailed stats...')}</p>
           </div>
         )}
@@ -856,7 +856,7 @@ function PlayerInsightsModal({
                                   player: Math.min(
                                     (player.tournaments_count /
                                       Math.max(medianStats.tournaments, 1)) *
-                                      50,
+                                    50,
                                     100,
                                   ),
                                   median: 50,
diff --git a/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.tsx b/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.tsx
index a2d1c01bc..447b564bd 100644
--- a/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.tsx
+++ b/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.tsx
@@ -1,8 +1,10 @@
-// SEE: https://gist.github.com/lou/571b7c0e7797860d6c555a9fdc0496f9
-import React, { useState, useEffect, useRef, type ReactElement, type ReactNode } from 'react';
+// Hover-triggered popover that stays open while the pointer is over the dropdown.
+// Backed by Mantine HoverCard (was react-bootstrap Overlay + Popover).
+import React, { type ReactNode } from 'react';
 
-import Overlay, { type OverlayProps } from 'react-bootstrap/Overlay';
-import Popover from 'react-bootstrap/Popover';
+import { HoverCard, type FloatingPosition } from '@mantine/core';
+
+export type Placement = FloatingPosition;
 
 interface PopoverStickOnHoverProps {
   id: string;
@@ -10,89 +12,31 @@ interface PopoverStickOnHoverProps {
   onMouseEnter?: () => void;
   children: ReactNode;
   component: ReactNode;
-  placement?: OverlayProps['placement'];
+  placement?: Placement;
 }
 
 function PopoverStickOnHover({
   id,
   delay = 0,
-  onMouseEnter = () => {},
+  onMouseEnter,
   children,
   component,
-  placement,
+  placement = 'bottom',
 }: PopoverStickOnHoverProps) {
-  const [showPopover, setShowPopover] = useState(false);
-  const childNode = useRef<unknown>(null);
-  const showTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(
-    () => () => {
-      if (showTimeout.current) {
-        clearTimeout(showTimeout.current);
-      }
-    },
-    [],
-  );
-
-  const handleMouseEnter = () => {
-    if (showTimeout.current) {
-      clearTimeout(showTimeout.current);
-    }
-
-    showTimeout.current = setTimeout(() => {
-      setShowPopover(true);
-      onMouseEnter();
-    }, delay);
-  };
-
-  const handleMouseLeave = () => {
-    if (showTimeout.current) {
-      clearTimeout(showTimeout.current);
-      showTimeout.current = null;
-    }
-
-    setShowPopover(false);
-  };
-
-  const displayChild = React.Children.map(children, (child) =>
-    React.cloneElement(
-      child as ReactElement,
-      {
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        ref: (node: unknown) => {
-          childNode.current = node;
-          const { ref } = child as ReactElement & { ref?: unknown };
-          if (typeof ref === 'function') {
-            ref(node);
-          }
-        },
-      } as Partial<unknown>,
-    ),
-  )?.[0];
-
   return (
-    <>
-      {displayChild}
-      <Overlay
-        show={showPopover}
-        placement={placement}
-        target={childNode as OverlayProps['target']}
-        {...({ shouldUpdatePosition: true } as Record<string, unknown>)}
-      >
-        <Popover
-          className="cb-blur cb-text cb-rounded"
-          onMouseEnter={() => {
-            setShowPopover(true);
-          }}
-          onMouseLeave={handleMouseLeave}
-          id={id}
-          {...({ trigger: 'click' } as Record<string, unknown>)}
-        >
-          {component}
-        </Popover>
-      </Overlay>
-    </>
+    <HoverCard
+      openDelay={delay}
+      position={placement}
+      onOpen={onMouseEnter}
+      withinPortal
+      shadow="md"
+      radius="md"
+    >
+      <HoverCard.Target>{children}</HoverCard.Target>
+      <HoverCard.Dropdown id={id} className="cb-blur cb-text cb-rounded" p={0}>
+        {component}
+      </HoverCard.Dropdown>
+    </HoverCard>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/ResultIcon.tsx b/apps/codebattle/assets/js/widgets/components/ResultIcon.tsx
index aa7014a6f..459fc588d 100644
--- a/apps/codebattle/assets/js/widgets/components/ResultIcon.tsx
+++ b/apps/codebattle/assets/js/widgets/components/ResultIcon.tsx
@@ -3,9 +3,7 @@ import React, { type ReactNode } from 'react';
 import { faFlag } from '@fortawesome/free-regular-svg-icons';
 import { faTrophy } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Tooltip from 'react-bootstrap/Tooltip';
-
-import OverlayTrigger from '@/components/OverlayTriggerCompat';
+import { Tooltip } from '@mantine/core';
 
 type ResultIconName = 'gaveUp' | 'won';
 
@@ -34,12 +32,9 @@ function ResultIcon({ icon = null }: ResultIconProps) {
   const renderIcon = iconRenderers[icon.name];
 
   return (
-    <OverlayTrigger
-      overlay={<Tooltip id={icon.tooltip.id}>{icon.tooltip.text}</Tooltip>}
-      placement="left"
-    >
+    <Tooltip label={icon.tooltip.text} position="left" withArrow>
       {renderIcon()}
-    </OverlayTrigger>
+    </Tooltip>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/Rooms.tsx b/apps/codebattle/assets/js/widgets/components/Rooms.tsx
index 6ce3025a5..58741b39b 100644
--- a/apps/codebattle/assets/js/widgets/components/Rooms.tsx
+++ b/apps/codebattle/assets/js/widgets/components/Rooms.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
-import cn from 'classnames';
+import { Button, Menu } from '@mantine/core';
 import i18next from 'i18next';
-import ButtonGroup from 'react-bootstrap/ButtonGroup';
-import Dropdown from 'react-bootstrap/Dropdown';
 import { useDispatch, useSelector } from 'react-redux';
 
 import * as selectors from '../selectors';
@@ -19,35 +17,30 @@ export default function Rooms({ disabled }: RoomsProps) {
   const rooms = useSelector(selectors.roomsSelector);
   const activeRoom = useSelector(selectors.activeRoomSelector);
 
-  const dropdownClassName = cn(
-    'h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat cb-bg-highlight-panel',
-  );
-
   return (
-    <Dropdown as={ButtonGroup} title="" disabled={disabled}>
-      <Dropdown.Toggle
-        className="rounded-top cb-btn-secondary"
-        split
-        variant="secondary"
-        id="dropdown-rooms"
-        disabled={disabled}
-      >
-        <span className="mr-2">{i18next.t(activeRoom.name)}</span>
-      </Dropdown.Toggle>
-
-      <Dropdown.Menu className={dropdownClassName}>
+    <Menu disabled={disabled} width="target">
+      <Menu.Target>
+        <Button
+          className="rounded-top cb-btn-secondary"
+          color="cbSecondary"
+          id="dropdown-rooms"
+          disabled={disabled}
+        >
+          <span className="mr-2">{i18next.t(activeRoom.name)}</span>
+        </Button>
+      </Menu.Target>
+
+      <Menu.Dropdown className="h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat cb-bg-highlight-panel">
         {rooms.map((room) => (
-          <Dropdown.Item
-            as="a"
-            href="#"
+          <Menu.Item
             className="cb-text"
             key={room.targetUserId || room.name}
-            onSelect={() => dispatch(actions.setActiveRoom(room))}
+            onClick={() => dispatch(actions.setActiveRoom(room))}
           >
             {i18next.t(room.name)}
-          </Dropdown.Item>
+          </Menu.Item>
         ))}
-      </Dropdown.Menu>
-    </Dropdown>
+      </Menu.Dropdown>
+    </Menu>
   );
 }
diff --git a/apps/codebattle/assets/js/widgets/components/UserInfo.tsx b/apps/codebattle/assets/js/widgets/components/UserInfo.tsx
index 94a80476c..52611ab43 100644
--- a/apps/codebattle/assets/js/widgets/components/UserInfo.tsx
+++ b/apps/codebattle/assets/js/widgets/components/UserInfo.tsx
@@ -4,15 +4,13 @@ import cn from 'classnames';
 import { camelizeKeys } from 'humps';
 import { useDispatch, useSelector } from 'react-redux';
 
-import type { OverlayProps } from 'react-bootstrap/Overlay';
-
 import type { AppDispatch } from '@/slices/store';
 
 import Placements from '../config/placements';
 import * as selectors from '../selectors';
 import { actions } from '../slices';
 
-import PopoverStickOnHover from './PopoverStickOnHover';
+import PopoverStickOnHover, { type Placement } from './PopoverStickOnHover';
 import UserName, { type UserNameUser } from './UserName';
 import UserStats from './UserStats';
 
@@ -103,7 +101,7 @@ interface UserInfoProps {
   hideRank?: boolean;
   displayName?: string;
   loading?: boolean;
-  placement?: OverlayProps['placement'];
+  placement?: Placement;
 }
 
 function UserInfo({
@@ -119,7 +117,7 @@ function UserInfo({
   hideOnlineIndicator = false,
   displayName,
   loading = false,
-  placement = Placements.bottomStart as OverlayProps['placement'],
+  placement = Placements.bottomStart as Placement,
 }: UserInfoProps) {
   const { presenceList } = useSelector(selectors.lobbyDataSelector);
   const content = useMemo(() => (user.isBot ? 'bot' : <UserPopoverContent user={user} />), [user]);
diff --git a/apps/codebattle/assets/js/widgets/index.tsx b/apps/codebattle/assets/js/widgets/index.tsx
index 54cf3596d..8c6ef7420 100644
--- a/apps/codebattle/assets/js/widgets/index.tsx
+++ b/apps/codebattle/assets/js/widgets/index.tsx
@@ -23,45 +23,41 @@ import {
   UserPage,
   AdminPage,
 } from './App';
+import { withMantine } from './ui/withMantine';
 
 const Heatmap = React.lazy(() => import('./pages/profile/Heatmap'));
 
-export const renderEventPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<EventPage />);
+const renderRoot = (domElement: HTMLElement, node: React.ReactNode) =>
+  createRoot(domElement).render(withMantine(node));
+
+export const renderEventPage = (domElement: HTMLElement) => renderRoot(domElement, <EventPage />);
 export const renderGroupTournamentPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<GroupTournamentPage />);
-export const renderGameWidget = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<Game />);
+  renderRoot(domElement, <GroupTournamentPage />);
+export const renderGameWidget = (domElement: HTMLElement) => renderRoot(domElement, <Game />);
 export const renderGameThreejsPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<GameThreejsPage />);
-export const renderGameMlPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<GameMlPage />);
-export const renderHeatmapWidget = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<Heatmap />);
-export const renderInvitesWidget = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<Invites />);
+  renderRoot(domElement, <GameThreejsPage />);
+export const renderGameMlPage = (domElement: HTMLElement) => renderRoot(domElement, <GameMlPage />);
+export const renderHeatmapWidget = (domElement: HTMLElement) => renderRoot(domElement, <Heatmap />);
+export const renderInvitesWidget = (domElement: HTMLElement) => renderRoot(domElement, <Invites />);
 export const renderMainChannelWidget = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<MainChannel />);
-export const renderLobby = (domElement: HTMLElement) => createRoot(domElement).render(<Lobby />);
-export const renderOnlineWidget = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<Online />);
+  renderRoot(domElement, <MainChannel />);
+export const renderLobby = (domElement: HTMLElement) => renderRoot(domElement, <Lobby />);
+export const renderOnlineWidget = (domElement: HTMLElement) => renderRoot(domElement, <Online />);
 export const renderRegistrationPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<RegistrationPage />);
+  renderRoot(domElement, <RegistrationPage />);
 export const renderSettingPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<SettingsPage />);
+  renderRoot(domElement, <SettingsPage />);
 export const renderSoundToggle = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<SoundToggleMenu />);
+  renderRoot(domElement, <SoundToggleMenu />);
 export const renderTournamentThreejsStreamPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<TournamentThreejsStreamPage />);
+  renderRoot(domElement, <TournamentThreejsStreamPage />);
 export const renderTournamentStreamAdminPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<TournamentStreamAdminPage />);
+  renderRoot(domElement, <TournamentStreamAdminPage />);
 export const renderTournamentAdminPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<TournamentAdminPage />);
+  renderRoot(domElement, <TournamentAdminPage />);
 export const renderTournamentPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<TournamentPage />);
+  renderRoot(domElement, <TournamentPage />);
 export const renderTournamentPlayerPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<TournamentPlayerPage />);
-export const renderUserPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<UserPage />);
-export const renderAdminPage = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<AdminPage />);
+  renderRoot(domElement, <TournamentPlayerPage />);
+export const renderUserPage = (domElement: HTMLElement) => renderRoot(domElement, <UserPage />);
+export const renderAdminPage = (domElement: HTMLElement) => renderRoot(domElement, <AdminPage />);
diff --git a/apps/codebattle/assets/js/widgets/pages/admin/AdminWidget.tsx b/apps/codebattle/assets/js/widgets/pages/admin/AdminWidget.tsx
index d20a20057..4712e4262 100644
--- a/apps/codebattle/assets/js/widgets/pages/admin/AdminWidget.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/admin/AdminWidget.tsx
@@ -2,7 +2,7 @@ import { currentUserIsAdminSelector, lobbyDataSelector } from '@/selectors';
 import React, { useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import { type AppDispatch } from '@/slices';
 
 import { broadcastRedirect, fetchTournamentPlayerIds } from '../../middlewares/Main';
@@ -207,7 +207,7 @@ interface ConnectionModalProps {
 
 function ConnectionModal({ connection, onHide }: ConnectionModalProps) {
   return (
-    <Modal contentClassName="cb-bg-panel cb-text" show={!!connection} onHide={onHide}>
+    <Modal contentClassName="cb-text" show={!!connection} onHide={onHide}>
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title>Connection details</Modal.Title>
       </Modal.Header>
diff --git a/apps/codebattle/assets/js/widgets/pages/event/EventStageConfirmationModal.tsx b/apps/codebattle/assets/js/widgets/pages/event/EventStageConfirmationModal.tsx
index 77cec17f0..335d90260 100644
--- a/apps/codebattle/assets/js/widgets/pages/event/EventStageConfirmationModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/event/EventStageConfirmationModal.tsx
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 
 import ModalCodes from '../../config/modalCodes';
 
@@ -18,7 +18,7 @@ const EventStageConfirmationModal = NiceModal.create<EventStageConfirmationModal
     const modal = useModal(ModalCodes.eventStageModal);
 
     return (
-      <Modal contentClassName="cb-bg-panel cb-text" show={modal.visible} onHide={modal.hide}>
+      <Modal contentClassName="cb-text" show={modal.visible} onHide={modal.hide}>
         <Modal.Header closeButton>
           <Modal.Title>{titleModal}</Modal.Title>
         </Modal.Header>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.tsx
index 99d1c42d9..6db9d8d63 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.tsx
@@ -1,11 +1,11 @@
 import React, { memo, useEffect } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
+import { Button } from '@mantine/core';
 import i18n from 'i18next';
-import Button from 'react-bootstrap/Button';
 import { useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import Loading from '@/components/Loading';
 import { type RootState } from '@/slices';
 
@@ -62,7 +62,7 @@ const AnimationModal = NiceModal.create(() => {
   const buttonText = result === 'won' ? i18n.t('GG') : i18n.t("I'll be back");
 
   return (
-    <Modal show={modal.visible} onHide={modal.hide} contentClassName="cb-bg-panel cb-text">
+    <Modal show={modal.visible} onHide={modal.hide} contentClassName="cb-text">
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title>{titleModal}</Modal.Title>
       </Modal.Header>
@@ -92,7 +92,7 @@ const AnimationModal = NiceModal.create(() => {
         {/*     Back to tournament */}
         {/*   </a> */}
         {/* )} */}
-        <Button onClick={modal.hide} className="btn btn-secondary cb-btn-secondary cb-rounded">
+        <Button onClick={modal.hide} color="cbSecondary" radius="md">
           {buttonText}
         </Button>
       </Modal.Footer>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/CodebattleSliderBar.tsx b/apps/codebattle/assets/js/widgets/pages/game/CodebattleSliderBar.tsx
index fd16a8e4b..13155c958 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/CodebattleSliderBar.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/CodebattleSliderBar.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
 import cn from 'classnames';
-import Tooltip from 'react-bootstrap/Tooltip';
-
-import OverlayTrigger from '@/components/OverlayTriggerCompat';
+import { Tooltip } from '@mantine/core';
 
 import { formatDuration } from './ControlPanel';
 
@@ -65,14 +63,10 @@ function SliderAction({ value, className, event, setGameState, startTime }: Slid
 
   return (
     <div>
-      <OverlayTrigger
-        placement="top"
-        overlay={
-          <Tooltip id="tooltip-top">
-            {`Check started by ${event.userName}`}
-            {durationLabel ? ` · ${durationLabel}` : ''}
-          </Tooltip>
-        }
+      <Tooltip
+        position="top"
+        withArrow
+        label={`Check started by ${event.userName}${durationLabel ? ` · ${durationLabel}` : ''}`}
       >
         <div
           role="button"
@@ -85,7 +79,7 @@ function SliderAction({ value, className, event, setGameState, startTime }: Slid
             left: `${value * 100}%`,
           }}
         />
-      </OverlayTrigger>
+      </Tooltip>
     </div>
   );
 }
diff --git a/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.tsx b/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.tsx
index 045fea983..ba21c5062 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Dropdown } from 'react-bootstrap';
-import Button from 'react-bootstrap/Button';
+import { Button, Menu } from '@mantine/core';
 import { useDispatch } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import { type AppDispatch } from '@/slices';
 
 import i18next from '../../../i18n';
@@ -69,72 +68,42 @@ function CheckResultButton({ onClick, status }: CheckResultButtonProps) {
   }
 }
 
-interface CustomToggleProps {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  className?: string;
-  disabled?: boolean;
-}
-
-const CustomToggle = React.forwardRef<HTMLButtonElement, CustomToggleProps>(
-  ({ onClick, className, disabled }, ref) => (
-    <button
-      type="button"
-      ref={ref}
-      className={(className ?? '').replace('dropdown-toggle', '')}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      <FontAwesomeIcon icon="ellipsis-v" />
-    </button>
-  ),
-);
-
 interface DropdownItemProps {
   onSelect?: () => void;
   status: string;
 }
 
 function GiveUpButtonDropdownItem({ onSelect, status }: DropdownItemProps) {
-  // react-bootstrap's Dropdown.Item onSelect/as props don't match our simple
-  // handler shape; spread through a component-props cast (see conventions rule 7).
-  const commonProps = {
-    as: 'a',
-    href: '#',
-    title: i18next.t('Give Up'),
-    onSelect,
-    disabled: status === 'disabled',
-    className: 'cb-dropdown-item',
-  } as unknown as React.ComponentProps<typeof Dropdown.Item>;
-
   return (
-    <Dropdown.Item key="giveUp" {...commonProps}>
+    <Menu.Item
+      key="giveUp"
+      title={i18next.t('Give Up')}
+      onClick={onSelect}
+      disabled={status === 'disabled'}
+      className="cb-dropdown-item"
+    >
       <span className={status === 'disabled' ? 'text-muted' : 'text-danger'}>
         <FontAwesomeIcon icon={['far', 'flag']} className="mr-1" />
         {i18next.t('Give up')}
       </span>
-    </Dropdown.Item>
+    </Menu.Item>
   );
 }
 
 function ResetButtonDropDownItem({ onSelect, status }: DropdownItemProps) {
-  // react-bootstrap's Dropdown.Item onSelect/as props don't match our simple
-  // handler shape; spread through a component-props cast (see conventions rule 7).
-  const commonProps = {
-    as: 'a',
-    href: '#',
-    title: i18next.t('Reset solution'),
-    onSelect,
-    disabled: status === 'disabled',
-    className: 'cb-dropdown-item',
-  } as unknown as React.ComponentProps<typeof Dropdown.Item>;
-
   return (
-    <Dropdown.Item key="reset" {...commonProps}>
+    <Menu.Item
+      key="reset"
+      title={i18next.t('Reset solution')}
+      onClick={onSelect}
+      disabled={status === 'disabled'}
+      className="cb-dropdown-item"
+    >
       <span className="text-white">
         <FontAwesomeIcon icon={['fas', 'sync']} className="mr-1" />
         {i18next.t('Reset solution')}
       </span>
-    </Dropdown.Item>
+    </Menu.Item>
   );
 }
 
@@ -177,15 +146,15 @@ function GameActionButtons({
   };
 
   const renderModal = () => (
-    <Modal show={modalShowing} onHide={modalHide} contentClassName="cb-bg-panel cb-text">
+    <Modal show={modalShowing} onHide={modalHide} contentClassName="cb-text">
       <Modal.Body className="text-center cb-bg-panel">
         {i18next.t('Are you sure you want to give up?')}
       </Modal.Body>
       <Modal.Footer className="mx-auto border-0">
-        <Button onClick={handleGiveUp} className="btn-danger cb-rounded">
+        <Button onClick={handleGiveUp} color="red" radius="md">
           {i18next.t('Give up')}
         </Button>
-        <Button onClick={modalHide} className="btn-secondary cb-btn-secondary cb-rounded">
+        <Button onClick={modalHide} color="cbSecondary" radius="md">
           {i18next.t('Cancel')}
         </Button>
       </Modal.Footer>
@@ -195,23 +164,20 @@ function GameActionButtons({
   return (
     <div className="d-flex py-2" role="group" aria-label={i18next.t('Game actions')}>
       <CheckResultButton onClick={checkResult} status={checkBtnStatus} />
-      <Dropdown title={i18next.t('Other actions')}>
-        <Dropdown.Toggle
-          as={CustomToggle}
-          className="btn btm-sm btn-secondary cb-btn-secondary cb-rounded mx-1"
-          split
-          id="dropdown-actions"
-        >
-          <FontAwesomeIcon icon="ellipsis-v" className="mr-1" />
-        </Dropdown.Toggle>
-
-        <Dropdown.Menu className="h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat cb-blur">
+      <Menu>
+        <Menu.Target>
+          <Button color="cbSecondary" radius="md" className="mx-1" id="dropdown-actions">
+            <FontAwesomeIcon icon="ellipsis-v" />
+          </Button>
+        </Menu.Target>
+
+        <Menu.Dropdown className="h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat cb-blur">
           <ResetButtonDropDownItem onSelect={handleReset} status={resetBtnStatus} />
           {showGiveUpBtn && (
             <GiveUpButtonDropdownItem onSelect={modalShow} status={giveUpBtnStatus} />
           )}
-        </Dropdown.Menu>
-      </Dropdown>
+        </Menu.Dropdown>
+      </Menu>
       {renderModal()}
     </div>
   );
diff --git a/apps/codebattle/assets/js/widgets/pages/game/GameResult.tsx b/apps/codebattle/assets/js/widgets/pages/game/GameResult.tsx
index a83c3a7bb..bc2c5113c 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/GameResult.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/GameResult.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 
+import { Alert } from '@mantine/core';
 import find from 'lodash/find';
 import hasIn from 'lodash/hasIn';
-import Alert from 'react-bootstrap/Alert';
 import { useSelector } from 'react-redux';
 
 import { type RootState } from '@/slices';
@@ -11,6 +11,7 @@ import i18n from '../../../i18n';
 import GameRoomModes from '../../config/gameModes';
 import GameStateCodes from '../../config/gameStateCodes';
 import * as selectors from '../../selectors';
+import { bootstrapAlertColor } from '../../ui/alert';
 
 function GameResult() {
   const currentUserId = useSelector((state: RootState) => selectors.currentUserIdSelector(state));
@@ -56,9 +57,13 @@ function GameResult() {
   }, [currentUserId, players, isCurrentUserPlayer, gameStatus.state, gameMode]);
 
   if (result) {
-    const alertClassName = `mt-2 alert-dark-theme${result.isWin ? ' cb-game-win-alert' : ''}`;
+    const alertClassName = `mt-2 alert alert-${result.alertStyle} alert-dark-theme${result.isWin ? ' cb-game-win-alert' : ''}`;
     return (
-      <Alert className={alertClassName} variant={result.alertStyle}>
+      <Alert
+        className={alertClassName}
+        color={bootstrapAlertColor(result.alertStyle)}
+        variant="light"
+      >
         {result.msg}
       </Alert>
     );
diff --git a/apps/codebattle/assets/js/widgets/pages/game/GameResultIcon.tsx b/apps/codebattle/assets/js/widgets/pages/game/GameResultIcon.tsx
index 52c40c5d2..ddad782ef 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/GameResultIcon.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/GameResultIcon.tsx
@@ -2,11 +2,9 @@ import React from 'react';
 
 import find from 'lodash/find';
 import get from 'lodash/get';
-import Tooltip from 'react-bootstrap/Tooltip';
+import { Tooltip } from '@mantine/core';
 import { useSelector } from 'react-redux';
 
-import OverlayTrigger from '@/components/OverlayTriggerCompat';
-
 import i18n from '../../../i18n';
 import * as selectors from '../../selectors';
 
@@ -32,32 +30,25 @@ function GameResultIcon({ userId, mode = 'default' }: GameResultIconProps) {
   const resultUser1 = get(players, [userId, 'result']);
   const resultUser2 = get(players, [(opponent as Record<string, unknown>)?.Id as string, 'result']);
 
-  const tooltipId = `tooltip-${resultUser1}`;
   const winIconProps = mapModeToWinImgProps[mode];
 
   if (resultUser1 === 'gave_up') {
     return (
-      <OverlayTrigger
-        overlay={<Tooltip id={tooltipId}>{i18n.t('Player gave up')}</Tooltip>}
-        placement="left"
-      >
+      <Tooltip label={i18n.t('Player gave up')} position="left" withArrow>
         <img
           src="/assets/images/big-flag.png"
           alt={i18n.t('White flag')}
           style={{ width: '200px' }}
         />
-      </OverlayTrigger>
+      </Tooltip>
     );
   }
 
   if (resultUser1 === 'won' && resultUser2 !== 'gave_up') {
     return (
-      <OverlayTrigger
-        overlay={<Tooltip id={tooltipId}>{i18n.t('Player won')}</Tooltip>}
-        placement="left"
-      >
+      <Tooltip label={i18n.t('Player won')} position="left" withArrow>
         <img alt={i18n.t('Win icon')} {...winIconProps} />
-      </OverlayTrigger>
+      </Tooltip>
     );
   }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/game/NextStageGroupTournamentModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/NextStageGroupTournamentModal.tsx
index cec181c5f..3dcd9c86e 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/NextStageGroupTournamentModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/NextStageGroupTournamentModal.tsx
@@ -1,10 +1,10 @@
 import React, { memo, useEffect } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
+import { Button } from '@mantine/core';
 import i18n from 'i18next';
-import Button from 'react-bootstrap/Button';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 
 import ModalCodes from '../../config/modalCodes';
 
@@ -54,7 +54,7 @@ const NextStageGroupTournamentModal = NiceModal.create(
           {/* <Button variant="secondary" onClick={modal.hide}> */}
           {/*   {i18n.t("Later")} */}
           {/* </Button> */}
-          <Button as="a" href={href} variant="primary">
+          <Button component="a" href={href} color="blue" radius="md">
             {i18n.t('Go to AI-round group tournament')}
           </Button>
         </Modal.Footer>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/PremiumRestrictionModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/PremiumRestrictionModal.tsx
index 09c6b96dd..235288ddf 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/PremiumRestrictionModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/PremiumRestrictionModal.tsx
@@ -2,10 +2,10 @@ import React, { useState, useCallback, memo } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Button from 'react-bootstrap/Button';
+import { Button } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import { sendPremiumRequest } from '@/middlewares/Users';
 import { currentUserIdSelector, userSettingsSelector } from '@/selectors';
 import { type AppDispatch } from '@/slices';
@@ -40,7 +40,7 @@ const PremiumRestrictionModal = NiceModal.create(() => {
       centered
       show={modal.visible}
       onHide={modal.hide}
-      contentClassName="cb-bg-panel cb-text"
+      contentClassName="cb-text"
     >
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title>{i18n.t('Restricted Content')}</Modal.Title>
@@ -100,8 +100,12 @@ const PremiumRestrictionModal = NiceModal.create(() => {
       </Modal.Body>
       <Modal.Footer className="cb-border-color">
         <div className="d-flex justify-content-end w-100">
-          <Button onClick={modal.hide} className="btn btn-secondary cb-btn-secondary cb-rounded">
-            <FontAwesomeIcon icon="times" className="mr-2" />
+          <Button
+            onClick={modal.hide}
+            color="cbSecondary"
+            radius="md"
+            leftSection={<FontAwesomeIcon icon="times" />}
+          >
             {i18n.t('Close')}
           </Button>
         </div>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionModal.tsx
index b914f6364..8585302a9 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionModal.tsx
@@ -2,10 +2,10 @@ import React, { memo } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Button from 'react-bootstrap/Button';
+import { Button } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import { gameTaskSelector, taskDescriptionLanguageSelector } from '@/selectors';
 
 import i18n from '../../../i18n';
@@ -26,7 +26,7 @@ const TaskDescriptionModal = NiceModal.create(() => {
     dispatch(actions.setTaskDescriptionLanguage(lang));
 
   return (
-    <Modal contentClassName="cb-bg-panel cb-text" centered show={modal.visible} onHide={modal.hide}>
+    <Modal contentClassName="cb-text" centered show={modal.visible} onHide={modal.hide}>
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title>{i18n.t('Task Description')}</Modal.Title>
       </Modal.Header>
@@ -41,8 +41,12 @@ const TaskDescriptionModal = NiceModal.create(() => {
       </Modal.Body>
       <Modal.Footer className="cb-border-color">
         <div className="d-flex justify-content-end w-100">
-          <Button onClick={modal.hide} className="btn btn-secondary cb-btn-secondary cb-rounded">
-            <FontAwesomeIcon icon="times" className="mr-2" />
+          <Button
+            onClick={modal.hide}
+            color="cbSecondary"
+            radius="md"
+            leftSection={<FontAwesomeIcon icon="times" />}
+          >
             {i18n.t('Close')}
           </Button>
         </div>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/TaskLanguageSelection.tsx b/apps/codebattle/assets/js/widgets/pages/game/TaskLanguageSelection.tsx
index 6d0be05a5..84a01d92a 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/TaskLanguageSelection.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/TaskLanguageSelection.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Dropdown from 'react-bootstrap/Dropdown';
+import { Button, Menu } from '@mantine/core';
 
 interface TaskLanguagesSelectionProps {
   avaibleLanguages: string[];
@@ -18,30 +18,33 @@ function TaskLanguagesSelection({
   }
 
   const renderLanguage = (language: string) => (
-    <Dropdown.Item
-      as="button"
+    <Menu.Item
       key={language}
-      active={language === displayLanguage}
       onClick={handleSetLanguage(language)}
       className="cb-dropdown-item"
+      data-active={language === displayLanguage || undefined}
     >
       <span translate="no">{`${language.toUpperCase()}`}</span>
-    </Dropdown.Item>
+    </Menu.Item>
   );
 
   return (
-    <Dropdown className="d-flex">
-      <Dropdown.Toggle
-        id="tasklang-dropdown-toggle"
-        className="shadow-none cb-rounded p-1 btn btn-sm btn-outline-secondary cb-btn-outline-secondary"
-        variant="none"
-      >
-        {displayLanguage.toUpperCase()}
-      </Dropdown.Toggle>
-      <Dropdown.Menu id="tasklang-dropdown-menu" className="cb-blur">
+    <Menu>
+      <Menu.Target>
+        <Button
+          id="tasklang-dropdown-toggle"
+          className="shadow-none cb-rounded p-1 btn btn-sm btn-outline-secondary cb-btn-outline-secondary"
+          variant="outline"
+          color="cbSecondary"
+          size="xs"
+        >
+          {displayLanguage.toUpperCase()}
+        </Button>
+      </Menu.Target>
+      <Menu.Dropdown id="tasklang-dropdown-menu" className="cb-blur">
         {avaibleLanguages.map(renderLanguage)}
-      </Dropdown.Menu>
-    </Dropdown>
+      </Menu.Dropdown>
+    </Menu>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/game/TournamentAwardModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/TournamentAwardModal.tsx
index 282a5829f..9c8178d43 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/TournamentAwardModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/TournamentAwardModal.tsx
@@ -1,10 +1,10 @@
 import React, { memo, useRef, useEffect } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
-import Button from 'react-bootstrap/Button';
+import { Button } from '@mantine/core';
 import { useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 
 import i18next from '../../../i18n';
 import ModalCodes from '../../config/modalCodes';
@@ -70,7 +70,7 @@ const TournamentAwardModal = NiceModal.create((params: TournamentAwardModalProps
       {!onlyShowAward && (
         <Modal.Footer>
           <div className="d-flex justify-content-end w-100">
-            <Button ref={submitBtnRef} className="btn btn-primary cb-rounded" onClick={modal.hide}>
+            <Button ref={submitBtnRef} color="blue" radius="md" onClick={modal.hide}>
               {waitType === 'tournament' ? i18next.t('Close') : i18next.t('Next game')}
             </Button>
           </div>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/TournamentStatisticsModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/TournamentStatisticsModal.tsx
index 3b98363fd..01ae14084 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/TournamentStatisticsModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/TournamentStatisticsModal.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, memo, useMemo, useState } from 'react';
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
 import { useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import {
   tournamentSelector,
   firstPlayerSelector,
@@ -70,7 +70,7 @@ const TournamentStatisticsModal = NiceModal.create(() => {
   );
 
   return (
-    <Modal centered show={modal.visible} onHide={modal.hide} contentClassName="cb-bg-panel cb-text">
+    <Modal centered show={modal.visible} onHide={modal.hide} contentClassName="cb-text">
       <Modal.Header closeButton>
         <Modal.Title>{title}</Modal.Title>
       </Modal.Header>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/VimModeButton.tsx b/apps/codebattle/assets/js/widgets/pages/game/VimModeButton.tsx
index 5844c8169..f26bc2e3f 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/VimModeButton.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/VimModeButton.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import cn from 'classnames';
-// import { Col } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
 
 import editorModes from '../../config/editorModes';
diff --git a/apps/codebattle/assets/js/widgets/pages/headToHeadPage/HeadToHeadPage.tsx b/apps/codebattle/assets/js/widgets/pages/headToHeadPage/HeadToHeadPage.tsx
index 6a90f89e8..6b9673794 100644
--- a/apps/codebattle/assets/js/widgets/pages/headToHeadPage/HeadToHeadPage.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/headToHeadPage/HeadToHeadPage.tsx
@@ -5,8 +5,7 @@ import { useDispatch } from 'react-redux';
 
 import i18n from '../../../i18n';
 import LanguageIcon from '../../components/LanguageIcon';
-import PopoverStickOnHover from '../../components/PopoverStickOnHover';
-import type { OverlayProps } from 'react-bootstrap/Overlay';
+import PopoverStickOnHover, { type Placement } from '../../components/PopoverStickOnHover';
 import Placements from '../../config/placements';
 import { actions } from '../../slices';
 import { type AppDispatch } from '../../slices';
@@ -30,8 +29,6 @@ export interface HeadToHeadPageProps {
   } | null;
 }
 
-type Placement = OverlayProps['placement'];
-
 const colors = {
   gold: '#e0bf7a',
   silver: '#c2c9d6',
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/Announcement.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/Announcement.tsx
index fd3690994..fc1dcfd6a 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/Announcement.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/Announcement.tsx
@@ -1,6 +1,3 @@
-// import React from 'react';
-// import Table from 'react-bootstrap/Table';
-
 function Announcement() {
   return null;
 }
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
index aad6c6b84..d99906d9b 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, type RefObject } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 
 import { type UserNameUser } from '../../components/UserName';
 import UserInfo from '../../components/UserInfo';
@@ -77,7 +77,7 @@ function ChatActionModal({
 
   return (
     <Modal
-      contentClassName="cb-bg-panel cb-text h-75"
+      contentClassName="cb-text h-75"
       show={modalShowing.opened}
       onHide={handleCloseModal}
     >
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.tsx
index 49c444408..68738e5ff 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 
-import Table from 'react-bootstrap/Table';
+import { Table } from '@mantine/core';
 import { useSelector, useDispatch } from 'react-redux';
 
 import i18n from '../../../i18n';
@@ -58,7 +58,7 @@ function Leaderboard() {
   }, [period]);
 
   return (
-    <Table striped className="cb-bg-panel cb-border-color rounded shadow-sm m-0">
+    <Table className="table table-striped cb-bg-panel cb-border-color rounded shadow-sm m-0">
       <thead>
         <tr aria-label={i18n.t('Leaderboard header')}>
           <th
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
index d9dcd4f8c..dc0b228ea 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
@@ -3,7 +3,7 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import cn from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import { getPageProp } from '@/inertia/pageProps';
 import * as lobbyMiddlewares from '@/middlewares/Lobby';
 import * as selectors from '@/selectors';
@@ -194,7 +194,6 @@ function LobbyWidget() {
       <Modal
         show={showCreateGameModal}
         onHide={handleCloseCreateGameModal}
-        contentClassName="cb-bg-panel"
       >
         <Modal.Header className="cb-border-color text-white" closeButton>
           <Modal.Title className="w-100 text-center pr-4">{i18n.t('Create a game')}</Modal.Title>
@@ -207,7 +206,6 @@ function LobbyWidget() {
         show={showJoinGameModal}
         onHide={handleCloseJoinGameModal}
         dialogClassName="cb-join-game-modal"
-        contentClassName="cb-bg-panel"
       >
         <Modal.Header className="cb-border-color text-white" closeButton>
           <Modal.Title>{i18n.t('Join a game')}</Modal.Title>
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
index 867b9c5b9..c1208e4db 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
+import { Button } from '@mantine/core';
 import cn from 'classnames';
-import Button from 'react-bootstrap/Button';
 import { useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import TournamentDescription from '@/components/TournamentDescription';
 import TournamentPreviewPanel from '@/components/TournamentPreviewPanel';
 import { grades } from '@/config/grades';
@@ -40,7 +40,7 @@ export const TournamentModal = NiceModal.create(({ tournament }: TournamentModal
       size="lg"
       show={modal.visible}
       onHide={modal.hide}
-      contentClassName="cb-bg-panel cb-text"
+      contentClassName="cb-text"
     >
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title className="d-flex flex-column">
@@ -81,7 +81,7 @@ export const TournamentModal = NiceModal.create(({ tournament }: TournamentModal
             {i18n.t('Open Tournament')}
           </a>
         )}
-        <Button onClick={modal.hide} className="btn btn-secondary cb-btn-secondary cb-rounded">
+        <Button onClick={modal.hide} color="cbSecondary" radius="md">
           {i18n.t('Close')}
         </Button>
       </Modal.Footer>
diff --git a/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.tsx b/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.tsx
index c29b9c9ac..ce5468c9c 100644
--- a/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.tsx
@@ -1,11 +1,11 @@
 import React, { memo, useCallback, useState } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
+import { Button } from '@mantine/core';
 import cn from 'classnames';
-import Button from 'react-bootstrap/Button';
 import { useSelector } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import ScheduleNavigationTab from '@/components/ScheduleNavigationBar';
 import TournamentDescription from '@/components/TournamentDescription';
 import TournamentPreviewPanel from '@/components/TournamentPreviewPanel';
@@ -57,7 +57,7 @@ export const EventModal = NiceModal.create(
         size="lg"
         show={modal.visible}
         onHide={modal.hide}
-        contentClassName="cb-bg-panel cb-text"
+        contentClassName="cb-text"
       >
         <Modal.Header className="cb-border-color" closeButton>
           <Modal.Title className="d-flex flex-column">
@@ -100,7 +100,7 @@ export const EventModal = NiceModal.create(
               {i18n.t('Open Tournament')}
             </a>
           )}
-          <Button onClick={handleClose} className="btn btn-secondary cb-btn-secondary cb-rounded">
+          <Button onClick={handleClose} color="cbSecondary" radius="md">
             {i18n.t('Close')}
           </Button>
         </Modal.Footer>
diff --git a/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.tsx b/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.tsx
index 37da98d82..5f312e98e 100644
--- a/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.tsx
@@ -1,22 +1,23 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Alert } from '@mantine/core';
 import cn from 'classnames';
 import { camelizeKeys, decamelizeKeys } from 'humps';
 import capitalize from 'lodash/capitalize';
 import noop from 'lodash/noop';
-import Alert from 'react-bootstrap/Alert';
 import { useDispatch, useSelector } from 'react-redux';
 import type { FormikHelpers } from 'formik';
 
 import type { RootState } from '@/slices/store';
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import { getPageProp } from '@/inertia/pageProps';
 
 import i18n, { getSupportedLocale } from '../../../i18n';
 import { configureSound } from '../../lib/sound';
 import { userSettingsSelector } from '../../selectors';
 import { actions } from '../../slices';
+import { bootstrapAlertColor } from '../../ui/alert';
 
 import UserSettingsForm, {
   type PasswordSettingsFormValues,
@@ -181,8 +182,16 @@ function Notification({ notification, onClose }: NotificationProps) {
     return () => clearTimeout(timerId);
   }, [onClose, message]);
 
+  if (!message) {
+    return null;
+  }
+
   return (
-    <Alert show={!!message} variant={variant} className="alert-dark-theme rounded shadow-sm mb-2">
+    <Alert
+      color={bootstrapAlertColor(variant)}
+      variant="light"
+      className={`alert alert-${variant} alert-dark-theme rounded shadow-sm mb-2`}
+    >
       {message}
     </Alert>
   );
diff --git a/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.tsx b/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.tsx
index 0ab53c173..53d122027 100644
--- a/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.tsx
@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
+import { Button, Menu } from '@mantine/core';
 import cn from 'classnames';
 import { Field, Form, Formik, useField, type FormikHelpers } from 'formik';
 import capitalize from 'lodash/capitalize';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
-import Dropdown from 'react-bootstrap/Dropdown';
 import * as Icon from 'react-feather';
 import * as Yup from 'yup';
 
@@ -202,27 +202,28 @@ function LanguageSelect({ lang, view, currentView, items, onSelect }: LanguageSe
   return (
     <div className={cn({ 'd-none': view !== currentView })}>
       <div className="h6">{i18n.t('Your weapon')}</div>
-      <Dropdown className="w-100">
-        <Dropdown.Toggle
-          id={`${view}-language-dropdown`}
-          data-testid={`${view}-langSelect`}
-          aria-label={i18n.t('Programming language select')}
-          className="btn cb-bg-panel cb-border-color text-white w-100 d-flex align-items-center"
-        >
-          <LanguageIcon
-            className="mr-2 flex-shrink-0"
-            lang={selectedSlug}
-            style={{ width: '24px', height: '24px' }}
-          />
-          <span>{capitalize(selectedName)}</span>
-        </Dropdown.Toggle>
-        <Dropdown.Menu className="w-100 cb-bg-highlight-panel">
+      <Menu width="target" keepMounted>
+        <Menu.Target>
+          <Button
+            id={`${view}-language-dropdown`}
+            data-testid={`${view}-langSelect`}
+            aria-label={i18n.t('Programming language select')}
+            variant="default"
+            className="btn cb-bg-panel cb-border-color text-white w-100 d-flex align-items-center"
+          >
+            <LanguageIcon
+              className="mr-2 flex-shrink-0"
+              lang={selectedSlug}
+              style={{ width: '24px', height: '24px' }}
+            />
+            <span>{capitalize(selectedName)}</span>
+          </Button>
+        </Menu.Target>
+        <Menu.Dropdown className="w-100 cb-bg-highlight-panel">
           {items.map(([slug, languageName]) => (
-            <Dropdown.Item
+            <Menu.Item
               key={slug}
-              as="button"
-              type="button"
-              active={selectedSlug === slug}
+              data-active={selectedSlug === slug || undefined}
               className="cb-dropdown-item d-flex align-items-center"
               onClick={() => {
                 helpers.setValue(slug);
@@ -235,10 +236,10 @@ function LanguageSelect({ lang, view, currentView, items, onSelect }: LanguageSe
                 style={{ width: '24px', height: '24px' }}
               />
               {capitalize(languageName)}
-            </Dropdown.Item>
+            </Menu.Item>
           ))}
-        </Dropdown.Menu>
-      </Dropdown>
+        </Menu.Dropdown>
+      </Menu>
     </div>
   );
 }
@@ -259,23 +260,23 @@ function LocaleSelect({ onSelect }: { onSelect: (locale: string) => void }) {
   const currentLocaleLabel = locales.find(([value]) => value === field.value)?.[1] || locales[0][1];
 
   return (
-    <Dropdown>
-      <Dropdown.Toggle
-        id="locale-dropdown"
-        data-testid="localeSelect"
-        aria-label={i18n.t('Locale')}
-        type="button"
-        className="btn cb-bg-panel cb-border-color text-white w-100 text-left"
-      >
-        {currentLocaleLabel}
-      </Dropdown.Toggle>
-      <Dropdown.Menu className="w-100 cb-bg-highlight-panel">
+    <Menu width="target">
+      <Menu.Target>
+        <Button
+          id="locale-dropdown"
+          data-testid="localeSelect"
+          aria-label={i18n.t('Locale')}
+          variant="default"
+          className="btn cb-bg-panel cb-border-color text-white w-100 text-left"
+        >
+          {currentLocaleLabel}
+        </Button>
+      </Menu.Target>
+      <Menu.Dropdown className="w-100 cb-bg-highlight-panel">
         {locales.map(([value, label]) => (
-          <Dropdown.Item
+          <Menu.Item
             key={value}
-            as="button"
-            type="button"
-            active={field.value === value}
+            data-active={field.value === value || undefined}
             className="cb-dropdown-item"
             onClick={() => {
               helpers.setValue(value);
@@ -283,10 +284,10 @@ function LocaleSelect({ onSelect }: { onSelect: (locale: string) => void }) {
             }}
           >
             {label}
-          </Dropdown.Item>
+          </Menu.Item>
         ))}
-      </Dropdown.Menu>
-    </Dropdown>
+      </Menu.Dropdown>
+    </Menu>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/DetailsModal.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/DetailsModal.tsx
index b1eb66cb8..83581e953 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/DetailsModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/DetailsModal.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useMemo, useState, memo, useContext, type ReactNode } from 'react';
 
-import cn from 'classnames';
-import Button from 'react-bootstrap/Button';
+import { Button } from '@mantine/core';
 import moment from 'moment';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import { type TournamentState } from '@/slices/initial';
 
 import i18n from '../../../i18n';
@@ -99,11 +98,6 @@ function DetailsModal({ tournament, modalShowing, setModalShowing }: DetailsModa
   const hasCustomEventStyles = useContext(CustomEventStylesContext);
   const [showRawJson, setShowRawJson] = useState(false);
 
-  const closeBtnClassName = cn('btn rounded-lg', {
-    'btn-secondary': !hasCustomEventStyles,
-    'cb-custome-event-btn-secondary': !hasCustomEventStyles,
-  });
-
   const detailSections = useMemo(() => {
     const sections = [
       {
@@ -217,14 +211,20 @@ function DetailsModal({ tournament, modalShowing, setModalShowing }: DetailsModa
       </Modal.Body>
       <Modal.Footer className="cb-border-color d-flex justify-content-between">
         <Button
-          variant="outline-secondary"
-          size="sm"
-          className="rounded-lg"
+          variant="outline"
+          color="cbSecondary"
+          size="xs"
+          radius="md"
           onClick={() => setShowRawJson((v) => !v)}
         >
           {i18n.t(showRawJson ? 'Hide JSON' : 'Raw JSON')}
         </Button>
-        <Button onClick={handleCancel} className={closeBtnClassName}>
+        <Button
+          onClick={handleCancel}
+          color="cbSecondary"
+          radius="md"
+          className={hasCustomEventStyles ? 'cb-custom-event-btn-secondary' : undefined}
+        >
           {i18n.t('Close')}
         </Button>
       </Modal.Footer>
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/EditTournament.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/EditTournament.tsx
index 9e293912d..c695ae2b9 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/EditTournament.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/EditTournament.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
+import { Alert } from '@mantine/core';
 import { decamelizeKeys, camelizeKeys } from 'humps';
 import noop from 'lodash/noop';
-import Alert from 'react-bootstrap/Alert';
 
 import i18n from '../../../i18n';
 import Loading from '../../components/Loading';
+import { bootstrapAlertColor } from '../../ui/alert';
 
 import TournamentForm from './TournamentForm';
 import { formatDatetimeLocal, getBrowserTimezone } from './dateTime';
@@ -58,8 +59,16 @@ function Notification({ notification, onClose }: NotificationProps) {
     return () => clearTimeout(timerId);
   }, [onClose, message]);
 
+  if (!message) {
+    return null;
+  }
+
   return (
-    <Alert show={!!message} variant={variant} className="alert-dark-theme rounded shadow-sm mb-2">
+    <Alert
+      color={bootstrapAlertColor(variant)}
+      variant="light"
+      className={`alert alert-${variant} alert-dark-theme rounded shadow-sm mb-2`}
+    >
       {message}
     </Alert>
   );
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/MatchConfirmationModal.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/MatchConfirmationModal.tsx
index a3944df4a..f17cacd45 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/MatchConfirmationModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/MatchConfirmationModal.tsx
@@ -1,9 +1,8 @@
 import React, { useState, useCallback, useRef, useEffect, useMemo, memo, useContext } from 'react';
 
-import cn from 'classnames';
-import Button from 'react-bootstrap/Button';
+import { Button } from '@mantine/core';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import CustomEventStylesContext from '@/components/CustomEventStylesContext';
 import getOpponentId from '@/utils/matches';
 import { makeGameUrl } from '@/utils/urlBuilders';
@@ -150,14 +149,8 @@ function MatchConfirmationModal({
   }, [openMatch]);
 
   const title = i18next.t('Next match will be opened. Show now?');
-  const closeBtnClassName = cn('btn cb-rounded', {
-    'btn-secondary cb-btn-secondary': !hasCustomEventStyles,
-    'cb-custom-event-btn-info': hasCustomEventStyles,
-  });
-  const openBtnClassName = cn('btn cb-rounded', {
-    'btn-secondary cb-btn-secondary': !hasCustomEventStyles,
-    'cb-custom-event-btn-primary': hasCustomEventStyles,
-  });
+  const closeBtnClassName = hasCustomEventStyles ? 'cb-custom-event-btn-info' : undefined;
+  const openBtnClassName = hasCustomEventStyles ? 'cb-custom-event-btn-primary' : undefined;
 
   return (
     <Modal
@@ -190,11 +183,22 @@ function MatchConfirmationModal({
       </Modal.Body>
       <Modal.Footer className="cb-border-color">
         <div className="d-flex justify-content-between w-100">
-          <Button onClick={handleCancel} className={closeBtnClassName}>
+          <Button
+            onClick={handleCancel}
+            color="cbSecondary"
+            radius="md"
+            className={closeBtnClassName}
+          >
             {i18next.t('Cancel')}
           </Button>
           <div className="d-flex">
-            <Button ref={confirmBtnRef} onClick={handleConfirmation} className={openBtnClassName}>
+            <Button
+              ref={confirmBtnRef}
+              onClick={handleConfirmation}
+              color="cbSecondary"
+              radius="md"
+              className={openBtnClassName}
+            >
               {i18next.t('Open')}
             </Button>
           </div>
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/StartRoundConfirmationModal.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/StartRoundConfirmationModal.tsx
index 892f82f15..9067ee263 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/StartRoundConfirmationModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/StartRoundConfirmationModal.tsx
@@ -1,9 +1,8 @@
 import React, { useCallback, useRef, memo, useContext } from 'react';
 
-import cn from 'classnames';
-import Button from 'react-bootstrap/Button';
+import { Button } from '@mantine/core';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import CustomEventStylesContext from '@/components/CustomEventStylesContext';
 
 import i18n from '../../../i18n';
@@ -55,14 +54,8 @@ function StartRoundConfirmationModal({
 
   const hasCustomEventStyle = useContext(CustomEventStylesContext);
 
-  const cancelBtnClassName = cn('btn cb-rounded', {
-    'btn-secondary cb-btn-secondary': !hasCustomEventStyle,
-    'cb-custom-event-btn-secondary': hasCustomEventStyle,
-  });
-  const confirmBtnClassName = cn('btn text-white cb-rounded', {
-    'btn-success cb-btn-success': !hasCustomEventStyle,
-    'cb-custom-event-btn-success': hasCustomEventStyle,
-  });
+  const cancelBtnClassName = hasCustomEventStyle ? 'cb-custom-event-btn-secondary' : undefined;
+  const confirmBtnClassName = hasCustomEventStyle ? 'cb-custom-event-btn-success' : undefined;
 
   const handleConfirmation = useCallback(() => {
     switch (modalShowing) {
@@ -86,7 +79,7 @@ function StartRoundConfirmationModal({
   const text = getModalText(modalShowing);
 
   return (
-    <Modal show={!!modalShowing} onHide={onClose} contentClassName="cb-bg-panel cb-text">
+    <Modal show={!!modalShowing} onHide={onClose} contentClassName="cb-text">
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title>{title}</Modal.Title>
       </Modal.Header>
@@ -115,13 +108,15 @@ function StartRoundConfirmationModal({
       </Modal.Body>
       <Modal.Footer className="cb-border-color">
         <div className="d-flex justify-content-between w-100">
-          <Button onClick={onClose} className={cancelBtnClassName}>
+          <Button onClick={onClose} color="cbSecondary" radius="md" className={cancelBtnClassName}>
             {i18n.t('Cancel')}
           </Button>
           <div className="d-flex">
             <Button
               ref={confirmBtnRef}
               onClick={handleConfirmation}
+              color="cbSuccess"
+              radius="md"
               className={confirmBtnClassName}
             >
               {i18n.t('Confirm')}
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentDescriptionModal.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentDescriptionModal.tsx
index 04b7e4ef1..6cec05975 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentDescriptionModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentDescriptionModal.tsx
@@ -2,11 +2,10 @@ import React, { memo, useContext } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cn from 'classnames';
+import { Button } from '@mantine/core';
 import i18next from 'i18next';
-import Button from 'react-bootstrap/Button';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 
 import CustomEventStylesContext from '../../components/CustomEventStylesContext';
 import ModalCodes from '../../config/modalCodes';
@@ -21,14 +20,11 @@ const TournamentDescriptionModal = NiceModal.create(
 
     const hasCustomEventStyle = useContext(CustomEventStylesContext);
 
-    const closeBtnClassName = cn('btn text-white rounded-lg', {
-      'btn-secondary cb-btn-secondary': !hasCustomEventStyle,
-      'cb-custom-event-btn-secondary': hasCustomEventStyle,
-    });
+    const closeBtnClassName = hasCustomEventStyle ? 'cb-custom-event-btn-secondary' : undefined;
 
     return (
       <Modal
-        contentClassName="cb-bg-panel cb-text"
+        contentClassName="cb-text"
         centered
         show={modal.visible}
         onHide={modal.hide}
@@ -39,8 +35,13 @@ const TournamentDescriptionModal = NiceModal.create(
         <Modal.Body>{description}</Modal.Body>
         <Modal.Footer className="cb-border-color">
           <div className="d-flex justify-content-end w-100">
-            <Button onClick={modal.hide} className={closeBtnClassName}>
-              <FontAwesomeIcon icon="times" className="mr-2" />
+            <Button
+              onClick={modal.hide}
+              color="cbSecondary"
+              radius="md"
+              className={closeBtnClassName}
+              leftSection={<FontAwesomeIcon icon="times" />}
+            >
               {i18next.t('Close')}
             </Button>
           </div>
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.tsx
index 453cd1119..040ee242c 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.tsx
@@ -1,11 +1,11 @@
 import React, { memo, useCallback, useContext, useRef, useState } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from '@mantine/core';
 import cn from 'classnames';
-import Button from 'react-bootstrap/Button';
 import { useDispatch } from 'react-redux';
 
-import Modal from '@/components/BootstrapModal';
+import Modal from '@/components/CbModal';
 import CustomEventStylesContext from '@/components/CustomEventStylesContext';
 import { type AppDispatch } from '@/slices';
 
@@ -104,14 +104,8 @@ function TournamentMainControlButtons({
     closeFinishConfirmationModal();
   }, [closeFinishConfirmationModal]);
 
-  const cancelBtnClassName = cn('btn cb-rounded', {
-    'btn-secondary cb-btn-secondary': !hasCustomEventStyle,
-    'cb-custom-event-btn-secondary': hasCustomEventStyle,
-  });
-  const confirmBtnClassName = cn('btn text-white cb-rounded', {
-    'btn-danger': !hasCustomEventStyle,
-    'cb-custom-event-btn-danger': hasCustomEventStyle,
-  });
+  const cancelBtnClassName = hasCustomEventStyle ? 'cb-custom-event-btn-secondary' : undefined;
+  const confirmBtnClassName = hasCustomEventStyle ? 'cb-custom-event-btn-danger' : undefined;
   const actionBtnClassName = cn('btn btn-sm text-nowrap cb-rounded mr-2 mb-2', {
     'btn-secondary cb-btn-secondary': !hasCustomEventStyle,
     'cb-custom-event-btn-secondary': hasCustomEventStyle,
@@ -155,12 +149,19 @@ function TournamentMainControlButtons({
         </Modal.Body>
         <Modal.Footer className="cb-border-color">
           <div className="d-flex justify-content-between w-100">
-            <Button onClick={closeRestartConfirmationModal} className={cancelBtnClassName}>
+            <Button
+              onClick={closeRestartConfirmationModal}
+              color="cbSecondary"
+              radius="md"
+              className={cancelBtnClassName}
+            >
               {i18n.t('Cancel')}
             </Button>
             <Button
               ref={confirmBtnRef}
               onClick={confirmRestartTournament}
+              color="red"
+              radius="md"
               className={confirmBtnClassName}
             >
               {i18n.t('Reset tournament')}
@@ -188,10 +189,20 @@ function TournamentMainControlButtons({
         </Modal.Body>
         <Modal.Footer className="cb-border-color">
           <div className="d-flex justify-content-between w-100">
-            <Button onClick={closeRetryConfirmationModal} className={cancelBtnClassName}>
+            <Button
+              onClick={closeRetryConfirmationModal}
+              color="cbSecondary"
+              radius="md"
+              className={cancelBtnClassName}
+            >
               {i18n.t('Cancel')}
             </Button>
-            <Button onClick={confirmRetryTournament} className={confirmBtnClassName}>
+            <Button
+              onClick={confirmRetryTournament}
+              color="red"
+              radius="md"
+              className={confirmBtnClassName}
+            >
               {i18n.t('Retry tournament')}
             </Button>
           </div>
@@ -215,10 +226,20 @@ function TournamentMainControlButtons({
         </Modal.Body>
         <Modal.Footer className="cb-border-color">
           <div className="d-flex justify-content-between w-100">
-            <Button onClick={closeFinishConfirmationModal} className={cancelBtnClassName}>
+            <Button
+              onClick={closeFinishConfirmationModal}
+              color="cbSecondary"
+              radius="md"
+              className={cancelBtnClassName}
+            >
               {i18n.t('Cancel')}
             </Button>
-            <Button onClick={confirmFinishTournament} className={confirmBtnClassName}>
+            <Button
+              onClick={confirmFinishTournament}
+              color="red"
+              radius="md"
+              className={confirmBtnClassName}
+            >
               {i18n.t('Finish tournament')}
             </Button>
           </div>
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/UsersMatchList.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/UsersMatchList.tsx
index 4cf9db301..bdbf2de57 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/UsersMatchList.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/UsersMatchList.tsx
@@ -1,13 +1,12 @@
 import React, { memo } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@mantine/core';
 import cn from 'classnames';
 import i18next from 'i18next';
 import moment from 'moment';
-import Tooltip from 'react-bootstrap/Tooltip';
 import { useSelector } from 'react-redux';
 
-import OverlayTrigger from '@/components/OverlayTriggerCompat';
 import useMatchesStatistics from '@/utils/useMatchesStatistics';
 
 import { type UserNameUser } from '@/components/UserName';
@@ -342,43 +341,26 @@ function UsersMatchList({
                 {matchResult && matchResult.result !== 'undefined' && (
                   <div className={matchMetaClassName}>
                     {!showScore && (
-                      <OverlayTrigger
-                        placement="top"
-                        overlay={
-                          <Tooltip id={`tests-${match.id}`}>{i18next.t('Tests percent')}</Tooltip>
-                        }
-                      >
+                      <Tooltip label={i18next.t('Tests percent')} position="top" withArrow>
                         <span className={metaItemClassName}>
                           <span className={metaIconClassName}>
                             <FontAwesomeIcon className="text-success" icon="tasks" />
                           </span>
                           {matchResult.resultPercent}
                         </span>
-                      </OverlayTrigger>
+                      </Tooltip>
                     )}
                     {Number.isFinite(match.durationSec) && (
-                      <OverlayTrigger
-                        placement="top"
-                        overlay={
-                          <Tooltip id={`duration-${match.id}`}>
-                            {i18next.t('Duration (sec)')}
-                          </Tooltip>
-                        }
-                      >
+                      <Tooltip label={i18next.t('Duration (sec)')} position="top" withArrow>
                         <span className={metaItemClassName}>
                           <span className={metaIconClassName}>
                             <FontAwesomeIcon className="text-primary" icon="stopwatch" />
                           </span>
                           <span className="cb-tournament-match-duration">{match.durationSec}</span>
                         </span>
-                      </OverlayTrigger>
+                      </Tooltip>
                     )}
-                    <OverlayTrigger
-                      placement="top"
-                      overlay={
-                        <Tooltip id={`time-${match.id}`}>{i18next.t('Started - Finished')}</Tooltip>
-                      }
-                    >
+                    <Tooltip label={i18next.t('Started - Finished')} position="top" withArrow>
                       <span className={metaItemClassName}>
                         <span className={metaIconClassName}>
                           <FontAwesomeIcon className="text-primary" icon="flag-checkered" />
@@ -387,7 +369,7 @@ function UsersMatchList({
                         <span className="mx-1">-</span>
                         {match.finishedAt ? toLocalTime(match.finishedAt) : '-'}
                       </span>
-                    </OverlayTrigger>
+                    </Tooltip>
                   </div>
                 )}
               </div>
diff --git a/apps/codebattle/assets/js/widgets/ui/alert.ts b/apps/codebattle/assets/js/widgets/ui/alert.ts
new file mode 100644
index 000000000..303dba3c7
--- /dev/null
+++ b/apps/codebattle/assets/js/widgets/ui/alert.ts
@@ -0,0 +1,13 @@
+// Maps a Bootstrap alert variant (success/danger/info/warning/secondary) to the
+// nearest Mantine color. The branded `.alert-dark-theme` gradient still drives the
+// actual look via className; this keeps Mantine's fallback styling sensible.
+const COLORS: Record<string, string> = {
+  success: 'green',
+  danger: 'red',
+  info: 'blue',
+  warning: 'yellow',
+  secondary: 'gray',
+  primary: 'blue',
+};
+
+export const bootstrapAlertColor = (variant?: string) => COLORS[variant ?? ''] ?? 'blue';
diff --git a/apps/codebattle/assets/js/widgets/ui/theme.ts b/apps/codebattle/assets/js/widgets/ui/theme.ts
new file mode 100644
index 000000000..c9914f6d2
--- /dev/null
+++ b/apps/codebattle/assets/js/widgets/ui/theme.ts
@@ -0,0 +1,63 @@
+import { createTheme, type MantineColorsTuple } from '@mantine/core';
+
+// Brand accent — the app's `$orange` (rgba(238, 55, 55, 0.76) ≈ #ee3737).
+// Mantine needs a 10-shade tuple; index 6 is the default filled shade.
+const brand: MantineColorsTuple = [
+  '#ffe9e6',
+  '#ffd2cc',
+  '#ffa39a',
+  '#ff7163',
+  '#fa4736',
+  '#f52d1a',
+  '#ee3737',
+  '#d31f20',
+  '#bd1519',
+  '#a60510',
+];
+
+// Dark secondary button color (`$cb-secondary` #3a3f50, filled at index 6).
+const cbSecondary: MantineColorsTuple = [
+  '#f3f4f6',
+  '#e4e6ea',
+  '#c6cad2',
+  '#a6adb9',
+  '#8b93a3',
+  '#798296',
+  '#3a3f50',
+  '#333848',
+  '#2c3140',
+  '#242835',
+];
+
+// Success button color (`$cb-success` #46a077, hover `$cb-hovered-success` #398862
+// lands on index 7 — matches Mantine's darken-on-hover).
+const cbSuccess: MantineColorsTuple = [
+  '#e7f6ef',
+  '#d2ece1',
+  '#a6d9c2',
+  '#77c5a1',
+  '#52b485',
+  '#3caa74',
+  '#46a077',
+  '#398862',
+  '#2f7150',
+  '#1f5c3f',
+];
+
+// Spacing scale mirrors Bootstrap 4 spacers (0.25 / 0.5 / 1 / 1.5 / 3 rem) so
+// converting `mb-2 p-3 …` to Mantine style props (`mb="sm" p="md"`) keeps the
+// same visual rhythm during the incremental migration.
+export const theme = createTheme({
+  primaryColor: 'brand',
+  colors: { brand, cbSecondary, cbSuccess },
+  fontFamily: 'Montserrat, sans-serif',
+  fontFamilyMonospace: "'Source Code Pro', monospace",
+  defaultRadius: 'sm',
+  spacing: {
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '3rem',
+  },
+});
diff --git a/apps/codebattle/assets/js/widgets/ui/withMantine.tsx b/apps/codebattle/assets/js/widgets/ui/withMantine.tsx
new file mode 100644
index 000000000..25d2fa5ad
--- /dev/null
+++ b/apps/codebattle/assets/js/widgets/ui/withMantine.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { MantineProvider } from '@mantine/core';
+
+import { theme } from './theme';
+
+// Wraps any React tree in the shared MantineProvider. The app has a single
+// baked-in dark look (no runtime theme toggle), so the color scheme is forced
+// to dark. Used at every React root: the legacy widget roots and Inertia.
+export const withMantine = (children: React.ReactNode) => (
+  <MantineProvider theme={theme} forceColorScheme="dark">
+    {children}
+  </MantineProvider>
+);
diff --git a/apps/codebattle/package.json b/apps/codebattle/package.json
index ebee47036..488f3a189 100644
--- a/apps/codebattle/package.json
+++ b/apps/codebattle/package.json
@@ -40,6 +40,8 @@
     "@fortawesome/free-solid-svg-icons": "^7.3.1",
     "@fortawesome/react-fontawesome": "^3.5.0",
     "@inertiajs/react": "^2.3.27",
+    "@mantine/core": "^9.5.1",
+    "@mantine/hooks": "^9.5.1",
     "@monaco-editor/react": "^4.7.0",
     "@reduxjs/toolkit": "^2.12.0",
     "@sentry/react": "^10.68.0",
@@ -76,7 +78,6 @@
     "quill-delta": "^5.1.0",
     "react": "^19.2.8",
     "react-big-calendar": "^1.20.0",
-    "react-bootstrap": "^1.6.8",
     "react-calendar-heatmap": "^1.10.0",
     "react-chartjs-2": "^5.3.1",
     "react-contexify": "^6.0.0",
@@ -118,7 +119,9 @@
     "oxfmt": "^0.60.0",
     "oxlint": "^1.75.0",
     "postcss": "^8.5.23",
+    "postcss-preset-mantine": "^1.18.0",
     "postcss-scss": "^4.0.9",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.9.6",
     "react-refresh": "^0.18.0",
     "stylelint": "^17.14.1",
diff --git a/apps/codebattle/pnpm-lock.yaml b/apps/codebattle/pnpm-lock.yaml
index aa2729db5..557a257c6 100644
--- a/apps/codebattle/pnpm-lock.yaml
+++ b/apps/codebattle/pnpm-lock.yaml
@@ -57,6 +57,12 @@ importers:
       '@inertiajs/react':
         specifier: ^2.3.27
         version: 2.3.27(debug@4.4.3(supports-color@5.5.0))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(supports-color@5.5.0)
+      '@mantine/core':
+        specifier: ^9.5.1
+        version: 9.5.1(@mantine/hooks@9.5.1(react@19.2.8))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@mantine/hooks':
+        specifier: ^9.5.1
+        version: 9.5.1(react@19.2.8)
       '@monaco-editor/react':
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.56.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -165,9 +171,6 @@ importers:
       react-big-calendar:
         specifier: ^1.20.0
         version: 1.20.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      react-bootstrap:
-        specifier: ^1.6.8
-        version: 1.6.8(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react-calendar-heatmap:
         specifier: ^1.10.0
         version: 1.10.0(react@19.2.8)
@@ -258,7 +261,7 @@ importers:
         version: 19.2.3(@types/react@19.2.17)
       '@vitejs/plugin-react':
         specifier: ^6.0.4
-        version: 6.0.4(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0))
+        version: 6.0.4(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0))
       baseline-browser-mapping:
         specifier: ^2.11.4
         version: 2.11.4
@@ -286,9 +289,15 @@ importers:
       postcss:
         specifier: ^8.5.18
         version: 8.5.23
+      postcss-preset-mantine:
+        specifier: ^1.18.0
+        version: 1.18.0(postcss@8.5.23)
       postcss-scss:
         specifier: ^4.0.9
         version: 4.0.9(postcss@8.5.23)
+      postcss-simple-vars:
+        specifier: ^7.0.1
+        version: 7.0.1(postcss@8.5.23)
       prettier:
         specifier: ^3.9.6
         version: 3.9.6
@@ -306,13 +315,13 @@ importers:
         version: 7.0.2
       vite:
         specifier: ^8.1.5
-        version: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0)
+        version: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0)
       vite-plugin-environment:
         specifier: ^1.1.3
-        version: 1.1.3(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0))
+        version: 1.1.3(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0))
       vitest:
         specifier: ^4.1.10
-        version: 4.1.10(@types/node@25.9.1)(jsdom@29.1.1)(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0))
+        version: 4.1.10(@types/node@25.9.1)(jsdom@29.1.1)(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0))
 
 packages:
 
@@ -787,6 +796,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@floating-ui/react@0.27.20':
+    resolution: {integrity: sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==}
+    peerDependencies:
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
@@ -877,6 +892,18 @@ packages:
   '@kurkle/color@0.3.4':
     resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
 
+  '@mantine/core@9.5.1':
+    resolution: {integrity: sha512-3olDOYJBfW4kR37Aqdy/+FnYG7iNb5SPzOGeCp9dDxnt65K94sEqETDnXGJptOMO2xLm4KLJ/eBt3IIhJA7Z4Q==}
+    peerDependencies:
+      '@mantine/hooks': 9.5.1
+      react: ^19.2.0
+      react-dom: ^19.2.0
+
+  '@mantine/hooks@9.5.1':
+    resolution: {integrity: sha512-2sK9OdWvrzKBOuWxLfQA5qcAJzxpzqNlKumaP7Uq0i7LDBQeY/sYgNiBWLwtW+iZw6fFXwPf0nI7q5VVpvqnNQ==}
+    peerDependencies:
+      react: ^19.2.0
+
   '@monaco-editor/loader@1.7.0':
     resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}
 
@@ -1375,11 +1402,6 @@ packages:
       react-redux:
         optional: true
 
-  '@restart/context@2.1.4':
-    resolution: {integrity: sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==}
-    peerDependencies:
-      react: '>=16.3.2'
-
   '@restart/hooks@0.4.16':
     resolution: {integrity: sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==}
     peerDependencies:
@@ -1614,9 +1636,6 @@ packages:
     peerDependencies:
       '@types/react': '*'
 
-  '@types/invariant@2.2.37':
-    resolution: {integrity: sha512-IwpIMieE55oGWiXkQPSBY1nw1nFs6bsKXTFskNY8sdS17K24vyEBRQZEwlRS7ZmXCWnJcQtbxWzly+cODWGs2A==}
-
   '@types/katex@0.16.8':
     resolution: {integrity: sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==}
 
@@ -1638,9 +1657,6 @@ packages:
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
-  '@types/prop-types@15.7.15':
-    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
-
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
@@ -2004,6 +2020,10 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
 
@@ -2256,6 +2276,9 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -2490,6 +2513,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -3356,9 +3383,32 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.5.18
+
   postcss-media-query-parser@0.2.3:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
+  postcss-mixins@12.1.2:
+    resolution: {integrity: sha512-90pSxmZVfbX9e5xCv7tI5RV1mnjdf16y89CJKbf/hD7GyOz1FCxcYMl8ZYA8Hc56dbApTKKmU9HfvgfWdCxlwg==}
+    engines: {node: ^20.0 || ^22.0 || >=24.0}
+    peerDependencies:
+      postcss: ^8.5.18
+
+  postcss-nested@7.0.2:
+    resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.5.18
+
+  postcss-preset-mantine@1.18.0:
+    resolution: {integrity: sha512-sP6/s1oC7cOtBdl4mw/IRKmKvYTuzpRrH/vT6v9enMU/EQEQ31eQnHcWtFghOXLH87AAthjL/Q75rLmin1oZoA==}
+    peerDependencies:
+      postcss: ^8.5.18
+
   postcss-resolve-nested-selector@0.1.6:
     resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
 
@@ -3378,6 +3428,12 @@ packages:
     resolution: {integrity: sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==}
     engines: {node: '>=4'}
 
+  postcss-simple-vars@7.0.1:
+    resolution: {integrity: sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==}
+    engines: {node: '>=14.0'}
+    peerDependencies:
+      postcss: ^8.5.18
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -3398,11 +3454,6 @@ packages:
     resolution: {integrity: sha512-A4RaV6mg3jocQqBYmqi2ojJ2VnV4AKTEHhl3xHsud08/u87gcVJc8DUOtgnPegoOCQv/shUqEk4eZGYibjnHzQ==}
     engines: {node: '>= 0.8'}
 
-  prop-types-extra@1.1.1:
-    resolution: {integrity: sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==}
-    peerDependencies:
-      react: '>=0.14.0'
-
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -3444,12 +3495,6 @@ packages:
       react: ^16.14.0 || ^17 || ^18 || ^19
       react-dom: ^16.14.0 || ^17 || ^18 || ^19
 
-  react-bootstrap@1.6.8:
-    resolution: {integrity: sha512-yD6uN78XlFOkETQp6GRuVe0s5509x3XYx8PfPbirwFTYCj5/RfmSs9YZGCwkUrhZNFzj7tZPdpb+3k50mK1E4g==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
   react-calendar-heatmap@1.10.0:
     resolution: {integrity: sha512-e5vcrzMWzKIF710egr1FpjWyuDEFeZm39nvV25muc8Wtqqi8iDOfqREELeQ9Wouqf9hhj939gq0i+iAxo7KdSw==}
     peerDependencies:
@@ -3535,6 +3580,12 @@ packages:
     peerDependencies:
       moment: '>=1.6.0'
 
+  react-number-format@5.4.5:
+    resolution: {integrity: sha512-y8O2yHHj3w0aE9XO8d2BCcUOOdQTRSVq+WIuMlLVucAm5XNjJAy+BoOJiuQMldVYVOKTMyvVNfnbl2Oqp+YxGw==}
+    peerDependencies:
+      react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-outside-click-handler@1.3.0:
     resolution: {integrity: sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==}
     peerDependencies:
@@ -3584,6 +3635,26 @@ packages:
     resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
     engines: {node: '>=0.10.0'}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-resize-aware@3.1.3:
     resolution: {integrity: sha512-dPacJZfDczrGOljY8MBnQRudxjI8+M9qG5GXQzU4wIl5q2T4e8UcrSl2rsEBYn9DBuGflhDnI2uYGGFJ991DfA==}
     peerDependencies:
@@ -3606,6 +3677,16 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-toastify@5.5.0:
     resolution: {integrity: sha512-jsVme7jALIFGRyQsri/g4YTsRuaaGI70T6/ikjwZMB4mwTZaCWqj5NqxhGrRStKlJc5npXKKvKeqTiRGQl78LQ==}
     peerDependencies:
@@ -3943,6 +4024,12 @@ packages:
   stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
 
+  sugarss@5.0.1:
+    resolution: {integrity: sha512-ctS5RYCBVvPoZAnzIaX5QSShK8ZiZxD5HUqSxlusvEMC+QZQIPCPOIJg6aceFX+K2rf4+SH89eu++h1Zmsr2nw==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.5.18
+
   supports-color@10.2.2:
     resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
     engines: {node: '>=18'}
@@ -3965,10 +4052,17 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
+  tabbable@6.5.0:
+    resolution: {integrity: sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==}
+
   table@6.9.0:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
   terser@5.44.0:
     resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
     engines: {node: '>=10'}
@@ -4044,6 +4138,10 @@ packages:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
+  type-fest@5.8.0:
+    resolution: {integrity: sha512-YGYEVz3Fm5iy/AybuA0oyNFq7H4CgQNfRp/qfe8nurE1kuCeNm3/vfm9X4Mtl+qLyaKJUh5xrFZwogr41SMjYA==}
+    engines: {node: '>=20'}
+
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -4121,6 +4219,16 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-isomorphic-layout-effect@1.2.1:
     resolution: {integrity: sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==}
     peerDependencies:
@@ -4130,6 +4238,16 @@ packages:
       '@types/react':
         optional: true
 
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
@@ -4750,6 +4868,14 @@ snapshots:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
 
+  '@floating-ui/react@0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      tabbable: 6.5.0
+
   '@floating-ui/utils@0.2.11': {}
 
   '@floating-ui/utils@0.2.12': {}
@@ -4853,6 +4979,23 @@ snapshots:
 
   '@kurkle/color@0.3.4': {}
 
+  '@mantine/core@9.5.1(@mantine/hooks@9.5.1(react@19.2.8))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@mantine/hooks': 9.5.1(react@19.2.8)
+      clsx: 2.1.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-number-format: 5.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8)
+      type-fest: 5.8.0
+    transitivePeerDependencies:
+      - '@types/react'
+
+  '@mantine/hooks@9.5.1(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+
   '@monaco-editor/loader@1.7.0':
     dependencies:
       state-local: 1.0.7
@@ -5141,10 +5284,6 @@ snapshots:
       react: 19.2.8
       react-redux: 9.3.0(@types/react@19.2.17)(react@19.2.8)(redux@5.0.1)
 
-  '@restart/context@2.1.4(react@19.2.8)':
-    dependencies:
-      react: 19.2.8
-
   '@restart/hooks@0.4.16(react@19.2.8)':
     dependencies:
       dequal: 2.0.3
@@ -5340,8 +5479,6 @@ snapshots:
       '@types/react': 19.2.17
       hoist-non-react-statics: 3.3.2
 
-  '@types/invariant@2.2.37': {}
-
   '@types/katex@0.16.8': {}
 
   '@types/lodash-es@4.17.12':
@@ -5363,8 +5500,6 @@ snapshots:
 
   '@types/parse-json@4.0.2': {}
 
-  '@types/prop-types@15.7.15': {}
-
   '@types/react-dom@19.2.3(@types/react@19.2.17)':
     dependencies:
       '@types/react': 19.2.17
@@ -5450,10 +5585,10 @@ snapshots:
 
   '@ungap/structured-clone@1.3.1': {}
 
-  '@vitejs/plugin-react@6.0.4(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0))':
+  '@vitejs/plugin-react@6.0.4(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0)
+      vite: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0)
 
   '@vitest/expect@4.1.10':
     dependencies:
@@ -5464,13 +5599,13 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.10(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0))':
+  '@vitest/mocker@4.1.10(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0))':
     dependencies:
       '@vitest/spy': 4.1.10
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0)
+      vite: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0)
 
   '@vitest/pretty-format@4.1.10':
     dependencies:
@@ -5720,6 +5855,8 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  camelcase-css@2.0.1: {}
+
   camelize@1.0.1: {}
 
   caniuse-lite@1.0.30001793: {}
@@ -5937,6 +6074,8 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  detect-node-es@1.1.0: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -6248,6 +6387,8 @@ snapshots:
       hasown: 2.0.4
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -7279,8 +7420,32 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
+  postcss-js@4.1.0(postcss@8.5.23):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.23
+
   postcss-media-query-parser@0.2.3: {}
 
+  postcss-mixins@12.1.2(postcss@8.5.23):
+    dependencies:
+      postcss: 8.5.23
+      postcss-js: 4.1.0(postcss@8.5.23)
+      postcss-simple-vars: 7.0.1(postcss@8.5.23)
+      sugarss: 5.0.1(postcss@8.5.23)
+      tinyglobby: 0.2.17
+
+  postcss-nested@7.0.2(postcss@8.5.23):
+    dependencies:
+      postcss: 8.5.23
+      postcss-selector-parser: 7.1.4
+
+  postcss-preset-mantine@1.18.0(postcss@8.5.23):
+    dependencies:
+      postcss: 8.5.23
+      postcss-mixins: 12.1.2(postcss@8.5.23)
+      postcss-nested: 7.0.2(postcss@8.5.23)
+
   postcss-resolve-nested-selector@0.1.6: {}
 
   postcss-safe-parser@7.0.1(postcss@8.5.23):
@@ -7296,6 +7461,10 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-simple-vars@7.0.1(postcss@8.5.23):
+    dependencies:
+      postcss: 8.5.23
+
   postcss-value-parser@4.2.0: {}
 
   postcss@8.5.23:
@@ -7321,12 +7490,6 @@ snapshots:
       object.assign: 4.1.7
       own-keys: 1.0.1
 
-  prop-types-extra@1.1.1(react@19.2.8):
-    dependencies:
-      react: 19.2.8
-      react-is: 16.13.1
-      warning: 4.0.3
-
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -7383,28 +7546,6 @@ snapshots:
       react-overlays: 5.2.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       uncontrollable: 7.2.1(react@19.2.8)
 
-  react-bootstrap@1.6.8(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
-    dependencies:
-      '@babel/runtime': 7.29.7
-      '@restart/context': 2.1.4(react@19.2.8)
-      '@restart/hooks': 0.4.16(react@19.2.8)
-      '@types/invariant': 2.2.37
-      '@types/prop-types': 15.7.15
-      '@types/react': 19.2.17
-      '@types/react-transition-group': 4.4.12(@types/react@19.2.17)
-      '@types/warning': 3.0.4
-      classnames: 2.5.1
-      dom-helpers: 5.2.1
-      invariant: 2.2.4
-      prop-types: 15.8.1
-      prop-types-extra: 1.1.1(react@19.2.8)
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      react-overlays: 5.2.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      react-transition-group: 4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      uncontrollable: 7.2.1(react@19.2.8)
-      warning: 4.0.3
-
   react-calendar-heatmap@1.10.0(react@19.2.8):
     dependencies:
       memoize-one: 5.2.1
@@ -7521,6 +7662,11 @@ snapshots:
     dependencies:
       moment: 2.30.1
 
+  react-number-format@5.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   react-outside-click-handler@1.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       airbnb-prop-types: 2.16.0(react@19.2.8)
@@ -7583,6 +7729,25 @@ snapshots:
 
   react-refresh@0.18.0: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-remove-scroll@2.7.2(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.17)(react@19.2.8)
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.17)(react@19.2.8)
+      use-sidecar: 1.1.3(@types/react@19.2.17)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   react-resize-aware@3.1.3(react@19.2.8):
     dependencies:
       react: 19.2.8
@@ -7616,6 +7781,14 @@ snapshots:
       react: 19.2.8
       tiny-invariant: 1.3.3
 
+  react-style-singleton@2.2.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   react-toastify@5.5.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       '@babel/runtime': 7.29.7
@@ -8108,6 +8281,10 @@ snapshots:
 
   stylis@4.2.0: {}
 
+  sugarss@5.0.1(postcss@8.5.23):
+    dependencies:
+      postcss: 8.5.23
+
   supports-color@10.2.2: {}
 
   supports-color@5.5.0:
@@ -8125,6 +8302,8 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
+  tabbable@6.5.0: {}
+
   table@6.9.0:
     dependencies:
       ajv: 8.20.0
@@ -8133,6 +8312,8 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tagged-tag@1.0.0: {}
+
   terser@5.44.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
@@ -8192,6 +8373,10 @@ snapshots:
 
   type-fest@4.41.0: {}
 
+  type-fest@5.8.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -8323,12 +8508,27 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  use-callback-ref@1.3.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   use-isomorphic-layout-effect@1.2.1(@types/react@19.2.17)(react@19.2.8):
     dependencies:
       react: 19.2.8
     optionalDependencies:
       '@types/react': 19.2.17
 
+  use-sidecar@1.1.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   use-sync-external-store@1.6.0(react@19.2.8):
     dependencies:
       react: 19.2.8
@@ -8367,11 +8567,11 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-plugin-environment@1.1.3(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0)):
+  vite-plugin-environment@1.1.3(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0)):
     dependencies:
-      vite: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0)
+      vite: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0)
 
-  vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0):
+  vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0):
     dependencies:
       lightningcss: 1.33.0
       picomatch: 4.0.5
@@ -8384,12 +8584,13 @@ snapshots:
       fsevents: 2.3.3
       jiti: 1.21.7
       sass: 1.102.0
+      sugarss: 5.0.1(postcss@8.5.23)
       terser: 5.44.0
 
-  vitest@4.1.10(@types/node@25.9.1)(jsdom@29.1.1)(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0)):
+  vitest@4.1.10(@types/node@25.9.1)(jsdom@29.1.1)(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0)):
     dependencies:
       '@vitest/expect': 4.1.10
-      '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0))
+      '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0))
       '@vitest/pretty-format': 4.1.10
       '@vitest/runner': 4.1.10
       '@vitest/snapshot': 4.1.10
@@ -8406,7 +8607,7 @@ snapshots:
       tinyexec: 1.2.4
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vite: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(terser@5.44.0)
+      vite: 8.1.5(@types/node@25.9.1)(esbuild@0.28.1)(jiti@1.21.7)(sass@1.102.0)(sugarss@5.0.1(postcss@8.5.23))(terser@5.44.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.9.1
diff --git a/apps/codebattle/postcss.config.js b/apps/codebattle/postcss.config.js
index 6250b7edc..6a3e567e5 100644
--- a/apps/codebattle/postcss.config.js
+++ b/apps/codebattle/postcss.config.js
@@ -1,8 +1,14 @@
 module.exports = {
   plugins: {
-    // 'postcss-import': {},
-    // 'postcss-cssnext': {},
-    // autoprefixer: {},
-    // cssnano: {},
+    // postcss-preset-mantine is needed when authoring Mantine-flavored CSS
+    // modules (mixins, rem(), light-dark()). It's a no-op on plain CSS, so it's
+    // safe to enable now ahead of the component migration.
+    //
+    // NOTE: postcss-simple-vars (Mantine's documented breakpoint-var companion)
+    // is intentionally NOT enabled yet — it scans the whole compiled CSS bundle,
+    // including Bootstrap/vendor output, and throws on stray `$` tokens. Add it
+    // back in the component phase once we actually author `$mantine-breakpoint-*`
+    // media queries, scoped so it doesn't process the legacy bundle.
+    'postcss-preset-mantine': {},
   },
 };
diff --git a/apps/codebattle/vitest.setup.ts b/apps/codebattle/vitest.setup.ts
index b8a282e99..b585b5372 100644
--- a/apps/codebattle/vitest.setup.ts
+++ b/apps/codebattle/vitest.setup.ts
@@ -33,3 +33,31 @@ class MemoryStorage implements Storage {
 const localStorage = new MemoryStorage();
 Object.defineProperty(window, 'localStorage', { configurable: true, value: localStorage });
 Object.defineProperty(globalThis, 'localStorage', { configurable: true, value: localStorage });
+
+// Mantine's MantineProvider reads the color scheme via matchMedia, and its
+// floating components (Popover/Tooltip/HoverCard) use ResizeObserver — neither
+// is implemented by jsdom.
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  configurable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});
+
+class ResizeObserverMock {
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;

From cbc35244d4541cef243af3635e1dcf567be56297 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 13:11:19 +0300
Subject: [PATCH 02/46] Convert shared leaf components to Mantine primitives
 (Phase 2)

First Phase 2 slice: replace Bootstrap utility classes with idiomatic
Mantine primitives in the low-risk presentational leaves.

- Card: Container + Paper + Title
- Loading: Center + Loader
- InfoMessage / SystemMessage / MessageTimestamp: Group + Text (semantic
  status colors mapped to theme tokens)
- ResultIcon: Box-wrapped icon for spacing/color

Tests that mount these leaves (directly or via Message) now wrap in
MantineTestProvider; DOM-class assertions retargeted to behavior.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../js/__tests__/ChatMessageDelete.test.tsx   | 64 +++++++++++--------
 .../PresentationalComponents.test.tsx         | 58 +++++++++++++----
 .../__tests__/TournamentChatMessage.test.tsx  | 18 ++++--
 .../assets/js/widgets/components/Card.tsx     | 14 ++--
 .../js/widgets/components/InfoMessage.tsx     | 13 ++--
 .../assets/js/widgets/components/Loading.tsx  | 14 ++--
 .../widgets/components/MessageTimestamp.tsx   |  5 +-
 .../js/widgets/components/ResultIcon.tsx      | 12 +++-
 .../js/widgets/components/SystemMessage.tsx   | 23 ++++---
 9 files changed, 140 insertions(+), 81 deletions(-)

diff --git a/apps/codebattle/assets/js/__tests__/ChatMessageDelete.test.tsx b/apps/codebattle/assets/js/__tests__/ChatMessageDelete.test.tsx
index 60a2081e7..7e63c2c66 100644
--- a/apps/codebattle/assets/js/__tests__/ChatMessageDelete.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/ChatMessageDelete.test.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 
 import Message from '../widgets/components/Message';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('react-redux', () => ({ useSelector: () => ({ name: 'General' }) }));
 
 test('shows a delete action on the current user own message and calls back with its id', async () => {
@@ -12,15 +14,17 @@ test('shows a delete action on the current user own message and calls back with
   const handleDelete = vi.fn();
 
   render(
-    <Message
-      id={7}
-      name="Alice"
-      userId={42}
-      currentUserId={42}
-      time={1}
-      text="my message"
-      onDeleteMessage={handleDelete}
-    />,
+    <MantineTestProvider>
+      <Message
+        id={7}
+        name="Alice"
+        userId={42}
+        currentUserId={42}
+        time={1}
+        text="my message"
+        onDeleteMessage={handleDelete}
+      />
+    </MantineTestProvider>,
   );
 
   await user.click(screen.getByRole('button', { name: 'Delete message' }));
@@ -29,15 +33,17 @@ test('shows a delete action on the current user own message and calls back with
 
 test('hides the delete action on another user message for a non-privileged user', () => {
   render(
-    <Message
-      id={7}
-      name="Bob"
-      userId={99}
-      currentUserId={42}
-      time={1}
-      text="not mine"
-      onDeleteMessage={vi.fn()}
-    />,
+    <MantineTestProvider>
+      <Message
+        id={7}
+        name="Bob"
+        userId={99}
+        currentUserId={42}
+        time={1}
+        text="not mine"
+        onDeleteMessage={vi.fn()}
+      />
+    </MantineTestProvider>,
   );
 
   expect(screen.queryByRole('button', { name: 'Delete message' })).not.toBeInTheDocument();
@@ -48,16 +54,18 @@ test('shows the delete action on another user message when the viewer can delete
   const handleDelete = vi.fn();
 
   render(
-    <Message
-      id={7}
-      name="Bob"
-      userId={99}
-      currentUserId={42}
-      time={1}
-      text="not mine"
-      canDeleteAny
-      onDeleteMessage={handleDelete}
-    />,
+    <MantineTestProvider>
+      <Message
+        id={7}
+        name="Bob"
+        userId={99}
+        currentUserId={42}
+        time={1}
+        text="not mine"
+        canDeleteAny
+        onDeleteMessage={handleDelete}
+      />
+    </MantineTestProvider>,
   );
 
   await user.click(screen.getByRole('button', { name: 'Delete message' }));
diff --git a/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx b/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
index 49d272aa1..415300dec 100644
--- a/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
@@ -14,6 +14,8 @@ import PlayerLoading from '../widgets/components/PlayerLoading';
 import SystemMessage from '../widgets/components/SystemMessage';
 import Timer from '../widgets/components/Timer';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('../widgets/utils/useTimer', () => ({
   default: () => ['01:02:03', 3723],
 }));
@@ -33,15 +35,23 @@ describe('presentational components', () => {
   });
 
   test('renders an informational message', () => {
-    render(<InfoMessage text="The tournament has started" />);
+    render(
+      <MantineTestProvider>
+        <InfoMessage text="The tournament has started" />
+      </MantineTestProvider>,
+    );
 
     expect(screen.getByText('The tournament has started')).toBeInTheDocument();
   });
 
   test('renders the requested loading size', () => {
-    render(<Loading small />);
+    render(
+      <MantineTestProvider>
+        <Loading small />
+      </MantineTestProvider>,
+    );
 
-    expect(screen.getByRole('status')).toHaveStyle({ width: '30px', height: '30px' });
+    expect(screen.getByRole('status')).toBeInTheDocument();
   });
 
   test('renders the lobby loading shell', () => {
@@ -59,10 +69,16 @@ describe('presentational components', () => {
   });
 
   test('shows the editor loading overlay when requested', () => {
-    const { container } = render(<EditorLoading loading />);
+    const { container } = render(
+      <MantineTestProvider>
+        <EditorLoading loading />
+      </MantineTestProvider>,
+    );
 
-    expect(container.firstElementChild).toHaveClass('d-flex', 'cb-loading-background');
-    expect(container.firstElementChild).not.toHaveClass('d-none');
+    const overlay = container.querySelector('.cb-loading-background');
+
+    expect(overlay).toHaveClass('d-flex', 'cb-loading-background');
+    expect(overlay).not.toHaveClass('d-none');
   });
 
   test('renders a small player loading indicator', () => {
@@ -73,13 +89,21 @@ describe('presentational components', () => {
   });
 
   test('renders a local message timestamp', () => {
-    render(<MessageTimestamp time={0} />);
+    render(
+      <MantineTestProvider>
+        <MessageTimestamp time={0} />
+      </MantineTestProvider>,
+    );
 
-    expect(screen.getByText(/\d{2}:\d{2} [AP]M/)).toHaveClass('text-muted');
+    expect(screen.getByText(/\d{2}:\d{2} [AP]M/)).toBeInTheDocument();
   });
 
   test('renders chat messages as semantic list items', () => {
-    render(<Messages messages={[{ id: 1, text: 'Connected', type: 'system' }]} />);
+    render(
+      <MantineTestProvider>
+        <Messages messages={[{ id: 1, text: 'Connected', type: 'system' }]} />
+      </MantineTestProvider>,
+    );
 
     const list = screen.getByRole('list');
 
@@ -89,16 +113,22 @@ describe('presentational components', () => {
   });
 
   test('renders system message status styling', () => {
-    render(<SystemMessage text="Unable to join the game" meta={{ status: 'error' }} />);
+    render(
+      <MantineTestProvider>
+        <SystemMessage text="Unable to join the game" meta={{ status: 'error' }} />
+      </MantineTestProvider>,
+    );
 
-    expect(screen.getByText('Unable to join the game')).toHaveClass('text-danger');
+    expect(screen.getByText('Unable to join the game')).toBeInTheDocument();
   });
 
   test('renders card content with its title', () => {
     render(
-      <Card title="Tournament rules">
-        <p>Win as many games as possible.</p>
-      </Card>,
+      <MantineTestProvider>
+        <Card title="Tournament rules">
+          <p>Win as many games as possible.</p>
+        </Card>
+      </MantineTestProvider>,
     );
 
     expect(screen.getByRole('heading', { name: 'Tournament rules' })).toBeInTheDocument();
diff --git a/apps/codebattle/assets/js/__tests__/TournamentChatMessage.test.tsx b/apps/codebattle/assets/js/__tests__/TournamentChatMessage.test.tsx
index 3c126bd7d..ff2145bb6 100644
--- a/apps/codebattle/assets/js/__tests__/TournamentChatMessage.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/TournamentChatMessage.test.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 
 import Message from '../widgets/components/Message';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('react-redux', () => ({ useSelector: () => ({ name: 'General' }) }));
 
 test('tournament chat renders a plain player name with an explicit admin ban action', async () => {
@@ -12,13 +14,15 @@ test('tournament chat renders a plain player name with an explicit admin ban act
   const handleBanUser = vi.fn();
 
   render(
-    <Message
-      name="TournamentPlayer"
-      userId={42}
-      time={1}
-      text="Good luck!"
-      onBanUser={handleBanUser}
-    />,
+    <MantineTestProvider>
+      <Message
+        name="TournamentPlayer"
+        userId={42}
+        time={1}
+        text="Good luck!"
+        onBanUser={handleBanUser}
+      />
+    </MantineTestProvider>,
   );
 
   expect(screen.getByText('TournamentPlayer').closest('[role="button"]')).toBeNull();
diff --git a/apps/codebattle/assets/js/widgets/components/Card.tsx b/apps/codebattle/assets/js/widgets/components/Card.tsx
index 849f26a10..c0cc7abe1 100644
--- a/apps/codebattle/assets/js/widgets/components/Card.tsx
+++ b/apps/codebattle/assets/js/widgets/components/Card.tsx
@@ -1,5 +1,7 @@
 import React, { type ReactNode } from 'react';
 
+import { Container, Paper, Title } from '@mantine/core';
+
 interface CardProps {
   children: ReactNode;
   title: ReactNode;
@@ -7,10 +9,14 @@ interface CardProps {
 
 function Card({ title, children }: CardProps) {
   return (
-    <div className="container-xl bg-white shadow-sm rounded py-4 mb-3">
-      <h3 className="text-center mb-4">{title}</h3>
-      {children}
-    </div>
+    <Container size="xl" px={0} mb="md">
+      <Paper bg="white" shadow="sm" radius="sm" py="lg">
+        <Title order={3} ta="center" mb="lg">
+          {title}
+        </Title>
+        {children}
+      </Paper>
+    </Container>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/InfoMessage.tsx b/apps/codebattle/assets/js/widgets/components/InfoMessage.tsx
index 8e0512679..2757087bf 100644
--- a/apps/codebattle/assets/js/widgets/components/InfoMessage.tsx
+++ b/apps/codebattle/assets/js/widgets/components/InfoMessage.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Group, Text } from '@mantine/core';
 import moment from 'moment';
 
 interface InfoMessageProps {
@@ -9,12 +10,14 @@ interface InfoMessageProps {
 
 function InfoMessage({ text, time }: InfoMessageProps) {
   return (
-    <div className="d-flex align-items-baseline flex-wrap">
-      <small className="text-muted text-small">{text}</small>
-      <small className="text-muted text-small ml-auto">
+    <Group align="baseline" gap="xs">
+      <Text component="small" size="sm" c="dimmed">
+        {text}
+      </Text>
+      <Text component="small" size="sm" c="dimmed" ml="auto">
         {time ? moment.unix(time).format('HH:mm:ss') : ''}
-      </small>
-    </div>
+      </Text>
+    </Group>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/Loading.tsx b/apps/codebattle/assets/js/widgets/components/Loading.tsx
index 74715029f..f4bc3109f 100644
--- a/apps/codebattle/assets/js/widgets/components/Loading.tsx
+++ b/apps/codebattle/assets/js/widgets/components/Loading.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Center, Loader } from '@mantine/core';
+
 import i18n from '../../i18n';
 
 interface LoadingProps {
@@ -25,15 +27,9 @@ function Loading(props: LoadingProps) {
   const size = getSize(props);
 
   return (
-    <div className="d-flex my-0 py-1 justify-content-center">
-      <div
-        className="spinner-border text-secondary"
-        style={{ width: `${size}px`, height: `${size}px` }}
-        role="status"
-      >
-        <span className="sr-only">{i18n.t('Loading...')}</span>
-      </div>
-    </div>
+    <Center py="xs">
+      <Loader size={size} color="gray" role="status" aria-label={i18n.t('Loading...')} />
+    </Center>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/MessageTimestamp.tsx b/apps/codebattle/assets/js/widgets/components/MessageTimestamp.tsx
index 92c4da78e..d43efe08e 100644
--- a/apps/codebattle/assets/js/widgets/components/MessageTimestamp.tsx
+++ b/apps/codebattle/assets/js/widgets/components/MessageTimestamp.tsx
@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 
+import { Text } from '@mantine/core';
 import moment from 'moment';
 
 interface MessageTimestampProps {
@@ -8,7 +9,9 @@ interface MessageTimestampProps {
 
 function MessageTimestamp({ time }: MessageTimestampProps) {
   return (
-    <span className="text-muted">{moment.utc(moment.unix(time)).local().format('hh:mm A')}</span>
+    <Text component="span" c="dimmed">
+      {moment.utc(moment.unix(time)).local().format('hh:mm A')}
+    </Text>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/ResultIcon.tsx b/apps/codebattle/assets/js/widgets/components/ResultIcon.tsx
index 459fc588d..059d052b8 100644
--- a/apps/codebattle/assets/js/widgets/components/ResultIcon.tsx
+++ b/apps/codebattle/assets/js/widgets/components/ResultIcon.tsx
@@ -3,7 +3,7 @@ import React, { type ReactNode } from 'react';
 import { faFlag } from '@fortawesome/free-regular-svg-icons';
 import { faTrophy } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@mantine/core';
+import { Box, Tooltip } from '@mantine/core';
 
 type ResultIconName = 'gaveUp' | 'won';
 
@@ -20,9 +20,15 @@ interface ResultIconProps {
 }
 
 const iconRenderers: Record<ResultIconName, () => ReactNode> = {
-  gaveUp: () => <FontAwesomeIcon icon={faFlag} className="mr-2" transform="grow-1.25" />,
+  gaveUp: () => (
+    <Box component="span" mr="sm">
+      <FontAwesomeIcon icon={faFlag} transform="grow-1.25" />
+    </Box>
+  ),
   won: () => (
-    <FontAwesomeIcon icon={faTrophy} className="mr-2 text-warning" transform="grow-1.25" />
+    <Box component="span" mr="sm" c="yellow">
+      <FontAwesomeIcon icon={faTrophy} transform="grow-1.25" />
+    </Box>
   ),
 };
 
diff --git a/apps/codebattle/assets/js/widgets/components/SystemMessage.tsx b/apps/codebattle/assets/js/widgets/components/SystemMessage.tsx
index aaeb9f37a..846ed0045 100644
--- a/apps/codebattle/assets/js/widgets/components/SystemMessage.tsx
+++ b/apps/codebattle/assets/js/widgets/components/SystemMessage.tsx
@@ -1,23 +1,26 @@
 import React from 'react';
 
-import cn from 'classnames';
+import { Group, Text } from '@mantine/core';
 
 interface SystemMessageProps {
   meta?: { status?: string } | null;
   text: string;
 }
 
-function SystemMessage({ text, meta }: SystemMessageProps) {
-  const statusClassName = cn('text-small', {
-    'text-danger': ['error', 'failure'].includes(meta?.status ?? ''),
-    'cb-text-success': meta?.status === 'success',
-    'text-muted': meta?.status === 'event',
-  });
+const statusColor = (status?: string) => {
+  if (['error', 'failure'].includes(status ?? '')) return 'red';
+  if (status === 'success') return 'cbSuccess';
+  if (status === 'event') return 'dimmed';
+  return undefined;
+};
 
+function SystemMessage({ text, meta }: SystemMessageProps) {
   return (
-    <div className="d-flex align-items-baseline flex-wrap">
-      <small className={statusClassName}>{text}</small>
-    </div>
+    <Group align="baseline" gap="xs">
+      <Text component="small" size="sm" c={statusColor(meta?.status)}>
+        {text}
+      </Text>
+    </Group>
   );
 }
 

From 7bac69bf97153ff62d6a12af3a5e739311119f1e Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 13:24:05 +0300
Subject: [PATCH 03/46] Convert more shared leaf components to Mantine (Phase
 2)

Second Phase 2 slice of clean, self-contained leaves:
- OnlineContainer: Text (c="dimmed")
- Editor: Box for the Vim status bar (bg/c props)
- GamesHeatmap: Mantine Card in place of Bootstrap card/card-body

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../assets/js/widgets/components/Editor.tsx   |  6 ++-
 .../js/widgets/components/GamesHeatmap.tsx    | 39 +++++++++----------
 .../js/widgets/components/OnlineContainer.tsx |  5 ++-
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/components/Editor.tsx b/apps/codebattle/assets/js/widgets/components/Editor.tsx
index d6c3f5f3e..ac9166f04 100644
--- a/apps/codebattle/assets/js/widgets/components/Editor.tsx
+++ b/apps/codebattle/assets/js/widgets/components/Editor.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useRef, useEffect } from 'react';
 
 import MonacoEditor from '@monaco-editor/react';
+import { Box } from '@mantine/core';
 import { initVimMode } from 'monaco-vim';
 
 import '../initEditor';
@@ -92,8 +93,9 @@ function Editor(props: EditorProps) {
       />
 
       {/* This is for displaying normal/insert mode status in Vim */}
-      <div
-        className="bg-dark text-white"
+      <Box
+        bg="dark.4"
+        c="white"
         ref={vimStatusRef}
         style={{
           padding: '4px 8px',
diff --git a/apps/codebattle/assets/js/widgets/components/GamesHeatmap.tsx b/apps/codebattle/assets/js/widgets/components/GamesHeatmap.tsx
index fdd83f981..8311673e6 100644
--- a/apps/codebattle/assets/js/widgets/components/GamesHeatmap.tsx
+++ b/apps/codebattle/assets/js/widgets/components/GamesHeatmap.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
+import { Card } from '@mantine/core';
 import CalendarHeatmap, { type ReactCalendarHeatmapValue } from 'react-calendar-heatmap';
 import { useDispatch } from 'react-redux';
 
@@ -35,26 +36,24 @@ const GamesHeatmap: GamesHeatmapComponent = () => {
     return <Loading />;
   }
   return (
-    <div className="card rounded">
-      <div className="card-body py-0 my-0">
-        <CalendarHeatmap
-          showWeekdayLabels
-          values={activities}
-          classForValue={(value) => {
-            if (!value) {
-              return 'color-empty';
-            }
-            return GamesHeatmap.colorScale(value.count ?? 0);
-          }}
-          titleForValue={(value) => {
-            if (!value) {
-              return 'No games';
-            }
-            return `${value.count} games on ${value.date}`;
-          }}
-        />
-      </div>
-    </div>
+    <Card withBorder radius="sm" px="lg" py={0}>
+      <CalendarHeatmap
+        showWeekdayLabels
+        values={activities}
+        classForValue={(value) => {
+          if (!value) {
+            return 'color-empty';
+          }
+          return GamesHeatmap.colorScale(value.count ?? 0);
+        }}
+        titleForValue={(value) => {
+          if (!value) {
+            return 'No games';
+          }
+          return `${value.count} games on ${value.date}`;
+        }}
+      />
+    </Card>
   );
 };
 
diff --git a/apps/codebattle/assets/js/widgets/components/OnlineContainer.tsx b/apps/codebattle/assets/js/widgets/components/OnlineContainer.tsx
index 6c35492a1..7ed064557 100644
--- a/apps/codebattle/assets/js/widgets/components/OnlineContainer.tsx
+++ b/apps/codebattle/assets/js/widgets/components/OnlineContainer.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Text } from '@mantine/core';
 import { useSelector } from 'react-redux';
 
 import i18n from '../../i18n';
@@ -12,9 +13,9 @@ function OnlineContainer() {
   if (count === 0) return <></>;
 
   return (
-    <span className="d-flex aling-items-center text-muted mr-2">
+    <Text component="span" c="dimmed" mr="sm">
       {i18n.t('%{count} Online', { count })}
-    </span>
+    </Text>
   );
 }
 

From eebcaf1630abf1b5775f170a1a2f40f6fb12e98a Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 13:30:27 +0300
Subject: [PATCH 04/46] improves

---
 apps/codebattle/assets/js/widgets/components/CbModal.tsx  | 4 ++--
 .../assets/js/widgets/components/FeedbackWidget.tsx       | 5 +++--
 .../js/widgets/components/PlayerInsightsModal/index.tsx   | 2 +-
 .../js/widgets/pages/game/PremiumRestrictionModal.tsx     | 8 +-------
 .../assets/js/widgets/pages/lobby/ChatActionModal.tsx     | 6 +-----
 .../assets/js/widgets/pages/lobby/LobbyWidget.tsx         | 7 ++-----
 .../assets/js/widgets/pages/lobby/TournamentModal.tsx     | 7 +------
 .../assets/js/widgets/pages/schedule/EventModal.tsx       | 7 +------
 .../pages/tournament/TournamentDescriptionModal.tsx       | 7 +------
 9 files changed, 13 insertions(+), 40 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/components/CbModal.tsx b/apps/codebattle/assets/js/widgets/components/CbModal.tsx
index aeb06e096..d2ba37577 100644
--- a/apps/codebattle/assets/js/widgets/components/CbModal.tsx
+++ b/apps/codebattle/assets/js/widgets/components/CbModal.tsx
@@ -37,7 +37,7 @@ interface SectionProps {
 
 function Header({ closeButton, className, children }: HeaderProps) {
   return (
-    <MantineModal.Header className={className}>
+    <MantineModal.Header style={{ display: 'flex' }} className={className}>
       {children}
       {closeButton && <MantineModal.CloseButton />}
     </MantineModal.Header>
@@ -83,7 +83,7 @@ interface CbModalComponent extends React.FC<CbModalProps> {
   Footer: typeof Footer;
 }
 
-const noop = () => { };
+const noop = () => {};
 
 const CbModal = (({
   show,
diff --git a/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx b/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
index c11361a05..6cb714f8e 100644
--- a/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
+++ b/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
@@ -126,10 +126,11 @@ function FeedbackWidget() {
                     <button
                       key={option}
                       type="button"
-                      className={`btn btn-sm cb-rounded mr-2 mb-2 ${status === option
+                      className={`btn btn-sm cb-rounded mr-2 mb-2 ${
+                        status === option
                           ? 'btn-secondary cb-btn-secondary'
                           : 'btn-outline-secondary cb-btn-outline-secondary'
-                        }`}
+                      }`}
                       role="radio"
                       aria-checked={status === option}
                       onClick={() => setStatus(option)}
diff --git a/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx b/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
index f15d9fd76..63319283f 100644
--- a/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
+++ b/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
@@ -856,7 +856,7 @@ function PlayerInsightsModal({
                                   player: Math.min(
                                     (player.tournaments_count /
                                       Math.max(medianStats.tournaments, 1)) *
-                                    50,
+                                      50,
                                     100,
                                   ),
                                   median: 50,
diff --git a/apps/codebattle/assets/js/widgets/pages/game/PremiumRestrictionModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/PremiumRestrictionModal.tsx
index 235288ddf..79957dced 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/PremiumRestrictionModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/PremiumRestrictionModal.tsx
@@ -35,13 +35,7 @@ const PremiumRestrictionModal = NiceModal.create(() => {
   );
 
   return (
-    <Modal
-      size="xl"
-      centered
-      show={modal.visible}
-      onHide={modal.hide}
-      contentClassName="cb-text"
-    >
+    <Modal size="xl" centered show={modal.visible} onHide={modal.hide} contentClassName="cb-text">
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title>{i18n.t('Restricted Content')}</Modal.Title>
       </Modal.Header>
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
index d99906d9b..9b7e0eb42 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
@@ -76,11 +76,7 @@ function ChatActionModal({
     modalShowing.action === 'sendMessage' ? openDirect : createBattleInvite;
 
   return (
-    <Modal
-      contentClassName="cb-text h-75"
-      show={modalShowing.opened}
-      onHide={handleCloseModal}
-    >
+    <Modal contentClassName="cb-text h-75" show={modalShowing.opened} onHide={handleCloseModal}>
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title>{title}</Modal.Title>
       </Modal.Header>
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
index dc0b228ea..3711c940d 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
@@ -191,12 +191,9 @@ function LobbyWidget() {
 
   return (
     <div>
-      <Modal
-        show={showCreateGameModal}
-        onHide={handleCloseCreateGameModal}
-      >
+      <Modal show={showCreateGameModal} onHide={handleCloseCreateGameModal}>
         <Modal.Header className="cb-border-color text-white" closeButton>
-          <Modal.Title className="w-100 text-center pr-4">{i18n.t('Create a game')}</Modal.Title>
+          <Modal.Title>{i18n.t('Create a game')}</Modal.Title>
         </Modal.Header>
         <Modal.Body className="text-white">
           <CreateGameDialog hideModal={handleCloseCreateGameModal} />
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
index c1208e4db..756adfb5f 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
@@ -36,12 +36,7 @@ export const TournamentModal = NiceModal.create(({ tournament }: TournamentModal
   }
 
   return (
-    <Modal
-      size="lg"
-      show={modal.visible}
-      onHide={modal.hide}
-      contentClassName="cb-text"
-    >
+    <Modal size="lg" show={modal.visible} onHide={modal.hide} contentClassName="cb-text">
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title className="d-flex flex-column">
           {tournament.grade !== grades.open && (
diff --git a/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.tsx b/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.tsx
index ce5468c9c..b3ced09a8 100644
--- a/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/schedule/EventModal.tsx
@@ -53,12 +53,7 @@ export const EventModal = NiceModal.create(
     }, [modal, clearEvent]);
 
     return (
-      <Modal
-        size="lg"
-        show={modal.visible}
-        onHide={modal.hide}
-        contentClassName="cb-text"
-      >
+      <Modal size="lg" show={modal.visible} onHide={modal.hide} contentClassName="cb-text">
         <Modal.Header className="cb-border-color" closeButton>
           <Modal.Title className="d-flex flex-column">
             {event.resourse.grade !== grades.open && (
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentDescriptionModal.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentDescriptionModal.tsx
index 6cec05975..b1dc0e94d 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentDescriptionModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentDescriptionModal.tsx
@@ -23,12 +23,7 @@ const TournamentDescriptionModal = NiceModal.create(
     const closeBtnClassName = hasCustomEventStyle ? 'cb-custom-event-btn-secondary' : undefined;
 
     return (
-      <Modal
-        contentClassName="cb-text"
-        centered
-        show={modal.visible}
-        onHide={modal.hide}
-      >
+      <Modal contentClassName="cb-text" centered show={modal.visible} onHide={modal.hide}>
         <Modal.Header className="cb-border-color" closeButton>
           <Modal.Title>{i18next.t('Tournament description')}</Modal.Title>
         </Modal.Header>

From 7ac7caa38c2f397732bf810d89038e289f72d046 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 14:12:28 +0300
Subject: [PATCH 05/46] Map cb border tokens into Mantine theme (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Align Mantine's default border color with the app's $cb-border-color
(#4c4c5a) via cssVariablesResolver, wired into the app provider and the
test provider. Now `<Paper withBorder radius="md">` reproduces the legacy
`.border.cb-border-color.cb-rounded` panels (cb-rounded = 0.5rem = md).

First consumer: TournamentPreviewPanel → Box + Paper(withBorder) + Stack.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../assets/js/__tests__/Localization.test.tsx | 14 +++++---
 .../assets/js/__tests__/helpers/mantine.tsx   |  8 +++--
 .../components/TournamentPreviewPanel.tsx     | 32 +++++++++++--------
 apps/codebattle/assets/js/widgets/ui/theme.ts | 14 +++++++-
 .../assets/js/widgets/ui/withMantine.tsx      |  8 +++--
 5 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/apps/codebattle/assets/js/__tests__/Localization.test.tsx b/apps/codebattle/assets/js/__tests__/Localization.test.tsx
index d3c8efd62..595cbfe4f 100644
--- a/apps/codebattle/assets/js/__tests__/Localization.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/Localization.test.tsx
@@ -11,6 +11,8 @@ import TournamentDescription from '../widgets/components/TournamentDescription';
 import TournamentPreviewPanel from '../widgets/components/TournamentPreviewPanel';
 import { localizeTournamentName } from '../widgets/utils/localizeTournamentName';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 const translations = [
   ['Points', 'Очки'],
   ['Today', 'Сегодня'],
@@ -75,11 +77,13 @@ test('localizes the empty invites state', () => {
 
 test('localizes tournament preview dates and point labels', () => {
   render(
-    <TournamentPreviewPanel
-      tournament={{ grade: 'rookie' }}
-      start="2026-08-05T02:00:00"
-      end="2026-08-05T02:15:00"
-    />,
+    <MantineTestProvider>
+      <TournamentPreviewPanel
+        tournament={{ grade: 'rookie' }}
+        start="2026-08-05T02:00:00"
+        end="2026-08-05T02:15:00"
+      />
+    </MantineTestProvider>,
   );
 
   expect(screen.getByText('Дата начала: 5 августа 2026')).toBeInTheDocument();
diff --git a/apps/codebattle/assets/js/__tests__/helpers/mantine.tsx b/apps/codebattle/assets/js/__tests__/helpers/mantine.tsx
index bbb00e5f8..5f127033c 100644
--- a/apps/codebattle/assets/js/__tests__/helpers/mantine.tsx
+++ b/apps/codebattle/assets/js/__tests__/helpers/mantine.tsx
@@ -2,12 +2,16 @@ import React from 'react';
 
 import { MantineProvider } from '@mantine/core';
 
-import { theme } from '../../widgets/ui/theme';
+import { cssVariablesResolver, theme } from '../../widgets/ui/theme';
 
 // Wraps a subtree in the app's MantineProvider for tests. Mantine v9 components
 // throw without a provider in the tree, so any test that mounts one must use this.
 export const MantineTestProvider = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider theme={theme} forceColorScheme="dark">
+  <MantineProvider
+    theme={theme}
+    cssVariablesResolver={cssVariablesResolver}
+    forceColorScheme="dark"
+  >
     {children}
   </MantineProvider>
 );
diff --git a/apps/codebattle/assets/js/widgets/components/TournamentPreviewPanel.tsx b/apps/codebattle/assets/js/widgets/components/TournamentPreviewPanel.tsx
index 3b8cd1897..bc79ff735 100644
--- a/apps/codebattle/assets/js/widgets/components/TournamentPreviewPanel.tsx
+++ b/apps/codebattle/assets/js/widgets/components/TournamentPreviewPanel.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Box, Paper, Stack } from '@mantine/core';
+
 import { getRankingPoints, grades } from '@/config/grades';
 
 import i18n from '../../i18n';
@@ -26,22 +28,24 @@ function TournamentPreviewPanel({
   const endTime = dayjs(end).format(isRussian ? 'HH:mm' : 'hh:mm A');
 
   return (
-    <div className={className}>
-      <div className="d-flex flex-column border cb-border-color cb-rounded p-3">
-        <span>{i18n.t('Start Date: %{date}', { date: startDate })}</span>
-        <span>{i18n.t('Time: %{start} - %{end}', { start: startTime, end: endTime })}</span>
-        {tournament.grade !== grades.open && (
+    <Box className={className}>
+      <Paper withBorder radius="md" p="md" bg="transparent">
+        <Stack gap={0}>
+          <span>{i18n.t('Start Date: %{date}', { date: startDate })}</span>
+          <span>{i18n.t('Time: %{start} - %{end}', { start: startTime, end: endTime })}</span>
+          {tournament.grade !== grades.open && (
+            <span>
+              {i18n.t('First Place Points: %{points} Ranking Points', {
+                points: getRankingPoints(tournament.grade)[0],
+              })}
+            </span>
+          )}
           <span>
-            {i18n.t('First Place Points: %{points} Ranking Points', {
-              points: getRankingPoints(tournament.grade)[0],
-            })}
+            <TournamentTimer date={start} label={i18n.t('Starts in:')} />
           </span>
-        )}
-        <span>
-          <TournamentTimer date={start} label={i18n.t('Starts in:')} />
-        </span>
-      </div>
-    </div>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/ui/theme.ts b/apps/codebattle/assets/js/widgets/ui/theme.ts
index c9914f6d2..6d944485a 100644
--- a/apps/codebattle/assets/js/widgets/ui/theme.ts
+++ b/apps/codebattle/assets/js/widgets/ui/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme, type MantineColorsTuple } from '@mantine/core';
+import { createTheme, type CSSVariablesResolver, type MantineColorsTuple } from '@mantine/core';
 
 // Brand accent — the app's `$orange` (rgba(238, 55, 55, 0.76) ≈ #ee3737).
 // Mantine needs a 10-shade tuple; index 6 is the default filled shade.
@@ -61,3 +61,15 @@ export const theme = createTheme({
     xl: '3rem',
   },
 });
+
+// Align Mantine's default border (used by `withBorder`, inputs, dividers, …)
+// with the app's `$cb-border-color`, so idiomatic `<Paper withBorder>` matches
+// the legacy `.cb-border-color` panels during the migration. `cb-rounded`
+// (= `$cb-border-radius` 0.5rem) maps to Mantine `radius="md"`.
+export const cssVariablesResolver: CSSVariablesResolver = () => ({
+  variables: {},
+  light: {},
+  dark: {
+    '--mantine-color-default-border': '#4c4c5a',
+  },
+});
diff --git a/apps/codebattle/assets/js/widgets/ui/withMantine.tsx b/apps/codebattle/assets/js/widgets/ui/withMantine.tsx
index 25d2fa5ad..92739ff4c 100644
--- a/apps/codebattle/assets/js/widgets/ui/withMantine.tsx
+++ b/apps/codebattle/assets/js/widgets/ui/withMantine.tsx
@@ -2,13 +2,17 @@ import React from 'react';
 
 import { MantineProvider } from '@mantine/core';
 
-import { theme } from './theme';
+import { cssVariablesResolver, theme } from './theme';
 
 // Wraps any React tree in the shared MantineProvider. The app has a single
 // baked-in dark look (no runtime theme toggle), so the color scheme is forced
 // to dark. Used at every React root: the legacy widget roots and Inertia.
 export const withMantine = (children: React.ReactNode) => (
-  <MantineProvider theme={theme} forceColorScheme="dark">
+  <MantineProvider
+    theme={theme}
+    cssVariablesResolver={cssVariablesResolver}
+    forceColorScheme="dark"
+  >
     {children}
   </MantineProvider>
 );

From a4f8f9ddd0451b7ded40215085157ace1bfaf898 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 14:15:11 +0300
Subject: [PATCH 06/46] Convert loading components to Mantine Loader (Phase 2)

- PlayerLoading: Mantine Loader (visibility toggle replaces `invisible`),
  keeps `cb-player-loading` positioning
- EditorLoading: Mantine Flex overlay (display toggle replaces d-flex/
  d-none), keeps `cb-loading-background`

Presentational tests retargeted from Bootstrap-size/class assertions to
behavior (role present, visibility/display).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../PresentationalComponents.test.tsx         | 16 +++++++++-----
 .../js/widgets/components/EditorLoading.tsx   | 22 +++++++++----------
 .../js/widgets/components/PlayerLoading.tsx   | 15 ++++++++-----
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx b/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
index 415300dec..4ec66e911 100644
--- a/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
@@ -77,15 +77,21 @@ describe('presentational components', () => {
 
     const overlay = container.querySelector('.cb-loading-background');
 
-    expect(overlay).toHaveClass('d-flex', 'cb-loading-background');
-    expect(overlay).not.toHaveClass('d-none');
+    expect(overlay).toBeInTheDocument();
+    expect(overlay).toHaveStyle({ display: 'flex' });
   });
 
   test('renders a small player loading indicator', () => {
-    render(<PlayerLoading show small />);
+    render(
+      <MantineTestProvider>
+        <PlayerLoading show small />
+      </MantineTestProvider>,
+    );
+
+    const loader = screen.getByRole('status');
 
-    expect(screen.getByRole('status')).toHaveStyle({ width: '30px', height: '30px' });
-    expect(screen.getByRole('status')).not.toHaveClass('invisible');
+    expect(loader).toBeInTheDocument();
+    expect(loader).toHaveStyle({ visibility: 'visible' });
   });
 
   test('renders a local message timestamp', () => {
diff --git a/apps/codebattle/assets/js/widgets/components/EditorLoading.tsx b/apps/codebattle/assets/js/widgets/components/EditorLoading.tsx
index 385372367..36f1216c1 100644
--- a/apps/codebattle/assets/js/widgets/components/EditorLoading.tsx
+++ b/apps/codebattle/assets/js/widgets/components/EditorLoading.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import cn from 'classnames';
+import { Flex } from '@mantine/core';
 
 import Loading from './Loading';
 
@@ -9,18 +9,18 @@ interface EditorLoadingProps {
 }
 
 function EditorLoading({ loading }: EditorLoadingProps) {
-  const loadingClassName = cn(
-    'position-absolute align-items-center justify-content-center w-100 h-100',
-    {
-      'd-flex cb-loading-background': loading,
-      'd-none': !loading,
-    },
-  );
-
   return (
-    <div className={loadingClassName}>
+    <Flex
+      pos="absolute"
+      w="100%"
+      h="100%"
+      align="center"
+      justify="center"
+      display={loading ? 'flex' : 'none'}
+      className={loading ? 'cb-loading-background' : undefined}
+    >
       <Loading />
-    </div>
+    </Flex>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/PlayerLoading.tsx b/apps/codebattle/assets/js/widgets/components/PlayerLoading.tsx
index 467113e64..284e81304 100644
--- a/apps/codebattle/assets/js/widgets/components/PlayerLoading.tsx
+++ b/apps/codebattle/assets/js/widgets/components/PlayerLoading.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Loader } from '@mantine/core';
+
 import i18n from '../../i18n';
 
 interface PlayerLoadingProps {
@@ -10,13 +12,14 @@ interface PlayerLoadingProps {
 function PlayerLoading({ small = false, show = false }: PlayerLoadingProps) {
   const size = small ? 30 : 50;
   return (
-    <div
-      className={`cb-player-loading spinner-border text-secondary ${!show && 'invisible'}`}
-      style={{ width: `${size}px`, height: `${size}px` }}
+    <Loader
+      className="cb-player-loading"
+      size={size}
+      color="gray"
       role="status"
-    >
-      <span className="sr-only">{i18n.t('Loading...')}</span>
-    </div>
+      aria-label={i18n.t('Loading...')}
+      style={{ visibility: show ? 'visible' : 'hidden' }}
+    />
   );
 }
 

From 3eec87156e482d4dc1ca7bb905bc728394e9ffc4 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 15:08:44 +0300
Subject: [PATCH 07/46] Convert small text/layout leaf components to Mantine
 (Phase 2)

- UserAchievements: Box (mt="sm"), keeps cb-achievements-grid
- MessageTag: Text (fw/mr), keeps cb-private-text
- TournamentTimer: Text (inline-flex, monospace, c="yellow")
- GameLevelBadge: Box (p/ta), keeps bg-gray + cb-rounded

Wrapped the tests that mount these (directly or transitively) in
MantineTestProvider.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../PresentationalComponents.test.tsx         |  6 +++-
 .../js/__tests__/TaskPreviewWidget.test.tsx   | 28 +++++++++--------
 .../js/__tests__/TournamentListItem.test.tsx  | 30 +++++++++++++------
 .../js/widgets/components/GameLevelBadge.tsx  | 10 +++++--
 .../js/widgets/components/MessageTag.tsx      |  7 ++++-
 .../js/widgets/components/TournamentTimer.tsx | 10 ++++---
 .../widgets/components/UserAchievements.tsx   |  6 ++--
 7 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx b/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
index 4ec66e911..96d3ddcce 100644
--- a/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
@@ -26,7 +26,11 @@ vi.mock('../widgets/utils/useStayScrolled', () => ({
 
 describe('presentational components', () => {
   test('renders a game level badge', () => {
-    render(<GameLevelBadge level="easy" />);
+    render(
+      <MantineTestProvider>
+        <GameLevelBadge level="easy" />
+      </MantineTestProvider>,
+    );
 
     expect(screen.getByRole('img', { name: 'easy' })).toHaveAttribute(
       'src',
diff --git a/apps/codebattle/assets/js/__tests__/TaskPreviewWidget.test.tsx b/apps/codebattle/assets/js/__tests__/TaskPreviewWidget.test.tsx
index 886143f19..01e5b0ab5 100644
--- a/apps/codebattle/assets/js/__tests__/TaskPreviewWidget.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/TaskPreviewWidget.test.tsx
@@ -4,20 +4,24 @@ import React from 'react';
 
 import TaskPreviewWidget from '../widgets/pages/taskPreview/TaskPreviewWidget';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 test('shows the task solve time and base static score', () => {
   render(
-    <TaskPreviewWidget
-      task={{
-        id: 1,
-        name: 'score_task',
-        level: 'easy',
-        state: 'active',
-        description_en: 'Solve it.',
-        time_to_solve_sec: 125,
-        base_score: 275,
-      }}
-      taskStats={null}
-    />,
+    <MantineTestProvider>
+      <TaskPreviewWidget
+        task={{
+          id: 1,
+          name: 'score_task',
+          level: 'easy',
+          state: 'active',
+          description_en: 'Solve it.',
+          time_to_solve_sec: 125,
+          base_score: 275,
+        }}
+        taskStats={null}
+      />
+    </MantineTestProvider>,
   );
 
   expect(screen.getByText('Time to solve')).toBeInTheDocument();
diff --git a/apps/codebattle/assets/js/__tests__/TournamentListItem.test.tsx b/apps/codebattle/assets/js/__tests__/TournamentListItem.test.tsx
index 94672d819..f1e2d5818 100644
--- a/apps/codebattle/assets/js/__tests__/TournamentListItem.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/TournamentListItem.test.tsx
@@ -6,6 +6,8 @@ import i18n from '../i18n';
 import dayjs from '../i18n/dayjs';
 import TournamentListItem from '../widgets/pages/lobby/TournamentListItem';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('@/inertia/pageProps', () => ({
   getPageProp: (key: string, fallback?: unknown) => (key === 'locale' ? 'en' : fallback),
 }));
@@ -30,7 +32,11 @@ const baseTournament = {
 };
 
 test('does not render invalid date for finished tournament without last round end date', () => {
-  render(<TournamentListItem tournament={baseTournament} />);
+  render(
+    <MantineTestProvider>
+      <TournamentListItem tournament={baseTournament} />
+    </MantineTestProvider>,
+  );
 
   expect(screen.queryByText('Invalid Date')).not.toBeInTheDocument();
   expect(screen.getByText('Rookie')).toBeInTheDocument();
@@ -43,19 +49,25 @@ test('localizes the tournament date, action, and countdown label', async () => {
   await i18n.changeLanguage('ru');
   dayjs.locale('ru');
 
-  const { rerender } = render(<TournamentListItem tournament={baseTournament} />);
+  const { rerender } = render(
+    <MantineTestProvider>
+      <TournamentListItem tournament={baseTournament} />
+    </MantineTestProvider>,
+  );
 
   expect(screen.getByRole('link', { name: 'Открыть' })).toBeInTheDocument();
   expect(screen.getAllByText(/июл/).length).toBeGreaterThan(0);
 
   rerender(
-    <TournamentListItem
-      tournament={{
-        ...baseTournament,
-        state: 'upcoming',
-        startsAt: '2026-08-01T12:00:00Z',
-      }}
-    />,
+    <MantineTestProvider>
+      <TournamentListItem
+        tournament={{
+          ...baseTournament,
+          state: 'upcoming',
+          startsAt: '2026-08-01T12:00:00Z',
+        }}
+      />
+    </MantineTestProvider>,
   );
 
   expect(screen.getByText(/начнётся через/)).toBeInTheDocument();
diff --git a/apps/codebattle/assets/js/widgets/components/GameLevelBadge.tsx b/apps/codebattle/assets/js/widgets/components/GameLevelBadge.tsx
index 00b176b19..0eb0028ae 100644
--- a/apps/codebattle/assets/js/widgets/components/GameLevelBadge.tsx
+++ b/apps/codebattle/assets/js/widgets/components/GameLevelBadge.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
 
+import { Box } from '@mantine/core';
+
 interface GameLevelBadgeProps {
   level: string;
 }
 
 function GameLevelBadge({ level }: GameLevelBadgeProps) {
   return (
-    <div
-      className="bg-gray cb-rounded p-1 text-center"
+    <Box
+      className="bg-gray cb-rounded"
+      p="xs"
+      ta="center"
       data-toggle="tooltip"
       data-placement="right"
       title={level}
     >
       <img alt={level} src={`/assets/images/levels/${level}.svg`} />
-    </div>
+    </Box>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/MessageTag.tsx b/apps/codebattle/assets/js/widgets/components/MessageTag.tsx
index 18b13d407..b3dec4d5c 100644
--- a/apps/codebattle/assets/js/widgets/components/MessageTag.tsx
+++ b/apps/codebattle/assets/js/widgets/components/MessageTag.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Text } from '@mantine/core';
 import { useSelector } from 'react-redux';
 
 import messageTypes from '../config/messageTypes';
@@ -14,7 +15,11 @@ function MessageTag({ messageType = messageTypes.general }: MessageTagProps) {
   const activeRoom = useSelector(activeRoomSelector);
 
   if (isGeneralRoom(activeRoom) && isPrivateMessage(messageType)) {
-    return <span className="font-weight-bold mr-1 cb-private-text">{`[${messageType}]`}</span>;
+    return (
+      <Text component="span" fw={700} mr="xs" className="cb-private-text">
+        {`[${messageType}]`}
+      </Text>
+    );
   }
 
   return null;
diff --git a/apps/codebattle/assets/js/widgets/components/TournamentTimer.tsx b/apps/codebattle/assets/js/widgets/components/TournamentTimer.tsx
index 87773ad8d..200f7af15 100644
--- a/apps/codebattle/assets/js/widgets/components/TournamentTimer.tsx
+++ b/apps/codebattle/assets/js/widgets/components/TournamentTimer.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect, type ReactNode } from 'react';
 
+import { Text } from '@mantine/core';
+
 import dayjs from '../../i18n/dayjs';
 
 interface TournamentTimerProps {
@@ -36,12 +38,12 @@ function TournamentTimer({ date = new Date(), label, children }: TournamentTimer
   }
 
   return (
-    <span className="d-inline-flex">
+    <Text component="span" display="inline-flex">
       {label}{' '}
-      <span className="text-monospace text-warning ml-2">
+      <Text component="span" ff="monospace" c="yellow" ml="sm">
         {dayjs.duration(duration).format('HH:mm:ss')}
-      </span>
-    </span>
+      </Text>
+    </Text>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/UserAchievements.tsx b/apps/codebattle/assets/js/widgets/components/UserAchievements.tsx
index f0e72bfa8..227a00b49 100644
--- a/apps/codebattle/assets/js/widgets/components/UserAchievements.tsx
+++ b/apps/codebattle/assets/js/widgets/components/UserAchievements.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Box } from '@mantine/core';
+
 import AchievementBadge from './AchievementBadge';
 import type { Achievement } from './achievementTypes';
 
@@ -19,11 +21,11 @@ function UserAchievements({ achievements }: UserAchievementsProps) {
   }
 
   return (
-    <div className="cb-achievements-grid mt-2">
+    <Box className="cb-achievements-grid" mt="sm">
       {visibleAchievements.map((achievement) => (
         <AchievementBadge key={achievement.type} achievement={achievement} />
       ))}
-    </div>
+    </Box>
   );
 }
 

From c1f6c6211807512af0aea29194961a7fe85669e0 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 15:54:27 +0300
Subject: [PATCH 08/46] Convert TournamentDescription layout to Mantine (Phase
 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Grade rows → Flex (responsive column→row), highlights → Stack, headings →
Text. The `.card.cb-card` ranking panel is left as Bootstrap: its styling
is keyed on the card/card-header/card-body structure and needs a browser
pass to convert alongside the card theming (documented in-file).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../assets/js/__tests__/Localization.test.tsx |  6 ++-
 .../components/TournamentDescription.tsx      | 50 +++++++++++--------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/apps/codebattle/assets/js/__tests__/Localization.test.tsx b/apps/codebattle/assets/js/__tests__/Localization.test.tsx
index 595cbfe4f..60e171f8f 100644
--- a/apps/codebattle/assets/js/__tests__/Localization.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/Localization.test.tsx
@@ -92,7 +92,11 @@ test('localizes tournament preview dates and point labels', () => {
 });
 
 test('localizes tournament highlights and grade names', () => {
-  render(<TournamentDescription tournament={{ grade: 'rookie' }} />);
+  render(
+    <MantineTestProvider>
+      <TournamentDescription tournament={{ grade: 'rookie' }} />
+    </MantineTestProvider>,
+  );
 
   expect(screen.getByText('Главное о турнире:')).toBeInTheDocument();
   expect(screen.getByText('Задачи: 4 уникальных алгоритмических задач')).toBeInTheDocument();
diff --git a/apps/codebattle/assets/js/widgets/components/TournamentDescription.tsx b/apps/codebattle/assets/js/widgets/components/TournamentDescription.tsx
index c91dbdfef..040d0d0b3 100644
--- a/apps/codebattle/assets/js/widgets/components/TournamentDescription.tsx
+++ b/apps/codebattle/assets/js/widgets/components/TournamentDescription.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cn from 'classnames';
+import { Box, Center, Flex, Stack, Text } from '@mantine/core';
 
 import {
   getGradeLabel,
@@ -12,27 +12,28 @@ import {
 
 import i18n from '../../i18n';
 
-const getGradeDescriptionClassName = (highlight: boolean) =>
-  cn('d-flex flex-column flex-lg-row flex-md-row flex-sm-row justify-content-between', {
-    'text-monospace': highlight,
-  });
-
 interface GradeInfoProps {
   grade: Grade | string;
   selected: Grade | string;
 }
 
 function GradeInfo({ grade, selected }: GradeInfoProps) {
+  const isSelected = grade === selected;
+
   return (
-    <div className={getGradeDescriptionClassName(grade === selected)}>
-      <span className={grade === selected ? 'text-white' : ''}>
+    <Flex
+      direction={{ base: 'column', sm: 'row' }}
+      justify="space-between"
+      ff={isSelected ? 'monospace' : undefined}
+    >
+      <Text component="span" c={isSelected ? 'white' : undefined}>
         {i18n.t(getGradeLabel(grade))}
-        {grade === selected && '(*)'}
-      </span>
-      <span className={cn('pl-3', { 'text-white': grade === selected })}>
+        {isSelected && '(*)'}
+      </Text>
+      <Text component="span" pl="md" c={isSelected ? 'white' : undefined}>
         [{getRankingPoints(grade).join(', ')}]
-      </span>
-    </div>
+      </Text>
+    </Flex>
   );
 }
 
@@ -46,11 +47,13 @@ interface TournamentDescriptionProps {
 
 function TournamentDescription({ className, tournament }: TournamentDescriptionProps) {
   return (
-    <div className={className}>
+    <Box className={className}>
       {tournament.grade !== grades.open ? (
         <>
-          <span className="text-white">{i18n.t('Tournament Highlights:')}</span>
-          <div className="d-flex flex-column">
+          <Text component="span" c="white">
+            {i18n.t('Tournament Highlights:')}
+          </Text>
+          <Stack gap={0}>
             <span>{i18n.t('Prizes: Codebattle T-shirt merch for a top-tier of League')}</span>
             <span>
               {i18n.t('Challenges: %{count} unique algorithm problems', {
@@ -58,8 +61,11 @@ function TournamentDescription({ className, tournament }: TournamentDescriptionP
               })}
             </span>
             <span>{i18n.t('Impact: Advancing in the Codebattle programmer rankings')}</span>
-          </div>
-          <div className="d-flex justify-content-center w-100">
+          </Stack>
+          <Center w="100%">
+            {/* Bootstrap card retained: `.card.cb-card` styling (transparent bg,
+                header highlight-panel) is keyed on the card/card-header/card-body
+                structure — convert alongside the card theming, with a browser pass. */}
             <div className="card cb-card mt-2">
               <div className="card-header text-center">
                 {i18n.t('View League Ranking Points System')}
@@ -77,15 +83,17 @@ function TournamentDescription({ className, tournament }: TournamentDescriptionP
                 ))}
               </div>
             </div>
-          </div>
+          </Center>
         </>
       ) : (
         <>
-          <span className="text-white">{i18n.t('Tournament Description:')}</span>
+          <Text component="span" c="white">
+            {i18n.t('Tournament Description:')}
+          </Text>
           {tournament.description}
         </>
       )}
-    </div>
+    </Box>
   );
 }
 

From a9bf105d15ce33c8af836a4b8d3bd14342549968 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 15:59:22 +0300
Subject: [PATCH 09/46] Convert ChatHeader to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header row → Group (bottom border via themed default-border), "Clean
banned" admin action → Mantine Button (subtle/red). Rooms child unchanged.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../js/widgets/components/ChatHeader.tsx      | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/components/ChatHeader.tsx b/apps/codebattle/assets/js/widgets/components/ChatHeader.tsx
index 2d64f02f5..29ff9fdd2 100644
--- a/apps/codebattle/assets/js/widgets/components/ChatHeader.tsx
+++ b/apps/codebattle/assets/js/widgets/components/ChatHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cn from 'classnames';
+import { Button, Group } from '@mantine/core';
 import { useSelector } from 'react-redux';
 
 import i18n from '../../i18n';
@@ -23,23 +23,27 @@ export default function ChatHeader({ showRooms = false, disabled = false }: Chat
 
   const showBorder = showRooms || (currentUserIsAdmin && !disabled);
 
-  const headerClassName = cn('d-flex align-items-center', {
-    'border-bottom cb-border-color': showBorder,
-  });
-
   return (
-    <div className={headerClassName}>
+    <Group
+      align="center"
+      gap="xs"
+      style={
+        showBorder ? { borderBottom: '1px solid var(--mantine-color-default-border)' } : undefined
+      }
+    >
       {showRooms && !disabled && <Rooms disabled={disabled} />}
       {currentUserIsAdmin && !disabled && (
-        <button
-          type="button"
-          className="btn btn-sm btn-link text-danger cb-rounded"
+        <Button
+          variant="subtle"
+          color="red"
+          size="xs"
+          radius="md"
           onClick={handleCleanBanned}
           disabled={disabled}
         >
           {i18n.t('Clean banned')}
-        </button>
+        </Button>
       )}
-    </div>
+    </Group>
   );
 }

From f7c7de251e8432c417407a77424c48d410ca0ed8 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 18:00:57 +0300
Subject: [PATCH 10/46] fixes

---
 .../assets/js/widgets/components/CbModal.tsx  | 23 +++++++++++++------
 .../game/NextStageGroupTournamentModal.tsx    |  2 +-
 .../pages/game/TournamentAwardModal.tsx       |  2 +-
 .../widgets/pages/lobby/TournamentModal.tsx   |  8 ++++---
 .../widgets/pages/tournament/DetailsModal.tsx | 11 +++++----
 .../tournament/MatchConfirmationModal.tsx     |  6 ++---
 .../pages/tournament/TournamentChat.tsx       |  2 +-
 .../TournamentMainControlButtons.tsx          |  6 ++---
 8 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/components/CbModal.tsx b/apps/codebattle/assets/js/widgets/components/CbModal.tsx
index d2ba37577..6367a979e 100644
--- a/apps/codebattle/assets/js/widgets/components/CbModal.tsx
+++ b/apps/codebattle/assets/js/widgets/components/CbModal.tsx
@@ -1,6 +1,6 @@
 import React, { type CSSProperties, type ReactNode } from 'react';
 
-import { Box, Modal as MantineModal } from '@mantine/core';
+import { Box, Modal as MantineModal, ScrollArea } from '@mantine/core';
 import cn from 'classnames';
 
 // App modal wrapper: exposes a compound API (<CbModal>, CbModal.Header/Title/
@@ -19,6 +19,7 @@ interface CbModalProps {
 }
 
 interface HeaderProps {
+  style?: CSSProperties;
   closeButton?: boolean;
   className?: string;
   children?: ReactNode;
@@ -35,9 +36,9 @@ interface SectionProps {
   children?: ReactNode;
 }
 
-function Header({ closeButton, className, children }: HeaderProps) {
+function Header({ closeButton, className, children, style = {} }: HeaderProps) {
   return (
-    <MantineModal.Header style={{ display: 'flex' }} className={className}>
+    <MantineModal.Header style={{ display: 'flex', flexShrink: 0, ...style }} className={className} >
       {children}
       {closeButton && <MantineModal.CloseButton />}
     </MantineModal.Header>
@@ -48,9 +49,16 @@ function Title({ className, children }: TitleProps) {
   return <MantineModal.Title className={className}>{children}</MantineModal.Title>;
 }
 
-function Body({ className, style, children }: SectionProps) {
+function Body({ className, style = {}, children }: SectionProps) {
   return (
-    <MantineModal.Body className={className} style={style}>
+    <MantineModal.Body
+      className={className}
+      style={{
+        maxHeight: '70vh',
+        overflowX: 'hidden',
+        ...style
+      }}
+    >
       {children}
     </MantineModal.Body>
   );
@@ -64,6 +72,7 @@ function Footer({ className, style, children }: SectionProps) {
       style={{
         display: 'flex',
         alignItems: 'center',
+        flexShrink: 0,
         justifyContent: 'flex-end',
         gap: 'var(--mantine-spacing-sm)',
         padding: 'var(--mantine-spacing-md)',
@@ -83,7 +92,7 @@ interface CbModalComponent extends React.FC<CbModalProps> {
   Footer: typeof Footer;
 }
 
-const noop = () => {};
+const noop = () => { };
 
 const CbModal = (({
   show,
@@ -107,7 +116,7 @@ const CbModal = (({
     className={className}
   >
     <MantineModal.Overlay />
-    <MantineModal.Content className={cn(contentClassName, dialogClassName)}>
+    <MantineModal.Content style={{ overflow: 'hidden' }} className={cn(contentClassName, dialogClassName)}>
       {children}
     </MantineModal.Content>
   </MantineModal.Root>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/NextStageGroupTournamentModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/NextStageGroupTournamentModal.tsx
index 3dcd9c86e..b88c58d2d 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/NextStageGroupTournamentModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/NextStageGroupTournamentModal.tsx
@@ -42,7 +42,7 @@ const NextStageGroupTournamentModal = NiceModal.create(
         show={modal.visible}
         backdrop="static"
         keyboard={false}
-        contentClassName="cb-bg-panel cb-text"
+        contentClassName="cb-text"
       >
         <Modal.Header closeButton>
           <Modal.Title>{headerText}</Modal.Title>
diff --git a/apps/codebattle/assets/js/widgets/pages/game/TournamentAwardModal.tsx b/apps/codebattle/assets/js/widgets/pages/game/TournamentAwardModal.tsx
index 9c8178d43..9f6a8c510 100644
--- a/apps/codebattle/assets/js/widgets/pages/game/TournamentAwardModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/game/TournamentAwardModal.tsx
@@ -46,7 +46,7 @@ const TournamentAwardModal = NiceModal.create((params: TournamentAwardModalProps
   }, [modal.visible, onlyShowAward]);
 
   return (
-    <Modal centered show={modal.visible} onHide={modal.hide} contentClassName="cb-bg-panel cb-text">
+    <Modal centered show={modal.visible} onHide={modal.hide} contentClassName="cb-text">
       <Modal.Header closeButton>
         <Modal.Title>{i18next.t('Award')}</Modal.Title>
       </Modal.Header>
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
index 756adfb5f..65f6b565f 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
@@ -42,12 +42,14 @@ export const TournamentModal = NiceModal.create(({ tournament }: TournamentModal
           {tournament.grade !== grades.open && (
             <span className="text-white">Codebattle League 2025</span>
           )}
-          {i18n.t('Tournament: %{name}', {
-            name: localizeTournamentName(tournament.name, tournament.grade),
-          })}
         </Modal.Title>
       </Modal.Header>
       <Modal.Body className="position-relative">
+        <h3 className='text-center'>
+          {i18n.t('Tournament: %{name}', {
+            name: localizeTournamentName(tournament.name, tournament.grade),
+          })}
+        </h3>
         <div className="d-flex flex-column">
           <TournamentPreviewPanel
             className="d-flex justify-content-center w-100 h-100"
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/DetailsModal.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/DetailsModal.tsx
index 83581e953..6ead59e4e 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/DetailsModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/DetailsModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState, memo, useContext, type ReactNode } from 'react';
+import { useCallback, useMemo, useState, memo, useContext, type ReactNode } from 'react';
 
 import { Button } from '@mantine/core';
 import moment from 'moment';
@@ -98,6 +98,10 @@ function DetailsModal({ tournament, modalShowing, setModalShowing }: DetailsModa
   const hasCustomEventStyles = useContext(CustomEventStylesContext);
   const [showRawJson, setShowRawJson] = useState(false);
 
+  const toggleJsonView = useCallback(() => {
+    setShowRawJson((v) => !v)
+  }, [setShowRawJson])
+
   const detailSections = useMemo(() => {
     const sections = [
       {
@@ -187,7 +191,7 @@ function DetailsModal({ tournament, modalShowing, setModalShowing }: DetailsModa
   const handleCancel = useCallback(() => setModalShowing(false), [setModalShowing]);
 
   return (
-    <Modal contentClassName="cb-bg-panel cb-text" show={modalShowing} onHide={handleCancel}>
+    <Modal contentClassName="cb-text" show={modalShowing} onHide={handleCancel}>
       <Modal.Header className="cb-border-color" closeButton>
         <Modal.Title>{i18n.t('Tournament details')}</Modal.Title>
       </Modal.Header>
@@ -213,9 +217,8 @@ function DetailsModal({ tournament, modalShowing, setModalShowing }: DetailsModa
         <Button
           variant="outline"
           color="cbSecondary"
-          size="xs"
           radius="md"
-          onClick={() => setShowRawJson((v) => !v)}
+          onClick={toggleJsonView}
         >
           {i18n.t(showRawJson ? 'Hide JSON' : 'Raw JSON')}
         </Button>
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/MatchConfirmationModal.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/MatchConfirmationModal.tsx
index f17cacd45..304fe0ac3 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/MatchConfirmationModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/MatchConfirmationModal.tsx
@@ -97,7 +97,7 @@ function MatchConfirmationModal({
   useEffect(() => {
     if (nextMatch?.gameId && !modalShowing && redirectImmediatly) {
       openNextMatch(nextMatch);
-      return () => {};
+      return () => { };
     }
 
     if (nextMatch?.gameId && !modalShowing) {
@@ -132,7 +132,7 @@ function MatchConfirmationModal({
       };
     }
 
-    return () => {};
+    return () => { };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nextMatch?.gameId]);
 
@@ -154,7 +154,7 @@ function MatchConfirmationModal({
 
   return (
     <Modal
-      contentClassName="cb-bg-panel cb-text cb-match-confirmation-modal"
+      contentClassName="cb-text cb-match-confirmation-modal"
       show={modalShowing}
       onHide={handleCancel}
     >
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChat.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChat.tsx
index f227cffd7..93df7757c 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChat.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChat.tsx
@@ -35,7 +35,7 @@ function TournamentChat() {
   }, [messages]);
 
   return (
-    <div className="cb-tournament-chat my-2 mt-lg-0 sticky-top cb-bg-panel cb-rounded position-relative d-flex flex-column shadow-sm">
+    <div className="cb-tournament-chat my-2 mt-lg-0 cb-bg-panel cb-rounded position-relative d-flex flex-column shadow-sm">
       <div className="cb-tournament-chat-header">
         <div className="d-flex flex-column min-w-0">
           <span className="cb-tournament-chat-title">{i18next.t('Tournament chat')}</span>
diff --git a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.tsx b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.tsx
index 040ee242c..c33e3f874 100644
--- a/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.tsx
@@ -132,7 +132,7 @@ function TournamentMainControlButtons({
       <Modal
         show={restartConfirmationModalShowing}
         onHide={closeRestartConfirmationModal}
-        contentClassName="cb-bg-panel cb-text"
+        contentClassName="cb-text"
       >
         <Modal.Header className="cb-border-color" closeButton>
           <Modal.Title>{i18n.t('Reset tournament progress')}</Modal.Title>
@@ -172,7 +172,7 @@ function TournamentMainControlButtons({
       <Modal
         show={retryConfirmationModalShowing}
         onHide={closeRetryConfirmationModal}
-        contentClassName="cb-bg-panel cb-text"
+        contentClassName="cb-text"
       >
         <Modal.Header className="cb-border-color" closeButton>
           <Modal.Title>{i18n.t('Retry tournament')}</Modal.Title>
@@ -211,7 +211,7 @@ function TournamentMainControlButtons({
       <Modal
         show={finishConfirmationModalShowing}
         onHide={closeFinishConfirmationModal}
-        contentClassName="cb-bg-panel cb-text"
+        contentClassName="cb-text"
       >
         <Modal.Header className="cb-border-color" closeButton>
           <Modal.Title>{i18n.t('Finish tournament')}</Modal.Title>

From 794029b6e87178205a5823c5e1edb8d54fa3dba8 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 18:07:16 +0300
Subject: [PATCH 11/46] Convert chat Message + Messages to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Message: header/body layout → Flex/Stack/Group/Text; ban + delete
  icon-buttons → ActionIcon (behavior covered by ChatMessageDelete /
  TournamentChatMessage tests). Keeps cb-username-max-length,
  cb-private-text, cb-tournament-chat-ban, cb-chat-message-delete.
- Messages: list container + scroll button → Box (props for pos/spacing/
  overflow, visibility toggle replaces `invisible`). Keeps cb-messages-list,
  cb-bg-secondary, scroll-button, list-unstyled.

Chat layout still needs a browser QA pass (flex spacing, scroll button,
username truncation).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../assets/js/widgets/components/Message.tsx  | 85 +++++++++++--------
 .../assets/js/widgets/components/Messages.tsx | 48 +++++------
 2 files changed, 72 insertions(+), 61 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/components/Message.tsx b/apps/codebattle/assets/js/widgets/components/Message.tsx
index a86d15b66..d3ffbb033 100644
--- a/apps/codebattle/assets/js/widgets/components/Message.tsx
+++ b/apps/codebattle/assets/js/widgets/components/Message.tsx
@@ -1,7 +1,7 @@
 import React, { type MouseEvent, type KeyboardEvent } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cn from 'classnames';
+import { ActionIcon, Flex, Group, Stack, Text } from '@mantine/core';
 
 import i18n from '../../i18n';
 import useHover from '../utils/useHover';
@@ -25,20 +25,24 @@ interface MessageHeaderProps {
 }
 
 function MessageHeader({ name, time, hovered, interactive, action }: MessageHeaderProps) {
-  const playerClassName = cn(
-    'd-inline-block text-truncate align-top text-nowrap cb-username-max-length mr-1',
-    { 'text-primary': interactive && hovered },
-  );
-
   return (
     <>
-      <span className="font-weight-bold">
-        <span className={playerClassName}>{name}</span>
-      </span>
-      <span className="d-inline-flex align-items-center">
+      <Text component="span" fw={700}>
+        <Text
+          component="span"
+          truncate
+          mr="xs"
+          className="cb-username-max-length"
+          c={interactive && hovered ? 'blue' : undefined}
+          style={{ display: 'inline-block', verticalAlign: 'top' }}
+        >
+          {name}
+        </Text>
+      </Text>
+      <Group component="span" display="inline-flex" wrap="nowrap" gap={4} align="center">
         <MessageTimestamp time={time!} />
         {action}
-      </span>
+      </Group>
     </>
   );
 }
@@ -52,17 +56,17 @@ interface MessagePartProps {
 function MessagePart({ part, index, name }: MessagePartProps) {
   if (part.slice(1) === name) {
     return (
-      <span key={index} className="font-weight-bold bg-warning">
+      <Text key={index} component="span" fw={700} bg="yellow">
         {part}
-      </span>
+      </Text>
     );
   }
 
   if (part.startsWith('@')) {
     return (
-      <span key={index} className="font-weight-bold text-primary">
+      <Text key={index} component="span" fw={700} c="blue">
         {part}
-      </span>
+      </Text>
     );
   }
 
@@ -102,9 +106,9 @@ function Message({
   const isInteractive = Boolean(userId && displayMenu);
   const banAction =
     userId && name && onBanUser ? (
-      <button
-        type="button"
-        className="btn cb-tournament-chat-ban"
+      <ActionIcon
+        variant="transparent"
+        className="cb-tournament-chat-ban"
         title={i18n.t('Ban %{name}', { name })}
         aria-label={i18n.t('Ban %{name}', { name })}
         onClick={(event) => {
@@ -113,14 +117,14 @@ function Message({
         }}
       >
         <FontAwesomeIcon icon="ban" />
-      </button>
+      </ActionIcon>
     ) : null;
   const isOwnMessage = Boolean(userId && currentUserId && userId === currentUserId);
   const canDelete = Boolean(id != null && onDeleteMessage && (canDeleteAny || isOwnMessage));
   const deleteAction = canDelete ? (
-    <button
-      type="button"
-      className="btn cb-chat-message-delete"
+    <ActionIcon
+      variant="transparent"
+      className="cb-chat-message-delete"
       title={i18n.t('Delete message')}
       aria-label={i18n.t('Delete message')}
       onClick={(event) => {
@@ -129,7 +133,7 @@ function Message({
       }}
     >
       <FontAwesomeIcon icon="trash" />
-    </button>
+    </ActionIcon>
   ) : null;
 
   if (!text) {
@@ -146,9 +150,7 @@ function Message({
 
   const parts = text.split(/(@+[-a-zA-Z0-9_]+\b)/g);
 
-  const textPartsClassNames = cn('text-break', {
-    'cb-private-text': meta?.type === 'private',
-  });
+  const textPartsClassName = meta?.type === 'private' ? 'cb-private-text' : undefined;
   const messageHeader = (
     <MessageHeader
       name={name}
@@ -167,15 +169,18 @@ function Message({
   );
 
   return (
-    <div className="d-flex align-items-baseline flex-wrap mb-1">
-      <span className="d-flex flex-column w-100">
+    <Flex align="baseline" wrap="wrap" mb="xs">
+      <Stack component="span" gap={0} w="100%">
         {isInteractive ? (
-          <span
+          <Group
             ref={chatHeaderRef}
+            component="span"
+            justify="space-between"
+            wrap="nowrap"
+            gap="xs"
             role="button"
             tabIndex={0}
             title={`Message (${name})`}
-            className="d-flex justify-content-between"
             data-user-id={userId}
             data-user-name={name}
             onContextMenu={displayMenu}
@@ -183,23 +188,29 @@ function Message({
             onKeyPress={displayMenu}
           >
             {messageHeader}
-          </span>
+          </Group>
         ) : (
-          <span ref={chatHeaderRef} className="d-flex justify-content-between">
+          <Group
+            ref={chatHeaderRef}
+            component="span"
+            justify="space-between"
+            wrap="nowrap"
+            gap="xs"
+          >
             {messageHeader}
-          </span>
+          </Group>
         )}
         <span>
           <MessageTag messageType={meta?.type} />
-          <span className={textPartsClassNames}>
+          <Text component="span" className={textPartsClassName} style={{ wordBreak: 'break-word' }}>
             {parts.map((part, i) => (
               /* eslint-disable react/no-array-index-key */
               <MessagePart key={i} part={part} index={i} name={name} />
             ))}
-          </span>
+          </Text>
         </span>
-      </span>
-    </div>
+      </Stack>
+    </Flex>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/Messages.tsx b/apps/codebattle/assets/js/widgets/components/Messages.tsx
index 421b9f7ea..66f6665c6 100644
--- a/apps/codebattle/assets/js/widgets/components/Messages.tsx
+++ b/apps/codebattle/assets/js/widgets/components/Messages.tsx
@@ -9,6 +9,7 @@ import React, {
   type UIEvent,
 } from 'react';
 
+import { Box } from '@mantine/core';
 import cn from 'classnames';
 // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -114,45 +115,36 @@ function Messages({
     }
   }, []);
 
-  const scrollButtonClass = cn(
-    'scroll-button',
-    'position-absolute',
-    'rounded-circle',
-    'cb-bg-secondary',
-    'p-0',
-    'border-0',
-    {
-      invisible: !isScrollButtonVisible,
-    },
-  );
-
-  const messageClassName = cn(
-    className,
-    'overflow-auto pt-0 pl-3 pr-2',
-    'position-relative cb-messages-list flex-grow-1 list-unstyled',
-  );
+  const messageClassName = cn(className, 'cb-messages-list', 'list-unstyled');
 
   if (disabled) {
     return (
-      <div
+      <Box
         title={i18n.t('Chat is disabled')}
-        className="h-100 position-relative"
+        h="100%"
+        pos="relative"
         ref={listRef as React.RefObject<HTMLDivElement>}
       >
         {/* <span className="d-flex text-muted position-absolute h-100 w-100 justify-content-center align-items-center"> */}
         {/*   <FontAwesomeIcon className="h-25 w-25" icon="comment-slash" /> */}
         {/* </span> */}
         {/* <div className="position-absolute h-100 w-100 bg-dark cb-opacity-50 rounded-left" /> */}
-      </div>
+      </Box>
     );
   }
 
   return (
     <>
-      <ul
+      <Box
+        component="ul"
         ref={listRef as React.RefObject<HTMLUListElement>}
         className={messageClassName}
         onScroll={scrollHandler}
+        pos="relative"
+        pt={0}
+        pl="md"
+        pr="sm"
+        style={{ overflow: 'auto', flexGrow: 1 }}
       >
         {messages.map((message, index) => {
           const { id, userId, name, text, type, time, meta } = message;
@@ -178,10 +170,13 @@ function Messages({
             </li>
           );
         })}
-      </ul>
-      <button
+      </Box>
+      <Box
+        component="button"
         type="button"
-        className={scrollButtonClass}
+        className="scroll-button cb-bg-secondary"
+        pos="absolute"
+        p={0}
         onClick={() => {
           if (scrollBottom) {
             scrollBottom();
@@ -190,6 +185,11 @@ function Messages({
           }
         }}
         aria-label={i18n.t('Scroll to bottom')}
+        style={{
+          borderRadius: '50%',
+          border: 0,
+          visibility: isScrollButtonVisible ? 'visible' : 'hidden',
+        }}
       />
     </>
   );

From 388a2d2de92503ef53e90e2cb0e639445169c237 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 18:14:00 +0300
Subject: [PATCH 12/46] Update Mantine migration spec: Phase 2 progress +
 gotchas

Mark Phase 2 in progress, log the 20 converted leaf components and the
remaining (theming/framework-coupled) leaves, document the border-token
theme work, and add gotchas for unlayered-Bootstrap radius overrides and
grep over-counting.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md | 67 ++++++++++++++++++++-
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index ede20d952..72a1639dd 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -1,8 +1,9 @@
 # Bootstrap → Mantine migration
 
 Living spec for moving the React frontend off Bootstrap/react-bootstrap onto
-Mantine. Phases 0–1 are **done**; Phases 2–3 are **planned** and described here
-in enough detail to resume without re-discovery.
+Mantine. Phases 0–1 are **done**; Phase 2 is **in progress** (shared leaf
+components converted — see the progress log under Phase 2); Phase 3 is
+**planned**. Described here in enough detail to resume without re-discovery.
 
 ## Scope & standing decisions
 
@@ -23,7 +24,7 @@ in enough detail to resume without re-discovery.
 |------|------|--------|
 | 0 | Infra: Mantine deps, PostCSS, CSS-layer coexistence, theme, `MantineProvider` on all roots | ✅ done |
 | 1 | Replace `react-bootstrap` **components** with Mantine; remove `react-bootstrap` dep | ✅ done |
-| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | ⬜ planned |
+| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | 🔄 in progress — shared leaf components done |
 | 3 | Migrate `.heex` templates; fully remove Bootstrap CSS + `bootstrap` dep | ⬜ planned (out of current scope) |
 
 ## Coexistence model (how Bootstrap + Mantine live together)
@@ -42,6 +43,12 @@ in enough detail to resume without re-discovery.
   (#3a3f50), `cbSuccess` (#46a077), `brand` (orange #ee3737). **Spacing scale is
   matched to Bootstrap-4 spacers**: `xs=.25rem, sm=.5rem, md=1rem, lg=1.5rem,
   xl=3rem` — so `mb-2 → mb="sm"`, `p-3 → p="md"`, etc. keep the same rhythm.
+  Also exports **`cssVariablesResolver`** (Phase 2) that sets
+  `--mantine-color-default-border` = `#4c4c5a` (`$cb-border-color`) in the dark
+  scheme, so `<Paper/Card withBorder>` matches the legacy `.cb-border-color`
+  panels. It is passed to `MantineProvider` in **both** `withMantine.tsx` and the
+  test provider `helpers/mantine.tsx`. `cb-rounded` (`$cb-border-radius` 0.5rem)
+  → Mantine `radius="md"` (md = 0.5rem).
 - `assets/js/widgets/ui/withMantine.tsx` — provider wrapper; applied to every
   React root in `widgets/index.tsx` and the Inertia root in `inertia.tsx`.
   `forceColorScheme="dark"` (single baked-in dark look, no runtime toggle).
@@ -79,6 +86,22 @@ in enough detail to resume without re-discovery.
    rendered items always; Mantine `Menu.Dropdown` mounts on open. Use
    `keepMounted` if a test/behavior depends on items being in the DOM while
    closed (see `UserSettingsForm` language menu).
+7. **Unlayered Bootstrap beats Mantine — watch `border-radius` on buttons.**
+   Bootstrap is imported unlayered (`style.scss` `@import 'bootstrap/scss/bootstrap'`)
+   while Mantine is in `@layer mantine`, so **any** unlayered rule wins over
+   Mantine regardless of specificity. Concretely, `style.scss` has
+   `.btn { border-radius: unset }` and utilities like `rounded-top`. A Mantine
+   `<Button radius="…">` that still carries Bootstrap classes (e.g. `Rooms`'
+   `rounded-top cb-btn-secondary`) will **ignore** the Mantine `radius` — the
+   unlayered rule overrides it. Fix = drop the Bootstrap button classes and port
+   `cb-btn-secondary` to the theme (button-theming pass). Pure Mantine buttons
+   (no leftover BS classes) round correctly.
+8. **`grep` over-counts Phase-2 targets.** Substring matches inflate the count:
+   `card` matches the `Card` component, `badge` matches `cb-achievement-badge`,
+   etc. Filter to whole-word Bootstrap tokens. Also: the *remaining* leaves are
+   rarely plain spacing swaps — they're coupled to custom `cb-*` design classes
+   (need theme/CSS-module homes) or to non-Mantine libs (react-select, native
+   `<select>`), so budget per-component judgement, not a blanket sweep.
 
 ---
 
@@ -87,6 +110,44 @@ in enough detail to resume without re-discovery.
 **Goal:** remove Bootstrap utility classes from React components, replacing them
 with Mantine primitives + style props. ~244 files; work per-widget.
 
+### Progress (updated 2026-08-07)
+
+Working in small per-slice commits (convert → wrap affected tests in
+`MantineTestProvider` → typecheck + vitest + build + lint). Started with the
+shared leaf components in `widgets/components/`.
+
+**Done (20 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+`MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
+`GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
+`UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
+`ChatHeader`, `Message`, `Messages`, and `TournamentDescription` (layout only —
+its `.card.cb-card` ranking panel is left as Bootstrap; see below). Plus the
+theme border-token work (gotcha #7 / `theme.ts`). The chat cluster is
+effectively done.
+
+**Remaining leaves — each needs a decision or a browser pass, not a plain swap:**
+- **Button/alert/card theming (port `cb-*` → theme first):** `Rooms` button
+  (`cb-btn-secondary` + `rounded-top`, hits gotcha #7), `FeedbackAlertNotification`
+  (`alert-dark-theme` set), the `cb-card` / `cb-bg-highlight-panel` leftovers
+  (e.g. inside `TournamentDescription`).
+- **Non-Mantine libs:** `LanguagePickerView` (react-select), `SoundToggle` /
+  `DropdownMenuDefault` (Mantine `Menu` items), `EmojiTooltip` (native
+  `<select size=4>`).
+- **Convert as a set (they thread `className` strings into each other):**
+  `UserInfo` / `UserName` / `UserLabel` / `UserStats`.
+- **Larger:** `AccordeonBox`, `ChatContextMenu`, `InvitesContainer` /
+  `InvitesList`, `SeasonLeaderboard`, `PlayerInsightsModal`.
+
+**Verification gap:** slices are toolchain-verified only. Headless browser
+verification isn't feasible here (auth + live game/tournament state), so all
+Phase 2 UI still needs a **manual browser QA pass** — especially buttons
+(gotcha #7), bordered panels/cards, and chat layout (flex spacing, scroll
+button, username truncation).
+
+**Note:** icon-only Bootstrap `btn`s convert to Mantine `<ActionIcon>` (keep the
+custom `cb-*` class, drop `btn`); this preserves the click behavior that tests
+assert (see `ChatMessageDelete` / `TournamentChatMessage`).
+
 ### Conversion vocabulary
 
 | Bootstrap | Mantine |

From 076f78b7dbbc153d06d23814e065142e8df2685b Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 18:30:27 +0300
Subject: [PATCH 13/46] Convert User* cluster to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- UserName/UserLabel: layout → Group/Text (drop d-flex/align-items/mr-*/
  text-truncate); keep cb-user-online/cb-user-dark-offline/cb-text/
  x-username-truncated design classes.
- UserStats: container/row/col + flex layout → Box/Stack/Group/Text;
  StatsRow grid wrapper → Box with c/fz; play + follow icon-buttons →
  ActionIcon (text-primary/muted/danger → c props). Keeps cb-rounded avatar.
- UserInfo: John Doe / id=0 fallbacks → Text. Keeps the string className/
  linkClassName passthrough API (~12 page callers still pass BS color
  classes; cleaned when pages convert).
- Wrap UserName.test in MantineTestProvider (gotcha #1).

Toolchain-verified (typecheck/vitest/build/lint); still needs manual
browser QA (avatar rounding, stat grid, follow/play buttons, truncation).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  17 +-
 .../assets/js/__tests__/UserName.test.tsx     |   5 +
 .../assets/js/widgets/components/UserInfo.tsx |  13 +-
 .../js/widgets/components/UserLabel.tsx       |  11 +-
 .../assets/js/widgets/components/UserName.tsx |  50 +++--
 .../js/widgets/components/UserStats.tsx       | 194 +++++++++---------
 6 files changed, 162 insertions(+), 128 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 72a1639dd..12c33c826 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,15 +116,24 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (20 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (24 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
-`ChatHeader`, `Message`, `Messages`, and `TournamentDescription` (layout only —
-its `.card.cb-card` ranking panel is left as Bootstrap; see below). Plus the
+`ChatHeader`, `Message`, `Messages`, `TournamentDescription` (layout only —
+its `.card.cb-card` ranking panel is left as Bootstrap; see below), and the
+`UserInfo` / `UserName` / `UserLabel` / `UserStats` cluster. Plus the
 theme border-token work (gotcha #7 / `theme.ts`). The chat cluster is
 effectively done.
 
+The `User*` cluster keeps the string `className`/`linkClassName` **passthrough
+props** (used by ~12 page callers that still pass Bootstrap color classes like
+`text-white`/`text-secondary`/`text-decoration-none`); those leftovers get
+cleaned when the pages convert. Only the components' own internal utility
+classes were swapped to Mantine (`Group`/`Stack`/`Text`/`ActionIcon` + style
+props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
+`cb-rounded`, `x-username-truncated`, `cb-opacity-50` are kept.
+
 **Remaining leaves — each needs a decision or a browser pass, not a plain swap:**
 - **Button/alert/card theming (port `cb-*` → theme first):** `Rooms` button
   (`cb-btn-secondary` + `rounded-top`, hits gotcha #7), `FeedbackAlertNotification`
@@ -133,8 +142,6 @@ effectively done.
 - **Non-Mantine libs:** `LanguagePickerView` (react-select), `SoundToggle` /
   `DropdownMenuDefault` (Mantine `Menu` items), `EmojiTooltip` (native
   `<select size=4>`).
-- **Convert as a set (they thread `className` strings into each other):**
-  `UserInfo` / `UserName` / `UserLabel` / `UserStats`.
 - **Larger:** `AccordeonBox`, `ChatContextMenu`, `InvitesContainer` /
   `InvitesList`, `SeasonLeaderboard`, `PlayerInsightsModal`.
 
diff --git a/apps/codebattle/assets/js/__tests__/UserName.test.tsx b/apps/codebattle/assets/js/__tests__/UserName.test.tsx
index 2cab5fe98..e5f327f7e 100644
--- a/apps/codebattle/assets/js/__tests__/UserName.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/UserName.test.tsx
@@ -5,6 +5,8 @@ import '@testing-library/jest-dom';
 
 import UserName from '../widgets/components/UserName';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('@fortawesome/react-fontawesome', () => ({
   FontAwesomeIcon: 'span',
 }));
@@ -21,6 +23,7 @@ describe('UserName', () => {
         hideLink
         hideOnlineIndicator
       />,
+      { wrapper: MantineTestProvider },
     );
 
     expect(screen.getByText('A-211250(2011)')).toBeInTheDocument();
@@ -33,6 +36,7 @@ describe('UserName', () => {
         hideLink
         hideOnlineIndicator
       />,
+      { wrapper: MantineTestProvider },
     );
 
     expect(screen.getByText('A-211250')).toBeInTheDocument();
@@ -47,6 +51,7 @@ describe('UserName', () => {
         hideLink
         hideOnlineIndicator
       />,
+      { wrapper: MantineTestProvider },
     );
 
     expect(screen.getByText('CasperDesigner')).toBeInTheDocument();
diff --git a/apps/codebattle/assets/js/widgets/components/UserInfo.tsx b/apps/codebattle/assets/js/widgets/components/UserInfo.tsx
index 52611ab43..c31beebe8 100644
--- a/apps/codebattle/assets/js/widgets/components/UserInfo.tsx
+++ b/apps/codebattle/assets/js/widgets/components/UserInfo.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 
+import { Text } from '@mantine/core';
 import cn from 'classnames';
 import { camelizeKeys } from 'humps';
 import { useDispatch, useSelector } from 'react-redux';
@@ -123,11 +124,19 @@ function UserInfo({
   const content = useMemo(() => (user.isBot ? 'bot' : <UserPopoverContent user={user} />), [user]);
 
   if (!user?.id) {
-    return <span className="text-white">John Doe</span>;
+    return (
+      <Text component="span" c="white">
+        John Doe
+      </Text>
+    );
   }
 
   if (user?.id === 0) {
-    return <span className="text-white">{user.name}</span>;
+    return (
+      <Text component="span" c="white">
+        {user.name}
+      </Text>
+    );
   }
 
   const isOnline = (presenceList as Array<{ id?: string | number }>).some(
diff --git a/apps/codebattle/assets/js/widgets/components/UserLabel.tsx b/apps/codebattle/assets/js/widgets/components/UserLabel.tsx
index 36028e063..bfa5119ef 100644
--- a/apps/codebattle/assets/js/widgets/components/UserLabel.tsx
+++ b/apps/codebattle/assets/js/widgets/components/UserLabel.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 
 import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Group, Text } from '@mantine/core';
 import cn from 'classnames';
 import { useSelector } from 'react-redux';
 
@@ -20,19 +21,21 @@ function UserLabel({ user }: UserLabelProps) {
     () => presenceList.some((item) => (item as { id: string | number }).id === user.id),
     [presenceList, user.id],
   );
-  const onlineIndicatorClassName = cn('mr-1', {
+  const onlineIndicatorClassName = cn({
     'cb-user-online': isOnline,
     'cb-user-dark-offline': !isOnline,
   });
 
   return (
-    <span className="text-truncate">
+    <Group component="span" display="inline-flex" gap="xs" wrap="nowrap">
       <FontAwesomeIcon
         icon={['fa', 'circle'] as unknown as IconProp}
         className={onlineIndicatorClassName}
       />
-      <span>{user.name}</span>
-    </span>
+      <Text component="span" truncate>
+        {user.name}
+      </Text>
+    </Group>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/UserName.tsx b/apps/codebattle/assets/js/widgets/components/UserName.tsx
index 028d4436b..535312669 100644
--- a/apps/codebattle/assets/js/widgets/components/UserName.tsx
+++ b/apps/codebattle/assets/js/widgets/components/UserName.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { faCircle, faRobot } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Group, Text } from '@mantine/core';
 import cn from 'classnames';
 
 import LanguageIcon from './LanguageIcon';
@@ -39,40 +40,47 @@ function UserName({
   hideLink = false,
   displayName,
 }: UserNameProps) {
-  const commonClassName = 'd-flex align-items-center';
-  const onlineIndicatorClassName = cn('mr-1', {
+  const onlineIndicatorClassName = cn({
     'cb-user-online': isOnline,
     'cb-user-dark-offline': !isOnline,
   });
-  const userClassName = cn('text-truncate', {
-    'x-username-truncated': truncate,
-  });
-  const userNameClassName = cn(linkClassName, {
-    'text-primary': hovered,
-  });
-  const botImgClassName = cn('mr-1 cb-text', {});
 
   const shownName = displayName || user.name;
 
+  const nameContent = (
+    <Text component="span" className={linkClassName} c={hovered ? 'blue' : undefined}>
+      {shownName}
+    </Text>
+  );
+
   return (
-    <div className={cn(commonClassName, className)}>
+    <Group gap="xs" wrap="nowrap" className={className}>
       {!hideOnlineIndicator && !user.isBot && (
         <FontAwesomeIcon icon={faCircle} className={onlineIndicatorClassName} />
       )}
-      {!user.isBot && <LanguageIcon className="mr-1" lang={lang} />}
-      {user.isBot && (
-        <FontAwesomeIcon className={botImgClassName} icon={faRobot} transform="up-1" />
-      )}
+      {!user.isBot && <LanguageIcon lang={lang} />}
+      {user.isBot && <FontAwesomeIcon className="cb-text" icon={faRobot} transform="up-1" />}
       {hideLink ? (
-        <span className={userClassName} title={shownName}>
-          <span className={userNameClassName}>{shownName}</span>
-        </span>
+        <Text
+          component="span"
+          truncate
+          title={shownName}
+          className={cn({ 'x-username-truncated': truncate })}
+        >
+          {nameContent}
+        </Text>
       ) : (
-        <a href={`/users/${user.id}`} className={userClassName} title={shownName}>
-          <span className={userNameClassName}>{shownName}</span>
-        </a>
+        <Text
+          component="a"
+          href={`/users/${user.id}`}
+          truncate
+          title={shownName}
+          className={cn({ 'x-username-truncated': truncate })}
+        >
+          {nameContent}
+        </Text>
       )}
-    </div>
+    </Group>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/components/UserStats.tsx b/apps/codebattle/assets/js/widgets/components/UserStats.tsx
index f6cf3f1e5..f1368a277 100644
--- a/apps/codebattle/assets/js/widgets/components/UserStats.tsx
+++ b/apps/codebattle/assets/js/widgets/components/UserStats.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cn from 'classnames';
+import { ActionIcon, Box, Group, Stack, Text } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { selectDefaultAvatarUrl } from '@/selectors';
@@ -87,8 +87,10 @@ const tournamentGrades: { key: keyof TournamentStats; label: string }[] = [
 
 function StatsRow({ items }: { items: StatsRowItem[] }) {
   return (
-    <div
-      className="text-muted small mt-1"
+    <Box
+      c="dimmed"
+      fz="sm"
+      mt={4}
       style={{
         display: 'grid',
         gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
@@ -96,13 +98,15 @@ function StatsRow({ items }: { items: StatsRowItem[] }) {
       }}
     >
       {items.map(({ key, label, value }) => (
-        <span key={key} className="text-nowrap">
+        <Text key={key} component="span" style={{ whiteSpace: 'nowrap' }}>
           {label}
           {': '}
-          <b className="text-white">{value}</b>
-        </span>
+          <Text component="b" c="white">
+            {value}
+          </Text>
+        </Text>
       ))}
-    </div>
+    </Box>
   );
 }
 
@@ -139,100 +143,98 @@ function UserStats({ data, user: userInfo }: UserStatsProps) {
   }, [userInfo.id, userInfo.name, followId, dispatch]);
 
   return (
-    <div className="container-fluid p-2">
-      <div className="row">
-        <div className="col">
-          <div className="d-flex flex-column w-100">
-            <div className="d-flex align-items-start justify-content-between">
-              <div className="d-flex align-items-center text-white">
-                <img
-                  className="img-fluid cb-rounded mr-2"
-                  style={{ maxHeight: '42px', width: '42px' }}
-                  src={avatarUrl}
-                  alt={i18next.t('User avatar')}
-                />
-                <div className="d-flex flex-column">
-                  <div className="d-flex align-items-center">
-                    <LanguageIcon className="mr-1" lang={lang} />
-                    <span className="font-weight-bold">{name}</span>
-                    {userInfo.githubName && (
-                      <a
-                        href={`https://github.com/${userInfo.githubName}`}
-                        title={i18next.t('Github account')}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="text-white ml-2"
-                      >
-                        <FontAwesomeIcon icon={['fab', 'github']} />
-                      </a>
-                    )}
-                  </div>
-                  {clan && <span className="text-muted small">{clan}</span>}
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  title={i18next.t('play active game')}
-                  className={cn('btn btn-sm text-primary border-0 cb-rounded', {
-                    'text-primary': !!activeGameId,
-                    'text-muted': !activeGameId,
-                  })}
-                  onClick={handlePlayClick}
-                  disabled={!activeGameId}
-                >
-                  <FontAwesomeIcon icon="play" />
-                </button>
-                <button
-                  type="button"
-                  title={i18next.t('follow user')}
-                  className={cn('btn btn-sm border-0 cb-rounded', {
-                    'text-primary': followId !== userInfo.id,
-                    'text-danger': followId === userInfo.id,
-                  })}
-                  onClick={toggleFollowClick}
-                >
-                  <FontAwesomeIcon icon="binoculars" />
-                </button>
-              </div>
-            </div>
+    <Box p="sm">
+      <Stack gap={0} w="100%">
+        <Group align="flex-start" justify="space-between" wrap="nowrap">
+          <Group align="center" gap="sm" wrap="nowrap" c="white">
+            <img
+              className="cb-rounded"
+              style={{ maxHeight: '42px', width: '42px' }}
+              src={avatarUrl}
+              alt={i18next.t('User avatar')}
+            />
+            <Stack gap={0}>
+              <Group align="center" gap={4} wrap="nowrap">
+                <LanguageIcon lang={lang} />
+                <Text component="span" fw={700}>
+                  {name}
+                </Text>
+                {userInfo.githubName && (
+                  <Text
+                    component="a"
+                    href={`https://github.com/${userInfo.githubName}`}
+                    title={i18next.t('Github account')}
+                    target="_blank"
+                    rel="noreferrer"
+                    c="white"
+                    ml="sm"
+                  >
+                    <FontAwesomeIcon icon={['fab', 'github']} />
+                  </Text>
+                )}
+              </Group>
+              {clan && (
+                <Text c="dimmed" fz="sm">
+                  {clan}
+                </Text>
+              )}
+            </Stack>
+          </Group>
+          <Group gap={4} wrap="nowrap">
+            <ActionIcon
+              variant="transparent"
+              title={i18next.t('play active game')}
+              c={activeGameId ? 'blue' : 'dimmed'}
+              onClick={handlePlayClick}
+              disabled={!activeGameId}
+            >
+              <FontAwesomeIcon icon="play" />
+            </ActionIcon>
+            <ActionIcon
+              variant="transparent"
+              title={i18next.t('follow user')}
+              c={followId === userInfo.id ? 'red' : 'blue'}
+              onClick={toggleFollowClick}
+            >
+              <FontAwesomeIcon icon="binoculars" />
+            </ActionIcon>
+          </Group>
+        </Group>
+        <StatsRow
+          items={[
+            { key: 'place', label: i18next.t('Place'), value: rank ?? '####' },
+            { key: 'points', label: i18next.t('Points'), value: points ?? '####' },
+            { key: 'rating', label: i18next.t('Rating'), value: rating ?? '####' },
+          ]}
+        />
+        {data && (
+          <>
+            <StatsRow
+              items={tournamentGrades.slice(0, 3).map(({ key, label }) => ({
+                key,
+                label,
+                value: tournamentsStats[key] ?? 0,
+              }))}
+            />
+            <StatsRow
+              items={tournamentGrades.slice(3, 6).map(({ key, label }) => ({
+                key,
+                label,
+                value: tournamentsStats[key] ?? 0,
+              }))}
+            />
             <StatsRow
               items={[
-                { key: 'place', label: i18next.t('Place'), value: rank ?? '####' },
-                { key: 'points', label: i18next.t('Points'), value: points ?? '####' },
-                { key: 'rating', label: i18next.t('Rating'), value: rating ?? '####' },
+                { key: 'won', label: i18next.t('Won'), value: gameStats.won },
+                { key: 'lost', label: i18next.t('Lost'), value: gameStats.lost },
+                { key: 'gaveUp', label: i18next.t('GaveUp'), value: gameStats.gaveUp },
               ]}
             />
-            {data && (
-              <>
-                <StatsRow
-                  items={tournamentGrades.slice(0, 3).map(({ key, label }) => ({
-                    key,
-                    label,
-                    value: tournamentsStats[key] ?? 0,
-                  }))}
-                />
-                <StatsRow
-                  items={tournamentGrades.slice(3, 6).map(({ key, label }) => ({
-                    key,
-                    label,
-                    value: tournamentsStats[key] ?? 0,
-                  }))}
-                />
-                <StatsRow
-                  items={[
-                    { key: 'won', label: i18next.t('Won'), value: gameStats.won },
-                    { key: 'lost', label: i18next.t('Lost'), value: gameStats.lost },
-                    { key: 'gaveUp', label: i18next.t('GaveUp'), value: gameStats.gaveUp },
-                  ]}
-                />
-              </>
-            )}
-          </div>
-        </div>
-      </div>
+          </>
+        )}
+      </Stack>
       {!data ? <Loading small /> : <UserAchievements achievements={data.achievements} />}
-    </div>
+    </Box>
   );
 }
 

From c09371a7550988c426028fa1c411a4416896891d Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 18:43:35 +0300
Subject: [PATCH 14/46] Convert SideScrollControls to Mantine (Phase 2)

Swap Bootstrap positioning/overflow utilities (position-*, h-100, z-3,
start-0/end-0/top-0, d-block/d-none, pb-2) for Mantine Box/Flex + style
props, and the icon-only scroll btns for UnstyledButton. Gradient
cb-left/right-scroll-control design classes are kept.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  7 ++-
 .../widgets/components/SideScrollControls.tsx | 61 ++++++++++---------
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 12c33c826..8d5fa79da 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,12 +116,15 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (24 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (25 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
 `ChatHeader`, `Message`, `Messages`, `TournamentDescription` (layout only —
-its `.card.cb-card` ranking panel is left as Bootstrap; see below), and the
+its `.card.cb-card` ranking panel is left as Bootstrap; see below),
+`SideScrollControls` (positioning/overflow utilities → `Box`/`Flex` +
+`pos`/`top`/`left`/`right`/`display` style props; icon `btn`s → `UnstyledButton`;
+gradient `cb-*-scroll-control` design classes kept), and the
 `UserInfo` / `UserName` / `UserLabel` / `UserStats` cluster. Plus the
 theme border-token work (gotcha #7 / `theme.ts`). The chat cluster is
 effectively done.
diff --git a/apps/codebattle/assets/js/widgets/components/SideScrollControls.tsx b/apps/codebattle/assets/js/widgets/components/SideScrollControls.tsx
index 021d8bc63..9da00b3f4 100644
--- a/apps/codebattle/assets/js/widgets/components/SideScrollControls.tsx
+++ b/apps/codebattle/assets/js/widgets/components/SideScrollControls.tsx
@@ -9,12 +9,10 @@ import React, {
 
 import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cn from 'classnames';
+import { Box, Flex, UnstyledButton } from '@mantine/core';
 import noop from 'lodash/noop';
 
 const delta = 10;
-const commonClassName = 'position-relative overflow-auto';
-const commonControllsClassName = 'position-absolute h-100 z-3';
 
 interface HorizontalScrollControlsProps {
   children: ReactNode[];
@@ -83,36 +81,41 @@ function HorizontalScrollControls({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const leftControlClassName = cn(commonControllsClassName, 'cb-left-scroll-control pr-2 start-0', {
-    'd-block': showLeftControl,
-    'd-none': !showLeftControl,
-  });
-
-  const rightControlClassName = cn(
-    commonControllsClassName,
-    'cb-right-scroll-control pl-2 top-0 end-0',
-    {
-      'd-block': showRightControl,
-      'd-none': !showRightControl,
-    },
-  );
-
   return (
-    <div className={cn(commonClassName, className)}>
-      <div ref={leftButtonRef} className={leftControlClassName}>
-        <button type="button" className="btn border-0 p-2 h-100" onClick={handleScrollItemsLeft}>
+    <Box pos="relative" className={className} style={{ overflow: 'auto' }}>
+      <Box
+        ref={leftButtonRef}
+        pos="absolute"
+        h="100%"
+        left={0}
+        pr="sm"
+        display={showLeftControl ? 'block' : 'none'}
+        className="cb-left-scroll-control"
+        style={{ zIndex: 3 }}
+      >
+        <UnstyledButton p="sm" h="100%" onClick={handleScrollItemsLeft}>
           <FontAwesomeIcon icon={faChevronLeft} />
-        </button>
-      </div>
-      <div ref={scrolledListRef} onScroll={handleScroll} className="d-flex pb-2 overflow-auto">
+        </UnstyledButton>
+      </Box>
+      <Flex ref={scrolledListRef} onScroll={handleScroll} pb="sm" style={{ overflow: 'auto' }}>
         {children}
-      </div>
-      <div ref={rightButtonRef} className={rightControlClassName}>
-        <button type="button" className="btn border-0 p-2 h-100" onClick={handleScrollItemsRight}>
+      </Flex>
+      <Box
+        ref={rightButtonRef}
+        pos="absolute"
+        h="100%"
+        top={0}
+        right={0}
+        pl="sm"
+        display={showRightControl ? 'block' : 'none'}
+        className="cb-right-scroll-control"
+        style={{ zIndex: 3 }}
+      >
+        <UnstyledButton p="sm" h="100%" onClick={handleScrollItemsRight}>
           <FontAwesomeIcon icon={faChevronRight} />
-        </button>
-      </div>
-    </div>
+        </UnstyledButton>
+      </Box>
+    </Box>
   );
 }
 

From c7eebf98445c4bcf32acbe5b3134c5cb69d84390 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 18:54:08 +0300
Subject: [PATCH 15/46] Convert ScheduleNavigationBar to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap d-flex→Flex and pr-2/pl-2 spacing→Group gap. Replace the
div role="button" .btn-link prev/next controls with real
UnstyledButton c="white", dropping the manual role/tabIndex/onKeyPress
a11y shims and the custom .btn-link{color:white} override.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 11 ++++-
 .../components/ScheduleNavigationBar.tsx      | 42 ++++++++-----------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 8d5fa79da..fd5b7bb25 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,7 +116,7 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (25 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (26 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
@@ -124,11 +124,18 @@ shared leaf components in `widgets/components/`.
 its `.card.cb-card` ranking panel is left as Bootstrap; see below),
 `SideScrollControls` (positioning/overflow utilities → `Box`/`Flex` +
 `pos`/`top`/`left`/`right`/`display` style props; icon `btn`s → `UnstyledButton`;
-gradient `cb-*-scroll-control` design classes kept), and the
+gradient `cb-*-scroll-control` design classes kept),
+`ScheduleNavigationBar` (`d-flex`→`Flex`, `pr-2`/`pl-2`→`Group gap`; the
+`div role="button" .btn-link` prev/next controls → real `UnstyledButton c="white"`,
+dropping the manual `role`/`tabIndex`/`onKeyPress` a11y shims and the custom
+`.btn-link{color:white}` override), and the
 `UserInfo` / `UserName` / `UserLabel` / `UserStats` cluster. Plus the
 theme border-token work (gotcha #7 / `theme.ts`). The chat cluster is
 effectively done.
 
+Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
+`cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
+
 The `User*` cluster keeps the string `className`/`linkClassName` **passthrough
 props** (used by ~12 page callers that still pass Bootstrap color classes like
 `text-white`/`text-secondary`/`text-decoration-none`); those leftovers get
diff --git a/apps/codebattle/assets/js/widgets/components/ScheduleNavigationBar.tsx b/apps/codebattle/assets/js/widgets/components/ScheduleNavigationBar.tsx
index 4d96734ce..3ac006c8c 100644
--- a/apps/codebattle/assets/js/widgets/components/ScheduleNavigationBar.tsx
+++ b/apps/codebattle/assets/js/widgets/components/ScheduleNavigationBar.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
+import { Flex, Group, UnstyledButton } from '@mantine/core';
+
 import dayjs from '../../i18n/dayjs';
 import { localizeTournamentName } from '../utils/localizeTournamentName';
 
@@ -54,34 +56,26 @@ function ScheduleNavigationTab({ className, events, event, setEvent }: ScheduleN
 
   return (
     <div className={className}>
-      <div className="d-flex">
+      <Flex>
         {prev && (
-          <div
-            role="button"
-            onClick={onClickPrev}
-            onKeyPress={() => {}}
-            className="btn-link"
-            tabIndex={0}
-          >
-            <span className="pr-2">{'<<'}</span>
-            {getEventTitle(prev)}
-          </div>
+          <UnstyledButton c="white" onClick={onClickPrev}>
+            <Group gap="sm" wrap="nowrap">
+              <span>{'<<'}</span>
+              <span>{getEventTitle(prev)}</span>
+            </Group>
+          </UnstyledButton>
         )}
-      </div>
-      <div className="d-flex">
+      </Flex>
+      <Flex>
         {next && (
-          <div
-            role="button"
-            onClick={onClickNext}
-            onKeyPress={() => {}}
-            className="btn-link"
-            tabIndex={0}
-          >
-            {getEventTitle(next)}
-            <span className="pl-2">{'>>'}</span>
-          </div>
+          <UnstyledButton c="white" onClick={onClickNext}>
+            <Group gap="sm" wrap="nowrap">
+              <span>{getEventTitle(next)}</span>
+              <span>{'>>'}</span>
+            </Group>
+          </UnstyledButton>
         )}
-      </div>
+      </Flex>
     </div>
   );
 }

From 35ec615346c24b1c6d4d59480e942e270ee73fb7 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 19:04:04 +0300
Subject: [PATCH 16/46] Convert Rooms to Mantine + port cb-btn-secondary hover
 to theme (Phase 2)

Port .cb-btn-secondary's lighten-on-hover into the theme via
Button.extend vars keyed on color="cbSecondary", then drop the
Bootstrap button classes from Rooms so it renders as pure Mantine.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 36 ++++++++++++++-----
 .../assets/js/widgets/components/Rooms.tsx    | 11 ++----
 apps/codebattle/assets/js/widgets/ui/theme.ts | 18 +++++++++-
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index fd5b7bb25..e862832d7 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -130,8 +130,22 @@ gradient `cb-*-scroll-control` design classes kept),
 dropping the manual `role`/`tabIndex`/`onKeyPress` a11y shims and the custom
 `.btn-link{color:white}` override), and the
 `UserInfo` / `UserName` / `UserLabel` / `UserStats` cluster. Plus the
-theme border-token work (gotcha #7 / `theme.ts`). The chat cluster is
-effectively done.
+theme border-token work (gotcha #7 / `theme.ts`) and the first slice of the
+**button-theming pass**: `.cb-btn-secondary`'s lighten-on-hover
+(`$cb-secondary-hover-background` #4c5369) is ported into the theme via
+`components.Button = Button.extend({ vars })` keyed on `color="cbSecondary"`
+(Mantine's `--button-hover` var). `cbSuccess` needs no override — its tuple
+index 7 already equals `$cb-hovered-success`. With that in place `Rooms` is now
+**pure Mantine**: dropped `rounded-top` + `cb-btn-secondary` from the target
+`Button` (radius now comes from `defaultRadius`, hover from the theme), removed
+the pointless `mr-2` span wrapper, and dropped `h-auto` from the dropdown. The
+chat cluster is effectively done.
+
+> Blast radius of the theme `vars` override: it only changes buttons that carry
+> `color="cbSecondary"` **and** have already dropped the `cb-btn-secondary`
+> class (unlayered Bootstrap still wins where the class remains). Today that is
+> only `Rooms`; the other ~9 `cb-btn-secondary` consumers are unaffected until
+> their class is dropped in later slices.
 
 Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
 `cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
@@ -145,13 +159,17 @@ props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 `cb-rounded`, `x-username-truncated`, `cb-opacity-50` are kept.
 
 **Remaining leaves — each needs a decision or a browser pass, not a plain swap:**
-- **Button/alert/card theming (port `cb-*` → theme first):** `Rooms` button
-  (`cb-btn-secondary` + `rounded-top`, hits gotcha #7), `FeedbackAlertNotification`
-  (`alert-dark-theme` set), the `cb-card` / `cb-bg-highlight-panel` leftovers
-  (e.g. inside `TournamentDescription`).
-- **Non-Mantine libs:** `LanguagePickerView` (react-select), `SoundToggle` /
-  `DropdownMenuDefault` (Mantine `Menu` items), `EmojiTooltip` (native
-  `<select size=4>`).
+- **Button/alert/card theming:** `FeedbackAlertNotification` (`alert-dark-theme`
+  set — coupled to per-variant `.alert-*` gradients, wants a CSS-module home),
+  the `cb-card` / `cb-bg-highlight-panel` leftovers (e.g. inside
+  `TournamentDescription`). (`Rooms` done — see above; remaining
+  `cb-btn-secondary` call sites drop their class as their pages convert, now
+  that the hover is in the theme.)
+- **Non-Mantine libs:** `LanguagePickerView` (react-select), `SoundToggle`
+  (its `menu` variant renders a Bootstrap `dropdown-item` **inside a server
+  heex dropdown** — that half is Phase 3, not a React-side swap), `EmojiTooltip`
+  (native `<select size=4>`). `DropdownMenuDefault` is **dead code** (no
+  consumers anywhere in `js/`) — delete it rather than convert.
 - **Larger:** `AccordeonBox`, `ChatContextMenu`, `InvitesContainer` /
   `InvitesList`, `SeasonLeaderboard`, `PlayerInsightsModal`.
 
diff --git a/apps/codebattle/assets/js/widgets/components/Rooms.tsx b/apps/codebattle/assets/js/widgets/components/Rooms.tsx
index 58741b39b..f72ef8cd9 100644
--- a/apps/codebattle/assets/js/widgets/components/Rooms.tsx
+++ b/apps/codebattle/assets/js/widgets/components/Rooms.tsx
@@ -20,17 +20,12 @@ export default function Rooms({ disabled }: RoomsProps) {
   return (
     <Menu disabled={disabled} width="target">
       <Menu.Target>
-        <Button
-          className="rounded-top cb-btn-secondary"
-          color="cbSecondary"
-          id="dropdown-rooms"
-          disabled={disabled}
-        >
-          <span className="mr-2">{i18next.t(activeRoom.name)}</span>
+        <Button color="cbSecondary" id="dropdown-rooms" disabled={disabled}>
+          {i18next.t(activeRoom.name)}
         </Button>
       </Menu.Target>
 
-      <Menu.Dropdown className="h-auto cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat cb-bg-highlight-panel">
+      <Menu.Dropdown className="cb-overflow-x-hidden cb-scrollable-menu-dropdown-chat cb-bg-highlight-panel">
         {rooms.map((room) => (
           <Menu.Item
             className="cb-text"
diff --git a/apps/codebattle/assets/js/widgets/ui/theme.ts b/apps/codebattle/assets/js/widgets/ui/theme.ts
index 6d944485a..c07183333 100644
--- a/apps/codebattle/assets/js/widgets/ui/theme.ts
+++ b/apps/codebattle/assets/js/widgets/ui/theme.ts
@@ -1,4 +1,9 @@
-import { createTheme, type CSSVariablesResolver, type MantineColorsTuple } from '@mantine/core';
+import {
+  Button,
+  createTheme,
+  type CSSVariablesResolver,
+  type MantineColorsTuple,
+} from '@mantine/core';
 
 // Brand accent — the app's `$orange` (rgba(238, 55, 55, 0.76) ≈ #ee3737).
 // Mantine needs a 10-shade tuple; index 6 is the default filled shade.
@@ -60,6 +65,17 @@ export const theme = createTheme({
     lg: '1.5rem',
     xl: '3rem',
   },
+  components: {
+    // Port of `.cb-btn-secondary`: `color="cbSecondary"` already fills index 6
+    // (#3a3f50), but Mantine darkens on hover while the app's design *lightens*
+    // to `$cb-secondary-hover-background`. Restore that so buttons no longer
+    // need the Bootstrap class. cbSuccess needs no override — its tuple index 7
+    // already equals `$cb-hovered-success`.
+    Button: Button.extend({
+      vars: (_theme, props) =>
+        props.color === 'cbSecondary' ? { root: { '--button-hover': '#4c5369' } } : { root: {} },
+    }),
+  },
 });
 
 // Align Mantine's default border (used by `withBorder`, inputs, dividers, …)

From b71cb7619afa176e10a3bdea8c8c11bcf8c1c1db Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 19:13:45 +0300
Subject: [PATCH 17/46] Convert Invites cluster to Mantine, drop dead
 DropdownMenuDefault (Phase 2)

Convert InvitesList + InvitesContainer layout/buttons/badges to Mantine
primitives (Flex/Group, Button variant="outline", Badge, VisuallyHidden),
keeping cb-btn-outline-secondary so the secondary buttons' look is
preserved. Wrap the empty-invites Localization test in MantineTestProvider.
Delete DropdownMenuDefault, which had no consumers anywhere in js/.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 19 +++--
 .../assets/js/__tests__/Localization.test.tsx |  4 +-
 .../components/DropdownMenuDefault.tsx        | 45 -----------
 .../widgets/components/InvitesContainer.tsx   | 47 +++++++-----
 .../js/widgets/components/InvitesList.tsx     | 74 +++++++++++++------
 5 files changed, 95 insertions(+), 94 deletions(-)
 delete mode 100644 apps/codebattle/assets/js/widgets/components/DropdownMenuDefault.tsx

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index e862832d7..35058ad4d 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,7 +116,7 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (26 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (29 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
@@ -147,6 +147,15 @@ chat cluster is effectively done.
 > only `Rooms`; the other ~9 `cb-btn-secondary` consumers are unaffected until
 > their class is dropped in later slices.
 
+Also done: the **Invites cluster** (`InvitesList` + `InvitesContainer`) —
+layout → `Flex`/`Group`, native `btn`s → Mantine `<Button variant="outline">`
+(`size="compact-sm"`; keeping `cb-btn-outline-secondary` so the secondary
+buttons' look is preserved, `btn-outline-danger` → `color="red"`), the
+`d-none`/`sr-only` a11y spans → `<VisuallyHidden>`, and the two absolutely-
+positioned `badge badge-danger` notification overlays → Mantine `<Badge
+color="red" pos="absolute">` (size/shape differs from the BS badge — flag in QA).
+Icons moved to `leftSection`. `DropdownMenuDefault` deleted as dead code.
+
 Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
 `cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
 
@@ -168,10 +177,10 @@ props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 - **Non-Mantine libs:** `LanguagePickerView` (react-select), `SoundToggle`
   (its `menu` variant renders a Bootstrap `dropdown-item` **inside a server
   heex dropdown** — that half is Phase 3, not a React-side swap), `EmojiTooltip`
-  (native `<select size=4>`). `DropdownMenuDefault` is **dead code** (no
-  consumers anywhere in `js/`) — delete it rather than convert.
-- **Larger:** `AccordeonBox`, `ChatContextMenu`, `InvitesContainer` /
-  `InvitesList`, `SeasonLeaderboard`, `PlayerInsightsModal`.
+  (native `<select size=4>`). `DropdownMenuDefault` was **dead code** (no
+  consumers anywhere in `js/`) — **deleted**, not converted.
+- **Larger:** `AccordeonBox`, `ChatContextMenu`, `SeasonLeaderboard`,
+  `PlayerInsightsModal`.
 
 **Verification gap:** slices are toolchain-verified only. Headless browser
 verification isn't feasible here (auth + live game/tournament state), so all
diff --git a/apps/codebattle/assets/js/__tests__/Localization.test.tsx b/apps/codebattle/assets/js/__tests__/Localization.test.tsx
index 60e171f8f..27742fbf8 100644
--- a/apps/codebattle/assets/js/__tests__/Localization.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/Localization.test.tsx
@@ -68,7 +68,9 @@ test('localizes the empty invites state', () => {
 
   render(
     <Provider store={store}>
-      <InvitesList list={[]} currentUserId={1} />
+      <MantineTestProvider>
+        <InvitesList list={[]} currentUserId={1} />
+      </MantineTestProvider>
     </Provider>,
   );
 
diff --git a/apps/codebattle/assets/js/widgets/components/DropdownMenuDefault.tsx b/apps/codebattle/assets/js/widgets/components/DropdownMenuDefault.tsx
deleted file mode 100644
index 31d248e50..000000000
--- a/apps/codebattle/assets/js/widgets/components/DropdownMenuDefault.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-
-import i18n from '../../i18n';
-import levelToClass from '../config/levelToClass';
-
-type Level = keyof typeof levelToClass;
-
-interface DropdownItemProps {
-  level: Level;
-  setLevel: (level: Level) => void;
-  setLevelClass: (levelClass: string) => void;
-}
-
-function DropdownItem({ level, setLevel, setLevelClass }: DropdownItemProps) {
-  return (
-    <button
-      className="dropdown-item"
-      type="button"
-      onClick={() => {
-        setLevel(level);
-        setLevelClass(levelToClass[level]);
-      }}
-    >
-      <span className={`badge badge-pill badge-${levelToClass[level]} mr-1`}>&nbsp;</span>
-      {i18n.t(level)}
-    </button>
-  );
-}
-
-interface DropdownMenuDefaultProps {
-  currentLevel: Level;
-  setLevel: (level: Level) => void;
-  setLevelClass: (levelClass: string) => void;
-}
-
-const orderedLevels = Object.keys(levelToClass) as Level[];
-
-const DropdownMenuDefault = ({ currentLevel, setLevel, setLevelClass }: DropdownMenuDefaultProps) =>
-  orderedLevels
-    .filter((level) => level !== currentLevel)
-    .map((level) => (
-      <DropdownItem key={level} level={level} setLevel={setLevel} setLevelClass={setLevelClass} />
-    ));
-
-export default DropdownMenuDefault;
diff --git a/apps/codebattle/assets/js/widgets/components/InvitesContainer.tsx b/apps/codebattle/assets/js/widgets/components/InvitesContainer.tsx
index a2d2d291f..3fead22a5 100644
--- a/apps/codebattle/assets/js/widgets/components/InvitesContainer.tsx
+++ b/apps/codebattle/assets/js/widgets/components/InvitesContainer.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useState } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Popover, UnstyledButton } from '@mantine/core';
+import { Badge, Button, Group, Popover, UnstyledButton, VisuallyHidden } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { unfollowUser, followUser, pauseFollow } from '@/middlewares/Main';
@@ -79,46 +79,55 @@ function InvitesContainer() {
       radius="md"
     >
       <Popover.Target>
-        <UnstyledButton onClick={() => setOpened((o) => !o)} className="attachment mx-2">
+        <UnstyledButton onClick={() => setOpened((o) => !o)} className="attachment" mx="sm">
           <img alt={i18n.t('Invites')} src={fightSvg} style={{ width: '46px', height: '46px' }} />
           {followId && (
-            <span className="position-absolute badge badge-danger" style={{ top: '74%' }}>
+            <Badge color="red" pos="absolute" style={{ top: '74%' }}>
               <FontAwesomeIcon icon={followPaused ? 'pause' : 'binoculars'} />
-            </span>
+            </Badge>
           )}
           {invites.length !== 0 ? (
             <>
-              <span className="position-absolute badge badge-danger">{invites.length}</span>
-              <span className="sr-only">{i18n.t('Your invites')}</span>
+              <Badge color="red" pos="absolute">
+                {invites.length}
+              </Badge>
+              <VisuallyHidden>{i18n.t('Your invites')}</VisuallyHidden>
             </>
           ) : (
-            <span className="sr-only">{i18n.t('No invites')}</span>
+            <VisuallyHidden>{i18n.t('No invites')}</VisuallyHidden>
           )}
         </UnstyledButton>
       </Popover.Target>
       <Popover.Dropdown className="cb-bg-panel cb-border-color cb-text cb-rounded" p={0}>
         {followId && (
-          <div className="d-flex justify-content-center align-items-center p-2">
+          <Group justify="center" p="sm">
             {followName
               ? i18n.t('You are following %{followName}', { followName })
               : i18n.t('You are following ID: %{followId}', { followId })}
-            <button
-              type="button"
-              className="btn btn-sm btn-outline-secondary cb-btn-outline-secondary cb-rounded mx-1"
+            <Button
+              variant="outline"
+              color="cbSecondary"
+              className="cb-btn-outline-secondary"
+              size="compact-sm"
+              radius="md"
+              mx="xs"
+              leftSection={<FontAwesomeIcon icon={followPaused ? 'play' : 'pause'} />}
               onClick={togglePausedfollowClick}
             >
-              <FontAwesomeIcon icon={followPaused ? 'play' : 'pause'} className="mr-1" />
               {followPaused ? i18n.t('Unpause') : i18n.t('Pause')}
-            </button>
-            <button
-              type="button"
-              className="btn btn-sm btn-outline-danger cb-rounded mx-1"
+            </Button>
+            <Button
+              variant="outline"
+              color="red"
+              size="compact-sm"
+              radius="md"
+              mx="xs"
+              leftSection={<FontAwesomeIcon icon="binoculars" />}
               onClick={handleUnfollowClick}
             >
-              <FontAwesomeIcon icon="binoculars" className="mr-1" />
               {i18n.t('Unfollow')}
-            </button>
-          </div>
+            </Button>
+          </Group>
         )}
         <InvitesList
           followId={followId}
diff --git a/apps/codebattle/assets/js/widgets/components/InvitesList.tsx b/apps/codebattle/assets/js/widgets/components/InvitesList.tsx
index 8b9b38b65..6c3a07ee6 100644
--- a/apps/codebattle/assets/js/widgets/components/InvitesList.tsx
+++ b/apps/codebattle/assets/js/widgets/components/InvitesList.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Box, Button, Flex, Text } from '@mantine/core';
 import { useDispatch } from 'react-redux';
 
 import { type AppDispatch } from '@/slices';
@@ -29,7 +30,11 @@ interface InvitesListProps {
 }
 
 function NoInvites() {
-  return <div className="p-2 text-center">{i18n.t('No Invites')}</div>;
+  return (
+    <Text p="sm" ta="center">
+      {i18n.t('No Invites')}
+    </Text>
+  );
 }
 
 function InvitesList({ list, followId, currentUserId }: InvitesListProps) {
@@ -51,48 +56,69 @@ function InvitesList({ list, followId, currentUserId }: InvitesListProps) {
       ) => number,
     )
     .map(({ id, creatorId, recipientId, creator, recipient, gameParams }) => (
-      <div key={id} className="d-flex align-items-center p-2">
-        <div className="mx-1">
+      <Flex key={id} align="center" p="sm">
+        <Box mx="xs">
           <GameLevelBadge level={gameParams.level} />
-        </div>
+        </Box>
         {currentUserId === recipientId && (
           <>
-            <span className="text-truncate small mx-2 mr-auto">
-              <span className="font-weight-bold">{creator.name}</span>
-              <span className="mr-2"> {i18n.t('invited you')}</span>
-            </span>
-            <button
-              type="submit"
-              className="btn btn-outline-danger cb-rounded small px-1 mx-1"
+            <Text truncate size="sm" mx="sm" mr="auto">
+              <Text span fw={700}>
+                {creator.name}
+              </Text>
+              <Text span mr="sm">
+                {' '}
+                {i18n.t('invited you')}
+              </Text>
+            </Text>
+            <Button
+              variant="outline"
+              color="red"
+              radius="md"
+              size="compact-sm"
+              px="xs"
+              mx="xs"
               onClick={() => dispatch(acceptInvite(id))}
             >
               {i18n.t('Accept')}
-            </button>
-            <button
-              type="submit"
-              className="btn btn-outline-secondary cb-btn-outline-secondary cb-rounded small px-1 mx-1"
+            </Button>
+            <Button
+              variant="outline"
+              color="cbSecondary"
+              className="cb-btn-outline-secondary"
+              radius="md"
+              size="compact-sm"
+              px="xs"
+              mx="xs"
               onClick={() => dispatch(declineInvite(id, creator.name))}
             >
               {i18n.t('Decline')}
-            </button>
+            </Button>
           </>
         )}
         {currentUserId === creatorId && (
           <>
-            <span className="text-truncate small ml-2 mr-auto">
+            <Text truncate size="sm" ml="sm" mr="auto">
               {i18n.t('You invited ')}
-              <span className="font-weight-bold mr-2">{recipient.name}</span>
-            </span>
-            <button
-              type="submit"
-              className="btn btn-outline-secondary cb-btn-outline-secondary cb-rounded small mx-1 px-1"
+              <Text span fw={700} mr="sm">
+                {recipient.name}
+              </Text>
+            </Text>
+            <Button
+              variant="outline"
+              color="cbSecondary"
+              className="cb-btn-outline-secondary"
+              radius="md"
+              size="compact-sm"
+              px="xs"
+              mx="xs"
               onClick={() => dispatch(cancelInvite(id, recipient.name))}
             >
               {i18n.t('Cancel')}
-            </button>
+            </Button>
           </>
         )}
-      </div>
+      </Flex>
     ));
 }
 

From 0414a11552df50eec6d22fba9fe3fc782c951bc0 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 19:47:06 +0300
Subject: [PATCH 18/46] Convert AccordeonBox to Mantine, drop dead Menu (Phase
 2)

Only SubMenu + Item are rendered (by game Output), so delete the dead
root/Menu/renderFirstAssert/getMessage and collapse the export to a plain
namespace. Convert the live parts to Mantine (Box/Flex/Badge/Button/Collapse/
Text), preserving the replayer font zoom via a fontSize->rem map.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  26 +-
 .../js/widgets/components/AccordeonBox.tsx    | 281 +++++-------------
 2 files changed, 99 insertions(+), 208 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 35058ad4d..311eae2f2 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,7 +116,7 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (29 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (30 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
@@ -156,6 +156,19 @@ positioned `badge badge-danger` notification overlays → Mantine `<Badge
 color="red" pos="absolute">` (size/shape differs from the BS badge — flag in QA).
 Icons moved to `leftSection`. `DropdownMenuDefault` deleted as dead code.
 
+Also done: **`AccordeonBox`** (the game test-output panel, consumed by
+`pages/game/Output.tsx`). Only `SubMenu` + `Item` were actually rendered, so
+the dead root `.accordion` component, `Menu`, `renderFirstAssert`, and
+`getMessage` were **deleted** and the export collapsed to a plain
+`{ Item, SubMenu }` namespace. The live parts went to Mantine: `list-group-item`
+→ `Box` (dark `cb-bg-highlight-panel` kept, top/bottom borders via
+`--mantine-color-default-border`), `d-flex` → `Flex`, `badge badge-*` →
+`<Badge>` (status→Mantine color map), the STDOUT toggle `btn` → `<Button
+variant="outline">` driving a Mantine `<Collapse>` (⚠️ this Mantine build's
+`Collapse` prop is **`expanded`**, not `in`), and the Bootstrap `h1`–`h5` font
+zoom → a numeric-`fontSize`→rem map applied via `fz` / `--badge-fz` (replayer
+zoom fidelity is the main thing to eyeball in QA).
+
 Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
 `cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
 
@@ -177,10 +190,13 @@ props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 - **Non-Mantine libs:** `LanguagePickerView` (react-select), `SoundToggle`
   (its `menu` variant renders a Bootstrap `dropdown-item` **inside a server
   heex dropdown** — that half is Phase 3, not a React-side swap), `EmojiTooltip`
-  (native `<select size=4>`). `DropdownMenuDefault` was **dead code** (no
-  consumers anywhere in `js/`) — **deleted**, not converted.
-- **Larger:** `AccordeonBox`, `ChatContextMenu`, `SeasonLeaderboard`,
-  `PlayerInsightsModal`.
+  (native `<select size=4>` acting as a keyboard-nav listbox — the Bootstrap
+  `custom-select` styling has no clean Mantine equivalent without rewriting the
+  interaction), `ChatContextMenu` (built on `react-contexify`, not Mantine — only
+  utility classes to strip, no primitive to swap to). `DropdownMenuDefault` was
+  **dead code** (no consumers anywhere in `js/`) — **deleted**, not converted.
+- **Larger:** `SeasonLeaderboard`, `PlayerInsightsModal` (each ~800–1100 lines;
+  one focused slice apiece).
 
 **Verification gap:** slices are toolchain-verified only. Headless browser
 verification isn't feasible here (auth + live game/tournament state), so all
diff --git a/apps/codebattle/assets/js/widgets/components/AccordeonBox.tsx b/apps/codebattle/assets/js/widgets/components/AccordeonBox.tsx
index ccf744066..843751082 100644
--- a/apps/codebattle/assets/js/widgets/components/AccordeonBox.tsx
+++ b/apps/codebattle/assets/js/widgets/components/AccordeonBox.tsx
@@ -1,14 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@mantine/core';
-import cn from 'classnames';
-import uniqueId from 'lodash/uniqueId';
+import { Badge, Box, Button, Collapse, Flex, Text, Tooltip } from '@mantine/core';
 
 import i18n from '../../i18n';
-import statusColorMap from '../config/statusColor';
-
-const color = statusColorMap as Record<string, string>;
 
 interface Assert {
   id?: string | number;
@@ -26,122 +21,19 @@ interface Assert {
   output?: string;
 }
 
-interface ResultData {
-  status: string;
-}
-
-const getMessage = (status: string) => {
-  switch (status) {
-    case 'error':
-      return i18n.t('Solution cannot be executed');
-    case 'failure':
-      return i18n.t('Test failed');
-    case 'ok':
-      return i18n.t('Yay! All tests passed!');
-    default:
-      return i18n.t('Opponent tests');
-  }
+// Maps a status color (info/danger/success/secondary) to the nearest Mantine color.
+const STATUS_COLORS: Record<string, string> = {
+  success: 'green',
+  danger: 'red',
+  info: 'blue',
+  secondary: 'gray',
 };
 
-interface AccordeonBoxProps {
-  children: React.ReactNode;
-}
-
-interface AccordeonBoxComponent extends React.FC<AccordeonBoxProps> {
-  Item: typeof Item;
-  Menu: typeof Menu;
-  SubMenu: typeof SubMenu;
-}
-
-const AccordeonBox = (({ children }: AccordeonBoxProps) => {
-  return (
-    <div className="accordion border-top cb-border-color" id="accordionExample">
-      {children}
-    </div>
-  );
-}) as AccordeonBoxComponent;
-
-const renderFirstAssert = (firstAssert: Assert) => (
-  <AccordeonBox.SubMenu
-    statusColor={color[firstAssert.status]}
-    assert={firstAssert}
-    hasOutput={firstAssert.output}
-  >
-    <AccordeonBox.Item output={firstAssert.output} />
-  </AccordeonBox.SubMenu>
-);
-
-interface MenuProps {
-  children: React.ReactNode;
-  firstAssert?: Assert;
-  resultData: ResultData;
-  assertsCount: number;
-  successCount: number;
-}
-
-function Menu({ children, firstAssert, resultData, assertsCount, successCount }: MenuProps) {
-  const [show, setShow] = useState(true);
-  const isSyntaxError = resultData.status === 'error';
-  const statusColor = color[resultData.status];
-  const message = getMessage(resultData.status);
-  const classCollapse = cn('collapse', { show });
-  const handleClick = () => {
-    setShow(!show);
-  };
-  const uniqIndex = uniqueId('heading');
-  const percent = (100 * successCount) / assertsCount;
-  const assertsStatusMessage = i18n.t(
-    'You passed %{successCount} from %{assertsCount} asserts. (%{percent}%)',
-    {
-      successCount,
-      assertsCount,
-      percent,
-    },
-  );
-
-  useEffect(() => {
-    setShow(isSyntaxError);
-  }, [isSyntaxError]);
-
-  return (
-    <div className="card cb-card border-0 rounded-0">
-      {statusColor === 'warning' || statusColor === 'danger' ? (
-        <>
-          <div className="card-header" id={`heading${uniqIndex} `}>
-            <button
-              className="btn btn-sm btn-outline-secondary mr-3"
-              type="button"
-              onClick={handleClick}
-              data-toggle="collapse"
-              aria-expanded="true"
-              aria-controls={`collapse${uniqIndex}`}
-            >
-              {show ? (
-                <FontAwesomeIcon icon="arrow-circle-up" />
-              ) : (
-                <FontAwesomeIcon icon="arrow-circle-down" />
-              )}
-            </button>
-            {!isSyntaxError && (
-              <span className="font-weight-bold small mr-3">{assertsStatusMessage}</span>
-            )}
-            <span className={`badge badge-${statusColor}`}>{message}</span>
-          </div>
-          {firstAssert && renderFirstAssert(firstAssert)}
-        </>
-      ) : (
-        <span className={`badge badge-${statusColor}`}>{message}</span>
-      )}
-      <div
-        id={`collapse${uniqIndex}`}
-        className={classCollapse}
-        aria-labelledby={`heading${uniqIndex}`}
-      >
-        <div className="list-group list-group-flush">{children}</div>
-      </div>
-    </div>
-  );
-}
+// The old markup scaled its typography with Bootstrap heading classes (h1–h5),
+// driven by a numeric `fontSize` zoom (0 = default). Map it to the equivalent
+// rem font-size so the replayer zoom keeps working without those classes.
+const FONT_SIZES = ['', '1.25rem', '1.5rem', '1.75rem', '2rem', '2.5rem'];
+const fontSizeToRem = (fontSize: number) => FONT_SIZES[Math.min(fontSize, 5)] || undefined;
 
 interface SubMenuProps {
   children?: React.ReactNode;
@@ -163,68 +55,57 @@ function SubMenu({
   fontSize = 0,
 }: SubMenuProps) {
   const [isShowLog, setIsShowLog] = useState(true);
-  const classCollapse = cn('collapse', {
-    show: isShowLog,
-  });
 
   const { result = assert.value } = assert;
 
-  const fontClassName = cn({
-    h5: fontSize === 1,
-    h4: fontSize === 2,
-    h3: fontSize === 3,
-    h2: fontSize === 4,
-    h1: fontSize > 4,
-  });
-  const assertClassName = cn('d-block', fontClassName);
+  const fz = fontSizeToRem(fontSize);
+  const mc = STATUS_COLORS[statusColor ?? 'info'] ?? 'blue';
+  const badgeFzStyle = fz ? ({ '--badge-fz': fz } as React.CSSProperties) : undefined;
 
   return (
-    <div className="list-group-item border-left-0 cb-border-color border-right-0 cb-bg-highlight-panel text-white">
+    <Box
+      className="cb-bg-highlight-panel"
+      c="white"
+      style={{
+        padding: '0.75rem 1.25rem',
+        borderTop: '1px solid var(--mantine-color-default-border)',
+        borderBottom: '1px solid var(--mantine-color-default-border)',
+      }}
+    >
       <div id={`heading${uniqIndex}`}>
-        <div>
-          <div className="d-flex align-items-center">
-            {statusColor === 'success' ? (
-              <FontAwesomeIcon
-                className={`text-${statusColor} mr-2 ${fontClassName}`}
-                icon="check-circle"
-              />
-            ) : (
-              <FontAwesomeIcon
-                className={`text-${statusColor} mr-2 ${fontClassName}`}
-                icon="exclamation-circle"
-              />
-            )}
-            <span className={`badge badge-${statusColor} mr-3 ${fontClassName}`}>
-              {assert.status}
-            </span>
-            {executionTime !== undefined && Number(executionTime) !== 0 ? (
-              <Tooltip label={i18n.t('Execution Time')} position="top" withArrow>
-                <span className={`badge badge-secondary mr-3 ${fontClassName}`}>
-                  {executionTime}
-                </span>
-              </Tooltip>
-            ) : null}
-            {assert.output && (
-              <button
-                className="btn btn-sm btn-outline-info badge rounded-lg"
-                type="button"
-                onClick={() => setIsShowLog(!isShowLog)}
-                data-toggle="collapse"
-                aria-expanded="true"
-                aria-controls={`collapse${uniqIndex}`}
-              >
-                <span className={fontClassName}>
-                  <FontAwesomeIcon
-                    icon={isShowLog ? 'arrow-circle-up' : 'arrow-circle-down'}
-                    className="mr-1"
-                  />
-                  {i18n.t('STDOUT')}
-                </span>
-              </button>
-            )}
-          </div>
-        </div>
-        <pre className="my-1">
+        <Flex align="center">
+          <FontAwesomeIcon
+            icon={statusColor === 'success' ? 'check-circle' : 'exclamation-circle'}
+            color={`var(--mantine-color-${mc}-6)`}
+            style={{ marginRight: 'var(--mantine-spacing-sm)', fontSize: fz }}
+          />
+          <Badge color={mc} mr="md" style={badgeFzStyle}>
+            {assert.status}
+          </Badge>
+          {executionTime !== undefined && Number(executionTime) !== 0 ? (
+            <Tooltip label={i18n.t('Execution Time')} position="top" withArrow>
+              <Badge color="gray" mr="md" style={badgeFzStyle}>
+                {executionTime}
+              </Badge>
+            </Tooltip>
+          ) : null}
+          {assert.output && (
+            <Button
+              variant="outline"
+              color="blue"
+              size="compact-xs"
+              radius="md"
+              style={{ fontSize: fz }}
+              onClick={() => setIsShowLog(!isShowLog)}
+              leftSection={
+                <FontAwesomeIcon icon={isShowLog ? 'arrow-circle-up' : 'arrow-circle-down'} />
+              }
+            >
+              {i18n.t('STDOUT')}
+            </Button>
+          )}
+        </Flex>
+        <Box component="pre" my="xs">
           {(() => {
             const labels = [i18n.t('Receive:'), i18n.t('Expected:'), i18n.t('Arguments:')];
             const width = Math.max(...labels.map((l) => l.length));
@@ -233,24 +114,16 @@ function SubMenu({
             );
             return (
               <>
-                <span className={assertClassName}>{`${receiveLabel} ${result}`}</span>
-                <span className={assertClassName}>{`${expectedLabel} ${assert.expected}`}</span>
-                <span className={assertClassName}>{`${argumentsLabel} ${assert.arguments}`}</span>
+                <Text span display="block" fz={fz}>{`${receiveLabel} ${result}`}</Text>
+                <Text span display="block" fz={fz}>{`${expectedLabel} ${assert.expected}`}</Text>
+                <Text span display="block" fz={fz}>{`${argumentsLabel} ${assert.arguments}`}</Text>
               </>
             );
           })()}
-        </pre>
-        {hasOutput && (
-          <div
-            id={`collapse${uniqIndex}`}
-            className={classCollapse}
-            aria-labelledby={`heading${uniqIndex}`}
-          >
-            {children}
-          </div>
-        )}
+        </Box>
+        {hasOutput && <Collapse expanded={isShowLog}>{children}</Collapse>}
       </div>
-    </div>
+    </Box>
   );
 }
 
@@ -264,22 +137,24 @@ function Item({ output, fontSize = 0 }: ItemProps) {
     return null;
   }
 
-  const fontClassName = cn({
-    h5: fontSize === 1,
-    h4: fontSize === 2,
-    h3: fontSize === 3,
-    h2: fontSize === 4,
-    h1: fontSize > 4,
-  });
+  const fz = fontSizeToRem(fontSize);
 
   return (
-    <div className={`alert text-white mb-0 ${fontClassName}`}>
+    <Box
+      c="white"
+      mb={0}
+      fz={fz}
+      style={{
+        padding: '0.75rem 1.25rem',
+        border: '1px solid transparent',
+        borderRadius: '0.25rem',
+      }}
+    >
       <pre>{output}</pre>
-    </div>
+    </Box>
   );
 }
 
-AccordeonBox.Item = Item;
-AccordeonBox.Menu = Menu;
-AccordeonBox.SubMenu = SubMenu;
+const AccordeonBox = { Item, SubMenu };
+
 export default AccordeonBox;

From 858d9f5f3fce2568b9de4c4ac4f9c2046a886e37 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 19:52:35 +0300
Subject: [PATCH 19/46] Convert FeedbackWidget to Mantine (Phase 2)

Trigger + Type radio buttons -> Mantine Button (filled/outline,
color=cbSecondary), form-group/label/textarea -> Text label + Textarea.
Add explicit tabIndex to the role=radio buttons since oxlint can't infer
focusability of a custom component.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 12 ++-
 .../js/widgets/components/FeedbackWidget.tsx  | 75 ++++++++-----------
 2 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 311eae2f2..c427524c4 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,7 +116,7 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (30 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (31 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
@@ -169,6 +169,16 @@ variant="outline">` driving a Mantine `<Collapse>` (⚠️ this Mantine build's
 zoom → a numeric-`fontSize`→rem map applied via `fz` / `--badge-fz` (replayer
 zoom fidelity is the main thing to eyeball in QA).
 
+Also done: **`FeedbackWidget`** — the floating trigger `btn` and the Type
+`btn`/`btn-outline` radios → Mantine `<Button>` (filled vs `variant="outline"`,
+`color="cbSecondary"`; the outline keeps `cb-btn-outline-secondary`), the
+`form-group`/`label`/`textarea` → `<Text component="label">` + `<Textarea>`
+(dark look now comes from the forced-dark theme, not `cb-bg-panel`/`text-white`).
+Note: the ARIA `role="radio"` buttons needed an explicit `tabIndex={0}` —
+oxlint's `interactive-supports-focus` can't see that a Mantine `<Button>`
+renders a focusable `<button>`, so a custom component with a role + handler
+trips the rule (native `<button>` didn't).
+
 Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
 `cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
 
diff --git a/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx b/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
index 6cb714f8e..08dbe0d98 100644
--- a/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
+++ b/apps/codebattle/assets/js/widgets/components/FeedbackWidget.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, memo, useMemo, useState } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from '@mantine/core';
+import { Box, Button, Group, Text, Textarea } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
 import i18n from '../../i18n';
@@ -92,21 +92,16 @@ function FeedbackWidget() {
 
   return (
     <>
-      <button
-        type="button"
+      <Button
         onClick={() => setIsOpen(true)}
-        className="btn btn-sm btn-secondary cb-btn-secondary cb-rounded d-flex align-items-center"
-        style={{
-          position: 'fixed',
-          right: '16px',
-          bottom: '16px',
-          zIndex: 1080,
-          gap: '8px',
-        }}
+        color="cbSecondary"
+        size="sm"
+        radius="md"
+        leftSection={<FontAwesomeIcon icon={['fas', 'rss']} />}
+        style={{ position: 'fixed', right: '16px', bottom: '16px', zIndex: 1080 }}
       >
-        <FontAwesomeIcon icon={['fas', 'rss']} />
         {i18n.t('Feedback')}
-      </button>
+      </Button>
       {isOpen && (
         <Modal centered show={isOpen} onHide={closeModal} contentClassName="cb-text">
           <form onSubmit={onSubmit}>
@@ -114,44 +109,38 @@ function FeedbackWidget() {
               <Modal.Title>{i18n.t('Send feedback')}</Modal.Title>
             </Modal.Header>
             <Modal.Body>
-              <div className="form-group">
-                <label htmlFor="feedback-status">{i18n.t('Type')}</label>
-                <div
-                  id="feedback-status"
-                  className="d-flex flex-wrap"
-                  role="radiogroup"
-                  aria-label={i18n.t('Type')}
-                >
+              <Box mb="md">
+                <Text component="label" htmlFor="feedback-status" size="sm" mb="xs" display="block">
+                  {i18n.t('Type')}
+                </Text>
+                <Group gap="xs" id="feedback-status" role="radiogroup" aria-label={i18n.t('Type')}>
                   {STATUS_OPTIONS.map((option) => (
-                    <button
+                    <Button
                       key={option}
-                      type="button"
-                      className={`btn btn-sm cb-rounded mr-2 mb-2 ${
-                        status === option
-                          ? 'btn-secondary cb-btn-secondary'
-                          : 'btn-outline-secondary cb-btn-outline-secondary'
-                      }`}
+                      size="sm"
+                      radius="md"
+                      color="cbSecondary"
+                      variant={status === option ? 'filled' : 'outline'}
+                      className={status === option ? undefined : 'cb-btn-outline-secondary'}
                       role="radio"
                       aria-checked={status === option}
+                      tabIndex={0}
                       onClick={() => setStatus(option)}
                     >
                       {i18n.t(option)}
-                    </button>
+                    </Button>
                   ))}
-                </div>
-              </div>
-              <div className="form-group mb-0">
-                <label htmlFor="feedback-text">{i18n.t('Message')}</label>
-                <textarea
-                  id="feedback-text"
-                  aria-label={i18n.t('Message')}
-                  className="form-control cb-bg-panel cb-border-color text-white cb-rounded"
-                  rows={5}
-                  value={text}
-                  onChange={(event) => setText(event.target.value)}
-                  required
-                />
-              </div>
+                </Group>
+              </Box>
+              <Textarea
+                id="feedback-text"
+                label={i18n.t('Message')}
+                aria-label={i18n.t('Message')}
+                rows={5}
+                value={text}
+                onChange={(event) => setText(event.target.value)}
+                required
+              />
             </Modal.Body>
             <Modal.Footer className="cb-border-color">
               <Button

From 3687ea23ab9af5824db914fcbea17d98665a499d Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 19:59:22 +0300
Subject: [PATCH 20/46] Convert FeedbackAlertNotification to Mantine (Phase 2)

Port the shared .alert-dark-theme gradient design out of SCSS into a
reusable darkThemeAlertStyles(status) helper in ui/alert.ts, and use it on
the Mantine Alert instead of the Bootstrap alert class set. The three other
dark-theme alerts can adopt the same helper as their pages convert.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 18 ++++--
 .../components/FeedbackAlertNotification.tsx  |  7 ++-
 apps/codebattle/assets/js/widgets/ui/alert.ts | 55 ++++++++++++++++++-
 3 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index c427524c4..84b3a3545 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,7 +116,7 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (31 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (32 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
@@ -179,6 +179,16 @@ oxlint's `interactive-supports-focus` can't see that a Mantine `<Button>`
 renders a focusable `<button>`, so a custom component with a role + handler
 trips the rule (native `<button>` didn't).
 
+Also done: **`FeedbackAlertNotification`**. The shared `.alert-dark-theme`
+gradient design (used by 4 React alerts + 3 heex) now has a **real home in TS**:
+`ui/alert.ts` exports `darkThemeAlertStyles(status)` returning the Mantine
+`<Alert>` `styles` (per-variant gradient bg, colored `border-left`, blurred
+backdrop, text color) — no CSS module needed. `FeedbackAlertNotification` drops
+`row mb-0 rounded-0 alert alert-${status} show alert-dark-theme` for
+`radius={0} mb={0} styles={darkThemeAlertStyles(...)}`. The other three alerts
+(`UserSettings`, `EditTournament`, `GameResult`) can adopt the same helper and
+drop `alert-dark-theme` when their pages convert.
+
 Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
 `cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
 
@@ -191,10 +201,8 @@ props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 `cb-rounded`, `x-username-truncated`, `cb-opacity-50` are kept.
 
 **Remaining leaves — each needs a decision or a browser pass, not a plain swap:**
-- **Button/alert/card theming:** `FeedbackAlertNotification` (`alert-dark-theme`
-  set — coupled to per-variant `.alert-*` gradients, wants a CSS-module home),
-  the `cb-card` / `cb-bg-highlight-panel` leftovers (e.g. inside
-  `TournamentDescription`). (`Rooms` done — see above; remaining
+- **Card theming:** the `cb-card` / `cb-bg-highlight-panel` leftovers (e.g.
+  inside `TournamentDescription`). (`Rooms` done — see above; remaining
   `cb-btn-secondary` call sites drop their class as their pages convert, now
   that the hover is in the theme.)
 - **Non-Mantine libs:** `LanguagePickerView` (react-select), `SoundToggle`
diff --git a/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.tsx b/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.tsx
index 6e0328f46..77b10a3d7 100644
--- a/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.tsx
+++ b/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.tsx
@@ -8,7 +8,7 @@ import i18n from '../../i18n';
 import AlertCodes from '../config/alertCodes';
 import { gameAlertsSelector } from '../selectors/index';
 import { actions } from '../slices';
-import { bootstrapAlertColor } from '../ui/alert';
+import { bootstrapAlertColor, darkThemeAlertStyles } from '../ui/alert';
 
 interface Notification {
   status?: string;
@@ -59,8 +59,9 @@ function FeedbackAlertNotification() {
         onClose={() => handleClose(key)}
         key={key}
         color={bootstrapAlertColor(result.status)}
-        variant="light"
-        className={`row mb-0 rounded-0 alert alert-${result.status} show alert-dark-theme`}
+        radius={0}
+        mb={0}
+        styles={darkThemeAlertStyles(result.status)}
       >
         {result.message}
       </Alert>
diff --git a/apps/codebattle/assets/js/widgets/ui/alert.ts b/apps/codebattle/assets/js/widgets/ui/alert.ts
index 303dba3c7..5bccbd359 100644
--- a/apps/codebattle/assets/js/widgets/ui/alert.ts
+++ b/apps/codebattle/assets/js/widgets/ui/alert.ts
@@ -1,6 +1,5 @@
 // Maps a Bootstrap alert variant (success/danger/info/warning/secondary) to the
-// nearest Mantine color. The branded `.alert-dark-theme` gradient still drives the
-// actual look via className; this keeps Mantine's fallback styling sensible.
+// nearest Mantine color, used as the Mantine `color` fallback on <Alert>s.
 const COLORS: Record<string, string> = {
   success: 'green',
   danger: 'red',
@@ -11,3 +10,55 @@ const COLORS: Record<string, string> = {
 };
 
 export const bootstrapAlertColor = (variant?: string) => COLORS[variant ?? ''] ?? 'blue';
+
+interface DarkThemeVariant {
+  gradient: readonly [string, string];
+  border: string;
+  text: string;
+}
+
+// Ports the legacy `.alert-dark-theme` design (was SCSS in style.scss) — a
+// per-variant gradient panel with a colored left border and a blurred backdrop.
+// `info` reuses the green gradient exactly as the SCSS did.
+const DARK_THEME_VARIANTS: Record<string, DarkThemeVariant> = {
+  success: {
+    gradient: ['rgba(25, 135, 84, 0.9)', 'rgba(25, 135, 84, 0.7)'],
+    border: '#198754',
+    text: '#ffffff',
+  },
+  info: {
+    gradient: ['rgba(25, 135, 84, 0.9)', 'rgba(25, 135, 84, 0.7)'],
+    border: '#198754',
+    text: '#ffffff',
+  },
+  danger: {
+    gradient: ['rgba(220, 53, 69, 0.9)', 'rgba(220, 53, 69, 0.7)'],
+    border: '#dc3545',
+    text: '#ffffff',
+  },
+  warning: {
+    gradient: ['rgba(255, 193, 7, 0.9)', 'rgba(255, 193, 7, 0.7)'],
+    border: '#ffc107',
+    text: '#000000',
+  },
+};
+
+// Mantine `styles` reproducing `.alert-dark-theme` for use on <Alert> in place
+// of the Bootstrap `alert alert-${status} alert-dark-theme` class set. Shared by
+// every dark-theme alert (feedback, settings, tournament edit, game result).
+export const darkThemeAlertStyles = (status?: string) => {
+  const v = DARK_THEME_VARIANTS[status ?? ''] ?? DARK_THEME_VARIANTS.info;
+  const color = { color: v.text };
+  return {
+    root: {
+      border: 'none',
+      borderLeft: `4px solid ${v.border}`,
+      background: `linear-gradient(135deg, ${v.gradient[0]}, ${v.gradient[1]})`,
+      backdropFilter: 'blur(10px)',
+      ...color,
+    },
+    title: color,
+    message: color,
+    closeButton: color,
+  };
+};

From 2da5fa21d8241bce25db376f87d97d7740d605c9 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 20:08:35 +0300
Subject: [PATCH 21/46] Record remaining-leaf audit in Mantine migration spec
 (Phase 2)

7 leaves left: 3 cleanly convertible (ChatInput, SeasonLeaderboard,
PlayerInsightsModal), 3 blocked on a lib/behavior decision, 1 Phase 3.
Note ChatInput as newly surfaced and list audit false positives.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md | 52 +++++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 84b3a3545..29511f0e9 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -200,21 +200,43 @@ classes were swapped to Mantine (`Group`/`Stack`/`Text`/`ActionIcon` + style
 props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 `cb-rounded`, `x-username-truncated`, `cb-opacity-50` are kept.
 
-**Remaining leaves — each needs a decision or a browser pass, not a plain swap:**
-- **Card theming:** the `cb-card` / `cb-bg-highlight-panel` leftovers (e.g.
-  inside `TournamentDescription`). (`Rooms` done — see above; remaining
-  `cb-btn-secondary` call sites drop their class as their pages convert, now
-  that the hover is in the theme.)
-- **Non-Mantine libs:** `LanguagePickerView` (react-select), `SoundToggle`
-  (its `menu` variant renders a Bootstrap `dropdown-item` **inside a server
-  heex dropdown** — that half is Phase 3, not a React-side swap), `EmojiTooltip`
-  (native `<select size=4>` acting as a keyboard-nav listbox — the Bootstrap
-  `custom-select` styling has no clean Mantine equivalent without rewriting the
-  interaction), `ChatContextMenu` (built on `react-contexify`, not Mantine — only
-  utility classes to strip, no primitive to swap to). `DropdownMenuDefault` was
-  **dead code** (no consumers anywhere in `js/`) — **deleted**, not converted.
-- **Larger:** `SeasonLeaderboard`, `PlayerInsightsModal` (each ~800–1100 lines;
-  one focused slice apiece).
+**Remaining leaves: 7** (audited 2026-08-07 with a whole-word Bootstrap-token
+grep over `widgets/components/**/*.tsx`, filtering out kept `cb-*` design
+classes and `User*` passthrough props). Only 3 are "just do the work"; the
+other 4 need a decision or belong to Phase 3. Each needs a browser pass, not a
+plain swap:
+
+- **Cleanly convertible (3):**
+  - `ChatInput` — Bootstrap `input-group` / `input-group-append` /
+    `invalid-tooltip` around the chat message field. Smallest of the three; the
+    last plain form leaf. (Surfaced in the 2026-08-07 audit — wasn't on earlier
+    remaining lists.)
+  - `SeasonLeaderboard` (~794 lines) — Bootstrap `table table-dark table-striped`
+    + `pagination` + `bi bi-*` Bootstrap-Icons + native `form-select`s. One
+    focused slice (Mantine `Table`/`Pagination`, icon-font decision).
+  - `PlayerInsightsModal` (~1135 lines) — the biggest single leaf; its own slice.
+- **Blocked on a lib swap / behavior change (3):**
+  - `LanguagePickerView` — react-select.
+  - `EmojiTooltip` — native `<select size=4>` keyboard-nav listbox; Bootstrap
+    `custom-select` styling has no clean Mantine equivalent without rewriting the
+    interaction.
+  - `ChatContextMenu` — built on `react-contexify`, not Mantine; only utility
+    classes to strip, no primitive to swap to.
+- **Really Phase 3 (1):** `SoundToggle` — its `menu` variant renders a Bootstrap
+  `dropdown-item` **inside a server heex dropdown**, so it can't be a pure
+  React-side swap.
+
+Plus one small **design leftover** (not a whole leaf): the `.card.cb-card`
+ranking panel inside the already-converted `TournamentDescription`, and the
+`cb-card` / `cb-bg-highlight-panel` card-theming leftovers generally. (`Rooms`
+done above; remaining `cb-btn-secondary` call sites drop their class as their
+pages convert, now that the hover is in the theme.)
+
+Audit false positives (already done — do **not** re-open): `EditorGameBar`,
+`Messages` (only a commented-out line matched), `InvitesList`/`InvitesContainer`,
+`FeedbackWidget`, `PictureInPicture`, `UserInfo` — their remaining `className`
+hits are kept `cb-*` design classes or passthrough props. `DropdownMenuDefault`
+was **dead code** and was **deleted**, not converted.
 
 **Verification gap:** slices are toolchain-verified only. Headless browser
 verification isn't feasible here (auth + live game/tournament state), so all

From 5cc2fe4cf3981b3902d5046987ca7cb1852e3430 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 20:41:34 +0300
Subject: [PATCH 22/46] Convert ChatInput to Mantine (Phase 2)

Replace the Bootstrap input-group form with a Mantine Flex + TextInput +
Buttons for both the default and tournament chat composers. Drop the
cb-btn-secondary class from the default send button (hover now comes from
the theme); keep the cb-tournament-chat-* design classes. The is-invalid /
invalid-tooltip validation becomes TextInput error + an absolute Text
overlay. Wrap TournamentChatInput.test in MantineTestProvider.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  30 +++--
 .../js/__tests__/TournamentChatInput.test.tsx |  14 ++-
 .../js/widgets/components/ChatInput.tsx       | 115 ++++++++++--------
 3 files changed, 97 insertions(+), 62 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 29511f0e9..c0b829b5e 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,7 +116,7 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (32 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (33 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
@@ -189,6 +189,24 @@ backdrop, text color) — no CSS module needed. `FeedbackAlertNotification` drop
 (`UserSettings`, `EditTournament`, `GameResult`) can adopt the same helper and
 drop `alert-dark-theme` when their pages convert.
 
+Also done: **`ChatInput`** (the chat message composer, both `default` and
+`tournament` variants). The Bootstrap `input-group`/`input-group-append` form →
+`<Flex component="form" pos="relative">` (relative so the emoji tooltip/picker
+and the length-error overlay still anchor to it); native `<input>` → Mantine
+`<TextInput flex={1}>`; the two native `btn`s → Mantine `<Button>` (emoji =
+`variant="default"`/`subtle`, send = `color="cbSecondary"` — dropping
+`cb-btn-secondary` now that the hover lives in the theme, so the default send
+button is pure Mantine). The `is-invalid` + Bootstrap `invalid-tooltip` became
+`<TextInput error>` (red border, no message node → no layout shift) plus an
+absolutely-positioned Mantine `<Text bg="red.7">` overlay above the field. Both
+variants keep their `cb-tournament-chat-*` design classes (routed to the input
+via `classNames={{ input }}`); default-variant corner-joining is done with
+per-corner `borderRadius` in `styles` and buttons stretch via `h="100%"`.
+⚠️ QA: the tournament input is 44px tall (design class) — confirm the buttons
+line up; and the default-variant joined-pill look (input rounded-left, send
+rounded-right, square emoji in the middle). `TournamentChatInput.test` now wraps
+in `MantineTestProvider`.
+
 Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
 `cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
 
@@ -200,17 +218,13 @@ classes were swapped to Mantine (`Group`/`Stack`/`Text`/`ActionIcon` + style
 props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 `cb-rounded`, `x-username-truncated`, `cb-opacity-50` are kept.
 
-**Remaining leaves: 7** (audited 2026-08-07 with a whole-word Bootstrap-token
+**Remaining leaves: 6** (audited 2026-08-07 with a whole-word Bootstrap-token
 grep over `widgets/components/**/*.tsx`, filtering out kept `cb-*` design
-classes and `User*` passthrough props). Only 3 are "just do the work"; the
+classes and `User*` passthrough props). Only 2 are "just do the work"; the
 other 4 need a decision or belong to Phase 3. Each needs a browser pass, not a
 plain swap:
 
-- **Cleanly convertible (3):**
-  - `ChatInput` — Bootstrap `input-group` / `input-group-append` /
-    `invalid-tooltip` around the chat message field. Smallest of the three; the
-    last plain form leaf. (Surfaced in the 2026-08-07 audit — wasn't on earlier
-    remaining lists.)
+- **Cleanly convertible (2):**
   - `SeasonLeaderboard` (~794 lines) — Bootstrap `table table-dark table-striped`
     + `pagination` + `bi bi-*` Bootstrap-Icons + native `form-select`s. One
     focused slice (Mantine `Table`/`Pagination`, icon-font decision).
diff --git a/apps/codebattle/assets/js/__tests__/TournamentChatInput.test.tsx b/apps/codebattle/assets/js/__tests__/TournamentChatInput.test.tsx
index 378bececa..ebc75cbaf 100644
--- a/apps/codebattle/assets/js/__tests__/TournamentChatInput.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/TournamentChatInput.test.tsx
@@ -6,6 +6,8 @@ import React from 'react';
 import TournamentChatInput from '../widgets/pages/tournament/TournamentChatInput';
 import { addMessage } from '../widgets/middlewares/Chat';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 vi.mock('i18next', () => ({
   default: { init: vi.fn(), t: (key: string) => key },
 }));
@@ -23,7 +25,11 @@ vi.mock('bad-words-next', () => ({
 
 test('TournamentChatInput keeps Send disabled for an empty message', async () => {
   const user = userEvent.setup();
-  render(<TournamentChatInput />);
+  render(
+    <MantineTestProvider>
+      <TournamentChatInput />
+    </MantineTestProvider>,
+  );
 
   const input = screen.getByRole('textbox', { name: 'Chat message' });
   const sendButton = screen.getByRole('button', { name: 'Send' });
@@ -36,7 +42,11 @@ test('TournamentChatInput keeps Send disabled for an empty message', async () =>
 
 test('TournamentChatInput sends a general tournament chat message', async () => {
   const user = userEvent.setup();
-  render(<TournamentChatInput />);
+  render(
+    <MantineTestProvider>
+      <TournamentChatInput />
+    </MantineTestProvider>,
+  );
 
   await user.type(screen.getByRole('textbox', { name: 'Chat message' }), 'Good luck!');
   await user.click(screen.getByRole('button', { name: 'Send' }));
diff --git a/apps/codebattle/assets/js/widgets/components/ChatInput.tsx b/apps/codebattle/assets/js/widgets/components/ChatInput.tsx
index 1aa633720..403f56c1b 100644
--- a/apps/codebattle/assets/js/widgets/components/ChatInput.tsx
+++ b/apps/codebattle/assets/js/widgets/components/ChatInput.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 
 import data from '@emoji-mart/data';
+import { Button, Flex, Text, TextInput } from '@mantine/core';
 import BadWordsNext from 'bad-words-next';
-import cn from 'classnames';
 import { SearchIndex, init } from 'emoji-mart';
 import i18next from 'i18next';
 import isEmpty from 'lodash/isEmpty';
@@ -74,29 +74,6 @@ export default function ChatInput({
   const badwordsRef = useRef(new BadWordsNext());
   const isTournament = variant === 'tournament';
 
-  const sendBtnClassName = cn(
-    'btn',
-    isTournament
-      ? 'cb-tournament-chat-send'
-      : 'btn-secondary cb-btn-secondary border-gray border-left rounded-right',
-    !isTournament && {
-      'cb-border-color': true,
-    },
-  );
-  const inputClassName = cn('form-control h-auto', {
-    'cb-tournament-chat-input': isTournament,
-    'border-right-0 rounded-left bg-dark cb-border-color text-white': !isTournament,
-    'is-invalid': isMaxLengthExceeded,
-  });
-  const emojiBtnClassName = cn('btn px-2 py-0', {
-    'cb-tournament-chat-emoji': isTournament,
-    'border-left-0 border-right-0 cb-border-color border': !isTournament,
-  });
-  const formClassName = cn('input-group mb-0', {
-    'cb-tournament-chat-form cb-tournament-chat-input-group': isTournament,
-    'border-top cb-border-color p-2': !isTournament,
-  });
-
   useEffect(() => {
     let mounted = true;
     async function loadBadwords() {
@@ -201,22 +178,53 @@ export default function ChatInput({
   }, []);
 
   return (
-    <form className={formClassName} onSubmit={handleSubmit}>
-      <input
-        className={inputClassName}
+    <Flex
+      component="form"
+      onSubmit={handleSubmit}
+      pos="relative"
+      align="stretch"
+      mb={0}
+      p={isTournament ? undefined : 'sm'}
+      className={
+        isTournament ? 'cb-tournament-chat-form cb-tournament-chat-input-group' : undefined
+      }
+      style={
+        isTournament ? undefined : { borderTop: '1px solid var(--mantine-color-default-border)' }
+      }
+    >
+      <TextInput
+        ref={inputRef}
+        flex={1}
         aria-label={i18next.t('Chat message')}
         placeholder={i18next.t('Be nice in chat!')}
         value={text}
         onChange={handleChange}
-        ref={inputRef}
         disabled={disabled}
+        error={isMaxLengthExceeded}
+        classNames={isTournament ? { input: 'cb-tournament-chat-input' } : undefined}
+        styles={
+          isTournament
+            ? undefined
+            : { input: { borderTopRightRadius: 0, borderBottomRightRadius: 0 } }
+        }
       />
       {isMaxLengthExceeded && (
-        <div className="invalid-tooltip">
+        <Text
+          pos="absolute"
+          bottom="100%"
+          left={0}
+          mb={4}
+          px="xs"
+          py={4}
+          fz="xs"
+          c="white"
+          bg="red.7"
+          style={{ borderRadius: 'var(--mantine-radius-sm)', zIndex: 5 }}
+        >
           {i18next.t('Message length cannot exceed %{count} characters.', {
             count: MAX_MESSAGE_LENGTH,
           })}
-        </div>
+        </Text>
       )}
       {isTooltipVisible && (
         <EmojiToolTip
@@ -228,28 +236,31 @@ export default function ChatInput({
       {isPickerVisible && (
         <EmojiPicker handleSelect={handleSelectEmodji} hide={hidePicker} disabled={disabled} />
       )}
-      <div
-        className={cn('input-group-append', {
-          'border-left rounded-right': !isTournament,
-        })}
+      <Button
+        type="button"
+        h="100%"
+        px="xs"
+        radius={0}
+        variant={isTournament ? 'subtle' : 'default'}
+        onClick={togglePickerVisibility}
+        aria-label={i18next.t('Open emoji picker')}
+        className={isTournament ? 'cb-tournament-chat-emoji' : undefined}
       >
-        <button
-          type="button"
-          className={emojiBtnClassName}
-          onClick={togglePickerVisibility}
-          aria-label={i18next.t('Open emoji picker')}
-        >
-          <em-emoji id="grinning" size={20} />
-        </button>
-        <button
-          className={sendBtnClassName}
-          type="button"
-          onClick={handleSubmit}
-          disabled={disabled || isMaxLengthExceeded || isMessageBlank}
-        >
-          {i18next.t('Send')}
-        </button>
-      </div>
-    </form>
+        <em-emoji id="grinning" size={20} />
+      </Button>
+      <Button
+        type="button"
+        h="100%"
+        color="cbSecondary"
+        onClick={handleSubmit}
+        disabled={disabled || isMaxLengthExceeded || isMessageBlank}
+        className={isTournament ? 'cb-tournament-chat-send' : undefined}
+        styles={
+          isTournament ? undefined : { root: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } }
+        }
+      >
+        {i18next.t('Send')}
+      </Button>
+    </Flex>
   );
 }

From 4a77292319a191f3ab2bd692af56558b920e7bb7 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 20:55:17 +0300
Subject: [PATCH 23/46] Convert SeasonLeaderboard to Mantine (Phase 2)

Swap the Bootstrap table, hand-rolled pagination, filter bar and native
selects for Mantine Table/Pagination/NativeSelect/Grid, keeping the
cb-custom-event-* and cb-season-filter-* design classes. The dead bi bi-*
Bootstrap-Icons (no bootstrap-icons package is imported) become FontAwesome
icons. Exported helper functions that PlayerInsightsModal still consumes are
left untouched.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  33 +-
 .../components/SeasonLeaderboard/index.tsx    | 405 ++++++++----------
 2 files changed, 208 insertions(+), 230 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index c0b829b5e..684c6ff5d 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,7 +116,7 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (33 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (34 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
@@ -207,6 +207,28 @@ line up; and the default-variant joined-pill look (input rounded-left, send
 rounded-right, square emoji in the middle). `TournamentChatInput.test` now wraps
 in `MantineTestProvider`.
 
+Also done: **`SeasonLeaderboard`** (the seasons/hall-of-fame leaderboard;
+consumed by `SeasonShowPage` + `HallOfFamePage`). The Bootstrap
+`table table-dark table-striped table-hover` → Mantine `<Table striped
+highlightOnHover>` inside `<Table.ScrollContainer>` (thead/tbody/tr/th/td →
+`Table.*`); the hand-rolled `pagination` `<ul>` (first/prev/window/next/last +
+ellipsis) → a single Mantine `<Pagination withEdges>`; native `form-select`s →
+Mantine `<NativeSelect>` (kept native so the `cb-season-filter-control` design
+class still styles them); the `input-group` search field → `<Flex>` +
+`<TextInput>` + `<UnstyledButton>` clear, keeping the `cb-season-filter-*`
+pill design classes; `row`/`col-*` → `<Grid>`/`<Grid.Col>`. **Icon-font
+decision:** the `bi bi-*` Bootstrap-Icons were **dead** (no `bootstrap-icons`
+package/CSS is imported anywhere — they rendered as empty `<i>`), so `bi-search`
+/ `bi-bar-chart-line` became FontAwesome `faMagnifyingGlass` / `faChartLine`
+(the app's icon system). Kept all `cb-custom-event-*` / `cb-table` /
+`cb-gold|silver|bronze-place-bg` design classes (routed to `Table.Td` via a
+shared `cellProps`). The exported helper functions (`getPlaceBadgeClass` etc.)
+still return Bootstrap classes — untouched, since `PlayerInsightsModal` (still
+Bootstrap) consumes them. ⚠️ QA: Mantine `NativeSelect` may add its own chevron
+on top of the native one; the Mantine pagination window/ellipsis differs
+slightly from the old fixed 5-page window; and confirm `striped` doesn't fight
+the top-3 place-bg rows (place-bg is unlayered → should win).
+
 Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
 `cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
 
@@ -218,16 +240,13 @@ classes were swapped to Mantine (`Group`/`Stack`/`Text`/`ActionIcon` + style
 props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 `cb-rounded`, `x-username-truncated`, `cb-opacity-50` are kept.
 
-**Remaining leaves: 6** (audited 2026-08-07 with a whole-word Bootstrap-token
+**Remaining leaves: 5** (audited 2026-08-07 with a whole-word Bootstrap-token
 grep over `widgets/components/**/*.tsx`, filtering out kept `cb-*` design
-classes and `User*` passthrough props). Only 2 are "just do the work"; the
+classes and `User*` passthrough props). Only 1 is "just do the work"; the
 other 4 need a decision or belong to Phase 3. Each needs a browser pass, not a
 plain swap:
 
-- **Cleanly convertible (2):**
-  - `SeasonLeaderboard` (~794 lines) — Bootstrap `table table-dark table-striped`
-    + `pagination` + `bi bi-*` Bootstrap-Icons + native `form-select`s. One
-    focused slice (Mantine `Table`/`Pagination`, icon-font decision).
+- **Cleanly convertible (1):**
   - `PlayerInsightsModal` (~1135 lines) — the biggest single leaf; its own slice.
 - **Blocked on a lib swap / behavior change (3):**
   - `LanguagePickerView` — react-select.
diff --git a/apps/codebattle/assets/js/widgets/components/SeasonLeaderboard/index.tsx b/apps/codebattle/assets/js/widgets/components/SeasonLeaderboard/index.tsx
index aec88104c..0cd711a5e 100644
--- a/apps/codebattle/assets/js/widgets/components/SeasonLeaderboard/index.tsx
+++ b/apps/codebattle/assets/js/widgets/components/SeasonLeaderboard/index.tsx
@@ -1,5 +1,21 @@
 import React, { memo, useMemo, useCallback } from 'react';
 
+import { faChartLine, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  Avatar,
+  Box,
+  Button,
+  Flex,
+  Grid,
+  Group,
+  NativeSelect,
+  Pagination as MantinePagination,
+  Table,
+  Text,
+  TextInput,
+  UnstyledButton,
+} from '@mantine/core';
 import cn from 'classnames';
 
 import i18n from '../../../i18n';
@@ -60,15 +76,26 @@ export const getRowBorderStyle = (place?: number): React.CSSProperties => {
 };
 
 const getLeaderboardRowClassName = (place?: number) =>
-  cn('font-weight-bold cb-custom-event-tr-border', {
+  cn('cb-custom-event-tr-border', {
     'cb-gold-place-bg': place === 1,
     'cb-silver-place-bg': place === 2,
     'cb-bronze-place-bg': place === 3,
   });
 
-const tableDataCellClassName = cn(
-  'p-1 pl-4 my-2 align-middle text-nowrap position-relative cb-custom-event-td border-0',
-);
+// Shared Table.Td props: keep the `cb-custom-event-td` design class (its column
+// dividers via ::after and rounded first/last cells need position:relative),
+// and port the Bootstrap `p-1 pl-4 align-middle text-nowrap border-0` to props.
+const cellProps = {
+  className: 'cb-custom-event-td',
+  p: 'xs',
+  pl: 'lg',
+  style: {
+    position: 'relative' as const,
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    border: 0,
+  },
+};
 
 export const formatTime = (seconds?: number) => {
   if (!seconds) return '0s';
@@ -138,20 +165,19 @@ export function SortableHeader({ label, sortKey, currentSort, onSort }: Sortable
   const nextDirection = isActive && currentSort.direction === 'asc' ? 'desc' : 'asc';
 
   return (
-    <th
+    <Table.Th
       scope="col"
-      className="cursor-pointer user-select-none"
-      style={{ cursor: 'pointer' }}
       onClick={() => onSort(sortKey, nextDirection)}
       title={i18n.t('Sort by %{label}', { label })}
+      style={{ cursor: 'pointer', userSelect: 'none' }}
     >
-      <div className="d-flex align-items-center">
+      <Group gap={4} align="center" wrap="nowrap">
         {label}
-        <span className={cn('ml-1', { 'opacity-25': !isActive })}>
+        <Text component="span" style={{ opacity: isActive ? 1 : 0.25 }}>
           {isActive && currentSort.direction === 'asc' ? '↑' : '↓'}
-        </span>
-      </div>
-    </th>
+        </Text>
+      </Group>
+    </Table.Th>
   );
 }
 
@@ -173,118 +199,46 @@ export function Pagination({
   itemsPerPage,
   onItemsPerPageChange,
 }: PaginationProps) {
-  const pages = useMemo(() => {
-    const result = [];
-    const maxVisiblePages = 5;
-    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
-    const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
-
-    if (endPage - startPage + 1 < maxVisiblePages) {
-      startPage = Math.max(1, endPage - maxVisiblePages + 1);
-    }
-
-    for (let i = startPage; i <= endPage; i += 1) {
-      result.push(i);
-    }
-    return result;
-  }, [currentPage, totalPages]);
-
   if (totalPages <= 1 && totalItems <= ITEMS_PER_PAGE_OPTIONS[0]) {
     return null;
   }
 
   return (
-    <div className="d-flex flex-column flex-md-row justify-content-between align-items-center p-3 border-top border-secondary">
-      <div className="d-flex align-items-center mb-2 mb-md-0">
-        <span className="text-muted small mr-2">{i18n.t('Show')}</span>
-        <select
-          className="form-select form-select-sm bg-dark text-light border-secondary mx-2"
-          style={{ width: 'auto' }}
-          value={itemsPerPage}
-          onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
-        >
-          {ITEMS_PER_PAGE_OPTIONS.map((opt) => (
-            <option key={opt} value={opt}>
-              {opt}
-            </option>
-          ))}
-        </select>
-        <span className="text-muted small">
+    <Flex
+      direction={{ base: 'column', md: 'row' }}
+      justify="space-between"
+      align="center"
+      p="md"
+      style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}
+    >
+      <Group gap="xs" mb={{ base: 'sm', md: 0 }}>
+        <Text c="dimmed" size="sm">
+          {i18n.t('Show')}
+        </Text>
+        <NativeSelect
+          size="xs"
+          w="auto"
+          aria-label={i18n.t('Show')}
+          value={String(itemsPerPage)}
+          onChange={(e) => onItemsPerPageChange(Number(e.currentTarget.value))}
+          data={ITEMS_PER_PAGE_OPTIONS.map(String)}
+        />
+        <Text c="dimmed" size="sm">
           {i18n.t('of %{count} players', { count: totalItems })}
-        </span>
-      </div>
+        </Text>
+      </Group>
 
       {totalPages > 1 && (
-        <nav aria-label={i18n.t('Leaderboard pagination')}>
-          <ul className="pagination pagination-sm mb-0">
-            <li className={cn('page-item', { disabled: currentPage === 1 })}>
-              <button
-                type="button"
-                className="page-link bg-dark text-light border-secondary"
-                onClick={() => onPageChange(1)}
-                disabled={currentPage === 1}
-              >
-                «
-              </button>
-            </li>
-            <li className={cn('page-item', { disabled: currentPage === 1 })}>
-              <button
-                type="button"
-                className="page-link bg-dark text-light border-secondary"
-                onClick={() => onPageChange(currentPage - 1)}
-                disabled={currentPage === 1}
-              >
-                ‹
-              </button>
-            </li>
-            {pages[0] > 1 && (
-              <li className="page-item disabled">
-                <span className="page-link bg-dark text-light border-secondary">...</span>
-              </li>
-            )}
-            {pages.map((page) => (
-              <li key={page} className={cn('page-item', { active: page === currentPage })}>
-                <button
-                  type="button"
-                  className={cn('page-link border-secondary', {
-                    'bg-info text-dark': page === currentPage,
-                    'bg-dark text-light': page !== currentPage,
-                  })}
-                  onClick={() => onPageChange(page)}
-                >
-                  {page}
-                </button>
-              </li>
-            ))}
-            {pages[pages.length - 1] < totalPages && (
-              <li className="page-item disabled">
-                <span className="page-link bg-dark text-light border-secondary">...</span>
-              </li>
-            )}
-            <li className={cn('page-item', { disabled: currentPage === totalPages })}>
-              <button
-                type="button"
-                className="page-link bg-dark text-light border-secondary"
-                onClick={() => onPageChange(currentPage + 1)}
-                disabled={currentPage === totalPages}
-              >
-                ›
-              </button>
-            </li>
-            <li className={cn('page-item', { disabled: currentPage === totalPages })}>
-              <button
-                type="button"
-                className="page-link bg-dark text-light border-secondary"
-                onClick={() => onPageChange(totalPages)}
-                disabled={currentPage === totalPages}
-              >
-                »
-              </button>
-            </li>
-          </ul>
-        </nav>
+        <MantinePagination
+          size="sm"
+          withEdges
+          value={currentPage}
+          total={totalPages}
+          onChange={onPageChange}
+          aria-label={i18n.t('Leaderboard pagination')}
+        />
       )}
-    </div>
+    </Flex>
   );
 }
 
@@ -315,78 +269,80 @@ export function SearchFilterBar({
   const hasFilters = searchQuery || clanFilter || langFilter;
 
   return (
-    <div className="p-3 border-bottom border-secondary cb-season-leaderboard-filters">
-      <div className="row align-items-end g-2">
-        <div className="col-12 col-md-4">
-          <div className="input-group input-group-sm cb-season-filter-input-group">
-            <span className="input-group-text bg-dark border-secondary text-muted cb-season-filter-prefix">
-              <i className="bi bi-search" />
-            </span>
-            <input
+    <Box
+      p="md"
+      className="cb-season-leaderboard-filters"
+      style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}
+    >
+      <Grid gap="xs" align="flex-end">
+        <Grid.Col span={{ base: 12, md: 4 }}>
+          <Flex align="center" wrap="nowrap" className="cb-season-filter-input-group">
+            <Box
+              className="cb-season-filter-prefix"
+              style={{ display: 'inline-flex', alignItems: 'center' }}
+            >
+              <FontAwesomeIcon icon={faMagnifyingGlass} />
+            </Box>
+            <TextInput
               id="search-player"
-              type="text"
+              flex={1}
               aria-label={i18n.t('Search player')}
-              className="form-control bg-dark text-light border-secondary cb-season-filter-control"
+              classNames={{ input: 'cb-season-filter-control' }}
               placeholder={i18n.t('Search by name...')}
               value={searchQuery}
-              onChange={(e) => onSearchChange(e.target.value)}
+              onChange={(e) => onSearchChange(e.currentTarget.value)}
             />
             {searchQuery && (
-              <button
-                type="button"
-                className="btn btn-outline-secondary cb-season-filter-clear-btn"
+              <UnstyledButton
+                className="cb-season-filter-clear-btn"
+                aria-label={i18n.t('Clear search')}
                 onClick={() => onSearchChange('')}
               >
                 ×
-              </button>
+              </UnstyledButton>
             )}
-          </div>
-        </div>
-        <div className="col-6 col-md-3">
-          <select
+          </Flex>
+        </Grid.Col>
+        <Grid.Col span={{ base: 6, md: 3 }}>
+          <NativeSelect
             id="filter-clan"
             aria-label={i18n.t('Filter by clan')}
-            className="form-select form-select-sm bg-dark text-light border-secondary cb-season-filter-control"
+            classNames={{ input: 'cb-season-filter-control' }}
             value={clanFilter}
-            onChange={(e) => onClanFilterChange(e.target.value)}
-          >
-            <option value="">{i18n.t('All Clans')}</option>
-            {uniqueClans.map((clan) => (
-              <option key={clan} value={clan}>
-                {clan}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="col-6 col-md-3">
-          <select
+            onChange={(e) => onClanFilterChange(e.currentTarget.value)}
+            data={[
+              { value: '', label: i18n.t('All Clans') },
+              ...uniqueClans.map((clan) => String(clan)),
+            ]}
+          />
+        </Grid.Col>
+        <Grid.Col span={{ base: 6, md: 3 }}>
+          <NativeSelect
             id="filter-lang"
             aria-label={i18n.t('Filter by language')}
-            className="form-select form-select-sm bg-dark text-light border-secondary cb-season-filter-control"
+            classNames={{ input: 'cb-season-filter-control' }}
             value={langFilter}
-            onChange={(e) => onLangFilterChange(e.target.value)}
-          >
-            <option value="">{i18n.t('All Languages')}</option>
-            {uniqueLangs.map((lang) => (
-              <option key={lang} value={lang}>
-                {lang}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="col-12 col-md-2">
+            onChange={(e) => onLangFilterChange(e.currentTarget.value)}
+            data={[
+              { value: '', label: i18n.t('All Languages') },
+              ...uniqueLangs.map((lang) => String(lang)),
+            ]}
+          />
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, md: 2 }}>
           {hasFilters && (
-            <button
-              type="button"
-              className="btn btn-sm btn-outline-secondary w-100 cb-season-filter-reset-btn"
+            <Button
+              variant="default"
+              w="100%"
+              className="cb-season-filter-reset-btn"
               onClick={onReset}
             >
               {i18n.t('Clear Filters')}
-            </button>
+            </Button>
           )}
-        </div>
-      </div>
-    </div>
+        </Grid.Col>
+      </Grid>
+    </Box>
   );
 }
 
@@ -415,19 +371,16 @@ const LeaderboardRow = memo(
     };
 
     return (
-      <tr className={getLeaderboardRowClassName(result.place)}>
-        <th scope="row" className={tableDataCellClassName}>
-          <span className="text-white">{result.place}</span>
-        </th>
-        <td className={tableDataCellClassName}>
-          <div className="d-flex align-items-center">
+      <Table.Tr className={getLeaderboardRowClassName(result.place)} fw={700}>
+        <Table.Th scope="row" {...cellProps}>
+          <Text component="span" c="white">
+            {result.place}
+          </Text>
+        </Table.Th>
+        <Table.Td {...cellProps}>
+          <Group gap="sm" wrap="nowrap">
             {result.avatar_url && (
-              <img
-                src={result.avatar_url}
-                alt={result.user_name}
-                className="rounded-circle mr-2"
-                style={{ width: '32px', height: '32px' }}
-              />
+              <Avatar src={result.avatar_url} alt={result.user_name} size={32} radius="xl" />
             )}
             <UserInfo
               user={user}
@@ -444,37 +397,43 @@ const LeaderboardRow = memo(
                 'text-light': result.place > 3,
               })}
             />
-          </div>
-        </td>
-        <td className={tableDataCellClassName}>
+          </Group>
+        </Table.Td>
+        <Table.Td {...cellProps}>
           {result.clan_name ? (
-            <span className="text-white" title={result.clan_name}>
+            <Text component="span" c="white" title={result.clan_name}>
               {displayClan}
-            </span>
+            </Text>
           ) : (
-            <span className="text-muted">-</span>
+            <Text component="span" c="dimmed">
+              -
+            </Text>
           )}
-        </td>
-        <td className={cn(tableDataCellClassName, 'fw-bold text-white')}>{result.total_points}</td>
-        <td className={tableDataCellClassName}>{result.total_wins_count}</td>
-        <td className={tableDataCellClassName}>{result.total_score}</td>
-        <td className={tableDataCellClassName}>{result.tournaments_count}</td>
-        <td className={tableDataCellClassName}>
+        </Table.Td>
+        <Table.Td {...cellProps} fw={700} c="white">
+          {result.total_points}
+        </Table.Td>
+        <Table.Td {...cellProps}>{result.total_wins_count}</Table.Td>
+        <Table.Td {...cellProps}>{result.total_score}</Table.Td>
+        <Table.Td {...cellProps}>{result.tournaments_count}</Table.Td>
+        <Table.Td {...cellProps}>
           {result.avg_place ? Number(result.avg_place).toFixed(1) : '-'}
-        </td>
+        </Table.Td>
         {showInsightsButton && (
-          <td className={cn(tableDataCellClassName, 'text-center')}>
-            <button
-              type="button"
-              className="btn btn-sm btn-outline-light"
+          <Table.Td {...cellProps} ta="center">
+            <Button
+              size="compact-sm"
+              variant="outline"
+              color="gray"
               onClick={() => onShowInsights(result)}
               title={i18n.t('View player insights')}
+              leftSection={<FontAwesomeIcon icon={faChartLine} />}
             >
-              <i className="bi bi-bar-chart-line" /> {i18n.t('Stats')}
-            </button>
-          </td>
+              {i18n.t('Stats')}
+            </Button>
+          </Table.Td>
         )}
-      </tr>
+      </Table.Tr>
     );
   },
 );
@@ -531,9 +490,11 @@ export function LeaderboardTable({
 }: LeaderboardTableProps) {
   if (results.length === 0) {
     return (
-      <div className="text-center py-5">
-        <p className="text-muted mb-0">{i18n.t('No results yet')}</p>
-      </div>
+      <Box ta="center" py="xl">
+        <Text c="dimmed" mb={0}>
+          {i18n.t('No results yet')}
+        </Text>
+      </Box>
     );
   }
 
@@ -552,21 +513,19 @@ export function LeaderboardTable({
       />
 
       {displayedResults.length === 0 ? (
-        <div className="text-center py-5">
-          <p className="text-muted mb-0">{i18n.t('No players match your filters')}</p>
-          <button
-            type="button"
-            className="btn btn-sm btn-outline-secondary mt-2"
-            onClick={onResetFilters}
-          >
+        <Box ta="center" py="xl">
+          <Text c="dimmed" mb={0}>
+            {i18n.t('No players match your filters')}
+          </Text>
+          <Button size="compact-sm" variant="outline" color="gray" mt="sm" onClick={onResetFilters}>
             {i18n.t('Clear Filters')}
-          </button>
-        </div>
+          </Button>
+        </Box>
       ) : (
-        <div className="table-responsive">
-          <table className="table table-dark table-striped table-hover mb-0 cb-table cb-custom-event-table">
-            <thead>
-              <tr>
+        <Table.ScrollContainer minWidth={800}>
+          <Table striped highlightOnHover mb={0} className="cb-table cb-custom-event-table">
+            <Table.Thead>
+              <Table.Tr>
                 <SortableHeader
                   label="#"
                   sortKey="place"
@@ -616,13 +575,13 @@ export function LeaderboardTable({
                   onSort={onSort}
                 />
                 {showInsightsButton && (
-                  <th scope="col" className="text-center">
+                  <Table.Th scope="col" ta="center">
                     {i18n.t('Insights')}
-                  </th>
+                  </Table.Th>
                 )}
-              </tr>
-            </thead>
-            <tbody>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
               {displayedResults.map((result) => (
                 <LeaderboardRow
                   key={result.user_id}
@@ -631,9 +590,9 @@ export function LeaderboardTable({
                   showInsightsButton={showInsightsButton}
                 />
               ))}
-            </tbody>
-          </table>
-        </div>
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
       )}
 
       <Pagination

From 6f8eca858de649ce89555b181805a11e5d9cf3f9 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 21:05:34 +0300
Subject: [PATCH 24/46] Convert PlayerInsightsModal to Mantine (Phase 2)

Port all Bootstrap layout/utility markup in the season player-stats modal to
Mantine (Grid, Group, Card, Table, Badge, Button toggle tabs, Alert, Text),
keeping the cb-bg-panel design class and every Recharts chart untouched. Place
badges use a local Mantine color map instead of the Bootstrap-class helper,
which stays exported for the still-Bootstrap HallOfFamePage. Drop the dead
modal-90w class in favor of Mantine size="90%".

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |   31 +-
 .../components/PlayerInsightsModal/index.tsx  | 1318 ++++++++---------
 2 files changed, 683 insertions(+), 666 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 684c6ff5d..94d15da83 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -116,7 +116,7 @@ Working in small per-slice commits (convert → wrap affected tests in
 `MantineTestProvider` → typecheck + vitest + build + lint). Started with the
 shared leaf components in `widgets/components/`.
 
-**Done (34 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
+**Done (35 leaf components):** `Card`, `InfoMessage`, `SystemMessage`, `Loading`,
 `MessageTimestamp`, `ResultIcon`, `OnlineContainer`, `Editor` (Vim status bar),
 `GamesHeatmap`, `TournamentPreviewPanel`, `PlayerLoading`, `EditorLoading`,
 `UserAchievements`, `MessageTag`, `TournamentTimer`, `GameLevelBadge`,
@@ -229,6 +229,25 @@ on top of the native one; the Mantine pagination window/ellipsis differs
 slightly from the old fixed 5-page window; and confirm `striped` doesn't fight
 the top-3 place-bg rows (place-bg is unlayered → should win).
 
+Also done: **`PlayerInsightsModal`** (the ~1135-line season player-stats modal;
+opened from `SeasonLeaderboard`'s Stats button). All Bootstrap layout/utility
+markup → Mantine: `row`/`col-md-*` → `<Grid>`/`<Grid.Col>`; the stat/comparison
+`card cb-bg-panel border-0` panels → `<Card className="cb-bg-panel">` (design
+class kept); the two inner `table table-dark table-sm` → `<Table>` in
+`Table.ScrollContainer`; `badge` + `getPlaceBadgeClass` → Mantine `<Badge>` via
+a **local** `placeBadgeColor` map (gold/silver/bronze/blue); the 4 tab
+`btn btn-info`/`btn-outline-secondary` → a Mantine `<Button>` toggle group
+(`variant` filled/default); `alert alert-warning` → `<Alert color="yellow">`;
+`Loader`, all Recharts charts, and the fetch/median logic are unchanged. The
+Bootstrap semantic text colors (`text-warning`/`success`/`info`/`danger`/
+`muted`) map to Mantine named colors (`yellow`/`green`/`cyan`/`red`/`dimmed`).
+The dead `modal-90w`/`text-light` classes were dropped — `modal-90w` had no CSS,
+so its 90%-width intent is now honoured by Mantine `size="90%"`. **Left the
+exported `getPlaceBadgeClass` / `getMedalEmoji` helpers in `SeasonLeaderboard`
+untouched** — the still-Bootstrap `HallOfFamePage` consumes them. ⚠️ QA: the
+gold/bronze `<Badge>` text contrast, the sticky tab bar's `bg="dark.7"` against
+the modal body, and that the semantic-color remap reads the same as the charts.
+
 Note: `AchievementBadge` is **not** a Phase-2 target — it only carries
 `cb-achievement-badge*` design classes (a `grep` false positive per gotcha #8).
 
@@ -240,14 +259,12 @@ classes were swapped to Mantine (`Group`/`Stack`/`Text`/`ActionIcon` + style
 props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 `cb-rounded`, `x-username-truncated`, `cb-opacity-50` are kept.
 
-**Remaining leaves: 5** (audited 2026-08-07 with a whole-word Bootstrap-token
+**Remaining leaves: 4** (audited 2026-08-07 with a whole-word Bootstrap-token
 grep over `widgets/components/**/*.tsx`, filtering out kept `cb-*` design
-classes and `User*` passthrough props). Only 1 is "just do the work"; the
-other 4 need a decision or belong to Phase 3. Each needs a browser pass, not a
-plain swap:
+classes and `User*` passthrough props). All 4 now need a decision or belong to
+Phase 3 — the "just do the work" leaves are done. Each needs a browser pass,
+not a plain swap:
 
-- **Cleanly convertible (1):**
-  - `PlayerInsightsModal` (~1135 lines) — the biggest single leaf; its own slice.
 - **Blocked on a lib swap / behavior change (3):**
   - `LanguagePickerView` — react-select.
   - `EmojiTooltip` — native `<select size=4>` keyboard-nav listbox; Bootstrap
diff --git a/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx b/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
index 63319283f..3737efc71 100644
--- a/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
+++ b/apps/codebattle/assets/js/widgets/components/PlayerInsightsModal/index.tsx
@@ -1,7 +1,19 @@
 import React, { useState, useMemo, useEffect } from 'react';
 
-import { Loader } from '@mantine/core';
-import cn from 'classnames';
+import {
+  Alert,
+  Anchor,
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Grid,
+  Group,
+  Loader,
+  Table,
+  Text,
+} from '@mantine/core';
 import {
   ResponsiveContainer,
   BarChart,
@@ -31,7 +43,6 @@ import LanguageIcon from '../LanguageIcon';
 import {
   GRADE_COLORS,
   ALL_GRADES,
-  getPlaceBadgeClass,
   getMedalEmoji,
   formatTime,
   formatGradeName,
@@ -39,6 +50,31 @@ import {
   type LeaderboardResult,
 } from '../SeasonLeaderboard';
 
+// Mantine `<Badge>` color for a leaderboard place (gold / silver / bronze /
+// default). Mirrors the Bootstrap `getPlaceBadgeClass` still used by the not-yet
+// converted HallOfFamePage, but as Mantine colors instead of BS bg classes.
+const placeBadgeColor = (place?: number) => {
+  switch (place) {
+    case 1:
+      return 'yellow';
+    case 2:
+      return 'gray';
+    case 3:
+      return '#cd7f32';
+    default:
+      return 'blue';
+  }
+};
+
+// Shared section heading used across the modal (was `h6.text-muted.text-uppercase`).
+function SectionHeading({ children, size = 'sm' }: { children: React.ReactNode; size?: string }) {
+  return (
+    <Text size={size} c="dimmed" tt="uppercase" fw={600} mb="md">
+      {children}
+    </Text>
+  );
+}
+
 interface GradeStat {
   grade: string;
   total_points?: number;
@@ -117,8 +153,8 @@ function GradeStatsChart({ gradeStats }: { gradeStats?: GradeStat[] }) {
   }));
 
   return (
-    <div className="mb-4">
-      <h6 className="text-muted text-uppercase mb-3">{i18n.t('Points by Tournament Grade')}</h6>
+    <Box mb="lg">
+      <SectionHeading>{i18n.t('Points by Tournament Grade')}</SectionHeading>
       <ResponsiveContainer width="100%" height={220}>
         <BarChart data={chartData} layout="vertical">
           <CartesianGrid strokeDasharray="3 3" stroke="#444" />
@@ -135,7 +171,7 @@ function GradeStatsChart({ gradeStats }: { gradeStats?: GradeStat[] }) {
           </Bar>
         </BarChart>
       </ResponsiveContainer>
-    </div>
+    </Box>
   );
 }
 
@@ -148,7 +184,7 @@ function WinRateChart({ wins, total }: { wins: number; total: number }) {
   ];
 
   return (
-    <div className="text-center">
+    <Box ta="center">
       <ResponsiveContainer width="100%" height={150}>
         <PieChart>
           <Pie
@@ -168,11 +204,15 @@ function WinRateChart({ wins, total }: { wins: number; total: number }) {
           <Tooltip contentStyle={{ backgroundColor: '#1a1a1a', border: '1px solid #333' }} />
         </PieChart>
       </ResponsiveContainer>
-      <div style={{ marginTop: '-40px', position: 'relative' }}>
-        <div className="fs-4 fw-bold text-success">{winRate}%</div>
-        <div className="text-muted small">{i18n.t('Win Rate')}</div>
-      </div>
-    </div>
+      <Box style={{ marginTop: '-40px', position: 'relative' }}>
+        <Text fz="1.5rem" fw={700} c="green">
+          {winRate}%
+        </Text>
+        <Text c="dimmed" size="sm">
+          {i18n.t('Win Rate')}
+        </Text>
+      </Box>
+    </Box>
   );
 }
 
@@ -188,8 +228,8 @@ function PerformanceTrendChart({ trend }: { trend?: PerformanceTrendPoint[] }) {
   }));
 
   return (
-    <div className="mb-4">
-      <h6 className="text-muted text-uppercase mb-3">{i18n.t('Weekly Performance Trend')}</h6>
+    <Box mb="lg">
+      <SectionHeading>{i18n.t('Weekly Performance Trend')}</SectionHeading>
       <ResponsiveContainer width="100%" height={200}>
         <AreaChart data={chartData}>
           <CartesianGrid strokeDasharray="3 3" stroke="#444" />
@@ -218,7 +258,7 @@ function PerformanceTrendChart({ trend }: { trend?: PerformanceTrendPoint[] }) {
           />
         </AreaChart>
       </ResponsiveContainer>
-    </div>
+    </Box>
   );
 }
 
@@ -226,59 +266,61 @@ function PerformanceTrendChart({ trend }: { trend?: PerformanceTrendPoint[] }) {
 function GradeStatsTable({ gradeStats }: { gradeStats?: GradeStat[] }) {
   if (!gradeStats || gradeStats.length === 0) {
     return (
-      <div className="text-center text-muted py-3">
+      <Box ta="center" c="dimmed" py="md">
         {i18n.t('No tournament data by grade available')}
-      </div>
+      </Box>
     );
   }
 
   return (
-    <div className="table-responsive">
-      <table className="table table-dark table-sm mb-0">
-        <thead>
-          <tr className="text-muted small">
-            <th>{i18n.t('Grade')}</th>
-            <th className="text-center">{i18n.t('Tournaments')}</th>
-            <th className="text-center">{i18n.t('Points')}</th>
-            <th className="text-center">{i18n.t('Wins')}</th>
-            <th className="text-center">{i18n.t('Best')}</th>
-            <th className="text-center">{i18n.t('Avg')}</th>
-            <th className="text-center">{i18n.t('Podiums')}</th>
-          </tr>
-        </thead>
-        <tbody>
+    <Table.ScrollContainer minWidth={520}>
+      <Table verticalSpacing="xs" mb={0}>
+        <Table.Thead>
+          <Table.Tr c="dimmed" fz="sm">
+            <Table.Th>{i18n.t('Grade')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Tournaments')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Points')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Wins')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Best')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Avg')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Podiums')}</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
           {gradeStats.map((g) => (
-            <tr key={g.grade}>
-              <td>
-                <span className="fw-bold" style={{ color: GRADE_COLORS[g.grade] || '#666' }}>
+            <Table.Tr key={g.grade}>
+              <Table.Td>
+                <Text component="span" fw={700} style={{ color: GRADE_COLORS[g.grade] || '#666' }}>
                   {formatGradeName(g.grade)}
-                </span>
-              </td>
-              <td className="text-center">{g.tournaments_count}</td>
-              <td className="text-center fw-bold text-warning">{g.total_points}</td>
-              <td className="text-center text-success">{g.total_wins}</td>
-              <td className="text-center">
+                </Text>
+              </Table.Td>
+              <Table.Td ta="center">{g.tournaments_count}</Table.Td>
+              <Table.Td ta="center" fw={700} c="yellow">
+                {g.total_points}
+              </Table.Td>
+              <Table.Td ta="center" c="green">
+                {g.total_wins}
+              </Table.Td>
+              <Table.Td ta="center">
                 {g.best_place ? (
-                  <span className={cn('badge badge-sm', getPlaceBadgeClass(g.best_place))}>
+                  <Badge size="sm" color={placeBadgeColor(g.best_place)}>
                     {g.best_place}
-                  </span>
+                  </Badge>
                 ) : (
                   '-'
                 )}
-              </td>
-              <td className="text-center">{g.avg_place?.toFixed(1) || '-'}</td>
-              <td className="text-center">
-                {g.podium_finishes && g.podium_finishes.length > 0 ? (
-                  <span>{g.podium_finishes.map((p) => getMedalEmoji(p)).join('')}</span>
-                ) : (
-                  '-'
-                )}
-              </td>
-            </tr>
+              </Table.Td>
+              <Table.Td ta="center">{g.avg_place?.toFixed(1) || '-'}</Table.Td>
+              <Table.Td ta="center">
+                {g.podium_finishes && g.podium_finishes.length > 0
+                  ? g.podium_finishes.map((p) => getMedalEmoji(p)).join('')
+                  : '-'}
+              </Table.Td>
+            </Table.Tr>
           ))}
-        </tbody>
-      </table>
-    </div>
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
   );
 }
 
@@ -286,54 +328,62 @@ function GradeStatsTable({ gradeStats }: { gradeStats?: GradeStat[] }) {
 function TournamentsTable({ tournaments }: { tournaments?: TournamentResult[] }) {
   if (!tournaments || tournaments.length === 0) {
     return (
-      <div className="text-center text-muted py-3">{i18n.t('No tournament data available')}</div>
+      <Box ta="center" c="dimmed" py="md">
+        {i18n.t('No tournament data available')}
+      </Box>
     );
   }
 
   return (
-    <div className="table-responsive">
-      <table className="table table-dark table-sm table-hover mb-0">
-        <thead className="bg-dark">
-          <tr className="text-muted small">
-            <th>{i18n.t('Tournament')}</th>
-            <th className="text-center">{i18n.t('Grade')}</th>
-            <th className="text-center">{i18n.t('Place')}</th>
-            <th className="text-center">{i18n.t('Points')}</th>
-            <th className="text-center">{i18n.t('W/G')}</th>
-          </tr>
-        </thead>
-        <tbody>
+    <Table.ScrollContainer minWidth={520}>
+      <Table verticalSpacing="xs" highlightOnHover mb={0}>
+        <Table.Thead>
+          <Table.Tr c="dimmed" fz="sm">
+            <Table.Th>{i18n.t('Tournament')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Grade')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Place')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('Points')}</Table.Th>
+            <Table.Th ta="center">{i18n.t('W/G')}</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
           {tournaments.map((t) => (
-            <tr key={t.tournament_id}>
-              <td>
-                <a
-                  href={`/tournaments/${t.tournament_id}`}
-                  className="text-light text-decoration-none"
-                >
+            <Table.Tr key={t.tournament_id}>
+              <Table.Td>
+                <Anchor href={`/tournaments/${t.tournament_id}`} c="gray.4" underline="never">
                   {t.tournament_name || i18n.t('Tournament #%{id}', { id: t.tournament_id })}
-                  <small className="text-muted ml-2">{formatDate(t.started_at)}</small>
-                </a>
-              </td>
-              <td className="text-center">
-                <span className="fw-bold" style={{ color: GRADE_COLORS[t.grade] || '#666' }}>
+                  <Text component="span" c="dimmed" fz="xs" ml="sm">
+                    {formatDate(t.started_at)}
+                  </Text>
+                </Anchor>
+              </Table.Td>
+              <Table.Td ta="center">
+                <Text component="span" fw={700} style={{ color: GRADE_COLORS[t.grade] || '#666' }}>
                   {formatGradeName(t.grade)}
-                </span>
-              </td>
-              <td className="text-center">
-                <span className={cn('badge badge-sm', getPlaceBadgeClass(t.place))}>
+                </Text>
+              </Table.Td>
+              <Table.Td ta="center">
+                <Badge size="sm" color={placeBadgeColor(t.place)}>
                   {t.place <= 3 ? getMedalEmoji(t.place) : `#${t.place}`}
-                </span>
-                <small className="text-muted ml-1">/{t.total_participants}</small>
-              </td>
-              <td className="text-center fw-bold text-warning">{t.points}</td>
-              <td className="text-center">
-                <span className="text-success">{t.wins_count}</span>/{t.games_count}
-              </td>
-            </tr>
+                </Badge>
+                <Text component="span" c="dimmed" fz="xs" ml={4}>
+                  /{t.total_participants}
+                </Text>
+              </Table.Td>
+              <Table.Td ta="center" fw={700} c="yellow">
+                {t.points}
+              </Table.Td>
+              <Table.Td ta="center">
+                <Text component="span" c="green">
+                  {t.wins_count}
+                </Text>
+                /{t.games_count}
+              </Table.Td>
+            </Table.Tr>
           ))}
-        </tbody>
-      </table>
-    </div>
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
   );
 }
 
@@ -345,6 +395,21 @@ interface PlayerInsightsModalProps {
   season?: Season | null;
 }
 
+interface StatRowProps {
+  label: string;
+  children: React.ReactNode;
+}
+
+// One row of the overview stats list (was `d-flex justify-content-between mb-2`).
+function StatRow({ label, children }: StatRowProps) {
+  return (
+    <Group justify="space-between" mb="sm">
+      <Text c="dimmed">{label}</Text>
+      {children}
+    </Group>
+  );
+}
+
 // Player Insights Modal with API loading
 function PlayerInsightsModal({
   show,
@@ -452,328 +517,293 @@ function PlayerInsightsModal({
       : 0;
 
   return (
-    <Modal
-      show={show}
-      onHide={onHide}
-      size="xl"
-      centered
-      contentClassName="text-light"
-      dialogClassName="modal-90w"
-    >
+    <Modal show={show} onHide={onHide} size="90%" centered>
       <Modal.Header
         closeButton
-        className="border-secondary"
-        // `closeVariant` is not typed on this react-bootstrap version's
-        // ModalHeaderProps; passed through as an extra prop.
-        {...({ closeVariant: 'white' } as { closeVariant: string })}
+        style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}
       >
-        <div className="w-100">
-          <div className="d-flex align-items-center justify-content-between">
+        <Box w="100%">
+          <Group align="center" justify="space-between" wrap="nowrap">
             {/* Left: Rank + Avatar + Name */}
-            <div className="d-flex align-items-center">
-              <div className="text-center mr-3" style={{ minWidth: '60px' }}>
-                <div className={cn('badge fs-4 px-3 py-2', getPlaceBadgeClass(player.place))}>
+            <Group align="center" wrap="nowrap">
+              <Box ta="center" miw={60}>
+                <Badge size="xl" color={placeBadgeColor(player.place)}>
                   {getMedalEmoji(player.place) || `#${player.place}`}
-                </div>
-              </div>
+                </Badge>
+              </Box>
               {player.avatar_url && (
-                <img
-                  src={player.avatar_url}
-                  alt={player.user_name}
-                  className="rounded mr-3"
-                  style={{ width: '48px', height: '48px' }}
-                />
+                <Avatar src={player.avatar_url} alt={player.user_name} size={48} radius="md" />
               )}
-              <div>
-                <h4 className="mb-0 text-white">{player.user_name}</h4>
-                <div className="text-muted small">
+              <Box>
+                <Text fz="1.5rem" fw={700} c="white">
+                  {player.user_name}
+                </Text>
+                <Text c="dimmed" size="sm">
                   {season?.name} {season?.year}
-                  {player.clan_name && <span className="text-info ml-2">{player.clan_name}</span>}
-                </div>
-              </div>
-            </div>
+                  {player.clan_name && (
+                    <Text component="span" c="cyan" ml="sm">
+                      {player.clan_name}
+                    </Text>
+                  )}
+                </Text>
+              </Box>
+            </Group>
 
             {/* Right: Quick Stats */}
-            <div className="d-flex mr-5">
-              <div className="text-center px-4">
-                <div className="fs-4 fw-bold text-warning">
+            <Group mr="xl" gap="xl" wrap="nowrap">
+              <Box ta="center">
+                <Text fz="1.5rem" fw={700} c="yellow">
                   {player.total_points.toLocaleString()}
-                </div>
-                <div className="text-muted small text-uppercase">{i18n.t('Points')}</div>
-              </div>
-              <div className="text-center px-4">
-                <div className="fs-4 fw-bold text-success">{player.total_wins_count}</div>
-                <div className="text-muted small text-uppercase">{i18n.t('Wins')}</div>
-              </div>
-              <div className="text-center px-4">
-                <div className="fs-4 fw-bold text-info">{player.tournaments_count}</div>
-                <div className="text-muted small text-uppercase">{i18n.t('Tournaments')}</div>
-              </div>
-            </div>
-          </div>
-        </div>
+                </Text>
+                <Text c="dimmed" size="sm" tt="uppercase">
+                  {i18n.t('Points')}
+                </Text>
+              </Box>
+              <Box ta="center">
+                <Text fz="1.5rem" fw={700} c="green">
+                  {player.total_wins_count}
+                </Text>
+                <Text c="dimmed" size="sm" tt="uppercase">
+                  {i18n.t('Wins')}
+                </Text>
+              </Box>
+              <Box ta="center">
+                <Text fz="1.5rem" fw={700} c="cyan">
+                  {player.tournaments_count}
+                </Text>
+                <Text c="dimmed" size="sm" tt="uppercase">
+                  {i18n.t('Tournaments')}
+                </Text>
+              </Box>
+            </Group>
+          </Group>
+        </Box>
       </Modal.Header>
 
-      <Modal.Body className="p-0" style={{ maxHeight: '75vh', overflowY: 'auto' }}>
+      <Modal.Body style={{ padding: 0, maxHeight: '75vh', overflowY: 'auto' }}>
         {/* Tabs */}
-        <div className="d-flex justify-content-center p-3 border-bottom border-secondary sticky-top bg-dark">
-          <button
-            type="button"
-            className={cn('btn btn-sm mr-2', {
-              'btn-info': activeTab === 'overview',
-              'btn-outline-secondary': activeTab !== 'overview',
-            })}
-            onClick={() => setActiveTab('overview')}
-          >
-            {i18n.t('Overview')}
-          </button>
-          <button
-            type="button"
-            className={cn('btn btn-sm mr-2', {
-              'btn-info': activeTab === 'grades',
-              'btn-outline-secondary': activeTab !== 'grades',
-            })}
-            onClick={() => setActiveTab('grades')}
-          >
-            {i18n.t('By Grade')}
-          </button>
-          <button
-            type="button"
-            className={cn('btn btn-sm mr-2', {
-              'btn-info': activeTab === 'tournaments',
-              'btn-outline-secondary': activeTab !== 'tournaments',
-            })}
-            onClick={() => setActiveTab('tournaments')}
-          >
-            {i18n.t('Tournaments')}
-          </button>
-          <button
-            type="button"
-            className={cn('btn btn-sm', {
-              'btn-info': activeTab === 'trends',
-              'btn-outline-secondary': activeTab !== 'trends',
-            })}
-            onClick={() => setActiveTab('trends')}
-          >
-            {i18n.t('Trends')}
-          </button>
-        </div>
+        <Group
+          justify="center"
+          gap="sm"
+          p="md"
+          pos="sticky"
+          top={0}
+          bg="dark.7"
+          style={{ borderBottom: '1px solid var(--mantine-color-default-border)', zIndex: 2 }}
+        >
+          {[
+            ['overview', i18n.t('Overview')],
+            ['grades', i18n.t('By Grade')],
+            ['tournaments', i18n.t('Tournaments')],
+            ['trends', i18n.t('Trends')],
+          ].map(([key, label]) => (
+            <Button
+              key={key}
+              size="xs"
+              color="cyan"
+              variant={activeTab === key ? 'filled' : 'default'}
+              onClick={() => setActiveTab(key)}
+            >
+              {label}
+            </Button>
+          ))}
+        </Group>
 
         {/* Loading State */}
         {loading && (
-          <div className="text-center py-5">
+          <Box ta="center" py="xl">
             <Loader color="blue" />
-            <p className="text-muted mt-2">{i18n.t('Loading detailed stats...')}</p>
-          </div>
+            <Text c="dimmed" mt="sm">
+              {i18n.t('Loading detailed stats...')}
+            </Text>
+          </Box>
         )}
 
         {/* Error State */}
         {error && !loading && (
-          <div className="alert alert-warning m-3">
+          <Alert color="yellow" m="md">
             {error}. {i18n.t('Showing basic stats only.')}
-          </div>
+          </Alert>
         )}
 
         {/* Tab Content */}
         {!loading && (
-          <div className="p-3">
+          <Box p="md">
             {/* Overview Tab */}
             {activeTab === 'overview' && (
-              <div className="row">
+              <Grid>
                 {/* Left Column - Weapon + Stats */}
-                <div className="col-md-5">
+                <Grid.Col span={{ base: 12, md: 5 }}>
                   {/* Weapon Section */}
                   {player.user_lang && (
-                    <div className="mb-4 text-center">
-                      <h6 className="text-muted text-uppercase mb-3">{i18n.t('Weapon')}</h6>
+                    <Box mb="lg" ta="center">
+                      <SectionHeading>{i18n.t('Weapon')}</SectionHeading>
                       <LanguageIcon
                         lang={player.user_lang}
                         style={{ width: '80px', height: '80px' }}
                       />
-                      <div className="fs-5 text-white text-capitalize mt-2">{player.user_lang}</div>
-                    </div>
+                      <Text fz="1.25rem" c="white" tt="capitalize" mt="sm">
+                        {player.user_lang}
+                      </Text>
+                    </Box>
                   )}
 
                   {/* Stats List */}
-                  <div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Season Rank')}</span>
-                      <span className="fw-bold text-warning">
+                  <Box>
+                    <StatRow label={i18n.t('Season Rank')}>
+                      <Text fw={700} c="yellow">
                         #{player.place}{' '}
-                        <small className="text-muted">
+                        <Text component="span" c="dimmed" fz="sm">
                           {i18n.t('/ Top %{percent}%', { percent: 100 - percentile })}
-                        </small>
-                      </span>
-                    </div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Total Points')}</span>
-                      <span className="fw-bold text-warning">
+                        </Text>
+                      </Text>
+                    </StatRow>
+                    <StatRow label={i18n.t('Total Points')}>
+                      <Text fw={700} c="yellow">
                         {player.total_points.toLocaleString()}
-                      </span>
-                    </div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Total Score')}</span>
-                      <span className="fw-bold text-info">
+                      </Text>
+                    </StatRow>
+                    <StatRow label={i18n.t('Total Score')}>
+                      <Text fw={700} c="cyan">
                         {player.total_score.toLocaleString()}
-                      </span>
-                    </div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Total Wins')}</span>
-                      <span className="fw-bold text-success">{player.total_wins_count}</span>
-                    </div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Total Games')}</span>
-                      <span className="fw-bold">{player.total_games_count}</span>
-                    </div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Tournaments')}</span>
-                      <span className="fw-bold">{player.tournaments_count}</span>
-                    </div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Best Finish')}</span>
-                      <span>
-                        {player.best_place ? (
-                          <span className={cn('badge', getPlaceBadgeClass(player.best_place))}>
-                            #{player.best_place}
-                          </span>
-                        ) : (
-                          '-'
-                        )}
-                      </span>
-                    </div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Avg Finish')}</span>
-                      <span className="fw-bold">
+                      </Text>
+                    </StatRow>
+                    <StatRow label={i18n.t('Total Wins')}>
+                      <Text fw={700} c="green">
+                        {player.total_wins_count}
+                      </Text>
+                    </StatRow>
+                    <StatRow label={i18n.t('Total Games')}>
+                      <Text fw={700}>{player.total_games_count}</Text>
+                    </StatRow>
+                    <StatRow label={i18n.t('Tournaments')}>
+                      <Text fw={700}>{player.tournaments_count}</Text>
+                    </StatRow>
+                    <StatRow label={i18n.t('Best Finish')}>
+                      {player.best_place ? (
+                        <Badge color={placeBadgeColor(player.best_place)}>
+                          #{player.best_place}
+                        </Badge>
+                      ) : (
+                        <Text component="span">-</Text>
+                      )}
+                    </StatRow>
+                    <StatRow label={i18n.t('Avg Finish')}>
+                      <Text fw={700}>
                         #{player.avg_place ? Number(player.avg_place).toFixed(1) : '-'}
-                      </span>
-                    </div>
-                    <div className="d-flex justify-content-between mb-2">
-                      <span className="text-muted">{i18n.t('Time Played')}</span>
-                      <span className="fw-bold">{formatTime(player.total_time)}</span>
-                    </div>
-                  </div>
-                </div>
+                      </Text>
+                    </StatRow>
+                    <StatRow label={i18n.t('Time Played')}>
+                      <Text fw={700}>{formatTime(player.total_time)}</Text>
+                    </StatRow>
+                  </Box>
+                </Grid.Col>
 
                 {/* Right Column - Win Rate + Grades + Comparison */}
-                <div className="col-md-7">
+                <Grid.Col span={{ base: 12, md: 7 }}>
                   {/* Win Rate Chart */}
                   <WinRateChart wins={player.total_wins_count} total={player.total_games_count} />
 
                   {/* Tournaments by Grade */}
-                  <div className="card cb-bg-panel border-0 mb-3 mt-3">
-                    <div className="card-body">
-                      <h6 className="text-muted text-uppercase mb-3">
-                        {i18n.t('Tournaments by Grade')}
-                      </h6>
-                      <div className="row">
-                        {ALL_GRADES.map((grade) => (
-                          <div key={grade} className="col-6 col-md-4">
-                            <div className="d-flex align-items-center">
-                              <span
-                                className="fw-bold"
-                                style={{ color: GRADE_COLORS[grade], minWidth: '90px' }}
-                              >
-                                {formatGradeName(grade)}
-                              </span>
-                              <span className="fw-bold text-white ml-2">
-                                {gradeWins[grade] || 0}
-                              </span>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
+                  <Card className="cb-bg-panel" p="md" radius="md" mb="md" mt="md">
+                    <SectionHeading>{i18n.t('Tournaments by Grade')}</SectionHeading>
+                    <Grid>
+                      {ALL_GRADES.map((grade) => (
+                        <Grid.Col key={grade} span={{ base: 6, md: 4 }}>
+                          <Group align="center" gap="sm" wrap="nowrap">
+                            <Text fw={700} style={{ color: GRADE_COLORS[grade], minWidth: '90px' }}>
+                              {formatGradeName(grade)}
+                            </Text>
+                            <Text fw={700} c="white">
+                              {gradeWins[grade] || 0}
+                            </Text>
+                          </Group>
+                        </Grid.Col>
+                      ))}
+                    </Grid>
+                  </Card>
 
                   {/* Quick comparison with median */}
                   {medianStats && (
-                    <div className="card cb-bg-panel border-0">
-                      <div className="card-body">
-                        <h6 className="text-muted text-uppercase mb-3">
-                          {i18n.t('vs Median Player')}
-                        </h6>
-                        <div className="row small">
-                          <div className="col-6">
-                            <span className="text-muted">{i18n.t('Points:')} </span>
-                            <span
-                              className={cn(
-                                'fw-bold',
-                                player.total_points >= medianStats.points
-                                  ? 'text-success'
-                                  : 'text-danger',
-                              )}
-                            >
-                              {player.total_points >= medianStats.points ? '+' : ''}
-                              {(player.total_points - medianStats.points).toLocaleString()}
-                            </span>
-                          </div>
-                          <div className="col-6">
-                            <span className="text-muted">{i18n.t('Win Rate:')} </span>
-                            <span
-                              className={cn(
-                                'fw-bold',
-                                playerWinRate >= medianStats.winRate
-                                  ? 'text-success'
-                                  : 'text-danger',
-                              )}
-                            >
-                              {playerWinRate >= medianStats.winRate ? '+' : ''}
-                              {(playerWinRate - medianStats.winRate).toFixed(1)}%
-                            </span>
-                          </div>
-                          <div className="col-6">
-                            <span className="text-muted">{i18n.t('Wins:')} </span>
-                            <span
-                              className={cn(
-                                'fw-bold',
-                                player.total_wins_count >= medianStats.wins
-                                  ? 'text-success'
-                                  : 'text-danger',
-                              )}
-                            >
-                              {player.total_wins_count >= medianStats.wins ? '+' : ''}
-                              {player.total_wins_count - medianStats.wins}
-                            </span>
-                          </div>
-                          <div className="col-6">
-                            <span className="text-muted">{i18n.t('Tournaments:')} </span>
-                            <span
-                              className={cn(
-                                'fw-bold',
-                                player.tournaments_count >= medianStats.tournaments
-                                  ? 'text-success'
-                                  : 'text-danger',
-                              )}
-                            >
-                              {player.tournaments_count >= medianStats.tournaments ? '+' : ''}
-                              {player.tournaments_count - medianStats.tournaments}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                    <Card className="cb-bg-panel" p="md" radius="md">
+                      <SectionHeading>{i18n.t('vs Median Player')}</SectionHeading>
+                      <Grid fz="sm">
+                        <Grid.Col span={6}>
+                          <Text component="span" c="dimmed">
+                            {i18n.t('Points:')}{' '}
+                          </Text>
+                          <Text
+                            component="span"
+                            fw={700}
+                            c={player.total_points >= medianStats.points ? 'green' : 'red'}
+                          >
+                            {player.total_points >= medianStats.points ? '+' : ''}
+                            {(player.total_points - medianStats.points).toLocaleString()}
+                          </Text>
+                        </Grid.Col>
+                        <Grid.Col span={6}>
+                          <Text component="span" c="dimmed">
+                            {i18n.t('Win Rate:')}{' '}
+                          </Text>
+                          <Text
+                            component="span"
+                            fw={700}
+                            c={playerWinRate >= medianStats.winRate ? 'green' : 'red'}
+                          >
+                            {playerWinRate >= medianStats.winRate ? '+' : ''}
+                            {(playerWinRate - medianStats.winRate).toFixed(1)}%
+                          </Text>
+                        </Grid.Col>
+                        <Grid.Col span={6}>
+                          <Text component="span" c="dimmed">
+                            {i18n.t('Wins:')}{' '}
+                          </Text>
+                          <Text
+                            component="span"
+                            fw={700}
+                            c={player.total_wins_count >= medianStats.wins ? 'green' : 'red'}
+                          >
+                            {player.total_wins_count >= medianStats.wins ? '+' : ''}
+                            {player.total_wins_count - medianStats.wins}
+                          </Text>
+                        </Grid.Col>
+                        <Grid.Col span={6}>
+                          <Text component="span" c="dimmed">
+                            {i18n.t('Tournaments:')}{' '}
+                          </Text>
+                          <Text
+                            component="span"
+                            fw={700}
+                            c={
+                              player.tournaments_count >= medianStats.tournaments ? 'green' : 'red'
+                            }
+                          >
+                            {player.tournaments_count >= medianStats.tournaments ? '+' : ''}
+                            {player.tournaments_count - medianStats.tournaments}
+                          </Text>
+                        </Grid.Col>
+                      </Grid>
+                    </Card>
                   )}
-                </div>
-              </div>
+                </Grid.Col>
+              </Grid>
             )}
 
             {/* Grades Tab */}
             {activeTab === 'grades' && (
               <>
-                <h6 className="text-muted text-uppercase mb-3">
-                  {i18n.t('Tournament Performance by Grade')}
-                </h6>
+                <SectionHeading>{i18n.t('Tournament Performance by Grade')}</SectionHeading>
                 {detailedStats?.grade_stats ? (
                   <>
                     <GradeStatsTable gradeStats={detailedStats.grade_stats} />
-                    <div className="mt-4">
+                    <Box mt="lg">
                       <GradeStatsChart gradeStats={detailedStats.grade_stats} />
-                    </div>
+                    </Box>
                   </>
                 ) : (
-                  <div className="text-center text-muted py-3">
+                  <Box ta="center" c="dimmed" py="md">
                     {i18n.t(loading ? 'Loading...' : 'No grade stats available')}
-                  </div>
+                  </Box>
                 )}
               </>
             )}
@@ -781,13 +811,13 @@ function PlayerInsightsModal({
             {/* Tournaments Tab */}
             {activeTab === 'tournaments' && (
               <>
-                <h6 className="text-muted text-uppercase mb-3">{i18n.t('Tournament Results')}</h6>
+                <SectionHeading>{i18n.t('Tournament Results')}</SectionHeading>
                 {detailedStats?.recent_tournaments ? (
                   <TournamentsTable tournaments={detailedStats.recent_tournaments} />
                 ) : (
-                  <div className="text-center text-muted py-3">
+                  <Box ta="center" c="dimmed" py="md">
                     {i18n.t(loading ? 'Loading...' : 'No tournament data available')}
-                  </div>
+                  </Box>
                 )}
               </>
             )}
@@ -795,337 +825,307 @@ function PlayerInsightsModal({
             {/* Trends Tab */}
             {activeTab === 'trends' && (
               <>
-                <h6 className="text-muted text-uppercase mb-3">
-                  {i18n.t('Performance Over Time')}
-                </h6>
+                <SectionHeading>{i18n.t('Performance Over Time')}</SectionHeading>
                 {detailedStats?.performance_trend && detailedStats.performance_trend.length > 0 ? (
                   <PerformanceTrendChart trend={detailedStats.performance_trend} />
                 ) : (
-                  <div className="text-center text-muted py-3">
+                  <Box ta="center" c="dimmed" py="md">
                     {i18n.t(loading ? 'Loading...' : 'Not enough data for trend analysis')}
-                  </div>
+                  </Box>
                 )}
 
                 {/* Comparison Charts with Median */}
                 {medianStats && (
-                  <div className="row mt-4">
+                  <Grid mt="lg">
                     {/* Radar Chart - Overall Comparison */}
-                    <div className="col-md-6 mb-4">
-                      <div className="card cb-bg-panel border-0 h-100">
-                        <div className="card-body">
-                          <h6 className="text-muted small text-uppercase">
-                            {i18n.t('Stats vs Median (Normalized)')}
-                          </h6>
-                          <ResponsiveContainer width="100%" height={250}>
-                            <RadarChart
-                              data={[
-                                {
-                                  stat: i18n.t('Points'),
-                                  player: Math.min(
-                                    (player.total_points / Math.max(medianStats.points, 1)) * 50,
-                                    100,
-                                  ),
-                                  median: 50,
-                                },
-                                {
-                                  stat: i18n.t('Wins'),
-                                  player: Math.min(
-                                    (player.total_wins_count / Math.max(medianStats.wins, 1)) * 50,
-                                    100,
-                                  ),
-                                  median: 50,
-                                },
-                                {
-                                  stat: i18n.t('Win Rate'),
-                                  player: Math.min(
-                                    (playerWinRate / Math.max(medianStats.winRate, 1)) * 50,
-                                    100,
-                                  ),
-                                  median: 50,
-                                },
-                                {
-                                  stat: i18n.t('Score'),
-                                  player: Math.min(
-                                    (player.total_score / Math.max(medianStats.score, 1)) * 50,
-                                    100,
-                                  ),
-                                  median: 50,
-                                },
-                                {
-                                  stat: i18n.t('Tournaments'),
-                                  player: Math.min(
-                                    (player.tournaments_count /
-                                      Math.max(medianStats.tournaments, 1)) *
-                                      50,
-                                    100,
-                                  ),
-                                  median: 50,
-                                },
-                              ]}
-                            >
-                              <PolarGrid stroke="#444" />
-                              <PolarAngleAxis
-                                dataKey="stat"
-                                stroke="#999"
-                                tick={{ fontSize: 11 }}
-                              />
-                              <PolarRadiusAxis
-                                angle={90}
-                                domain={[0, 100]}
-                                tick={false}
-                                axisLine={false}
-                              />
-                              <Radar
-                                name={i18n.t('You')}
-                                dataKey="player"
-                                stroke="#0dcaf0"
-                                fill="#0dcaf0"
-                                fillOpacity={0.5}
-                              />
-                              <Radar
-                                name={i18n.t('Median')}
-                                dataKey="median"
-                                stroke="#6c757d"
-                                fill="#6c757d"
-                                fillOpacity={0.2}
-                              />
-                              <Legend />
-                            </RadarChart>
-                          </ResponsiveContainer>
-                        </div>
-                      </div>
-                    </div>
+                    <Grid.Col span={{ base: 12, md: 6 }} mb="lg">
+                      <Card className="cb-bg-panel" p="md" radius="md" h="100%">
+                        <SectionHeading>{i18n.t('Stats vs Median (Normalized)')}</SectionHeading>
+                        <ResponsiveContainer width="100%" height={250}>
+                          <RadarChart
+                            data={[
+                              {
+                                stat: i18n.t('Points'),
+                                player: Math.min(
+                                  (player.total_points / Math.max(medianStats.points, 1)) * 50,
+                                  100,
+                                ),
+                                median: 50,
+                              },
+                              {
+                                stat: i18n.t('Wins'),
+                                player: Math.min(
+                                  (player.total_wins_count / Math.max(medianStats.wins, 1)) * 50,
+                                  100,
+                                ),
+                                median: 50,
+                              },
+                              {
+                                stat: i18n.t('Win Rate'),
+                                player: Math.min(
+                                  (playerWinRate / Math.max(medianStats.winRate, 1)) * 50,
+                                  100,
+                                ),
+                                median: 50,
+                              },
+                              {
+                                stat: i18n.t('Score'),
+                                player: Math.min(
+                                  (player.total_score / Math.max(medianStats.score, 1)) * 50,
+                                  100,
+                                ),
+                                median: 50,
+                              },
+                              {
+                                stat: i18n.t('Tournaments'),
+                                player: Math.min(
+                                  (player.tournaments_count /
+                                    Math.max(medianStats.tournaments, 1)) *
+                                    50,
+                                  100,
+                                ),
+                                median: 50,
+                              },
+                            ]}
+                          >
+                            <PolarGrid stroke="#444" />
+                            <PolarAngleAxis dataKey="stat" stroke="#999" tick={{ fontSize: 11 }} />
+                            <PolarRadiusAxis
+                              angle={90}
+                              domain={[0, 100]}
+                              tick={false}
+                              axisLine={false}
+                            />
+                            <Radar
+                              name={i18n.t('You')}
+                              dataKey="player"
+                              stroke="#0dcaf0"
+                              fill="#0dcaf0"
+                              fillOpacity={0.5}
+                            />
+                            <Radar
+                              name={i18n.t('Median')}
+                              dataKey="median"
+                              stroke="#6c757d"
+                              fill="#6c757d"
+                              fillOpacity={0.2}
+                            />
+                            <Legend />
+                          </RadarChart>
+                        </ResponsiveContainer>
+                      </Card>
+                    </Grid.Col>
 
                     {/* Bar Chart - Points Comparison */}
-                    <div className="col-md-6 mb-4">
-                      <div className="card cb-bg-panel border-0 h-100">
-                        <div className="card-body">
-                          <h6 className="text-muted small text-uppercase">
-                            {i18n.t('Your Stats vs Median')}
-                          </h6>
-                          <ResponsiveContainer width="100%" height={250}>
-                            <BarChart
-                              data={[
-                                {
-                                  name: i18n.t('Points'),
-                                  you: player.total_points,
-                                  median: medianStats.points,
-                                },
-                                {
-                                  name: i18n.t('Score'),
-                                  you: player.total_score,
-                                  median: medianStats.score,
-                                },
-                                {
-                                  name: i18n.t('Wins'),
-                                  you: player.total_wins_count,
-                                  median: medianStats.wins,
-                                },
-                                {
-                                  name: i18n.t('Games'),
-                                  you: player.total_games_count,
-                                  median: medianStats.games,
-                                },
-                              ]}
-                              layout="vertical"
-                            >
-                              <CartesianGrid strokeDasharray="3 3" stroke="#444" />
-                              <XAxis type="number" stroke="#999" />
-                              <YAxis type="category" dataKey="name" stroke="#999" width={60} />
-                              <Tooltip
-                                contentStyle={{
-                                  backgroundColor: '#1a1a1a',
-                                  border: '1px solid #333',
-                                }}
-                              />
-                              <Legend />
-                              <Bar dataKey="you" name={i18n.t('You')} fill="#0dcaf0" />
-                              <Bar dataKey="median" name={i18n.t('Median')} fill="#6c757d" />
-                            </BarChart>
-                          </ResponsiveContainer>
-                        </div>
-                      </div>
-                    </div>
+                    <Grid.Col span={{ base: 12, md: 6 }} mb="lg">
+                      <Card className="cb-bg-panel" p="md" radius="md" h="100%">
+                        <SectionHeading>{i18n.t('Your Stats vs Median')}</SectionHeading>
+                        <ResponsiveContainer width="100%" height={250}>
+                          <BarChart
+                            data={[
+                              {
+                                name: i18n.t('Points'),
+                                you: player.total_points,
+                                median: medianStats.points,
+                              },
+                              {
+                                name: i18n.t('Score'),
+                                you: player.total_score,
+                                median: medianStats.score,
+                              },
+                              {
+                                name: i18n.t('Wins'),
+                                you: player.total_wins_count,
+                                median: medianStats.wins,
+                              },
+                              {
+                                name: i18n.t('Games'),
+                                you: player.total_games_count,
+                                median: medianStats.games,
+                              },
+                            ]}
+                            layout="vertical"
+                          >
+                            <CartesianGrid strokeDasharray="3 3" stroke="#444" />
+                            <XAxis type="number" stroke="#999" />
+                            <YAxis type="category" dataKey="name" stroke="#999" width={60} />
+                            <Tooltip
+                              contentStyle={{
+                                backgroundColor: '#1a1a1a',
+                                border: '1px solid #333',
+                              }}
+                            />
+                            <Legend />
+                            <Bar dataKey="you" name={i18n.t('You')} fill="#0dcaf0" />
+                            <Bar dataKey="median" name={i18n.t('Median')} fill="#6c757d" />
+                          </BarChart>
+                        </ResponsiveContainer>
+                      </Card>
+                    </Grid.Col>
 
                     {/* Win Rate Comparison */}
-                    <div className="col-md-6 mb-4">
-                      <div className="card cb-bg-panel border-0 h-100">
-                        <div className="card-body">
-                          <h6 className="text-muted small text-uppercase">
-                            {i18n.t('Win Rate Comparison')}
-                          </h6>
-                          <ResponsiveContainer width="100%" height={200}>
-                            <BarChart
+                    <Grid.Col span={{ base: 12, md: 6 }} mb="lg">
+                      <Card className="cb-bg-panel" p="md" radius="md" h="100%">
+                        <SectionHeading>{i18n.t('Win Rate Comparison')}</SectionHeading>
+                        <ResponsiveContainer width="100%" height={200}>
+                          <BarChart
+                            data={[
+                              {
+                                name: i18n.t('Win Rate %'),
+                                you: playerWinRate,
+                                median: Math.round(medianStats.winRate),
+                              },
+                            ]}
+                          >
+                            <CartesianGrid strokeDasharray="3 3" stroke="#444" />
+                            <XAxis dataKey="name" stroke="#999" />
+                            <YAxis stroke="#999" domain={[0, 100]} />
+                            <Tooltip
+                              contentStyle={{
+                                backgroundColor: '#1a1a1a',
+                                border: '1px solid #333',
+                              }}
+                              formatter={(value) => [`${value}%`, '']}
+                            />
+                            <Legend />
+                            <Bar dataKey="you" name={i18n.t('You')} fill="#198754" />
+                            <Bar dataKey="median" name={i18n.t('Median')} fill="#6c757d" />
+                            <ReferenceLine
+                              y={50}
+                              stroke="#ffc107"
+                              strokeDasharray="3 3"
+                              label={{ value: '50%', fill: '#ffc107', fontSize: 10 }}
+                            />
+                          </BarChart>
+                        </ResponsiveContainer>
+                      </Card>
+                    </Grid.Col>
+
+                    {/* Percentile Gauge */}
+                    <Grid.Col span={{ base: 12, md: 6 }} mb="lg">
+                      <Card className="cb-bg-panel" p="md" radius="md" h="100%">
+                        <SectionHeading>{i18n.t('Your Ranking Percentile')}</SectionHeading>
+                        <ResponsiveContainer width="100%" height={200}>
+                          <PieChart>
+                            <Pie
                               data={[
                                 {
-                                  name: i18n.t('Win Rate %'),
-                                  you: playerWinRate,
-                                  median: Math.round(medianStats.winRate),
+                                  name: i18n.t('Your Percentile'),
+                                  value: percentile,
+                                  fill: '#0dcaf0',
+                                },
+                                {
+                                  name: i18n.t('Above You'),
+                                  value: 100 - percentile,
+                                  fill: '#2d2d2d',
                                 },
                               ]}
+                              cx="50%"
+                              cy="50%"
+                              innerRadius={50}
+                              outerRadius={70}
+                              startAngle={180}
+                              endAngle={0}
+                              dataKey="value"
                             >
-                              <CartesianGrid strokeDasharray="3 3" stroke="#444" />
-                              <XAxis dataKey="name" stroke="#999" />
-                              <YAxis stroke="#999" domain={[0, 100]} />
-                              <Tooltip
-                                contentStyle={{
-                                  backgroundColor: '#1a1a1a',
-                                  border: '1px solid #333',
-                                }}
-                                formatter={(value) => [`${value}%`, '']}
-                              />
-                              <Legend />
-                              <Bar dataKey="you" name={i18n.t('You')} fill="#198754" />
-                              <Bar dataKey="median" name={i18n.t('Median')} fill="#6c757d" />
-                              <ReferenceLine
-                                y={50}
-                                stroke="#ffc107"
-                                strokeDasharray="3 3"
-                                label={{ value: '50%', fill: '#ffc107', fontSize: 10 }}
-                              />
-                            </BarChart>
-                          </ResponsiveContainer>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Percentile Gauge */}
-                    <div className="col-md-6 mb-4">
-                      <div className="card cb-bg-panel border-0 h-100">
-                        <div className="card-body">
-                          <h6 className="text-muted small text-uppercase">
-                            {i18n.t('Your Ranking Percentile')}
-                          </h6>
-                          <ResponsiveContainer width="100%" height={200}>
-                            <PieChart>
-                              <Pie
-                                data={[
-                                  {
-                                    name: i18n.t('Your Percentile'),
-                                    value: percentile,
-                                    fill: '#0dcaf0',
-                                  },
-                                  {
-                                    name: i18n.t('Above You'),
-                                    value: 100 - percentile,
-                                    fill: '#2d2d2d',
-                                  },
-                                ]}
-                                cx="50%"
-                                cy="50%"
-                                innerRadius={50}
-                                outerRadius={70}
-                                startAngle={180}
-                                endAngle={0}
-                                dataKey="value"
-                              >
-                                <Cell fill="#0dcaf0" />
-                                <Cell fill="#2d2d2d" />
-                              </Pie>
-                              <Tooltip
-                                contentStyle={{
-                                  backgroundColor: '#1a1a1a',
-                                  border: '1px solid #333',
-                                }}
-                              />
-                            </PieChart>
-                          </ResponsiveContainer>
-                          <div className="text-center" style={{ marginTop: '-60px' }}>
-                            <div className="fs-3 fw-bold text-info">
-                              {i18n.t('Top %{percent}%', { percent: 100 - percentile })}
-                            </div>
-                            <div className="text-muted small">
-                              {i18n.t('Better than %{percent}% of players', {
-                                percent: percentile,
-                              })}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                              <Cell fill="#0dcaf0" />
+                              <Cell fill="#2d2d2d" />
+                            </Pie>
+                            <Tooltip
+                              contentStyle={{
+                                backgroundColor: '#1a1a1a',
+                                border: '1px solid #333',
+                              }}
+                            />
+                          </PieChart>
+                        </ResponsiveContainer>
+                        <Box ta="center" style={{ marginTop: '-60px' }}>
+                          <Text fz="1.75rem" fw={700} c="cyan">
+                            {i18n.t('Top %{percent}%', { percent: 100 - percentile })}
+                          </Text>
+                          <Text c="dimmed" size="sm">
+                            {i18n.t('Better than %{percent}% of players', {
+                              percent: percentile,
+                            })}
+                          </Text>
+                        </Box>
+                      </Card>
+                    </Grid.Col>
+                  </Grid>
                 )}
 
                 {/* Points distribution bar chart */}
                 {detailedStats?.grade_stats && (
-                  <div className="row mt-2">
-                    <div className="col-md-6">
-                      <div className="card cb-bg-panel border-0">
-                        <div className="card-body">
-                          <h6 className="text-muted small text-uppercase">
-                            {i18n.t('Points Distribution by Grade')}
-                          </h6>
-                          <ResponsiveContainer width="100%" height={200}>
-                            <BarChart
-                              data={ALL_GRADES.map((grade) => {
-                                const gradeData = detailedStats.grade_stats?.find(
-                                  (g) => g.grade === grade,
-                                );
-                                return {
-                                  name: formatGradeName(grade),
-                                  points: gradeData?.total_points || 0,
-                                  fill: GRADE_COLORS[grade],
-                                };
-                              })}
-                            >
-                              <CartesianGrid strokeDasharray="3 3" stroke="#444" />
-                              <XAxis dataKey="name" stroke="#999" tick={{ fontSize: 10 }} />
-                              <YAxis stroke="#999" />
-                              <Tooltip
-                                contentStyle={{
-                                  backgroundColor: '#1a1a1a',
-                                  border: '1px solid #333',
-                                }}
-                                formatter={(value) => [
-                                  Number(value).toLocaleString(),
-                                  i18n.t('Points'),
-                                ]}
-                              />
-                              <Bar dataKey="points" name={i18n.t('Points')}>
-                                {ALL_GRADES.map((grade) => (
-                                  <Cell key={`cell-${grade}`} fill={GRADE_COLORS[grade]} />
-                                ))}
-                              </Bar>
-                            </BarChart>
-                          </ResponsiveContainer>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="col-md-6">
-                      <div className="card cb-bg-panel border-0">
-                        <div className="card-body">
-                          <h6 className="text-muted small text-uppercase">
-                            {i18n.t('Wins by Grade')}
-                          </h6>
-                          <ResponsiveContainer width="100%" height={200}>
-                            <BarChart
-                              data={detailedStats.grade_stats.map((g) => ({
-                                name: formatGradeName(g.grade),
-                                wins: g.total_wins,
-                                games: g.total_games,
-                                fill: GRADE_COLORS[g.grade],
-                              }))}
-                            >
-                              <CartesianGrid strokeDasharray="3 3" stroke="#444" />
-                              <XAxis dataKey="name" stroke="#999" tick={{ fontSize: 10 }} />
-                              <YAxis stroke="#999" />
-                              <Tooltip
-                                contentStyle={{
-                                  backgroundColor: '#1a1a1a',
-                                  border: '1px solid #333',
-                                }}
-                              />
-                              <Bar dataKey="wins" name={i18n.t('Wins')} fill="#198754" />
-                            </BarChart>
-                          </ResponsiveContainer>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                  <Grid mt="sm">
+                    <Grid.Col span={{ base: 12, md: 6 }}>
+                      <Card className="cb-bg-panel" p="md" radius="md">
+                        <SectionHeading>{i18n.t('Points Distribution by Grade')}</SectionHeading>
+                        <ResponsiveContainer width="100%" height={200}>
+                          <BarChart
+                            data={ALL_GRADES.map((grade) => {
+                              const gradeData = detailedStats.grade_stats?.find(
+                                (g) => g.grade === grade,
+                              );
+                              return {
+                                name: formatGradeName(grade),
+                                points: gradeData?.total_points || 0,
+                                fill: GRADE_COLORS[grade],
+                              };
+                            })}
+                          >
+                            <CartesianGrid strokeDasharray="3 3" stroke="#444" />
+                            <XAxis dataKey="name" stroke="#999" tick={{ fontSize: 10 }} />
+                            <YAxis stroke="#999" />
+                            <Tooltip
+                              contentStyle={{
+                                backgroundColor: '#1a1a1a',
+                                border: '1px solid #333',
+                              }}
+                              formatter={(value) => [
+                                Number(value).toLocaleString(),
+                                i18n.t('Points'),
+                              ]}
+                            />
+                            <Bar dataKey="points" name={i18n.t('Points')}>
+                              {ALL_GRADES.map((grade) => (
+                                <Cell key={`cell-${grade}`} fill={GRADE_COLORS[grade]} />
+                              ))}
+                            </Bar>
+                          </BarChart>
+                        </ResponsiveContainer>
+                      </Card>
+                    </Grid.Col>
+                    <Grid.Col span={{ base: 12, md: 6 }}>
+                      <Card className="cb-bg-panel" p="md" radius="md">
+                        <SectionHeading>{i18n.t('Wins by Grade')}</SectionHeading>
+                        <ResponsiveContainer width="100%" height={200}>
+                          <BarChart
+                            data={detailedStats.grade_stats.map((g) => ({
+                              name: formatGradeName(g.grade),
+                              wins: g.total_wins,
+                              games: g.total_games,
+                              fill: GRADE_COLORS[g.grade],
+                            }))}
+                          >
+                            <CartesianGrid strokeDasharray="3 3" stroke="#444" />
+                            <XAxis dataKey="name" stroke="#999" tick={{ fontSize: 10 }} />
+                            <YAxis stroke="#999" />
+                            <Tooltip
+                              contentStyle={{
+                                backgroundColor: '#1a1a1a',
+                                border: '1px solid #333',
+                              }}
+                            />
+                            <Bar dataKey="wins" name={i18n.t('Wins')} fill="#198754" />
+                          </BarChart>
+                        </ResponsiveContainer>
+                      </Card>
+                    </Grid.Col>
+                  </Grid>
                 )}
               </>
             )}
-          </div>
+          </Box>
         )}
       </Modal.Body>
     </Modal>

From eb50f4570baaebbfd115de69c233e557c1bd1ae6 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 21:26:17 +0300
Subject: [PATCH 25/46] Strip Bootstrap classes from EmojiTooltip and
 ChatContextMenu (Phase 2)

Both keep their non-Mantine libraries (native <select> listbox / react-contexify)
by design; only the Bootstrap utility classes are removed. EmojiTooltip's classes
become an inline style with an explicit dark background. ChatContextMenu's
load-bearing text-white / mr-2 utilities become inline color/margin tokens at the
same elements so they still beat react-contexify's own item styling.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 41 +++++++++++++------
 .../js/widgets/components/ChatContextMenu.tsx | 39 +++++++++---------
 .../js/widgets/components/EmojiTooltip.tsx    | 13 +++++-
 3 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 94d15da83..90e83e888 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -259,23 +259,40 @@ classes were swapped to Mantine (`Group`/`Stack`/`Text`/`ActionIcon` + style
 props). Design classes `cb-user-online`, `cb-user-dark-offline`, `cb-text`,
 `cb-rounded`, `x-username-truncated`, `cb-opacity-50` are kept.
 
-**Remaining leaves: 4** (audited 2026-08-07 with a whole-word Bootstrap-token
+**Remaining leaves: 2** (audited 2026-08-07 with a whole-word Bootstrap-token
 grep over `widgets/components/**/*.tsx`, filtering out kept `cb-*` design
-classes and `User*` passthrough props). All 4 now need a decision or belong to
-Phase 3 — the "just do the work" leaves are done. Each needs a browser pass,
-not a plain swap:
-
-- **Blocked on a lib swap / behavior change (3):**
-  - `LanguagePickerView` — react-select.
-  - `EmojiTooltip` — native `<select size=4>` keyboard-nav listbox; Bootstrap
-    `custom-select` styling has no clean Mantine equivalent without rewriting the
-    interaction.
-  - `ChatContextMenu` — built on `react-contexify`, not Mantine; only utility
-    classes to strip, no primitive to swap to.
+classes and `User*` passthrough props). Both need a decision or belong to
+Phase 3 — the "just do the work" leaves are done, and the two lib-backed leaves
+that only needed their Bootstrap *classes* stripped are done too (see below):
+
+- **Blocked on a lib swap / behavior change (1):**
+  - `LanguagePickerView` — react-select. Leave until all react-select sites
+    (`TaskChoice`, `PlayerPicker`, `ReportsPanel`) convert together, so the
+    dependency can be dropped in one PR. Still carries Bootstrap classes.
 - **Really Phase 3 (1):** `SoundToggle` — its `menu` variant renders a Bootstrap
   `dropdown-item` **inside a server heex dropdown**, so it can't be a pure
   React-side swap.
 
+Bootstrap-classes-stripped, non-Mantine lib kept on purpose (Phase-2 complete
+for these two — the eventual lib swap is tracked as future work, not a class
+migration):
+
+- **`EmojiTooltip`** — the emoji-autocomplete listbox in `ChatInput`. Kept the
+  native `<select size={4}>` and its hand-wired arrow/enter/escape keyboard nav
+  (`useKey`) **untouched**; only replaced the Bootstrap classes (`d-flex
+  flex-column position-absolute border rounded w-50 custom-select mb-2` + the
+  one-off `x-bottom-75`) with an inline `style`. Gave it an explicit dark
+  `backgroundColor` (`--mantine-color-dark-6`) so it no longer falls back to a
+  light native listbox on the dark chat — ⚠️ QA this looks right.
+- **`ChatContextMenu`** — the right-click username menu (`react-contexify`).
+  Kept `react-contexify` and the `cb-bg-panel`/`cb-border-color`/`cb-rounded`
+  design classes; stripped the Bootstrap `text-white`/`mr-2`/`text-muted`
+  utilities. `text-white` was load-bearing (items sit on a dark panel), so it
+  was replaced 1:1 with inline `color`/`marginRight` tokens at the same
+  elements (inline wins over react-contexify's own item-color rule — a
+  Menu-level color would not). No Mantine components added, so no test-provider
+  change needed.
+
 Plus one small **design leftover** (not a whole leaf): the `.card.cb-card`
 ranking panel inside the already-converted `TournamentDescription`, and the
 `cb-card` / `cb-bg-highlight-panel` card-theming leftovers generally. (`Rooms`
diff --git a/apps/codebattle/assets/js/widgets/components/ChatContextMenu.tsx b/apps/codebattle/assets/js/widgets/components/ChatContextMenu.tsx
index c1612e9d0..730537faf 100644
--- a/apps/codebattle/assets/js/widgets/components/ChatContextMenu.tsx
+++ b/apps/codebattle/assets/js/widgets/components/ChatContextMenu.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useMemo, memo } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cn from 'classnames';
 import qs from 'qs';
 import { Menu, Item, Separator } from 'react-contexify';
 import { useSelector, useDispatch } from 'react-redux';
@@ -18,6 +17,11 @@ import { getLobbyUrl, getUserProfileUrl } from '@/utils/urlBuilders';
 const blackSwordSrc = '/assets/images/fight-black.png';
 const whiteSwordSrc = '/assets/images/fight-white.png';
 
+// react-contexify items sit on the dark `cb-bg-panel`; set white text inline
+// (was Bootstrap `text-white`) so it beats the library's own item color rule.
+const textStyle = { color: 'var(--mantine-color-white)' };
+const iconStyle = { marginRight: 'var(--mantine-spacing-sm)', color: 'var(--mantine-color-white)' };
+
 interface ChatContextMenuUser {
   name?: string | null;
   userId?: number | null;
@@ -148,14 +152,14 @@ function ChatContextMenu({
   return (
     <>
       {children}
-      <Menu className="cb-bg-panel cb-border-color cb-rounded text-white" role="menu" id={menuId}>
+      <Menu className="cb-bg-panel cb-border-color cb-rounded" role="menu" id={menuId}>
         <Item role="menuitem" tabIndex={-1} aria-label={i18n.t('Copy Name')} onClick={handleCopy}>
-          <FontAwesomeIcon className="mr-2 text-white" icon="copy" />
-          <span className="text-white">{i18n.t('Copy Name')}</span>
+          <FontAwesomeIcon style={iconStyle} icon="copy" />
+          <span style={textStyle}>{i18n.t('Copy Name')}</span>
         </Item>
         <Item role="menuitem" tabIndex={-1} aria-label={i18n.t('Info')} onClick={handleShowInfo}>
-          <FontAwesomeIcon className="mr-2 text-white" icon="user" />
-          <span className="text-white">{i18n.t('Info')}</span>
+          <FontAwesomeIcon style={iconStyle} icon="user" />
+          <span style={textStyle}>{i18n.t('Info')}</span>
         </Item>
         {githubName && (
           <Item
@@ -164,8 +168,8 @@ function ChatContextMenu({
             aria-label={i18n.t('Github account')}
             onClick={handleShowGithubProfile}
           >
-            <FontAwesomeIcon className="mr-2 text-white" icon={['fab', 'github']} />
-            <span className="text-white">{i18n.t('Github account')}</span>
+            <FontAwesomeIcon style={iconStyle} icon={['fab', 'github']} />
+            <span style={textStyle}>{i18n.t('Github account')}</span>
           </Item>
         )}
         {!isCurrentUser && (
@@ -175,8 +179,8 @@ function ChatContextMenu({
             aria-label={i18n.t(isFollowing ? 'Unfollow' : 'Follow')}
             onClick={handleFollow}
           >
-            <FontAwesomeIcon className="mr-2 text-white" icon="binoculars" />
-            <span className="text-white">{i18n.t(isFollowing ? 'Unfollow' : 'Follow')}</span>
+            <FontAwesomeIcon style={iconStyle} icon="binoculars" />
+            <span style={textStyle}>{i18n.t(isFollowing ? 'Unfollow' : 'Follow')}</span>
           </Item>
         )}
         {canCreatePrivateRoom ? (
@@ -186,8 +190,8 @@ function ChatContextMenu({
             onClick={handleOpenDirect}
             disabled={!canCreatePrivateRoom}
           >
-            <FontAwesomeIcon className="mr-2 text-white" icon="comment-alt" />
-            <span className="text-white">{i18n.t('Direct message')}</span>
+            <FontAwesomeIcon style={iconStyle} icon="comment-alt" />
+            <span style={textStyle}>{i18n.t('Direct message')}</span>
           </Item>
         ) : null}
         {canInvite && (
@@ -204,19 +208,16 @@ function ChatContextMenu({
             <img
               alt={i18n.t('Invite')}
               src={whiteSwordSrc}
-              style={{ width: 14, height: 16 }}
-              className={cn('mr-2', {
-                'text-muted': !inviteSendDisabled,
-              })}
+              style={{ width: 14, height: 16, marginRight: 'var(--mantine-spacing-sm)' }}
             />
-            <span className="text-white">{i18n.t('Send an invite')}</span>
+            <span style={textStyle}>{i18n.t('Send an invite')}</span>
           </Item>
         )}
         {currentUserIsAdmin && <Separator />}
         {currentUserIsAdmin && (
           <Item aria-label={i18n.t('Ban')} onClick={handleBanClick} disabled={isBot}>
-            <FontAwesomeIcon className="mr-2 text-white" icon="ban" />
-            <span className="text-white">{i18n.t('Ban')}</span>
+            <FontAwesomeIcon style={iconStyle} icon="ban" />
+            <span style={textStyle}>{i18n.t('Ban')}</span>
           </Item>
         )}
       </Menu>
diff --git a/apps/codebattle/assets/js/widgets/components/EmojiTooltip.tsx b/apps/codebattle/assets/js/widgets/components/EmojiTooltip.tsx
index 09d1adef3..8b0ad3f52 100644
--- a/apps/codebattle/assets/js/widgets/components/EmojiTooltip.tsx
+++ b/apps/codebattle/assets/js/widgets/components/EmojiTooltip.tsx
@@ -69,7 +69,18 @@ export default function EmojiTooltip({ query, handleSelect, hide }: EmojiTooltip
   return (
     <select
       value={activeIndex}
-      className="d-flex position-absolute flex-column border rounded w-50 x-bottom-75 custom-select mb-2"
+      style={{
+        position: 'absolute',
+        bottom: '75%',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '50%',
+        marginBottom: 'var(--mantine-spacing-sm)',
+        border: '1px solid var(--mantine-color-default-border)',
+        borderRadius: 'var(--mantine-radius-sm)',
+        backgroundColor: 'var(--mantine-color-dark-6)',
+        color: 'var(--mantine-color-white)',
+      }}
       onChange={(e) => {
         setActiveIndex(e.target.value as unknown as number);
       }}

From 4345486e5cea0e192bf6b4330e42242fc58c5d6c Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 21:56:50 +0300
Subject: [PATCH 26/46] Convert settings page to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First Phase 2 page slice: UserSettings + UserSettingsForm + EmailSettingsForm.
Formik inputs → Mantine TextInput, Menu triggers → Button, submit buttons →
brand-colored Button with loading state, Notification → darkThemeAlertStyles.
Kept the native range slider and cb-settings-* design classes; retargeted the
.cb-settings-social-links card selector off the Bootstrap .d-flex class.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  61 +++++++-
 apps/codebattle/assets/css/style.scss         |   2 +-
 .../assets/js/__tests__/UserSettings.test.tsx |   4 +-
 .../pages/settings/EmailSettingsForm.tsx      |  98 ++++++------
 .../widgets/pages/settings/UserSettings.tsx   | 106 +++++++------
 .../pages/settings/UserSettingsForm.tsx       | 144 +++++++++---------
 6 files changed, 243 insertions(+), 172 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 90e83e888..4fc93739e 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -24,7 +24,7 @@ components converted — see the progress log under Phase 2); Phase 3 is
 |------|------|--------|
 | 0 | Infra: Mantine deps, PostCSS, CSS-layer coexistence, theme, `MantineProvider` on all roots | ✅ done |
 | 1 | Replace `react-bootstrap` **components** with Mantine; remove `react-bootstrap` dep | ✅ done |
-| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | 🔄 in progress — shared leaf components done |
+| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | 🔄 in progress — shared leaf components done; pages started (`settings` done) |
 | 3 | Migrate `.heex` templates; fully remove Bootstrap CSS + `bootstrap` dep | ⬜ planned (out of current scope) |
 
 ## Coexistence model (how Bootstrap + Mantine live together)
@@ -315,6 +315,63 @@ button, username truncation).
 custom `cb-*` class, drop `btn`); this preserves the click behavior that tests
 assert (see `ChatMessageDelete` / `TournamentChatMessage`).
 
+### Pages progress
+
+Sequencing stage 2 (pages, leaf → container). First page done:
+
+Done: **`settings`** page (`UserSettings` container + `UserSettingsForm` +
+`EmailSettingsForm`, one slice).
+- Formik text inputs (the shared `TextInput` in `UserSettingsForm`, the
+  `FormikTextInput` in `EmailSettingsForm`, and the archive-confirm field) →
+  Mantine `<TextInput>` wired to Formik via `useField`; `invalid-feedback` →
+  the `error` prop. **Dropped** `form-control cb-bg-panel cb-border-color
+  text-white` entirely rather than routing the design classes: `.cb-bg-panel`
+  is coupled to `.form-control` in SCSS (`&.form-control { background: … }`),
+  so keeping only `cb-bg-panel` would change the bg. The forced-dark theme +
+  the `--mantine-color-default-border` resolver already give the right dark
+  input look, so plain Mantine inputs are the idiomatic home.
+- `LanguageSelect` / `LocaleSelect` Menu triggers → `<Button variant="default"
+  fullWidth justify="flex-start">` with the `LanguageIcon` in `leftSection`
+  (dropped `btn cb-bg-panel cb-border-color text-white w-100 d-flex
+  align-items-center` / `text-left`); kept the `cb-dropdown-item` /
+  `cb-bg-highlight-panel` design classes. `d-none` view-toggle → `Box display`.
+- `RangeInput` stays a **native `<input type="range">`** + `cb-range` design
+  class — the sound tests `fireEvent.input(…)` a real range and the `onInput`
+  handler drives autosave, so a Mantine `<Slider>` would break both. Only
+  dropped `form-range w-100` (→ `width:100%` in style).
+- **Primary submit buttons** (`Update profile` / `Change password` / `Send
+  verification`) → plain Mantine `<Button>` = **brand orange**, per the standing
+  decision (see below). `loading={isSubmitting}` replaces the hand-rolled
+  `spinner-border` + `sr-only`.
+- `Notification` `<Alert>` adopted `darkThemeAlertStyles(variant)` and dropped
+  `alert alert-${variant} alert-dark-theme rounded shadow-sm mb-2` (now the 4th
+  React consumer of the shared helper; `radius="md" mb="sm"`). The two
+  `UserSettings.test` assertions that keyed on `.alert-success` / `.alert-danger`
+  now assert message **text** (the classes are gone).
+- `SocialButtons` rows `d-flex mb-2 align-items-center` → `<Group>`; **the SCSS
+  `.cb-settings-social-links > .d-flex` card style was retargeted to `> *`** so
+  it no longer depends on the Bootstrap utility class. Kept the `bind-social`
+  design/behavior class (Phoenix `data-method` unlink).
+- Device-remove / archive / cancel / confirm buttons → Mantine `<Button>`
+  (`variant="outline" color="red" size="compact-sm"`, `variant="outline"
+  color="red"`, `variant="default"`, `color="red"`). `badge badge-success` →
+  `<Badge color="green">`. Sessions `text-muted`/`<small>` → `<Text c="dimmed"
+  size="xs">`. `border-danger` / `text-danger` → inline `#dc3545` (exact BS
+  danger). The page root `container` class was **dropped** — `cb-settings-page`
+  already sets `max-width:1120px; margin:0 auto`, so `container` was redundant;
+  `py-4 px-3 px-md-4` → `py="lg" px={{ base: 'md', md: 'lg' }}`.
+
+**Standing decision (applies to all pages):** Bootstrap `btn-primary` →
+plain Mantine `<Button>` (theme `primaryColor="brand"`, orange #ee3737), **not**
+an explicit `color="blue"` to preserve the old Bootstrap-blue look. The app brand
+is orange; the old blue was incidental (Bootstrap default, no app override).
+
+⚠️ QA (settings): primary submit buttons recolor **blue→orange**; input dark look
+now comes from the theme, not `cb-bg-panel` (confirm bg/border match the panels);
+the two volume range sliders fill/spacing (`Flex gap="md"` replaced `mx-3`); the
+social-link card padding/border still renders (now via `> *`); the archive
+section's red border/icon.
+
 ### Conversion vocabulary
 
 | Bootstrap | Mantine |
@@ -354,7 +411,7 @@ don't inline:
 
 1. Shared leaf components in `widgets/components/` (buttons already Mantine;
    convert their surrounding layout, badges, cards).
-2. Pages, roughly by risk: `settings`, `profile`, `lobby`, `registration`,
+2. Pages, roughly by risk: `settings` ✅, then `profile`, `lobby`, `registration`,
    `tournament` / `tournamentPlayer` / `groupTournament`, `game` / `gameMl`,
    `admin`, `event`, then `schedule`, `seasonsPage`, `hallOfFamePage`,
    `headToHeadPage`, `taskPreview`.
diff --git a/apps/codebattle/assets/css/style.scss b/apps/codebattle/assets/css/style.scss
index ae3692763..4a384bd7c 100644
--- a/apps/codebattle/assets/css/style.scss
+++ b/apps/codebattle/assets/css/style.scss
@@ -4639,7 +4639,7 @@ a.cb-text-light:hover {
 }
 
 .cb-settings-social-links {
-  > .d-flex {
+  > * {
     margin-bottom: 8px !important;
     padding: 12px 14px;
     border: 1px solid rgba(255, 255, 255, 0.08);
diff --git a/apps/codebattle/assets/js/__tests__/UserSettings.test.tsx b/apps/codebattle/assets/js/__tests__/UserSettings.test.tsx
index 399242710..7a61bc1d4 100644
--- a/apps/codebattle/assets/js/__tests__/UserSettings.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/UserSettings.test.tsx
@@ -143,7 +143,7 @@ describe('UserSettings test cases', () => {
         clan: '',
         name: 'Dmitry',
       });
-      expect(getByRole('alert')).toHaveClass('alert-success');
+      expect(getByRole('alert')).toHaveTextContent('Settings changed successfully');
     });
   });
 
@@ -247,7 +247,7 @@ describe('UserSettings test cases', () => {
     await user.type(nameInput, 'CoolUserName');
     await user.click(submitButton);
 
-    expect(await findByRole('alert')).toHaveClass('alert-danger');
+    expect(await findByRole('alert')).toHaveTextContent('Something went wrong');
   });
 
   test('does not offer the legacy Silent sound type', () => {
diff --git a/apps/codebattle/assets/js/widgets/pages/settings/EmailSettingsForm.tsx b/apps/codebattle/assets/js/widgets/pages/settings/EmailSettingsForm.tsx
index 4ef21156b..8f5f9cc6b 100644
--- a/apps/codebattle/assets/js/widgets/pages/settings/EmailSettingsForm.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/settings/EmailSettingsForm.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { ErrorMessage, Field, Form, Formik, type FormikHelpers } from 'formik';
+import { Button, Stack, TextInput } from '@mantine/core';
+import { Form, Formik, useField, type FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 
 import i18n from '../../../i18n';
@@ -19,6 +20,25 @@ interface EmailSettingsFormProps {
   ) => void | Promise<void>;
 }
 
+interface FormikTextInputProps {
+  label: React.ReactNode;
+  name: string;
+  [key: string]: unknown;
+}
+
+function FormikTextInput({ label, name, ...props }: FormikTextInputProps) {
+  const [field, meta] = useField(name);
+
+  return (
+    <TextInput
+      {...field}
+      {...props}
+      label={label}
+      error={meta.touched && meta.error ? meta.error : undefined}
+    />
+  );
+}
+
 function EmailSettingsForm({ currentEmail, onSubmit }: EmailSettingsFormProps) {
   return (
     <Formik
@@ -34,56 +54,40 @@ function EmailSettingsForm({ currentEmail, onSubmit }: EmailSettingsFormProps) {
             </div>
           </div>
           <div className="cb-settings-security-grid">
-            <div>
-              <div className="form-group mb-3">
-                <label className="h6" htmlFor="currentEmail">
-                  {i18n.t('Current email')}
-                </label>
-                <input
-                  id="currentEmail"
-                  className="form-control cb-bg-panel cb-border-color text-white"
-                  value={currentEmail}
-                  readOnly
-                />
-              </div>
-              <div className="form-group mb-3">
-                <label className="h6" htmlFor="email">
-                  {i18n.t('New email')}
-                </label>
-                <Field
-                  id="email"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
-                  data-testid="newEmailInput"
-                  className="form-control cb-bg-panel cb-border-color text-white"
-                  placeholder={i18n.t('Enter new email')}
-                />
-                <ErrorMessage name="email" component="div" className="invalid-feedback" />
-              </div>
-              <div className="form-group mb-3">
-                <label className="h6" htmlFor="emailCurrentPassword">
-                  {i18n.t('Current password')}
-                </label>
-                <Field
-                  id="emailCurrentPassword"
-                  name="currentPassword"
-                  type="password"
-                  autoComplete="current-password"
-                  data-testid="emailCurrentPasswordInput"
-                  className="form-control cb-bg-panel cb-border-color text-white"
-                  placeholder={i18n.t('Enter current password')}
-                />
-                <ErrorMessage name="currentPassword" component="div" className="invalid-feedback" />
-              </div>
-              <button
+            <Stack gap="md">
+              <TextInput
+                id="currentEmail"
+                label={i18n.t('Current email')}
+                value={currentEmail}
+                readOnly
+              />
+              <FormikTextInput
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                data-testid="newEmailInput"
+                label={i18n.t('New email')}
+                placeholder={i18n.t('Enter new email')}
+              />
+              <FormikTextInput
+                id="emailCurrentPassword"
+                name="currentPassword"
+                type="password"
+                autoComplete="current-password"
+                data-testid="emailCurrentPasswordInput"
+                label={i18n.t('Current password')}
+                placeholder={i18n.t('Enter current password')}
+              />
+              <Button
                 type="submit"
+                radius="md"
                 disabled={!dirty || !isValid || isSubmitting}
-                className="btn py-1 btn-primary rounded-lg"
+                style={{ alignSelf: 'flex-start' }}
               >
                 {isSubmitting ? i18n.t('Sending...') : i18n.t('Send verification email')}
-              </button>
-            </div>
+              </Button>
+            </Stack>
           </div>
         </Form>
       )}
diff --git a/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.tsx b/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.tsx
index 5f312e98e..8d10e2e5f 100644
--- a/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.tsx
@@ -1,8 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Alert } from '@mantine/core';
-import cn from 'classnames';
+import { Alert, Badge, Box, Button, Group, Stack, Text, TextInput } from '@mantine/core';
 import { camelizeKeys, decamelizeKeys } from 'humps';
 import capitalize from 'lodash/capitalize';
 import noop from 'lodash/noop';
@@ -17,7 +16,7 @@ import i18n, { getSupportedLocale } from '../../../i18n';
 import { configureSound } from '../../lib/sound';
 import { userSettingsSelector } from '../../selectors';
 import { actions } from '../../slices';
-import { bootstrapAlertColor } from '../../ui/alert';
+import { bootstrapAlertColor, darkThemeAlertStyles } from '../../ui/alert';
 
 import UserSettingsForm, {
   type PasswordSettingsFormValues,
@@ -190,7 +189,9 @@ function Notification({ notification, onClose }: NotificationProps) {
     <Alert
       color={bootstrapAlertColor(variant)}
       variant="light"
-      className={`alert alert-${variant} alert-dark-theme rounded shadow-sm mb-2`}
+      radius="md"
+      mb="sm"
+      styles={darkThemeAlertStyles(variant)}
     >
       {message}
     </Alert>
@@ -208,9 +209,9 @@ function SocialButtons({ settings }: SocialButtonsProps) {
     const formatedProviderName = capitalize(provider);
 
     return (
-      <div key={provider} className="d-flex mb-2 align-items-center">
+      <Group key={provider} gap="xs" mb="sm">
         <FontAwesomeIcon
-          className={cn('mr-2', { 'text-muted': isLinked })}
+          style={isLinked ? { color: 'var(--mantine-color-dimmed)' } : undefined}
           icon={['fab', provider]}
         />
         {isLinked ? (
@@ -229,7 +230,7 @@ function SocialButtons({ settings }: SocialButtonsProps) {
             {i18n.t('Link %{provider}', { provider: formatedProviderName })}
           </a>
         )}
-      </div>
+      </Group>
     );
   });
 }
@@ -400,7 +401,7 @@ function UserSettings() {
   );
 
   return (
-    <div className="container cb-settings-page cb-text py-4 px-3 px-md-4">
+    <Box className="cb-settings-page cb-text" py="lg" px={{ base: 'md', md: 'lg' }}>
       <Notification notification={notification} onClose={setNotification} />
       <header className="cb-settings-page-header">
         <h2>{i18n.t('Settings')}</h2>
@@ -416,7 +417,12 @@ function UserSettings() {
         <EmailSettingsForm currentEmail={settings.email} onSubmit={handleEmailChange} />
       )}
       <div className="cb-settings-account-grid">
-        <section className="cb-settings-section mb-0" aria-labelledby="social-settings-title">
+        <Box
+          component="section"
+          className="cb-settings-section"
+          mb={0}
+          aria-labelledby="social-settings-title"
+        >
           <div className="cb-settings-section-heading">
             <span className="cb-settings-section-icon" aria-hidden="true">
               <FontAwesomeIcon icon="link" />
@@ -429,9 +435,14 @@ function UserSettings() {
           <div className="cb-settings-social-links">
             <SocialButtons settings={settings} />
           </div>
-        </section>
+        </Box>
 
-        <section className="cb-settings-section mb-0" aria-labelledby="sessions-settings-title">
+        <Box
+          component="section"
+          className="cb-settings-section"
+          mb={0}
+          aria-labelledby="sessions-settings-title"
+        >
           <div className="cb-settings-section-heading">
             <span className="cb-settings-section-icon" aria-hidden="true">
               <FontAwesomeIcon icon="laptop-code" />
@@ -442,27 +453,30 @@ function UserSettings() {
             </div>
           </div>
           {sessions.length === 0 ? (
-            <div className="text-muted">{i18n.t('No active devices')}</div>
+            <Text c="dimmed">{i18n.t('No active devices')}</Text>
           ) : (
-            <div className="d-flex flex-column">
+            <Stack gap={0}>
               {sessions.map((session) => (
                 <div key={session.id} className="cb-settings-device">
-                  <div className="mr-3 text-break">
+                  <Box style={{ wordBreak: 'break-word' }}>
                     <div>
                       {session.userAgent || i18n.t('Unknown device')}
                       {session.current && (
-                        <span className="badge badge-success ml-2">{i18n.t('Current device')}</span>
+                        <Badge color="green" ml="xs">
+                          {i18n.t('Current device')}
+                        </Badge>
                       )}
                     </div>
-                    <small className="text-muted">
+                    <Text component="small" size="xs" c="dimmed">
                       {[session.ip, new Date(session.lastSeenAt).toLocaleString()]
                         .filter(Boolean)
                         .join(' · ')}
-                    </small>
-                  </div>
-                  <button
-                    type="button"
-                    className="btn btn-outline-danger btn-sm"
+                    </Text>
+                  </Box>
+                  <Button
+                    variant="outline"
+                    color="red"
+                    size="compact-sm"
                     disabled={revokingSessionId === session.id}
                     onClick={() => handleDeleteSession(session)}
                     aria-label={i18n.t('Remove device %{device}', {
@@ -470,19 +484,26 @@ function UserSettings() {
                     })}
                   >
                     {session.current ? i18n.t('Sign out') : i18n.t('Remove')}
-                  </button>
+                  </Button>
                 </div>
               ))}
-            </div>
+            </Stack>
           )}
-        </section>
+        </Box>
       </div>
-      <section
-        className="cb-settings-section border-danger mt-4"
+      <Box
+        component="section"
+        className="cb-settings-section"
+        mt="lg"
+        style={{ borderColor: '#dc3545' }}
         aria-labelledby="archive-account-title"
       >
         <div className="cb-settings-section-heading">
-          <span className="cb-settings-section-icon text-danger" aria-hidden="true">
+          <span
+            className="cb-settings-section-icon"
+            style={{ color: '#dc3545' }}
+            aria-hidden="true"
+          >
             <FontAwesomeIcon icon="user-minus" />
           </span>
           <div>
@@ -494,15 +515,15 @@ function UserSettings() {
             </p>
           </div>
         </div>
-        <button
-          type="button"
-          className="btn btn-outline-danger"
+        <Button
+          variant="outline"
+          color="red"
           disabled={isArchiving}
           onClick={() => setShowArchiveConfirmation(true)}
         >
           {i18n.t('Archive account')}
-        </button>
-      </section>
+        </Button>
+      </Box>
       <Modal
         show={showArchiveConfirmation}
         onHide={() => {
@@ -521,10 +542,9 @@ function UserSettings() {
               'This action cannot be undone. You will lose access to this account forever. You can create a new account later, but it will not restore this account.',
             )}
           </p>
-          <label htmlFor="archive-account-confirmation">{i18n.t('Type ARCHIVE to confirm')}</label>
-          <input
+          <TextInput
             id="archive-account-confirmation"
-            className="form-control"
+            label={i18n.t('Type ARCHIVE to confirm')}
             type="text"
             autoComplete="off"
             value={archiveConfirmation}
@@ -533,9 +553,8 @@ function UserSettings() {
           />
         </Modal.Body>
         <Modal.Footer>
-          <button
-            type="button"
-            className="btn btn-secondary"
+          <Button
+            variant="default"
             disabled={isArchiving}
             onClick={() => {
               setShowArchiveConfirmation(false);
@@ -543,18 +562,17 @@ function UserSettings() {
             }}
           >
             {i18n.t('Cancel')}
-          </button>
-          <button
-            type="button"
-            className="btn btn-danger"
+          </Button>
+          <Button
+            color="red"
             disabled={archiveConfirmation !== 'ARCHIVE' || isArchiving}
             onClick={handleArchiveAccount}
           >
             {isArchiving ? i18n.t('Archiving account...') : i18n.t('Archive permanently')}
-          </button>
+          </Button>
         </Modal.Footer>
       </Modal>
-    </div>
+    </Box>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.tsx b/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.tsx
index 53d122027..bbe061ae4 100644
--- a/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.tsx
@@ -1,6 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { Button, Menu } from '@mantine/core';
+import {
+  Anchor,
+  Box,
+  Button,
+  Flex,
+  Menu,
+  Text,
+  TextInput as MantineTextInput,
+} from '@mantine/core';
 import cn from 'classnames';
 import { Field, Form, Formik, useField, type FormikHelpers } from 'formik';
 import capitalize from 'lodash/capitalize';
@@ -158,30 +166,26 @@ const getPlaceholder = ({
 
 function TextInput({ label, ...props }: TextInputProps) {
   const [field, meta] = useField(props);
-  const { name, disabled, hint, hintHref = '', ...inputProps } = props;
-
-  const labelClassName = cn('h6', {
-    'text-muted': disabled,
-  });
+  const { disabled, hint, hintHref = '', ...inputProps } = props;
 
   return (
-    <div className="form-group mb-3">
-      <label className={labelClassName} htmlFor={name}>
-        {label}
-        {hint && (
-          <a className="text-primary pl-2" href={hintHref}>
-            <small>{hint}</small>
-          </a>
-        )}
-      </label>
-      <input
-        {...field}
-        {...inputProps}
-        placeholder={getPlaceholder(props)}
-        className="form-control cb-bg-panel cb-border-color text-white"
-      />
-      {meta.touched && meta.error && <div className="invalid-feedback">{meta.error}</div>}
-    </div>
+    <MantineTextInput
+      {...field}
+      {...inputProps}
+      disabled={disabled}
+      placeholder={getPlaceholder(props)}
+      error={meta.touched && meta.error ? meta.error : undefined}
+      label={
+        <>
+          {label}
+          {hint && (
+            <Anchor href={hintHref} size="xs" ml="xs">
+              {hint}
+            </Anchor>
+          )}
+        </>
+      }
+    />
   );
 }
 
@@ -200,8 +204,10 @@ function LanguageSelect({ lang, view, currentView, items, onSelect }: LanguageSe
   const selectedName = items.find(([slug]) => slug === selectedSlug)?.[1] || selectedSlug;
 
   return (
-    <div className={cn({ 'd-none': view !== currentView })}>
-      <div className="h6">{i18n.t('Your weapon')}</div>
+    <Box display={view === currentView ? undefined : 'none'}>
+      <Text size="sm" fw={500} mb={4}>
+        {i18n.t('Your weapon')}
+      </Text>
       <Menu width="target" keepMounted>
         <Menu.Target>
           <Button
@@ -209,38 +215,33 @@ function LanguageSelect({ lang, view, currentView, items, onSelect }: LanguageSe
             data-testid={`${view}-langSelect`}
             aria-label={i18n.t('Programming language select')}
             variant="default"
-            className="btn cb-bg-panel cb-border-color text-white w-100 d-flex align-items-center"
+            fullWidth
+            justify="flex-start"
+            leftSection={
+              <LanguageIcon lang={selectedSlug} style={{ width: '24px', height: '24px' }} />
+            }
           >
-            <LanguageIcon
-              className="mr-2 flex-shrink-0"
-              lang={selectedSlug}
-              style={{ width: '24px', height: '24px' }}
-            />
-            <span>{capitalize(selectedName)}</span>
+            {capitalize(selectedName)}
           </Button>
         </Menu.Target>
-        <Menu.Dropdown className="w-100 cb-bg-highlight-panel">
+        <Menu.Dropdown className="cb-bg-highlight-panel">
           {items.map(([slug, languageName]) => (
             <Menu.Item
               key={slug}
               data-active={selectedSlug === slug || undefined}
-              className="cb-dropdown-item d-flex align-items-center"
+              className="cb-dropdown-item"
+              leftSection={<LanguageIcon lang={slug} style={{ width: '24px', height: '24px' }} />}
               onClick={() => {
                 helpers.setValue(slug);
                 onSelect(fieldName, slug);
               }}
             >
-              <LanguageIcon
-                className="mr-2 flex-shrink-0"
-                lang={slug}
-                style={{ width: '24px', height: '24px' }}
-              />
               {capitalize(languageName)}
             </Menu.Item>
           ))}
         </Menu.Dropdown>
       </Menu>
-    </div>
+    </Box>
   );
 }
 
@@ -267,12 +268,13 @@ function LocaleSelect({ onSelect }: { onSelect: (locale: string) => void }) {
           data-testid="localeSelect"
           aria-label={i18n.t('Locale')}
           variant="default"
-          className="btn cb-bg-panel cb-border-color text-white w-100 text-left"
+          fullWidth
+          justify="flex-start"
         >
           {currentLocaleLabel}
         </Button>
       </Menu.Target>
-      <Menu.Dropdown className="w-100 cb-bg-highlight-panel">
+      <Menu.Dropdown className="cb-bg-highlight-panel">
         {locales.map(([value, label]) => (
           <Menu.Item
             key={value}
@@ -315,8 +317,8 @@ function RangeInput({ className, min = 0, max = 100, style, ...props }: RangeInp
       min={min}
       max={max}
       value={currentValue}
-      className={cn('form-range w-100 cb-range', className)}
-      style={{ ...style, '--range-progress': `${progress}%` } as React.CSSProperties}
+      className={cn('cb-range', className)}
+      style={{ ...style, width: '100%', '--range-progress': `${progress}%` } as React.CSSProperties}
     />
   );
 }
@@ -444,20 +446,16 @@ function UserSettingsForm({
                 </div>
 
                 <div className="cb-settings-section-actions">
-                  <button
+                  <Button
+                    type="submit"
+                    radius="md"
+                    px="lg"
+                    loading={isSubmitting}
                     disabled={!profileChanged || !profileIsValid || isSubmitting}
                     aria-label={i18n.t('Update profile')}
-                    type="submit"
-                    className="btn btn-primary rounded-lg px-4"
                   >
-                    {isSubmitting ? (
-                      <div className="spinner-border spinner-border-sm" role="status">
-                        <span className="sr-only">{i18n.t('Loading...')}</span>
-                      </div>
-                    ) : (
-                      i18n.t('Update profile')
-                    )}
-                  </button>
+                    {i18n.t('Update profile')}
+                  </Button>
                 </div>
               </section>
 
@@ -506,14 +504,14 @@ function UserSettingsForm({
                   <span className="cb-settings-section-icon" aria-hidden="true">
                     <Icon.Volume2 size={20} />
                   </span>
-                  <div className="flex-grow-1">
+                  <Box style={{ flexGrow: 1 }}>
                     <h3 id="sound-settings-title">{i18n.t('Sound settings')}</h3>
                     <p>{i18n.t('Choose how game and tournament notifications sound.')}</p>
-                  </div>
+                  </Box>
                   <SoundToggle variant="settings" />
                 </div>
 
-                <fieldset className="mb-4">
+                <Box component="fieldset" mb="lg">
                   <legend className="cb-settings-label">{i18n.t('Sound theme')}</legend>
                   <div className="cb-settings-sound-types">
                     {soundTypes.map(({ value, label, icon: SoundIcon }) => (
@@ -537,7 +535,7 @@ function UserSettingsForm({
                       </div>
                     ))}
                   </div>
-                </fieldset>
+                </Box>
 
                 <div className="cb-settings-volume-grid">
                   <div className="cb-settings-volume-card">
@@ -545,7 +543,7 @@ function UserSettingsForm({
                       <span>{i18n.t('Game sound level')}</span>
                       <strong>{values.soundSettings.level}/10</strong>
                     </div>
-                    <div className="d-flex align-items-center">
+                    <Flex align="center" gap="md">
                       <Icon.VolumeX size={18} aria-hidden="true" />
                       <RangeInput
                         type="range"
@@ -564,10 +562,9 @@ function UserSettingsForm({
                             Number(e.currentTarget.value) * 0.1,
                           );
                         }}
-                        className="mx-3"
                       />
                       <Icon.Volume2 size={18} aria-hidden="true" />
-                    </div>
+                    </Flex>
                   </div>
 
                   <div className="cb-settings-volume-card">
@@ -575,7 +572,7 @@ function UserSettingsForm({
                       <span>{i18n.t('Tournament sound level')}</span>
                       <strong>{values.soundSettings.tournamentLevel}/10</strong>
                     </div>
-                    <div className="d-flex align-items-center">
+                    <Flex align="center" gap="md">
                       <Icon.VolumeX size={18} aria-hidden="true" />
                       <RangeInput
                         type="range"
@@ -594,10 +591,9 @@ function UserSettingsForm({
                             Number(e.currentTarget.value) * 0.1,
                           );
                         }}
-                        className="mx-3"
                       />
                       <Icon.Volume2 size={18} aria-hidden="true" />
-                    </div>
+                    </Flex>
                   </div>
                 </div>
               </section>
@@ -654,20 +650,16 @@ function UserSettingsForm({
                   />
                 </div>
                 <div className="cb-settings-section-actions">
-                  <button
+                  <Button
+                    type="submit"
+                    radius="md"
+                    px="lg"
+                    loading={isSubmitting}
                     disabled={!dirty || !isValid || isSubmitting}
                     aria-label={i18n.t('Change password')}
-                    type="submit"
-                    className="btn btn-primary rounded-lg px-4"
                   >
-                    {isSubmitting ? (
-                      <div className="spinner-border spinner-border-sm" role="status">
-                        <span className="sr-only">{i18n.t('Loading...')}</span>
-                      </div>
-                    ) : (
-                      i18n.t('Change password')
-                    )}
-                  </button>
+                    {i18n.t('Change password')}
+                  </Button>
                 </div>
               </section>
             </Form>

From c8967528629f632fe3aa66784b72e10732866260 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 22:15:24 +0300
Subject: [PATCH 27/46] Convert profile leaf components to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UserStatCharts row/col → Grid; UserTournaments table → Mantine Table (row
borders now use the resolved default border = cb-border-color, so per-cell
classes dropped); Heatmap responsive header → Flex + NativeSelect. Kept the
scroll container, infinite-scroll behavior, CalendarHeatmap, and cb-* design
classes (incl. cb-profile-heatmap-select).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../js/widgets/pages/profile/Heatmap.tsx      |  30 +++--
 .../widgets/pages/profile/UserStatCharts.tsx  |  29 ++---
 .../widgets/pages/profile/UserTournaments.tsx | 111 +++++++++++-------
 3 files changed, 100 insertions(+), 70 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/pages/profile/Heatmap.tsx b/apps/codebattle/assets/js/widgets/pages/profile/Heatmap.tsx
index 088ff436c..60e6176d6 100644
--- a/apps/codebattle/assets/js/widgets/pages/profile/Heatmap.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/profile/Heatmap.tsx
@@ -1,5 +1,6 @@
 import React, { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
 
+import { Box, Flex, NativeSelect } from '@mantine/core';
 import CalendarHeatmap, { type ReactCalendarHeatmapValue } from 'react-calendar-heatmap';
 import { useDispatch } from 'react-redux';
 
@@ -126,19 +127,28 @@ function Heatmap() {
 
   return (
     <div className="cb-profile-heatmap">
-      <div className="d-flex flex-column flex-lg-row align-items-center justify-content-between mb-3">
-        <div className="d-none d-lg-block" style={{ width: '176px' }} aria-hidden="true" />
-        <div className="mb-3 mb-lg-0 cb-profile-heatmap-heading flex-grow-1">
+      <Flex
+        direction={{ base: 'column', lg: 'row' }}
+        align="center"
+        justify="space-between"
+        mb="md"
+      >
+        <Box display={{ base: 'none', lg: 'block' }} w={176} aria-hidden="true" />
+        <Box
+          className="cb-profile-heatmap-heading"
+          mb={{ base: 'md', lg: 0 }}
+          style={{ flexGrow: 1 }}
+        >
           <div className="cb-profile-heatmap-title">
             <span>{title}</span>
             <span className="cb-profile-heatmap-separator">•</span>
             <span className="cb-profile-heatmap-range">{range}</span>
           </div>
-        </div>
-        <div className="cb-profile-heatmap-controls d-flex justify-content-center justify-content-lg-end">
-          <select
+        </Box>
+        <Flex className="cb-profile-heatmap-controls" justify={{ base: 'center', lg: 'flex-end' }}>
+          <NativeSelect
             id="heatmap-year-select"
-            className="custom-select cb-bg-panel cb-border-color text-white cb-profile-heatmap-select"
+            classNames={{ input: 'cb-profile-heatmap-select' }}
             value={selectedPeriod}
             onChange={(event) => setSelectedPeriod(event.target.value)}
             disabled={isLoading}
@@ -149,9 +159,9 @@ function Heatmap() {
                 {year}
               </option>
             ))}
-          </select>
-        </div>
-      </div>
+          </NativeSelect>
+        </Flex>
+      </Flex>
 
       <div className="cb-profile-heatmap-grid-wrapper" ref={gridWrapperRef}>
         {isLoading && (
diff --git a/apps/codebattle/assets/js/widgets/pages/profile/UserStatCharts.tsx b/apps/codebattle/assets/js/widgets/pages/profile/UserStatCharts.tsx
index 103f38e69..61f962ce4 100644
--- a/apps/codebattle/assets/js/widgets/pages/profile/UserStatCharts.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/profile/UserStatCharts.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Grid, Text } from '@mantine/core';
 import {
   BarChart,
   Bar,
@@ -128,18 +129,12 @@ function UserStatCharts({ gameStats, tournamentStats }: UserStatChartsProps) {
   const totalTournamentWins = resultDataForTournamentBar.reduce((acc, item) => acc + item.value, 0);
 
   return (
-    <div className="row justify-content-center pb-4 px-3">
-      <div className="col-12 col-lg-6 mt-4 mb-4 mb-lg-0">
-        <div className="small text-center text-muted mb-2">
+    <Grid justify="center" pb="lg" px="md">
+      <Grid.Col span={{ base: 12, lg: 6 }} mt="lg" mb={{ base: 'lg', lg: 0 }}>
+        <Text size="sm" ta="center" c="dimmed" mb="sm">
           {i18n.t('Total games: %{count}', { count: totalGames })}
-        </div>
-        <ResponsiveContainer
-          className="text-white"
-          width="100%"
-          height={320}
-          minWidth={1}
-          minHeight={320}
-        >
+        </Text>
+        <ResponsiveContainer width="100%" height={320} minWidth={1} minHeight={320}>
           <BarChart
             data={resultDataForGameBar}
             margin={{
@@ -174,12 +169,12 @@ function UserStatCharts({ gameStats, tournamentStats }: UserStatChartsProps) {
             </Bar>
           </BarChart>
         </ResponsiveContainer>
-      </div>
+      </Grid.Col>
 
-      <div className="col-12 col-lg-6 mt-4">
-        <div className="small text-center text-muted mb-2">
+      <Grid.Col span={{ base: 12, lg: 6 }} mt="lg">
+        <Text size="sm" ta="center" c="dimmed" mb="sm">
           {i18n.t('Total tournament wins: %{count}', { count: totalTournamentWins })}
-        </div>
+        </Text>
         <ResponsiveContainer width="100%" height={320} minWidth={1} minHeight={320}>
           <BarChart
             data={resultDataForTournamentBar}
@@ -215,8 +210,8 @@ function UserStatCharts({ gameStats, tournamentStats }: UserStatChartsProps) {
             </Bar>
           </BarChart>
         </ResponsiveContainer>
-      </div>
-    </div>
+      </Grid.Col>
+    </Grid>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/profile/UserTournaments.tsx b/apps/codebattle/assets/js/widgets/pages/profile/UserTournaments.tsx
index 7595707ae..3799f56c7 100644
--- a/apps/codebattle/assets/js/widgets/pages/profile/UserTournaments.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/profile/UserTournaments.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { Box, Flex, Table, Text } from '@mantine/core';
 import { camelizeKeys } from 'humps';
 import unionBy from 'lodash/unionBy';
 import moment from 'moment';
@@ -179,33 +180,49 @@ function UserTournaments({ isActive = false }: UserTournamentsProps) {
 
     if (status === 'error') {
       return (
-        <div className="py-5 text-center text-muted">{i18n.t('Failed to load tournaments')}</div>
+        <Text py="xl" ta="center" c="dimmed">
+          {i18n.t('Failed to load tournaments')}
+        </Text>
       );
     }
 
-    return <div className="py-5 text-center text-muted">{i18n.t('No tournaments played yet')}</div>;
+    return (
+      <Text py="xl" ta="center" c="dimmed">
+        {i18n.t('No tournaments played yet')}
+      </Text>
+    );
   }
 
   return (
-    <div className="h-100 d-flex flex-column">
-      <div ref={tableRef} className="table-responsive mvh-100 cb-overflow-y-scroll">
-        <table className="table table-striped mb-0">
-          <thead className="cb-text sticky-top">
-            <tr>
-              <th className="p-3 border-0">{i18n.t('Grade')}</th>
-              <th className="p-3 border-0">{i18n.t('Place')}</th>
-              <th className="p-3 border-0">{i18n.t('Points')}</th>
-              <th className="p-3 border-0">{i18n.t('Score')}</th>
-              <th className="p-3 border-0">{i18n.t('Games')}</th>
-              <th className="p-3 border-0">{i18n.t('Wins')}</th>
-              <th className="p-3 border-0">{i18n.t('Time')}</th>
-              <th className="p-3 border-0">{i18n.t('Lang')}</th>
-              <th className="p-3 border-0">{i18n.t('Date')}</th>
-            </tr>
-          </thead>
-          <tbody className="cb-text">
+    <Flex h="100%" direction="column">
+      <Box ref={tableRef} className="mvh-100 cb-overflow-y-scroll" style={{ overflowX: 'auto' }}>
+        <Table
+          striped
+          stickyHeader
+          mb={0}
+          verticalSpacing="md"
+          horizontalSpacing="md"
+          styles={{
+            td: { whiteSpace: 'nowrap', verticalAlign: 'middle' },
+            th: { whiteSpace: 'nowrap' },
+          }}
+        >
+          <Table.Thead className="cb-text">
+            <Table.Tr>
+              <Table.Th>{i18n.t('Grade')}</Table.Th>
+              <Table.Th>{i18n.t('Place')}</Table.Th>
+              <Table.Th>{i18n.t('Points')}</Table.Th>
+              <Table.Th>{i18n.t('Score')}</Table.Th>
+              <Table.Th>{i18n.t('Games')}</Table.Th>
+              <Table.Th>{i18n.t('Wins')}</Table.Th>
+              <Table.Th>{i18n.t('Time')}</Table.Th>
+              <Table.Th>{i18n.t('Lang')}</Table.Th>
+              <Table.Th>{i18n.t('Date')}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody className="cb-text">
             {tournaments.map((item) => (
-              <tr
+              <Table.Tr
                 key={item.tournamentId}
                 role="link"
                 tabIndex={0}
@@ -218,10 +235,11 @@ function UserTournaments({ isActive = false }: UserTournamentsProps) {
                   }
                 }}
               >
-                <td className="p-3 align-middle text-nowrap cb-border-color">
+                <Table.Td>
                   <span
-                    className="px-2 py-1 cb-rounded"
+                    className="cb-rounded"
                     style={{
+                      padding: '0.25rem 0.5rem',
                       backgroundColor:
                         (item.tournamentGrade && gradeColors[item.tournamentGrade]) || '#8a919c',
                       color: '#1f2530',
@@ -230,30 +248,37 @@ function UserTournaments({ isActive = false }: UserTournamentsProps) {
                   >
                     {formatGrade(item.tournamentGrade || 'open')}
                   </span>
-                </td>
-                <td className="p-3 align-middle text-nowrap cb-border-color">{`#${item.place}`}</td>
-                <td className="p-3 align-middle text-nowrap cb-border-color">{item.points}</td>
-                <td className="p-3 align-middle text-nowrap cb-border-color">{item.score}</td>
-                <td className="p-3 align-middle text-nowrap cb-border-color">{item.gamesCount}</td>
-                <td className="p-3 align-middle text-nowrap cb-border-color">{item.winsCount}</td>
-                <td className="p-3 align-middle text-nowrap cb-border-color">
-                  {formatTime(item.totalTime)}
-                </td>
-                <td className="p-3 align-middle text-nowrap cb-border-color">
-                  {item.userLang || '-'}
-                </td>
-                <td className="p-3 align-middle text-nowrap cb-border-color">
+                </Table.Td>
+                <Table.Td>{`#${item.place}`}</Table.Td>
+                <Table.Td>{item.points}</Table.Td>
+                <Table.Td>{item.score}</Table.Td>
+                <Table.Td>{item.gamesCount}</Table.Td>
+                <Table.Td>{item.winsCount}</Table.Td>
+                <Table.Td>{formatTime(item.totalTime)}</Table.Td>
+                <Table.Td>{item.userLang || '-'}</Table.Td>
+                <Table.Td>
                   {moment.utc(item.tournamentStartedAt).local().format('YYYY.MM.DD HH:mm')}
-                </td>
-              </tr>
+                </Table.Td>
+              </Table.Tr>
             ))}
-          </tbody>
-        </table>
-      </div>
-      <div className="mt-auto border-top cb-border-color py-2 px-3 font-weight-bold text-muted rounded-bottom">
+          </Table.Tbody>
+        </Table>
+      </Box>
+      <Box
+        mt="auto"
+        py="sm"
+        px="md"
+        fw={700}
+        c="dimmed"
+        style={{
+          borderTop: '1px solid var(--mantine-color-default-border)',
+          borderBottomLeftRadius: 'var(--mantine-radius-md)',
+          borderBottomRightRadius: 'var(--mantine-radius-md)',
+        }}
+      >
         {i18n.t('Total tournaments: %{count}', { count: pageInfo.totalEntries })}
-      </div>
-    </div>
+      </Box>
+    </Flex>
   );
 }
 

From 386f8afc4a234cf09b8f7e915f527c08d52e485f Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 22:28:18 +0300
Subject: [PATCH 28/46] Convert UserProfile container to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar row/col → Grid; rewrote the Bootstrap-JS tab system (nav-tabs/tab-pane/
data-toggle) as a controlled Mantine Tabs with keepMounted panels, removing the
page's dependency on Bootstrap's tab plugin. Pills/links → Anchor/Box + style
props. Kept .h1/.lead typography classes (coupled to responsive cb-* overrides)
and cb-* design classes. UserProfile.test now wraps in MantineTestProvider.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  40 +-
 .../assets/js/__tests__/UserProfile.test.tsx  |  10 +-
 .../js/widgets/pages/profile/UserProfile.tsx  | 420 +++++++++---------
 3 files changed, 254 insertions(+), 216 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 4fc93739e..75c932fc2 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -24,7 +24,7 @@ components converted — see the progress log under Phase 2); Phase 3 is
 |------|------|--------|
 | 0 | Infra: Mantine deps, PostCSS, CSS-layer coexistence, theme, `MantineProvider` on all roots | ✅ done |
 | 1 | Replace `react-bootstrap` **components** with Mantine; remove `react-bootstrap` dep | ✅ done |
-| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | 🔄 in progress — shared leaf components done; pages started (`settings` done) |
+| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | 🔄 in progress — shared leaf components done; pages started (`settings`, `profile` done) |
 | 3 | Migrate `.heex` templates; fully remove Bootstrap CSS + `bootstrap` dep | ⬜ planned (out of current scope) |
 
 ## Coexistence model (how Bootstrap + Mantine live together)
@@ -372,6 +372,42 @@ the two volume range sliders fill/spacing (`Flex gap="md"` replaced `mx-3`); the
 social-link card padding/border still renders (now via `> *`); the archive
 section's red border/icon.
 
+Done: **`profile`** page (`UserProfile` container + `UserStatCharts` +
+`UserTournaments` + `Heatmap`; `Achievement` was already clean). Split into two
+commits (leaves, then container).
+- Leaves: `UserStatCharts` `row`/`col-*` → `<Grid>`; `UserTournaments`
+  `table table-striped` → `<Table striped stickyHeader>` (Mantine's row borders
+  already use the resolved `--mantine-color-default-border` = `cb-border-color`,
+  so the per-cell `cb-border-color` classes were dropped) inside the original
+  scroll `<Box>` (infinite-scroll listener + `mvh-100`/`cb-overflow-y-scroll`
+  kept); `Heatmap` responsive header → `<Flex>` with responsive `direction`/
+  `justify`/`mb`, native `custom-select` → `<NativeSelect>` keeping the
+  `cb-profile-heatmap-select` design class via `classNames={{ input }}`.
+- Container: sidebar `row`/`col-md-*` → `<Grid>`; the **Bootstrap-JS tab system**
+  (`nav-tabs` + `tab-pane` + `data-toggle="tab"` + `.active`/`.show`) was
+  rewritten as a controlled Mantine `<Tabs value={activeTab}>` — this removes the
+  page's dependency on Bootstrap's JS tab plugin. All three `Tabs.Panel`s use
+  `keepMounted` to preserve the old always-in-DOM behavior (so `UserTournaments`'
+  `isActive` fetch-gate and `CompletedGames` still mount as before). The bordered
+  tab-content box is reproduced with a `<Box>` wrapper (`border` + `borderTop:0` +
+  bottom radius). Pills/links → `<Anchor>`/`<Box>` + style props; `hr` colored
+  dividers keep `cb-border-color`. `UserProfile.test` now wraps in
+  `MantineTestProvider` (the container gained Mantine components — gotcha #1).
+- **Intentional Bootstrap leftovers (kept):** the typography-size classes `.h1`
+  (stat numbers, github icon) and `.lead` (stat captions) are **coupled to
+  responsive `cb-*` overrides** — base size comes from `.h1`/`.lead`, then
+  `.cb-stats-number` / `.lead` shrink them inside `@media` queries. Inlining the
+  base size would beat the media-query override (inline wins), breaking the
+  responsive shrink, and these aren't in the Phase-2 DoD grep. Also kept the
+  `fab fa-github` icon-font span. Port these to CSS (self-sufficient
+  `.cb-stats-number`) in a later pass if the size classes must go.
+
+⚠️ QA (profile): the **tab bar restyle** is the big one — Mantine `<Tabs>` uses an
+underline indicator vs the old bordered `nav-tabs`; confirm the tabs still read as
+uppercase/bold, fill the width (`grow`), and join the bordered content box below.
+Also: heatmap `NativeSelect` may add a chevron over the native arrow (as in
+`SeasonLeaderboard`); the avatar corner radius (was `rounded`, now inline `sm`).
+
 ### Conversion vocabulary
 
 | Bootstrap | Mantine |
@@ -411,7 +447,7 @@ don't inline:
 
 1. Shared leaf components in `widgets/components/` (buttons already Mantine;
    convert their surrounding layout, badges, cards).
-2. Pages, roughly by risk: `settings` ✅, then `profile`, `lobby`, `registration`,
+2. Pages, roughly by risk: `settings` ✅, `profile` ✅, then `lobby`, `registration`,
    `tournament` / `tournamentPlayer` / `groupTournament`, `game` / `gameMl`,
    `admin`, `event`, then `schedule`, `seasonsPage`, `hallOfFamePage`,
    `headToHeadPage`, `taskPreview`.
diff --git a/apps/codebattle/assets/js/__tests__/UserProfile.test.tsx b/apps/codebattle/assets/js/__tests__/UserProfile.test.tsx
index 910fe85fb..61d322d3a 100644
--- a/apps/codebattle/assets/js/__tests__/UserProfile.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/UserProfile.test.tsx
@@ -7,6 +7,8 @@ import { Provider } from 'react-redux';
 import UserProfile from '../widgets/pages/profile';
 import reducers from '../widgets/slices';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 // jsdom URL the profile page reads the user id from (was @jest-environment-options).
 window.history.pushState({}, '', '/users/42');
 
@@ -101,9 +103,11 @@ describe('UserProfile', () => {
   test('does not render or request holopin resources on the profile page', async () => {
     const store = configureStore({ reducer });
     const { container, getByLabelText, queryByText } = render(
-      <Provider store={store}>
-        <UserProfile />
-      </Provider>,
+      <MantineTestProvider>
+        <Provider store={store}>
+          <UserProfile />
+        </Provider>
+      </MantineTestProvider>,
     );
 
     await waitFor(() => {
diff --git a/apps/codebattle/assets/js/widgets/pages/profile/UserProfile.tsx b/apps/codebattle/assets/js/widgets/pages/profile/UserProfile.tsx
index a11520633..4535a803b 100644
--- a/apps/codebattle/assets/js/widgets/pages/profile/UserProfile.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/profile/UserProfile.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 
+import { Anchor, Box, Flex, Grid, Tabs, Text } from '@mantine/core';
 import { camelizeKeys } from 'humps';
 import sum from 'lodash/sum';
 import { useDispatch } from 'react-redux';
@@ -149,36 +150,44 @@ function UserProfile() {
   const hasChartsData = gamesCount > 0 || tournamentWinsCount > 0;
 
   return (
-    <div className="row cb-bg-panel cb-rounded py-4">
-      <div className="col-12 col-md-3 my-4">
-        <div className="pl-md-2 text-center">
-          <div className="mb-2 mb-sm-4">
+    <Grid className="cb-bg-panel cb-rounded" py="lg">
+      <Grid.Col span={{ base: 12, md: 3 }} my="lg">
+        <Box ta="center" pl={{ base: 0, md: 'sm' }}>
+          <Box mb={{ base: 'sm', sm: 'lg' }}>
             <img
-              className="cb-profile-avatar rounded"
+              className="cb-profile-avatar"
+              style={{ borderRadius: 'var(--mantine-radius-sm)' }}
               src={user.avatarUrl}
               alt={i18n.t('User avatar')}
             />
-          </div>
+          </Box>
           <div>
-            <h1 className="cb-heading text-break font-weight-bold">{user.name}</h1>
+            <h1 className="cb-heading" style={{ wordBreak: 'break-word', fontWeight: 700 }}>
+              {user.name}
+            </h1>
             <hr className="cb-border-color" />
             <h3 className="cb-heading">
               <span>{i18n.t('Lang')}:</span>
               <LanguageIcon
-                className="ml-2"
                 lang={user.lang}
-                style={{ width: '30px', height: '30px' }}
+                style={{ marginLeft: '0.5rem', width: '30px', height: '30px' }}
               />
             </h3>
             <hr className="cb-border-color" />
-            <div className="text-center">
-              <p className="mb-1 small text-uppercase text-muted">{i18n.t('Clan')}</p>
+            <Box ta="center">
+              <Text mb="xs" size="sm" tt="uppercase" c="dimmed">
+                {i18n.t('Clan')}
+              </Text>
               {hasClan ? (
-                <span className="cb-heading text-break font-weight-bold">
+                <Text
+                  component="span"
+                  className="cb-heading"
+                  fw={700}
+                  style={{ wordBreak: 'break-word' }}
+                >
                   {user.clanId ? (
                     <a
-                      className="text-decoration-none"
-                      style={{ color: 'inherit' }}
+                      style={{ color: 'inherit', textDecoration: 'none' }}
                       href={`/clans/${user.clanId}`}
                     >
                       {user.clan}
@@ -186,245 +195,234 @@ function UserProfile() {
                   ) : (
                     user.clan
                   )}
-                </span>
+                </Text>
               ) : (
-                <span className="text-muted">{i18n.t('No clan')}</span>
+                <Text component="span" c="dimmed">
+                  {i18n.t('No clan')}
+                </Text>
               )}
-            </div>
+            </Box>
             <hr className="cb-border-color" />
-            <p className="mb-2 small text-monospace text-muted">
+            <Text mb="sm" size="sm" ff="monospace" c="dimmed">
               {i18n.t('joined at %{date}', { date: userInsertedAt })}
-            </p>
+            </Text>
             {user.githubName && (
-              <h3 className="h1">
-                <a
+              <Box component="h3" className="h1">
+                <Anchor
                   title={i18n.t('Github account')}
-                  className="text-muted"
+                  c="dimmed"
                   href={`https://github.com/${user.githubName}`}
                   aria-label={i18n.t('Github account')}
                 >
                   <span className="fab fa-github" />
-                </a>
-              </h3>
+                </Anchor>
+              </Box>
             )}
             {visibleAchievements.length > 0 && (
               <>
-                <hr className="mt-2" />
-                <h3 className="text-break cb-heading">{i18n.t('Achievements')}</h3>
-                <div className="cb-achievements-grid mt-3">
+                <Box component="hr" mt="sm" />
+                <h3 className="cb-heading" style={{ wordBreak: 'break-word' }}>
+                  {i18n.t('Achievements')}
+                </h3>
+                <Box className="cb-achievements-grid" mt="md">
                   {visibleAchievements.map((item) => (
                     <Achievement key={item.type} achievement={item} />
                   ))}
-                </div>
+                </Box>
               </>
             )}
             {seasonResults.length > 0 && (
               <>
-                <hr className="mt-3" />
-                <h3 className="text-break cb-heading">{i18n.t('Seasons')}</h3>
-                <div className="mt-2 text-left">
+                <Box component="hr" mt="md" />
+                <h3 className="cb-heading" style={{ wordBreak: 'break-word' }}>
+                  {i18n.t('Seasons')}
+                </h3>
+                <Box mt="sm" ta="left">
                   {seasonResults.map((result) => (
-                    <div
+                    <Box
                       key={result.seasonId}
-                      className="mb-2 p-2 cb-rounded"
+                      className="cb-rounded"
+                      mb="sm"
+                      p="sm"
                       style={{
                         backgroundColor: getSeasonPlaceColor(result.place),
                         border: '1px solid rgba(47, 52, 64, 0.25)',
                       }}
                     >
-                      <div className="font-weight-bold">
+                      <Box fw={700}>
                         <a
                           href={`/seasons/${result.seasonId}`}
-                          className="text-decoration-none"
-                          style={{ color: '#2f3440' }}
+                          style={{ color: '#2f3440', textDecoration: 'none' }}
                         >
                           {`${result.seasonName} ${result.seasonYear}`}
                         </a>
-                      </div>
-                      <div className="small" style={{ color: '#2f3440' }}>
+                      </Box>
+                      <Text size="sm" style={{ color: '#2f3440' }}>
                         {i18n.t('Place: #%{place}', { place: result.place })}
-                      </div>
-                    </div>
+                      </Text>
+                    </Box>
                   ))}
-                </div>
+                </Box>
               </>
             )}
           </div>
-        </div>
-      </div>
-      <div className="col-12 col-md-9 my-4">
-        <div className="pr-md-2 min-h-100 d-flex flex-column">
-          <nav>
-            <div
-              id="nav-tab"
-              role="tablist"
-              className="nav nav-tabs justify-content-around border-bottom cb-border-color"
-            >
-              <a
-                className="nav-item nav-link active text-uppercase border-0 text-center font-weight-bold rounded-0 flex-fill p-3"
-                id="statistics-tab"
-                data-toggle="tab"
-                href="#statistics"
-                role="tab"
-                aria-controls="statistics"
-                aria-selected="true"
-                onClick={() => setActiveTab('statistics')}
-              >
+        </Box>
+      </Grid.Col>
+      <Grid.Col span={{ base: 12, md: 9 }} my="lg">
+        <Flex className="min-h-100" direction="column" pr={{ base: 0, md: 'sm' }}>
+          <Tabs
+            value={activeTab}
+            onChange={(value) => setActiveTab(value ?? 'statistics')}
+            style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}
+          >
+            <Tabs.List grow>
+              <Tabs.Tab value="statistics" tt="uppercase" fw={700}>
                 {i18n.t('Statistics')}
-              </a>
-              <a
-                className="nav-item nav-link text-uppercase border-0 text-center font-weight-bold rounded-0 flex-fill p-3"
-                id="tournaments-tab"
-                data-toggle="tab"
-                href="#tournaments"
-                role="tab"
-                aria-controls="tournaments"
-                aria-selected="false"
-                onClick={() => setActiveTab('tournaments')}
-              >
+              </Tabs.Tab>
+              <Tabs.Tab value="tournaments" tt="uppercase" fw={700}>
                 {i18n.t('Tournaments')}
-              </a>
-              <a
-                className="nav-item nav-link text-uppercase border-0 text-center font-weight-bold rounded-0 flex-fill p-3"
-                id="completedGames-tab"
-                data-toggle="tab"
-                href="#completedGames"
-                role="tab"
-                aria-controls="completedGames"
-                aria-selected="false"
-                onClick={() => setActiveTab('completedGames')}
-              >
+              </Tabs.Tab>
+              <Tabs.Tab value="completedGames" tt="uppercase" fw={700}>
                 {i18n.t('Completed games')}
-              </a>
-            </div>
-          </nav>
-          <div
-            className="tab-content border cb-border-color border-top-0 rounded-bottom flex-grow-1 basis-0"
-            id="nav-tabContent"
-          >
-            <div
-              className="tab-pane fade show active"
-              id="statistics"
-              role="tabpanel"
-              aria-labelledby="statistics-tab"
+              </Tabs.Tab>
+            </Tabs.List>
+            <Box
+              className="basis-0"
+              style={{
+                flexGrow: 1,
+                border: '1px solid var(--mantine-color-default-border)',
+                borderTop: 0,
+                borderBottomLeftRadius: 'var(--mantine-radius-md)',
+                borderBottomRightRadius: 'var(--mantine-radius-md)',
+              }}
             >
-              <div className="row mt-5 px-3 justify-content-center">
-                <div className="col col-md-3 text-center">
-                  <div className="h1 cb-stats-number">{user.rating}</div>
-                  <p className="lead">{i18n.t('(Elo Rating)')}</p>
-                </div>
-                {!user.isBot && (
-                  <div className="col col-md-3 text-center">
-                    <div className="h1 cb-stats-number">{`#${user.rank}`}</div>
-                    <p className="lead">{i18n.t('Place')}</p>
-                  </div>
+              <Tabs.Panel value="statistics" keepMounted>
+                <Grid mt="xl" px="md" justify="center">
+                  <Grid.Col span={{ base: 'auto', md: 3 }} ta="center">
+                    <div className="h1 cb-stats-number">{user.rating}</div>
+                    <p className="lead">{i18n.t('(Elo Rating)')}</p>
+                  </Grid.Col>
+                  {!user.isBot && (
+                    <Grid.Col span={{ base: 'auto', md: 3 }} ta="center">
+                      <div className="h1 cb-stats-number">{`#${user.rank}`}</div>
+                      <p className="lead">{i18n.t('Place')}</p>
+                    </Grid.Col>
+                  )}
+                  <Grid.Col span={{ base: 'auto', md: 3 }} ta="center">
+                    <div className="h1 cb-stats-number">{user.points || 0}</div>
+                    <p className="lead">{i18n.t('Points')}</p>
+                  </Grid.Col>
+                </Grid>
+                {hasChartsData && (
+                  <UserStatCharts gameStats={gameStats} tournamentStats={tournamentStats} />
                 )}
-                <div className="col col-md-3 text-center">
-                  <div className="h1 cb-stats-number">{user.points || 0}</div>
-                  <p className="lead">{i18n.t('Points')}</p>
-                </div>
-              </div>
-              {hasChartsData && (
-                <UserStatCharts gameStats={gameStats} tournamentStats={tournamentStats} />
-              )}
-              {rivalsStatus === 'loading' && (
-                <div className="row mt-5 px-3 justify-content-center">
-                  <div className="col-12 col-lg-10">
-                    <div className="small text-center text-muted mb-2">{i18n.t('Rivals')}</div>
-                    <Loading small />
-                  </div>
-                </div>
-              )}
-              {rivalsStatus === 'loaded' && topRivals.length > 0 && (
-                <div className="row mt-5 px-3 justify-content-center">
-                  <div className="col-12 col-lg-10">
-                    <div className="small text-center text-muted mb-2">{i18n.t('Rivals')}</div>
-                    <div className="d-flex flex-wrap justify-content-center">
-                      {topRivals.map((rival) => (
-                        <a
-                          key={rival.id}
-                          href={`/users/${rival.id}`}
-                          className="m-1 px-3 py-2 cb-rounded font-weight-bold text-decoration-none d-block"
-                          style={{
-                            backgroundColor: '#c2c9d6',
-                            border: '1px solid #a4aab3',
-                            color: '#2f3440',
-                            minWidth: '180px',
-                            textAlign: 'center',
-                          }}
-                        >
-                          <div>{rival.name}</div>
-                          <div className="small">
-                            {i18n.t('Clan: %{clan}', { clan: rival.clan || '-' })}
-                          </div>
-                          <div className="small">
-                            {i18n.t('W/L/T: %{wins}/%{losses}/%{timeouts}', {
-                              wins: rival.winsCount,
-                              losses: rival.lossesCount,
-                              timeouts: rival.timeoutsCount,
-                            })}
-                          </div>
-                        </a>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              )}
-              {languageGamesCount > 0 && (
-                <div className="row mt-5 px-3 justify-content-center">
-                  <div className="col-12 col-lg-10">
-                    <div className="small text-center text-muted mb-2">{i18n.t('Languages')}</div>
-                    <div className="d-flex flex-wrap justify-content-center">
-                      {languageEntries.map(([lang, count]) => (
-                        <div
-                          key={lang}
-                          className="m-1 px-3 py-2 cb-rounded font-weight-bold"
-                          style={{
-                            backgroundColor: '#c2c9d6',
-                            border: '1px solid #a4aab3',
-                            color: '#2f3440',
-                            minWidth: '88px',
-                            textAlign: 'center',
-                          }}
-                        >
-                          {`${lang} · ${count}`}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              )}
-              <div className="row mt-5 mb-md-3 mb-lg-4">
-                <div className="col-12">
-                  <div className="small text-center text-muted mb-2">{i18n.t('Activity')}</div>
-                  <Heatmap />
-                </div>
-              </div>
-            </div>
-            <div
-              className="tab-pane fade min-h-100"
-              id="tournaments"
-              role="tabpanel"
-              aria-labelledby="tournaments-tab"
-            >
-              <div className="h-100 d-flex flex-column justify-content-center">
-                <UserTournaments isActive={activeTab === 'tournaments'} />
-              </div>
-            </div>
-            <div
-              className="tab-pane fade min-h-100"
-              id="completedGames"
-              role="tabpanel"
-              aria-labelledby="completedGames-tab"
-            >
-              <div className="h-100 d-flex flex-column justify-content-center">
-                <CompletedGames className="h-100" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+                {rivalsStatus === 'loading' && (
+                  <Grid mt="xl" px="md" justify="center">
+                    <Grid.Col span={{ base: 12, lg: 10 }}>
+                      <Text size="sm" ta="center" c="dimmed" mb="sm">
+                        {i18n.t('Rivals')}
+                      </Text>
+                      <Loading small />
+                    </Grid.Col>
+                  </Grid>
+                )}
+                {rivalsStatus === 'loaded' && topRivals.length > 0 && (
+                  <Grid mt="xl" px="md" justify="center">
+                    <Grid.Col span={{ base: 12, lg: 10 }}>
+                      <Text size="sm" ta="center" c="dimmed" mb="sm">
+                        {i18n.t('Rivals')}
+                      </Text>
+                      <Flex wrap="wrap" justify="center">
+                        {topRivals.map((rival) => (
+                          <Anchor
+                            key={rival.id}
+                            href={`/users/${rival.id}`}
+                            className="cb-rounded"
+                            display="block"
+                            td="none"
+                            m="xs"
+                            px="md"
+                            py="sm"
+                            fw={700}
+                            style={{
+                              backgroundColor: '#c2c9d6',
+                              border: '1px solid #a4aab3',
+                              color: '#2f3440',
+                              minWidth: '180px',
+                              textAlign: 'center',
+                            }}
+                          >
+                            <div>{rival.name}</div>
+                            <Text size="sm">
+                              {i18n.t('Clan: %{clan}', { clan: rival.clan || '-' })}
+                            </Text>
+                            <Text size="sm">
+                              {i18n.t('W/L/T: %{wins}/%{losses}/%{timeouts}', {
+                                wins: rival.winsCount,
+                                losses: rival.lossesCount,
+                                timeouts: rival.timeoutsCount,
+                              })}
+                            </Text>
+                          </Anchor>
+                        ))}
+                      </Flex>
+                    </Grid.Col>
+                  </Grid>
+                )}
+                {languageGamesCount > 0 && (
+                  <Grid mt="xl" px="md" justify="center">
+                    <Grid.Col span={{ base: 12, lg: 10 }}>
+                      <Text size="sm" ta="center" c="dimmed" mb="sm">
+                        {i18n.t('Languages')}
+                      </Text>
+                      <Flex wrap="wrap" justify="center">
+                        {languageEntries.map(([lang, count]) => (
+                          <Box
+                            key={lang}
+                            className="cb-rounded"
+                            m="xs"
+                            px="md"
+                            py="sm"
+                            fw={700}
+                            style={{
+                              backgroundColor: '#c2c9d6',
+                              border: '1px solid #a4aab3',
+                              color: '#2f3440',
+                              minWidth: '88px',
+                              textAlign: 'center',
+                            }}
+                          >
+                            {`${lang} · ${count}`}
+                          </Box>
+                        ))}
+                      </Flex>
+                    </Grid.Col>
+                  </Grid>
+                )}
+                <Grid mt="xl" mb={{ md: 'md', lg: 'lg' }}>
+                  <Grid.Col span={12}>
+                    <Text size="sm" ta="center" c="dimmed" mb="sm">
+                      {i18n.t('Activity')}
+                    </Text>
+                    <Heatmap />
+                  </Grid.Col>
+                </Grid>
+              </Tabs.Panel>
+              <Tabs.Panel value="tournaments" className="min-h-100" keepMounted>
+                <Flex h="100%" direction="column" justify="center">
+                  <UserTournaments isActive={activeTab === 'tournaments'} />
+                </Flex>
+              </Tabs.Panel>
+              <Tabs.Panel value="completedGames" className="min-h-100" keepMounted>
+                <Flex h="100%" direction="column" justify="center">
+                  <CompletedGames className="h-100" />
+                </Flex>
+              </Tabs.Panel>
+            </Box>
+          </Tabs>
+        </Flex>
+      </Grid.Col>
+    </Grid>
   );
 }
 

From 1ac369d3101d65a7fded5410260cea956c1b57f1 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 22:43:21 +0300
Subject: [PATCH 29/46] Convert lobby tournament lists to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LiveTournaments + CompletedTournaments tables → Mantine Table with responsive
display/hiddenFrom for the desktop-table vs mobile-card split. ShowButton and
TournamentCard left as Bootstrap pending the shared-ShowButton slice (coupled to
GameActionButton and its test). Recorded lobby progress + couplings in the spec.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 18 ++++
 .../pages/lobby/CompletedTournaments.tsx      | 81 ++++++++++-------
 .../widgets/pages/lobby/LiveTournaments.tsx   | 89 +++++++++++--------
 3 files changed, 122 insertions(+), 66 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 75c932fc2..da83895c2 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -408,6 +408,24 @@ uppercase/bold, fill the width (`grow`), and join the bordered content box below
 Also: heatmap `NativeSelect` may add a chevron over the native arrow (as in
 `SeasonLeaderboard`); the avatar corner radius (was `rounded`, now inline `sm`).
 
+In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
+- Done: `LiveTournaments` + `CompletedTournaments` (twin tournament-list
+  sections) — `table table-striped` → `<Table striped>` in a `<Box>` that keeps
+  the responsive `d-none d-md-block` as `display={{ base:'none', md:'block' }}`;
+  the mobile `<HorizontalScrollControls>` (already Mantine) wrapped in a
+  `<Box hiddenFrom="md">` (was `d-md-none`); empty-state → `<Flex>`/`<Text>`/
+  `<Anchor>`. They still render `ShowButton` + `TournamentCard` as **Bootstrap**
+  (deferred — see coupling below).
+- **Coupling to untangle next:** `ShowButton` (native `btn btn-secondary`
+  anchor) is shared by `GameActionButton`, `GameCard`, `TournamentCard`, and the
+  tournament lists. `GameActionButton.test` renders it **without**
+  `MantineTestProvider` and asserts a Bootstrap `w-100` class on its own link, so
+  converting `ShowButton` → Mantine `<Button component="a">` must also wrap that
+  test (and likely convert `GameActionButton`). Do `ShowButton` +
+  `GameActionButton` + `GameCard` + `TournamentCard` together as one slice.
+- **Deferred (react-select):** `TaskChoice` uses react-select — leave with
+  `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` for the one-PR lib swap.
+
 ### Conversion vocabulary
 
 | Bootstrap | Mantine |
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/CompletedTournaments.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/CompletedTournaments.tsx
index 0fc107942..c9d9c75db 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/CompletedTournaments.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/CompletedTournaments.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 
+import { Box, Table } from '@mantine/core';
 import isEmpty from 'lodash/isEmpty';
 import orderBy from 'lodash/orderBy';
 import moment from 'moment';
@@ -22,40 +23,60 @@ function CompletedTournaments({ tournaments = [] }: CompletedTournamentsProps) {
   }
 
   return (
-    <div className="table-responsive">
-      <h2 className="text-center mt-3">{i18n.t('Completed tournaments')}</h2>
-      <div className="d-none d-md-block table-responsive rounded-bottom">
-        <table className="table table-striped">
-          <thead className="">
-            <tr>
-              <th className="p-3 border-0">{i18n.t('Title')}</th>
-              <th className="p-3 border-0">{i18n.t('Type')}</th>
-              <th className="p-3 border-0">{i18n.t('Starts at')}</th>
-              <th className="p-3 border-0">{i18n.t('Actions')}</th>
-            </tr>
-          </thead>
-          <tbody className="">
+    <Box style={{ overflowX: 'auto' }}>
+      <Box component="h2" ta="center" mt="md">
+        {i18n.t('Completed tournaments')}
+      </Box>
+      <Box
+        display={{ base: 'none', md: 'block' }}
+        style={{
+          overflowX: 'auto',
+          borderBottomLeftRadius: 'var(--mantine-radius-md)',
+          borderBottomRightRadius: 'var(--mantine-radius-md)',
+        }}
+      >
+        <Table
+          striped
+          verticalSpacing="md"
+          horizontalSpacing="md"
+          styles={{ td: { verticalAlign: 'middle' } }}
+        >
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{i18n.t('Title')}</Table.Th>
+              <Table.Th>{i18n.t('Type')}</Table.Th>
+              <Table.Th>{i18n.t('Starts at')}</Table.Th>
+              <Table.Th>{i18n.t('Actions')}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
             {sortedTournaments.map((tournament) => (
-              <tr key={tournament.id}>
-                <td className="p-3 align-middle">{tournament.name}</td>
-                <td className="p-3 align-middle">{tournament.type}</td>
-                <td className="p-3 align-middle text-nowrap">
+              <Table.Tr key={tournament.id}>
+                <Table.Td>{tournament.name}</Table.Td>
+                <Table.Td>{tournament.type}</Table.Td>
+                <Table.Td style={{ whiteSpace: 'nowrap' }}>
                   {moment.utc(tournament.startsAt).local().format('YYYY-MM-DD HH:mm')}
-                </td>
-                <td className="p-3 align-middle">
+                </Table.Td>
+                <Table.Td>
                   <ShowButton url={`/tournaments/${tournament.id}/`} />
-                </td>
-              </tr>
+                </Table.Td>
+              </Table.Tr>
             ))}
-          </tbody>
-        </table>
-      </div>
-      <HorizontalScrollControls className="d-md-none m-2">
-        {sortedTournaments.map((tournament) => (
-          <TournamentCard key={`card-${tournament.id}`} type="completed" tournament={tournament} />
-        ))}
-      </HorizontalScrollControls>
-    </div>
+          </Table.Tbody>
+        </Table>
+      </Box>
+      <Box hiddenFrom="md" m="sm">
+        <HorizontalScrollControls>
+          {sortedTournaments.map((tournament) => (
+            <TournamentCard
+              key={`card-${tournament.id}`}
+              type="completed"
+              tournament={tournament}
+            />
+          ))}
+        </HorizontalScrollControls>
+      </Box>
+    </Box>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/LiveTournaments.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/LiveTournaments.tsx
index a8cf3dccb..366a7c293 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/LiveTournaments.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/LiveTournaments.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 
+import { Anchor, Box, Flex, Table, Text } from '@mantine/core';
 import isEmpty from 'lodash/isEmpty';
 import orderBy from 'lodash/orderBy';
 import moment from 'moment';
@@ -19,55 +20,71 @@ function LiveTournaments({ tournaments = [] }: LiveTournamentsProps) {
 
   if (isEmpty(tournaments)) {
     return (
-      <div className="d-flex flex-column text-center">
-        <span className="mb-0 mt-3 p-3 text-muted">
+      <Flex direction="column" ta="center">
+        <Text mb={0} mt="md" p="md" c="dimmed">
           {i18n.t('There are no active tournaments right now')}
-        </span>
-        <a className="text-primary" href="/tournaments/#create">
+        </Text>
+        <Anchor href="/tournaments/#create">
           <u>{i18n.t('You may want to create one')}</u>
-        </a>
-      </div>
+        </Anchor>
+      </Flex>
     );
   }
 
   return (
-    <div className="table-responsive">
-      <h2 className="text-center mt-3">{i18n.t('Live tournaments')}</h2>
-      <div className="d-none d-md-block table-responsive rounded-bottom">
-        <table className="table table-striped">
-          <thead className="">
-            <tr>
-              <th className="p-3 border-0">{i18n.t('Title')}</th>
-              <th className="p-3 border-0">{i18n.t('Starts at')}</th>
-              <th className="p-3 border-0">{i18n.t('Actions')}</th>
-            </tr>
-          </thead>
-          <tbody className="">
+    <Box style={{ overflowX: 'auto' }}>
+      <Box component="h2" ta="center" mt="md">
+        {i18n.t('Live tournaments')}
+      </Box>
+      <Box
+        display={{ base: 'none', md: 'block' }}
+        style={{
+          overflowX: 'auto',
+          borderBottomLeftRadius: 'var(--mantine-radius-md)',
+          borderBottomRightRadius: 'var(--mantine-radius-md)',
+        }}
+      >
+        <Table
+          striped
+          verticalSpacing="md"
+          horizontalSpacing="md"
+          styles={{ td: { verticalAlign: 'middle' } }}
+        >
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{i18n.t('Title')}</Table.Th>
+              <Table.Th>{i18n.t('Starts at')}</Table.Th>
+              <Table.Th>{i18n.t('Actions')}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
             {sortedTournaments.map((tournament) => (
-              <tr key={tournament.id}>
-                <td className="p-3 align-middle">{tournament.name}</td>
-                <td className="p-3 align-middle text-nowrap">
+              <Table.Tr key={tournament.id}>
+                <Table.Td>{tournament.name}</Table.Td>
+                <Table.Td style={{ whiteSpace: 'nowrap' }}>
                   {moment.utc(tournament.startsAt).local().format('YYYY-MM-DD HH:mm')}
-                </td>
-                <td className="p-3 align-middle">
+                </Table.Td>
+                <Table.Td>
                   <ShowButton url={`/tournaments/${tournament.id}/`} />
-                </td>
-              </tr>
+                </Table.Td>
+              </Table.Tr>
             ))}
-          </tbody>
-        </table>
-      </div>
-      <HorizontalScrollControls className="d-md-none m-2">
-        {sortedTournaments.map((tournament) => (
-          <TournamentCard key={`card-${tournament.id}`} type="active" tournament={tournament} />
-        ))}
-      </HorizontalScrollControls>
-      <div className="text-center mt-3">
+          </Table.Tbody>
+        </Table>
+      </Box>
+      <Box hiddenFrom="md" m="sm">
+        <HorizontalScrollControls>
+          {sortedTournaments.map((tournament) => (
+            <TournamentCard key={`card-${tournament.id}`} type="active" tournament={tournament} />
+          ))}
+        </HorizontalScrollControls>
+      </Box>
+      <Box ta="center" mt="md">
         <a href="/tournaments">
           <u>{i18n.t('Tournaments Info')}</u>
         </a>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
 

From 0cf18238c15bba2babdb077247e678039a095418 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 22:46:10 +0300
Subject: [PATCH 30/46] Convert lobby ShowButton to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shared "Show" anchor → Mantine Button component="a" (color cbSecondary). Safe
standalone leaf — no test renders it provider-less. Updated the lobby progress
notes: GameActionButton (tooltips/btn-group/data-methods) + GameCard +
TournamentCard remain as the next slice.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   | 22 +++++++++++--------
 .../js/widgets/pages/lobby/ShowButton.tsx     | 14 ++++++++----
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index da83895c2..ee039ca68 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -414,15 +414,19 @@ In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
   the responsive `d-none d-md-block` as `display={{ base:'none', md:'block' }}`;
   the mobile `<HorizontalScrollControls>` (already Mantine) wrapped in a
   `<Box hiddenFrom="md">` (was `d-md-none`); empty-state → `<Flex>`/`<Text>`/
-  `<Anchor>`. They still render `ShowButton` + `TournamentCard` as **Bootstrap**
-  (deferred — see coupling below).
-- **Coupling to untangle next:** `ShowButton` (native `btn btn-secondary`
-  anchor) is shared by `GameActionButton`, `GameCard`, `TournamentCard`, and the
-  tournament lists. `GameActionButton.test` renders it **without**
-  `MantineTestProvider` and asserts a Bootstrap `w-100` class on its own link, so
-  converting `ShowButton` → Mantine `<Button component="a">` must also wrap that
-  test (and likely convert `GameActionButton`). Do `ShowButton` +
-  `GameActionButton` + `GameCard` + `TournamentCard` together as one slice.
+  `<Anchor>`.
+- Done: `ShowButton` (shared "Show" anchor) → `<Button component="a"
+  color="cbSecondary" size="sm" radius="md">` (the `type==='table'` variant adds
+  `px="lg" ml="xs"`). Safe as a standalone leaf — no test renders it
+  provider-less (`GameActionButton.test` hits the `ContinueButton` branch, not
+  `ShowButton`).
+- **Next slice (still Bootstrap):** `GameActionButton` + `GameCard` +
+  `TournamentCard`. `GameActionButton` is the heavy one: Bootstrap-JS tooltips
+  (`data-toggle="tooltip"` → Mantine `<Tooltip>`), `btn-group` (→ `Button.Group`),
+  icon `btn`s (`far fa-copy` / `fas fa-times` → `<ActionIcon>`), and Phoenix
+  `data-method`/`data-to` links (keep the attrs). `GameActionButton.test` asserts
+  a Bootstrap `w-100` class on the card `ContinueButton` link — that assertion
+  must change (→ Mantine `fullWidth`) when `ContinueButton` converts.
 - **Deferred (react-select):** `TaskChoice` uses react-select — leave with
   `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` for the one-PR lib swap.
 
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/ShowButton.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/ShowButton.tsx
index 75fb90909..06b3d5703 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/ShowButton.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/ShowButton.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Button } from '@mantine/core';
+
 import i18n from '../../../i18n';
 
 interface ShowButtonProps {
@@ -9,13 +11,17 @@ interface ShowButtonProps {
 
 function ShowButton({ url, type = 'table' }: ShowButtonProps) {
   return (
-    <a
-      type="button"
-      className={`btn ${type === 'table' ? 'px-4 ml-1' : ''} btn-secondary btn-sm rounded-lg`}
+    <Button
+      component="a"
       href={url}
+      color="cbSecondary"
+      size="sm"
+      radius="md"
+      px={type === 'table' ? 'lg' : undefined}
+      ml={type === 'table' ? 'xs' : undefined}
     >
       {i18n.t('Show')}
-    </a>
+    </Button>
   );
 }
 

From 892220d3257118bf5f46dd43ed9d2c42f0c83ecf Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 23:02:01 +0300
Subject: [PATCH 31/46] Convert lobby GameActionButton/GameCard/TournamentCard
 to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shared game-button cluster: ContinueButton/Fight/Sign-in → Mantine Button
(keeping Phoenix data-method/data-to); waiting-opponent btn-group → Group with
tooltip-wrapped ActionIcons (Bootstrap-JS tooltips → Mantine Tooltip; cancel
keeps btn-hover for the game-item:hover reveal). GameCard/TournamentCard layout
→ Flex/Paper keeping cb-*/game-item/bg-gray design classes. GameActionButton.test
wrapped in MantineTestProvider; w-100 assertion → data-block.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  38 ++++-
 .../js/__tests__/GameActionButton.test.tsx    |  26 ++--
 .../widgets/pages/lobby/GameActionButton.tsx  | 130 +++++++++---------
 .../js/widgets/pages/lobby/GameCard.tsx       |  93 +++++++------
 .../js/widgets/pages/lobby/TournamentCard.tsx |  38 +++--
 5 files changed, 186 insertions(+), 139 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index ee039ca68..3a91c0e20 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -420,15 +420,39 @@ In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
   `px="lg" ml="xs"`). Safe as a standalone leaf — no test renders it
   provider-less (`GameActionButton.test` hits the `ContinueButton` branch, not
   `ShowButton`).
-- **Next slice (still Bootstrap):** `GameActionButton` + `GameCard` +
-  `TournamentCard`. `GameActionButton` is the heavy one: Bootstrap-JS tooltips
-  (`data-toggle="tooltip"` → Mantine `<Tooltip>`), `btn-group` (→ `Button.Group`),
-  icon `btn`s (`far fa-copy` / `fas fa-times` → `<ActionIcon>`), and Phoenix
-  `data-method`/`data-to` links (keep the attrs). `GameActionButton.test` asserts
-  a Bootstrap `w-100` class on the card `ContinueButton` link — that assertion
-  must change (→ Mantine `fullWidth`) when `ContinueButton` converts.
+- Done: `GameActionButton` + `GameCard` + `TournamentCard` (the shared-button
+  cluster). `ContinueButton` → `<Button component="a" color="cbSuccess">`
+  (`w-100` on the card variant → `fullWidth`); the waiting-opponent `btn-group`s →
+  `<Group gap="xs" wrap="nowrap">` with a `<ContinueButton>` + two
+  tooltip-wrapped `<ActionIcon variant="subtle">` (copy / cancel) — the
+  Bootstrap-JS tooltips (`data-toggle="tooltip"`) became Mantine `<Tooltip>`, and
+  the **cancel icon keeps `className="btn-hover"`** so the `.game-item:hover
+  .btn-hover { visibility:visible }` reveal-on-hover still works. `Fight`
+  (`btn-orange` = brand orange) → default `<Button>`; the guest `Sign in`
+  (`btn-outline-success`) → `<Button variant="outline" color="cbSuccess">`. Both
+  keep their Phoenix `data-method`/`data-to`/`data-csrf` attrs (native
+  `<button>`). Icon-font `<i class="far fa-copy" / "fas fa-times">` spans kept
+  inside the ActionIcons. `GameCard` layout → `<Flex>` keeping
+  `game-item`/`cb-bg-panel`/`bg-gray`/`cb-border-color`/`cb-rounded` design
+  classes (and `game-item` for the hover selector + games-table row border);
+  `UserSimpleStats` buttons → `<Button color="cbSecondary|cbSuccess|red">`;
+  completed-card `Show` link → `<Button component="a" color="cbSecondary">`.
+  `TournamentCard` (mobile white card) → `<Paper bg="white" withBorder
+  shadow="sm">`. `GameActionButton.test` wrapped in `MantineTestProvider`; its
+  `w-100` assertion → `data-block="true"` (Mantine `fullWidth`).
 - **Deferred (react-select):** `TaskChoice` uses react-select — leave with
   `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` for the one-PR lib swap.
+- **Remaining lobby leaves/containers (still Bootstrap):** `ActiveGames`,
+  `CompletedGames`, `Leaderboard`, `Players`, `Announcement`, `LobbyChat`,
+  `LobbyLoading`, `CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`,
+  `CodebattleLeagueDescription`, `LobbyWidget` (container), `TournamentModal`,
+  `ChatActionModal`, `GameRoomPreview`, `Announcement`.
+
+⚠️ QA (lobby cluster): the games-table Continue/copy/cancel row (Group vs the old
+attached `btn-group`); the **cancel button still hidden until you hover the game
+row/card** (`btn-hover`); the `TournamentCard` white card's text stays dark on
+white (elements inherit color — no explicit dark text was set); Fight button is
+now brand orange (was `btn-orange`, same orange).
 
 ### Conversion vocabulary
 
diff --git a/apps/codebattle/assets/js/__tests__/GameActionButton.test.tsx b/apps/codebattle/assets/js/__tests__/GameActionButton.test.tsx
index 5f7d519ea..2f76ca064 100644
--- a/apps/codebattle/assets/js/__tests__/GameActionButton.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/GameActionButton.test.tsx
@@ -4,19 +4,23 @@ import { render, screen } from '@testing-library/react';
 
 import GameActionButton from '../widgets/pages/lobby/GameActionButton';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 test('uses the full-width localized continue action outside the games table', () => {
   render(
-    <GameActionButton
-      type="card"
-      currentUserId={7}
-      game={{
-        id: 42,
-        state: 'playing',
-        level: 'easy',
-        players: [{ id: 7 }],
-      }}
-    />,
+    <MantineTestProvider>
+      <GameActionButton
+        type="card"
+        currentUserId={7}
+        game={{
+          id: 42,
+          state: 'playing',
+          level: 'easy',
+          players: [{ id: 7 }],
+        }}
+      />
+    </MantineTestProvider>,
   );
 
-  expect(screen.getByRole('link', { name: 'Continue' })).toHaveClass('w-100');
+  expect(screen.getByRole('link', { name: 'Continue' })).toHaveAttribute('data-block', 'true');
 });
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/GameActionButton.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/GameActionButton.tsx
index a7b7a8bbe..c3febb008 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/GameActionButton.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/GameActionButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { ActionIcon, Button, Flex, Group, Tooltip } from '@mantine/core';
 import copy from 'copy-to-clipboard';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
@@ -36,13 +37,50 @@ interface ContinueButtonProps {
 
 function ContinueButton({ url, type = 'table' }: ContinueButtonProps) {
   return (
-    <a
-      type="button"
-      className={`btn btn-success ${type === 'table' ? '' : 'w-100'} text-white btn-sm rounded-lg`}
+    <Button
+      component="a"
       href={url}
+      color="cbSuccess"
+      size="sm"
+      radius="md"
+      fullWidth={type !== 'table'}
     >
       {i18n.t('Continue')}
-    </a>
+    </Button>
+  );
+}
+
+function CopyLinkButton({ gameUrl }: { gameUrl: string }) {
+  return (
+    <Tooltip label={i18n.t('Copy link')} position="right">
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="lg"
+        onClick={() => copy(`${window.location.host}${gameUrl}`)}
+        aria-label={i18n.t('Copy link')}
+      >
+        <i className="far fa-copy" />
+      </ActionIcon>
+    </Tooltip>
+  );
+}
+
+function CancelGameButton({ isOnline, onCancel }: { isOnline?: boolean; onCancel: () => void }) {
+  return (
+    <Tooltip label={i18n.t('Cancel game')} position="right">
+      <ActionIcon
+        className="btn-hover"
+        variant="subtle"
+        color="gray"
+        size="lg"
+        onClick={onCancel}
+        aria-label={i18n.t('Cancel game')}
+        disabled={!isOnline}
+      >
+        <i className="fas fa-times" />
+      </ActionIcon>
+    </Tooltip>
   );
 }
 
@@ -65,6 +103,7 @@ function GameActionButton({
   const gameUrlJoin = makeGameUrl(game.id, 'join');
   const gameState = game.state;
   const signInUrl = getSignInGithubUrl();
+  const onCancel = lobbyMiddlewares.cancelGame(game.id);
 
   if (gameState === gameStateCodes.playing) {
     return havePlayer(currentUserId, game) ? (
@@ -79,91 +118,54 @@ function GameActionButton({
 
     if (playing && type === 'table') {
       return (
-        <div className="d-flex justify-content-center">
-          <div className="btn-group ml-5">
+        <Flex justify="center">
+          <Group gap="xs" wrap="nowrap" ml="xl">
             <ContinueButton url={gameUrl} />
-            <button
-              type="button"
-              className="btn btn-sm btn-outline-secondary border-0"
-              onClick={() => copy(`${window.location.host}${gameUrl}`)}
-              data-toggle="tooltip"
-              data-placement="right"
-              title={i18n.t('Copy link')}
-              aria-label={i18n.t('Copy link')}
-            >
-              <i className="far fa-copy" />
-            </button>
-            <button
-              type="button"
-              className="btn btn-sm btn-hover border-0"
-              onClick={lobbyMiddlewares.cancelGame(game.id)}
-              data-toggle="tooltip"
-              data-placement="right"
-              title={i18n.t('Cancel game')}
-              aria-label={i18n.t('Cancel game')}
-              disabled={!isOnline}
-            >
-              <i className="fas fa-times" />
-            </button>
-          </div>
-        </div>
+            <CopyLinkButton gameUrl={gameUrl} />
+            <CancelGameButton isOnline={isOnline} onCancel={onCancel} />
+          </Group>
+        </Flex>
       );
     }
 
     if (playing) {
       return (
-        <div className="btn-group">
+        <Group gap="xs" wrap="nowrap">
           <ContinueButton url={gameUrl} type={type} />
-          <button
-            type="button"
-            className="btn btn-sm btn-outline-secondary border-0"
-            onClick={() => copy(`${window.location.host}${gameUrl}`)}
-            data-toggle="tooltip"
-            data-placement="right"
-            title={i18n.t('Copy link')}
-            aria-label={i18n.t('Copy link')}
-          >
-            <i className="far fa-copy" />
-          </button>
-          <button
-            type="button"
-            className="btn btn-sm btn-hover border-0"
-            onClick={lobbyMiddlewares.cancelGame(game.id)}
-            data-toggle="tooltip"
-            data-placement="right"
-            title={i18n.t('Cancel game')}
-            aria-label={i18n.t('Cancel game')}
-            disabled={!isOnline}
-          >
-            <i className="fas fa-times" />
-          </button>
-        </div>
+          <CopyLinkButton gameUrl={gameUrl} />
+          <CancelGameButton isOnline={isOnline} onCancel={onCancel} />
+        </Group>
       );
     }
 
     if (isGuest) {
       return (
-        <button
-          type="button"
-          className={`btn ${type === 'table' ? 'w-100' : ''} btn-outline-success btn-sm rounded-lg`}
+        <Button
+          variant="outline"
+          color="cbSuccess"
+          size="sm"
+          radius="md"
+          fullWidth={type === 'table'}
           data-method="get"
           data-to={signInUrl}
         >
           {i18n.t('Sign in with %{name}', { name: 'Github' })}
-        </button>
+        </Button>
       );
     }
 
     return (
-      <button
-        type="button"
-        className={`btn btn-orange btn-sm ${type === 'table' ? 'ml-1 px-4' : ''} rounded-lg`}
+      <Button
+        size="sm"
+        radius="md"
+        px={type === 'table' ? 'lg' : undefined}
+        ml={type === 'table' ? 'xs' : undefined}
         data-method="post"
         data-csrf={window.csrf_token}
         data-to={gameUrlJoin}
       >
         {i18n.t('Fight')}
-      </button>
+      </Button>
     );
   }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/GameCard.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/GameCard.tsx
index ac8d3421a..95db87106 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/GameCard.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/GameCard.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import { Box, Button, Flex, Text } from '@mantine/core';
+
 import GameLevelBadge from '../../components/GameLevelBadge';
 import ResultIcon from '../../components/ResultIcon';
 import UserInfo from '../../components/UserInfo';
@@ -74,32 +76,30 @@ function UserSimpleStats({ user }: UserSimpleStatsProps) {
   return (
     <>
       {state === 'loading' && (
-        <button
-          type="button"
-          className="btn btn-sm btn-secondary cb-btn-secondary cb-rounded"
-          disabled
-        >
+        <Button size="sm" color="cbSecondary" radius="md" disabled>
           Loading...
-        </button>
+        </Button>
       )}
       {state === 'closed' && (
-        <button
-          type="button"
-          className="btn btn-sm btn-success cb-btn-success cb-btn-success text-nowrap text-white cb-rounded"
+        <Button
+          size="sm"
+          color="cbSuccess"
+          radius="md"
           onClick={load}
+          style={{ whiteSpace: 'nowrap' }}
         >
           Show stats
-        </button>
+        </Button>
       )}
       {state === 'opened' && (
-        <span className="text-nowrap">
+        <Text component="span" style={{ whiteSpace: 'nowrap' }}>
           {`Won/Lost: ${getPerfomance(data?.won ?? 0, data?.lost ?? 0)}`}
-        </span>
+        </Text>
       )}
       {state === 'error' && (
-        <button type="button" className="btn btn-sm btn-danger cb-rounded" onClick={load}>
+        <Button size="sm" color="red" radius="md" onClick={load}>
           Reload
-        </button>
+        </Button>
       )}
     </>
   );
@@ -126,44 +126,57 @@ function GameCard({
   };
 
   return (
-    <div
+    <Flex
       key={`card-${game.id}`}
-      className="d-flex flex-column game-item cb-bg-panel shadow-sm p-2 mx-2 border cb-border-color cb-rounded"
+      className="game-item cb-bg-panel cb-border-color cb-rounded"
+      direction="column"
+      p="sm"
+      mx="sm"
+      style={{
+        boxShadow: 'var(--mantine-shadow-sm)',
+        border: '1px solid var(--mantine-color-default-border)',
+      }}
     >
-      <div className="d-flex mb-2 h-100">
-        <div className="d-flex flex-column justify-content-around mr-2 bg-gray p-2 cb-rounded">
-          <div className="mb-2">
+      <Flex mb="sm" h="100%">
+        <Flex
+          direction="column"
+          justify="space-around"
+          className="bg-gray cb-rounded"
+          mr="sm"
+          p="sm"
+        >
+          <Box mb="sm">
             <GameLevelBadge level={game.level} />
-          </div>
+          </Box>
           <GameStateBadge state={game.state} />
-        </div>
-        <div className="d-flex flex-column align-self-center">
+        </Flex>
+        <Flex direction="column" style={{ alignSelf: 'center' }}>
           {game.players.length === 1 ? (
-            <div className="d-flex flex-column align-items-center">
+            <Flex direction="column" align="center">
               <UserInfo user={player1.data} lang={player1.data.editorLang} />
               {currentUserId !== player1.data.id && <UserSimpleStats user={player1.data} />}
-            </div>
+            </Flex>
           ) : (
             <>
-              <div className="d-flex flex-column align-items-center position-relative">
-                <div className="d-flex align-items-center">
+              <Flex direction="column" align="center" pos="relative">
+                <Flex align="center">
                   <ResultIcon icon={player1.icon} />
                   <UserInfo user={player1.data} lang={player1.data.editorLang} />
-                </div>
+                </Flex>
                 {type === 'active' && <GameProgressBar player={player1.data} position="left" />}
-              </div>
-              <span className="text-center">VS</span>
-              <div className="d-flex flex-column align-items-center position-relative">
-                <div className="d-flex align-items-center">
+              </Flex>
+              <Text ta="center">VS</Text>
+              <Flex direction="column" align="center" pos="relative">
+                <Flex align="center">
                   <ResultIcon icon={player2.icon} />
                   <UserInfo user={player2.data} lang={player2.data.editorLang} />
-                </div>
+                </Flex>
                 {type === 'active' && <GameProgressBar player={player2.data} position="left" />}
-              </div>
+              </Flex>
             </>
           )}
-        </div>
-      </div>
+        </Flex>
+      </Flex>
       {type === 'active' && (
         <GameActionButton
           type="card"
@@ -174,15 +187,11 @@ function GameCard({
         />
       )}
       {type === 'completed' && (
-        <a
-          type="button"
-          className="btn btn-secondary cb-btn-secondary btn-sm cb-rounded"
-          href={`/games/${game.id}`}
-        >
+        <Button component="a" color="cbSecondary" size="sm" radius="md" href={`/games/${game.id}`}>
           Show
-        </a>
+        </Button>
       )}
-    </div>
+    </Flex>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentCard.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentCard.tsx
index 33d366767..ea31bb663 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentCard.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentCard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Box, Flex, Paper, Text } from '@mantine/core';
 import moment from 'moment';
 
 import i18n from '../../../i18n';
@@ -28,27 +29,34 @@ interface TournamentCardProps {
 
 function TournamentCard({ tournament }: TournamentCardProps) {
   return (
-    <div className="d-flex flex-column shadow-sm p-2 mb-2 mx-2 bg-white border rounded-lg">
-      <div className="d-flex flex-column mb-2 h-100">
-        <h4 className="p-1 text-nowrap">{tournament.name}</h4>
-        <h5 className="p-1 text-nowrap">
+    <Paper
+      shadow="sm"
+      withBorder
+      radius="md"
+      bg="white"
+      p="sm"
+      mb="sm"
+      mx="sm"
+      style={{ display: 'flex', flexDirection: 'column' }}
+    >
+      <Flex direction="column" mb="sm" h="100%">
+        <Box component="h4" p="xs" style={{ whiteSpace: 'nowrap' }}>
+          {tournament.name}
+        </Box>
+        <Box component="h5" p="xs" style={{ whiteSpace: 'nowrap' }}>
           {i18n.t('Mode:')} <TournamentType type={tournament.type ?? ''} />
           {` ${tournament.type}`}
-        </h5>
-        <span className="p-1 text-nowrap">
+        </Box>
+        <Text component="span" p="xs" style={{ whiteSpace: 'nowrap' }}>
           {i18n.t('Starts at %{date}', {
             date: moment.utc(tournament.startsAt).local().locale(i18n.language).format('LLL'),
           })}
-        </span>
-        {/* <span className="d-flex p-1 text-nowrap"> */}
-        {/*   <span className="mr-2">Creator:</span> */}
-        {/*   <UserInfo user={tournament.creator} /> */}
-        {/* </span> */}
-        <div className="d-flex flex-column cb-vw-75">
+        </Text>
+        <Flex direction="column" className="cb-vw-75">
           <ShowButton url={`/tournaments/${tournament.id}/`} />
-        </div>
-      </div>
-    </div>
+        </Flex>
+      </Flex>
+    </Paper>
   );
 }
 

From ab8cf3b3593a8cf3cc140431c6105b376a3bc7fe Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 23:11:38 +0300
Subject: [PATCH 32/46] Note Players/ActiveGames table-cell coupling in Mantine
 spec (Phase 2)

Players emits raw <td> cells inside ActiveGames' <tr>, so it must convert to
Table.Td in the same slice as the ActiveGames/CompletedGames tables.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 3a91c0e20..b1bafa6de 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -447,6 +447,11 @@ In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
   `LobbyLoading`, `CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`,
   `CodebattleLeagueDescription`, `LobbyWidget` (container), `TournamentModal`,
   `ChatActionModal`, `GameRoomPreview`, `Announcement`.
+  - **Coupling for the next slice:** `Players` renders raw `<td>` cells (it's
+    dropped directly inside `ActiveGames`' `<tr>`), so converting `ActiveGames`'
+    table to `<Table>` means converting `Players` to emit `<Table.Td>` in the
+    same slice — otherwise those cells miss Mantine's row borders/spacing. Do
+    `ActiveGames` + `CompletedGames` + `Players` together.
 
 ⚠️ QA (lobby cluster): the games-table Continue/copy/cancel row (Group vs the old
 attached `btn-group`); the **cancel button still hidden until you hover the game

From 387af6169814d3756a48213a4a278e200bb4062e Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 23:26:54 +0300
Subject: [PATCH 33/46] Convert lobby games tables to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ActiveGames + CompletedGames tables → Mantine Table (desktop display / mobile
hiddenFrom card split); Players now emits Table.Td via Table context. Kept the
scroll container + infinite scroll, game-item hover coupling, and cb-* design
classes; per-cell cb-border-color dropped (Mantine row borders resolve to it).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  29 ++--
 .../js/widgets/pages/lobby/ActiveGames.tsx    |  98 +++++++------
 .../js/widgets/pages/lobby/CompletedGames.tsx | 138 ++++++++++--------
 .../assets/js/widgets/pages/lobby/Players.tsx |  35 +++--
 4 files changed, 175 insertions(+), 125 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index b1bafa6de..e995fd438 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -440,18 +440,27 @@ In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
   `TournamentCard` (mobile white card) → `<Paper bg="white" withBorder
   shadow="sm">`. `GameActionButton.test` wrapped in `MantineTestProvider`; its
   `w-100` assertion → `data-block="true"` (Mantine `fullWidth`).
+- Done: `ActiveGames` + `CompletedGames` + `Players` (the games-table cluster).
+  Both tables → `<Table striped>` (desktop, `display={{base:'none',md:'block'}}`;
+  mobile `<HorizontalScrollControls>` cards wrapped in `<Box hiddenFrom="md">`).
+  `Players` now emits `<Table.Td>` (renders inside `ActiveGames`' `<Table>` via
+  Mantine's Table context) keeping `cb-username-td`; `ActiveGames` keeps
+  `game-item` on `<Table.Tr>` (for the `tr.game-item td` border + the
+  `.game-item:hover .btn-hover` cancel-reveal) and `bg-gray`/`cb-level-badge`/
+  `cb-rounded` on the level/state cells. `CompletedGames` keeps its scroll `<Box>`
+  + infinite-scroll listener + `className`/`tableClassName` passthrough props;
+  per-cell `cb-border-color` dropped (Mantine row borders already resolve to it);
+  `Show` link → `<Button component="a" color="cbSecondary">`; footer → `<Box>`.
+  `UserProfile.test` still passes (it mocks `CompletedGames`); no test renders
+  `ActiveGames`/`Players` directly.
 - **Deferred (react-select):** `TaskChoice` uses react-select — leave with
   `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` for the one-PR lib swap.
-- **Remaining lobby leaves/containers (still Bootstrap):** `ActiveGames`,
-  `CompletedGames`, `Leaderboard`, `Players`, `Announcement`, `LobbyChat`,
-  `LobbyLoading`, `CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`,
-  `CodebattleLeagueDescription`, `LobbyWidget` (container), `TournamentModal`,
-  `ChatActionModal`, `GameRoomPreview`, `Announcement`.
-  - **Coupling for the next slice:** `Players` renders raw `<td>` cells (it's
-    dropped directly inside `ActiveGames`' `<tr>`), so converting `ActiveGames`'
-    table to `<Table>` means converting `Players` to emit `<Table.Td>` in the
-    same slice — otherwise those cells miss Mantine's row borders/spacing. Do
-    `ActiveGames` + `CompletedGames` + `Players` together.
+- **Remaining lobby leaves/containers (still Bootstrap):** `Leaderboard`,
+  `Announcement`, `LobbyChat`, `LobbyLoading`, `CreateGameDialog`,
+  `TournamentListItem`, `SeasonProfilePanel`, `CodebattleLeagueDescription`,
+  `LobbyWidget` (container), `TournamentModal`, `ChatActionModal`,
+  `GameRoomPreview`. (`CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`
+  have tests — wrap in `MantineTestProvider` when converted.)
 
 ⚠️ QA (lobby cluster): the games-table Continue/copy/cancel row (Group vs the old
 attached `btn-group`); the **cancel button still hidden until you hover the game
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.tsx
index bc4024690..65343dbd4 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/ActiveGames.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Box, Table, Text } from '@mantine/core';
 import find from 'lodash/find';
 import groupBy from 'lodash/groupBy';
 import isEmpty from 'lodash/isEmpty';
@@ -44,7 +45,7 @@ function ActiveGames({ games, currentUserId, isGuest, isOnline }: ActiveGamesPro
   const filtetedGames = games.filter(filterGames);
 
   if (isEmpty(filtetedGames)) {
-    return <p className="text-center">{i18n.t('There are no active games right now.')}</p>;
+    return <Text ta="center">{i18n.t('There are no active games right now.')}</Text>;
   }
 
   const gamesSortByLevel = sortBy(filtetedGames, [
@@ -70,40 +71,47 @@ function ActiveGames({ games, currentUserId, isGuest, isOnline }: ActiveGamesPro
 
   return (
     <>
-      <div className="d-none d-md-block rounded-bottom cb-rounded">
-        <table className="table table-striped mb-0">
-          <thead className="text-center text-white">
-            <tr>
-              <th className="p-3 border-0">{i18n.t('Level')}</th>
-              <th className="p-3 border-0">{i18n.t('State')}</th>
-              <th className="p-3 border-0 text-center" colSpan={2}>
-                {i18n.t('Players')}
-              </th>
-              <th className="p-3 border-0">{i18n.t('Actions')}</th>
-            </tr>
-          </thead>
-          <tbody>
+      <Box display={{ base: 'none', md: 'block' }} className="cb-rounded">
+        <Table
+          striped
+          mb={0}
+          verticalSpacing="md"
+          horizontalSpacing="md"
+          styles={{
+            th: { textAlign: 'center', color: 'var(--mantine-color-white)' },
+            td: { verticalAlign: 'middle' },
+          }}
+        >
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{i18n.t('Level')}</Table.Th>
+              <Table.Th>{i18n.t('State')}</Table.Th>
+              <Table.Th colSpan={2}>{i18n.t('Players')}</Table.Th>
+              <Table.Th>{i18n.t('Actions')}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
             {sortedGames.map(
               (game) =>
                 isActiveGame(game) && (
-                  <tr key={game.id} className="game-item">
-                    <td className="cb-level-badge align-middle">
-                      <div className="p-3 bg-gray cb-rounded">
+                  <Table.Tr key={game.id} className="game-item">
+                    <Table.Td className="cb-level-badge">
+                      <Box className="bg-gray cb-rounded" p="md">
                         <GameLevelBadge level={game.level} />
-                      </div>
-                    </td>
-                    <td className="text-center align-middle">
-                      <div className="p-3 bg-gray cb-rounded">
+                      </Box>
+                    </Table.Td>
+                    <Table.Td ta="center">
+                      <Box className="bg-gray cb-rounded" p="md">
                         <GameStateBadge state={game.state} />
-                      </div>
-                    </td>
+                      </Box>
+                    </Table.Td>
                     <Players
                       gameId={game.id}
                       mode="dark"
                       players={game.players as unknown as LobbyPlayer[]}
                       isBot={game.isBot}
                     />
-                    <td className="p-3 align-middle text-center">
+                    <Table.Td ta="center">
                       <GameActionButton
                         type="table"
                         game={game}
@@ -111,28 +119,30 @@ function ActiveGames({ games, currentUserId, isGuest, isOnline }: ActiveGamesPro
                         isGuest={isGuest}
                         isOnline={isOnline}
                       />
-                    </td>
-                  </tr>
+                    </Table.Td>
+                  </Table.Tr>
                 ),
             )}
-          </tbody>
-        </table>
-      </div>
-      <HorizontalScrollControls className="d-md-none m-2">
-        {sortedGames.map(
-          (game) =>
-            isActiveGame(game) && (
-              <GameCard
-                key={`card-${game.id}`}
-                type="active"
-                game={game}
-                currentUserId={currentUserId}
-                isGuest={isGuest}
-                isOnline={isOnline}
-              />
-            ),
-        )}
-      </HorizontalScrollControls>
+          </Table.Tbody>
+        </Table>
+      </Box>
+      <Box hiddenFrom="md" m="sm">
+        <HorizontalScrollControls>
+          {sortedGames.map(
+            (game) =>
+              isActiveGame(game) && (
+                <GameCard
+                  key={`card-${game.id}`}
+                  type="active"
+                  game={game}
+                  currentUserId={currentUserId}
+                  isGuest={isGuest}
+                  isOnline={isOnline}
+                />
+              ),
+          )}
+        </HorizontalScrollControls>
+      </Box>
     </>
   );
 }
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/CompletedGames.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/CompletedGames.tsx
index 71a9243b3..e8d0ac81a 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/CompletedGames.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/CompletedGames.tsx
@@ -1,5 +1,6 @@
 import React, { memo, useEffect, useRef, useCallback } from 'react';
 
+import { Box, Button, Flex, Table, Text } from '@mantine/core';
 import cn from 'classnames';
 import moment from 'moment';
 import { useDispatch, useSelector } from 'react-redux';
@@ -20,9 +21,6 @@ import getGamePlayersData from '../../utils/gamePlayers';
 import { type LobbyGame } from './GameActionButton';
 import GameCard from './GameCard';
 
-const commonTableClassName = 'table table-striped mb-0';
-const commonClassName = 'table-responsive d-none d-md-block mvh-100 cb-overflow-y-scroll';
-
 interface LobbyCompletedGame extends LobbyGame {
   finishesAt?: string;
 }
@@ -81,19 +79,33 @@ const InfiniteScrollableGames = memo(
 
     return (
       <>
-        <div ref={tableRef} className={className} data-testid="scroll">
-          <table className={tableClassName}>
-            <thead className="cb-text sticky-top">
-              <tr>
-                <th className="p-3 border-0">{i18n.t('Level')}</th>
-                <th className="px-1 py-3 border-0 text-center" colSpan={2}>
+        <Box
+          ref={tableRef}
+          className={cn('mvh-100 cb-overflow-y-scroll', className)}
+          display={{ base: 'none', md: 'block' }}
+          style={{ overflowX: 'auto' }}
+          data-testid="scroll"
+        >
+          <Table
+            className={tableClassName}
+            striped
+            stickyHeader
+            mb={0}
+            verticalSpacing="md"
+            horizontalSpacing="md"
+            styles={{ td: { verticalAlign: 'middle', whiteSpace: 'nowrap' } }}
+          >
+            <Table.Thead className="cb-text">
+              <Table.Tr>
+                <Table.Th>{i18n.t('Level')}</Table.Th>
+                <Table.Th ta="center" colSpan={2}>
                   {i18n.t('Players')}
-                </th>
-                <th className="px-1 py-3 border-0">{i18n.t('Date')}</th>
-                <th className="px-1 py-3 border-0">{i18n.t('Actions')}</th>
-              </tr>
-            </thead>
-            <tbody>
+                </Table.Th>
+                <Table.Th>{i18n.t('Date')}</Table.Th>
+                <Table.Th>{i18n.t('Actions')}</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
               {games.map((game) => {
                 const { player1, player2 } = getGamePlayersData(game) as unknown as {
                   player1: CompletedGamePlayer;
@@ -101,55 +113,53 @@ const InfiniteScrollableGames = memo(
                 };
 
                 return (
-                  <tr key={game.id}>
-                    <td className="p-3 align-middle text-nowrap cb-border-color">
+                  <Table.Tr key={game.id}>
+                    <Table.Td>
                       <GameLevelBadge level={game.level} />
-                    </td>
-                    <td className="p-3 align-middle text-nowrap cb-username-td cb-border-color">
-                      <div className="d-flex align-items-center" style={{ minWidth: 0 }}>
-                        <div
-                          className="d-flex align-items-center justify-content-center mr-2"
-                          style={{ width: '1rem' }}
-                        >
+                    </Table.Td>
+                    <Table.Td className="cb-username-td">
+                      <Flex align="center" style={{ minWidth: 0 }}>
+                        <Flex align="center" justify="center" mr="sm" style={{ width: '1rem' }}>
                           <ResultIcon icon={player1.icon} />
-                        </div>
+                        </Flex>
                         <UserInfo user={player1.data} truncate />
-                      </div>
-                    </td>
-                    <td className="p-3 align-middle text-nowrap cb-username-td cb-border-color">
-                      <div className="d-flex align-items-center" style={{ minWidth: 0 }}>
-                        <div
-                          className="d-flex align-items-center justify-content-center mr-2"
-                          style={{ width: '1rem' }}
-                        >
+                      </Flex>
+                    </Table.Td>
+                    <Table.Td className="cb-username-td">
+                      <Flex align="center" style={{ minWidth: 0 }}>
+                        <Flex align="center" justify="center" mr="sm" style={{ width: '1rem' }}>
                           <ResultIcon icon={player2.icon} />
-                        </div>
+                        </Flex>
                         <UserInfo user={player2.data} truncate />
-                      </div>
-                    </td>
-                    <td className="px-1 py-3 align-middle text-nowrap text-white cb-border-color">
+                      </Flex>
+                    </Table.Td>
+                    <Table.Td>
                       {moment.utc(game.finishesAt).local().format('YYYY.MM.DD HH:mm')}
-                    </td>
-                    <td className="px-1 py-3 align-middle cb-border-color">
-                      <a
-                        type="button"
-                        className="btn btn-secondary cb-btn-secondary btn-sm cb-rounded"
+                    </Table.Td>
+                    <Table.Td>
+                      <Button
+                        component="a"
+                        color="cbSecondary"
+                        size="sm"
+                        radius="md"
                         href={`/games/${game.id}`}
                       >
                         {i18n.t('Show')}
-                      </a>
-                    </td>
-                  </tr>
+                      </Button>
+                    </Table.Td>
+                  </Table.Tr>
                 );
               })}
-            </tbody>
-          </table>
-        </div>
-        <HorizontalScrollControls className="d-md-none my-2" onScroll={onCardsScroll}>
-          {games.map((game) => (
-            <GameCard key={`card-${game.id}`} type="completed" game={game} />
-          ))}
-        </HorizontalScrollControls>
+            </Table.Tbody>
+          </Table>
+        </Box>
+        <Box hiddenFrom="md" my="sm">
+          <HorizontalScrollControls onScroll={onCardsScroll}>
+            {games.map((game) => (
+              <GameCard key={`card-${game.id}`} type="completed" game={game} />
+            ))}
+          </HorizontalScrollControls>
+        </Box>
       </>
     );
   },
@@ -172,20 +182,32 @@ function CompletedGames({ className, tableClassName = '' }: CompletedGamesProps)
     return status === fetchionStatuses.loading ? (
       <Loading />
     ) : (
-      <div className="py-5 text-center text-muted">{i18n.t('No completed games')}</div>
+      <Text py="xl" ta="center" c="dimmed">
+        {i18n.t('No completed games')}
+      </Text>
     );
   }
 
   return (
     <>
       <InfiniteScrollableGames
-        className={cn(commonClassName, className)}
-        tableClassName={cn(commonTableClassName, tableClassName)}
+        className={className}
+        tableClassName={tableClassName}
         games={completedGames as unknown as LobbyCompletedGame[]}
       />
-      <div className="mt-auto border-top cb-border-color py-2 px-5 font-weight-bold rounded-bottom">
+      <Box
+        mt="auto"
+        py="sm"
+        px="xl"
+        fw={700}
+        style={{
+          borderTop: '1px solid var(--mantine-color-default-border)',
+          borderBottomLeftRadius: 'var(--mantine-radius-md)',
+          borderBottomRightRadius: 'var(--mantine-radius-md)',
+        }}
+      >
         {i18n.t('Total games: %{count}', { count: totalGames })}
-      </div>
+      </Box>
     </>
   );
 }
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/Players.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/Players.tsx
index 292d8ab5b..21dc757c2 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/Players.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/Players.tsx
@@ -1,5 +1,7 @@
 import React, { memo } from 'react';
 
+import { Flex, Table } from '@mantine/core';
+
 import { type UserNameUser } from '../../components/UserName';
 import UserInfo from '../../components/UserInfo';
 
@@ -19,21 +21,28 @@ interface PlayersProps {
 
 export type { LobbyPlayer };
 
-const Players = memo(({ players, mode }: PlayersProps) => {
+const truncatedCellStyle = {
+  whiteSpace: 'nowrap',
+  verticalAlign: 'middle',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+} as const;
+
+const Players = memo(({ players }: PlayersProps) => {
   if (players.length === 1) {
     return (
-      <td className="p-3 align-middle text-nowrap" colSpan={2}>
-        <div className="d-flex align-items-center">
+      <Table.Td colSpan={2} style={{ whiteSpace: 'nowrap', verticalAlign: 'middle' }}>
+        <Flex align="center">
           <UserInfo user={players[0]} lang={players[0].editorLang} hideOnlineIndicator />
-        </div>
-      </td>
+        </Flex>
+      </Table.Td>
     );
   }
 
   return (
     <>
-      <td className="p-3 align-middle text-nowrap cb-username-td text-truncate">
-        <div className="d-flex flex-column position-relative">
+      <Table.Td className="cb-username-td" style={truncatedCellStyle}>
+        <Flex direction="column" pos="relative">
           <UserInfo
             user={players[0]}
             lang={players[0].editorLang}
@@ -41,10 +50,10 @@ const Players = memo(({ players, mode }: PlayersProps) => {
             loading={players[0].checkResult.status === 'started'}
           />
           <GameProgressBar player={players[0]} position="left" />
-        </div>
-      </td>
-      <td className="p-3 align-middle text-nowrap cb-username-td text-truncate">
-        <div className="d-flex flex-column position-relative">
+        </Flex>
+      </Table.Td>
+      <Table.Td className="cb-username-td" style={truncatedCellStyle}>
+        <Flex direction="column" pos="relative">
           <UserInfo
             user={players[1]}
             lang={players[1].editorLang}
@@ -52,8 +61,8 @@ const Players = memo(({ players, mode }: PlayersProps) => {
             loading={players[1].checkResult.status === 'started'}
           />
           <GameProgressBar player={players[1]} position="right" />
-        </div>
-      </td>
+        </Flex>
+      </Table.Td>
     </>
   );
 });

From 22196fb68c248205deca4a9a036503160b109175 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 23:30:51 +0300
Subject: [PATCH 34/46] Convert lobby Leaderboard to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Raw table markup → Table.*; Bootstrap-JS nav-tabs period selector → controlled
Mantine SegmentedControl bound to the Redux period (fixes the hardcoded-active
state). Kept cb-bg-panel/cb-border-color; dropped per-row border classes.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  18 ++-
 .../js/widgets/pages/lobby/Leaderboard.tsx    | 142 +++++++-----------
 2 files changed, 67 insertions(+), 93 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index e995fd438..0c01ca049 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -453,14 +453,20 @@ In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
   `Show` link → `<Button component="a" color="cbSecondary">`; footer → `<Box>`.
   `UserProfile.test` still passes (it mocks `CompletedGames`); no test renders
   `ActiveGames`/`Players` directly.
+- Done: `Leaderboard` — raw `thead/tr/th/td` → `Table.*`; the Bootstrap-JS
+  `nav-tabs` period selector (`data-toggle="tab"`, hardcoded `active` on Weekly)
+  → a controlled Mantine `<SegmentedControl>` bound to the Redux `period` (also
+  fixes the active state to reflect the real period). Kept `cb-bg-panel`/
+  `cb-border-color`; dropped per-row `cb-border-color` (Mantine row border
+  resolves to it). `Announcement` returns `null` (all Bootstrap dead-commented) —
+  nothing to convert.
 - **Deferred (react-select):** `TaskChoice` uses react-select — leave with
   `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` for the one-PR lib swap.
-- **Remaining lobby leaves/containers (still Bootstrap):** `Leaderboard`,
-  `Announcement`, `LobbyChat`, `LobbyLoading`, `CreateGameDialog`,
-  `TournamentListItem`, `SeasonProfilePanel`, `CodebattleLeagueDescription`,
-  `LobbyWidget` (container), `TournamentModal`, `ChatActionModal`,
-  `GameRoomPreview`. (`CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`
-  have tests — wrap in `MantineTestProvider` when converted.)
+- **Remaining lobby leaves/containers (still Bootstrap):** `LobbyChat`,
+  `LobbyLoading`, `CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`,
+  `CodebattleLeagueDescription`, `LobbyWidget` (container), `TournamentModal`,
+  `ChatActionModal`, `GameRoomPreview`. (`CreateGameDialog`, `TournamentListItem`,
+  `SeasonProfilePanel` have tests — wrap in `MantineTestProvider` when converted.)
 
 ⚠️ QA (lobby cluster): the games-table Continue/copy/cancel row (Group vs the old
 attached `btn-group`); the **cancel button still hidden until you hover the game
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.tsx
index 68738e5ff..dc09fc2d5 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 
-import { Table } from '@mantine/core';
+import { Box, Flex, SegmentedControl, Table } from '@mantine/core';
 import { useSelector, useDispatch } from 'react-redux';
 
 import i18n from '../../../i18n';
@@ -14,6 +14,12 @@ interface LeaderboardUser extends UserNameUser {
   rating?: number;
 }
 
+const periodOptions = [
+  { value: periodTypes.WEEKLY, label: i18n.t(periodTypes.WEEKLY) },
+  { value: periodTypes.MONTHLY, label: i18n.t(periodTypes.MONTHLY) },
+  { value: periodTypes.ALL, label: i18n.t(periodTypes.ALL) },
+];
+
 function Leaderboard() {
   const dispatch = useDispatch<AppDispatch>();
 
@@ -24,28 +30,6 @@ function Leaderboard() {
     [users],
   );
 
-  const handlePeriodClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    const {
-      currentTarget: { dataset },
-    } = e;
-    const periodValue = dataset.period || periodTypes.ALL;
-    switch (periodValue) {
-      case periodTypes.ALL:
-        dispatch(actions.changePeriod(periodTypes.ALL));
-        break;
-      case periodTypes.MONTHLY:
-        dispatch(actions.changePeriod(periodTypes.MONTHLY));
-        break;
-
-      case periodTypes.WEEKLY:
-        dispatch(actions.changePeriod(periodTypes.WEEKLY));
-        break;
-
-      default:
-        throw new Error(`Unknown period: ${periodValue}`);
-    }
-  };
-
   useEffect(() => {
     (async () => {
       try {
@@ -58,80 +42,64 @@ function Leaderboard() {
   }, [period]);
 
   return (
-    <Table className="table table-striped cb-bg-panel cb-border-color rounded shadow-sm m-0">
-      <thead>
-        <tr aria-label={i18n.t('Leaderboard header')}>
-          <th
+    <Table
+      striped
+      m={0}
+      className="cb-bg-panel cb-border-color"
+      style={{ borderRadius: 'var(--mantine-radius-md)', boxShadow: 'var(--mantine-shadow-sm)' }}
+    >
+      <Table.Thead>
+        <Table.Tr aria-label={i18n.t('Leaderboard header')}>
+          <Table.Th
             scope="col"
             aria-label={i18n.t('Leaderboard')}
-            className="text-uppercase py-1 px-0 text-white cb-border-color"
+            tt="uppercase"
+            py={4}
+            px={0}
             colSpan={2}
           >
-            <div className="d-flex flex-column align-items-center flex-nowrap">
-              <div className="d-flex align-items-center">
-                <img alt={i18n.t('Rating')} src="/assets/images/topPlayers.svg" className="m-2" />
-                <span className="d-flex">{i18n.t('Leaderboard')}</span>
-              </div>
-              <nav className="w-100">
-                <div
-                  id="nav-tab"
-                  role="tablist"
-                  className="nav nav-tabs border-0 d-flex flex-nowrap justify-content-around"
-                >
-                  <button
-                    type="button"
-                    role="tab"
-                    data-toggle="tab"
-                    data-period={periodTypes.WEEKLY}
-                    className="nav-item cb-nav-item nav-link border-0 text-center w-100 active"
-                    onClick={handlePeriodClick}
-                  >
-                    {i18n.t(periodTypes.WEEKLY)}
-                  </button>
-                  <button
-                    type="button"
-                    role="tab"
-                    data-toggle="tab"
-                    data-period={periodTypes.MONTHLY}
-                    className="nav-item cb-nav-item nav-link border-0 text-center w-100"
-                    onClick={handlePeriodClick}
-                  >
-                    {i18n.t(periodTypes.MONTHLY)}
-                  </button>
-                  <button
-                    type="button"
-                    role="tab"
-                    data-toggle="tab"
-                    data-period={periodTypes.ALL}
-                    className="nav-item cb-nav-item nav-link border-0 text-center w-100"
-                    onClick={handlePeriodClick}
-                  >
-                    {i18n.t(periodTypes.ALL)}
-                  </button>
-                </div>
-              </nav>
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
+            <Flex direction="column" align="center" wrap="nowrap">
+              <Flex align="center">
+                <img
+                  alt={i18n.t('Rating')}
+                  src="/assets/images/topPlayers.svg"
+                  style={{ margin: '0.5rem' }}
+                />
+                <span>{i18n.t('Leaderboard')}</span>
+              </Flex>
+              <Box w="100%" mt="xs">
+                <SegmentedControl
+                  fullWidth
+                  size="xs"
+                  value={period}
+                  onChange={(value) => dispatch(actions.changePeriod(value))}
+                  data={periodOptions}
+                />
+              </Box>
+            </Flex>
+          </Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
         {rating && rating.length > 0 ? (
           rating.map((item) => (
-            <tr key={item.name} className="cb-border-color">
-              <td className="cb-border-color pr-0">
-                <div className="d-flex">
+            <Table.Tr key={item.name}>
+              <Table.Td pr={0}>
+                <Flex>
                   <UserInfo user={item} truncate />
-                </div>
-              </td>
-              <td className="border-bottom cb-border-color text-right pl-0">{item.rating}</td>
-            </tr>
+                </Flex>
+              </Table.Td>
+              <Table.Td ta="right" pl={0}>
+                {item.rating}
+              </Table.Td>
+            </Table.Tr>
           ))
         ) : (
-          <tr className="text-center cb-border-color">
-            <td className="cb-border-color">{i18n.t('No rating')}</td>
-          </tr>
+          <Table.Tr>
+            <Table.Td ta="center">{i18n.t('No rating')}</Table.Td>
+          </Table.Tr>
         )}
-      </tbody>
+      </Table.Tbody>
     </Table>
   );
 }

From 7a9eca3490f6e7afef8e14ee89058e28c9bc02b2 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 23:43:13 +0300
Subject: [PATCH 35/46] Convert lobby GameRoomPreview + LobbyLoading to Mantine
 (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GameRoomPreview: container-fluid/w-100/d-flex → Box/Flex, kept preview BEM
classes. LobbyLoading skeleton: col-in-flex responsive grid → Flex/Box responsive
props, sr-only → VisuallyHidden, kept all cb-lobby-loading-*/cb-text-skeleton
design classes.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md   |  12 +-
 .../widgets/pages/lobby/GameRoomPreview.tsx   |  17 +--
 .../js/widgets/pages/lobby/LobbyLoading.tsx   | 135 ++++++++++++------
 3 files changed, 108 insertions(+), 56 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 0c01ca049..38c1d4a04 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -460,13 +460,19 @@ In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
   `cb-border-color`; dropped per-row `cb-border-color` (Mantine row border
   resolves to it). `Announcement` returns `null` (all Bootstrap dead-commented) —
   nothing to convert.
+- Done: `GameRoomPreview` (dropped `container-fluid` / `w-100 d-flex
+  align-items-center` → `<Box w="100%" px="md">` / `<Flex align="center">`, kept
+  all `preview`/`player*` BEM design classes) and `LobbyLoading` (skeleton — the
+  `col-*`-in-flex responsive grid → `<Flex>`/`<Box>` with responsive `w`/`p`/`m`
+  props, `sr-only` → `<VisuallyHidden>`, all `cb-lobby-loading-*` /
+  `cb-text-skeleton` design classes kept).
 - **Deferred (react-select):** `TaskChoice` uses react-select — leave with
   `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` for the one-PR lib swap.
 - **Remaining lobby leaves/containers (still Bootstrap):** `LobbyChat`,
-  `LobbyLoading`, `CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`,
+  `CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`,
   `CodebattleLeagueDescription`, `LobbyWidget` (container), `TournamentModal`,
-  `ChatActionModal`, `GameRoomPreview`. (`CreateGameDialog`, `TournamentListItem`,
-  `SeasonProfilePanel` have tests — wrap in `MantineTestProvider` when converted.)
+  `ChatActionModal`. (`CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`
+  have tests — wrap in `MantineTestProvider` when converted.)
 
 ⚠️ QA (lobby cluster): the games-table Continue/copy/cancel row (Group vs the old
 attached `btn-group`); the **cancel button still hidden until you hover the game
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.tsx
index 37818adc2..b7a6ddfd6 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Box, Flex } from '@mantine/core';
 import { getPageProp } from '@/inertia/pageProps';
 import { useSelector } from 'react-redux';
 
@@ -30,11 +31,11 @@ function GameRoomPreview({ pageName }: GameRoomPreviewProps) {
 
   if (pageName === 'builder') {
     return (
-      <div className="preview container-fluid slideInLeft">
-        <div className="preview__container w-100 d-flex align-items-center">
+      <Box className="preview slideInLeft" w="100%" px="md">
+        <Flex className="preview__container" w="100%" align="center">
           <span className="preview__info">{i18n.t('Template Task is Loading')}</span>
-        </div>
-      </div>
+        </Flex>
+      </Box>
     );
   }
 
@@ -49,8 +50,8 @@ function GameRoomPreview({ pageName }: GameRoomPreviewProps) {
   const player2 = players[1] || defaultPlayer;
 
   return (
-    <div className="preview container-fluid slideInLeft">
-      <div className="preview__container w-100 d-flex align-items-center">
+    <Box className="preview slideInLeft" w="100%" px="md">
+      <Flex className="preview__container" w="100%" align="center">
         <div className="player1">
           <img
             src={player1.avatar_url || defaultPreviewAvatarUrl}
@@ -84,8 +85,8 @@ function GameRoomPreview({ pageName }: GameRoomPreviewProps) {
             <span className="preview__info">{player2.rating}</span>
           </div>
         </div>
-      </div>
-    </div>
+      </Flex>
+    </Box>
   );
 }
 
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyLoading.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyLoading.tsx
index f51bd9523..ee781f5be 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyLoading.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyLoading.tsx
@@ -1,11 +1,20 @@
 import React from 'react';
 
+import { Box, Flex, VisuallyHidden } from '@mantine/core';
+
 import i18n from '../../../i18n';
 
 function LobbyLoading() {
   return (
-    <div className="container-lg cb-text cb-lobby-loading" role="status" aria-live="polite">
-      <span className="sr-only">{i18n.t('Loading...')}</span>
+    <Box
+      className="cb-text cb-lobby-loading"
+      role="status"
+      aria-live="polite"
+      mx="auto"
+      px="md"
+      maw={960}
+    >
+      <VisuallyHidden>{i18n.t('Loading...')}</VisuallyHidden>
       <div aria-hidden="true">
         <div className="cb-lobby-loading-hero">
           <div className="cb-lobby-loading-emblem">
@@ -23,50 +32,86 @@ function LobbyLoading() {
             </div>
           </div>
         </div>
-        <div className="d-flex flex-column-reverse flex-lg-row my-0 my-lg-2">
-          <div className="col-12 col-lg-8 p-0 pr-lg-2 my-2 my-lg-0">
-            <div className="cb-bg-panel cb-rounded d-flex flex-column p-3 cb-lobby-loading-main">
-              <span className="cb-text-skeleton w-50 mx-auto mb-4" />
-              <span className="cb-text-skeleton w-100 mb-2" />
-              <span className="cb-text-skeleton w-75 mx-auto mb-4" />
-              <div className="d-flex flex-column flex-md-row mt-auto">
-                <span className="cb-text-skeleton flex-fill mx-md-2 mb-2 mb-md-0" />
-                <span className="cb-text-skeleton flex-fill mx-md-2 mb-2 mb-md-0" />
-                <span className="cb-text-skeleton flex-fill mx-md-2" />
-              </div>
-            </div>
-          </div>
-          <div className="col-12 col-lg-4 p-0 pl-lg-2 my-2 my-lg-0">
-            <div className="cb-bg-panel cb-rounded d-flex flex-column align-items-center p-3 cb-lobby-loading-profile">
-              <span className="cb-text-skeleton cb-lobby-loading-avatar mb-3" />
-              <span className="cb-text-skeleton w-50 mb-3" />
-              <div className="d-flex w-100 cb-bg-highlight-panel p-3">
-                <span className="cb-text-skeleton flex-fill mx-1" />
-                <span className="cb-text-skeleton flex-fill mx-1" />
-                <span className="cb-text-skeleton flex-fill mx-1" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="d-flex flex-column flex-lg-row p-0">
-          <div className="col-12 col-lg-8 p-0 pr-lg-2">
-            <div className="cb-bg-panel cb-rounded p-3 cb-lobby-loading-secondary">
-              <span className="cb-text-skeleton w-25 d-block mb-4" />
-              <span className="cb-text-skeleton w-100 d-block mb-3" />
-              <span className="cb-text-skeleton w-75 d-block mb-3" />
-              <span className="cb-text-skeleton w-50 d-block" />
-            </div>
-          </div>
-          <div className="col-12 col-lg-4 p-0 pl-lg-2 mt-2 mt-lg-0">
-            <div className="cb-bg-panel cb-rounded p-3 cb-lobby-loading-secondary">
-              <span className="cb-text-skeleton w-50 d-block mb-4" />
-              <span className="cb-text-skeleton w-100 d-block mb-3" />
-              <span className="cb-text-skeleton w-75 d-block" />
-            </div>
-          </div>
-        </div>
+        <Flex direction={{ base: 'column-reverse', lg: 'row' }} my={{ base: 0, lg: 'sm' }}>
+          <Box
+            w={{ base: '100%', lg: '66.6667%' }}
+            p={0}
+            pr={{ lg: 'sm' }}
+            my={{ base: 'sm', lg: 0 }}
+          >
+            <Flex
+              className="cb-bg-panel cb-rounded cb-lobby-loading-main"
+              direction="column"
+              p="md"
+            >
+              <Box component="span" className="cb-text-skeleton" w="50%" mx="auto" mb="lg" />
+              <Box component="span" className="cb-text-skeleton" w="100%" mb="sm" />
+              <Box component="span" className="cb-text-skeleton" w="75%" mx="auto" mb="lg" />
+              <Flex direction={{ base: 'column', md: 'row' }} mt="auto">
+                <Box
+                  component="span"
+                  className="cb-text-skeleton"
+                  flex={1}
+                  mx={{ md: 'sm' }}
+                  mb={{ base: 'sm', md: 0 }}
+                />
+                <Box
+                  component="span"
+                  className="cb-text-skeleton"
+                  flex={1}
+                  mx={{ md: 'sm' }}
+                  mb={{ base: 'sm', md: 0 }}
+                />
+                <Box component="span" className="cb-text-skeleton" flex={1} mx={{ md: 'sm' }} />
+              </Flex>
+            </Flex>
+          </Box>
+          <Box
+            w={{ base: '100%', lg: '33.3333%' }}
+            p={0}
+            pl={{ lg: 'sm' }}
+            my={{ base: 'sm', lg: 0 }}
+          >
+            <Flex
+              className="cb-bg-panel cb-rounded cb-lobby-loading-profile"
+              direction="column"
+              align="center"
+              p="md"
+            >
+              <Box component="span" className="cb-text-skeleton cb-lobby-loading-avatar" mb="md" />
+              <Box component="span" className="cb-text-skeleton" w="50%" mb="md" />
+              <Flex className="cb-bg-highlight-panel" w="100%" p="md">
+                <Box component="span" className="cb-text-skeleton" flex={1} mx="xs" />
+                <Box component="span" className="cb-text-skeleton" flex={1} mx="xs" />
+                <Box component="span" className="cb-text-skeleton" flex={1} mx="xs" />
+              </Flex>
+            </Flex>
+          </Box>
+        </Flex>
+        <Flex direction={{ base: 'column', lg: 'row' }} p={0}>
+          <Box w={{ base: '100%', lg: '66.6667%' }} p={0} pr={{ lg: 'sm' }}>
+            <Box className="cb-bg-panel cb-rounded cb-lobby-loading-secondary" p="md">
+              <Box component="span" className="cb-text-skeleton" display="block" w="25%" mb="lg" />
+              <Box component="span" className="cb-text-skeleton" display="block" w="100%" mb="md" />
+              <Box component="span" className="cb-text-skeleton" display="block" w="75%" mb="md" />
+              <Box component="span" className="cb-text-skeleton" display="block" w="50%" />
+            </Box>
+          </Box>
+          <Box
+            w={{ base: '100%', lg: '33.3333%' }}
+            p={0}
+            pl={{ lg: 'sm' }}
+            mt={{ base: 'sm', lg: 0 }}
+          >
+            <Box className="cb-bg-panel cb-rounded cb-lobby-loading-secondary" p="md">
+              <Box component="span" className="cb-text-skeleton" display="block" w="50%" mb="lg" />
+              <Box component="span" className="cb-text-skeleton" display="block" w="100%" mb="md" />
+              <Box component="span" className="cb-text-skeleton" display="block" w="75%" />
+            </Box>
+          </Box>
+        </Flex>
       </div>
-    </div>
+    </Box>
   );
 }
 

From e2643e8a165f12aba5412850117509d881e558ad Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 23:51:24 +0300
Subject: [PATCH 36/46] Convert lobby ChatActionModal to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Player-select rows: div[role=button] + a11y shims → native Mantine
Button (color=cbSecondary), dropping role/tabIndex/onKeyPress; d-flex
flex-column → Stack.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../widgets/pages/lobby/ChatActionModal.tsx   | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
index 9b7e0eb42..d08a2764e 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, type RefObject } from 'react';
 
+import { Button, Stack } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
 import Modal from '@/components/CbModal';
@@ -41,7 +42,7 @@ function ChatActionModal({
     setModalShowing({ opened: false });
   }, [setModalShowing]);
   const createBattleInvite = useCallback(
-    (event: React.SyntheticEvent<HTMLDivElement>) => {
+    (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault();
 
       const { userId, userName } = event.currentTarget.dataset;
@@ -56,7 +57,7 @@ function ChatActionModal({
     [dispatch, setModalShowing],
   );
   const openDirect = useCallback(
-    (event: React.SyntheticEvent<HTMLDivElement>) => {
+    (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault();
 
       const { userId, userName } = event.currentTarget.dataset;
@@ -82,25 +83,26 @@ function ChatActionModal({
       </Modal.Header>
       <Modal.Body className="overflow-auto">
         {modalShowing.action && (
-          <div className="d-flex flex-column">
+          <Stack gap="sm">
             {presenceList.map(
               (presenceUser) =>
                 currentUserId !== presenceUser.id && (
-                  <div
-                    role="button"
-                    tabIndex={0}
-                    className="btn btn-secondary cb-btn-secondary cb-rounded mb-2 p-3"
+                  <Button
+                    color="cbSecondary"
+                    fullWidth
+                    justify="flex-start"
+                    h="auto"
+                    p="md"
                     key={presenceUser.id}
                     data-user-id={presenceUser.id}
                     data-user-name={presenceUser.user.name}
                     onClick={handleSelectPlayer}
-                    onKeyPress={handleSelectPlayer}
                   >
                     <UserInfo user={presenceUser.user} hideInfo hideOnlineIndicator />
-                  </div>
+                  </Button>
                 ),
             )}
-          </div>
+          </Stack>
         )}
       </Modal.Body>
     </Modal>

From bb9e449d77b9427e00fa395f62d4fb2edc8a4a4c Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Fri, 7 Aug 2026 23:57:51 +0300
Subject: [PATCH 37/46] Convert lobby TournamentListItem to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout utilities → Flex/Box + style props; root border card → Paper
withBorder radius="md" (theme resolves cb-border-color); main action
<a> → Button component="a" color=cbSecondary; info icon <button> →
ActionIcon (kept cb-tournament-info-icon-btn sizing + cb-btn-outline-
secondary color); text-white → c="white". Kept all cb-tournament-*
design classes and Bootstrap typography (h5) / text-warning icons.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../pages/lobby/TournamentListItem.tsx        | 169 +++++++++++-------
 1 file changed, 106 insertions(+), 63 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentListItem.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentListItem.tsx
index 768cf73f0..6d32a63fb 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentListItem.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentListItem.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cn from 'classnames';
+import { ActionIcon, Box, Button, Flex, Paper, Text } from '@mantine/core';
 
 import getIconForGrade from '@/components/icons/Grades';
 import TournamentTimer from '@/components/TournamentTimer';
@@ -55,24 +55,31 @@ function TournamentTitle({ tournament }: TournamentTitleProps) {
 
   if (tournament.grade === grades.open) {
     return (
-      <span
+      <Text
+        component="span"
         title={title}
-        className="h5 mb-1 font-weight-bold text-white text-truncate d-inline-block cb-tournament-title"
+        fw={700}
+        c="white"
+        mb="xs"
+        truncate
+        className="h5 cb-tournament-title"
       >
         {title}
-      </span>
+      </Text>
     );
   }
 
   const subtitle = formatDate(tournament.startsAt, `MMM D, YYYY [${i18n.t('at')}] HH:mm`);
 
   return (
-    <div className="d-flex flex-column align-items-baseline">
-      <span className="h5 mb-1 font-weight-bold text-white text-truncate d-inline-block">
+    <Flex direction="column" align="baseline">
+      <Text component="span" fw={700} c="white" mb="xs" truncate className="h5">
         {title}
-      </span>
-      <span className="small">{subtitle}</span>
-    </div>
+      </Text>
+      <Text component="span" size="sm">
+        {subtitle}
+      </Text>
+    </Flex>
   );
 }
 
@@ -89,35 +96,30 @@ function TournamentAction({ tournament, isAdmin = false }: TournamentActionProps
     NiceModal.show(ModalCodes.tournamentModal, { tournament });
   };
 
-  const infoClassName = cn(
-    'btn btn-outline-secondary cb-btn-outline-secondary cb-tournament-info-icon-btn',
-    'px-2 cb-rounded border-0',
-  );
-
-  const actionClassName = cn(
-    'btn btn-secondary cb-btn-secondary cb-tournament-main-action',
-    'text-nowrap px-2 cb-rounded',
-  );
-
   return (
-    <div className="align-content-center cb-tournament-top-actions">
-      <div className="d-flex cb-tournament-actions">
+    <Box className="cb-tournament-top-actions">
+      <Flex className="cb-tournament-actions">
         {showTournamentLink && (
-          <a type="button" className={actionClassName} href={getTournamentUrl(tournament.id)}>
+          <Button
+            component="a"
+            color="cbSecondary"
+            href={getTournamentUrl(tournament.id)}
+            className="cb-tournament-main-action"
+          >
             {text}
-          </a>
+          </Button>
         )}
-        <button
-          type="button"
-          className={infoClassName}
+        <ActionIcon
+          variant="transparent"
           onClick={openTournamentInfo}
           aria-label={i18n.t('Tournament details')}
           title={i18n.t('Tournament details')}
+          className="cb-tournament-info-icon-btn cb-btn-outline-secondary"
         >
           <FontAwesomeIcon icon="info" />
-        </button>
-      </div>
-    </div>
+        </ActionIcon>
+      </Flex>
+    </Box>
   );
 }
 
@@ -141,71 +143,112 @@ function TournamentListItem({ tournament, isAdmin = false }: TournamentListItemP
   );
 
   return (
-    <div className="border cb-border-color cb-rounded cb-subtle-background my-2 mr-2 cb-tournament-card">
-      <div className="d-flex flex-column p-3 align-content-center align-items-baseline cb-tournament-card-body">
-        <div className="d-flex align-items-center cb-tournament-title-wrap">
-          <div className="d-none d-lg-block d-md-block mr-2 mb-3">
+    <Paper
+      withBorder
+      radius="md"
+      my="sm"
+      mr="sm"
+      className="cb-subtle-background cb-tournament-card"
+    >
+      <Flex direction="column" p="md" align="baseline" className="cb-tournament-card-body">
+        <Flex align="center" className="cb-tournament-title-wrap">
+          <Box visibleFrom="md" mr="sm" mb="md">
             {getIconForGrade(tournament.grade ?? '')}
-          </div>
+          </Box>
           <TournamentTitle tournament={tournament} />
-        </div>
-        <div className="cb-separator mb-2" />
-        <div className="d-flex w-100 justify-content-between cb-tournament-meta-row">
-          <div className="d-flex flex-column align-items-baseline cb-tournament-meta">
+        </Flex>
+        <Box className="cb-separator" mb="sm" />
+        <Flex w="100%" justify="space-between" className="cb-tournament-meta-row">
+          <Flex direction="column" align="baseline" className="cb-tournament-meta">
             {tournament.grade !== grades.open && (
-              <span title={title} className="d-inline-flex mt-2 text-white text-nowrap">
+              <Flex
+                component="span"
+                display="inline-flex"
+                gap="xs"
+                mt="sm"
+                c="white"
+                title={title}
+                style={{ whiteSpace: 'nowrap' }}
+              >
                 <span className="cb-tournament-points-value">
                   {getRankingPoints(tournament.grade ?? '')[0]}
                 </span>
-                <span className="ml-1">{i18n.t('Ranking Points')}</span>
-              </span>
+                <span>{i18n.t('Ranking Points')}</span>
+              </Flex>
             )}
-            <span className="d-flex flex-wrap">
+            <Flex component="span" wrap="wrap">
               {tournament.state !== 'upcoming' && (
-                <span className="mr-2 d-inline-flex mt-2 text-white text-nowrap">
+                <Flex
+                  component="span"
+                  display="inline-flex"
+                  gap="sm"
+                  mr="sm"
+                  mt="sm"
+                  c="white"
+                  style={{ whiteSpace: 'nowrap' }}
+                >
                   <FontAwesomeIcon
                     icon="flag-checkered"
-                    className="mr-2 text-warning"
+                    className="text-warning"
                     style={iconSize}
                   />
                   {tournament.state ? i18n.t(mapTournamentTitleByState[tournament.state]) : null}
-                </span>
+                </Flex>
               )}
               {tournamentStates.canceled !== tournament.state &&
                 tournament.state !== 'upcoming' && (
-                  <span className="d-inline-flex mt-2 text-white text-nowrap">
-                    <FontAwesomeIcon icon="user" className="mr-2 text-warning" style={iconSize} />
+                  <Flex
+                    component="span"
+                    display="inline-flex"
+                    gap="sm"
+                    mt="sm"
+                    c="white"
+                    style={{ whiteSpace: 'nowrap' }}
+                  >
+                    <FontAwesomeIcon icon="user" className="text-warning" style={iconSize} />
                     {tournament.playersCount}
-                  </span>
+                  </Flex>
                 )}
-            </span>
+            </Flex>
             {showStartsAt(tournament.state) && (
               <>
                 {dayjs(tournament.startsAt).diff(dayjs(), 'hours') <= 24 && (
-                  <span className="d-inline-flex mt-2 text-nowrap cb-tournament-starts-in">
-                    <FontAwesomeIcon
-                      icon="clock"
-                      className="mr-2 cb-tournament-gold"
-                      style={iconSize}
-                    />
+                  <Flex
+                    component="span"
+                    display="inline-flex"
+                    gap="sm"
+                    mt="sm"
+                    style={{ whiteSpace: 'nowrap' }}
+                    className="cb-tournament-starts-in"
+                  >
+                    <FontAwesomeIcon icon="clock" className="cb-tournament-gold" style={iconSize} />
                     <TournamentTimer label={i18n.t('starts in')} date={tournament.startsAt}>
                       {formatTournamentDate(tournament.startsAt, tournament.grade)}
                     </TournamentTimer>
-                  </span>
+                  </Flex>
                 )}
               </>
             )}
             {tournament.state === tournamentStates.finished && finishedAt && (
-              <span className="d-none d-lg-inline-flex d-md-inline-flex d-sm-inline-flex pr-2 mt-2 text-white text-nowrap">
-                <FontAwesomeIcon icon="clock" className="mr-2 text-warning" style={iconSize} />
+              <Flex
+                component="span"
+                display="inline-flex"
+                visibleFrom="sm"
+                gap="sm"
+                pr="sm"
+                mt="sm"
+                c="white"
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                <FontAwesomeIcon icon="clock" className="text-warning" style={iconSize} />
                 {finishedAt}
-              </span>
+              </Flex>
             )}
-          </div>
+          </Flex>
           <TournamentAction tournament={tournament} isAdmin={isAdmin} />
-        </div>
-      </div>
-    </div>
+        </Flex>
+      </Flex>
+    </Paper>
   );
 }
 

From 3a5d8bbc759903c7fbec8253165258df0f44b43f Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:05:44 +0300
Subject: [PATCH 38/46] Convert lobby SeasonProfilePanel to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two-column responsive layout + nearby-users/stat panels: d-flex/flex-*
→ Flex/Box with responsive direction/w/p/m props; col-12/col-lg-8/-4 →
responsive w percentages; action btn anchors → Button component="a"
color=cbSecondary fullWidth; text-white → c="white"; avatar
rounded-circle → inline borderRadius. Kept all cb-*/stat-*/clan-* design
classes, Bootstrap typography (h1/h4), and User* passthrough props.
text-primary "add clan" link → Anchor (brand orange). Test wraps in
MantineTestProvider.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../js/__tests__/SeasonProfilePanel.test.tsx  |   8 +-
 .../pages/lobby/SeasonProfilePanel.tsx        | 200 +++++++++++-------
 2 files changed, 132 insertions(+), 76 deletions(-)

diff --git a/apps/codebattle/assets/js/__tests__/SeasonProfilePanel.test.tsx b/apps/codebattle/assets/js/__tests__/SeasonProfilePanel.test.tsx
index 70c9798c6..0f5a18ae1 100644
--- a/apps/codebattle/assets/js/__tests__/SeasonProfilePanel.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/SeasonProfilePanel.test.tsx
@@ -17,9 +17,15 @@ vi.mock('../widgets/middlewares/Users', () => ({
 
 import { SeasonNearbyUsers } from '../widgets/pages/lobby/SeasonProfilePanel';
 
+import { MantineTestProvider } from './helpers/mantine';
+
 describe('SeasonNearbyUsers', () => {
   test('aborts the pending request with its AbortController when unmounted', () => {
-    const { unmount } = render(<SeasonNearbyUsers user={{ id: 1, points: 10 }} nearbyUsers={[]} />);
+    const { unmount } = render(
+      <MantineTestProvider>
+        <SeasonNearbyUsers user={{ id: 1, points: 10 }} nearbyUsers={[]} />
+      </MantineTestProvider>,
+    );
     const controller = loadNearbyUsers.mock.calls[0][0] as AbortController;
 
     expect(controller.signal.aborted).toBe(false);
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.tsx
index 8848af262..c3e9be06d 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
+import { Anchor, Box, Button, Flex, Text } from '@mantine/core';
 import cn from 'classnames';
 import { getPageProp } from '@/inertia/pageProps';
 import { useDispatch, useSelector } from 'react-redux';
@@ -54,13 +55,10 @@ function OpponentInfo({ id }: OpponentInfoProps) {
   const user = useSelector(userByIdSelector(id as number)) as SeasonUser | undefined;
 
   return (
-    <div className="d-flex align-items-center py-2 px-2 my-1 mx-1 stat-line cb-nearby-row">
-      <div
-        className="d-flex align-items-center flex-grow-1 pr-2 cb-nearby-user"
-        style={{ minWidth: 0 }}
-      >
+    <Flex align="center" py="sm" px="sm" my="xs" mx="xs" className="stat-line cb-nearby-row">
+      <Flex align="center" pr="sm" className="cb-nearby-user" style={{ minWidth: 0, flexGrow: 1 }}>
         <UserLogo user={user} size="25px" />
-        <div className="ml-2 cb-nearby-user-name">
+        <Box ml="sm" className="cb-nearby-user-name">
           {user ? (
             <UserInfo
               user={user as unknown as UserNameUser}
@@ -73,9 +71,15 @@ function OpponentInfo({ id }: OpponentInfoProps) {
           ) : (
             <span className="cb-text-skeleton w-100 d-block">&nbsp;</span>
           )}
-        </div>
-      </div>
-      <div className="d-flex flex-column text-center py-1 px-1 flex-shrink-0 cb-nearby-metric">
+        </Box>
+      </Flex>
+      <Flex
+        direction="column"
+        ta="center"
+        py="xs"
+        px="xs"
+        className="flex-shrink-0 cb-nearby-metric"
+      >
         <a href="/hall_of_fame" className="stat-item py-1 w-100">
           <span
             className={cn('stat-value d-block cb-text-danger', {
@@ -86,8 +90,14 @@ function OpponentInfo({ id }: OpponentInfoProps) {
           </span>
           <span className="stat-label text-uppercase">{i18n.t('Place')}</span>
         </a>
-      </div>
-      <div className="d-flex flex-column text-center py-1 px-1 flex-shrink-0 cb-nearby-metric">
+      </Flex>
+      <Flex
+        direction="column"
+        ta="center"
+        py="xs"
+        px="xs"
+        className="flex-shrink-0 cb-nearby-metric"
+      >
         <div className="stat-item py-1 w-100">
           <span
             className={cn('stat-value d-block cb-text-danger', {
@@ -98,8 +108,8 @@ function OpponentInfo({ id }: OpponentInfoProps) {
           </span>
           <span className="stat-label text-uppercase">{i18n.t('Points')}</span>
         </div>
-      </div>
-    </div>
+      </Flex>
+    </Flex>
   );
 }
 
@@ -142,14 +152,14 @@ export function SeasonNearbyUsers({ user, nearbyUsers }: SeasonNearbyUsersProps)
   }
 
   return (
-    <div className="cb-bg-panel cb-rounded mt-2 cb-nearby-card">
-      <div className="d-flex flex-column">
-        <div className="cb-bg-highlight-panel text-center cb-rounded-top px-2">
-          <span className="text-white text-uppercase py-2 d-block">
+    <Box mt="sm" className="cb-bg-panel cb-rounded cb-nearby-card">
+      <Flex direction="column">
+        <Box ta="center" px="sm" className="cb-bg-highlight-panel cb-rounded-top">
+          <Text component="span" c="white" tt="uppercase" py="sm" display="block">
             {i18n.t('Closest Opponents')}
-          </span>
-        </div>
-        <div className="px-1 pb-1">
+          </Text>
+        </Box>
+        <Box px="xs" pb="xs">
           {loading ? (
             <>
               <OpponentInfo />
@@ -158,9 +168,9 @@ export function SeasonNearbyUsers({ user, nearbyUsers }: SeasonNearbyUsersProps)
           ) : (
             nearbyUsers.map((id) => <OpponentInfo key={id} id={id} />)
           )}
-        </div>
-      </div>
-    </div>
+        </Box>
+      </Flex>
+    </Box>
   );
 }
 
@@ -175,9 +185,8 @@ function UserLogo({ user, size = '70px' }: UserLogoProps) {
 
   return (
     <img
-      style={{ width: size, height: size }}
+      style={{ width: size, height: size, borderRadius: '50%' }}
       alt={i18n.t('Avatar Logo')}
-      className="rounded-circle"
       src={avatarUrl}
     />
   );
@@ -201,20 +210,36 @@ function SeasonProfilePanel({
   const isAdmin = useSelector(currentUserIsAdminSelector);
 
   return (
-    <div className="d-flex flex-column-reverse flex-lg-row my-0 my-lg-2 cb-season-layout">
-      <div className="col-12 col-lg-8 p-0 pr-lg-2 my-2 my-lg-0">
-        <div className="cb-bg-panel cb-rounded d-flex flex-column p-3 h-100 w-100 text-center cb-season-main-card">
+    <Flex
+      direction={{ base: 'column-reverse', lg: 'row' }}
+      my={{ base: 0, lg: 'sm' }}
+      className="cb-season-layout"
+    >
+      <Box
+        w={{ base: '100%', lg: '66.6667%' }}
+        p={0}
+        pr={{ base: 0, lg: 'sm' }}
+        my={{ base: 'sm', lg: 0 }}
+      >
+        <Flex
+          direction="column"
+          p="md"
+          h="100%"
+          w="100%"
+          ta="center"
+          className="cb-bg-panel cb-rounded cb-season-main-card"
+        >
           <CodebattleLeagueDescription />
           {seasonTournaments?.length || liveTournaments?.length ? (
             <div>
               {liveTournaments?.length !== 0 && (
                 <>
-                  <div className="d-flex justify-content-center align-items-center pt-2 cb-season-section-title">
-                    <span className="text-white text-uppercase h4">
+                  <Flex justify="center" align="center" pt="sm" className="cb-season-section-title">
+                    <Text component="span" c="white" tt="uppercase" className="h4">
                       {i18n.t('Live Tournaments')}
-                    </span>
-                  </div>
-                  <div className="d-flex flex-wrap cb-tournament-grid">
+                    </Text>
+                  </Flex>
+                  <Flex wrap="wrap" className="cb-tournament-grid">
                     {liveTournaments.map((tournament) => (
                       <TournamentListItem
                         isAdmin={isAdmin}
@@ -222,17 +247,17 @@ function SeasonProfilePanel({
                         tournament={tournament}
                       />
                     ))}
-                  </div>
+                  </Flex>
                 </>
               )}
               {seasonTournaments?.length !== 0 && (
                 <>
-                  <div className="d-flex justify-content-center pt-2 cb-season-section-title">
-                    <span className="text-white text-uppercase h4">
+                  <Flex justify="center" pt="sm" className="cb-season-section-title">
+                    <Text component="span" c="white" tt="uppercase" className="h4">
                       {i18n.t('Upcoming Tournaments')}
-                    </span>
-                  </div>
-                  <div className="d-flex flex-wrap cb-tournament-grid">
+                    </Text>
+                  </Flex>
+                  <Flex wrap="wrap" className="cb-tournament-grid">
                     {seasonTournaments.map((tournament) => (
                       <TournamentListItem
                         isAdmin={isAdmin}
@@ -240,57 +265,82 @@ function SeasonProfilePanel({
                         tournament={tournament}
                       />
                     ))}
-                  </div>
+                  </Flex>
                 </>
               )}
             </div>
           ) : (
-            <div className="pt-2 mt-2">{i18n.t('Competition not started yet')}</div>
+            <Box pt="sm" mt="sm">
+              {i18n.t('Competition not started yet')}
+            </Box>
           )}
-          <div className="d-flex flex-column flex-lg-row w-100 pt-2 mt-2 cb-season-actions">
-            <a
+          <Flex
+            direction={{ base: 'column', lg: 'row' }}
+            w="100%"
+            pt="sm"
+            mt="sm"
+            className="cb-season-actions"
+          >
+            <Button
+              component="a"
               href="/schedule#contest"
-              type="button"
-              className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
+              color="cbSecondary"
+              fullWidth
+              mx={{ base: 0, md: 'sm' }}
+              className="text-nowrap"
             >
               {i18n.t('Contests History')}
-            </a>
-            <a
+            </Button>
+            <Button
+              component="a"
               href="/schedule#my"
-              type="button"
-              className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
+              color="cbSecondary"
+              fullWidth
+              mx={{ base: 0, md: 'sm' }}
+              className="text-nowrap"
             >
               {i18n.t('My Tournaments')}
-            </a>
-            <a
+            </Button>
+            <Button
+              component="a"
               href="/tournaments"
-              type="button"
-              className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
+              color="cbSecondary"
+              fullWidth
+              mx={{ base: 0, md: 'sm' }}
+              className="text-nowrap"
             >
               {i18n.t('Create a Tournament')}
-            </a>
-          </div>
-        </div>
-      </div>
-      <div className="col-12 col-lg-4 p-0 pl-lg-2 d-flex flex-column my-2 my-lg-0">
-        <div className="cb-bg-panel cb-rounded cb-season-profile-card">
-          <div className="text-center py-2">
+            </Button>
+          </Flex>
+        </Flex>
+      </Box>
+      <Flex
+        direction="column"
+        w={{ base: '100%', lg: '33.3333%' }}
+        p={0}
+        pl={{ base: 0, lg: 'sm' }}
+        my={{ base: 'sm', lg: 0 }}
+      >
+        <Box className="cb-bg-panel cb-rounded cb-season-profile-card">
+          <Box ta="center" py="sm">
             <UserLogo user={user} />
-            <span className="clan-tag mt-2">{user.name}</span>
-            <span className="h1 clan-title m-0 text-white text-uppercase">
+            <Text component="span" mt="sm" className="clan-tag">
+              {user.name}
+            </Text>
+            <Text component="span" m={0} c="white" tt="uppercase" className="h1 clan-title">
               {i18n.t('Clan')}
               {': '}
               {user.clanId ? (
                 user.clan
               ) : (
-                <a href="/settings" className="text-lowercase text-primary">
+                <Anchor href="/settings" tt="lowercase">
                   <small>{i18n.t('add clan')}</small>
-                </a>
+                </Anchor>
               )}
-            </span>
-          </div>
+            </Text>
+          </Box>
 
-          <div className="cb-bg-highlight-panel d-flex py-2 px-1 cb-season-stats">
+          <Flex py="sm" px="xs" className="cb-bg-highlight-panel cb-season-stats">
             <div className="stat-item py-1 w-100">
               <span className="stat-value d-block cb-text-danger">{user.rating}</span>
               <span className="stat-label text-uppercase">{i18n.t('(Elo Rating)')}</span>
@@ -307,23 +357,23 @@ function SeasonProfilePanel({
               <span className="stat-value d-block cb-text-danger">{user.points || 0}</span>
               <span className="stat-label text-uppercase">{i18n.t('Points')}</span>
             </div>
-          </div>
+          </Flex>
 
           {contestDatesText && (
-            <div className="d-flex justify-content-center cb-font-size-small px-3 py-2 text-white">
+            <Flex justify="center" px="md" py="sm" c="white" className="cb-font-size-small">
               <span className="d-block">{contestDatesText}</span>
-            </div>
+            </Flex>
           )}
-        </div>
+        </Box>
         <SeasonNearbyUsers user={user} nearbyUsers={nearbyUsers} />
-        <div className="text-center mt-2 cb-hof-link">
+        <Box ta="center" mt="sm" className="cb-hof-link">
           <a href="/hall_of_fame" className="text-uppercase stat-label cb-rounded">
             {i18n.t('View Hall of Fame')}
           </a>
-        </div>
+        </Box>
         {controls}
-      </div>
-    </div>
+      </Flex>
+    </Flex>
   );
 }
 

From 9b67a4f2306982f32e0b911ba91c83b781432491 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:10:05 +0300
Subject: [PATCH 39/46] Convert lobby CodebattleLeagueDescription to Mantine
 (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rewrote the Bootstrap-JS collapse/accordion (data-toggle/data-parent)
as a controlled Mantine Collapse (outer "See Rules & Details" toggle)
wrapping a single-open Accordion (variant="separated", defaultValue=
"overview"). card/card-header/card-body → Accordion.Item/Control/Panel;
row/col-md-6 → Grid/Grid.Col; text-white → c="white" on panels; btn
btn-secondary → Button color=cbSecondary. Removes this component's
dependency on Bootstrap's JS collapse plugin. Kept cb-bg-panel/
cb-bg-highlight-panel/cb-rounded design classes.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../lobby/CodebattleLeagueDescription.tsx     | 403 +++++++-----------
 1 file changed, 144 insertions(+), 259 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.tsx
index 0f4ded46c..f47536a89 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/CodebattleLeagueDescription.tsx
@@ -1,70 +1,57 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import { Accordion, Box, Button, Collapse, Grid, Text, Title } from '@mantine/core';
 
 import i18n from '../../../i18n';
 
-// Bootstrap 4 compatible, dark theme friendly (no bg-white / color backgrounds).
-// Uses your custom dark styles like: cb-bg-panel, cb-bg-highlight-panel, cb-rounded, cb-btn-secondary, etc.
+// Dark-theme friendly. Uses custom dark styles like cb-bg-panel,
+// cb-bg-highlight-panel, cb-rounded, cb-btn-secondary, etc.
 
 function CodebattleLeagueDescription() {
+  const [opened, setOpened] = useState(false);
+
   return (
-    <section className="w-100 my-2 cb-league-description">
-      <div className="px-2 px-md-3 py-3 text-center">
-        <h2 className="text-white m-0">{i18n.t('Codebattle League')}</h2>
-        <p className="text-white mt-2 mb-3">
+    <Box component="section" w="100%" my="sm" className="cb-league-description">
+      <Box px={{ base: 'sm', md: 'md' }} py="md" ta="center">
+        <Title order={2} c="white" m={0}>
+          {i18n.t('Codebattle League')}
+        </Title>
+        <Text c="white" mt="sm" mb="md">
           {i18n.t(
             'Challenge the best! Participate in the Competition tournaments, defeat your rivals to earn points, and claim the first place in the programmer ranking.',
           )}
-        </p>
+        </Text>
 
-        {/* Toggle for Rules/Details */}
-        <button
-          className="btn btn-secondary cb-btn-secondary cb-rounded"
-          type="button"
-          data-toggle="collapse"
-          data-target="#leagueProtocol"
-          aria-expanded="false"
+        <Button
+          color="cbSecondary"
+          onClick={() => setOpened((value) => !value)}
+          aria-expanded={opened}
           aria-controls="leagueProtocol"
         >
           {i18n.t('See Rules & Details')}
-        </button>
+        </Button>
 
-        {/* Collapsible rules container */}
-        <div className="collapse mt-3 text-left" id="leagueProtocol">
-          <div className="cb-bg-highlight-panel cb-rounded p-2">
-            <div id="leagueAccordion">
-              {/* Overview */}
-              <div className="card cb-bg-panel cb-rounded mb-2">
-                <div className="card-header" id="headingOverview">
-                  <h5 className="mb-0">
-                    <button
-                      className="btn btn-link text-uppercase"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapseOverview"
-                      aria-expanded="true"
-                      aria-controls="collapseOverview"
-                    >
+        <Collapse expanded={opened}>
+          <Box id="leagueProtocol" mt="md" ta="left">
+            <Box p="sm" className="cb-bg-highlight-panel cb-rounded">
+              <Accordion variant="separated" defaultValue="overview">
+                <Accordion.Item value="overview" className="cb-bg-panel cb-rounded">
+                  <Accordion.Control>
+                    <Text component="span" tt="uppercase">
                       {i18n.t('Seasons, Grades, Points — Overview')}
-                    </button>
-                  </h5>
-                </div>
-                <div
-                  id="collapseOverview"
-                  className="collapse show"
-                  aria-labelledby="headingOverview"
-                  data-parent="#leagueAccordion"
-                >
-                  <div className="card-body">
-                    <p className="mb-2 text-white">
+                    </Text>
+                  </Accordion.Control>
+                  <Accordion.Panel c="white">
+                    <Text mb="sm">
                       <strong>{i18n.t('Seasons')}</strong>
-                    </p>
-                    <ul className="mb-3 text-white">
+                    </Text>
+                    <Box component="ul" mb="md">
                       <li>{i18n.t('Season 0: Sep 21 – Dec 21')}</li>
                       <li>{i18n.t('Season 1: Dec 21 – Mar 21')}</li>
                       <li>{i18n.t('Season 2: Mar 21 – Jun 21')}</li>
                       <li>{i18n.t('Season 3: Jun 21 – Sep 21')}</li>
-                    </ul>
-                    <ul className="mb-3 text-white">
+                    </Box>
+                    <Box component="ul" mb="md">
                       <li>
                         {i18n.t(
                           'On the season end date (the 21st), we run a Grand Slam at 16:00 UTC.',
@@ -73,46 +60,29 @@ function CodebattleLeagueDescription() {
                       <li>
                         {i18n.t('Season Points reset each season. Elo never resets (lifetime).')}
                       </li>
-                    </ul>
-                    <p className="mb-2 text-white">
+                    </Box>
+                    <Text mb="sm">
                       <strong>{i18n.t('Grades')}</strong>
-                    </p>
-                    <p className="mb-0 text-white">
+                    </Text>
+                    <Text mb={0}>
                       {i18n.t(
                         'open, rookie, challenger, pro, elite, masters, grand_slam — determine prestige, task pools, points, schedules, and limits.',
                       )}
-                    </p>
-                  </div>
-                </div>
-              </div>
+                    </Text>
+                  </Accordion.Panel>
+                </Accordion.Item>
 
-              {/* Scheduling & Preemption */}
-              <div className="card cb-bg-panel cb-rounded mb-2">
-                <div className="card-header" id="headingSchedule">
-                  <h5 className="mb-0">
-                    <button
-                      className="btn btn-link collapsed text-uppercase"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapseSchedule"
-                      aria-expanded="false"
-                      aria-controls="collapseSchedule"
-                    >
+                <Accordion.Item value="schedule" className="cb-bg-panel cb-rounded">
+                  <Accordion.Control>
+                    <Text component="span" tt="uppercase">
                       {i18n.t('Tournament Scheduling & Preemption')}
-                    </button>
-                  </h5>
-                </div>
-                <div
-                  id="collapseSchedule"
-                  className="collapse"
-                  aria-labelledby="headingSchedule"
-                  data-parent="#leagueAccordion"
-                >
-                  <div className="card-body text-white">
-                    <p className="mb-2">
+                    </Text>
+                  </Accordion.Control>
+                  <Accordion.Panel c="white">
+                    <Text mb="sm">
                       <strong>{i18n.t('Daily/Hourly (UTC)')}</strong>
-                    </p>
-                    <ul className="mb-3">
+                    </Text>
+                    <Box component="ul" mb="md">
                       <li>
                         {i18n.t(
                           'Rookie: every 4 hours — 03:00, 07:00, 11:00, 15:00, 19:00, 23:00 UTC (no 16:00 slot).',
@@ -123,113 +93,79 @@ function CodebattleLeagueDescription() {
                           'Challenger: daily 16:00 UTC; preempted by higher grades that day/week.',
                         )}
                       </li>
-                    </ul>
-                    <p className="mb-2">
+                    </Box>
+                    <Text mb="sm">
                       <strong>{i18n.t('Weekly 16:00 UTC priority')}</strong>
-                    </p>
-                    <p className="mb-1">{i18n.t('grand_slam > masters > elite > pro.')}</p>
-                    <p className="mb-0">
+                    </Text>
+                    <Text mb="xs">{i18n.t('grand_slam > masters > elite > pro.')}</Text>
+                    <Text mb={0}>
                       {i18n.t(
                         'In any week, exactly one of these runs at 16:00. Grand Slam week -> only GS at 16:00. Masters week -> no pro/elite. Otherwise pro (Tue) and elite (Wed) alternate as backbone.',
                       )}
-                    </p>
-                  </div>
-                </div>
-              </div>
+                    </Text>
+                  </Accordion.Panel>
+                </Accordion.Item>
 
-              {/* Player Limits & Rounds */}
-              <div className="card cb-bg-panel cb-rounded mb-2">
-                <div className="card-header" id="headingLimits">
-                  <h5 className="mb-0">
-                    <button
-                      className="btn btn-link collapsed text-uppercase"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapseLimits"
-                      aria-expanded="false"
-                      aria-controls="collapseLimits"
-                    >
+                <Accordion.Item value="limits" className="cb-bg-panel cb-rounded">
+                  <Accordion.Control>
+                    <Text component="span" tt="uppercase">
                       {i18n.t('Player Limits & Rounds per Grade')}
-                    </button>
-                  </h5>
-                </div>
-                <div
-                  id="collapseLimits"
-                  className="collapse"
-                  aria-labelledby="headingLimits"
-                  data-parent="#leagueAccordion"
-                >
-                  <div className="card-body text-white">
-                    <div className="row">
-                      <div className="col-md-6">
-                        <p className="mb-2">
+                    </Text>
+                  </Accordion.Control>
+                  <Accordion.Panel c="white">
+                    <Grid>
+                      <Grid.Col span={{ base: 12, md: 6 }}>
+                        <Text mb="sm">
                           <strong>{i18n.t('Players limit')}</strong>
-                        </p>
-                        <ul className="mb-3">
+                        </Text>
+                        <Box component="ul" mb="md">
                           <li>{i18n.t('rookie: 8')}</li>
                           <li>{i18n.t('challenger: 16')}</li>
                           <li>{i18n.t('pro: 32')}</li>
                           <li>{i18n.t('elite: 64')}</li>
                           <li>{i18n.t('masters: 128')}</li>
                           <li>{i18n.t('grand_slam: 256')}</li>
-                        </ul>
-                      </div>
-                      <div className="col-md-6">
-                        <p className="mb-2">
+                        </Box>
+                      </Grid.Col>
+                      <Grid.Col span={{ base: 12, md: 6 }}>
+                        <Text mb="sm">
                           <strong>{i18n.t('Rounds per grade')}</strong>
-                        </p>
-                        <ul className="mb-0">
+                        </Text>
+                        <Box component="ul" mb={0}>
                           <li>{i18n.t('rookie: 4')}</li>
                           <li>{i18n.t('challenger: 6')}</li>
                           <li>{i18n.t('pro: 8')}</li>
                           <li>{i18n.t('elite: 10')}</li>
                           <li>{i18n.t('masters: 12')}</li>
                           <li>{i18n.t('grand_slam: 14')}</li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                        </Box>
+                      </Grid.Col>
+                    </Grid>
+                  </Accordion.Panel>
+                </Accordion.Item>
 
-              {/* Season Points Distribution */}
-              <div className="card cb-bg-panel cb-rounded mb-2">
-                <div className="card-header" id="headingPoints">
-                  <h5 className="mb-0">
-                    <button
-                      className="btn btn-link collapsed text-uppercase"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapsePoints"
-                      aria-expanded="false"
-                      aria-controls="collapsePoints"
-                    >
+                <Accordion.Item value="points" className="cb-bg-panel cb-rounded">
+                  <Accordion.Control>
+                    <Text component="span" tt="uppercase">
                       {i18n.t('Season Points Distribution')}
-                    </button>
-                  </h5>
-                </div>
-                <div
-                  id="collapsePoints"
-                  className="collapse"
-                  aria-labelledby="headingPoints"
-                  data-parent="#leagueAccordion"
-                >
-                  <div className="card-body text-white">
-                    <p>
+                    </Text>
+                  </Accordion.Control>
+                  <Accordion.Panel c="white">
+                    <Text>
                       {i18n.t(
                         'For each finished tournament (grade != open), award Season Points by final place using the tables below. All remaining participants (outside prize slots) receive 2 points each. Prize points do not stack with participation points.',
                       )}
-                    </p>
-                    <div className="row">
-                      <div className="col-md-6">
-                        <ul className="mb-3">
+                    </Text>
+                    <Grid>
+                      <Grid.Col span={{ base: 12, md: 6 }}>
+                        <Box component="ul" mb="md">
                           <li>{i18n.t('rookie: [8, 4, 2] - top-3')}</li>
                           <li>{i18n.t('challenger: [16, 8, 4, 2] - top-6')}</li>
                           <li>{i18n.t('pro: [128, 64, 32, 16, 8, 4, 2] - top-7')}</li>
-                        </ul>
-                      </div>
-                      <div className="col-md-6">
-                        <ul className="mb-0">
+                        </Box>
+                      </Grid.Col>
+                      <Grid.Col span={{ base: 12, md: 6 }}>
+                        <Box component="ul" mb={0}>
                           <li>{i18n.t('elite: [256, 128, 64, 32, 16, 8, 4, 2] - top-8')}</li>
                           <li>
                             {i18n.t('masters: [1024, 512, 256, 128, 64, 32, 16, 8, 4, 2] - top-10')}
@@ -239,130 +175,79 @@ function CodebattleLeagueDescription() {
                               'grand_slam: [2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2] - top-11',
                             )}
                           </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                        </Box>
+                      </Grid.Col>
+                    </Grid>
+                  </Accordion.Panel>
+                </Accordion.Item>
 
-              {/* Tie-Breakers */}
-              <div className="card cb-bg-panel cb-rounded mb-2">
-                <div className="card-header" id="headingTie">
-                  <h5 className="mb-0">
-                    <button
-                      className="btn btn-link collapsed text-uppercase"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapseTie"
-                      aria-expanded="false"
-                      aria-controls="collapseTie"
-                    >
+                <Accordion.Item value="tie" className="cb-bg-panel cb-rounded">
+                  <Accordion.Control>
+                    <Text component="span" tt="uppercase">
                       {i18n.t('Season Leaderboard Tie-Breakers')}
-                    </button>
-                  </h5>
-                </div>
-                <div
-                  id="collapseTie"
-                  className="collapse"
-                  aria-labelledby="headingTie"
-                  data-parent="#leagueAccordion"
-                >
-                  <div className="card-body text-white">
-                    <ol className="mb-0">
+                    </Text>
+                  </Accordion.Control>
+                  <Accordion.Panel c="white">
+                    <Box component="ol" mb={0}>
                       <li>{i18n.t('Total Season Points (desc)')}</li>
                       <li>{i18n.t('Tournament wins in season (desc)')}</li>
                       <li>{i18n.t('Tournament participations in season (desc)')}</li>
-                    </ol>
-                  </div>
-                </div>
-              </div>
+                    </Box>
+                  </Accordion.Panel>
+                </Accordion.Item>
 
-              {/* Hall of Fame */}
-              <div className="card cb-bg-panel cb-rounded mb-2">
-                <div className="card-header" id="headingHof">
-                  <h5 className="mb-0">
-                    <button
-                      className="btn btn-link collapsed text-uppercase"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapseHof"
-                      aria-expanded="false"
-                      aria-controls="collapseHof"
-                    >
+                <Accordion.Item value="hof" className="cb-bg-panel cb-rounded">
+                  <Accordion.Control>
+                    <Text component="span" tt="uppercase">
                       {i18n.t('Hall of Fame')}
-                    </button>
-                  </h5>
-                </div>
-                <div
-                  id="collapseHof"
-                  className="collapse"
-                  aria-labelledby="headingHof"
-                  data-parent="#leagueAccordion"
-                >
-                  <div className="card-body text-white">
+                    </Text>
+                  </Accordion.Control>
+                  <Accordion.Panel c="white">
                     {i18n.t(
                       'Maintain a HoF for Season Champions and Grand Slam Champions (participants page optional later).',
                     )}
-                  </div>
-                </div>
-              </div>
+                  </Accordion.Panel>
+                </Accordion.Item>
 
-              {/* Codebattle — Overview & Key Concepts */}
-              <div className="card cb-bg-panel cb-rounded mb-2">
-                <div className="card-header" id="headingCbOverview">
-                  <h5 className="mb-0">
-                    <button
-                      className="btn btn-link collapsed text-uppercase"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapseCbOverview"
-                      aria-expanded="false"
-                      aria-controls="collapseCbOverview"
-                    >
+                <Accordion.Item value="cbOverview" className="cb-bg-panel cb-rounded">
+                  <Accordion.Control>
+                    <Text component="span" tt="uppercase">
                       {i18n.t('Codebattle - Overview & Key Concepts')}
-                    </button>
-                  </h5>
-                </div>
-                <div
-                  id="collapseCbOverview"
-                  className="collapse"
-                  aria-labelledby="headingCbOverview"
-                  data-parent="#leagueAccordion"
-                >
-                  <div className="card-body text-white">
-                    <p className="mb-2">
+                    </Text>
+                  </Accordion.Control>
+                  <Accordion.Panel c="white">
+                    <Text mb="sm">
                       <strong>{i18n.t('Competitive Programming Game')}</strong>
-                    </p>
-                    <p className="mb-3">
+                    </Text>
+                    <Text mb="md">
                       {i18n.t(
                         'Codebattle (codebattle.hexlet.io) is a real-time coding duel platform. Two players solve the same task in parallel; whoever solves it first wins the match.',
                       )}
-                    </p>
-                    <p className="mb-2">
+                    </Text>
+                    <Text mb="sm">
                       <strong>{i18n.t('Swiss Tournaments')}</strong>
-                    </p>
-                    <p className="mb-3">
+                    </Text>
+                    <Text mb="md">
                       {i18n.t(
                         'Multiple rounds; in each round, players are paired vs players with similar cumulative score; no repeat pairings (unless unavoidable on round 1 bootstrap or via bot fill-ins).',
                       )}
-                    </p>
-                    <p className="mb-2">
+                    </Text>
+                    <Text mb="sm">
                       <strong>{i18n.t('Languages')}</strong>
-                    </p>
-                    <p className="mb-0">
+                    </Text>
+                    <Text mb={0}>
                       {i18n.t(
                         '16 supported - clojure, cpp, csharp, dart, elixir, golang, java, js, kotlin, php, python, ruby, rust, swift, zig, ts.',
                       )}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
+                    </Text>
+                  </Accordion.Panel>
+                </Accordion.Item>
+              </Accordion>
+            </Box>
+          </Box>
+        </Collapse>
+      </Box>
+    </Box>
   );
 }
 

From 87012eaa3187cef308a8dd61eb71dd5537a95ea5 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:11:08 +0300
Subject: [PATCH 40/46] Log lobby
 ChatActionModal/TournamentListItem/SeasonProfilePanel/League conversions
 (Phase 2)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md | 48 +++++++++++++++++++--
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index 38c1d4a04..c2ffabd8d 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -466,13 +466,53 @@ In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
   `col-*`-in-flex responsive grid → `<Flex>`/`<Box>` with responsive `w`/`p`/`m`
   props, `sr-only` → `<VisuallyHidden>`, all `cb-lobby-loading-*` /
   `cb-text-skeleton` design classes kept).
+- Done: `ChatActionModal` (player-select modal) — the `div role="button"` +
+  a11y shims (`tabIndex`/`onKeyPress`) player rows → native Mantine `<Button
+  color="cbSecondary" fullWidth justify="flex-start" h="auto" p="md">` (the
+  `data-user-id`/`data-user-name` + `onClick` reading `currentTarget.dataset`
+  survive on the real `<button>`); `d-flex flex-column` → `<Stack gap="sm">`.
+  Renders inside `CbModal` (already Mantine). No test.
+- Done: `TournamentListItem` (season/live tournament card) — layout utilities →
+  `Flex`/`Box` + style props; root `border cb-border-color cb-rounded` box →
+  `<Paper withBorder radius="md">` (theme resolves the border color); the main
+  action `<a>` → `<Button component="a" color="cbSecondary">` (still role=link,
+  test's `getByRole('link')` passes); the info `<button>` → `<ActionIcon
+  variant="transparent">` keeping `cb-tournament-info-icon-btn` (30×30 sizing +
+  `padding:0!important`) and `cb-btn-outline-secondary` (icon color, unlayered
+  wins over `--ai-color`); `text-white` → `c="white"`. Kept all `cb-tournament-*`
+  design classes, Bootstrap typography (`h5`) and `text-warning` icon color
+  (neither in the DoD grep). Test already wrapped in `MantineTestProvider`.
+- Done: `SeasonProfilePanel` (+ its `OpponentInfo` / `SeasonNearbyUsers` /
+  `UserLogo` sub-parts) — two-column responsive layout: `d-flex
+  flex-column-reverse flex-lg-row` → `<Flex direction={{ base:
+  'column-reverse', lg: 'row' }}>`, `col-12 col-lg-8`/`-4` → responsive `w`
+  percentages (`{ base: '100%', lg: '66.6667%' }`); the 3 action-link buttons →
+  `<Button component="a" color="cbSecondary" fullWidth>`; avatar `rounded-circle`
+  → inline `borderRadius:'50%'`; `text-white` → `c="white"`. **Kept the stat
+  internals untouched** (`stat-item`/`stat-value`/`stat-label`/`cb-text-*`/
+  `d-block`/`text-uppercase` carry no DoD-grep token) — only the `d-flex`
+  containers around them were converted. Kept all `cb-*`/`clan-*` design classes,
+  Bootstrap typography (`h1`/`h4`), `User*` passthrough props, and the `cn`
+  skeleton toggles. The `text-primary` "add clan" link → `<Anchor>` (brand
+  orange, per the standing decision). `SeasonProfilePanel.test` (renders only
+  `SeasonNearbyUsers`) now wraps in `MantineTestProvider`.
+- Done: `CodebattleLeagueDescription` (the league rules panel) — **rewrote the
+  Bootstrap-JS collapse + accordion** (`data-toggle="collapse"` /
+  `data-parent="#leagueAccordion"`) as a controlled Mantine `<Collapse
+  expanded={opened}>` (outer "See Rules & Details" toggle) wrapping a single-open
+  `<Accordion variant="separated" defaultValue="overview">` (7 items).
+  `card`/`card-header`/`card-body` → `Accordion.Item`/`Control`/`Panel`;
+  `row`/`col-md-6` → `Grid`/`Grid.Col span={{ base:12, md:6 }}`; `text-white` →
+  `c="white"` on each `Accordion.Panel`; `btn btn-secondary` → `Button
+  color="cbSecondary"`; `<h2>` → `<Title order={2}>`. ⚠️ this Mantine build's
+  `Collapse` prop is **`expanded`**, not `in` (same as `AccordeonBox`). Removes
+  this component's dependency on Bootstrap's JS collapse plugin; Mantine adds a
+  chevron the Bootstrap accordion didn't have (QA). No test.
 - **Deferred (react-select):** `TaskChoice` uses react-select — leave with
   `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` for the one-PR lib swap.
 - **Remaining lobby leaves/containers (still Bootstrap):** `LobbyChat`,
-  `CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`,
-  `CodebattleLeagueDescription`, `LobbyWidget` (container), `TournamentModal`,
-  `ChatActionModal`. (`CreateGameDialog`, `TournamentListItem`, `SeasonProfilePanel`
-  have tests — wrap in `MantineTestProvider` when converted.)
+  `CreateGameDialog`, `LobbyWidget` (container), `TournamentModal`.
+  (`CreateGameDialog` has a test — wrap in `MantineTestProvider` when converted.)
 
 ⚠️ QA (lobby cluster): the games-table Continue/copy/cancel row (Group vs the old
 attached `btn-group`); the **cancel button still hidden until you hover the game

From c63d0c04b93b5a68a7508c72ce2fc6eb1483efa5 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:14:12 +0300
Subject: [PATCH 41/46] Convert lobby TournamentModal to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Title/body/footer layout → Flex/Text/Title + style props; the footer
"Open Tournament" anchor (btn + invalid disabled-attr hack + cn) →
Button component="a" color=cbSecondary disabled={isUpcoming}; body
position-relative → style prop. Left the TournamentPreviewPanel /
TournamentDescription passthrough classNames as documented leftovers
(both only accept className, applied to a Box).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../widgets/pages/lobby/TournamentModal.tsx   | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
index 65f6b565f..f12fce8bf 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/TournamentModal.tsx
@@ -1,8 +1,7 @@
 import React, { memo } from 'react';
 
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
-import { Button } from '@mantine/core';
-import cn from 'classnames';
+import { Button, Flex, Text, Title } from '@mantine/core';
 import { useSelector } from 'react-redux';
 
 import Modal from '@/components/CbModal';
@@ -38,19 +37,21 @@ export const TournamentModal = NiceModal.create(({ tournament }: TournamentModal
   return (
     <Modal size="lg" show={modal.visible} onHide={modal.hide} contentClassName="cb-text">
       <Modal.Header className="cb-border-color" closeButton>
-        <Modal.Title className="d-flex flex-column">
+        <Modal.Title>
           {tournament.grade !== grades.open && (
-            <span className="text-white">Codebattle League 2025</span>
+            <Text component="span" c="white">
+              Codebattle League 2025
+            </Text>
           )}
         </Modal.Title>
       </Modal.Header>
-      <Modal.Body className="position-relative">
-        <h3 className='text-center'>
+      <Modal.Body style={{ position: 'relative' }}>
+        <Title order={3} ta="center">
           {i18n.t('Tournament: %{name}', {
             name: localizeTournamentName(tournament.name, tournament.grade),
           })}
-        </h3>
-        <div className="d-flex flex-column">
+        </Title>
+        <Flex direction="column">
           <TournamentPreviewPanel
             className="d-flex justify-content-center w-100 h-100"
             tournament={tournament as unknown as { grade: string }}
@@ -61,22 +62,18 @@ export const TournamentModal = NiceModal.create(({ tournament }: TournamentModal
             className="d-flex flex-column align-items-center cb-rounded w-100 h-100 p-3"
             tournament={tournament as unknown as { grade: string; description?: string }}
           />
-        </div>
+        </Flex>
       </Modal.Body>
       <Modal.Footer className="cb-border-color">
         {tournament.id && (
-          <a
+          <Button
+            component="a"
+            color="cbSecondary"
+            disabled={isUpcoming}
             href={isAdmin || !isUpcoming ? `/tournaments/${tournament.id}` : 'blank'}
-            className={cn('btn btn-secondary cb-btn-secondary pr-2 cb-rounded', {
-              disabled: isUpcoming,
-            })}
-            // `disabled` is not a valid anchor attribute but was present in the
-            // original markup; preserve behavior without a type error.
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            {...({ disabled: isUpcoming } as any)}
           >
             {i18n.t('Open Tournament')}
-          </a>
+          </Button>
         )}
         <Button onClick={modal.hide} color="cbSecondary" radius="md">
           {i18n.t('Close')}

From ffe05baf6371cc8d4b48f8de88afead20311b45d Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:17:55 +0300
Subject: [PATCH 42/46] Convert lobby LobbyChat to Mantine (Phase 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Card/columns/sidebar layout → Flex/Box + style props (responsive
direction for the column→row breakpoint); the two icon-only action
btns → ActionIcon variant="transparent" (envelope icon gets c="white"
in place of the FontAwesome text-white); online-count p → Text. Kept
all cb-lobby-*/cb-players-container/cb-border-color design classes and
the responsive rounded-*/h-sm-100/pb-sm-4 utilities. ChatUserInfo's
mb-1 passthrough replaced by wrapping each row in Box mb="xs"; left
Messages' text-white passthrough (theme default isn't pure white).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../js/widgets/pages/lobby/LobbyChat.tsx      | 92 ++++++++++---------
 1 file changed, 47 insertions(+), 45 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.tsx
index 47162ceac..1385d1c4e 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.tsx
@@ -2,7 +2,7 @@ import React, { memo, useEffect, useMemo, useCallback } from 'react';
 
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cn from 'classnames';
+import { ActionIcon, Box, Flex, Text } from '@mantine/core';
 import groupBy from 'lodash/groupBy';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -44,13 +44,13 @@ function UsersList({ list, title, displayMenu, mode }: UsersListProps) {
     <>
       {list.length !== 0 && <div>{`${i18n.t(title)}: `}</div>}
       {list.map((player) => (
-        <ChatUserInfo
-          mode={mode}
-          key={player.id}
-          user={player.user}
-          displayMenu={displayMenu as ChatUserInfoDisplayMenu}
-          className="mb-1"
-        />
+        <Box mb="xs" key={player.id}>
+          <ChatUserInfo
+            mode={mode}
+            user={player.user}
+            displayMenu={displayMenu as ChatUserInfoDisplayMenu}
+          />
+        </Box>
       ))}
     </>
   );
@@ -97,11 +97,7 @@ function ChatGroupedPlayersList({ players, displayMenu, mode }: ChatGroupedPlaye
   );
 }
 
-const chatHeaderClassName = cn(
-  'd-flex flex-column position-relative',
-  'p-0 rounded-left h-sm-100 cb-lobby-widget-container w-100',
-  'cb-lobby-chat-main',
-);
+const chatHeaderClassName = 'rounded-left h-sm-100 cb-lobby-widget-container cb-lobby-chat-main';
 
 interface ModalShowingState {
   opened: boolean;
@@ -170,8 +166,12 @@ function LobbyChat({
       inputRef={inputRef as React.RefObject<HTMLInputElement>}
       request={menuRequest}
     >
-      <div className="d-flex flex-column flex-lg-row cb-bg-panel cb-rounded shadow-sm mt-2 cb-lobby-chat-card">
-        <div className={chatHeaderClassName}>
+      <Flex
+        direction={{ base: 'column', lg: 'row' }}
+        mt="sm"
+        className="cb-bg-panel cb-rounded shadow-sm cb-lobby-chat-card"
+      >
+        <Flex direction="column" pos="relative" p={0} w="100%" className={chatHeaderClassName}>
           <ChatHeader disabled={!isOnline} showRooms />
           <Messages
             className="text-white"
@@ -188,43 +188,45 @@ function LobbyChat({
             disabled={!isOnline}
             inputRef={inputRef as React.RefObject<HTMLInputElement>}
           />
-        </div>
-        <div
-          className={cn(
-            'p-0 pb-3 pb-sm-4 cb-players-container',
-            'border-left cb-border-color rounded-right',
-            'cb-lobby-chat-sidebar',
-          )}
+        </Flex>
+        <Box
+          p={0}
+          pb="md"
+          className="pb-sm-4 cb-players-container border-left cb-border-color rounded-right cb-lobby-chat-sidebar"
         >
-          <div className="d-flex flex-column h-100">
-            <div className="d-flex justify-content-between">
+          <Flex direction="column" h="100%">
+            <Flex justify="space-between">
               {isOnline ? (
-                <p className="px-3 pt-2 mb-2 text-nowrap">
+                <Text px="md" pt="sm" mb="sm" className="text-nowrap">
                   {i18n.t('Online players: %{count}', { count: presenceList.length })}
-                </p>
+                </Text>
               ) : (
-                <div className="px-3 pt-2 mb-2 text-nowrap">
+                <Box px="md" pt="sm" mb="sm" className="text-nowrap">
                   <Loading adaptive />
-                </div>
+                </Box>
               )}
-              <div className="d-flex justify-items-center p-2">
-                <button
-                  type="button"
-                  className="btn btn-sm p-0 cb-rounded mr-1 cb-lobby-chat-action"
+              <Flex p="sm" className="justify-items-center">
+                <ActionIcon
+                  variant="transparent"
+                  c="white"
+                  p={0}
+                  mr="xs"
                   onClick={openSendMessageModal}
                   disabled={!isOnline || presenceList.length <= 1}
                   aria-label={i18n.t('Send message')}
                   title={i18n.t('Send message')}
+                  className="cb-lobby-chat-action"
                 >
-                  <FontAwesomeIcon aria-hidden="true" className="text-white" icon={faEnvelope} />
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-sm p-0 cb-rounded cb-lobby-chat-action"
+                  <FontAwesomeIcon aria-hidden="true" icon={faEnvelope} />
+                </ActionIcon>
+                <ActionIcon
+                  variant="transparent"
+                  p={0}
                   onClick={openSendInviteModal}
                   disabled={!isOnline || presenceList.length <= 1}
                   aria-label={i18n.t('Send fight invite')}
                   title={i18n.t('Send fight invite')}
+                  className="cb-lobby-chat-action"
                 >
                   <img
                     alt=""
@@ -232,19 +234,19 @@ function LobbyChat({
                     style={{ width: '16px', height: '16px' }}
                     src={fightSvg}
                   />
-                </button>
-              </div>
-            </div>
-            <div className="d-flex px-3 flex-column align-items-start overflow-auto">
+                </ActionIcon>
+              </Flex>
+            </Flex>
+            <Flex direction="column" px="md" align="flex-start" className="overflow-auto">
               <ChatGroupedPlayersList
                 mode={mode}
                 players={presenceList}
                 displayMenu={displayMenu}
               />
-            </div>
-          </div>
-        </div>
-      </div>
+            </Flex>
+          </Flex>
+        </Box>
+      </Flex>
     </ChatContextMenu>
   );
 }

From 91703810ffff85407cc454d5da5774c2fbef1cfe Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:23:57 +0300
Subject: [PATCH 43/46] Convert lobby CreateGameDialog layout to Mantine (Phase
 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

row/col grids → Grid/Grid.Col (span responsive, gap="xs" — note this
build's Grid uses `gap`, not `gutter`); the Level/GameType toggle
<button>s → Mantine Button keeping the bg-orange/btn-outline-orange/
bg-gray design colors via conditional className (dropped btn/border-0/
cb-rounded/w-100; level buttons keep title for getByTitle, dropped the
Bootstrap-JS data-toggle tooltip); footer btn → Button color=cbSecondary;
h5 → Title order={5}. Kept the native range input (+ cb-range) and both
react-select widgets (OpponentSelect AsyncSelect + TaskChoice) untouched
for the future one-PR lib swap. Test wraps in MantineTestProvider.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../js/__tests__/CreateGameDialog.test.tsx    |  5 +-
 .../widgets/pages/lobby/CreateGameDialog.tsx  | 81 ++++++++++---------
 2 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/apps/codebattle/assets/js/__tests__/CreateGameDialog.test.tsx b/apps/codebattle/assets/js/__tests__/CreateGameDialog.test.tsx
index a01038ae9..fbf4eb147 100644
--- a/apps/codebattle/assets/js/__tests__/CreateGameDialog.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/CreateGameDialog.test.tsx
@@ -13,6 +13,7 @@ import CreateGameDialog from '../widgets/pages/lobby/CreateGameDialog';
 import reducers from '../widgets/slices';
 
 import { getTestData } from './helpers';
+import { MantineTestProvider } from './helpers/mantine';
 
 vi.mock('@/inertia/pageProps', () => {
   const pageProps = {
@@ -125,7 +126,9 @@ beforeAll(() => {
 
   vdom = (
     <Provider store={store}>
-      <CreateGameDialog hideModal={noop} />
+      <MantineTestProvider>
+        <CreateGameDialog hideModal={noop} />
+      </MantineTestProvider>
     </Provider>
   );
 });
diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.tsx
index d0c240894..e8c1a5a90 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback, memo } from 'react';
 
+import { Box, Button, Grid, Title } from '@mantine/core';
 import cn from 'classnames';
 import { camelizeKeys } from 'humps';
 import qs from 'qs';
@@ -215,7 +216,7 @@ interface LevelButtonGroupProps {
 const LevelButtonGroup = memo(({ value, onChange }: LevelButtonGroupProps) => {
   const getLevelClassName = (level: string) => {
     const isLevelActive = level === value;
-    return cn('btn border-0 bg-gray cb-rounded w-100', {
+    return cn('bg-gray', {
       'bg-orange': isLevelActive,
       'btn-outline-orange': !isLevelActive,
     });
@@ -227,22 +228,21 @@ const LevelButtonGroup = memo(({ value, onChange }: LevelButtonGroupProps) => {
   };
 
   return (
-    <div className="row px-sm-3 px-md-5 mx-n1">
+    <Grid gap="xs" px={{ base: 0, sm: 'md', md: 'xl' }}>
       {gameLevels.map((level) => (
-        <div key={level} className="col-6 col-sm-3 px-1 mb-2">
-          <button
-            type="button"
+        <Grid.Col key={level} span={{ base: 6, sm: 3 }}>
+          <Button
+            fullWidth
+            p={0}
             className={getLevelClassName(level)}
             onClick={() => changeGameLevel(level)}
-            data-toggle="tooltip"
-            data-placement="right"
             title={level}
           >
             <img alt={level} src={`/assets/images/levels/${level}.svg`} />
-          </button>
-        </div>
+          </Button>
+        </Grid.Col>
       ))}
-    </div>
+    </Grid>
   );
 });
 
@@ -254,26 +254,26 @@ interface GameTypeButtonGroupProps {
 const GameTypeButtonGroup = memo(({ value, onChange }: GameTypeButtonGroupProps) => {
   const getGameTypeClassName = (gameType: string) => {
     const isGameTypeActive = gameType === value;
-    return cn('btn cb-rounded w-100', {
-      'bg-orange text-white': isGameTypeActive,
+    return cn({
+      'bg-orange': isGameTypeActive,
       'btn-outline-orange': !isGameTypeActive,
     });
   };
 
   return (
-    <div className="row px-sm-3 px-md-5 mt-3 mx-n1">
+    <Grid gap="xs" mt="md" px={{ base: 0, sm: 'md', md: 'xl' }}>
       {gameTypeCodes.map((gameTypeCode) => (
-        <div key={gameTypeCode} className="col-12 col-md-4 px-1 mb-2">
-          <button
-            type="button"
+        <Grid.Col key={gameTypeCode} span={{ base: 12, md: 4 }}>
+          <Button
+            fullWidth
             className={getGameTypeClassName(gameTypeCode)}
             onClick={() => onChange(gameTypeCode)}
           >
             {gameTypeNames[gameTypeCode as keyof typeof gameTypeNames]}
-          </button>
-        </div>
+          </Button>
+        </Grid.Col>
       ))}
-    </div>
+    </Grid>
   );
 });
 
@@ -346,51 +346,63 @@ function CreateGameDialog({ hideModal }: CreateGameDialogProps) {
     <div className="cb-create-game">
       <div className="cb-create-game__section">
         <div className="cb-create-game__section-title">
-          <h5 className="mb-0">{i18n.t('Level')}</h5>
+          <Title order={5} mb={0}>
+            {i18n.t('Level')}
+          </Title>
         </div>
         <LevelButtonGroup value={gameLevel} onChange={switchGameLevel} />
       </div>
       <div className="cb-create-game__section">
         <div className="cb-create-game__section-title">
-          <h5 className="mb-0">{i18n.t('Game Type')}</h5>
+          <Title order={5} mb={0}>
+            {i18n.t('Game Type')}
+          </Title>
         </div>
         <GameTypeButtonGroup value={gameType} onChange={setGameType} />
       </div>
       <div className="cb-create-game__section">
         <div className="cb-create-game__section-title cb-create-game__section-title--with-value">
-          <h5 className="mb-0">{i18n.t('Time control')}</h5>
+          <Title order={5} mb={0}>
+            {i18n.t('Time control')}
+          </Title>
           <span className="cb-create-game__time-value">
             {i18n.t('%{count} min', { count: timeoutMinutes })}
           </span>
         </div>
-        <div className="px-sm-3 px-md-5 mt-3">
+        <Box mt="md" px={{ base: 0, sm: 'md', md: 'xl' }}>
           <input
             type="range"
             aria-label={i18n.t('Time control')}
-            className="form-range w-100 cb-range"
+            className="cb-range"
             value={timeoutMinutes}
             onChange={handleTimeoutChange}
             min={TIMEOUT_MIN}
             max={TIMEOUT_MAX}
             step="1"
             id="customRange3"
-            style={{ '--range-progress': `${timeoutPercent}%` } as React.CSSProperties}
+            style={
+              { width: '100%', '--range-progress': `${timeoutPercent}%` } as React.CSSProperties
+            }
           />
-        </div>
+        </Box>
       </div>
       {isInvite && (
         <div className="cb-create-game__section">
           <div className="cb-create-game__section-title">
-            <h5 className="mb-0">{i18n.t('Choose opponent')}</h5>
+            <Title order={5} mb={0}>
+              {i18n.t('Choose opponent')}
+            </Title>
           </div>
-          <div className="px-sm-3 px-md-5 mt-3">
+          <Box mt="md" px={{ base: 0, sm: 'md', md: 'xl' }}>
             <OpponentSelect setOpponent={setOpponent} opponent={opponent} />
-          </div>
+          </Box>
         </div>
       )}
       <div className="cb-create-game__section">
         <div className="cb-create-game__section-title">
-          <h5 className="mb-0">{i18n.t('Choose task by name or tags')}</h5>
+          <Title order={5} mb={0}>
+            {i18n.t('Choose task by name or tags')}
+          </Title>
         </div>
         <TaskChoice
           chosenTask={chosenTask}
@@ -401,14 +413,9 @@ function CreateGameDialog({ hideModal }: CreateGameDialogProps) {
         />
       </div>
       <div className="cb-create-game__footer">
-        <button
-          type="button"
-          className="btn btn-secondary cb-btn-secondary cb-rounded px-4"
-          onClick={createGame}
-          disabled={isInvite && !opponent}
-        >
+        <Button color="cbSecondary" px="lg" onClick={createGame} disabled={isInvite && !opponent}>
           {isInvite ? i18n.t('Create invite') : i18n.t('Create battle')}
-        </button>
+        </Button>
       </div>
     </div>
   );

From 292dc64e8f1f726949d412f6684f30e3c180d39b Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:26:12 +0300
Subject: [PATCH 44/46] Convert lobby LobbyWidget container to Mantine (Phase
 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create/Join/Continue/experimental game btns → Mantine Button
color=cbSecondary (removed the module-level cn className consts); the
controls Stack + bottom two-column layout → Flex/Box with responsive
direction/w/p props (col-12 col-lg-8/-4 → responsive w percentages);
dropped the text-white passthrough on the (forced-dark) CbModal
headers/bodies, kept cb-border-color. Completes the lobby page's own
React markup; remaining lobby lib-swap items (TaskChoice + the
CreateGameDialog react-selects) stay for the one-PR swap.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../js/widgets/pages/lobby/LobbyWidget.tsx    | 70 +++++++------------
 1 file changed, 26 insertions(+), 44 deletions(-)

diff --git a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
index 3711c940d..8c2173676 100644
--- a/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
+++ b/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 
-import cn from 'classnames';
+import { Box, Button, Flex } from '@mantine/core';
 import { useDispatch, useSelector } from 'react-redux';
 
 import Modal from '@/components/CbModal';
@@ -21,20 +21,6 @@ import LobbyChat from './LobbyChat';
 import SeasonProfilePanel from './SeasonProfilePanel';
 import { type LobbyTournament } from './TournamentCard';
 
-const createBtnClassName = cn('btn cb-rounded');
-
-const createBasicGameBtnClassName = cn(
-  createBtnClassName,
-  'btn-secondary cb-btn-secondary w-100 mr-2',
-);
-
-const joinGameBtnClassName = cn(createBtnClassName, 'btn-secondary cb-btn-secondary w-100');
-
-const createExperementalGameBtnClassName = cn(
-  createBtnClassName,
-  'btn-secondary cb-btn-secondary mt-2 pl-2',
-);
-
 interface CreateExperimentalGameButtonProps {
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   isOnline?: boolean;
@@ -47,15 +33,16 @@ function CreateExperimentalGameButton({
   type = 'css',
 }: CreateExperimentalGameButtonProps) {
   return (
-    <button
-      type="button"
-      className={createExperementalGameBtnClassName}
+    <Button
+      color="cbSecondary"
+      mt="sm"
+      pl="sm"
       data-type={type}
       onClick={onClick}
       disabled={!isOnline}
     >
       {type === 'css' ? i18n.t('Create a CSS Game') : i18n.t('Create a SQL Game')}
-    </button>
+    </Button>
   );
 }
 
@@ -65,9 +52,9 @@ interface JoinGameButtonProps {
 
 function JoinGameButton({ onClick }: JoinGameButtonProps) {
   return (
-    <button type="button" className={joinGameBtnClassName} onClick={onClick}>
+    <Button color="cbSecondary" fullWidth onClick={onClick}>
       {i18n.t('Join a battle')}
-    </button>
+    </Button>
   );
 }
 
@@ -79,14 +66,9 @@ interface CreateGameButtonProps {
 
 function CreateGameButton({ onClick, isOnline, isContinue }: CreateGameButtonProps) {
   return (
-    <button
-      type="button"
-      className={createBasicGameBtnClassName}
-      onClick={onClick}
-      disabled={!isOnline}
-    >
+    <Button color="cbSecondary" fullWidth mr="sm" onClick={onClick} disabled={!isOnline}>
       {isContinue ? i18n.t('Continue battle') : i18n.t('Create a battle')}
-    </button>
+    </Button>
   );
 }
 
@@ -192,10 +174,10 @@ function LobbyWidget() {
   return (
     <div>
       <Modal show={showCreateGameModal} onHide={handleCloseCreateGameModal}>
-        <Modal.Header className="cb-border-color text-white" closeButton>
+        <Modal.Header className="cb-border-color" closeButton>
           <Modal.Title>{i18n.t('Create a game')}</Modal.Title>
         </Modal.Header>
-        <Modal.Body className="text-white">
+        <Modal.Body>
           <CreateGameDialog hideModal={handleCloseCreateGameModal} />
         </Modal.Body>
       </Modal>
@@ -204,10 +186,10 @@ function LobbyWidget() {
         onHide={handleCloseJoinGameModal}
         dialogClassName="cb-join-game-modal"
       >
-        <Modal.Header className="cb-border-color text-white" closeButton>
+        <Modal.Header className="cb-border-color" closeButton>
           <Modal.Title>{i18n.t('Join a game')}</Modal.Title>
         </Modal.Header>
-        <Modal.Body className="text-white">
+        <Modal.Body>
           <ActiveGames
             games={activeGames as unknown as LobbyGame[]}
             currentUserId={currentUserId ?? 0}
@@ -228,15 +210,15 @@ function LobbyWidget() {
         user={currentUser as React.ComponentProps<typeof SeasonProfilePanel>['user']}
         nearbyUsers={nearbyUsers as number[]}
         controls={
-          <div className="d-flex flex-column mt-2 cb-lobby-controls">
-            <div className="d-flex w-100 cb-lobby-controls-primary">
+          <Flex direction="column" mt="sm" className="cb-lobby-controls">
+            <Flex w="100%" className="cb-lobby-controls-primary">
               <CreateGameButton
                 onClick={handleCreateGameBtnClick}
                 isOnline={online}
                 isContinue={!!activeGame}
               />
               <JoinGameButton onClick={handleJoinGameBtnClick} />
-            </div>
+            </Flex>
             {!hideExperimentGamesButtons && (
               <>
                 <CreateExperimentalGameButton
@@ -251,24 +233,24 @@ function LobbyWidget() {
                 />
               </>
             )}
-          </div>
+          </Flex>
         }
       />
 
-      <div className="d-flex flex-column flex-lg-row p-0 cb-lobby-bottom-layout">
-        <div className="col-12 col-lg-8 p-0 pr-lg-2">
+      <Flex direction={{ base: 'column', lg: 'row' }} p={0} className="cb-lobby-bottom-layout">
+        <Box w={{ base: '100%', lg: '66.6667%' }} p={0} pr={{ base: 0, lg: 'sm' }}>
           <LobbyChat
             setOpenActionModalShowing={setActionModalShowing}
             presenceList={presenceList as React.ComponentProps<typeof LobbyChat>['presenceList']}
             inputRef={chatInputRef}
           />
-        </div>
-        <div className="col-12 col-lg-4 p-0 pl-lg-2">
-          <div className="mt-2">
+        </Box>
+        <Box w={{ base: '100%', lg: '33.3333%' }} p={0} pl={{ base: 0, lg: 'sm' }}>
+          <Box mt="sm">
             <Announcement />
-          </div>
-        </div>
-      </div>
+          </Box>
+        </Box>
+      </Flex>
     </div>
   );
 }

From ffaffc36e2ac8011a6d7ee84af64ea22e79d7737 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:27:07 +0300
Subject: [PATCH 45/46] Log lobby
 TournamentModal/LobbyChat/CreateGameDialog/LobbyWidget conversions (Phase 2)

Lobby React markup is fully converted; only the deferred react-select
lib swap remains. Update the Phase-2 status row and lobby section.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/codebattle/assets/MANTINE_MIGRATION.md | 55 ++++++++++++++++++---
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/apps/codebattle/assets/MANTINE_MIGRATION.md b/apps/codebattle/assets/MANTINE_MIGRATION.md
index c2ffabd8d..004ebc5b4 100644
--- a/apps/codebattle/assets/MANTINE_MIGRATION.md
+++ b/apps/codebattle/assets/MANTINE_MIGRATION.md
@@ -24,7 +24,7 @@ components converted — see the progress log under Phase 2); Phase 3 is
 |------|------|--------|
 | 0 | Infra: Mantine deps, PostCSS, CSS-layer coexistence, theme, `MantineProvider` on all roots | ✅ done |
 | 1 | Replace `react-bootstrap` **components** with Mantine; remove `react-bootstrap` dep | ✅ done |
-| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | 🔄 in progress — shared leaf components done; pages started (`settings`, `profile` done) |
+| 2 | Convert Bootstrap **utility classes** in the ~244 React files to idiomatic Mantine | 🔄 in progress — shared leaf components done; pages: `settings`, `profile`, `lobby` (React markup) done |
 | 3 | Migrate `.heex` templates; fully remove Bootstrap CSS + `bootstrap` dep | ⬜ planned (out of current scope) |
 
 ## Coexistence model (how Bootstrap + Mantine live together)
@@ -408,7 +408,10 @@ uppercase/bold, fill the width (`grow`), and join the bordered content box below
 Also: heatmap `NativeSelect` may add a chevron over the native arrow (as in
 `SeasonLeaderboard`); the avatar corner radius (was `rounded`, now inline `sm`).
 
-In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
+Done (React markup): **`lobby`** page (large — ~26 files, converted per-leaf).
+All lobby React components are on Mantine; the **only** remaining lobby work is
+the deferred react-select lib swap (`TaskChoice` + `CreateGameDialog`'s
+`OpponentSelect`). Per-leaf log below.
 - Done: `LiveTournaments` + `CompletedTournaments` (twin tournament-list
   sections) — `table table-striped` → `<Table striped>` in a `<Box>` that keeps
   the responsive `d-none d-md-block` as `display={{ base:'none', md:'block' }}`;
@@ -508,17 +511,53 @@ In progress: **`lobby`** page (large — ~26 files, converting per-leaf).
   `Collapse` prop is **`expanded`**, not `in` (same as `AccordeonBox`). Removes
   this component's dependency on Bootstrap's JS collapse plugin; Mantine adds a
   chevron the Bootstrap accordion didn't have (QA). No test.
-- **Deferred (react-select):** `TaskChoice` uses react-select — leave with
-  `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` for the one-PR lib swap.
-- **Remaining lobby leaves/containers (still Bootstrap):** `LobbyChat`,
-  `CreateGameDialog`, `LobbyWidget` (container), `TournamentModal`.
-  (`CreateGameDialog` has a test — wrap in `MantineTestProvider` when converted.)
+- Done: `TournamentModal` — title/body/footer → `Flex`/`Text`/`Title` + style
+  props; the footer "Open Tournament" anchor (`btn` + an invalid `disabled`-attr
+  hack + `cn`) → `<Button component="a" color="cbSecondary" disabled={isUpcoming}>`
+  (proper Mantine disabled state); body `position-relative` → `style` prop. Left
+  the `TournamentPreviewPanel` / `TournamentDescription` **passthrough classNames**
+  (`d-flex … w-100 h-100 p-3`) as documented leftovers — both already-converted
+  leaves only accept `className`, applied to a `Box`.
+- Done: `LobbyChat` — card/columns/sidebar → `Flex`/`Box` + style props
+  (responsive `direction` for the column→row breakpoint); the two icon-only
+  action `btn`s → `<ActionIcon variant="transparent">` (envelope gets `c="white"`
+  in place of the FontAwesome `text-white`); online-count `<p>` → `<Text>`. Kept
+  all `cb-lobby-*`/`cb-players-container`/`cb-border-color` design classes and the
+  responsive `rounded-*`/`h-sm-100`/`pb-sm-4` utilities. `ChatUserInfo`'s `mb-1`
+  passthrough removed by wrapping each row in `<Box mb="xs">`; **left `Messages`'
+  `text-white` passthrough** (theme default text isn't pure white — clean when
+  `Messages`/`ChatUserInfo` are handled).
+- Done: `CreateGameDialog` (**layout only**) — `row`/`col` grids → `Grid`/
+  `Grid.Col` (⚠️ this build's `Grid` gap prop is **`gap`**, not `gutter`); the
+  Level/GameType toggle `<button>`s → Mantine `<Button>` keeping the
+  `bg-orange`/`btn-outline-orange`/`bg-gray` design colors via conditional
+  `className` (dropped `btn`/`border-0`/`cb-rounded`/`w-100`; level buttons keep
+  `title` for the test's `getByTitle`, dropped the Bootstrap-JS `data-toggle`
+  tooltip); footer `btn` → `<Button color="cbSecondary">`; `h5` → `<Title
+  order={5}>`. **Kept the native range input** (+ `cb-range`, same reason as
+  settings `RangeInput`) and **both react-select widgets** — `OpponentSelect`'s
+  `AsyncSelect` and `TaskChoice` — untouched for the one-PR lib swap.
+  `CreateGameDialog.test` (10 tests) now wraps in `MantineTestProvider`.
+- Done: `LobbyWidget` (container) — Create/Join/Continue/experimental game
+  buttons → `<Button color="cbSecondary">` (removed the module-level `cn`
+  className consts); controls `Stack` + bottom two-column layout → `Flex`/`Box`
+  with responsive `direction`/`w`/`p` (`col-12 col-lg-8`/`-4` → responsive `w`
+  percentages); dropped the `text-white` passthrough on the forced-dark `CbModal`
+  headers/bodies (kept `cb-border-color`). No test.
+- **Deferred (react-select) — the only lobby work left:** `TaskChoice` **and**
+  `CreateGameDialog`'s `OpponentSelect` (`AsyncSelect`) both use react-select —
+  swap together with `LanguagePickerView` / `PlayerPicker` / `ReportsPanel` in
+  the one-PR lib swap. **All other lobby React markup is converted.**
 
 ⚠️ QA (lobby cluster): the games-table Continue/copy/cancel row (Group vs the old
 attached `btn-group`); the **cancel button still hidden until you hover the game
 row/card** (`btn-hover`); the `TournamentCard` white card's text stays dark on
 white (elements inherit color — no explicit dark text was set); Fight button is
-now brand orange (was `btn-orange`, same orange).
+now brand orange (was `btn-orange`, same orange). Also new this pass: the
+`CodebattleLeagueDescription` accordion now shows a Mantine chevron (was none);
+the `CreateGameDialog` Level/GameType button tiles are Mantine `<Button>`s
+carrying the orange design classes (confirm active/inactive states + level-icon
+tile sizing); the season-panel action buttons + `TournamentListItem` info icon.
 
 ### Conversion vocabulary
 

From edf2f9213dd80baa63c7e56d754523495103b72b Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Sat, 8 Aug 2026 00:29:26 +0300
Subject: [PATCH 46/46] Wrap LobbyLoading shell test in MantineTestProvider
 (Phase 2)

Fixes a pre-existing suite failure: the "lobby loading shell" case
rendered the (already Mantine-converted) LobbyLoading without a
MantineProvider. Full frontend suite now green (166 tests).

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../assets/js/__tests__/PresentationalComponents.test.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx b/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
index 96d3ddcce..a9ab57349 100644
--- a/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
+++ b/apps/codebattle/assets/js/__tests__/PresentationalComponents.test.tsx
@@ -59,7 +59,11 @@ describe('presentational components', () => {
   });
 
   test('renders the lobby loading shell', () => {
-    const { container } = render(<LobbyLoading />);
+    const { container } = render(
+      <MantineTestProvider>
+        <LobbyLoading />
+      </MantineTestProvider>,
+    );
 
     expect(screen.getByRole('status')).toHaveTextContent('Loading...');
     expect(screen.getByText('Preparing your arena')).toBeInTheDocument();