Update README.md

fix: animation bug fix
Merge branch 'main' of https://git.prototyping.id/20256426/Map-Jurnal
2026-06-17 02:24:15 +00:00 · 2026-06-17 11:21:20 +09:00 · 2026-06-17 09:00:54 +09:00 · 2026-06-17 09:00:20 +09:00 · 2026-06-16 17:15:17 +00:00 · 2026-06-16 16:50:57 +00:00
52 changed files with 1409 additions and 2106 deletions
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -3,7 +3,7 @@
  "configurations": [
    {
      "name": "Map-Jurnal",
-      "cwd": "/Users/haerikim/Desktop/SP Map Journal/Map-Jurnal",
+      "cwd": ".",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 5173,
--- a/.env
+++ b/.env
@@ -1,6 +0,0 @@
-VITE_FIREBASE_API_KEY=AIzaSyC_hZf9TpIIb4H7y7umUeYtFKD-guN_iR0
-VITE_FIREBASE_AUTH_DOMAIN=map-jurnal.firebaseapp.com
-VITE_FIREBASE_PROJECT_ID=map-jurnal
-VITE_FIREBASE_STORAGE_BUCKET=map-jurnal.firebasestorage.app
-VITE_FIREBASE_MESSAGING_SENDER_ID=922587077950
-VITE_FIREBASE_APP_ID=1:922587077950:web:9f140f84468e306152606f
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -0,0 +1,17 @@
+logo.png,1781605272907,e1d8cae38fa1d4a97f6847ccdc69dae37d8b481e6862625b6d8a6565137a622b
+index.html,1781628774437,ba46c34c4641f9cba330944cbd3f9b21ee4cb43addcf58dc1876428f5aef2c0c
+assets/index-DvsKFHEX.css,1781628774437,5c4f357ff59c59917ce7c70ee28b29bc28c9d7eec3f6afd12e4c2cc8120537e1
+assets/walk-2q6BKbeA.png,1781628774437,19a9f5d599221a0077761a7777285ca17dbc2775a9c4096304098602f2067b87
+assets/airplane-DW4h3HkK.png,1781628774437,8d70ae12e46f5abdb4e1ccdf59af4bcab1805229d02f1260321f1f61d6375af1
+assets/ship-xaUNk1p4.png,1781628774438,58b126e20c22710d5af92a45b6ec8af6e0b3dea30a743f9e8b91e849ed66cd91
+assets/car-C6BGShf6.png,1781628774437,ac10c46e0a8245a9e52b8c3cebe110112f57764c9bda1fe93d4fbc077e79a1b2
+assets/bus-Dy8WA7au.png,1781628774437,8285587abd857cce3b7083e799a8d2a95b019cfc40546e914cc2b8348c448c10
+assets/default-3-BcrUpMyO.jpeg,1781628774448,f10d24e80f9f94ddf40d1103ea18f96214e89c18102c75be6b816c8ee0a2b4b9
+assets/logo-signin-BAMDzBb4.png,1781628774437,7e5d35cac2cea449b27ef72e386e66e1b9c8cbb9261a26b85fda4cb2d89ac226
+assets/train-DAjH23UQ.png,1781628774437,9b3a2b3b0376f74a47daf69b2f202d757fd8425edede28a8263d2ef5994ed5f2
+assets/default-2-CoZoomA5.jpeg,1781628774448,fbdb512018aba7f68167796632defe75019af5432ed0bfc48d0e24851c47261f
+assets/profile-lvFMnGZN.png,1781628774437,0892c6fcffa6be93a86ddedc09b6c26ad725fd1dd66479b4382dbfddcb6d392f
+assets/default-1-CZLThRLv.jpeg,1781628774448,72f1614c5862c5fa1b79db6130985b681cd971e4c415758990dc1fd3c9eee1a4
+assets/home-D9_bbHBx.png,1781628774423,201c0fa3a0d38a8ce25c5494d0bd1f2d5d7e0f03fb07cd9c34b3e7593858899f
+DB-diagram.PNG,1781628177434,978dcc3d9b7e059510c59d5c8a836018dfdb4b6cf59a9e362a89a5a6f9cb6f26
+assets/index-gfLawFjf.js,1781628774466,b5e58d7bfb36663198ac3fbbece0600acef7c8b8822ab9c1132cfc0a68ce214a
--- a/.firebaserc
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "map-jurnal"
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.claude/
--- a/README.md
+++ b/README.md
@@ -1,43 +1,133 @@
-# Svelte + Vite
+# Map Journal

-This template should help get you started developing with Svelte in Vite.
+**Authors:** Tomas Horsky, Haeri Kim

-## Recommended IDE Setup
+**Student IDs:** 20256426, 20254236

-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+**Emails:** tomashorsky@kaist.ac.kr , kimhaeri@kaist.ac.kr

-## Need an official Svelte framework?
+**Live website:** <https://map-jurnal.web.app/>

-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+**Repository:** <https://git.prototyping.id/20256426/Map-Jurnal.git>

-## Technical considerations
+**Video Demo:** https://youtu.be/j8-Ue4wanRU

-**Why use this over SvelteKit?**
+---

- It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+## Overview

-This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+Journi is a web application for journaling and visualizing travel experiences. Users log trips by country, pinning cities, dates, transport modes, and photos. Then user can explore their journey on an interactive world map, timeline view or can play short animations overviewing his trips.

-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+### How It Works

-**Why include `.vscode/extensions.json`?**
+1. **Sign in** with a Google account.
+2. **Select your home country** — it is automatically marked as visited on the map.
+3. **Add journal entries**:
+    - **Step 0** — Click on country in map you visited or click add trip in timeline.
+   - **Step 1** — Choose country, cities, arrival date, days stayed, trip type (solo/friends/family), and transport (flight/train/bus/car/ship/walk).
+   - **Step 2** — Upload photos (stored in Firebase Storage).
+   - **Step 3** — Answer three random reflective questions about the trip (e.g., *"What was the most unexpected thing that happened?"*).
+4. **Edit entries** through the same form, pre-filled with existing data.
+5. **View your journey** on a D3-powered world map where visited countries are highlighted and animated flight paths connect entries in chronological order.
+6. **Browse a timeline** sorted by date, country, or recency.
+7. **Share** a generated summary card to show off your stats.

-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+---

-**Why enable `checkJs` in the JS template?**
+## Backend — Firebase

-It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
+![Firestore diagram](public/DB-diagram.PNG)
+Journi uses Firebase as its backend. Users sign in with Google through Firebase Authentication, and their data is linked to their user ID. Firestore stores user profiles in `users/{uid}` and journal entries in `users/{uid}/entries/{id}`. Firebase Storage stores uploaded trip photos. Firebase Security Rules protect the data, so authenticated users can only read and write their own profiles, entries, and photos.

-**Why is HMR not preserving my local component state?**
+---

-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).
+## Code Organization

-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```js
-// store.js
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
 ```
+src/
+├── App.svelte              Root component — mode switching & replay button
+├── main.js                 Vite entry point
+├── app.css                 Global CSS variables and resets
+├── assets/                 14 static images (transport icons, profile, defaults)
+│
+└── lib/
+    ├── firebase.js         Firebase init (auth, Firestore, Storage)
+    │
+    ├── auth/
+    │   ├── LoginOverlay.svelte    Google sign-in dialog
+    │   ├── CountryPicker.svelte   Home-country selection step
+    │   └── userStore.svelte.js    Auth state & user profile store
+    │
+    ├── layout/
+    │   ├── Layout.svelte          App shell (auth guard + sidebar)
+    │   ├── TopBar.svelte          Segmented nav (Map / Journal)
+    │   └── selection.svelte.js    Reactive set of visited countries
+    │
+    ├── stores/
+    │   └── entriesStore.svelte.js  Firestore CRUD & reactive list
+    │
+    ├── shared/
+    │   ├── cities.js              Country→cities map
+    │   ├── countries.js           Country names, IDs, flag emoji helpers
+    │   ├── SearchInput.svelte     Autocomplete text input
+    │   └── types.js               JSDoc type definitions
+    │
+    ├── world-map/
+    │   ├── WorldMap.svelte        D3 globe — visited countries, home marker, tooltips
+    │   ├── JourneyView.svelte     Animated flight-path overlay + stats
+    │   ├── StatsPanel.svelte      Trip statistics panel
+    │   └── continents.js          Continent classification data
+    │
+    └── timeline/
+        ├── detail/
+        │   ├── NewEntryForm.svelte     Multi-step entry creation (3 steps)
+        │   ├── EditForm.svelte         Multi-step entry editing (3 steps)
+        │   ├── StepNavbar.svelte       Shared step-navigation top bar
+        │   ├── TripBasicInfo.svelte    Step 1 form (country, cities, dates, transport)
+        │   ├── PhotoEditor.svelte      Step 2 — upload & manage photos
+        │   ├── JournalDetail.svelte    Full entry view with lightbox
+        │   └── DeleteConfirm.svelte    Delete confirmation dialog
+        └── view/
+            ├── TimelineView.svelte     Sorted entry list with year groups
+            ├── TimelineCard.svelte     Entry card thumbnail
+            ├── ShareCard.svelte        Generated share image
+            └── SharePreview.svelte     Share card preview modal
+```
+
+
+
+## Setup & Run
+
+```bash
+# Install
+npm install
+
+# Environment — create .env with your Firebase config:
+#   VITE_FIREBASE_API_KEY=...
+#   VITE_FIREBASE_AUTH_DOMAIN=...
+#   VITE_FIREBASE_PROJECT_ID=...
+#   VITE_FIREBASE_STORAGE_BUCKET=...
+#   VITE_FIREBASE_MESSAGING_SENDER_ID=...
+#   VITE_FIREBASE_APP_ID=...
+
+# Run server
+npm run dev
+
+```
+
+---
+
+## Known Issues
+
+- **Globe animation** — The D3 globe rotation animation during journey replay can be a little bit laggy.
+- **Switching between animations** - after switching from map to globe animation, the old animation might be still visible for a moment. Restatarting the animation fixes the issue.
+
+---
+
+## Acknowledgments
+
+- **Opencode & Claude Code (Sonnet 4.6) ** - researching, writing code, debuging... (https://opencode.ai/)
+- **Gemini Nanobanana ** - generating logo and illustrations
+- **D3.js docs** — help with using D3.js library (https://d3js.org/)
+- **D3.js world tour example** — inspiration for adding animation (https://observablehq.com/@d3/world-tour) 
+
--- a/dev_error.txt
+++ b/dev_error.txt
--- a/dev_output.txt
+++ b/dev_output.txt
@@ -1,11 +0,0 @@
-
-> map-journal@0.0.0 dev
-> vite
-
-Port 5173 is in use, trying another one...
-Port 5174 is in use, trying another one...
-
-  [32m[1mVITE[22m v8.0.15[39m  [2mready in [0m[1m1792[22m[2m[0m ms[22m
-
-  [32m➜[39m  [1mLocal[22m:   [36mhttp://localhost:[1m5175[22m/[39m
-[2m  [32m➜[39m  [1mNetwork[22m[2m: use [22m[1m--host[22m[2m to expose[22m
--- a/firebase.json
+++ b/firebase.json
@@ -0,0 +1,12 @@
+{
+  "storage": {
+    "rules": "storage.rules"
+  },
+  "hosting": {
+    "public": "dist",
+    "ignore": ["firebase.json", ".firebaserc"],
+    "rewrites": [
+      { "source": "**", "destination": "/index.html" }
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,15 @@
 {
  "name": "map-journal",
-  "version": "0.0.0",
+  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "map-journal",
-      "version": "0.0.0",
+      "version": "1.0.0",
      "dependencies": {
        "d3": "^7.9.0",
        "firebase": "^12.14.0",
-        "flag-icons": "^7.5.0",
        "html-to-image": "^1.11.13",
        "topojson-client": "^3.1.0",
        "world-atlas": "^2.0.2"
@@ -2336,12 +2335,6 @@
        "@firebase/util": "1.15.1"
      }
    },
-    "node_modules/flag-icons": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.5.0.tgz",
-      "integrity": "sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg==",
-      "license": "MIT"
-    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
  "dependencies": {
    "d3": "^7.9.0",
    "firebase": "^12.14.0",
-    "flag-icons": "^7.5.0",
    "html-to-image": "^1.11.13",
    "topojson-client": "^3.1.0",
    "world-atlas": "^2.0.2"
--- a/public/DB-diagram.PNG
+++ b/public/DB-diagram.PNG
--- a/public/logo.png
+++ b/public/logo.png
--- a/src/App.svelte
+++ b/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>
@@ -116,13 +117,13 @@
    bottom: 24px;
    right: 24px;
    z-index: 10;
-    padding: 12px 28px;
-    border-radius: 24px;
+    padding: 10px 22px;
+    border-radius: 20px;
    border: none;
    background: #8b5cf6;
    color: #fff;
-    font-size: 15px;
-    font-weight: 600;
+    font-size: 14px;
+    font-weight: 500;
    gap: 6px;
    cursor: pointer;
    display: flex;
@@ -140,4 +141,5 @@
  .journey-play-btn:active {
    transform: scale(0.92);
  }
+
 </style>
--- a/src/assets/airplane-animation.png
+++ b/src/assets/airplane-animation.png
--- a/src/assets/default-1.jpeg
+++ b/src/assets/default-1.jpeg
--- a/src/assets/default-2.jpeg
+++ b/src/assets/default-2.jpeg
--- a/src/assets/default-3.jpeg
+++ b/src/assets/default-3.jpeg
--- a/src/assets/home.png
+++ b/src/assets/home.png
--- a/src/assets/logo-cursor.png
+++ b/src/assets/logo-cursor.png
--- a/src/assets/logo-signin.png
+++ b/src/assets/logo-signin.png
--- a/src/assets/profile.png
+++ b/src/assets/profile.png
--- a/src/lib/auth/CountryPicker.svelte
+++ b/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 filtered = $derived(
-    search
-      ? countries.filter(c => c.name.toLowerCase().includes(search.toLowerCase()))
-      : countries
-  );
-
+  let selectedCountry = $state('');
  let open = $state(false);

-  function select(c) {
-    selectedCountry = c;
-    search = c.name;
+  let filtered = $derived(
+    search.trim()
+      ? 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) {
-      handleSubmit();
-    }
-    if (e.key === 'Escape') {
-      open = false;
-    }
+    if (e.key === 'Enter' && selectedCountry) handleSubmit();
+    if (e.key === 'Escape') open = false;
  }
 </script>

 <div class="overlay">
  <div class="card">
-    <h1 class="heading">Welcome, {profile?.displayName || 'Traveler'}!</h1>
-    <p class="subtitle">Select your home country to get started</p>
+    <img src={homeImg} alt="home" class="home-img" />
+    <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}
-              class:selected={selectedCountry?.name === country.name}
-              onclick={() => select(country)}
-              onkeydown={(e) => { if (e.key === 'Enter') select(country); }}
+              aria-selected={selectedCountry === name}
+              class:selected={selectedCountry === name}
+              onmousedown={() => select(name)}
              tabindex="0"
-            >
-              {country.name}
-            </li>
+            >{name}</li>
          {/each}
-          {#if filtered.length === 0}
-            <li class="no-results">No countries found</li>
-          {/if}
        </ul>
      {/if}
    </div>

-    <button
-      class="continue-btn"
-      disabled={!selectedCountry}
-      onclick={handleSubmit}
-    >
-      Continue
+    <button class="continue-btn" disabled={!selectedCountry} onclick={handleSubmit}>
+      Set home country
    </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: 420px;
+    max-width: 360px;
    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
  }

-  .heading {
-    font: 700 24px/1.3 sans-serif;
-    color: #f1f5f9;
-    margin-bottom: 6px;
+  .home-img {
+    width: 200px;
+    height: 200px;
+    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;
-    color: #94a3b8;
-    margin-bottom: 28px;
+    font-family: var(--sans);
+    font-size: 14px;
+    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;
-    border: 1px solid #475569;
+    padding: 10px 14px;
+    border: 1px solid var(--border);
    border-radius: 8px;
-    background: #0f172a;
-    color: #f1f5f9;
-    font: 400 15px/1.4 sans-serif;
+    background: var(--bg-subtle);
+    color: var(--text-h);
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 300;
    outline: none;
-    transition: border-color 0.2s;
-  }
-
-  .search-input:focus {
-    border-color: #3b82f6;
-  }
-
-  .search-input::placeholder {
-    color: #64748b;
+    transition: border-color 0.15s;
+    box-sizing: border-box;
  }
+  .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;
-    border: 1px solid #475569;
+    background: var(--bg);
+    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;
-    font: 400 14px/1.4 sans-serif;
-    transition: background 0.15s;
+    color: var(--text);
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    border-radius: 6px;
+    transition: background 0.1s;
  }

-  .list li:hover,
-  .list li.selected {
-    background: #1e3a5f;
-    color: #f1f5f9;
-  }
-
-  .no-results {
-    color: #64748b;
-    cursor: default;
+  .list li:hover, .list li.selected {
+    background: var(--accent-bg);
+    color: var(--accent);
  }

  .continue-btn {
    width: 100%;
-    padding: 12px 24px;
-    border: none;
+    padding: 11px 24px;
+    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;
-  }
-
-  .continue-btn:hover:not(:disabled) {
-    background: #2563eb;
-  }
-
-  .continue-btn:disabled {
-    opacity: 0.4;
-    cursor: default;
+    transition: background 0.15s, opacity 0.15s;
  }
+  .continue-btn:hover:not(:disabled) { background: var(--accent-dark); }
+  .continue-btn:disabled { opacity: 0.4; cursor: default; }
 </style>
--- a/src/lib/auth/LoginOverlay.svelte
+++ b/src/lib/auth/LoginOverlay.svelte
@@ -1,12 +1,13 @@
 <script>
  import { signInWithGoogle } from './userStore.svelte.js';
+  import logoImg from '../../assets/logo-signin.png';
 </script>

 <div class="overlay">
  <div class="card">
-    <img src="/logo.png" alt="Map Journal" class="logo" />
-    <h1 class="title">Map Journal</h1>
-    <p class="subtitle">Sign in to start your journey</p>
+    <img src={logoImg} alt="Journi" class="logo" />
+    <h1 class="title">Journi</h1>
+    <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: 400px;
+    max-width: 360px;
    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
  }

  .logo {
-    width: 80px;
-    height: 80px;
-    border-radius: 12px;
+    width: 216px;
+    height: 216px;
+    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;
-    color: #f1f5f9;
-    margin-bottom: 8px;
+    font-family: var(--heading);
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0;
  }

  .subtitle {
-    font: 400 15px/1.4 sans-serif;
-    color: #94a3b8;
-    margin-bottom: 32px;
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 300;
+    color: var(--text);
+    margin: 0 0 32px;
  }

  .google-btn {
    display: inline-flex;
    align-items: center;
-    gap: 12px;
-    padding: 12px 28px;
-    border: 1px solid rgba(255,255,255,0.15);
+    gap: 10px;
+    padding: 10px 24px;
+    border: 1px solid var(--border);
    border-radius: 8px;
-    background: #334155;
-    color: #f1f5f9;
-    font: 500 16px/1.4 sans-serif;
+    background: var(--bg-subtle);
+    color: var(--text-h);
+    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;
-    height: 22px;
+    width: 20px;
+    height: 20px;
    flex-shrink: 0;
  }
 </style>
--- a/src/lib/auth/userStore.svelte.js
+++ b/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);
--- a/src/lib/firebase.js
+++ b/src/lib/firebase.js
@@ -12,7 +12,7 @@ const firebaseConfig = {
  appId:             import.meta.env.VITE_FIREBASE_APP_ID,
 };

-export const app = initializeApp(firebaseConfig);
+const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app);
 export const db = getFirestore(app);
 export const storage = getStorage(app);
--- a/src/lib/layout/Footer.svelte
+++ b/src/lib/layout/Footer.svelte
@@ -1,25 +0,0 @@
-<script>
-  import { getSelected, getTotalCount } from './selection.svelte.js';
-</script>
-
-<footer class="footer">
-  <span>{getSelected().size} / {getTotalCount()} countries visited</span>
-</footer>
-
-<style>
-  .footer {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: var(--sans);
-    font-size: 12px;
-    font-weight: 300;
-    color: var(--text-sub);
-    border-top: 1px solid var(--border);
-    background: var(--bg);
-    flex-shrink: 0;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-  }
-</style>
--- a/src/lib/layout/TopBar.svelte
+++ b/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;
@@ -130,7 +137,7 @@
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
-    font-weight: 300;
+    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
--- a/src/lib/layout/selection.svelte.js
+++ b/src/lib/layout/selection.svelte.js
@@ -1,59 +1,24 @@
-import { db } from '../firebase.js';
-import { doc, onSnapshot, setDoc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';
+import { journals } from '../stores/entriesStore.svelte.js';
+import { nameToId } from '../shared/countries.js';
+import { getUserProfile } from '../auth/userStore.svelte.js';

 let selected = $state(new Set());
 let totalCountries = $state(0);
-let homeCountryCode = $state(null);
-let _uid = null;
-let _unsubscribe = null;
+let flashing = $state(new Set());

-export function initSelectionListener(uid) {
-  if (_unsubscribe) _unsubscribe();
-  _uid = uid;
-  const userRef = doc(db, 'users', uid);
-  _unsubscribe = onSnapshot(userRef, (snap) => {
-    if (snap.exists()) {
-      const codes = snap.data().visitedCountries || [];
-      selected = new Set(codes);
-      homeCountryCode = snap.data().homeCountryCode || null;
+journals.subscribe((entries) => {
+  const ids = new Set();
+  for (const e of entries) {
+    const id = nameToId[e.location?.country];
+    if (id) ids.add(id);
  }
+  const profile = getUserProfile();
+  if (profile?.homeCountry) {
+    const homeId = nameToId[profile.homeCountry];
+    if (homeId) ids.add(homeId);
+  }
+  selected = ids;
 });
-}
-
-const visitedRef = doc(db, 'visited', 'countries');
-
-onSnapshot(visitedRef, (snap) => {
-  if (snap.exists()) {
-    selected = new Set(snap.data().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 +32,15 @@ export function getTotalCount() {
  return totalCountries;
 }

-export function getHomeCountryCode() {
-  return homeCountryCode;
+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);
 }
--- a/src/lib/shared/PhotoGallery.svelte
+++ b/src/lib/shared/PhotoGallery.svelte
@@ -1,167 +0,0 @@
-<script>
-  /**
-   * Reusable photo gallery with prev/next arrows and indicator.
-   * @type {{
-   *   photos: string[],
-   *   height?: string,
-   *   thumbs?: boolean,
-   *   counter?: boolean,
-   *   onStep?: (e: Event) => void,
-   * }}
-   */
-  let { photos, height = '220px', thumbs = false, counter = false } = $props();
-
-  let idx = $state(0);
-
-  function prev(e) {
-    e?.stopPropagation();
-    idx = (idx - 1 + photos.length) % photos.length;
-  }
-  function next(e) {
-    e?.stopPropagation();
-    idx = (idx + 1) % photos.length;
-  }
-  function go(i, e) {
-    e?.stopPropagation();
-    idx = i;
-  }
-
-  // Reset when photos change (e.g. navigating to a different entry)
-  $effect(() => {
-    photos;
-    idx = 0;
-  });
-</script>
-
-{#if photos.length > 0}
-  <div class="gallery" style="--gallery-height: {height}">
-    <img class="gallery-img" src={photos[idx]} alt="photo {idx + 1}" loading="lazy" />
-
-    {#if photos.length > 1}
-      <button class="arr left" onclick={prev} aria-label="Previous photo">‹</button>
-      <button class="arr right" onclick={next} aria-label="Next photo">›</button>
-
-      {#if thumbs}
-        <div class="thumb-strip">
-          {#each photos as photo, i}
-            <button class="thumb" class:active={i === idx} onclick={(e) => go(i, e)} aria-label="Photo {i + 1}">
-              <img src={photo} alt="" />
-            </button>
-          {/each}
-        </div>
-      {:else}
-        <div class="dots">
-          {#each photos as _, i}
-            <button class="pip" class:active={i === idx} onclick={(e) => go(i, e)} aria-label="Photo {i + 1}"></button>
-          {/each}
-        </div>
-      {/if}
-    {/if}
-
-    {#if counter}
-      <span class="counter">{idx + 1} / {photos.length}</span>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .gallery {
-    position: relative;
-    overflow: hidden;
-    background: #000;
-  }
-
-  .gallery-img {
-    width: 100%;
-    height: var(--gallery-height);
-    object-fit: cover;
-    display: block;
-  }
-
-  .arr {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background: rgba(0,0,0,0.45);
-    color: #fff;
-    border: none;
-    border-radius: 50%;
-    font-size: 22px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.15s;
-    z-index: 2;
-    width: 36px;
-    height: 36px;
-  }
-  .arr:hover { background: rgba(0,0,0,0.7); }
-  .arr.left  { left: 10px; }
-  .arr.right { right: 10px; }
-
-  /* Dot indicators (timeline cards) */
-  .dots {
-    position: absolute;
-    bottom: 8px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 5px;
-    z-index: 2;
-  }
-  .pip {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    border: none;
-    background: rgba(255,255,255,0.5);
-    cursor: pointer;
-    padding: 0;
-    transition: background 0.15s, transform 0.15s;
-  }
-  .pip.active { background: #fff; transform: scale(1.3); }
-
-  /* Thumbnail strip (detail page) */
-  .thumb-strip {
-    position: absolute;
-    bottom: 12px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 8px;
-    z-index: 2;
-  }
-  .thumb {
-    width: 52px;
-    height: 36px;
-    border-radius: 6px;
-    overflow: hidden;
-    border: 2px solid transparent;
-    padding: 0;
-    cursor: pointer;
-    opacity: 0.65;
-    background: none;
-    transition: border-color 0.15s, opacity 0.15s;
-  }
-  .thumb.active { border-color: #fff; opacity: 1; }
-  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
-
-  /* Photo counter badge */
-  .counter {
-    position: absolute;
-    top: 14px;
-    right: 14px;
-    font-size: 12px;
-    font-weight: 300;
-    color: #fff;
-    background: rgba(0,0,0,0.45);
-    padding: 3px 10px;
-    border-radius: 20px;
-    z-index: 2;
-  }
-
-  @media (max-width: 600px) {
-    .thumb { width: 40px; height: 28px; }
-  }
-</style>
--- a/src/lib/shared/SearchInput.svelte
+++ b/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
--- a/src/lib/shared/countries.js
+++ b/src/lib/shared/countries.js
@@ -63,8 +63,18 @@ const nameToAlpha2 = {
  'eSwatini':'SZ','Åland':'AX',
 };

-export const countryNames = feature(worldData, worldData.objects.countries)
-  .features.map(f => f.properties?.name).filter(Boolean).sort();
+const _features = feature(worldData, worldData.objects.countries).features;
+
+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) {
--- a/src/lib/shared/types.js
+++ b/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 {};
--- a/src/lib/stores/entriesStore.svelte.js
+++ b/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(),
--- a/src/lib/stores/journalStore.js
+++ b/src/lib/stores/journalStore.js
@@ -1,45 +0,0 @@
-import { writable } from 'svelte/store';
-import { db } from '../firebase.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);
-}
--- a/src/lib/timeline/EditForm.svelte
+++ b/src/lib/timeline/EditForm.svelte
@@ -1,459 +0,0 @@
-<script>
-  import { getEntries } from '../stores/entriesStore.svelte.js';
-  import { addEntry, updateEntry } from '../stores/entriesStore.svelte.js';
-  import { countryNames } from '../shared/countries.js';
-  import { getCitiesForCountry, ALL_CITIES } from '../shared/cities.js';
-  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 }}
-   */
-  let { entry = null, initialCountry = '', onBack } = $props();
-
-  let isNew = !entry;
-
-  let cities     = $state([...(entry?.location.cities ?? [])]);
-  let cityInput  = $state('');
-  let country    = $state(entry?.location.country ?? initialCountry);
-  let date       = $state(entry?.date ?? new Date().toISOString().slice(0, 10));
-  let days       = $state(String(entry?.days ?? ''));
-  let tripType   = $state(entry?.tripType ?? '');
-  let photos     = $state([...(entry?.photos ?? [])]);
-  let memo       = $state(entry?.memo ?? '');
-  let transport  = $state(entry?.transport ?? '');
-
-  let errors = $state({
-    country: '', cities: '', date: '', days: '', tripType: '', transport: ''
-  });
-
-  function clearErrors() {
-    errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
-  }
-
-  const transportOptions = [
-    { value: 'flight', label: '✈ Flight' },
-    { value: 'train',  label: '🚂 Train'  },
-    { value: 'bus',    label: '🚌 Bus'    },
-    { value: 'car',    label: '🚗 Car'    },
-    { value: 'ship',   label: '🚢 Ship'   },
-    { value: 'walk',   label: '🚶 Walk'   },
-  ];
-
-  const MEMO_MAX = 100;
-  let wordCount = $derived(memo.trim() === '' ? 0 : memo.trim().split(/\s+/).length);
-  let memoOverLimit = $derived(wordCount > MEMO_MAX);
-
-  function onMemoInput(e) {
-    const raw = e.currentTarget.value;
-    const words = raw.trim() === '' ? [] : raw.trim().split(/\s+/);
-    if (words.length > MEMO_MAX) {
-      // keep first 100 words, preserve trailing space if user is mid-word
-      memo = words.slice(0, MEMO_MAX).join(' ');
-      e.currentTarget.value = memo;
-    } else {
-      memo = raw;
-    }
-  }
-
-  // Suggest cities — when a country is selected show only cities from that country.
-  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([...Object.values(ALL_CITIES).flat(), ...allEntries.flatMap(e => e.location.cities)])].sort()
-  );
-
-  function addCity(val) {
-    const trimmed = (val ?? cityInput).trim();
-    if (trimmed && !cities.includes(trimmed)) {
-      cities = [...cities, trimmed];
-    }
-    cityInput = '';
-  }
-
-  function removeCity(c) {
-    cities = cities.filter(x => x !== c);
-  }
-
-  async function save() {
-    clearErrors();
-    let hasError = false;
-    if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
-    if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
-    if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
-    if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
-    if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
-    if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
-    if (hasError) return;
-
-    try {
-      if (isNew) {
-        await addEntry({
-          title: `${cities.join(', ')}, ${country}`,
-          date,
-          days: Number(days),
-          tripType,
-          memo,
-          photos,
-          transport,
-          location: { cities, country },
-        });
-      } else {
-        await updateEntry(entry.id, {
-          date,
-          days: Number(days),
-          tripType,
-          transport,
-          memo,
-          photos,
-          location: { cities, country },
-        });
-      }
-      onBack();
-    } catch (err) {
-      console.error('Save failed:', err);
-    }
-  }
-</script>
-
-<div class="edit-layout">
-
-  <header class="edit-topbar">
-    <div class="topbar-left">
-      <button class="topbar-btn" onclick={onBack}>
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M19 12H5M12 5l-7 7 7 7"/>
-        </svg>
-        Back
-      </button>
-    </div>
-    <span class="topbar-title">{isNew ? 'New trip' : 'Edit'}</span>
-    <div class="topbar-right">
-      <button class="topbar-btn topbar-btn--save" onclick={save}>Save changes</button>
-    </div>
-  </header>
-
-  <div class="edit-scroll">
-    <form class="form" onsubmit={(e) => { e.preventDefault(); save(); }}>
-
-      <div class="row">
-        <div class="field">
-          <label class="label" for="edit-country">Country <span class="req">*</span></label>
-          <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
-          {#if errors.country}<span class="field-error">{errors.country}</span>{/if}
-        </div>
-        <div class="field">
-          <label class="label" for="edit-city">Cities <span class="req">*</span></label>
-          <div class="city-input-row">
-            <SearchInput id="edit-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
-          </div>
-          {#if errors.cities}<span class="field-error">{errors.cities}</span>{/if}
-          {#if cities.length > 0}
-            <div class="city-tags">
-              {#each cities as c}
-                <span class="city-tag">
-                  {c}
-                  <button type="button" class="city-tag-remove" onclick={() => removeCity(c)}>×</button>
-                </span>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="field">
-          <label class="label" for="edit-date">Date <span class="req">*</span></label>
-          <input id="edit-date" class="input" type="date" bind:value={date} required />
-          {#if errors.date}<span class="field-error">{errors.date}</span>{/if}
-        </div>
-        <div class="field">
-          <label class="label" for="edit-days">Days <span class="req">*</span></label>
-          <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
-          {#if errors.days}<span class="field-error">{errors.days}</span>{/if}
-        </div>
-      </div>
-
-      <div class="field">
-        <label class="label">Trip type</label>
-        <div class="toggle-row">
-          <label class="toggle-opt" class:active={tripType === 'solo'}>
-            <input type="radio" name="tripType" value="solo" bind:group={tripType} /> Solo
-          </label>
-          <label class="toggle-opt" class:active={tripType === 'friends'}>
-            <input type="radio" name="tripType" value="friends" bind:group={tripType} /> With friends
-          </label>
-          <label class="toggle-opt" class:active={tripType === 'family'}>
-            <input type="radio" name="tripType" value="family" bind:group={tripType} /> With family
-          </label>
-        </div>
-        {#if errors.tripType}<span class="field-error">{errors.tripType}</span>{/if}
-      </div>
-
-      <div class="field">
-        <label class="label">How did you get there?</label>
-        <div class="transport-grid">
-          {#each transportOptions as opt}
-            <label class="transport-opt" class:active={transport === opt.value}>
-              <input type="radio" name="transport" value={opt.value} bind:group={transport} />
-              {opt.label}
-            </label>
-          {/each}
-        </div>
-        {#if errors.transport}<span class="field-error">{errors.transport}</span>{/if}
-      </div>
-
-      <PhotoEditor {photos} onchange={(p) => (photos = p)} />
-
-      <div class="field">
-        <div class="label-row">
-          <label class="label" for="edit-memo">How was it?</label>
-          <span class="char-count" class:over={memoOverLimit}>{wordCount} / {MEMO_MAX} words</span>
-        </div>
-        <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="4" value={memo} oninput={onMemoInput}></textarea>
-      </div>
-
-
-    </form>
-  </div>
-</div>
-
-<style>
-  .field-error {
-    font-size: 11px;
-    color: #dc2626;
-    margin-top: 2px;
-  }
-
-  .edit-layout {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    background: var(--bg);
-  }
-
-  .edit-topbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-    height: 60px;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg);
-  }
-
-  .topbar-left, .topbar-right {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    min-width: 120px;
-  }
-  .topbar-right { justify-content: flex-end; }
-
-  .topbar-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--text-h);
-  }
-
-  .topbar-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-family: var(--sans);
-    font-size: 15px;
-    font-weight: 400;
-    color: var(--text);
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 10px;
-    padding: 8px 14px;
-    cursor: pointer;
-    transition: background 0.15s, color 0.15s, border-color 0.15s;
-    white-space: nowrap;
-  }
-  .topbar-btn:hover {
-    background: var(--bg-subtle);
-    border-color: var(--border);
-    color: var(--text-h);
-  }
-  .topbar-btn--save {
-    background: var(--accent);
-    color: #fff;
-    border-color: var(--accent);
-  }
-  .topbar-btn--save:hover {
-    background: var(--accent-dark);
-    border-color: var(--accent-dark);
-    color: #fff;
-  }
-
-  .edit-scroll {
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-    max-width: 560px;
-    margin: 0 auto;
-    padding: 36px 48px 80px;
-  }
-
-  .row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 14px;
-  }
-
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .label-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-  }
-
-  .label {
-    font-size: 11px;
-    font-weight: 400;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--text-sub);
-  }
-
-  .char-count {
-    font-size: 11px;
-    font-weight: 300;
-    color: var(--text-sub);
-    transition: color 0.15s;
-  }
-  .char-count.over { color: #dc2626; }
-  .input-over { border-color: #fca5a5; }
-
-  .req {
-    color: var(--accent);
-    font-size: 11px;
-  }
-
-  .input {
-    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%;
-  }
-  .input:focus { border-color: var(--accent-border); }
-
-  .textarea {
-    resize: vertical;
-    line-height: 1.6;
-  }
-
-  .toggle-row {
-    display: flex;
-    gap: 8px;
-  }
-
-  .toggle-opt {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 13px;
-    font-weight: 300;
-    color: var(--text);
-    padding: 7px 14px;
-    border-radius: 8px;
-    border: 1px solid var(--border);
-    cursor: pointer;
-    transition: border-color 0.15s, background 0.15s, color 0.15s;
-    background: var(--bg-subtle);
-  }
-  .toggle-opt input { display: none; }
-  .toggle-opt.active {
-    border-color: var(--accent-border);
-    background: var(--accent-bg);
-    color: var(--accent);
-  }
-
-  .transport-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-  }
-  .transport-opt {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    font-size: 13px;
-    font-weight: 300;
-    color: var(--text);
-    padding: 8px 10px;
-    border-radius: 8px;
-    border: 1px solid var(--border);
-    cursor: pointer;
-    transition: border-color 0.15s, background 0.15s, color 0.15s;
-    background: var(--bg-subtle);
-    white-space: nowrap;
-  }
-  .transport-opt input { display: none; }
-  .transport-opt.active {
-    border-color: var(--accent-border);
-    background: var(--accent-bg);
-    color: var(--accent);
-  }
-
-  .city-input-row {
-    display: flex;
-  }
-
-  .city-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 4px;
-  }
-  .city-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    font-weight: 300;
-    color: var(--accent);
-    background: var(--accent-bg);
-    border: 1px solid var(--accent-border);
-    border-radius: 20px;
-    padding: 3px 10px 3px 12px;
-  }
-  .city-tag-remove {
-    background: none;
-    border: none;
-    color: var(--accent);
-    font-size: 15px;
-    line-height: 1;
-    cursor: pointer;
-    padding: 0;
-    opacity: 0.6;
-    transition: opacity 0.15s;
-  }
-  .city-tag-remove:hover { opacity: 1; }
-
-</style>
--- a/src/lib/timeline/JournalSummary.svelte
+++ b/src/lib/timeline/JournalSummary.svelte
@@ -1,198 +0,0 @@
-<script>
-  /** @type {{ entries: import('../stores/journalStore.js').JournalEntry[] }} */
-  let { entries } = $props();
-
-  let stats = $derived.by(() => {
-    if (entries.length === 0) return null;
-
-    const totalDays = entries.reduce((s, e) => s + e.days, 0);
-    const countries = [...new Set(entries.map(e => e.location.country))];
-    const cities    = [...new Set(entries.flatMap(e => e.location.cities))];
-
-    const years     = entries.map(e => new Date(e.date).getFullYear());
-    const minYear   = Math.min(...years);
-    const maxYear   = Math.max(...years);
-    const yearRange = minYear === maxYear ? `${minYear}` : `${minYear} – ${maxYear}`;
-
-    return { totalDays, countries, cities, yearRange, tripCount: entries.length };
-  });
-</script>
-
-{#if stats}
-<div class="passport">
-  <!-- diagonal pattern -->
-
-  <div class="passport-body">
-    <!-- Left -->
-    <div class="passport-left">
-      <div class="passport-header">
-        <svg viewBox="0 0 32 32" fill="none" class="globe">
-          <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="1.3"/>
-          <ellipse cx="16" cy="16" rx="5.5" ry="13" stroke="currentColor" stroke-width="1.3"/>
-          <line x1="3" y1="16" x2="29" y2="16" stroke="currentColor" stroke-width="1.3"/>
-          <line x1="5" y1="9"  x2="27" y2="9"  stroke="currentColor" stroke-width="1.3"/>
-          <line x1="5" y1="23" x2="27" y2="23" stroke="currentColor" stroke-width="1.3"/>
-        </svg>
-        <span class="issuer">TRAVEL JOURNAL</span>
-      </div>
-      <div>
-        <p class="type">PASSPORT</p>
-        <p class="years">{stats.yearRange}</p>
-      </div>
-    </div>
-
-    <div class="vdivider"></div>
-
-    <!-- Right -->
-    <div class="passport-right">
-      <div class="field">
-        <span class="field-label">TRIPS</span>
-        <span class="field-value">{stats.tripCount}</span>
-      </div>
-      <div class="field">
-        <span class="field-label">COUNTRIES</span>
-        <span class="field-value">{stats.countries.length}</span>
-      </div>
-      <div class="field">
-        <span class="field-label">DAYS</span>
-        <span class="field-value">{stats.totalDays}</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- MRZ -->
-  <div class="mrz">
-    <span>P&lt;JNL{String(stats.tripCount).padStart(2,'0')}&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span>
-    <span>{stats.yearRange.replace(' – ','').replace(/\s/g,'')}{'<'.repeat(12)}{String(stats.totalDays).padStart(4,'0')}</span>
-  </div>
-</div>
-{/if}
-
-<style>
-  .passport {
-    background: #1e1b4b;
-    border-radius: 14px;
-    overflow: hidden;
-    color: #e0e7ff;
-    position: relative;
-  }
-  .passport::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: repeating-linear-gradient(
-      135deg,
-      transparent 0px, transparent 20px,
-      rgba(255,255,255,0.025) 20px, rgba(255,255,255,0.025) 21px
-    );
-    pointer-events: none;
-  }
-
-  /* Body: left + divider + right in a row */
-  .passport-body {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    padding: 20px;
-    gap: 0;
-    position: relative;
-    z-index: 1;
-  }
-
-  /* Left column */
-  .passport-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 16px;
-    padding-right: 20px;
-  }
-  .passport-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .globe {
-    width: 26px;
-    height: 26px;
-    color: #a5b4fc;
-    flex-shrink: 0;
-  }
-  .issuer {
-    font-size: 9px;
-    font-weight: 500;
-    letter-spacing: 0.18em;
-    color: #a5b4fc;
-    line-height: 1.4;
-  }
-  .type {
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.22em;
-    color: #818cf8;
-    margin-bottom: 4px;
-  }
-  .years {
-    font-size: 26px;
-    font-weight: 400;
-    color: #fff;
-    letter-spacing: -0.8px;
-    line-height: 1;
-  }
-
-  /* Divider */
-  .vdivider {
-    width: 1px;
-    background: rgba(255,255,255,0.12);
-    flex-shrink: 0;
-    align-self: stretch;
-  }
-
-  /* Right column */
-  .passport-right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 10px;
-    padding-left: 20px;
-  }
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .field-label {
-    font-size: 8px;
-    font-weight: 500;
-    letter-spacing: 0.18em;
-    color: #818cf8;
-  }
-  .field-value {
-    font-size: 22px;
-    font-weight: 400;
-    color: #fff;
-    letter-spacing: -0.5px;
-    line-height: 1;
-  }
-
-  /* MRZ strip */
-  .mrz {
-    border-top: 1px solid rgba(255,255,255,0.1);
-    padding: 9px 20px;
-    background: rgba(0,0,0,0.18);
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    position: relative;
-    z-index: 1;
-  }
-  .mrz span {
-    font-family: var(--mono);
-    font-size: 8px;
-    color: #6366f1;
-    letter-spacing: 0.06em;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-</style>
--- a/src/lib/timeline/TimelineToolbar.svelte
+++ b/src/lib/timeline/TimelineToolbar.svelte
@@ -1,40 +0,0 @@
-<script>
-  const sortOptions = [
-    { value: 'date-desc',    label: 'Newest first' },
-    { value: 'date-asc',     label: 'Oldest first' },
-    { value: 'country-asc',  label: 'Country A → Z' },
-    { value: 'country-desc', label: 'Country Z → A' },
-  ];
-
-  let { sortKey, onSort } = $props();
-</script>
-
-<div class="toolbar"></div>
-
-<style>
-  .toolbar {
-    border-bottom: 1px solid var(--border);
-    margin-bottom: 0;
-  }
-
-  select {
-    font-family: var(--sans);
-    font-size: var(--text-xs);
-    font-weight: 300;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    padding: 6px 28px 6px 12px;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    background: var(--bg-subtle);
-    color: var(--text);
-    cursor: pointer;
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2352525b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 10px center;
-    transition: border-color 0.15s, color 0.15s;
-  }
-  select:hover { border-color: var(--border-bright); color: var(--text-h); }
-  select:focus { outline: 1px solid var(--accent-border); outline-offset: 2px; }
-</style>
--- a/src/lib/timeline/detail/DeleteConfirm.svelte
+++ b/src/lib/timeline/detail/DeleteConfirm.svelte
--- a/src/lib/timeline/detail/EditForm.svelte
+++ b/src/lib/timeline/detail/EditForm.svelte
@@ -0,0 +1,217 @@
+<script>
+  import { addEntry, updateEntry } from '../../stores/entriesStore.svelte.js';
+  import PhotoEditor from './PhotoEditor.svelte';
+  import StepNav from './StepNavbar.svelte';
+  import TripBasicInfo from './TripBasicInfo.svelte';
+
+  /**
+   * entry = null  →  "new entry" mode
+   * entry = {...} →  "edit" mode
+   * @type {{ entry?: import('../shared/types.js').JournalEntry | null, initialCountry?: string, onBack: () => void }}
+   */
+  let { entry = null, initialCountry = '', onBack } = $props();
+
+  // svelte-ignore state_referenced_locally
+  let isNew = !entry;
+
+  // svelte-ignore state_referenced_locally
+  let cities     = $state([...(entry?.location.cities ?? [])]);
+  // svelte-ignore state_referenced_locally
+  let country    = $state(entry?.location.country ?? initialCountry);
+  // svelte-ignore state_referenced_locally
+  let date       = $state(entry?.date ?? new Date().toISOString().slice(0, 10));
+  // svelte-ignore state_referenced_locally
+  let days       = $state(String(entry?.days ?? ''));
+  // svelte-ignore state_referenced_locally
+  let tripType   = $state(entry?.tripType ?? '');
+  // svelte-ignore state_referenced_locally
+  let photos     = $state([...(entry?.photos ?? [])]);
+  // svelte-ignore state_referenced_locally
+  let memo       = $state(entry?.memo ?? '');
+  // svelte-ignore state_referenced_locally
+  let transport  = $state(entry?.transport ?? '');
+
+  let step = $state(1);
+
+  let errors = $state({
+    country: '', cities: '', date: '', days: '', tripType: '', transport: ''
+  });
+
+  function clearErrors() {
+    errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
+  }
+
+  const MEMO_MAX = 100;
+  let wordCount = $derived(memo.trim() === '' ? 0 : memo.trim().split(/\s+/).length);
+  let memoOverLimit = $derived(wordCount > MEMO_MAX);
+
+  function onMemoInput(e) {
+    const raw = e.currentTarget.value;
+    const words = raw.trim() === '' ? [] : raw.trim().split(/\s+/);
+    if (words.length > MEMO_MAX) {
+      memo = words.slice(0, MEMO_MAX).join(' ');
+      e.currentTarget.value = memo;
+    } else {
+      memo = raw;
+    }
+  }
+
+  function nextStep() {
+    if (step === 1) {
+      clearErrors();
+      let hasError = false;
+      if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
+      if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
+      if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
+      if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
+      if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
+      if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
+      if (hasError) return;
+    }
+    step++;
+  }
+
+  function prevStep() {
+    if (step === 1) onBack();
+    else step--;
+  }
+
+  async function save() {
+    try {
+      if (isNew) {
+        await addEntry({
+          title: `${cities.join(', ')}, ${country}`,
+          date,
+          days: Number(days),
+          tripType,
+          memo,
+          photos,
+          transport,
+          location: { cities, country },
+        });
+      } else {
+        await updateEntry(entry.id, {
+          date,
+          days: Number(days),
+          tripType,
+          transport,
+          memo,
+          photos,
+          location: { cities, country },
+        });
+      }
+      onBack();
+    } catch (err) {
+      console.error('Save failed:', err);
+    }
+  }
+
+  let next = $derived(step < 3 ? nextStep : save);
+</script>
+
+<div class="layout">
+  <StepNav {step} totalSteps={3} onback={prevStep} onnext={next} />
+
+  <div class="scroll">
+    <div class="form">
+
+      {#if step === 1}
+        <TripBasicInfo
+          bind:country bind:cities
+          bind:date bind:days bind:tripType bind:transport
+          bind:errors {isNew}
+        />
+
+      {:else if step === 2}
+        <h2 class="step-title">Photos</h2>
+        <p class="step-sub">Optional — add or update photos from your trip</p>
+        <PhotoEditor {photos} onchange={(p) => (photos = p)} />
+
+      {:else}
+        <h2 class="step-title">How was it?</h2>
+        <p class="step-sub">Optional — write a note about your trip</p>
+        <div class="field">
+          <div class="label-row">
+            <label class="label" for="edit-memo">Your notes</label>
+            <span class="char-count" class:over={memoOverLimit}>{wordCount} / {MEMO_MAX} words</span>
+          </div>
+          <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="8" value={memo} oninput={onMemoInput}></textarea>
+        </div>
+      {/if}
+
+    </div>
+  </div>
+</div>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg);
+    font-family: var(--sans);
+  }
+
+  .scroll { flex: 1; overflow-y: auto; }
+
+  .form {
+    max-width: 560px;
+    margin: 0 auto;
+    padding: 36px 48px 80px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .step-title {
+    font-size: 20px;
+    font-weight: 400;
+    color: var(--text-h);
+    letter-spacing: -0.3px;
+    margin: 0 0 2px;
+  }
+  .step-sub {
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text-sub);
+    margin: -10px 0 4px;
+  }
+
+  .field { display: flex; flex-direction: column; gap: 6px; }
+
+  .label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .label {
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-h);
+  }
+
+  .char-count { font-size: 11px; font-weight: 300; color: var(--text-sub); transition: color 0.15s; }
+  .char-count.over { color: #dc2626; }
+  .input-over { border-color: #fca5a5; }
+
+  .input {
+    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;
+  }
+  .input:focus { border-color: var(--accent-border); }
+
+  .textarea { resize: vertical; line-height: 1.6; }
+</style>
--- a/src/lib/timeline/detail/JournalDetail.svelte
+++ b/src/lib/timeline/detail/JournalDetail.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { removeEntry } from '../stores/entriesStore.svelte.js';
-  import { flagEmoji } from '../shared/countries.js';
+  import { removeEntry } from '../../stores/entriesStore.svelte.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);
@@ -84,9 +84,10 @@
          <div class="photo-grid">
            {#each entry.photos as photo, i}
              <div class="photo-cell" class:cell-wide={i === 0 && entry.photos.length > 1}>
+                <button type="button" class="photo-btn" onclick={() => lightboxSrc = photo}>
                  <img src={photo} alt=""
-                  onclick={() => lightboxSrc = photo}
-                  onerror={(e) => e.currentTarget.parentElement.classList.add('cell-broken')} />
+                    onerror={(e) => { e.currentTarget.closest('.photo-cell')?.classList.add('cell-broken'); }} />
+                </button>
              </div>
            {/each}
          </div>
@@ -254,21 +255,24 @@
    grid-column: 1 / -1;
    grid-row: span 2;
  }
-  .photo-cell img {
+  .photo-btn {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: zoom-in;
+  }
+  .photo-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
  }
-  .photo-cell:hover img { transform: scale(1.03); }
-  .photo-cell.cell-broken {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-sub);
-    font-size: 12px;
-  }
+  .photo-cell:hover .photo-btn img { transform: scale(1.03); }
+

  .no-photos {
    display: flex;
--- a/src/lib/timeline/detail/NewEntryForm.svelte
+++ b/src/lib/timeline/detail/NewEntryForm.svelte
@@ -1,24 +1,37 @@
 <script>
-  import { getEntries } from '../stores/entriesStore.svelte.js';
-  import { addEntry } from '../stores/entriesStore.svelte.js';
-  import { countryNames } from '../shared/countries.js';
-  import { getCitiesForCountry, ALL_CITIES } from '../shared/cities.js';
-  import SearchInput from '../shared/SearchInput.svelte';
+  import { journals, addEntry } from '../../stores/entriesStore.svelte.js';
+  import { get } from 'svelte/store';
+  import { flashCountry } from '../../layout/selection.svelte.js';
+  import { countryNames } from '../../shared/countries.js';
+  import { ALL_CITIES } from '../../shared/cities.js';
+  import SearchInput from '../../shared/SearchInput.svelte';
  import PhotoEditor from './PhotoEditor.svelte';
-  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';
+  import StepNav from './StepNavbar.svelte';
+  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 { 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([]);
  let cityInput = $state('');
-  let country   = $state(initialCountry);
+  let country   = $state('');
  let date      = $state(new Date().toISOString().slice(0, 10));
+
+  $effect(() => {
+    country = initialCountry;
+  });
  let days      = $state('');
  let tripType  = $state('');
  let transport = $state('');
@@ -54,11 +67,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([...Object.values(ALL_CITIES).flat(), ...allEntries.flatMap(e => e.location.cities)])].sort()
+      ? [...new Set([
+          ...(ALL_CITIES[country.trim()] ?? []),
+          ...journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []),
+        ])]
+      : []
  );

  function addCity(val) {
@@ -108,9 +123,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)
@@ -126,40 +143,19 @@
        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.';
    }
  }
+
+  let next = $derived(step < 3 ? nextStep : save);
 </script>

 <div class="layout">
-  <header class="topbar">
-    <div class="topbar-left">
-      <button class="ghost-btn" onclick={prevStep}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
-        {step === 1 ? 'Back' : 'Previous'}
-      </button>
-    </div>
-
-    <div class="steps">
-      {#each [1,2,3] as s}
-        <div class="step-dot" class:active={step === s} class:done={step > s}></div>
-      {/each}
-    </div>
-
-    <div class="topbar-right">
-      {#if step < 3}
-        <button class="save-btn" onclick={nextStep}>Next</button>
-      {:else}
-        <button class="save-btn" onclick={save} disabled={saving}>
-          {saving ? 'Saving…' : 'Save trip'}
-        </button>
-      {/if}
-    </div>
-  </header>
+  <StepNav {step} onback={prevStep} onnext={next} {saving} saveLabel="Save trip" {saveError} />

  <div class="scroll">
    <div class="form">
@@ -174,9 +170,6 @@
          {/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>
@@ -211,12 +204,12 @@
        </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>
+          <span class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></span>
          <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,7 +217,7 @@
        </div>

        <div class="field">
-          <label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
+          <span class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></span>
          <div class="transport-grid">
            {#each transportOptions as opt}
              <label class="toggle-opt" class:active={transport === opt.value}>
@@ -254,7 +247,7 @@

        {#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}
@@ -273,78 +266,6 @@
    font-family: var(--sans);
  }

-  /* topbar */
-  .topbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-    height: 52px;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg);
-  }
-  .topbar-left, .topbar-right {
-    display: flex;
-    align-items: center;
-    min-width: 110px;
-  }
-  .topbar-right { justify-content: flex-end; }
-
-  .steps {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-  .step-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--border);
-    transition: background 0.2s, transform 0.2s;
-  }
-  .step-dot.active {
-    background: var(--accent);
-    transform: scale(1.25);
-  }
-  .step-dot.done {
-    background: var(--accent);
-    opacity: 0.35;
-  }
-
-  .ghost-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-family: var(--sans);
-    font-size: 15px;
-    font-weight: 400;
-    color: var(--text);
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 10px;
-    padding: 8px 14px;
-    cursor: pointer;
-    transition: background 0.15s, color 0.15s, border-color 0.15s;
-  }
-  .ghost-btn:hover { background: var(--bg-subtle); border-color: var(--border); color: var(--text-h); }
-
-  .save-btn {
-    font-family: var(--sans);
-    font-size: 15px;
-    font-weight: 400;
-    color: #fff;
-    background: var(--accent);
-    border: 1px solid var(--accent);
-    border-radius: 10px;
-    padding: 8px 18px;
-    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; }
-
  /* scroll + form */
  .scroll { flex: 1; overflow-y: auto; }

@@ -412,22 +333,23 @@
  }
  .input:focus { border-color: var(--accent-border); }

-  .toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
+  .toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .toggle-opt {
-    display: flex; align-items: center; justify-content: center; gap: 8px;
-    font-size: 16px; font-weight: 400; color: var(--text);
-    padding: 12px 14px; border-radius: 10px;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+    font-size: 14px; font-weight: 400; color: var(--text);
+    padding: 16px 10px; border-radius: 10px;
    border: 1px solid var(--border);
    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    background: var(--bg-subtle);
    white-space: nowrap;
+    flex: 1;
  }
  .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 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-img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
+  .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+  .transport-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }

  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .tag {
@@ -454,8 +376,8 @@
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  }
  .q-text {
-    font-size: 20px;
-    font-weight: 500;
+    font-size: 14px;
+    font-weight: 400;
    color: var(--text-h);
    line-height: 1.5;
    margin: 0;
--- a/src/lib/timeline/detail/PhotoEditor.svelte
+++ b/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 }} */
@@ -7,18 +7,23 @@

  let fileInput;
  let uploading = $state(false);
+  let uploadError = $state('');

  function remove(index) {
    onchange(photos.filter((_, i) => i !== index));
+    uploadError = '';
  }

  async function addFiles(e) {
    const files = Array.from(e.currentTarget.files ?? []);
    if (!files.length) return;
    uploading = true;
+    uploadError = '';
    try {
      const urls = await Promise.all(files.map(uploadPhoto));
      onchange([...photos, ...urls]);
+    } catch (err) {
+      uploadError = err?.message ?? 'Upload failed. Check Firebase Storage rules.';
    } finally {
      uploading = false;
      e.currentTarget.value = '';
@@ -61,13 +66,17 @@
        </div>
      {/each}

-      <button type="button" class="add-cell" onclick={() => fileInput.click()} disabled={uploading}>
+      <button type="button" class="add-cell" onclick={() => fileInput.click()} disabled={uploading} aria-label="Add photo">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
          <path d="M12 5v14M5 12h14"/>
        </svg>
      </button>
    </div>
  {/if}
+
+  {#if uploadError}
+    <div class="upload-error">{uploadError}</div>
+  {/if}
 </div>

 <style>
@@ -92,23 +101,6 @@
    flex: 1;
  }

-  .add-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-family: var(--sans);
-    font-size: 12px;
-    font-weight: 300;
-    color: var(--accent);
-    background: var(--accent-bg);
-    border: 1px solid var(--accent-border);
-    border-radius: 6px;
-    padding: 4px 10px;
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-  .add-btn:hover { background: rgba(124,58,237,0.12); }
-
  .empty-zone {
    display: flex;
    flex-direction: column;
@@ -183,4 +175,15 @@
    transition: border-color 0.15s, color 0.15s;
  }
  .add-cell:hover { border-color: var(--accent-border); color: var(--accent); }
+
+  .upload-error {
+    font-size: 12px;
+    color: #ef4444;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 6px;
+    padding: 8px 10px;
+    line-height: 1.4;
+    word-break: break-word;
+  }
 </style>
--- a/src/lib/timeline/detail/StepNavbar.svelte
+++ b/src/lib/timeline/detail/StepNavbar.svelte
@@ -0,0 +1,100 @@
+<script>
+  let { step, totalSteps = 3, onback, onnext, saving = false, saveLabel = 'Save changes', saveError = '' } = $props();
+</script>
+
+<header class="topbar">
+  <div class="topbar-left">
+    <button class="ghost-btn" onclick={onback}>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
+      {step === 1 ? 'Back' : 'Previous'}
+    </button>
+  </div>
+
+  <div class="steps">
+    {#each Array(totalSteps) as _, i}
+      <div class="step-dot" class:active={step === i + 1} class:done={step > i + 1}></div>
+    {/each}
+  </div>
+
+  <div class="topbar-right">
+    <button class="save-btn" onclick={onnext} disabled={saving}>
+      {#if saving}
+        Saving…
+      {:else if step < totalSteps}
+        Next
+      {:else}
+        {saveLabel}
+      {/if}
+    </button>
+    {#if saveError}<span class="save-err">{saveError}</span>{/if}
+  </div>
+</header>
+
+<style>
+  .topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 52px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg);
+  }
+  .topbar-left, .topbar-right {
+    display: flex;
+    align-items: center;
+    min-width: 110px;
+  }
+  .topbar-right { justify-content: flex-end; }
+
+  .steps {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+  .step-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--border);
+    transition: background 0.2s, transform 0.2s;
+  }
+  .step-dot.active { background: var(--accent); transform: scale(1.25); }
+  .step-dot.done   { background: var(--accent); opacity: 0.35; }
+
+  .ghost-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--sans);
+    font-size: 15px;
+    font-weight: 400;
+    color: var(--text);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    padding: 8px 14px;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
+  }
+  .ghost-btn:hover { background: var(--bg-subtle); border-color: var(--border); color: var(--text-h); }
+
+  .save-btn {
+    font-family: var(--sans);
+    font-size: 15px;
+    font-weight: 400;
+    color: #fff;
+    background: var(--accent);
+    border: 1px solid var(--accent);
+    border-radius: 10px;
+    padding: 8px 18px;
+    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: #dc2626; white-space: nowrap; }
+</style>
--- a/src/lib/timeline/detail/TripBasicInfo.svelte
+++ b/src/lib/timeline/detail/TripBasicInfo.svelte
@@ -0,0 +1,188 @@
+<script>
+  import { countryNames } from '../../shared/countries.js';
+  import { getCitiesForCountry, ALL_CITIES } from '../../shared/cities.js';
+  import { getEntries } from '../../stores/entriesStore.svelte.js';
+  import SearchInput from '../../shared/SearchInput.svelte';
+  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 {
+    country = $bindable(''),
+    cities = $bindable([]),
+    date = $bindable(''),
+    days = $bindable(''),
+    tripType = $bindable(''),
+    transport = $bindable(''),
+    errors = $bindable({ country: '', cities: '', date: '', days: '', tripType: '', transport: '' }),
+    isNew = false,
+  } = $props();
+
+  let cityInput = $state('');
+
+  const transportOptions = [
+    { value: 'flight', label: 'Flight', img: airplaneImg },
+    { value: 'train',  label: 'Train',  img: trainImg    },
+    { value: 'bus',    label: 'Bus',    img: busImg      },
+    { value: 'car',    label: 'Car',    img: carImg      },
+    { value: 'ship',   label: 'Ship',   img: shipImg     },
+    { value: 'walk',   label: 'Walk',   img: walkImg     },
+  ];
+
+  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([...Object.values(ALL_CITIES).flat(), ...allEntries.flatMap(e => e.location.cities)])].sort()
+  );
+
+  function addCity(val) {
+    const trimmed = (val ?? cityInput).trim();
+    if (trimmed && !cities.includes(trimmed)) {
+      cities = [...cities, trimmed];
+    }
+    cityInput = '';
+  }
+
+  function removeCity(c) {
+    cities = cities.filter(x => x !== c);
+  }
+</script>
+
+<h1 class="page-headline">
+  {isNew ? 'Journal your trip!' : 'Edit your trip'}
+</h1>
+
+<div class="row">
+  <div class="field">
+    <label class="label" for="tbi-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
+    <SearchInput id="tbi-country" bind:value={country} options={countryNames} required />
+    {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
+  </div>
+  <div class="field">
+    <label class="label" for="tbi-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
+    <SearchInput id="tbi-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
+    {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
+    {#if cities.length > 0}
+      <div class="tags">
+        {#each cities as c}
+          <span class="tag">{c}<button type="button" class="tag-rm" onclick={() => removeCity(c)}>×</button></span>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<div class="row">
+  <div class="field">
+    <label class="label" for="tbi-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
+    <input id="tbi-date" class="input" type="date" bind:value={date} required />
+    {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
+  </div>
+  <div class="field">
+    <label class="label" for="tbi-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
+    <input id="tbi-days" class="input" type="number" min="1" bind:value={days} required />
+    {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
+  </div>
+</div>
+
+<div class="field">
+  <span class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></span>
+  <div class="toggle-row">
+    {#each ['solo','friends','family'] as t}
+      <label class="toggle-opt" class:active={tripType === t}>
+        <input type="radio" name="tbi-tripType" value={t} bind:group={tripType} />
+        {t === 'solo' ? '🧑 Solo' : t === 'friends' ? '👥 With friends' : '👨‍👩‍👧‍👦 With family'}
+      </label>
+    {/each}
+  </div>
+  {#if errors.tripType}<span class="ferr">{errors.tripType}</span>{/if}
+</div>
+
+<div class="field">
+  <span class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></span>
+  <div class="transport-grid">
+    {#each transportOptions as opt}
+      <label class="toggle-opt transport-opt" class:active={transport === opt.value}>
+        <input type="radio" name="tbi-transport" value={opt.value} bind:group={transport} />
+        <img src={opt.img} alt={opt.label} class="transport-img" />
+        {opt.label}
+      </label>
+    {/each}
+  </div>
+  {#if errors.transport}<span class="ferr">{errors.transport}</span>{/if}
+</div>
+
+<style>
+  .page-headline {
+    font-size: 28px;
+    font-weight: 500;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0 0 4px;
+  }
+
+  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .field { display: flex; flex-direction: column; gap: 6px; }
+
+  .label {
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-h);
+  }
+  .req { color: var(--accent); font-size: 11px; }
+  .kw  { color: var(--accent); }
+  .ferr { font-size: 13px; font-weight: 500; color: #dc2626; }
+
+  .input {
+    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;
+  }
+  .input:focus { border-color: var(--accent-border); }
+
+  .toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
+  .toggle-opt {
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    font-size: 14px; font-weight: 400; color: var(--text);
+    padding: 12px 14px; border-radius: 10px;
+    border: 1px solid var(--border);
+    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 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 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(3, 1fr); gap: 8px; }
+  .transport-opt { flex-direction: column; gap: 6px; padding: 16px 10px; }
+  .transport-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
+
+  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+  .tag {
+    display: inline-flex; align-items: center; gap: 4px;
+    font-size: 12px; font-weight: 300; color: var(--accent);
+    background: var(--accent-bg); border: 1px solid var(--accent-border);
+    border-radius: 20px; padding: 3px 10px 3px 12px;
+  }
+  .tag-rm {
+    background: none; border: none; color: var(--accent);
+    font-size: 15px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.6;
+  }
+  .tag-rm:hover { opacity: 1; }
+</style>
--- a/src/lib/timeline/view/ShareCard.svelte
+++ b/src/lib/timeline/view/ShareCard.svelte
@@ -1,7 +1,9 @@
 <script>
  import { toPng } from 'html-to-image';
+  import { getTotalCount } from '../../layout/selection.svelte.js';
+  import profileImg from '../../../assets/profile.png';

-  /** @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);
@@ -85,11 +87,59 @@
    };
  });

+  async function getFontDataUrl() {
+    // Get the actual woff2 URL the browser resolved for Bricolage Grotesque
+    for (const font of document.fonts) {
+      if (font.family.includes('Bricolage')) {
+        // font.status === 'loaded' means the browser has it
+        await font.load();
+      }
+    }
+    // Fetch the Google Fonts CSS to extract the real woff2 URL
+    const cssRes = await fetch(
+      'https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500&display=swap',
+      { headers: { 'User-Agent': 'Mozilla/5.0' } }
+    );
+    const css = await cssRes.text();
+    const match = css.match(/url\((https:\/\/fonts\.gstatic\.com[^)]+\.woff2)\)/);
+    if (!match) return null;
+    const fontRes = await fetch(match[1]);
+    const blob = await fontRes.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(blob);
+    });
+  }
+
  async function download() {
    if (!cardEl) return;
    downloading = true;
    try {
-      const dataUrl = await toPng(cardEl, { pixelRatio: 3 });
+      await document.fonts.ready;
+
+      let fontFaceRule = '';
+      try {
+        const fontData = await getFontDataUrl();
+        if (fontData) {
+          fontFaceRule = `@font-face { font-family: 'Bricolage Grotesque'; src: url('${fontData}') format('woff2'); font-weight: 100 900; font-style: normal; }`;
+        }
+      } catch {}
+
+      // Inject font as a real <style> inside the card so html-to-image clones it
+      let injected = null;
+      if (fontFaceRule) {
+        injected = document.createElement('style');
+        injected.textContent = fontFaceRule;
+        cardEl.prepend(injected);
+      }
+
+      const opts = { pixelRatio: 3 };
+      await toPng(cardEl, opts); // first pass loads resources
+      const dataUrl = await toPng(cardEl, opts);
+
+      if (injected) injected.remove();
+
      const a = document.createElement('a');
      a.download = 'my-journey.png';
      a.href = dataUrl;
@@ -135,35 +185,22 @@

        <!-- Header -->
        <div class="card-header">
-          <span class="card-brand">MAP JOURNAL</span>
+          <span class="card-brand">JOURNI</span>
          <span class="card-year">{fmtYear(stats.yearStart, stats.yearEnd)}</span>
        </div>

+        <!-- Profile -->
+        <div class="profile-wrap">
+          <img class="profile-img" src={profileImg} alt="profile" />
+        </div>
+
        <!-- Hero stat -->
        <div class="hero">
-          <p class="hero-num">{stats.totalDays}</p>
-          <p class="hero-label">days of travel</p>
+          <p class="hero-pre">You've colored</p>
+          <p class="big-num">{getTotalCount() > 0 ? Math.round((stats.countries.length / getTotalCount()) * 100) : 0}%</p>
+          <p class="hero-post">of the world map.</p>
        </div>

-        <!-- Stat grid -->
-        <div class="stat-grid">
-          <div class="stat-box">
-            <p class="stat-num">{stats.countries.length}</p>
-            <p class="stat-desc">countries</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{stats.cities.length}</p>
-            <p class="stat-desc">cities</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{stats.flightHrs}h</p>
-            <p class="stat-desc">in the air</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{Object.keys(stats.contDays).length}</p>
-            <p class="stat-desc">continents</p>
-          </div>
-        </div>

        <!-- Fun facts -->
        <div class="facts">
@@ -179,12 +216,6 @@
              <span class="fact-text">Longest stay: <strong>{stats.longest.days} days</strong> in {stats.longest.location.cities.join(', ')}</span>
            </div>
          {/if}
-          {#if stats.flightHrs > 0}
-            <div class="fact">
-              <span class="fact-icon">✈️</span>
-              <span class="fact-text">~<strong>{stats.flightHrs} hrs</strong> crossing skies</span>
-            </div>
-          {/if}
          {#if stats.favCountry && stats.favCountry[1] > 1}
            <div class="fact">
              <span class="fact-icon">❤️</span>
@@ -197,29 +228,10 @@
          </div>
        </div>

-        <!-- Continent bar -->
-        {#if Object.keys(stats.contDays).length > 0}
-          <div class="cont-section">
-            <div class="cont-bar">
-              {#each Object.entries(stats.contDays).sort((a,b)=>b[1]-a[1]) as [cont, days]}
-                <div class="cont-seg" style="flex:{days}; background: var(--cont-{cont.replace('. ','').toLowerCase().replace(' ','-')}, #818cf8)"
-                  title="{cont}: {days}d"></div>
-              {/each}
-            </div>
-            <div class="cont-legend">
-              {#each Object.entries(stats.contDays).sort((a,b)=>b[1]-a[1]) as [cont, days]}
-                <span class="cont-item">
-                  <span class="cont-dot" style="background: var(--cont-{cont.replace('. ','').toLowerCase().replace(' ','-')}, #818cf8)"></span>
-                  {cont} {days}d
-                </span>
-              {/each}
-            </div>
-          </div>
-        {/if}

        <!-- Footer -->
        <div class="card-footer">
-          <span>mapjournal.app</span>
+          <span>journi</span>
        </div>

      </div>
@@ -352,57 +364,41 @@
    letter-spacing: 0.06em;
  }

+  /* Profile */
+  .profile-wrap {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+  .profile-img {
+    width: 192px;
+    height: 192px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
  /* Hero */
  .hero {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
  }
-  .hero-num {
-    font-size: 88px;
-    font-weight: 400;
-    line-height: 1;
-    letter-spacing: -4px;
-    color: #fff;
-  }
-  .hero-label {
+  .hero-pre, .hero-post {
    font-size: 16px;
    font-weight: 300;
-    color: #a5b4fc;
+    color: rgba(255,255,255,0.6);
    letter-spacing: 0.04em;
-    margin-top: 4px;
+    margin: 0;
  }
-
-  /* Stat grid */
-  .stat-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-    margin-bottom: 24px;
-    position: relative;
-    z-index: 1;
-  }
-  .stat-box {
-    background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 10px;
-    padding: 10px 8px;
-    text-align: center;
-  }
-  .stat-num {
-    font-size: 22px;
-    font-weight: 400;
+  .big-num {
+    font-size: 88px;
+    font-weight: 500;
    color: #fff;
-    letter-spacing: -0.5px;
+    letter-spacing: -4px;
    line-height: 1;
-    margin-bottom: 4px;
-  }
-  .stat-desc {
-    font-size: 9px;
-    font-weight: 400;
-    color: rgba(255,255,255,0.4);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
+    margin: 8px 0;
  }

  /* Facts */
@@ -432,42 +428,6 @@
  }
  .fact-text strong { color: #fff; font-weight: 400; }

-  /* Continent bar */
-  .cont-section {
-    position: relative;
-    z-index: 1;
-    margin-bottom: 20px;
-  }
-  .cont-bar {
-    display: flex;
-    height: 6px;
-    border-radius: 3px;
-    overflow: hidden;
-    gap: 2px;
-    margin-bottom: 8px;
-  }
-  .cont-seg { border-radius: 3px; min-width: 4px; }
-  .cont-legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px 12px;
-  }
-  .cont-item {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 9px;
-    font-weight: 300;
-    color: rgba(255,255,255,0.5);
-    letter-spacing: 0.04em;
-  }
-  .cont-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
  /* Footer */
  .card-footer {
    margin-top: auto;
--- a/src/lib/timeline/view/SharePreview.svelte
+++ b/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 = {
@@ -42,10 +42,6 @@

  <div class="pc-header">
    <span class="pc-brand">MAP JOURNAL</span>
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pc-share-icon">
-      <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
-      <path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
-    </svg>
  </div>

  <div class="pc-hero">
@@ -83,7 +79,10 @@
    </div>
  {/if}

-  <div class="pc-cta">Share your journey →</div>
+  <svg class="pc-share-icon-corner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
+    <path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
+  </svg>

 </button>

@@ -143,7 +142,13 @@
    letter-spacing: 0.2em;
    color: #a5b4fc;
  }
-  .pc-share-icon { color: #a5b4fc; flex-shrink: 0; }
+  .pc-share-icon-corner {
+    position: absolute;
+    bottom: 14px;
+    right: 14px;
+    color: #a5b4fc;
+    z-index: 1;
+  }

  .pc-hero {
    position: relative;
@@ -222,14 +227,4 @@
    letter-spacing: 0.04em;
  }

-  .pc-cta {
-    position: relative;
-    z-index: 1;
-    font-size: 11px;
-    font-weight: 400;
-    color: #a5b4fc;
-    letter-spacing: 0.04em;
-    padding-top: 4px;
-    border-top: 1px solid rgba(255,255,255,0.08);
-  }
 </style>
--- a/src/lib/timeline/view/TimelineCard.svelte
+++ b/src/lib/timeline/view/TimelineCard.svelte
@@ -1,16 +1,28 @@
 <script>
-  import { flagEmoji } from '../shared/countries.js';
+  import { flagEmoji } from '../../shared/countries.js';
+  import default1 from '../../../assets/default-1.jpeg';
+  import default2 from '../../../assets/default-2.jpeg';
+  import default3 from '../../../assets/default-3.jpeg';

-  /** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onClick: () => void }} */
+  /** @type {{ entry: import('../shared/types.js').JournalEntry, onClick: () => void }} */
  let { entry, onClick } = $props();

+  const defaults = [default1, default2, default3];
+
  function formatDate(/** @type {string} */ iso) {
    return new Date(iso).toLocaleDateString('en-US', {
      month: 'short', day: 'numeric', year: 'numeric',
    });
  }

-  let mainPhoto   = $derived(entry.photos[0] ?? null);
+  // Pick a stable random default based on the entry id
+  function defaultPhoto(id) {
+    let hash = 0;
+    for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
+    return defaults[hash % defaults.length];
+  }
+
+  let mainPhoto   = $derived(entry.photos[0] ?? defaultPhoto(entry.id));
  let thumbPhotos = $derived(entry.photos.slice(1, 4));
  let extraCount  = $derived(entry.photos.length > 4 ? entry.photos.length - 4 : 0);

@@ -29,10 +41,11 @@
  <div class="v-dot" aria-hidden="true"></div>

  <div class="v-content">
-    <!-- Country above card -->
+    <!-- Country + cities above card -->
    <div class="above-card">
      <span class="flag">{flagEmoji(entry.location.country)}</span>
      <span class="country-name">{entry.location.country}</span>
+      <span class="city-inline">· {entry.location.cities.join(', ')}</span>
    </div>

    <!-- Card -->
@@ -40,36 +53,10 @@
      onclick={onClick}
      onkeydown={(e) => e.key === 'Enter' && onClick()}>

-      <!-- Trip badge — top-right of card, outside photo -->
-      <span class="trip-badge trip-badge--{entry.tripType}">
-        {entry.tripType === 'solo' ? 'Solo' : entry.tripType === 'family' ? 'Family' : 'Friends'}
-      </span>
-
      <!-- Photos -->
      <div class="photo-grid" class:has-thumbs={thumbPhotos.length > 0}>
        <div class="photo-main">
-          {#if mainPhoto}
-            <img src={mainPhoto} alt="" loading="lazy"
-              onerror={(e) => {
-                e.currentTarget.style.display = 'none';
-                e.currentTarget.nextElementSibling.style.display = 'flex';
-              }} />
-            <div class="photo-fallback" style="display:none">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
-                <rect x="3" y="3" width="18" height="18" rx="3"/>
-                <circle cx="8.5" cy="8.5" r="1.5"/>
-                <path d="M21 15l-5-5L5 21"/>
-              </svg>
-            </div>
-          {:else}
-            <div class="photo-fallback">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
-                <rect x="3" y="3" width="18" height="18" rx="3"/>
-                <circle cx="8.5" cy="8.5" r="1.5"/>
-                <path d="M21 15l-5-5L5 21"/>
-              </svg>
-            </div>
-          {/if}
+          <img src={mainPhoto} alt="" loading="lazy" />
        </div>

        {#if thumbPhotos.length > 0}
@@ -99,18 +86,17 @@

      <!-- Info bar -->
      <div class="card-info">
-        <span class="city">{entry.location.cities.join(', ')}</span>
+        <span class="days-label">{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
        <div class="meta">
          {#if entry.transport}
            <span class="transport-chip transport-chip--{entry.transport}">
              {@html transportIcons[entry.transport] ?? ''}
              {transportLabel}
            </span>
-            <span class="dot-sep">·</span>
          {/if}
-          <span>{formatDate(entry.date)}</span>
-          <span class="dot-sep">·</span>
-          <span>{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
+          <span class="trip-badge trip-badge--{entry.tripType}">
+            {entry.tripType === 'solo' ? 'Solo' : entry.tripType === 'family' ? 'Family' : 'Friends'}
+          </span>
        </div>
      </div>

@@ -172,6 +158,14 @@
    color: var(--text-h);
    letter-spacing: -0.2px;
  }
+  .city-inline {
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text-sub);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }

  /* ── Card ── */
  .entry-card {
@@ -191,22 +185,18 @@
    transform: translateY(-2px);
  }

-  /* ── Trip badge — absolute top-right of card ── */
+  /* ── Trip badge — inline in info bar ── */
  .trip-badge {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 2;
    font-size: 11px;
-    font-weight: 300;
-    padding: 3px 10px;
+    font-weight: 400;
+    padding: 2px 8px;
    border-radius: 20px;
-    letter-spacing: 0.04em;
-    backdrop-filter: blur(6px);
+    letter-spacing: 0.03em;
+    white-space: nowrap;
  }
-  .trip-badge--solo    { background: rgba(245,158,11,0.85); color: #fff; }
-  .trip-badge--friends { background: rgba(124,58,237,0.85); color: #fff; }
-  .trip-badge--family  { background: rgba(16,185,129,0.85); color: #fff; }
+  .trip-badge--solo    { background: rgba(245,158,11,0.12); color: #b45309; border: 1px solid rgba(245,158,11,0.25); }
+  .trip-badge--friends { background: rgba(124,58,237,0.07); color: #7c3aed; border: 1px solid rgba(124,58,237,0.2); }
+  .trip-badge--family  { background: rgba(16,185,129,0.08); color: #059669; border: 1px solid rgba(16,185,129,0.2); }

  /* ── Photo grid — fixed height, always consistent ── */
  .photo-grid {
@@ -294,16 +284,12 @@
    padding: 10px 14px;
    background: var(--bg);
    border-top: 1px solid var(--border);
-    gap: 8px;
    min-height: 44px;
  }
-  .city {
-    font-size: 13px;
+  .days-label {
+    font-size: 12px;
    font-weight: 300;
-    color: var(--text);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    color: var(--text-sub);
  }
  .meta {
    display: flex;
--- a/src/lib/timeline/view/TimelineView.svelte
+++ b/src/lib/timeline/view/TimelineView.svelte
@@ -1,14 +1,13 @@
 <script>
-  import { getEntries } from '../stores/entriesStore.svelte.js';
-  import TimelineToolbar from './TimelineToolbar.svelte';
+  import { getEntries } from '../../stores/entriesStore.svelte.js';
  import TimelineCard from './TimelineCard.svelte';
-  import JournalDetail from './JournalDetail.svelte';
-  import EditForm from './EditForm.svelte';
-  import NewEntryForm from './NewEntryForm.svelte';
+  import JournalDetail from '../detail/JournalDetail.svelte';
+  import EditForm from '../detail/EditForm.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 +49,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 +64,7 @@
      />
    </div>
  {:else}
-    <div class="right-panel">
-      <div class="center-col">
+    <div class="list-view">
      <div class="page-header">
        <h1 class="page-title">My Journey</h1>
        <button class="new-btn" onclick={() => { view = 'new'; }}>
@@ -77,24 +75,18 @@
        </button>
      </div>

-        {#if sortedEntries.length > 0}
-          <div class="share-row">
-            <SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
-          </div>
-        {/if}
-
-        <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
-
+      <div class="two-col">
+        <div class="left-col">
          {#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 class="sort-select" bind:value={sortKey}>
+                <option value="date-desc">Newest first</option>
+                <option value="date-asc">Oldest first</option>
+                <option value="country-asc">Country A → Z</option>
+                <option value="country-desc">Country Z → A</option>
              </select>
            </div>
            <ol class="v-list">
@@ -113,6 +105,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 +131,51 @@
    overflow: hidden;
  }

-  /* ── Right panel ── */
-  .right-panel {
+  /* ── List view wrapper (scrollable) ── */
+  .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 ── */
-  .center-col {
-    max-width: 680px;
-    width: 100%;
-    margin: 0 auto;
-    padding: 48px 48px 80px;
-    box-sizing: border-box;
+  .right-col {
+    width: 260px;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
  }

-  .share-row {
-    margin-bottom: 24px;
+  @media (max-width: 900px) {
+    .right-col { display: none; }
  }

  @media (max-width: 760px) {
-    .center-col {
-      padding: 32px 24px 60px;
-    }
+    .list-view { padding: 32px 24px 60px; }
  }

  /* ── Detail view ── */
@@ -270,38 +289,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>
--- a/src/lib/world-map/JourneyView.svelte
+++ b/src/lib/world-map/JourneyView.svelte
@@ -3,28 +3,21 @@
  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/entriesStore.svelte.js';
+  import { getUserProfile } from '../auth/userStore.svelte.js';
+  import { nameToId } from '../shared/countries.js';
+  import airplaneImg from '../../assets/airplane-animation.png';

  let { onclose, onprogress, mode = 'map', onmodechange } = $props();

-  const HOME_CODE = '203';
+  const HOME_CODE = $derived(nameToId[getUserProfile()?.homeCountry] ?? null);

-  const MOCK_TRIPS = [
-    { countryName: 'Japan', countryCode: '392', date: '2024-03-15', city: 'Tokyo' },
-    { countryName: 'France', countryCode: '191', date: '2024-06-20', city: 'Paris' },
-    { countryName: 'Spain', countryCode: '724', date: '2024-09-10', city: 'Barcelona' },
-    { countryName: 'United States', countryCode: '840', date: '2025-01-05', city: 'New York' },
-    { countryName: 'Thailand', countryCode: '764', date: '2025-04-18', city: 'Bangkok' },
-    { countryName: 'Australia', countryCode: '036', date: '2025-08-22', city: 'Sydney' },
-    { 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 = 26;

  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 +31,7 @@
    '850': '840', '876': '250',
  };

-  function effId(d) {
-    return TERRITORY_PARENT[d.id] || d.id;
-  }
+  function effId(d) { return TERRITORY_PARENT[d.id] || d.id; }

  let frameEl;
  let svg, gBase, gCountries, gAnim, pathFn, projection;
@@ -63,80 +54,26 @@

  function computeArc(p1, p2) {
    const interp = d3.geoInterpolate(p1, p2);
-    const steps = 80;
    const raw = [];
-
-    for (let i = 0; i <= steps; i++) {
-      const t = i / steps;
-      const geo = interp(t);
-      const pt = projection(geo);
+    for (let i = 0; i <= 80; i++) {
+      const t = i / 80;
+      const pt = projection(interp(t));
      if (!pt) continue;
      raw.push({ t, x: pt[0], y: pt[1] });
    }
-
    if (raw.length < 2) return [];
-
-    const first = raw[0];
-    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 first = raw[0], last = raw[raw.length - 1];
+    const dist = Math.sqrt((last.x-first.x)**2 + (last.y-first.y)**2);
    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 => {
-      if (isCancelled) { resolve(); return; }
-      const id = setTimeout(resolve, ms);
-    });
+    return new Promise(resolve => { if (isCancelled) { resolve(); return; } setTimeout(resolve, ms); });
  }

  function setupProjection(width, height) {
@@ -168,32 +105,21 @@
    };

    if (mode === 'globe') {
-      gBase.append('path')
-        .attr('class', 'sphere')
-        .datum({ type: 'Sphere' })
-        .attr('d', pathFn)
-        .attr('fill', '#a4c8e0')
-        .attr('stroke', '#8b9bb0')
-        .attr('stroke-width', 1.5);
-
+      gBase.append('path').attr('class', 'sphere').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))
-      .join('path')
-      .attr('d', pathFn)
-      .attr('fill', fillFn)
+      .data(countriesData, d => effId(d)).join('path')
+      .attr('d', pathFn).attr('fill', fillFn)
      .attr('stroke', mode === 'globe' ? '#4a6a8c' : '#d4d4d4')
      .attr('stroke-width', mode === 'globe' ? 0.3 : 0.5);

-    if (mode === 'map') {
-      renderMicrostates();
-    }
+    if (mode === 'map') 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;
@@ -203,71 +129,57 @@
    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')
-          .attr('class', 'micro-state-j')
-          .datum(d)
-          .attr('cx', cx)
-          .attr('cy', cy)
-          .attr('r', 2)
-          .attr('fill', fillFn(d))
-          .attr('stroke', '#94a3b8')
-          .attr('stroke-width', 0.5);
+        gBase.append('circle').attr('class', 'micro-state-j').datum(d)
+          .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') {
-      gBase.select('.sphere').attr('d', pathFn);
-    }
+    if (mode === 'globe') 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 to = [lon, lat];
-
-      const interpolate = d3.geoInterpolate(from, to);
-
+      const interp = d3.geoInterpolate([-current[0], -current[1]], [lon, lat]);
      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) => {
-      const steps = pts.length - 1;
+    return new Promise(resolve => {
      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 +189,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) => {
-      const steps = geoPts.length - 1;
-
+    return new Promise(resolve => {
      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 visible = geoPts.slice(0, count);
-        const screenPts = [];
-        for (const p of visible) {
-          const pt = projection(p);
-          if (pt) screenPts.push(pt);
-        }
-
-        if (screenPts.length >= 2) {
-          el.attr('d', lineGen(screenPts));
-        }
-
+        const count = Math.max(2, Math.floor(t * (geoPts.length - 1)) + 1);
+        const screenPts = geoPts.slice(0, count).map(p => projection(p)).filter(Boolean);
+        if (screenPts.length >= 2) el.attr('d', lineGen(screenPts));
        if (screenPts.length > 0) {
          const last = screenPts[screenPts.length - 1];
          let angle = 0;
@@ -315,323 +211,165 @@
          }
          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 = 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 outFlip = 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);
+    const { el: outEl, tip: outTip } = createArcEl(iconSrc);
+    await animateIncrementalPath(outEl, outTip, pts, 2500, pts[pts.length-1][0] < pts[0][0]);
    if (isCancelled) return;
-
-    outEl.remove();
-    outTip.remove();
-
-    const targetPath = countryPaths.filter(d => effId(d) === destCode);
-    targetPath.transition().duration(500).attr('fill', VISITED_COLOR);
+    outEl.remove(); outTip.remove();
+    countryPaths.filter(d => effId(d) === destCode).transition().duration(500).attr('fill', VISITED_COLOR);
    visitedCodes.add(destCode);
-    gBase.selectAll('.micro-state-j')
-      .filter(d => effId(d) === destCode)
-      .transition().duration(500)
-      .attr('fill', VISITED_COLOR);
-
+    gBase.selectAll('.micro-state-j').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 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);
+    const { el: retEl, tip: retTip } = createArcEl(iconSrc);
+    await animateIncrementalPath(retEl, retTip, revPts, 2200, revPts[revPts.length-1][0] < revPts[0][0]);
    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 = [];
-    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 geoPts = Array.from({ length: 81 }, (_, i) => interp(i / 80));
+    const dur = Math.round(1500 + d3.geoDistance(homeCentroid, destCentroid) * 2500);
    const lineGen = d3.line().curve(d3.curveBasis);
-
-    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 { el: outEl, tip: outTip } = createArcEl(iconSrc);
    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();
-
-    const targetPath = countryPaths.filter(d => effId(d) === destCode);
-    targetPath.transition().duration(500).attr('fill', VISITED_COLOR);
+    outEl.remove(); outTip.remove();
+    countryPaths.filter(d => effId(d) === destCode).transition().duration(500).attr('fill', VISITED_COLOR);
    visitedCodes.add(destCode);
-
    await delay(600);
    if (isCancelled) return;
-
    const revGeoPts = [...geoPts].reverse();
-
-    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 { el: retEl, tip: retTip } = createArcEl(iconSrc);
    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;
-    isFinished = false;
-    isCancelled = false;
-    visitedCodes = new Set();
-
-    const width = frameEl.clientWidth;
-    const height = frameEl.clientHeight;
+    isPlaying = true; isFinished = false; isCancelled = false; visitedCodes = new Set();

+    const width = frameEl.clientWidth, height = frameEl.clientHeight;
    svg.selectAll('*').remove();
-    gBase = svg.append('g');
-    gCountries = svg.append('g');
-    gAnim = svg.append('g');
-
+    gBase = 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 total = trips.length;
+    const nameToId = Object.fromEntries(Object.entries(featuresById).filter(([,f]) => f.properties?.name).map(([id, f]) => [f.properties.name, id]));
+    const entries = get(journals).slice().sort((a, b) => b.date.localeCompare(a.date));
+    const trips = 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);

-    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;
-
-      const label = `${trip.city}, ${trip.countryName}`;
-      if (onprogress) onprogress({ index: i + 1, total, label });
-
-      await animateTrip(trip.countryCode, destFeature);
+      if (onprogress) onprogress({ index: i + 1, total: trips.length, label: `${trip.city}, ${trip.countryName}` });
+      await animateTrip(trip.countryCode, destFeature, trip.transport);
    }

    if (!isCancelled && myId === animId) {
-      isFinished = true;
-      isPlaying = false;
+      isFinished = true; isPlaying = false;
      if (onprogress) onprogress({ index: trips.length, total: trips.length, label: 'Journey complete!' });
-    } else if (myId === animId) {
-      isPlaying = false;
-    }
-  }
-
-  function stopJourney() {
-    isCancelled = true;
-    isPlaying = false;
-  }
-
-  function replay() {
-    stopJourney();
-    setTimeout(() => startJourney(), 100);
+      setTimeout(() => close(), 2500);
+    } else if (myId === animId) { isPlaying = false; }
  }

+  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 height = frameEl.clientHeight;
-
+    const width = frameEl.clientWidth, 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';
-    });
-
-    for (const f of countriesData) {
-      featuresById[effId(f)] = f;
-    }
-
+    countriesData.forEach(f => { if (!f.id) f.id = 'XK'; });
+    for (const f of countriesData) featuresById[effId(f)] = f;
    homeFeature = featuresById[HOME_CODE];

-    svg = d3.select(frameEl)
-      .append('svg')
-      .attr('width', width)
-      .attr('height', height)
-      .style('cursor', 'default');
-
-    gBase = svg.append('g');
-    gCountries = svg.append('g');
-    gAnim = svg.append('g');
-
+    svg = d3.select(frameEl).append('svg').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(s).translate([width / 2, height * 0.70]);
+          projection.scale(projection.scale() * 1.5).translate([width / 2, height * 0.70]);
        } else {
          const size = Math.min(width, height) * 0.92;
-          projection = d3.geoOrthographic()
-            .rotate(prevProj.rotate())
-            .fitSize([size, size], { type: 'Sphere' })
-            .translate([width / 2, height / 2]);
+          projection = d3.geoOrthographic().rotate(prevRotate).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}
-      Journey complete!
-    {:else if currentDateLabel}
-      {currentDateLabel}
-    {/if}
+    {#if isFinished}Journey complete!{:else if currentDateLabel}{currentDateLabel}{/if}
  </div>
  <div class="control-bar">
       <button class="control-btn" onclick={replay}>
@@ -647,67 +385,28 @@
 </div>

 <style>
-  .journey-frame {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    background: #a4c8e0;
-  }
-
-  .journey-frame.globe-mode {
-    background: #ffffff;
-  }
-
-  .journey-frame :global(svg) {
-    display: block;
-  }
+  .journey-frame { width: 100%; height: 100%; overflow: hidden; position: relative; background: #a4c8e0; }
+  .journey-frame.globe-mode { background: #ffffff; }
+  .journey-frame :global(svg) { display: block; }

  .top-label {
-    position: absolute;
-    top: 16px;
-    left: 16px;
-    z-index: 10;
-    background: rgba(0,0,0,0.65);
-    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;
+    position: absolute; top: 16px; left: 16px; z-index: 10;
+    background: rgba(0,0,0,0.65); 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;
  }

  .control-bar {
-    position: absolute;
-    bottom: 24px;
-    right: 24px;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: flex-end;
+    position: absolute; bottom: 24px; right: 24px; z-index: 10;
+    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  }

  .control-btn {
-    padding: 10px 24px;
-    border: none;
-    border-radius: 24px;
-    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;
+    padding: 10px 24px; border: none; border-radius: 24px;
+    background: #8b5cf6; color: #fff; font-size: 14px; font-weight: 600;
+    cursor: pointer; transition: background 0.15s ease; white-space: nowrap; font-family: inherit;
  }
+  .control-btn:hover { background: #7c3aed; }
+  .control-btn:active { transform: scale(0.96); }
 </style>
--- a/src/lib/world-map/WorldMap.svelte
+++ b/src/lib/world-map/WorldMap.svelte
@@ -3,7 +3,11 @@
  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 { nameToId } from '../shared/countries.js';
+  import homeIconUrl from '../../assets/home.png';
+  import crayonCursorUrl from '../../assets/logo-cursor.png';

  let { onCountryClick = (_name) => {} } = $props();

@@ -60,21 +64,24 @@

  function countryColor(d, sel, homeCode) {
    const id = effId(d);
-    if (!sel.has(id)) return UNVISITED_COLOR;
    if (id === homeCode) return HOME_COLOR;
+    if (!sel.has(id)) return UNVISITED_COLOR;
    return VISITED_COLOR;
  }

  function countryHoverColor(d, sel, homeCode) {
    const id = effId(d);
-    if (!sel.has(id)) return UNVISITED_COLOR_HOVER;
    if (id === homeCode) return HOME_COLOR_HOVER;
+    if (!sel.has(id)) return UNVISITED_COLOR_HOVER;
    return VISITED_COLOR_HOVER;
  }

  let frameEl;
-  let _paths = null;
+  let _paths = $state(null);
  let _g = null;
+  let _pathFn = null;
+  let _countries = null;
+

  function fitProjection(proj, w, h) {
    proj.fitSize([w, h], { type: 'Sphere' });
@@ -82,9 +89,14 @@
    proj.scale(s).translate([w / 2, h * 0.70]);
  }

+  function getHomeCode() {
+    const name = getUserProfile()?.homeCountry;
+    return name ? (nameToId[name] ?? null) : null;
+  }
+
  function updateAllFills() {
    const sel = getSelected();
-    const hc = getHomeCountryCode();
+    const hc = getHomeCode();
    if (!_paths || !_g) return;
    _paths.attr('fill', d => countryColor(d, sel, hc));
    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
@@ -92,6 +104,45 @@

  $effect(updateAllFills);

+  function placeHomeMarker() {
+    if (!_g || !_pathFn || !_countries) return;
+    _g.selectAll('.home-marker').remove();
+    const name = getUserProfile()?.homeCountry;
+    if (!name) return;
+    const found = _countries.find(f => f.properties.name === name);
+    if (!found) return;
+    const [cx, cy] = _pathFn.centroid(found);
+    if (isNaN(cx) || isNaN(cy)) return;
+    const SIZE = 14;
+    _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(placeHomeMarker);
+
+  $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 +159,9 @@
      if (!f.id) f.id = 'XK';
    });

+    _pathFn = path;
+    _countries = countries;
+
    const sovereignIds = new Set(countries.map(f => effId(f)));
    setTotalCount(sovereignIds.size);

@@ -123,34 +177,23 @@
      .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, hc));
+          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, getHomeCode()));
          tooltip.style('display', 'block').text(d.properties.name);
        })
        .on('mousemove', (event) => {
          const [x, y] = d3.pointer(event, frameEl);
-          tooltip.style('left', (x + 10) + 'px').style('top', (y - 28) + 'px');
+          tooltip.style('left', (x + 22) + 'px').style('top', (y - 28) + 'px');
        })
        .on('mouseleave', (event, d) => {
          const s = getSelected();
-          const hc = getHomeCountryCode();
-          d3.select(event.currentTarget).attr('fill', countryColor(d, s, hc));
+          d3.select(event.currentTarget).attr('fill', countryColor(d, s, getHomeCode()));
          tooltip.style('display', 'none');
        });
    }
@@ -172,14 +215,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(), getHomeCode()))
            .attr('stroke', '#94a3b8')
            .attr('stroke-width', 0.5);
          attachEvents(c);
@@ -188,6 +230,7 @@
    }

    renderMicrostates();
+    placeHomeMarker();

    const zoom = d3.zoom()
      .scaleExtent([1, 32])
@@ -211,8 +254,9 @@
        fitProjection(projection, width, height);
        const countryPaths = _g.selectAll('path');
        countryPaths.attr('d', path);
-        updateFill(countryPaths);
+        updateAllFills();
        renderMicrostates();
+        placeHomeMarker();
      }
    });

@@ -225,7 +269,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 +282,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) {
--- a/storage.rules
+++ b/storage.rules
@@ -0,0 +1,9 @@
+rules_version = '2';
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{allPaths=**} {
+      allow read: if true;
+      allow write: if request.auth != null;
+    }
+  }
+}
Author	SHA1	Message	Date
20254236	522e41cb79	Update README.md	2026-06-17 02:24:15 +00:00
Tomas Horsky	caaae887f9	fix: animation bug fix	2026-06-17 11:21:20 +09:00
Tomas Horsky	3ae1b25b0c	Merge branch 'main' of https://git.prototyping.id/20256426/Map-Jurnal	2026-06-17 09:00:54 +09:00
Tomas Horsky	e6bc251386	final cleanup	2026-06-17 09:00:20 +09:00
20254236	4e1981e1f6	Update README.md	2026-06-16 17:15:17 +00:00
20256426	59b89fb276	Aktualizovat README.md	2026-06-16 16:50:57 +00:00
20256426	5231b0ead7	update README	2026-06-16 16:50:25 +00:00
Tomas Horsky	6fc0172ec3	updated README	2026-06-17 01:45:32 +09:00
20256426	c27200d9cd	Aktualizovat README.md	2026-06-16 16:26:42 +00:00
Tomas Horsky	8fbe40f178	fix; timeline sorting	2026-06-17 01:20:32 +09:00
Tomas Horsky	8b52437655	Merge branch 'main' of https://git.prototyping.id/20256426/Map-Jurnal	2026-06-17 01:15:52 +09:00
Tomas Horsky	5e36f6e140	bug fix	2026-06-17 01:15:43 +09:00
20256426	2f49c35128	Aktualizovat README.md	2026-06-16 16:13:51 +00:00
Tomas Horsky	3e43d09723	published the website	2026-06-17 01:04:45 +09:00
20256426	0f1e43d82d	Aktualizovat README.md	2026-06-16 15:54:33 +00:00
20256426	944b73d215	Aktualizovat README.md	2026-06-16 15:54:00 +00:00
20256426	f22b0f1b28	Aktualizovat README.md	2026-06-16 15:49:34 +00:00
20256426	5e943df6ef	Aktualizovat README.md	2026-06-16 15:46:31 +00:00
Tomas Horsky	cbdf489f1b	add README	2026-06-17 00:32:23 +09:00
Tomas Horsky	e86ec2bbb9	final refactoring	2026-06-17 00:31:56 +09:00
Tomas Horsky	2ecd3ca81d	updating gitignore	2026-06-16 23:28:28 +09:00
Tomas Horsky	1743e7fcbe	added saving photos to firebase	2026-06-16 23:18:20 +09:00
Tomas Horsky	d614ddb322	fix: UI world map	2026-06-16 22:31:17 +09:00
Haeri Kim	ed415a78a1	added default images for card ui & fixed ui	2026-06-16 21:55:29 +09:00
Haeri Kim	9109d6a861	feat: 3-step edit form, share card redesign, map fixes - EditForm: refactored to 3-step flow matching NewEntryForm (details → photos → memo), transport icons with bigger images - ShareCard: profile image, "You've colored X% of the world map" hero stat, removed stat boxes and continent bar, font embedding fix for PNG export, renamed brand to Journi - JourneyView: auto-close after journey complete - WorldMap: removed home marker icon, fix home marker reposition on resize Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-16 21:38:29 +09:00
Haeri Kim	5a95fccd70	fix: use logo-signin, consolidate plane asset, fix home marker on resize - Sign-in page now uses logo-signin.png - World map animation uses airplane.png; remove unused animationPlane.png - Re-project home marker on map resize so it stays correct when stats panel collapses Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-16 21:01:26 +09:00
Tomas Horsky	8d36c3faca	after merge fix	2026-06-16 20:14:45 +09:00
haerikimmm	b518016a21	fix: home country always purple regardless of visited status	2026-06-16 19:43:54 +09:00
haerikimmm	665472b281	fix: color home country purple on world map	2026-06-16 19:42:42 +09:00
haerikimmm	2226a483c5	chore: reorganize timeline into view/ and detail/ folders, move home.png to assets/	2026-06-16 19:41:08 +09:00
haerikimmm	93636b6968	chore: remove unused duplicate files	2026-06-16 19:38:38 +09:00
haerikimmm	5718bca963	fix: constrain timeline content width with side margins	2026-06-16 19:34:49 +09:00
haerikimmm	6f41f6e53e	fix: proper 2-column layout with scroll, header above columns, side padding	2026-06-16 19:33:50 +09:00
haerikimmm	d157055ab7	fix: journal tab name, 2-column layout with SharePreview on right	2026-06-16 19:32:34 +09:00
haerikimmm	76d7e815c3	style: question-form labels for trip detail fields	2026-06-16 19:26:05 +09:00
haerikimmm	c7cf053105	feat: static city suggestions by country, fix city dropdown, coloring animation on save	2026-06-16 19:21:26 +09:00
haerikimmm	a7079c1f18	feat: add home marker on map, crayon cursor in worldmap, remove logo from topbar	2026-06-16 19:01:59 +09:00
haerikimmm	cf9717149f	style home country picker page with home image and app theme	2026-06-16 18:40:51 +09:00
haerikimmm	ec4eea0977	fix save journal button and reactive city filtering by country	2026-06-16 18:32:48 +09:00
haerikimmm	92fae28383	merge globe 3D view with transport icons and real journal data	2026-06-16 17:49:07 +09:00
haerikimmm	b3c5fbe3dd	fix: add journalStore shim and sync journals writable store with entriesStore	2026-06-16 17:42:48 +09:00
haerikimmm	8e9b40cc69	merge remote main: keep our journal-driven selection and transport animation	2026-06-16 17:32:11 +09:00
haerikimmm	d389b496b4	merge feature/timeline into main	2026-06-16 17:27:19 +09:00
haerikimmm	bf2700efb7	add animated logo and slogan to login page	2026-06-16 17:26:18 +09:00
Tomas Horsky	0a823948df	updated comunication with firebase	2026-06-16 16:18:28 +09:00
haerikimmm	d2fb40f692	added logo image and slogan to sign in page	2026-06-16 15:20:07 +09:00