chore(options/sync): merge sections and use options row

This commit is contained in:
Elian Doran
2026-04-13 15:56:41 +03:00
parent 0ead37fd5c
commit 7c1f509eca
2 changed files with 25 additions and 45 deletions

View File

@@ -1551,18 +1551,17 @@
"related_description": "Configure spell check languages and custom dictionary."
},
"sync_2": {
"config_title": "Sync Configuration",
"server_address": "Server instance address",
"timeout": "Sync timeout",
"timeout_description": "How long to wait before giving up on a slow sync connection. Increase if you have an unstable network.",
"proxy_label": "Sync proxy server (optional)",
"note": "Note",
"note_description": "If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only).",
"special_value_description": "Another special value is <code>noproxy</code> which forces ignoring even the system proxy and respects <code>NODE_TLS_REJECT_UNAUTHORIZED</code>.",
"config_title": "Sync Server",
"server_address": "Server address",
"server_address_description": "URL of the Trilium server to sync with.",
"timeout": "Connection timeout",
"timeout_description": "Time to wait before giving up on a slow connection.",
"proxy_label": "Proxy server",
"proxy_description": "Leave blank to use system proxy (desktop only). Use \"noproxy\" to bypass all proxies.",
"save": "Save",
"help": "Help",
"test_title": "Sync Test",
"test_description": "This will test the connection and handshake to the sync server. If the sync server isn't initialized, this will set it up to sync with the local document.",
"test_title": "Test Connection",
"test_description": "Test the connection to the sync server. If not initialized, this will set up syncing.",
"test_button": "Test sync",
"handshake_failed": "Sync server handshake failed, error: {{message}}"
},

View File

@@ -6,22 +6,14 @@ import server from "../../../services/server";
import toast from "../../../services/toast";
import { openInAppHelpFromUrl } from "../../../services/utils";
import Button from "../../react/Button";
import FormGroup from "../../react/FormGroup";
import FormText from "../../react/FormText";
import FormTextBox from "../../react/FormTextBox";
import { useTriliumOptions } from "../../react/hooks";
import RawHtml from "../../react/RawHtml";
import OptionsRow from "./components/OptionsRow";
import OptionsRow, { OptionsRowWithButton } from "./components/OptionsRow";
import OptionsSection from "./components/OptionsSection";
import TimeSelector from "./components/TimeSelector";
export default function SyncOptions() {
return (
<>
<SyncConfiguration />
<SyncTest />
</>
);
return <SyncConfiguration />;
}
export function SyncConfiguration() {
@@ -30,7 +22,7 @@ export function SyncConfiguration() {
const syncProxy = useRef(options.syncProxy);
return (
<OptionsSection title={t("sync_2.config_title")}>
<OptionsSection>
<form onSubmit={(e) => {
setOptions({
syncServerHost: syncServerHost.current,
@@ -38,33 +30,28 @@ export function SyncConfiguration() {
});
e.preventDefault();
}}>
<FormGroup name="sync-server-host" label={t("sync_2.server_address")}>
<OptionsRow name="sync-server-host" label={t("sync_2.server_address")} description={t("sync_2.server_address_description")} stacked>
<FormTextBox
placeholder="https://<host>:<port>"
currentValue={syncServerHost.current} onChange={(newValue) => syncServerHost.current = newValue}
/>
</FormGroup>
</OptionsRow>
<FormGroup name="sync-proxy" label={t("sync_2.proxy_label")}
description={<>
<strong>{t("sync_2.note")}:</strong> {t("sync_2.note_description")}<br/>
<RawHtml html={t("sync_2.special_value_description")} />
</>}
>
<OptionsRow name="sync-proxy" label={t("sync_2.proxy_label")} description={t("sync_2.proxy_description")} stacked>
<FormTextBox
placeholder="https://<host>:<port>"
currentValue={syncProxy.current} onChange={(newValue) => syncProxy.current = newValue}
/>
</FormGroup>
</OptionsRow>
<div style={{ display: "flex", justifyContent: "spaceBetween"}}>
<Button text={t("sync_2.save")} kind="primary" />
<Button text={t("sync_2.help")} onClick={() => openInAppHelpFromUrl("cbkrhQjrkKrh")} />
</div>
<OptionsRow name="save-sync-config" centered>
<div style={{ display: "flex", gap: "8px" }}>
<Button text={t("sync_2.save")} kind="primary" />
<Button text={t("sync_2.help")} onClick={() => openInAppHelpFromUrl("cbkrhQjrkKrh")} />
</div>
</OptionsRow>
</form>
<hr/>
<OptionsRow name="sync-server-timeout" label={t("sync_2.timeout")} description={t("sync_2.timeout_description")}>
<TimeSelector
name="sync-server-timeout"
@@ -73,16 +60,10 @@ export function SyncConfiguration() {
minimumSeconds={1}
/>
</OptionsRow>
</OptionsSection>
);
}
export function SyncTest() {
return (
<OptionsSection title={t("sync_2.test_title")}>
<FormText>{t("sync_2.test_description")}</FormText>
<Button
text={t("sync_2.test_button")}
<OptionsRowWithButton
label={t("sync_2.test_button")}
description={t("sync_2.test_description")}
onClick={async () => {
const result = await server.post<SyncTestResponse>("sync/test");