feat(options/i18n): add reference to spell check

apps/client/src/translations/en/translation.json

@@ -1505,7 +1505,8 @@
     "custom_dictionary_description": "Words added to the dictionary are synced across all your devices.",
     "custom_dictionary_edit": "Custom words",
     "custom_dictionary_edit_description": "Edit the list of words that should not be flagged by the spell checker. Changes will be visible after a restart.",
-    "custom_dictionary_open": "Edit dictionary"
+    "custom_dictionary_open": "Edit dictionary",
+    "related_description": "Configure spell check languages and custom dictionary."
   },
   "sync_2": {
     "config_title": "Sync Configuration",

apps/client/src/widgets/type_widgets/options/components/OptionsRow.css

@@ -45,3 +45,15 @@
 .option-row.centered {
     justify-content: center;
 }
+
+.option-row-link.use-tn-links {
+    text-decoration: none;
+    color: inherit;
+    margin-inline: calc(-1 * var(--options-card-padding, 15px));
+    padding-inline: var(--options-card-padding, 15px);
+    transition: background-color 250ms ease-in-out;
+}
+
+.option-row-link:hover {
+    background: var(--hover-item-background-color);
+}

apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx

@@ -1,5 +1,7 @@
-import { cloneElement, VNode } from "preact";
 import "./OptionsRow.css";
+
+import { cloneElement, VNode } from "preact";
+
 import { useUniqueName } from "../../../react/hooks";
 
 interface OptionsRowProps {
@@ -25,4 +27,24 @@ export default function OptionsRow({ name, label, description, children, centere
             </div>
         </div>
     );
-}
+}
+
+interface OptionsRowLinkProps {
+    label: string;
+    description?: string;
+    href: string;
+}
+
+export function OptionsRowLink({ label, description, href }: OptionsRowLinkProps) {
+    return (
+        <a href={href} className="option-row option-row-link use-tn-links no-tooltip-preview">
+            <div className="option-row-label">
+                <label style={{ cursor: "pointer" }}>{label}</label>
+                {description && <small className="option-row-description">{description}</small>}
+            </div>
+            <div className="option-row-input">
+                <span className="bx bx-chevron-right" />
+            </div>
+        </a>
+    );
+}

apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx

@@ -1,24 +1,29 @@
-import OptionsSection from "./OptionsSection";
-import type { OptionPages } from "../../ContentWidget";
 import { t } from "../../../../services/i18n";
+import type { OptionPages } from "../../ContentWidget";
+import { OptionsRowLink } from "./OptionsRow";
+import OptionsSection from "./OptionsSection";
+
+interface RelatedSettingsItem {
+    title: string;
+    description?: string;
+    targetPage: OptionPages;
+}
 
 interface RelatedSettingsProps {
-    items: {
-        title: string;
-        targetPage: OptionPages;
-    }[];
+    items: RelatedSettingsItem[];
 }
 
 export default function RelatedSettings({ items }: RelatedSettingsProps) {
     return (
         <OptionsSection title={t("settings.related_settings")}>
-            <nav className="use-tn-links" style={{ padding: 0, margin: 0, listStyleType: "none" }}>
-                {items.map(item => (
-                    <li>
-                        <a href={`#root/_hidden/_options/${item.targetPage}`}>{item.title}</a>
-                    </li>
-                ))}
-            </nav>
+            {items.map((item) => (
+                <OptionsRowLink
+                    key={item.targetPage}
+                    label={item.title}
+                    description={item.description}
+                    href={`#root/_hidden/_options/${item.targetPage}`}
+                />
+            ))}
         </OptionsSection>
     );
 }

apps/client/src/widgets/type_widgets/options/i18n.tsx

@@ -5,13 +5,14 @@ import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import { useTriliumOption, useTriliumOptionJson } from "../../react/hooks";
 import type { Locale } from "@triliumnext/commons";
-import { restartDesktopApp } from "../../../services/utils";
+import { isElectron, restartDesktopApp } from "../../../services/utils";
 import FormRadioGroup from "../../react/FormRadioGroup";
 import FormText from "../../react/FormText";
 import RawHtml from "../../react/RawHtml";
 import Admonition from "../../react/Admonition";
 import Button from "../../react/Button";
 import CheckboxList from "./components/CheckboxList";
+import RelatedSettings from "./components/RelatedSettings";
 import { LocaleSelector } from "./components/LocaleSelector";
 
 export default function InternationalizationOptions() {
@@ -19,8 +20,17 @@ export default function InternationalizationOptions() {
         <>
             <LocalizationOptions />
             <ContentLanguages />
+            {isElectron() && (
+                <RelatedSettings items={[
+                    {
+                        title: t("spellcheck.title"),
+                        description: t("spellcheck.related_description"),
+                        targetPage: "_optionsSpellcheck"
+                    }
+                ]} />
+            )}
         </>
-    )
+    );
 }
 
 function LocalizationOptions() {