chore: reorganize timeline into view/ and detail/ folders, move home.png to assets/
This commit is contained in:
haerikimmm
88
src/lib/timeline/detail/DeleteConfirm.svelte
Normal file
88
src/lib/timeline/detail/DeleteConfirm.svelte
Normal file
@@ -0,0 +1,88 @@
|
||||
<script>
|
||||
let { entry, onConfirm, onCancel } = $props();
|
||||
</script>
|
||||
|
||||
<div class="overlay" role="dialog" aria-modal="true">
|
||||
<div class="dialog">
|
||||
<h2 class="title">Delete trip?</h2>
|
||||
<p class="body">
|
||||
<strong>{entry.location.cities.join(', ')}, {entry.location.country}</strong> — {entry.date.slice(0, 4)} will be permanently removed.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button class="btn btn-cancel" onclick={onCancel}>Cancel</button>
|
||||
<button class="btn btn-delete" onclick={onConfirm}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 28px 32px;
|
||||
width: 360px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
color: var(--text-h);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
padding: 8px 18px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
.btn-cancel:hover {
|
||||
background: var(--bg-subtle);
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
border-color: #dc2626;
|
||||
}
|
||||
.btn-delete:hover {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
</style>
|
||||
459
src/lib/timeline/detail/EditForm.svelte
Normal file
459
src/lib/timeline/detail/EditForm.svelte
Normal file
@@ -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>
|
||||
352
src/lib/timeline/detail/JournalDetail.svelte
Normal file
352
src/lib/timeline/detail/JournalDetail.svelte
Normal file
@@ -0,0 +1,352 @@
|
||||
<script>
|
||||
import { removeEntry } from '../../stores/entriesStore.svelte.js';
|
||||
import { flagEmoji } from '../../shared/countries.js';
|
||||
import DeleteConfirm from './DeleteConfirm.svelte';
|
||||
|
||||
/** @type {{ entry: import('../shared/types.js').JournalEntry, onBack: () => void, onEdit: () => void }} */
|
||||
let { entry, onBack, onEdit } = $props();
|
||||
|
||||
let showDeleteConfirm = $state(false);
|
||||
|
||||
function handleDelete() {
|
||||
removeEntry(entry.id);
|
||||
onBack();
|
||||
}
|
||||
|
||||
function formatDate(iso) {
|
||||
return new Date(iso).toLocaleDateString('en-US', {
|
||||
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
let lightboxSrc = $state(null);
|
||||
</script>
|
||||
|
||||
{#if showDeleteConfirm}
|
||||
<DeleteConfirm {entry} onConfirm={handleDelete} onCancel={() => showDeleteConfirm = false} />
|
||||
{/if}
|
||||
|
||||
<!-- Lightbox -->
|
||||
{#if lightboxSrc}
|
||||
<div class="lightbox" onclick={() => lightboxSrc = null} role="button" tabindex="0"
|
||||
onkeydown={(e) => e.key === 'Escape' && (lightboxSrc = null)}>
|
||||
<img src={lightboxSrc} alt="" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="detail-layout">
|
||||
|
||||
<!-- ── Full-width top bar ── -->
|
||||
<header class="detail-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 class="topbar-divider"></div>
|
||||
|
||||
<span class="topbar-flag">{flagEmoji(entry.location.country)}</span>
|
||||
<div class="topbar-place">
|
||||
<span class="topbar-city">{entry.location.cities.join(', ')}</span>
|
||||
<span class="topbar-country">{entry.location.country}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-right">
|
||||
<button class="topbar-btn" title="Edit entry" onclick={onEdit}>
|
||||
<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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
Edit
|
||||
</button>
|
||||
<button class="topbar-btn topbar-btn--danger" title="Delete entry" onclick={() => showDeleteConfirm = true}>
|
||||
<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="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>
|
||||
</svg>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ── Body: photo left + Q&A right ── -->
|
||||
<div class="detail-body">
|
||||
|
||||
<!-- Left: photos -->
|
||||
<div class="photo-col">
|
||||
<div class="photo-scroll">
|
||||
{#if entry.photos.length === 0}
|
||||
<div class="no-photos">No photos</div>
|
||||
{:else}
|
||||
<div class="photo-grid">
|
||||
{#each entry.photos as photo, i}
|
||||
<div class="photo-cell" class:cell-wide={i === 0 && entry.photos.length > 1}>
|
||||
<img src={photo} alt=""
|
||||
onclick={() => lightboxSrc = photo}
|
||||
onerror={(e) => e.currentTarget.parentElement.classList.add('cell-broken')} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Q&A -->
|
||||
<div class="info-col">
|
||||
<div class="info-inner">
|
||||
<div class="qa-list">
|
||||
|
||||
<div class="qa-item">
|
||||
<p class="question">When did you go?</p>
|
||||
<p class="answer">{formatDate(entry.date)}</p>
|
||||
</div>
|
||||
|
||||
<div class="qa-item">
|
||||
<p class="question">How long did you stay?</p>
|
||||
<p class="answer">{entry.days} {entry.days === 1 ? 'day' : 'days'}</p>
|
||||
</div>
|
||||
|
||||
<div class="qa-item">
|
||||
<p class="question">Who did you go with?</p>
|
||||
<p class="answer">
|
||||
{#if entry.tripType === 'solo'}
|
||||
Just me — solo trip
|
||||
{:else if entry.tripType === 'family'}
|
||||
With family
|
||||
{:else}
|
||||
With friends
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="qa-item">
|
||||
<p class="question">How was it?</p>
|
||||
<p class="answer memo">{entry.memo}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ── Outer layout: column (topbar + body) ── */
|
||||
.detail-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Full-width top bar ── */
|
||||
.detail-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.topbar-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.topbar-flag { font-size: 20px; line-height: 1; }
|
||||
|
||||
.topbar-place {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
.topbar-city {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
.topbar-country {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
color: var(--text-h);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.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--danger:hover { color: #dc2626; background: #fff1f1; border-color: #fca5a5; }
|
||||
|
||||
/* ── Body row ── */
|
||||
.detail-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Left: photos ── */
|
||||
.photo-col {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photo-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px;
|
||||
grid-auto-rows: 200px;
|
||||
}
|
||||
|
||||
.photo-cell {
|
||||
overflow: hidden;
|
||||
background: var(--bg-subtle);
|
||||
border-radius: 4px;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.photo-cell.cell-wide {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: span 2;
|
||||
}
|
||||
.photo-cell img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.photo-cell:hover img { transform: scale(1.03); }
|
||||
.photo-cell.cell-broken {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-sub);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.no-photos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-sub);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Right: Q&A ── */
|
||||
.info-col {
|
||||
width: 440px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.info-inner {
|
||||
padding: 36px 32px 80px;
|
||||
}
|
||||
|
||||
.qa-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.qa-item {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.qa-item:first-child { padding-top: 0; }
|
||||
.qa-item:last-child { border-bottom: none; }
|
||||
|
||||
.question {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--accent);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.answer {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
color: var(--text-h);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.answer.memo {
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* ── Lightbox ── */
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
.lightbox img {
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 700px) {
|
||||
.detail-body { flex-direction: column; overflow-y: auto; }
|
||||
.photo-col { height: 260px; flex: none; }
|
||||
.info-col { width: 100%; border-left: none; border-top: 1px solid var(--border); }
|
||||
}
|
||||
</style>
|
||||
198
src/lib/timeline/detail/JournalSummary.svelte
Normal file
198
src/lib/timeline/detail/JournalSummary.svelte
Normal file
@@ -0,0 +1,198 @@
|
||||
<script>
|
||||
/** @type {{ entries: import('../shared/types.js').JournalEntry[] }} */
|
||||
let { entries } = $props();
|
||||
|
||||
let stats = $derived.by(() => {
|
||||
if (entries.length === 0) return null;
|
||||
|
||||
const totalDays = entries.reduce((s, e) => s + e.days, 0);
|
||||
const countries = [...new Set(entries.map(e => e.location.country))];
|
||||
const cities = [...new Set(entries.flatMap(e => e.location.cities))];
|
||||
|
||||
const years = entries.map(e => new Date(e.date).getFullYear());
|
||||
const minYear = Math.min(...years);
|
||||
const maxYear = Math.max(...years);
|
||||
const yearRange = minYear === maxYear ? `${minYear}` : `${minYear} – ${maxYear}`;
|
||||
|
||||
return { totalDays, countries, cities, yearRange, tripCount: entries.length };
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if stats}
|
||||
<div class="passport">
|
||||
<!-- diagonal pattern -->
|
||||
|
||||
<div class="passport-body">
|
||||
<!-- Left -->
|
||||
<div class="passport-left">
|
||||
<div class="passport-header">
|
||||
<svg viewBox="0 0 32 32" fill="none" class="globe">
|
||||
<circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="1.3"/>
|
||||
<ellipse cx="16" cy="16" rx="5.5" ry="13" stroke="currentColor" stroke-width="1.3"/>
|
||||
<line x1="3" y1="16" x2="29" y2="16" stroke="currentColor" stroke-width="1.3"/>
|
||||
<line x1="5" y1="9" x2="27" y2="9" stroke="currentColor" stroke-width="1.3"/>
|
||||
<line x1="5" y1="23" x2="27" y2="23" stroke="currentColor" stroke-width="1.3"/>
|
||||
</svg>
|
||||
<span class="issuer">TRAVEL JOURNAL</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="type">PASSPORT</p>
|
||||
<p class="years">{stats.yearRange}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vdivider"></div>
|
||||
|
||||
<!-- Right -->
|
||||
<div class="passport-right">
|
||||
<div class="field">
|
||||
<span class="field-label">TRIPS</span>
|
||||
<span class="field-value">{stats.tripCount}</span>
|
||||
</div>
|
||||
<div class="field">
|
||||
<span class="field-label">COUNTRIES</span>
|
||||
<span class="field-value">{stats.countries.length}</span>
|
||||
</div>
|
||||
<div class="field">
|
||||
<span class="field-label">DAYS</span>
|
||||
<span class="field-value">{stats.totalDays}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MRZ -->
|
||||
<div class="mrz">
|
||||
<span>P<JNL{String(stats.tripCount).padStart(2,'0')}<<<<<<<<<<<<<<<<<<<<<<<<<<<</span>
|
||||
<span>{stats.yearRange.replace(' – ','').replace(/\s/g,'')}{'<'.repeat(12)}{String(stats.totalDays).padStart(4,'0')}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.passport {
|
||||
background: #1e1b4b;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
color: #e0e7ff;
|
||||
position: relative;
|
||||
}
|
||||
.passport::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
135deg,
|
||||
transparent 0px, transparent 20px,
|
||||
rgba(255,255,255,0.025) 20px, rgba(255,255,255,0.025) 21px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Body: left + divider + right in a row */
|
||||
.passport-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
padding: 20px;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Left column */
|
||||
.passport-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.passport-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.globe {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
color: #a5b4fc;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.issuer {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.18em;
|
||||
color: #a5b4fc;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.type {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
color: #818cf8;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.years {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
letter-spacing: -0.8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.vdivider {
|
||||
width: 1px;
|
||||
background: rgba(255,255,255,0.12);
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/* Right column */
|
||||
.passport-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.field-label {
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.18em;
|
||||
color: #818cf8;
|
||||
}
|
||||
.field-value {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* MRZ strip */
|
||||
.mrz {
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 9px 20px;
|
||||
background: rgba(0,0,0,0.18);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.mrz span {
|
||||
font-family: var(--mono);
|
||||
font-size: 8px;
|
||||
color: #6366f1;
|
||||
letter-spacing: 0.06em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
502
src/lib/timeline/detail/NewEntryForm.svelte
Normal file
502
src/lib/timeline/detail/NewEntryForm.svelte
Normal file
@@ -0,0 +1,502 @@
|
||||
<script>
|
||||
import { journals, addJournal } from '../../stores/journalStore.js';
|
||||
import { get } from 'svelte/store';
|
||||
import { flashCountry } from '../../layout/selection.svelte.js';
|
||||
import { countryNames } from '../../shared/countries.js';
|
||||
import { countryCities } from '../../shared/countryCities.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';
|
||||
|
||||
let { initialCountry = '', onBack, onSaved = onBack } = $props();
|
||||
|
||||
// ── Journal store (reactive) ────────────────────────────────────────
|
||||
let journalEntries = $state(get(journals));
|
||||
$effect(() => {
|
||||
const unsub = journals.subscribe(v => { journalEntries = v; });
|
||||
return unsub;
|
||||
});
|
||||
|
||||
// ── Fields ─────────────────────────────────────────────────────────
|
||||
let cities = $state([]);
|
||||
let cityInput = $state('');
|
||||
let country = $state(initialCountry);
|
||||
let date = $state(new Date().toISOString().slice(0, 10));
|
||||
let days = $state('');
|
||||
let tripType = $state('');
|
||||
let transport = $state('');
|
||||
let photos = $state([]);
|
||||
let answers = $state(['', '', '']);
|
||||
|
||||
let errors = $state({ country: '', cities: '', date: '', days: '', tripType: '', transport: '' });
|
||||
|
||||
// ── Steps ──────────────────────────────────────────────────────────
|
||||
let step = $state(1); // 1 | 2 | 3
|
||||
|
||||
// ── Random questions ───────────────────────────────────────────────
|
||||
const ALL_QUESTIONS = [
|
||||
'If this trip had a movie title, what would it be?',
|
||||
'What was the most unexpected thing that happened?',
|
||||
'Which moment would you relive for just 10 more minutes?',
|
||||
'What was your best accidental discovery?\n(A café, a street, a person, a view…)',
|
||||
'If your trip had a theme song, what would it sound like?',
|
||||
'What did you pack but never use?',
|
||||
'What was the smallest thing that made you surprisingly happy?',
|
||||
'If you could steal one thing from this place (without consequences), what would it be?\n(A tradition, a smell, a sunset, a food…)',
|
||||
'What story from this trip will you probably tell your friends first?',
|
||||
'What version of yourself showed up on this trip?',
|
||||
];
|
||||
|
||||
function pickRandom() {
|
||||
const shuffled = [...ALL_QUESTIONS].sort(() => Math.random() - 0.5);
|
||||
return shuffled.slice(0, 3);
|
||||
}
|
||||
|
||||
const questions = pickRandom();
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────
|
||||
// Suggest cities — if a country is selected, show cities only from that country;
|
||||
// otherwise show all known cities.
|
||||
let cityOptions = $derived(
|
||||
country.trim()
|
||||
? [...new Set([
|
||||
...(countryCities[country.trim()] ?? []),
|
||||
...journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []),
|
||||
])]
|
||||
: []
|
||||
);
|
||||
|
||||
function addCity(val) {
|
||||
const t = (val ?? cityInput).trim();
|
||||
if (t && !cities.includes(t)) cities = [...cities, t];
|
||||
cityInput = '';
|
||||
}
|
||||
|
||||
function removeCity(c) { cities = cities.filter(x => x !== c); }
|
||||
|
||||
$effect(() => { if (country.trim()) errors.country = ''; });
|
||||
$effect(() => { if (cities.length > 0) errors.cities = ''; });
|
||||
$effect(() => { if (date) errors.date = ''; });
|
||||
$effect(() => { if (days && Number(days) >= 1) errors.days = ''; });
|
||||
$effect(() => { if (tripType) errors.tripType = ''; });
|
||||
$effect(() => { if (transport) errors.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 },
|
||||
];
|
||||
|
||||
// ── Navigation ─────────────────────────────────────────────────────
|
||||
function nextStep() {
|
||||
if (step === 1) {
|
||||
errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
|
||||
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;
|
||||
}
|
||||
step++;
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (step === 1) onBack();
|
||||
else step--;
|
||||
}
|
||||
|
||||
// ── 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)
|
||||
.join('\n\n');
|
||||
try {
|
||||
await addJournal({
|
||||
title: `${cities.join(', ')}, ${country}`,
|
||||
date,
|
||||
days: Number(days),
|
||||
tripType,
|
||||
transport,
|
||||
memo,
|
||||
photos,
|
||||
location: { cities, country },
|
||||
});
|
||||
flashCountry(country);
|
||||
onSaved();
|
||||
} catch (e) {
|
||||
saving = false;
|
||||
saveError = e?.message ?? 'Failed to save. Please try again.';
|
||||
}
|
||||
}
|
||||
</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} disabled={saving}>
|
||||
{saving ? 'Saving…' : 'Save trip'}
|
||||
</button>
|
||||
{#if saveError}<span class="save-err">{saveError}</span>{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="scroll">
|
||||
<div class="form">
|
||||
|
||||
{#if step === 1}
|
||||
<!-- ── STEP 1: Details ── -->
|
||||
<h2 class="step-title">Trip details</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<label class="label" for="nc-country">Where did you go? <span class="req">*</span></label>
|
||||
<SearchInput id="nc-country" bind:value={country} options={countryNames} />
|
||||
{#if errors.country}<span class="ferr">{errors.country}</span>{/if}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="nc-city">Which cities did you visit? <span class="req">*</span></label>
|
||||
<SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} onblurcommit={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="nc-date">When did you travel? <span class="req">*</span></label>
|
||||
<input id="nc-date" class="input" type="date" bind:value={date} />
|
||||
{#if errors.date}<span class="ferr">{errors.date}</span>{/if}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="nc-days">How long was the trip? <span class="req">*</span></label>
|
||||
<input id="nc-days" class="input" type="number" min="1" bind:value={days} />
|
||||
{#if errors.days}<span class="ferr">{errors.days}</span>{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Who did you travel with? <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="nc-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 get there? <span class="req">*</span></label>
|
||||
<div class="transport-grid">
|
||||
{#each transportOptions as opt}
|
||||
<label class="transport-opt" class:active={transport === opt.value}>
|
||||
<input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
|
||||
<img src={opt.img} alt={opt.label} class="transport-img" />
|
||||
<span class="transport-label">{opt.label}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{#if errors.transport}<span class="ferr">{errors.transport}</span>{/if}
|
||||
</div>
|
||||
|
||||
{:else if step === 2}
|
||||
<!-- ── STEP 2: Photos ── -->
|
||||
<h2 class="step-title">Photos</h2>
|
||||
<p class="step-sub">Optional — add photos from your trip</p>
|
||||
<PhotoEditor {photos} onchange={(p) => (photos = p)} />
|
||||
|
||||
{:else}
|
||||
<!-- ── STEP 3: Questions ── -->
|
||||
<h2 class="step-title">Your memories</h2>
|
||||
|
||||
{#each questions as q, i}
|
||||
<div class="q-card">
|
||||
<p class="q-text">{q}</p>
|
||||
<textarea class="q-input" rows="3" placeholder="Your answer…" bind:value={answers[i]}></textarea>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
font-family: var(--sans);
|
||||
}
|
||||
|
||||
/* topbar */
|
||||
.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: 13px;
|
||||
font-weight: 300;
|
||||
color: var(--text);
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
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: 13px;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 8px;
|
||||
padding: 7px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.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; }
|
||||
|
||||
.form {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
padding: 36px 48px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: var(--text-h);
|
||||
letter-spacing: -0.3px;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
.step-sub {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: var(--text-sub);
|
||||
margin: -10px 0 4px;
|
||||
}
|
||||
|
||||
/* fields (same as EditForm) */
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
.req { color: var(--accent); font-size: 11px; }
|
||||
|
||||
.ferr { font-size: 11px; color: #dc2626; }
|
||||
|
||||
.combo-select, .city-text {
|
||||
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%;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
.combo-select:focus, .city-text:focus { border-color: var(--accent-border); }
|
||||
.combo-select { margin-bottom: 6px; cursor: pointer; }
|
||||
.city-text { margin-top: 0; }
|
||||
|
||||
.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%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input:focus { border-color: var(--accent-border); }
|
||||
|
||||
.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; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 8px; aspect-ratio: 1;
|
||||
border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle);
|
||||
cursor: pointer; transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.transport-opt input { display: none; }
|
||||
.transport-opt.active { border-color: var(--accent-border); background: var(--accent-bg); }
|
||||
.transport-img { width: 60px; height: 60px; object-fit: contain; }
|
||||
.transport-label {
|
||||
font-size: 12px; font-weight: 300; color: var(--text-sub);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.transport-opt.active .transport-label { color: var(--accent); }
|
||||
|
||||
.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; }
|
||||
|
||||
/* question cards */
|
||||
.q-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
.q-text {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--text-h);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.q-input {
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: var(--text-h);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 1.6;
|
||||
transition: border-color 0.15s;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.q-input:focus { border-color: var(--accent-border); }
|
||||
.q-input::placeholder { color: var(--text-sub); font-style: italic; }
|
||||
</style>
|
||||
186
src/lib/timeline/detail/PhotoEditor.svelte
Normal file
186
src/lib/timeline/detail/PhotoEditor.svelte
Normal file
@@ -0,0 +1,186 @@
|
||||
<script>
|
||||
import { storage } from '../../firebase.js';
|
||||
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
|
||||
|
||||
/** @type {{ photos: string[], onchange: (photos: string[]) => void }} */
|
||||
let { photos, onchange } = $props();
|
||||
|
||||
let fileInput;
|
||||
let uploading = $state(false);
|
||||
|
||||
function remove(index) {
|
||||
onchange(photos.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
async function addFiles(e) {
|
||||
const files = Array.from(e.currentTarget.files ?? []);
|
||||
if (!files.length) return;
|
||||
uploading = true;
|
||||
try {
|
||||
const urls = await Promise.all(files.map(uploadPhoto));
|
||||
onchange([...photos, ...urls]);
|
||||
} finally {
|
||||
uploading = false;
|
||||
e.currentTarget.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
/** @param {File} file */
|
||||
async function uploadPhoto(file) {
|
||||
const storageRef = ref(storage, `photos/${crypto.randomUUID()}`);
|
||||
await uploadBytes(storageRef, file);
|
||||
return getDownloadURL(storageRef);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="photo-editor">
|
||||
<div class="label-row">
|
||||
<span class="label">Photos</span>
|
||||
<input bind:this={fileInput} type="file" accept="image/*" multiple onchange={addFiles} hidden />
|
||||
</div>
|
||||
|
||||
{#if photos.length === 0}
|
||||
<button type="button" class="empty-zone" onclick={() => fileInput.click()} disabled={uploading}>
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="3"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<path d="M21 15l-5-5L5 21"/>
|
||||
</svg>
|
||||
<span>{uploading ? 'Uploading…' : 'Click to add photos'}</span>
|
||||
</button>
|
||||
{:else}
|
||||
<div class="grid">
|
||||
{#each photos as src, i (src + i)}
|
||||
<div class="cell">
|
||||
<img {src} alt="photo {i + 1}" />
|
||||
<button type="button" class="remove-btn" onclick={() => remove(i)} aria-label="Remove photo">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<path d="M18 6L6 18M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<button type="button" class="add-cell" onclick={() => fileInput.click()} disabled={uploading}>
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
||||
<path d="M12 5v14M5 12h14"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.photo-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-sub);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: var(--sans);
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 1px solid var(--accent-border);
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.add-btn:hover { background: rgba(124,58,237,0.12); }
|
||||
|
||||
.empty-zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
height: 120px;
|
||||
border: 1.5px dashed var(--border-bright);
|
||||
border-radius: 10px;
|
||||
color: var(--text-sub);
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
background: var(--bg-subtle);
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
width: 100%;
|
||||
}
|
||||
.empty-zone:hover { border-color: var(--accent-border); color: var(--accent); }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--bg-subtle);
|
||||
}
|
||||
|
||||
.cell img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0,0,0,0.55);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, background 0.15s;
|
||||
}
|
||||
.cell:hover .remove-btn { opacity: 1; }
|
||||
.remove-btn:hover { background: rgba(220,38,38,0.85); }
|
||||
|
||||
.add-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
border: 1.5px dashed var(--border-bright);
|
||||
background: var(--bg-subtle);
|
||||
color: var(--text-sub);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.add-cell:hover { border-color: var(--accent-border); color: var(--accent); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user