mobile: settings module fixes

apps/mobile/app/components/sheets/download-logs/index.tsx

@@ -326,7 +326,7 @@ function DownloadLogs({ close }: DownloadLogsProps) {
                 }}
               />
               <Button
-                title={strings.openFileLocation()}
+                title={strings.openLocation()}
                 type="plain-outline"
                 style={{ flex: 1, borderRadius: Radius.S }}
                 onPress={async () => {

apps/mobile/app/components/sheets/github/issue.tsx

@@ -166,19 +166,11 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
           style={{
             justifyContent: "center",
             alignItems: "center",
-            gap: Spacing.LEVEL_2,
-            paddingVertical: Spacing.LEVEL_3
+            gap: Spacing.LEVEL_0
           }}
         >
           <Heading>{responseInfo?.title}</Heading>
-          <Paragraph
-            style={{
-              textAlign: "center"
-            }}
-            selectable={true}
-          >
-            {responseInfo?.message}
-          </Paragraph>
+          <Paragraph selectable={true}>{responseInfo?.message}</Paragraph>
 
           <Button
             title={responseInfo?.positiveButtonText || strings.done()}
@@ -188,6 +180,9 @@ Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
               }
               eSendEvent(eCloseSheet);
             }}
+            style={{
+              marginTop: Spacing.LEVEL_2
+            }}
             type="accent"
             width="100%"
           />

apps/mobile/app/components/sheets/update/index.tsx

@@ -290,7 +290,7 @@ export const Update = ({ version: appVersion }: UpdateProps) => {
               });
             }}
           >
-            {strings.readReleaseNotes[1]()}
+            {strings.readReleaseNotes[1]()}{" "}
             <Paragraph
               color={colors.primary.accent}
               fontFamily="MEDIUM"

apps/mobile/app/components/toast/index.tsx

@@ -210,7 +210,7 @@ export const Toast = ({ context = "global" }) => {
         >
           <AppIcon
             name={toastOptions.icon || variant.icon.name}
-            iconFamily={toastOptions.icon ? "material" : variant.icon.family}
+            iconFamily={toastOptions.iconFamily || variant.icon.family}
             size={16}
             color={variant.accent}
           />

apps/mobile/app/components/ui/input/form-input.tsx

@@ -213,7 +213,9 @@ export const validators = {
   matchField:
     (fieldName: string, message = "Values do not match") =>
     (value: string, values: FormValues) =>
-      value === values[fieldName] ? undefined : message
+      value === values[fieldName] ? undefined : message,
+  custom: (validator: (value: any) => string | undefined) => (value: any) =>
+    validator(value)
 };
 
 interface FormInputProps extends TextInputProps {

apps/mobile/app/screens/settings/groups/account.ts

@@ -743,7 +743,8 @@ export const accountGroup: SettingSection = {
     {
       id: "inbox-api",
       name: strings.inboxAPI(),
-      icon: "inbox",
+      icon: "file-cloud",
+      iconFamily: "notesnook",
       type: "screen",
       description: strings.inboxAPIDesc(),
       sections: [
@@ -854,6 +855,7 @@ export const accountGroup: SettingSection = {
               component: "failed-inbox-items",
               icon: "warning-circle",
               iconFamily: "notesnook",
+              iconColor: (colors) => colors.static.red,
               hideHeader: true
             }
           ]

apps/mobile/app/screens/settings/groups/help-support.tsx

@@ -52,7 +52,8 @@ export const helpSupportGroup: SettingSection = {
         ToastManager.show({
           heading: strings.emailCopied(),
           type: "success",
-          icon: "content-copy"
+          icon: "copy",
+          iconFamily: "notesnook"
         });
         setTimeout(() => {
           Linking.openURL("mailto:support@streetwriters.co");

apps/mobile/app/screens/settings/groups/productivity.ts

@@ -87,7 +87,14 @@ export const productivityGroup: SettingSection = {
               iconFamily: "notesnook",
               name: strings.defaultSnoozeTime(),
               description: strings.defaultSnoozeTimeDesc(),
-              validators: [validators.number()],
+              validators: [
+                validators.number(),
+                validators.custom((value) => {
+                  return value < 5
+                    ? strings.valueMustBeGreaterThan("5")
+                    : undefined;
+                })
+              ],
               inputProperties: {
                 keyboardType: "decimal-pad",
                 defaultValue: 5 + "",

apps/mobile/app/screens/settings/manage-inbox-keys.tsx

@@ -510,8 +510,9 @@ export const SetupInboxKeys = () => {
                 {createdKey}
               </Paragraph>
               <IconButton
-                name={copied ? "check" : "content-copy"}
-                size={AppFontSize.md}
+                name={copied ? "check" : "copy"}
+                iconFamily="notesnook"
+                size={14}
                 color={colors.primary.icon}
                 onPress={handleCopyKey}
               />
@@ -910,6 +911,7 @@ const InboxKeysList = () => {
                 paddingHorizontal: Spacing.LEVEL_2,
                 paddingVertical: Spacing.LEVEL_1
               }}
+              fontSize={AppFontSize.sm}
               onPress={() => {
                 if (apiKeys.length >= 10) {
                   presentDialog({
@@ -971,24 +973,35 @@ function ApiKeyItem({ apiKey, onRevoke, isAtEnd }: ApiKeyItemProps) {
       paragraph: strings.enterPasswordToViewApiKey(),
       positiveText: strings.authenticate(),
       negativeText: strings.cancel(),
-      input: true,
       secureTextEntry: true,
-      inputPlaceholder: strings.accountPassword(),
-      positivePress: async (value) => {
-        try {
-          const verified = await db.user.verifyPassword(value);
-          if (!verified) {
-            ToastManager.show({
-              message: strings.invalidPassword(),
-              type: "error"
-            });
+      form: {
+        formRef: createFormRef({
+          password: ""
+        }),
+        items: [
+          {
+            name: "password",
+            placeholder: strings.accountPassword(),
+            ref: React.createRef(),
+            validators: [validators.required(strings.passwordRequired())]
+          }
+        ],
+        onFormSubmit: async (form) => {
+          try {
+            if (!form.validate()) return false;
+            const verified = await db.user.verifyPassword(
+              form.getValue("password")
+            );
+            if (!verified) {
+              form.setError("password", strings.invalidPassword());
+              return false;
+            }
+            setViewing(true);
+            return true;
+          } catch (error) {
+            form.setError("password", (error as Error).message);
             return false;
           }
-          setViewing(true);
-          return true;
-        } catch (error) {
-          ToastManager.error(error as Error);
-          return false;
         }
       }
     });
@@ -1183,16 +1196,18 @@ function ApiKeyItem({ apiKey, onRevoke, isAtEnd }: ApiKeyItemProps) {
                 {secondsLeft}s
               </Paragraph>
               <IconButton
-                name={copied ? "check" : "content-copy"}
-                size={AppFontSize.md}
+                name={copied ? "check" : "copy"}
+                iconFamily="notesnook"
+                size={16}
                 color={colors.primary.icon}
                 onPress={() => copyToClipboard()}
               />
             </View>
           ) : (
             <IconButton
-              name="eye-off-outline"
-              size={AppFontSize.md}
+              name="eye-open"
+              iconFamily="notesnook"
+              size={16}
               color={colors.primary.icon}
               onPress={() => viewKey()}
             />
@@ -1212,7 +1227,7 @@ function ApiKeyItem({ apiKey, onRevoke, isAtEnd }: ApiKeyItemProps) {
           <AppIcon
             name="trash"
             iconFamily="notesnook"
-            size={AppFontSize.md}
+            size={16}
             color={colors.error.icon}
           />
         </Pressable>

apps/mobile/app/screens/settings/section-item.tsx

@@ -274,9 +274,11 @@ const _SectionItem = ({ item }: { item: SettingSection }) => {
             >
               <AppIcon
                 color={
-                  item.type === "danger"
-                    ? colors.error.accent
-                    : colors.primary.icon
+                  item.iconColor
+                    ? item.iconColor(colors)
+                    : item.type === "danger"
+                      ? colors.error.accent
+                      : colors.primary.icon
                 }
                 iconFamily={item.iconFamily}
                 name={item.icon}

apps/mobile/app/screens/settings/types.ts

@@ -22,6 +22,7 @@ import { Settings } from "../../stores/use-setting-store";
 import { FeatureId } from "@notesnook/common";
 import { IconProps } from "../../components/ui/AppIcon";
 import { FieldValidator } from "../../components/ui/input/form-input";
+import { VariantsWithStaticColors } from "../../../../../packages/theme/dist/types";
 
 export type SettingSection = {
   id: string;
@@ -40,6 +41,7 @@ export type SettingSection = {
   icon?: string;
   iconFamily?: IconProps["iconFamily"];
   iconSize?: number;
+  iconColor?: (colors: VariantsWithStaticColors<true>) => string;
   property?: keyof Settings;
   sections?: SettingSection[];
   component?: string;

apps/mobile/app/services/event-manager.ts

@@ -37,6 +37,7 @@ import {
   eShowToast
 } from "../utils/events";
 import { strings } from "@notesnook/intl";
+import { IconProps } from "../components/ui/AppIcon";
 
 export enum VaultRequestType {
   CreateVault = "createVault",
@@ -175,6 +176,7 @@ export type ToastOptions = {
   func?: () => void;
   actionText?: string;
   icon?: string;
+  iconFamily?: IconProps["iconFamily"];
 };
 
 export const ToastManager = {
@@ -186,7 +188,8 @@ export const ToastManager = {
     func,
     actionText,
     icon,
-    duration = 3000
+    duration = 3000,
+    iconFamily = "material"
   }: ToastOptions) => {
     if (Config.isTesting) return;
     eSendEvent(eShowToast, {
@@ -197,7 +200,8 @@ export const ToastManager = {
       func,
       actionText,
       icon,
-      duration
+      duration,
+      iconFamily
     });
   },
   hide: () => eSendEvent(eHideToast),

packages/intl/locale/en.po

@@ -5205,6 +5205,10 @@ msgstr "Open issue"
 msgid "Open link"
 msgstr "Open link"
 
+#: src/strings.ts:3021
+msgid "Open location"
+msgstr "Open location"
+
 #: src/strings.ts:1914
 msgid "Open note"
 msgstr "Open note"
@@ -8143,6 +8147,10 @@ msgstr "v{version} available"
 msgid "Value must be between {min} and {max}"
 msgstr "Value must be between {min} and {max}"
 
+#: src/strings.ts:3020
+msgid "Value must be greater than {value}"
+msgstr "Value must be greater than {value}"
+
 #: src/strings.ts:1217
 msgid "Vault"
 msgstr "Vault"

packages/intl/locale/pseudo-LOCALE.po

@@ -5179,6 +5179,10 @@ msgstr ""
 msgid "Open link"
 msgstr ""
 
+#: src/strings.ts:3021
+msgid "Open location"
+msgstr ""
+
 #: src/strings.ts:1914
 msgid "Open note"
 msgstr ""
@@ -8093,6 +8097,10 @@ msgstr ""
 msgid "Value must be between {min} and {max}"
 msgstr ""
 
+#: src/strings.ts:3020
+msgid "Value must be greater than {value}"
+msgstr ""
+
 #: src/strings.ts:1217
 msgid "Vault"
 msgstr ""

packages/intl/src/strings.ts

@@ -3033,5 +3033,8 @@ Continue without attachments?`,
   changeCreatedDateDesc: () =>
     t`Select date and time to change the created date`,
   codeCopied: () => t`Code copied`,
-  enterVaultPassword: () => t`Enter vault password`
+  enterVaultPassword: () => t`Enter vault password`,
+  valueMustBeGreaterThan: (value: string) =>
+    t`Value must be greater than ${value}`,
+  openLocation: () => t`Open location`
 };