scrabble-solver 2.10.5 → 2.10.6

package/packages/scrabble-solver/package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.5",
+  "version": "2.10.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@scrabble-solver/scrabble-solver",
-      "version": "2.10.5",
+      "version": "2.10.6",
       "license": "CC BY-NC-ND 4.0",
       "dependencies": {
         "@kamilmielnik/trie": "^2.0.1",
         "@popperjs/core": "^2.11.6",
-        "@reduxjs/toolkit": "^1.9.2",
+        "@reduxjs/toolkit": "^1.9.3",
         "classnames": "^2.3.2",
         "include-media": "^2.0.0",
         "include-media-query-builder": "^1.1.0",
@@ -37,17 +37,17 @@
       "devDependencies": {
         "@svgr/webpack": "^6.5.1",
         "@types/classnames": "^2.3.0",
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.0.10",
+        "@types/react": "^18.0.28",
+        "@types/react-dom": "^18.0.11",
         "@types/react-modal": "^3.13.1",
         "@types/react-portal": "^4.0.4",
         "@types/react-redux": "^7.1.25",
         "@types/react-window": "^1.8.5",
         "@types/redux": "^3.6.31",
         "@types/redux-saga": "^0.10.5",
-        "@types/uuid": "^9.0.0",
+        "@types/uuid": "^9.0.1",
         "env-cmd": "^10.1.0",
-        "sass": "^1.57.1",
+        "sass": "^1.58.3",
         "workbox-webpack-plugin": "^6.5.4"
       },
       "engines": {
@@ -2157,9 +2157,9 @@
       "integrity": "sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA=="
     },
     "node_modules/@reduxjs/toolkit": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.2.tgz",
-      "integrity": "sha512-5ZAZ7hwAKWSii5T6NTPmgIBUqyVdlDs+6JjThz6J6dmHLDm6zCzv2OjHIFAi3Vvs1qjmXU0bm6eBojukYXjVMQ==",
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz",
+      "integrity": "sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==",
       "dependencies": {
         "immer": "^9.0.16",
         "redux": "^4.2.0",
@@ -2622,9 +2622,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
-      "version": "18.0.27",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
-      "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
+      "version": "18.0.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
+      "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2632,9 +2632,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.0.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
-      "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
+      "version": "18.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
+      "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
       "devOptional": true,
       "dependencies": {
         "@types/react": "*"
@@ -2720,9 +2720,9 @@
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
     "node_modules/@types/uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
       "dev": true
     },
     "node_modules/@webassemblyjs/ast": {
@@ -5635,9 +5635,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.57.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
-      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+      "version": "1.58.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
+      "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
       "devOptional": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -8184,9 +8184,9 @@
       "integrity": "sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA=="
     },
     "@reduxjs/toolkit": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.2.tgz",
-      "integrity": "sha512-5ZAZ7hwAKWSii5T6NTPmgIBUqyVdlDs+6JjThz6J6dmHLDm6zCzv2OjHIFAi3Vvs1qjmXU0bm6eBojukYXjVMQ==",
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz",
+      "integrity": "sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==",
       "requires": {
         "immer": "^9.0.16",
         "redux": "^4.2.0",
@@ -8484,9 +8484,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "@types/react": {
-      "version": "18.0.27",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
-      "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
+      "version": "18.0.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
+      "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -8494,9 +8494,9 @@
       }
     },
     "@types/react-dom": {
-      "version": "18.0.10",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
-      "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
+      "version": "18.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
+      "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
       "devOptional": true,
       "requires": {
         "@types/react": "*"
@@ -8581,9 +8581,9 @@
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
     "@types/uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
       "dev": true
     },
     "@webassemblyjs/ast": {
@@ -10769,9 +10769,9 @@
       }
     },
     "sass": {
-      "version": "1.57.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
-      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+      "version": "1.58.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
+      "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
       "devOptional": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",

package/packages/scrabble-solver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.5",
+  "version": "2.10.6",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,14 +30,14 @@
   "dependencies": {
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
-    "@reduxjs/toolkit": "^1.9.2",
-    "@scrabble-solver/configs": "^2.10.5",
-    "@scrabble-solver/constants": "^2.10.5",
-    "@scrabble-solver/dictionaries": "^2.10.5",
-    "@scrabble-solver/logger": "^2.10.5",
-    "@scrabble-solver/solver": "^2.10.5",
-    "@scrabble-solver/types": "^2.10.5",
-    "@scrabble-solver/word-definitions": "^2.10.5",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@scrabble-solver/configs": "^2.10.6",
+    "@scrabble-solver/constants": "^2.10.6",
+    "@scrabble-solver/dictionaries": "^2.10.6",
+    "@scrabble-solver/logger": "^2.10.6",
+    "@scrabble-solver/solver": "^2.10.6",
+    "@scrabble-solver/types": "^2.10.6",
+    "@scrabble-solver/word-definitions": "^2.10.6",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -63,17 +63,17 @@
   "devDependencies": {
     "@svgr/webpack": "^6.5.1",
     "@types/classnames": "^2.3.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.13.1",
     "@types/react-portal": "^4.0.4",
     "@types/react-redux": "^7.1.25",
     "@types/react-window": "^1.8.5",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "@types/uuid": "^9.0.0",
+    "@types/uuid": "^9.0.1",
     "env-cmd": "^10.1.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
   "gitHead": "1e2d1ad49a288d4a44196d8e3336740da132c637"

package/packages/scrabble-solver/src/components/Button/Button.module.scss

@@ -8,7 +8,6 @@
   padding: var(--spacing--m) var(--spacing--l);
   border: var(--border);
   border-radius: var(--border--radius);
-  color: var(--color--inactive);
   text-transform: uppercase;
   transition: var(--transition);
   cursor: pointer;
@@ -37,7 +36,7 @@
 
   &:focus,
   &:hover {
-    &.default {
+    &.default:not(:disabled) {
       .icon {
         color: var(--color--foreground--secondary);
       }
@@ -54,9 +53,7 @@
   }
 
   &[disabled] {
-    opacity: var(--opacity--disabled);
-    box-shadow: none;
-    cursor: not-allowed;
+    @include disabled;
   }
 }
 

package/packages/scrabble-solver/src/components/Solver/Solver.module.scss

@@ -47,6 +47,10 @@
   margin: 0 auto;
 }
 
+.submitInput {
+  display: none;
+}
+
 .column {
   display: flex;
   flex-direction: column;
@@ -58,6 +62,11 @@
   }
 }
 
+.resultsContainer {
+  flex: 1;
+  position: relative;
+}
+
 .dictionary {
   display: flex;
   flex-direction: column;
@@ -72,11 +81,6 @@
   flex: 0 0 auto;
 }
 
-.resultsContainer {
-  flex: 1;
-  position: relative;
-}
-
 .bottomContainer {
   flex: 0 0 auto;
   display: flex;
@@ -101,24 +105,8 @@
   border: var(--border);
 }
 
-.submitInput {
-  display: none;
-}
-
 .controls {
   width: 100%;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: var(--spacing--l);
-}
-
-.resultCandidatePicker {
-  flex: 1;
-}
-
-.apply {
-  flex: 0 0 auto;
 }
 
 .solve {

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

@@ -17,14 +17,10 @@ import {
 } from 'parameters';
 import {
   resultsSlice,
-  selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
-  selectSolveError,
   selectSortedFilteredResults,
-  selectSortedResults,
   solveSlice,
-  useTranslate,
   useTypedSelector,
 } from 'state';
 
@@ -32,11 +28,10 @@ import Board from '../Board';
 import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
-import ResultCandidatePicker from '../ResultCandidatePicker';
 import Results from '../Results';
 import Well from '../Well';
 
-import { ApplyButton, EmptyState, SolveButton } from './components';
+import { MobileControls, SolveButton } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -49,20 +44,21 @@ interface Props {
 // eslint-disable-next-line max-statements
 const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
   const dispatch = useDispatch();
-  const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
   const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
   const [resultsContainerRef, { width: resultsContainerWidth }] = useMeasure<HTMLDivElement>();
   const isLessThanXl = useMediaQuery('<xl');
   const isLessThanL = useMediaQuery('<l');
+  const isLessThanM = useMediaQuery('<m');
   const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
   const maxBoardWidth = width - resultsContainerWidth - (isLessThanL ? 0 : componentsSpacing) - 2 * componentsSpacing;
-  const maxBoardHeight = Math.max(height - bottomContainerHeight, isLessThanL ? 0 : COLUMN_MIN_HEIGHT);
+  const maxBoardHeight = Math.max(
+    height - bottomContainerHeight,
+    isLessThanL ? 0 : COLUMN_MIN_HEIGHT,
+    isLessThanM ? Number.POSITIVE_INFINITY : 0,
+  );
   const config = useTypedSelector(selectConfig);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const allResults = useTypedSelector(selectSortedResults);
-  const error = useTypedSelector(selectSolveError);
   const results = useTypedSelector(selectSortedFilteredResults);
   const [bestResult] = results || [];
   const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
@@ -159,43 +155,11 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
           </form>
 
           {isLessThanL && (
-            <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
-              {typeof error !== 'undefined' && (
-                <EmptyState variant="error" onClick={onShowResults}>
-                  {error.message}
-                </EmptyState>
-              )}
-
-              {typeof error === 'undefined' && typeof results === 'undefined' && (
-                <EmptyState variant="info" onClick={onShowResults}>
-                  {translate('results.empty-state.uninitialized')}
-                </EmptyState>
-              )}
-
-              {typeof error === 'undefined' && typeof results !== 'undefined' && typeof allResults !== 'undefined' && (
-                <>
-                  {(isOutdated || !resultCandidate) && (
-                    <EmptyState variant="info" onClick={onShowResults}>
-                      {translate('results.empty-state.outdated')}
-                    </EmptyState>
-                  )}
-
-                  {!isOutdated && allResults.length === 0 && (
-                    <EmptyState variant="warning" onClick={onShowResults}>
-                      {translate('results.empty-state.no-results')}
-                    </EmptyState>
-                  )}
-
-                  {!isOutdated && allResults.length > 0 && resultCandidate && (
-                    <ResultCandidatePicker className={styles.resultCandidatePicker} onClick={onShowResults} />
-                  )}
-                </>
-              )}
-
-              {allResults && allResults.length > 0 && !isOutdated && resultCandidate && (
-                <ApplyButton className={classNames(styles.submit, styles.apply)} />
-              )}
-            </div>
+            <MobileControls
+              className={styles.controls}
+              style={{ maxWidth: maxControlsWidth }}
+              onShowResults={onShowResults}
+            />
           )}
         </div>
       </div>

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

@@ -0,0 +1,62 @@
+import { FunctionComponent, HTMLProps } from 'react';
+
+import {
+  selectAreResultsOutdated,
+  selectResultCandidate,
+  selectSolveError,
+  selectSortedResults,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
+
+import EmptyState from '../EmptyState';
+import ResultCandidatePicker from '../ResultCandidatePicker';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  onShowResults: () => void;
+}
+
+// eslint-disable-next-line max-statements
+const MobileControls: FunctionComponent<Props> = ({ onShowResults, ...props }) => {
+  const translate = useTranslate();
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const allResults = useTypedSelector(selectSortedResults);
+  const error = useTypedSelector(selectSolveError);
+
+  return (
+    <div {...props}>
+      {typeof error !== 'undefined' && (
+        <EmptyState variant="error" onClick={onShowResults}>
+          {error.message}
+        </EmptyState>
+      )}
+
+      {typeof error === 'undefined' && typeof allResults === 'undefined' && (
+        <EmptyState variant="info" onClick={onShowResults}>
+          {translate('results.empty-state.uninitialized')}
+        </EmptyState>
+      )}
+
+      {typeof error === 'undefined' && typeof allResults !== 'undefined' && (
+        <>
+          {(isOutdated || !resultCandidate) && (
+            <EmptyState variant="info" onClick={onShowResults}>
+              {translate('results.empty-state.outdated')}
+            </EmptyState>
+          )}
+
+          {!isOutdated && allResults.length === 0 && (
+            <EmptyState variant="warning" onClick={onShowResults}>
+              {translate('results.empty-state.no-results')}
+            </EmptyState>
+          )}
+
+          {!isOutdated && allResults.length > 0 && resultCandidate && <ResultCandidatePicker onClick={onShowResults} />}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MobileControls;

package/packages/scrabble-solver/src/components/Solver/components/MobileControls/index.ts

@@ -0,0 +1 @@
+export { default } from './MobileControls';

package/packages/scrabble-solver/src/components/{ResultCandidatePicker → Solver/components/ResultCandidatePicker}/ResultCandidatePicker.module.scss

@@ -1,9 +1,51 @@
 @import 'styles/mixins';
 
 .resultCandidatePicker {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing--l);
+}
+
+.buttons {
+  flex: 0 0 auto;
+  display: flex;
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
+
+  @include media('<xs') {
+    display: none;
+  }
+}
+
+.button {
+  padding: var(--spacing--m);
+  box-shadow: none;
+
+  &:focus-within {
+    z-index: 1;
+  }
+
+  &:first-child {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    transform: rotate(180deg);
+  }
+}
+
+.resultCandidate {
   @include button-reset;
   @include focus-effect;
 
+  flex: 1;
   display: flex;
   align-items: center;
   min-width: 0;
@@ -15,9 +57,7 @@
   cursor: pointer;
 
   &[disabled] {
-    opacity: var(--opacity--disabled);
-    box-shadow: none;
-    cursor: not-allowed;
+    @include disabled;
   }
 }
 
@@ -74,3 +114,7 @@
   height: $size;
   color: var(--color--inactive);
 }
+
+.apply {
+  flex: 0 0 auto;
+}

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

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
+import {
+  resultsSlice,
+  selectAreResultsOutdated,
+  selectLocale,
+  selectResultCandidate,
+  selectSortedResults,
+  useTypedSelector,
+} from 'state';
+
+import Button from '../../../Button';
+import ApplyButton from '../ApplyButton';
+
+import styles from './ResultCandidatePicker.module.scss';
+
+const ResultCandidatePicker: FunctionComponent<HTMLProps<HTMLDivElement>> = ({ className, ...props }) => {
+  const dispatch = useDispatch();
+  const locale = useTypedSelector(selectLocale);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const sortedResults = useTypedSelector(selectSortedResults);
+  const results = sortedResults || [];
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+
+  if (!resultCandidate) {
+    return null;
+  }
+
+  const index = results.findIndex((result) => result.id === resultCandidate.id);
+  const isPreviousDisabled = index <= 0;
+  const isNextDisabled = index >= results.length - 1;
+
+  const handleNextClick = () => {
+    if (!isNextDisabled) {
+      const nextResult = results[index + 1];
+      dispatch(resultsSlice.actions.changeResultCandidate(nextResult));
+    }
+  };
+
+  const handlePreviousClick = () => {
+    if (!isPreviousDisabled) {
+      const previousResult = results[index - 1];
+      dispatch(resultsSlice.actions.changeResultCandidate(previousResult));
+    }
+  };
+
+  return (
+    <div className={classNames(styles.resultCandidatePicker, className)} {...props}>
+      <div className={styles.buttons}>
+        <Button
+          className={styles.button}
+          disabled={isPreviousDisabled}
+          Icon={ChevronLeft}
+          onClick={handlePreviousClick}
+        />
+        <Button className={styles.button} disabled={isNextDisabled} Icon={ChevronRight} onClick={handleNextClick} />
+      </div>
+
+      <button className={styles.resultCandidate} disabled={isOutdated} type="button">
+        <div className={styles.points}>{resultCandidate.points.toLocaleString(locale)}</div>
+        <div className={styles.word}>{resultCandidate.word}</div>
+        <div className={styles.iconContainer}>
+          <ChevronDown className={styles.icon} />
+        </div>
+      </button>
+
+      <ApplyButton className={styles.apply} />
+    </div>
+  );
+};
+
+export default ResultCandidatePicker;

package/packages/scrabble-solver/src/components/Solver/components/index.ts

@@ -1,3 +1,5 @@
 export { default as ApplyButton } from './ApplyButton';
 export { default as EmptyState } from './EmptyState';
+export { default as MobileControls } from './MobileControls';
+export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as SolveButton } from './SolveButton';

package/packages/scrabble-solver/src/components/SquareButton/SquareButton.module.scss

@@ -20,8 +20,7 @@
   }
 
   &[disabled] {
-    pointer-events: none;
-    opacity: var(--opacity--disabled);
+    @include disabled;
   }
 }
 

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

@@ -16,7 +16,6 @@ export { default as PlainTiles } from './PlainTiles';
 export { default as Progress } from './Progress';
 export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
-export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
 export { default as Sizer } from './Sizer';

package/packages/scrabble-solver/src/icons/ChevronLeft.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-left/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill="currentColor" fill-rule="evenodd" />
+</svg>

package/packages/scrabble-solver/src/icons/ChevronRight.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-right/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" fill="currentColor" fill-rule="evenodd" />
+</svg>