From 0c2b186e501d6089a6589bcac5bb79247ba5e449 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 14 Oct 2025 18:10:54 +0300
Subject: [PATCH] refactor(options/i18n): use select for language selection

---
 .../options/components/OptionsRow.css         |  8 +++++-
 .../src/widgets/type_widgets/options/i18n.tsx | 25 +++++++++++++------
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
index 98778b96e..6eeaa1074 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
@@ -10,10 +10,16 @@
     margin-bottom: 0 !important;
 }
 
-.option-row > select {
+.option-row > select,
+.option-row > .dropdown {
     width: 60%;
 }
 
+.option-row > .dropdown button {
+    width: 100%;
+    text-align: start;
+}
+
 .option-row:last-of-type {
     border-bottom: unset;
 }
diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx
index 4e6ec61e8..bd2c4c9e1 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n.tsx
+++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "preact/hooks";
+import { useMemo, useState } from "preact/hooks";
 import { getAvailableLocales, t } from "../../../services/i18n";
 import FormSelect from "../../react/FormSelect";
 import OptionsRow from "./components/OptionsRow";
@@ -12,6 +12,9 @@ import RawHtml from "../../react/RawHtml";
 import Admonition from "../../react/Admonition";
 import Button from "../../react/Button";
 import CheckboxList from "./components/CheckboxList";
+import FormDropdownList from "../../react/FormDropdownList";
+import Dropdown from "../../react/Dropdown";
+import { FormListItem } from "../../react/FormList";
 
 export default function InternationalizationOptions() {
     return (
@@ -57,12 +60,20 @@ function LocalizationOptions() {
 }
 
 function LocaleSelector({ id, locales, currentValue, onChange }: { id?: string; locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) {
-    return <FormSelect
-        id={id}
-        values={locales}
-        keyProperty="id" titleProperty="name"
-        currentValue={currentValue} onChange={onChange}
-    />;
+    const [ activeLocale, setActiveLocale ] = useState(locales.find(l => l.id === currentValue));
+    return (
+        <Dropdown text={activeLocale?.name}>
+            {locales.map(locale => (
+                <FormListItem
+                    checked={locale === activeLocale }
+                    onClick={() => {
+                        setActiveLocale(locale);
+                        onChange(locale.id);
+                    }}
+                >{locale.name}</FormListItem>
+            ))}
+        </Dropdown>
+    )
 }
 
 function DateSettings() {