scrabble-solver 2.15.21 → 2.15.23

package/packages/scrabble-solver/src/components/Board/hooks/useBackgroundImage.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable max-lines, max-statements */
 
 import { BONUS_CHARACTER, BONUS_WORD } from '@scrabble-solver/constants';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { renderToString } from 'react-dom/server';
 import { Provider } from 'react-redux';
 
-import { useAppLayout, useMediaQueries } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { Star } from 'icons';
 import { getTileSizes } from 'lib';
@@ -32,7 +33,10 @@ export const useBackgroundImage = () => {
   const { isLessThanXs } = useMediaQueries();
   const borderRadius = isLessThanXs ? BORDER_RADIUS_XS : BORDER_RADIUS;
   const config = useTypedSelector(selectConfig);
-  const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
+  const center = useMemo(
+    () => ({ x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) }),
+    [config.boardHeight, config.boardWidth],
+  );
   const viewBoxHeight = boardHeight;
   const viewBoxWidth = boardWidth;
   const bonusSize = cellSize * 0.8;
@@ -42,174 +46,233 @@ export const useBackgroundImage = () => {
   const { tileFontSize } = getTileSizes(cellSize);
   const fontSize = tileFontSize * 0.6;
   const fontOffset = cellSize / 2;
-  const characterBonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_CHARACTER);
-  const word2Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 2);
-  const word3Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3);
-  const word4Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 4);
-
-  const getX = (point: Point): number =>
-    (direction === 'ltr' ? coordinatesSize : 0) + point.x * (cellSize + BORDER_WIDTH);
-
-  const getY = (point: Point): number => coordinatesSize + point.y * (cellSize + BORDER_WIDTH);
-
-  const backgroundSvg = renderToString(
-    <Provider store={store}>
-      <svg
-        height={viewBoxHeight}
-        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
-        width={viewBoxWidth}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <symbol id={HORIZONTAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={GRID_LINE_SIZE} width={viewBoxWidth} />
-          </symbol>
-
-          <symbol id={VERTICAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
-          </symbol>
-
-          <symbol id={BONUS}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-          </symbol>
-
-          <symbol id={BONUS_WORD_2}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-
-            <text
-              dominantBaseline="central"
-              fill="white"
-              fontFamily="system-ui, sans-serif"
-              fontSize={fontSize}
-              fontWeight="bold"
-              textAnchor="middle"
-              x={fontOffset}
-              y={fontOffset}
-            >
-              x2
-            </text>
-          </symbol>
-
-          <symbol id={BONUS_WORD_3}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-
-            <text
-              dominantBaseline="central"
-              fill="white"
-              fontFamily="system-ui, sans-serif"
-              fontSize={fontSize}
-              fontWeight="bold"
-              textAnchor="middle"
-              x={fontOffset}
-              y={fontOffset}
-            >
-              x3
-            </text>
-          </symbol>
-
-          <symbol id={BONUS_WORD_4}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-
-            <text
-              dominantBaseline="central"
-              fill="white"
-              fontFamily="system-ui, sans-serif"
-              fontSize={fontSize}
-              fontWeight="bold"
-              textAnchor="middle"
-              x={fontOffset}
-              y={fontOffset}
-            >
-              x4
-            </text>
-          </symbol>
-        </defs>
-
-        {showCoordinates === 'hidden' && (
-          <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
-        )}
-
-        {showCoordinates !== 'hidden' && (
-          <>
-            <rect fill={COLOR_BACKGROUND} height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
-            <rect
-              fill="white"
-              height={viewBoxHeight - coordinatesSize}
-              width={viewBoxWidth - coordinatesSize}
-              x={direction === 'ltr' ? coordinatesSize : 0}
-              y={coordinatesSize}
-            />
+  const characterBonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_CHARACTER),
+    [config.bonuses],
+  );
+  const word2Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 2),
+    [config.bonuses],
+  );
+  const word3Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3),
+    [config.bonuses],
+  );
+  const word4Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 4),
+    [config.bonuses],
+  );
+
+  const getX = useCallback(
+    (point: Point): number => (direction === 'ltr' ? coordinatesSize : 0) + point.x * (cellSize + BORDER_WIDTH),
+    [coordinatesSize, cellSize, direction],
+  );
+
+  const getY = useCallback(
+    (point: Point): number => coordinatesSize + point.y * (cellSize + BORDER_WIDTH),
+    [coordinatesSize, cellSize],
+  );
+
+  const backgroundSvg = useMemo(
+    () =>
+      renderToString(
+        <Provider store={store}>
+          <svg
+            height={viewBoxHeight}
+            viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+            width={viewBoxWidth}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <symbol id={HORIZONTAL_LINE}>
+                <rect fill={BORDER_COLOR_LIGHT} height={GRID_LINE_SIZE} width={viewBoxWidth} />
+              </symbol>
+
+              <symbol id={VERTICAL_LINE}>
+                <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
+              </symbol>
+
+              <symbol id={BONUS}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+              </symbol>
+
+              <symbol id={BONUS_WORD_2}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+                <text
+                  dominantBaseline="central"
+                  fill="white"
+                  fontFamily="system-ui, sans-serif"
+                  fontSize={fontSize}
+                  fontWeight="bold"
+                  textAnchor="middle"
+                  x={fontOffset}
+                  y={fontOffset}
+                >
+                  x2
+                </text>
+              </symbol>
+
+              <symbol id={BONUS_WORD_3}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+                <text
+                  dominantBaseline="central"
+                  fill="white"
+                  fontFamily="system-ui, sans-serif"
+                  fontSize={fontSize}
+                  fontWeight="bold"
+                  textAnchor="middle"
+                  x={fontOffset}
+                  y={fontOffset}
+                >
+                  x3
+                </text>
+              </symbol>
+
+              <symbol id={BONUS_WORD_4}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+                <text
+                  dominantBaseline="central"
+                  fill="white"
+                  fontFamily="system-ui, sans-serif"
+                  fontSize={fontSize}
+                  fontWeight="bold"
+                  textAnchor="middle"
+                  x={fontOffset}
+                  y={fontOffset}
+                >
+                  x4
+                </text>
+              </symbol>
+            </defs>
+
+            {showCoordinates === 'hidden' && (
+              <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+            )}
+
+            {showCoordinates !== 'hidden' && (
+              <>
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={viewBoxHeight}
+                  rx={borderRadius}
+                  width={viewBoxWidth}
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="white"
+                  height={viewBoxHeight - coordinatesSize}
+                  width={viewBoxWidth - coordinatesSize}
+                  x={direction === 'ltr' ? coordinatesSize : 0}
+                  y={coordinatesSize}
+                />
+
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={coordinatesSize}
+                  rx={borderRadius}
+                  width={viewBoxWidth}
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={viewBoxHeight}
+                  rx={borderRadius}
+                  x={direction === 'ltr' ? 0 : viewBoxWidth - coordinatesSize}
+                  y="0"
+                  width={coordinatesSize}
+                />
+                <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize - BORDER_WIDTH} />
+                <use
+                  href={`#${VERTICAL_LINE}`}
+                  x={
+                    direction === 'ltr' ? coordinatesSize - BORDER_WIDTH : viewBoxWidth - coordinatesSize - BORDER_WIDTH
+                  }
+                />
+              </>
+            )}
+
+            {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
+              <use
+                key={index}
+                href={`#${HORIZONTAL_LINE}`}
+                y={coordinatesSize + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
+              />
+            ))}
+
+            {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
+              <use
+                key={index}
+                href={`#${VERTICAL_LINE}`}
+                x={(direction === 'ltr' ? coordinatesSize : 0) + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
+              />
+            ))}
+
+            {characterBonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
+
+            {word2Bonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_2}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
+
+            {word3Bonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_3}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
+
+            {word4Bonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_4}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
 
-            <rect fill={COLOR_BACKGROUND} height={coordinatesSize} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
             <rect
-              fill={COLOR_BACKGROUND}
-              height={viewBoxHeight}
+              fill={COLOR_BONUS_START}
+              height={bonusSize}
               rx={borderRadius}
-              x={direction === 'ltr' ? 0 : viewBoxWidth - coordinatesSize}
-              y="0"
-              width={coordinatesSize}
+              width={bonusSize}
+              x={getX(center) + bonusOffset}
+              y={getY(center) + bonusOffset}
             />
-            <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize - BORDER_WIDTH} />
-            <use
-              href={`#${VERTICAL_LINE}`}
-              x={direction === 'ltr' ? coordinatesSize - BORDER_WIDTH : viewBoxWidth - coordinatesSize - BORDER_WIDTH}
+
+            <Star
+              color="white"
+              height={iconSize}
+              width={iconSize}
+              x={getX(center) + iconOffset}
+              y={getY(center) + iconOffset}
             />
-          </>
-        )}
-
-        {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
-          <use
-            key={index}
-            href={`#${HORIZONTAL_LINE}`}
-            y={coordinatesSize + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
-          />
-        ))}
-
-        {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
-          <use
-            key={index}
-            href={`#${VERTICAL_LINE}`}
-            x={(direction === 'ltr' ? coordinatesSize : 0) + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
-          />
-        ))}
-
-        {characterBonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        {word2Bonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_2}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        {word3Bonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_3}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        {word4Bonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_4}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        <rect
-          fill={COLOR_BONUS_START}
-          height={bonusSize}
-          rx={borderRadius}
-          width={bonusSize}
-          x={getX(center) + bonusOffset}
-          y={getY(center) + bonusOffset}
-        />
-
-        <Star
-          color="white"
-          height={iconSize}
-          width={iconSize}
-          x={getX(center) + iconOffset}
-          y={getY(center) + iconOffset}
-        />
-      </svg>
-    </Provider>,
+          </svg>
+        </Provider>,
+      ),
+    [
+      bonusOffset,
+      bonusSize,
+      borderRadius,
+      cellSize,
+      center,
+      characterBonuses,
+      config.boardHeight,
+      config.boardWidth,
+      coordinatesSize,
+      direction,
+      fontOffset,
+      fontSize,
+      getX,
+      getY,
+      iconOffset,
+      iconSize,
+      showCoordinates,
+      viewBoxHeight,
+      viewBoxWidth,
+      word2Bonuses,
+      word3Bonuses,
+      word4Bonuses,
+    ],
   );
 
-  const encodedSvg = useMemo(() => globalThis.btoa(backgroundSvg), [backgroundSvg]);
-  const dataUrl = `data:image/svg+xml;base64,${encodedSvg}`;
+  const dataUrl = useMemo(() => `data:image/svg+xml;base64,${globalThis.btoa(backgroundSvg)}`, [backgroundSvg]);
   return dataUrl;
 };

package/packages/scrabble-solver/src/components/Board/hooks/useBoardStyle.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, useMemo } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { getTileSizes } from 'lib';
 import { BORDER_WIDTH } from 'parameters';
 import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';

package/packages/scrabble-solver/src/components/Board/hooks/useFloatingActions.ts

@@ -1,6 +1,6 @@
 import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { BOARD_CELL_ACTIONS_OFFSET } from 'parameters';
 
 export const useFloatingActions = () => {

package/packages/scrabble-solver/src/components/Dictionary/Dictionary.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import {
   selectDictionaryError,
   selectDictionaryIsLoading,

package/packages/scrabble-solver/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type ChangeEvent, type FormEvent, type FunctionComponent } from 'react';
+import { type ChangeEvent, type FunctionComponent, type SubmitEvent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { LOCALE_FEATURES } from 'i18n';
@@ -22,7 +22,7 @@ export const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     dispatch(dictionarySlice.actions.changeInput(event.target.value));
   };
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: SubmitEvent<HTMLFormElement>) => {
     event.preventDefault();
     dispatch(dictionarySlice.actions.submit());
   };

package/packages/scrabble-solver/src/components/Logo/Logo.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { forwardRef } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { LOGO_SRC } from 'parameters';
 
 interface Props {

package/packages/scrabble-solver/src/components/NavButtons/NavButtons.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent, memo } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { CardChecklist, Cog, Eraser, Github, KeyboardFill, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectConfig, useTranslate, useTypedSelector } from 'state';

package/packages/scrabble-solver/src/components/Rack/Rack.tsx

@@ -16,7 +16,7 @@ import {
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { LOCALE_FEATURES } from 'i18n';
 import { createKeyboardNavigation, extractCharacters, extractInputValue, getTileSizes, isCtrl } from 'lib';
 import { rackSlice, selectConfig, selectInputMode, selectLocale, selectRack, useTypedSelector } from 'state';

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import {
   type CSSProperties,
   type ChangeEventHandler,
-  type FormEventHandler,
+  type SubmitEventHandler,
   forwardRef,
   useCallback,
   useEffect,
@@ -10,7 +10,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { rackSlice, selectConfig, useTranslate, useTypedSelector } from 'state';
 
 import styles from './InputPrompt.module.scss';
@@ -22,7 +22,7 @@ interface Props {
   value: string;
   onBlur: () => void;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  onSubmit: FormEventHandler<HTMLFormElement>;
+  onSubmit: SubmitEventHandler<HTMLFormElement>;
 }
 
 const InputPromptBase = forwardRef<HTMLFormElement, Props>(
@@ -33,7 +33,7 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
     const config = useTypedSelector(selectConfig);
     const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
 
-    const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
+    const handleSubmit: SubmitEventHandler<HTMLFormElement> = useCallback(
       (event) => {
         event.preventDefault();
         const characters = extractRack(config, value);

package/packages/scrabble-solver/src/components/Results/Header.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout, useColumns } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useColumns } from 'hooks';
 import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from 'icons';
 import { RESULTS_COLUMN_WIDTH } from 'parameters';
 import { ResultColumnId } from 'types';

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -3,7 +3,8 @@ import { type FocusEventHandler, type MouseEventHandler, type ReactElement, useR
 import Highlighter from 'react-highlight-words';
 import { type RowComponentProps } from 'react-window';
 
-import { useAppLayout, useColumns } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useColumns } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { noop } from 'lib';
 import {

package/packages/scrabble-solver/src/components/ResultsInput/ResultsInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type ChangeEvent, type FormEventHandler, type FunctionComponent, useState } from 'react';
+import { type ChangeEvent, type FunctionComponent, type SubmitEventHandler, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { isRegExp } from 'lib';
@@ -27,7 +27,7 @@ export const ResultsInput: FunctionComponent<Props> = ({ className }) => {
     }
   };
 
-  const handleSubmit: FormEventHandler = (event) => {
+  const handleSubmit: SubmitEventHandler = (event) => {
     event.preventDefault();
   };
 

package/packages/scrabble-solver/src/components/Solver/Solver.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import { type FunctionComponent, memo, type SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout, useIsTouchDevice } from 'hooks';
+import { useAppLayout } from 'app-layout';
+import { useIsTouchDevice } from 'hooks';
 import {
   resultsSlice,
   selectAreResultsOutdated,

package/packages/scrabble-solver/src/components/Tile/Tile.tsx

@@ -13,7 +13,7 @@ import {
   useRef,
 } from 'react';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout } from 'app-layout';
 import { getTileSizes, noop } from 'lib';
 import { selectLocale, useTypedSelector } from 'state';
 

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

@@ -1,4 +1,3 @@
-export { useAppLayout } from './useAppLayout';
 export { useColumns } from './useColumns';
 export { useDirection } from './useDirection';
 export { useEffectOnce } from './useEffectOnce';

package/packages/scrabble-solver/src/lib/isMac.ts

@@ -3,6 +3,5 @@ export const isMac = (): boolean => {
     return false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
   return globalThis.navigator.platform.startsWith('Mac') || globalThis.navigator.platform === 'iPhone';
 };

package/packages/scrabble-solver/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,8 +2,8 @@ import { type Result } from '@scrabble-solver/types';
 import { type FunctionComponent, memo, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { useAppLayout } from 'app-layout';
 import { Button, Dictionary, Modal, Results } from 'components';
-import { useAppLayout } from 'hooks';
 import { Check, EyeFill } from 'icons';
 import { resultsSlice, selectProcessedResults, selectResultCandidate, useTranslate, useTypedSelector } from 'state';
 

package/packages/scrabble-solver/src/pages/_app.tsx

@@ -4,6 +4,7 @@ import Head from 'next/head';
 import { type FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
+import { AppLayoutProvider } from 'app-layout';
 import { SeoMessage } from 'components';
 import { store } from 'state';
 
@@ -77,11 +78,13 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
     </Head>
 
     <Provider store={store}>
-      <SeoMessage />
+      <AppLayoutProvider>
+        <SeoMessage />
 
-      <FloatingDelayGroup delay={0}>
-        <Component {...pageProps} />
-      </FloatingDelayGroup>
+        <FloatingDelayGroup delay={0}>
+          <Component {...pageProps} />
+        </FloatingDelayGroup>
+      </AppLayoutProvider>
     </Provider>
   </>
 );