src/lib/components/Layout/ProgressBar.svelte

<script lang="ts">
  import { dataStore } from '$lib/stores/data';
  import { authStore } from '$lib/stores/auth';

  const data = $derived(dataStore);

  // Compute the signed-in user's stats from the dex — no separate fetch
  // needed. Each MonsterSummary carries discoverer_username, so we just
  // filter and sum. This works even if users/{sub}.json hasn't loaded.
  const myStats = $derived.by(() => {
    const username = $authStore.userInfo?.preferred_username;
    if (!username || !$data.dex) return null;
    const mine = $data.dex.filter((m) => m.discoverer_username === username);
    return {
      total_rarity: mine.reduce((sum, m) => sum + m.rarity, 0),
      discovery_count: mine.length,
    };
  });
</script>

{#if myStats}
  <div class="stats-bar">
    <span class="stats-text">⭐ {myStats.total_rarity} 🔍 {myStats.discovery_count}</span>
  </div>
{:else if $data.stats}
  <div class="stats-bar">
    <span class="stats-text">📷 {$data.stats.total_monsters} 👥 {$data.stats.total_users}</span>
  </div>
{/if}

<style>
  .stats-bar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    padding-top: env(safe-area-inset-top);
    background: white;
    border-bottom: 1px solid #f0f0f0;
  }

  .stats-text {
    font-size: 0.875rem;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
  }
</style>