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

@@ -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'>