ui: highlight the second-focused key in the All keys row

Solid outline in --accent, distinct from the focused key's
--secondary-l2.

Author: jpds

packages/keybr-lesson-ui/lib/Key.test.tsx

@@ -57,6 +57,31 @@ test("render included", () => {
   r.unmount();
 });
 
+test("render second focused", () => {
+  const key = new LessonKey({
+    letter: FakePhoneticModel.letter1,
+    samples: [],
+    timeToType: null,
+    bestTimeToType: null,
+    confidence: null,
+    bestConfidence: null,
+  }).asSecondFocused();
+
+  const r = render(
+    <FakeIntlProvider>
+      <FakeSettingsContext>
+        <Key lessonKey={key} />
+      </FakeSettingsContext>
+    </FakeIntlProvider>,
+  );
+
+  const elem = r.container.querySelector(".lessonKey_secondFocused");
+  isNotNull(elem);
+  equal(Key.attached(elem), key);
+
+  r.unmount();
+});
+
 test("render focused", () => {
   const key = new LessonKey({
     letter: FakePhoneticModel.letter1,

packages/keybr-lesson-ui/lib/Key.tsx

@@ -24,6 +24,7 @@ export const Key = ({
     confidence,
     isIncluded,
     isFocused,
+    isSecondFocused,
     isForced,
   } = lessonKey;
   return (
@@ -40,6 +41,7 @@ export const Key = ({
         isIncluded && confidence == null && styles.lessonKey_uncalibrated,
         isIncluded && isFocused && styles.lessonKey_focused,
         isIncluded && isForced && styles.lessonKey_forced,
+        isSecondFocused && styles.lessonKey_secondFocused,
         isSelectable && styles.lessonKey_selectable,
         isCurrent && styles.lessonKey_current,
       )}

packages/keybr-lesson-ui/lib/KeyLegend.test.tsx

@@ -37,3 +37,21 @@ test("render included", () => {
 
   r.unmount();
 });
+
+test("render second focused", () => {
+  const r = render(
+    <FakeIntlProvider>
+      <KeyLegend
+        isIncluded={false}
+        confidence={null}
+        isFocused={false}
+        isForced={false}
+        isSecondFocused={true}
+      />
+    </FakeIntlProvider>,
+  );
+
+  isNotNull(r.container.querySelector(".lessonKey_secondFocused"));
+
+  r.unmount();
+});

packages/keybr-lesson-ui/lib/KeyLegend.tsx

@@ -8,6 +8,7 @@ export const KeyLegend = ({
   isIncluded,
   isFocused,
   isForced,
+  isSecondFocused = false,
   size = "normal",
   title,
   ...props
@@ -16,6 +17,7 @@ export const KeyLegend = ({
   isIncluded: boolean;
   isFocused: boolean;
   isForced: boolean;
+  isSecondFocused?: boolean;
   size?: "normal" | "large";
   title?: string;
 } & MouseProps) => {
@@ -31,6 +33,7 @@ export const KeyLegend = ({
         isIncluded && confidence == null && styles.lessonKey_uncalibrated,
         isIncluded && isFocused && styles.lessonKey_focused,
         isIncluded && isForced && styles.lessonKey_forced,
+        isSecondFocused && styles.lessonKey_secondFocused,
       )}
       style={keyStyles(isIncluded ?? false, confidence ?? null)}
       title={title}

packages/keybr-lesson-ui/lib/KeyLegendList.tsx

@@ -52,6 +52,19 @@ export const KeyLegendList = () => {
           defaultMessage="A key with increased frequency. It takes you the most time to find this key so the algorithm chose it to be included in every generated word."
         />
       </li>
+      <li>
+        <KeyLegend //
+          isIncluded={false}
+          confidence={null}
+          isFocused={false}
+          isForced={false}
+          isSecondFocused={true}
+        />{" "}
+        <FormattedMessage
+          id="lesson.indicator.secondFocused"
+          defaultMessage="A locked key that will unlock next, or an already-included key that needs more practice, mixed into the lesson early as a preview."
+        />
+      </li>
       <li>
         <KeyLegend //
           isIncluded={true}

packages/keybr-lesson-ui/lib/styles.module.less

@@ -59,6 +59,10 @@
   text-decoration: underline;
 }
 
+.lessonKey_secondFocused {
+  outline: 1px solid var(--LessonKey--secondFocused__outline-color);
+}
+
 .lessonKey_selectable {
   cursor: pointer;
 }

packages/keybr-theme-designer/lib/design/LessonKeysPreview.tsx

@@ -22,6 +22,7 @@ export function LessonKeysPreview() {
               bestConfidence: value,
               isIncluded: true,
               isFocused: value === 0.0,
+              isSecondFocused: value === 0.1,
               isForced: false,
             })
           }

packages/keybr-themes/lib/themes/theme.less

@@ -25,6 +25,7 @@
   --LessonKey--uncalibrated__background-color: var(--primary-d1);
   --LessonKey--uncalibrated__outline-color: transparent;
   --LessonKey--focused__outline-color: var(--secondary-l2);
+  --LessonKey--secondFocused__outline-color: var(--accent);
   --LessonKey--forced__outline-color: transparent;
   --LessonKey--current__outline-color: var(--secondary-l2);
 

packages/page-practice/lib/settings/lesson/GuidedLessonSettings.tsx

@@ -10,6 +10,7 @@ import { RecoverKeysProp } from "./RecoverKeysProp.tsx";
 import { RepeatWordsProp } from "./RepeatWordsProp.tsx";
 import { TargetSpeedProp } from "./TargetSpeedProp.tsx";
 import { TextManglingProp } from "./TextManglingProp.tsx";
+import { TrainSecondKeyProp } from "./TrainSecondKeyProp.tsx";
 
 export function GuidedLessonSettings({
   lesson,
@@ -37,6 +38,7 @@ export function GuidedLessonSettings({
         <RecoverKeysProp />
         <KeyboardOrderProp />
         <NaturalWordsProp />
+        <TrainSecondKeyProp />
         <RepeatWordsProp />
         <AlphabetSizeProp />
         <TextManglingProp />

packages/page-practice/lib/settings/lesson/TrainSecondKeyProp.tsx

@@ -0,0 +1,44 @@
+import { lessonProps } from "@keybr/lesson";
+import { useSettings } from "@keybr/settings";
+import {
+  CheckBox,
+  Description,
+  Explainer,
+  Field,
+  FieldList,
+} from "@keybr/widget";
+import { type ReactNode } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+export function TrainSecondKeyProp(): ReactNode {
+  const { formatMessage } = useIntl();
+  const { settings, updateSettings } = useSettings();
+  return (
+    <>
+      <FieldList>
+        <Field>
+          <CheckBox
+            label={formatMessage({
+              id: "settings.trainSecondKey.label",
+              defaultMessage: "Train second key",
+            })}
+            checked={settings.get(lessonProps.guided.trainSecondKey)}
+            onChange={(value) => {
+              updateSettings(
+                settings.set(lessonProps.guided.trainSecondKey, value),
+              );
+            }}
+          />
+        </Field>
+      </FieldList>
+      <Explainer>
+        <Description>
+          <FormattedMessage
+            id="settings.trainSecondKey.description"
+            defaultMessage="Occasionally mix in words for a second key alongside the one you are focused on: the next letter to unlock, or, once every letter is unlocked, your second-weakest key."
+          />
+        </Description>
+      </Explainer>
+    </>
+  );
+}