scrabble-solver 2.18.0 → 2.18.2

package/packages/scrabble-solver/src/state/hoveredWord/slice.ts

@@ -0,0 +1,18 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+import { type VerifiedWord } from '@/types';
+
+import { hoveredWordInitialState } from './initialState';
+
+export const hoveredWordSlice = createSlice({
+  initialState: hoveredWordInitialState,
+  name: 'hoveredWord',
+  reducers: {
+    set: (state, action: PayloadAction<VerifiedWord>) => {
+      state.word = action.payload;
+    },
+    clear: (state) => {
+      state.word = null;
+    },
+  },
+});

package/packages/scrabble-solver/src/state/hoveredWord/types.ts

@@ -0,0 +1,5 @@
+import type { VerifiedWord } from '@/types';
+
+export interface HoveredWordState {
+  word: VerifiedWord | null;
+}

package/packages/scrabble-solver/src/state/index.ts

@@ -4,6 +4,7 @@ export * from './board';
 export * from './cellFilters';
 export * from './dictionary';
 export * from './hoveredTile';
+export * from './hoveredWord';
 export * from './i18n';
 export * from './localStorage';
 export * from './rack';

package/packages/scrabble-solver/src/state/localStorage.ts

@@ -1,7 +1,8 @@
 import { Board, type BoardJson, isObject, type Locale } from '@scrabble-solver/types';
 import store2 from 'store2';
 
-import type { Rack, Translations } from '@/types';
+import { englishTranslations } from '@/i18n/i18n';
+import type { Rack, TranslationKey, Translations } from '@/types';
 
 import type { SettingsState } from './settings/types';
 
@@ -80,7 +81,13 @@ export const localStorage = {
       return undefined;
     }
 
-    if (!isObject(stored) || stored.locale !== locale || stored.version !== version || !isObject(stored.translations)) {
+    if (
+      !isObject(stored) ||
+      stored.locale !== locale ||
+      stored.version !== version ||
+      !isObject(stored.translations) ||
+      !hasEveryTranslation(stored.translations)
+    ) {
       store.remove(TRANSLATIONS);
       return undefined;
     }
@@ -93,6 +100,10 @@ export const localStorage = {
   },
 };
 
+function hasEveryTranslation(translations: Translations): boolean {
+  return (Object.keys(englishTranslations) as TranslationKey[]).every((key) => typeof translations[key] === 'string');
+}
+
 /**
  * Introduced in 2.15.26 on 2026/04/27.
  * Life expectancy: 1y.

package/packages/scrabble-solver/src/state/results/lib.ts

@@ -1,25 +1,15 @@
 import { type Result, type ShowCoordinates } from '@scrabble-solver/types';
 
+import { createCoordinatesComparator } from '@/lib/createCoordinatesComparator';
 import { createKeyComparator } from '@/lib/createKeyComparator';
 import { createRegExp } from '@/lib/createRegExp';
-import { createStringComparator } from '@/lib/createStringComparator';
-import { getCoordinate } from '@/lib/getCoordinate';
-import { reverseComparator } from '@/lib/reverseComparator';
-import {
-  type CellFilter,
-  type Comparator,
-  type GroupedResults,
-  ResultColumnId,
-  type Sort,
-  SortDirection,
-} from '@/types';
+import { createSortComparator } from '@/lib/createSortComparator';
+import { getCoordinates as getPointCoordinates } from '@/lib/getCoordinates';
+import { type CellFilter, type ComparatorFactory, type GroupedResults, ResultColumnId, type Sort } from '@/types';
 
 export const getCoordinates = (result: Result, showCoordinates: ShowCoordinates): string => {
   const firstCell = result.cells[0];
-  const x = getCoordinate(firstCell.x, showCoordinates === 'original' ? 'letter' : 'number');
-  const y = getCoordinate(firstCell.y, showCoordinates === 'original' ? 'number' : 'letter');
-
-  return result.isHorizontal() ? `${y}${x}` : `${x}${y}`;
+  return getPointCoordinates({ isHorizontal: result.isHorizontal(), x: firstCell.x, y: firstCell.y }, showCoordinates);
 };
 
 export const groupResults = (
@@ -69,14 +59,11 @@ export const resultMatchesCellFilter = (result: Result, cellFilters: CellFilter[
   return matchesExcludeFilters && matchesIncludeFilters;
 };
 
-const comparators: Record<ResultColumnId, (locale: string, showCoordinates: ShowCoordinates) => Comparator<Result>> = {
+const comparators: Record<ResultColumnId, ComparatorFactory<Result>> = {
   [ResultColumnId.BlanksCount]: (locale: string) => createKeyComparator('blanksCount', locale),
   [ResultColumnId.ConsonantsCount]: (locale: string) => createKeyComparator('consonantsCount', locale),
-  [ResultColumnId.Coordinates]: (locale: string, showCoordinates: ShowCoordinates) => (a, b) => {
-    const stringComparator = createStringComparator(locale);
-    const aValue = getCoordinates(a, showCoordinates);
-    const bValue = getCoordinates(b, showCoordinates);
-    return stringComparator(aValue, bValue);
+  [ResultColumnId.Coordinates]: (locale: string, showCoordinates: ShowCoordinates) => {
+    return createCoordinatesComparator({ getItemCoordinates: getCoordinates, locale, showCoordinates });
   },
   [ResultColumnId.Points]: (locale: string) => createKeyComparator('points', locale),
   [ResultColumnId.TilesCount]: (locale: string) => createKeyComparator('tilesCount', locale),
@@ -95,9 +82,5 @@ export const sortResults = (
     return undefined;
   }
 
-  const createComparator = comparators[sort.column];
-  const comparator = createComparator(locale, showCoordinates);
-  const finalComparator = sort.direction === SortDirection.Descending ? reverseComparator(comparator) : comparator;
-  const sortedResults = [...results].sort(finalComparator);
-  return sortedResults;
+  return [...results].sort(createSortComparator({ comparators, locale, showCoordinates, sort }));
 };

package/packages/scrabble-solver/src/state/results/selectors.ts

@@ -16,7 +16,7 @@ export const selectResultCandidate = createSelector([selectResults], (results) =
 
 export const selectResultsQuery = createSelector([selectResults], (results) => results.query);
 
-const selectResultsResults = createSelector([selectResults], (results) => results.results);
+export const selectResultsResults = createSelector([selectResults], (results) => results.results);
 
 export const selectResultsSort = createSelector([selectResults], (results) => results.sort);
 
@@ -44,6 +44,14 @@ export const selectProcessedResults = createSelector([selectGroupedSortedResults
   return results ? [...results.matching, ...results.other] : undefined;
 });
 
+export const selectResultCandidateIndex = createSelector(
+  [selectProcessedResults, selectResultCandidate],
+  (results, candidate) => {
+    const index = results && candidate ? results.findIndex((result) => result.id === candidate.id) : -1;
+    return index === -1 ? undefined : index;
+  },
+);
+
 export const selectIsResultMatching = createSelector(
   [selectProcessedResults, selectResultsQuery, selectCellFilters, selectResultIndex],
   (results, query, cellFilters, index) => {

package/packages/scrabble-solver/src/state/results/slice.ts

@@ -1,14 +1,11 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { type Result } from '@scrabble-solver/types';
 
-import { type ResultColumnId, SortDirection } from '@/types';
+import { getNextSort } from '@/lib/getNextSort';
+import { type ResultColumnId } from '@/types';
 
 import { resultsInitialState } from './initialState';
 
-const toggleDirection = (direction: SortDirection): SortDirection => {
-  return direction === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending;
-};
-
 export const resultsSlice = createSlice({
   initialState: resultsInitialState,
   name: 'results',
@@ -24,7 +21,7 @@ export const resultsSlice = createSlice({
 
     changeResultCandidate: (state, action: PayloadAction<Result | null>) => {
       const candidate = action.payload;
-      return { ...state, candidate };
+      return candidate === state.candidate ? state : { ...state, candidate };
     },
 
     changeResults: (state, action: PayloadAction<Result[]>) => {
@@ -38,16 +35,7 @@ export const resultsSlice = createSlice({
     },
 
     sort: (state, action: PayloadAction<ResultColumnId>) => {
-      const columndId = action.payload;
-      const { column, direction } = state.sort;
-
-      return {
-        ...state,
-        sort: {
-          column: columndId,
-          direction: column === columndId ? toggleDirection(direction) : direction,
-        },
-      };
+      return { ...state, sort: getNextSort(state.sort, action.payload) };
     },
 
     reset: () => resultsInitialState,

package/packages/scrabble-solver/src/state/sagas.ts

@@ -11,15 +11,17 @@ import { call, delay, put, select, spawn, takeEvery, takeLatest } from 'redux-sa
 import { LOCALE_FEATURES } from '@/i18n/constants';
 import { loadTranslations } from '@/i18n/i18n';
 import { memoize } from '@/lib/memoize';
-import { waitForIdleOrFirstIntent } from '@/lib/waitForIdleOrFirstIntent';
+import { waitForFirstIntent, waitForIdleOrFirstIntent } from '@/lib/waitForIdleOrFirstIntent';
 import { findWordDefinitions, solve, verify, visit } from '@/sdk';
 import { prefetchDictionary } from '@/solver-worker';
+import { type VerifiedWord } from '@/types';
 
 import { initialize, reset } from './actions';
 import { appSlice, selectVersion } from './app';
 import { boardSlice, selectBoard } from './board';
 import { cellFiltersSlice, selectCellFilter } from './cellFilters';
 import { dictionarySlice, selectDictionary } from './dictionary';
+import { hoveredWordSlice } from './hoveredWord';
 import { i18nSlice, selectLoadedTranslations } from './i18n';
 import { localStorage } from './localStorage';
 import { rackSlice, selectCharacters, selectRack } from './rack';
@@ -51,6 +53,7 @@ export function* rootSaga(): AnyGenerator {
   yield takeEvery([rackSlice.actions.changeCharacter.type, rackSlice.actions.changeCharacters.type], onRackValueChange);
   yield takeEvery(resultsSlice.actions.applyResult.type, onApplyResult);
   yield takeLatest(resultsSlice.actions.changeResultCandidate.type, onResultCandidateChange);
+  yield takeLatest([hoveredWordSlice.actions.set.type, hoveredWordSlice.actions.clear.type], onHoveredWordChange);
   yield takeEvery(settingsSlice.actions.changeGame.type, onGameChange);
   yield takeEvery(settingsSlice.actions.changeLocale.type, onLocaleChange);
   yield takeLatest(dictionarySlice.actions.submit.type, onDictionarySubmit);
@@ -68,6 +71,7 @@ function* onCellValueChange({ payload }: PayloadAction<{ value: string; x: numbe
   }
 
   yield put(resultsSlice.actions.changeResultCandidate(null));
+  yield put(hoveredWordSlice.actions.clear());
   yield put(verifySlice.actions.submit());
 }
 
@@ -99,6 +103,7 @@ function* onGameChange(): AnyGenerator {
   }
 
   yield put(resultsSlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield* resetRack();
   yield put(verifySlice.actions.submit());
 }
@@ -139,7 +144,7 @@ function* onInitialize({ payload }: PayloadAction<{ version: string }>): AnyGene
   const board = yield select(selectBoard);
   const locale = yield select(selectLocale);
 
-  yield spawn(prefetchDictionaryWhenIdle);
+  yield spawn(prefetchDictionaryOnFirstIntent);
   yield spawn(loadLocaleTranslations, locale);
   yield spawn(preloadTranslationsWhenIdle);
   yield spawn(visitWhenIdle);
@@ -202,8 +207,8 @@ function* visitWhenIdle(): AnyGenerator {
   yield call(visit);
 }
 
-function* prefetchDictionaryWhenIdle(): AnyGenerator {
-  yield call(waitForIdleOrFirstIntent);
+function* prefetchDictionaryOnFirstIntent(): AnyGenerator {
+  yield call(waitForFirstIntent);
   const locale = yield select(selectLocale);
   yield call(prefetchDictionary, locale);
 }
@@ -250,6 +255,7 @@ function* onReset(): AnyGenerator {
   yield put(boardSlice.actions.init(Board.create(config.boardWidth, config.boardHeight)));
   yield put(cellFiltersSlice.actions.reset());
   yield put(dictionarySlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield put(rackSlice.actions.reset());
   yield put(resultsSlice.actions.reset());
   yield put(solveSlice.actions.reset());
@@ -280,6 +286,7 @@ function* onLocaleChange({ payload: locale }: PayloadAction<Locale>): AnyGenerat
   }
 
   yield put(dictionarySlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield put(resultsSlice.actions.changeResultCandidate(null));
   yield put(verifySlice.actions.submit());
 }
@@ -289,8 +296,26 @@ function* onResultCandidateChange({ payload: result }: PayloadAction<Result | nu
     return;
   }
 
+  yield put(hoveredWordSlice.actions.clear());
+  yield* searchDictionary(result.words);
+}
+
+function* onHoveredWordChange({ payload: word }: PayloadAction<VerifiedWord | undefined>): AnyGenerator {
+  if (!word) {
+    return;
+  }
+
+  yield put(resultsSlice.actions.changeResultCandidate(null));
+
+  const board: Board = yield select(selectBoard);
+  const collidingWords = board.getCollidingWords(word);
+
+  yield* searchDictionary([word.word, ...collidingWords.map((collidingWord) => collidingWord.word)]);
+}
+
+function* searchDictionary(words: string[]): AnyGenerator {
   const locale: Locale = yield select(selectLocale);
-  const uniqueWords = Array.from(new Set(result.words));
+  const uniqueWords = Array.from(new Set(words));
   const input = uniqueWords.join(LOCALE_FEATURES[locale].separator);
 
   if (!memoizedFindWordDefinitions.hasCache(locale, input)) {

package/packages/scrabble-solver/src/state/selectors.ts

@@ -3,10 +3,13 @@ import { createSelector } from '@reduxjs/toolkit';
 import { unorderedArraysEqual } from '@/lib/unorderedArraysEqual';
 
 import { selectBoard } from './board';
+import { selectHoveredWord } from './hoveredWord';
 import { getRemainingTiles } from './lib';
 import { selectCharacters } from './rack';
+import { selectResultsResults } from './results';
 import { selectConfig, selectLocale } from './settings';
-import { selectLastSolvedParameters } from './solve';
+import { selectLastSolvedParameters, selectSolveError } from './solve';
+import { selectLastVerifiedBoard } from './verify';
 
 const selectHasBoardChanged = createSelector(
   [selectLastSolvedParameters, selectBoard],
@@ -29,6 +32,20 @@ export const selectAreResultsOutdated = createSelector(
   },
 );
 
+export const selectUpToDateResults = createSelector(
+  [selectResultsResults, selectAreResultsOutdated, selectSolveError],
+  (results, areResultsOutdated, solveError) => {
+    return results && !areResultsOutdated && !solveError ? results : null;
+  },
+);
+
+export const selectUpToDateHoveredWord = createSelector(
+  [selectHoveredWord, selectLastVerifiedBoard, selectBoard],
+  (hoveredWord, lastVerifiedBoard, board) => {
+    return hoveredWord && lastVerifiedBoard.equals(board) ? hoveredWord : null;
+  },
+);
+
 export const selectRemainingTiles = createSelector(
   [selectConfig, selectBoard, selectCharacters, selectLocale],
   getRemainingTiles,

package/packages/scrabble-solver/src/state/store.ts

@@ -6,6 +6,7 @@ import { boardSlice } from './board';
 import { cellFiltersSlice } from './cellFilters';
 import { dictionarySlice } from './dictionary';
 import { hoveredTileSlice } from './hoveredTile';
+import { hoveredWordSlice } from './hoveredWord';
 import { i18nSlice } from './i18n';
 import { rackSlice } from './rack';
 import { resultsSlice } from './results';
@@ -23,6 +24,7 @@ export const store = configureStore({
     cellFilters: cellFiltersSlice.reducer,
     dictionary: dictionarySlice.reducer,
     hoveredTile: hoveredTileSlice.reducer,
+    hoveredWord: hoveredWordSlice.reducer,
     i18n: i18nSlice.reducer,
     rack: rackSlice.reducer,
     results: resultsSlice.reducer,

package/packages/scrabble-solver/src/state/types.ts

@@ -3,6 +3,7 @@ import type { BoardState } from './board';
 import type { CellFiltersState } from './cellFilters';
 import type { DictionaryState } from './dictionary';
 import type { HoveredTileState } from './hoveredTile';
+import type { HoveredWordState } from './hoveredWord';
 import type { I18nState } from './i18n';
 import type { RackState } from './rack';
 import type { ResultsState } from './results';
@@ -16,6 +17,7 @@ export type RootState = {
   cellFilters: CellFiltersState;
   dictionary: DictionaryState;
   hoveredTile: HoveredTileState;
+  hoveredWord: HoveredWordState;
   i18n: I18nState;
   rack: RackState;
   results: ResultsState;

package/packages/scrabble-solver/src/state/verify/initialState.ts

@@ -1,3 +1,5 @@
+import { SortDirection, WordColumnId } from '@/types';
+
 import { boardInitialState } from '../board';
 
 import type { VerifyState } from './types';
@@ -8,5 +10,10 @@ export const verifyInitialState: VerifyState = {
     board: boardInitialState,
   },
   invalidWords: [],
+  query: '',
+  sort: {
+    column: WordColumnId.Word,
+    direction: SortDirection.Ascending,
+  },
   validWords: [],
 };

package/packages/scrabble-solver/src/state/verify/lib.test.ts

@@ -0,0 +1,55 @@
+import { SortDirection, type VerifiedWord, WordColumnId } from '../../types';
+
+import { getWordCoordinates, sortWords } from './lib';
+
+describe('getWordCoordinates', () => {
+  it('locates a horizontal word by its start cell', () => {
+    expect(getWordCoordinates(createWord({ x: 3, y: 3 }), 'original')).toBe('4D');
+  });
+
+  it('locates a vertical word by its start cell', () => {
+    expect(getWordCoordinates(createWord({ direction: 'vertical', x: 3, y: 3 }), 'original')).toBe('D4');
+  });
+});
+
+describe('sortWords', () => {
+  const cat = createWord({ word: 'cat', x: 3, y: 3 });
+  const zvq = createWord({ isValid: false, word: 'zvq', x: 3, y: 5 });
+
+  it('sorts by word', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Ascending };
+
+    expect(sortWords([zvq, cat], sort, 'en-US', 'original')).toEqual([cat, zvq]);
+  });
+
+  it('sorts by coordinates', () => {
+    const sort = { column: WordColumnId.Coordinates, direction: SortDirection.Ascending };
+
+    expect(sortWords([zvq, cat], sort, 'en-US', 'original')).toEqual([cat, zvq]);
+  });
+
+  it('sorts invalid words first by validity', () => {
+    const sort = { column: WordColumnId.Validity, direction: SortDirection.Ascending };
+
+    expect(sortWords([cat, zvq], sort, 'en-US', 'original')).toEqual([zvq, cat]);
+  });
+
+  it('reverses the order when sorting descending', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Descending };
+
+    expect(sortWords([cat, zvq], sort, 'en-US', 'original')).toEqual([zvq, cat]);
+  });
+
+  it('does not modify the input', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Ascending };
+    const words = [zvq, cat];
+
+    sortWords(words, sort, 'en-US', 'original');
+
+    expect(words).toEqual([zvq, cat]);
+  });
+});
+
+function createWord(overrides: Partial<VerifiedWord>): VerifiedWord {
+  return { direction: 'horizontal', isValid: true, word: 'cat', x: 0, y: 0, ...overrides };
+}

package/packages/scrabble-solver/src/state/verify/lib.ts

@@ -0,0 +1,49 @@
+import { type BoardWord, type ShowCoordinates } from '@scrabble-solver/types';
+
+import { createCoordinatesComparator } from '@/lib/createCoordinatesComparator';
+import { createKeyComparator } from '@/lib/createKeyComparator';
+import { createRegExp } from '@/lib/createRegExp';
+import { createSortComparator } from '@/lib/createSortComparator';
+import { getCoordinates } from '@/lib/getCoordinates';
+import { numberComparator } from '@/lib/numberComparator';
+import { type ComparatorFactory, type GroupedWords, type Sort, type VerifiedWord, WordColumnId } from '@/types';
+
+export const getWordCoordinates = (word: BoardWord, showCoordinates: ShowCoordinates): string => {
+  return getCoordinates({ isHorizontal: word.direction === 'horizontal', x: word.x, y: word.y }, showCoordinates);
+};
+
+export const groupWords = (words: VerifiedWord[], query: string): GroupedWords => {
+  const regExp = createRegExp(query);
+
+  return words.reduce<GroupedWords>(
+    (groupedWords, word) => {
+      if (word.word.match(regExp)) {
+        groupedWords.matching.push(word);
+      } else {
+        groupedWords.other.push(word);
+      }
+
+      return groupedWords;
+    },
+    { matching: [], other: [] },
+  );
+};
+
+const comparators: Record<WordColumnId, ComparatorFactory<VerifiedWord>> = {
+  [WordColumnId.Coordinates]: (locale: string, showCoordinates: ShowCoordinates) => {
+    return createCoordinatesComparator({ getItemCoordinates: getWordCoordinates, locale, showCoordinates });
+  },
+  [WordColumnId.Validity]: () => (a, b) => {
+    return numberComparator(Number(a.isValid), Number(b.isValid));
+  },
+  [WordColumnId.Word]: (locale: string) => createKeyComparator('word', locale),
+};
+
+export const sortWords = (
+  words: VerifiedWord[],
+  sort: Sort<WordColumnId>,
+  locale: string,
+  showCoordinates: ShowCoordinates,
+): VerifiedWord[] => {
+  return [...words].sort(createSortComparator({ comparators, locale, showCoordinates, sort }));
+};

package/packages/scrabble-solver/src/state/verify/selectors.ts

@@ -1,9 +1,46 @@
 import { createSelector } from '@reduxjs/toolkit';
 
+import { createRegExp } from '@/lib/createRegExp';
+
+import { selectLocale, selectShowCoordinates } from '../settings';
 import type { RootState } from '../types';
 
+import { getWordCoordinates, groupWords, sortWords } from './lib';
+
+const selectWordIndex = (_: unknown, index: number): number => index;
+
 export const selectVerify = (state: RootState) => state.verify;
 
+export const selectLastVerifiedBoard = createSelector([selectVerify], (verify) => verify.lastSolvedParameters.board);
+
 export const selectInvalidWords = createSelector([selectVerify], (verify) => verify.invalidWords);
 
 export const selectValidWords = createSelector([selectVerify], (verify) => verify.validWords);
+
+export const selectWordsQuery = createSelector([selectVerify], (verify) => verify.query);
+
+export const selectWordsSort = createSelector([selectVerify], (verify) => verify.sort);
+
+export const selectCreatedWords = createSelector([selectInvalidWords, selectValidWords], (invalidWords, validWords) => {
+  return [...invalidWords, ...validWords];
+});
+
+const selectSortedWords = createSelector(
+  [selectCreatedWords, selectWordsSort, selectLocale, selectShowCoordinates],
+  sortWords,
+);
+
+export const selectProcessedWords = createSelector([selectSortedWords, selectWordsQuery], (words, query) => {
+  const { matching, other } = groupWords(words, query);
+  return [...matching, ...other];
+});
+
+export const selectIsWordMatching = createSelector(
+  [selectProcessedWords, selectWordsQuery, selectWordIndex],
+  (words, query, index) => createRegExp(query).test(words[index].word),
+);
+
+export const selectWordCoordinates = createSelector(
+  [selectProcessedWords, selectShowCoordinates, selectWordIndex],
+  (words, showCoordinates, index) => getWordCoordinates(words[index], showCoordinates),
+);

package/packages/scrabble-solver/src/state/verify/slice.ts

@@ -1,12 +1,15 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { type Board } from '@scrabble-solver/types';
 
+import { getNextSort } from '@/lib/getNextSort';
+import { type VerifiedWord, type WordColumnId } from '@/types';
+
 import { verifyInitialState } from './initialState';
 
 interface VerifyParameters {
   board: Board;
-  invalidWords: string[];
-  validWords: string[];
+  invalidWords: VerifiedWord[];
+  validWords: VerifiedWord[];
 }
 
 export const verifySlice = createSlice({
@@ -17,10 +20,18 @@ export const verifySlice = createSlice({
       return { ...state, isLoading: true };
     },
 
+    changeQuery: (state, action: PayloadAction<string>) => {
+      return { ...state, query: action.payload };
+    },
+
     submitFailure: (state) => {
       return { ...state, isLoading: false };
     },
 
+    sort: (state, action: PayloadAction<WordColumnId>) => {
+      return { ...state, sort: getNextSort(state.sort, action.payload) };
+    },
+
     submitSuccess: (state, action: PayloadAction<VerifyParameters>) => {
       const { board, invalidWords, validWords } = action.payload;
       return { ...state, isLoading: false, lastSolvedParameters: { board }, invalidWords, validWords };

package/packages/scrabble-solver/src/state/verify/types.ts

@@ -1,3 +1,5 @@
+import type { Sort, VerifiedWord, WordColumnId } from '@/types';
+
 import type { BoardState } from '../board';
 
 export interface VerifyState {
@@ -5,6 +7,8 @@ export interface VerifyState {
   lastSolvedParameters: {
     board: BoardState;
   };
-  invalidWords: string[];
-  validWords: string[];
+  invalidWords: VerifiedWord[];
+  query: string;
+  sort: Sort<WordColumnId>;
+  validWords: VerifiedWord[];
 }

package/packages/scrabble-solver/src/styles/_tokens.scss

@@ -10,6 +10,8 @@ $breakpoint-m: 992px;
 $breakpoint-l: 1200px;
 $breakpoint-xl: 1400px;
 
+$breakpoint-height-l: 860px;
+
 $border-color: #cdcdcd;
 $border-color-light: #d9d9d9;
 $border-radius: 5px;

package/packages/scrabble-solver/src/styles/mixins.scss

@@ -10,6 +10,11 @@
   ),
   $media-expressions: (
     touch: '(hover: none)',
+    /**
+     * Keep in sync with useIsCompactLayout
+     */
+    compact: '(max-width: #{$breakpoint-l - 1px}), (max-height: #{$breakpoint-height-l - 1px})',
+    desktop: '(min-width: #{$breakpoint-l}) and (min-height: #{$breakpoint-height-l})',
   )
 );
 

package/packages/scrabble-solver/src/styles/variables.module.scss

@@ -6,6 +6,7 @@
   breakpointM: strip-unit($breakpoint-m);
   breakpointL: strip-unit($breakpoint-l);
   breakpointXl: strip-unit($breakpoint-xl);
+  breakpointHeightL: strip-unit($breakpoint-height-l);
 
   borderColorLight: $border-color-light;
   borderWidth: strip-unit($border-width);

package/packages/scrabble-solver/src/styles/variables.module.scss.d.ts

@@ -2,6 +2,7 @@
 declare const styles: {
   readonly borderColorLight: string;
   readonly borderWidth: string;
+  readonly breakpointHeightL: string;
   readonly breakpointL: string;
   readonly breakpointM: string;
   readonly breakpointS: string;

package/packages/scrabble-solver/src/styles/variables.scss

@@ -153,7 +153,7 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
     --components-spacing: var(--spacing--l);
   }
 
-  @include media('<l') {
+  @include media('compact') {
     --dictionary--height: var(--dictionary--height--mobile);
     --logo--height: #{$logo-height-small};
     --solver-column-total: 0px;