chore(options/advanced): use options row for sync

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

@@ -1152,7 +1152,11 @@
   },
   "sync": {
     "title": "Sync",
+    "force_full_sync_label": "Force full sync",
+    "force_full_sync_description": "Trigger a complete synchronization with the sync server, re-uploading all changes.",
     "force_full_sync_button": "Force full sync",
+    "fill_entity_changes_label": "Fill entity changes",
+    "fill_entity_changes_description": "Rebuild entity change records. Use this if sync is missing some changes.",
     "fill_entity_changes_button": "Fill entity changes records",
     "full_sync_triggered": "Full sync triggered",
     "filling_entity_changes": "Filling entity changes rows...",

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

@@ -9,7 +9,7 @@ import Button from "../../react/Button";
 import Column from "../../react/Column";
 import FormText from "../../react/FormText";
 import { useTriliumOptionJson } from "../../react/hooks";
-import { OptionsRowWithToggle } from "./components/OptionsRow";
+import { OptionsRowWithButton, OptionsRowWithToggle } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 
 export default function AdvancedSettings() {
@@ -25,16 +25,18 @@ export default function AdvancedSettings() {
 function AdvancedSyncOptions() {
     return (
         <OptionsSection title={t("sync.title")}>
-            <Button
-                text={t("sync.force_full_sync_button")}
+            <OptionsRowWithButton
+                label={t("sync.force_full_sync_label")}
+                description={t("sync.force_full_sync_description")}
                 onClick={async () => {
                     await server.post("sync/force-full-sync");
                     toast.showMessage(t("sync.full_sync_triggered"));
                 }}
             />
 
-            <Button
-                text={t("sync.fill_entity_changes_button")}
+            <OptionsRowWithButton
+                label={t("sync.fill_entity_changes_label")}
+                description={t("sync.fill_entity_changes_description")}
                 onClick={async () => {
                     toast.showMessage(t("sync.filling_entity_changes"));
                     await server.post("sync/fill-entity-changes");

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

@@ -56,7 +56,7 @@
     width: 100%;
 }
 
-.option-row-link.use-tn-links {
+.option-row-link {
     text-decoration: none;
     color: inherit;
     margin-inline: calc(-1 * var(--options-card-padding, 15px));
@@ -67,3 +67,17 @@
 .option-row-link:hover {
     background: var(--hover-item-background-color);
 }
+
+button.option-row-link {
+    background: none;
+    border: none;
+    border-bottom: 1px solid var(--main-border-color);
+    width: calc(100% + 2 * var(--options-card-padding, 15px));
+    text-align: left;
+    font: inherit;
+    cursor: pointer;
+}
+
+button.option-row-link:last-of-type {
+    border-bottom: none;
+}

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

@@ -42,7 +42,7 @@ interface OptionsRowLinkProps {
 
 export function OptionsRowLink({ label, description, href }: OptionsRowLinkProps) {
     return (
-        <a href={href} className="option-row option-row-link use-tn-links no-tooltip-preview">
+        <a href={href} className="option-row option-row-link no-tooltip-preview">
             <div className="option-row-label">
                 <label style={{ cursor: "pointer" }}>{label}</label>
                 {description && <small className="option-row-description">{description}</small>}
@@ -78,3 +78,30 @@ export function OptionsRowWithToggle({ name, label, description, currentValue, o
         </OptionsRow>
     );
 }
+
+interface OptionsRowWithButtonProps {
+    label: string;
+    description?: string;
+    icon?: string;
+    onClick: () => void;
+}
+
+export function OptionsRowWithButton({ label, description, icon, onClick }: OptionsRowWithButtonProps) {
+    return (
+        <button
+            type="button"
+            className="option-row option-row-link"
+            onClick={onClick}
+        >
+            <div className="option-row-label">
+                <label style={{ cursor: "pointer" }}>{label}</label>
+                {description && <small className="option-row-description">{description}</small>}
+            </div>
+            {icon && (
+                <div className="option-row-input">
+                    <span className={icon} />
+                </div>
+            )}
+        </button>
+    );
+}