feat: show user info about file formats (#522)

Hoping this will reduce confusion.

package.json

@@ -20,6 +20,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@reduxjs/toolkit": "^1.9.5",
     "@svgr/webpack": "^8.1.0",
+    "@types/react-query": "^1.2.9",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-named-asset-import": "^0.3.8",

src/components/modals/SettingsModal/SettingsModal.tsx

@@ -19,6 +19,7 @@ import { get2ankiApi } from '../../../lib/backend/get2ankiApi';
 import { getSettingsCardOptions } from '../../../lib/backend/getSettingsCardOptions';
 
 import { getLocalStorageBooleanValue } from '../../../lib/data_layer/getLocalStorageBooleanValue';
+import CardOption from '../../../lib/data_layer/model/CardOption';
 
 interface Props {
   pageTitle?: string;
@@ -130,7 +131,7 @@ function SettingsModal({
     }
     const payload: { [key: string]: string } = {};
     if (options) {
-      options.forEach((option) => {
+      options.forEach((option: CardOption) => {
         payload[option.key] = option.value.toString(); // use string for backwards compat
       });
     } else {
@@ -253,7 +254,7 @@ function SettingsModal({
                         saveValueInLocalStorage('toggle-mode', t, pageId);
                       }}
                     />
-                    {options && options.map((o) => <LocalCheckbox
+                    {options && options.map((o: CardOption) => <LocalCheckbox
                       key={o.key}
                       defaultValue={
                         getLocalStorageBooleanValue(

src/lib/text/app.document.json

@@ -7,5 +7,7 @@
   "navigation.logout": "🔒 log out",
   "navigation.deleteAccount": "🗑️ Delete account",
   "downloads.unfinished.jobs": "It might take a while for your download to be ready.",
-  "downloads.empty": "You have no downloads!"
-}
+  "downloads.empty": "You have no downloads!",
+  "upload.page.title": "Upload your notes",
+  "upload.page.subtitle": "For now only HTML and ZIP files are fully supported."
+}

src/pages/UploadPage/UploadPage.tsx

@@ -15,6 +15,7 @@ import {
 } from './styled';
 import { Main, PageContainer } from '../../components/styled';
 import { ErrorHandlerType } from '../../components/errors/helpers/getErrorMessage';
+import { getVisibleText } from '../../lib/text/getVisibleText';
 
 interface Props {
   setErrorMessage: ErrorHandlerType;
@@ -35,7 +36,7 @@ export function UploadPage({ setErrorMessage }: Props) {
         <Main>
           {isDevelopment ? <WarningMessage /> : null}
           <FlexColumn>
-            <ImportTitle>Import</ImportTitle>
+            <ImportTitle>{getVisibleText('upload.page.title')}</ImportTitle>
             <SettingsLink onClick={() => setShowSettings(true)}>
               <Link className="link" to="?view=template">
                 <SettingsIcon />
@@ -45,6 +46,7 @@ export function UploadPage({ setErrorMessage }: Props) {
           </FlexColumn>
           <div className="container">
             <UploadForm setErrorMessage={setErrorMessage} />
+            <p>{getVisibleText('upload.page.subtitle')}</p>
             <InfoMessage>
               All files uploaded here are automatically deleted after 21
               minutes.