fix

Author: vtm9

apps/codebattle/assets/css/style.scss

@@ -1345,23 +1345,6 @@ a {
   width: 25px;
 }
 
-.cb-sort-arrow {
-  height: 0;
-  width: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-
-  &.asc {
-    border-bottom: 5px solid #666;
-    margin-bottom: 3px;
-  }
-
-  &.desc {
-    border-top: 5px solid #666;
-    padding-bottom: 2px;
-  }
-}
-
 .cb-private-text {
   color: var(--indigo);
 }
@@ -1409,23 +1392,6 @@ a {
   cursor: pointer;
 }
 
-.sort-arrows:before,
-.sort-arrows:after {
-  border: 5px solid transparent;
-  content: '';
-  display: block;
-}
-
-.sort-arrows:before {
-  border-bottom-color: #666;
-}
-
-.sort-arrows:after {
-  border-top-color: #666;
-  margin-top: 2px;
-  margin-bottom: -5px;
-}
-
 .x-bottom-0 {
   bottom: 0;
 }
@@ -3285,6 +3251,19 @@ a.cb-text-light:hover {
   max-width: 33.333%;
 }
 
+.cb-lobby-chat-card .text-muted {
+  color: #a6a6b3 !important;
+}
+
+.cb-lobby-chat-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+
 .cb-season-actions .btn {
   flex: 1 1 0;
   min-width: 0;
@@ -3688,7 +3667,7 @@ a.cb-text-light:hover {
     font-size: 0.9rem;
   }
 
-  .cb-messages-list > div {
+  .cb-messages-list > li {
     padding: 0.3rem 0.45rem;
     margin-bottom: 0.1rem !important;
     border-radius: 6px;

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

@@ -9,6 +9,7 @@ import InfoMessage from '../widgets/components/InfoMessage';
 import Loading from '../widgets/components/Loading';
 import LobbyLoading from '../widgets/pages/lobby/LobbyLoading';
 import MessageTimestamp from '../widgets/components/MessageTimestamp';
+import Messages from '../widgets/components/Messages';
 import PlayerLoading from '../widgets/components/PlayerLoading';
 import SystemMessage from '../widgets/components/SystemMessage';
 import Timer from '../widgets/components/Timer';
@@ -17,6 +18,10 @@ vi.mock('../widgets/utils/useTimer', () => ({
   default: () => ['01:02:03', 3723],
 }));
 
+vi.mock('../widgets/utils/useStayScrolled', () => ({
+  default: () => ({ stayScrolled: vi.fn(), scrollBottom: vi.fn() }),
+}));
+
 describe('presentational components', () => {
   test('renders a game level badge', () => {
     render(<GameLevelBadge level="easy" />);
@@ -73,6 +78,16 @@ describe('presentational components', () => {
     expect(screen.getByText(/\d{2}:\d{2} [AP]M/)).toHaveClass('text-muted');
   });
 
+  test('renders chat messages as semantic list items', () => {
+    render(<Messages messages={[{ id: 1, text: 'Connected', type: 'system' }]} />);
+
+    const list = screen.getByRole('list');
+
+    expect(list).toHaveClass('list-unstyled');
+    expect(list.children).toHaveLength(1);
+    expect(list.firstElementChild).toHaveRole('listitem');
+  });
+
   test('renders system message status styling', () => {
     render(<SystemMessage text="Unable to join the game" meta={{ status: 'error' }} />);
 

apps/codebattle/assets/js/app.ts

@@ -96,7 +96,6 @@ const mainChannelRoot = document.getElementById('main-channel-root');
 const tournamentThreejsStreamRoot = document.getElementById('tournament-threejs-stream-root');
 const tournamentStreamAdminRoot = document.getElementById('tournament-stream-admin-root');
 const lobbyRoot = document.getElementById('lobby-root');
-const ratingList = document.getElementById('rating-list');
 const registrationRoot = document.getElementById('registration');
 const settingsRoot = document.getElementById('settings');
 const soundToggleRoot = document.getElementById('sound-toggle-root');
@@ -118,7 +117,6 @@ const primaryWidgetRoots = [
   gameMlRoot,
   heatmapRoot,
   lobbyRoot,
-  ratingList,
   userPageRoot,
   settingsRoot,
   registrationRoot,
@@ -150,15 +148,13 @@ if (primaryWidgetRoots.some(Boolean)) {
       renderTournamentStreamAdminPage,
       renderTournamentThreejsStreamPage,
       renderUserPage,
-      renderUsersRating,
     }) => {
       if (adminConnectionsRoot) renderAdminPage(adminConnectionsRoot);
       if (gameWidgetRoot) renderGameWidget(gameWidgetRoot);
       if (gameThreejsRoot) renderGameThreejsPage(gameThreejsRoot);
       if (gameMlRoot) renderGameMlPage(gameMlRoot);
       if (heatmapRoot) renderHeatmapWidget(heatmapRoot);
       if (lobbyRoot) renderLobby(lobbyRoot);
-      if (ratingList) renderUsersRating(ratingList);
       if (userPageRoot) renderUserPage(userPageRoot);
       if (settingsRoot) renderSettingPage(settingsRoot);
       if (registrationRoot) renderRegistrationPage(registrationRoot);

apps/codebattle/assets/js/widgets/App.tsx

@@ -68,7 +68,6 @@ const InvitesContainer = React.lazy(() => import('./components/InvitesContainer'
 const MainChannelContainer = React.lazy(() => import('./components/MainChannelContainer'));
 const LobbyWidget = React.lazy(() => import('./pages/lobby'));
 const OnlineContainer = React.lazy(() => import('./components/OnlineContainer'));
-const RatingList = React.lazy(() => import('./pages/rating'));
 const Registration = React.lazy(() => import('./pages/registration'));
 const RoomWidget = React.lazy(() => import('./pages/RoomWidget'));
 const ThreejsGamePage = React.lazy(() => import('./pages/game/ThreejsGamePage'));
@@ -189,18 +188,6 @@ export function Lobby() {
   );
 }
 
-export function UsersRating() {
-  return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <Suspense>
-          <RatingList />
-        </Suspense>
-      </PersistGate>
-    </Provider>
-  );
-}
-
 export function TournamentsSchedulePage() {
   return (
     <Provider store={store}>

apps/codebattle/assets/js/widgets/components/Messages.tsx

@@ -129,7 +129,7 @@ function Messages({
   const messageClassName = cn(
     className,
     'overflow-auto pt-0 pl-3 pr-2',
-    'position-relative cb-messages-list flex-grow-1',
+    'position-relative cb-messages-list flex-grow-1 list-unstyled',
   );
 
   if (disabled) {
@@ -160,21 +160,22 @@ function Messages({
           const key = getKey(id, time, name, messages.length - index);
 
           return (
-            <Message
-              id={id}
-              name={name}
-              userId={userId}
-              currentUserId={currentUserId}
-              text={text}
-              key={key}
-              type={type}
-              time={time}
-              meta={meta}
-              displayMenu={displayMenu}
-              onBanUser={onBanUser}
-              onDeleteMessage={onDeleteMessage}
-              canDeleteAny={canDeleteAny}
-            />
+            <li key={key}>
+              <Message
+                id={id}
+                name={name}
+                userId={userId}
+                currentUserId={currentUserId}
+                text={text}
+                type={type}
+                time={time}
+                meta={meta}
+                displayMenu={displayMenu}
+                onBanUser={onBanUser}
+                onDeleteMessage={onDeleteMessage}
+                canDeleteAny={canDeleteAny}
+              />
+            </li>
           );
         })}
       </ul>

apps/codebattle/assets/js/widgets/index.tsx

@@ -21,7 +21,6 @@ import {
   TournamentPage,
   TournamentPlayerPage,
   UserPage,
-  UsersRating,
   AdminPage,
 } from './App';
 
@@ -64,7 +63,5 @@ export const renderTournamentPlayerPage = (domElement: HTMLElement) =>
   createRoot(domElement).render(<TournamentPlayerPage />);
 export const renderUserPage = (domElement: HTMLElement) =>
   createRoot(domElement).render(<UserPage />);
-export const renderUsersRating = (domElement: HTMLElement) =>
-  createRoot(domElement).render(<UsersRating />);
 export const renderAdminPage = (domElement: HTMLElement) =>
   createRoot(domElement).render(<AdminPage />);

apps/codebattle/assets/js/widgets/middlewares/Users.ts

@@ -1,6 +1,4 @@
 import { camelizeKeys } from 'humps';
-import moment from 'moment';
-import qs from 'qs';
 
 import { actions } from '../slices';
 
@@ -72,74 +70,4 @@ export const sendPremiumRequest =
     }
   };
 
-const periodToTimeUnit = {
-  weekly: 'week',
-  monthly: 'month',
-};
-
-const getDateByPeriod = (period: string) => {
-  if (period === 'total') {
-    return null;
-  }
-  return moment()
-    .startOf(periodToTimeUnit[period as keyof typeof periodToTimeUnit] as moment.unitOfTime.StartOf)
-    .utc()
-    .format('YYYY-MM-DD');
-};
-
-interface UsersRatingFilter {
-  name?: string;
-  period: string;
-  withBots?: boolean;
-}
-
-interface UsersRatingSort {
-  attribute: string;
-  direction: string;
-}
-
-// Guards against stale responses: the rating search fires on every keystroke
-// with no debounce, so a slow response for a short prefix (which ILIKE-matches
-// many users) could resolve after the final query and clobber it with
-// irrelevant results. Only the latest request's response is applied.
-let latestRatingRequestId = 0;
-
-export const getUsersRatingPage =
-  (
-    { name, period, withBots }: UsersRatingFilter,
-    { attribute, direction }: UsersRatingSort,
-    page: number,
-    pageSize: number,
-  ) =>
-  (dispatch: any) => {
-    const queryParamsString = qs.stringify({
-      page,
-      page_size: pageSize,
-      s: `${attribute}+${direction}`,
-      q: {
-        name_ilike: name,
-      },
-      date_from: getDateByPeriod(period),
-      with_bots: withBots,
-    });
-
-    latestRatingRequestId += 1;
-    const requestId = latestRatingRequestId;
-
-    requestJson(`/api/v1/users?${queryParamsString}`)
-      .then((data: any) => {
-        if (requestId !== latestRatingRequestId) {
-          return;
-        }
-        dispatch(actions.updateUsersRatingPage(camelizeKeys(data)));
-        dispatch(actions.finishStoreInit());
-      })
-      .catch((error: any) => {
-        if (requestId !== latestRatingRequestId) {
-          return;
-        }
-        dispatch(actions.setError(error));
-      });
-  };
-
 export default loadUserStats;

apps/codebattle/assets/js/widgets/pages/admin/AdminWidget.tsx

@@ -79,7 +79,6 @@ const getPageLabel = (path?: string | null) => {
 
   if (/^\/e\//.test(p)) return 'Event';
 
-  if (p === '/users') return 'Rating';
   if (p === '/users/new') return 'Sign Up';
   if (/^\/users\/[^/]+/.test(p)) return 'Profile';