From 497e7fdcbb0ea46ffb6ff872adfe7463cc63a021 Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Mon, 14 Sep 2026 02:01:29 +0200
Subject: [PATCH] added small settings panel with locale field

---
 src/components/AccountMenu.svelte    | 11 +++++++-
 src/components/Dialogs.svelte        |  9 ++++++
 src/components/SettingsDialog.svelte | 41 ++++++++++++++++++++++++++++
 src/models/settings.svelte.ts        |  8 ++++--
 4 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SettingsDialog.svelte

diff --git a/src/components/AccountMenu.svelte b/src/components/AccountMenu.svelte
index d12c4af..c1baf4f 100644
--- a/src/components/AccountMenu.svelte
+++ b/src/components/AccountMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { showLoginDialog } from './Dialogs.svelte';
+  import { showLoginDialog, showSettingsDialog } from './Dialogs.svelte';
   import { account } from '../models/account.svelte.js';
   import { settings } from '../models/settings.svelte.js';
   import { getBaseLocation } from '../router.js';
@@ -48,6 +48,13 @@
     menuVisible = false;
   }
 
+  function showSettings(e: Event) {
+    e.preventDefault();
+
+    showSettingsDialog();
+    menuVisible = false;
+  }
+
   function logOut(e: Event) {
     e.preventDefault();
     account.logOut();
@@ -94,6 +101,8 @@
       showCheckmark={settings.biohazardsEnabled !== false}
     />
 
+    <AccountMenuButton onclick={showSettings} label="Settings" />
+
     {#if !account.loggedIn}
       <AccountMenuButton onclick={showLoginScreen} label="Log in" />
     {:else}
diff --git a/src/components/Dialogs.svelte b/src/components/Dialogs.svelte
index 539dbe1..02a73c1 100644
--- a/src/components/Dialogs.svelte
+++ b/src/components/Dialogs.svelte
@@ -1,6 +1,7 @@
 <script module lang="ts">
   import BiohazardDialog from './BiohazardDialog.svelte';
   import LoginDialog from './LoginDialog.svelte';
+  import SettingsDialog from './SettingsDialog.svelte';
 
   let loginDisplayed = $state(false);
   let loginWithClose = $state(false);
@@ -8,6 +9,8 @@
   let biohazardDisplayed = $state(false);
   let biohazardOnConfirm: (() => void) | undefined = $state(undefined);
 
+  let settingsDisplayed = $state(false);
+
   export function showLoginDialog(opts: { showClose: boolean }) {
     if (!loginDisplayed) {
       loginDisplayed = true;
@@ -21,10 +24,16 @@
       biohazardOnConfirm = onConfirm;
     }
   }
+
+  export function showSettingsDialog() {
+    settingsDisplayed = true;
+  }
 </script>
 
 {#if loginDisplayed}
   <LoginDialog onClose={() => loginDisplayed = false} showClose={loginWithClose} />
+{:else if settingsDisplayed}
+  <SettingsDialog onClose={() => settingsDisplayed = false} />
 {:else if biohazardDisplayed}
   <BiohazardDialog onClose={() => biohazardDisplayed = false} onConfirm={() => biohazardOnConfirm?.()} />
 {/if}
diff --git a/src/components/SettingsDialog.svelte b/src/components/SettingsDialog.svelte
new file mode 100644
index 0000000..c29d42b
--- /dev/null
+++ b/src/components/SettingsDialog.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { settings } from '../models/settings.svelte.js';
+  import DialogPanel from './DialogPanel.svelte';
+
+  let { onClose = undefined }: { onClose?: () => void } = $props();
+  let dateLocale = $state(settings.dateLocale ?? '');
+
+  function updateDateLocale() {
+    const value = dateLocale.trim();
+    settings.dateLocale = value || undefined;
+  }
+
+  function applyOnEnter(applyChanges: () => void) {
+    return (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        applyChanges();
+      }
+    };
+  }
+</script>
+
+<DialogPanel id="settings" {onClose}>
+  <form method="get">
+    <i class="close fa-circle-xmark fa-regular" onclick={onClose}></i>
+
+    <h2>Settings</h2>
+
+    <p>
+      <label for="settings_date_locale">Locale:</label>
+      <input
+        type="text"
+        id="settings_date_locale"
+        autofocus
+        bind:value={dateLocale}
+        onchange={updateDateLocale}
+        onkeydown={applyOnEnter(updateDateLocale)}
+      >
+    </p>
+  </form>
+</DialogPanel>
diff --git a/src/models/settings.svelte.ts b/src/models/settings.svelte.ts
index 7c6ba7b..8ec7876 100644
--- a/src/models/settings.svelte.ts
+++ b/src/models/settings.svelte.ts
@@ -31,8 +31,12 @@ class Settings {
     return this.data.dateLocale;
   }
 
-  set dateLocale(value: string) {
-    this.data.dateLocale = value;
+  set dateLocale(value: string | undefined) {
+    if (value) {
+      this.data.dateLocale = value;
+    } else {
+      delete this.data.dateLocale;
+    }
     this.save();
   }
 
-- 
2.51.2