added sharable stats

src/lib/timeline/EditForm.svelte

@@ -21,8 +21,16 @@
   let tripType   = $state(entry?.tripType ?? 'solo');
   let photos     = $state([...(entry?.photos ?? [])]);
   let memo       = $state(entry?.memo ?? '');
-  let songTitle  = $state(entry?.song.title ?? '');
-  let songArtist = $state(entry?.song.artist ?? '');
+  let transport  = $state(entry?.transport ?? 'flight');
+
+  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'   },
+  ];
 
   const MEMO_MAX = 100;
   let wordCount = $derived(memo.trim() === '' ? 0 : memo.trim().split(/\s+/).length);
@@ -53,8 +61,8 @@
         tripType,
         memo,
         photos,
+        transport,
         location: { city, country },
-        song: { title: songTitle, artist: songArtist },
       });
     } else {
       updateJournal({
@@ -62,10 +70,10 @@
         date,
         days: Number(days),
         tripType,
+        transport,
         memo,
         photos,
         location: { city, country },
-        song: { title: songTitle, artist: songArtist },
       });
     }
     onBack();
@@ -126,6 +134,18 @@
         </div>
       </div>
 
+      <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>
+      </div>
+
       <PhotoEditor {photos} onchange={(p) => (photos = p)} />
 
       <div class="field">
@@ -136,16 +156,6 @@
         <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="4" value={memo} oninput={onMemoInput}></textarea>
       </div>
 
-      <div class="row">
-        <div class="field">
-          <label class="label" for="edit-song-title">Song title</label>
-          <input id="edit-song-title" class="input" type="text" bind:value={songTitle} />
-        </div>
-        <div class="field">
-          <label class="label" for="edit-song-artist">Artist</label>
-          <input id="edit-song-artist" class="input" type="text" bind:value={songArtist} />
-        </div>
-      </div>
 
     </form>
   </div>
@@ -317,4 +327,32 @@
     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;
+    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);
+  }
+
 </style>