fix: journal tab name, 2-column layout with SharePreview on right

src/lib/layout/TopBar.svelte

@@ -31,7 +31,7 @@
         style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);"
       ></div>
       <button class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Worldmap</button>
-      <button class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Timeline</button>
+      <button class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Journal</button>
     </div>
   </div>
 

src/lib/timeline/TimelineView.svelte

@@ -65,8 +65,8 @@
       />
     </div>
   {:else}
-    <div class="right-panel">
-      <div class="center-col">
+    <div class="two-col">
+      <div class="left-col">
         <div class="page-header">
           <h1 class="page-title">My Journey</h1>
           <button class="new-btn" onclick={() => { view = 'new'; }}>
@@ -77,12 +77,6 @@
           </button>
         </div>
 
-        {#if sortedEntries.length > 0}
-          <div class="share-row">
-            <SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
-          </div>
-        {/if}
-
         <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
 
         {#if sortedEntries.length === 0}
@@ -113,6 +107,12 @@
           {sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
         </footer>
       </div>
+
+      {#if sortedEntries.length > 0}
+        <div class="right-col">
+          <SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
+        </div>
+      {/if}
     </div>
   {/if}
 
@@ -132,31 +132,41 @@
     overflow: hidden;
   }
 
-  /* ── Right panel ── */
-  .right-panel {
+  /* ── Two-column layout ── */
+  .two-col {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    min-width: 0;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .left-col {
     flex: 1;
     min-width: 0;
     overflow-y: auto;
-    background: var(--bg);
+    padding: 48px 48px 80px;
+    box-sizing: border-box;
+    max-width: 680px;
   }
 
-  /* ── Centered single column ── */
-  .center-col {
-    max-width: 680px;
-    width: 100%;
-    margin: 0 auto;
-    padding: 48px 48px 80px;
+  .right-col {
+    width: 280px;
+    flex-shrink: 0;
+    overflow-y: auto;
+    padding: 48px 24px 80px;
+    border-left: 1px solid var(--border);
     box-sizing: border-box;
   }
 
-  .share-row {
-    margin-bottom: 24px;
+  @media (max-width: 900px) {
+    .right-col { display: none; }
+    .left-col { max-width: 100%; }
   }
 
   @media (max-width: 760px) {
-    .center-col {
-      padding: 32px 24px 60px;
-    }
+    .left-col { padding: 32px 24px 60px; }
   }
 
   /* ── Detail view ── */