// ─────────────────────────────────────────────────────────────────────
// ADD STORY — a lightweight capture tool for the human history of a car.
//
// Not a wizard. A story starts from whatever you have in hand RIGHT NOW —
// a video of someone talking, an old photograph, or just words — and grows
// context later. One short landing, then one flexible editor.
//
// Capture what you have now. Add context when you know it.
//
// Three ways in:
// · Upload Video — preserve the recording, transcribe it, name who's telling it
// · Upload Photo — preserve the image, note who / where / when
// · Write Story — just start writing; attach media whenever
// (· Audio / Document — the same editor, seeded with that attachment)
//
// Every field is optional. Save a draft any time, or add it to the archive.
// ─────────────────────────────────────────────────────────────────────
const { useState: useStory } = React;
// ── header — title + a quiet mode eyebrow, no step rail ─────────────────
function StoryBar({ eyebrow, title = 'Add Story', onBack }) {
return (
{title}
{eyebrow}
);
}
// ── reusable quiet field — ledger-like, never boxy ──────────────────────
function Field({ icon, label, optional, children }) {
return (
{label}
{optional && OPTIONAL}
{children}
);
}
const storyInputStyle = (filled) => ({
width: '100%', boxSizing: 'border-box', background: 'transparent', border: 'none',
borderBottom: `1px solid ${filled ? P.gold : P.slate}`, outline: 'none',
color: P.paper, fontFamily: T.body, fontSize: 15, padding: '2px 0 7px',
});
// ── vehicle option for the related-car picker ───────────────────────────
function VehicleOption({ v, on, onClick }) {
const code = (v.make || '').replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase();
return (
);
}
// ── inline searchable vehicle field — scales from 1 car to hundreds ─────
// A text input; as soon as the user types, matching cars appear in a list
// below (searched across make / model / year / nickname / VIN / project).
// Picking one selects it; selected state collapses to the chosen car with
// a Change affordance. No modal — the list lives inline under the field.
function VehicleSearchField({ pool, selectedId, onSelect }) {
const [query, setQuery] = useStory('');
const [focused, setFocused] = useStory(false);
const byId = {}; pool.forEach(v => { byId[v.id] = v; });
const selected = selectedId ? byId[selectedId] : null;
const results = query.trim() ? searchVehicles(pool, query) : [];
const CAP = 8;
const shown = results.slice(0, CAP);
const more = Math.max(0, results.length - CAP);
// Selected state — show the chosen car, offer Change.
if (selected) {
return (
);
}
// ═════════════════════════════════════════════════════════════════════
// LANDING — five ways to start a story
// ═════════════════════════════════════════════════════════════════════
const ENTRIES = [
{ mode: 'video', icon: 'Video', title: 'Upload Video',
desc: 'Someone telling the story on camera. We can transcribe it.' },
{ mode: 'photo', icon: 'gallery', title: 'Upload Photo',
desc: 'An old photo of the car. Note who, where, and when.' },
{ mode: 'audio', icon: 'Mic', title: 'Upload Audio',
desc: 'A recollection or interview, preserved and transcribable.' },
{ mode: 'doc', icon: 'FileText', title: 'Add a Document',
desc: 'A letter, article, build sheet, or note — preserved as-is.' },
{ mode: 'write', icon: 'Feather', title: 'Write Story',
desc: 'Just start writing. Attach media whenever you have it.' },
];
function StoryStart({ onPick, onBack }) {
return (
EVERY CAR HAS A STORY
Start your story however you like. You can add to the story later as more details become available.
{ENTRIES.map(e => (
))}
{/* principle line */}
Capture what you have now · add context later.
);
}
// ═════════════════════════════════════════════════════════════════════
// MEDIA HERO — the seed media shown at the top of the editor
// ═════════════════════════════════════════════════════════════════════
function VideoHero({ name }) {
return (
{name}
);
}
function AudioHero({ name }) {
// a quiet waveform stand-in — bars of varied height, play affordance, filename
const bars = [10, 22, 14, 34, 26, 44, 30, 52, 38, 60, 44, 54, 32, 46, 24, 38, 18, 30, 12, 22, 14, 26, 10, 18];
return (
{bars.map((h, i) => (
))}
{name}
);
}
function PhotoHero({ name }) {
return (
{name}
);
}
const SAMPLE_TRANSCRIPT = "My father bought this car new in the spring of 1973. He drove it down from the dealership in Stuttgart himself — wouldn't let anyone else behind the wheel. I still remember the sound of it pulling into the driveway. He kept every receipt, every note. He used to say a car like this one doesn't belong to you, you're just looking after it for the next person.";
// ═════════════════════════════════════════════════════════════════════
// EDITOR — one flexible screen, adapts to how the story started
// ═════════════════════════════════════════════════════════════════════
function StoryEditor({ mode, vehicles, initialVehicleId, onBack, onSave }) {
const active = vehicles.filter(v => v.status !== 'Sold' && v.status !== 'Archived');
const isVideo = mode === 'video';
const isPhoto = mode === 'photo';
const isAudio = mode === 'audio';
const isRecording = isVideo || isAudio; // a spoken recording — transcript + speaker
const [title, setTitle] = useStory('');
const [body, setBody] = useStory('');
const [vehId, setVehId] = useStory(initialVehicleId || null);
const [narrator, setNarrator] = useStory(''); // video only — "person telling the story"
const [people, setPeople] = useStory([]);
const [approx, setApprox] = useStory(false);
const [dateExact, setDateExact] = useStory('');
const [year, setYear] = useStory('');
const [season, setSeason] = useStory('—');
const [place, setPlace] = useStory('');
const [transcribed, setTranscribed] = useStory(false);
const seed = {
photo: ['PHOTOGRAPH.HEIC'], video: ['INTERVIEW.MP4'],
audio: ['RECOLLECTION.M4A'], doc: ['DOCUMENT.PDF'],
};
const [media, setMedia] = useStory({
photo: isPhoto ? seed.photo : [],
video: isVideo ? seed.video : [],
audio: mode === 'audio' ? seed.audio : [],
doc: mode === 'doc' ? seed.doc : [],
});
const addMedia = (type) => {
const s = ATTACH_SAMPLES[type];
setMedia(m => ({ ...m, [type]: [...m[type], s[m[type].length % s.length]] }));
};
const removeMedia = (type, i) => setMedia(m => ({ ...m, [type]: m[type].filter((_, j) => j !== i) }));
const eyebrow = isVideo ? 'VIDEO STORY' : isPhoto ? 'PHOTO STORY'
: mode === 'audio' ? 'AUDIO STORY' : mode === 'doc' ? 'DOCUMENT STORY' : 'WRITTEN STORY';
// people field adapts its label to context
const peopleLabel = isRecording ? 'PEOPLE MENTIONED OR PRESENT' : isPhoto ? 'PEOPLE IN THE PHOTO' : 'PEOPLE';
const bodyLabel = isPhoto ? 'NOTES ABOUT THE PHOTO' : 'THE STORY';
const mediaWord = isVideo ? 'Video' : 'Audio';
// Searchable collection pool — real cars + roster standing in for a large
// collection, so the picker works whether it's 1 vehicle or 300.
const pool = (typeof vehiclePool === 'function') ? vehiclePool(active) : active;
const veh = pool.find(v => v.id === vehId);
const mediaTotal = Object.values(media).reduce((a, b) => a + b.length, 0);
const hasSomething = title.trim() || body.trim() || mediaTotal > 0 || narrator.trim() || people.length;
const transcribe = () => { setBody(SAMPLE_TRANSCRIPT); setTranscribed(true); };
return (
{/* media hero */}
{(isRecording || isPhoto) && (
{isVideo ?
: isAudio ?
: }
)}
{/* title — always first, always optional */}
setTitle(e.target.value)}
placeholder={isPhoto ? 'The day it came home' : isRecording ? 'In his own words' : 'Give the story a title'}
style={{ ...storyInputStyle(title.trim()), fontFamily: T.display, fontSize: 18, fontWeight: 600 }} />
{/* RECORDING: transcript with a transcribe affordance */}
{isRecording && (
{!body && !transcribed ? (
Generate a transcript from the recording, then edit anything that needs a correction.