move weekday setting to settings dialog

src/View/Modals/settingsModal.tsx

@@ -6,6 +6,7 @@ import SettingsViewModel, {
 } from "../../ViewModel/Global/settingsViewModel";
 import { SplitModal } from "../Components/splitModal";
 import { InfoTile } from "../Components/infoTile";
+import { Option } from "../Components/option";
 
 export function SettingsModal(settingsViewModel: SettingsViewModel) {
     const detailView = React.createProxyState(
@@ -15,7 +16,7 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
                 case SettingsModalPages.Appearance:
                     return <div>Appearance</div>;
                 case SettingsModalPages.Regional:
-                    return <div>Regional</div>;
+                    return SettingsRegionalPane(settingsViewModel);
                 case SettingsModalPages.Info:
                     return SettingsInfoPane(settingsViewModel);
             }
@@ -103,3 +104,31 @@ function SettingsInfoPane(settingsViewModel: SettingsViewModel) {
         </div>
     );
 }
+
+function SettingsRegionalPane(settingsViewModel: SettingsViewModel) {
+    return (
+        <div class="slide-up">
+            <h2>{translations.settings.pages.regional}</h2>
+            <hr></hr>
+            <label class="tile flex-no">
+                <span class="icon">calendar_month</span>
+                <div>
+                    <span>{translations.homePage.firstDayOfWeekLabel}</span>
+                    <select bind:value={settingsViewModel.firstDayOfWeekInput}>
+                        {...translations.regional.weekdays.full.map(
+                            (weekdayName, i) =>
+                                Option(
+                                    weekdayName,
+                                    i.toString(),
+                                    i.toString() ==
+                                        settingsViewModel.firstDayOfWeekInput
+                                            .value,
+                                ),
+                        )}
+                    </select>
+                    <span class="icon">arrow_drop_down</span>
+                </div>
+            </label>
+        </div>
+    );
+}