weather_app/src/components/DailyForecast.svelte

<script>
  import { app } from '../lib/stores/app.svelte.js'
  import { getWeatherInfo } from '../lib/api/weather-codes.js'

  const data = $derived(app.forecastData)
  const daily = $derived(data?.daily)
  const unit = $derived(app.settings.units === 'imperial' ? '°F' : '°C')
  const windUnit = $derived(app.settings.units === 'imperial' ? 'mph' : 'km/h')

  function formatDay(dateStr, index) {
    if (index === 0) return 'Today'
    if (index === 1) return 'Tomorrow'
    const d = new Date(dateStr)
    return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
  }

  function getDayName(dateStr, index) {
    if (index === 0) return 'Today'
    if (index === 1) return 'Tomorrow'
    return new Date(dateStr).toLocaleDateString('en-US', { weekday: 'long' })
  }
</script>

{#if daily?.time}
  <div class="daily-section">
    <h3 class="section-title">7-Day Forecast</h3>

    <div class="daily-list">
      {#each daily.time as day, i}
        {#if i < 7}
          {@const info = getWeatherInfo(daily.weather_code[i])}
          {@const tempMax = Math.round(daily.temperature_2m_max[i])}
          {@const tempMin = Math.round(daily.temperature_2m_min[i])}
          {@const precip = daily.precipitation_probability_max?.[i] || 0}
          {@const wind = daily.wind_speed_10m_max?.[i]}

          <div class="day-card card-glass" class:today={i === 0}>
            <div class="day-left">
              <span class="day-name">{getDayName(day, i)}</span>
              <span class="day-date text-xs text-muted">{formatDay(day, i)}</span>
            </div>

            <div class="day-center">
              <span class="day-icon">{info.icon}</span>
              <span class="day-desc">{info.label}</span>
            </div>

            <div class="day-right">
              <div class="day-temps">
                <span class="temp-high">{tempMax}{unit}</span>
                <span class="temp-low">/ {tempMin}{unit}</span>
              </div>

              {#if precip > 0}
                <div class="precip-row">
                  <span class="precip-icon">💧</span>
                  <div class="precip-bar-wrap">
                    <div class="precip-fill" style="width: {Math.min(precip, 100)}%"></div>
                  </div>
                  <span class="precip-label">{precip}%</span>
                </div>
              {/if}

              {#if wind > 0}
                <span class="wind-info">💨 {Math.round(wind)} {windUnit}</span>
              {/if}
            </div>
          </div>
        {/if}
      {/each}
    </div>
  </div>
{/if}

<style>
  .daily-section {
    margin-bottom: 4px;
  }

  .section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-text-secondary);
  }

  .daily-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .day-card {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    transition: background var(--transition);
  }

  .day-card.today {
    border-color: var(--color-primary);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.08);
  }

  .day-left {
    min-width: 100px;
    display: flex;
    flex-direction: column;
  }

  .day-name {
    font-weight: 600;
    font-size: 0.9rem;
  }

  .day-date {
    margin-top: 1px;
  }

  .day-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .day-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
  }

  .day-desc {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
  }

  .day-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
    flex-shrink: 0;
  }

  .day-temps {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .temp-high {
    font-weight: 700;
    font-size: 0.95rem;
  }

  .temp-low {
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }

  .precip-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .precip-icon {
    font-size: 0.7rem;
  }

  .precip-bar-wrap {
    width: 40px;
    height: 4px;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 2px;
    overflow: hidden;
  }

  .precip-fill {
    height: 100%;
    background: var(--color-rain);
    border-radius: 2px;
    transition: width 0.3s ease;
  }

  .precip-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    min-width: 24px;
  }

  .wind-info {
    font-size: 0.72rem;
    color: var(--color-text-muted);
  }

  @media (max-width: 1023px) {
    .day-card {
      flex-wrap: wrap;
      padding: 12px 14px;
      gap: 8px;
    }

    .day-left {
      min-width: 80px;
    }

    .day-center {
      flex: 2;
    }

    .day-right {
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .day-desc {
      display: none;
    }
  }
</style>