changed font style, added journey summary, changed card ui

src/lib/timeline/TimelineView.svelte

@@ -4,6 +4,7 @@
   import TimelineToolbar from './TimelineToolbar.svelte';
   import TimelineCard from './TimelineCard.svelte';
   import JournalDetail from './JournalDetail.svelte';
+  import JournalSummary from './JournalSummary.svelte';
 
   /** @type {import('../stores/journalStore.js').JournalEntry|null} */
   let selected = $state(null);
@@ -27,38 +28,86 @@
       return 0;
     });
   });
+
+  function getYear(iso) {
+    return new Date(iso).getFullYear();
+  }
 </script>
 
-{#if selected}
-  <JournalDetail entry={selected} onBack={() => (selected = null)} />
-{:else}
-  <section class="timeline-view">
-    <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
+<div class="journal-page">
 
-    {#if sortedEntries.length === 0}
-      <p class="empty">No journal entries yet.</p>
-    {:else}
-      <ol class="v-list">
-        {#each sortedEntries as entry (entry.id)}
-          <TimelineCard {entry} onClick={() => (selected = entry)} />
-        {/each}
-      </ol>
-    {/if}
+  {#if selected}
+    <!-- Detail view: full width, scrollable -->
+    <div class="detail-scroll">
+      <JournalDetail entry={selected} onBack={() => (selected = null)} />
+    </div>
+  {:else}
+    <!-- Two-column layout -->
+    <aside class="left-panel">
+      <JournalSummary entries={sortedEntries} />
+    </aside>
 
-    <footer class="page-footer">
-      {sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'}
-    </footer>
-  </section>
-{/if}
+    <div class="right-panel">
+      <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
+
+      {#if sortedEntries.length === 0}
+        <p class="empty">No journal entries yet.</p>
+      {:else}
+        <ol class="v-list">
+          {#each sortedEntries as entry, i (entry.id)}
+            {#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
+              <li class="year-marker" aria-hidden="true">
+                <span class="year-label">{getYear(entry.date)}</span>
+              </li>
+            {/if}
+            <TimelineCard {entry} onClick={() => (selected = entry)} />
+          {/each}
+        </ol>
+      {/if}
+
+      <footer class="page-footer">
+        {sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'}
+      </footer>
+    </div>
+  {/if}
+
+</div>
 
 <style>
-  .timeline-view {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 48px 24px 64px;
-    font-family: var(--sans, system-ui, sans-serif);
+  .journal-page {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    min-width: 0;
+    height: 100%;
+    overflow: hidden;
   }
 
+  /* ── Left: summary panel ── */
+  .left-panel {
+    width: 280px;
+    flex-shrink: 0;
+    overflow-y: auto;
+    border-right: 1px solid var(--border);
+    background: var(--bg);
+    padding: 32px 20px;
+  }
+
+  /* ── Right: timeline ── */
+  .right-panel {
+    flex: 1;
+    min-width: 0;
+    overflow-y: auto;
+    padding: 32px 32px 64px;
+  }
+
+  /* ── Detail view ── */
+  .detail-scroll {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  /* ── Timeline list ── */
   .v-list {
     list-style: none;
     padding: 0;
@@ -68,27 +117,39 @@
   .v-list::before {
     content: '';
     position: absolute;
-    left: 10px;
+    left: 4px;
     top: 6px;
     bottom: 6px;
     width: 2px;
-    background: var(--border, #e5e4e7);
+    background: var(--border);
     border-radius: 1px;
   }
 
+  /* Year marker */
+  .year-marker {
+    display: flex;
+    align-items: center;
+    padding-bottom: 20px;
+  }
+  .year-label {
+    font-size: var(--text-2xl);
+    font-weight: 400;
+    color: var(--accent);
+    letter-spacing: -1px;
+    line-height: 1;
+    position: relative;
+    z-index: 1;
+    padding-left: 24px;
+  }
+
   .page-footer {
     margin-top: 40px;
     text-align: center;
     font-size: 13px;
-    color: var(--text, #6b6375);
+    color: var(--text);
     padding-top: 24px;
-    border-top: 1px solid var(--border, #e5e4e7);
+    border-top: 1px solid var(--border);
   }
 
-  .empty { text-align: center; color: var(--text, #6b6375); padding: 80px 0; }
-
-  @media (max-width: 600px) {
-    .timeline-view { padding: 32px 16px 48px; }
-    .v-list::before { left: 8px; }
-  }
+  .empty { text-align: center; color: var(--text); padding: 80px 0; }
 </style>