add saving countries

add firebase and sign up
make stats panel colabseble
2026-06-12 18:20:00 +09:00 · 2026-06-12 18:19:45 +09:00 · 2026-06-10 22:56:56 +09:00 · 2026-06-09 16:54:31 +09:00 · 2026-06-09 16:50:37 +09:00 · 2026-06-09 16:18:37 +09:00
17 changed files with 2662 additions and 123 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+.env
 *.local

 # Editor directories and files
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
  },
  "dependencies": {
    "d3": "^7.9.0",
+    "firebase": "^12.14.0",
    "topojson-client": "^3.1.0",
    "world-atlas": "^2.0.2"
  }
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,30 +1,65 @@
 <script>
+  import { initAuth, getLoading, getUser, getNeedsCountry } from './lib/auth/userStore.svelte.js';
+  import LoginOverlay from './lib/auth/LoginOverlay.svelte';
+  import CountryPicker from './lib/auth/CountryPicker.svelte';
  import Layout from './lib/layout/Layout.svelte';
  import WorldMap from './lib/world-map/WorldMap.svelte';
  import StatsPanel from './lib/world-map/StatsPanel.svelte';
-  import Timeline from './lib/Timeline.svelte';
+  import TimelineView from './lib/TimelineView.svelte';

  let screen = $state('worldmap');

  function onNavigate(s) {
    screen = s;
  }
+
+  $effect(() => {
+    initAuth();
+  });
+
+  let loading = $derived(getLoading());
+  let user = $derived(getUser());
+  let needsCountry = $derived(getNeedsCountry());
 </script>

-<Layout {screen} {onNavigate}>
-  {#if screen === 'worldmap'}
-    <div class="worldmap-page">
-      <div class="map-area">
-        <WorldMap />
+{#if loading}
+  <div class="loading-screen">
+    <span class="loading-text">Loading...</span>
+  </div>
+{:else}
+  <Layout {screen} {onNavigate}>
+    {#if screen === 'worldmap'}
+      <div class="worldmap-page">
+        <div class="map-area"><WorldMap /></div>
+        <StatsPanel />
      </div>
-      <StatsPanel />
-    </div>
-  {:else}
-    <Timeline />
+    {:else}
+      <TimelineView />
+    {/if}
+  </Layout>
+
+  {#if !user}
+    <LoginOverlay />
+  {:else if needsCountry}
+    <CountryPicker />
  {/if}
-</Layout>
+{/if}

 <style>
+  .loading-screen {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #0f172a;
+  }
+
+  .loading-text {
+    font: 400 18px/1.4 sans-serif;
+    color: #94a3b8;
+  }
+
  .worldmap-page {
    display: flex;
    flex-direction: row;
--- a/src/lib/JournalDetail.svelte
+++ b/src/lib/JournalDetail.svelte
@@ -0,0 +1,339 @@
+<script>
+  let { entry, onBack } = $props();
+
+  let photoIdx = $state(0);
+
+  function formatDate(/** @type {string} */ iso) {
+    return new Date(iso).toLocaleDateString('en-US', {
+      year: 'numeric', month: 'long', day: 'numeric',
+    });
+  }
+
+  function prev() {
+    photoIdx = (photoIdx - 1 + entry.photos.length) % entry.photos.length;
+  }
+  function next() {
+    photoIdx = (photoIdx + 1) % entry.photos.length;
+  }
+
+  function tripType(/** @type {string[] | undefined} */ companions) {
+    if (!companions || companions.length === 0 || (companions.length === 1 && companions[0] === 'solo')) return 'solo';
+    return 'friends';
+  }
+
+  function companionText(/** @type {string[] | undefined} */ companions) {
+    if (!companions || companions.length === 0 || (companions.length === 1 && companions[0] === 'solo')) return 'Solo';
+    return companions.join(', ');
+  }
+
+  const TRANSPORT_LABELS = {
+    plane: '✈️ Plane',
+    car: '🚗 Car',
+    train: '🚆 Train',
+    boat: '⛵ Boat',
+    bus: '🚌 Bus',
+    other: 'Other',
+  };
+</script>
+
+<article class="detail-page">
+
+  <button class="back-btn" onclick={onBack} aria-label="Back to timeline">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.8"
+        stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    Back
+  </button>
+
+  {#if entry.photos?.length > 0}
+    <div class="hero-gallery">
+      <img
+        class="hero-img"
+        src={entry.photos[photoIdx]}
+        alt="{entry.title} — photo {photoIdx + 1}"
+        loading="lazy"
+      />
+      {#if entry.photos.length > 1}
+        <button class="arr left" onclick={prev} aria-label="Previous photo">‹</button>
+        <button class="arr right" onclick={next} aria-label="Next photo">›</button>
+        <div class="thumb-strip">
+          {#each entry.photos as photo, i}
+            <button
+              class="thumb"
+              class:active={i === photoIdx}
+              onclick={() => (photoIdx = i)}
+              aria-label="Photo {i + 1}"
+            >
+              <img src={photo} alt="" />
+            </button>
+          {/each}
+        </div>
+      {/if}
+      <span class="photo-counter">{photoIdx + 1} / {entry.photos.length}</span>
+    </div>
+  {/if}
+
+  <div class="detail-content">
+    <div class="meta-row">
+      <span class="badge loc-badge">📍 {entry.city}, {entry.countryName}</span>
+      <span class="badge" class:trip-badge--solo={tripType(entry.companions) === 'solo'} class:trip-badge--friends={tripType(entry.companions) === 'friends'}>
+        {tripType(entry.companions) === 'solo' ? '🧍 Solo' : '👥 ' + companionText(entry.companions)}
+      </span>
+      {#if entry.transportation}
+        <span class="badge transport-badge">{TRANSPORT_LABELS[entry.transportation] || entry.transportation}</span>
+      {/if}
+    </div>
+
+    <h1 class="detail-title">{entry.title}</h1>
+
+    <div class="stats-row">
+      <div class="stat">
+        <span class="stat-label">Date</span>
+        <time class="stat-value" datetime={entry.date}>{formatDate(entry.date)}</time>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat">
+        <span class="stat-label">Duration</span>
+        <span class="stat-value">{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
+      </div>
+    </div>
+
+    <hr class="section-divider" />
+    <p class="detail-memo">{entry.memo}</p>
+    <hr class="section-divider" />
+
+    <div class="song-row">
+      <div class="song-icon-wrap" aria-hidden="true">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+          <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
+          <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
+        </svg>
+      </div>
+      <div class="song-text">
+        <span class="song-label">Soundtrack</span>
+        <span class="song-name">{entry.song?.title || ''}</span>
+        <span class="song-artist">{entry.song?.artist || ''}</span>
+      </div>
+    </div>
+  </div>
+</article>
+
+<style>
+  .detail-page {
+    max-width: 680px;
+    margin: 0 auto;
+    padding: 32px 24px 80px;
+    font-family: var(--sans, system-ui, sans-serif);
+  }
+
+  .back-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text, #6b6375);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 6px 0;
+    margin-bottom: 28px;
+    transition: color 0.15s;
+  }
+  .back-btn:hover { color: var(--accent, #aa3bff); }
+
+  .hero-gallery {
+    position: relative;
+    border-radius: 16px;
+    overflow: hidden;
+    background: #000;
+    margin-bottom: 28px;
+  }
+
+  .hero-img {
+    width: 100%;
+    height: 380px;
+    object-fit: cover;
+    display: block;
+  }
+
+  .arr {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0,0,0,0.45);
+    color: #fff;
+    border: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    font-size: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+    z-index: 2;
+  }
+  .arr:hover { background: rgba(0,0,0,0.7); }
+  .arr.left  { left: 14px; }
+  .arr.right { right: 14px; }
+
+  .photo-counter {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
+    background: rgba(0,0,0,0.45);
+    padding: 3px 10px;
+    border-radius: 20px;
+    z-index: 2;
+  }
+
+  .thumb-strip {
+    position: absolute;
+    bottom: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 2;
+  }
+
+  .thumb {
+    width: 52px;
+    height: 36px;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 2px solid transparent;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0.65;
+    background: none;
+    transition: border-color 0.15s, opacity 0.15s;
+  }
+  .thumb.active { border-color: #fff; opacity: 1; }
+  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+  .detail-content { text-align: left; }
+
+  .meta-row {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 14px;
+  }
+
+  .badge {
+    font-size: 12px;
+    font-weight: 500;
+    padding: 4px 10px;
+    border-radius: 20px;
+  }
+
+  .loc-badge {
+    background: var(--accent-bg, rgba(170,59,255,0.08));
+    color: var(--accent, #aa3bff);
+  }
+
+  .trip-badge--solo { background: rgba(245,158,11,0.12); color: #b45309; }
+  .trip-badge--friends { background: rgba(59,130,246,0.12); color: #1d4ed8; }
+
+  .transport-badge {
+    background: rgba(16,185,129,0.12);
+    color: #059669;
+  }
+
+  .detail-title {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-h, #08060d);
+    margin: 0 0 20px;
+    letter-spacing: -0.6px;
+    line-height: 1.2;
+  }
+
+  .stats-row {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 24px;
+  }
+
+  .stat { display: flex; flex-direction: column; gap: 2px; }
+
+  .stat-label {
+    font-size: 11px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    color: var(--text, #6b6375);
+  }
+
+  .stat-value {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-h, #08060d);
+  }
+
+  .stat-divider {
+    width: 1px;
+    height: 32px;
+    background: var(--border, #e5e4e7);
+  }
+
+  .section-divider {
+    border: none;
+    border-top: 1px solid var(--border, #e5e4e7);
+    margin: 24px 0;
+  }
+
+  .detail-memo {
+    font-size: 16px;
+    line-height: 1.75;
+    color: var(--text, #6b6375);
+    margin: 0;
+  }
+
+  .song-row { display: flex; align-items: center; gap: 14px; }
+
+  .song-icon-wrap {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: var(--accent-bg, rgba(170,59,255,0.08));
+    color: var(--accent, #aa3bff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .song-text { display: flex; flex-direction: column; gap: 2px; }
+
+  .song-label {
+    font-size: 11px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    color: var(--text, #6b6375);
+  }
+
+  .song-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-h, #08060d);
+  }
+
+  .song-artist { font-size: 13px; color: var(--text, #6b6375); }
+
+  @media (max-width: 600px) {
+    .detail-page { padding: 24px 16px 60px; }
+    .hero-img { height: 260px; }
+    .detail-title { font-size: 22px; }
+    .thumb { width: 40px; height: 28px; }
+  }
+</style>
--- a/src/lib/Timeline.svelte
+++ b/src/lib/Timeline.svelte
@@ -1,15 +0,0 @@
-<div class="placeholder">
-  <p>Timeline — coming soon</p>
-</div>
-
-<style>
-  .placeholder {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font: 16px/1.4 sans-serif;
-    color: #888;
-  }
-</style>
--- a/src/lib/TimelineView.svelte
+++ b/src/lib/TimelineView.svelte
@@ -0,0 +1,365 @@
+<script>
+  import { getEntries } from './stores/entriesStore.svelte.js';
+  import JournalDetail from './JournalDetail.svelte';
+
+  /** @type {Record<string, number>} */
+  let selected = $state(null);
+
+  /** @type {Record<string, number>} */
+  let photoIdx = $state({});
+
+  let entries = $derived(getEntries());
+
+  const sortOptions = [
+    { value: 'date-desc', label: 'Newest First' },
+    { value: 'date-asc',  label: 'Oldest First' },
+    { value: 'country-asc',  label: 'Country A → Z' },
+    { value: 'country-desc', label: 'Country Z → A' },
+  ];
+
+  let sortKey = $state('date-desc');
+
+  let sortedEntries = $derived.by(() => {
+    const key = sortKey;
+    return [...entries].sort((a, b) => {
+      if (key === 'date-asc')     return a.date.localeCompare(b.date);
+      if (key === 'date-desc')    return b.date.localeCompare(a.date);
+      if (key === 'country-asc')  return (a.countryName || '').localeCompare(b.countryName || '') || b.date.localeCompare(a.date);
+      if (key === 'country-desc') return (b.countryName || '').localeCompare(a.countryName || '') || b.date.localeCompare(a.date);
+      return 0;
+    });
+  });
+
+  function formatDate(/** @type {string} */ iso) {
+    return new Date(iso).toLocaleDateString('en-US', {
+      year: 'numeric', month: 'short', day: 'numeric',
+    });
+  }
+
+  function stepPhoto(/** @type {string} */ id, /** @type {number} */ total, /** @type {1|-1} */ dir, /** @type {Event} */ e) {
+    e.stopPropagation();
+    const cur = photoIdx[id] ?? 0;
+    photoIdx = { ...photoIdx, [id]: (cur + dir + total) % total };
+  }
+
+  function setPhoto(/** @type {string} */ id, /** @type {number} */ i, /** @type {Event} */ e) {
+    e.stopPropagation();
+    photoIdx = { ...photoIdx, [id]: i };
+  }
+
+  function tripType(/** @type {string[] | undefined} */ companions) {
+    if (!companions || companions.length === 0 || (companions.length === 1 && companions[0] === 'solo')) return 'solo';
+    return 'friends';
+  }
+
+  function companionText(/** @type {string[] | undefined} */ companions) {
+    if (!companions || companions.length === 0 || (companions.length === 1 && companions[0] === 'solo')) return 'Solo';
+    return companions.join(', ');
+  }
+
+  const TRANSPORT_LABELS = {
+    plane: '✈️ Plane',
+    car: '🚗 Car',
+    train: '🚆 Train',
+    boat: '⛵ Boat',
+    bus: '🚌 Bus',
+    other: 'Other',
+  };
+</script>
+
+{#if selected}
+  <JournalDetail entry={selected} onBack={() => (selected = null)} />
+{:else}
+  <section class="timeline-view">
+
+    <header class="toolbar">
+      <div class="title-block">
+        <p class="eyebrow">Travel Journal</p>
+        <h1 class="page-title">My Journey</h1>
+      </div>
+      <div class="sort-control">
+        <label for="sort-select">Sort</label>
+        <select id="sort-select" onchange={(e) => (sortKey = e.currentTarget.value)}>
+          {#each sortOptions as opt}
+            <option value={opt.value} selected={opt.value === sortKey}>{opt.label}</option>
+          {/each}
+        </select>
+      </div>
+    </header>
+
+    {#if sortedEntries.length === 0}
+      <p class="empty">No journal entries yet.</p>
+    {:else}
+      <ol class="v-list">
+        {#each sortedEntries as entry (entry.id)}
+          {@const idx = photoIdx[entry.id] ?? 0}
+          <li class="v-item">
+            <div class="v-dot" aria-hidden="true"></div>
+            <div class="v-entry-wrap">
+              <div class="above-card">
+                <time class="above-date" datetime={entry.date}>{formatDate(entry.date)}</time>
+                <span class="above-sep">·</span>
+                <span class="above-loc">{entry.city}, {entry.countryName}</span>
+                <span class="above-sep">·</span>
+                <span class="above-days">{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
+              </div>
+              <div class="entry-card" role="button" tabindex="0"
+                onclick={() => (selected = entry)}
+                onkeydown={(e) => e.key === 'Enter' && (selected = entry)}>
+
+                {#if entry.photos?.length > 0}
+                  <div class="gallery">
+                    <img class="gallery-main" src={entry.photos[idx]}
+                      alt="{entry.title} photo {idx + 1}" loading="lazy" />
+                    {#if entry.photos.length > 1}
+                      <button class="gallery-arrow left"
+                        onclick={(e) => stepPhoto(entry.id, entry.photos.length, -1, e)}
+                        aria-label="Previous photo">‹</button>
+                      <button class="gallery-arrow right"
+                        onclick={(e) => stepPhoto(entry.id, entry.photos.length, 1, e)}
+                        aria-label="Next photo">›</button>
+                      <div class="gallery-dots">
+                        {#each entry.photos as _, i}
+                          <button class="gallery-pip" class:active={i === idx}
+                            onclick={(e) => setPhoto(entry.id, i, e)}
+                            aria-label="Photo {i + 1}"></button>
+                        {/each}
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+
+                <div class="entry-body">
+                  <h2 class="entry-title">{entry.title}</h2>
+                  {#if entry.memo}
+                    <p class="entry-memo">{entry.memo}</p>
+                  {/if}
+                  <div class="entry-song">
+                    {#if entry.transportation && TRANSPORT_LABELS[entry.transportation]}
+                      <span class="transport-badge">{TRANSPORT_LABELS[entry.transportation]}</span>
+                    {/if}
+                    <svg class="song-icon" width="13" height="13" viewBox="0 0 24 24" fill="none">
+                      <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
+                      <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
+                    </svg>
+                    <span class="song-title">{entry.song?.title || ''}</span>
+                    <span class="song-sep">·</span>
+                    <span class="song-artist">{entry.song?.artist || ''}</span>
+                    <span class="trip-badge" class:trip-badge--solo={tripType(entry.companions) === 'solo'} class:trip-badge--friends={tripType(entry.companions) === 'friends'}>
+                      {companionText(entry.companions)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        {/each}
+      </ol>
+    {/if}
+
+    <footer class="page-footer">
+      {sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'}
+    </footer>
+  </section>
+{/if}
+
+<style>
+  .timeline-view {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 48px 24px 64px;
+    font-family: var(--sans, system-ui, sans-serif);
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-bottom: 48px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--border, #e5e4e7);
+  }
+
+  .eyebrow {
+    font-size: 11px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: var(--accent, #aa3bff);
+    margin: 0 0 6px;
+  }
+
+  .page-title {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--text-h, #08060d);
+    margin: 0;
+    letter-spacing: -0.8px;
+  }
+
+  .sort-control { display: flex; align-items: center; gap: 8px; }
+  .sort-control label { font-size: 13px; color: var(--text, #6b6375); }
+
+  select {
+    font-size: 13px;
+    padding: 7px 28px 7px 10px;
+    border: 1px solid var(--border, #e5e4e7);
+    border-radius: 8px;
+    background: var(--bg, #fff);
+    color: var(--text-h, #08060d);
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6375' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+  }
+  select:focus { outline: 2px solid var(--accent, #aa3bff); outline-offset: 2px; }
+
+  .above-card {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+  .above-date { font-size: 12px; font-weight: 500; color: var(--text-h, #08060d); }
+  .above-loc, .above-days { font-size: 12px; color: var(--text, #6b6375); }
+  .above-sep { font-size: 11px; color: var(--border, #c8c6cc); user-select: none; }
+
+  .entry-card {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--border, #e5e4e7);
+    border-radius: 14px;
+    overflow: hidden;
+    background: var(--bg, #fff);
+    cursor: pointer;
+    transition: box-shadow 0.2s, transform 0.15s;
+    text-align: left;
+  }
+  .entry-card:hover {
+    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
+    transform: translateY(-2px);
+  }
+
+  .entry-body { padding: 14px 18px 18px; }
+
+  .entry-song { gap: 5px; }
+  .entry-song .trip-badge { margin-left: auto; flex-shrink: 0; }
+
+  .trip-badge {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 20px;
+  }
+  .trip-badge--solo    { background: rgba(245,158,11,0.12); color: #b45309; }
+  .trip-badge--friends { background: rgba(59,130,246,0.12); color: #1d4ed8; }
+
+  .transport-badge {
+    font-size: 11px;
+    font-weight: 500;
+    color: #6b6375;
+    flex-shrink: 0;
+  }
+
+  .entry-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-h, #08060d);
+    margin: 0 0 6px;
+    letter-spacing: -0.2px;
+  }
+
+  .entry-memo {
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--text, #6b6375);
+    margin: 0 0 10px;
+  }
+
+  .entry-song {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    color: var(--text, #6b6375);
+    padding-top: 10px;
+    border-top: 1px solid var(--border, #e5e4e7);
+  }
+  .song-icon { flex-shrink: 0; color: var(--accent, #aa3bff); }
+  .song-title { font-weight: 500; color: var(--text-h, #08060d); }
+  .song-sep { opacity: 0.35; }
+
+  .gallery { position: relative; overflow: hidden; background: #000; }
+  .gallery-main { width: 100%; height: 220px; object-fit: cover; display: block; }
+
+  .gallery-arrow {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    background: rgba(0,0,0,0.45); color: #fff;
+    border: none; width: 32px; height: 32px; border-radius: 50%;
+    font-size: 20px; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    transition: background 0.15s; z-index: 2;
+  }
+  .gallery-arrow:hover { background: rgba(0,0,0,0.7); }
+  .gallery-arrow.left  { left: 10px; }
+  .gallery-arrow.right { right: 10px; }
+
+  .gallery-dots {
+    position: absolute; bottom: 8px; left: 50%;
+    transform: translateX(-50%);
+    display: flex; gap: 5px; z-index: 2;
+  }
+  .gallery-pip {
+    width: 6px; height: 6px; border-radius: 50%;
+    border: none; background: rgba(255,255,255,0.5);
+    cursor: pointer; padding: 0;
+    transition: background 0.15s, transform 0.15s;
+  }
+  .gallery-pip.active { background: #fff; transform: scale(1.3); }
+
+  .v-list { list-style: none; padding: 0; margin: 0; position: relative; }
+  .v-list::before {
+    content: '';
+    position: absolute; left: 10px; top: 6px; bottom: 6px;
+    width: 2px; background: var(--border, #e5e4e7); border-radius: 1px;
+  }
+
+  .v-item { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 36px; }
+  .v-item:last-child { padding-bottom: 0; }
+
+  .v-dot {
+    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
+    background: var(--accent, #aa3bff);
+    border: 3px solid var(--bg, #fff);
+    box-shadow: 0 0 0 2px var(--accent, #aa3bff);
+    margin-top: 28px; z-index: 1;
+  }
+
+  .v-entry-wrap { flex: 1; display: flex; flex-direction: column; }
+
+  .page-footer {
+    margin-top: 40px;
+    text-align: center;
+    font-size: 13px;
+    color: var(--text, #6b6375);
+    padding-top: 24px;
+    border-top: 1px solid var(--border, #e5e4e7);
+  }
+
+  .empty { text-align: center; color: var(--text, #6b6375); padding: 80px 0; }
+
+  @media (max-width: 600px) {
+    .timeline-view { padding: 32px 16px 48px; }
+    .page-title { font-size: 26px; }
+    .v-list::before { left: 8px; }
+    .v-dot { width: 18px; height: 18px; }
+    .v-item { gap: 16px; }
+    .gallery-main { height: 180px; }
+  }
+</style>
--- a/src/lib/auth/CountryPicker.svelte
+++ b/src/lib/auth/CountryPicker.svelte
@@ -0,0 +1,212 @@
+<script>
+  import { getUser, getUserProfile, setHomeCountry } from './userStore.svelte.js';
+  import worldData from 'world-atlas/countries-50m.json';
+
+  let user = $derived(getUser());
+  let profile = $derived(getUserProfile());
+
+  const countries = $derived.by(() => {
+    if (!worldData?.objects?.countries?.geometries) return [];
+    const names = worldData.objects.countries.geometries
+      .map(g => g.properties?.name)
+      .filter(Boolean);
+    return [...new Set(names)].sort();
+  });
+
+  let search = $state('');
+  let selectedCountry = $state('');
+
+  let filtered = $derived(
+    search
+      ? countries.filter(c => c.toLowerCase().includes(search.toLowerCase()))
+      : countries
+  );
+
+  let open = $state(false);
+
+  function toggleDropdown() {
+    open = !open;
+  }
+
+  function select(c) {
+    selectedCountry = c;
+    search = c;
+    open = false;
+  }
+
+  function handleSubmit() {
+    if (selectedCountry) {
+      setHomeCountry(selectedCountry);
+    }
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' && selectedCountry) {
+      handleSubmit();
+    }
+    if (e.key === 'Escape') {
+      open = false;
+    }
+  }
+</script>
+
+<div class="overlay">
+  <div class="card">
+    <h1 class="heading">Welcome, {profile?.displayName || 'Traveler'}!</h1>
+    <p class="subtitle">Select your home country to get started</p>
+
+    <div class="dropdown" class:open>
+      <input
+        type="text"
+        placeholder="Search for a country..."
+        bind:value={search}
+        onfocus={() => { open = true; }}
+        oninput={() => { open = true; selectedCountry = ''; }}
+        onkeydown={handleKeydown}
+        class="search-input"
+      />
+      {#if open}
+        <ul class="list" role="listbox">
+          {#each filtered as country}
+            <li
+              role="option"
+              aria-selected={selectedCountry === country}
+              class:selected={selectedCountry === country}
+              onclick={() => select(country)}
+              onkeydown={(e) => { if (e.key === 'Enter') select(country); }}
+              tabindex="0"
+            >
+              {country}
+            </li>
+          {/each}
+          {#if filtered.length === 0}
+            <li class="no-results">No countries found</li>
+          {/if}
+        </ul>
+      {/if}
+    </div>
+
+    <button
+      class="continue-btn"
+      disabled={!selectedCountry}
+      onclick={handleSubmit}
+    >
+      Continue
+    </button>
+  </div>
+</div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    backdrop-filter: blur(4px);
+  }
+
+  .card {
+    background: #1e2937;
+    border-radius: 16px;
+    padding: 40px 36px;
+    text-align: center;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    max-width: 420px;
+    width: 90%;
+  }
+
+  .heading {
+    font: 700 24px/1.3 sans-serif;
+    color: #f1f5f9;
+    margin-bottom: 6px;
+  }
+
+  .subtitle {
+    font: 400 15px/1.4 sans-serif;
+    color: #94a3b8;
+    margin-bottom: 28px;
+  }
+
+  .dropdown {
+    position: relative;
+    margin-bottom: 24px;
+    text-align: left;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 12px 16px;
+    border: 1px solid #475569;
+    border-radius: 8px;
+    background: #0f172a;
+    color: #f1f5f9;
+    font: 400 15px/1.4 sans-serif;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  .search-input:focus {
+    border-color: #3b82f6;
+  }
+
+  .search-input::placeholder {
+    color: #64748b;
+  }
+
+  .list {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    max-height: 240px;
+    overflow-y: auto;
+    background: #0f172a;
+    border: 1px solid #475569;
+    border-radius: 8px;
+    list-style: none;
+    z-index: 10;
+  }
+
+  .list li {
+    padding: 10px 16px;
+    cursor: pointer;
+    color: #cbd5e1;
+    font: 400 14px/1.4 sans-serif;
+    transition: background 0.15s;
+  }
+
+  .list li:hover,
+  .list li.selected {
+    background: #1e3a5f;
+    color: #f1f5f9;
+  }
+
+  .no-results {
+    color: #64748b;
+    cursor: default;
+  }
+
+  .continue-btn {
+    width: 100%;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    background: #3b82f6;
+    color: #fff;
+    font: 600 16px/1.4 sans-serif;
+    cursor: pointer;
+    transition: background 0.2s, opacity 0.2s;
+  }
+
+  .continue-btn:hover:not(:disabled) {
+    background: #2563eb;
+  }
+
+  .continue-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+</style>
--- a/src/lib/auth/LoginOverlay.svelte
+++ b/src/lib/auth/LoginOverlay.svelte
@@ -0,0 +1,87 @@
+<script>
+  import { signInWithGoogle } from './userStore.svelte.js';
+</script>
+
+<div class="overlay">
+  <div class="card">
+    <img src="/logo.png" alt="Map Journal" class="logo" />
+    <h1 class="title">Map Journal</h1>
+    <p class="subtitle">Sign in to start your journey</p>
+    <button class="google-btn" onclick={signInWithGoogle}>
+      <svg class="google-icon" viewBox="0 0 48 48">
+        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
+        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
+        <path fill="#FBBC05" d="M10.53 28.59A14.5 14.5 0 0 1 9.5 24c0-1.59.28-3.14.76-4.59l-7.98-6.19A23.99 23.99 0 0 0 0 24c0 3.77.87 7.35 2.56 10.78l7.97-6.19z"/>
+        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
+        <path fill="none" d="M0 0h48v48H0z"/>
+      </svg>
+      Sign in with Google
+    </button>
+  </div>
+</div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    backdrop-filter: blur(4px);
+  }
+
+  .card {
+    background: #1e2937;
+    border-radius: 16px;
+    padding: 48px 40px;
+    text-align: center;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    max-width: 400px;
+    width: 90%;
+  }
+
+  .logo {
+    width: 80px;
+    height: 80px;
+    border-radius: 12px;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    font: 700 28px/1.2 sans-serif;
+    color: #f1f5f9;
+    margin-bottom: 8px;
+  }
+
+  .subtitle {
+    font: 400 15px/1.4 sans-serif;
+    color: #94a3b8;
+    margin-bottom: 32px;
+  }
+
+  .google-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 28px;
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 8px;
+    background: #334155;
+    color: #f1f5f9;
+    font: 500 16px/1.4 sans-serif;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .google-btn:hover {
+    background: #475569;
+  }
+
+  .google-icon {
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+  }
+</style>
--- a/src/lib/auth/userStore.svelte.js
+++ b/src/lib/auth/userStore.svelte.js
@@ -0,0 +1,72 @@
+import { auth, db, googleProvider } from '../firebase.js';
+import { onAuthStateChanged, signInWithPopup, signOut as fbSignOut } from 'firebase/auth';
+import { doc, getDoc, setDoc, serverTimestamp } from 'firebase/firestore';
+import { initSelectionListener } from '../layout/selection.svelte.js';
+import { initEntriesListener } from '../stores/entriesStore.svelte.js';
+
+let _initialized = false;
+
+let user = $state(null);
+let userProfile = $state(null);
+let loading = $state(true);
+let needsCountry = $state(false);
+
+export function getUser() { return user; }
+export function getUserProfile() { return userProfile; }
+export function getLoading() { return loading; }
+export function getNeedsCountry() { return needsCountry; }
+
+export async function signInWithGoogle() {
+  await signInWithPopup(auth, googleProvider);
+}
+
+export async function signOut() {
+  await fbSignOut(auth);
+  user = null;
+  userProfile = null;
+  needsCountry = false;
+}
+
+export async function setHomeCountry(country) {
+  if (!user) return;
+  await setDoc(doc(db, 'users', user.uid), {
+    displayName: user.displayName,
+    photoURL: user.photoURL,
+    email: user.email,
+    homeCountry: country,
+    visitedCountries: [],
+    createdAt: serverTimestamp(),
+  });
+  userProfile = { ...userProfile, homeCountry: country, visitedCountries: [] };
+  needsCountry = false;
+}
+
+export function initAuth() {
+  if (_initialized) return;
+  _initialized = true;
+  onAuthStateChanged(auth, async (fbUser) => {
+    if (fbUser) {
+      user = fbUser;
+      initSelectionListener(fbUser.uid);
+      initEntriesListener(fbUser.uid);
+      const docRef = doc(db, 'users', fbUser.uid);
+      const docSnap = await getDoc(docRef);
+      if (docSnap.exists()) {
+        userProfile = docSnap.data();
+        needsCountry = false;
+      } else {
+        userProfile = {
+          displayName: fbUser.displayName,
+          photoURL: fbUser.photoURL,
+          email: fbUser.email,
+        };
+        needsCountry = true;
+      }
+    } else {
+      user = null;
+      userProfile = null;
+      needsCountry = false;
+    }
+    loading = false;
+  });
+}
--- a/src/lib/firebase.js
+++ b/src/lib/firebase.js
@@ -0,0 +1,18 @@
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+};
+
+const app = initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);
+export const db = getFirestore(app);
+export const googleProvider = new GoogleAuthProvider();
--- a/src/lib/layout/TopBar.svelte
+++ b/src/lib/layout/TopBar.svelte
@@ -1,5 +1,21 @@
 <script>
+  import { getUser, getUserProfile, signOut } from '../auth/userStore.svelte.js';
+
  let { screen, onNavigate } = $props();
+
+  let user = $derived(getUser());
+  let profile = $derived(getUserProfile());
+
+  let menuOpen = $state(false);
+
+  function toggleMenu() {
+    menuOpen = !menuOpen;
+  }
+
+  function handleSignOut() {
+    menuOpen = false;
+    signOut();
+  }
 </script>

 <div class="topbar">
@@ -20,10 +36,34 @@
  </div>

  <div class="right">
-    <img src="/profile.jpg" alt="Profile" class="avatar" />
+    {#if user}
+      <div class="avatar-wrapper">
+        <button class="avatar-btn" onclick={toggleMenu} onkeydown={(e) => { if (e.key === 'Enter') toggleMenu(); }}>
+          <img
+            src={user.photoURL || '/profile.jpg'}
+            alt="Profile"
+            class="avatar"
+          />
+        </button>
+        {#if menuOpen}
+          <div class="dropdown-menu">
+            <div class="menu-header">
+              <span class="menu-name">{profile?.displayName || user.displayName}</span>
+              <span class="menu-email">{user.email}</span>
+            </div>
+            <div class="divider"></div>
+            <button class="menu-item" onclick={handleSignOut}>Sign out</button>
+          </div>
+        {/if}
+      </div>
+    {/if}
  </div>
 </div>

+{#if menuOpen}
+  <button class="backdrop" aria-label="Close menu" onclick={() => { menuOpen = false; }}></button>
+{/if}
+
 <style>
  .topbar {
    height: 64px;
@@ -101,12 +141,85 @@
    align-items: center;
  }

+  .avatar-wrapper {
+    position: relative;
+  }
+
+  .avatar-btn {
+    display: flex;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
  .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
-    cursor: pointer;
    flex-shrink: 0;
  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    background: #1e2937;
+    border: 1px solid #334155;
+    border-radius: 10px;
+    padding: 8px 0;
+    min-width: 200px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    z-index: 50;
+  }
+
+  .menu-header {
+    padding: 8px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .menu-name {
+    font: 600 14px/1.3 sans-serif;
+    color: #f1f5f9;
+  }
+
+  .menu-email {
+    font: 400 12px/1.3 sans-serif;
+    color: #94a3b8;
+  }
+
+  .divider {
+    height: 1px;
+    background: #334155;
+    margin: 6px 0;
+  }
+
+  .menu-item {
+    width: 100%;
+    padding: 8px 16px;
+    border: none;
+    background: none;
+    text-align: left;
+    font: 400 14px/1.4 sans-serif;
+    color: #fca5a5;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .menu-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    border: none;
+    background: transparent;
+    cursor: default;
+  }
 </style>
--- a/src/lib/layout/selection.svelte.js
+++ b/src/lib/layout/selection.svelte.js
@@ -1,18 +1,46 @@
+import { db } from '../firebase.js';
+import { doc, onSnapshot, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';
+
 let selected = $state(new Set());
 let totalCountries = $state(0);
+let _uid = null;
+let _unsubscribe = null;
+
+export function initSelectionListener(uid) {
+  if (_unsubscribe) _unsubscribe();
+  _uid = uid;
+  const userRef = doc(db, 'users', uid);
+  _unsubscribe = onSnapshot(userRef, (snap) => {
+    if (snap.exists()) {
+      const codes = snap.data().visitedCountries || [];
+      selected = new Set(codes);
+    }
+  });
+}

 export function toggle(id) {
+  if (!_uid) return;
+  const was = selected.has(id);
  const next = new Set(selected);
-  if (next.has(id)) {
+  if (was) {
    next.delete(id);
  } else {
    next.add(id);
  }
  selected = next;
+  const userRef = doc(db, 'users', _uid);
+  if (was) {
+    updateDoc(userRef, { visitedCountries: arrayRemove(id) });
+  } else {
+    updateDoc(userRef, { visitedCountries: arrayUnion(id) });
+  }
 }

 export function clearAll() {
+  if (!_uid) return;
  selected = new Set();
+  const userRef = doc(db, 'users', _uid);
+  updateDoc(userRef, { visitedCountries: [] });
 }

 export function getSelected() {
--- a/src/lib/stores/entriesStore.svelte.js
+++ b/src/lib/stores/entriesStore.svelte.js
@@ -0,0 +1,45 @@
+import { db } from '../firebase.js';
+import { collection, doc, onSnapshot, query, orderBy, addDoc, updateDoc, deleteDoc, serverTimestamp } from 'firebase/firestore';
+
+let entries = $state([]);
+let _uid = null;
+let _unsubscribe = null;
+
+export function getEntries() {
+  return entries;
+}
+
+export function initEntriesListener(uid) {
+  if (_unsubscribe) _unsubscribe();
+  _uid = uid;
+  const q = query(
+    collection(db, 'users', uid, 'entries'),
+    orderBy('createdAt', 'desc')
+  );
+  _unsubscribe = onSnapshot(q, (snap) => {
+    entries = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
+  });
+}
+
+export async function addEntry(data) {
+  if (!_uid) return null;
+  const ref = await addDoc(collection(db, 'users', _uid, 'entries'), {
+    ...data,
+    createdAt: serverTimestamp(),
+    updatedAt: serverTimestamp(),
+  });
+  return ref.id;
+}
+
+export async function updateEntry(id, data) {
+  if (!_uid) return;
+  await updateDoc(doc(db, 'users', _uid, 'entries', id), {
+    ...data,
+    updatedAt: serverTimestamp(),
+  });
+}
+
+export async function removeEntry(id) {
+  if (!_uid) return;
+  await deleteDoc(doc(db, 'users', _uid, 'entries', id));
+}
--- a/src/lib/stores/journalStore.js
+++ b/src/lib/stores/journalStore.js
@@ -0,0 +1,118 @@
+import { writable } from 'svelte/store';
+
+/**
+ * @typedef {{
+ *   id: string,
+ *   title: string,
+ *   date: string,
+ *   location: { country: string, city: string },
+ *   photos: string[],
+ *   song: { title: string, artist: string },
+ *   tripType: 'solo' | 'friends',
+ *   days: number,
+ *   memo: string
+ * }} JournalEntry
+ */
+
+/** @type {JournalEntry[]} */
+const mockEntries = [
+  {
+    id: '1',
+    title: 'First Day in Tokyo',
+    date: '2024-03-15',
+    location: { country: 'Japan', city: 'Tokyo' },
+    photos: [
+      'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=600&q=80',
+      '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' },
+    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.',
+  },
+  {
+    id: '2',
+    title: 'Arashiyama Bamboo Grove',
+    date: '2024-03-18',
+    location: { country: 'Japan', city: 'Kyoto' },
+    photos: [
+      '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' },
+    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.',
+  },
+  {
+    id: '3',
+    title: 'Sunset on Montmartre',
+    date: '2024-06-02',
+    location: { country: 'France', city: 'Paris' },
+    photos: [
+      'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=600&q=80',
+      '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' },
+    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.',
+  },
+  {
+    id: '4',
+    title: 'Inside La Sagrada Família',
+    date: '2024-06-10',
+    location: { country: 'Spain', city: 'Barcelona' },
+    photos: [
+      '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' },
+    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.',
+  },
+  {
+    id: '5',
+    title: 'Central Park in Fall',
+    date: '2023-10-20',
+    location: { country: 'USA', city: 'New York' },
+    photos: [
+      'https://images.unsplash.com/photo-1534430480872-3498386e7856?w=600&q=80',
+      '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' },
+    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.',
+  },
+  {
+    id: '6',
+    title: 'Wat Pho Reclining Buddha',
+    date: '2024-01-08',
+    location: { country: 'Thailand', city: 'Bangkok' },
+    photos: [
+      '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' },
+    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.',
+  },
+];
+
+export const journals = writable(mockEntries);
+
+/** @param {Omit<JournalEntry, 'id'>} entry */
+export function addJournal(entry) {
+  journals.update((entries) => [...entries, { ...entry, id: crypto.randomUUID() }]);
+}
+
+/** @param {string} id */
+export function removeJournal(id) {
+  journals.update((entries) => entries.filter((e) => e.id !== id));
+}
--- a/src/lib/world-map/StatsPanel.svelte
+++ b/src/lib/world-map/StatsPanel.svelte
@@ -2,6 +2,8 @@
  import { CONTINENTS, getContinent, continentTotals } from './continents.js';
  import { getSelected, getTotalCount } from '../layout/selection.svelte.js';

+  let collapsed = $state(false);
+
  const continentColors = {
    'Europe': '#3b82f6',
    'Asia': '#ef4444',
@@ -25,53 +27,93 @@
  let grandTotal = $derived(Object.values(continentTotals).reduce((a, b) => a + b, 0));
  let pct = $derived(grandTotal > 0 ? Math.round(total / grandTotal * 100) : 0);

-  let donutStyle = $derived.by(() => {
-    if (total === 0) return 'background: #e2e8f0';
+  let segments = $derived.by(() => {
+    if (total === 0) return [];
+    const segs = [];
    let deg = 0;
-    const stops = [];
    for (const cont of CONTINENTS) {
-      const angle = counts[cont] / total * 360;
+      const angle = Math.min(counts[cont] / total * 360, 359.99);
      if (angle > 0) {
-        stops.push(`${continentColors[cont]} ${deg}deg ${deg + angle}deg`);
+        const startDeg = deg;
+        const endDeg = deg + angle;
+        const midDeg = (startDeg + endDeg) / 2;
+        const rad = (midDeg - 90) * Math.PI / 180;
+        const sr = (startDeg - 90) * Math.PI / 180;
+        const er = (endDeg - 90) * Math.PI / 180;
+        const cx = 90, cy = 90, outerR = 65, innerR = 30;
+        const x1 = cx + outerR * Math.cos(sr);
+        const y1 = cy + outerR * Math.sin(sr);
+        const x2 = cx + outerR * Math.cos(er);
+        const y2 = cy + outerR * Math.sin(er);
+        const x3 = cx + innerR * Math.cos(er);
+        const y3 = cy + innerR * Math.sin(er);
+        const x4 = cx + innerR * Math.cos(sr);
+        const y4 = cy + innerR * Math.sin(sr);
+        const largeArc = angle > 180 ? 1 : 0;
+        const path = `M ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4} Z`;
+        const lx = cx + 82 * Math.cos(rad);
+        const ly = cy + 82 * Math.sin(rad);
+        segs.push({ cont, color: continentColors[cont], path, lx, ly, angle });
        deg += angle;
      }
    }
-    return `background: conic-gradient(${stops.join(', ')})`;
+    return segs;
  });
 </script>

-<div class="panel">
-  <h2 class="headline">your statistics</h2>
+<div class="panel" class:collapsed>
+  <button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
+    {collapsed ? '◀' : '▶'}
+  </button>

-  <span class="bar-label">visited countries</span>
-  <div class="total-bar-wrap">
-    <div class="total-bar-bg">
-      <div class="total-bar-fill" style="width: {pct}%"></div>
+  {#if !collapsed}
+    <div class="panel-content">
+      <h2 class="headline">your statistics</h2>
+
+      <span class="bar-label">visited countries</span>
+      <div class="total-bar-wrap">
+        <div class="total-bar-bg">
+          <div class="total-bar-fill" style="width: {pct}%"></div>
+        </div>
+        <span class="total-bar-text">{total} / {grandTotal}</span>
+      </div>
+
+      <div class="divider"></div>
+
+      <span class="bar-label">by continent</span>
+      {#each CONTINENTS as continent}
+        {@const contTotal = continentTotals[continent]}
+        <div class="row">
+          <span class="dot" style="background: {continentColors[continent]}"></span>
+          <span class="label">{continent}</span>
+          <span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
+        </div>
+      {/each}
+
+      <div class="donut-wrap">
+        {#if segments.length > 0}
+          <svg viewBox="0 0 180 180" class="donut-svg">
+            {#each segments as seg}
+              <g class="seg-group">
+                <path d={seg.path} fill={seg.color} />
+                <text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
+              </g>
+            {/each}
+            <circle cx="90" cy="90" r="30" fill="#f8fafc" />
+          </svg>
+        {:else}
+          <svg viewBox="0 0 180 180" class="donut-svg">
+            <circle cx="90" cy="90" r="65" fill="#e2e8f0" />
+            <circle cx="90" cy="90" r="30" fill="#f8fafc" />
+          </svg>
+        {/if}
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
    </div>
-    <span class="total-bar-text">{total} / {grandTotal}</span>
-  </div>
-
-  <div class="divider"></div>
-
-  <span class="bar-label">by continent</span>
-  {#each CONTINENTS as continent}
-    {@const contTotal = continentTotals[continent]}
-    <div class="row">
-      <span class="dot" style="background: {continentColors[continent]}"></span>
-      <span class="label">{continent}</span>
-      <span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
-    </div>
-  {/each}
-
-  <div class="donut-wrap">
-    <div class="donut" style={donutStyle}>
-      <div class="donut-hole"></div>
-    </div>
-  </div>
-
-  <div class="divider"></div>
-
-  <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
+  {/if}
 </div>

 <style>
@@ -79,9 +121,65 @@
    flex: 0 0 min(360px, 25vw);
    background: #f8fafc;
    border-left: 1px solid #dce8f0;
+    display: flex;
+    flex-direction: row;
+    font-family: sans-serif;
+    transition: flex-basis 0.25s ease;
+  }
+
+  .panel.collapsed {
+    flex: 0 0 28px;
+    border-left: none;
+  }
+
+  .panel-content {
+    flex: 1;
    padding: 24px 28px;
    overflow-y: auto;
-    font-family: sans-serif;
+    min-width: 0;
+  }
+
+  .collapse-btn {
+    flex: 0 0 auto;
+    align-self: flex-start;
+    background: #e2e8f0;
+    border: none;
+    border-radius: 0 8px 8px 0;
+    padding: 14px 5px;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    color: #1e293b;
+    transition: background 0.15s ease, padding 0.15s ease;
+    margin-top: 24px;
+    position: relative;
+  }
+
+  .collapse-btn:hover {
+    background: #94a3b8;
+    padding-right: 8px;
+  }
+
+  .collapse-btn::after {
+    content: attr(data-tip);
+    position: absolute;
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+    background: #1e293b;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: 6px;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .collapse-btn:hover::after {
+    opacity: 1;
  }

  .headline {
@@ -177,22 +275,22 @@
    margin: 24px 0;
  }

-  .donut {
-    width: 130px;
-    height: 130px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    outline: 2px solid #fff;
+  .donut-svg {
+    width: 160px;
+    height: 160px;
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  }

-  .donut-hole {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    background: #f8fafc;
+  .donut-label {
+    fill: #1f2937;
+    font-weight: 600;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .seg-group:hover .donut-label {
+    opacity: 1;
  }

  .disclaimer {
--- a/src/lib/world-map/WorldMap.svelte
+++ b/src/lib/world-map/WorldMap.svelte
@@ -50,6 +50,8 @@
  }

  let frameEl;
+  let _paths = null;
+  let _g = null;

  function fitProjection(proj, w, h) {
    proj.fitSize([w, h], { type: 'Sphere' });
@@ -57,6 +59,15 @@
    proj.scale(s).translate([w / 2, h * 0.70]);
  }

+  function updateAllFills() {
+    if (!_paths || !_g) return;
+    const sel = getSelected();
+    _paths.attr('fill', d => sel.has(effId(d)) ? '#22c55e' : '#ffffff');
+    _g.selectAll('.micro-state').attr('fill', d => sel.has(effId(d)) ? '#22c55e' : '#ffffff');
+  }
+
+  $effect(updateAllFills);
+
  onMount(() => {
    const width = frameEl.clientWidth;
    const height = frameEl.clientHeight;
@@ -81,7 +92,7 @@
      .attr('width', width)
      .attr('height', height);

-    const g = svg.append('g');
+    _g = svg.append('g');

    const tooltip = d3.select(frameEl)
      .append('div')
@@ -90,7 +101,7 @@

    function updateFill(sel) {
      sel.attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
-      g.selectAll('.micro-state').attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
+      _g.selectAll('.micro-state').attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
    }

    function attachEvents(sel) {
@@ -113,29 +124,29 @@
        });
    }

-    const paths = g.selectAll('path')
+    _paths = _g.selectAll('path')
      .data(countries)
      .join('path')
      .attr('d', path)
      .attr('fill', '#ffffff')
      .attr('stroke', '#d4d4d4')
      .attr('stroke-width', 0.5);
-    attachEvents(paths);
+    attachEvents(_paths);

    function renderMicrostates() {
-      g.selectAll('.micro-state').remove();
+      _g.selectAll('.micro-state').remove();
      const threshold = Math.max(4, 16 / d3.zoomTransform(svg.node()).k);
-      paths.each(function (d) {
+      _paths.each(function (d) {
        if (effId(d) !== d.id) return;
        const { width, height } = this.getBBox();
        if (width < threshold && height < threshold) {
          const [cx, cy] = path.centroid(d);
-          const c = g.append('circle')
+          const c = _g.append('circle')
            .attr('class', 'micro-state')
            .datum(d)
            .attr('cx', cx)
            .attr('cy', cy)
-            .attr('r', 3)
+            .attr('r', 2)
            .attr('fill', getSelected().has(effId(d)) ? '#22c55e' : '#ffffff')
            .attr('stroke', '#94a3b8')
            .attr('stroke-width', 0.5);
@@ -149,7 +160,7 @@
    const zoom = d3.zoom()
      .scaleExtent([1, 32])
      .on('zoom', (event) => {
-        g.attr('transform', event.transform);
+        _g.attr('transform', event.transform);
        renderMicrostates();
      });

@@ -166,7 +177,7 @@
        const { width, height } = entry.contentRect;
        svg.attr('width', width).attr('height', height);
        fitProjection(projection, width, height);
-        const countryPaths = g.selectAll('path');
+        const countryPaths = _g.selectAll('path');
        countryPaths.attr('d', path);
        updateFill(countryPaths);
        renderMicrostates();
Author	SHA1	Message	Date
Tomas Horsky	6701398da7	add saving countries	2026-06-12 18:20:00 +09:00
Tomas Horsky	08d3e3ae56	add firebase and sign up	2026-06-12 18:19:45 +09:00
Tomas Horsky	cd682f738a	make stats panel colabseble	2026-06-10 22:56:56 +09:00
Tomas Horsky	5356c05654	finished merging	2026-06-09 16:54:31 +09:00
Tomas Horsky	640c241e1c	Merge branch 'feature/timeline'	2026-06-09 16:50:37 +09:00
Tomas Horsky	e62b68ede6	small visual changes	2026-06-09 16:18:37 +09:00
haerikimmm	b40e5886b5	moved country, days to top of the card & changed position of tags	2026-06-02 16:45:21 +09:00
haerikimmm	04b5734b48	timeline card ui & sorting & view change	2026-06-02 13:58:53 +09:00