From ec4eea0977d14bc7a31c5cd62b7c16eda32c77b9 Mon Sep 17 00:00:00 2001
From: haerikimmm <hari0914@gmail.com>
Date: Tue, 16 Jun 2026 18:32:48 +0900
Subject: [PATCH] fix save journal button and reactive city filtering by
 country

---
 src/lib/stores/entriesStore.svelte.js |  2 +-
 src/lib/timeline/NewEntryForm.svelte  | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/lib/stores/entriesStore.svelte.js b/src/lib/stores/entriesStore.svelte.js
index 02f0983..9db6c05 100644
--- a/src/lib/stores/entriesStore.svelte.js
+++ b/src/lib/stores/entriesStore.svelte.js
@@ -27,7 +27,7 @@ export function initEntriesListener(uid) {
 }
 
 export async function addEntry(data) {
-  if (!_uid) return null;
+  if (!_uid) throw new Error('Not logged in');
   const ref = await addDoc(collection(db, 'users', _uid, 'entries'), {
     ...data,
     createdAt: serverTimestamp(),
diff --git a/src/lib/timeline/NewEntryForm.svelte b/src/lib/timeline/NewEntryForm.svelte
index 07c661c..102cbdb 100644
--- a/src/lib/timeline/NewEntryForm.svelte
+++ b/src/lib/timeline/NewEntryForm.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { get } from 'svelte/store';
   import { journals, addJournal } from '../stores/journalStore.js';
   import { countryNames } from '../shared/countries.js';
   import SearchInput from '../shared/SearchInput.svelte';
@@ -13,6 +12,13 @@
 
   let { initialCountry = '', onBack, onSaved = onBack } = $props();
 
+  // ── Journal store (reactive) ────────────────────────────────────────
+  let journalEntries = $state([]);
+  $effect(() => {
+    const unsub = journals.subscribe(v => { journalEntries = v; });
+    return unsub;
+  });
+
   // ── Fields ─────────────────────────────────────────────────────────
   let cities    = $state([]);
   let cityInput = $state('');
@@ -55,8 +61,8 @@
   // otherwise show all known cities.
   let cityOptions = $derived(
     country.trim()
-      ? [...new Set(get(journals).filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities))].sort()
-      : [...new Set(get(journals).flatMap(e => e.location.cities))].sort()
+      ? [...new Set(journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []))].sort()
+      : [...new Set(journalEntries.flatMap(e => e.location?.cities ?? []))].sort()
   );
 
   function addCity(val) {
@@ -106,9 +112,11 @@
 
   // ── Save ───────────────────────────────────────────────────────────
   let saving = $state(false);
+  let saveError = $state('');
 
   async function save() {
     saving = true;
+    saveError = '';
     const memo = questions
       .map((q, i) => answers[i].trim() ? `Q: ${q.split('\n')[0]}\nA: ${answers[i].trim()}` : '')
       .filter(Boolean)
@@ -125,8 +133,9 @@
         location: { cities, country },
       });
       onSaved();
-    } catch {
+    } catch (e) {
       saving = false;
+      saveError = e?.message ?? 'Failed to save. Please try again.';
     }
   }
 </script>
@@ -153,6 +162,7 @@
         <button class="save-btn" onclick={save} disabled={saving}>
           {saving ? 'Saving…' : 'Save trip'}
         </button>
+        {#if saveError}<span class="save-err">{saveError}</span>{/if}
       {/if}
     </div>
   </header>
@@ -326,6 +336,7 @@
   }
   .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
   .save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+  .save-err { font-size: 12px; color: #ef4444; margin-top: 4px; display: block; text-align: right; }
 
   /* scroll + form */
   .scroll { flex: 1; overflow-y: auto; }