\n \n \n \n\n",[],[268,270],"422a8e08-864c-46f1-bd81-1582feb2e36c","helpers.ts","9ffcae7c-78e0-11f1-896f-1607ee4eb77e",32,["D",1786630240383],"// Shared formatting + API helpers for the Garage frontend\n\nexport const EVENT_TYPES: Record = {\n service: { label: \"Service\", icon: \"🔧\", badge: \"text-sky-400 bg-sky-400/10 border-sky-400/20\", dot: \"bg-sky-400\" },\n mod: { label: \"Mod\", icon: \"⚡\", badge: \"text-purple-400 bg-purple-400/10 border-purple-400/20\", dot: \"bg-purple-400\" },\n repair: { label: \"Repair\", icon: \"🛠️\", badge: \"text-orange-400 bg-orange-400/10 border-orange-400/20\", dot: \"bg-orange-400\" },\n inspection: { label: \"Inspection\", icon: \"📋\", badge: \"text-emerald-400 bg-emerald-400/10 border-emerald-400/20\", dot: \"bg-emerald-400\" },\n purchase: { label: \"Purchased\", icon: \"🔑\", badge: \"text-amber-400 bg-amber-400/10 border-amber-400/20\", dot: \"bg-amber-400\" },\n sale: { label: \"Sold\", icon: \"🤝\", badge: \"text-rose-400 bg-rose-400/10 border-rose-400/20\", dot: \"bg-rose-400\" },\n other: { label: \"Other\", icon: \"📌\", badge: \"text-neutral-300 bg-neutral-400/10 border-neutral-500/30\", dot: \"bg-neutral-400\" },\n};\n\nexport function eventType(t: string) {\n return EVENT_TYPES[t] || EVENT_TYPES.other;\n}\n\nexport function carTitle(car: any) {\n return car.nickname || [car.year, car.make, car.model].filter(Boolean).join(\" \");\n}\n\nexport function carSubtitle(car: any) {\n const full = [car.year, car.make, car.model, car.trim].filter(Boolean).join(\" \");\n return car.nickname ? full : (car.trim || \"\");\n}\n\nexport function fmtDate(d?: string | null) {\n if (!d) return null;\n const [y, m, day] = String(d).split(\"-\").map(Number);\n if (!y || !m || !day) return String(d);\n return new Date(y, m - 1, day).toLocaleDateString(undefined, {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n}\n\nexport function fmtNum(n?: number | null) {\n return n == null ? null : Number(n).toLocaleString();\n}\n\nexport function fmtMoney(n?: number | null) {\n if (n == null) return null;\n const v = Number(n);\n return \"$\" + (Number.isInteger(v)\n ? v.toLocaleString()\n : v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));\n}\n\nexport function fmtBytes(n?: number | null) {\n if (n == null) return \"\";\n if (n < 1024) return n + \" B\";\n if (n < 1048576) return (n / 1024).toFixed(0) + \" KB\";\n return (n / 1048576).toFixed(1) + \" MB\";\n}\n\nexport function ownedFor(from?: string | null, to?: string | null) {\n if (!from) return null;\n const start = new Date(from);\n const end = to ? new Date(to) : new Date();\n let months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());\n if (isNaN(months) || months < 0) return null;\n const y = Math.floor(months / 12);\n const m = months % 12;\n if (y && m) return `${y} yr ${m} mo`;\n if (y) return `${y} yr`;\n return m ? `${m} mo` : \"< 1 mo\";\n}\n\nexport async function api(path: string, opts: any = {}) {\n const headers: Record = { ...(opts.headers || {}) };\n if (opts.body && typeof opts.body === \"string\") headers[\"Content-Type\"] = \"application/json\";\n const res = await fetch(path, { ...opts, headers });\n if (!res.ok) {\n let msg = `Request failed (${res.status})`;\n try {\n const j = await res.json();\n if (j.error) msg = j.error;\n } catch { /* not json */ }\n throw new Error(msg);\n }\n return res.json();\n}\n\n// Downscale + JPEG-compress photos client-side before upload to save blob storage\nexport async function compressImage(file: File, maxDim = 1600, quality = 0.82): Promise {\n if (!file.type.startsWith(\"image/\")) return file;\n try {\n const bmp = await createImageBitmap(file);\n const scale = Math.min(1, maxDim / Math.max(bmp.width, bmp.height));\n const w = Math.round(bmp.width * scale);\n const h = Math.round(bmp.height * scale);\n const canvas = document.createElement(\"canvas\");\n canvas.width = w;\n canvas.height = h;\n canvas.getContext(\"2d\")!.drawImage(bmp, 0, 0, w, h);\n const out: Blob | null = await new Promise((r) => canvas.toBlob(r, \"image/jpeg\", quality));\n return out && out.size < file.size ? out : file;\n } catch {\n return file;\n }\n}\n\n// Upload a file to a car, optionally linked to a specific event.\n// Images are compressed and treated as photos; everything else is a document.\nexport async function uploadCarFile(\n carId: number,\n file: File,\n opts: { kind?: \"photo\" | \"document\"; eventId?: number | null } = {},\n) {\n const kind = opts.kind || (file.type.startsWith(\"image/\") ? \"photo\" : \"document\");\n let payload: Blob = file;\n let name = file.name;\n if (kind === \"photo\") {\n payload = await compressImage(file);\n if (payload !== file) name = file.name.replace(/\\.[^.]+$/, \"\") + \".jpg\";\n }\n const fd = new FormData();\n fd.append(\"file\", payload, name);\n fd.append(\"kind\", kind);\n if (opts.eventId != null) fd.append(\"event_id\", String(opts.eventId));\n return api(`/api/cars/${carId}/files`, { method: \"POST\", body: fd });\n}\n",[],[268,278],"42f87b76-162c-4e7f-8007-67f70a2cb01a","favicon.svg","019f3530-a79e-72d4-b6fa-f7c02721a6e8",12,["D",1783304331722],"\n\n",[],[268,286],"2b9d9b81-f3a6-4649-95e2-755459b0f021","Timeline.tsx","ec757f86-78e0-11f1-af42-1607ee4eb77e","019f3530-a79e-72d4-b6fa-f3b35a448671",36,["D",1786630282551],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, EVENT_TYPES, eventType, fmtBytes, fmtDate, fmtMoney, fmtNum, uploadCarFile } from \"../helpers.ts\";\n\nconst inputCls =\n \"w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-amber-500/70\";\n\nexport function Timeline({ car, events, files = [], onChange }: any) {\n const [adding, setAdding] = useState(false);\n const [editing, setEditing] = useState(null);\n const [lightbox, setLightbox] = useState(null);\n const [attaching, setAttaching] = useState(null);\n const attachInput = useRef(null);\n const attachTarget = useRef(null);\n\n const items = buildTimeline(car, events);\n const attachmentsFor = (id: number) => files.filter((f: any) => f.event_id === id);\n\n async function remove(ev: any) {\n if (!confirm(`Delete \"${ev.title}\"?`)) return;\n await api(`/api/events/${ev.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n function pickAttachment(eventId: number) {\n attachTarget.current = eventId;\n attachInput.current?.click();\n }\n\n async function onAttachPicked(e: any) {\n const picked: File[] = Array.from(e.target.files || []);\n e.target.value = \"\";\n const eventId = attachTarget.current;\n if (!picked.length || eventId == null) return;\n setAttaching(eventId);\n let err = \"\";\n for (const f of picked) {\n try {\n await uploadCarFile(car.id, f, { eventId });\n } catch (e2: any) {\n err = e2.message;\n }\n }\n setAttaching(null);\n if (err) alert(\"Some attachments failed: \" + err);\n onChange();\n }\n\n async function removeAttachment(f: any) {\n if (!confirm(`Remove ${f.filename} from this event?`)) return;\n await api(`/api/files/${f.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n return (\n

\n {!adding && (\n {\n setAdding(true);\n setEditing(null);\n }}\n className=\"mb-4 bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm\"\n >\n + Log event\n \n )}\n {(adding || editing) && (\n {\n setAdding(false);\n setEditing(null);\n }}\n onSaved={() => {\n setAdding(false);\n setEditing(null);\n onChange();\n }}\n />\n )}\n\n {items.length === 0 && (\n

\n {car.status === \"wishlist\"\n ? \"Nothing logged yet. Track test drives, listings you're watching, or price drops.\"\n : \"No history yet. Log services, mods, repairs — anything that happens to this car.\"}\n

\n )}\n\n

\n {items.map((ev: any, i: number) => {\n const t = eventType(ev.type);\n const meta = [fmtDate(ev.date), ev.mileage != null ? `${fmtNum(ev.mileage)} mi` : null, fmtMoney(ev.cost)]\n .filter(Boolean);\n return (\n \n \n

\n \n {t.icon} {t.label}\n \n

{ev.title}

\n {meta.length > 0 &&

{meta.join(\" · \")}

}\n {ev.description && (\n

{ev.description}

\n )}\n

\n {!ev.synthetic && (\n

\n pickAttachment(ev.id)}\n disabled={attaching === ev.id}\n title=\"Attach photo or invoice\"\n className=\"text-neutral-500 hover:text-amber-400 px-1.5 disabled:opacity-50\"\n >\n {attaching === ev.id ? \"…\" : \"📎\"}\n \n {\n setEditing(ev);\n setAdding(false);\n }}\n title=\"Edit\"\n className=\"text-neutral-500 hover:text-neutral-200 px-1.5\"\n >\n ✎\n \n \n

\n )}\n

\n {!ev.synthetic && (() => {\n const atts = attachmentsFor(ev.id);\n if (!atts.length) return null;\n const pics = atts.filter((f: any) => f.kind === \"photo\");\n const docs = atts.filter((f: any) => f.kind !== \"photo\");\n return (\n

\n {pics.length > 0 && (\n

\n {pics.map((f: any) => (\n

\n setLightbox(f)}\n className=\"h-20 w-20 object-cover rounded-lg border border-neutral-700 cursor-pointer\"\n />\n removeAttachment(f)}\n title=\"Remove\"\n className=\"absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-neutral-950/90 border border-neutral-600 text-neutral-300 hover:text-rose-400 text-xs leading-none opacity-0 group-hover/att:opacity-100 transition-opacity\"\n >\n ✕\n \n

\n ))}\n

\n )}\n {docs.map((f: any) => (\n

\n \n 📄\n {f.filename}\n {fmtBytes(f.size)}\n \n removeAttachment(f)}\n title=\"Remove\"\n className=\"text-neutral-500 hover:text-rose-400 px-1\"\n >\n ✕\n \n

\n ))}\n

\n );\n })()}\n

\n );\n })}\n

\n\n \n\n {lightbox && (\n setLightbox(null)}\n >\n e.stopPropagation()}\n />\n

{lightbox.filename}

\n \n \n )}\n \n );\n}\n\n// Merge real events with synthetic purchase/sale entries derived from the car itself\nfunction buildTimeline(car: any, events: any[]) {\n const items: any[] = events.map((e) => ({ ...e }));\n if (car.purchase_date || car.purchase_price != null || car.purchase_mileage != null) {\n items.push({\n id: \"purchase\",\n synthetic: true,\n type: \"purchase\",\n title: \"Purchased\",\n date: car.purchase_date,\n mileage: car.purchase_mileage,\n cost: car.purchase_price,\n });\n }\n if (car.status === \"previous\" && (car.sold_date || car.sold_price != null)) {\n items.push({\n id: \"sale\",\n synthetic: true,\n type: \"sale\",\n title: \"Sold\",\n date: car.sold_date,\n cost: car.sold_price,\n });\n }\n return items.sort((a, b) =>\n String(b.date || \"9999-12-31\").localeCompare(String(a.date || \"9999-12-31\")) ||\n (Number(b.id) || Infinity) - (Number(a.id) || Infinity)\n );\n}\n\nfunction EventForm({ carId, initial, onClose, onSaved }: any) {\n const [form, setForm] = useState({\n type: initial?.type || \"service\",\n title: initial?.title || \"\",\n date: initial?.date || \"\",\n mileage: initial?.mileage ?? \"\",\n cost: initial?.cost ?? \"\",\n description: initial?.description || \"\",\n });\n const [saving, setSaving] = useState(false);\n const [error, setError] = useState(\"\");\n const set = (k: string) => (e: any) => setForm((f: any) => ({ ...f, [k]: e.target.value }));\n\n async function submit(e: any) {\n e.preventDefault();\n if (!form.title.trim()) {\n setError(\"Give the event a title\");\n return;\n }\n setSaving(true);\n setError(\"\");\n const payload = {\n type: form.type,\n title: form.title.trim(),\n date: form.date || null,\n mileage: form.mileage === \"\" ? null : Number(form.mileage),\n cost: form.cost === \"\" ? null : Number(form.cost),\n description: form.description.trim() || null,\n };\n try {\n if (initial) {\n await api(`/api/events/${initial.id}`, { method: \"PUT\", body: JSON.stringify(payload) });\n } else {\n await api(`/api/cars/${carId}/events`, { method: \"POST\", body: JSON.stringify(payload) });\n }\n onSaved();\n } catch (err: any) {\n setError(err.message);\n setSaving(false);\n }\n }\n\n return (\n \n );\n}\n",[],[268,302,294],"components","b9d65a74-1133-40d1-acfb-4296adf677bd","MediaSections.tsx","fe9e6d12-78e0-11f1-9c8f-1607ee4eb77e",10,["D",1783304316490],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, compressImage, fmtBytes, fmtDate } from \"../helpers.ts\";\n\nfunction useUploader(carId: number, kind: \"photo\" | \"document\", onChange: () => void) {\n const inputRef = useRef(null);\n const [busy, setBusy] = useState<{ done: number; total: number } | null>(null);\n\n async function onPick(e: any) {\n const files: File[] = Array.from(e.target.files || []);\n e.target.value = \"\";\n if (!files.length) return;\n setBusy({ done: 0, total: files.length });\n let err = \"\";\n for (let i = 0; i < files.length; i++) {\n try {\n const f = files[i];\n let payload: Blob = f;\n let name = f.name;\n if (kind === \"photo\") {\n payload = await compressImage(f);\n if (payload !== f) name = f.name.replace(/\\.[^.]+$/, \"\") + \".jpg\";\n }\n const fd = new FormData();\n fd.append(\"file\", payload, name);\n fd.append(\"kind\", kind);\n await api(`/api/cars/${carId}/files`, { method: \"POST\", body: fd });\n } catch (e2: any) {\n err = e2.message;\n }\n setBusy({ done: i + 1, total: files.length });\n }\n setBusy(null);\n if (err) alert(\"Some uploads failed: \" + err);\n onChange();\n }\n\n return { inputRef, busy, onPick, open: () => inputRef.current?.click() };\n}\n\nexport function PhotosSection({ carId, photos, coverId, onChange }: any) {\n const up = useUploader(carId, \"photo\", onChange);\n const [lightbox, setLightbox] = useState(null);\n\n async function setCover(f: any) {\n await api(`/api/cars/${carId}`, { method: \"PUT\", body: JSON.stringify({ cover_file_id: f.id }) });\n onChange();\n }\n async function remove(f: any) {\n if (!confirm(`Delete ${f.filename}?`)) return;\n await api(`/api/files/${f.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n return (\n

\n \n \n {up.busy ? `Uploading ${up.busy.done}/${up.busy.total}…` : \"+ Upload photos\"}\n \n\n {photos.length === 0 && !up.busy && (\n

No photos yet. Uploads are resized automatically to save space.

\n )}\n\n

\n {photos.map((f: any) => (\n

\n setLightbox(f)}\n />\n {coverId === f.id && (\n \n ★ Cover\n \n )}\n

\n {coverId !== f.id && (\n setCover(f)}\n className=\"text-[11px] px-2 py-1 rounded-lg bg-black/70 border border-neutral-600 hover:border-amber-500/60\"\n >\n ★ Set cover\n \n )}\n remove(f)}\n className=\"text-[11px] px-2 py-1 rounded-lg bg-black/70 border border-neutral-600 text-rose-400 hover:border-rose-500/60\"\n >\n ✕\n \n

\n ))}\n

\n\n {lightbox && (\n setLightbox(null)}\n >\n e.stopPropagation()}\n />\n

{lightbox.filename} · {fmtDate(String(lightbox.created_at).slice(0, 10))}

\n \n

\n )}\n \n );\n}\n\nexport function DocsSection({ carId, docs, onChange }: any) {\n const up = useUploader(carId, \"document\", onChange);\n\n async function remove(f: any) {\n if (!confirm(`Delete ${f.filename}?`)) return;\n await api(`/api/files/${f.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n function icon(f: any) {\n const m = String(f.mime_type || \"\");\n if (m.includes(\"pdf\")) return \"📕\";\n if (m.startsWith(\"image/\")) return \"🖼️\";\n if (m.includes(\"sheet\") || m.includes(\"csv\") || m.includes(\"excel\")) return \"📊\";\n return \"📄\";\n }\n\n return (\n

\n \n \n {up.busy ? `Uploading ${up.busy.done}/${up.busy.total}…` : \"+ Upload documents\"}\n \n\n {docs.length === 0 && !up.busy && (\n

\n No documents yet. Keep titles, receipts, window stickers, insurance docs — anything tied to this car.\n

\n )}\n\n

\n {docs.map((f: any) => (\n

\n {icon(f)}\n

{f.filename}

\n {fmtBytes(f.size)} · {fmtDate(String(f.created_at).slice(0, 10))}\n

\n \n Open\n \n \n ↓\n \n remove(f)}\n className=\"px-2.5 py-1.5 rounded-lg border border-neutral-700 text-rose-400 hover:bg-rose-950/50\"\n >\n ✕\n \n

\n ))}\n

\n );\n}\n",[],[268,302,304],"0eb8d795-178a-41bb-80a3-431c9155235a","GarageView.tsx","b4aa603a-78e0-11f1-8076-1607ee4eb77e",21,["D",1785284654528],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, carSubtitle, carTitle, fmtDate, fmtMoney, fmtNum } from \"../helpers.ts\";\nimport { CarForm } from \"./CarForm.tsx\";\n\nexport function GarageView() {\n const [cars, setCars] = useState(null);\n const [error, setError] = useState(\"\");\n const [showForm, setShowForm] = useState(false);\n\n async function load() {\n try {\n const data = await api(\"/api/cars\");\n setCars(data.cars);\n } catch (e: any) {\n setError(e.message);\n }\n }\n useEffect(() => {\n load();\n }, []);\n\n if (error) return

Couldn't load the garage: {error}

;\n if (!cars) return

Opening the garage…

;\n\n const current = cars.filter((c) => c.status === \"current\");\n const wishlist = cars.filter((c) => c.status === \"wishlist\");\n const previous = cars.filter((c) => c.status === \"previous\");\n\n const summary = [`${current.length} in the garage`];\n if (wishlist.length) summary.push(`${wishlist.length} on the wishlist`);\n if (previous.length) summary.push(`${previous.length} previously owned`);\n\n return (\n

My Garage

{summary.join(\" · \")}

\n setShowForm(true)}\n className=\"bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm transition-colors\"\n >\n + Add car\n \n

\n\n {cars.length === 0 && (\n

🚗

The garage is empty

\n Add your first car — one you own, used to own, or dream about.\n

\n setShowForm(true)}\n className=\"bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm\"\n >\n + Add your first car\n \n

\n )}\n\n {current.length > 0 && (\n

\n {current.map((car) => )}\n

\n )}\n {wishlist.length > 0 && (\n

\n {wishlist.map((car) => )}\n

\n )}\n {previous.length > 0 && (\n

\n {previous.map((car) => )}\n

\n )}\n\n {showForm && (\n setShowForm(false)}\n onSaved={(car: any) => {\n setShowForm(false);\n window.location.hash = `#/car/${car.id}`;\n }}\n />\n )}\n

\n );\n}\n\nfunction Section({ title, count, children }: any) {\n return (\n

\n {title} · {count}\n

{children}

\n );\n}\n\nfunction CarCard({ car }: any) {\n return (\n \n

\n {car.cover_file_id\n ? (\n \n )\n : (\n

\n {car.status === \"wishlist\" ? \"💭\" : \"🚗\"}\n

\n )}\n {car.status === \"previous\" && (\n \n Sold{car.sold_date ? ` · ${fmtDate(car.sold_date)}` : \"\"}\n \n )}\n

{carTitle(car)}

\n {carSubtitle(car) &&

{carSubtitle(car)}

}\n

\n {car.status === \"wishlist\" && car.target_price != null && 🎯 {fmtMoney(car.target_price)}}\n {car.current_mileage != null && 🛞 {fmtNum(car.current_mileage)} mi}\n {car.avg_mpg != null && ⛽ {car.avg_mpg} mpg}\n 📖 {car.event_count} {car.event_count === 1 ? \"event\" : \"events\"}\n {car.photo_count > 0 && 📷 {car.photo_count}}\n

\n \n );\n}\n",[],[268,302,312],"6195f193-fa16-442e-b341-07ab51e79dd1","CarForm.tsx","c5fae364-78e0-11f1-aba5-1607ee4eb77e",20,["D",1785284634074],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../helpers.ts\";\n\nconst EMPTY: Record = {\n nickname: \"\",\n year: \"\",\n make: \"\",\n model: \"\",\n trim: \"\",\n color: \"\",\n vin: \"\",\n status: \"current\",\n purchase_date: \"\",\n purchase_price: \"\",\n purchase_mileage: \"\",\n current_mileage: \"\",\n avg_mpg: \"\",\n sold_date: \"\",\n sold_price: \"\",\n target_price: \"\",\n listing_url: \"\",\n notes: \"\",\n};\n\nconst inputCls =\n \"w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-amber-500/70\";\n\nexport function CarForm({ initial, onClose, onSaved }: any) {\n const [form, setForm] = useState(() => {\n const f = { ...EMPTY };\n if (initial) for (const k of Object.keys(EMPTY)) f[k] = initial[k] ?? \"\";\n return f;\n });\n const [saving, setSaving] = useState(false);\n const [error, setError] = useState(\"\");\n\n const set = (k: string) => (e: any) => setForm((f: any) => ({ ...f, [k]: e.target.value }));\n const num = (v: any) => (v === \"\" || v == null ? null : Number(v));\n const str = (v: any) => (v === \"\" || v == null ? null : String(v).trim() || null);\n\n const isWish = form.status === \"wishlist\";\n\n async function submit(e: any) {\n e.preventDefault();\n if (!form.make.trim() || !form.model.trim()) {\n setError(\"Make and model are required\");\n return;\n }\n setSaving(true);\n setError(\"\");\n const payload = {\n nickname: str(form.nickname),\n year: num(form.year),\n make: form.make.trim(),\n model: form.model.trim(),\n trim: str(form.trim),\n color: str(form.color),\n vin: str(form.vin),\n status: form.status,\n purchase_date: str(form.purchase_date),\n purchase_price: num(form.purchase_price),\n purchase_mileage: num(form.purchase_mileage),\n current_mileage: num(form.current_mileage),\n avg_mpg: num(form.avg_mpg),\n sold_date: form.status === \"previous\" ? str(form.sold_date) : null,\n sold_price: form.status === \"previous\" ? num(form.sold_price) : null,\n target_price: num(form.target_price),\n listing_url: str(form.listing_url),\n notes: str(form.notes),\n };\n try {\n const data = initial?.id\n ? await api(`/api/cars/${initial.id}`, { method: \"PUT\", body: JSON.stringify(payload) })\n : await api(\"/api/cars\", { method: \"POST\", body: JSON.stringify(payload) });\n onSaved(data.car);\n } catch (err: any) {\n setError(err.message);\n setSaving(false);\n }\n }\n\n return (\n \n e.stopPropagation()}\n onSubmit={submit}\n className=\"w-full max-w-xl bg-neutral-900 border border-neutral-800 rounded-2xl p-5 my-8\"\n >\n

{initial?.id ? \"Edit car\" : \"Add a car\"}

\n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {!isWish && (\n \n \n \n )}\n \n \n \n {isWish\n ? (\n \n \n \n )\n : (\n \n \n \n )}\n {isWish && (\n \n \n \n )}\n {!isWish && (\n \n \n \n )}\n {!isWish && (\n \n \n \n )}\n {!isWish && (\n \n \n \n )}\n {!isWish && (\n \n \n \n )}\n {form.status === \"previous\" && (\n \n \n \n )}\n {form.status === \"previous\" && (\n \n \n \n )}\n \n \n \n

\n\n {error &&

{error}

}\n\n

\n \n Cancel\n \n \n {saving ? \"Saving…\" : initial?.id ? \"Save changes\" : \"Add car\"}\n \n

\n \n \n );\n}\n\nfunction Field({ label, children, span }: any) {\n return (\n \n {label}\n {children}\n \n );\n}\n",[],[268,302,320],"60186706-4333-4d27-8464-cf481861c6e3","CarDetail.tsx","d7dd0b70-78e0-11f1-af42-1607ee4eb77e",["D",1786630287524],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, carSubtitle, carTitle, fmtDate, fmtMoney, fmtNum, ownedFor } from \"../helpers.ts\";\nimport { CarForm } from \"./CarForm.tsx\";\nimport { Timeline } from \"./Timeline.tsx\";\nimport { DocsSection, PhotosSection } from \"./MediaSections.tsx\";\n\nexport function CarDetail({ carId }: { carId: number }) {\n const [data, setData] = useState(null);\n const [error, setError] = useState(\"\");\n const [tab, setTab] = useState(\"timeline\");\n const [editing, setEditing] = useState(null);\n\n async function load() {\n try {\n const d = await api(`/api/cars/${carId}`);\n setData(d);\n } catch (e: any) {\n setError(e.message);\n }\n }\n useEffect(() => {\n load();\n }, [carId]);\n\n if (error) return

Couldn't load this car: {error}

;\n if (!data) return

Pulling it out of the garage…

;\n\n const { car, events, files } = data;\n const photos = files.filter((f: any) => f.kind === \"photo\");\n const docs = files.filter((f: any) => f.kind === \"document\");\n const cover = car.cover_file_id ? photos.find((p: any) => p.id === car.cover_file_id) : null;\n const milesDriven = car.current_mileage != null && car.purchase_mileage != null\n ? car.current_mileage - car.purchase_mileage\n : null;\n const owned = ownedFor(car.purchase_date, car.status === \"previous\" ? car.sold_date : null);\n\n async function deleteCar() {\n if (!confirm(`Delete ${carTitle(car)} and all its events, photos, and documents? This can't be undone.`)) return;\n await api(`/api/cars/${car.id}`, { method: \"DELETE\" });\n window.location.hash = \"#/\";\n }\n\n const tabs = [\n { id: \"timeline\", label: `History · ${events.length}` },\n { id: \"photos\", label: `Photos · ${photos.length}` },\n { id: \"docs\", label: `Documents · ${docs.length}` },\n ];\n\n return (\n

\n \n ← Back to garage\n \n\n {/* Hero */}\n

\n {cover\n ?

\n : (\n

\n 🚗\n

\n )}\n

{carTitle(car)}

\n {car.status === \"previous\" && (\n \n Previously owned\n \n )}\n {car.status === \"wishlist\" && (\n \n 💭 Wishlist\n \n )}\n

\n {carSubtitle(car) &&

{carSubtitle(car)}

}\n

\n {car.color && {car.color}}\n {car.vin && VIN {car.vin}}\n {car.listing_url && (\n \n Listing ↗\n \n )}\n

\n {car.status === \"wishlist\" && (\n setEditing({ ...car, status: \"current\" })}\n className=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-amber-500 hover:bg-amber-400 text-neutral-950\"\n >\n 🎉 I bought it\n \n )}\n setEditing(car)}\n className=\"px-3 py-1.5 rounded-lg text-sm bg-neutral-800/90 border border-neutral-700 hover:bg-neutral-700\"\n >\n ✎ Edit\n \n \n Delete\n \n

\n\n {/* Stats */}\n

\n {car.current_mileage != null && (\n = 0 ? `+${fmtNum(milesDriven)} while owned` : undefined}\n />\n )}\n {car.avg_mpg != null && }\n {(car.purchase_date || car.purchase_price != null) && (\n \n )}\n {car.status === \"previous\" && (car.sold_date || car.sold_price != null) && (\n \n )}\n {owned && }\n {car.status === \"wishlist\" && car.target_price != null && (\n \n )}\n

\n\n {car.notes && (\n

\n {car.notes}\n

\n )}\n\n {/* Tabs */}\n

\n {tabs.map((t) => (\n setTab(t.id)}\n className={`px-3 py-1.5 rounded-lg text-sm border transition-colors ${\n tab === t.id\n ? \"bg-amber-500/10 text-amber-400 border-amber-500/40\"\n : \"border-neutral-800 text-neutral-400 hover:text-neutral-200 hover:border-neutral-600\"\n }`}\n >\n {t.label}\n \n ))}\n

\n\n {tab === \"timeline\" && }\n {tab === \"photos\" && }\n {tab === \"docs\" && }\n\n {editing && (\n setEditing(null)}\n onSaved={() => {\n setEditing(null);\n load();\n }}\n />\n )}\n

\n );\n}\n\nfunction Stat({ label, value, sub }: any) {\n return (\n

{label}

{value}

\n {sub &&

{sub}

}\n

\n );\n}\n",[],[268,302,328],"d93feeae-34aa-4c26-bfb3-6efb5c364f3a","App.tsx","019f3530-a79e-72d4-b6fa-eb9c37956012",16,["D",1785284590626],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { GarageView } from \"./GarageView.tsx\";\nimport { CarDetail } from \"./CarDetail.tsx\";\n\nfunction useHashRoute() {\n const [hash, setHash] = useState(window.location.hash);\n useEffect(() => {\n const fn = () => setHash(window.location.hash);\n window.addEventListener(\"hashchange\", fn);\n return () => window.removeEventListener(\"hashchange\", fn);\n }, []);\n return hash;\n}\n\nexport function App() {\n const route = useHashRoute();\n const carMatch = route.match(/^#\\/car\\/(\\d+)/);\n\n return (\n

\n \n 🏁\n Garage\n \n

\n {carMatch ? : }\n

\n );\n}\n",[],[268,302,336],"8530d7fc-e53c-48e0-9d35-5e1c489f4208",["D",1783303808467],[213,214,215,216,217,218],[268,302],"6aadff12-1aae-4b3c-8714-b52f9fbe42a1",["D",1783303808467],[212,219,220,221,222],[268],["D",1786630211604],[],[18,66],["D",1783304096563],[210],[18],["D",1783303808467],["D",1789524079207],{"_11":12,"_151":72},{"_11":12,"_146":147,"_71":72,"_31":70,"_148":149,"_150":30},{"_41":133,"_13":16,"_35":38,"_134":94,"_135":136,"_137":138,"_139":99,"_140":141,"_142":143,"_144":14,"_145":12},"ctx",{"_54":-5,"_172":395,"_396":397,"_398":399,"_400":30,"_401":30,"_402":30,"_403":24,"_404":-5,"_405":-7,"_406":-7,"_407":26,"_408":30,"_409":30,"_410":-5,"_411":30,"_412":30,"_413":30,"_414":-5},"ENV",{"_366":367,"_368":369,"_370":16,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend