Mantine migration

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';
@@ -4635,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);

apps/codebattle/assets/js/__tests__/ChatMessageDelete.test.tsx

@@ -5,22 +5,26 @@ 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 () => {
   const user = userEvent.setup();
   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' }));

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

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');
 });

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', 'Сегодня'],
@@ -66,7 +68,9 @@ test('localizes the empty invites state', () => {
 
   render(
     <Provider store={store}>
-      <InvitesList list={[]} currentUserId={1} />
+      <MantineTestProvider>
+        <InvitesList list={[]} currentUserId={1} />
+      </MantineTestProvider>
     </Provider>,
   );
 
@@ -75,11 +79,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();
@@ -88,7 +94,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();

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();
   });
 });