From c039f06c2b4bc1ef30166142a30a7f2d12447df6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 15 Aug 2025 00:19:37 +0300
Subject: [PATCH] chore(react/settings): fix a margin between radios

---
 .../src/widgets/react/FormRadioGroup.tsx      | 36 +++++++++++++------
 .../src/widgets/type_widgets/options/i18n.tsx | 20 ++++++-----
 .../widgets/type_widgets/options/i18n/i18n.ts | 29 ---------------
 3 files changed, 36 insertions(+), 49 deletions(-)
 delete mode 100644 apps/client/src/widgets/type_widgets/options/i18n/i18n.ts

diff --git a/apps/client/src/widgets/react/FormRadioGroup.tsx b/apps/client/src/widgets/react/FormRadioGroup.tsx
index e2264bfe4..ccfd0cf84 100644
--- a/apps/client/src/widgets/react/FormRadioGroup.tsx
+++ b/apps/client/src/widgets/react/FormRadioGroup.tsx
@@ -11,23 +11,37 @@ interface FormRadioProps {
     onChange(newValue: string): void;
 }
 
-export default function FormRadioGroup({ name, values, currentValue, onChange }: FormRadioProps) {
+export default function FormRadioGroup({ values, ...restProps }: FormRadioProps) {
     return (
         <>
             {(values || []).map(({ value, label }) => (
                 <div className="form-checkbox">
-                    <label className="form-check-label tn-radio">
-                        <input
-                            className="form-check-input"
-                            type="radio"
-                            name={useUniqueName(name)}
-                            value={value}
-                            checked={value === currentValue}
-                        onChange={e => onChange((e.target as HTMLInputElement).value)} />
-                        {label}
-                    </label>
+                    <FormRadio value={value} label={label} {...restProps} labelClassName="form-check-label" />
                 </div>
             ))}
         </>
     );
+}
+
+export function FormInlineRadioGroup({ values, ...restProps }: FormRadioProps) {
+    return (
+        <>
+            {values.map(({ value, label }) => (<FormRadio value={value} label={label} {...restProps} />))}
+        </>
+    )
+}
+
+function FormRadio({ name, value, label, currentValue, onChange, labelClassName }: Omit<FormRadioProps, "values"> & { value: string, label: ComponentChildren, labelClassName?: string }) {
+    return (
+        <label className={`tn-radio ${labelClassName ?? ""}`}>
+            <input
+                className="form-check-input"
+                type="radio"
+                name={useUniqueName(name)}
+                value={value}
+                checked={value === currentValue}
+            onChange={e => onChange((e.target as HTMLInputElement).value)} />
+            {label}
+        </label>
+    )
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx
index bd63c2179..796e3b0f4 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n.tsx
+++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx
@@ -6,7 +6,7 @@ import OptionsSection from "./components/OptionsSection";
 import { useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
 import type { Locale } from "@triliumnext/commons";
 import { isElectron, restartDesktopApp } from "../../../services/utils";
-import FormRadioGroup from "../../react/FormRadioGroup";
+import FormRadioGroup, { FormInlineRadioGroup } from "../../react/FormRadioGroup";
 import FormText from "../../react/FormText";
 import RawHtml from "../../react/RawHtml";
 import Admonition from "../../react/Admonition";
@@ -63,14 +63,16 @@ function DateSettings() {
     return (
         <>
             <OptionsRow label={t("i18n.first-day-of-the-week")}>
-                <FormRadioGroup
-                    name="first-day-of-week"
-                    values={[
-                        { value: "0", label: t("i18n.sunday") },
-                        { value: "1", label: t("i18n.monday") }
-                    ]}
-                    currentValue={firstDayOfWeek} onChange={setFirstDayOfWeek}
-                />
+                <div role="group">
+                    <FormInlineRadioGroup
+                        name="first-day-of-week"
+                        values={[
+                            { value: "0", label: t("i18n.sunday") },
+                            { value: "1", label: t("i18n.monday") }
+                        ]}
+                        currentValue={firstDayOfWeek} onChange={setFirstDayOfWeek}
+                    />
+                </div>
             </OptionsRow>  
 
             <OptionsRow label={t("i18n.first-week-of-the-year")}>
diff --git a/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts b/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
deleted file mode 100644
index 6c53cf625..000000000
--- a/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import server from "../../../../services/server.js";
-import utils from "../../../../services/utils.js";
-import { getAvailableLocales, t } from "../../../../services/i18n.js";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <style>
-        .locale-options-container .option-row [aria-labelledby="first-week-of-year-label"] {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .locale-options-container .option-row [aria-labelledby="first-week-of-year-label"] .tn-radio {
-            margin-left: 0;
-            white-space: nowrap;
-        }
-    </style>
-</div>
-`;
-
-export default class LocalizationOptions extends OptionsWidget {
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$widget.find(".restart-app-button").on("click", utils.);
-    }
-
-}