added saving photos to firebase

- EditForm: refactored to 3-step flow matching NewEntryForm (details → photos → memo), transport icons with bigger images
- ShareCard: profile image, "You've colored X% of the world map" hero stat, removed stat boxes and continent bar, font embedding fix for PNG export, renamed brand to Journi
- JourneyView: auto-close after journey complete
- WorldMap: removed home marker icon, fix home marker reposition on resize

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/launch.json

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

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "map-jurnal"
+  }
+}

cors.json

@@ -0,0 +1,7 @@
+[
+  {
+    "origin": ["http://localhost:5173", "https://map-jurnal.web.app", "https://map-jurnal.firebaseapp.com"],
+    "method": ["GET", "HEAD", "PUT", "POST", "DELETE"],
+    "maxAgeSeconds": 3600
+  }
+]

firebase.json

@@ -0,0 +1,5 @@
+{
+  "storage": {
+    "rules": "storage.rules"
+  }
+}

scripts/get-token.mjs

@@ -0,0 +1,11 @@
+import { getAccessToken } from 'firebase-tools';
+import { writeFileSync } from 'fs';
+(async () => {
+  try {
+    const token = await getAccessToken();
+    writeFileSync('token.txt', token);
+    console.log('Token saved');
+  } catch (e) {
+    console.error('Failed:', e.message);
+  }
+})();

scripts/set-cors.mjs

@@ -0,0 +1,36 @@
+import { readFileSync } from 'fs';
+
+const config = JSON.parse(readFileSync(
+  'C:\\Users\\tomas\\.config\\configstore\\firebase-tools.json', 'utf-8'
+));
+const token = config.tokens.access_token;
+
+// Try to list buckets first
+const listRes = await fetch('https://storage.googleapis.com/storage/v1/b?project=map-jurnal', {
+  headers: { Authorization: `Bearer ${token}` },
+});
+const buckets = await listRes.json();
+console.log('Buckets:', buckets.items?.map(b => b.name) ?? buckets);
+
+const bucket = 'map-jurnal.appspot.com';
+const corsConfig = [{
+  origin: ['http://localhost:5173', 'https://map-jurnal.web.app', 'https://map-jurnal.firebaseapp.com'],
+  method: ['GET', 'HEAD', 'PUT', 'POST', 'DELETE'],
+  maxAgeSeconds: 3600,
+}];
+
+const res = await fetch(`https://storage.googleapis.com/storage/v1/b/${bucket}`, {
+  method: 'PATCH',
+  headers: {
+    Authorization: `Bearer ${token}`,
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({ cors: corsConfig }),
+});
+
+if (res.ok) {
+  console.log('CORS configured successfully!');
+} else {
+  const text = await res.text();
+  console.error('Failed:', res.status, text);
+}

scripts/set-cors2.mjs

@@ -0,0 +1,32 @@
+import { readFileSync } from 'fs';
+import { Storage } from '@google-cloud/storage';
+
+const config = JSON.parse(readFileSync('C:/Users/tomas/.config/configstore/firebase-tools.json', 'utf-8'));
+
+const storage = new Storage({
+  projectId: 'map-jurnal',
+  credentials: {
+    client_email: 'firebase-cli@map-jurnal.iam.gserviceaccount.com',
+    // We'll use token-based auth instead
+  },
+});
+
+// Try with direct token
+const token = config.tokens.access_token;
+
+// List all buckets to find the right name
+const [buckets] = await storage.getBuckets({ project: 'map-jurnal' });
+console.log('Buckets:', buckets.map(b => b.name));
+
+if (buckets.length > 0) {
+  const bucket = buckets[0];
+  console.log('Configuring CORS for:', bucket.name);
+  await bucket.setCorsConfiguration([
+    {
+      origin: ['http://localhost:5173', 'https://map-jurnal.web.app', 'https://map-jurnal.firebaseapp.com'],
+      method: ['GET', 'HEAD', 'PUT', 'POST', 'DELETE'],
+      maxAgeSeconds: 3600,
+    },
+  ]);
+  console.log('CORS configured!');
+}

src/App.svelte

@@ -123,7 +123,7 @@
     background: #8b5cf6;
     color: #fff;
     font-size: 15px;
-    font-weight: 600;
+    font-weight: 500;
     gap: 6px;
     cursor: pointer;
     display: flex;

src/lib/auth/LoginOverlay.svelte

@@ -1,6 +1,6 @@
 <script>
   import { signInWithGoogle } from './userStore.svelte.js';
-  import logoImg from '../../assets/logo.png';
+  import logoImg from '../../assets/logo-signin.png';
 </script>
 
 <div class="overlay">

src/lib/layout/TopBar.svelte

@@ -137,7 +137,7 @@
     cursor: pointer;
     font-family: var(--sans);
     font-size: 14px;
-    font-weight: 300;
+    font-weight: 500;
     color: var(--text);
     letter-spacing: 0.01em;
     transition: color 0.2s ease;

src/lib/layout/selection.svelte.js

@@ -1,5 +1,6 @@
 import { journals } from '../stores/journalStore.js';
 import { nameToId } from '../shared/countries.js';
+import { getUserProfile } from '../auth/userStore.svelte.js';
 
 let selected = $state(new Set());
 let totalCountries = $state(0);
@@ -11,6 +12,11 @@ journals.subscribe((entries) => {
     const id = nameToId[e.location?.country];
     if (id) ids.add(id);
   }
+  const profile = getUserProfile();
+  if (profile?.homeCountry) {
+    const homeId = nameToId[profile.homeCountry];
+    if (homeId) ids.add(homeId);
+  }
   selected = ids;
 });
 

src/lib/timeline/detail/EditForm.svelte

@@ -5,6 +5,12 @@
   import { getCitiesForCountry, ALL_CITIES } from '../../shared/cities.js';
   import SearchInput from '../../shared/SearchInput.svelte';
   import PhotoEditor from './PhotoEditor.svelte';
+  import airplaneImg from '../../../assets/airplane.png';
+  import trainImg    from '../../../assets/train.png';
+  import busImg      from '../../../assets/bus.png';
+  import carImg      from '../../../assets/car.png';
+  import shipImg     from '../../../assets/ship.png';
+  import walkImg     from '../../../assets/walk.png';
 
   /**
    * entry = null  →  "new entry" mode
@@ -25,6 +31,8 @@
   let memo       = $state(entry?.memo ?? '');
   let transport  = $state(entry?.transport ?? '');
 
+  let step = $state(1); // 1 | 2 | 3
+
   let errors = $state({
     country: '', cities: '', date: '', days: '', tripType: '', transport: ''
   });
@@ -34,12 +42,12 @@
   }
 
   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'   },
+    { value: 'flight', label: 'Flight', img: airplaneImg },
+    { value: 'train',  label: 'Train',  img: trainImg    },
+    { value: 'bus',    label: 'Bus',    img: busImg      },
+    { value: 'car',    label: 'Car',    img: carImg      },
+    { value: 'ship',   label: 'Ship',   img: shipImg     },
+    { value: 'walk',   label: 'Walk',   img: walkImg     },
   ];
 
   const MEMO_MAX = 100;
@@ -50,7 +58,6 @@
     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 {
@@ -58,7 +65,6 @@
     }
   }
 
-  // Suggest cities — when a country is selected show only cities from that country.
   let allEntries = $derived(getEntries());
   let cityOptions = $derived(
     country.trim()
@@ -78,17 +84,27 @@
     cities = cities.filter(x => x !== c);
   }
 
-  async function save() {
-    clearErrors();
-    let hasError = false;
-    if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
-    if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
-    if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
-    if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
-    if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
-    if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
-    if (hasError) return;
+  function nextStep() {
+    if (step === 1) {
+      clearErrors();
+      let hasError = false;
+      if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
+      if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
+      if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
+      if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
+      if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
+      if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
+      if (hasError) return;
+    }
+    step++;
+  }
 
+  function prevStep() {
+    if (step === 1) onBack();
+    else step--;
+  }
+
+  async function save() {
     try {
       if (isNew) {
         await addEntry({
@@ -119,149 +135,162 @@
   }
 </script>
 
-<div class="edit-layout">
+<div class="layout">
 
-  <header class="edit-topbar">
+  <header class="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 class="ghost-btn" onclick={prevStep}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
+        {step === 1 ? 'Back' : 'Previous'}
       </button>
     </div>
-    <span class="topbar-title">{isNew ? 'New trip' : 'Edit'}</span>
+
+    <div class="steps">
+      {#each [1,2,3] as s}
+        <div class="step-dot" class:active={step === s} class:done={step > s}></div>
+      {/each}
+    </div>
+
     <div class="topbar-right">
-      <button class="topbar-btn topbar-btn--save" onclick={save}>Save changes</button>
+      {#if step < 3}
+        <button class="save-btn" onclick={nextStep}>Next</button>
+      {:else}
+        <button class="save-btn" onclick={save}>Save changes</button>
+      {/if}
     </div>
   </header>
 
-  <div class="edit-scroll">
-    <form class="form" onsubmit={(e) => { e.preventDefault(); save(); }}>
+  <div class="scroll">
+    <div class="form">
 
-      <div class="row">
-        <div class="field">
-          <label class="label" for="edit-country">Country <span class="req">*</span></label>
-          <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
-          {#if errors.country}<span class="field-error">{errors.country}</span>{/if}
-        </div>
-        <div class="field">
-          <label class="label" for="edit-city">Cities <span class="req">*</span></label>
-          <div class="city-input-row">
-            <SearchInput id="edit-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
+      {#if step === 1}
+        <h1 class="page-headline">
+          {isNew ? 'Journal your trip!' : 'Edit your trip'}
+        </h1>
+
+        <div class="row">
+          <div class="field">
+            <label class="label" for="edit-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
+            <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
+            {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
+          </div>
+          <div class="field">
+            <label class="label" for="edit-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
+            <SearchInput id="edit-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
+            {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
+            {#if cities.length > 0}
+              <div class="tags">
+                {#each cities as c}
+                  <span class="tag">{c}<button type="button" class="tag-rm" onclick={() => removeCity(c)}>×</button></span>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="field">
+            <label class="label" for="edit-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
+            <input id="edit-date" class="input" type="date" bind:value={date} required />
+            {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
+          </div>
+          <div class="field">
+            <label class="label" for="edit-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
+            <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
+            {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
           </div>
-          {#if errors.cities}<span class="field-error">{errors.cities}</span>{/if}
-          {#if cities.length > 0}
-            <div class="city-tags">
-              {#each cities as c}
-                <span class="city-tag">
-                  {c}
-                  <button type="button" class="city-tag-remove" onclick={() => removeCity(c)}>×</button>
-                </span>
-              {/each}
-            </div>
-          {/if}
         </div>
-      </div>
 
-      <div class="row">
         <div class="field">
-          <label class="label" for="edit-date">Date <span class="req">*</span></label>
-          <input id="edit-date" class="input" type="date" bind:value={date} required />
-          {#if errors.date}<span class="field-error">{errors.date}</span>{/if}
+          <label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
+          <div class="toggle-row">
+            {#each ['solo','friends','family'] as t}
+              <label class="toggle-opt" class:active={tripType === t}>
+                <input type="radio" name="edit-tripType" value={t} bind:group={tripType} />
+                {t === 'solo' ? '🧑 Solo' : t === 'friends' ? '👥 With friends' : '👨‍👩‍👧‍👦 With family'}
+              </label>
+            {/each}
+          </div>
+          {#if errors.tripType}<span class="ferr">{errors.tripType}</span>{/if}
         </div>
+
         <div class="field">
-          <label class="label" for="edit-days">Days <span class="req">*</span></label>
-          <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
-          {#if errors.days}<span class="field-error">{errors.days}</span>{/if}
+          <label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
+          <div class="transport-grid">
+            {#each transportOptions as opt}
+              <label class="toggle-opt transport-opt" class:active={transport === opt.value}>
+                <input type="radio" name="edit-transport" value={opt.value} bind:group={transport} />
+                <img src={opt.img} alt={opt.label} class="transport-img" />
+                {opt.label}
+              </label>
+            {/each}
+          </div>
+          {#if errors.transport}<span class="ferr">{errors.transport}</span>{/if}
         </div>
-      </div>
 
-      <div class="field">
-        <label class="label">Trip type</label>
-        <div class="toggle-row">
-          <label class="toggle-opt" class:active={tripType === 'solo'}>
-            <input type="radio" name="tripType" value="solo" bind:group={tripType} /> Solo
-          </label>
-          <label class="toggle-opt" class:active={tripType === 'friends'}>
-            <input type="radio" name="tripType" value="friends" bind:group={tripType} /> With friends
-          </label>
-          <label class="toggle-opt" class:active={tripType === 'family'}>
-            <input type="radio" name="tripType" value="family" bind:group={tripType} /> With family
-          </label>
+      {:else if step === 2}
+        <h2 class="step-title">Photos</h2>
+        <p class="step-sub">Optional — add or update photos from your trip</p>
+        <PhotoEditor {photos} onchange={(p) => (photos = p)} />
+
+      {:else}
+        <h2 class="step-title">How was it?</h2>
+        <p class="step-sub">Optional — write a note about your trip</p>
+        <div class="field">
+          <div class="label-row">
+            <label class="label" for="edit-memo">Your notes</label>
+            <span class="char-count" class:over={memoOverLimit}>{wordCount} / {MEMO_MAX} words</span>
+          </div>
+          <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="8" value={memo} oninput={onMemoInput}></textarea>
         </div>
-        {#if errors.tripType}<span class="field-error">{errors.tripType}</span>{/if}
-      </div>
+      {/if}
 
-      <div class="field">
-        <label class="label">How did you get there?</label>
-        <div class="transport-grid">
-          {#each transportOptions as opt}
-            <label class="transport-opt" class:active={transport === opt.value}>
-              <input type="radio" name="transport" value={opt.value} bind:group={transport} />
-              {opt.label}
-            </label>
-          {/each}
-        </div>
-        {#if errors.transport}<span class="field-error">{errors.transport}</span>{/if}
-      </div>
-
-      <PhotoEditor {photos} onchange={(p) => (photos = p)} />
-
-      <div class="field">
-        <div class="label-row">
-          <label class="label" for="edit-memo">How was it?</label>
-          <span class="char-count" class:over={memoOverLimit}>{wordCount} / {MEMO_MAX} words</span>
-        </div>
-        <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="4" value={memo} oninput={onMemoInput}></textarea>
-      </div>
-
-
-    </form>
+    </div>
   </div>
 </div>
 
 <style>
-  .field-error {
-    font-size: 11px;
-    color: #dc2626;
-    margin-top: 2px;
-  }
-
-  .edit-layout {
+  .layout {
     display: flex;
     flex-direction: column;
     height: 100%;
-    overflow: hidden;
     background: var(--bg);
+    font-family: var(--sans);
   }
 
-  .edit-topbar {
+  .topbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
-    height: 60px;
+    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;
+    min-width: 110px;
   }
   .topbar-right { justify-content: flex-end; }
 
-  .topbar-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--text-h);
+  .steps {
+    display: flex;
+    gap: 8px;
+    align-items: center;
   }
+  .step-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--border);
+    transition: background 0.2s, transform 0.2s;
+  }
+  .step-dot.active { background: var(--accent); transform: scale(1.25); }
+  .step-dot.done   { background: var(--accent); opacity: 0.35; }
 
-  .topbar-btn {
+  .ghost-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -275,50 +304,59 @@
     padding: 8px 14px;
     cursor: pointer;
     transition: background 0.15s, color 0.15s, border-color 0.15s;
+  }
+  .ghost-btn:hover { background: var(--bg-subtle); border-color: var(--border); color: var(--text-h); }
+
+  .save-btn {
+    font-family: var(--sans);
+    font-size: 15px;
+    font-weight: 400;
+    color: #fff;
+    background: var(--accent);
+    border: 1px solid var(--accent);
+    border-radius: 10px;
+    padding: 8px 18px;
+    cursor: pointer;
+    transition: background 0.15s;
     white-space: nowrap;
   }
-  .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;
-  }
+  .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
 
-  .edit-scroll {
-    flex: 1;
-    overflow-y: auto;
-  }
+  .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;
+    gap: 18px;
   }
 
+  .page-headline {
+    font-size: 28px;
+    font-weight: 500;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0 0 4px;
+  }
+  .step-title {
+    font-size: 20px;
+    font-weight: 400;
+    color: var(--text-h);
+    letter-spacing: -0.3px;
+    margin: 0 0 2px;
+  }
+  .step-sub {
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text-sub);
+    margin: -10px 0 4px;
+  }
+
+  .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;
@@ -330,23 +368,16 @@
     font-weight: 400;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--text-sub);
+    color: var(--text-h);
   }
+  .req { color: var(--accent); font-size: 11px; }
+  .kw  { color: var(--accent); }
+  .ferr { font-size: 13px; font-weight: 500; color: #dc2626; }
 
-  .char-count {
-    font-size: 11px;
-    font-weight: 300;
-    color: var(--text-sub);
-    transition: color 0.15s;
-  }
+  .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;
@@ -359,101 +390,40 @@
     outline: none;
     transition: border-color 0.15s;
     width: 100%;
+    box-sizing: border-box;
   }
   .input:focus { border-color: var(--accent-border); }
 
-  .textarea {
-    resize: vertical;
-    line-height: 1.6;
-  }
-
-  .toggle-row {
-    display: flex;
-    gap: 8px;
-  }
+  .textarea { resize: vertical; line-height: 1.6; }
 
+  .toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
   .toggle-opt {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 13px;
-    font-weight: 300;
-    color: var(--text);
-    padding: 7px 14px;
-    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    font-size: 14px; font-weight: 400; color: var(--text);
+    padding: 12px 14px; border-radius: 10px;
     border: 1px solid var(--border);
-    cursor: pointer;
-    transition: border-color 0.15s, background 0.15s, color 0.15s;
-    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;
+    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 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);
-  }
+  .toggle-opt input { display: none; }
+  .toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+  .toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); }
 
-  .city-input-row {
-    display: flex;
-  }
+  .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+  .transport-opt { flex-direction: column; gap: 6px; padding: 16px 10px; }
+  .transport-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
 
-  .city-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 4px;
+  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+  .tag {
+    display: inline-flex; align-items: center; gap: 4px;
+    font-size: 12px; font-weight: 300; color: var(--accent);
+    background: var(--accent-bg); border: 1px solid var(--accent-border);
+    border-radius: 20px; padding: 3px 10px 3px 12px;
   }
-  .city-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    font-weight: 300;
-    color: var(--accent);
-    background: var(--accent-bg);
-    border: 1px solid var(--accent-border);
-    border-radius: 20px;
-    padding: 3px 10px 3px 12px;
+  .tag-rm {
+    background: none; border: none; color: var(--accent);
+    font-size: 15px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.6;
   }
-  .city-tag-remove {
-    background: none;
-    border: none;
-    color: var(--accent);
-    font-size: 15px;
-    line-height: 1;
-    cursor: pointer;
-    padding: 0;
-    opacity: 0.6;
-    transition: opacity 0.15s;
-  }
-  .city-tag-remove:hover { opacity: 1; }
-
+  .tag-rm:hover { opacity: 1; }
 </style>

src/lib/timeline/detail/NewEntryForm.svelte

@@ -178,18 +178,24 @@
     <div class="form">
 
       {#if step === 1}
-        <!-- ── STEP 1: Details ── -->
-        <h2 class="step-title">Trip details</h2>
+        <!-- headline -->
+        <h1 class="page-headline">
+          {#if country.trim()}
+            Journal your trip to <strong>{country}</strong>!
+          {:else}
+            Journal your trip!
+          {/if}
+        </h1>
 
         <div class="row">
           <div class="field">
-            <label class="label" for="nc-country">Where did you go? <span class="req">*</span></label>
+            <label class="label" for="nc-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
             <SearchInput id="nc-country" bind:value={country} options={countryNames} />
             {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
           </div>
           <div class="field">
-            <label class="label" for="nc-city">Which cities did you visit? <span class="req">*</span></label>
-            <SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} onblurcommit={addCity} />
+            <label class="label" for="nc-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
+            <SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
             {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
             {#if cities.length > 0}
               <div class="tags">
@@ -203,19 +209,19 @@
 
         <div class="row">
           <div class="field">
-            <label class="label" for="nc-date">When did you travel? <span class="req">*</span></label>
+            <label class="label" for="nc-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
             <input id="nc-date" class="input" type="date" bind:value={date} />
             {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
           </div>
           <div class="field">
-            <label class="label" for="nc-days">How long was the trip? <span class="req">*</span></label>
+            <label class="label" for="nc-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
             <input id="nc-days" class="input" type="number" min="1" bind:value={days} />
             {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
           </div>
         </div>
 
         <div class="field">
-          <label class="label">Who did you travel with? <span class="req">*</span></label>
+          <label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
           <div class="toggle-row">
             {#each ['solo','friends','family'] as t}
               <label class="toggle-opt" class:active={tripType === t}>
@@ -228,13 +234,13 @@
         </div>
 
         <div class="field">
-          <label class="label">How did you get there? <span class="req">*</span></label>
+          <label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
           <div class="transport-grid">
             {#each transportOptions as opt}
-              <label class="transport-opt" class:active={transport === opt.value}>
+              <label class="toggle-opt" class:active={transport === opt.value}>
                 <input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
                 <img src={opt.img} alt={opt.label} class="transport-img" />
-                <span class="transport-label">{opt.label}</span>
+                {opt.label}
               </label>
             {/each}
           </div>
@@ -249,7 +255,12 @@
 
       {:else}
         <!-- ── STEP 3: Questions ── -->
-        <h2 class="step-title">Your memories</h2>
+        <h2 class="step-title">
+          Your memories{cities.length > 0 ? ` of ${cities.join(', ')}` : country.trim() ? ` of ${country}` : ''}
+        </h2>
+        {#if cities.length > 0 || country.trim()}
+          <p class="step-sub">{cities.join(', ')}{cities.length > 0 && country.trim() ? `, ${country}` : country.trim()}</p>
+        {/if}
 
         {#each questions as q, i}
           <div class="q-card">
@@ -316,13 +327,13 @@
     align-items: center;
     gap: 6px;
     font-family: var(--sans);
-    font-size: 13px;
-    font-weight: 300;
+    font-size: 15px;
+    font-weight: 400;
     color: var(--text);
     background: none;
     border: 1px solid transparent;
-    border-radius: 8px;
-    padding: 6px 10px;
+    border-radius: 10px;
+    padding: 8px 14px;
     cursor: pointer;
     transition: background 0.15s, color 0.15s, border-color 0.15s;
   }
@@ -330,20 +341,19 @@
 
   .save-btn {
     font-family: var(--sans);
-    font-size: 13px;
-    font-weight: 300;
+    font-size: 15px;
+    font-weight: 400;
     color: #fff;
     background: var(--accent);
     border: 1px solid var(--accent);
-    border-radius: 8px;
-    padding: 7px 14px;
+    border-radius: 10px;
+    padding: 8px 18px;
     cursor: pointer;
     transition: background 0.15s;
     white-space: nowrap;
   }
   .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
   .save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-  .save-err { font-size: 12px; color: #ef4444; margin-top: 4px; display: block; text-align: right; }
 
   /* scroll + form */
   .scroll { flex: 1; overflow-y: auto; }
@@ -364,6 +374,14 @@
     letter-spacing: -0.3px;
     margin: 0 0 2px;
   }
+  .page-headline {
+    font-size: 28px;
+    font-weight: 500;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0 0 4px;
+  }
+  .page-headline strong { font-weight: 600; }
   .step-sub {
     font-size: 13px;
     font-weight: 300;
@@ -384,27 +402,9 @@
     color: var(--text-sub);
   }
   .req { color: var(--accent); font-size: 11px; }
+  .kw { color: var(--accent); }
 
-  .ferr { font-size: 11px; color: #dc2626; }
-
-  .combo-select, .city-text {
-    font-family: var(--sans);
-    font-size: 14px;
-    font-weight: 300;
-    color: var(--text-h);
-    background: var(--bg-subtle);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 8px 12px;
-    outline: none;
-    transition: border-color 0.15s;
-    width: 100%;
-    box-sizing: border-box;
-    display: block;
-  }
-  .combo-select:focus, .city-text:focus { border-color: var(--accent-border); }
-  .combo-select { margin-bottom: 6px; cursor: pointer; }
-  .city-text { margin-top: 0; }
+  .ferr { font-size: 13px; font-weight: 500; color: #dc2626; }
 
   .input {
     font-family: var(--sans);
@@ -422,33 +422,23 @@
   }
   .input:focus { border-color: var(--accent-border); }
 
-  .toggle-row { display: flex; gap: 8px; }
+  .toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
   .toggle-opt {
-    display: flex; align-items: center; gap: 6px;
-    font-size: 13px; font-weight: 300; color: var(--text);
-    padding: 7px 14px; border-radius: 8px;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+    font-size: 14px; font-weight: 400; color: var(--text);
+    padding: 16px 10px; border-radius: 10px;
     border: 1px solid var(--border);
-    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
+    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
     background: var(--bg-subtle);
+    white-space: nowrap;
+    flex: 1;
   }
   .toggle-opt input { display: none; }
-  .toggle-opt.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }
+  .toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+  .toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); }
 
   .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
-  .transport-opt {
-    display: flex; flex-direction: column; align-items: center; justify-content: center;
-    gap: 8px; aspect-ratio: 1;
-    border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle);
-    cursor: pointer; transition: border-color 0.15s, background 0.15s;
-  }
-  .transport-opt input { display: none; }
-  .transport-opt.active { border-color: var(--accent-border); background: var(--accent-bg); }
-  .transport-img { width: 60px; height: 60px; object-fit: contain; }
-  .transport-label {
-    font-size: 12px; font-weight: 300; color: var(--text-sub);
-    letter-spacing: 0.02em;
-  }
-  .transport-opt.active .transport-label { color: var(--accent); }
+  .transport-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
 
   .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
   .tag {
@@ -467,11 +457,12 @@
   .q-card {
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    background: var(--bg-subtle);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 20px;
+    gap: 14px;
+    background: var(--bg);
+    border: 1.5px solid var(--accent-border);
+    border-radius: 16px;
+    padding: 28px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
   }
   .q-text {
     font-size: 14px;
@@ -483,10 +474,10 @@
   }
   .q-input {
     font-family: var(--sans);
-    font-size: 13px;
-    font-weight: 300;
+    font-size: 16px;
+    font-weight: 400;
     color: var(--text-h);
-    background: var(--bg);
+    background: var(--bg-subtle);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 10px 12px;

src/lib/timeline/detail/PhotoEditor.svelte

@@ -7,18 +7,23 @@
 
   let fileInput;
   let uploading = $state(false);
+  let uploadError = $state('');
 
   function remove(index) {
     onchange(photos.filter((_, i) => i !== index));
+    uploadError = '';
   }
 
   async function addFiles(e) {
     const files = Array.from(e.currentTarget.files ?? []);
     if (!files.length) return;
     uploading = true;
+    uploadError = '';
     try {
       const urls = await Promise.all(files.map(uploadPhoto));
       onchange([...photos, ...urls]);
+    } catch (err) {
+      uploadError = err?.message ?? 'Upload failed. Check Firebase Storage rules.';
     } finally {
       uploading = false;
       e.currentTarget.value = '';
@@ -68,6 +73,10 @@
       </button>
     </div>
   {/if}
+
+  {#if uploadError}
+    <div class="upload-error">{uploadError}</div>
+  {/if}
 </div>
 
 <style>
@@ -183,4 +192,15 @@
     transition: border-color 0.15s, color 0.15s;
   }
   .add-cell:hover { border-color: var(--accent-border); color: var(--accent); }
+
+  .upload-error {
+    font-size: 12px;
+    color: #ef4444;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 6px;
+    padding: 8px 10px;
+    line-height: 1.4;
+    word-break: break-word;
+  }
 </style>

src/lib/timeline/view/ShareCard.svelte

@@ -1,5 +1,7 @@
 <script>
   import { toPng } from 'html-to-image';
+  import { getTotalCount } from '../../layout/selection.svelte.js';
+  import profileImg from '../../../assets/profile.png';
 
   /** @type {{ entries: import('../shared/types.js').JournalEntry[], onClose: () => void }} */
   let { entries, onClose } = $props();
@@ -85,11 +87,59 @@
     };
   });
 
+  async function getFontDataUrl() {
+    // Get the actual woff2 URL the browser resolved for Bricolage Grotesque
+    for (const font of document.fonts) {
+      if (font.family.includes('Bricolage')) {
+        // font.status === 'loaded' means the browser has it
+        await font.load();
+      }
+    }
+    // Fetch the Google Fonts CSS to extract the real woff2 URL
+    const cssRes = await fetch(
+      'https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500&display=swap',
+      { headers: { 'User-Agent': 'Mozilla/5.0' } }
+    );
+    const css = await cssRes.text();
+    const match = css.match(/url\((https:\/\/fonts\.gstatic\.com[^)]+\.woff2)\)/);
+    if (!match) return null;
+    const fontRes = await fetch(match[1]);
+    const blob = await fontRes.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(blob);
+    });
+  }
+
   async function download() {
     if (!cardEl) return;
     downloading = true;
     try {
-      const dataUrl = await toPng(cardEl, { pixelRatio: 3 });
+      await document.fonts.ready;
+
+      let fontFaceRule = '';
+      try {
+        const fontData = await getFontDataUrl();
+        if (fontData) {
+          fontFaceRule = `@font-face { font-family: 'Bricolage Grotesque'; src: url('${fontData}') format('woff2'); font-weight: 100 900; font-style: normal; }`;
+        }
+      } catch {}
+
+      // Inject font as a real <style> inside the card so html-to-image clones it
+      let injected = null;
+      if (fontFaceRule) {
+        injected = document.createElement('style');
+        injected.textContent = fontFaceRule;
+        cardEl.prepend(injected);
+      }
+
+      const opts = { pixelRatio: 3 };
+      await toPng(cardEl, opts); // first pass loads resources
+      const dataUrl = await toPng(cardEl, opts);
+
+      if (injected) injected.remove();
+
       const a = document.createElement('a');
       a.download = 'my-journey.png';
       a.href = dataUrl;
@@ -135,35 +185,22 @@
 
         <!-- Header -->
         <div class="card-header">
-          <span class="card-brand">MAP JOURNAL</span>
+          <span class="card-brand">JOURNI</span>
           <span class="card-year">{fmtYear(stats.yearStart, stats.yearEnd)}</span>
         </div>
 
+        <!-- Profile -->
+        <div class="profile-wrap">
+          <img class="profile-img" src={profileImg} alt="profile" />
+        </div>
+
         <!-- Hero stat -->
         <div class="hero">
-          <p class="hero-num">{stats.totalDays}</p>
-          <p class="hero-label">days of travel</p>
+          <p class="hero-pre">You've colored</p>
+          <p class="big-num">{getTotalCount() > 0 ? Math.round((stats.countries.length / getTotalCount()) * 100) : 0}%</p>
+          <p class="hero-post">of the world map.</p>
         </div>
 
-        <!-- Stat grid -->
-        <div class="stat-grid">
-          <div class="stat-box">
-            <p class="stat-num">{stats.countries.length}</p>
-            <p class="stat-desc">countries</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{stats.cities.length}</p>
-            <p class="stat-desc">cities</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{stats.flightHrs}h</p>
-            <p class="stat-desc">in the air</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{Object.keys(stats.contDays).length}</p>
-            <p class="stat-desc">continents</p>
-          </div>
-        </div>
 
         <!-- Fun facts -->
         <div class="facts">
@@ -197,29 +234,10 @@
           </div>
         </div>
 
-        <!-- Continent bar -->
-        {#if Object.keys(stats.contDays).length > 0}
-          <div class="cont-section">
-            <div class="cont-bar">
-              {#each Object.entries(stats.contDays).sort((a,b)=>b[1]-a[1]) as [cont, days]}
-                <div class="cont-seg" style="flex:{days}; background: var(--cont-{cont.replace('. ','').toLowerCase().replace(' ','-')}, #818cf8)"
-                  title="{cont}: {days}d"></div>
-              {/each}
-            </div>
-            <div class="cont-legend">
-              {#each Object.entries(stats.contDays).sort((a,b)=>b[1]-a[1]) as [cont, days]}
-                <span class="cont-item">
-                  <span class="cont-dot" style="background: var(--cont-{cont.replace('. ','').toLowerCase().replace(' ','-')}, #818cf8)"></span>
-                  {cont} {days}d
-                </span>
-              {/each}
-            </div>
-          </div>
-        {/if}
 
         <!-- Footer -->
         <div class="card-footer">
-          <span>mapjournal.app</span>
+          <span>journi</span>
         </div>
 
       </div>
@@ -352,25 +370,41 @@
     letter-spacing: 0.06em;
   }
 
+  /* Profile */
+  .profile-wrap {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+  .profile-img {
+    width: 192px;
+    height: 192px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
   /* Hero */
   .hero {
     position: relative;
     z-index: 1;
     margin-bottom: 28px;
   }
-  .hero-num {
-    font-size: 88px;
-    font-weight: 400;
-    line-height: 1;
-    letter-spacing: -4px;
-    color: #fff;
-  }
-  .hero-label {
+  .hero-pre, .hero-post {
     font-size: 16px;
     font-weight: 300;
-    color: #a5b4fc;
+    color: rgba(255,255,255,0.6);
     letter-spacing: 0.04em;
-    margin-top: 4px;
+    margin: 0;
+  }
+  .big-num {
+    font-size: 88px;
+    font-weight: 500;
+    color: #fff;
+    letter-spacing: -4px;
+    line-height: 1;
+    margin: 8px 0;
   }
 
   /* Stat grid */
@@ -388,6 +422,10 @@
     border-radius: 10px;
     padding: 10px 8px;
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
   .stat-num {
     font-size: 22px;

src/lib/timeline/view/SharePreview.svelte

@@ -42,10 +42,6 @@
 
   <div class="pc-header">
     <span class="pc-brand">MAP JOURNAL</span>
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pc-share-icon">
-      <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
-      <path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
-    </svg>
   </div>
 
   <div class="pc-hero">
@@ -83,7 +79,10 @@
     </div>
   {/if}
 
-  <div class="pc-cta">Share your journey →</div>
+  <svg class="pc-share-icon-corner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
+    <path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
+  </svg>
 
 </button>
 
@@ -143,7 +142,13 @@
     letter-spacing: 0.2em;
     color: #a5b4fc;
   }
-  .pc-share-icon { color: #a5b4fc; flex-shrink: 0; }
+  .pc-share-icon-corner {
+    position: absolute;
+    bottom: 14px;
+    right: 14px;
+    color: #a5b4fc;
+    z-index: 1;
+  }
 
   .pc-hero {
     position: relative;
@@ -231,5 +236,6 @@
     letter-spacing: 0.04em;
     padding-top: 4px;
     border-top: 1px solid rgba(255,255,255,0.08);
+    text-align: right;
   }
 </style>

src/lib/timeline/view/TimelineCard.svelte

@@ -1,16 +1,28 @@
 <script>
   import { flagEmoji } from '../../shared/countries.js';
+  import default1 from '../../../assets/default-1.jpeg';
+  import default2 from '../../../assets/default-2.jpeg';
+  import default3 from '../../../assets/default-3.jpeg';
 
   /** @type {{ entry: import('../shared/types.js').JournalEntry, onClick: () => void }} */
   let { entry, onClick } = $props();
 
+  const defaults = [default1, default2, default3];
+
   function formatDate(/** @type {string} */ iso) {
     return new Date(iso).toLocaleDateString('en-US', {
       month: 'short', day: 'numeric', year: 'numeric',
     });
   }
 
-  let mainPhoto   = $derived(entry.photos[0] ?? null);
+  // Pick a stable random default based on the entry id
+  function defaultPhoto(id) {
+    let hash = 0;
+    for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
+    return defaults[hash % defaults.length];
+  }
+
+  let mainPhoto   = $derived(entry.photos[0] ?? defaultPhoto(entry.id));
   let thumbPhotos = $derived(entry.photos.slice(1, 4));
   let extraCount  = $derived(entry.photos.length > 4 ? entry.photos.length - 4 : 0);
 
@@ -29,10 +41,11 @@
   <div class="v-dot" aria-hidden="true"></div>
 
   <div class="v-content">
-    <!-- Country above card -->
+    <!-- Country + cities above card -->
     <div class="above-card">
       <span class="flag">{flagEmoji(entry.location.country)}</span>
       <span class="country-name">{entry.location.country}</span>
+      <span class="city-inline">· {entry.location.cities.join(', ')}</span>
     </div>
 
     <!-- Card -->
@@ -40,36 +53,10 @@
       onclick={onClick}
       onkeydown={(e) => e.key === 'Enter' && onClick()}>
 
-      <!-- Trip badge — top-right of card, outside photo -->
-      <span class="trip-badge trip-badge--{entry.tripType}">
-        {entry.tripType === 'solo' ? 'Solo' : entry.tripType === 'family' ? 'Family' : 'Friends'}
-      </span>
-
       <!-- Photos -->
       <div class="photo-grid" class:has-thumbs={thumbPhotos.length > 0}>
         <div class="photo-main">
-          {#if mainPhoto}
-            <img src={mainPhoto} alt="" loading="lazy"
-              onerror={(e) => {
-                e.currentTarget.style.display = 'none';
-                e.currentTarget.nextElementSibling.style.display = 'flex';
-              }} />
-            <div class="photo-fallback" style="display:none">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
-                <rect x="3" y="3" width="18" height="18" rx="3"/>
-                <circle cx="8.5" cy="8.5" r="1.5"/>
-                <path d="M21 15l-5-5L5 21"/>
-              </svg>
-            </div>
-          {:else}
-            <div class="photo-fallback">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
-                <rect x="3" y="3" width="18" height="18" rx="3"/>
-                <circle cx="8.5" cy="8.5" r="1.5"/>
-                <path d="M21 15l-5-5L5 21"/>
-              </svg>
-            </div>
-          {/if}
+          <img src={mainPhoto} alt="" loading="lazy" />
         </div>
 
         {#if thumbPhotos.length > 0}
@@ -99,18 +86,17 @@
 
       <!-- Info bar -->
       <div class="card-info">
-        <span class="city">{entry.location.cities.join(', ')}</span>
+        <span class="days-label">{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
         <div class="meta">
           {#if entry.transport}
             <span class="transport-chip transport-chip--{entry.transport}">
               {@html transportIcons[entry.transport] ?? ''}
               {transportLabel}
             </span>
-            <span class="dot-sep">·</span>
           {/if}
-          <span>{formatDate(entry.date)}</span>
-          <span class="dot-sep">·</span>
-          <span>{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
+          <span class="trip-badge trip-badge--{entry.tripType}">
+            {entry.tripType === 'solo' ? 'Solo' : entry.tripType === 'family' ? 'Family' : 'Friends'}
+          </span>
         </div>
       </div>
 
@@ -172,6 +158,14 @@
     color: var(--text-h);
     letter-spacing: -0.2px;
   }
+  .city-inline {
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text-sub);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   /* ── Card ── */
   .entry-card {
@@ -191,22 +185,18 @@
     transform: translateY(-2px);
   }
 
-  /* ── Trip badge — absolute top-right of card ── */
+  /* ── Trip badge — inline in info bar ── */
   .trip-badge {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 2;
     font-size: 11px;
-    font-weight: 300;
-    padding: 3px 10px;
+    font-weight: 400;
+    padding: 2px 8px;
     border-radius: 20px;
-    letter-spacing: 0.04em;
-    backdrop-filter: blur(6px);
+    letter-spacing: 0.03em;
+    white-space: nowrap;
   }
-  .trip-badge--solo    { background: rgba(245,158,11,0.85); color: #fff; }
-  .trip-badge--friends { background: rgba(124,58,237,0.85); color: #fff; }
-  .trip-badge--family  { background: rgba(16,185,129,0.85); color: #fff; }
+  .trip-badge--solo    { background: rgba(245,158,11,0.12); color: #b45309; border: 1px solid rgba(245,158,11,0.25); }
+  .trip-badge--friends { background: rgba(124,58,237,0.07); color: #7c3aed; border: 1px solid rgba(124,58,237,0.2); }
+  .trip-badge--family  { background: rgba(16,185,129,0.08); color: #059669; border: 1px solid rgba(16,185,129,0.2); }
 
   /* ── Photo grid — fixed height, always consistent ── */
   .photo-grid {
@@ -294,16 +284,12 @@
     padding: 10px 14px;
     background: var(--bg);
     border-top: 1px solid var(--border);
-    gap: 8px;
     min-height: 44px;
   }
-  .city {
-    font-size: 13px;
+  .days-label {
+    font-size: 12px;
     font-weight: 300;
-    color: var(--text);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    color: var(--text-sub);
   }
   .meta {
     display: flex;

src/lib/world-map/JourneyView.svelte

@@ -5,26 +5,13 @@
   import worldData from 'world-atlas/countries-50m.json';
   import { get } from 'svelte/store';
   import { journals } from '../stores/journalStore.js';
-  import airplaneImg from '../../assets/airplane.png';
-  import trainImg    from '../../assets/train.png';
-  import busImg      from '../../assets/bus.png';
-  import carImg      from '../../assets/car.png';
-  import shipImg     from '../../assets/ship.png';
-  import walkImg     from '../../assets/walk.png';
+  import airplaneImg from '../../assets/airplane-animation.png';
 
   let { onclose, onprogress, mode = 'map', onmodechange } = $props();
 
   const HOME_CODE = '203';
 
-  const TRANSPORT_IMG = {
-    flight: airplaneImg,
-    train:  trainImg,
-    bus:    busImg,
-    car:    carImg,
-    ship:   shipImg,
-    walk:   walkImg,
-  };
-  const PLANE_SIZE = 28;
+  const PLANE_SIZE = 26;
 
   const HOME_COLOR = '#8b5cf6';
   const VISITED_COLOR = '#22c55e';
@@ -229,7 +216,7 @@
 
   async function animateTrip(destCode, destFeature, transport = 'flight') {
     if (!homeFeature || !destFeature) return;
-    const iconSrc = TRANSPORT_IMG[transport] ?? airplaneImg;
+    const iconSrc = airplaneImg;
     const homeCentroid = d3.geoCentroid(homeFeature);
     const destCentroid = d3.geoCentroid(destFeature);
     if (mode === 'map') {
@@ -335,6 +322,7 @@
     if (!isCancelled && myId === animId) {
       isFinished = true; isPlaying = false;
       if (onprogress) onprogress({ index: trips.length, total: trips.length, label: 'Journey complete!' });
+      setTimeout(() => close(), 2500);
     } else if (myId === animId) { isPlaying = false; }
   }
 
@@ -391,11 +379,15 @@
     {#if isFinished}Journey complete!{:else if currentDateLabel}{currentDateLabel}{/if}
   </div>
   <div class="control-bar">
-    <button class="control-btn" onclick={replay}>⟳ Replay</button>
-    <button class="control-btn" onclick={() => switchMode(mode === 'map' ? 'globe' : 'map')}>
-      {mode === 'map' ? '🌍 Globe view' : '🗺 Map view'}
+       <button class="control-btn" onclick={replay}>
+      ⟳ Replay
+    </button>
+    <button class="control-btn" onclick={() => switchMode(mode === 'map' ? 'globe' : 'map')}>
+      {mode === 'map' ? 'Globe animation' : 'Map animation'}
+    </button>
+    <button class="control-btn" onclick={close}>  
+      ✕ Back to Journaling
     </button>
-    <button class="control-btn" onclick={close}>✕ Close</button>
   </div>
 </div>
 

src/lib/world-map/WorldMap.svelte

@@ -5,6 +5,7 @@
   import worldData from 'world-atlas/countries-50m.json';
   import { getSelected, setTotalCount, getFlashing } from '../layout/selection.svelte.js';
   import { getUserProfile } from '../auth/userStore.svelte.js';
+  import { nameToId } from '../shared/countries.js';
   import homeIconUrl from '../../assets/home.png';
   import crayonCursorUrl from '../../assets/logo-cursor.png';
 
@@ -63,15 +64,15 @@
 
   function countryColor(d, sel, homeCode) {
     const id = effId(d);
-    if (!sel.has(id)) return UNVISITED_COLOR;
     if (id === homeCode) return HOME_COLOR;
+    if (!sel.has(id)) return UNVISITED_COLOR;
     return VISITED_COLOR;
   }
 
   function countryHoverColor(d, sel, homeCode) {
     const id = effId(d);
-    if (!sel.has(id)) return UNVISITED_COLOR_HOVER;
     if (id === homeCode) return HOME_COLOR_HOVER;
+    if (!sel.has(id)) return UNVISITED_COLOR_HOVER;
     return VISITED_COLOR_HOVER;
   }
 
@@ -81,15 +82,38 @@
   let _pathFn = null;
   let _countries = null;
 
-  function updateHomeMarker(homeCountryName) {
+
+  function fitProjection(proj, w, h) {
+    proj.fitSize([w, h], { type: 'Sphere' });
+    const s = proj.scale() * 1.5;
+    proj.scale(s).translate([w / 2, h * 0.70]);
+  }
+
+  function getHomeCode() {
+    const name = getUserProfile()?.homeCountry;
+    return name ? (nameToId[name] ?? null) : null;
+  }
+
+  function updateAllFills() {
+    const sel = getSelected();
+    const hc = getHomeCode();
+    if (!_paths || !_g) return;
+    _paths.attr('fill', d => countryColor(d, sel, hc));
+    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
+  }
+
+  $effect(updateAllFills);
+
+  function placeHomeMarker() {
     if (!_g || !_pathFn || !_countries) return;
     _g.selectAll('.home-marker').remove();
-    if (!homeCountryName) return;
-    const found = _countries.find(f => f.properties.name === homeCountryName);
+    const name = getUserProfile()?.homeCountry;
+    if (!name) return;
+    const found = _countries.find(f => f.properties.name === name);
     if (!found) return;
     const [cx, cy] = _pathFn.centroid(found);
     if (isNaN(cx) || isNaN(cy)) return;
-    const SIZE = 24;
+    const SIZE = 14;
     _g.append('image')
       .attr('class', 'home-marker')
       .attr('href', homeIconUrl)
@@ -100,25 +124,7 @@
       .style('pointer-events', 'none');
   }
 
-  $effect(() => {
-    const homeCountry = getUserProfile()?.homeCountry ?? null;
-    updateHomeMarker(homeCountry);
-  });
-
-  function fitProjection(proj, w, h) {
-    proj.fitSize([w, h], { type: 'Sphere' });
-    const s = proj.scale() * 1.5;
-    proj.scale(s).translate([w / 2, h * 0.70]);
-  }
-
-  function updateAllFills() {
-    const sel = getSelected();
-    if (!_paths || !_g) return;
-    _paths.attr('fill', d => countryColor(d, sel, null));
-    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, null));
-  }
-
-  $effect(updateAllFills);
+  $effect(placeHomeMarker);
 
   $effect(() => {
     const flashSet = getFlashing();
@@ -178,16 +184,16 @@
         })
         .on('mouseenter', (event, d) => {
           const s = getSelected();
-          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, null));
+          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, getHomeCode()));
           tooltip.style('display', 'block').text(d.properties.name);
         })
         .on('mousemove', (event) => {
           const [x, y] = d3.pointer(event, frameEl);
-          tooltip.style('left', (x + 10) + 'px').style('top', (y - 28) + 'px');
+          tooltip.style('left', (x + 22) + 'px').style('top', (y - 28) + 'px');
         })
         .on('mouseleave', (event, d) => {
           const s = getSelected();
-          d3.select(event.currentTarget).attr('fill', countryColor(d, s, null));
+          d3.select(event.currentTarget).attr('fill', countryColor(d, s, getHomeCode()));
           tooltip.style('display', 'none');
         });
     }
@@ -215,7 +221,7 @@
             .attr('cx', cx)
             .attr('cy', cy)
             .attr('r', 2)
-            .attr('fill', countryColor(d, getSelected(), null))
+            .attr('fill', countryColor(d, getSelected(), getHomeCode()))
             .attr('stroke', '#94a3b8')
             .attr('stroke-width', 0.5);
           attachEvents(c);
@@ -224,7 +230,7 @@
     }
 
     renderMicrostates();
-    updateHomeMarker(getUserProfile()?.homeCountry ?? null);
+    placeHomeMarker();
 
     const zoom = d3.zoom()
       .scaleExtent([1, 32])
@@ -248,8 +254,9 @@
         fitProjection(projection, width, height);
         const countryPaths = _g.selectAll('path');
         countryPaths.attr('d', path);
-        updateFill(countryPaths);
+        updateAllFills();
         renderMicrostates();
+        placeHomeMarker();
       }
     });
 

storage.rules

@@ -0,0 +1,9 @@
+rules_version = '2';
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{allPaths=**} {
+      allow read: if true;
+      allow write: if request.auth != null;
+    }
+  }
+}