weather_app/src/components/AddLocationDialog.svelte

<script>
  import { app } from '../lib/stores/app.svelte.js'
  import { autofocus } from '../lib/autofocus.js'

  let { onClose, onAdd } = $props()

  let searchQuery = $state('')
  let searchTimer = null
  let geocodingResults = $state([])
  let loading = $state(false)
  let error = $state('')

  function handleSearch(e) {
    const val = e.target.value
    searchQuery = val
    clearTimeout(searchTimer)

    if (val.length < 2) {
      geocodingResults = []
      return
    }

    loading = true
    error = ''

    searchTimer = setTimeout(async () => {
      try {
        const { searchLocations } = await import('../lib/api/weather.js')
        geocodingResults = await searchLocations(val)
      } catch (e) {
        error = 'Search failed: ' + (e.message || 'Unknown error')
        geocodingResults = []
      } finally {
        loading = false
      }
    }, 400)
  }

  function handleSelect(location) {
    onAdd(location)
  }

  function handleBackdrop(e) {
    if (e.target === e.currentTarget) {
      onClose()
    }
  }
</script>

<div class="modal-overlay" onclick={handleBackdrop} role="presentation">
  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
  <div
    class="modal"
    role="dialog"
    aria-modal="true"
    aria-label="Add location"
    tabindex="-1"
    onclick={(e) => e.stopPropagation()}
  >
    <div class="modal-header">
      <h3>Add Location</h3>
      <button class="btn-icon" onclick={onClose} aria-label="Close">✕</button>
    </div>

    <div class="search-row">
      <input
        type="search"
        placeholder="Search for a city..."
        value={searchQuery}
        oninput={handleSearch}
        use:autofocus
        autocomplete="off"
      />
      {#if loading}
        <span class="search-spinner">⏳</span>
      {/if}
    </div>

    {#if error}
      <div class="error-msg">{error}</div>
    {/if}

    {#if geocodingResults.length > 0}
      <div class="results-list">
        {#each geocodingResults as result}
          <button class="result-item" onclick={() => handleSelect(result)}>
            <span class="result-icon">🏙️</span>
            <div class="result-info">
              <span class="result-name">{result.name}</span>
              <span class="result-detail">
                {result.admin1 || ''}{result.admin1 && result.country ? ', ' : ''}{result.country || ''}
              </span>
            </div>
            <span class="result-arrow">→</span>
          </button>
        {/each}
      </div>
    {:else if searchQuery.length >= 2 && !loading}
      <div class="no-results">
        <p class="text-muted text-sm">No locations found for "{searchQuery}".</p>
      </div>
    {/if}

    <!-- Use current location fallback -->
    <div class="geolocate-section">
      <button
        class="btn btn-ghost btn-sm w-full"
        onclick={async () => {
          try {
            const pos = await new Promise((resolve, reject) => {
              navigator.geolocation.getCurrentPosition(resolve, reject, {
                enableHighAccuracy: true,
                timeout: 10000,
              })
            })
            onAdd({
              name: 'Current Location',
              latitude: pos.coords.latitude,
              longitude: pos.coords.longitude,
            })
          } catch (e) {
            alert('Could not get location. Please search above.')
          }
        }}
      >
        📍 Use Current Location
      </button>
    </div>
  </div>
</div>

<style>
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
  }

  .modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: fadeInScale 0.2s ease-out;
  }

  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .modal-header h3 {
    font-size: 1.1rem;
  }

  .search-row {
    position: relative;
    margin-bottom: 8px;
  }

  .search-row input {
    padding: 10px 36px 10px 14px;
    font-size: 0.9rem;
  }

  .search-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    animation: spin 1s linear infinite;
    pointer-events: none;
  }

  @keyframes spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
  }

  .error-msg {
    color: #fca5a5;
    font-size: 0.8rem;
    padding: 6px 0;
  }

  .results-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 8px 0;
    background: var(--color-surface-card);
  }

  .result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition);
  }

  .result-item:last-child {
    border-bottom: none;
  }

  .result-item:hover {
    background: var(--color-surface-hover);
  }

  .result-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .result-info {
    flex: 1;
    min-width: 0;
  }

  .result-name {
    font-size: 0.9rem;
    font-weight: 500;
    display: block;
  }

  .result-detail {
    font-size: 0.78rem;
    color: var(--color-text-muted);
  }

  .result-arrow {
    color: var(--color-text-muted);
    font-size: 1rem;
    flex-shrink: 0;
  }

  .no-results {
    padding: 20px;
    text-align: center;
  }

  .geolocate-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
  }

  @media (max-width: 1023px) {
    .modal-overlay {
      align-items: flex-end;
    }

    .modal {
      max-height: 85dvh;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      margin-bottom: 0;
      max-width: none;
      padding-bottom: max(20px, var(--safe-bottom));
      animation: slideUp 0.25s ease-out;
    }

    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
  }
</style>