chore: reorganize timeline into view/ and detail/ folders, move home.png to assets/

src/lib/timeline/detail/EditForm.svelte

@@ -0,0 +1,459 @@
+<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';
+
+  /**
+   * entry = null  →  "new entry" mode
+   * entry = {...} →  "edit" mode
+   * @type {{ entry?: import('../shared/types.js').JournalEntry | null, initialCountry?: string, onBack: () => void }}
+   */
+  let { entry = null, initialCountry = '', onBack } = $props();
+
+  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 ?? ''));
+  let tripType   = $state(entry?.tripType ?? '');
+  let photos     = $state([...(entry?.photos ?? [])]);
+  let memo       = $state(entry?.memo ?? '');
+  let transport  = $state(entry?.transport ?? '');
+
+  let errors = $state({
+    country: '', cities: '', date: '', days: '', tripType: '', transport: ''
+  });
+
+  function clearErrors() {
+    errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
+  }
+
+  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);
+  let memoOverLimit = $derived(wordCount > MEMO_MAX);
+
+  function onMemoInput(e) {
+    const raw = e.currentTarget.value;
+    const words = raw.trim() === '' ? [] : raw.trim().split(/\s+/);
+    if (words.length > MEMO_MAX) {
+      // keep first 100 words, preserve trailing space if user is mid-word
+      memo = words.slice(0, MEMO_MAX).join(' ');
+      e.currentTarget.value = memo;
+    } else {
+      memo = raw;
+    }
+  }
+
+  // Suggest cities — when a country is selected show only cities from that country.
+  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);
+  }
+
+  async function save() {
+    clearErrors();
+    let hasError = false;
+    if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
+    if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
+    if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
+    if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
+    if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
+    if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
+    if (hasError) return;
+
+    try {
+      if (isNew) {
+        await addEntry({
+          title: `${cities.join(', ')}, ${country}`,
+          date,
+          days: Number(days),
+          tripType,
+          memo,
+          photos,
+          transport,
+          location: { cities, country },
+        });
+      } else {
+        await updateEntry(entry.id, {
+          date,
+          days: Number(days),
+          tripType,
+          transport,
+          memo,
+          photos,
+          location: { cities, country },
+        });
+      }
+      onBack();
+    } catch (err) {
+      console.error('Save failed:', err);
+    }
+  }
+</script>
+
+<div class="edit-layout">
+
+  <header class="edit-topbar">
+    <div class="topbar-left">
+      <button class="topbar-btn" onclick={onBack}>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M19 12H5M12 5l-7 7 7 7"/>
+        </svg>
+        Back
+      </button>
+    </div>
+    <span class="topbar-title">{isNew ? 'New trip' : 'Edit'}</span>
+    <div class="topbar-right">
+      <button class="topbar-btn topbar-btn--save" onclick={save}>Save changes</button>
+    </div>
+  </header>
+
+  <div class="edit-scroll">
+    <form class="form" onsubmit={(e) => { e.preventDefault(); save(); }}>
+
+      <div class="row">
+        <div class="field">
+          <label class="label" for="edit-country">Country <span class="req">*</span></label>
+          <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
+          {#if errors.country}<span class="field-error">{errors.country}</span>{/if}
+        </div>
+        <div class="field">
+          <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 errors.cities}<span class="field-error">{errors.cities}</span>{/if}
+          {#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>
+
+      <div class="row">
+        <div class="field">
+          <label class="label" for="edit-date">Date <span class="req">*</span></label>
+          <input id="edit-date" class="input" type="date" bind:value={date} required />
+          {#if errors.date}<span class="field-error">{errors.date}</span>{/if}
+        </div>
+        <div class="field">
+          <label class="label" for="edit-days">Days <span class="req">*</span></label>
+          <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
+          {#if errors.days}<span class="field-error">{errors.days}</span>{/if}
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Trip type</label>
+        <div class="toggle-row">
+          <label class="toggle-opt" class:active={tripType === 'solo'}>
+            <input type="radio" name="tripType" value="solo" bind:group={tripType} /> Solo
+          </label>
+          <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>
+        {#if errors.tripType}<span class="field-error">{errors.tripType}</span>{/if}
+      </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>
+        {#if errors.transport}<span class="field-error">{errors.transport}</span>{/if}
+      </div>
+
+      <PhotoEditor {photos} onchange={(p) => (photos = p)} />
+
+      <div class="field">
+        <div class="label-row">
+          <label class="label" for="edit-memo">How was it?</label>
+          <span class="char-count" class:over={memoOverLimit}>{wordCount} / {MEMO_MAX} words</span>
+        </div>
+        <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="4" value={memo} oninput={onMemoInput}></textarea>
+      </div>
+
+
+    </form>
+  </div>
+</div>
+
+<style>
+  .field-error {
+    font-size: 11px;
+    color: #dc2626;
+    margin-top: 2px;
+  }
+
+  .edit-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background: var(--bg);
+  }
+
+  .edit-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 60px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg);
+  }
+
+  .topbar-left, .topbar-right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 120px;
+  }
+  .topbar-right { justify-content: flex-end; }
+
+  .topbar-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--text-h);
+  }
+
+  .topbar-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;
+    white-space: nowrap;
+  }
+  .topbar-btn:hover {
+    background: var(--bg-subtle);
+    border-color: var(--border);
+    color: var(--text-h);
+  }
+  .topbar-btn--save {
+    background: var(--accent);
+    color: #fff;
+    border-color: var(--accent);
+  }
+  .topbar-btn--save:hover {
+    background: var(--accent-dark);
+    border-color: var(--accent-dark);
+    color: #fff;
+  }
+
+  .edit-scroll {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    max-width: 560px;
+    margin: 0 auto;
+    padding: 36px 48px 80px;
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 14px;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .label {
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-sub);
+  }
+
+  .char-count {
+    font-size: 11px;
+    font-weight: 300;
+    color: var(--text-sub);
+    transition: color 0.15s;
+  }
+  .char-count.over { color: #dc2626; }
+  .input-over { border-color: #fca5a5; }
+
+  .req {
+    color: var(--accent);
+    font-size: 11px;
+  }
+
+  .input {
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 300;
+    color: var(--text-h);
+    background: var(--bg-subtle);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 8px 12px;
+    outline: none;
+    transition: border-color 0.15s;
+    width: 100%;
+  }
+  .input:focus { border-color: var(--accent-border); }
+
+  .textarea {
+    resize: vertical;
+    line-height: 1.6;
+  }
+
+  .toggle-row {
+    display: flex;
+    gap: 8px;
+  }
+
+  .toggle-opt {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text);
+    padding: 7px 14px;
+    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);
+  }
+  .toggle-opt input { display: none; }
+  .toggle-opt.active {
+    border-color: var(--accent-border);
+    background: var(--accent-bg);
+    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);
+  }
+
+  .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>