Merge branch 'feature/timeline' into main

2026-06-15 12:29:36 +09:00
parent 70352be01b 6cee6095ed
commit 611cc0b626
22 changed files with 1880 additions and 519 deletions
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -3,6 +3,7 @@
  "configurations": [
    {
      "name": "Map-Jurnal",
+      "cwd": "/Users/haerikim/Desktop/Map-Jurnal",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 5173,
--- a/.env
+++ b/.env
@@ -0,0 +1,6 @@
+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/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Map Journal</title>
+    <title>Journi</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "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"
      },
@@ -747,14 +748,14 @@
      }
    },
    "node_modules/@napi-rs/wasm-runtime": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
-      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
-        "@tybys/wasm-util": "^0.10.2"
+        "@tybys/wasm-util": "^0.10.1"
      },
      "funding": {
        "type": "github",
@@ -814,12 +815,6 @@
      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
      "license": "BSD-3-Clause"
    },
-    "node_modules/@protobufjs/inquire": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.2.tgz",
-      "integrity": "sha512-pa0vFRuws4wkvaXKK1uXZMAwAX4/t8ANaJo45iw/oQHNQ9q5xUzwgFmVJGXiga2BeN+zpX7Vf9vmsiIa2J+MUw==",
-      "license": "BSD-3-Clause"
-    },
    "node_modules/@protobufjs/path": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
@@ -931,9 +926,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -951,9 +943,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -971,9 +960,6 @@
        "ppc64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -991,9 +977,6 @@
        "s390x"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1011,9 +994,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1031,9 +1011,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1865,6 +1842,12 @@
        "node": "6.* || 8.* || >= 10.*"
      }
    },
+    "node_modules/html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
+      "license": "MIT"
+    },
    "node_modules/http-parser-js": {
      "version": "0.5.10",
      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
@@ -2060,9 +2043,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -2084,9 +2064,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -2108,9 +2085,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -2132,9 +2106,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -2299,9 +2270,9 @@
      }
    },
    "node_modules/protobufjs": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.3.tgz",
-      "integrity": "sha512-+k0vdJKNdW+Vu+dYe8tZA/VvQb6XKNWexC6URwBFXxNnjLJz9nQJCemGyNgRAWD+B7+nGNc9qMPGwcD7s4nzUw==",
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.4.tgz",
+      "integrity": "sha512-RJJPTTpvFfHcWLkIa2JFWK4XvtSzS0yEWDmunqHXli1h3JlkbcQZXDZdcWxv+JK3Xsl5/UFDPZ0iGm7DAengYw==",
      "hasInstallScript": true,
      "license": "BSD-3-Clause",
      "dependencies": {
@@ -2311,7 +2282,6 @@
        "@protobufjs/eventemitter": "^1.1.1",
        "@protobufjs/fetch": "^1.1.1",
        "@protobufjs/float": "^1.0.2",
-        "@protobufjs/inquire": "^1.1.2",
        "@protobufjs/path": "^1.1.2",
        "@protobufjs/pool": "^1.1.0",
        "@protobufjs/utf8": "^1.1.1",
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "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/src/App.svelte
+++ b/src/App.svelte
@@ -8,9 +8,10 @@
  import StatsPanel from './lib/world-map/StatsPanel.svelte';
  import TimelineView from './lib/timeline/TimelineView.svelte';

-  let screen = $state('worldmap');
  let journeyActive = $state(false);
  let journeyProgress = $state(null);
+  let inDetail = $state(false);
+  let pendingCountry = $state('');

  function onNavigate(s) {
    screen = s;
@@ -30,6 +31,11 @@
    journeyProgress = p;
  }

+  function handleCountryClick(name) {
+    pendingCountry = name;
+    screen = 'timeline';
+  }
+
  $effect(() => {
    initAuth();
  });
@@ -44,21 +50,25 @@
    <span class="loading-text">Loading...</span>
  </div>
 {:else}
-  <Layout {screen} {onNavigate}>
+  <Layout {screen} {onNavigate} hideTopBar={inDetail}>
    {#if screen === 'worldmap'}
      <div class="worldmap-page">
        <div class="map-area">
          {#if journeyActive}
            <JourneyView onclose={endJourney} onprogress={onJourneyProgress} />
          {:else}
-            <WorldMap />
+            <WorldMap onCountryClick={handleCountryClick} />
            <button class="journey-play-btn" onclick={startJourney}>▶</button>
          {/if}
        </div>
        <StatsPanel />
      </div>
    {:else}
-      <TimelineView />
+      <TimelineView
+        onDetailChange={(v) => (inDetail = v)}
+        {pendingCountry}
+        onNewEntryClear={() => (pendingCountry = '')}
+      />
    {/if}
  </Layout>

@@ -67,6 +77,7 @@
  {:else if needsCountry}
    <CountryPicker />
  {/if}
+  {/if}
 {/if}

 <style>
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200;12..96,300;12..96,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500&display=swap');

 /* ── Color tokens ─────────────────────────────────────────── */
 :root {
--- a/src/lib/layout/Layout.svelte
+++ b/src/lib/layout/Layout.svelte
@@ -2,11 +2,13 @@
  import TopBar from './TopBar.svelte';
  import Footer from './Footer.svelte';

-  let { screen, onNavigate, children } = $props();
+  let { screen, onNavigate, hideTopBar = false, children } = $props();
 </script>

-<div class="layout">
-  <TopBar {screen} {onNavigate} />
+<div class="layout" class:no-topbar={hideTopBar}>
+  {#if !hideTopBar}
+    <TopBar {screen} {onNavigate} />
+  {/if}
  <main class="main">
    {@render children()}
  </main>
@@ -21,6 +23,9 @@
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
  }
+  .layout.no-topbar {
+    grid-template-rows: 1fr auto;
+  }

  .main {
    overflow: hidden;
--- a/src/lib/layout/TopBar.svelte
+++ b/src/lib/layout/TopBar.svelte
@@ -20,7 +20,7 @@

 <div class="topbar">
  <div class="left">
-    <span class="app-name">Map Journal</span>
+    <span class="app-name">Journi</span>
  </div>

  <div class="center">
@@ -85,10 +85,11 @@

  .app-name {
    font-family: var(--heading);
-    font-size: 14px;
-    font-weight: 400;
+    font-size: 22px;
+    font-weight: 600;
    color: var(--text-h);
    white-space: nowrap;
+    letter-spacing: -0.5px;
  }

  .center {
@@ -133,7 +134,6 @@
    color: var(--text);
    letter-spacing: 0.01em;
  }
-
  .right {
    display: flex;
    align-items: center;
--- a/src/lib/shared/SearchInput.svelte
+++ b/src/lib/shared/SearchInput.svelte
@@ -0,0 +1,127 @@
+<script>
+  /**
+   * 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 } = $props();
+
+  let query = $state(value);
+  let open = $state(false);
+  let focused = $state(-1);
+
+  let filtered = $derived(
+    query.trim() === ''
+      ? options
+      : options.filter(o => o.toLowerCase().includes(query.toLowerCase()))
+  );
+
+  function select(opt) {
+    query = opt;
+    value = opt;
+    open = false;
+    focused = -1;
+  }
+
+  function onInput(e) {
+    query = e.currentTarget.value;
+    value = query;
+    open = true;
+    focused = -1;
+  }
+
+  function onKeydown(e) {
+    if (!open) { if (e.key === 'ArrowDown') { open = true; } return; }
+    if (e.key === 'ArrowDown') { e.preventDefault(); focused = Math.min(focused + 1, filtered.length - 1); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); focused = Math.max(focused - 1, 0); }
+    else if (e.key === 'Enter' && focused >= 0) { e.preventDefault(); select(filtered[focused]); }
+    else if (e.key === 'Escape') { open = false; focused = -1; }
+  }
+
+  function onBlur() {
+    setTimeout(() => { open = false; focused = -1; }, 150);
+  }
+
+  // Keep query in sync if value is changed externally
+  $effect(() => { query = value; });
+</script>
+
+<div class="combo">
+  <input
+    {id}
+    {required}
+    {placeholder}
+    class="combo-input"
+    type="text"
+    autocomplete="off"
+    value={query}
+    oninput={onInput}
+    onkeydown={onKeydown}
+    onfocus={() => open = true}
+    onblur={onBlur}
+  />
+  {#if open && filtered.length > 0}
+    <ul class="dropdown" role="listbox">
+      {#each filtered as opt, i}
+        <li
+          class="option"
+          class:highlighted={i === focused}
+          role="option"
+          aria-selected={opt === value}
+          onmousedown={() => select(opt)}
+        >{opt}</li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .combo {
+    position: relative;
+    width: 100%;
+  }
+
+  .combo-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%;
+  }
+  .combo-input:focus { border-color: var(--accent-border); }
+
+  .dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+    list-style: none;
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 50;
+    padding: 4px;
+  }
+
+  .option {
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text);
+    padding: 7px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.1s, color 0.1s;
+  }
+  .option:hover, .option.highlighted {
+    background: var(--accent-bg);
+    color: var(--accent);
+  }
+</style>
--- a/src/lib/shared/countries.js
+++ b/src/lib/shared/countries.js
@@ -0,0 +1,25 @@
+export const countryCodeMap = {
+  'Argentina': 'AR', 'Australia': 'AU', 'Austria': 'AT',
+  'Belgium': 'BE', 'Brazil': 'BR',
+  'Canada': 'CA', 'Chile': 'CL', 'China': 'CN', 'Croatia': 'HR',
+  'Czech Republic': 'CZ', 'Denmark': 'DK', 'Egypt': 'EG',
+  'Finland': 'FI', 'France': 'FR', 'Germany': 'DE', 'Greece': 'GR',
+  'Hungary': 'HU', 'India': 'IN', 'Indonesia': 'ID', 'Italy': 'IT',
+  'Japan': 'JP', 'Kenya': 'KE',
+  'Malaysia': 'MY', 'Mexico': 'MX', 'Morocco': 'MA',
+  'Netherlands': 'NL', 'New Zealand': 'NZ', 'Norway': 'NO',
+  'Peru': 'PE', 'Poland': 'PL', 'Portugal': 'PT',
+  'Singapore': 'SG', 'South Africa': 'ZA', 'South Korea': 'KR',
+  'Spain': 'ES', 'Sweden': 'SE', 'Switzerland': 'CH',
+  'Taiwan': 'TW', 'Thailand': 'TH', 'Turkey': 'TR',
+  'UK': 'GB', 'USA': 'US', 'Vietnam': 'VN',
+};
+
+export const countryNames = Object.keys(countryCodeMap).sort();
+
+/** @param {string} country */
+export function flagEmoji(country) {
+  const code = countryCodeMap[country];
+  if (!code) return '';
+  return [...code].map(c => String.fromCodePoint(0x1F1E6 - 65 + c.charCodeAt(0))).join('');
+}
--- a/src/lib/stores/journalStore.js
+++ b/src/lib/stores/journalStore.js
@@ -7,7 +7,7 @@ import { writable } from 'svelte/store';
 *   date: string,
 *   location: { country: string, city: string },
 *   photos: string[],
- *   song: { title: string, artist: string },
+ *   transport: 'flight' | 'train' | 'bus' | 'car' | 'ship' | 'walk',
 *   tripType: 'solo' | 'friends',
 *   days: number,
 *   memo: string
@@ -26,7 +26,7 @@ const mockEntries = [
      'https://images.unsplash.com/photo-1513407030348-c983a97b98d8?w=600&q=80',
      'https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?w=600&q=80',
    ],
-    song: { title: 'Tokyo', artist: 'Imagine Dragons' },
+    transport: 'flight',
    tripType: 'solo',
    days: 5,
    memo: 'Got completely lost in Shinjuku — stumbled into a tiny ramen shop with no English menu. The chashu just melted. Worth every wrong turn.',
@@ -40,7 +40,7 @@ const mockEntries = [
      'https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=600&q=80',
      'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?w=600&q=80',
    ],
-    song: { title: 'Spirited Away Suite', artist: 'Joe Hisaishi' },
+    transport: 'train',
    tripType: 'friends',
    days: 3,
    memo: 'Arrived at 6am before the crowds. Just me and the wind moving through the bamboo. One of those moments you keep coming back to.',
@@ -55,7 +55,7 @@ const mockEntries = [
      'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=600&q=80',
      'https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?w=600&q=80',
    ],
-    song: { title: 'La Vie en Rose', artist: 'Édith Piaf' },
+    transport: 'flight',
    tripType: 'solo',
    days: 7,
    memo: 'Watched the whole city turn orange from the steps of Sacré-Cœur. A street musician was playing La Vie en Rose. Cliché, perfect.',
@@ -69,7 +69,7 @@ const mockEntries = [
      'https://images.unsplash.com/photo-1523531294919-4bcd7c65e216?w=600&q=80',
      'https://images.unsplash.com/photo-1583422409516-2895a77efded?w=600&q=80',
    ],
-    song: { title: 'Spain', artist: 'Chick Corea' },
+    transport: 'flight',
    tripType: 'friends',
    days: 4,
    memo: 'Nothing prepares you for the light inside. The stained glass turns the whole nave into a kaleidoscope. Gaudí was building a forest.',
@@ -84,7 +84,7 @@ const mockEntries = [
      'https://images.unsplash.com/photo-1485871981521-5b1fd3805345?w=600&q=80',
      'https://images.unsplash.com/photo-1522083165195-3424ed129620?w=600&q=80',
    ],
-    song: { title: 'New York, New York', artist: 'Frank Sinatra' },
+    transport: 'car',
    tripType: 'friends',
    days: 6,
    memo: 'Peak foliage. Joggers, picnics, a guy playing saxophone near Bethesda Fountain. Hard to believe a city this big wraps around this much quiet.',
@@ -98,7 +98,7 @@ const mockEntries = [
      'https://images.unsplash.com/photo-1563492065599-3520f775eeed?w=600&q=80',
      'https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?w=600&q=80',
    ],
-    song: { title: 'Elephant', artist: 'Tame Impala' },
+    transport: 'ship',
    tripType: 'solo',
    days: 2,
    memo: 'Stood in front of the 45m golden Buddha for a long time. The mother-of-pearl inlay on the soles of the feet is impossibly detailed.',
@@ -116,3 +116,8 @@ export function addJournal(entry) {
 export function removeJournal(id) {
  journals.update((entries) => entries.filter((e) => e.id !== id));
 }
+
+/** @param {JournalEntry} updated */
+export function updateJournal(updated) {
+  journals.update((entries) => entries.map((e) => e.id === updated.id ? updated : e));
+}
--- a/src/lib/timeline/DeleteConfirm.svelte
+++ b/src/lib/timeline/DeleteConfirm.svelte
@@ -0,0 +1,88 @@
+<script>
+  let { entry, onConfirm, onCancel } = $props();
+</script>
+
+<div class="overlay" role="dialog" aria-modal="true">
+  <div class="dialog">
+    <h2 class="title">Delete entry?</h2>
+    <p class="body">
+      <strong>{entry.location.city}, {entry.location.country}</strong> — {entry.date.slice(0, 4)} will be permanently removed.
+    </p>
+    <div class="actions">
+      <button class="btn btn-cancel" onclick={onCancel}>Cancel</button>
+      <button class="btn btn-delete" onclick={onConfirm}>Delete</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.4);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dialog {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 28px 32px;
+    width: 360px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
+  }
+
+  .title {
+    font-size: 17px;
+    font-weight: 400;
+    color: var(--text-h);
+    margin-bottom: 10px;
+  }
+
+  .body {
+    font-size: 14px;
+    font-weight: 300;
+    color: var(--text);
+    line-height: 1.6;
+    margin-bottom: 24px;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .btn {
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    padding: 8px 18px;
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
+  }
+
+  .btn-cancel {
+    background: var(--bg);
+    color: var(--text);
+  }
+  .btn-cancel:hover {
+    background: var(--bg-subtle);
+    color: var(--text-h);
+  }
+
+  .btn-delete {
+    background: #dc2626;
+    color: #fff;
+    border-color: #dc2626;
+  }
+  .btn-delete:hover {
+    background: #b91c1c;
+    border-color: #b91c1c;
+  }
+</style>
--- a/src/lib/timeline/EditForm.svelte
+++ b/src/lib/timeline/EditForm.svelte
@@ -0,0 +1,358 @@
+<script>
+  import { get } from 'svelte/store';
+  import { journals, addJournal, updateJournal } from '../stores/journalStore.js';
+  import { countryNames } from '../shared/countries.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 city       = $state(entry?.location.city ?? '');
+  let country    = $state(entry?.location.country ?? initialCountry);
+  let date       = $state(entry?.date ?? new Date().toISOString().slice(0, 10));
+  let days       = $state(String(entry?.days ?? 1));
+  let tripType   = $state(entry?.tripType ?? 'solo');
+  let photos     = $state([...(entry?.photos ?? [])]);
+  let memo       = $state(entry?.memo ?? '');
+  let transport  = $state(entry?.transport ?? 'flight');
+
+  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;
+    }
+  }
+
+  let cityOptions = $derived(
+    [...new Set(get(journals).map(e => e.location.city))].sort()
+  );
+
+  function save() {
+    if (isNew) {
+      addJournal({
+        title: `${city}, ${country}`,
+        date,
+        days: Number(days),
+        tripType,
+        memo,
+        photos,
+        transport,
+        location: { city, country },
+      });
+    } else {
+      updateJournal({
+        ...entry,
+        date,
+        days: Number(days),
+        tripType,
+        transport,
+        memo,
+        photos,
+        location: { city, country },
+      });
+    }
+    onBack();
+  }
+</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 entry' : '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 />
+        </div>
+        <div class="field">
+          <label class="label" for="edit-city">City <span class="req">*</span></label>
+          <SearchInput id="edit-city" bind:value={city} options={cityOptions} required />
+        </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 />
+        </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 />
+        </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>
+        </div>
+      </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>
+      </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>
+  .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: 52px;
+    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: 14px;
+    font-weight: 400;
+    color: var(--text-h);
+  }
+
+  .topbar-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 6px 12px;
+    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);
+  }
+
+</style>
--- a/src/lib/timeline/JournalDetail.svelte
+++ b/src/lib/timeline/JournalDetail.svelte
@@ -1,19 +1,16 @@
 <script>
-  /** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onBack: () => void }} */
-  let { entry, onBack } = $props();
+  import { removeJournal } from '../stores/journalStore.js';
+  import { flagEmoji } from '../shared/countries.js';
+  import DeleteConfirm from './DeleteConfirm.svelte';

-  const countryCodeMap = {
-    'Japan': 'JP', 'France': 'FR', 'Spain': 'ES', 'USA': 'US',
-    'Thailand': 'TH', 'Germany': 'DE', 'Italy': 'IT', 'UK': 'GB',
-    'Australia': 'AU', 'Canada': 'CA', 'China': 'CN', 'India': 'IN',
-    'Brazil': 'BR', 'Mexico': 'MX', 'Portugal': 'PT', 'Netherlands': 'NL',
-    'Greece': 'GR', 'Turkey': 'TR', 'Vietnam': 'VN', 'Indonesia': 'ID',
-    'South Korea': 'KR', 'Singapore': 'SG', 'Taiwan': 'TW', 'New Zealand': 'NZ',
-  };
-  function flagEmoji(country) {
-    const code = countryCodeMap[country];
-    if (!code) return '';
-    return [...code].map(c => String.fromCodePoint(0x1F1E6 - 65 + c.charCodeAt(0))).join('');
+  /** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onBack: () => void, onEdit: () => void }} */
+  let { entry, onBack, onEdit } = $props();
+
+  let showDeleteConfirm = $state(false);
+
+  function handleDelete() {
+    removeJournal(entry.id);
+    onBack();
  }

  function formatDate(iso) {
@@ -25,6 +22,10 @@
  let lightboxSrc = $state(null);
 </script>

+{#if showDeleteConfirm}
+  <DeleteConfirm {entry} onConfirm={handleDelete} onCancel={() => showDeleteConfirm = false} />
+{/if}
+
 <!-- Lightbox -->
 {#if lightboxSrc}
  <div class="lightbox" onclick={() => lightboxSrc = null} role="button" tabindex="0"
@@ -35,149 +36,197 @@

 <div class="detail-layout">

-  <!-- ── Left: photo grid ── -->
-  <div class="photo-col">
-    <!-- Country overlay top-left -->
-    <div class="photo-country">
-      <span class="photo-flag">{flagEmoji(entry.location.country)}</span>
-      <div>
-        <p class="photo-city">{entry.location.city}</p>
-        <p class="photo-country-name">{entry.location.country}</p>
+  <!-- ── Full-width top bar ── -->
+  <header class="detail-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 class="topbar-divider"></div>
+
+      <span class="topbar-flag">{flagEmoji(entry.location.country)}</span>
+      <div class="topbar-place">
+        <span class="topbar-city">{entry.location.city}</span>
+        <span class="topbar-country">{entry.location.country}</span>
      </div>
    </div>

-    <div class="photo-scroll">
-    {#if entry.photos.length === 0}
-      <div class="no-photos">No photos</div>
-    {:else}
-      <div class="photo-grid">
-        {#each entry.photos as photo, i}
-          <div class="photo-cell" class:cell-wide={i === 0 && entry.photos.length > 1}>
-            <img src={photo} alt=""
-              onclick={() => lightboxSrc = photo}
-              onerror={(e) => e.currentTarget.parentElement.classList.add('cell-broken')} />
+    <div class="topbar-right">
+      <button class="topbar-btn" title="Edit entry" onclick={onEdit}>
+        <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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+        </svg>
+        Edit
+      </button>
+      <button class="topbar-btn topbar-btn--danger" title="Delete entry" onclick={() => showDeleteConfirm = true}>
+        <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="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>
+        </svg>
+        Delete
+      </button>
+    </div>
+  </header>
+
+  <!-- ── Body: photo left + Q&A right ── -->
+  <div class="detail-body">
+
+    <!-- Left: photos -->
+    <div class="photo-col">
+      <div class="photo-scroll">
+        {#if entry.photos.length === 0}
+          <div class="no-photos">No photos</div>
+        {:else}
+          <div class="photo-grid">
+            {#each entry.photos as photo, i}
+              <div class="photo-cell" class:cell-wide={i === 0 && entry.photos.length > 1}>
+                <img src={photo} alt=""
+                  onclick={() => lightboxSrc = photo}
+                  onerror={(e) => e.currentTarget.parentElement.classList.add('cell-broken')} />
+              </div>
+            {/each}
          </div>
-        {/each}
+        {/if}
      </div>
-    {/if}
    </div>
-  </div>

-  <!-- ── Right: Q&A ── -->
-  <div class="info-col">
-    <div class="info-inner">
+    <!-- Right: Q&A -->
+    <div class="info-col">
+      <div class="info-inner">
+        <div class="qa-list">

-
-      <div class="qa-list">
-
-        <div class="qa-item">
-          <p class="question">When did you go?</p>
-          <p class="answer">{formatDate(entry.date)}</p>
-        </div>
-
-        <div class="qa-item">
-          <p class="question">How long did you stay?</p>
-          <p class="answer">{entry.days} {entry.days === 1 ? 'day' : 'days'}</p>
-        </div>
-
-        <div class="qa-item">
-          <p class="question">Who did you go with?</p>
-          <p class="answer">
-            {#if entry.tripType === 'solo'}
-              Just me — solo trip
-            {:else}
-              With friends
-            {/if}
-          </p>
-        </div>
-
-        <div class="qa-item">
-          <p class="question">How was it?</p>
-          <p class="answer memo">{entry.memo}</p>
-        </div>
-
-        <div class="qa-item">
-          <p class="question">Trip soundtrack</p>
-          <div class="song-answer">
-            <div class="song-icon">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M9 18V5l12-2v13"/>
-                <circle cx="6" cy="18" r="3"/>
-                <circle cx="18" cy="16" r="3"/>
-              </svg>
-            </div>
-            <div>
-              <p class="song-title">{entry.song.title}</p>
-              <p class="song-artist">{entry.song.artist}</p>
-            </div>
+          <div class="qa-item">
+            <p class="question">When did you go?</p>
+            <p class="answer">{formatDate(entry.date)}</p>
          </div>
-        </div>

+          <div class="qa-item">
+            <p class="question">How long did you stay?</p>
+            <p class="answer">{entry.days} {entry.days === 1 ? 'day' : 'days'}</p>
+          </div>
+
+          <div class="qa-item">
+            <p class="question">Who did you go with?</p>
+            <p class="answer">
+              {#if entry.tripType === 'solo'}
+                Just me — solo trip
+              {:else}
+                With friends
+              {/if}
+            </p>
+          </div>
+
+          <div class="qa-item">
+            <p class="question">How was it?</p>
+            <p class="answer memo">{entry.memo}</p>
+          </div>
+
+        </div>
      </div>
    </div>
-  </div>

-  <!-- ── Floating action buttons ── -->
-  <div class="fab-group">
-    <button class="fab fab-delete" title="Delete entry">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-        <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>
-      </svg>
-    </button>
-    <button class="fab fab-edit" title="Edit entry">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-      </svg>
-      Edit
-    </button>
  </div>
-
 </div>

 <style>
-  /* ── Two-column layout ── */
+  /* ── Outer layout: column (topbar + body) ── */
  .detail-layout {
    display: flex;
-    flex-direction: row;
+    flex-direction: column;
    height: 100%;
-    position: relative;
+    overflow: hidden;
+  }
+
+  /* ── Full-width top bar ── */
+  .detail-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 52px;
+    flex-shrink: 0;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .topbar-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .topbar-right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .topbar-divider {
+    width: 1px;
+    height: 20px;
+    background: var(--border);
+  }
+
+  .topbar-flag { font-size: 20px; line-height: 1; }
+
+  .topbar-place {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+  }
+  .topbar-city {
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text-sub);
+  }
+  .topbar-country {
+    font-size: 17px;
+    font-weight: 400;
+    color: var(--text-h);
+    letter-spacing: -0.3px;
+  }
+
+  .topbar-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 6px 12px;
+    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--danger:hover { color: #dc2626; background: #fff1f1; border-color: #fca5a5; }
+
+  /* ── Body row ── */
+  .detail-body {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
    overflow: hidden;
  }

  /* ── Left: photos ── */
  .photo-col {
    flex: 1;
-    display: flex;
-    flex-direction: column;
    overflow: hidden;
    background: #f0f0f0;
-  }
-
-  /* Country bar at top of photo column */
-  .photo-country {
    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 12px 16px;
-    background: var(--bg);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-  .photo-flag { font-size: 20px; line-height: 1; }
-  .photo-city {
-    font-size: 11px;
-    font-weight: 300;
-    color: var(--text-sub);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-  .photo-country-name {
-    font-size: 15px;
-    font-weight: 400;
-    color: var(--text-h);
-    letter-spacing: -0.2px;
-    line-height: 1.2;
+    flex-direction: column;
  }

  .photo-scroll {
@@ -199,7 +248,6 @@
    border-radius: 4px;
    cursor: zoom-in;
  }
-  /* First photo spans full width when there are multiple */
  .photo-cell.cell-wide {
    grid-column: 1 / -1;
    grid-row: span 2;
@@ -239,36 +287,12 @@
  }

  .info-inner {
-    padding: 40px 32px 100px;
+    padding: 36px 32px 80px;
  }

-  /* Heading */
-  .entry-heading {
-    margin-bottom: 36px;
-    padding-bottom: 24px;
-    border-bottom: 1px solid var(--border);
-  }
-  .entry-city {
-    font-size: 12px;
-    font-weight: 300;
-    color: var(--text-sub);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    margin-bottom: 2px;
-  }
-  .entry-country {
-    font-size: 24px;
-    font-weight: 400;
-    color: var(--text-h);
-    letter-spacing: -0.5px;
-    line-height: 1.1;
-  }
-
-  /* Q&A list */
  .qa-list {
    display: flex;
    flex-direction: column;
-    gap: 0;
  }

  .qa-item {
@@ -299,80 +323,6 @@
    line-height: 1.75;
  }

-  /* Song answer */
-  .song-answer {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  .song-icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--accent-bg);
-    color: var(--accent);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-  .song-title {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--text-h);
-  }
-  .song-artist {
-    font-size: 12px;
-    font-weight: 300;
-    color: var(--text-sub);
-    margin-top: 2px;
-  }
-
-  /* ── Floating action buttons ── */
-  .fab-group {
-    position: absolute;
-    bottom: 32px;
-    right: 28px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 10px;
-    z-index: 10;
-  }
-
-  .fab {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    font-family: var(--sans);
-    font-size: 13px;
-    font-weight: 300;
-    padding: 10px 18px 10px 14px;
-    border-radius: 40px;
-    border: 1px solid var(--border);
-    cursor: pointer;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
-    transition: box-shadow 0.15s, transform 0.15s;
-    letter-spacing: 0.02em;
-  }
-  .fab:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.15); transform: translateY(-1px); }
-
-  .fab-edit {
-    background: var(--accent);
-    color: #fff;
-    border-color: transparent;
-  }
-  .fab-delete {
-    background: var(--bg);
-    color: var(--text);
-    padding: 10px 14px;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    justify-content: center;
-  }
-  .fab-delete:hover { color: #dc2626; border-color: #fca5a5; }
-
  /* ── Lightbox ── */
  .lightbox {
    position: fixed;
@@ -393,9 +343,8 @@

  /* ── Responsive ── */
  @media (max-width: 700px) {
-    .detail-layout { flex-direction: column; overflow-y: auto; }
+    .detail-body { flex-direction: column; overflow-y: auto; }
    .photo-col { height: 260px; flex: none; }
    .info-col { width: 100%; border-left: none; border-top: 1px solid var(--border); }
-    .fab-group { bottom: 20px; right: 16px; }
  }
 </style>
--- a/src/lib/timeline/JournalSummary.svelte
+++ b/src/lib/timeline/JournalSummary.svelte
@@ -9,207 +9,190 @@
    const countries = [...new Set(entries.map(e => e.location.country))];
    const cities    = [...new Set(entries.map(e => e.location.city))];

-    const countryCounts = {};
-    for (const e of entries) countryCounts[e.location.country] = (countryCounts[e.location.country] ?? 0) + 1;
-    const topCountry = Object.entries(countryCounts).sort((a, b) => b[1] - a[1])[0];
-
-    const soloCount   = entries.filter(e => e.tripType === 'solo').length;
-    const soloPct     = Math.round(soloCount / entries.length * 100);
-
-    const years   = entries.map(e => new Date(e.date).getFullYear());
-    const minYear = Math.min(...years);
-    const maxYear = Math.max(...years);
+    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}`;

-    const latest = [...entries].sort((a, b) => b.date.localeCompare(a.date))[0];
-
-    return { totalDays, countries, cities, topCountry, soloCount, soloPct, yearRange, latest, tripCount: entries.length };
+    return { totalDays, countries, cities, yearRange, tripCount: entries.length };
  });
 </script>

 {#if stats}
-<div class="summary">
+<div class="passport">
+  <!-- diagonal pattern -->

-  <p class="eyebrow">My Journey</p>
-  <p class="year-range">{stats.yearRange}</p>
+  <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="divider"></div>
+    <div class="vdivider"></div>

-  <!-- Big stats -->
-  <div class="stat-stack">
-    <div class="stat-row">
-      <span class="stat-num">{stats.countries.length}</span>
-      <span class="stat-lbl">Countries</span>
-    </div>
-    <div class="stat-row">
-      <span class="stat-num">{stats.cities.length}</span>
-      <span class="stat-lbl">Cities</span>
-    </div>
-    <div class="stat-row">
-      <span class="stat-num">{stats.totalDays}</span>
-      <span class="stat-lbl">Days abroad</span>
-    </div>
-    <div class="stat-row">
-      <span class="stat-num">{stats.tripCount}</span>
-      <span class="stat-lbl">Trips</span>
+    <!-- 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>

-  <div class="divider"></div>
-
-  <!-- Most visited -->
-  <div class="insight">
-    <span class="insight-label">Most visited</span>
-    <span class="insight-value">{stats.topCountry[0]}</span>
-    <span class="insight-sub">{stats.topCountry[1]} {stats.topCountry[1] === 1 ? 'trip' : 'trips'}</span>
+  <!-- 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>
-
-  <!-- Latest trip -->
-  <div class="insight">
-    <span class="insight-label">Latest trip</span>
-    <span class="insight-value">{stats.latest.location.city}</span>
-    <span class="insight-sub">{stats.latest.location.country}</span>
-  </div>
-
-  <div class="divider"></div>
-
-  <!-- Trip style bar -->
-  <div class="style-section">
-    <span class="insight-label">Trip style</span>
-    <div class="style-bar">
-      <div class="style-fill" style="width: {stats.soloPct}%"></div>
-    </div>
-    <div class="style-legend">
-      <span><span class="dot solo-dot"></span> {stats.soloPct}% Solo</span>
-      <span><span class="dot friends-dot"></span> {100 - stats.soloPct}% Friends</span>
-    </div>
-  </div>
-
 </div>
 {/if}

 <style>
-  .summary {
+  .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: column;
+    flex-direction: row;
+    align-items: stretch;
+    padding: 20px;
    gap: 0;
+    position: relative;
+    z-index: 1;
  }

-  .eyebrow {
-    font-size: var(--text-xs);
-    font-weight: 400;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--accent);
-    margin-bottom: 4px;
-  }
-
-  .year-range {
-    font-size: var(--text-lg);
-    font-weight: 400;
-    color: var(--text-h);
-    letter-spacing: -0.3px;
-  }
-
-  .divider {
-    height: 1px;
-    background: var(--border);
-    margin: 20px 0;
-  }
-
-  /* Stat stack */
-  .stat-stack {
+  /* Left column */
+  .passport-left {
+    flex: 1;
    display: flex;
    flex-direction: column;
-    gap: 14px;
-  }
-
-  .stat-row {
-    display: flex;
-    align-items: baseline;
    justify-content: space-between;
+    gap: 16px;
+    padding-right: 20px;
+  }
+  .passport-header {
+    display: flex;
+    align-items: center;
    gap: 8px;
  }
-
-  .stat-num {
-    font-size: var(--text-2xl);
+  .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: var(--text-h);
-    letter-spacing: -1px;
+    color: #fff;
+    letter-spacing: -0.8px;
    line-height: 1;
  }

-  .stat-lbl {
-    font-size: var(--text-xs);
-    font-weight: 300;
-    color: var(--text-sub);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    text-align: right;
+  /* Divider */
+  .vdivider {
+    width: 1px;
+    background: rgba(255,255,255,0.12);
+    flex-shrink: 0;
+    align-self: stretch;
  }

-  /* Insights */
-  .insight {
+  /* 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;
-    margin-bottom: 16px;
  }
-  .insight:last-of-type { margin-bottom: 0; }
-
-  .insight-label {
-    font-size: var(--text-xs);
+  .field-label {
+    font-size: 8px;
+    font-weight: 500;
+    letter-spacing: 0.18em;
+    color: #818cf8;
+  }
+  .field-value {
+    font-size: 22px;
    font-weight: 400;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--accent);
+    color: #fff;
+    letter-spacing: -0.5px;
+    line-height: 1;
  }

-  .insight-value {
-    font-size: var(--text-md);
-    font-weight: 400;
-    color: var(--text-h);
-    line-height: 1.2;
+  /* 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;
  }
-
-  .insight-sub {
-    font-size: var(--text-sm);
-    font-weight: 300;
-    color: var(--text);
-  }
-
-  /* Trip style */
-  .style-section { display: flex; flex-direction: column; gap: 8px; }
-
-  .style-bar {
-    height: 6px;
-    border-radius: 99px;
-    background: var(--lavender-bg);
+  .mrz span {
+    font-family: var(--mono);
+    font-size: 8px;
+    color: #6366f1;
+    letter-spacing: 0.06em;
+    white-space: nowrap;
    overflow: hidden;
  }
-  .style-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
-    border-radius: 99px;
-    transition: width 0.4s ease;
-  }
-
-  .style-legend {
-    display: flex;
-    justify-content: space-between;
-    font-size: var(--text-xs);
-    font-weight: 300;
-    color: var(--text);
-  }
-
-  .dot {
-    display: inline-block;
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    margin-right: 4px;
-    vertical-align: middle;
-  }
-  .solo-dot    { background: var(--accent-dark); }
-  .friends-dot { background: var(--lavender); }
 </style>
--- a/src/lib/timeline/PhotoEditor.svelte
+++ b/src/lib/timeline/PhotoEditor.svelte
@@ -0,0 +1,189 @@
+<script>
+  /** @type {{ photos: string[], onchange: (photos: string[]) => void }} */
+  let { photos, onchange } = $props();
+
+  let fileInput;
+
+  function remove(index) {
+    const next = photos.filter((_, i) => i !== index);
+    onchange(next);
+  }
+
+  async function addFiles(e) {
+    const files = Array.from(e.currentTarget.files ?? []);
+    if (!files.length) return;
+
+    const dataUrls = await Promise.all(files.map(fileToDataUrl));
+    onchange([...photos, ...dataUrls]);
+
+    // reset so the same file can be picked again
+    e.currentTarget.value = '';
+  }
+
+  /** @param {File} file */
+  function fileToDataUrl(file) {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (e) => resolve(/** @type {string} */ (e.target.result));
+      reader.readAsDataURL(file);
+    });
+  }
+</script>
+
+<div class="photo-editor">
+  <div class="label-row">
+    <span class="label">Photos</span>
+    <button type="button" class="add-btn" onclick={() => fileInput.click()}>
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+        <path d="M12 5v14M5 12h14"/>
+      </svg>
+      Add photos
+    </button>
+    <input bind:this={fileInput} type="file" accept="image/*" multiple onchange={addFiles} hidden />
+  </div>
+
+  {#if photos.length === 0}
+    <button type="button" class="empty-zone" onclick={() => fileInput.click()}>
+      <svg width="28" height="28" 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>
+      <span>Click to add photos</span>
+    </button>
+  {:else}
+    <div class="grid">
+      {#each photos as src, i (src + i)}
+        <div class="cell">
+          <img {src} alt="photo {i + 1}" />
+          <button type="button" class="remove-btn" onclick={() => remove(i)} aria-label="Remove photo">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+      {/each}
+
+      <button type="button" class="add-cell" onclick={() => fileInput.click()}>
+        <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}
+</div>
+
+<style>
+  .photo-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .label-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .label {
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-sub);
+    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;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    height: 120px;
+    border: 1.5px dashed var(--border-bright);
+    border-radius: 10px;
+    color: var(--text-sub);
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    cursor: pointer;
+    background: var(--bg-subtle);
+    transition: border-color 0.15s, color 0.15s;
+    width: 100%;
+  }
+  .empty-zone:hover { border-color: var(--accent-border); color: var(--accent); }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 6px;
+  }
+
+  .cell {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--bg-subtle);
+  }
+
+  .cell img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .remove-btn {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(0,0,0,0.55);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.15s, background 0.15s;
+  }
+  .cell:hover .remove-btn { opacity: 1; }
+  .remove-btn:hover { background: rgba(220,38,38,0.85); }
+
+  .add-cell {
+    aspect-ratio: 1;
+    border-radius: 8px;
+    border: 1.5px dashed var(--border-bright);
+    background: var(--bg-subtle);
+    color: var(--text-sub);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s;
+  }
+  .add-cell:hover { border-color: var(--accent-border); color: var(--accent); }
+</style>
--- a/src/lib/timeline/ShareCard.svelte
+++ b/src/lib/timeline/ShareCard.svelte
@@ -0,0 +1,483 @@
+<script>
+  import { toPng } from 'html-to-image';
+
+  /** @type {{ entries: import('../stores/journalStore.js').JournalEntry[], onClose: () => void }} */
+  let { entries, onClose } = $props();
+
+  let cardEl = $state(null);
+  let downloading = $state(false);
+
+  const continentMap = {
+    'Japan': 'Asia', 'South Korea': 'Asia', 'China': 'Asia', 'Thailand': 'Asia',
+    'Vietnam': 'Asia', 'Indonesia': 'Asia', 'Malaysia': 'Asia', 'Singapore': 'Asia',
+    'India': 'Asia', 'Taiwan': 'Asia', 'Philippines': 'Asia', 'Cambodia': 'Asia',
+    'Nepal': 'Asia', 'Bangladesh': 'Asia',
+    'France': 'Europe', 'Spain': 'Europe', 'Italy': 'Europe', 'Germany': 'Europe',
+    'UK': 'Europe', 'Netherlands': 'Europe', 'Portugal': 'Europe', 'Greece': 'Europe',
+    'Sweden': 'Europe', 'Norway': 'Europe', 'Denmark': 'Europe', 'Finland': 'Europe',
+    'Switzerland': 'Europe', 'Austria': 'Europe', 'Belgium': 'Europe', 'Poland': 'Europe',
+    'Czech Republic': 'Europe', 'Hungary': 'Europe', 'Croatia': 'Europe', 'Turkey': 'Europe',
+    'USA': 'N. America', 'Canada': 'N. America', 'Mexico': 'N. America',
+    'Brazil': 'S. America', 'Argentina': 'S. America', 'Chile': 'S. America',
+    'Peru': 'S. America', 'Colombia': 'S. America',
+    'Australia': 'Oceania', 'New Zealand': 'Oceania',
+    'Morocco': 'Africa', 'Egypt': 'Africa', 'Kenya': 'Africa', 'South Africa': 'Africa',
+  };
+
+  const flightHoursMap = {
+    'Japan': 13, 'South Korea': 13, 'China': 12, 'Thailand': 11, 'Vietnam': 12,
+    'Indonesia': 14, 'Malaysia': 11, 'Singapore': 11, 'India': 9, 'Taiwan': 13,
+    'France': 9, 'Spain': 10, 'Italy': 10, 'Germany': 9, 'UK': 8, 'Netherlands': 9,
+    'Portugal': 9, 'Greece': 11, 'Sweden': 10, 'Norway': 9, 'Switzerland': 9,
+    'Turkey': 11, 'Austria': 10, 'Belgium': 9, 'Poland': 10,
+    'USA': 14, 'Canada': 13, 'Mexico': 13,
+    'Brazil': 10, 'Argentina': 12, 'Chile': 13,
+    'Australia': 20, 'New Zealand': 23,
+    'Morocco': 10, 'Egypt': 12, 'Kenya': 14, 'South Africa': 16,
+  };
+
+  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.map(e => e.location.city))];
+
+    // Continent days
+    const contDays = {};
+    for (const e of entries) {
+      const cont = continentMap[e.location.country] ?? 'Other';
+      contDays[cont] = (contDays[cont] ?? 0) + e.days;
+    }
+    const topContinent = Object.entries(contDays).sort((a, b) => b[1] - a[1])[0];
+
+    // Longest trip
+    const longest = [...entries].sort((a, b) => b.days - a.days)[0];
+
+    // Date range
+    const dates = entries.map(e => new Date(e.date));
+    const firstDate = new Date(Math.min(...dates));
+    const lastDate  = new Date(Math.max(...dates));
+    const spanDays  = Math.round((lastDate - firstDate) / 86400000);
+    const spanMonths = Math.round(spanDays / 30);
+
+    // Flight hours estimate
+    const flightTrips = entries.filter(e => e.transport === 'flight');
+    const flightHrs = flightTrips.reduce((s, e) => s + (flightHoursMap[e.location.country] ?? 10), 0);
+
+    // Solo vs friends
+    const soloCount   = entries.filter(e => e.tripType === 'solo').length;
+    const friendCount = entries.filter(e => e.tripType === 'friends').length;
+
+    // Most visited country
+    const countryCounts = {};
+    for (const e of entries) countryCounts[e.location.country] = (countryCounts[e.location.country] ?? 0) + 1;
+    const favCountry = Object.entries(countryCounts).sort((a, b) => b[1] - a[1])[0];
+
+    const yearStart = firstDate.getFullYear();
+    const yearEnd   = lastDate.getFullYear();
+
+    return {
+      totalDays, countries, cities, contDays, topContinent,
+      longest, flightHrs, soloCount, friendCount,
+      favCountry, spanMonths, yearStart, yearEnd,
+    };
+  });
+
+  async function download() {
+    if (!cardEl) return;
+    downloading = true;
+    try {
+      const dataUrl = await toPng(cardEl, { pixelRatio: 3 });
+      const a = document.createElement('a');
+      a.download = 'my-journey.png';
+      a.href = dataUrl;
+      a.click();
+    } finally {
+      downloading = false;
+    }
+  }
+
+  function fmtYear(y1, y2) {
+    return y1 === y2 ? `${y1}` : `${y1} – ${y2}`;
+  }
+</script>
+
+<!-- Overlay -->
+<div class="overlay" role="dialog" aria-modal="true">
+  <div class="overlay-inner">
+
+    <!-- Controls -->
+    <div class="controls">
+      <button class="ctrl-btn" onclick={onClose}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M18 6 6 18M6 6l12 12"/>
+        </svg>
+        Close
+      </button>
+      <button class="ctrl-btn ctrl-btn--primary" onclick={download} disabled={downloading}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+        </svg>
+        {downloading ? 'Saving…' : 'Save as PNG'}
+      </button>
+    </div>
+
+    <!-- The card (Instagram story 9:16) -->
+    {#if stats}
+    <div class="card-wrap">
+      <div class="card" bind:this={cardEl}>
+
+        <!-- Background layers -->
+        <div class="bg-gradient"></div>
+        <div class="bg-grid"></div>
+
+        <!-- Header -->
+        <div class="card-header">
+          <span class="card-brand">MAP JOURNAL</span>
+          <span class="card-year">{fmtYear(stats.yearStart, stats.yearEnd)}</span>
+        </div>
+
+        <!-- Hero stat -->
+        <div class="hero">
+          <p class="hero-num">{stats.totalDays}</p>
+          <p class="hero-label">days of travel</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">
+          {#if stats.topContinent}
+            <div class="fact">
+              <span class="fact-icon">🌏</span>
+              <span class="fact-text">Spent <strong>{stats.topContinent[1]} days</strong> in {stats.topContinent[0]}</span>
+            </div>
+          {/if}
+          {#if stats.longest}
+            <div class="fact">
+              <span class="fact-icon">📍</span>
+              <span class="fact-text">Longest stay: <strong>{stats.longest.days} days</strong> in {stats.longest.location.city}</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>
+              <span class="fact-text">Kept coming back to <strong>{stats.favCountry[0]}</strong></span>
+            </div>
+          {/if}
+          <div class="fact">
+            <span class="fact-icon">{stats.soloCount >= stats.friendCount ? '🧳' : '👥'}</span>
+            <span class="fact-text">{stats.soloCount} solo · {stats.friendCount} with friends</span>
+          </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>
+        </div>
+
+      </div>
+    </div>
+    {/if}
+
+  </div>
+</div>
+
+<style>
+  /* ── Overlay ── */
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.7);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    backdrop-filter: blur(4px);
+  }
+  .overlay-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  /* ── Controls ── */
+  .controls {
+    display: flex;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+  .ctrl-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 400;
+    padding: 8px 18px;
+    border-radius: 8px;
+    border: 1px solid rgba(255,255,255,0.2);
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .ctrl-btn:hover { background: rgba(255,255,255,0.18); }
+  .ctrl-btn--primary {
+    background: #7c3aed;
+    border-color: #7c3aed;
+  }
+  .ctrl-btn--primary:hover { background: #6d28d9; }
+  .ctrl-btn:disabled { opacity: 0.6; cursor: default; }
+
+  /* ── Card wrap (scrollable preview) ── */
+  .card-wrap {
+    flex-shrink: 0;
+  }
+
+  /* ── Card itself (Instagram story 9:16 → 360×640 preview) ── */
+  .card {
+    width: 360px;
+    min-height: 640px;
+    border-radius: 20px;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 32px 28px 24px;
+    gap: 0;
+    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+    background: #0f0a1e;
+    color: #fff;
+
+    /* continent color vars */
+    --cont-asia: #f87171;
+    --cont-europe: #818cf8;
+    --cont-africa: #fb923c;
+    --cont-namerica: #4ade80;
+    --cont-n-america: #4ade80;
+    --cont-samerica: #fbbf24;
+    --cont-s-america: #fbbf24;
+    --cont-oceania: #c084fc;
+  }
+
+  /* Backgrounds */
+  .bg-gradient {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 60% 40% at 80% 10%, rgba(124,58,237,0.35) 0%, transparent 70%),
+      radial-gradient(ellipse 50% 50% at 10% 80%, rgba(99,102,241,0.25) 0%, transparent 60%);
+    pointer-events: none;
+  }
+  .bg-grid {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+    background-size: 32px 32px;
+    pointer-events: none;
+  }
+
+  /* Header */
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 36px;
+    position: relative;
+    z-index: 1;
+  }
+  .card-brand {
+    font-size: 9px;
+    font-weight: 500;
+    letter-spacing: 0.22em;
+    color: #a5b4fc;
+  }
+  .card-year {
+    font-size: 11px;
+    font-weight: 300;
+    color: rgba(255,255,255,0.4);
+    letter-spacing: 0.06em;
+  }
+
+  /* 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 {
+    font-size: 16px;
+    font-weight: 300;
+    color: #a5b4fc;
+    letter-spacing: 0.04em;
+    margin-top: 4px;
+  }
+
+  /* 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;
+    color: #fff;
+    letter-spacing: -0.5px;
+    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;
+  }
+
+  /* Facts */
+  .facts {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 24px;
+    position: relative;
+    z-index: 1;
+  }
+  .fact {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 10px;
+    padding: 10px 14px;
+  }
+  .fact-icon { font-size: 16px; flex-shrink: 0; }
+  .fact-text {
+    font-size: 12px;
+    font-weight: 300;
+    color: rgba(255,255,255,0.7);
+    line-height: 1.4;
+  }
+  .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;
+    padding-top: 16px;
+    border-top: 1px solid rgba(255,255,255,0.08);
+    font-size: 9px;
+    font-weight: 300;
+    color: rgba(255,255,255,0.25);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    position: relative;
+    z-index: 1;
+  }
+</style>
--- a/src/lib/timeline/TimelineCard.svelte
+++ b/src/lib/timeline/TimelineCard.svelte
@@ -1,28 +1,9 @@
 <script>
+  import { flagEmoji } from '../shared/countries.js';
+
  /** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onClick: () => void }} */
  let { entry, onClick } = $props();

-  /** Convert country name to flag emoji via ISO 3166-1 alpha-2 */
-  const countryCodeMap = {
-    'Japan': 'JP', 'France': 'FR', 'Spain': 'ES', 'USA': 'US',
-    'Thailand': 'TH', 'Germany': 'DE', 'Italy': 'IT', 'UK': 'GB',
-    'Australia': 'AU', 'Canada': 'CA', 'China': 'CN', 'India': 'IN',
-    'Brazil': 'BR', 'Mexico': 'MX', 'Portugal': 'PT', 'Netherlands': 'NL',
-    'Greece': 'GR', 'Turkey': 'TR', 'Vietnam': 'VN', 'Indonesia': 'ID',
-    'Malaysia': 'MY', 'Singapore': 'SG', 'South Korea': 'KR', 'Taiwan': 'TW',
-    'New Zealand': 'NZ', 'Argentina': 'AR', 'Chile': 'CL', 'Peru': 'PE',
-    'Morocco': 'MA', 'Egypt': 'EG', 'Kenya': 'KE', 'South Africa': 'ZA',
-    'Sweden': 'SE', 'Norway': 'NO', 'Denmark': 'DK', 'Finland': 'FI',
-    'Switzerland': 'CH', 'Austria': 'AT', 'Belgium': 'BE', 'Poland': 'PL',
-    'Czech Republic': 'CZ', 'Hungary': 'HU', 'Croatia': 'HR',
-  };
-
-  function flagEmoji(country) {
-    const code = countryCodeMap[country];
-    if (!code) return '';
-    return [...code].map(c => String.fromCodePoint(0x1F1E6 - 65 + c.charCodeAt(0))).join('');
-  }
-
  function formatDate(/** @type {string} */ iso) {
    return new Date(iso).toLocaleDateString('en-US', {
      month: 'short', day: 'numeric', year: 'numeric',
@@ -32,6 +13,16 @@
  let mainPhoto   = $derived(entry.photos[0] ?? null);
  let thumbPhotos = $derived(entry.photos.slice(1, 4));
  let extraCount  = $derived(entry.photos.length > 4 ? entry.photos.length - 4 : 0);
+
+  const transportIcons = {
+    flight: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.18 10a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.09 0h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 8a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21 15z"/></svg>`,
+    train:  `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="16" rx="2"/><path d="M4 12h16M8 20l-2 2M16 20l2 2M12 12v6"/><circle cx="8.5" cy="7.5" r="1"/><circle cx="15.5" cy="7.5" r="1"/></svg>`,
+    bus:    `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6v6M15 6v6M2 12h19.6M18 18h2a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2m0 0v2m8-2v2M6 18h12"/><circle cx="8" cy="18" r="2"/><circle cx="16" cy="18" r="2"/></svg>`,
+    car:    `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v9a2 2 0 0 1-2 2h-2"/><circle cx="7.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>`,
+    ship:   `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1 .6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-9-4-9 4c0 2.9.94 5.34 2.81 7.76"/><path d="M19 13V7a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v6"/><path d="M12 10v4"/><path d="M12 3v4"/></svg>`,
+    walk:   `<svg 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="12" cy="4" r="2"/><path d="m9 22 1-7-2.5-2.5L9 9l6 1-1 4.5L16 22"/><path d="M6.5 11.5 4 12l2 6"/><path d="M17.5 11.5 20 12l-2 6"/></svg>`,
+  };
+  let transportLabel = $derived({ flight: 'Flight', train: 'Train', bus: 'Bus', car: 'Car', ship: 'Ship', walk: 'Walk' }[entry.transport] ?? '');
 </script>

 <li class="v-item">
@@ -110,6 +101,13 @@
      <div class="card-info">
        <span class="city">{entry.location.city}</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>
@@ -126,7 +124,7 @@
    display: flex;
    gap: 14px;
    align-items: flex-start;
-    padding-bottom: 28px;
+    padding-bottom: 48px;
    position: relative;
  }
  .v-item:last-child { padding-bottom: 0; }
@@ -317,4 +315,23 @@
    flex-shrink: 0;
  }
  .dot-sep { color: var(--border-bright); }
+
+  .transport-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    font-weight: 400;
+    padding: 2px 7px;
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    background: var(--bg-subtle);
+    color: var(--text-sub);
+  }
+  .transport-chip--flight { color: #7c3aed; background: rgba(124,58,237,0.07); border-color: rgba(124,58,237,0.2); }
+  .transport-chip--train  { color: #0369a1; background: rgba(3,105,161,0.07);  border-color: rgba(3,105,161,0.2);  }
+  .transport-chip--bus    { color: #15803d; background: rgba(21,128,61,0.07);   border-color: rgba(21,128,61,0.2);  }
+  .transport-chip--car    { color: #b45309; background: rgba(180,83,9,0.07);    border-color: rgba(180,83,9,0.2);   }
+  .transport-chip--ship   { color: #0e7490; background: rgba(14,116,144,0.07);  border-color: rgba(14,116,144,0.2); }
+  .transport-chip--walk   { color: #65a30d; background: rgba(101,163,13,0.07);  border-color: rgba(101,163,13,0.2); }
 </style>
--- a/src/lib/timeline/TimelineToolbar.svelte
+++ b/src/lib/timeline/TimelineToolbar.svelte
@@ -9,34 +9,12 @@
  let { sortKey, onSort } = $props();
 </script>

-<header class="toolbar">
-  <h1 class="page-title">My Journey</h1>
-  <div class="sort-control">
-    <select id="sort-select" onchange={(e) => onSort(e.currentTarget.value)}>
-      {#each sortOptions as opt}
-        <option value={opt.value} selected={opt.value === sortKey}>{opt.label}</option>
-      {/each}
-    </select>
-  </div>
-</header>
+<div class="toolbar"></div>

 <style>
  .toolbar {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 32px;
-    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
-  }
-
-  .page-title {
-    font-size: var(--text-xl);
-    font-weight: 400;
-    color: var(--text-h);
-    letter-spacing: -0.5px;
-    margin: 0;
+    margin-bottom: 0;
  }

  select {
--- a/src/lib/timeline/TimelineView.svelte
+++ b/src/lib/timeline/TimelineView.svelte
@@ -4,10 +4,25 @@
  import TimelineToolbar from './TimelineToolbar.svelte';
  import TimelineCard from './TimelineCard.svelte';
  import JournalDetail from './JournalDetail.svelte';
-  import JournalSummary from './JournalSummary.svelte';
+  import EditForm from './EditForm.svelte';
+  import ShareCard from './ShareCard.svelte';

-  /** @type {import('../stores/journalStore.js').JournalEntry|null} */
-  let selected = $state(null);
+  let { onDetailChange = () => {}, pendingCountry = '', onNewEntryClear = () => {} } = $props();
+  let selectedId = $state(/** @type {string|null} */(null));
+  let view = $state(/** @type {'list'|'detail'|'edit'|'new'} */('list'));
+  let showShare = $state(false);
+  let newEntryCountry = $state('');
+
+  // When App passes a country from the map, capture it locally before clearing
+  $effect(() => {
+    if (pendingCountry) {
+      newEntryCountry = pendingCountry;
+      selectedId = null;
+      view = 'new';
+      onNewEntryClear();
+    }
+  });
+  let selected = $derived(selectedId ? (entries.find(e => e.id === selectedId) ?? null) : null);

  let entries = $state(get(journals));
  $effect(() => {
@@ -36,22 +51,64 @@

 <div class="journal-page">

-  {#if selected}
+  {#if view === 'new'}
    <div class="detail-scroll">
-      <JournalDetail entry={selected} onBack={() => (selected = null)} />
+      <EditForm initialCountry={newEntryCountry} onBack={() => { view = 'list'; newEntryCountry = ''; onDetailChange(false); }} />
+    </div>
+  {:else if view === 'edit' && selected}
+    <div class="detail-scroll">
+      <EditForm entry={selected} onBack={() => { view = 'detail'; }} />
+    </div>
+  {:else if view === 'detail' && selected}
+    <div class="detail-scroll">
+      <JournalDetail
+        entry={selected}
+        onBack={() => { selectedId = null; view = 'list'; onDetailChange(false); }}
+        onEdit={() => { view = 'edit'; }}
+      />
    </div>
  {:else}
-    <aside class="left-panel">
-      <JournalSummary entries={sortedEntries} />
-    </aside>
-
    <div class="right-panel">
      <div class="right-inner">
+        <div class="page-header">
+          <h1 class="page-title">My Journey</h1>
+          <button class="new-btn" onclick={() => { view = 'new'; }}>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
+              <path d="M12 5v14M5 12h14"/>
+            </svg>
+            New entry
+          </button>
+        </div>
+
        <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />

+        {#if sortedEntries.length > 0}
+          <button class="share-nudge" onclick={() => (showShare = true)}>
+            <span class="nudge-left">
+              <svg width="13" height="13" 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>
+              Share your journey
+            </span>
+            <span class="nudge-right">
+              {sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'} · save as PNG →
+            </span>
+          </button>
+        {/if}
+
        {#if sortedEntries.length === 0}
          <p class="empty">No journal entries yet.</p>
        {:else}
+          <div class="sort-row">
+            <span class="sort-label">Sort by</span>
+            <select class="sort-select" onchange={(e) => (sortKey = e.currentTarget.value)}>
+              <option value="date-desc" selected={sortKey === 'date-desc'}>Newest first</option>
+              <option value="date-asc"  selected={sortKey === 'date-asc'}>Oldest first</option>
+              <option value="country-asc"  selected={sortKey === 'country-asc'}>Country A → Z</option>
+              <option value="country-desc" selected={sortKey === 'country-desc'}>Country Z → A</option>
+            </select>
+          </div>
          <ol class="v-list">
            {#each sortedEntries as entry, i (entry.id)}
              {#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
@@ -59,7 +116,7 @@
                  <span class="year-label">{getYear(entry.date)}</span>
                </li>
              {/if}
-              <TimelineCard {entry} onClick={() => (selected = entry)} />
+              <TimelineCard {entry} onClick={() => { selectedId = entry.id; view = 'detail'; onDetailChange(true); }} />
            {/each}
          </ol>
        {/if}
@@ -73,6 +130,10 @@

 </div>

+{#if showShare}
+  <ShareCard entries={sortedEntries} onClose={() => (showShare = false)} />
+{/if}
+
 <style>
  .journal-page {
    flex: 1;
@@ -140,16 +201,15 @@

  /* Year marker */
  .year-marker {
-    padding: 32px 0 14px;
+    padding: 24px 0 14px;
  }
  .year-label {
-    font-size: 13px;
-    font-weight: 400;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--text);
-    border-left: 2px solid var(--accent);
-    padding-left: 10px;
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: #7c3aed;
+    border-left: 3px solid #7c3aed;
+    padding-left: 12px;
  }

  .page-footer {
@@ -165,4 +225,106 @@
  }

  .empty { text-align: center; color: var(--text-sub); padding: 80px 0; }
+
+  .sort-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding-top: 20px;
+  }
+  .sort-label {
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-sub);
+  }
+  .sort-select {
+    font-family: var(--sans);
+    font-size: 11px;
+    font-weight: 300;
+    letter-spacing: 0.04em;
+    padding: 4px 24px 4px 10px;
+    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 8px center;
+  }
+  .sort-select:hover { border-color: var(--border-bright); color: var(--text-h); }
+
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .page-title {
+    font-size: var(--text-xl);
+    font-weight: 400;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0;
+  }
+
+  .new-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    color: #fff;
+    background: var(--accent);
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    padding: 7px 14px;
+    cursor: pointer;
+    transition: background 0.15s;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .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/WorldMap.svelte
+++ b/src/lib/world-map/WorldMap.svelte
@@ -5,6 +5,8 @@
  import worldData from 'world-atlas/countries-50m.json';
  import { getSelected, toggle, setTotalCount, getHomeCountryCode } from '../layout/selection.svelte.js';

+  let { onCountryClick = (_name) => {} } = $props();
+
  const TERRITORY_PARENT = {
    '016': '840', // American Samoa -> United States
    '060': '826', // Bermuda -> United Kingdom
@@ -133,6 +135,7 @@
        .on('click', (event, d) => {
          toggle(effId(d));
          updateFill(d3.select(event.currentTarget));
+          onCountryClick(d.properties.name);
        })
        .on('mouseenter', (event, d) => {
          const s = getSelected();