Merge branch 'feature/timeline' into main

src/App.svelte

@@ -8,9 +8,10 @@
   import StatsPanel from './lib/world-map/StatsPanel.svelte';
   import TimelineView from './lib/timeline/TimelineView.svelte';
 
-  let screen = $state('worldmap');
   let journeyActive = $state(false);
   let journeyProgress = $state(null);
+  let inDetail = $state(false);
+  let pendingCountry = $state('');
 
   function onNavigate(s) {
     screen = s;
@@ -30,6 +31,11 @@
     journeyProgress = p;
   }
 
+  function handleCountryClick(name) {
+    pendingCountry = name;
+    screen = 'timeline';
+  }
+
   $effect(() => {
     initAuth();
   });
@@ -44,21 +50,25 @@
     <span class="loading-text">Loading...</span>
   </div>
 {:else}
-  <Layout {screen} {onNavigate}>
+  <Layout {screen} {onNavigate} hideTopBar={inDetail}>
     {#if screen === 'worldmap'}
       <div class="worldmap-page">
         <div class="map-area">
           {#if journeyActive}
             <JourneyView onclose={endJourney} onprogress={onJourneyProgress} />
           {:else}
-            <WorldMap />
+            <WorldMap onCountryClick={handleCountryClick} />
             <button class="journey-play-btn" onclick={startJourney}>▶</button>
           {/if}
         </div>
         <StatsPanel />
       </div>
     {:else}
-      <TimelineView />
+      <TimelineView
+        onDetailChange={(v) => (inDetail = v)}
+        {pendingCountry}
+        onNewEntryClear={() => (pendingCountry = '')}
+      />
     {/if}
   </Layout>
 
@@ -67,6 +77,7 @@
   {:else if needsCountry}
     <CountryPicker />
   {/if}
+  {/if}
 {/if}
 
 <style>