PBAR

src/App.svelte

@@ -3,6 +3,7 @@
   import { authStore } from './lib/stores/auth';
   import { uiStore } from './lib/stores/ui';
   import AppHeader from './lib/components/Layout/AppHeader.svelte';
+  import ProgressBar from './lib/components/Layout/ProgressBar.svelte';
   import TabBar, { type TabId } from './lib/components/Layout/TabBar.svelte';
   import Scanner from './lib/components/Pages/Scanner.svelte';
   import Encounters from './lib/components/Pages/Encounters.svelte';
@@ -122,6 +123,7 @@
 
 <div class="app">
   {#if !isDetailPageOpen}
+    <ProgressBar />
     <AppHeader {hfAuth} currentTab={tabNames[activeTab]} />
   {/if}
   

src/lib/components/Layout/ProgressBar.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getOrCreateGameState } from '$lib/db/gameState';
+  import type { GameState } from '$lib/db/schema';
+  
+  let gameState: GameState | null = $state(null);
+  
+  // Progress bar color based on progress
+  const progressColor = $derived(getProgressColor(gameState?.progressPoints || 0));
+  
+  function getProgressColor(points: number): string {
+    const progress = points / 1000;
+    if (progress < 0.2) return '#4caf50'; // green
+    if (progress < 0.4) return '#ffc107'; // yellow
+    if (progress < 0.6) return '#ff9800'; // orange
+    if (progress < 0.8) return '#f44336'; // red
+    return '#9c27b0'; // purple
+  }
+  
+  onMount(async () => {
+    // Load game state
+    gameState = await getOrCreateGameState();
+    
+    // Refresh game state periodically
+    const interval = setInterval(async () => {
+      gameState = await getOrCreateGameState();
+    }, 5000); // Update every 5 seconds
+    
+    return () => clearInterval(interval);
+  });
+</script>
+
+{#if gameState}
+  <div class="progress-container">
+    <div class="progress-bar">
+      <div class="progress-fill" style="width: {(gameState.progressPoints / 1000) * 100}%; background-color: {progressColor}"></div>
+    </div>
+    <span class="progress-stats">👥 {gameState.trainersDefeated} 📷 {gameState.picletsCapured}</span>
+  </div>
+{/if}
+
+<style>
+  .progress-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    background: white;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  .progress-bar {
+    flex: 1;
+    background: #f0f0f0;
+    height: 6px;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  
+  .progress-fill {
+    height: 100%;
+    transition: width 0.8s ease;
+  }
+  
+  .progress-stats {
+    font-size: 0.875rem;
+    color: #666;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+</style>

src/lib/components/Pages/Encounters.svelte

@@ -9,7 +9,6 @@
   import Battle from './Battle.svelte';
   
   let encounters: Encounter[] = [];
-  let gameState: GameState | null = null;
   let isLoading = true;
   let isRefreshing = false;
   
@@ -26,9 +25,6 @@
   async function loadEncounters() {
     isLoading = true;
     try {
-      // Load game state
-      gameState = await getOrCreateGameState();
-      
       // Get current encounters
       const currentEncounters = await EncounterService.getCurrentEncounters();
       
@@ -107,7 +103,6 @@
     try {
       await EncounterService.forceEncounterRefresh();
       encounters = await EncounterService.generateEncounters();
-      gameState = await getOrCreateGameState();
     } catch (error) {
       console.error('Error refreshing encounters:', error);
     }
@@ -258,14 +253,6 @@
   />
 {:else}
 <div class="encounters-page">
-  <div class="header">
-    {#if gameState}
-      <div class="progress-bar">
-        <div class="progress-fill" style="width: {(gameState.progressPoints / 1000) * 100}%"></div>
-        <span class="progress-text">{gameState.progressPoints}/1000</span>
-      </div>
-    {/if}
-  </div>
   
   {#if isLoading}
     <div class="loading">
@@ -345,41 +332,6 @@
     padding-bottom: 5rem;
   }
   
-  .header {
-    margin-bottom: 1.5rem;
-  }
-  
-  .header h1 {
-    margin: 0 0 1rem;
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: #1a1a1a;
-  }
-  
-  .progress-bar {
-    background: #e0e0e0;
-    height: 24px;
-    border-radius: 12px;
-    overflow: hidden;
-    position: relative;
-  }
-  
-  .progress-fill {
-    background: linear-gradient(90deg, #4caf50, #66bb6a);
-    height: 100%;
-    transition: width 0.3s ease;
-  }
-  
-  .progress-text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #333;
-  }
-  
   .loading, .empty-state {
     display: flex;
     flex-direction: column;