From 520effbbb78ebdb3c35149567fb0d11a1e161d20 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 15 Aug 2025 00:08:43 +0300
Subject: [PATCH] chore(react/settings): bring back style

---
 apps/client/src/widgets/react/Admonition.tsx  | 14 +++++++
 .../options/components/OptionsRow.css         | 23 ++++++++++
 .../options/components/OptionsRow.tsx         | 10 +++--
 .../src/widgets/type_widgets/options/i18n.tsx | 42 ++++++++++++++-----
 .../widgets/type_widgets/options/i18n/i18n.ts | 38 +----------------
 5 files changed, 76 insertions(+), 51 deletions(-)
 create mode 100644 apps/client/src/widgets/react/Admonition.tsx
 create mode 100644 apps/client/src/widgets/type_widgets/options/components/OptionsRow.css

diff --git a/apps/client/src/widgets/react/Admonition.tsx b/apps/client/src/widgets/react/Admonition.tsx
new file mode 100644
index 000000000..6c4814bbc
--- /dev/null
+++ b/apps/client/src/widgets/react/Admonition.tsx
@@ -0,0 +1,14 @@
+import { ComponentChildren } from "preact";
+
+interface AdmonitionProps {
+    type: "warning";
+    children: ComponentChildren;
+}
+
+export default function Admonition({ type, children }: AdmonitionProps) {
+    return (
+        <div className={`admonition ${type}`} role="alert">
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
new file mode 100644
index 000000000..98778b96e
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
@@ -0,0 +1,23 @@
+.option-row {
+    border-bottom: 1px solid var(--main-border-color);
+    display: flex;
+    align-items: center;
+    padding: 0.5em 0;
+}
+
+.option-row > label {
+    width: 40%;
+    margin-bottom: 0 !important;
+}
+
+.option-row > select {
+    width: 60%;
+}
+
+.option-row:last-of-type {
+    border-bottom: unset;
+}
+
+.option-row.centered {
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
index 8bad83556..316104ae3 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
@@ -1,14 +1,16 @@
 import { ComponentChildren } from "preact";
+import "./OptionsRow.css";
 
 interface OptionsRowProps {
-    label: string;
+    label?: string;
     children: ComponentChildren;
+    centered?: boolean;
 }
 
-export default function OptionsRow({ label, children }: OptionsRowProps) {
+export default function OptionsRow({ label, children, centered }: OptionsRowProps) {
     return (
-        <div className="option-row">
-            <label>{label}</label>
+        <div className={`option-row ${centered ? "centered" : ""}`}>
+            {label && <label>{label}</label>}
             {children}
         </div>
     );
diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx
index 598415e6c..bd63c2179 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n.tsx
+++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx
@@ -5,8 +5,12 @@ import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import { useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
 import type { Locale } from "@triliumnext/commons";
-import { isElectron } 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";
 
 export default function InternationalizationOptions() {
     return (
@@ -70,15 +74,17 @@ function DateSettings() {
             </OptionsRow>  
 
             <OptionsRow label={t("i18n.first-week-of-the-year")}>
-                <FormRadioGroup
-                    name="first-week-of-year"
-                    currentValue={firstWeekOfYear} onChange={setFirstWeekOfYear}
-                    values={[
-                        { value: "0", label: t("i18n.first-week-contains-first-day") },
-                        { value: "1", label: t("i18n.first-week-contains-first-thursday") },
-                        { value: "2", label: t("i18n.first-week-has-minimum-days") }
-                    ]}
-                />
+                <div role="group">
+                    <FormRadioGroup
+                        name="first-week-of-year"
+                        currentValue={firstWeekOfYear} onChange={setFirstWeekOfYear}
+                        values={[
+                            { value: "0", label: t("i18n.first-week-contains-first-day") },
+                            { value: "1", label: t("i18n.first-week-contains-first-thursday") },
+                            { value: "2", label: t("i18n.first-week-has-minimum-days") }
+                        ]}
+                    />
+                </div>
             </OptionsRow>
 
             {firstWeekOfYear === "2" && <OptionsRow label={t("i18n.min-days-in-first-week")}>
@@ -89,6 +95,22 @@ function DateSettings() {
                         { length: 7 }, 
                         (_, i) => ({ days: String(i + 1) }))} />
             </OptionsRow>}
+
+            <FormText>
+                <RawHtml html={t("i18n.first-week-info")} />
+            </FormText>
+
+            <Admonition type="warning">
+                {t("i18n.first-week-warning")}
+            </Admonition>
+
+            <OptionsRow centered>
+                <Button
+                    text={t("electron_integration.restart-app-button")}
+                    size="micro"
+                    onClick={restartDesktopApp}
+                />
+            </OptionsRow>
         </>
     )
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts b/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
index f2d73ab14..6c53cf625 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
+++ b/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
@@ -5,43 +5,7 @@ import { getAvailableLocales, t } from "../../../../services/i18n.js";
 
 const TPL = /*html*/`
 <div class="options-section">
-    <div class="locale-options-container">
-        <p class="form-text use-tn-links">${t("i18n.first-week-info")}</p>
-
-        <div class="admonition warning" role="alert">
-            ${t("i18n.first-week-warning")}
-        </div>
-
-        <div class="option-row centered">
-            <button class="btn btn-secondary btn-micro restart-app-button">${t("electron_integration.restart-app-button")}</button>
-        </div>
-    </div>
-
     <style>
-        .locale-options-container .option-row {
-            border-bottom: 1px solid var(--main-border-color);
-            display: flex;
-            align-items: center;
-            padding: 0.5em 0;
-        }
-
-        .locale-options-container .option-row > label {
-            width: 40%;
-            margin-bottom: 0 !important;
-        }
-
-        .locale-options-container .option-row > select {
-            width: 60%;
-        }
-
-        .locale-options-container .option-row:last-of-type {
-            border-bottom: unset;
-        }
-
-        .locale-options-container .option-row.centered {
-            justify-content: center;
-        }
-
         .locale-options-container .option-row [aria-labelledby="first-week-of-year-label"] {
             display: flex;
             flex-direction: column;
@@ -59,7 +23,7 @@ export default class LocalizationOptions extends OptionsWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.$widget.find(".restart-app-button").on("click", utils.restartDesktopApp);
+        this.$widget.find(".restart-app-button").on("click", utils.);
     }
 
 }