From b5aecf43047dc6b0b139a96617d8ea922c872171 Mon Sep 17 00:00:00 2001
From: Abdussamet Kocak <abdus@abdus.dev>
Date: Thu, 8 Oct 2026 21:00:44 +0200
Subject: [PATCH] feat(web): Add geolocation button, clear location, i18n, and
 spacing fixes

Add a "use my current location" button next to the search box (shown
only when no location is selected), make clearing the search box reset
selected location, prayer times, and URL coords, rebalance vertical
spacing so the clock isn't flush against the viewport edge, and
translate all UI copy based on browser language.
---
 templates/static/index.html | 38 +++++++++++++---
 templates/static/main.js    | 89 ++++++++++++++++++++++++++++++++++++-
 templates/static/style.css  | 38 ++++++++++++++--
 3 files changed, 156 insertions(+), 9 deletions(-)

diff --git a/templates/static/index.html b/templates/static/index.html
index b4f65f6..dbed646 100644
--- a/templates/static/index.html
+++ b/templates/static/index.html
@@ -39,31 +39,59 @@
     <header class='app-bar'>
         <div class='app-bar__brand'>
             <span class='app-bar__icon' aria-hidden='true'>&#9789;</span>
-            <span class='app-bar__title'>Prayer Times</span>
+            <span class='app-bar__title'
+                  x-text="t('appTitle')"></span>
         </div>
 
         <div class='location-search'>
             <input type='search'
                    class='location-search__input'
-                   placeholder='Search location...'
+                   :placeholder="t('searchPlaceholder')"
                    x-model='searchQuery'
                    @input='onSearchInput'
                    @focus='searchOpen = searchResults.length > 0'
                    @click.outside='searchOpen = false'>
 
+            <template x-if='!selectedLocation'>
+                <button type='button'
+                        class='location-search__locate'
+                        :class="{'location-search__locate--busy': locating}"
+                        :disabled='locating'
+                        :title="locateError ? t(locateError) : t('useCurrentLocation')"
+                        :aria-label="t('useCurrentLocation')"
+                        @click='useCurrentLocation'>
+                    <svg xmlns='http://www.w3.org/2000/svg'
+                         width='1em'
+                         height='1em'
+                         viewBox='0 0 24 24'
+                         aria-hidden='true'>
+                        <path d='M0 0h24v24H0z'
+                              fill='none' />
+                        <path fill='currentColor'
+                              d='M12 8.25a3.75 3.75 0 1 0 0 7.5a3.75 3.75 0 0 0 0-7.5' />
+                        <path fill='currentColor'
+                              fill-rule='evenodd'
+                              d='M12 1.25a.75.75 0 0 1 .75.75v1.282a8.75 8.75 0 0 1 7.968 7.968H22a.75.75 0 0 1 0 1.5h-1.282a8.75 8.75 0 0 1-7.968 7.968V22a.75.75 0 0 1-1.5 0v-1.282a8.75 8.75 0 0 1-7.968-7.968H2a.75.75 0 0 1 0-1.5h1.282a8.75 8.75 0 0 1 7.968-7.968V2a.75.75 0 0 1 .75-.75M4.75 12a7.25 7.25 0 1 0 14.5 0a7.25 7.25 0 0 0-14.5 0'
+                              clip-rule='evenodd' />
+                    </svg>
+                </button>
+            </template>
+
             <template x-if='searchOpen'>
                 <div class='location-search__dropdown'>
                     <template x-if='searchLoading'>
-                        <div class='location-search__state'>Searching...</div>
+                        <div class='location-search__state'
+                             x-text="t('searching')"></div>
                     </template>
 
                     <template x-if='!searchLoading && searchError'>
                         <div class='location-search__state'
-                             x-text='searchError'></div>
+                             x-text='t(searchError)'></div>
                     </template>
 
                     <template x-if='!searchLoading && !searchError && searchResults.length === 0'>
-                        <div class='location-search__state'>No results</div>
+                        <div class='location-search__state'
+                             x-text="t('noResults')"></div>
                     </template>
 
                     <template x-if='!searchLoading && !searchError && searchResults.length > 0'>
diff --git a/templates/static/main.js b/templates/static/main.js
index c9d6bbc..899984e 100644
--- a/templates/static/main.js
+++ b/templates/static/main.js
@@ -12,6 +12,13 @@ const app = () => ({
     userMinutes: 0,
     now: new Date(),
     debug: hasDebugHashFlag(),
+    locating: false,
+    locateError: "",
+
+    t(key) {
+        const lang = this.preferredSalathLangs[0];
+        return UI_STRINGS[key]?.[lang] ?? UI_STRINGS[key]?.en ?? key;
+    },
 
     async init() {
         const urlCoords = getURLCoords();
@@ -45,6 +52,19 @@ const app = () => ({
         }
     },
 
+    async useCurrentLocation() {
+        this.locateError = "";
+        this.locating = true;
+        try {
+            const coords = await getUserLocation();
+            await this.selectNearestLocation(coords.latitude, coords.longitude, {updateURL: true});
+        } catch (_error) {
+            this.locateError = "locateFailed";
+        } finally {
+            this.locating = false;
+        }
+    },
+
     onSearchInput() {
         this.searchError = "";
         if (this.searchDebounceTimer) {
@@ -55,6 +75,9 @@ const app = () => ({
         if (query === "") {
             this.searchResults = [];
             this.searchOpen = false;
+            if (this.selectedLocation) {
+                this.clearLocation();
+            }
             return;
         }
 
@@ -71,7 +94,7 @@ const app = () => ({
             this.searchResults = response.locations ?? [];
         } catch (_error) {
             this.searchResults = [];
-            this.searchError = "Failed to search locations.";
+            this.searchError = "searchFailed";
         } finally {
             this.searchLoading = false;
         }
@@ -97,6 +120,16 @@ const app = () => ({
         await this.refreshPrayerTimes();
     },
 
+    clearLocation() {
+        this.selectedLocation = null;
+        this.searchQuery = "";
+        this.searchResults = [];
+        this.searchOpen = false;
+        this.futureTimes = [];
+        this.lastUpdated = null;
+        clearURLCoords();
+    },
+
     formatLocationLabel(location) {
         if (!location) {
             return "";
@@ -173,6 +206,51 @@ const app = () => ({
     }
 });
 
+const UI_STRINGS = {
+    appTitle: {
+        tr: "Namaz Vakitleri",
+        en: "Prayer Times",
+        de: "Gebetszeiten",
+        ar: "مواقيت الصلاة"
+    },
+    searchPlaceholder: {
+        tr: "Konum ara...",
+        en: "Search location...",
+        de: "Ort suchen...",
+        ar: "ابحث عن موقع..."
+    },
+    useCurrentLocation: {
+        tr: "Mevcut konumumu kullan",
+        en: "Use my current location",
+        de: "Meinen aktuellen Standort verwenden",
+        ar: "استخدم موقعي الحالي"
+    },
+    searching: {
+        tr: "Aranıyor...",
+        en: "Searching...",
+        de: "Suche läuft...",
+        ar: "جارٍ البحث..."
+    },
+    noResults: {
+        tr: "Sonuç bulunamadı",
+        en: "No results",
+        de: "Keine Ergebnisse",
+        ar: "لا توجد نتائج"
+    },
+    locateFailed: {
+        tr: "Konumunuz alınamadı.",
+        en: "Could not get your location.",
+        de: "Standort konnte nicht ermittelt werden.",
+        ar: "تعذر تحديد موقعك."
+    },
+    searchFailed: {
+        tr: "Konum araması başarısız oldu.",
+        en: "Failed to search locations.",
+        de: "Ortssuche fehlgeschlagen.",
+        ar: "فشل البحث عن الموقع."
+    }
+};
+
 class PrayerTimes {
     static salaths = ["fajr", "sunrise", "dhuhr", "asr", "maghrib", "isha"];
     static translations = {
@@ -367,3 +445,12 @@ function setURLCoords(latitude, longitude) {
     url.searchParams.delete("lon");
     window.history.replaceState({}, "", url.toString());
 }
+
+function clearURLCoords() {
+    const url = new URL(window.location.href);
+    url.searchParams.delete("latitude");
+    url.searchParams.delete("longitude");
+    url.searchParams.delete("lat");
+    url.searchParams.delete("lon");
+    window.history.replaceState({}, "", url.toString());
+}
diff --git a/templates/static/style.css b/templates/static/style.css
index c02f770..a0d0cfc 100644
--- a/templates/static/style.css
+++ b/templates/static/style.css
@@ -45,7 +45,7 @@ body {
     align-items: center;
     justify-content: center;
     gap: 1.25rem;
-    padding: 0.875rem 1.25rem;
+    padding: clamp(1rem, 4vh, 2rem) 1.25rem 0.875rem;
 }
 
 .app-bar__brand {
@@ -72,11 +72,16 @@ body {
 
 .location-search {
     position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     width: 100%;
     max-width: 24rem;
 }
 
 .location-search__input {
+    flex: 1 1 auto;
+    min-width: 0;
     width: 100%;
     border: 1px solid var(--color-border);
     border-radius: 0.75rem;
@@ -86,6 +91,33 @@ body {
     color: var(--color-ink);
 }
 
+.location-search__locate {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.75rem;
+    background: var(--color-surface);
+    color: var(--color-primary);
+    font-size: 1.1rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.location-search__locate:hover {
+    background: #f4f1e4;
+    border-color: var(--color-primary);
+}
+
+.location-search__locate:disabled,
+.location-search__locate--busy {
+    opacity: 0.6;
+    cursor: wait;
+}
+
 .location-search__input:focus {
     outline: none;
     border-color: var(--color-primary);
@@ -175,7 +207,7 @@ p + p {
     align-items: center;
     justify-content: space-evenly;
     gap: clamp(0.5rem, 2vh, 1.25rem);
-    padding: 0.5rem 1rem;
+    padding: clamp(0.5rem, 2vh, 1rem) 1rem;
     overflow: hidden;
 }
 
@@ -282,7 +314,7 @@ tr.current .cell-names {
 
 .app-footer {
     flex: 0 0 auto;
-    padding: 0.25rem 1rem 0.75rem;
+    padding: clamp(0.5rem, 2vh, 1rem) 1rem clamp(1rem, 4vh, 2rem);
 }
 
 .clock {