added firebase & changed main tab color, uyear stand out

.claude/launch.json

@@ -3,6 +3,7 @@
   "configurations": [
     {
       "name": "Map-Jurnal",
+      "cwd": "/Users/haerikim/Desktop/Map-Jurnal",
       "runtimeExecutable": "npm",
       "runtimeArgs": ["run", "dev"],
       "port": 5173,

.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

src/App.svelte

@@ -5,9 +5,10 @@
   import TimelineView from './lib/timeline/TimelineView.svelte';
 
   let screen = $state('worldmap');
+  let inDetail = $state(false);
 </script>
 
-<Layout {screen} onNavigate={(s) => (screen = s)}>
+<Layout {screen} onNavigate={(s) => (screen = s)} hideTopBar={inDetail}>
   {#if screen === 'worldmap'}
     <div class="worldmap-page">
       <div class="map-area">
@@ -16,7 +17,7 @@
       <StatsPanel />
     </div>
   {:else}
-    <TimelineView />
+    <TimelineView onDetailChange={(v) => (inDetail = v)} />
   {/if}
 </Layout>
 

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 {

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">
+<div class="layout" class:no-topbar={hideTopBar}>
-  <TopBar {screen} {onNavigate} />
+  {#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;

src/lib/layout/TopBar.svelte

@@ -58,8 +58,8 @@
   }
   .nav-btn:hover { color: var(--text-h); }
   .nav-btn.active {
-    background: var(--bg);
+    background: #7c3aed;
-    color: var(--text-h);
+    color: #fff;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+    box-shadow: 0 1px 4px rgba(124,58,237,0.25);
   }
 </style>

src/lib/timeline/JournalDetail.svelte

@@ -35,149 +35,214 @@
 
 <div class="detail-layout">
 
-  <!-- ── Left: photo grid ── -->
+  <!-- ── Full-width top bar ── -->
-  <div class="photo-col">
+  <header class="detail-topbar">
-    <!-- Country overlay top-left -->
+    <div class="topbar-left">
-    <div class="photo-country">
+      <button class="topbar-btn" onclick={onBack}>
-      <span class="photo-flag">{flagEmoji(entry.location.country)}</span>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-      <div>
+          <path d="M19 12H5M12 5l-7 7 7 7"/>
-        <p class="photo-city">{entry.location.city}</p>
+        </svg>
-        <p class="photo-country-name">{entry.location.country}</p>
+        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">
+    <div class="topbar-right">
-    {#if entry.photos.length === 0}
+      <button class="topbar-btn" title="Edit entry">
-      <div class="no-photos">No photos</div>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-    {:else}
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-      <div class="photo-grid">
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-        {#each entry.photos as photo, i}
+        </svg>
-          <div class="photo-cell" class:cell-wide={i === 0 && entry.photos.length > 1}>
+        Edit
-            <img src={photo} alt=""
+      </button>
-              onclick={() => lightboxSrc = photo}
+      <button class="topbar-btn topbar-btn--danger" title="Delete entry">
-              onerror={(e) => e.currentTarget.parentElement.classList.add('cell-broken')} />
+        <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 ── -->
+    <!-- Right: Q&A -->
-  <div class="info-col">
+    <div class="info-col">
-    <div class="info-inner">
+      <div class="info-inner">
+        <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-list">
+          <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">
+          <div class="qa-item">
-          <p class="question">When did you go?</p>
+            <p class="question">Who did you go with?</p>
-          <p class="answer">{formatDate(entry.date)}</p>
+            <p class="answer">
-        </div>
+              {#if entry.tripType === 'solo'}
+                Just me — solo trip
+              {:else}
+                With friends
+              {/if}
+            </p>
+          </div>
 
-        <div class="qa-item">
+          <div class="qa-item">
-          <p class="question">How long did you stay?</p>
+            <p class="question">How was it?</p>
-          <p class="answer">{entry.days} {entry.days === 1 ? 'day' : 'days'}</p>
+            <p class="answer memo">{entry.memo}</p>
-        </div>
+          </div>
 
-        <div class="qa-item">
+          <div class="qa-item">
-          <p class="question">Who did you go with?</p>
+            <p class="question">Trip soundtrack</p>
-          <p class="answer">
+            <div class="song-answer">
-            {#if entry.tripType === 'solo'}
+              <div class="song-icon">
-              Just me — solo trip
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            {:else}
+                  <path d="M9 18V5l12-2v13"/>
-              With friends
+                  <circle cx="6" cy="18" r="3"/>
-            {/if}
+                  <circle cx="18" cy="16" r="3"/>
-          </p>
+                </svg>
-        </div>
+              </div>
-
+              <div>
-        <div class="qa-item">
+                <p class="song-title">{entry.song.title}</p>
-          <p class="question">How was it?</p>
+                <p class="song-artist">{entry.song.artist}</p>
-          <p class="answer memo">{entry.memo}</p>
+              </div>
-        </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>
-        </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;
+    flex-direction: column;
-    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;
   }
 
   .photo-scroll {
@@ -199,7 +264,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 +303,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,7 +339,6 @@
     line-height: 1.75;
   }
 
-  /* Song answer */
   .song-answer {
     display: flex;
     align-items: center;
@@ -328,51 +367,6 @@
     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 +387,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>

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 = {};
+    const years     = entries.map(e => new Date(e.date).getFullYear());
-    for (const e of entries) countryCounts[e.location.country] = (countryCounts[e.location.country] ?? 0) + 1;
+    const minYear   = Math.min(...years);
-    const topCountry = Object.entries(countryCounts).sort((a, b) => b[1] - a[1])[0];
+    const maxYear   = Math.max(...years);
-
-    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 yearRange = minYear === maxYear ? `${minYear}` : `${minYear} – ${maxYear}`;
 
-    const latest = [...entries].sort((a, b) => b.date.localeCompare(a.date))[0];
+    return { totalDays, countries, cities, yearRange, tripCount: entries.length };
-
-    return { totalDays, countries, cities, topCountry, soloCount, soloPct, yearRange, latest, tripCount: entries.length };
   });
 </script>
 
 {#if stats}
-<div class="summary">
+<div class="passport">
+  <!-- diagonal pattern -->
 
-  <p class="eyebrow">My Journey</p>
+  <div class="passport-body">
-  <p class="year-range">{stats.yearRange}</p>
+    <!-- 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 -->
+    <!-- Right -->
-  <div class="stat-stack">
+    <div class="passport-right">
-    <div class="stat-row">
+      <div class="field">
-      <span class="stat-num">{stats.countries.length}</span>
+        <span class="field-label">TRIPS</span>
-      <span class="stat-lbl">Countries</span>
+        <span class="field-value">{stats.tripCount}</span>
-    </div>
+      </div>
-    <div class="stat-row">
+      <div class="field">
-      <span class="stat-num">{stats.cities.length}</span>
+        <span class="field-label">COUNTRIES</span>
-      <span class="stat-lbl">Cities</span>
+        <span class="field-value">{stats.countries.length}</span>
-    </div>
+      </div>
-    <div class="stat-row">
+      <div class="field">
-      <span class="stat-num">{stats.totalDays}</span>
+        <span class="field-label">DAYS</span>
-      <span class="stat-lbl">Days abroad</span>
+        <span class="field-value">{stats.totalDays}</span>
-    </div>
+      </div>
-    <div class="stat-row">
-      <span class="stat-num">{stats.tripCount}</span>
-      <span class="stat-lbl">Trips</span>
     </div>
   </div>
 
-  <div class="divider"></div>
+  <!-- MRZ -->
-
+  <div class="mrz">
-  <!-- Most visited -->
+    <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>
-  <div class="insight">
+    <span>{stats.yearRange.replace(' – ','').replace(/\s/g,'')}{'<'.repeat(12)}{String(stats.totalDays).padStart(4,'0')}</span>
-    <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>
   </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 {
+  /* Left column */
-    font-size: var(--text-xs);
+  .passport-left {
-    font-weight: 400;
+    flex: 1;
-    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 {
     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;
   }
-
+  .globe {
-  .stat-num {
+    width: 26px;
-    font-size: var(--text-2xl);
+    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);
+    color: #fff;
-    letter-spacing: -1px;
+    letter-spacing: -0.8px;
     line-height: 1;
   }
 
-  .stat-lbl {
+  /* Divider */
-    font-size: var(--text-xs);
+  .vdivider {
-    font-weight: 300;
+    width: 1px;
-    color: var(--text-sub);
+    background: rgba(255,255,255,0.12);
-    text-transform: uppercase;
+    flex-shrink: 0;
-    letter-spacing: 0.06em;
+    align-self: stretch;
-    text-align: right;
   }
 
-  /* Insights */
+  /* Right column */
-  .insight {
+  .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; }
+  .field-label {
-
+    font-size: 8px;
-  .insight-label {
+    font-weight: 500;
-    font-size: var(--text-xs);
+    letter-spacing: 0.18em;
+    color: #818cf8;
+  }
+  .field-value {
+    font-size: 22px;
     font-weight: 400;
-    text-transform: uppercase;
+    color: #fff;
-    letter-spacing: 0.08em;
+    letter-spacing: -0.5px;
-    color: var(--accent);
+    line-height: 1;
   }
 
-  .insight-value {
+  /* MRZ strip */
-    font-size: var(--text-md);
+  .mrz {
-    font-weight: 400;
+    border-top: 1px solid rgba(255,255,255,0.1);
-    color: var(--text-h);
+    padding: 9px 20px;
-    line-height: 1.2;
+    background: rgba(0,0,0,0.18);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    position: relative;
+    z-index: 1;
   }
-
+  .mrz span {
-  .insight-sub {
+    font-family: var(--mono);
-    font-size: var(--text-sm);
+    font-size: 8px;
-    font-weight: 300;
+    color: #6366f1;
-    color: var(--text);
+    letter-spacing: 0.06em;
-  }
+    white-space: nowrap;
-
-  /* Trip style */
-  .style-section { display: flex; flex-direction: column; gap: 8px; }
-
-  .style-bar {
-    height: 6px;
-    border-radius: 99px;
-    background: var(--lavender-bg);
     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>

src/lib/timeline/TimelineCard.svelte

@@ -126,7 +126,7 @@
     display: flex;
     gap: 14px;
     align-items: flex-start;
-    padding-bottom: 28px;
+    padding-bottom: 48px;
     position: relative;
   }
   .v-item:last-child { padding-bottom: 0; }

src/lib/timeline/TimelineToolbar.svelte

@@ -9,34 +9,12 @@
   let { sortKey, onSort } = $props();
 </script>
 
-<header class="toolbar">
+<div class="toolbar"></div>
-  <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>
 
 <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);
-  }
+    margin-bottom: 0;
-
-  .page-title {
-    font-size: var(--text-xl);
-    font-weight: 400;
-    color: var(--text-h);
-    letter-spacing: -0.5px;
-    margin: 0;
   }
 
   select {

src/lib/timeline/TimelineView.svelte

@@ -7,6 +7,7 @@
   import JournalSummary from './JournalSummary.svelte';
 
   /** @type {import('../stores/journalStore.js').JournalEntry|null} */
+  let { onDetailChange = () => {} } = $props();
   let selected = $state(null);
 
   let entries = $state(get(journals));
@@ -38,20 +39,29 @@
 
   {#if selected}
     <div class="detail-scroll">
-      <JournalDetail entry={selected} onBack={() => (selected = null)} />
+      <JournalDetail entry={selected} onBack={() => { selected = null; onDetailChange(false); }} />
     </div>
   {:else}
-    <aside class="left-panel">
-      <JournalSummary entries={sortedEntries} />
-    </aside>
-
     <div class="right-panel">
       <div class="right-inner">
+        <h1 class="page-title">My Journey</h1>
+
+        <JournalSummary entries={sortedEntries} />
+
         <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
 
         {#if sortedEntries.length === 0}
           <p class="empty">No journal entries yet.</p>
         {:else}
+          <div class="sort-row">
+            <span class="sort-label">Sort by</span>
+            <select class="sort-select" onchange={(e) => (sortKey = e.currentTarget.value)}>
+              <option value="date-desc" selected={sortKey === 'date-desc'}>Newest first</option>
+              <option value="date-asc"  selected={sortKey === 'date-asc'}>Oldest first</option>
+              <option value="country-asc"  selected={sortKey === 'country-asc'}>Country A → Z</option>
+              <option value="country-desc" selected={sortKey === 'country-desc'}>Country Z → A</option>
+            </select>
+          </div>
           <ol class="v-list">
             {#each sortedEntries as entry, i (entry.id)}
               {#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
@@ -59,7 +69,7 @@
                   <span class="year-label">{getYear(entry.date)}</span>
                 </li>
               {/if}
-              <TimelineCard {entry} onClick={() => (selected = entry)} />
+              <TimelineCard {entry} onClick={() => { selected = entry; onDetailChange(true); }} />
             {/each}
           </ol>
         {/if}
@@ -140,16 +150,15 @@
 
   /* Year marker */
   .year-marker {
-    padding: 32px 0 14px;
+    padding: 24px 0 14px;
   }
   .year-label {
-    font-size: 13px;
+    font-size: 18px;
-    font-weight: 400;
+    font-weight: 600;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.04em;
-    text-transform: uppercase;
+    color: #7c3aed;
-    color: var(--text);
+    border-left: 3px solid #7c3aed;
-    border-left: 2px solid var(--accent);
+    padding-left: 12px;
-    padding-left: 10px;
   }
 
   .page-footer {
@@ -165,4 +174,45 @@
   }
 
   .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-title {
+    font-size: var(--text-xl);
+    font-weight: 400;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0 0 16px;
+  }
 </style>