@scrabble-solver/scrabble-solver 2.18.1 → 2.18.3

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-typescript","duration":167919,"timestamp":15741743485,"id":13,"parentId":1,"tags":{},"startTime":1786879882182,"traceId":"09ff88835bed4614"},{"name":"run-webpack","duration":6553601,"timestamp":15741913668,"id":15,"parentId":1,"tags":{},"startTime":1786879882352,"traceId":"09ff88835bed4614"},{"name":"static-check","duration":184131,"timestamp":15748541724,"id":2019,"parentId":1,"tags":{},"startTime":1786879888980,"traceId":"09ff88835bed4614"},{"name":"static-generation","duration":249410,"timestamp":15748736408,"id":2037,"parentId":1,"tags":{},"startTime":1786879889175,"traceId":"09ff88835bed4614"},{"name":"collect-build-traces","duration":4410264,"timestamp":15748726538,"id":2034,"parentId":1,"tags":{},"startTime":1786879889165,"traceId":"09ff88835bed4614"},{"name":"telemetry-flush","duration":21,"timestamp":15753138117,"id":2044,"parentId":1,"tags":{},"startTime":1786879893576,"traceId":"09ff88835bed4614"},{"name":"next-build","duration":11637473,"timestamp":15741500668,"id":1,"tags":{"buildMode":"default","version":"16.3.1","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1786879881939,"traceId":"09ff88835bed4614"}]
+[{"name":"run-typescript","duration":160243,"timestamp":6454978890,"id":13,"parentId":1,"tags":{},"startTime":1787605800486,"traceId":"f92ac34b43b8b857"},{"name":"run-webpack","duration":5760453,"timestamp":6455141586,"id":15,"parentId":1,"tags":{},"startTime":1787605800649,"traceId":"f92ac34b43b8b857"},{"name":"static-check","duration":171530,"timestamp":6460973542,"id":2106,"parentId":1,"tags":{},"startTime":1787605806481,"traceId":"f92ac34b43b8b857"},{"name":"static-generation","duration":249530,"timestamp":6461155014,"id":2124,"parentId":1,"tags":{},"startTime":1787605806662,"traceId":"f92ac34b43b8b857"},{"name":"collect-build-traces","duration":4270405,"timestamp":6461145430,"id":2121,"parentId":1,"tags":{},"startTime":1787605806652,"traceId":"f92ac34b43b8b857"},{"name":"telemetry-flush","duration":19,"timestamp":6465417121,"id":2131,"parentId":1,"tags":{},"startTime":1787605810924,"traceId":"f92ac34b43b8b857"},{"name":"next-build","duration":10674125,"timestamp":6454743019,"id":1,"tags":{"buildMode":"default","version":"16.3.2","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1787605800250,"traceId":"f92ac34b43b8b857"}]

package/AGENTS.md

@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

package/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.18.1",
+  "version": "2.18.3",
   "description": "Scrabble Solver web app: free word finder and board solver for Scrabble, Super Scrabble, Literaki, and more.",
   "keywords": [
     "scrabble",
@@ -45,7 +45,9 @@
     "build": "bun run generate-scss-types && env-cmd next build --webpack",
     "clean": "rimraf --glob .next/ 'src/**/*.module.scss.d.ts'",
     "debug": "NODE_OPTIONS='--inspect' next dev --webpack",
-    "dev": "concurrently -n scss,next 'bun scripts/generate-scss-types.ts --watch' 'env-cmd next dev --webpack'",
+    "dev": "bun run --parallel --no-orphans 'dev:*'",
+    "dev:next": "env-cmd next dev --webpack",
+    "dev:scss": "bun run generate-scss-types --watch",
     "generate-scss-types": "bun scripts/generate-scss-types.ts",
     "start": "env-cmd next start -p 3333",
     "test": "bun test --timeout 180000 src",
@@ -55,18 +57,18 @@
     "@floating-ui/react": "^0.27.20",
     "@kamilmielnik/gaddag": "^2.0.0",
     "@reduxjs/toolkit": "^2.12.0",
-    "@scrabble-solver/configs": "^2.18.1",
-    "@scrabble-solver/constants": "^2.18.1",
-    "@scrabble-solver/dictionaries": "^2.18.1",
-    "@scrabble-solver/logger": "^2.18.1",
-    "@scrabble-solver/solver": "^2.18.1",
-    "@scrabble-solver/types": "^2.18.1",
-    "@scrabble-solver/word-definitions": "^2.18.1",
+    "@scrabble-solver/configs": "^2.18.3",
+    "@scrabble-solver/constants": "^2.18.3",
+    "@scrabble-solver/dictionaries": "^2.18.3",
+    "@scrabble-solver/logger": "^2.18.3",
+    "@scrabble-solver/solver": "^2.18.3",
+    "@scrabble-solver/types": "^2.18.3",
+    "@scrabble-solver/word-definitions": "^2.18.3",
     "classnames": "^2.5.1",
     "env-cmd": "^11.0.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^16.3.1",
+    "next": "^16.3.2",
     "normalize.css": "^8.0.1",
     "react": "^19.2.8",
     "react-cool-onclickoutside": "^1.7.0",
@@ -92,7 +94,7 @@
     "@types/react-modal": "^3.16.3",
     "@types/react-portal": "^4.0.7",
     "postcss": "^8.5.26",
-    "sass": "^1.102.0"
+    "sass": "^1.103.1"
   },
-  "gitHead": "abd1636f7e2235d0ee06dbf6197de46b703feb44"
+  "gitHead": "a1b4a5735a1a48fbb5dfe7f214a7df2158309202"
 }

package/public/llms.txt

@@ -1,6 +1,6 @@
 # Scrabble Solver
 
-> Free and open-source analysis tool for Scrabble, Super Scrabble, Scrabble Duel, Letter League, Crossplay, Literaki, and Kelimelik. Quickly finds top-scoring words for a given board and rack in English, French, German, Persian, Polish, Romanian, Spanish, and Turkish.
+> Free and open-source analysis tool for Scrabble, Super Scrabble, Scrabble Duel, Letter League, Crossplay, Literaki, Kelimelik, and Wyrazy. Quickly finds top-scoring words for a given board and rack in English, French, German, Persian, Polish, Romanian, Spanish, and Turkish.
 
 Scrabble Solver is a single-page web app. Enter the board state and your tiles to get every legal move ranked by score, check whether a word is allowed in the selected language's dictionary, and look up word definitions. Once a dictionary is cached, solving also works offline.
 

package/src/components/Board/Board.tsx

@@ -26,7 +26,7 @@ import styles from './Board.module.scss';
 import { BoardPure } from './BoardPure';
 import { Actions, InputPrompt } from './components';
 import { useBoardStyle, useFloatingActions, useFloatingFocus, useFloatingInputPrompt, useGrid } from './hooks';
-import { selectReachableCells, selectRowsWithCandidate } from './selectors';
+import { selectHoveredWordCells, selectReachableCells, selectRowsWithCandidate } from './selectors';
 
 interface Props {
   className?: string;
@@ -39,6 +39,7 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
   const config = useTypedSelector(selectConfig);
   const rows = useTypedSelector(selectRowsWithCandidate);
   const reachableCells = useTypedSelector(selectReachableCells);
+  const hoveredWordCells = useTypedSelector(selectHoveredWordCells);
   const inputMode = useTypedSelector(selectInputMode);
   const cellFilters = useTypedSelector(selectCellFilters);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
@@ -148,6 +149,7 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
         config={config}
         direction={LOCALE_FEATURES[locale].direction}
         hoveredCharacter={hoveredCharacter}
+        hoveredWordCells={hoveredWordCells}
         inputRefs={inputRefs}
         locale={locale}
         reachableCells={reachableCells}

package/src/components/Board/BoardPure.tsx

@@ -33,6 +33,7 @@ interface Props {
   config: Config;
   direction: TextDirection;
   hoveredCharacter: string | null;
+  hoveredWordCells: boolean[][] | null;
   inputRefs: RefObject<HTMLInputElement | null>[][];
   locale: Locale;
   reachableCells: boolean[][] | null;
@@ -55,6 +56,7 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
       direction,
       cellFilters,
       hoveredCharacter,
+      hoveredWordCells,
       inputRefs,
       locale,
       reachableCells,
@@ -118,25 +120,29 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
             {getCoordinate(y, showCoordinates === 'original' ? 'number' : 'letter')}
           </div>
 
-          {cells.map((cell, x) => (
-            <Cell
-              cell={cell}
-              cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
-              cellLeft={x > 0 ? rows[y][x - 1] : undefined}
-              cellRight={x < rows[y].length - 1 ? rows[y][x + 1] : undefined}
-              cellTop={y > 0 ? rows[y - 1][x] : undefined}
-              config={config}
-              inputRef={inputRefs[y][x]}
-              isHoverMatch={isHoverMatch(cell, hoveredCharacter)}
-              isReachable={reachableCells ? reachableCells[y][x] : true}
-              key={x}
-              locale={locale}
-              showCoordinates={showCoordinates}
-              translate={translate}
-              onChange={onChange}
-              onFocus={onFocus}
-            />
-          ))}
+          {cells.map((cell, x) => {
+            const isHoveredWord = hoveredWordCells ? hoveredWordCells[y][x] : false;
+
+            return (
+              <Cell
+                cell={cell}
+                cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
+                cellLeft={x > 0 ? rows[y][x - 1] : undefined}
+                cellRight={x < rows[y].length - 1 ? rows[y][x + 1] : undefined}
+                cellTop={y > 0 ? rows[y - 1][x] : undefined}
+                config={config}
+                highlighted={cell.isCandidate() || isHoverCharacter(cell, hoveredCharacter) || isHoveredWord}
+                inputRef={inputRefs[y][x]}
+                isReachable={reachableCells ? reachableCells[y][x] : true}
+                key={x}
+                locale={locale}
+                showCoordinates={showCoordinates}
+                translate={translate}
+                onChange={onChange}
+                onFocus={onFocus}
+              />
+            );
+          })}
         </Fragment>
       ))}
     </div>
@@ -145,7 +151,7 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
 
 export const BoardPure = memo(BoardPureBase);
 
-function isHoverMatch(cell: CellModel, hoveredCharacter: string | null): boolean {
+function isHoverCharacter(cell: CellModel, hoveredCharacter: string | null): boolean {
   if (cell.tile.character === EMPTY_CELL || hoveredCharacter === null) {
     return false;
   }

package/src/components/Board/components/Cell/Cell.tsx

@@ -28,8 +28,8 @@ interface Props {
   cellTop?: CellModel;
   className?: string;
   config: Config;
+  highlighted?: boolean;
   inputRef: RefObject<HTMLInputElement | null>;
-  isHoverMatch: boolean;
   isReachable?: boolean;
   locale: Locale;
   showCoordinates: ShowCoordinates;
@@ -39,7 +39,7 @@ interface Props {
 }
 
 /**
- * Must not subscribe to the store - it can read the story only in event handlers.
+ * Must not subscribe to the store - it can read the store only in event handlers
  */
 const CellBase: FunctionComponent<Props> = ({
   cell,
@@ -49,8 +49,8 @@ const CellBase: FunctionComponent<Props> = ({
   cellTop,
   className,
   config,
+  highlighted,
   inputRef,
-  isHoverMatch,
   isReachable = true,
   locale,
   showCoordinates,
@@ -116,7 +116,7 @@ const CellBase: FunctionComponent<Props> = ({
         [styles.unreachable]: !isReachable,
       })}
       character={isEmpty ? undefined : tile.character}
-      highlighted={cell.isCandidate() || isHoverMatch}
+      highlighted={highlighted}
       inputRef={inputRef}
       isBlank={tile.isBlank}
       isValid={isValid}

package/src/components/Board/lib.test.ts

@@ -0,0 +1,106 @@
+import { Board, Cell, Result, Tile } from '@scrabble-solver/types';
+
+import { getReachableCellsFromResults, getWordCells } from './lib';
+
+describe('getReachableCellsFromResults', () => {
+  const board = Board.fromStringArray(['     ', '     ', '  i  ', '     ', '     ']);
+
+  it('marks only cells with tiles as reachable when there are no results', () => {
+    expect(getReachableCellsFromResults(board, [])).toEqual([
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, true, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+
+  it('marks cells covered by any result as reachable and all other empty cells as unreachable', () => {
+    const results = [
+      createResult([createPlacedCell('q', 1, 2), board.rows[2][2]]),
+      createResult([createPlacedCell('q', 2, 1), board.rows[2][2]]),
+    ];
+
+    expect(getReachableCellsFromResults(board, results)).toEqual([
+      [false, false, false, false, false],
+      [false, false, true, false, false],
+      [false, true, true, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+});
+
+describe('getWordCells', () => {
+  const board = Board.fromStringArray(['     ', ' cat ', ' o   ', ' d  x', '     ']);
+
+  it('marks the cells of a horizontal word', () => {
+    expect(getWordCells(board, { direction: 'horizontal', word: 'cat', x: 1, y: 1 })).toEqual([
+      [false, false, false, false, false],
+      [false, true, true, true, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+
+  it('marks the cells of a vertical word', () => {
+    expect(getWordCells(board, { direction: 'vertical', word: 'cod', x: 1, y: 1 })).toEqual([
+      [false, false, false, false, false],
+      [false, true, false, false, false],
+      [false, true, false, false, false],
+      [false, true, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+
+  it('stops at the board edge', () => {
+    expect(getWordCells(board, { direction: 'horizontal', word: 'x', x: 4, y: 3 })).toEqual([
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, true],
+      [false, false, false, false, false],
+    ]);
+  });
+
+  it('marks the run of cells regardless of the word length in characters', () => {
+    const digraphBoard = new Board({
+      rows: [
+        [createFilledCell('ch', 0, 0), createFilledCell('e', 1, 0), createEmptyCell(2, 0)],
+        [createEmptyCell(0, 1), createEmptyCell(1, 1), createEmptyCell(2, 1)],
+      ],
+    });
+
+    expect(getWordCells(digraphBoard, { direction: 'horizontal', word: 'che', x: 0, y: 0 })).toEqual([
+      [true, true, false],
+      [false, false, false],
+    ]);
+  });
+
+  it('marks nothing when the starting cell is empty', () => {
+    expect(getWordCells(board, { direction: 'horizontal', word: 'gone', x: 0, y: 4 })).toEqual([
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+});
+
+function createResult(cells: Cell[]): Result {
+  return new Result({ cells, collisions: [], id: 0, points: 0 });
+}
+
+function createPlacedCell(character: string, x: number, y: number): Cell {
+  return new Cell({ isEmpty: true, tile: new Tile({ character }), x, y });
+}
+
+function createFilledCell(character: string, x: number, y: number): Cell {
+  return new Cell({ isEmpty: false, tile: new Tile({ character }), x, y });
+}
+
+function createEmptyCell(x: number, y: number): Cell {
+  return new Cell({ isEmpty: true, tile: Tile.Null, x, y });
+}

package/src/components/Board/lib.ts

@@ -1,5 +1,5 @@
 import { BONUS_WORD } from '@scrabble-solver/constants';
-import { type Board, type Bonus, type Config } from '@scrabble-solver/types';
+import { type Board, type BoardWord, type Bonus, type Result } from '@scrabble-solver/types';
 
 import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from '@/parameters';
 import { type Direction, type Point } from '@/types';
@@ -36,8 +36,9 @@ export const getPositionInGrid = <T>(grid: T[][], constraint: (value: T) => bool
   return undefined;
 };
 
-export const getReachableCells = (config: Config, board: Board, charactersCount: number): boolean[][] => {
-  const { boardHeight, boardWidth } = config;
+export const getReachableCells = (board: Board, charactersCount: number): boolean[][] => {
+  const boardHeight = board.rowsCount;
+  const boardWidth = board.columnsCount;
   const reachable = createGrid(boardWidth, boardHeight, () => false);
 
   if (charactersCount === 0) {
@@ -116,3 +117,33 @@ export const getReachableCells = (config: Config, board: Board, charactersCount:
 
   return reachable;
 };
+
+export const getReachableCellsFromResults = (board: Board, results: Result[]): boolean[][] => {
+  const reachable = createGrid(board.columnsCount, board.rowsCount, (x, y) => board.rows[y][x].hasTile());
+
+  for (const result of results) {
+    for (const cell of result.cells) {
+      reachable[cell.y][cell.x] = true;
+    }
+  }
+
+  return reachable;
+};
+
+export const getWordCells = (board: Board, word: BoardWord): boolean[][] => {
+  const wordCells = createGrid(board.columnsCount, board.rowsCount, () => false);
+  const isHorizontal = word.direction === 'horizontal';
+  let { x, y } = word;
+
+  while (x < board.columnsCount && y < board.rowsCount && board.rows[y][x].hasTile()) {
+    wordCells[y][x] = true;
+
+    if (isHorizontal) {
+      x += 1;
+    } else {
+      y += 1;
+    }
+  }
+
+  return wordCells;
+};

package/src/components/Board/selectors.ts

@@ -4,24 +4,36 @@ import { findCell } from '@/lib/findCell';
 import {
   selectBoard,
   selectCharacters,
-  selectConfig,
   selectHighlightUnreachableCells,
   selectResultCandidateCells,
+  selectUpToDateHoveredWord,
+  selectUpToDateResults,
 } from '@/state';
 
-import { getReachableCells } from './lib';
+import { getReachableCells, getReachableCellsFromResults, getWordCells } from './lib';
 
 export const selectRowsWithCandidate = createSelector([selectBoard, selectResultCandidateCells], (board, cells) => {
   return board.rows.map((row, y) => row.map((cell, x) => findCell(cells, x, y) || cell));
 });
 
+export const selectHoveredWordCells = createSelector(
+  [selectBoard, selectUpToDateHoveredWord],
+  (board, hoveredWord): boolean[][] | null => {
+    return hoveredWord ? getWordCells(board, hoveredWord) : null;
+  },
+);
+
 export const selectReachableCells = createSelector(
-  [selectConfig, selectBoard, selectCharacters, selectHighlightUnreachableCells],
-  (config, board, characters, highlightUnreachableCells): boolean[][] | null => {
+  [selectBoard, selectCharacters, selectHighlightUnreachableCells, selectUpToDateResults],
+  (board, characters, highlightUnreachableCells, upToDateResults): boolean[][] | null => {
     if (!highlightUnreachableCells || characters.length === 0) {
       return null;
     }
 
-    return getReachableCells(config, board, characters.length);
+    if (upToDateResults) {
+      return getReachableCellsFromResults(board, upToDateResults);
+    }
+
+    return getReachableCells(board, characters.length);
   },
 );

package/src/components/Button/Button.module.scss

@@ -64,7 +64,7 @@
   gap: var(--spacing--l);
   line-height: var(--button--icon--size);
 
-  @include media('<l') {
+  @include media('compact') {
     gap: var(--spacing--m);
   }
 }

package/src/components/Modal/Modal.module.scss

@@ -112,10 +112,6 @@
   padding: var(--spacing--l);
   padding-top: 0;
 
-  @include media('>l') {
-    display: none;
-  }
-
   > * {
     min-width: 0;
     flex: 1;

package/src/components/Results/Header.tsx

@@ -1,5 +1,7 @@
-import { type FunctionComponent } from 'react';
+import { type FunctionComponent, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 
+import { Header as TableHeader, HeaderButton } from '@/components/Table';
 import { useColumns } from '@/hooks/useColumns';
 import GeoAlt from '@/icons/GeoAlt.svg';
 import OneTwoThree from '@/icons/OneTwoThree.svg';
@@ -8,27 +10,38 @@ import SquareA from '@/icons/SquareA.svg';
 import SquareB from '@/icons/SquareB.svg';
 import Squares from '@/icons/Squares.svg';
 import Words from '@/icons/Words.svg';
+import { resultsSlice, selectResultsSort, useTypedSelector } from '@/state';
 import { ResultColumnId } from '@/types';
 
-import { HeaderButton } from './HeaderButton';
 import styles from './Results.module.scss';
 
 export const Header: FunctionComponent = () => {
+  const dispatch = useDispatch();
   const columns = useColumns();
+  const sort = useTypedSelector(selectResultsSort);
+
+  const handleSort = useCallback(
+    (columnId: ResultColumnId) => {
+      dispatch(resultsSlice.actions.sort(columnId));
+    },
+    [dispatch],
+  );
 
   return (
-    <div className={styles.header}>
+    <TableHeader>
       {columns[ResultColumnId.Coordinates] && (
         <HeaderButton
           className={styles.coordinates}
           Icon={GeoAlt}
           id={ResultColumnId.Coordinates}
+          sort={sort}
           translationKey="settings.showCoordinates"
+          onSort={handleSort}
         />
       )}
 
       {columns[ResultColumnId.Word] && (
-        <HeaderButton className={styles.word} id={ResultColumnId.Word} translationKey="common.word" />
+        <HeaderButton id={ResultColumnId.Word} primary sort={sort} translationKey="common.word" onSort={handleSort} />
       )}
 
       {columns[ResultColumnId.TilesCount] && (
@@ -36,7 +49,9 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Squares}
           id={ResultColumnId.TilesCount}
+          sort={sort}
           translationKey="common.tiles"
+          onSort={handleSort}
         />
       )}
 
@@ -45,7 +60,9 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={SquareA}
           id={ResultColumnId.VowelsCount}
+          sort={sort}
           translationKey="common.vowels"
+          onSort={handleSort}
         />
       )}
 
@@ -54,7 +71,9 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={SquareB}
           id={ResultColumnId.ConsonantsCount}
+          sort={sort}
           translationKey="common.consonants"
+          onSort={handleSort}
         />
       )}
 
@@ -63,7 +82,9 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Square}
           id={ResultColumnId.BlanksCount}
+          sort={sort}
           translationKey="common.blanks"
+          onSort={handleSort}
         />
       )}
 
@@ -72,7 +93,9 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Words}
           id={ResultColumnId.WordsCount}
+          sort={sort}
           translationKey="common.words"
+          onSort={handleSort}
         />
       )}
 
@@ -81,9 +104,11 @@ export const Header: FunctionComponent = () => {
           className={styles.points}
           Icon={OneTwoThree}
           id={ResultColumnId.Points}
+          sort={sort}
           translationKey="common.points"
+          onSort={handleSort}
         />
       )}
-    </div>
+    </TableHeader>
   );
 };