web: show error text on settings number input's out of range

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

Author: 01zulfi

apps/web/src/dialogs/settings/index.tsx

@@ -580,23 +580,12 @@ function SettingItem(props: { item: Setting }) {
                 );
               case "input":
                 return component.inputType === "number" ? (
-                  <Input
-                    type={"number"}
+                  <NumberInput
                     min={component.min}
                     max={component.max}
                     step={component.step}
                     defaultValue={component.defaultValue()}
-                    sx={{ width: 80, mr: 1 }}
-                    onChange={debounce((e) => {
-                      let value = e.target.valueAsNumber;
-                      value =
-                        Number.isNaN(value) || value < component.min
-                          ? component.min
-                          : value > component.max
-                          ? component.max
-                          : value;
-                      component.onChange(value);
-                    }, 500)}
+                    onChange={(value) => component.onChange(value)}
                   />
                 ) : (
                   <Input
@@ -665,3 +654,60 @@ export function SelectComponent(props: Omit<DropdownSettingComponent, "type">) {
     </select>
   );
 }
+
+type NumberInputProps = {
+  min: number;
+  max: number;
+  step?: number;
+  defaultValue: number;
+  onChange: (value: number) => void;
+};
+
+function NumberInput({
+  min,
+  max,
+  step,
+  defaultValue,
+  onChange
+}: NumberInputProps) {
+  const [isInputValid, setIsInputValid] = useState(true);
+
+  return (
+    <Flex sx={{ flexDirection: "column", alignItems: "flex-end" }}>
+      <Input
+        type={"number"}
+        min={min}
+        max={max}
+        step={step}
+        defaultValue={defaultValue}
+        sx={{
+          width: 80,
+          mr: 1,
+          outline: isInputValid
+            ? undefined
+            : "2px solid var(--accent-error) !important"
+        }}
+        onChange={debounce((e) => {
+          let value = e.target.valueAsNumber;
+          const isValid = !Number.isNaN(value) && value >= min && value <= max;
+          setIsInputValid(isValid);
+          value =
+            Number.isNaN(value) || value < min
+              ? min
+              : value > max
+              ? max
+              : value;
+          onChange(value);
+        }, 500)}
+      />
+      {!isInputValid && (
+        <Text
+          variant="subBody"
+          sx={{ fontSize: 11, color: "error", mt: 1, mr: 1 }}
+        >
+          {strings.valueMustBeBetween(min, max)}
+        </Text>
+      )}
+    </Flex>
+  );
+}

packages/intl/locale/en.po

@@ -6988,6 +6988,10 @@ msgstr "Using official Notesnook instance"
 msgid "v{version} available"
 msgstr "v{version} available"
 
+#: src/strings.ts:2627
+msgid "Value must be between {min} and {max}"
+msgstr "Value must be between {min} and {max}"
+
 #: src/strings.ts:1171
 msgid "Vault"
 msgstr "Vault"

packages/intl/locale/pseudo-LOCALE.po

@@ -6938,6 +6938,10 @@ msgstr ""
 msgid "v{version} available"
 msgstr ""
 
+#: src/strings.ts:2627
+msgid "Value must be between {min} and {max}"
+msgstr ""
+
 #: src/strings.ts:1171
 msgid "Vault"
 msgstr ""

packages/intl/src/strings.ts

@@ -2622,5 +2622,7 @@ Use this if changes from other devices are not appearing on this device. This wi
     t`Your free trial is on-going. Your subscription will start on ${trialExpiryDate}`,
   weekFormat: () => t`Week format`,
   weekFormatDesc: () =>
-    t`Choose what day to display as the first day of the week`
+    t`Choose what day to display as the first day of the week`,
+  valueMustBeBetween: (min: number, max: number) =>
+    t`Value must be between ${min} and ${max}`
 };