final refactoring

src/lib/timeline/detail/EditForm.svelte

@@ -1,16 +1,8 @@
 <script>
-  import { getEntries } from '../../stores/entriesStore.svelte.js';
   import { addEntry, updateEntry } from '../../stores/entriesStore.svelte.js';
-  import { countryNames } from '../../shared/countries.js';
-  import { getCitiesForCountry, ALL_CITIES } from '../../shared/cities.js';
-  import SearchInput from '../../shared/SearchInput.svelte';
   import PhotoEditor from './PhotoEditor.svelte';
-  import airplaneImg from '../../../assets/airplane.png';
-  import trainImg    from '../../../assets/train.png';
-  import busImg      from '../../../assets/bus.png';
-  import carImg      from '../../../assets/car.png';
-  import shipImg     from '../../../assets/ship.png';
-  import walkImg     from '../../../assets/walk.png';
+  import StepNav from './StepNavbar.svelte';
+  import TripBasicInfo from './TripBasicInfo.svelte';
 
   /**
    * entry = null  →  "new entry" mode
@@ -22,7 +14,6 @@
   let isNew = !entry;
 
   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 ?? ''));
@@ -31,7 +22,7 @@
   let memo       = $state(entry?.memo ?? '');
   let transport  = $state(entry?.transport ?? '');
 
-  let step = $state(1); // 1 | 2 | 3
+  let step = $state(1);
 
   let errors = $state({
     country: '', cities: '', date: '', days: '', tripType: '', transport: ''
@@ -41,15 +32,6 @@
     errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
   }
 
-  const transportOptions = [
-    { value: 'flight', label: 'Flight', img: airplaneImg },
-    { value: 'train',  label: 'Train',  img: trainImg    },
-    { value: 'bus',    label: 'Bus',    img: busImg      },
-    { value: 'car',    label: 'Car',    img: carImg      },
-    { value: 'ship',   label: 'Ship',   img: shipImg     },
-    { value: 'walk',   label: 'Walk',   img: walkImg     },
-  ];
-
   const MEMO_MAX = 100;
   let wordCount = $derived(memo.trim() === '' ? 0 : memo.trim().split(/\s+/).length);
   let memoOverLimit = $derived(wordCount > MEMO_MAX);
@@ -65,25 +47,6 @@
     }
   }
 
-  let allEntries = $derived(getEntries());
-  let cityOptions = $derived(
-    country.trim()
-      ? [...new Set([...getCitiesForCountry(country), ...allEntries.filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities)])].sort()
-      : [...new Set([...Object.values(ALL_CITIES).flat(), ...allEntries.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 nextStep() {
     if (step === 1) {
       clearErrors();
@@ -133,100 +96,22 @@
       console.error('Save failed:', err);
     }
   }
+
+  let next = $derived(step < 3 ? nextStep : save);
 </script>
 
 <div class="layout">
-
-  <header class="topbar">
-    <div class="topbar-left">
-      <button class="ghost-btn" onclick={prevStep}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
-        {step === 1 ? 'Back' : 'Previous'}
-      </button>
-    </div>
-
-    <div class="steps">
-      {#each [1,2,3] as s}
-        <div class="step-dot" class:active={step === s} class:done={step > s}></div>
-      {/each}
-    </div>
-
-    <div class="topbar-right">
-      {#if step < 3}
-        <button class="save-btn" onclick={nextStep}>Next</button>
-      {:else}
-        <button class="save-btn" onclick={save}>Save changes</button>
-      {/if}
-    </div>
-  </header>
+  <StepNav {step} totalSteps={3} onback={prevStep} onnext={next} />
 
   <div class="scroll">
     <div class="form">
 
       {#if step === 1}
-        <h1 class="page-headline">
-          {isNew ? 'Journal your trip!' : 'Edit your trip'}
-        </h1>
-
-        <div class="row">
-          <div class="field">
-            <label class="label" for="edit-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
-            <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
-            {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
-          </div>
-          <div class="field">
-            <label class="label" for="edit-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
-            <SearchInput id="edit-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
-            {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
-            {#if cities.length > 0}
-              <div class="tags">
-                {#each cities as c}
-                  <span class="tag">{c}<button type="button" class="tag-rm" onclick={() => removeCity(c)}>×</button></span>
-                {/each}
-              </div>
-            {/if}
-          </div>
-        </div>
-
-        <div class="row">
-          <div class="field">
-            <label class="label" for="edit-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
-            <input id="edit-date" class="input" type="date" bind:value={date} required />
-            {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
-          </div>
-          <div class="field">
-            <label class="label" for="edit-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
-            <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
-            {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
-          </div>
-        </div>
-
-        <div class="field">
-          <label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
-          <div class="toggle-row">
-            {#each ['solo','friends','family'] as t}
-              <label class="toggle-opt" class:active={tripType === t}>
-                <input type="radio" name="edit-tripType" value={t} bind:group={tripType} />
-                {t === 'solo' ? '🧑 Solo' : t === 'friends' ? '👥 With friends' : '👨‍👩‍👧‍👦 With family'}
-              </label>
-            {/each}
-          </div>
-          {#if errors.tripType}<span class="ferr">{errors.tripType}</span>{/if}
-        </div>
-
-        <div class="field">
-          <label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
-          <div class="transport-grid">
-            {#each transportOptions as opt}
-              <label class="toggle-opt transport-opt" class:active={transport === opt.value}>
-                <input type="radio" name="edit-transport" value={opt.value} bind:group={transport} />
-                <img src={opt.img} alt={opt.label} class="transport-img" />
-                {opt.label}
-              </label>
-            {/each}
-          </div>
-          {#if errors.transport}<span class="ferr">{errors.transport}</span>{/if}
-        </div>
+        <TripBasicInfo
+          bind:country bind:cities
+          bind:date bind:days bind:tripType bind:transport
+          bind:errors {isNew}
+        />
 
       {:else if step === 2}
         <h2 class="step-title">Photos</h2>
@@ -258,70 +143,6 @@
     font-family: var(--sans);
   }
 
-  .topbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-    height: 52px;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg);
-  }
-  .topbar-left, .topbar-right {
-    display: flex;
-    align-items: center;
-    min-width: 110px;
-  }
-  .topbar-right { justify-content: flex-end; }
-
-  .steps {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-  .step-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--border);
-    transition: background 0.2s, transform 0.2s;
-  }
-  .step-dot.active { background: var(--accent); transform: scale(1.25); }
-  .step-dot.done   { background: var(--accent); opacity: 0.35; }
-
-  .ghost-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-family: var(--sans);
-    font-size: 15px;
-    font-weight: 400;
-    color: var(--text);
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 10px;
-    padding: 8px 14px;
-    cursor: pointer;
-    transition: background 0.15s, color 0.15s, border-color 0.15s;
-  }
-  .ghost-btn:hover { background: var(--bg-subtle); border-color: var(--border); color: var(--text-h); }
-
-  .save-btn {
-    font-family: var(--sans);
-    font-size: 15px;
-    font-weight: 400;
-    color: #fff;
-    background: var(--accent);
-    border: 1px solid var(--accent);
-    border-radius: 10px;
-    padding: 8px 18px;
-    cursor: pointer;
-    transition: background 0.15s;
-    white-space: nowrap;
-  }
-  .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
-
   .scroll { flex: 1; overflow-y: auto; }
 
   .form {
@@ -333,13 +154,6 @@
     gap: 18px;
   }
 
-  .page-headline {
-    font-size: 28px;
-    font-weight: 500;
-    color: var(--text-h);
-    letter-spacing: -0.5px;
-    margin: 0 0 4px;
-  }
   .step-title {
     font-size: 20px;
     font-weight: 400;
@@ -354,7 +168,6 @@
     margin: -10px 0 4px;
   }
 
-  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
   .field { display: flex; flex-direction: column; gap: 6px; }
 
   .label-row {
@@ -370,9 +183,6 @@
     text-transform: uppercase;
     color: var(--text-h);
   }
-  .req { color: var(--accent); font-size: 11px; }
-  .kw  { color: var(--accent); }
-  .ferr { font-size: 13px; font-weight: 500; color: #dc2626; }
 
   .char-count { font-size: 11px; font-weight: 300; color: var(--text-sub); transition: color 0.15s; }
   .char-count.over { color: #dc2626; }
@@ -395,35 +205,4 @@
   .input:focus { border-color: var(--accent-border); }
 
   .textarea { resize: vertical; line-height: 1.6; }
-
-  .toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
-  .toggle-opt {
-    display: flex; align-items: center; justify-content: center; gap: 8px;
-    font-size: 14px; font-weight: 400; color: var(--text);
-    padding: 12px 14px; border-radius: 10px;
-    border: 1px solid var(--border);
-    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
-    background: var(--bg-subtle);
-    white-space: nowrap;
-  }
-  .toggle-opt input { display: none; }
-  .toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
-  .toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); }
-
-  .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
-  .transport-opt { flex-direction: column; gap: 6px; padding: 16px 10px; }
-  .transport-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
-
-  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
-  .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;
-  }
-  .tag-rm {
-    background: none; border: none; color: var(--accent);
-    font-size: 15px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.6;
-  }
-  .tag-rm:hover { opacity: 1; }
 </style>