chore: reorganize timeline into view/ and detail/ folders, move home.png to assets/

src/App.svelte

@@ -6,7 +6,7 @@
   import WorldMap from './lib/world-map/WorldMap.svelte';
   import JourneyView from './lib/world-map/JourneyView.svelte';
   import StatsPanel from './lib/world-map/StatsPanel.svelte';
-  import TimelineView from './lib/timeline/TimelineView.svelte';
+  import TimelineView from './lib/timeline/view/TimelineView.svelte';
 
   let screen = $state('worldmap');
   let journeyActive = $state(false);
@@ -63,13 +63,14 @@
             <button class="journey-play-btn" onclick={startJourney}>▶ Replay My Trips</button>
           {/if}
         </div>
-        <StatsPanel />
+        {#if !journeyActive}<StatsPanel />{/if}
       </div>
     {:else}
       <TimelineView
         onDetailChange={(v) => (inDetail = v)}
         {pendingCountry}
         onNewEntryClear={() => (pendingCountry = '')}
+        onGoToMap={() => { screen = 'worldmap'; }}
       />
     {/if}
   </Layout>
@@ -140,4 +141,5 @@
   .journey-play-btn:active {
     transform: scale(0.92);
   }
+
 </style>

src/lib/auth/CountryPicker.svelte

@@ -1,93 +1,72 @@
 <script>
   import { getUser, getUserProfile, setHomeCountry } from './userStore.svelte.js';
-  import worldData from 'world-atlas/countries-50m.json';
+  import { countryNames } from '../shared/countries.js';
+  import homeImg from '../../assets/home.png';
 
   let user = $derived(getUser());
   let profile = $derived(getUserProfile());
 
-  const countries = $derived.by(() => {
-    if (!worldData?.objects?.countries?.geometries) return [];
-    return worldData.objects.countries.geometries
-      .map(g => ({ name: g.properties?.name, code: g.id }))
-      .filter(c => c.name && c.code)
-      .sort((a, b) => a.name.localeCompare(b.name));
-  });
-
   let search = $state('');
-  let selectedCountry = $state(null);
+  let selectedCountry = $state('');
-
-  let filtered = $derived(
-    search
-      ? countries.filter(c => c.name.toLowerCase().includes(search.toLowerCase()))
-      : countries
-  );
-
   let open = $state(false);
 
-  function select(c) {
+  let filtered = $derived(
-    selectedCountry = c;
+    search.trim()
-    search = c.name;
+      ? countryNames.filter(c => c.toLowerCase().includes(search.toLowerCase()))
+      : countryNames
+  );
+
+  function select(name) {
+    selectedCountry = name;
+    search = name;
     open = false;
   }
 
   function handleSubmit() {
     if (selectedCountry) {
-      setHomeCountry(selectedCountry.name, selectedCountry.code);
+      setHomeCountry(selectedCountry, selectedCountry);
     }
   }
 
   function handleKeydown(e) {
-    if (e.key === 'Enter' && selectedCountry) {
+    if (e.key === 'Enter' && selectedCountry) handleSubmit();
-      handleSubmit();
+    if (e.key === 'Escape') open = false;
-    }
-    if (e.key === 'Escape') {
-      open = false;
-    }
   }
 </script>
 
 <div class="overlay">
   <div class="card">
-    <h1 class="heading">Welcome, {profile?.displayName || 'Traveler'}!</h1>
+    <img src={homeImg} alt="home" class="home-img" />
-    <p class="subtitle">Select your home country to get started</p>
+    <h1 class="title">Welcome, {profile?.displayName?.split(' ')[0] || 'Traveler'}!</h1>
+    <p class="subtitle">Where do you call home?</p>
 
-    <div class="dropdown" class:open>
+    <div class="dropdown">
       <input
         type="text"
-        placeholder="Search for a country..."
+        placeholder="Search country..."
         bind:value={search}
         onfocus={() => { open = true; }}
-        oninput={() => { open = true; selectedCountry = null; }}
+        oninput={() => { open = true; selectedCountry = ''; }}
         onkeydown={handleKeydown}
         class="search-input"
       />
-      {#if open}
+      {#if open && filtered.length > 0}
         <ul class="list" role="listbox">
-          {#each filtered as country}
+          {#each filtered as name}
             <li
               role="option"
-              aria-selected={selectedCountry?.name === country.name}
+              aria-selected={selectedCountry === name}
-              class:selected={selectedCountry?.name === country.name}
+              class:selected={selectedCountry === name}
-              onclick={() => select(country)}
+              onmousedown={() => select(name)}
-              onkeydown={(e) => { if (e.key === 'Enter') select(country); }}
               tabindex="0"
-            >
+            >{name}</li>
-              {country.name}
-            </li>
           {/each}
-          {#if filtered.length === 0}
-            <li class="no-results">No countries found</li>
-          {/if}
         </ul>
       {/if}
     </div>
 
-    <button
+    <button class="continue-btn" disabled={!selectedCountry} onclick={handleSubmit}>
-      class="continue-btn"
+      Set home country
-      disabled={!selectedCountry}
-      onclick={handleSubmit}
-    >
-      Continue
     </button>
   </div>
 </div>
@@ -96,113 +75,116 @@
   .overlay {
     position: fixed;
     inset: 0;
-    background: rgba(15, 23, 42, 0.85);
+    background: var(--bg);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 100;
-    backdrop-filter: blur(4px);
+    padding-bottom: 20vh;
   }
 
   .card {
-    background: #1e2937;
-    border-radius: 16px;
-    padding: 40px 36px;
     text-align: center;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    max-width: 360px;
-    max-width: 420px;
     width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
-  .heading {
+  .home-img {
-    font: 700 24px/1.3 sans-serif;
+    width: 200px;
-    color: #f1f5f9;
+    height: 200px;
-    margin-bottom: 6px;
+    object-fit: contain;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    font-family: var(--heading);
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0 0 6px;
   }
 
   .subtitle {
-    font: 400 15px/1.4 sans-serif;
+    font-family: var(--sans);
-    color: #94a3b8;
+    font-size: 14px;
-    margin-bottom: 28px;
+    font-weight: 300;
+    color: var(--text);
+    margin: 0 0 24px;
   }
 
   .dropdown {
     position: relative;
-    margin-bottom: 24px;
+    width: 100%;
+    margin-bottom: 16px;
     text-align: left;
   }
 
   .search-input {
     width: 100%;
-    padding: 12px 16px;
+    padding: 10px 14px;
-    border: 1px solid #475569;
+    border: 1px solid var(--border);
     border-radius: 8px;
-    background: #0f172a;
+    background: var(--bg-subtle);
-    color: #f1f5f9;
+    color: var(--text-h);
-    font: 400 15px/1.4 sans-serif;
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 300;
     outline: none;
-    transition: border-color 0.2s;
+    transition: border-color 0.15s;
-  }
+    box-sizing: border-box;
-
-  .search-input:focus {
-    border-color: #3b82f6;
-  }
-
-  .search-input::placeholder {
-    color: #64748b;
   }
+  .search-input:focus { border-color: var(--accent-border); }
+  .search-input::placeholder { color: var(--text-sub); }
 
   .list {
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
     right: 0;
-    max-height: 240px;
+    max-height: 220px;
     overflow-y: auto;
-    background: #0f172a;
+    background: var(--bg);
-    border: 1px solid #475569;
+    border: 1px solid var(--border);
     border-radius: 8px;
     list-style: none;
     z-index: 10;
+    padding: 4px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
   }
 
   .list li {
-    padding: 10px 16px;
+    padding: 8px 12px;
     cursor: pointer;
-    color: #cbd5e1;
+    color: var(--text);
-    font: 400 14px/1.4 sans-serif;
+    font-family: var(--sans);
-    transition: background 0.15s;
+    font-size: 13px;
+    font-weight: 300;
+    border-radius: 6px;
+    transition: background 0.1s;
   }
 
-  .list li:hover,
+  .list li:hover, .list li.selected {
-  .list li.selected {
+    background: var(--accent-bg);
-    background: #1e3a5f;
+    color: var(--accent);
-    color: #f1f5f9;
-  }
-
-  .no-results {
-    color: #64748b;
-    cursor: default;
   }
 
   .continue-btn {
     width: 100%;
-    padding: 12px 24px;
+    padding: 11px 24px;
-    border: none;
+    border: 1px solid var(--border);
     border-radius: 8px;
-    background: #3b82f6;
+    background: var(--accent);
     color: #fff;
-    font: 600 16px/1.4 sans-serif;
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 500;
     cursor: pointer;
-    transition: background 0.2s, opacity 0.2s;
+    transition: background 0.15s, opacity 0.15s;
-  }
-
-  .continue-btn:hover:not(:disabled) {
-    background: #2563eb;
-  }
-
-  .continue-btn:disabled {
-    opacity: 0.4;
-    cursor: default;
   }
+  .continue-btn:hover:not(:disabled) { background: var(--accent-dark); }
+  .continue-btn:disabled { opacity: 0.4; cursor: default; }
 </style>

src/lib/auth/LoginOverlay.svelte

@@ -1,12 +1,13 @@
 <script>
   import { signInWithGoogle } from './userStore.svelte.js';
+  import logoImg from '../../assets/logo.png';
 </script>
 
 <div class="overlay">
   <div class="card">
-    <img src="/logo.png" alt="Map Journal" class="logo" />
+    <img src={logoImg} alt="Journi" class="logo" />
-    <h1 class="title">Map Journal</h1>
+    <h1 class="title">Journi</h1>
-    <p class="subtitle">Sign in to start your journey</p>
+    <p class="subtitle">Collect Colors Along the Way</p>
     <button class="google-btn" onclick={signInWithGoogle}>
       <svg class="google-icon" viewBox="0 0 48 48">
         <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
@@ -24,64 +25,90 @@
   .overlay {
     position: fixed;
     inset: 0;
-    background: rgba(15, 23, 42, 0.85);
+    background: var(--bg);
     display: flex;
     align-items: center;
     justify-content: center;
+    padding-bottom: 20vh;
     z-index: 100;
-    backdrop-filter: blur(4px);
   }
 
   .card {
-    background: #1e2937;
-    border-radius: 16px;
-    padding: 48px 40px;
     text-align: center;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    max-width: 360px;
-    max-width: 400px;
     width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
   }
 
   .logo {
-    width: 80px;
+    width: 216px;
-    height: 80px;
+    height: 216px;
-    border-radius: 12px;
+    object-fit: contain;
     margin-bottom: 16px;
+    animation: jitter 1.4s steps(1, end) 1 forwards;
+  }
+
+  @keyframes jitter {
+    0%   { transform: scale(0.7)  rotate(0deg);   opacity: 0.5; }
+    8%   { transform: scale(0.85) rotate(-16deg);  opacity: 1; }
+    16%  { transform: scale(1.0)  rotate(16deg); }
+    24%  { transform: scale(1.06) rotate(-16deg); }
+    32%  { transform: scale(1.12) rotate(16deg); }
+    40%  { transform: scale(1.16) rotate(-16deg); }
+    48%  { transform: scale(1.2)  rotate(16deg); }
+    56%  { transform: scale(1.2)  rotate(-16deg); }
+    64%  { transform: scale(1.2)  rotate(16deg); }
+    72%  { transform: scale(1.2)  rotate(-10deg); }
+    80%  { transform: scale(1.2)  rotate(10deg); }
+    88%  { transform: scale(1.2)  rotate(-4deg); }
+    94%  { transform: scale(1.2)  rotate(4deg); }
+    100% { transform: scale(1.2)  rotate(0deg); }
   }
 
   .title {
-    font: 700 28px/1.2 sans-serif;
+    font-family: var(--heading);
-    color: #f1f5f9;
+    font-size: 28px;
-    margin-bottom: 8px;
+    font-weight: 600;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0;
   }
 
   .subtitle {
-    font: 400 15px/1.4 sans-serif;
+    font-family: var(--sans);
-    color: #94a3b8;
+    font-size: 14px;
-    margin-bottom: 32px;
+    font-weight: 300;
+    color: var(--text);
+    margin: 0 0 32px;
   }
 
   .google-btn {
     display: inline-flex;
     align-items: center;
-    gap: 12px;
+    gap: 10px;
-    padding: 12px 28px;
+    padding: 10px 24px;
-    border: 1px solid rgba(255,255,255,0.15);
+    border: 1px solid var(--border);
     border-radius: 8px;
-    background: #334155;
+    background: var(--bg-subtle);
-    color: #f1f5f9;
+    color: var(--text-h);
-    font: 500 16px/1.4 sans-serif;
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 400;
     cursor: pointer;
-    transition: background 0.2s;
+    transition: background 0.15s, border-color 0.15s;
   }
 
   .google-btn:hover {
-    background: #475569;
+    background: var(--bg);
+    border-color: var(--accent-border);
   }
 
   .google-icon {
-    width: 22px;
+    width: 20px;
-    height: 22px;
+    height: 20px;
     flex-shrink: 0;
   }
 </style>

src/lib/auth/userStore.svelte.js

@@ -1,7 +1,6 @@
 import { auth, db, googleProvider } from '../firebase.js';
 import { onAuthStateChanged, signInWithPopup, signOut as fbSignOut } from 'firebase/auth';
 import { doc, getDoc, setDoc, serverTimestamp } from 'firebase/firestore';
-import { initSelectionListener } from '../layout/selection.svelte.js';
 import { initEntriesListener } from '../stores/entriesStore.svelte.js';
 
 let _initialized = false;
@@ -48,7 +47,6 @@ export function initAuth() {
   onAuthStateChanged(auth, async (fbUser) => {
     if (fbUser) {
       user = fbUser;
-      initSelectionListener(fbUser.uid);
       initEntriesListener(fbUser.uid);
       const docRef = doc(db, 'users', fbUser.uid);
       const docSnap = await getDoc(docRef);

src/lib/layout/TopBar.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getUser, getUserProfile, signOut } from '../auth/userStore.svelte.js';
-
   let { screen, onNavigate } = $props();
 
   let user = $derived(getUser());
@@ -20,8 +19,10 @@
 
 <div class="topbar">
   <div class="left">
+    <div class="brand">
       <span class="app-name">Journi</span>
     </div>
+  </div>
 
   <div class="center">
     <div class="segmented">
@@ -30,7 +31,7 @@
         style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);"
       ></div>
       <button class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Worldmap</button>
-      <button class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Timeline</button>
+      <button class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Journal</button>
     </div>
   </div>
 
@@ -83,6 +84,12 @@
     gap: 10px;
   }
 
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
   .app-name {
     font-family: var(--heading);
     font-size: 22px;

src/lib/layout/selection.svelte.js

@@ -1,60 +1,19 @@
-import { db } from '../firebase.js';
+import { journals } from '../stores/journalStore.js';
-import { doc, onSnapshot, setDoc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';
+import { nameToId } from '../shared/countries.js';
 
 let selected = $state(new Set());
 let totalCountries = $state(0);
-let homeCountryCode = $state(null);
+let flashing = $state(new Set());
-let _uid = null;
-let _unsubscribe = null;
 
-export function initSelectionListener(uid) {
+journals.subscribe((entries) => {
-  if (_unsubscribe) _unsubscribe();
+  const ids = new Set();
-  _uid = uid;
+  for (const e of entries) {
-  const userRef = doc(db, 'users', uid);
+    const id = nameToId[e.location?.country];
-  _unsubscribe = onSnapshot(userRef, (snap) => {
+    if (id) ids.add(id);
-    if (snap.exists()) {
-      const codes = snap.data().visitedCountries || [];
-      selected = new Set(codes);
-      homeCountryCode = snap.data().homeCountryCode || null;
-    }
-  });
-}
-
-const visitedRef = doc(db, 'visited', 'countries');
-
-onSnapshot(visitedRef, (snap) => {
-  if (snap.exists()) {
-    selected = new Set(snap.data().ids ?? []);
   }
+  selected = ids;
 });
 
-function persist() {
-  setDoc(visitedRef, { ids: [...selected] });
-}
-
-export function toggle(id) {
-  const was = selected.has(id);
-  const next = new Set(selected);
-  if (was) next.delete(id);
-  else next.add(id);
-  selected = next;
-  persist();
-  if (_uid) {
-    const userRef = doc(db, 'users', _uid);
-    if (was) updateDoc(userRef, { visitedCountries: arrayRemove(id) });
-    else updateDoc(userRef, { visitedCountries: arrayUnion(id) });
-  }
-}
-
-export function clearAll() {
-  selected = new Set();
-  persist();
-  if (_uid) {
-    const userRef = doc(db, 'users', _uid);
-    updateDoc(userRef, { visitedCountries: [] });
-  }
-}
-
 export function getSelected() {
   return selected;
 }
@@ -67,6 +26,15 @@ export function getTotalCount() {
   return totalCountries;
 }
 
-export function getHomeCountryCode() {
+export function getFlashing() {
-  return homeCountryCode;
+  return flashing;
+}
+
+export function flashCountry(countryName) {
+  const id = nameToId[countryName];
+  if (!id) return;
+  flashing = new Set([...flashing, id]);
+  setTimeout(() => {
+    flashing = new Set([...flashing].filter(x => x !== id));
+  }, 1600);
 }

src/lib/shared/SearchInput.svelte

@@ -3,7 +3,7 @@
    * Searchable combobox input.
    * @type {{ id?: string, value: string, options: string[], placeholder?: string, required?: boolean, onchange?: (v: string) => void }}
    */
-  let { id, value = $bindable(), options, placeholder = '', required = false, onselect } = $props();
+  let { id, value = $bindable(), options, placeholder = '', required = false, onselect, onblurcommit } = $props();
 
   let query = $state(value);
   let open = $state(false);
@@ -39,7 +39,11 @@
   }
 
   function onBlur() {
-    setTimeout(() => { open = false; focused = -1; }, 150);
+    setTimeout(() => {
+      open = false;
+      focused = -1;
+      if (onblurcommit && query.trim()) onblurcommit(query.trim());
+    }, 150);
   }
 
   // Keep query in sync if value is changed externally

src/lib/shared/countries.js

@@ -63,8 +63,18 @@ const nameToAlpha2 = {
   'eSwatini':'SZ','Åland':'AX',
 };
 
-export const countryNames = feature(worldData, worldData.objects.countries)
+const _features = feature(worldData, worldData.objects.countries).features;
-  .features.map(f => f.properties?.name).filter(Boolean).sort();
+
+export const countryNames = _features
+  .map(f => f.properties?.name).filter(Boolean).sort();
+
+// country name → topojson numeric ID (e.g. 'Japan' → '392')
+export const nameToId = Object.fromEntries(
+  _features
+    .filter(f => f.properties?.name && f.id)
+    .map(f => [f.properties.name, String(f.id)])
+);
+nameToId['Kosovo'] = 'XK';
 
 /** @param {string} country */
 export function flagEmoji(country) {

src/lib/shared/countryCities.js

@@ -0,0 +1,184 @@
+export const countryCities = {
+  'Afghanistan': ['Kabul','Kandahar','Herat','Mazar-i-Sharif','Jalalabad'],
+  'Albania': ['Tirana','Durrës','Vlorë','Shkodër','Elbasan'],
+  'Algeria': ['Algiers','Oran','Constantine','Annaba','Blida'],
+  'Andorra': ['Andorra la Vella','Escaldes-Engordany','Encamp'],
+  'Angola': ['Luanda','Huambo','Lobito','Benguela','Lubango'],
+  'Argentina': ['Buenos Aires','Córdoba','Rosario','Mendoza','Bariloche','Salta','Mar del Plata'],
+  'Armenia': ['Yerevan','Gyumri','Vanadzor'],
+  'Australia': ['Sydney','Melbourne','Brisbane','Perth','Adelaide','Gold Coast','Cairns','Darwin','Hobart','Canberra'],
+  'Austria': ['Vienna','Salzburg','Graz','Innsbruck','Linz','Hallstatt'],
+  'Azerbaijan': ['Baku','Ganja','Sumqayit'],
+  'Bahamas': ['Nassau','Freeport'],
+  'Bahrain': ['Manama','Riffa','Muharraq'],
+  'Bangladesh': ['Dhaka','Chittagong','Sylhet','Rajshahi','Khulna'],
+  'Barbados': ['Bridgetown'],
+  'Belarus': ['Minsk','Gomel','Brest','Grodno'],
+  'Belgium': ['Brussels','Bruges','Ghent','Antwerp','Liège'],
+  'Belize': ['Belize City','San Ignacio','Placencia'],
+  'Benin': ['Cotonou','Porto-Novo','Abomey'],
+  'Bhutan': ['Thimphu','Paro','Punakha'],
+  'Bolivia': ['La Paz','Santa Cruz','Cochabamba','Sucre','Uyuni'],
+  'Bosnia and Herz.': ['Sarajevo','Mostar','Banja Luka'],
+  'Botswana': ['Gaborone','Francistown','Maun'],
+  'Brazil': ['São Paulo','Rio de Janeiro','Brasília','Salvador','Fortaleza','Manaus','Recife','Florianópolis','Foz do Iguaçu'],
+  'Brunei': ['Bandar Seri Begawan'],
+  'Bulgaria': ['Sofia','Plovdiv','Varna','Burgas','Ruse'],
+  'Burkina Faso': ['Ouagadougou','Bobo-Dioulasso'],
+  'Burundi': ['Bujumbura','Gitega'],
+  'Cabo Verde': ['Praia','Mindelo'],
+  'Cambodia': ['Phnom Penh','Siem Reap','Sihanoukville','Battambang'],
+  'Cameroon': ['Yaoundé','Douala','Bafoussam'],
+  'Canada': ['Toronto','Vancouver','Montreal','Calgary','Ottawa','Edmonton','Quebec City','Whistler','Banff','Niagara Falls','Halifax'],
+  'Central African Rep.': ['Bangui'],
+  'Chad': ["N'Djamena",'Moundou'],
+  'Chile': ['Santiago','Valparaíso','Atacama','Puerto Natales','Punta Arenas','Viña del Mar','San Pedro de Atacama'],
+  'China': ['Beijing','Shanghai','Guangzhou','Shenzhen','Chengdu','Xi\'an','Hangzhou','Chongqing','Guilin','Zhangjiajie','Lijiang','Hong Kong','Macau'],
+  'Colombia': ['Bogotá','Medellín','Cartagena','Cali','Santa Marta','Barranquilla'],
+  'Comoros': ['Moroni'],
+  'Congo': ['Brazzaville','Pointe-Noire'],
+  'Costa Rica': ['San José','Manuel Antonio','Tamarindo','Arenal','Monteverde'],
+  'Croatia': ['Zagreb','Dubrovnik','Split','Hvar','Zadar','Pula','Rijeka'],
+  'Cuba': ['Havana','Trinidad','Varadero','Santiago de Cuba','Cienfuegos'],
+  'Cyprus': ['Nicosia','Limassol','Paphos','Larnaca','Ayia Napa'],
+  'Czechia': ['Prague','Brno','Český Krumlov','Karlovy Vary','Olomouc'],
+  "Côte d'Ivoire": ['Abidjan','Yamoussoukro','Bouaké'],
+  'Dem. Rep. Congo': ['Kinshasa','Lubumbashi','Goma','Kisangani'],
+  'Denmark': ['Copenhagen','Aarhus','Odense','Aalborg'],
+  'Djibouti': ['Djibouti City'],
+  'Dominican Rep.': ['Santo Domingo','Punta Cana','Santiago','La Romana'],
+  'Ecuador': ['Quito','Guayaquil','Cuenca','Baños','Galápagos Islands'],
+  'Egypt': ['Cairo','Alexandria','Luxor','Aswan','Sharm el-Sheikh','Hurghada','Giza'],
+  'El Salvador': ['San Salvador','Santa Ana','San Miguel'],
+  'Eq. Guinea': ['Malabo','Bata'],
+  'Eritrea': ['Asmara','Massawa'],
+  'Estonia': ['Tallinn','Tartu','Pärnu'],
+  'Ethiopia': ['Addis Ababa','Lalibela','Gondar','Axum','Dire Dawa'],
+  'Fiji': ['Suva','Nadi','Mamanuca Islands'],
+  'Finland': ['Helsinki','Rovaniemi','Tampere','Turku','Oulu'],
+  'Fr. Polynesia': ['Papeete','Bora Bora','Moorea'],
+  'France': ['Paris','Nice','Lyon','Marseille','Bordeaux','Strasbourg','Toulouse','Cannes','Monaco','Mont Saint-Michel','Versailles'],
+  'Gabon': ['Libreville','Port-Gentil'],
+  'Gambia': ['Banjul','Serekunda'],
+  'Georgia': ['Tbilisi','Batumi','Kutaisi','Sighnaghi'],
+  'Germany': ['Berlin','Munich','Hamburg','Frankfurt','Cologne','Dresden','Heidelberg','Rothenburg ob der Tauber','Neuschwanstein','Stuttgart'],
+  'Ghana': ['Accra','Kumasi','Cape Coast','Tamale'],
+  'Greece': ['Athens','Santorini','Mykonos','Rhodes','Thessaloniki','Crete','Corfu','Meteora'],
+  'Greenland': ['Nuuk','Ilulissat'],
+  'Grenada': ["St. George's"],
+  'Guatemala': ['Guatemala City','Antigua','Lake Atitlán','Tikal','Quetzaltenango'],
+  'Guinea': ['Conakry'],
+  'Guyana': ['Georgetown'],
+  'Haiti': ['Port-au-Prince','Cap-Haïtien'],
+  'Honduras': ['Tegucigalpa','San Pedro Sula','Roatán'],
+  'Hong Kong': ['Hong Kong'],
+  'Hungary': ['Budapest','Debrecen','Pécs','Eger','Győr'],
+  'Iceland': ['Reykjavik','Akureyri','Blue Lagoon','Golden Circle'],
+  'India': ['Mumbai','Delhi','Jaipur','Agra','Bangalore','Chennai','Kolkata','Goa','Varanasi','Udaipur','Kerala','Leh','Shimla'],
+  'Indonesia': ['Jakarta','Bali','Yogyakarta','Lombok','Medan','Komodo','Raja Ampat','Surabaya'],
+  'Iran': ['Tehran','Isfahan','Shiraz','Persepolis','Yazd'],
+  'Iraq': ['Baghdad','Erbil','Basra','Najaf'],
+  'Ireland': ['Dublin','Cork','Galway','Killarney','Limerick'],
+  'Israel': ['Jerusalem','Tel Aviv','Haifa','Eilat','Dead Sea'],
+  'Italy': ['Rome','Florence','Venice','Milan','Naples','Amalfi','Sicily','Cinque Terre','Bologna','Turin'],
+  'Jamaica': ['Kingston','Montego Bay','Negril','Ocho Rios'],
+  'Japan': ['Tokyo','Kyoto','Osaka','Hiroshima','Nara','Sapporo','Hakone','Nikko','Kanazawa','Okinawa','Fukuoka'],
+  'Jordan': ['Amman','Petra','Wadi Rum','Aqaba','Jerash'],
+  'Kazakhstan': ['Almaty','Nur-Sultan','Shymkent'],
+  'Kenya': ['Nairobi','Mombasa','Masai Mara','Amboseli','Zanzibar'],
+  'Kosovo': ['Pristina','Prizren'],
+  'Kuwait': ['Kuwait City'],
+  'Kyrgyzstan': ['Bishkek','Osh','Karakol'],
+  'Laos': ['Vientiane','Luang Prabang','Vang Vieng'],
+  'Latvia': ['Riga','Jūrmala','Sigulda'],
+  'Lebanon': ['Beirut','Byblos','Baalbek','Sidon'],
+  'Libya': ['Tripoli','Benghazi','Leptis Magna'],
+  'Liechtenstein': ['Vaduz'],
+  'Lithuania': ['Vilnius','Kaunas','Trakai','Klaipėda'],
+  'Luxembourg': ['Luxembourg City','Vianden'],
+  'Madagascar': ['Antananarivo','Nosy Be','Morondava'],
+  'Malawi': ['Lilongwe','Blantyre','Lake Malawi'],
+  'Malaysia': ['Kuala Lumpur','Penang','Langkawi','Kota Kinabalu','Malacca','George Town'],
+  'Maldives': ['Malé','Maafushi'],
+  'Mali': ['Bamako','Timbuktu','Djenné'],
+  'Malta': ['Valletta','Mdina','Gozo'],
+  'Mauritania': ['Nouakchott'],
+  'Mauritius': ['Port Louis','Grand Baie','Flic en Flac'],
+  'Mexico': ['Mexico City','Cancún','Guadalajara','Oaxaca','Tulum','Playa del Carmen','San Miguel de Allende','Monterrey','Chichen Itza'],
+  'Moldova': ['Chișinău'],
+  'Monaco': ['Monaco'],
+  'Mongolia': ['Ulaanbaatar','Gobi Desert'],
+  'Montenegro': ['Podgorica','Kotor','Budva','Bar'],
+  'Morocco': ['Marrakech','Fes','Casablanca','Rabat','Chefchaouen','Essaouira','Sahara Desert'],
+  'Mozambique': ['Maputo','Beira','Pemba'],
+  'Myanmar': ['Yangon','Bagan','Mandalay','Inle Lake'],
+  'Namibia': ['Windhoek','Swakopmund','Etosha','Sossusvlei'],
+  'Nepal': ['Kathmandu','Pokhara','Everest Base Camp','Chitwan','Lumbini'],
+  'Netherlands': ['Amsterdam','Rotterdam','The Hague','Utrecht','Delft','Eindhoven'],
+  'New Zealand': ['Auckland','Queenstown','Wellington','Christchurch','Rotorua','Milford Sound'],
+  'Nicaragua': ['Managua','Granada','León'],
+  'Niger': ['Niamey','Agadez'],
+  'Nigeria': ['Lagos','Abuja','Kano','Ibadan'],
+  'North Korea': ['Pyongyang'],
+  'North Macedonia': ['Skopje','Ohrid'],
+  'Norway': ['Oslo','Bergen','Tromsø','Flåm','Ålesund','Stavanger'],
+  'Oman': ['Muscat','Nizwa','Salalah','Wahiba Sands'],
+  'Pakistan': ['Karachi','Lahore','Islamabad','Peshawar','Gilgit'],
+  'Palestine': ['Ramallah','Bethlehem','Jericho','Hebron'],
+  'Panama': ['Panama City','Bocas del Toro','Boquete'],
+  'Papua New Guinea': ['Port Moresby'],
+  'Paraguay': ['Asunción','Ciudad del Este'],
+  'Peru': ['Lima','Cusco','Machu Picchu','Arequipa','Puno','Iquitos'],
+  'Philippines': ['Manila','Cebu','Palawan','Boracay','Davao','Siargao'],
+  'Poland': ['Warsaw','Kraków','Gdańsk','Wrocław','Poznań','Zakopane'],
+  'Portugal': ['Lisbon','Porto','Algarve','Sintra','Madeira','Azores','Évora'],
+  'Puerto Rico': ['San Juan','Ponce','Rincon'],
+  'Qatar': ['Doha'],
+  'Romania': ['Bucharest','Transylvania','Cluj-Napoca','Sibiu','Brașov','Sinaia'],
+  'Russia': ['Moscow','St. Petersburg','Irkutsk','Vladivostok','Sochi','Kazan','Novosibirsk'],
+  'Rwanda': ['Kigali','Volcanoes National Park'],
+  'S. Sudan': ['Juba'],
+  'Saint Lucia': ['Castries','Soufrière'],
+  'Saudi Arabia': ['Riyadh','Jeddah','Mecca','Medina','AlUla','NEOM'],
+  'Senegal': ['Dakar','Saint-Louis','Ziguinchor'],
+  'Serbia': ['Belgrade','Novi Sad','Niš'],
+  'Seychelles': ['Victoria','La Digue','Praslin','Mahé'],
+  'Sierra Leone': ['Freetown'],
+  'Singapore': ['Singapore'],
+  'Slovakia': ['Bratislava','Košice','Banská Bystrica'],
+  'Slovenia': ['Ljubljana','Bled','Piran','Maribor'],
+  'Solomon Is.': ['Honiara'],
+  'Somalia': ['Mogadishu'],
+  'South Africa': ['Cape Town','Johannesburg','Durban','Stellenbosch','Kruger','Garden Route','Pretoria'],
+  'South Korea': ['Seoul','Busan','Jeju','Gyeongju','Incheon','Suwon'],
+  'Spain': ['Barcelona','Madrid','Seville','Granada','Valencia','Bilbao','Toledo','San Sebastián','Ibiza','Mallorca'],
+  'Sri Lanka': ['Colombo','Kandy','Galle','Ella','Sigiriya','Mirissa'],
+  'Sudan': ['Khartoum','Omdurman'],
+  'Suriname': ['Paramaribo'],
+  'Sweden': ['Stockholm','Gothenburg','Malmö','Uppsala','Kiruna'],
+  'Switzerland': ['Zurich','Geneva','Bern','Interlaken','Lucerne','Zermatt','Lugano','Grindelwald'],
+  'Syria': ['Damascus','Aleppo','Palmyra'],
+  'São Tomé and Príncipe': ['São Tomé'],
+  'Taiwan': ['Taipei','Kaohsiung','Tainan','Taichung'],
+  'Tajikistan': ['Dushanbe','Khujand'],
+  'Tanzania': ['Dar es Salaam','Zanzibar','Serengeti','Arusha','Kilimanjaro'],
+  'Thailand': ['Bangkok','Chiang Mai','Phuket','Koh Samui','Koh Phi Phi','Ayutthaya','Pai','Krabi'],
+  'Timor-Leste': ['Dili'],
+  'Togo': ['Lomé'],
+  'Trinidad and Tobago': ['Port of Spain'],
+  'Tunisia': ['Tunis','Carthage','Sousse','Hammamet','Djerba'],
+  'Turkey': ['Istanbul','Cappadocia','Antalya','Bodrum','Ankara','Ephesus','Pamukkale','Trabzon'],
+  'Turkmenistan': ['Ashgabat','Merv'],
+  'Uganda': ['Kampala','Bwindi','Jinja'],
+  'Ukraine': ['Kyiv','Lviv','Odessa','Kharkiv'],
+  'United Arab Emirates': ['Dubai','Abu Dhabi','Sharjah'],
+  'United Kingdom': ['London','Edinburgh','Manchester','Liverpool','Oxford','Cambridge','Bath','York','Brighton','Glasgow','Dublin'],
+  'United States of America': ['New York','Los Angeles','Chicago','Miami','San Francisco','Las Vegas','New Orleans','Seattle','Boston','Washington D.C.','Nashville','Denver','Honolulu','Anchorage','Portland'],
+  'Uruguay': ['Montevideo','Punta del Este','Colonia del Sacramento'],
+  'Uzbekistan': ['Tashkent','Samarkand','Bukhara','Khiva'],
+  'Venezuela': ['Caracas','Medellín','Canaima','Los Roques'],
+  'Vietnam': ['Hanoi','Ho Chi Minh City','Hoi An','Da Nang','Ha Long Bay','Hue','Sapa','Phu Quoc'],
+  'Yemen': ["Sana'a",'Aden'],
+  'Zambia': ['Lusaka','Livingstone','Victoria Falls'],
+  'Zimbabwe': ['Harare','Bulawayo','Victoria Falls'],
+};

src/lib/shared/types.js

@@ -0,0 +1,15 @@
+/**
+ * @typedef {{
+ *   id: string,
+ *   title: string,
+ *   date: string,
+ *   location: { country: string, cities: string[] },
+ *   photos: string[],
+ *   transport: 'flight' | 'train' | 'bus' | 'car' | 'ship' | 'walk',
+ *   tripType: 'solo' | 'friends' | 'family',
+ *   days: number,
+ *   memo: string
+ * }} JournalEntry
+ */
+
+export {};

src/lib/stores/entriesStore.svelte.js

@@ -1,10 +1,13 @@
 import { db } from '../firebase.js';
 import { collection, doc, onSnapshot, query, orderBy, addDoc, updateDoc, deleteDoc, serverTimestamp } from 'firebase/firestore';
+import { writable } from 'svelte/store';
 
 let entries = $state([]);
 let _uid = null;
 let _unsubscribe = null;
 
+export const journals = writable([]);
+
 export function getEntries() {
   return entries;
 }
@@ -17,12 +20,14 @@ export function initEntriesListener(uid) {
     orderBy('createdAt', 'desc')
   );
   _unsubscribe = onSnapshot(q, (snap) => {
-    entries = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
+    const data = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
+    entries = data;
+    journals.set(data);
   });
 }
 
 export async function addEntry(data) {
-  if (!_uid) return null;
+  if (!_uid) throw new Error('Not logged in');
   const ref = await addDoc(collection(db, 'users', _uid, 'entries'), {
     ...data,
     createdAt: serverTimestamp(),

src/lib/stores/journalStore.js

@@ -1,45 +1,2 @@
-import { writable } from 'svelte/store';
+export { journals } from './entriesStore.svelte.js';
-import { db } from '../firebase.js';
+export { addEntry as addJournal } from './entriesStore.svelte.js';
-import {
-  collection, onSnapshot, addDoc, updateDoc, deleteDoc, doc, serverTimestamp
-} from 'firebase/firestore';
-
-/**
- * @typedef {{
- *   id: string,
- *   title: string,
- *   date: string,
- *   location: { country: string, cities: string[] },
- *   photos: string[],
- *   transport: 'flight' | 'train' | 'bus' | 'car' | 'ship' | 'walk',
- *   tripType: 'solo' | 'friends' | 'family',
- *   days: number,
- *   memo: string
- * }} JournalEntry
- */
-
-export const journals = writable(/** @type {JournalEntry[]} */([]));
-export const journalsLoading = writable(true);
-
-const entriesRef = collection(db, 'entries');
-
-onSnapshot(entriesRef, (snap) => {
-  journals.set(snap.docs.map(d => ({ id: d.id, ...d.data() })));
-  journalsLoading.set(false);
-});
-
-/** @param {Omit<JournalEntry, 'id'>} entry */
-export async function addJournal(entry) {
-  await addDoc(entriesRef, { ...entry, createdAt: serverTimestamp() });
-}
-
-/** @param {string} id */
-export async function removeJournal(id) {
-  await deleteDoc(doc(db, 'entries', id));
-}
-
-/** @param {JournalEntry} updated */
-export async function updateJournal(updated) {
-  const { id, ...data } = updated;
-  await updateDoc(doc(db, 'entries', id), data);
-}

src/lib/timeline/detail/EditForm.svelte

@@ -1,15 +1,15 @@
 <script>
-  import { getEntries } from '../stores/entriesStore.svelte.js';
+  import { getEntries } from '../../stores/entriesStore.svelte.js';
-  import { addEntry, updateEntry } from '../stores/entriesStore.svelte.js';
+  import { addEntry, updateEntry } from '../../stores/entriesStore.svelte.js';
-  import { countryNames } from '../shared/countries.js';
+  import { countryNames } from '../../shared/countries.js';
-  import { getCitiesForCountry, ALL_CITIES } from '../shared/cities.js';
+  import { getCitiesForCountry, ALL_CITIES } from '../../shared/cities.js';
-  import SearchInput from '../shared/SearchInput.svelte';
+  import SearchInput from '../../shared/SearchInput.svelte';
   import PhotoEditor from './PhotoEditor.svelte';
 
   /**
    * entry = null  →  "new entry" mode
    * entry = {...} →  "edit" mode
-   * @type {{ entry?: import('../stores/journalStore.js').JournalEntry | null, initialCountry?: string, onBack: () => void }}
+   * @type {{ entry?: import('../shared/types.js').JournalEntry | null, initialCountry?: string, onBack: () => void }}
    */
   let { entry = null, initialCountry = '', onBack } = $props();
 

src/lib/timeline/detail/JournalDetail.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { removeEntry } from '../stores/entriesStore.svelte.js';
+  import { removeEntry } from '../../stores/entriesStore.svelte.js';
-  import { flagEmoji } from '../shared/countries.js';
+  import { flagEmoji } from '../../shared/countries.js';
   import DeleteConfirm from './DeleteConfirm.svelte';
 
-  /** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onBack: () => void, onEdit: () => void }} */
+  /** @type {{ entry: import('../shared/types.js').JournalEntry, onBack: () => void, onEdit: () => void }} */
   let { entry, onBack, onEdit } = $props();
 
   let showDeleteConfirm = $state(false);

src/lib/timeline/detail/JournalSummary.svelte

@@ -1,5 +1,5 @@
 <script>
-  /** @type {{ entries: import('../stores/journalStore.js').JournalEntry[] }} */
+  /** @type {{ entries: import('../shared/types.js').JournalEntry[] }} */
   let { entries } = $props();
 
   let stats = $derived.by(() => {

src/lib/timeline/detail/NewEntryForm.svelte

@@ -1,18 +1,26 @@
 <script>
-  import { getEntries } from '../stores/entriesStore.svelte.js';
+  import { journals, addJournal } from '../../stores/journalStore.js';
-  import { addEntry } from '../stores/entriesStore.svelte.js';
+  import { get } from 'svelte/store';
-  import { countryNames } from '../shared/countries.js';
+  import { flashCountry } from '../../layout/selection.svelte.js';
-  import { getCitiesForCountry, ALL_CITIES } from '../shared/cities.js';
+  import { countryNames } from '../../shared/countries.js';
-  import SearchInput from '../shared/SearchInput.svelte';
+  import { countryCities } from '../../shared/countryCities.js';
+  import SearchInput from '../../shared/SearchInput.svelte';
   import PhotoEditor from './PhotoEditor.svelte';
-  import airplaneImg from '../../assets/airplane.png';
+  import airplaneImg from '../../../assets/airplane.png';
-  import trainImg    from '../../assets/train.png';
+  import trainImg    from '../../../assets/train.png';
-  import busImg      from '../../assets/bus.png';
+  import busImg      from '../../../assets/bus.png';
-  import carImg      from '../../assets/car.png';
+  import carImg      from '../../../assets/car.png';
-  import shipImg     from '../../assets/ship.png';
+  import shipImg     from '../../../assets/ship.png';
-  import walkImg     from '../../assets/walk.png';
+  import walkImg     from '../../../assets/walk.png';
 
-  let { initialCountry = '', onBack } = $props();
+  let { initialCountry = '', onBack, onSaved = onBack } = $props();
+
+  // ── Journal store (reactive) ────────────────────────────────────────
+  let journalEntries = $state(get(journals));
+  $effect(() => {
+    const unsub = journals.subscribe(v => { journalEntries = v; });
+    return unsub;
+  });
 
   // ── Fields ─────────────────────────────────────────────────────────
   let cities    = $state([]);
@@ -54,11 +62,13 @@
   // ── Helpers ────────────────────────────────────────────────────────
   // Suggest cities — if a country is selected, show cities only from that country;
   // otherwise show all known cities.
-  let allEntries = $derived(getEntries());
   let cityOptions = $derived(
     country.trim()
-      ? [...new Set([...getCitiesForCountry(country), ...allEntries.filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities)])].sort()
+      ? [...new Set([
-      : [...new Set([...Object.values(ALL_CITIES).flat(), ...allEntries.flatMap(e => e.location.cities)])].sort()
+          ...(countryCities[country.trim()] ?? []),
+          ...journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []),
+        ])]
+      : []
   );
 
   function addCity(val) {
@@ -108,15 +118,17 @@
 
   // ── Save ───────────────────────────────────────────────────────────
   let saving = $state(false);
+  let saveError = $state('');
 
   async function save() {
     saving = true;
+    saveError = '';
     const memo = questions
       .map((q, i) => answers[i].trim() ? `Q: ${q.split('\n')[0]}\nA: ${answers[i].trim()}` : '')
       .filter(Boolean)
       .join('\n\n');
     try {
-      await addEntry({
+      await addJournal({
         title: `${cities.join(', ')}, ${country}`,
         date,
         days: Number(days),
@@ -126,11 +138,11 @@
         photos,
         location: { cities, country },
       });
-      onBack();
+      flashCountry(country);
+      onSaved();
     } catch (e) {
-      console.error('Save failed:', e);
       saving = false;
-      alert('Failed to save. Check console for details.');
+      saveError = e?.message ?? 'Failed to save. Please try again.';
     }
   }
 </script>
@@ -157,6 +169,7 @@
         <button class="save-btn" onclick={save} disabled={saving}>
           {saving ? 'Saving…' : 'Save trip'}
         </button>
+        {#if saveError}<span class="save-err">{saveError}</span>{/if}
       {/if}
     </div>
   </header>
@@ -165,27 +178,18 @@
     <div class="form">
 
       {#if step === 1}
-        <!-- headline -->
-        <h1 class="page-headline">
-          {#if country.trim()}
-            Journal your trip to <strong>{country}</strong>!
-          {:else}
-            Journal your trip!
-          {/if}
-        </h1>
-
         <!-- ── STEP 1: Details ── -->
         <h2 class="step-title">Trip details</h2>
 
         <div class="row">
           <div class="field">
-            <label class="label" for="nc-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
+            <label class="label" for="nc-country">Where did you go? <span class="req">*</span></label>
             <SearchInput id="nc-country" bind:value={country} options={countryNames} />
             {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
           </div>
           <div class="field">
-            <label class="label" for="nc-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
+            <label class="label" for="nc-city">Which cities did you visit? <span class="req">*</span></label>
-            <SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
+            <SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} onblurcommit={addCity} />
             {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
             {#if cities.length > 0}
               <div class="tags">
@@ -199,24 +203,24 @@
 
         <div class="row">
           <div class="field">
-            <label class="label" for="nc-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
+            <label class="label" for="nc-date">When did you travel? <span class="req">*</span></label>
             <input id="nc-date" class="input" type="date" bind:value={date} />
             {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
           </div>
           <div class="field">
-            <label class="label" for="nc-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
+            <label class="label" for="nc-days">How long was the trip? <span class="req">*</span></label>
             <input id="nc-days" class="input" type="number" min="1" bind:value={days} />
             {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
           </div>
         </div>
 
         <div class="field">
-          <label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
+          <label class="label">Who did you travel with? <span class="req">*</span></label>
           <div class="toggle-row">
             {#each ['solo','friends','family'] as t}
               <label class="toggle-opt" class:active={tripType === t}>
                 <input type="radio" name="nc-tripType" value={t} bind:group={tripType} />
-                {t === 'solo' ? '🧑 Solo' : t === 'friends' ? '👥 With friends' : '👨‍👩‍👧‍👦 With family'}
+                {t === 'solo' ? 'Solo' : t === 'friends' ? 'With friends' : 'With family'}
               </label>
             {/each}
           </div>
@@ -224,13 +228,13 @@
         </div>
 
         <div class="field">
-          <label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
+          <label class="label">How did you get there? <span class="req">*</span></label>
           <div class="transport-grid">
             {#each transportOptions as opt}
-              <label class="toggle-opt" class:active={transport === opt.value}>
+              <label class="transport-opt" class:active={transport === opt.value}>
                 <input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
                 <img src={opt.img} alt={opt.label} class="transport-img" />
-                {opt.label}
+                <span class="transport-label">{opt.label}</span>
               </label>
             {/each}
           </div>
@@ -245,16 +249,11 @@
 
       {:else}
         <!-- ── STEP 3: Questions ── -->
-        <h2 class="step-title">
+        <h2 class="step-title">Your memories</h2>
-          Your memories{cities.length > 0 ? ` of ${cities.join(', ')}` : country.trim() ? ` of ${country}` : ''}
-        </h2>
-        {#if cities.length > 0 || country.trim()}
-          <p class="step-sub">{cities.join(', ')}{cities.length > 0 && country.trim() ? `, ${country}` : country.trim()}</p>
-        {/if}
 
         {#each questions as q, i}
           <div class="q-card">
-            <p class="q-text">{q}{country.trim() ? ` in ${country}` : ''}</p>
+            <p class="q-text">{q}</p>
             <textarea class="q-input" rows="3" placeholder="Your answer…" bind:value={answers[i]}></textarea>
           </div>
         {/each}
@@ -317,13 +316,13 @@
     align-items: center;
     gap: 6px;
     font-family: var(--sans);
-    font-size: 15px;
+    font-size: 13px;
-    font-weight: 400;
+    font-weight: 300;
     color: var(--text);
     background: none;
     border: 1px solid transparent;
-    border-radius: 10px;
+    border-radius: 8px;
-    padding: 8px 14px;
+    padding: 6px 10px;
     cursor: pointer;
     transition: background 0.15s, color 0.15s, border-color 0.15s;
   }
@@ -331,19 +330,20 @@
 
   .save-btn {
     font-family: var(--sans);
-    font-size: 15px;
+    font-size: 13px;
-    font-weight: 400;
+    font-weight: 300;
     color: #fff;
     background: var(--accent);
     border: 1px solid var(--accent);
-    border-radius: 10px;
+    border-radius: 8px;
-    padding: 8px 18px;
+    padding: 7px 14px;
     cursor: pointer;
     transition: background 0.15s;
     white-space: nowrap;
   }
   .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
   .save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+  .save-err { font-size: 12px; color: #ef4444; margin-top: 4px; display: block; text-align: right; }
 
   /* scroll + form */
   .scroll { flex: 1; overflow-y: auto; }
@@ -364,14 +364,6 @@
     letter-spacing: -0.3px;
     margin: 0 0 2px;
   }
-  .page-headline {
-    font-size: 28px;
-    font-weight: 500;
-    color: var(--text-h);
-    letter-spacing: -0.5px;
-    margin: 0 0 4px;
-  }
-  .page-headline strong { font-weight: 600; }
   .step-sub {
     font-size: 13px;
     font-weight: 300;
@@ -392,9 +384,27 @@
     color: var(--text-sub);
   }
   .req { color: var(--accent); font-size: 11px; }
-  .kw { color: var(--accent); }
 
-  .ferr { font-size: 13px; font-weight: 500; color: #dc2626; }
+  .ferr { font-size: 11px; color: #dc2626; }
+
+  .combo-select, .city-text {
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 300;
+    color: var(--text-h);
+    background: var(--bg-subtle);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 8px 12px;
+    outline: none;
+    transition: border-color 0.15s;
+    width: 100%;
+    box-sizing: border-box;
+    display: block;
+  }
+  .combo-select:focus, .city-text:focus { border-color: var(--accent-border); }
+  .combo-select { margin-bottom: 6px; cursor: pointer; }
+  .city-text { margin-top: 0; }
 
   .input {
     font-family: var(--sans);
@@ -412,22 +422,33 @@
   }
   .input:focus { border-color: var(--accent-border); }
 
-  .toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
+  .toggle-row { display: flex; gap: 8px; }
   .toggle-opt {
-    display: flex; align-items: center; justify-content: center; gap: 8px;
+    display: flex; align-items: center; gap: 6px;
-    font-size: 16px; font-weight: 400; color: var(--text);
+    font-size: 13px; font-weight: 300; color: var(--text);
-    padding: 12px 14px; border-radius: 10px;
+    padding: 7px 14px; border-radius: 8px;
     border: 1px solid var(--border);
-    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
+    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
     background: var(--bg-subtle);
-    white-space: nowrap;
   }
   .toggle-opt input { display: none; }
-  .toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+  .toggle-opt.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }
-  .toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); }
 
-  .transport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+  .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
-  .transport-img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
+  .transport-opt {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 8px; aspect-ratio: 1;
+    border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle);
+    cursor: pointer; transition: border-color 0.15s, background 0.15s;
+  }
+  .transport-opt input { display: none; }
+  .transport-opt.active { border-color: var(--accent-border); background: var(--accent-bg); }
+  .transport-img { width: 60px; height: 60px; object-fit: contain; }
+  .transport-label {
+    font-size: 12px; font-weight: 300; color: var(--text-sub);
+    letter-spacing: 0.02em;
+  }
+  .transport-opt.active .transport-label { color: var(--accent); }
 
   .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
   .tag {
@@ -446,16 +467,15 @@
   .q-card {
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 10px;
-    background: var(--bg);
+    background: var(--bg-subtle);
-    border: 1.5px solid var(--accent-border);
+    border: 1px solid var(--border);
-    border-radius: 16px;
+    border-radius: 12px;
-    padding: 28px;
+    padding: 20px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
   }
   .q-text {
-    font-size: 20px;
+    font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
     color: var(--text-h);
     line-height: 1.5;
     margin: 0;
@@ -463,10 +483,10 @@
   }
   .q-input {
     font-family: var(--sans);
-    font-size: 16px;
+    font-size: 13px;
-    font-weight: 400;
+    font-weight: 300;
     color: var(--text-h);
-    background: var(--bg-subtle);
+    background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 10px 12px;

src/lib/timeline/detail/PhotoEditor.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { storage } from '../firebase.js';
+  import { storage } from '../../firebase.js';
   import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
 
   /** @type {{ photos: string[], onchange: (photos: string[]) => void }} */

src/lib/timeline/view/ShareCard.svelte

@@ -1,7 +1,7 @@
 <script>
   import { toPng } from 'html-to-image';
 
-  /** @type {{ entries: import('../stores/journalStore.js').JournalEntry[], onClose: () => void }} */
+  /** @type {{ entries: import('../shared/types.js').JournalEntry[], onClose: () => void }} */
   let { entries, onClose } = $props();
 
   let cardEl = $state(null);

src/lib/timeline/view/SharePreview.svelte

@@ -1,5 +1,5 @@
 <script>
-  /** @type {{ entries: import('../stores/journalStore.js').JournalEntry[], onClick: () => void }} */
+  /** @type {{ entries: import('../shared/types.js').JournalEntry[], onClick: () => void }} */
   let { entries, onClick } = $props();
 
   const continentMap = {

src/lib/timeline/view/TimelineCard.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { flagEmoji } from '../shared/countries.js';
+  import { flagEmoji } from '../../shared/countries.js';
 
-  /** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onClick: () => void }} */
+  /** @type {{ entry: import('../shared/types.js').JournalEntry, onClick: () => void }} */
   let { entry, onClick } = $props();
 
   function formatDate(/** @type {string} */ iso) {

src/lib/timeline/view/TimelineView.svelte

@@ -1,14 +1,14 @@
 <script>
-  import { getEntries } from '../stores/entriesStore.svelte.js';
+  import { getEntries } from '../../stores/entriesStore.svelte.js';
   import TimelineToolbar from './TimelineToolbar.svelte';
   import TimelineCard from './TimelineCard.svelte';
-  import JournalDetail from './JournalDetail.svelte';
+  import JournalDetail from '../detail/JournalDetail.svelte';
-  import EditForm from './EditForm.svelte';
+  import EditForm from '../detail/EditForm.svelte';
-  import NewEntryForm from './NewEntryForm.svelte';
+  import NewEntryForm from '../detail/NewEntryForm.svelte';
   import ShareCard from './ShareCard.svelte';
   import SharePreview from './SharePreview.svelte';
 
-  let { onDetailChange = () => {}, pendingCountry = '', onNewEntryClear = () => {} } = $props();
+  let { onDetailChange = () => {}, pendingCountry = '', onNewEntryClear = () => {}, onGoToMap = () => {} } = $props();
   let selectedId = $state(/** @type {string|null} */(null));
   let view = $state(/** @type {'list'|'detail'|'edit'|'new'} */('list'));
   let showShare = $state(false);
@@ -50,7 +50,7 @@
 
   {#if view === 'new'}
     <div class="detail-scroll">
-      <NewEntryForm initialCountry={newEntryCountry} onBack={() => { view = 'list'; newEntryCountry = ''; onDetailChange(false); }} />
+      <NewEntryForm initialCountry={newEntryCountry} onBack={() => { view = 'list'; newEntryCountry = ''; onDetailChange(false); }} onSaved={() => { onGoToMap(); }} />
     </div>
   {:else if view === 'edit' && selected}
     <div class="detail-scroll">
@@ -65,8 +65,7 @@
       />
     </div>
   {:else}
-    <div class="right-panel">
+    <div class="list-view">
-      <div class="center-col">
       <div class="page-header">
         <h1 class="page-title">My Journey</h1>
         <button class="new-btn" onclick={() => { view = 'new'; }}>
@@ -77,12 +76,8 @@
         </button>
       </div>
 
-        {#if sortedEntries.length > 0}
+      <div class="two-col">
-          <div class="share-row">
+        <div class="left-col">
-            <SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
-          </div>
-        {/if}
-
           <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
 
           {#if sortedEntries.length === 0}
@@ -113,6 +108,13 @@
             {sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
           </footer>
         </div>
+
+        {#if sortedEntries.length > 0}
+          <div class="right-col">
+            <SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
+          </div>
+        {/if}
+      </div>
     </div>
   {/if}
 
@@ -132,31 +134,51 @@
     overflow: hidden;
   }
 
-  /* ── Right panel ── */
+  /* ── List view wrapper (scrollable) ── */
-  .right-panel {
+  .list-view {
+    flex: 1;
+    overflow-y: auto;
+    padding: 48px 0 80px;
+    box-sizing: border-box;
+    min-width: 0;
+  }
+
+  .page-header,
+  .two-col {
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+
+  /* ── Two-column below header ── */
+  .two-col {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+    align-items: flex-start;
+    margin-top: 24px;
+  }
+
+  .left-col {
     flex: 1;
     min-width: 0;
-    overflow-y: auto;
-    background: var(--bg);
   }
 
-  /* ── Centered single column ── */
+  .right-col {
-  .center-col {
+    width: 260px;
-    max-width: 680px;
+    flex-shrink: 0;
-    width: 100%;
+    position: sticky;
-    margin: 0 auto;
+    top: 0;
-    padding: 48px 48px 80px;
-    box-sizing: border-box;
   }
 
-  .share-row {
+  @media (max-width: 900px) {
-    margin-bottom: 24px;
+    .right-col { display: none; }
   }
 
   @media (max-width: 760px) {
-    .center-col {
+    .list-view { padding: 32px 24px 60px; }
-      padding: 32px 24px 60px;
-    }
   }
 
   /* ── Detail view ── */
@@ -270,38 +292,4 @@
   }
   .new-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
 
-  .share-nudge {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 10px 14px;
-    margin-bottom: 12px;
-    border-radius: 10px;
-    border: 1px dashed var(--border-bright);
-    background: var(--bg-subtle);
-    cursor: pointer;
-    transition: border-color 0.15s, background 0.15s;
-    font-family: var(--sans);
-    text-align: left;
-  }
-  .share-nudge:hover {
-    border-color: var(--accent-light);
-    background: var(--accent-bg);
-  }
-  .nudge-left {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    font-size: 13px;
-    font-weight: 400;
-    color: var(--text-h);
-  }
-  .nudge-right {
-    font-size: 11px;
-    font-weight: 300;
-    color: var(--text-sub);
-    letter-spacing: 0.02em;
-  }
-  .share-nudge:hover .nudge-right { color: var(--accent); }
 </style>

src/lib/world-map/JourneyView.svelte

@@ -3,28 +3,32 @@
   import * as d3 from 'd3';
   import { feature } from 'topojson-client';
   import worldData from 'world-atlas/countries-50m.json';
+  import { get } from 'svelte/store';
+  import { journals } from '../stores/journalStore.js';
+  import airplaneImg from '../../assets/airplane.png';
+  import trainImg    from '../../assets/train.png';
+  import busImg      from '../../assets/bus.png';
+  import carImg      from '../../assets/car.png';
+  import shipImg     from '../../assets/ship.png';
+  import walkImg     from '../../assets/walk.png';
 
   let { onclose, onprogress, mode = 'map', onmodechange } = $props();
 
   const HOME_CODE = '203';
 
-  const MOCK_TRIPS = [
+  const TRANSPORT_IMG = {
-    { countryName: 'Japan', countryCode: '392', date: '2024-03-15', city: 'Tokyo' },
+    flight: airplaneImg,
-    { countryName: 'France', countryCode: '191', date: '2024-06-20', city: 'Paris' },
+    train:  trainImg,
-    { countryName: 'Spain', countryCode: '724', date: '2024-09-10', city: 'Barcelona' },
+    bus:    busImg,
-    { countryName: 'United States', countryCode: '840', date: '2025-01-05', city: 'New York' },
+    car:    carImg,
-    { countryName: 'Thailand', countryCode: '764', date: '2025-04-18', city: 'Bangkok' },
+    ship:   shipImg,
-    { countryName: 'Australia', countryCode: '036', date: '2025-08-22', city: 'Sydney' },
+    walk:   walkImg,
-    { countryName: 'Kenya', countryCode: '404', date: '2021-11-10', city: 'Nairobi' },
+  };
-    { countryName: 'South Africa', countryCode: '710', date: '2026-02-05', city: 'Cape Town' },
+  const PLANE_SIZE = 28;
-  ];
 
   const HOME_COLOR = '#8b5cf6';
   const VISITED_COLOR = '#22c55e';
   const ARC_COLOR = '#666666';
-  const PLANE_COLOR = '#7c3aed';
-  const PLANE_IMG = '/airplane.png';
-  const PLANE_SIZE = 28;
   const UNVISITED = '#ffffff';
 
   const TERRITORY_PARENT = {
@@ -38,9 +42,7 @@
     '850': '840', '876': '250',
   };
 
-  function effId(d) {
+  function effId(d) { return TERRITORY_PARENT[d.id] || d.id; }
-    return TERRITORY_PARENT[d.id] || d.id;
-  }
 
   let frameEl;
   let svg, gBase, gCountries, gAnim, pathFn, projection;
@@ -57,86 +59,32 @@
 
   function formatDateLabel(dateStr) {
     const d = new Date(dateStr);
-    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
     return `${months[d.getMonth()]} ${d.getFullYear()}`;
   }
 
   function computeArc(p1, p2) {
     const interp = d3.geoInterpolate(p1, p2);
-    const steps = 80;
     const raw = [];
-
+    for (let i = 0; i <= 80; i++) {
-    for (let i = 0; i <= steps; i++) {
+      const t = i / 80;
-      const t = i / steps;
+      const pt = projection(interp(t));
-      const geo = interp(t);
-      const pt = projection(geo);
       if (!pt) continue;
       raw.push({ t, x: pt[0], y: pt[1] });
     }
-
     if (raw.length < 2) return [];
-
+    const first = raw[0], last = raw[raw.length - 1];
-    const first = raw[0];
+    const dist = Math.sqrt((last.x-first.x)**2 + (last.y-first.y)**2);
-    const last = raw[raw.length - 1];
-    const dx = last.x - first.x;
-    const dy = last.y - first.y;
-    const dist = Math.sqrt(dx * dx + dy * dy);
     const arcH = Math.max(40, Math.min(200, dist * 0.22));
-
     return raw.map(p => [p.x, p.y - arcH * Math.sin(Math.PI * p.t)]);
   }
 
-  function getAngleAtLength(node, len) {
-    const d = 0.5;
-    const total = node.getTotalLength();
-    const p1 = node.getPointAtLength(Math.max(0, len - d));
-    const p2 = node.getPointAtLength(Math.min(total, len + d));
-    return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
-  }
-
   function planeTransform(x, y, angle, flip) {
     return `translate(${x},${y}) rotate(${angle})${flip ? ' scale(1,-1)' : ''}`;
   }
 
-  function animateStroke(pathEl, tipEl, startOffset, endOffset, duration, flip = false, maskEl = null) {
-    return new Promise((resolve) => {
-      const node = pathEl.node();
-      if (!node) { resolve(); return; }
-      const totalLength = node.getTotalLength();
-
-      if (totalLength === 0) { resolve(); return; }
-
-      d3.timer(elapsed => {
-        if (isCancelled) { resolve(); return true; }
-
-        const t = Math.min(elapsed / duration, 1);
-        const offset = startOffset + (endOffset - startOffset) * t;
-
-        pathEl.attr('stroke-dashoffset', offset);
-        if (maskEl) maskEl.attr('stroke-dashoffset', offset);
-
-        const drawn = totalLength - offset;
-        const clamped = Math.max(0, Math.min(drawn, totalLength));
-        try {
-          const pt = node.getPointAtLength(clamped);
-          const angle = getAngleAtLength(node, clamped);
-          tipEl.attr('transform', planeTransform(pt.x, pt.y, angle, flip)).attr('opacity', 1);
-        } catch (e) {
-        }
-
-        if (t >= 1) {
-          resolve();
-          return true;
-        }
-      });
-    });
-  }
-
   function delay(ms) {
-    return new Promise(resolve => {
+    return new Promise(resolve => { if (isCancelled) { resolve(); return; } setTimeout(resolve, ms); });
-      if (isCancelled) { resolve(); return; }
-      const id = setTimeout(resolve, ms);
-    });
   }
 
   function setupProjection(width, height) {
@@ -168,106 +116,81 @@
     };
 
     if (mode === 'globe') {
-      gBase.append('path')
+      gBase.append('path').attr('class', 'sphere').datum({ type: 'Sphere' })
-        .attr('class', 'sphere')
+        .attr('d', pathFn).attr('fill', '#a4c8e0').attr('stroke', '#8b9bb0').attr('stroke-width', 1.5);
-        .datum({ type: 'Sphere' })
-        .attr('d', pathFn)
-        .attr('fill', '#a4c8e0')
-        .attr('stroke', '#8b9bb0')
-        .attr('stroke-width', 1.5);
-
     }
 
     countryPaths = gCountries.selectAll('path')
-      .data(countriesData, d => effId(d))
+      .data(countriesData, d => effId(d)).join('path')
-      .join('path')
+      .attr('d', pathFn).attr('fill', fillFn)
-      .attr('d', pathFn)
-      .attr('fill', fillFn)
       .attr('stroke', mode === 'globe' ? '#4a6a8c' : '#d4d4d4')
       .attr('stroke-width', mode === 'globe' ? 0.3 : 0.5);
 
-    if (mode === 'map') {
+    if (mode === 'map') renderMicrostates();
-      renderMicrostates();
-    }
   }
 
   function renderMicrostates() {
     gBase.selectAll('.micro-state-j').remove();
-    const threshold = 4;
     const fillFn = d => {
       const id = effId(d);
       if (id === HOME_CODE) return visitedCodes.has(id) ? VISITED_COLOR : HOME_COLOR;
       if (visitedCodes.has(id)) return VISITED_COLOR;
       return UNVISITED;
     };
-    countryPaths.each(function (d) {
+    countryPaths.each(function(d) {
       if (effId(d) !== d.id) return;
       const { width, height } = this.getBBox();
-      if (width < threshold && height < threshold) {
+      if (width < 4 && height < 4) {
         const [cx, cy] = pathFn.centroid(d);
-        gBase.append('circle')
+        gBase.append('circle').attr('class', 'micro-state-j').datum(d)
-          .attr('class', 'micro-state-j')
+          .attr('cx', cx).attr('cy', cy).attr('r', 2).attr('fill', fillFn(d))
-          .datum(d)
+          .attr('stroke', '#94a3b8').attr('stroke-width', 0.5);
-          .attr('cx', cx)
-          .attr('cy', cy)
-          .attr('r', 2)
-          .attr('fill', fillFn(d))
-          .attr('stroke', '#94a3b8')
-          .attr('stroke-width', 0.5);
       }
     });
   }
 
   function redrawBase() {
     countryPaths.attr('d', pathFn);
-    if (mode === 'globe') {
+    if (mode === 'globe') gBase.select('.sphere').attr('d', pathFn);
-      gBase.select('.sphere').attr('d', pathFn);
-    }
   }
 
   function rotateGlobeTo(lon, lat, duration = 1500) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
       if (isCancelled) { resolve(); return; }
-
       const current = projection.rotate();
-      const from = [-current[0], -current[1]];
+      const interp = d3.geoInterpolate([-current[0], -current[1]], [lon, lat]);
-      const to = [lon, lat];
-
-      const interpolate = d3.geoInterpolate(from, to);
-
       const timer = d3.timer(elapsed => {
         if (isCancelled) { timer.stop(); resolve(); return true; }
-
         const t = Math.min(elapsed / duration, 1);
-        const point = interpolate(t);
+        const point = interp(t);
         projection.rotate([-point[0], -point[1]]);
         redrawBase();
-
+        if (t >= 1) { timer.stop(); resolve(); return true; }
-        if (t >= 1) {
+      });
-          timer.stop();
+    });
-          resolve();
-          return true;
   }
-      });
+
-    });
+  function createArcEl(iconSrc) {
+    const el = gAnim.append('path')
+      .attr('fill', 'none').attr('stroke', ARC_COLOR)
+      .attr('stroke-width', 2.5).attr('stroke-opacity', 0.8)
+      .attr('stroke-linecap', 'round').attr('stroke-dasharray', '10, 6');
+    const tip = gAnim.append('image')
+      .attr('href', iconSrc).attr('width', PLANE_SIZE).attr('height', PLANE_SIZE)
+      .attr('x', -PLANE_SIZE / 2).attr('y', -PLANE_SIZE / 2)
+      .attr('preserveAspectRatio', 'xMidYMid meet').attr('opacity', 0);
+    return { el, tip };
   }
 
   function animateIncrementalPath(el, tip, pts, duration, flip = false) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
-      const steps = pts.length - 1;
       const lineGen = d3.line().curve(d3.curveBasis);
-
       d3.timer(elapsed => {
         if (isCancelled) { resolve(); return true; }
-
         const t = Math.min(elapsed / duration, 1);
-        const count = Math.max(2, Math.floor(t * steps) + 1);
+        const count = Math.max(2, Math.floor(t * (pts.length - 1)) + 1);
         const visible = pts.slice(0, count);
-
+        if (visible.length >= 2) el.attr('d', lineGen(visible));
-        if (visible.length >= 2) {
-          el.attr('d', lineGen(visible));
-        }
-
         if (visible.length > 0) {
           const last = visible[visible.length - 1];
           let angle = 0;
@@ -277,35 +200,19 @@
           }
           tip.attr('transform', planeTransform(last[0], last[1], angle, flip)).attr('opacity', 1);
         }
-
+        if (t >= 1) { resolve(); return true; }
-        if (t >= 1) {
-          resolve();
-          return true;
-        }
       });
     });
   }
 
   function animateReprojectingArc(el, tip, geoPts, lineGen, duration, flip = false) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
-      const steps = geoPts.length - 1;
-
       const timer = d3.timer(elapsed => {
         if (isCancelled) { timer.stop(); resolve(); return true; }
-
         const t = Math.min(elapsed / duration, 1);
-        const count = Math.max(2, Math.floor(t * steps) + 1);
+        const count = Math.max(2, Math.floor(t * (geoPts.length - 1)) + 1);
-        const visible = geoPts.slice(0, count);
+        const screenPts = geoPts.slice(0, count).map(p => projection(p)).filter(Boolean);
-        const screenPts = [];
+        if (screenPts.length >= 2) el.attr('d', lineGen(screenPts));
-        for (const p of visible) {
-          const pt = projection(p);
-          if (pt) screenPts.push(pt);
-        }
-
-        if (screenPts.length >= 2) {
-          el.attr('d', lineGen(screenPts));
-        }
-
         if (screenPts.length > 0) {
           const last = screenPts[screenPts.length - 1];
           let angle = 0;
@@ -315,399 +222,206 @@
           }
           tip.attr('transform', planeTransform(last[0], last[1], angle, flip)).attr('opacity', 1);
         }
-
+        if (t >= 1) { timer.stop(); resolve(); return true; }
-        if (t >= 1) {
-          timer.stop();
-          resolve();
-          return true;
-        }
       });
     });
   }
 
-  async function animateTrip(destCode, destFeature) {
+  async function animateTrip(destCode, destFeature, transport = 'flight') {
     if (!homeFeature || !destFeature) return;
-
+    const iconSrc = TRANSPORT_IMG[transport] ?? airplaneImg;
     const homeCentroid = d3.geoCentroid(homeFeature);
     const destCentroid = d3.geoCentroid(destFeature);
-
     if (mode === 'map') {
-      await animateMapTrip(homeCentroid, destCentroid, destCode);
+      await animateMapTrip(homeCentroid, destCentroid, destCode, iconSrc);
     } else {
-      await animateGlobeTrip(homeCentroid, destCentroid, destCode);
+      await animateGlobeTrip(homeCentroid, destCentroid, destCode, iconSrc);
     }
   }
 
-  async function animateMapTrip(homeCentroid, destCentroid, destCode) {
+  async function animateMapTrip(homeCentroid, destCentroid, destCode, iconSrc) {
     const pts = computeArc(homeCentroid, destCentroid);
     if (pts.length < 2) return;
-
+    const { el: outEl, tip: outTip } = createArcEl(iconSrc);
-    const outFlip = pts[pts.length - 1][0] < pts[0][0];
+    await animateIncrementalPath(outEl, outTip, pts, 2500, pts[pts.length-1][0] < pts[0][0]);
-
-    const outEl = gAnim.append('path')
-      .attr('fill', 'none')
-      .attr('stroke', ARC_COLOR)
-      .attr('stroke-width', 2.5)
-      .attr('stroke-opacity', 0.8)
-      .attr('stroke-linecap', 'round')
-      .attr('stroke-dasharray', '10, 6');
-    const outTip = gAnim.append('image')
-      .attr('href', PLANE_IMG)
-      .attr('width', PLANE_SIZE)
-      .attr('height', PLANE_SIZE)
-      .attr('x', -PLANE_SIZE / 2)
-      .attr('y', -PLANE_SIZE / 2)
-      .attr('preserveAspectRatio', 'xMidYMid meet')
-      .attr('opacity', 0);
-
-    await animateIncrementalPath(outEl, outTip, pts, 2500, outFlip);
     if (isCancelled) return;
-
+    outEl.remove(); outTip.remove();
-    outEl.remove();
+    countryPaths.filter(d => effId(d) === destCode).transition().duration(500).attr('fill', VISITED_COLOR);
-    outTip.remove();
-
-    const targetPath = countryPaths.filter(d => effId(d) === destCode);
-    targetPath.transition().duration(500).attr('fill', VISITED_COLOR);
     visitedCodes.add(destCode);
-    gBase.selectAll('.micro-state-j')
+    gBase.selectAll('.micro-state-j').filter(d => effId(d) === destCode).transition().duration(500).attr('fill', VISITED_COLOR);
-      .filter(d => effId(d) === destCode)
-      .transition().duration(500)
-      .attr('fill', VISITED_COLOR);
-
     await delay(800);
     if (isCancelled) return;
-
     const revPts = [...pts].reverse();
-    const retFlip = revPts[revPts.length - 1][0] < revPts[0][0];
+    const { el: retEl, tip: retTip } = createArcEl(iconSrc);
-
+    await animateIncrementalPath(retEl, retTip, revPts, 2200, revPts[revPts.length-1][0] < revPts[0][0]);
-    const retEl = gAnim.append('path')
-      .attr('fill', 'none')
-      .attr('stroke', ARC_COLOR)
-      .attr('stroke-width', 2.5)
-      .attr('stroke-opacity', 0.8)
-      .attr('stroke-linecap', 'round')
-      .attr('stroke-dasharray', '10, 6');
-    const retTip = gAnim.append('image')
-      .attr('href', PLANE_IMG)
-      .attr('width', PLANE_SIZE)
-      .attr('height', PLANE_SIZE)
-      .attr('x', -PLANE_SIZE / 2)
-      .attr('y', -PLANE_SIZE / 2)
-      .attr('preserveAspectRatio', 'xMidYMid meet')
-      .attr('opacity', 0);
-
-    await animateIncrementalPath(retEl, retTip, revPts, 2200, retFlip);
     if (isCancelled) return;
-
+    retEl.remove(); retTip.remove();
-    retEl.remove();
-    retTip.remove();
-
     await delay(300);
   }
 
-  async function animateGlobeTrip(homeCentroid, destCentroid, destCode) {
+  async function animateGlobeTrip(homeCentroid, destCentroid, destCode, iconSrc) {
     const interp = d3.geoInterpolate(homeCentroid, destCentroid);
-    const steps = 80;
+    const geoPts = Array.from({ length: 81 }, (_, i) => interp(i / 80));
-    const geoPts = [];
+    const dur = Math.round(1500 + d3.geoDistance(homeCentroid, destCentroid) * 2500);
-    for (let i = 0; i <= steps; i++) {
-      geoPts.push(interp(i / steps));
-    }
-
-    const dist = d3.geoDistance(homeCentroid, destCentroid);
-    const dur = Math.round(1500 + dist * 2500);
-
     const lineGen = d3.line().curve(d3.curveBasis);
-
+    const { el: outEl, tip: outTip } = createArcEl(iconSrc);
-    const outEl = gAnim.append('path')
-      .attr('fill', 'none')
-      .attr('stroke', ARC_COLOR)
-      .attr('stroke-width', 2.5)
-      .attr('stroke-opacity', 0.8)
-      .attr('stroke-linecap', 'round')
-      .attr('stroke-dasharray', '10, 6');
-    const outTip = gAnim.append('image')
-      .attr('href', PLANE_IMG)
-      .attr('width', PLANE_SIZE)
-      .attr('height', PLANE_SIZE)
-      .attr('x', -PLANE_SIZE / 2)
-      .attr('y', -PLANE_SIZE / 2)
-      .attr('preserveAspectRatio', 'xMidYMid meet')
-      .attr('opacity', 0);
-
     const outGcs = geoPts.map(p => projection(p)).filter(Boolean);
-    const outFlipGlobe = outGcs.length >= 2 && outGcs[outGcs.length - 1][0] < outGcs[0][0];
-
     await Promise.all([
       rotateGlobeTo(destCentroid[0], destCentroid[1], dur),
-      animateReprojectingArc(outEl, outTip, geoPts, lineGen, dur, outFlipGlobe)
+      animateReprojectingArc(outEl, outTip, geoPts, lineGen, dur, outGcs.length >= 2 && outGcs[outGcs.length-1][0] < outGcs[0][0]),
     ]);
     if (isCancelled) return;
-
+    outEl.remove(); outTip.remove();
-    outEl.remove();
+    countryPaths.filter(d => effId(d) === destCode).transition().duration(500).attr('fill', VISITED_COLOR);
-    outTip.remove();
-
-    const targetPath = countryPaths.filter(d => effId(d) === destCode);
-    targetPath.transition().duration(500).attr('fill', VISITED_COLOR);
     visitedCodes.add(destCode);
-
     await delay(600);
     if (isCancelled) return;
-
     const revGeoPts = [...geoPts].reverse();
-
+    const { el: retEl, tip: retTip } = createArcEl(iconSrc);
-    const retEl = gAnim.append('path')
-      .attr('fill', 'none')
-      .attr('stroke', ARC_COLOR)
-      .attr('stroke-width', 2.5)
-      .attr('stroke-opacity', 0.8)
-      .attr('stroke-linecap', 'round')
-      .attr('stroke-dasharray', '10, 6');
-    const retTip = gAnim.append('image')
-      .attr('href', PLANE_IMG)
-      .attr('width', PLANE_SIZE)
-      .attr('height', PLANE_SIZE)
-      .attr('x', -PLANE_SIZE / 2)
-      .attr('y', -PLANE_SIZE / 2)
-      .attr('preserveAspectRatio', 'xMidYMid meet')
-      .attr('opacity', 0);
-
     const retGcs = revGeoPts.map(p => projection(p)).filter(Boolean);
-    const retFlipGlobe = retGcs.length >= 2 && retGcs[retGcs.length - 1][0] < retGcs[0][0];
-
     await Promise.all([
       rotateGlobeTo(homeCentroid[0], homeCentroid[1], dur),
-      animateReprojectingArc(retEl, retTip, revGeoPts, lineGen, dur, retFlipGlobe)
+      animateReprojectingArc(retEl, retTip, revGeoPts, lineGen, dur, retGcs.length >= 2 && retGcs[retGcs.length-1][0] < retGcs[0][0]),
     ]);
     if (isCancelled) return;
-
+    retEl.remove(); retTip.remove();
-    retEl.remove();
-    retTip.remove();
-
     await delay(300);
   }
 
   async function startJourney() {
     const myId = ++animId;
-    isPlaying = true;
+    isPlaying = true; isFinished = false; isCancelled = false; visitedCodes = new Set();
-    isFinished = false;
-    isCancelled = false;
-    visitedCodes = new Set();
-
-    const width = frameEl.clientWidth;
-    const height = frameEl.clientHeight;
 
+    const width = frameEl.clientWidth, height = frameEl.clientHeight;
     svg.selectAll('*').remove();
-    gBase = svg.append('g');
+    gBase = svg.append('g'); gCountries = svg.append('g'); gAnim = svg.append('g');
-    gCountries = svg.append('g');
-    gAnim = svg.append('g');
-
     setupProjection(width, height);
-
     if (mode === 'globe' && homeFeature) {
       const c = d3.geoCentroid(homeFeature);
       projection.rotate([-c[0], -c[1]]);
       pathFn = d3.geoPath().projection(projection);
     }
-
     renderMap();
 
-    const trips = MOCK_TRIPS;
+    const nameToId = Object.fromEntries(Object.entries(featuresById).filter(([,f]) => f.properties?.name).map(([id, f]) => [f.properties.name, id]));
-    const total = trips.length;
+    const entries = get(journals).slice().sort((a, b) => a.date.localeCompare(b.date));
+    const trips = entries.length > 0
+      ? entries.map(e => ({
+          countryName: e.location.country,
+          countryCode: nameToId[e.location.country] ?? null,
+          city: e.location.cities?.[0] ?? e.location.country,
+          transport: e.transport ?? 'flight',
+          date: e.date,
+        })).filter(t => t.countryCode)
+      : [
+          { countryName: 'Japan', countryCode: '392', city: 'Tokyo', transport: 'flight', date: '2024-03-15' },
+          { countryName: 'France', countryCode: '250', city: 'Paris', transport: 'flight', date: '2024-06-20' },
+          { countryName: 'Spain', countryCode: '724', city: 'Barcelona', transport: 'flight', date: '2024-09-10' },
+          { countryName: 'United States of America', countryCode: '840', city: 'New York', transport: 'flight', date: '2025-01-05' },
+          { countryName: 'Thailand', countryCode: '764', city: 'Bangkok', transport: 'flight', date: '2025-04-18' },
+          { countryName: 'Australia', countryCode: '036', city: 'Sydney', transport: 'flight', date: '2025-08-22' },
+        ];
 
-    for (let i = 0; i < total; i++) {
+    for (let i = 0; i < trips.length; i++) {
       if (isCancelled || myId !== animId) break;
-
       const trip = trips[i];
-      currentDateLabel = formatDateLabel(trip.date);
+      if (trip.date) currentDateLabel = formatDateLabel(trip.date);
       const destFeature = featuresById[trip.countryCode];
       if (!destFeature) continue;
-
+      if (onprogress) onprogress({ index: i + 1, total: trips.length, label: `${trip.city}, ${trip.countryName}` });
-      const label = `${trip.city}, ${trip.countryName}`;
+      await animateTrip(trip.countryCode, destFeature, trip.transport);
-      if (onprogress) onprogress({ index: i + 1, total, label });
-
-      await animateTrip(trip.countryCode, destFeature);
     }
 
     if (!isCancelled && myId === animId) {
-      isFinished = true;
+      isFinished = true; isPlaying = false;
-      isPlaying = false;
       if (onprogress) onprogress({ index: trips.length, total: trips.length, label: 'Journey complete!' });
-    } else if (myId === animId) {
+    } else if (myId === animId) { isPlaying = false; }
-      isPlaying = false;
-    }
-  }
-
-  function stopJourney() {
-    isCancelled = true;
-    isPlaying = false;
-  }
-
-  function replay() {
-    stopJourney();
-    setTimeout(() => startJourney(), 100);
   }
 
+  function stopJourney() { isCancelled = true; isPlaying = false; }
+  function replay() { stopJourney(); setTimeout(() => startJourney(), 100); }
   function switchMode(target) {
     if (target === mode) return;
     onmodechange?.(target);
     stopJourney();
     setTimeout(() => startJourney(), 100);
   }
-
+  function close() { stopJourney(); onclose?.(); }
-  function close() {
-    stopJourney();
-    onclose?.();
-  }
 
   onMount(() => {
-    const width = frameEl.clientWidth;
+    const width = frameEl.clientWidth, height = frameEl.clientHeight;
-    const height = frameEl.clientHeight;
-
     setupProjection(width, height);
 
     countriesData = feature(worldData, worldData.objects.countries)
       .features.filter(f => (f.id || f.properties.name === 'Kosovo') && f.id !== '010');
-
+    countriesData.forEach(f => { if (!f.id) f.id = 'XK'; });
-    countriesData.forEach(f => {
+    for (const f of countriesData) featuresById[effId(f)] = f;
-      if (!f.id) f.id = 'XK';
-    });
-
-    for (const f of countriesData) {
-      featuresById[effId(f)] = f;
-    }
-
     homeFeature = featuresById[HOME_CODE];
 
-    svg = d3.select(frameEl)
+    svg = d3.select(frameEl).append('svg').attr('width', width).attr('height', height).style('cursor', 'default');
-      .append('svg')
+    gBase = svg.append('g'); gCountries = svg.append('g'); gAnim = svg.append('g');
-      .attr('width', width)
-      .attr('height', height)
-      .style('cursor', 'default');
-
-    gBase = svg.append('g');
-    gCountries = svg.append('g');
-    gAnim = svg.append('g');
-
     renderMap();
 
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
         svg.attr('width', width).attr('height', height);
-        const prevProj = projection;
+        const prevRotate = mode === 'globe' ? projection.rotate() : null;
         if (mode === 'map') {
           projection = d3.geoMercator();
           projection.fitSize([width, height], { type: 'Sphere' });
-          const s = projection.scale() * 1.5;
+          projection.scale(projection.scale() * 1.5).translate([width / 2, height * 0.70]);
-          projection.scale(s).translate([width / 2, height * 0.70]);
         } else {
           const size = Math.min(width, height) * 0.92;
-          projection = d3.geoOrthographic()
+          projection = d3.geoOrthographic().rotate(prevRotate).fitSize([size, size], { type: 'Sphere' }).translate([width / 2, height / 2]);
-            .rotate(prevProj.rotate())
-            .fitSize([size, size], { type: 'Sphere' })
-            .translate([width / 2, height / 2]);
         }
         pathFn = d3.geoPath().projection(projection);
         redrawBase();
         if (mode === 'map') renderMicrostates();
       }
     });
-
     observer.observe(frameEl);
-
     startJourney();
-
+    return () => { stopJourney(); observer.disconnect(); if (svg) svg.remove(); };
-    return () => {
-      stopJourney();
-      observer.disconnect();
-      if (svg) svg.remove();
-    };
   });
 </script>
 
 <div bind:this={frameEl} class="journey-frame" class:globe-mode={mode === 'globe'}>
   <div class="top-label">
-    {#if isFinished}
+    {#if isFinished}Journey complete!{:else if currentDateLabel}{currentDateLabel}{/if}
-      Journey complete!
-    {:else if currentDateLabel}
-      {currentDateLabel}
-    {/if}
   </div>
   <div class="control-bar">
-    <button class="control-btn" onclick={replay}>
+    <button class="control-btn" onclick={replay}>⟳ Replay</button>
-      ⟳ Replay
-    </button>
     <button class="control-btn" onclick={() => switchMode(mode === 'map' ? 'globe' : 'map')}>
-      {mode === 'map' ? 'Globe animation' : 'Map animation'}
+      {mode === 'map' ? '🌍 Globe view' : '🗺 Map view'}
-    </button>
-    <button class="control-btn" onclick={close}>
-      ✕ Back to Journaling
     </button>
+    <button class="control-btn" onclick={close}>✕ Close</button>
   </div>
 </div>
 
 <style>
-  .journey-frame {
+  .journey-frame { width: 100%; height: 100%; overflow: hidden; position: relative; background: #a4c8e0; }
-    width: 100%;
+  .journey-frame.globe-mode { background: #ffffff; }
-    height: 100%;
+  .journey-frame :global(svg) { display: block; }
-    overflow: hidden;
-    position: relative;
-    background: #a4c8e0;
-  }
-
-  .journey-frame.globe-mode {
-    background: #ffffff;
-  }
-
-  .journey-frame :global(svg) {
-    display: block;
-  }
 
   .top-label {
-    position: absolute;
+    position: absolute; top: 16px; left: 16px; z-index: 10;
-    top: 16px;
+    background: rgba(0,0,0,0.65); color: #fff;
-    left: 16px;
+    font-family: var(--heading, sans-serif); font-size: 16px; font-weight: 600;
-    z-index: 10;
+    padding: 10px 24px; border-radius: 24px; white-space: nowrap;
-    background: rgba(0,0,0,0.65);
+    letter-spacing: 0.04em; min-width: 200px; text-align: center;
-    color: #fff;
-    font-family: var(--heading, sans-serif);
-    font-size: 16px;
-    font-weight: 600;
-    padding: 10px 24px;
-    border-radius: 24px;
-    white-space: nowrap;
-    letter-spacing: 0.04em;
-    min-width: 200px;
-    text-align: center;
-    box-sizing: border-box;
   }
 
   .control-bar {
-    position: absolute;
+    position: absolute; bottom: 24px; right: 24px; z-index: 10;
-    bottom: 24px;
+    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
-    right: 24px;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: flex-end;
   }
 
   .control-btn {
-    padding: 10px 24px;
+    padding: 10px 24px; border: none; border-radius: 24px;
-    border: none;
+    background: #8b5cf6; color: #fff; font-size: 14px; font-weight: 600;
-    border-radius: 24px;
+    cursor: pointer; transition: background 0.15s ease; white-space: nowrap; font-family: inherit;
-    background: #8b5cf6;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.15s ease;
-    white-space: nowrap;
-    font-family: inherit;
-  }
-
-  .control-btn:hover {
-    background: #7c3aed;
   }
+  .control-btn:hover { background: #7c3aed; }
+  .control-btn:active { transform: scale(0.96); }
 </style>

src/lib/world-map/WorldMap.svelte

@@ -3,7 +3,10 @@
   import * as d3 from 'd3';
   import { feature } from 'topojson-client';
   import worldData from 'world-atlas/countries-50m.json';
-  import { getSelected, toggle, setTotalCount, getHomeCountryCode } from '../layout/selection.svelte.js';
+  import { getSelected, setTotalCount, getFlashing } from '../layout/selection.svelte.js';
+  import { getUserProfile } from '../auth/userStore.svelte.js';
+  import homeIconUrl from '../../assets/home.png';
+  import crayonCursorUrl from '../../assets/logo-cursor.png';
 
   let { onCountryClick = (_name) => {} } = $props();
 
@@ -73,8 +76,34 @@
   }
 
   let frameEl;
-  let _paths = null;
+  let _paths = $state(null);
   let _g = null;
+  let _pathFn = null;
+  let _countries = null;
+
+  function updateHomeMarker(homeCountryName) {
+    if (!_g || !_pathFn || !_countries) return;
+    _g.selectAll('.home-marker').remove();
+    if (!homeCountryName) return;
+    const found = _countries.find(f => f.properties.name === homeCountryName);
+    if (!found) return;
+    const [cx, cy] = _pathFn.centroid(found);
+    if (isNaN(cx) || isNaN(cy)) return;
+    const SIZE = 24;
+    _g.append('image')
+      .attr('class', 'home-marker')
+      .attr('href', homeIconUrl)
+      .attr('x', cx - SIZE / 2)
+      .attr('y', cy - SIZE / 2)
+      .attr('width', SIZE)
+      .attr('height', SIZE)
+      .style('pointer-events', 'none');
+  }
+
+  $effect(() => {
+    const homeCountry = getUserProfile()?.homeCountry ?? null;
+    updateHomeMarker(homeCountry);
+  });
 
   function fitProjection(proj, w, h) {
     proj.fitSize([w, h], { type: 'Sphere' });
@@ -84,14 +113,30 @@
 
   function updateAllFills() {
     const sel = getSelected();
-    const hc = getHomeCountryCode();
     if (!_paths || !_g) return;
-    _paths.attr('fill', d => countryColor(d, sel, hc));
+    _paths.attr('fill', d => countryColor(d, sel, null));
-    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
+    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, null));
   }
 
   $effect(updateAllFills);
 
+  $effect(() => {
+    const flashSet = getFlashing();
+    const paths = _paths; // reactive read so effect re-runs when _paths is set
+    if (!paths || flashSet.size === 0) return;
+    paths
+      .filter(d => flashSet.has(effId(d)))
+      .each(function() {
+        d3.select(this).interrupt()
+          .transition().duration(200).attr('fill', '#facc15')
+          .transition().duration(200).attr('fill', '#fb923c')
+          .transition().duration(200).attr('fill', '#facc15')
+          .transition().duration(200).attr('fill', '#fb923c')
+          .transition().duration(200).attr('fill', '#facc15')
+          .transition().duration(400).attr('fill', VISITED_COLOR);
+      });
+  });
+
   onMount(() => {
     const width = frameEl.clientWidth;
     const height = frameEl.clientHeight;
@@ -108,6 +153,9 @@
       if (!f.id) f.id = 'XK';
     });
 
+    _pathFn = path;
+    _countries = countries;
+
     const sovereignIds = new Set(countries.map(f => effId(f)));
     setTotalCount(sovereignIds.size);
 
@@ -123,24 +171,14 @@
       .attr('class', 'tooltip')
       .style('display', 'none');
 
-    function updateFill(sel) {
-      const s = getSelected();
-      const hc = getHomeCountryCode();
-      sel.attr('fill', d => countryColor(d, s, hc));
-      _g.selectAll('.micro-state').attr('fill', d => countryColor(d, s, hc));
-    }
-
     function attachEvents(sel) {
       sel
         .on('click', (event, d) => {
-          toggle(effId(d));
-          updateFill(d3.select(event.currentTarget));
           onCountryClick(d.properties.name);
         })
         .on('mouseenter', (event, d) => {
           const s = getSelected();
-          const hc = getHomeCountryCode();
+          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, null));
-          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, hc));
           tooltip.style('display', 'block').text(d.properties.name);
         })
         .on('mousemove', (event) => {
@@ -149,8 +187,7 @@
         })
         .on('mouseleave', (event, d) => {
           const s = getSelected();
-          const hc = getHomeCountryCode();
+          d3.select(event.currentTarget).attr('fill', countryColor(d, s, null));
-          d3.select(event.currentTarget).attr('fill', countryColor(d, s, hc));
           tooltip.style('display', 'none');
         });
     }
@@ -172,14 +209,13 @@
         const { width, height } = this.getBBox();
         if (width < threshold && height < threshold) {
           const [cx, cy] = path.centroid(d);
-          const hc = getHomeCountryCode();
           const c = _g.append('circle')
             .attr('class', 'micro-state')
             .datum(d)
             .attr('cx', cx)
             .attr('cy', cy)
             .attr('r', 2)
-            .attr('fill', countryColor(d, getSelected(), hc))
+            .attr('fill', countryColor(d, getSelected(), null))
             .attr('stroke', '#94a3b8')
             .attr('stroke-width', 0.5);
           attachEvents(c);
@@ -188,6 +224,7 @@
     }
 
     renderMicrostates();
+    updateHomeMarker(getUserProfile()?.homeCountry ?? null);
 
     const zoom = d3.zoom()
       .scaleExtent([1, 32])
@@ -225,7 +262,7 @@
   });
 </script>
 
-<div bind:this={frameEl} class="map-frame"></div>
+<div bind:this={frameEl} class="map-frame" style="cursor: url({crayonCursorUrl}) 4 28, crosshair;"></div>
 
 <style>
   .map-frame {
@@ -238,15 +275,15 @@
 
   .map-frame :global(svg) {
     display: block;
-    cursor: grab;
+    cursor: inherit;
   }
 
   .map-frame :global(svg:active) {
-    cursor: grabbing;
+    cursor: inherit;
   }
 
   .map-frame :global(svg path) {
-    cursor: pointer;
+    cursor: inherit;
   }
 
   .map-frame :global(.tooltip) {