fix: constrain timeline content width with side margins

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 2/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/layout/TopBar.svelte

@@ -1,7 +1,5 @@
 <script>
   import { getUser, getUserProfile, signOut } from '../auth/userStore.svelte.js';
-  import logo1Img from '../../assets/logo-1.png';
-
   let { screen, onNavigate } = $props();
 
   let user = $derived(getUser());
@@ -22,7 +20,6 @@
 <div class="topbar">
   <div class="left">
     <div class="brand">
-      <img src={logo1Img} class="logo-img" alt="Journi logo" />
       <span class="app-name">Journi</span>
     </div>
   </div>
@@ -34,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>
 
@@ -93,12 +90,6 @@
     gap: 4px;
   }
 
-  .logo-img {
-    width: 28px;
-    height: 28px;
-    object-fit: contain;
-  }
-
   .app-name {
     font-family: var(--heading);
     font-size: 22px;

src/lib/layout/selection.svelte.js

@@ -3,8 +3,8 @@ import { nameToId } from '../shared/countries.js';
 
 let selected = $state(new Set());
 let totalCountries = $state(0);
+let flashing = $state(new Set());
 
-// Derive visited countries from journal entries
 journals.subscribe((entries) => {
   const ids = new Set();
   for (const e of entries) {
@@ -25,3 +25,16 @@ export function setTotalCount(n) {
 export function getTotalCount() {
   return totalCountries;
 }
+
+export function getFlashing() {
+  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/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/stores/entriesStore.svelte.js

@@ -27,7 +27,7 @@ export function initEntriesListener(uid) {
 }
 
 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/timeline/NewEntryForm.svelte

@@ -1,7 +1,9 @@
 <script>
-  import { get } from 'svelte/store';
   import { journals, addJournal } from '../stores/journalStore.js';
+  import { get } from 'svelte/store';
+  import { flashCountry } from '../layout/selection.svelte.js';
   import { countryNames } from '../shared/countries.js';
+  import { countryCities } from '../shared/countryCities.js';
   import SearchInput from '../shared/SearchInput.svelte';
   import PhotoEditor from './PhotoEditor.svelte';
   import airplaneImg from '../../assets/airplane.png';
@@ -13,6 +15,13 @@
 
   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([]);
   let cityInput = $state('');
@@ -55,8 +64,11 @@
   // otherwise show all known cities.
   let cityOptions = $derived(
     country.trim()
-      ? [...new Set(get(journals).filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities))].sort()
+      ? [...new Set([
-      : [...new Set(get(journals).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) {
@@ -106,9 +118,11 @@
 
   // ── 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)
@@ -124,9 +138,11 @@
         photos,
         location: { cities, country },
       });
+      flashCountry(country);
       onSaved();
-    } catch {
+    } catch (e) {
       saving = false;
+      saveError = e?.message ?? 'Failed to save. Please try again.';
     }
   }
 </script>
@@ -153,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>
@@ -166,12 +183,12 @@
 
         <div class="row">
           <div class="field">
-            <label class="label" for="nc-country">Country <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">Cities <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} onblurcommit={addCity} />
             {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
             {#if cities.length > 0}
@@ -186,19 +203,19 @@
 
         <div class="row">
           <div class="field">
-            <label class="label" for="nc-date">Date <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">Days <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">Trip type <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}>
@@ -326,6 +343,7 @@
   }
   .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; }

src/lib/timeline/TimelineView.svelte

@@ -65,53 +65,55 @@
       />
     </div>
   {:else}
-    <div class="right-panel">
+    <div class="list-view">
-      <div class="center-col">
+      <div class="page-header">
-        <div class="page-header">
+        <h1 class="page-title">My Journey</h1>
-          <h1 class="page-title">My Journey</h1>
+        <button class="new-btn" onclick={() => { view = 'new'; }}>
-          <button class="new-btn" onclick={() => { view = 'new'; }}>
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
+            <path d="M12 5v14M5 12h14"/>
-              <path d="M12 5v14M5 12h14"/>
+          </svg>
-            </svg>
+          Add trip
-            Add trip
+        </button>
-          </button>
+      </div>
+
+      <div class="two-col">
+        <div class="left-col">
+          <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
+
+          {#if sortedEntries.length === 0}
+            <p class="empty">No journal entries yet.</p>
+          {:else}
+            <div class="sort-row">
+              <span class="sort-label">Sort by</span>
+              <select class="sort-select" onchange={(e) => (sortKey = e.currentTarget.value)}>
+                <option value="date-desc" selected={sortKey === 'date-desc'}>Newest first</option>
+                <option value="date-asc"  selected={sortKey === 'date-asc'}>Oldest first</option>
+                <option value="country-asc"  selected={sortKey === 'country-asc'}>Country A → Z</option>
+                <option value="country-desc" selected={sortKey === 'country-desc'}>Country Z → A</option>
+              </select>
+            </div>
+            <ol class="v-list">
+              {#each sortedEntries as entry, i (entry.id)}
+                {#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
+                  <li class="year-marker" aria-hidden="true">
+                    <span class="year-label">{getYear(entry.date)}</span>
+                  </li>
+                {/if}
+                <TimelineCard {entry} onClick={() => { selectedId = entry.id; view = 'detail'; onDetailChange(true); }} />
+              {/each}
+            </ol>
+          {/if}
+
+          <footer class="page-footer">
+            {sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
+          </footer>
         </div>
 
         {#if sortedEntries.length > 0}
-          <div class="share-row">
+          <div class="right-col">
             <SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
           </div>
         {/if}
-
-        <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
-
-        {#if sortedEntries.length === 0}
-          <p class="empty">No journal entries yet.</p>
-        {:else}
-          <div class="sort-row">
-            <span class="sort-label">Sort by</span>
-            <select class="sort-select" onchange={(e) => (sortKey = e.currentTarget.value)}>
-              <option value="date-desc" selected={sortKey === 'date-desc'}>Newest first</option>
-              <option value="date-asc"  selected={sortKey === 'date-asc'}>Oldest first</option>
-              <option value="country-asc"  selected={sortKey === 'country-asc'}>Country A → Z</option>
-              <option value="country-desc" selected={sortKey === 'country-desc'}>Country Z → A</option>
-            </select>
-          </div>
-          <ol class="v-list">
-            {#each sortedEntries as entry, i (entry.id)}
-              {#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
-                <li class="year-marker" aria-hidden="true">
-                  <span class="year-label">{getYear(entry.date)}</span>
-                </li>
-              {/if}
-              <TimelineCard {entry} onClick={() => { selectedId = entry.id; view = 'detail'; onDetailChange(true); }} />
-            {/each}
-          </ol>
-        {/if}
-
-        <footer class="page-footer">
-          {sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
-        </footer>
       </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 ── */

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, setTotalCount } 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 2/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' });
@@ -91,6 +120,23 @@
 
   $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;
@@ -107,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);
 
@@ -175,6 +224,7 @@
     }
 
     renderMicrostates();
+    updateHomeMarker(getUserProfile()?.homeCountry ?? null);
 
     const zoom = d3.zoom()
       .scaleExtent([1, 32])
@@ -212,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 {
@@ -225,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) {