@scrabble-solver/scrabble-solver 2.10.3 → 2.10.4

package/src/components/{Screen/Screen.module.scss → SplashScreen/SplashScreen.module.scss}

@@ -1,6 +1,4 @@
-$z-index: 100;
-
-.screen {
+.splashScreen {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -8,15 +6,7 @@ $z-index: 100;
   right: 0;
   background-color: var(--color--background);
   opacity: 1;
-  z-index: $z-index;
-}
-
-.closeButton {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: $z-index + 1;
-  margin: var(--spacing--l);
+  z-index: var(--z-index--modal);
 }
 
 .content {

package/src/components/{Screen/Screen.tsx → SplashScreen/SplashScreen.tsx}

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { AnimationEventHandler, FunctionComponent, ReactNode } from 'react';
 
-import styles from './Screen.module.scss';
+import styles from './SplashScreen.module.scss';
 
 interface Props {
   children?: ReactNode;
@@ -10,10 +10,10 @@ interface Props {
   onAnimationEnd?: AnimationEventHandler<HTMLDivElement>;
 }
 
-const Screen: FunctionComponent<Props> = ({ children, className, contentClassName, onAnimationEnd }) => (
-  <div className={classNames(styles.screen, className)} onAnimationEnd={onAnimationEnd}>
+const SplashScreen: FunctionComponent<Props> = ({ children, className, contentClassName, onAnimationEnd }) => (
+  <div className={classNames(styles.splashScreen, className)} onAnimationEnd={onAnimationEnd}>
     <div className={classNames(styles.content, contentClassName)}>{children}</div>
   </div>
 );
 
-export default Screen;
+export default SplashScreen;

package/src/components/SplashScreen/index.ts

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

package/src/components/SquareButton/SquareButton.module.scss

@@ -21,7 +21,7 @@
 
   &[disabled] {
     pointer-events: none;
-    opacity: 0.25;
+    opacity: var(--opacity--disabled);
   }
 }
 
@@ -32,8 +32,8 @@
 }
 
 .icon {
-  width: var(--square-button-size);
-  height: var(--square-button-size);
+  width: var(--square-button--size);
+  height: var(--square-button--size);
   pointer-events: none;
   color: inherit;
   transition: var(--transition);

package/src/components/Tile/Tile.module.scss

@@ -13,34 +13,24 @@
 
   &.points1 {
     --background-color: var(--color--yellow);
-
-    background-color: var(--background-color);
   }
 
   &.points2 {
     --background-color: var(--color--green);
-
-    background-color: var(--background-color);
   }
 
   &.points3,
   &.points4 {
     --background-color: var(--color--blue);
-
-    background-color: var(--background-color);
   }
 
   &.points5 {
     --background-color: var(--color--red);
-
-    background-color: var(--background-color);
   }
 
   &.blank {
     --background-color: white;
 
-    background-color: var(--background-color);
-
     .character {
       color: black;
     }
@@ -49,7 +39,6 @@
   &.highlighted {
     --background-color: var(--color--primary);
 
-    background-color: var(--background-color);
     color: white;
 
     .character {
@@ -64,7 +53,6 @@
   &.invalid {
     --background-color: var(--color--red--light);
 
-    background-color: var(--background-color);
     color: var(--color--error);
   }
 }
@@ -86,11 +74,11 @@
     color: var(--color--inactive);
   }
 
-  &::selection {
-    background: transparent;
+  &:not(:disabled)::selection {
+    --background--color: transparent;
   }
 
-  &:disabled {
+  &[disabled] {
     color: inherit;
   }
 }
@@ -104,6 +92,10 @@
   pointer-events: none;
   letter-spacing: -1px;
 
+  @include media('<xs') {
+    display: none;
+  }
+
   [dir='ltr'] & {
     bottom: 1%;
     right: 9%;

package/src/components/Tooltip/Tooltip.module.scss

@@ -12,7 +12,6 @@ $arrow-size: 4px;
   border-radius: var(--border--radius);
   background-color: var(--tooltip--background);
   color: var(--tooltip--foreground);
-  font-size: var(--font--size--s);
   z-index: 200;
 
   &.top {

package/src/components/index.ts

@@ -6,26 +6,25 @@ export { default as Dictionary } from './Dictionary';
 export { default as DictionaryInput } from './DictionaryInput';
 export { default as EmptyState } from './EmptyState';
 export { default as Key } from './Key';
-export { default as KeyMap } from './KeyMap';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
+export { default as LogoSplashScreen } from './LogoSplashScreen';
+export { default as Modal } from './Modal';
 export { default as NavButtons } from './NavButtons';
 export { default as NotFound } from './NotFound';
 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 RemainingTiles } from './RemainingTiles';
+export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
-export { default as Screen } from './Screen';
-export { default as Settings } from './Settings';
-export { default as Sidebar } from './Sidebar';
+export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
-export { default as Splash } from './Splash';
+export { default as SplashScreen } from './SplashScreen';
 export { default as SquareButton } from './SquareButton';
 export { default as SvgFontCss } from './SvgFontCss';
 export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';
 export { default as Well } from './Well';
-export { default as Words } from './Words';

package/src/hooks/index.ts

@@ -1,7 +1,7 @@
 export { default as useDirection } from './useDirection';
-export { default as useIsTablet } from './useIsTablet';
 export { default as useIsTouchDevice } from './useIsTouchDevice';
 export { default as useLanguage } from './useLanguage';
 export { default as useLocalStorage } from './useLocalStorage';
+export { default as useMediaQuery } from './useMediaQuery';
 export { default as usePortal } from './usePortal';
 export { default as useUniqueId } from './useUniqueId';

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,11 @@
+import { buildMediaQuery } from 'include-media-query-builder';
+import { useMedia } from 'react-use';
+
+import { BREAKPOINTS } from 'parameters';
+
+const useMediaQuery = (query: string | string[], defaultState?: boolean | undefined): boolean => {
+  const mediaQuery = buildMediaQuery(BREAKPOINTS, query);
+  return useMedia(mediaQuery, defaultState);
+};
+
+export default useMediaQuery;

package/src/hooks/usePortal.tsx

@@ -29,7 +29,7 @@ const usePortal = (children: ReactNode, { disabled = false, tagName = 'div' }: P
       // "Attempted to synchronously unmount a root while React was already
       // rendering. React cannot finish unmounting the root until the current
       // render has completed, which may lead to a race condition.""
-      setTimeout(() => {
+      globalThis.setTimeout(() => {
         rootRef.current = null;
         root.unmount();
         element.remove();

package/src/i18n/de.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Lösen starten",
   "keyMap.rack": "Ablage",
   "keyMap.rack.insert-blank": "Blanko hinzufügen (Leertaste)",
+  "menu": "Menü",
   "rack.placeholder": "Steine…",
   "remaining-tiles": "Restliche Steine",
+  "results": "Ergebnisse",
   "results.empty-state.no-filtered-results": "Keine Ergebnisse für diese Anfrage.",
   "results.empty-state.no-results": "Keine Ergebnisse - kein Wort konnte generiert werden.",
   "results.empty-state.outdated": "Ergebnisse sind alt. Klicken zum Aktualisieren.",

package/src/i18n/en.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Start solving",
   "keyMap.rack": "Rack",
   "keyMap.rack.insert-blank": "Insert blank (spacebar)",
+  "menu": "Menu",
   "rack.placeholder": "Letters",
   "remaining-tiles": "Remaining tiles",
+  "results": "Results",
   "results.empty-state.no-filtered-results": "No result matches this query.",
   "results.empty-state.no-results": "No results - unable to generate any words.",
   "results.empty-state.outdated": "Results are outdated. Click below to update.",

package/src/i18n/es.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Empezar a resolver",
   "keyMap.rack": "Estante",
   "keyMap.rack.insert-blank": "Insertar espacio en blanco (barra espaciadora)",
+  "menu": "Menú",
   "rack.placeholder": "Letras…",
   "remaining-tiles": "Casillas restantes",
+  "results": "Resultados",
   "results.empty-state.no-filtered-results": "Ningún resultado coincide con esta consulta.",
   "results.empty-state.no-results": "No hay resultados; no se pueden generar palabras",
   "results.empty-state.outdated": "Los resultados están desactualizados. Haga clic a continuación para actualizar.",

package/src/i18n/fa.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "حل کردن",
   "keyMap.rack": "طاقچه",
   "keyMap.rack.insert-blank": "وارد کردن کاشی خالی (دکمه اسپیس)",
+  "menu": "منو",
   "rack.placeholder": "لیستحرف",
   "remaining-tiles": "کاشی های باقی مانده",
+  "results": "نتایج",
   "results.empty-state.no-filtered-results": "پاسخی یافت نشد.",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
   "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",

package/src/i18n/fr.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Commencer la résolution",
   "keyMap.rack": "Chevalet",
   "keyMap.rack.insert-blank": "Inserer une case vide (spacebar)",
+  "menu": "Menu",
   "rack.placeholder": "Lettres",
   "remaining-tiles": "Cases restantes",
+  "results": "Résultats",
   "results.empty-state.no-filtered-results": "Aucun résultat ne correspond à cette requête",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
   "results.empty-state.outdated": "Les résultats sont dépassé. Cliquer ci-dessous pour mettre à jour.",

package/src/i18n/pl.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Rozpocznij wyszukiwanie",
   "keyMap.rack": "Stojak",
   "keyMap.rack.insert-blank": "Wstaw blanka (spacja)",
+  "menu": "Menu",
   "rack.placeholder": "Literki",
   "remaining-tiles": "Pozostałe płytki",
+  "results": "Wyniki",
   "results.empty-state.no-filtered-results": "Żaden wynik nie pasuje do tej kwerendy.",
   "results.empty-state.no-results": "Brak wyników - nie można wygenerować żadnego słowa.",
   "results.empty-state.outdated": "Wyniki są nieaktualne. Kliknij poniżej, aby zaktualizować.",

package/src/icons/CardChecklist.svg

@@ -0,0 +1,5 @@
+<!-- https://icons.getbootstrap.com/icons/card-checklist/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z" fill="currentColor" />
+  <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z" fill="currentColor" />
+</svg>

package/src/icons/Check.svg

@@ -1,4 +1,4 @@
-<!-- https://icons.getbootstrap.com/icons/check/ -->
+<!-- https://icons.getbootstrap.com/icons/check2/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" fill="currentColor" />
+  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" fill="currentColor" />
 </svg>

package/src/icons/ChevronDown.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-down/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" fill="currentColor" />
+</svg>

package/src/icons/CrossCircleFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/x-circle-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" fill="currentColor" />
+</svg>

package/src/icons/ExclamationTriangleFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/exclamation-triangle-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" fill="currentColor" />
+</svg>

package/src/icons/InfoCircleFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/info-circle-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" fill="currentColor" />
+</svg>

package/src/icons/List.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/list/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" >
+  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" fill="currentColor" />
+</svg>

package/src/icons/Search.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/search/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -3,15 +3,19 @@ export { default as ArrowLeft } from './ArrowLeft.svg';
 export { default as ArrowRight } from './ArrowRight.svg';
 export { default as ArrowUp } from './ArrowUp.svg';
 export { default as BookHalf } from './BookHalf.svg';
+export { default as CardChecklist } from './CardChecklist.svg';
 export { default as Check } from './Check.svg';
 export { default as CheckboxChecked } from './CheckboxChecked.svg';
 export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
+export { default as ChevronDown } from './ChevronDown.svg';
 export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.svg';
-export { default as CrossFill } from './CrossFill.svg';
+export { default as CrossCircleFill } from './CrossCircleFill.svg';
+export { default as CrossSquareFill } from './CrossSquareFill.svg';
 export { default as DashCircleFill } from './DashCircleFill.svg';
 export { default as Eraser } from './Eraser.svg';
 export { default as ExclamationSquareFill } from './ExclamationSquareFill.svg';
+export { default as ExclamationTriangleFill } from './ExclamationTriangleFill.svg';
 export { default as Flag } from './Flag.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFa } from './FlagFa.svg';
@@ -21,9 +25,11 @@ export { default as FlagPl } from './FlagPl.svg';
 export { default as FlagUs } from './FlagUs.svg';
 export { default as FlagDe } from './FlagDe.svg';
 export { default as Github } from './Github.svg';
+export { default as InfoCircleFill } from './InfoCircleFill.svg';
 export { default as Keyboard } from './Keyboard.svg';
-export { default as Play } from './Play.svg';
+export { default as List } from './List.svg';
 export { default as Sack } from './Sack.svg';
+export { default as Search } from './Search.svg';
 export { default as SortDown } from './SortDown.svg';
 export { default as SortUp } from './SortUp.svg';
 export { default as Star } from './Star.svg';

package/src/{components/KeyMap/KeyMap.tsx → modals/KeyMapModal/KeyMapModal.tsx}

@@ -1,10 +1,8 @@
 import { FunctionComponent } from 'react';
 
+import { Key, Modal } from 'components';
 import { selectConfig, useTranslate, useTypedSelector } from 'state';
 
-import Key from '../Key';
-import Sidebar from '../Sidebar';
-
 import { Mapping } from './components';
 import { ARROWS, BACKSPACE, CTRL, DEL, ENTER, SPACE } from './keys';
 
@@ -14,13 +12,13 @@ interface Props {
   onClose: () => void;
 }
 
-const KeyMap: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const config = useTypedSelector(selectConfig);
 
   return (
-    <Sidebar className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
-      <Sidebar.Section title={translate('keyMap.board-and-rack')}>
+    <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
+      <Modal.Section title={translate('keyMap.board-and-rack')}>
         <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[ARROWS]} />
         <Mapping description={translate('keyMap.board-and-rack.remove-tile')} mapping={[DEL, BACKSPACE]} />
         <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[ENTER]} />
@@ -39,18 +37,18 @@ const KeyMap: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
             ]}
           />
         )}
-      </Sidebar.Section>
+      </Modal.Section>
 
-      <Sidebar.Section title={translate('keyMap.board')}>
+      <Modal.Section title={translate('keyMap.board')}>
         <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE, [CTRL, <Key key="b">B</Key>]]} />
         <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[[CTRL, ARROWS]]} />
-      </Sidebar.Section>
+      </Modal.Section>
 
-      <Sidebar.Section title={translate('keyMap.rack')}>
+      <Modal.Section title={translate('keyMap.rack')}>
         <Mapping description={translate('keyMap.rack.insert-blank')} mapping={[SPACE]} />
-      </Sidebar.Section>
-    </Sidebar>
+      </Modal.Section>
+    </Modal>
   );
 };
 
-export default KeyMap;
+export default KeyMapModal;

package/src/modals/KeyMapModal/index.ts

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

package/src/{components/KeyMap → modals/KeyMapModal}/keys.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 
+import { Key } from 'components';
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'icons';
 import { isMac } from 'lib';
 
-import Key from '../Key';
-
 export const ARROW_DOWN = (
   <Key>
     <ArrowLeft />

package/src/modals/MenuModal/MenuModal.module.scss

@@ -0,0 +1,46 @@
+@import 'styles/mixins';
+
+.button {
+  @include button-reset;
+  @include focus-effect;
+
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing--l);
+  margin-bottom: var(--spacing--m);
+  padding: var(--spacing--m);
+  border: var(--border);
+  border-radius: var(--border--radius);
+  background-color: var(--color--background--overlay);
+  transition: var(--transition);
+  cursor: pointer;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:focus,
+  &:hover {
+    text-decoration: none;
+
+    .icon {
+      color: var(--color--foreground--secondary);
+    }
+  }
+}
+
+.icon {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+  flex: 0 0 auto;
+  color: var(--color--inactive);
+  transition: var(--transition);
+}
+
+.content {
+  flex: 1;
+  text-align: left;
+}

package/src/modals/MenuModal/MenuModal.tsx

@@ -0,0 +1,54 @@
+import { FunctionComponent } from 'react';
+
+import { Modal } from 'components';
+import { CardChecklist, Cog, Github, Sack } from 'icons';
+import { GITHUB_PROJECT_URL } from 'parameters';
+import { useTranslate } from 'state';
+
+import styles from './MenuModal.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onShowRemainingTiles: () => void;
+  onShowSettings: () => void;
+  onShowWords: () => void;
+}
+
+const Menu: FunctionComponent<Props> = ({
+  className,
+  isOpen,
+  onClose,
+  onShowRemainingTiles,
+  onShowSettings,
+  onShowWords,
+}) => {
+  const translate = useTranslate();
+
+  return (
+    <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
+      <button className={styles.button} onClick={onShowRemainingTiles}>
+        <Sack className={styles.icon} />
+        <div className={styles.content}>{translate('remaining-tiles')}</div>
+      </button>
+
+      <button className={styles.button} onClick={onShowWords}>
+        <CardChecklist className={styles.icon} />
+        <div className={styles.content}>{translate('words')}</div>
+      </button>
+
+      <a className={styles.button} href={GITHUB_PROJECT_URL} rel="noopener noreferrer" target="_blank">
+        <Github className={styles.icon} />
+        <div className={styles.content}>{translate('github')}</div>
+      </a>
+
+      <button className={styles.button} onClick={onShowSettings}>
+        <Cog className={styles.icon} />
+        <div className={styles.content}>{translate('settings')}</div>
+      </button>
+    </Modal>
+  );
+};
+
+export default Menu;

package/src/modals/MenuModal/index.ts

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

package/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss

@@ -0,0 +1,28 @@
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing--l);
+}
+
+.badge {
+  [dir='ltr'] & {
+    margin-left: var(--spacing--m);
+  }
+
+  [dir='rtl'] & {
+    margin-right: var(--spacing--m);
+  }
+}
+
+.character {
+  display: flex;
+  flex: 0 1;
+  max-width: 50px;
+}