changed to centered layout

src/lib/timeline/EditForm.svelte

@@ -14,7 +14,8 @@
 
   let isNew = !entry;
 
-  let city       = $state(entry?.location.city ?? '');
+  let cities     = $state([...(entry?.location.cities ?? [])]);
+  let cityInput  = $state('');
   let country    = $state(entry?.location.country ?? initialCountry);
   let date       = $state(entry?.date ?? new Date().toISOString().slice(0, 10));
   let days       = $state(String(entry?.days ?? 1));
@@ -49,20 +50,32 @@
   }
 
   let cityOptions = $derived(
-    [...new Set(get(journals).map(e => e.location.city))].sort()
+    [...new Set(get(journals).flatMap(e => e.location.cities))].sort()
   );
 
+  function addCity(val) {
+    const trimmed = (val ?? cityInput).trim();
+    if (trimmed && !cities.includes(trimmed)) {
+      cities = [...cities, trimmed];
+    }
+    cityInput = '';
+  }
+
+  function removeCity(c) {
+    cities = cities.filter(x => x !== c);
+  }
+
   function save() {
     if (isNew) {
       addJournal({
-        title: `${city}, ${country}`,
+        title: `${cities.join(', ')}, ${country}`,
         date,
         days: Number(days),
         tripType,
         memo,
         photos,
         transport,
-        location: { city, country },
+        location: { cities, country },
       });
     } else {
       updateJournal({
@@ -73,7 +86,7 @@
         transport,
         memo,
         photos,
-        location: { city, country },
+        location: { cities, country },
       });
     }
     onBack();
@@ -106,8 +119,20 @@
           <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
         </div>
         <div class="field">
-          <label class="label" for="edit-city">City <span class="req">*</span></label>
-          <SearchInput id="edit-city" bind:value={city} options={cityOptions} required />
+          <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} />
+          </div>
+          {#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>
 
@@ -131,6 +156,9 @@
           <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>
         </div>
       </div>
 
@@ -355,4 +383,39 @@
     color: var(--accent);
   }
 
+  .city-input-row {
+    display: flex;
+  }
+
+  .city-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 4px;
+  }
+  .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;
+  }
+  .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; }
+
 </style>